xrdwb17xu: Add the full-screen snap feed with media and quote slides on phones

src/components/AppShell.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import type { Person } from "@/lib/auth-client";
 import { useTheme } from "@/lib/use-theme";
 import { HexAvatar } from "./HexAvatar";
 import { Logo } from "./Logo";
+import { CompactLayoutContext, isCompactWidth } from "./layout-context";
 
 const iconProps = {
   viewBox: "0 0 24 24",
@@ -73,8 +74,25 @@ export interface AppShellProps {
 
 /** Signed-in bento shell (spec "Desktop and tablet layout", ADR 0001 section 3). */
 export function AppShell({ person, search, feed, discover }: AppShellProps) {
+  const root = useRef<HTMLDivElement>(null);
+  const [compact, setCompact] = useState(false);
+
+  // The CSS switches layout with a container query on .app; the feed also
+  // needs to know, because the phone feed is different markup (full-screen slides).
+  useLayoutEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    const measure = () => setCompact(isCompactWidth(el.getBoundingClientRect().width));
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   return (
-    <div className="app">
+    <CompactLayoutContext.Provider value={compact}>
+    <div className="app" ref={root} data-layout={compact ? "compact" : "wide"}>
       <main className="bento">
         <div className="bento-col bento-left">
           <AccountPanel person={person} />
@@ -86,5 +104,6 @@ export function AppShell({ person, search, feed, discover }: AppShellProps) {
         </aside>
       </main>
     </div>
+    </CompactLayoutContext.Provider>
   );
 }