@djangocfg/layouts 2.1.590 → 2.1.592

package/src/layouts/PrivateLayout/hooks/useSidebarKeyboard.ts

@@ -1,27 +1,11 @@
 /**
- * Sidebar Keyboard Navigation Hook
- *
- * Global shortcuts:
- * - Ctrl/Cmd + B  → toggle sidebar expanded/collapsed (desktop)
- * - Escape        → close mobile drawer / hover overlay
- *
- * Focus-trap navigation inside the sidebar:
- * - ArrowDown / ArrowUp  → move focus between focusable items
- * - Home                 → first focusable item
- * - End                  → last focusable item
- * - Enter / Space        → activate (native behaviour, no override)
+ * Sidebar focus navigation (ArrowUp/Down, Home, End between focusable rows).
+ * Cmd/Ctrl+B belongs to `SidebarProvider`; the mobile drawer closes itself on Escape.
  */
 
 'use client';
 
-import { useCallback, useEffect, useRef } from 'react';
-
-import { useSidebar } from '@djangocfg/ui-core/components';
-
-interface UseSidebarKeyboardOptions {
-  /** Whether keyboard shortcuts are active */
-  enabled?: boolean;
-}
+import { useCallback, useRef } from 'react';
 
 const FOCUSABLE_SELECTOR = [
   'a[href]',
@@ -29,83 +13,39 @@ const FOCUSABLE_SELECTOR = [
   '[tabindex]:not([tabindex="-1"])',
 ].join(', ');
 
-export function useSidebarKeyboard({ enabled = true }: UseSidebarKeyboardOptions = {}) {
-  const { toggleSidebar, setOpenMobile, isMobile, openMobile } = useSidebar();
+export function useSidebarKeyboard() {
   const sidebarRef = useRef<HTMLElement | null>(null);
 
-  // ---------------------------------------------------------------------------
-  // Global shortcuts (Ctrl/Cmd+B, Escape)
-  // ---------------------------------------------------------------------------
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      // Ctrl/Cmd + B → toggle sidebar
-      if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
-        e.preventDefault();
-        if (isMobile) {
-          setOpenMobile(!openMobile);
-        } else {
-          toggleSidebar();
-        }
+  const handleSidebarKeyDown = useCallback((e: React.KeyboardEvent<HTMLElement>) => {
+    const root = sidebarRef.current;
+    if (!root) return;
+
+    const focusables = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+      (el) => el.offsetParent !== null,
+    );
+    const current = focusables.indexOf(document.activeElement as HTMLElement);
+    if (current === -1) return;
+
+    let next = current;
+    switch (e.key) {
+      case 'ArrowDown':
+        next = (current + 1) % focusables.length;
+        break;
+      case 'ArrowUp':
+        next = (current - 1 + focusables.length) % focusables.length;
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = focusables.length - 1;
+        break;
+      default:
         return;
-      }
-
-      // Escape → close mobile drawer or hover overlay
-      if (e.key === 'Escape') {
-        if (isMobile && openMobile) {
-          setOpenMobile(false);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [enabled, isMobile, openMobile, setOpenMobile, toggleSidebar]);
-
-  // ---------------------------------------------------------------------------
-  // Focus navigation inside sidebar (arrow keys, Home, End)
-  // ---------------------------------------------------------------------------
-
-  const handleSidebarKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLElement>) => {
-      if (!sidebarRef.current) return;
-
-      const focusables = Array.from(
-        sidebarRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
-      ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
-
-      const currentIndex = focusables.indexOf(document.activeElement as HTMLElement);
-      if (currentIndex === -1) return;
-
-      let nextIndex = currentIndex;
-
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          nextIndex = (currentIndex + 1) % focusables.length;
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          nextIndex = (currentIndex - 1 + focusables.length) % focusables.length;
-          break;
-        case 'Home':
-          e.preventDefault();
-          nextIndex = 0;
-          break;
-        case 'End':
-          e.preventDefault();
-          nextIndex = focusables.length - 1;
-          break;
-        default:
-          return;
-      }
-
-      focusables[nextIndex]?.focus();
-    },
-    [],
-  );
+    }
+    e.preventDefault();
+    focusables[next]?.focus();
+  }, []);
 
   const setSidebarRef = useCallback((node: HTMLElement | null) => {
     sidebarRef.current = node;

package/src/layouts/PrivateLayout/hooks/useSidebarPeek.tsx

@@ -0,0 +1,151 @@
+/**
+ * Peek: while the sidebar is collapsed, hovering its trigger zone floats the
+ * full sidebar over the page. The panel keeps itself open while the pointer is
+ * on it, or while a menu opened from it (account, workspace switcher) is open.
+ */
+
+'use client';
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { useSidebar } from '@djangocfg/ui-core/components';
+
+// Opens on entry with no delay, then stays at least MIN_OPEN_MS even if the
+// pointer only grazed the zone, so a user who didn't notice it still sees it.
+const MIN_OPEN_MS = 900;
+const CLOSE_DELAY_MS = 300;
+
+interface PointerHandlers {
+  onPointerEnter: (e: React.PointerEvent) => void;
+  onPointerLeave: (e: React.PointerEvent) => void;
+}
+
+export interface SidebarPeek {
+  /** True while the sidebar is collapsed on desktop: the trigger zone shows. */
+  enabled: boolean;
+  open: boolean;
+  zoneProps: PointerHandlers;
+  panelProps: PointerHandlers;
+  close: () => void;
+  /** Keep the panel open while something launched from it is open. */
+  pin: (pinned: boolean) => void;
+}
+
+const PeekContext = createContext<SidebarPeek | null>(null);
+
+export function useSidebarPeek(): SidebarPeek | null {
+  return useContext(PeekContext);
+}
+
+/** Pins the peek panel for as long as `active` is true. */
+export function usePeekPin(active: boolean): void {
+  const peek = useContext(PeekContext);
+  const pin = peek?.pin;
+  useEffect(() => {
+    if (!pin) return;
+    pin(active);
+    return () => pin(false);
+  }, [pin, active]);
+}
+
+interface SidebarPeekProviderProps {
+  pathname: string;
+  children: React.ReactNode;
+}
+
+export function SidebarPeekProvider({ pathname, children }: SidebarPeekProviderProps) {
+  const { state, isMobile } = useSidebar();
+  const enabled = !isMobile && state === 'collapsed';
+
+  const [open, setOpen] = useState(false);
+  const pinned = useRef(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const openedAt = useRef(0);
+
+  const cancel = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+
+  const scheduleClose = useCallback(() => {
+    cancel();
+    if (pinned.current) return;
+    const grace = openedAt.current + MIN_OPEN_MS - Date.now();
+    timer.current = setTimeout(() => setOpen(false), Math.max(CLOSE_DELAY_MS, grace));
+  }, [cancel]);
+
+  const show = useCallback(() => {
+    cancel();
+    setOpen((was) => {
+      if (!was) openedAt.current = Date.now();
+      return true;
+    });
+  }, [cancel]);
+
+  const close = useCallback(() => {
+    cancel();
+    setOpen(false);
+  }, [cancel]);
+
+  const pin = useCallback(
+    (value: boolean) => {
+      pinned.current = value;
+      if (!value) scheduleClose();
+    },
+    [scheduleClose],
+  );
+
+  // Hover is a mouse affordance; touch taps the trigger to dock instead.
+  const zoneProps = useMemo<PointerHandlers>(
+    () => ({
+      onPointerEnter: (e) => {
+        if (e.pointerType !== 'mouse') return;
+        show();
+      },
+      onPointerLeave: scheduleClose,
+    }),
+    [show, scheduleClose],
+  );
+
+  const panelProps = useMemo<PointerHandlers>(
+    () => ({
+      onPointerEnter: show,
+      onPointerLeave: scheduleClose,
+    }),
+    [show, scheduleClose],
+  );
+
+  useEffect(() => {
+    if (!enabled) close();
+  }, [enabled, close]);
+
+  useEffect(() => {
+    close();
+  }, [pathname, close]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, close]);
+
+  useEffect(() => cancel, [cancel]);
+
+  const value = useMemo<SidebarPeek>(
+    () => ({ enabled, open: enabled && open, zoneProps, panelProps, close, pin }),
+    [enabled, open, zoneProps, panelProps, close, pin],
+  );
+
+  return <PeekContext.Provider value={value}>{children}</PeekContext.Provider>;
+}

package/src/layouts/PrivateLayout/hooks/useSidebarWidth.ts

@@ -0,0 +1,83 @@
+/**
+ * Sidebar width: the user drags the edge, the choice is remembered.
+ *
+ * The width is one CSS variable (`--sidebar-width`) on the provider, so the
+ * docked sidebar, its spacer and the peek panel all follow it with no prop
+ * plumbing.
+ */
+
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import type { CSSProperties } from 'react';
+
+const STORAGE_KEY = 'cfg.layouts.sidebar-width';
+const DEFAULT_WIDTH = 256; // 16rem
+const MIN_WIDTH = 224; // 14rem
+const MAX_WIDTH = 384; // 24rem
+
+const clamp = (px: number) => Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, Math.round(px)));
+
+function readStored(): number | null {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    const px = raw ? Number(raw) : NaN;
+    return Number.isFinite(px) ? clamp(px) : null;
+  } catch {
+    return null;
+  }
+}
+
+export interface SidebarWidth {
+  enabled: boolean;
+  width: number;
+  min: number;
+  max: number;
+  dragging: boolean;
+  setWidth: (px: number) => void;
+  setDragging: (value: boolean) => void;
+  reset: () => void;
+  /** CSS variables for the provider element. */
+  style: CSSProperties | undefined;
+}
+
+export function useSidebarWidth(enabled: boolean): SidebarWidth {
+  const [width, setWidthState] = useState(DEFAULT_WIDTH);
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const stored = readStored();
+    if (stored) setWidthState(stored);
+  }, [enabled]);
+
+  // Persist once the drag ends, not on every pointer move.
+  useEffect(() => {
+    if (!enabled || dragging) return;
+    try {
+      if (width === DEFAULT_WIDTH) window.localStorage.removeItem(STORAGE_KEY);
+      else window.localStorage.setItem(STORAGE_KEY, String(width));
+    } catch {
+      // Storage unavailable: the width simply lasts for the session.
+    }
+  }, [enabled, dragging, width]);
+
+  const setWidth = useCallback((px: number) => setWidthState(clamp(px)), []);
+  const reset = useCallback(() => setWidthState(DEFAULT_WIDTH), []);
+
+  const style = useMemo<CSSProperties | undefined>(
+    () => (enabled ? ({ '--sidebar-width': `${width}px` } as CSSProperties) : undefined),
+    [enabled, width],
+  );
+
+  return useMemo(
+    () => ({ enabled, width, min: MIN_WIDTH, max: MAX_WIDTH, dragging, setWidth, setDragging, reset, style }),
+    [enabled, width, dragging, setWidth, reset, style],
+  );
+}
+
+export const SidebarWidthContext = createContext<SidebarWidth | null>(null);
+
+export function useSidebarWidthContext(): SidebarWidth | null {
+  return useContext(SidebarWidthContext);
+}

