@morphika/andami 0.1.9 → 0.2.0

package/components/admin/nav-builder/NavItemSettings.tsx

@@ -1,312 +1,331 @@
-"use client";
-
-import { useState } from "react";
-import type { NavItem, PageListItem } from "../../../lib/sanity/types";
-import { TOTAL_COLUMNS, getMaxSpan } from "./nav-builder-utils";
-import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
-import {
-  Field,
-  TextInput,
-  SelectInput,
-  SegmentedControl,
-  Section,
-} from "./NavSettingsFields";
-import AssetBrowser from "../../../components/builder/AssetBrowser";
-
-interface NavItemSettingsProps {
-  item: NavItem;
-  items: NavItem[];
-  activeTab: "settings" | "layout";
-  onUpdate: (updated: NavItem) => void;
-  pages: PageListItem[];
-  fonts: string[];
-}
-
-export default function NavItemSettings({
-  item,
-  items,
-  activeTab,
-  onUpdate,
-  pages,
-  fonts,
-}: NavItemSettingsProps) {
-  const isLogo = item.type === "logo";
-  const maxSpan = getMaxSpan(items, item.grid_column, item._key);
-  const [showAssetBrowser, setShowAssetBrowser] = useState(false);
-  const [showLogoAssetBrowser, setShowLogoAssetBrowser] = useState(false);
-  const swatches = usePaletteSwatches();
-
-  const update = (partial: Partial<NavItem>) =>
-    onUpdate({ ...item, ...partial });
-
-  const updateOverride = (key: string, value: unknown) => {
-    const overrides = { ...item.style_overrides };
-    if (value === "" || value === undefined || value === null) {
-      delete (overrides as Record<string, unknown>)[key];
-    } else {
-      (overrides as Record<string, unknown>)[key] = value;
-    }
-    update({ style_overrides: overrides });
-  };
-
-  if (activeTab === "settings") {
-    return (
-      <>
-        <Section title={isLogo ? "LOGO" : "CONTENT"}>
-          <Field label={isLogo ? "Text" : "Label"}>
-            <TextInput
-              value={item.label}
-              onChange={(v) => update({ label: v })}
-              placeholder={isLogo ? "Brand name" : "Link text"}
-            />
-          </Field>
-          {isLogo && (
-            <Field label="Image">
-              <button
-                onClick={() => setShowLogoAssetBrowser(true)}
-                className="w-full py-4 px-2.5 bg-neutral-50 border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors"
-              >
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
-                  <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
-                  <path d="M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-                </svg>
-                {item.logo_image ? (
-                  <span className="text-[#076bff] truncate max-w-full">
-                    {item.logo_image.split("/").pop()}
-                  </span>
-                ) : (
-                  "Browse image..."
-                )}
-              </button>
-              {item.logo_image && (
-                <button
-                  onClick={() => update({ logo_image: undefined })}
-                  className="mt-1 text-[10px] text-red-400 hover:text-red-600 transition-colors"
-                >
-                  Remove image
-                </button>
-              )}
-            </Field>
-          )}
-        </Section>
-
-        <Section title="LINK">
-          <Field label="Type">
-            <SegmentedControl
-              value={item.link_type}
-              onChange={(v) => update({ link_type: v as "internal" | "external" | "content" })}
-              options={[
-                { value: "internal", label: "Page" },
-                { value: "external", label: "URL" },
-                { value: "content", label: "Content" },
-              ]}
-            />
-          </Field>
-          {item.link_type === "internal" ? (
-            <Field label="Page">
-              <SelectInput
-                value={item.internal_page?._id || ""}
-                onChange={(v) => {
-                  const page = pages.find((p) => p._id === v);
-                  update({
-                    internal_page: page
-                      ? { _id: page._id, title: page.title, slug: page.slug, page_type: page.page_type }
-                      : undefined,
-                  });
-                }}
-                options={[
-                  { value: "", label: "— Select page —" },
-                  ...pages.map((p) => ({
-                    value: p._id,
-                    label: p.title || (typeof p.slug === "string" ? p.slug : p.slug.current),
-                  })),
-                ]}
-              />
-            </Field>
-          ) : item.link_type === "external" ? (
-            <Field label="URL">
-              <TextInput
-                value={item.external_url || ""}
-                onChange={(v) => update({ external_url: v })}
-                placeholder="https://..."
-              />
-            </Field>
-          ) : (
-            <>
-              <Field label="Media">
-                <SegmentedControl
-                  value={item.content_type || "image"}
-                  onChange={(v) => update({ content_type: v as "image" | "video-file" | "video-embed" })}
-                  options={[
-                    { value: "image", label: "Image" },
-                    { value: "video-file", label: "Video" },
-                    { value: "video-embed", label: "Embed" },
-                  ]}
-                />
-              </Field>
-              {(item.content_type || "image") !== "video-embed" ? (
-                <Field label="Asset">
-                  <button
-                    onClick={() => setShowAssetBrowser(true)}
-                    className="w-full py-3 px-2.5 bg-neutral-50 border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors"
-                  >
-                    <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
-                      <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
-                      <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
-                      <path d="M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-                    </svg>
-                    {item.content_asset ? (
-                      <span className="text-[#076bff] truncate max-w-full">
-                        {item.content_asset.split("/").pop()}
-                      </span>
-                    ) : (
-                      "Browse asset..."
-                    )}
-                  </button>
-                </Field>
-              ) : (
-                <Field label="URL">
-                  <TextInput
-                    value={item.content_url || ""}
-                    onChange={(v) => update({ content_url: v })}
-                    placeholder="https://youtube.com/watch?v=... or vimeo.com/..."
-                  />
-                </Field>
-              )}
-            </>
-          )}
-        </Section>
-
-        <AssetBrowser
-          open={showAssetBrowser}
-          onSelect={(path) => {
-            update({ content_asset: path });
-            setShowAssetBrowser(false);
-          }}
-          onClose={() => setShowAssetBrowser(false)}
-          filterType={item.content_type === "video-file" ? "video" : item.content_type === "image" ? "image" : "all"}
-        />
-
-        {/* Logo image asset browser */}
-        <AssetBrowser
-          open={showLogoAssetBrowser}
-          onSelect={(path) => {
-            update({ logo_image: path });
-            setShowLogoAssetBrowser(false);
-          }}
-          onClose={() => setShowLogoAssetBrowser(false)}
-          filterType="image"
-        />
-      </>
-    );
-  }
-
-  // Layout tab
-  return (
-    <>
-      <Section title="GRID PLACEMENT">
-        <Field label="Column">
-          <TextInput
-            value={item.grid_column}
-            onChange={(v) => {
-              const col = Math.max(1, Math.min(TOTAL_COLUMNS, parseInt(v) || 1));
-              update({ grid_column: col });
-            }}
-            type="number"
-          />
-        </Field>
-        <Field label="Span">
-          <TextInput
-            value={item.column_span}
-            onChange={(v) => {
-              const span = Math.max(1, Math.min(maxSpan, parseInt(v) || 1));
-              update({ column_span: span });
-            }}
-            type="number"
-          />
-        </Field>
-        <div className="text-[10px] text-neutral-400 mt-1 ml-[76px]">
-          Max available: {maxSpan} columns
-        </div>
-      </Section>
-
-      <Section title="ALIGNMENT">
-        <Field label="V. Align">
-          <SegmentedControl
-            value={item.style_overrides?.vertical_align || ""}
-            onChange={(v) => updateOverride("vertical_align", v || undefined)}
-            options={[
-              { value: "", label: "Inherit" },
-              { value: "top", label: "Top" },
-              { value: "middle", label: "Mid" },
-              { value: "bottom", label: "Bot" },
-            ]}
-          />
-        </Field>
-      </Section>
-
-      <Section title="STYLE OVERRIDES">
-        <div className="text-[10px] text-neutral-400 italic mb-2">
-          Override general nav settings for this item
-        </div>
-        <Field label="Font size">
-          <TextInput
-            value={item.style_overrides?.font_size ?? ""}
-            onChange={(v) => updateOverride("font_size", v ? parseInt(v) : undefined)}
-            placeholder="Inherit"
-            type="number"
-          />
-        </Field>
-        <Field label="Weight">
-          <SelectInput
-            value={item.style_overrides?.font_weight || ""}
-            onChange={(v) => updateOverride("font_weight", v || undefined)}
-            options={[
-              { value: "", label: "Inherit" },
-              { value: "100", label: "100 · Thin" },
-              { value: "200", label: "200 · Extra Light" },
-              { value: "300", label: "300 · Light" },
-              { value: "400", label: "400 · Normal" },
-              { value: "500", label: "500 · Medium" },
-              { value: "600", label: "600 · Semi Bold" },
-              { value: "700", label: "700 · Bold" },
-              { value: "800", label: "800 · Extra Bold" },
-              { value: "900", label: "900 · Black" },
-            ]}
-          />
-        </Field>
-        <Field label="Font">
-          <SelectInput
-            value={item.style_overrides?.font_family || ""}
-            onChange={(v) => updateOverride("font_family", v || undefined)}
-            options={[
-              { value: "", label: "Inherit" },
-              ...fonts.map((f) => ({ value: f, label: f })),
-            ]}
-          />
-        </Field>
-        <Field label="Color">
-          <ColorSwatchPicker
-            value={item.style_overrides?.color || ""}
-            onChange={(v) => updateOverride("color", (typeof v === "string" ? v : "") || undefined)}
-            swatches={swatches}
-          />
-        </Field>
-        <Field label="Transform">
-          <SelectInput
-            value={item.style_overrides?.text_transform || ""}
-            onChange={(v) => updateOverride("text_transform", v || undefined)}
-            options={[
-              { value: "", label: "Inherit" },
-              { value: "uppercase", label: "UPPERCASE" },
-              { value: "none", label: "None" },
-              { value: "lowercase", label: "lowercase" },
-              { value: "capitalize", label: "Capitalize" },
-            ]}
-          />
-        </Field>
-      </Section>
-    </>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import type { NavItem, PageListItem } from "../../../lib/sanity/types";
+import { TOTAL_COLUMNS, getMaxSpan } from "./nav-builder-utils";
+import ColorSwatchPicker, { usePaletteSwatches } from "../../builder/ColorSwatchPicker";
+import {
+  Field,
+  TextInput,
+  SelectInput,
+  SegmentedControl,
+  CardSection,
+  Divider,
+  ContentIcon,
+  LinkIcon,
+  GridIcon,
+  StyleIcon,
+} from "./NavSettingsFields";
+import AssetBrowser from "../../../components/builder/AssetBrowser";
+
+interface NavItemSettingsProps {
+  item: NavItem;
+  items: NavItem[];
+  activeTab: "settings" | "layout";
+  onUpdate: (updated: NavItem) => void;
+  pages: PageListItem[];
+  fonts: string[];
+}
+
+export default function NavItemSettings({
+  item,
+  items,
+  activeTab,
+  onUpdate,
+  pages,
+  fonts,
+}: NavItemSettingsProps) {
+  const isLogo = item.type === "logo";
+  const maxSpan = getMaxSpan(items, item.grid_column, item._key);
+  const [showAssetBrowser, setShowAssetBrowser] = useState(false);
+  const [showLogoAssetBrowser, setShowLogoAssetBrowser] = useState(false);
+  const swatches = usePaletteSwatches();
+
+  const update = (partial: Partial<NavItem>) =>
+    onUpdate({ ...item, ...partial });
+
+  const updateOverride = (key: string, value: unknown) => {
+    const overrides = { ...item.style_overrides };
+    if (value === "" || value === undefined || value === null) {
+      delete (overrides as Record<string, unknown>)[key];
+    } else {
+      (overrides as Record<string, unknown>)[key] = value;
+    }
+    update({ style_overrides: overrides });
+  };
+
+  if (activeTab === "settings") {
+    return (
+      <>
+        {/* Content / Logo card */}
+        <CardSection
+          title={isLogo ? "Logo" : "Content"}
+          icon={<ContentIcon />}
+          iconBg="#cffafe"
+        >
+          <Field label={isLogo ? "Text" : "Label"}>
+            <TextInput
+              value={item.label}
+              onChange={(v) => update({ label: v })}
+              placeholder={isLogo ? "Brand name" : "Link text"}
+            />
+          </Field>
+          {isLogo && (
+            <Field label="Image">
+              <button
+                onClick={() => setShowLogoAssetBrowser(true)}
+                className="w-full py-4 px-2.5 bg-white border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors"
+              >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+                  <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+                  <path d="M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+                </svg>
+                {item.logo_image ? (
+                  <span className="text-[#076bff] truncate max-w-full">
+                    {item.logo_image.split("/").pop()}
+                  </span>
+                ) : (
+                  "Browse image..."
+                )}
+              </button>
+              {item.logo_image && (
+                <button
+                  onClick={() => update({ logo_image: undefined })}
+                  className="mt-1 text-[10px] text-red-400 hover:text-red-600 transition-colors"
+                >
+                  Remove image
+                </button>
+              )}
+            </Field>
+          )}
+        </CardSection>
+
+        {/* Link card */}
+        <CardSection title="Link" icon={<LinkIcon />} iconBg="#ede9fe">
+          <Field label="Type">
+            <SegmentedControl
+              value={item.link_type}
+              onChange={(v) => update({ link_type: v as "internal" | "external" | "content" })}
+              options={[
+                { value: "internal", label: "Page" },
+                { value: "external", label: "URL" },
+                { value: "content", label: "Content" },
+              ]}
+            />
+          </Field>
+          {item.link_type === "internal" ? (
+            <Field label="Page">
+              <SelectInput
+                value={item.internal_page?._id || ""}
+                onChange={(v) => {
+                  const page = pages.find((p) => p._id === v);
+                  update({
+                    internal_page: page
+                      ? { _id: page._id, title: page.title, slug: page.slug, page_type: page.page_type }
+                      : undefined,
+                  });
+                }}
+                options={[
+                  { value: "", label: "— Select page —" },
+                  ...pages.map((p) => ({
+                    value: p._id,
+                    label: p.title || (typeof p.slug === "string" ? p.slug : p.slug.current),
+                  })),
+                ]}
+              />
+            </Field>
+          ) : item.link_type === "external" ? (
+            <Field label="URL">
+              <TextInput
+                value={item.external_url || ""}
+                onChange={(v) => update({ external_url: v })}
+                placeholder="https://..."
+              />
+            </Field>
+          ) : (
+            <>
+              <Field label="Media">
+                <SegmentedControl
+                  value={item.content_type || "image"}
+                  onChange={(v) => update({ content_type: v as "image" | "video-file" | "video-embed" })}
+                  options={[
+                    { value: "image", label: "Image" },
+                    { value: "video-file", label: "Video" },
+                    { value: "video-embed", label: "Embed" },
+                  ]}
+                />
+              </Field>
+              {(item.content_type || "image") !== "video-embed" ? (
+                <Field label="Asset">
+                  <button
+                    onClick={() => setShowAssetBrowser(true)}
+                    className="w-full py-3 px-2.5 bg-white border border-dashed border-neutral-200 rounded-lg text-neutral-400 text-[11px] cursor-pointer flex flex-col items-center gap-1 hover:border-[#076bff]/40 hover:bg-[#076bff]/[0.02] transition-colors"
+                  >
+                    <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+                      <rect x="2" y="4" width="16" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
+                      <circle cx="10" cy="7.5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
+                      <path d="M6 13h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+                    </svg>
+                    {item.content_asset ? (
+                      <span className="text-[#076bff] truncate max-w-full">
+                        {item.content_asset.split("/").pop()}
+                      </span>
+                    ) : (
+                      "Browse asset..."
+                    )}
+                  </button>
+                </Field>
+              ) : (
+                <Field label="URL">
+                  <TextInput
+                    value={item.content_url || ""}
+                    onChange={(v) => update({ content_url: v })}
+                    placeholder="https://youtube.com/watch?v=... or vimeo.com/..."
+                  />
+                </Field>
+              )}
+            </>
+          )}
+        </CardSection>
+
+        <AssetBrowser
+          open={showAssetBrowser}
+          onSelect={(path) => {
+            update({ content_asset: path });
+            setShowAssetBrowser(false);
+          }}
+          onClose={() => setShowAssetBrowser(false)}
+          filterType={item.content_type === "video-file" ? "video" : item.content_type === "image" ? "image" : "all"}
+        />
+
+        {/* Logo image asset browser */}
+        <AssetBrowser
+          open={showLogoAssetBrowser}
+          onSelect={(path) => {
+            update({ logo_image: path });
+            setShowLogoAssetBrowser(false);
+          }}
+          onClose={() => setShowLogoAssetBrowser(false)}
+          filterType="image"
+        />
+
+        <div className="h-2" />
+      </>
+    );
+  }
+
+  // ── Layout tab ──
+  return (
+    <>
+      {/* Grid placement card */}
+      <CardSection title="Grid Placement" icon={<GridIcon />} iconBg="#dbeafe">
+        <Field label="Column">
+          <TextInput
+            value={item.grid_column}
+            onChange={(v) => {
+              const col = Math.max(1, Math.min(TOTAL_COLUMNS, parseInt(v) || 1));
+              update({ grid_column: col });
+            }}
+            type="number"
+          />
+        </Field>
+        <Field label="Span">
+          <TextInput
+            value={item.column_span}
+            onChange={(v) => {
+              const span = Math.max(1, Math.min(maxSpan, parseInt(v) || 1));
+              update({ column_span: span });
+            }}
+            type="number"
+          />
+        </Field>
+        <p className="text-[10px] text-neutral-400 mt-0.5 ml-[66px]">
+          Max available: {maxSpan} columns
+        </p>
+      </CardSection>
+
+      {/* Alignment card */}
+      <CardSection title="Alignment" icon={<GridIcon />} iconBg="#dbeafe">
+        <Field label="V. Align">
+          <SegmentedControl
+            value={item.style_overrides?.vertical_align || ""}
+            onChange={(v) => updateOverride("vertical_align", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              { value: "top", label: "Top" },
+              { value: "middle", label: "Mid" },
+              { value: "bottom", label: "Bot" },
+            ]}
+          />
+        </Field>
+      </CardSection>
+
+      {/* Style overrides card */}
+      <CardSection title="Style Overrides" icon={<StyleIcon />} iconBg="#fef3c7">
+        <p className="text-[10px] text-neutral-400 italic mb-1.5">
+          Override general nav settings for this item
+        </p>
+        <Field label="Size">
+          <TextInput
+            value={item.style_overrides?.font_size ?? ""}
+            onChange={(v) => updateOverride("font_size", v ? parseInt(v) : undefined)}
+            placeholder="Inherit"
+            type="number"
+          />
+        </Field>
+        <Field label="Weight">
+          <SelectInput
+            value={item.style_overrides?.font_weight || ""}
+            onChange={(v) => updateOverride("font_weight", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              { value: "100", label: "100 · Thin" },
+              { value: "200", label: "200 · Extra Light" },
+              { value: "300", label: "300 · Light" },
+              { value: "400", label: "400 · Normal" },
+              { value: "500", label: "500 · Medium" },
+              { value: "600", label: "600 · Semi Bold" },
+              { value: "700", label: "700 · Bold" },
+              { value: "800", label: "800 · Extra Bold" },
+              { value: "900", label: "900 · Black" },
+            ]}
+          />
+        </Field>
+        <Field label="Font">
+          <SelectInput
+            value={item.style_overrides?.font_family || ""}
+            onChange={(v) => updateOverride("font_family", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              ...fonts.map((f) => ({ value: f, label: f })),
+            ]}
+          />
+        </Field>
+        <Divider />
+        <Field label="Color">
+          <ColorSwatchPicker
+            value={item.style_overrides?.color || ""}
+            onChange={(v) => updateOverride("color", (typeof v === "string" ? v : "") || undefined)}
+            swatches={swatches}
+          />
+        </Field>
+        <Field label="Case">
+          <SelectInput
+            value={item.style_overrides?.text_transform || ""}
+            onChange={(v) => updateOverride("text_transform", v || undefined)}
+            options={[
+              { value: "", label: "Inherit" },
+              { value: "uppercase", label: "UPPERCASE" },
+              { value: "none", label: "None" },
+              { value: "lowercase", label: "lowercase" },
+              { value: "capitalize", label: "Capitalize" },
+            ]}
+          />
+        </Field>
+      </CardSection>
+
+      <div className="h-2" />
+    </>
+  );
+}