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:
22
src/components/ScrollToTop.tsx
Normal file
22
src/components/ScrollToTop.tsx
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user