diff --git a/src/components/AssetStreamPage.tsx b/src/components/AssetStreamPage.tsx index 9402fd6..77836d8 100644 --- a/src/components/AssetStreamPage.tsx +++ b/src/components/AssetStreamPage.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from "react"; import type { PostScope } from "../types/post"; import { MessageStream } from "./messageStream/MessageStream"; import { SectionHeader } from "./SectionHeader"; @@ -8,11 +9,49 @@ type AssetStreamPageProps = { }; export function AssetStreamPage({ title, scope }: AssetStreamPageProps) { + // Telegram-style sticky page title: once the main heading scrolls up behind + // the global header, a floating pill slides in so users always know which + // page they're on. + const sentinelRef = useRef(null); + const [pinned, setPinned] = useState(false); + + useEffect(() => { + const el = sentinelRef.current; + if (!el) return; + const io = new IntersectionObserver( + ([entry]) => setPinned(!entry.isIntersecting), + // Inset the top by the sticky header height so the pill appears exactly + // when the heading disappears behind it. + { rootMargin: "-64px 0px 0px 0px", threshold: 0 }, + ); + io.observe(el); + return () => io.disconnect(); + }, []); + return (
+
+ +
+
+ + + {title} + +
+
+
);