feat: style

frontend/src/components/shared/AppShell.tsx

@@ -2,8 +2,7 @@ import { useEffect, useState, type ReactNode } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
-import frameTerraSvg from "@/assets/frame.themed.svg";
-import frameAzureSvg from "@/assets/frame.azure.svg";
+import frameSvg from "@/assets/frame.themed.svg";
 import NavMenu from "./NavMenu";
 
 const TITLE = `
@@ -99,8 +98,6 @@ export default function AppShell({ children }: { children: ReactNode }) {
     localStorage.setItem("micronomicon-theme", theme);
   }, [theme]);
 
-  const frameSvg = theme === "azure" ? frameAzureSvg : frameTerraSvg;
-
   const toggleTheme = () => setTheme(t => t === "terra" ? "azure" : "terra");
 
   return (
@@ -109,13 +106,21 @@ export default function AppShell({ children }: { children: ReactNode }) {
         <main className="flex-1 overflow-auto" data-scroll-root>
           <div className="relative max-w-5xl min-w-5xl mx-auto min-h-full">
             {/* Frame SVG — background */}
-            <img
-              key={theme}
-              src={frameSvg}
-              alt=""
+            <div
               aria-hidden
               className="absolute inset-0 w-full min-w-full pointer-events-none select-none"
-              style={{ zIndex: 0, objectFit: "fill" }}
+              style={{
+                zIndex: 0,
+                height: "1315px",
+                background: "var(--primary)",
+                WebkitMaskImage: `url(${frameSvg})`,
+                maskImage: `url(${frameSvg})`,
+                WebkitMaskSize: "cover",
+                maskSize: "cover",
+                WebkitMaskRepeat: "no-repeat",
+                maskRepeat: "no-repeat",
+                objectFit: "fill"
+              }}
             />
 
             {/* Top hole — ASCII title */}
@@ -147,7 +152,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
                 className="absolute z-20"
                 style={{ top: 200, left: -210 }}
               >
-                <NavMenu />
+                <NavMenu theme={theme} onToggleTheme={toggleTheme} />
               </div>
             )}
 
@@ -155,14 +160,6 @@ export default function AppShell({ children }: { children: ReactNode }) {
         </main>
         <footer className="flex items-center justify-center gap-3 text-[10px] text-muted-foreground py-4 shrink-0 tracking-widest uppercase">
           <span>Becoming with hubris · MMXXVI</span>
-          <span className="text-muted-foreground/50">│</span>
-          <button
-            onClick={toggleTheme}
-            className="hover:text-foreground transition-colors cursor-pointer"
-            title={`Switch to ${theme === "terra" ? "Azure" : "Terracotta"} theme`}
-          >
-            {theme === "terra" ? "◐ AZURE" : "◑ TERRA"}
-          </button>
         </footer>
       </div>
       <Toaster />

frontend/src/components/shared/NavMenu.tsx

@@ -5,6 +5,7 @@ import menuSvg from "@/assets/menu.min.svg";
 const NAV_ITEMS = [
   { label: "Browse", path: "/browse" },
   { label: "Compose", path: "/" },
+  { label: "Settings", path: "/settings" },
 ] as const;
 
 /**
@@ -47,7 +48,12 @@ function useSmoothScroll(scrollSelector: string, ease = 0.08) {
   return offset;
 }
 
-export default function NavMenu() {
+interface NavMenuProps {
+  theme: "terra" | "azure";
+  onToggleTheme: () => void;
+}
+
+export default function NavMenu({ theme, onToggleTheme }: NavMenuProps) {
   const navigate = useNavigate();
   const location = useLocation();
   const scrollY = useSmoothScroll("[data-scroll-root]", 0.07);
@@ -82,6 +88,15 @@ export default function NavMenu() {
           );
         })}
       </nav>
+
+      {/* Theme toggle — bottom container */}
+      <button
+        onClick={onToggleTheme}
+        className="nav-menu-theme-toggle"
+        title={`Switch to ${theme === "terra" ? "Azure" : "Terracotta"} theme`}
+      >
+        {theme === "terra" ? "◐ AZURE" : "◑ TERRA"}
+      </button>
     </div>
   );
 }