@djangocfg/layouts 2.1.426 → 2.1.427

package/src/layouts/{ProfileLayout → SettingsLayout}/components/TwoFactorSection/TwoFactorSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Loader2, Shield, ShieldCheck, ShieldOff, Smartphone, Trash2 } from 'lucide-react';
+import { Loader2, Shield, ShieldOff } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
 import { useTwoFactorSetup, useTwoFactorStatus } from '@djangocfg/api/auth';
@@ -9,11 +9,6 @@ import {
   AlertDescription,
   Badge,
   Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -21,7 +16,9 @@ import {
   DialogHeader,
   DialogTitle,
   OTPInput,
-  Separator,
+  Preloader,
+  SettingRow,
+  SettingsBlock,
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
@@ -43,7 +40,7 @@ function StatusBadge({ enabled }: { enabled: boolean }) {
       variant={enabled ? 'default' : 'secondary'}
       className={cn(
         'text-xs font-medium',
-        enabled && 'bg-green-500/15 text-green-600 dark:text-green-400 border-green-500/20',
+        enabled && 'bg-success-background text-success-foreground border-success-border',
       )}
     >
       {enabled ? 'Enabled' : 'Disabled'}
@@ -131,28 +128,12 @@ function DisableDialog({
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Device list row
+// Helpers
 // ─────────────────────────────────────────────────────────────────────────────
 
-function DeviceRow({ name, createdAt, isPrimary }: {
-  name: string;
-  createdAt: string;
-  isPrimary: boolean;
-}) {
-  return (
-    <div className="flex items-center gap-3 py-3">
-      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-muted flex items-center justify-center">
-        <Smartphone className="w-4 h-4 text-muted-foreground" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium truncate">{name}</p>
-        <p className="text-xs text-muted-foreground">
-          Added {new Date(createdAt).toLocaleDateString()}
-          {isPrimary && ' · Primary'}
-        </p>
-      </div>
-    </div>
-  );
+function deviceDescription(createdAt: string, isPrimary: boolean): string {
+  const added = `Added ${new Date(createdAt).toLocaleDateString()}`;
+  return isPrimary ? `${added} · Primary` : added;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -198,133 +179,106 @@ export const TwoFactorSection: React.FC = () => {
   };
 
   // ── Setup flow ──────────────────────────────────────────────────────────────
+  // Lighter, card-free container. The standalone setup flow brings its own
+  // visible (Preloader-based) loading state.
   if (view === 'setup') {
     return (
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <Shield className="w-4 h-4" />
-              Set up Two-Factor Authentication
-            </CardTitle>
-            <Button variant="ghost" size="sm" onClick={() => setView('status')}>
-              Cancel
-            </Button>
-          </div>
-          <CardDescription>
+      <SettingsBlock title="Set up Two-Factor Authentication">
+        <div className="flex items-center justify-between pb-2">
+          <p className="text-[13px] leading-relaxed text-muted-foreground">
             Scan the QR code with your authenticator app (Google Authenticator, Authy, etc.)
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex justify-center">
+          </p>
+          <Button variant="ghost" size="sm" onClick={() => setView('status')}>
+            Cancel
+          </Button>
+        </div>
+        <div className="flex justify-center py-2">
           <SetupStepStandalone
             onComplete={handleSetupDone}
             onSkip={() => setView('status')}
           />
-        </CardContent>
-      </Card>
+        </div>
+      </SettingsBlock>
     );
   }
 
   // ── Loading skeleton ────────────────────────────────────────────────────────
   if (isLoading && has2FAEnabled === null) {
-    return (
-      <Card>
-        <CardContent className="flex items-center justify-center py-10">
-          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-        </CardContent>
-      </Card>
-    );
+    return <Preloader variant="inline" className="py-10" />;
   }
 
   // ── Status view ─────────────────────────────────────────────────────────────
-  return (
-    <>
-      <Card>
-        <CardHeader>
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex items-center gap-3">
-              {has2FAEnabled ? (
-                <div className="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0">
-                  <ShieldCheck className="w-5 h-5 text-green-500" />
-                </div>
-              ) : (
-                <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
-                  <ShieldOff className="w-5 h-5 text-muted-foreground" />
-                </div>
-              )}
-              <div>
-                <div className="flex items-center gap-2">
-                  <CardTitle className="text-base">Two-Factor Authentication</CardTitle>
-                  <StatusBadge enabled={!!has2FAEnabled} />
-                </div>
-                <CardDescription className="mt-0.5">
-                  {has2FAEnabled
-                    ? `${devices.length} authenticator device${devices.length !== 1 ? 's' : ''} connected`
-                    : 'Add an extra layer of security to your account'}
-                </CardDescription>
-              </div>
-            </div>
+  const statusDescription = (
+    <span className="inline-flex items-center gap-2">
+      <StatusBadge enabled={!!has2FAEnabled} />
+      <span>
+        {has2FAEnabled
+          ? `${devices.length} authenticator device${devices.length !== 1 ? 's' : ''} connected`
+          : 'Add an extra layer of security to your account'}
+      </span>
+    </span>
+  );
 
-            {has2FAEnabled ? (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => { clearError(); setShowDisable(true); }}
-                disabled={isLoading}
-                className="flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
-              >
-                Disable
-              </Button>
-            ) : (
-              <Button size="sm" onClick={handleEnableClick} disabled={isLoading} className="flex-shrink-0">
-                Enable 2FA
-              </Button>
-            )}
-          </div>
-        </CardHeader>
+  const statusAction = has2FAEnabled ? (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => { clearError(); setShowDisable(true); }}
+      disabled={isLoading}
+      className="text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
+    >
+      Disable
+    </Button>
+  ) : (
+    <Button size="sm" onClick={handleEnableClick} disabled={isLoading}>
+      Enable 2FA
+    </Button>
+  );
 
-        {/* Fetch error */}
-        {error && !showDisable && (
-          <CardContent className="pt-0">
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          </CardContent>
-        )}
+  return (
+    <>
+      <div className="space-y-6">
+        <SettingsBlock>
+          <SettingRow
+            label="Two-Factor Authentication"
+            description={statusDescription}
+            action={statusAction}
+          />
 
-        {/* Device list */}
-        {has2FAEnabled && devices.length > 0 && (
-          <CardContent className="pt-0">
-            <Separator className="mb-1" />
-            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mt-3 mb-1">
-              Connected devices
-            </p>
-            <div className="divide-y">
-              {devices.map((device) => (
-                <DeviceRow
-                  key={device.id}
-                  name={device.name}
-                  createdAt={device.createdAt}
-                  isPrimary={device.isPrimary}
-                />
-              ))}
+          {/* Fetch error */}
+          {error && !showDisable && (
+            <div className="py-3">
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
             </div>
-          </CardContent>
-        )}
+          )}
 
-        {/* Not enabled — info callout */}
-        {!has2FAEnabled && (
-          <CardContent className="pt-0">
-            <div className="flex gap-3 p-3 rounded-lg bg-muted/50 text-sm text-muted-foreground">
-              <Shield className="w-4 h-4 mt-0.5 flex-shrink-0" />
+          {/* Not enabled — subtle muted note */}
+          {!has2FAEnabled && (
+            <p className="flex gap-2 pt-3 text-[13px] leading-relaxed text-muted-foreground">
+              <Shield className="mt-0.5 h-4 w-4 flex-shrink-0" />
               <span>
                 Two-factor authentication adds a second verification step when signing in,
                 protecting your account even if your password is compromised.
               </span>
-            </div>
-          </CardContent>
+            </p>
+          )}
+        </SettingsBlock>
+
+        {/* Device list */}
+        {has2FAEnabled && devices.length > 0 && (
+          <SettingsBlock title="Connected devices">
+            {devices.map((device) => (
+              <SettingRow
+                key={device.id}
+                label={device.name}
+                description={deviceDescription(device.createdAt, device.isPrimary)}
+              />
+            ))}
+          </SettingsBlock>
         )}
-      </Card>
+      </div>
 
       <DisableDialog
         open={showDisable}

package/src/layouts/SettingsLayout/components/index.ts

@@ -0,0 +1,6 @@
+export { SettingsShell } from './SettingsShell';
+export { SettingsNav } from './SettingsNav';
+export { SettingsTabs } from './SettingsTabs';
+export { SettingsNavItem } from './SettingsNavItem';
+export { SettingsPanel } from './SettingsPanel';
+export { SettingsSearch } from './SettingsSearch';

package/src/layouts/SettingsLayout/context/SettingsContext.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+/**
+ * SettingsContext — the resolved runtime state shared by the shell parts
+ * (nav rail, search box, detail panel). Holds the derived section structure,
+ * the active section, and the search query. Selection can be driven by the
+ * zustand store (dialog mode) or local state (inline mode); the provider
+ * abstracts that difference so child components never care which.
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import { useSettingsSections } from '../hooks/useSettingsSections';
+import type { ResolvedGroup } from '../hooks/useSettingsSections';
+import type { SettingsGroup, SettingsSection } from '../types';
+
+interface SettingsContextValue {
+  /** Title for the surface header. */
+  title: React.ReactNode;
+  /** Groups (with sections) after ordering + search filtering. */
+  groups: ResolvedGroup[];
+  /** Flat visible sections in render order. */
+  visible: SettingsSection[];
+  /** The currently active section object (or null if none resolvable). */
+  active: SettingsSection | null;
+  /** Active section id. */
+  activeId: string | null;
+  /** Switch active section. */
+  setActive: (id: string) => void;
+  /** Search query + setter. */
+  query: string;
+  setQuery: (q: string) => void;
+  /** Whether the search box should render. */
+  searchable: boolean;
+}
+
+const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+export const useSettingsContext = (): SettingsContextValue => {
+  const ctx = useContext(SettingsContext);
+  if (!ctx) throw new Error('useSettingsContext must be used within SettingsProvider');
+  return ctx;
+};
+
+export interface SettingsProviderProps {
+  children: React.ReactNode;
+  title: React.ReactNode;
+  /** Fully-merged sections (built-ins + app), pre-concatenated by the caller. */
+  sections: SettingsSection[];
+  groups?: SettingsGroup[];
+  searchable: boolean;
+  /** Controlled active id (dialog mode passes the store value). */
+  activeId: string | null;
+  /** Called when active section changes (dialog mode writes the store). */
+  onActiveChange: (id: string) => void;
+  /** Section to fall back to when the controlled id is null/invalid. */
+  initialSection?: string;
+}
+
+export const SettingsProvider: React.FC<SettingsProviderProps> = ({
+  children,
+  title,
+  sections,
+  groups,
+  searchable,
+  activeId,
+  onActiveChange,
+  initialSection,
+}) => {
+  const [query, setQuery] = useState('');
+
+  // Filtered/ordered structure. Search filters the rail but never the lookup map.
+  const { groups: resolvedGroups, visible, byId, ids } = useSettingsSections({
+    sections,
+    groups,
+    query,
+  });
+
+  // Resolve the active section. Precedence: controlled id (if known) →
+  // initialSection (if known) → first visible section → null.
+  const fallbackId = useMemo(() => {
+    if (initialSection && ids.has(initialSection)) return initialSection;
+    return visible[0]?.id ?? sections.find((s) => !s.hidden)?.id ?? null;
+  }, [initialSection, ids, visible, sections]);
+
+  const resolvedActiveId =
+    activeId && ids.has(activeId) ? activeId : fallbackId;
+
+  const active = resolvedActiveId ? byId.get(resolvedActiveId) ?? null : null;
+
+  const setActive = useCallback(
+    (id: string) => {
+      // Picking a section clears any search so the panel is reachable.
+      setQuery('');
+      onActiveChange(id);
+    },
+    [onActiveChange],
+  );
+
+  const value = useMemo<SettingsContextValue>(
+    () => ({
+      title,
+      groups: resolvedGroups,
+      visible,
+      active,
+      activeId: resolvedActiveId,
+      setActive,
+      query,
+      setQuery,
+      searchable,
+    }),
+    [title, resolvedGroups, visible, active, resolvedActiveId, setActive, query, searchable],
+  );
+
+  return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
+};

package/src/layouts/SettingsLayout/context/index.ts

@@ -0,0 +1,2 @@
+export { SettingsProvider, useSettingsContext } from './SettingsContext';
+export type { SettingsProviderProps } from './SettingsContext';

package/src/layouts/SettingsLayout/hooks/index.ts

@@ -0,0 +1,12 @@
+export { useSettingsUrl } from './useSettingsUrl';
+export type { UseSettingsUrlOptions } from './useSettingsUrl';
+
+export { useSettingsDialog } from './useSettingsDialog';
+export type { UseSettingsDialogReturn } from './useSettingsDialog';
+
+export { useSettingsSections } from './useSettingsSections';
+export type {
+  ResolvedGroup,
+  UseSettingsSectionsArgs,
+  UseSettingsSectionsResult,
+} from './useSettingsSections';

package/src/layouts/SettingsLayout/hooks/useProfileSave.ts

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * useProfileSave — the account-section data layer, as a plain hook (no context).
+ *
+ * Replaces the old ProfileProvider/useProfileContext plumbing: the labels are
+ * just i18n, `save` wraps `updateProfile` + toast, and `logout` is the shared
+ * logout hook. Every value here is already reachable via global hooks, so a
+ * React context added nothing but a wrapper — sections call this directly.
+ */
+
+import { useCallback, useMemo } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import { toast } from '@djangocfg/ui-core/hooks';
+
+import { profileLogger } from '../../../utils/logger';
+import { useLogout } from '../../../hooks';
+
+export interface ProfileLabels {
+  title: string;
+  personalInfo: string;
+  work: string;
+  preferences: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  company: string;
+  position: string;
+  addFirstName: string;
+  addLastName: string;
+  addPhone: string;
+  addCompany: string;
+  addPosition: string;
+  deleteAccount: string;
+  profileUpdated: string;
+  failedToUpdate: string;
+  loading: string;
+}
+
+export interface UseProfileSaveReturn {
+  labels: ProfileLabels;
+  /** Persist a single profile field; shows a toast on success/error. */
+  save: (field: string, value: string) => Promise<void>;
+  /** Sign the user out. */
+  logout: () => void;
+}
+
+export function useProfileSave(title?: string): UseProfileSaveReturn {
+  const { updateProfile } = useAuth();
+  const t = useAppT();
+  const logout = useLogout();
+
+  const labels = useMemo<ProfileLabels>(
+    () => ({
+      title: title || t('layouts.profilePage.title'),
+      personalInfo: t('layouts.profilePage.personalInfo'),
+      work: t('layouts.profilePage.work'),
+      preferences: 'Preferences',
+      firstName: t('layouts.profilePage.firstName'),
+      lastName: t('layouts.profilePage.lastName'),
+      phone: t('layouts.profilePage.phone'),
+      company: t('layouts.profilePage.company'),
+      position: t('layouts.profilePage.position'),
+      addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
+      addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
+      addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
+      addCompany: t('layouts.profilePage.addCompany') || 'Add company',
+      addPosition: t('layouts.profilePage.addPosition') || 'Add position',
+      deleteAccount: t('layouts.profilePage.deleteAccount'),
+      profileUpdated: t('layouts.profilePage.profileUpdated'),
+      failedToUpdate: t('layouts.profilePage.failedToUpdate'),
+      loading: t('ui.states.loading'),
+    }),
+    [t, title],
+  );
+
+  const save = useCallback(
+    async (field: string, value: string) => {
+      try {
+        await updateProfile({ [field]: value });
+        toast.success(labels.profileUpdated);
+      } catch (error: unknown) {
+        profileLogger.error('Profile update error:', error);
+        const apiErr = error as { response?: Record<string, string[]> };
+        toast.error(apiErr?.response?.[field]?.[0] || labels.failedToUpdate);
+        throw error;
+      }
+    },
+    [updateProfile, labels],
+  );
+
+  return { labels, save, logout };
+}

package/src/layouts/SettingsLayout/hooks/useSettingsDialog.ts

@@ -0,0 +1,52 @@
+'use client';
+
+/**
+ * useSettingsDialog — the public API external consumers use to drive the
+ * globally-mounted <SettingsDialog />.
+ *
+ * @example
+ *   const settings = useSettingsDialog();
+ *   <Button onClick={() => settings.open()}>Settings</Button>
+ *   <MenuItem onClick={() => settings.open('billing')}>Billing</MenuItem>
+ *
+ * Returns stable callbacks, safe in deps arrays. The dialog itself must be
+ * mounted once in the tree (PrivateLayout does this).
+ */
+
+import { useCallback, useMemo } from 'react';
+
+import { useSettingsDialogStore } from '../store';
+
+export interface UseSettingsDialogReturn {
+  /** Whether the dialog is currently open. */
+  isOpen: boolean;
+  /** Currently active section id (null = fall back to first). */
+  activeSection: string | null;
+  /** Open the dialog, optionally on a specific section. */
+  open: (sectionId?: string) => void;
+  /** Close the dialog. */
+  close: () => void;
+  /** Toggle open/closed. */
+  toggle: () => void;
+  /** Switch the active section. */
+  setSection: (sectionId: string) => void;
+}
+
+export function useSettingsDialog(): UseSettingsDialogReturn {
+  const isOpen = useSettingsDialogStore((s) => s.isOpen);
+  const activeSection = useSettingsDialogStore((s) => s.activeSection);
+  const storeOpen = useSettingsDialogStore((s) => s.open);
+  const storeClose = useSettingsDialogStore((s) => s.close);
+  const storeToggle = useSettingsDialogStore((s) => s.toggle);
+  const storeSetSection = useSettingsDialogStore((s) => s.setSection);
+
+  const open = useCallback((sectionId?: string) => storeOpen(sectionId), [storeOpen]);
+  const close = useCallback(() => storeClose(), [storeClose]);
+  const toggle = useCallback(() => storeToggle(), [storeToggle]);
+  const setSection = useCallback((id: string) => storeSetSection(id), [storeSetSection]);
+
+  return useMemo(
+    () => ({ isOpen, activeSection, open, close, toggle, setSection }),
+    [isOpen, activeSection, open, close, toggle, setSection],
+  );
+}