feat(stream): floating page title pill when heading scrolls out

Add a Telegram-style sticky title to AssetStreamPage: an
IntersectionObserver watches a sentinel placed just under the main
heading and, once the heading scrolls past the sticky global header,
a floating pill slides in showing the current page title so users
always have a context anchor.

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<HTMLDivElement>(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 (
     <section>
       <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
         <SectionHeader title={title} />
       </div>
+      <div ref={sentinelRef} aria-hidden className="h-0" />
+
+      <div
+        className={`pointer-events-none fixed inset-x-0 top-[64px] z-30 flex justify-center px-4 transition-all duration-300 md:top-[70px] ${
+          pinned ? "translate-y-0 opacity-100" : "-translate-y-3 opacity-0"
+        }`}
+        aria-hidden={!pinned}
+      >
+        <div className="flex items-center gap-2 rounded-full border border-ark-line/80 bg-[#1c1c21]/90 px-4 py-1.5 shadow-lg shadow-black/40 backdrop-blur-md">
+          <span
+            className="h-3.5 w-[3px] shrink-0 rounded-full bg-ark-gold"
+            aria-hidden
+          />
+          <span className="truncate text-sm font-semibold text-white">
+            {title}
+          </span>
+        </div>
+      </div>
+
       <MessageStream scope={scope} />
     </section>
   );