package/src/layouts/PrivateLayout/types.ts

@@ -88,26 +88,24 @@ export interface SidebarConfig {
    * (above `footer` + account block).
    */
   menuEnd?: ReactNode;
-  /**
-   * Keep `menuStart` visible when the desktop sidebar is collapsed to the
-   * icon rail. Default `false` — most slot content is full-width and looks
-   * broken at ~56px. Set `true` only when the slot renders well in compact mode.
-   */
+  /** @deprecated No effect: a collapsed sidebar is hidden, not an icon rail. */
   menuStartShowOnCollapsed?: boolean;
-  /** Same as `menuStartShowOnCollapsed`, but for `menuEnd`. Default `false`. */
+  /** @deprecated No effect: a collapsed sidebar is hidden, not an icon rail. */
   menuEndShowOnCollapsed?: boolean;
+  /**
+   * Let the user drag the sidebar's right edge (14–24rem, remembered; double-click
+   * resets). Default `true`.
+   */
+  resizable?: boolean;
   /** Custom footer component rendered at the bottom of the sidebar */
   footer?: ReactNode;
-  /** Active-state visual on nav items. Default `'background'` (legacy). */
+  /** @deprecated No effect: the active item is always a surface. */
   activeIndicator?: SidebarActiveIndicator;
-  /** Style of group labels. Default `'uppercase'` (legacy). Collapsible groups always use `plain`. */
+  /** @deprecated No effect: group labels are always sentence case. */
   groupLabelStyle?: SidebarGroupLabelStyle;
   /** Featured CTA tile rendered below all groups, above `menuEnd`. */
   featured?: SidebarFeaturedConfig;
-  /**
-   * Override the auto-calculated nav density. When omitted density is derived
-   * from total item count (comfortable ≤5, default ≤9, compact >9).
-   */
+  /** @deprecated No effect: rows are one desktop size and one 44px touch size. */
   density?: 'comfortable' | 'default' | 'compact';
 }
 
