@morphika/andami 0.2.8 → 0.2.10

package/app/admin/layout.tsx

@@ -1,274 +1,327 @@
-"use client";
-
-import { usePathname, useRouter } from "next/navigation";
-import Link from "next/link";
-import { useState, useEffect, useRef } from "react";
-import { getSiteConfig } from "../../lib/config";
-import { ANDAMI_VERSION } from "../../lib/version";
-
-// ============================================
-// Navigation Configuration — flat list, no sections
-// ============================================
-
-const navLinks = [
-  { href: "/admin/pages", label: "Pages", icon: "file" },
-  { href: "/admin/projects", label: "Projects", icon: "film" },
-  { href: "/admin/styles", label: "Customize", icon: "palette" },
-  { href: "/admin/navigation", label: "Navigation", icon: "nav" },
-  { href: "/admin/storage", label: "Storage", icon: "harddisk" },
-  { href: "/admin/database", label: "Database", icon: "database" },
-  { href: "/admin/settings", label: "Metadata", icon: "code" },
-];
-
-// ============================================
-// Icon Component — white stroke for dark sidebar
-// ============================================
-
-function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
-  const size = 18;
-  const color = active ? "currentColor" : "currentColor";
-  void active; // active state handled by parent text color
-  void color;
-  switch (icon) {
-    case "file":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
-          <polyline points="14 2 14 8 20 8" />
-        </svg>
-      );
-    case "film":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
-          <line x1="7" y1="2" x2="7" y2="22" />
-          <line x1="17" y1="2" x2="17" y2="22" />
-          <line x1="2" y1="12" x2="22" y2="12" />
-          <line x1="2" y1="7" x2="7" y2="7" />
-          <line x1="2" y1="17" x2="7" y2="17" />
-          <line x1="17" y1="7" x2="22" y2="7" />
-          <line x1="17" y1="17" x2="22" y2="17" />
-        </svg>
-      );
-    case "palette":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" />
-          <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
-          <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
-          <circle cx="6.5" cy="12" r="0.5" fill="currentColor" />
-          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z" />
-        </svg>
-      );
-    case "nav":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <line x1="3" y1="6" x2="21" y2="6" />
-          <line x1="3" y1="12" x2="15" y2="12" />
-          <line x1="3" y1="18" x2="18" y2="18" />
-        </svg>
-      );
-    case "database":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <ellipse cx="12" cy="5" rx="9" ry="3" />
-          <path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" />
-          <path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" />
-        </svg>
-      );
-    case "harddisk":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M22 12H2" />
-          <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" />
-          <line x1="6" y1="16" x2="6.01" y2="16" strokeWidth="2" />
-          <line x1="10" y1="16" x2="10.01" y2="16" strokeWidth="2" />
-        </svg>
-      );
-    case "code":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <polyline points="16 18 22 12 16 6" />
-          <polyline points="8 6 2 12 8 18" />
-        </svg>
-      );
-    default:
-      return null;
-  }
-}
-
-// ============================================
-// Layout Component
-// ============================================
-
-export default function AdminLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  // Detect if we're inside the page builder (editing a specific page or project)
-  const isPageBuilder =
-    /^\/admin\/pages\/[^/]+$/.test(pathname) ||
-    /^\/admin\/projects\/[^/]+$/.test(pathname);
-
-  // Start collapsed if loading directly into the builder
-  const [sidebarOpen, setSidebarOpen] = useState(!isPageBuilder);
-  const prevPathname = useRef(pathname);
-
-  // Auto-collapse sidebar when entering the page builder,
-  // auto-expand when leaving it
-  useEffect(() => {
-    if (pathname === prevPathname.current) return;
-    const wasInBuilder =
-      /^\/admin\/pages\/[^/]+$/.test(prevPathname.current) ||
-      /^\/admin\/projects\/[^/]+$/.test(prevPathname.current);
-    prevPathname.current = pathname;
-
-    if (isPageBuilder && !wasInBuilder) {
-      setSidebarOpen(false);
-    } else if (!isPageBuilder && wasInBuilder) {
-      setSidebarOpen(true);
-    }
-  }, [pathname, isPageBuilder]);
-
-  // Don't show admin shell on login or setup pages
-  if (pathname === "/admin/login" || pathname === "/admin/setup") {
-    return <>{children}</>;
-  }
-
-  const handleLogout = async () => {
-    await fetch("/api/admin/auth", { method: "DELETE" });
-    router.push("/admin/login");
-    router.refresh();
-  };
-
-  // Check if a link is active
-  const isLinkActive = (href: string) => {
-    return pathname === href || pathname.startsWith(href + "/");
-  };
-
-  return (
-    <div data-admin className="flex h-screen bg-[#f8f8f8]" style={{ fontFamily: "Inter, system-ui, sans-serif" }}>
-      {/* Sidebar — Dark */}
-      <aside
-        className={`flex flex-col bg-[#141414] transition-all duration-200 ${
-          sidebarOpen ? "w-56" : "w-16"
-        }`}
-      >
-        {/* Logo */}
-        <div className="flex h-14 items-center justify-between px-4 border-b border-white/[0.06]">
-          {sidebarOpen && (
-            <span className="text-[10px] font-semibold tracking-widest uppercase text-white/90 leading-tight">
-              Morphika Andami <span className="text-white/40 font-normal">v{ANDAMI_VERSION}</span><br />
-              <span className="text-white/50 font-normal">{getSiteConfig().name}</span>
-            </span>
-          )}
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="text-white/40 hover:text-white/70 transition-colors p-1 rounded-md hover:bg-white/[0.06]"
-            aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-              {sidebarOpen ? (
-                <polyline points="11 17 6 12 11 7" />
-              ) : (
-                <polyline points="13 7 18 12 13 17" />
-              )}
-            </svg>
-          </button>
-        </div>
-
-        {/* Nav links — flat list */}
-        <nav className="flex-1 py-3 px-2 overflow-y-auto">
-          {navLinks.map((link) => {
-            const isActive = isLinkActive(link.href);
-            return (
-              <Link
-                key={link.href}
-                href={link.href}
-                className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all mb-0.5 ${
-                  isActive
-                    ? "bg-white/[0.08] text-white font-medium"
-                    : "text-white/60 hover:bg-white/[0.06] hover:text-white/90"
-                } ${!sidebarOpen ? "justify-center px-0" : ""}`}
-                title={!sidebarOpen ? link.label : undefined}
-              >
-                <NavIcon icon={link.icon} active={isActive} />
-                {sidebarOpen && (
-                  <span className="text-[13px]">{link.label}</span>
-                )}
-              </Link>
-            );
-          })}
-        </nav>
-
-        {/* Setup Wizard */}
-        <div className="px-2 mb-0.5">
-          <Link
-            href="/admin/setup"
-            className={`flex items-center gap-3 text-white/40 hover:text-white/80 transition-colors px-3 py-2 rounded-lg hover:bg-white/[0.06] w-full text-sm ${
-              !sidebarOpen ? "justify-center px-0" : ""
-            }`}
-            title="Setup Wizard"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z" />
-            </svg>
-            {sidebarOpen && <span className="text-[13px]">Setup Wizard</span>}
-          </Link>
-        </div>
-
-        {/* View Site */}
-        <div className="px-2 mb-1">
-          <Link
-            href="/"
-            target="_blank"
-            className={`flex items-center gap-3 text-white/40 hover:text-white/80 transition-colors px-3 py-2 rounded-lg hover:bg-white/[0.06] w-full text-sm ${
-              !sidebarOpen ? "justify-center px-0" : ""
-            }`}
-            title="View Site"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              <polyline points="15 3 21 3 21 9" />
-              <line x1="10" y1="14" x2="21" y2="3" />
-            </svg>
-            {sidebarOpen && <span className="text-[13px]">View Site</span>}
-          </Link>
-        </div>
-
-        {/* Logout */}
-        <div className="border-t border-white/[0.06] p-2">
-          <button
-            onClick={handleLogout}
-            className={`flex items-center gap-3 text-white/40 hover:text-red-400 transition-colors px-3 py-2 rounded-lg hover:bg-red-500/10 w-full text-sm ${
-              !sidebarOpen ? "justify-center px-0" : ""
-            }`}
-            title="Logout"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-              <polyline points="16 17 21 12 16 7" />
-              <line x1="21" y1="12" x2="9" y2="12" />
-            </svg>
-            {sidebarOpen && <span className="text-[13px]">Logout</span>}
-          </button>
-        </div>
-      </aside>
-
-      {/* Main content area — no top header bar, pages have their own titles */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <main className={`flex-1 ${
-          isPageBuilder
-            ? "overflow-hidden"
-            : "overflow-y-auto p-8 bg-[#f8f8f8]"
-        }`}>
-          {children}
-        </main>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { useState, useEffect, useRef } from "react";
+import { getSiteConfig } from "../../lib/config";
+import { ANDAMI_VERSION } from "../../lib/version";
+
+// ============================================
+// Navigation Configuration — grouped by section
+// ============================================
+
+const workspaceLinks = [
+  { href: "/admin/pages", label: "Pages", icon: "file" },
+  { href: "/admin/projects", label: "Projects", icon: "film" },
+  { href: "/admin/styles", label: "Customize", icon: "palette" },
+  { href: "/admin/navigation", label: "Navigation", icon: "nav" },
+];
+
+const systemLinks = [
+  { href: "/admin/storage", label: "Storage", icon: "harddisk" },
+  { href: "/admin/database", label: "Database", icon: "database" },
+  { href: "/admin/settings", label: "Metadata", icon: "code" },
+  { href: "/admin/backups", label: "Backups", icon: "cloud-download" },
+];
+
+// ============================================
+// Icon Component — Mockup A set (Storage kept from original)
+// ============================================
+
+function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
+  const size = 18;
+  void active; // active state handled by parent text color
+  switch (icon) {
+    case "file":
+      // Mockup A — document with folded corner
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <path d="M14 2v6h6" />
+        </svg>
+      );
+    case "film":
+      // Mockup A — 2x2 rounded grid (Projects)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="3" y="3" width="7" height="7" rx="1.5" />
+          <rect x="14" y="3" width="7" height="7" rx="1.5" />
+          <rect x="3" y="14" width="7" height="7" rx="1.5" />
+          <rect x="14" y="14" width="7" height="7" rx="1.5" />
+        </svg>
+      );
+    case "palette":
+      // Mockup A — minimal palette face (Customize)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="9" />
+          <circle cx="8" cy="10" r="1" />
+          <circle cx="16" cy="10" r="1" />
+          <circle cx="12" cy="15" r="1" />
+        </svg>
+      );
+    case "nav":
+      // Mockup A — 3 horizontal lines (Navigation)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="4" y1="7" x2="20" y2="7" />
+          <line x1="4" y1="12" x2="20" y2="12" />
+          <line x1="4" y1="17" x2="14" y2="17" />
+        </svg>
+      );
+    case "database":
+      // Mockup A — 3-tier cylinder (Database)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <ellipse cx="12" cy="6" rx="8" ry="3" />
+          <path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6" />
+          <path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
+        </svg>
+      );
+    case "harddisk":
+      // Kept as-is per user request (Storage)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M22 12H2" />
+          <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" />
+          <line x1="6" y1="16" x2="6.01" y2="16" strokeWidth="2" />
+          <line x1="10" y1="16" x2="10.01" y2="16" strokeWidth="2" />
+        </svg>
+      );
+    case "code":
+      // Mockup A — < > brackets (Metadata)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="8 6 3 12 8 18" />
+          <polyline points="16 6 21 12 16 18" />
+        </svg>
+      );
+    case "cloud-download":
+      // Mockup A — cloud with down arrow (Backups)
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M20 16.5A4.5 4.5 0 0 0 17 8.5 7 7 0 0 0 4 9a5 5 0 0 0 1 9.9" />
+          <path d="M12 12v8" />
+          <path d="M8.5 16.5L12 20l3.5-3.5" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+// ============================================
+// Layout Component
+// ============================================
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // Detect if we're inside the page builder (editing a specific page or project)
+  const isPageBuilder =
+    /^\/admin\/pages\/[^/]+$/.test(pathname) ||
+    /^\/admin\/projects\/[^/]+$/.test(pathname);
+
+  // Start collapsed if loading directly into the builder
+  const [sidebarOpen, setSidebarOpen] = useState(!isPageBuilder);
+  const prevPathname = useRef(pathname);
+
+  // Auto-collapse sidebar when entering the page builder,
+  // auto-expand when leaving it
+  useEffect(() => {
+    if (pathname === prevPathname.current) return;
+    const wasInBuilder =
+      /^\/admin\/pages\/[^/]+$/.test(prevPathname.current) ||
+      /^\/admin\/projects\/[^/]+$/.test(prevPathname.current);
+    prevPathname.current = pathname;
+
+    if (isPageBuilder && !wasInBuilder) {
+      setSidebarOpen(false);
+    } else if (!isPageBuilder && wasInBuilder) {
+      setSidebarOpen(true);
+    }
+  }, [pathname, isPageBuilder]);
+
+  // Don't show admin shell on login or setup pages
+  if (pathname === "/admin/login" || pathname === "/admin/setup") {
+    return <>{children}</>;
+  }
+
+  const handleLogout = async () => {
+    await fetch("/api/admin/auth", { method: "DELETE" });
+    router.push("/admin/login");
+    router.refresh();
+  };
+
+  // Check if a link is active
+  const isLinkActive = (href: string) => {
+    return pathname === href || pathname.startsWith(href + "/");
+  };
+
+  // Reusable nav link renderer for workspace/system sections
+  const renderNavLink = (link: { href: string; label: string; icon: string }) => {
+    const isActive = isLinkActive(link.href);
+    return (
+      <Link
+        key={link.href}
+        href={link.href}
+        className={`relative flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors mb-0.5 ${
+          isActive
+            ? "bg-gradient-to-r from-[rgba(7,107,255,0.14)] to-[rgba(7,107,255,0.02)] text-white shadow-[inset_0_0_0_1px_rgba(7,107,255,0.18)]"
+            : "text-white/65 hover:bg-white/[0.035] hover:text-white"
+        } ${!sidebarOpen ? "justify-center px-0" : ""}`}
+        title={!sidebarOpen ? link.label : undefined}
+      >
+        {isActive && (
+          <span
+            aria-hidden
+            className="pointer-events-none absolute left-[-8px] top-2 bottom-2 w-[3px] rounded-r-full bg-[#076bff] shadow-[0_0_12px_rgba(7,107,255,0.45)]"
+          />
+        )}
+        <span className={`shrink-0 transition-colors ${isActive ? "text-[#076bff]" : ""}`}>
+          <NavIcon icon={link.icon} active={isActive} />
+        </span>
+        {sidebarOpen && <span className="text-[13px]">{link.label}</span>}
+      </Link>
+    );
+  };
+
+  // Shared class for non-primary utility links (Setup Wizard, View Site, Log out)
+  const utilityItemBase = `flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors mb-0.5 ${
+    !sidebarOpen ? "justify-center px-0" : ""
+  }`;
+
+  return (
+    <div data-admin className="flex h-screen bg-[#f8f8f8]" style={{ fontFamily: "Inter, system-ui, sans-serif" }}>
+      {/* Sidebar — Dark (refined) */}
+      <aside
+        className={`flex flex-col bg-gradient-to-b from-[#1e2025] to-[#1a1c20] border-r border-white/[0.07] transition-all duration-200 ${
+          sidebarOpen ? "w-56" : "w-16"
+        }`}
+      >
+        {/* Workspace header */}
+        <div
+          className={`flex h-14 items-center border-b border-white/[0.06] ${
+            sidebarOpen ? "justify-between px-4" : "justify-center px-0"
+          }`}
+        >
+          {sidebarOpen && (
+            <div className="flex min-w-0 flex-col leading-tight">
+              <div className="flex items-center gap-1.5">
+                <span className="whitespace-nowrap text-[11.5px] font-semibold tracking-wide text-white">
+                  Morphika Andami
+                </span>
+                <span className="rounded-full border border-[rgba(7,107,255,0.2)] bg-[rgba(7,107,255,0.12)] px-1.5 text-[9px] font-semibold leading-[15px] tracking-[0.08em] text-[#9cc2ff]">
+                  v{ANDAMI_VERSION}
+                </span>
+              </div>
+              <span className="mt-0.5 truncate text-[10.5px] text-white/45">
+                {getSiteConfig().name}
+              </span>
+            </div>
+          )}
+          <button
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            className="shrink-0 rounded-md p-1 text-white/40 transition-colors hover:bg-white/[0.05] hover:text-white/75"
+            aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+              {sidebarOpen ? (
+                <polyline points="11 17 6 12 11 7" />
+              ) : (
+                <polyline points="13 7 18 12 13 17" />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Nav — grouped into Workspace + System */}
+        <nav className="flex-1 overflow-y-auto px-2 py-3">
+          {sidebarOpen && (
+            <div className="px-3 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
+              Workspace
+            </div>
+          )}
+          {workspaceLinks.map(renderNavLink)}
+
+          {sidebarOpen ? (
+            <div className="px-3 pt-4 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
+              System
+            </div>
+          ) : (
+            <div className="mx-3 my-2 h-px bg-white/[0.06]" aria-hidden />
+          )}
+          {systemLinks.map(renderNavLink)}
+        </nav>
+
+        {/* Footer — Utility group */}
+        <div className="px-2 pb-2">
+          {sidebarOpen ? (
+            <div className="px-3 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
+              Utility
+            </div>
+          ) : (
+            <div className="mx-3 my-2 h-px bg-white/[0.06]" aria-hidden />
+          )}
+
+          {/* Setup Wizard */}
+          <Link
+            href="/admin/setup"
+            className={`${utilityItemBase} text-white/50 hover:bg-white/[0.035] hover:text-white`}
+            title="Setup Wizard"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+              <path d="M14.7 6.3a4 4 0 0 0-5.6 5.6l-6 6a1.5 1.5 0 0 0 2.1 2.1l6-6a4 4 0 0 0 5.6-5.6l-2.2 2.2-2.1-2.1z" />
+            </svg>
+            {sidebarOpen && <span className="text-[13px]">Setup Wizard</span>}
+          </Link>
+
+          {/* View Site */}
+          <Link
+            href="/"
+            target="_blank"
+            className={`${utilityItemBase} text-white/50 hover:bg-white/[0.035] hover:text-white`}
+            title="View Site"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+              <path d="M15 3h6v6" />
+              <path d="M10 14L21 3" />
+              <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
+            </svg>
+            {sidebarOpen && <span className="text-[13px]">View Site</span>}
+          </Link>
+
+          {/* Log out */}
+          <button
+            onClick={handleLogout}
+            className={`${utilityItemBase} w-full text-white/50 hover:bg-red-500/[0.08] hover:text-red-300`}
+            title="Log out"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <polyline points="16 17 21 12 16 7" />
+              <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+            {sidebarOpen && <span className="text-[13px]">Log out</span>}
+          </button>
+        </div>
+      </aside>
+
+      {/* Main content area — no top header bar, pages have their own titles */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <main className={`flex-1 ${
+          isPageBuilder
+            ? "overflow-hidden"
+            : "overflow-y-auto p-8 bg-[#f8f8f8]"
+        }`}>
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}