fix(nav): Back steps through sub-views and closes modals before leaving a page

In-app history only tracked the top-level page, so Back from a module sub-view
(e.g. a Messages thread) or with a modal open jumped straight to the previous
module. Add two history primitives: useHistorySubview (a module's sub-view rides
in history.state, so Back returns to its root first) and useBackToClose (a
mounted overlay occupies one history entry; Back closes the topmost, nesting-safe
so a button-close doesn't trip the modals underneath). Apply to the Messages page
views and to PlayerModal + the shared Modal. setPage now pushes a clean entry so
each page starts at its root.

frontend/src/lib/history.ts

@@ -0,0 +1,76 @@
+// In-app browser-history integration so Back/Forward step through a module's sub-views and
+// overlays before leaving the page — not straight back to the previous module.
+//
+// Two primitives share the existing page-history (App stamps `sfPage` in history.state):
+//   - useHistorySubview: a module's active sub-view rides in history.state._sub, so Back inside
+//     a module (e.g. Messages thread → list) returns to the parent view first.
+//   - useBackToClose: while an overlay/modal is mounted it occupies one history entry; Back
+//     closes the topmost one. A module-level stack keeps nesting correct — closing one modal by
+//     its own button pops exactly its entry without tripping the modals underneath.
+//
+// setPage() pushes a clean { sfPage } entry (dropping _sub/_ov), so each page starts at its root.
+import { useEffect, useRef, useState } from "react";
+
+// --- Sub-views (value carried in history.state._sub) ---------------------------------------
+export function useHistorySubview<T>(root: T): {
+  view: T;
+  open: (next: T) => void;
+  back: () => void;
+} {
+  const [view, setView] = useState<T>(() => (window.history.state?._sub as T) ?? root);
+  useEffect(() => {
+    const onPop = () => setView((window.history.state?._sub as T) ?? root);
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    view,
+    open: (next: T) => {
+      setView(next);
+      window.history.pushState({ ...window.history.state, _sub: next }, "");
+    },
+    back: () => window.history.back(),
+  };
+}
+
+// --- Overlays / modals (one history entry each, nesting-safe) -------------------------------
+const overlayStack: number[] = [];
+let overlayCounter = 0;
+// Set while we pop our OWN entry programmatically (button/ESC close) so the other overlays'
+// popstate handlers don't mistake it for a user Back and close themselves too.
+let suppressPop = false;
+
+/** While the calling component is mounted, Back (or the browser/mouse back button) closes it via
+ * `onClose` instead of navigating away. Mount the component only while the overlay is open. */
+export function useBackToClose(onClose: () => void): void {
+  const cb = useRef(onClose);
+  cb.current = onClose;
+  useEffect(() => {
+    const token = ++overlayCounter;
+    overlayStack.push(token);
+    window.history.pushState({ ...window.history.state, _ov: token }, "");
+    const onPop = () => {
+      if (suppressPop) {
+        suppressPop = false;
+        return;
+      }
+      if (overlayStack[overlayStack.length - 1] === token) {
+        overlayStack.pop();
+        cb.current();
+      }
+    };
+    window.addEventListener("popstate", onPop);
+    return () => {
+      window.removeEventListener("popstate", onPop);
+      const idx = overlayStack.lastIndexOf(token);
+      if (idx !== -1) {
+        // Closed programmatically (not via Back): drop our own history entry, and tell the
+        // remaining overlays' handlers to ignore the resulting popstate.
+        overlayStack.splice(idx, 1);
+        suppressPop = true;
+        window.history.back();
+      }
+    };
+  }, []);
+}