feat(web): app shell — masthead, contents nav, theme toggle

Root layout now wraps every page in the editorial column with a masthead (wordmark + tagline + live worker dot) and a contents-bar nav with active state via usePathname. Theme toggle stamps data-theme on <html> and persists to localStorage. Pages no longer repeat the ad-hoc nav line. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 14:09:42 +02:00
parent 656e755daf
commit fcbe34b027
4 changed files with 92 additions and 2 deletions
@@ -0,0 +1,28 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+const LINKS: { href: string; label: string }[] = [
+  { href: "/", label: "The Floor" },
+  { href: "/artists", label: "Artists" },
+  { href: "/discover", label: "Discover" },
+  { href: "/wanted", label: "Wanted" },
+];
+
+export function ContentsNav() {
+  const pathname = usePathname();
+  const active = (href: string) => (href === "/" ? pathname === "/" : pathname.startsWith(href));
+  return (
+    <nav className="contents">
+      {LINKS.map((l) => (
+        <a key={l.href} href={l.href} className={active(l.href) ? "here" : ""}>
+          {l.label}
+        </a>
+      ))}
+      <span className="sep" />
+      <a href="/settings" className={active("/settings") ? "here" : ""}>
+        Settings
+      </a>
+    </nav>
+  );
+}