rnxcmkidd: Add the viewport-fit bento shell and a dev feed preview with fixtures

src/components/App.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { loadSession, type Person } from "@/lib/auth-client";
 import { SignInForm } from "./SignInForm";
-import { Logo } from "./Logo";
+import { AppShell } from "./AppShell";
 import { Feed } from "./Feed";
 import { DiscoverRails } from "./DiscoverRails";
 import { ExpertSearch } from "./ExpertSearch";
@@ -41,28 +40,11 @@ export function App() {
     }} />;
   }
   return (
-    <main className="shell">
-      <header>
-        <Logo size={32} />
-        <div>
-          <strong>{state.person.name}</strong>
-          <span>{state.person.email}</span>
-        </div>
-      </header>
-      <div className="columns">
-        <nav className="col-left" aria-label="Main">
-          <ul>
-            <li><Link href="/" aria-current="page">Feed</Link></li>
-          </ul>
-          <ExpertSearch />
-        </nav>
-        <div className="col-center">
-          <Feed feedUserId={state.person.feedUserId} onSignedOut={() => setState({ kind: "out" })} />
-        </div>
-        <aside className="col-right" aria-label="Discover">
-          <DiscoverRails />
-        </aside>
-      </div>
-    </main>
+    <AppShell
+      person={state.person}
+      search={<ExpertSearch />}
+      feed={<Feed feedUserId={state.person.feedUserId} onSignedOut={() => setState({ kind: "out" })} />}
+      discover={<DiscoverRails />}
+    />
   );
 }