feat: image error placeholder + scroll-to-top on navigation

Image bubbles previously used the raw filename as alt text, so a failed
asset load exposed the file name in the broken-image box. Add a reusable
BubbleImage that renders an empty alt and falls back to a neutral
placeholder (ImageOff icon) on error; use it in the album, image, and
image-with-text bubbles, and drop the filename from their aria-labels.

Also add a global ScrollToTop that resets the window on route change so
desktop navigation matches mobile (e.g. clicking a category card no
longer lands at the bottom of the new page). Hash navigations are skipped
so #post-<id> deep-link scrolling still works.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/App.tsx

@@ -10,6 +10,7 @@ import { CategoryPage } from "./pages/Category";
 import { OfficialRecommendationsPage } from "./pages/OfficialRecommendations";
 import { SearchPage } from "./pages/Search";
 import { PostRedirect } from "./pages/PostRedirect";
+import { ScrollToTop } from "./components/ScrollToTop";
 import { AboutPage } from "./pages/About";
 import Favorites from "./pages/Favorites";
 import { adminUiPrefix } from "./adminPaths";
@@ -29,6 +30,7 @@ export default function App() {
             <ImageLightboxProvider>
               <VideoPlayerProvider>
                 <BrowserRouter>
+                  <ScrollToTop />
                   <Routes>
                     <Route element={<PublicLayout />}>
                       <Route path="/" element={<Home />} />

src/components/ScrollToTop.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+/**
+ * Resets the window to the top on every route change. React Router does not
+ * restore scroll on client navigation, so without this a short new page would
+ * clamp to wherever the previous (taller) page was scrolled — e.g. landing at
+ * the bottom of a category page after clicking a card far down the home grid.
+ *
+ * Skips navigations that carry a hash (`#post-<id>`, `#categories`, …) so
+ * anchor / deep-link targets keep their own scroll handling.
+ */
+export function ScrollToTop() {
+  const { pathname, hash } = useLocation();
+
+  useEffect(() => {
+    if (hash) return;
+    window.scrollTo({ top: 0, left: 0 });
+  }, [pathname, hash]);
+
+  return null;
+}

src/components/messageStream/BubbleImage.tsx

@@ -0,0 +1,46 @@
+import { ImageOff } from "lucide-react";
+import { useEffect, useState } from "react";
+
+type BubbleImageProps = {
+  src: string | undefined;
+  className?: string;
+  loading?: "lazy" | "eager";
+};
+
+/**
+ * Thumbnail <img> for message bubbles. Renders with an empty alt (decorative)
+ * and, if the asset fails to load, falls back to a neutral placeholder instead
+ * of the browser's broken-image box — which would otherwise expose the raw
+ * file name via alt text.
+ */
+export function BubbleImage({ src, className, loading }: BubbleImageProps) {
+  const [failed, setFailed] = useState(false);
+
+  // Reset when the source changes so a reused element re-attempts the new src.
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+
+  if (!src || failed) {
+    return (
+      <div
+        className={`flex items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900 ${
+          className ?? ""
+        }`}
+        aria-hidden
+      >
+        <ImageOff className="h-8 w-8 text-neutral-600" />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt=""
+      loading={loading}
+      className={className}
+      onError={() => setFailed(true)}
+    />
+  );
+}

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
+import { BubbleImage } from "../BubbleImage";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
 import { downloadAttachment } from "../utils/downloadFile";
@@ -126,9 +127,8 @@ function ImageListDialog({
                 className="flex min-w-0 flex-1 items-center gap-3 text-left"
               >
                 <div className="h-16 w-16 shrink-0 overflow-hidden rounded-lg bg-black">
-                  <img
+                  <BubbleImage
                     src={image.thumbnailUrl ?? image.url}
-                    alt=""
                     className="h-full w-full object-cover"
                   />
                 </div>
@@ -181,11 +181,10 @@ export function AlbumBubble({ post }: { post: Post }) {
                   else openLightbox(images, i, text, post.id);
                 }}
                 className="block h-full w-full"
-                aria-label={isLastSlot ? "Open image list" : att.filename}
+                aria-label={isLastSlot ? "Open image list" : "View image"}
               >
-                <img
+                <BubbleImage
                   src={att.thumbnailUrl ?? att.url}
-                  alt={att.filename}
                   loading="lazy"
                   className="h-full w-full object-cover"
                 />

src/components/messageStream/bubbles/ImageBubble.tsx

@@ -1,5 +1,6 @@
 import type { Post } from "../../../types/post";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
+import { BubbleImage } from "../BubbleImage";
 import { useLightbox } from "../overlays/ImageLightbox";
 
 export function ImageBubble({ post }: { post: Post }) {
@@ -12,11 +13,10 @@ export function ImageBubble({ post }: { post: Post }) {
         type="button"
         onClick={() => openLightbox([att], 0, undefined, post.id)}
         className="block h-full w-full"
-        aria-label={att.filename}
+        aria-label="View image"
       >
-        <img
+        <BubbleImage
           src={att.url}
-          alt={att.filename}
           loading="lazy"
           className="h-full w-full object-cover"
         />

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -2,6 +2,7 @@ import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
+import { BubbleImage } from "../BubbleImage";
 import { autolink } from "../utils/autolink";
 import { postDisplayText } from "../utils/postText";
 
@@ -18,11 +19,10 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
           type="button"
           onClick={() => openLightbox([att], 0, text, post.id)}
           className="block h-full w-full"
-          aria-label={att.filename}
+          aria-label="View image"
         >
-          <img
+          <BubbleImage
             src={att.url}
-            alt={att.filename}
             loading="lazy"
             className="h-full w-full object-cover"
           />