v3: generated placeholder thumbnails for pages with no preview image, and a fix for hotlink-protected ones

Thumbnails were failing in two different ways that both ended as an empty box.

Cloudflare hotlink protection answers a cross-site Referer with 403, so images
we had extracted correctly (dles.aukspot.com's og:image among them) never
rendered — every onError handler set display:none and swallowed it. The new
Thumbnail component loads with referrerPolicy="no-referrer", retries once
through /api/proxy-image for hosts that reject an empty referrer too, and only
then falls back to a placeholder.

Separately, the extraction cascade ended at the page's icon and then a guessed
/favicon.ico, so thumbnailUrl was almost never empty — just a 16x16 icon
cover-cropped into a 128x72 box. It now stops at real artwork, with faviconUrl
and accentColor (theme-color / msapplication-TileColor / mask-icon) as their own
fields. An absent thumbnailUrl finally means "no artwork", which is what makes
the placeholder possible: the site's own color mixed into the theme surface,
with its favicon centered on it, or its initial. Contrast holds for any
third-party color by construction rather than by luminance math, so nyt only
has to set --thumb-tint-strength to 0% to stay monochrome and geocities only
has to raise it. Missing accents fall back to a stable hostname-derived hue, so
rows saved before this get a tint with no backfill.

Migration 0011 reclassifies favicon-shaped thumbnailUrls on existing dumps.
The journal mosaic keeps its pull-quote and text fallbacks — the placeholder
appears there only to repair a broken image.

Also fixed: refresh silently overwrote good metadata with a failure stub, the
refresh button swallowed every error, refresh never broadcast the update,
extractBestIcon ranked SVG icons below 16x16 PNGs, and shared links with no
artwork carried no og:image at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/JournalCard.tsx

@@ -2,7 +2,6 @@ import { useContext } from "react";
 import { Link, useNavigate } from "react-router";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../model.ts";
-import { API_URL } from "../config/api.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { dumpFileUrl, dumpThumbnailUrl, dumpUrl } from "../utils/urls.ts";
 import { useAuth } from "../hooks/useAuth.ts";
@@ -11,6 +10,7 @@ import { hasQuote, hasThumbnail, type JournalShape } from "../utils/journalLayou
 import { VoteButton } from "./VoteButton.tsx";
 import { Markdown } from "./Markdown.tsx";
 import { Tooltip } from "./Tooltip.tsx";
+import Thumbnail from "./Thumbnail.tsx";
 import { PlayerContext } from "../contexts/PlayerContext.ts";
 
 export type { JournalShape };
@@ -41,31 +41,13 @@ export function JournalCard(
     navigate(dumpUrl(dump));
   }
 
-  const rawThumbnail =
+  const thumbnailUrl =
     dump.kind === "file" && dump.fileMime?.startsWith("image/")
       ? dumpFileUrl(dump, token)
       : dump.thumbnailMime
       ? dumpThumbnailUrl(dump, token)
       : (dump.richContent?.thumbnailUrl ?? null);
 
-  // Route external HTTP thumbnails through the server proxy to avoid
-  // mixed-content blocks when the frontend is served over HTTPS.
-  const thumbnailUrl = (() => {
-    if (!rawThumbnail) return null;
-    try {
-      const u = new URL(rawThumbnail);
-      if (
-        u.protocol === "http:" && u.hostname !== "localhost" &&
-        u.hostname !== "127.0.0.1"
-      ) {
-        return `${API_URL}/api/proxy-image?url=${
-          encodeURIComponent(rawThumbnail)
-        }`;
-      }
-    } catch { /* relative URL */ }
-    return rawThumbnail;
-  })();
-
   // Content mode is independent of grid footprint: a thumbnailed dump reads as
   // an image card, a thumbnail-less dump with a note becomes a pull-quote, and
   // everything else falls back to a typographic text card.
@@ -167,12 +149,13 @@ export function JournalCard(
           : handleNavigate}
       >
         <div className="journal-card-image">
-          <img
+          <Thumbnail
             src={thumbnailUrl ?? undefined}
-            alt=""
-            loading="lazy"
-            onError={(e) => {
-              (e.target as HTMLImageElement).style.visibility = "hidden";
+            placeholder={{
+              url: dump.url,
+              accentColor: dump.richContent?.accentColor,
+              faviconUrl: dump.richContent?.faviconUrl,
+              siteName: dump.richContent?.siteName,
             }}
           />
           {embedUrl && (