— the normal pages share App's, the channel page renders its own // — so this follows whichever one is mounted. Portaled to so its fixed position is // viewport-relative regardless of transformed ancestors. export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; threshold?: number }) { const { t } = useTranslation(); // Shared, not local: PageScroller keeps the page's end clear of the button while it is up. const show = useBackToTopShown(); // Over the download tray when it is up: the tray's 1rem inset, its height, then a gap. const lift = useCornerLift(); const scrollerRef = useRef(null); // Listen on the document in the CAPTURE phase and read the scroller off the event, rather than // looking

up when this binds. Scroll events don't bubble, but they do capture — and the // lookup was a race the lazy pages lost: on the FIRST visit to the channel page its chunk is // still loading, so the Suspense fallback is on screen, there is no

to find, and the // effect gave up for good (its dep never changes again). The button then stayed dead for that // whole visit and came back only once the chunk was cached. Nothing to find, nothing to race. useEffect(() => { const onScroll = (e: Event) => { const el = e.target as HTMLElement | null; if (!el || el.tagName !== "MAIN") return; scrollerRef.current = el; backToTopShown.set(el.scrollTop > threshold); }; document.addEventListener("scroll", onScroll, { passive: true, capture: true }); return () => document.removeEventListener("scroll", onScroll, { capture: true }); }, [threshold]); // On navigation, re-read where the new page sits: usually the top (so hide), but some pages // restore their scroll position. Missing

here is now harmless — a page that hasn't // rendered hasn't scrolled either, and the listener above picks it up the moment it does. useEffect(() => { const el = document.querySelector("main"); scrollerRef.current = el; backToTopShown.set(!!el && el.scrollTop > threshold); }, [dep, threshold]); // A keyboard press hides the button it was on: the focus goes to the page it scrolled (its

// is a focus rest, not a Tab stop), not left on an invisible control. const toTop = (e: React.MouseEvent) => { const main = scrollerRef.current ?? document.querySelector("main"); main?.scrollTo({ top: 0, behavior: "smooth" }); if (e.detail === 0) main?.focus({ preventScroll: true }); }; // No aria-label/title attributes: ad-block "annoyance" cosmetic filters (e.g. Brave Shields) // commonly hide floating corner buttons via attribute selectors like [aria-label="Back to top"]. // The accessible name comes from a visually-hidden child instead, which those selectors can't match. // Shape (docs/DESIGN.md A2): round because it floats over the content, 3rem (48) on mouse and touch — // a lone corner button at a toolbar rung gets lost. return createPortal( , document.body, ); }