@djangocfg/layouts 2.1.591 → 2.1.593

package/src/layouts/SettingsLayout/components/AvatarSection.tsx

@@ -7,6 +7,7 @@ import { toast } from '@djangocfg/ui-core/hooks';
 import { useAuth } from '@djangocfg/api/auth';
 import { Avatar, AvatarFallback, Button } from '@djangocfg/ui-core/components';
 
+import { useSettingsCopy } from '../i18n';
 import { profileLogger } from '../../../utils/logger';
 
 const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
@@ -16,7 +17,7 @@ const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
  * settings rows, not inside one. Avatar isn't a form field like "First name";
  * it's the user's identity, so it gets the canonical Apple-ID / Slack / Linear
  * treatment: large centered avatar → name/email → a single "Change avatar"
- * action.
+ * action, on a soft primary-tinted hero card.
  *
  * UX: the avatar is a preview only; "Change avatar" opens the picker and
  * uploads immediately (no Save/Cancel step). The preview is optimistic — shown
@@ -24,6 +25,7 @@ const MAX_AVATAR_BYTES = 5 * 1024 * 1024;
  * The whole avatar is also clickable for a faster path.
  */
 export const AvatarSection = () => {
+  const copy = useSettingsCopy();
   const { user, uploadAvatar } = useAuth();
   const inputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
@@ -70,13 +72,19 @@ export const AvatarSection = () => {
   const initials = user?.initials || 'UN';
 
   return (
-    <div className="flex flex-col items-center gap-3 py-2">
+    <div
+      className={
+        'flex flex-col items-center gap-3 rounded-2xl border border-foreground/5 px-6 pb-6 pt-8 ' +
+        // Soft hero wash tinted by the theme primary — works in light and dark.
+        'bg-[radial-gradient(ellipse_at_50%_0%,color-mix(in_oklab,var(--primary)_22%,transparent),transparent_70%),linear-gradient(to_bottom,color-mix(in_oklab,var(--primary)_6%,transparent),transparent)]'
+      }
+    >
       <button
         type="button"
         onClick={handlePick}
         disabled={isUploading}
         className="group relative rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-        aria-label="Change avatar"
+        aria-label={copy.account.changeAvatar}
       >
         <Avatar className="h-16 w-16 overflow-hidden rounded-full ring-1 ring-foreground/10 transition-transform group-hover:scale-105 md:h-20 md:w-20">
           {displayUrl ? (

package/src/layouts/SettingsLayout/components/SettingsNav.tsx

@@ -10,11 +10,11 @@ import { SettingsSearch } from './SettingsSearch';
 
 /**
  * Left rail: optional title, optional search, then grouped section items.
- * Groups with a label render a small uppercase header; the default (unlabelled)
+ * Groups with a label render a small muted header; the default (unlabelled)
  * group renders bare. Empty search results show a quiet "no matches" line.
  */
 export const SettingsNav: React.FC = () => {
-  const { title, groups, searchable, activeId, setActive, query } = useSettingsContext();
+  const { groups, searchable, activeId, setActive, query } = useSettingsContext();
 
   const hasResults = groups.some((g) => g.sections.length > 0);
 
@@ -22,12 +22,8 @@ export const SettingsNav: React.FC = () => {
     <nav
       role="tablist"
       aria-orientation="vertical"
-      className="flex h-full flex-col gap-3"
+      className="flex h-full flex-col gap-2"
     >
-      <div className="px-1">
-        <h2 className="px-2.5 text-sm font-semibold text-foreground">{title}</h2>
-      </div>
-
       {searchable && (
         <div className="px-1">
           <SettingsSearch />
@@ -47,8 +43,8 @@ export const SettingsNav: React.FC = () => {
               {group.label && (
                 <div
                   className={cn(
-                    'px-2.5 pb-1 text-[11px] font-medium uppercase tracking-wider',
-                    'text-muted-foreground/70',
+                    'px-2.5 pb-1 pt-1 text-xs',
+                    'text-muted-foreground',
                   )}
                 >
                   {group.label}

package/src/layouts/SettingsLayout/components/SettingsNavItem.tsx

@@ -31,22 +31,20 @@ export const SettingsNavItem: React.FC<SettingsNavItemProps> = ({
       aria-selected={active}
       onClick={() => onSelect(section.id)}
       className={cn(
-        'group flex w-full items-center gap-2.5 rounded-control px-2.5 py-2 text-left text-sm',
+        'group flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm',
         'outline-none transition-colors',
         'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
         active
-          // Solid raised surface (popover-level) — pops off the muted rail in
-          // BOTH themes (on light the rail-vs-accent gap is only ~2% and
-          // invisible; an elevated surface fixes that). No shadow — flat fill.
-          ? 'bg-popover text-foreground font-medium'
-          : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+          // Neutral foreground overlay, like the app sidebar — theme-agnostic.
+          ? 'bg-foreground/10 text-foreground'
+          : 'text-foreground/90 hover:bg-foreground/[0.07]',
       )}
     >
       {Icon && (
         <Icon
           className={cn(
             'size-4 shrink-0 transition-colors',
-            active ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground',
+            'text-foreground/80 group-hover:text-foreground',
           )}
         />
       )}

package/src/layouts/SettingsLayout/components/SettingsPanel.tsx

@@ -7,9 +7,9 @@ import { ScrollArea } from '@djangocfg/ui-core/components';
 import { useSettingsContext } from '../context';
 
 /**
- * Right side: the active section's detail. Renders a header (title + optional
- * description) pinned above an independently scrolling body. The header falls
- * back to the section's nav label when no explicit `title` is given.
+ * Right side: the active section's detail in an independently scrolling body.
+ * The heading is screen-reader only (the nav already names the section); the
+ * visible structure comes from each section's own blocks, like Claude.
  *
  * Only the active section's `content` is in the tree, so heavy panels don't
  * render until selected (and unmount when the dialog closes — Radix default).
@@ -29,17 +29,12 @@ export const SettingsPanel: React.FC = () => {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <header className="shrink-0 border-b border-border px-6 py-4 md:px-8 md:py-5">
-        <h1 className="text-lg font-semibold tracking-tight text-foreground">{heading}</h1>
-        {active.description && (
-          <p className="mt-1 text-sm text-muted-foreground">{active.description}</p>
-        )}
-      </header>
+      <h1 className="sr-only">{heading}</h1>
 
       <ScrollArea className="min-h-0 flex-1">
         {/* key forces a fresh subtree per section: resets scroll + transient
             form state when switching, which is the expected settings UX. */}
-        <div key={active.id} className="px-6 py-6 md:px-8">
+        <div key={active.id} className="px-6 py-5 md:px-8 md:py-6">
           {active.content}
         </div>
       </ScrollArea>

package/src/layouts/SettingsLayout/components/SettingsSearch.tsx

@@ -6,6 +6,7 @@ import { useAppT } from '@djangocfg/i18n';
 import { cn } from '@djangocfg/ui-core/lib';
 import { Search, X } from 'lucide-react';
 
+import { useSettingsCopy } from '../i18n';
 import { useSettingsContext } from '../context';
 
 /**
@@ -16,6 +17,7 @@ import { useSettingsContext } from '../context';
 export const SettingsSearch: React.FC = () => {
   const { query, setQuery } = useSettingsContext();
   const t = useAppT();
+  const copy = useSettingsCopy();
   const placeholder = t('ui.select.search') || 'Search';
 
   return (
@@ -28,18 +30,18 @@ export const SettingsSearch: React.FC = () => {
         placeholder={placeholder}
         aria-label={placeholder}
         className={cn(
-          'rounded-control h-9 w-full border border-border bg-muted/40 pl-8 pr-8 text-sm',
+          'h-8 w-full rounded-lg border border-transparent bg-foreground/[0.05] pl-8 pr-8 text-base md:text-sm',
           'text-foreground placeholder:text-muted-foreground',
           'outline-none transition-[border-color,background-color,box-shadow]',
           // Crisp thin accent outline (matches ui-core Input), no blurry halo.
-          'focus-visible:border-ring focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring',
+          'focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring',
         )}
       />
       {query && (
         <button
           type="button"
           onClick={() => setQuery('')}
-          aria-label="Clear search"
+          aria-label={copy.search.clear}
           className="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground"
         >
           <X className="size-3.5" />

package/src/layouts/SettingsLayout/components/SettingsShell.tsx

@@ -8,7 +8,6 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { useSettingsContext } from '../context';
 import { SettingsNav } from './SettingsNav';
 import { SettingsPanel } from './SettingsPanel';
-import { SettingsRailFooter } from './SettingsRailFooter';
 import { SettingsTabs } from './SettingsTabs';
 
 interface SettingsShellProps {
@@ -44,18 +43,15 @@ export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, clas
   if (isMobile) {
     return (
       <div className={frame}>
-        <div className="shrink-0 bg-muted">
+        <div className="shrink-0 bg-background">
           {/* Title row — `pr-12` leaves room for the dialog's corner close button. */}
           <div className="flex items-center gap-3 px-4 pb-2 pt-3.5 pr-12">
             <h2 className="flex-1 truncate text-base font-semibold tracking-tight text-foreground">
               {title}
             </h2>
-            {/* Global prefs (theme + language) mirror the desktop rail footer —
-                on phones they ride the header instead of a bottom rail. */}
-            <SettingsRailFooter horizontal className="border-t-0" />
           </div>
           {/* Tabs on their own row (below the header), so nothing overlaps the X. */}
-          <div className="border-b border-border px-1.5 pb-2">
+          <div className="border-b border-foreground/10 px-1.5 pb-2">
             <SettingsTabs />
           </div>
         </div>
@@ -66,23 +62,20 @@ export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, clas
     );
   }
 
-  // ── Desktop: rail + panel ──
+  // ── Desktop: header bar, then rail + panel on one surface ──
   return (
-    <div className={cn(frame, 'flex-row')}>
-      {/* Nav rail — recessed surface, one notch below the content panel.
-          Column layout so the section list scrolls in the middle and the
-          global-preferences footer (theme + language) pins to the bottom. */}
-      <aside className="flex shrink-0 flex-col border-r border-border bg-muted p-3 md:w-52">
-        <div className="min-h-0 flex-1">
+    <div className={frame}>
+      <header className="flex h-11 shrink-0 items-center border-b border-foreground/[0.12] px-5 pr-14">
+        <h2 className="truncate text-lg font-medium text-foreground">{title}</h2>
+      </header>
+      <div className="flex min-h-0 flex-1">
+        <aside className="flex w-[13.25rem] shrink-0 flex-col border-e border-foreground/10 bg-background p-3">
           <SettingsNav />
-        </div>
-        <SettingsRailFooter className="mt-3" />
-      </aside>
-
-      {/* Detail panel — the lighter, primary surface. */}
-      <section className="min-h-0 flex-1 bg-card">
-        <SettingsPanel />
-      </section>
+        </aside>
+        <section className="min-h-0 flex-1">
+          <SettingsPanel />
+        </section>
+      </div>
     </div>
   );
 };

package/src/layouts/SettingsLayout/components/TwoFactorSection/TwoFactorSection.tsx

@@ -1,46 +1,25 @@
 'use client';
 
-import { Loader2, Shield, ShieldOff } from 'lucide-react';
+import { Loader2, ShieldOff } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
 import { useTwoFactorSetup, useTwoFactorStatus } from '@djangocfg/api/auth';
 import {
   Alert,
   AlertDescription,
-  Badge,
   Button,
   OTPInput,
-  Preloader,
   SettingRow,
   SettingsBlock,
 } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
 
-import { TwoFactorSetup } from '../../../../snippets/TwoFactor';
+import { fill, useSettingsCopy, type SettingsCopy } from '../../i18n';
+import { TwoFactorSetupDialog } from './TwoFactorSetupDialog';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────────
 
-type View = 'status' | 'setup';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Status badge
-// ─────────────────────────────────────────────────────────────────────────────
-
-function StatusBadge({ enabled }: { enabled: boolean }) {
-  return (
-    <Badge
-      variant={enabled ? 'default' : 'secondary'}
-      className={cn(
-        'text-xs font-medium',
-        enabled && 'bg-success-background text-success-foreground border-success-border',
-      )}
-    >
-      {enabled ? 'Enabled' : 'Disabled'}
-    </Badge>
-  );
-}
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Disable confirmation — inline, not a dialog. Settings already lives in a
@@ -61,6 +40,7 @@ function DisableConfirm({
   onCancel: () => void;
 }) {
   // Mounted fresh each time the confirmation opens — state starts clean.
+  const copy = useSettingsCopy().security;
   const [code, setCode] = useState('');
 
   return (
@@ -68,10 +48,9 @@ function DisableConfirm({
       <div className="flex gap-2.5">
         <ShieldOff className="mt-0.5 h-4 w-4 flex-shrink-0 text-destructive" />
         <div className="space-y-1">
-          <p className="text-sm font-medium">Disable two-factor authentication?</p>
+          <p className="text-sm font-medium">{copy.disableTitle}</p>
           <p className="text-[13px] leading-relaxed text-muted-foreground">
-            Enter the 6-digit code from your authenticator app to confirm.
-            This will make your account less secure.
+            {copy.disableHint}
           </p>
         </div>
       </div>
@@ -94,7 +73,7 @@ function DisableConfirm({
         />
         <div className="flex gap-2">
           <Button variant="outline" size="sm" onClick={onCancel} disabled={isLoading}>
-            Cancel
+            {copy.cancel}
           </Button>
           <Button
             variant="destructive"
@@ -103,9 +82,9 @@ function DisableConfirm({
             disabled={isLoading || code.length !== 6}
           >
             {isLoading ? (
-              <><Loader2 className="mr-2 h-4 w-4 animate-spin" />Disabling…</>
+              <><Loader2 className="mr-2 h-4 w-4 animate-spin" />{copy.disabling}</>
             ) : (
-              'Disable 2FA'
+              copy.disable
             )}
           </Button>
         </div>
@@ -118,9 +97,9 @@ function DisableConfirm({
 // Helpers
 // ─────────────────────────────────────────────────────────────────────────────
 
-function deviceDescription(createdAt: string, isPrimary: boolean): string {
-  const added = `Added ${new Date(createdAt).toLocaleDateString()}`;
-  return isPrimary ? `${added} · Primary` : added;
+function deviceDescription(copy: SettingsCopy['security'], createdAt: string, isPrimary: boolean): string {
+  const added = fill(copy.deviceAdded, { date: new Date(createdAt).toLocaleDateString() });
+  return isPrimary ? `${added} · ${copy.devicePrimary}` : added;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -128,7 +107,8 @@ function deviceDescription(createdAt: string, isPrimary: boolean): string {
 // ─────────────────────────────────────────────────────────────────────────────
 
 export const TwoFactorSection: React.FC = () => {
-  const [view, setView] = useState<View>('status');
+  const copy = useSettingsCopy().security;
+  const [setupOpen, setSetupOpen] = useState(false);
   const [showDisable, setShowDisable] = useState(false);
 
   const {
@@ -147,11 +127,11 @@ export const TwoFactorSection: React.FC = () => {
 
   const handleEnableClick = () => {
     resetSetup();
-    setView('setup');
+    setSetupOpen(true);
   };
 
   const handleSetupDone = () => {
-    setView('status');
+    setSetupOpen(false);
     fetchStatus();
   };
 
@@ -165,46 +145,15 @@ export const TwoFactorSection: React.FC = () => {
     clearError();
   };
 
-  // ── Setup flow ──────────────────────────────────────────────────────────────
-  // Lighter, card-free container. The standalone setup flow brings its own
-  // visible (Preloader-based) loading state.
-  if (view === 'setup') {
-    return (
-      <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.)
-          </p>
-          <Button variant="ghost" size="sm" onClick={() => setView('status')}>
-            Cancel
-          </Button>
-        </div>
-        <div className="flex justify-center py-2">
-          <TwoFactorSetup
-            onComplete={handleSetupDone}
-            onSkip={() => setView('status')}
-          />
-        </div>
-      </SettingsBlock>
-    );
-  }
-
-  // ── Loading skeleton ────────────────────────────────────────────────────────
-  if (isLoading && has2FAEnabled === null) {
-    return <Preloader variant="inline" className="py-10" />;
-  }
-
   // ── Status view ─────────────────────────────────────────────────────────────
-  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>
-  );
+  // One compact block: a single status row (state + action), the inline confirm
+  // when turning off, then the connected devices as plain rows.
+  const unknown = has2FAEnabled === null;
+  const statusDescription = unknown
+    ? isLoading ? copy.checking : copy.unavailable
+    : has2FAEnabled
+      ? copy.on
+      : copy.off;
 
   const statusAction = has2FAEnabled ? (
     <Button
@@ -212,70 +161,53 @@ export const TwoFactorSection: React.FC = () => {
       size="sm"
       onClick={() => { clearError(); setShowDisable(true); }}
       disabled={isLoading || showDisable}
-      className="text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
     >
-      Disable
+      {copy.turnOff}
     </Button>
   ) : (
-    <Button size="sm" onClick={handleEnableClick} disabled={isLoading}>
-      Enable 2FA
+    <Button size="sm" onClick={handleEnableClick} disabled={isLoading || unknown}>
+      {copy.turnOn}
     </Button>
   );
 
   return (
-    <>
-      <div className="space-y-6">
-        <SettingsBlock>
-          <SettingRow
-            label="Two-Factor Authentication"
-            description={statusDescription}
-            action={statusAction}
-          />
-
-          {/* Inline destructive confirmation (no nested dialog) */}
-          {showDisable && (
-            <DisableConfirm
-              isLoading={isLoading}
-              error={error}
-              onConfirm={handleDisableConfirm}
-              onCancel={handleDisableCancel}
-            />
-          )}
-
-          {/* Fetch error */}
-          {error && !showDisable && (
-            <div className="py-3">
-              <Alert variant="destructive">
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            </div>
-          )}
+    <SettingsBlock title={copy.title}>
+      <SettingRow
+        label={copy.twoFactor}
+        description={statusDescription}
+        action={statusAction}
+      />
+
+      {showDisable && (
+        <DisableConfirm
+          isLoading={isLoading}
+          error={error}
+          onConfirm={handleDisableConfirm}
+          onCancel={handleDisableCancel}
+        />
+      )}
 
-          {/* 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>
-            </p>
-          )}
-        </SettingsBlock>
+      {error && !showDisable && (
+        <p className="py-2 text-[13px] text-destructive">{error}</p>
+      )}
 
-        {/* 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>
-        )}
-      </div>
-    </>
+      {has2FAEnabled && devices.map((device) => (
+        <SettingRow
+          key={device.id}
+          label={device.name}
+          description={deviceDescription(copy, device.createdAt, device.isPrimary)}
+        />
+      ))}
+
+      <TwoFactorSetupDialog
+        open={setupOpen}
+        onOpenChange={(open) => {
+          setSetupOpen(open);
+          // Closing mid-way or after finishing: the status row must reflect the server.
+          if (!open) fetchStatus();
+        }}
+        onComplete={handleSetupDone}
+      />
+    </SettingsBlock>
   );
 };

package/src/layouts/SettingsLayout/components/TwoFactorSection/TwoFactorSetupDialog.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@djangocfg/ui-core/components';
+
+import { TwoFactorSetup } from '../../../../snippets/TwoFactor';
+import { useSettingsCopy } from '../../i18n';
+
+export interface TwoFactorSetupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Runs after the user dismisses the backup codes. */
+  onComplete: () => void;
+}
+
+/**
+ * Enabling 2FA is one focused task, so it gets its own dialog over Settings instead of
+ * replacing the Security block inline. One exit (close); no "skip" — that belongs to the
+ * sign-in flow, not to a deliberate opt-in. Content mounts only while open, so each
+ * opening starts a fresh setup and an unfinished one is dropped on close.
+ */
+export const TwoFactorSetupDialog: React.FC<TwoFactorSetupDialogProps> = ({ open, onOpenChange, onComplete }) => {
+  const copy = useSettingsCopy().security;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-1.5rem)] max-w-md flex-col items-center overflow-y-auto bg-card p-6">
+        <DialogTitle className="sr-only">{copy.setupTitle}</DialogTitle>
+        <DialogDescription className="sr-only">{copy.setupHint}</DialogDescription>
+        {open && <TwoFactorSetup onComplete={onComplete} />}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -4,4 +4,3 @@ export { SettingsTabs } from './SettingsTabs';
 export { SettingsNavItem } from './SettingsNavItem';
 export { SettingsPanel } from './SettingsPanel';
 export { SettingsSearch } from './SettingsSearch';
-export { SettingsRailFooter } from './SettingsRailFooter';

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

@@ -40,6 +40,9 @@ interface SettingsContextValue {
   searchable: boolean;
 }
 
+/** `searchable: 'auto'` shows the search box only when the rail is long enough to need it. */
+export const SEARCH_MIN_SECTIONS = 10;
+
 const SettingsContext = createContext<SettingsContextValue | null>(null);
 
 export const useSettingsContext = (): SettingsContextValue => {
@@ -54,7 +57,7 @@ export interface SettingsProviderProps {
   /** Fully-merged sections (built-ins + app), pre-concatenated by the caller. */
   sections: SettingsSection[];
   groups?: SettingsGroup[];
-  searchable: boolean;
+  searchable: boolean | 'auto';
   /** Controlled active id (dialog mode passes the store value). */
   activeId: string | null;
   /** Called when active section changes (dialog mode writes the store). */
@@ -113,7 +116,7 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
       setActive,
       query,
       setQuery,
-      searchable,
+      searchable: searchable === 'auto' ? visible.length >= SEARCH_MIN_SECTIONS : searchable,
     }),
     [title, resolvedGroups, visible, active, resolvedActiveId, setActive, query, searchable],
   );

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

@@ -10,3 +10,6 @@ export type {
   UseSettingsSectionsArgs,
   UseSettingsSectionsResult,
 } from './useSettingsSections';
+
+export { useAccountMenuItems } from './useAccountMenuItems';
+export type { UseAccountMenuItemsOptions } from './useAccountMenuItems';