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/ThumbnailPlaceholder.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { proxyImageUrl } from "../utils/proxyImage.ts";
+import { initialsFor, tintFor } from "../utils/thumbnailTint.ts";
+
+interface ThumbnailPlaceholderProps {
+  /** The dumped URL — seeds the fallback hue and the initial. */
+  url?: string;
+  /** The target page's declared brand color, if it had one. */
+  accentColor?: string;
+  /** The target page's icon, drawn contained over the tint. */
+  faviconUrl?: string;
+  /** Preferred source for the initial when there's no favicon. */
+  siteName?: string;
+  className?: string;
+}
+
+/**
+ * Stand-in artwork for pages that offer no preview image: the site's own color
+ * washed over the theme surface, with its favicon centered on top — or its
+ * initial when the favicon is missing or fails to load.
+ *
+ * Fills whatever box it's placed in, so the same component serves the 36px
+ * compact thumbnail, the 128×72 feed preview and a 2×2 mosaic tile.
+ */
+export default function ThumbnailPlaceholder(
+  { url, accentColor, faviconUrl, siteName, className }:
+    ThumbnailPlaceholderProps,
+) {
+  const [iconFailed, setIconFailed] = useState(false);
+
+  // A different icon is a fresh thing to try — clear the prior failure during
+  // render rather than in an effect (same shape as Avatar.tsx).
+  const [prevIcon, setPrevIcon] = useState(faviconUrl);
+  if (prevIcon !== faviconUrl) {
+    setPrevIcon(faviconUrl);
+    setIconFailed(false);
+  }
+
+  const style = { "--thumb-tint": tintFor({ accentColor, url }) } as
+    React.CSSProperties;
+
+  return (
+    <div
+      className={`thumb-placeholder${className ? ` ${className}` : ""}`}
+      style={style}
+      aria-hidden="true"
+    >
+      {faviconUrl && !iconFailed
+        ? (
+          <img
+            src={proxyImageUrl(faviconUrl)}
+            alt=""
+            loading="lazy"
+            referrerPolicy="no-referrer"
+            className="thumb-placeholder-icon"
+            onError={() => setIconFailed(true)}
+          />
+        )
+        : (
+          <span className="thumb-placeholder-initials">
+            {initialsFor(siteName, url)}
+          </span>
+        )}
+    </div>
+  );
+}