@morphika/andami 0.1.3 → 0.1.6

package/app/(site)/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import { cache } from "react";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
 import { client } from "../../../lib/sanity/client";
@@ -16,19 +17,21 @@ interface PageProps {
   params: Promise<{ slug: string }>;
 }
 
-async function getPageBySlug(slug: string): Promise<Page | null> {
+// CPU Audit Fix 3: React cache() deduplicates this call within a single
+// render pass — generateMetadata() and the page component share one fetch.
+const getPageBySlug = cache(async (slug: string): Promise<Page | null> => {
   try {
     return await client.fetch<Page>(publishedPageBySlugQuery, { slug });
   } catch (error) {
     console.error(`[Page] Failed to fetch page "${slug}":`, error);
     return null;
   }
-}
+});
 
 export async function generateStaticParams() {
   try {
-    const slugs: string[] = await client.fetch(allPageSlugsQuery);
-    return slugs.map((slug) => ({ slug }));
+    const slugs = await client.fetch<string[] | null>(allPageSlugsQuery);
+    return (slugs ?? []).filter(Boolean).map((slug) => ({ slug }));
   } catch {
     return [];
   }

package/app/(site)/layout.tsx

@@ -1,3 +1,4 @@
+import { cache } from "react";
 import { client } from "../../lib/sanity/client";
 import { siteSettingsQuery } from "../../lib/sanity/queries";
 import type { SiteSettings } from "../../lib/sanity/types";
@@ -11,14 +12,15 @@ import CustomCursor from "../../components/ui/CustomCursor";
 import ScrollToTop from "../../components/ui/ScrollToTop";
 import PortfolioTracker from "../../components/ui/PortfolioTracker";
 
-async function getSiteSettings(): Promise<SiteSettings | null> {
+// CPU Audit Fix 3: React cache() deduplicates within a render pass.
+const getSiteSettings = cache(async (): Promise<SiteSettings | null> => {
   try {
     return await client.fetch<SiteSettings>(siteSettingsQuery);
   } catch (error) {
     console.error("[SiteLayout] Failed to fetch site settings:", error);
     return null;
   }
-}
+});
 
 export default async function SiteLayout({
   children,
@@ -39,6 +41,7 @@ export default async function SiteLayout({
               <Navbar
                 navItems={settings?.nav_items}
                 design={settings?.nav_design}
+                mobileDesign={settings?.nav_mobile_design}
               />
               <main className="flex-1">{children}</main>
               {cfg.features.customCursor && <CustomCursor />}

package/app/(site)/page.tsx

@@ -24,10 +24,10 @@ export default async function HomePage() {
     return (
       <main className="flex min-h-screen items-center justify-center bg-brand-dark">
         <div className="text-center">
-          <h1 className="font-mono text-2xl uppercase tracking-widest text-brand-accent">
+          <h1 className="font-sans text-2xl uppercase tracking-widest text-brand-accent">
             {cfg.name}
           </h1>
-          <p className="mt-4 font-mono text-sm uppercase tracking-wider text-brand-muted">
+          <p className="mt-4 font-sans text-sm uppercase tracking-wider text-brand-muted">
             Coming Soon
           </p>
         </div>

package/app/(site)/preview/page.tsx

@@ -53,7 +53,7 @@ function PreviewContent() {
   if (loading) {
     return (
       <div className="flex min-h-[50vh] items-center justify-center">
-        <p className="font-mono text-sm text-neutral-400 animate-pulse">
+        <p className="font-sans text-sm text-neutral-400 animate-pulse">
           Loading preview...
         </p>
       </div>
@@ -64,10 +64,10 @@ function PreviewContent() {
     return (
       <div className="flex min-h-[50vh] items-center justify-center">
         <div className="text-center">
-          <p className="font-mono text-sm text-[var(--admin-error)]">
+          <p className="font-sans text-sm text-[var(--admin-error)]">
             {error || "Page not found"}
           </p>
-          <p className="mt-2 font-mono text-xs text-neutral-400">
+          <p className="mt-2 font-sans text-xs text-neutral-400">
             Make sure the page has been saved at least once.
           </p>
         </div>
@@ -87,7 +87,7 @@ export default function PreviewPage() {
     <Suspense
       fallback={
         <div className="flex min-h-[50vh] items-center justify-center">
-          <p className="font-mono text-sm text-neutral-400 animate-pulse">
+          <p className="font-sans text-sm text-neutral-400 animate-pulse">
             Loading preview...
           </p>
         </div>

package/app/(site)/work/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import { cache } from "react";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
 import { client } from "../../../../lib/sanity/client";
@@ -17,19 +18,21 @@ interface ProjectPageProps {
   params: Promise<{ slug: string }>;
 }
 
-async function getProjectPage(slug: string): Promise<Page | null> {
+// CPU Audit Fix 3: React cache() deduplicates this call within a single
+// render pass — generateMetadata() and the page component share one fetch.
+const getProjectPage = cache(async (slug: string): Promise<Page | null> => {
   try {
     return await client.fetch<Page>(publishedProjectBySlugQuery, { slug });
   } catch (error) {
     console.error(`[Project] Failed to fetch project "${slug}":`, error);
     return null;
   }
-}
+});
 
 export async function generateStaticParams() {
   try {
-    const slugs = await client.fetch<string[]>(allProjectSlugsQuery);
-    return slugs.map((slug) => ({ slug }));
+    const slugs = await client.fetch<string[] | null>(allProjectSlugsQuery);
+    return (slugs ?? []).filter(Boolean).map((slug) => ({ slug }));
   } catch {
     return [];
   }

package/app/admin/layout.tsx

@@ -4,6 +4,7 @@ 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
@@ -161,8 +162,8 @@ export default function AdminLayout({
         <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">
-              {getSiteConfig().name.split(" ")[0]}<br />
-              <span className="text-white/50 font-normal">Web Builder</span>
+              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

package/app/admin/login/page.tsx

@@ -42,10 +42,10 @@ function LoginForm() {
     <div className="flex min-h-screen items-center justify-center bg-[#0a0a0a]">
       <div className="w-full max-w-sm px-6">
         <div className="mb-8 text-center">
-          <h1 className="font-mono text-xl uppercase tracking-widest text-white">
+          <h1 className="font-sans text-xl uppercase tracking-widest text-white">
             {getSiteConfig().adminTitle}
           </h1>
-          <p className="mt-2 font-mono text-xs uppercase tracking-wider text-neutral-500">
+          <p className="mt-2 font-sans text-xs uppercase tracking-wider text-neutral-500">
             Enter password to continue
           </p>
         </div>
@@ -58,18 +58,18 @@ function LoginForm() {
               onChange={(e) => setPassword(e.target.value)}
               placeholder="Password"
               autoFocus
-              className="w-full rounded-none border border-neutral-700 bg-transparent px-4 py-3 font-mono text-sm text-white placeholder-neutral-600 outline-none transition-colors focus:border-neutral-400"
+              className="w-full rounded-none border border-neutral-700 bg-transparent px-4 py-3 font-sans text-sm text-white placeholder-neutral-600 outline-none transition-colors focus:border-neutral-400"
             />
           </div>
 
           {error && (
-            <p className="font-mono text-xs text-red-500">{error}</p>
+            <p className="font-sans text-xs text-red-500">{error}</p>
           )}
 
           <button
             type="submit"
             disabled={isLoading || !password}
-            className="w-full border border-white bg-white px-4 py-3 font-mono text-sm uppercase tracking-wider text-black transition-all hover:bg-transparent hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
+            className="w-full border border-white bg-white px-4 py-3 font-sans text-sm uppercase tracking-wider text-black transition-all hover:bg-transparent hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
           >
             {isLoading ? "..." : "Login"}
           </button>

package/app/admin/navigation/page.tsx

@@ -1,157 +1,255 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { csrfHeaders } from "../../../lib/csrf-client";
-import { NavBuilder } from "../../../components/admin/nav-builder";
-import { revalidateSite } from "../../../lib/revalidate";
-import type { NavItem, NavDesign, SiteSettings } from "../../../lib/sanity/types";
-
-/**
- * /admin/navigation — Navigation editing.
- * Session 129: Footer tab removed — footers are now custom sections placed freely by the user.
- */
-export default function AdminNavigationPage() {
-  const [settings, setSettings] = useState<SiteSettings | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [savingNav, setSavingNav] = useState(false);
-  const [message, setMessage] = useState<{
-    type: "success" | "error";
-    text: string;
-  } | null>(null);
-
-  // ── Load settings ──
-  const fetchSettings = useCallback(async () => {
-    try {
-      const res = await fetch("/api/admin/settings");
-      if (res.ok) {
-        const data = await res.json();
-        setSettings(data.settings || null);
-      }
-    } catch {
-      setMessage({ type: "error", text: "Failed to load navigation" });
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchSettings();
-  }, [fetchSettings]);
-
-  // ── Auto-dismiss messages ──
-  useEffect(() => {
-    if (!message) return;
-    const timer = setTimeout(() => setMessage(null), 5000);
-    return () => clearTimeout(timer);
-  }, [message]);
-
-  // ── Save handlers ──
-  const handleSaveNavBuilder = async (navItems: NavItem[], navDesign: NavDesign) => {
-    setSavingNav(true);
-    setMessage(null);
-    try {
-      // Sanitize items for Sanity
-      const sanitizedItems = navItems.map((item) => ({
-        _key: item._key,
-        type: item.type || "menu-item",
-        label: item.label,
-        ...(item.logo_image ? { logo_image: item.logo_image } : {}),
-        link_type: item.link_type,
-        ...(item.link_type === "internal" && item.internal_page
-          ? { internal_page: { _ref: item.internal_page._id } }
-          : {}),
-        ...(item.link_type === "external"
-          ? { external_url: item.external_url }
-          : {}),
-        ...(item.link_type === "content" ? {
-          ...(item.content_type ? { content_type: item.content_type } : {}),
-          ...(item.content_asset ? { content_asset: item.content_asset } : {}),
-          ...(item.content_url ? { content_url: item.content_url } : {}),
-        } : {}),
-        visible: item.visible,
-        grid_column: item.grid_column,
-        column_span: item.column_span || 1,
-        ...(item.style_overrides && Object.keys(item.style_overrides).length > 0
-          ? { style_overrides: item.style_overrides }
-          : {}),
-      }));
-
-      // Save nav items
-      const navRes = await fetch("/api/admin/settings", {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...csrfHeaders() },
-        body: JSON.stringify({ section: "navigation", data: { nav_items: sanitizedItems } }),
-      });
-      if (!navRes.ok) {
-        const errData = await navRes.json();
-        throw new Error(errData.error || "Save items failed");
-      }
-
-      // Save nav design
-      const designRes = await fetch("/api/admin/settings", {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...csrfHeaders() },
-        body: JSON.stringify({ section: "nav_design", data: { nav_design: navDesign } }),
-      });
-      if (!designRes.ok) {
-        const errData = await designRes.json();
-        throw new Error(errData.error || "Save design failed");
-      }
-
-      setMessage({ type: "success", text: "Navigation saved" });
-
-      // Refresh settings
-      const settingsRes = await fetch("/api/admin/settings");
-      if (settingsRes.ok) {
-        const settingsData = await settingsRes.json();
-        setSettings(settingsData.settings || null);
-      }
-      revalidateSite();
-    } catch (err) {
-      setMessage({
-        type: "error",
-        text: err instanceof Error ? err.message : "Save failed",
-      });
-    } finally {
-      setSavingNav(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-20">
-        <span className="text-sm text-neutral-400 animate-pulse">
-          Loading navigation...
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold text-neutral-900">
-        Navigation
-      </h1>
-
-      {/* Message banner */}
-      {message && (
-        <div
-          className={`p-3 rounded-xl border transition-opacity ${
-            message.type === "success"
-              ? "border-green-200 bg-green-50 text-green-700"
-              : "border-red-200 bg-red-50 text-red-700"
-          }`}
-        >
-          <p className="text-sm">{message.text}</p>
-        </div>
-      )}
-
-      <NavBuilder
-        initialItems={settings?.nav_items || []}
-        initialDesign={settings?.nav_design || {}}
-        onSave={handleSaveNavBuilder}
-        saving={savingNav}
-      />
-    </div>
-  );
-}
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import { NavBuilder } from "../../../components/admin/nav-builder";
+import NavMobileSettings from "../../../components/admin/nav-builder/NavMobileSettings";
+import { revalidateSite } from "../../../lib/revalidate";
+import type { NavItem, NavDesign, MobileNavDesign, SiteSettings } from "../../../lib/sanity/types";
+
+/**
+ * /admin/navigation — Navigation editing.
+ * Session 129: Footer tab removed — footers are now custom sections placed freely by the user.
+ * Session 158: Added "Mobile Menu" tab for independent mobile menu styles.
+ */
+
+type NavTabId = "desktop" | "mobile";
+
+const TABS: { id: NavTabId; label: string }[] = [
+  { id: "desktop", label: "Desktop" },
+  { id: "mobile", label: "Mobile Menu" },
+];
+
+export default function AdminNavigationPage() {
+  const [settings, setSettings] = useState<SiteSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<NavTabId>("desktop");
+  const [savingNav, setSavingNav] = useState(false);
+  const [savingMobile, setSavingMobile] = useState(false);
+  const [mobileDesign, setMobileDesign] = useState<MobileNavDesign>({});
+  const [mobileHasChanges, setMobileHasChanges] = useState(false);
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+
+  // ── Load settings ──
+  const fetchSettings = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/settings");
+      if (res.ok) {
+        const data = await res.json();
+        setSettings(data.settings || null);
+      }
+    } catch {
+      setMessage({ type: "error", text: "Failed to load navigation" });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  // Sync mobile design from loaded settings
+  useEffect(() => {
+    if (settings?.nav_mobile_design) {
+      setMobileDesign(settings.nav_mobile_design);
+    }
+  }, [settings]);
+
+  // ── Auto-dismiss messages ──
+  useEffect(() => {
+    if (!message) return;
+    const timer = setTimeout(() => setMessage(null), 5000);
+    return () => clearTimeout(timer);
+  }, [message]);
+
+  // ── Save handlers ──
+  const handleSaveNavBuilder = async (navItems: NavItem[], navDesign: NavDesign) => {
+    setSavingNav(true);
+    setMessage(null);
+    try {
+      // Sanitize items for Sanity
+      const sanitizedItems = navItems.map((item) => ({
+        _key: item._key,
+        type: item.type || "menu-item",
+        label: item.label,
+        ...(item.logo_image ? { logo_image: item.logo_image } : {}),
+        link_type: item.link_type,
+        ...(item.link_type === "internal" && item.internal_page
+          ? { internal_page: { _ref: item.internal_page._id } }
+          : {}),
+        ...(item.link_type === "external"
+          ? { external_url: item.external_url }
+          : {}),
+        ...(item.link_type === "content" ? {
+          ...(item.content_type ? { content_type: item.content_type } : {}),
+          ...(item.content_asset ? { content_asset: item.content_asset } : {}),
+          ...(item.content_url ? { content_url: item.content_url } : {}),
+        } : {}),
+        visible: item.visible,
+        grid_column: item.grid_column,
+        column_span: item.column_span || 1,
+        ...(item.style_overrides && Object.keys(item.style_overrides).length > 0
+          ? { style_overrides: item.style_overrides }
+          : {}),
+      }));
+
+      // Save nav items
+      const navRes = await fetch("/api/admin/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ section: "navigation", data: { nav_items: sanitizedItems } }),
+      });
+      if (!navRes.ok) {
+        const errData = await navRes.json();
+        throw new Error(errData.error || "Save items failed");
+      }
+
+      // Save nav design
+      const designRes = await fetch("/api/admin/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ section: "nav_design", data: { nav_design: navDesign } }),
+      });
+      if (!designRes.ok) {
+        const errData = await designRes.json();
+        throw new Error(errData.error || "Save design failed");
+      }
+
+      setMessage({ type: "success", text: "Navigation saved" });
+
+      // Refresh settings
+      const settingsRes = await fetch("/api/admin/settings");
+      if (settingsRes.ok) {
+        const settingsData = await settingsRes.json();
+        setSettings(settingsData.settings || null);
+      }
+      revalidateSite();
+    } catch (err) {
+      setMessage({
+        type: "error",
+        text: err instanceof Error ? err.message : "Save failed",
+      });
+    } finally {
+      setSavingNav(false);
+    }
+  };
+
+  // ── Mobile menu design handlers ──
+  const handleMobileDesignChange = useCallback((newDesign: MobileNavDesign) => {
+    setMobileDesign(newDesign);
+    setMobileHasChanges(true);
+  }, []);
+
+  const handleSaveMobileDesign = useCallback(async () => {
+    setSavingMobile(true);
+    setMessage(null);
+    try {
+      const res = await fetch("/api/admin/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({
+          section: "nav_mobile_design",
+          data: { nav_mobile_design: mobileDesign },
+        }),
+      });
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData.error || "Save mobile design failed");
+      }
+      setMobileHasChanges(false);
+      setMessage({ type: "success", text: "Mobile menu saved" });
+
+      // Refresh settings
+      const settingsRes = await fetch("/api/admin/settings");
+      if (settingsRes.ok) {
+        const settingsData = await settingsRes.json();
+        setSettings(settingsData.settings || null);
+      }
+      revalidateSite();
+    } catch (err) {
+      setMessage({
+        type: "error",
+        text: err instanceof Error ? err.message : "Save failed",
+      });
+    } finally {
+      setSavingMobile(false);
+    }
+  }, [mobileDesign]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="text-sm text-neutral-400 animate-pulse">
+          Loading navigation...
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold text-neutral-900">
+        Navigation
+      </h1>
+
+      {/* Tab navigation — matches admin Customize style */}
+      <div className="flex items-center gap-1 border-b border-neutral-200">
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-medium transition-colors border-b-2 -mb-px ${
+                isActive
+                  ? "text-neutral-900 border-[#076bff]"
+                  : "text-neutral-400 border-transparent hover:text-neutral-600"
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Toast message */}
+      {message && (
+        <div
+          className={`p-3 rounded-xl border transition-opacity ${
+            message.type === "success"
+              ? "border-green-200 bg-green-50 text-green-700"
+              : "border-red-200 bg-red-50 text-red-700"
+          }`}
+        >
+          <p className="text-sm">{message.text}</p>
+        </div>
+      )}
+
+      {/* Tab content */}
+      {activeTab === "desktop" && (
+        <NavBuilder
+          initialItems={settings?.nav_items || []}
+          initialDesign={settings?.nav_design || {}}
+          onSave={handleSaveNavBuilder}
+          saving={savingNav}
+        />
+      )}
+
+      {activeTab === "mobile" && (
+        <NavMobileSettings
+          design={mobileDesign}
+          desktopDesign={settings?.nav_design || {}}
+          items={settings?.nav_items || []}
+          onChange={handleMobileDesignChange}
+          onSave={handleSaveMobileDesign}
+          saving={savingMobile}
+          hasChanges={mobileHasChanges}
+        />
+      )}
+    </div>
+  );
+}

package/app/api/admin/assets/health/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { logger } from "../../../../../lib/logger";

package/app/api/admin/assets/register/route.ts

@@ -3,7 +3,7 @@ import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath } from "../../../../../lib/security";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { isMediaFile, getMimeType } from "../../../../../lib/storage/types";
 import { auditLog } from "../../../../../lib/audit";
 import { logger } from "../../../../../lib/logger";

package/app/api/admin/assets/registry/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { client } from "../../../../../lib/sanity/client";
+import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { assetRegistryQuery } from "../../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../../lib/auth";