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>
This commit is contained in:
TerryM
2026-05-29 13:09:09 +08:00
parent 4464e6fdc5
commit 559c4f19c8
6 changed files with 80 additions and 11 deletions

View File

@@ -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"
/>