@morphika/andami 0.5.1 → 0.5.3

package/app/admin/navigation/page.tsx

@@ -1,255 +1,255 @@
-"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>
-  );
-}
+"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-[#3580f9]"
+                  : "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>
+  );
+}