@@ -167,11 +165,7 @@ export interface HeaderConfig {
   brandLetter?: string;
   /** User menu groups (account panel in the sidebar footer) */
   groups?: UserMenuConfig['groups'];
-  /**
-   * Behaviour of the footer account button.
-   * - `'menu'` (default) — opens a DropdownMenu with account links, locale/theme controls, and sign-out.
-   * - `'dialog'` — opens the global ProfileDialog (managed via Zustand store).
-   */
+  /** @deprecated No effect: the footer account button always opens the account menu. */
   accountAction?: 'menu' | 'dialog';
   /** Auth page path (for sign in button) */
   authPath?: string;
@@ -213,9 +207,8 @@ export interface PrivateLayoutProps {
    */
   contentScroll?: 'auto' | 'hidden';
   /**
-   * Visual style of the shell. Defaults to `'boxed'` (inset rounded card on a
-   * sidebar-coloured canvas). Pass `{ variant: 'full-bleed' }` for the legacy
-   * edge-to-edge layout.
+   * Visual style of the shell. Defaults to `'full-bleed'` (flat, Claude-style:
+   * sidebar + border + page). Pass `{ variant: 'boxed' }` for the inset rounded card.
    */
   visual?: LayoutVisualConfig;
   /**

package/src/layouts/SettingsLayout/README.md

@@ -1,6 +1,6 @@
 # SettingsLayout
 
-A Claude.ai-style **settings surface**: a searchable, grouped section rail on the
+A Claude.ai-style **settings surface**: a grouped section rail (search appears from 10 sections, `searchable`) on the
 left and a scrollable detail panel on the right. Available as a **global dialog**
 (URL-hash driven, zustand-backed, openable from anywhere) or an **inline form**.
 
@@ -127,7 +127,7 @@ ordering/labelling, or just name an ad-hoc `group` on a section:
 
 ```ts
 const groups = [
-  { id: 'general', label: 'General', order: 0 },
+  { id: 'general', order: 0 },
   { id: 'workspace', label: 'Workspace', order: 1 },
 ];
 ```
@@ -139,16 +139,19 @@ toggled via `builtins`:
 
 | id          | flag                 | default | content                              |
 | ----------- | -------------------- | ------- | ------------------------------------ |
-| `account`   | `builtins.account`   | `true`  | avatar + inline-editable profile/work fields, Preferences (Language dropdown + `ThemeSegmented`), and a **collapsible Danger zone** (delete account) |
-| `security`  | `builtins.security`  | `false` | two-factor auth (row-style)          |
+| `account`   | `builtins.account`   | `true`  | avatar, inline-editable profile/work fields, **Security** block (two-factor auth; hide with `builtins.security: false`) and a **collapsible Danger zone** (delete account) |
+| `general`   | `builtins.general`   | `true`  | **General** block: **Theme** (`ThemeSegmented`), **Time zone** (`TimezoneSelect` → `useTimezone`, sent as `X-Timezone`) and **Language** (shown when a layout i18n context exists); host rows from `generalRows` follow in a second block ("Other") |
 | `api-keys`  | `builtins.apiKeys`   | `true`  | API key display / regenerate / test (row-style) |
 
-Built-ins are merged **ahead of** app sections. They reuse the localized labels
+`generalRows` (on `SettingsDialog` / `SettingsForm` / `PrivateLayout settings`) takes
+your own `SettingRow`s for preferences only the host knows (e.g. a product-specific toggle); the layout adds none itself.
+
+Rail order: **Account** (opens first), **Preferences** (id `general`), then Platform → API keys. Built-ins are merged **ahead of** app sections. They reuse the localized labels
 and save/validation logic from `ProfileProvider`, so behaviour stays in one place.
 The built-in bodies are built from the ui-core `SettingRow`/`SettingsBlock`
 primitives (see below) — flat rows with hairline dividers, no card frames.
 
-> The `security` / `api-keys` bodies hit the real backend (2FA status, API key
+> The Account security block and `api-keys` body hit the real backend (2FA status, API key
 > retrieval). With no backend (e.g. Storybook) they show an error/empty state —
 > that's expected; gate them with `builtins` where there's no API.
 
@@ -215,17 +218,18 @@ SettingsLayout/
 │   └── useSettingsSections.ts pure: merge/order/group/filter sections
 ├── components/
 │   ├── SettingsShell.tsx      desktop rail+panel vs mobile tabs+panel (useIsMobile)
-│   ├── SettingsNav.tsx        desktop rail: title + search + grouped items
+│   ├── SettingsShell.tsx      header bar + rail + panel (desktop), tabs + panel (mobile)
+│   ├── SettingsNav.tsx        desktop rail: search + grouped items
 │   ├── SettingsNavItem.tsx    one rail row
 │   ├── SettingsTabs.tsx       mobile horizontal tab strip (text chips, auto-scroll active)
 │   ├── SettingsSearch.tsx     filter box
 │   └── SettingsPanel.tsx      header + independently-scrolling body
 └── sections/
-    ├── builtins.tsx           account/security/api-keys factory
-    ├── AccountSection.tsx     avatar + fields + preferences + danger zone (row-style)
+    ├── builtins.tsx           general/account/api-keys factory
+    ├── GeneralSection.tsx     Appearance + Language + host `generalRows`
+    ├── AccountSection.tsx     avatar + fields + 2FA + danger zone (row-style)
     ├── PreferencesRows.tsx    Language dropdown + ThemeSegmented as SettingRows
     ├── DeleteAccountRow.tsx   compact destructive row (inside collapsible Danger zone)
-    ├── SecuritySection.tsx    2FA wrapper
     └── ApiKeysSection.tsx     API-keys wrapper
 ```
 
@@ -256,3 +260,12 @@ exported too; the row primitives come from `@djangocfg/ui-core/components`.
 2. `useProfileDialogStore.open({ initialTab })` → `useSettingsDialog().open(id)`.
 3. Mount `<SettingsDialog/>` instead of `<ProfileDialog/>` (or pass `settings` to
    PrivateLayout). The account button can be repointed to `useSettingsDialog()`.
+
+## Localization
+
+Built-in text (rail labels, Preferences, Security, API key) comes from the
+self-contained dictionaries in `i18n/` (17 locales, `useSettingsCopy`), following the
+`@djangocfg/i18n` provider the host mounts, with English as the fallback. Widgets a host adds as sections (for example `mcpSettingsSection()` from `@djangocfg/widget-mcp`)
+follow the same provider. Text the host passes in (`sections`, `groups`, `generalRows`, titles) is the
+host's to translate; profile field labels still come from the central `layouts.profilePage.*`
+catalogue. A new built-in string goes into every `i18n/locales/*.ts` (`tsc` names a missing key).

package/src/layouts/SettingsLayout/SettingsDialog.tsx

@@ -13,6 +13,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import { SettingsForm } from './SettingsForm';
 import { useSettingsUrl } from './hooks/useSettingsUrl';
+import { useSettingsCopy } from './i18n';
 import { buildBuiltinSections } from './sections';
 import { useSettingsDialogStore } from './store';
 import type { SettingsDialogProps } from './types';
@@ -34,8 +35,9 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   sections: appSections = [],
   groups,
   builtins = {},
+  generalRows,
   initialSection,
-  searchable = true,
+  searchable = 'auto',
   enableDeleteAccount = true,
 }) => {
   const isOpen = useSettingsDialogStore((s) => s.isOpen);
@@ -43,15 +45,16 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   const close = useSettingsDialogStore((s) => s.close);
   const setSection = useSettingsDialogStore((s) => s.setSection);
   const isMobile = useIsMobile();
+  const copy = useSettingsCopy();
 
   // Set of valid ids, so a bad URL hash falls back gracefully instead of
   // selecting a non-existent section. Cheap to recompute; built-ins are pure.
   const knownIds = useMemo(() => {
-    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount });
+    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount, copy });
     const ids = new Set<string>();
     [...builtin, ...appSections].forEach((s) => ids.add(s.id));
     return ids;
-  }, [builtins, enableDeleteAccount, appSections]);
+  }, [builtins, enableDeleteAccount, appSections, copy]);
 
   const resolveSection = useCallback(
     (id: string | null) => (id && knownIds.has(id) ? id : null),
@@ -60,22 +63,24 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
 
   useSettingsUrl({ urlKey, enabled: syncUrl, resolveSection });
 
-  const resolvedTitle = title ?? 'Settings';
+  const resolvedTitle = title ?? copy.nav.title;
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
       <DialogContent
-        // Desktop: centered card with breathing room (capped, gap to edges).
+        // Desktop: large centred card, proportional to the viewport.
         // Mobile: near-fullscreen sheet (small inset) so the phone settings get
         // the whole screen, like Claude. Elevated `bg-card` lifts it off the page.
         className={cn(
-          'flex max-w-none flex-col gap-0 overflow-hidden border border-border bg-card p-0',
+          'flex max-w-none flex-col gap-0 overflow-hidden border border-foreground/5 bg-card p-0',
           isMobile
             ? 'h-[calc(100dvh-2rem)] w-[calc(100vw-1.5rem)]'
-            : 'h-[min(620px,calc(100vh-6rem))] w-[min(900px,calc(100vw-4rem))]',
+            // Claude proportions: 1024×800 at most, 1.28:1 at every size (ui-core
+            // DialogContent derives the width from the viewport height).
+            : '[--aspect-dialog:1.28] [--width-dialog:1024px]',
         )}
       >
-        {/* Accessible label — the visible heading lives in the nav rail. */}
+        {/* Accessible label — the visible heading is the shell header bar. */}
         <DialogTitle className="sr-only">
           {typeof resolvedTitle === 'string' ? resolvedTitle : 'Settings'}
         </DialogTitle>
@@ -89,6 +94,7 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
           sections={appSections}
           groups={groups}
           builtins={builtins}
+          generalRows={generalRows}
           initialSection={initialSection}
           searchable={searchable}
           enableDeleteAccount={enableDeleteAccount}

package/src/layouts/SettingsLayout/SettingsForm.tsx

@@ -8,7 +8,8 @@ import { Preloader } from '@djangocfg/ui-core/components';
 
 import { SettingsShell } from './components';
 import { SettingsProvider } from './context';
-import { buildBuiltinSections, BUILTIN_GROUP } from './sections';
+import { useSettingsCopy } from './i18n';
+import { buildBuiltinSections, BUILTIN_GROUP, PLATFORM_GROUP } from './sections';
 import type { SettingsFormProps, SettingsSection } from './types';
 
 /**
@@ -30,8 +31,9 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
   sections: appSections = [],
   groups,
   builtins = {},
+  generalRows,
   initialSection,
-  searchable = true,
+  searchable = 'auto',
   enableDeleteAccount = true,
   activeSection,
   onSectionChange,
@@ -40,21 +42,23 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
   bare = false,
 }: SettingsFormProps) => {
   const t = useAppT();
+  const copy = useSettingsCopy();
   const { user, isLoading } = useAuth();
 
   // Built-ins first, then app sections. Memoized so JSX identity is stable.
   const allSections = useMemo<SettingsSection[]>(() => {
-    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount });
+    const builtin = buildBuiltinSections({ builtins, enableDeleteAccount, generalRows, copy });
     return [...builtin, ...appSections];
-  }, [builtins, enableDeleteAccount, appSections]);
+  }, [builtins, enableDeleteAccount, generalRows, appSections, copy]);
 
   // Ensure the built-in group exists/ordered even if the app passed its own groups.
   const allGroups = useMemo(() => {
     const provided = groups ?? [];
-    return provided.some((g) => g.id === BUILTIN_GROUP.id)
-      ? provided
-      : [BUILTIN_GROUP, ...provided];
-  }, [groups]);
+    const missing = [BUILTIN_GROUP, { ...PLATFORM_GROUP, label: copy.nav.platform }].filter(
+      (b) => !provided.some((g) => g.id === b.id),
+    );
+    return [...missing, ...provided];
+  }, [groups, copy]);
 
   // Uncontrolled selection fallback.
   const [localActive, setLocalActive] = useState<string | null>(initialSection ?? null);
@@ -82,7 +86,7 @@ export const SettingsForm: React.FC<SettingsFormProps> = ({
   }
 
   // Default to "Settings" — this surface is broader than the old Profile page.
-  const resolvedTitle = title ?? 'Settings';
+  const resolvedTitle = title ?? copy.nav.title;
 
   return (
     <SettingsProvider