fix(settings): add Custom Fields tab to Settings (#238)

Custom-field definitions are account-wide config — a sibling of Tags,
Templates and Deals, all of which live under Settings. But the field
catalogue could only be managed via an admin-only button on the Contacts
page, so users looking under Settings found nothing (#238).

Surface it as a "Custom Fields" tab in Settings:

- Extract the manager's body into a reusable `CustomFieldsPanel`;
  `CustomFieldsManager` keeps its dialog signature and now wraps the
  panel, so the Contacts page is unchanged. Radix unmounts dialog
  content on close, so the panel still refetches on each open.
- New `CustomFieldsSettings` renders the panel inline with a
  settings-style header.
- Tab is admin+ gated (mirrors the Contacts gate); deep-linking to it
  as a non-admin falls back to Profile. `custom_fields` RLS still
  enforces writes server-side.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/(dashboard)/settings/page.tsx

@@ -9,8 +9,10 @@ import {
   Palette,
   UsersRound,
   Coins,
+  SlidersHorizontal,
 } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { useCan } from '@/hooks/use-can';
 import { WhatsAppConfig } from '@/components/settings/whatsapp-config';
 import { TemplateManager } from '@/components/settings/template-manager';
 import { TagManager } from '@/components/settings/tag-manager';
@@ -20,12 +22,14 @@ import { SessionsCard } from '@/components/settings/sessions-card';
 import { AppearancePanel } from '@/components/settings/appearance-panel';
 import { MembersTab } from '@/components/settings/members-tab';
 import { DealsSettings } from '@/components/settings/deals-settings';
+import { CustomFieldsSettings } from '@/components/settings/custom-fields-settings';
 
 const TAB_VALUES = [
   'profile',
   'whatsapp',
   'templates',
   'tags',
+  'custom-fields',
   'deals',
   'appearance',
   'members',
@@ -40,12 +44,21 @@ export default function SettingsPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  // Custom-field definitions are account-wide config, so editing them is
+  // admin+ only — mirror the gate on the Contacts page. The `custom_fields`
+  // RLS rejects non-admin writes regardless.
+  const canEditSettings = useCan('edit-settings');
+
   // The URL is the single source of truth for the active tab — no
   // local state, no sync effect. A previous revision duplicated this
   // into `useState` + a sync effect, which tripped React 19's
   // set-state-in-effect rule and was also redundant.
   const queryTab = searchParams.get('tab');
-  const tab: TabValue = isTabValue(queryTab) ? queryTab : 'profile';
+  // Deep-linking to the admin-only tab as a non-admin falls back to profile
+  // rather than landing on a tab with no trigger or content.
+  const resolved: TabValue = isTabValue(queryTab) ? queryTab : 'profile';
+  const tab: TabValue =
+    resolved === 'custom-fields' && !canEditSettings ? 'profile' : resolved;
 
   const onChange = (next: TabValue) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -57,59 +70,68 @@ export default function SettingsPage() {
     <div className="space-y-6">
       <div>
         <h1 className="text-2xl font-bold text-white">Settings</h1>
-        <p className="text-sm text-slate-400 mt-1">
+        <p className="mt-1 text-sm text-slate-400">
           Manage your profile, WhatsApp® integration, message templates, and
           tags.
         </p>
       </div>
 
       <Tabs value={tab} onValueChange={(v) => onChange(v as TabValue)}>
-        <TabsList className="bg-slate-900 border border-slate-700">
+        <TabsList className="border border-slate-700 bg-slate-900">
           <TabsTrigger
             value="profile"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <User className="size-4" />
             Profile
           </TabsTrigger>
           <TabsTrigger
             value="whatsapp"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <Settings className="size-4" />
             WhatsApp Config
           </TabsTrigger>
           <TabsTrigger
             value="templates"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <MessageSquare className="size-4" />
             Templates
           </TabsTrigger>
           <TabsTrigger
             value="tags"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <Tag className="size-4" />
             Tags
           </TabsTrigger>
+          {canEditSettings && (
+            <TabsTrigger
+              value="custom-fields"
+              className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
+            >
+              <SlidersHorizontal className="size-4" />
+              Custom Fields
+            </TabsTrigger>
+          )}
           <TabsTrigger
             value="deals"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <Coins className="size-4" />
             Deals
           </TabsTrigger>
           <TabsTrigger
             value="appearance"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <Palette className="size-4" />
             Appearance
           </TabsTrigger>
           <TabsTrigger
             value="members"
-            className="data-active:bg-slate-800 data-active:text-primary text-slate-400"
+            className="data-active:text-primary text-slate-400 data-active:bg-slate-800"
           >
             <UsersRound className="size-4" />
             Members
@@ -134,6 +156,12 @@ export default function SettingsPage() {
           <TagManager />
         </TabsContent>
 
+        {canEditSettings && (
+          <TabsContent value="custom-fields">
+            <CustomFieldsSettings />
+          </TabsContent>
+        )}
+
         <TabsContent value="deals">
           <DealsSettings />
         </TabsContent>

src/components/contacts/custom-fields-manager.tsx

@@ -22,15 +22,39 @@ interface CustomFieldsManagerProps {
 }
 
 /**
- * Create / rename / delete account-wide custom contact field definitions.
- * Per-contact values are edited elsewhere (contact detail → Custom Fields);
- * this only manages the field catalogue. Admin+ gated by the caller — the
- * `custom_fields` RLS also rejects non-admin writes as defense in depth.
+ * Dialog wrapper around {@link CustomFieldsPanel}, used on the Contacts page.
+ * The same panel is rendered inline under Settings → Custom Fields, so the
+ * editing UI lives in one place. Radix unmounts the dialog content on close,
+ * so the panel remounts (and refetches) on each open.
  */
 export function CustomFieldsManager({
   open,
   onOpenChange,
 }: CustomFieldsManagerProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="border-slate-700 bg-slate-900 text-slate-200 sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-white">Custom fields</DialogTitle>
+          <DialogDescription className="text-slate-400">
+            Define extra contact fields (e.g. ZIP code, lead source). They
+            appear on every contact and in the “Update Contact Field” automation
+            action.
+          </DialogDescription>
+        </DialogHeader>
+        <CustomFieldsPanel />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Create / rename / delete account-wide custom contact field definitions.
+ * Per-contact values are edited elsewhere (contact detail → Custom Fields);
+ * this only manages the field catalogue. Admin+ gated by the caller — the
+ * `custom_fields` RLS also rejects non-admin writes as defense in depth.
+ */
+export function CustomFieldsPanel() {
   const supabase = createClient();
   const { user, accountId } = useAuth();
 
@@ -51,27 +75,21 @@ export function CustomFieldsManager({
     setLoading(false);
   }, [supabase, accountId]);
 
-  // Load the field list when the dialog opens. The setters inside
-  // fetchFields run after the Supabase await — not synchronously in the
-  // effect body — so the cascade the lint rule warns about doesn't apply.
+  // Load the field list on mount once the account is known. The setters
+  // inside fetchFields run after the Supabase await — not synchronously in
+  // the effect body — so the cascade the lint rule warns about doesn't apply.
   useEffect(() => {
-    if (open && accountId) {
+    if (accountId) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       fetchFields();
     }
-  }, [open, accountId, fetchFields]);
-
-  // Clear the draft on close (handler, not effect) so reopening starts fresh.
-  function handleOpenChange(next: boolean) {
-    if (!next) setNewName('');
-    onOpenChange(next);
-  }
+  }, [accountId, fetchFields]);
 
   /** Case-insensitive name clash within the loaded list. */
   function isDuplicate(name: string, exceptId?: string): boolean {
     const lower = name.toLowerCase();
     return fields.some(
-      (f) => f.id !== exceptId && f.field_name.toLowerCase() === lower,
+      (f) => f.id !== exceptId && f.field_name.toLowerCase() === lower
     );
   }
 
@@ -107,7 +125,10 @@ export function CustomFieldsManager({
 
   /** Returns true on success so the row can keep the new name, false so it
    *  reverts to the previous one. No-ops (blank / unchanged) count as success. */
-  async function handleRename(field: CustomField, nextName: string): Promise<boolean> {
+  async function handleRename(
+    field: CustomField,
+    nextName: string
+  ): Promise<boolean> {
     const name = nextName.trim();
     if (!name || name === field.field_name) return true;
     if (isDuplicate(name, field.id)) {
@@ -131,7 +152,7 @@ export function CustomFieldsManager({
   async function handleDelete(field: CustomField) {
     if (
       !window.confirm(
-        `Delete "${field.field_name}"? This also removes its stored value on every contact. This cannot be undone.`,
+        `Delete "${field.field_name}"? This also removes its stored value on every contact. This cannot be undone.`
       )
     ) {
       return;
@@ -151,71 +172,61 @@ export function CustomFieldsManager({
   }
 
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="bg-slate-900 border-slate-700 text-slate-200 sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="text-white">Custom fields</DialogTitle>
-          <DialogDescription className="text-slate-400">
-            Define extra contact fields (e.g. ZIP code, lead source). They appear
-            on every contact and in the “Update Contact Field” automation action.
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* Create */}
-        <div className="flex items-center gap-2">
-          <Input
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                void handleCreate();
-              }
-            }}
-            placeholder="New field name…"
-            className="bg-slate-800 text-white"
-          />
-          <Button
-            onClick={handleCreate}
-            disabled={creating || !newName.trim()}
-            className="bg-primary hover:bg-primary/90 text-primary-foreground shrink-0"
-          >
-            {creating ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <Plus className="size-4" />
-            )}
-            Add
-          </Button>
-        </div>
-
-        {/* List */}
-        <div className="max-h-72 overflow-y-auto rounded-md border border-slate-800">
-          {loading ? (
-            <div className="flex items-center justify-center gap-2 py-8 text-sm text-slate-500">
-              <Loader2 className="size-4 animate-spin" />
-              Loading…
-            </div>
-          ) : fields.length === 0 ? (
-            <p className="py-8 text-center text-sm text-slate-500">
-              No custom fields yet.
-            </p>
+    <div className="space-y-4">
+      {/* Create */}
+      <div className="flex items-center gap-2">
+        <Input
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              void handleCreate();
+            }
+          }}
+          placeholder="New field name…"
+          className="bg-slate-800 text-white"
+        />
+        <Button
+          onClick={handleCreate}
+          disabled={creating || !newName.trim()}
+          className="bg-primary hover:bg-primary/90 text-primary-foreground shrink-0"
+        >
+          {creating ? (
+            <Loader2 className="size-4 animate-spin" />
           ) : (
-            <ul className="divide-y divide-slate-800">
-              {fields.map((field) => (
-                <FieldRow
-                  key={field.id}
-                  field={field}
-                  busy={busyId === field.id}
-                  onRename={handleRename}
-                  onDelete={handleDelete}
-                />
-              ))}
-            </ul>
+            <Plus className="size-4" />
           )}
-        </div>
-      </DialogContent>
-    </Dialog>
+          Add
+        </Button>
+      </div>
+
+      {/* List */}
+      <div className="max-h-72 overflow-y-auto rounded-md border border-slate-800">
+        {loading ? (
+          <div className="flex items-center justify-center gap-2 py-8 text-sm text-slate-500">
+            <Loader2 className="size-4 animate-spin" />
+            Loading…
+          </div>
+        ) : fields.length === 0 ? (
+          <p className="py-8 text-center text-sm text-slate-500">
+            No custom fields yet.
+          </p>
+        ) : (
+          <ul className="divide-y divide-slate-800">
+            {fields.map((field) => (
+              <FieldRow
+                key={field.id}
+                field={field}
+                busy={busyId === field.id}
+                onRename={handleRename}
+                onDelete={handleDelete}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
   );
 }
 
@@ -254,7 +265,7 @@ function FieldRow({
           if (e.key === 'Enter') e.currentTarget.blur();
         }}
         aria-label={`Rename ${field.field_name}`}
-        className="h-8 border-transparent bg-transparent text-white hover:border-slate-700 focus:border-primary"
+        className="focus:border-primary h-8 border-transparent bg-transparent text-white hover:border-slate-700"
       />
       <Button
         variant="ghost"

src/components/settings/custom-fields-settings.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { CustomFieldsPanel } from '@/components/contacts/custom-fields-manager';
+
+/**
+ * Settings → Custom Fields. Manage the account-wide custom contact field
+ * catalogue (the same panel the Contacts page exposes via a dialog). Writes
+ * are admin-gated by the caller and enforced by `custom_fields` RLS.
+ */
+export function CustomFieldsSettings() {
+  return (
+    <div className="mt-4 space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold text-white">Custom fields</h2>
+        <p className="text-sm text-slate-400">
+          Define extra contact fields (e.g. ZIP code, lead source). They appear
+          on every contact and in the “Update Contact Field” automation action.
+        </p>
+      </div>
+
+      <Card className="border-slate-700 bg-slate-900 ring-0 ring-transparent">
+        <CardContent className="pt-4">
+          <CustomFieldsPanel />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}