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:
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user