Add buttons to trigger re-scrape a tweet and to open on twitter.com

- also fix link preview image sizing a bit

doc/TODO.txt

@@ -97,8 +97,8 @@ TOOD: login-routes-tests
 
 TODO: web-ui-downloading
 - web UI needs buttons to trigger a scrape / refresh manually
-
-TODO: web-ui-search
+	- user feed
+	- timeline
 
 TODO: webserver-session-arg-active-user
 - make the active user get set on initializing the Application object if a --session flag is given

internal/webserver/handler_tweet_detail.go

@@ -4,8 +4,8 @@ import (
 	"errors"
 	"fmt"
 	"net/http"
-	"path"
 	"strconv"
+	"strings"
 
 	"gitlab.com/offline-twitter/twitter_offline_engine/pkg/persistence"
 	"gitlab.com/offline-twitter/twitter_offline_engine/pkg/scraper"
@@ -39,10 +39,11 @@ func (t TweetDetailData) FocusedTweetID() scraper.TweetID {
 
 func (app *Application) TweetDetail(w http.ResponseWriter, r *http.Request) {
 	app.traceLog.Printf("'TweetDetail' handler (path: %q)", r.URL.Path)
-	_, tail := path.Split(r.URL.Path)
-	val, err := strconv.Atoi(tail)
+
+	parts := strings.Split(strings.Trim(r.URL.Path, "/"), "/")
+	val, err := strconv.Atoi(parts[1])
 	if err != nil {
-		app.error_400_with_message(w, fmt.Sprintf("Invalid tweet ID: %q", tail))
+		app.error_400_with_message(w, fmt.Sprintf("Invalid tweet ID: %q", parts[1]))
 		return
 	}
 	tweet_id := scraper.TweetID(val)
@@ -74,7 +75,7 @@ func (app *Application) TweetDetail(w http.ResponseWriter, r *http.Request) {
 		} else {
 			panic(err)
 		}
-	} else if !tweet.IsConversationScraped {
+	} else if !tweet.IsConversationScraped || (len(parts) > 2 && parts[2] == "scrape") {
 		try_scrape_tweet() // If it fails, we can still render it (not 404)
 	}
 

internal/webserver/static/styles.css

@@ -171,6 +171,7 @@ a.entity {
 }
 img.embedded-link-preview {
     border-radius: 1em;
+    max-width: 100%;
 }
 .embedded-link-description {
     color: var(--color-twitter-text-gray);
@@ -312,6 +313,7 @@ ul.quick-links {
 
 .quick-link span {
     padding: 0 0.3em;
+    white-space: nowrap;
 }
 
 .followers-count, .following-count {
@@ -534,3 +536,21 @@ ul.space-participants-list li {
 .space-participants-list .author-info .profile-image {
     font-size: 0.8em;
 }
+
+.dropdown {
+    position: relative;
+}
+ul.dropdown-items {
+    list-style: none;
+    position: absolute;
+    top: 2em;
+    width: fit-content;
+    padding: 0.3em;
+    background-color: var(--color-twitter-off-white);
+    outline: 1px solid var(--color-outline-gray);
+    border-radius: 0.3em;
+    visibility: hidden;
+}
+.dropdown-button:focus + .dropdown-items, .dropdown-items:hover {
+    visibility: visible;
+}

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -69,7 +69,7 @@
             class="embedded-link rounded-gray-outline unstyled-link"
             target="_blank"
             href="{{.Text}}"
-            style="width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}">
+            style="max-width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}">
             <img class="embedded-link-preview" src="/content/link_preview_images/{{.ThumbnailLocalPath}}"/>
             <h3 class="embedded-link-title">{{.Title}}</h3>
             <p class="embedded-link-description">{{.Description}}</p>
@@ -93,7 +93,7 @@
         {{end}}
       </div>
 
-      <div class="interactions-bar">
+      <div class="interactions-bar row">
 <!--         <div class="interaction-stat">
           {template "quote-tweet-icon"}
           <span>{{$main_tweet.NumQuoteTweets}}</span>
@@ -111,6 +111,25 @@
           <span>{{$main_tweet.NumLikes}}</span>
         </div>
         <div class="dummy"></div>
+        <div class="dropdown" hx-trigger="click consume">
+          <button class="dropdown-button">
+            <img class="svg-icon" src="/static/icons/more.svg" />
+          </button>
+          <ul class="dropdown-items">
+            <a class="unstyled-link" target="_blank" href="https://twitter.com/{{$author.Handle}}/status/{{$main_tweet.ID}}">
+              <li class="quick-link">
+                <img class="svg-icon" src="/static/icons/external-link.svg" />
+                <span>Open on twitter.com</span>
+              </li>
+            </a>
+            <a class="unstyled-link" target="_blank" hx-post="/tweet/{{$main_tweet.ID}}/scrape" hx-target="body">
+              <li class="quick-link">
+                <img class="svg-icon" src="/static/icons/download.svg" />
+                <span>Re-fetch tweet</span>
+              </li>
+            </a>
+          </ul>
+        </div>
       </div>
     </span>
   </div>