Initial WatchLink scaffold

src/components/app-shell.tsx

@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { Gauge, MonitorPlay, Shield, UserRoundPlus, UsersRound } from "lucide-react";
+
+const nav = [
+  { href: "/dashboard", label: "Dashboard", icon: Gauge },
+  { href: "/rooms/@admin", label: "Rooms", icon: MonitorPlay },
+  { href: "/friends", label: "Friends", icon: UsersRound },
+  { href: "/admin", label: "Admin", icon: Shield },
+  { href: "/setup", label: "Setup", icon: UserRoundPlus }
+];
+
+export function AppShell({ children, active = "Dashboard" }: { children: React.ReactNode; active?: string }) {
+  return (
+    <div className="app-shell">
+      <aside className="sidebar">
+        <Link className="brand" href="/dashboard">
+          <span className="brand-mark">WL</span>
+          <span>WatchLink</span>
+        </Link>
+        <nav className="nav-list" aria-label="Primary">
+          {nav.map((item) => {
+            const Icon = item.icon;
+            return (
+              <Link key={item.href} href={item.href} className={`nav-item ${active === item.label ? "active" : ""}`}>
+                <Icon size={17} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+      <main className="main">{children}</main>
+    </div>
+  );
+}