feat: added a twist

frontend/src/components/shared/AppShell.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import NavBar from "./NavBar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Toaster } from "@/components/ui/sonner";
+
+export default function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <TooltipProvider>
+      <div className="flex flex-col h-screen bg-background text-foreground">
+        <NavBar />
+        <main className="flex-1 overflow-auto">{children}</main>
+      </div>
+      <Toaster />
+    </TooltipProvider>
+  );
+}

frontend/src/components/shared/NavBar.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { toast } from "sonner";
+import { RotateCcw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+const navLink = ({ isActive }: { isActive: boolean }) =>
+  cn(
+    "px-3 py-1.5 text-sm rounded-md transition-colors",
+    isActive
+      ? "bg-accent text-accent-foreground font-medium"
+      : "text-muted-foreground hover:text-foreground hover:bg-accent"
+  );
+
+export default function NavBar() {
+  const [restartOpen, setRestartOpen] = useState(false);
+  const [restarting, setRestarting] = useState(false);
+
+  const handleRestart = async () => {
+    setRestarting(true);
+    try {
+      const res = await fetch("/api/restart", { method: "POST" });
+      if (!res.ok) throw new Error(await res.text());
+      toast.success("NomadNet restarted");
+    } catch (e) {
+      toast.error(`Restart failed: ${e}`);
+    } finally {
+      setRestarting(false);
+      setRestartOpen(false);
+    }
+  };
+
+  return (
+    <nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0">
+      <span className="font-bold mr-6 text-foreground">Micronomicon</span>
+
+      <NavLink to="/" end className={navLink}>
+        Dashboard
+      </NavLink>
+      <NavLink to="/editor/new" className={navLink}>
+        New Page
+      </NavLink>
+      <NavLink to="/graph" className={navLink}>
+        Graph
+      </NavLink>
+
+      <div className="flex-1" />
+
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={restarting}
+        onClick={() => setRestartOpen(true)}
+      >
+        <RotateCcw className="w-4 h-4 mr-2" />
+        Restart NomadNet
+      </Button>
+
+      <AlertDialog open={restartOpen} onOpenChange={setRestartOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Restart NomadNet?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will briefly interrupt mesh network connectivity.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleRestart}>
+              Restart
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </nav>
+  );
+}