@djangocfg/layouts 2.1.591 → 2.1.593

package/src/layouts/SettingsLayout/index.ts

@@ -24,6 +24,8 @@
 // Top-level components
 export { SettingsDialog } from './SettingsDialog';
 export { SettingsForm } from './SettingsForm';
+export { AccountMenuButton } from './components/AccountMenuButton';
+export type { AccountMenuButtonProps } from './components/AccountMenuButton';
 
 // Store + public hooks
 export { useSettingsDialogStore } from './store';
@@ -31,6 +33,7 @@ export {
   useSettingsDialog,
   useSettingsUrl,
   useSettingsSections,
+  useAccountMenuItems,
 } from './hooks';
 export type {
   UseSettingsDialogReturn,
@@ -50,7 +53,6 @@ export {
   buildBuiltinSections,
   BUILTIN_GROUP,
   AccountSection,
-  SecuritySection,
   ApiKeysSection,
   SettingRow,
   SettingsBlock,

package/src/layouts/SettingsLayout/sections/AccountSection.tsx

@@ -8,15 +8,19 @@ import { Button, SettingRow, SettingsBlock } from '@djangocfg/ui-core/components
 
 import { AvatarSection } from '../components/AvatarSection';
 import { useProfileSave } from '../hooks/useProfileSave';
+import { TwoFactorSection } from '../components/TwoFactorSection';
+import { useSettingsCopy } from '../i18n';
 import { DeleteAccountRow } from './DeleteAccountRow';
 
 interface AccountSectionProps {
   /** Render the "Danger zone" delete-account control. Default: true. */
   enableDeleteAccount?: boolean;
+  /** Render the "Security" block (two-factor auth). Default: true. */
+  enableSecurity?: boolean;
 }
 
 /**
- * Built-in "Account" section — macOS / Claude-settings layout: flat blocks of
+ * Built-in "Account" section (profile + security + danger zone) — macOS / Claude-settings layout: flat blocks of
  * label↔control rows divided by hairlines, no card frames.
  *
  * Editable fields are declared inline via SettingRow's props API
@@ -25,7 +29,9 @@ interface AccountSectionProps {
  */
 export const AccountSection: React.FC<AccountSectionProps> = ({
   enableDeleteAccount = true,
+  enableSecurity = true,
 }) => {
+  const copy = useSettingsCopy();
   const { labels, save: onFieldSave, logout } = useProfileSave();
   const { user } = useAuth();
 
@@ -79,8 +85,7 @@ export const AccountSection: React.FC<AccountSectionProps> = ({
         />
       </SettingsBlock>
 
-      {/* Language + Theme moved to the settings-rail footer (bottom-left of the
-          dialog) — they are app-shell "chrome" prefs, not per-account fields. */}
+      {enableSecurity && <TwoFactorSection />}
 
       <SettingsBlock title={labels.actions}>
         <SettingRow
@@ -102,7 +107,7 @@ export const AccountSection: React.FC<AccountSectionProps> = ({
       {enableDeleteAccount && (
         // The whole Danger zone is collapsible (closed by default) so
         // destructive actions stay tucked away until deliberately revealed.
-        <SettingsBlock title="Danger zone" collapsible defaultOpen={false}>
+        <SettingsBlock title={copy.account.dangerZone} collapsible defaultOpen={false}>
           <DeleteAccountRow />
         </SettingsBlock>
       )}

package/src/layouts/SettingsLayout/sections/DeleteAccountRow.tsx

@@ -7,6 +7,8 @@ import { useDeleteAccount } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Button, SettingRow } from '@djangocfg/ui-core/components';
 
+import { useSettingsCopy } from '../i18n';
+
 /**
  * Compact "Delete account" row — a flat row with a small destructive button on
  * the right. Lives inside the collapsible "Danger zone" block, so the section
@@ -16,6 +18,7 @@ import { Button, SettingRow } from '@djangocfg/ui-core/components';
 export const DeleteAccountRow: React.FC = () => {
   const { deleteAccount, isLoading } = useDeleteAccount();
   const t = useAppT();
+  const copy = useSettingsCopy();
 
   const confirmationWord = t('layouts.profilePage.confirmationWord');
 
@@ -37,7 +40,7 @@ export const DeleteAccountRow: React.FC = () => {
   return (
     <SettingRow
       label={t('layouts.profilePage.deleteAccount')}
-      description="Permanently remove your account and all associated data."
+      description={copy.account.deleteAccountDescription}
       action={
         <Button
           variant="destructive"

package/src/layouts/SettingsLayout/sections/GeneralSection.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+
+import { SettingsBlock } from '@djangocfg/ui-core/components';
+
+import { useSettingsCopy } from '../i18n';
+import { PreferencesRows } from './PreferencesRows';
+
+/**
+ * Interface preferences — theme, language and time zone live here, not in the dialog
+ * chrome. `children` are the host's own rows (see `SettingsContent.generalRows`),
+ * rendered in a second block so they read as separate from the built-ins.
+ */
+export const GeneralSection: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const copy = useSettingsCopy();
+  return (
+  <div className="space-y-8">
+    <SettingsBlock title={copy.prefs.general}>
+      <PreferencesRows />
+    </SettingsBlock>
+    {children ? <SettingsBlock title={copy.prefs.other}>{children}</SettingsBlock> : null}
+  </div>
+  );
+};

package/src/layouts/SettingsLayout/sections/PreferencesRows.tsx

@@ -2,26 +2,30 @@
 
 import React from 'react';
 
-import { SettingRow } from '@djangocfg/ui-core/components';
+import { useTimezone } from '@djangocfg/api/auth';
+import { SettingRow, TimezoneSelect } from '@djangocfg/ui-core/components';
 import { ThemeSegmented } from '@djangocfg/ui-core/theme';
 
 import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useSettingsCopy } from '../i18n';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 
 /**
- * Preferences as native SettingRows (Language + Theme), so they share the exact
+ * Preferences as native SettingRows (Language + Time zone + Theme), so they share the exact
  * row/divider/spacing of the rest of the settings panel. Mirrors the controls
  * from ProfileLayout's PreferencesSection but in the lighter Claude-style row
  * layout. Language only renders when a layout i18n context is present.
  */
 export const PreferencesRows: React.FC = () => {
+  const copy = useSettingsCopy();
   const layoutI18n = useLayoutI18nOptional();
+  const { preference, setTimezone } = useTimezone();
 
   return (
     <>
       {layoutI18n && (
         <SettingRow
-          label="Language"
+          label={copy.prefs.language}
           action={
             <LocaleSwitcherDropdown
               locale={layoutI18n.locale}
@@ -37,7 +41,11 @@ export const PreferencesRows: React.FC = () => {
           }
         />
       )}
-      <SettingRow label="Theme" action={<ThemeSegmented />} />
+      <SettingRow
+        label={copy.prefs.timeZone}
+        action={<TimezoneSelect value={preference} onChange={setTimezone} className="w-72" />}
+      />
+      <SettingRow label={copy.prefs.theme} action={<ThemeSegmented />} />
     </>
   );
 };

package/src/layouts/SettingsLayout/sections/builtins.tsx

@@ -2,79 +2,84 @@
 
 import React from 'react';
 
-import { KeyRound, ShieldCheck, UserRound } from 'lucide-react';
+import { KeyRound, Settings as SettingsIcon, UserRound } from 'lucide-react';
 
 import type { SettingsBuiltins, SettingsGroup, SettingsSection } from '../types';
 import { AccountSection } from './AccountSection';
+import { GeneralSection } from './GeneralSection';
 import { ApiKeysSection } from './ApiKeysSection';
-import { SecuritySection } from './SecuritySection';
+import type { SettingsCopy } from '../i18n';
 
 /**
- * The group every built-in section belongs to. App sections can reuse this id
+ * The (unlabelled) group Account and Preferences belong to — they open the rail, like Claude. App sections can reuse this id
  * to sit alongside the built-ins, or define their own groups.
  */
-export const BUILTIN_GROUP: SettingsGroup = { id: 'general', label: 'General', order: 0 };
+export const BUILTIN_GROUP: SettingsGroup = { id: 'general', order: 0 };
+
+/** Developer-facing sections (API keys). */
+export const PLATFORM_GROUP: SettingsGroup = { id: 'platform', order: 1 };
 
 interface BuildBuiltinArgs {
   builtins: SettingsBuiltins;
   enableDeleteAccount: boolean;
+  generalRows?: React.ReactNode;
+  copy: SettingsCopy;
 }
 
 /**
- * Construct the enabled built-in sections. Pure function of the flags — labels
- * are left as plain strings here (the inner section bodies pull localized copy
- * from ProfileProvider); only the nav-level label/title live at this layer.
+ * Construct the enabled built-in sections. Pure function of the flags and the
+ * active `copy` — nav-level labels/titles come from the Settings dictionaries.
  *
- * Defaults: everything on. Security (2FA management) is a built-in the user
- * must be able to find without the app opting in — `/cfg/totp/*` ships with
- * every django-cfg backend. Apps that truly lack it opt out explicitly via
- * `builtins.security: false`.
+ * Defaults: everything on. Security (2FA) is a block inside Account, not its own
+ * section — `/cfg/totp/*` ships with every django-cfg backend. Apps that truly
+ * lack it opt out explicitly via `builtins.security: false`.
  */
 export function buildBuiltinSections({
   builtins,
   enableDeleteAccount,
+  generalRows,
+  copy,
 }: BuildBuiltinArgs): SettingsSection[] {
-  const { account = true, security = true, apiKeys = true } = builtins;
+  const { general = true, account = true, security = true, apiKeys = true } = builtins;
   const sections: SettingsSection[] = [];
 
   if (account) {
     sections.push({
       id: 'account',
-      label: 'Account',
+      label: copy.nav.account,
       icon: UserRound,
       group: BUILTIN_GROUP.id,
-      title: 'Account',
-      description: 'Manage your profile, preferences, and account.',
-      keywords: ['profile', 'name', 'email', 'avatar', 'language', 'theme', 'preferences'],
-      content: <AccountSection enableDeleteAccount={enableDeleteAccount} />,
+      title: copy.nav.account,
+      keywords: ['profile', 'name', 'email', 'avatar', 'security', '2fa', 'two-factor', 'mfa', 'authenticator'],
+      content: <AccountSection enableDeleteAccount={enableDeleteAccount} enableSecurity={security} />,
     });
   }
 
-  if (security) {
+  if (general) {
     sections.push({
-      id: 'security',
-      label: 'Security',
-      icon: ShieldCheck,
+      id: 'general',
+      label: copy.nav.preferences,
+      icon: SettingsIcon,
       group: BUILTIN_GROUP.id,
-      title: 'Security',
-      description: 'Two-factor authentication and active sessions.',
-      keywords: ['2fa', 'two-factor', 'mfa', 'authenticator', 'password', 'devices'],
-      content: <SecuritySection />,
+      title: copy.nav.preferences,
+      keywords: ['theme', 'appearance', 'dark', 'light', 'language', 'locale', 'preferences'],
+      content: <GeneralSection>{generalRows}</GeneralSection>,
     });
   }
 
   if (apiKeys) {
     sections.push({
       id: 'api-keys',
-      label: 'API keys',
+      label: copy.nav.apiKeys,
       icon: KeyRound,
-      group: BUILTIN_GROUP.id,
-      title: 'API keys',
-      description: 'Create and manage keys for programmatic access.',
+      group: PLATFORM_GROUP.id,
+      title: copy.nav.apiKeys,
+      description: copy.nav.apiKeysDescription,
       keywords: ['api', 'token', 'key', 'secret', 'developer'],
       content: <ApiKeysSection />,
     });
   }
 
+
   return sections;
 }

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

@@ -1,6 +1,6 @@
-export { buildBuiltinSections, BUILTIN_GROUP } from './builtins';
+export { buildBuiltinSections, BUILTIN_GROUP, PLATFORM_GROUP } from './builtins';
+export { GeneralSection } from './GeneralSection';
 export { AccountSection } from './AccountSection';
-export { SecuritySection } from './SecuritySection';
 export { ApiKeysSection } from './ApiKeysSection';
 // SettingRow/SettingsBlock now live in ui-core (universal). Re-export for
 // backward compatibility with consumers importing them from @djangocfg/layouts.

package/src/layouts/SettingsLayout/store.ts

@@ -15,7 +15,17 @@
 
 import { create } from 'zustand';
 
+/** What a menu needs to link to a section; the dialog registers these (host sections are only known to it). */
+export interface SettingsMenuSection {
+  id: string;
+  label: React.ReactNode;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
 interface SettingsDialogState {
+  /** The visible sections of the mounted dialog, in rail order, for menu shortcuts. */
+  sections: SettingsMenuSection[];
+  setSections: (sections: SettingsMenuSection[]) => void;
   /** Whether the dialog is visible. */
   isOpen: boolean;
   /**
@@ -34,6 +44,8 @@ interface SettingsDialogState {
 }
 
 export const useSettingsDialogStore = create<SettingsDialogState>((set) => ({
+  sections: [],
+  setSections: (sections) => set({ sections }),
   isOpen: false,
   activeSection: null,
   open: (sectionId) =>

package/src/layouts/SettingsLayout/types.ts

@@ -56,9 +56,11 @@ export interface SettingsSection {
 
 /** Toggle flags for the built-in sections shipped by SettingsLayout. */
 export interface SettingsBuiltins {
-  /** Account / profile fields + preferences. Default: true. */
+  /** Appearance (theme) + language. Default: true. */
+  general?: boolean;
+  /** Account: profile fields, security block, danger zone. Default: true. */
   account?: boolean;
-  /** Two-factor / security. Default: false (opt-in, needs API support). */
+  /** Two-factor block inside Account. Default: true; needs the totp API. */
   security?: boolean;
   /** API keys. Default: true. */
   apiKeys?: boolean;
@@ -74,10 +76,16 @@ export interface SettingsContent {
   groups?: SettingsGroup[];
   /** Which built-in sections to include. */
   builtins?: SettingsBuiltins;
+  /**
+   * Extra `SettingRow`s appended to the General section (after Appearance and
+   * Language), for preferences only the host knows: density, date format,
+   * time zone. The layout adds none of its own.
+   */
+  generalRows?: React.ReactNode;
   /** Section id to open first. Defaults to the first visible section. */
   initialSection?: string;
-  /** Show the search box above the nav rail. Default: true. */
-  searchable?: boolean;
+  /** Search box above the nav rail. `'auto'` (default) shows it from 10 sections up. */
+  searchable?: boolean | 'auto';
   /** Allow account deletion in the account section. Default: true. */
   enableDeleteAccount?: boolean;
 }

package/src/layouts/_components/locale-switcher/LocaleSwitcher.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { useLayoutI18n } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18n } from '../../../shared/LayoutI18nProvider';
 
 import { LocaleSwitcherDialog } from './LocaleSwitcherDialog';
 import { LocaleSwitcherDropdown } from './LocaleSwitcherDropdown';

package/src/layouts/types/layout.types.ts

@@ -133,11 +133,10 @@ export interface I18nLayoutConfig {
 
 /**
  * Visual style of the private/app shell.
- * - `boxed` (default) — content lives in a fixed, rounded card inset from the
- *   viewport edges while the sidebar-coloured background bleeds to the screen
- *   border. Internal scroll inside the card; mobile (<md) falls back to
- *   `full-bleed` automatically.
- * - `full-bleed` — content stretches edge-to-edge next to the sidebar (legacy look).
+ * - `full-bleed` (default) — flat, Claude-style: content fills the page next to
+ *   the sidebar, divided by a single 1px border.
+ * - `boxed` — content lives in a rounded card inset from the viewport edges on a
+ *   sidebar-coloured canvas. Mobile (<md) falls back to `full-bleed` automatically.
  */
 export type LayoutVisualVariant = 'full-bleed' | 'boxed';
 
@@ -152,7 +151,7 @@ export type LayoutBoxedBackground = 'sidebar' | 'muted' | 'card' | 'background';
  * All `boxed`-only options are ignored when `variant === 'full-bleed'`.
  */
 export interface LayoutVisualConfig {
-  /** Visual variant. Default: `'boxed'`. */
+  /** Visual variant. Default: `'full-bleed'`. */
   variant?: LayoutVisualVariant;
   /**
    * Inset (px) between the boxed container and the viewport edges on desktop.

package/src/{layouts/AppLayout → shared}/LayoutI18nProvider.tsx

@@ -15,7 +15,7 @@
 
 import * as React from 'react';
 
-import type { I18nLayoutConfig } from '../types/layout.types';
+import type { I18nLayoutConfig } from '../layouts/types/layout.types';
 
 const LayoutI18nContext = React.createContext<I18nLayoutConfig | null>(null);
 

package/src/styles/dashboard.css

@@ -39,3 +39,13 @@
   padding: 1.5rem;
   overflow-y: auto;
 }
+
+/* While the sidebar edge is dragged the width must follow the pointer 1:1. */
+[data-sidebar-resizing] {
+  cursor: col-resize;
+  user-select: none;
+}
+[data-sidebar-resizing] [data-variant][data-state],
+[data-sidebar-resizing] [data-variant][data-state] * {
+  transition: none !important;
+}

package/src/layouts/PrivateLayout/density.ts

@@ -1,48 +0,0 @@
-/**
- * Nav Density Tokens
- *
- * Density presets for sidebar navigation items.
- * The active preset is chosen via the `density` prop on `SidebarConfig`;
- * when omitted it defaults to `'default'`.
- */
-
-export type NavDensity = 'comfortable' | 'default' | 'compact';
-
-export const DENSITY = {
-  comfortable: {
-    menu: 'gap-1.5',
-    group: 'gap-2',
-    groupPad: 'px-2 py-1',
-    label:
-      'h-7 uppercase text-[10px] font-light leading-none tracking-[0.14em] text-sidebar-foreground/40',
-    buttonSize: 'lg' as const,
-    iconClass: 'h-5 w-5',
-    extraButton: 'rounded-lg !px-3',
-    headerRowInset: 'pl-2',
-  },
-  default: {
-    menu: 'gap-1',
-    group: 'gap-1.5',
-    groupPad: 'px-2 py-1',
-    label:
-      'uppercase text-[9px] font-light leading-none tracking-[0.12em] text-sidebar-foreground/50',
-    buttonSize: 'default' as const,
-    iconClass: 'h-4 w-4',
-    extraButton: 'rounded-lg',
-    headerRowInset: 'pl-1.5',
-  },
-  compact: {
-    menu: 'gap-0.5',
-    group: 'gap-0.5',
-    groupPad: 'px-2 py-0.5',
-    label:
-      'h-6 uppercase text-[8px] font-light leading-none tracking-[0.1em] text-sidebar-foreground/40',
-    buttonSize: 'sm' as const,
-    iconClass: 'h-3.5 w-3.5',
-    extraButton: 'rounded-md !px-2',
-    headerRowInset: 'pl-1.5',
-  },
-} as const;
-
-/** Icon rail: always the same geometry — ignore comfortable/compact. */
-export const RAIL_NAV = DENSITY.default;

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

@@ -1,110 +0,0 @@
-/**
- * Hover Expand Hook
- *
- * Manages hover-expand state for collapsed sidebar with debounce.
- * - enterDelay: ms before expanding on hover (default 250)
- * - leaveDelay: ms before collapsing on mouse leave (default 150)
- * - Listens for `sidebar:blockcollapse` / `sidebar:allowcollapse` custom events
- *   so descendant components (e.g. account dropdown) can block collapse without
- *   prop drilling or context churn.
- * - Clears timers on unmount / re-hover to prevent false triggers.
- */
-
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-interface UseHoverExpandOptions {
-  /** Delay before expanding on mouse enter (ms). Default 250. */
-  enterDelay?: number;
-  /** Delay before collapsing on mouse leave (ms). Default 150. */
-  leaveDelay?: number;
-  /** Whether hover-expand is enabled (e.g. only on desktop collapsed rail). */
-  enabled?: boolean;
-}
-
-interface UseHoverExpandResult {
-  /** Whether the sidebar is currently hover-expanded */
-  isHoverExpanded: boolean;
-  /** Attach to the sidebar root element */
-  onMouseEnter: () => void;
-  /** Attach to the sidebar root element */
-  onMouseLeave: () => void;
-  /** Programmatically set hover-expanded state (for click-to-expand) */
-  setHoverExpanded: (value: boolean) => void;
-}
-
-export function useHoverExpand({
-  enterDelay = 2000,
-  leaveDelay = 450,
-  enabled = true,
-}: UseHoverExpandOptions = {}): UseHoverExpandResult {
-  const [isHoverExpanded, setIsHoverExpanded] = useState(false);
-  const blockedRef = useRef(false);
-  const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const leaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clearTimers = useCallback(() => {
-    if (enterTimerRef.current) {
-      clearTimeout(enterTimerRef.current);
-      enterTimerRef.current = null;
-    }
-    if (leaveTimerRef.current) {
-      clearTimeout(leaveTimerRef.current);
-      leaveTimerRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => {
-    const onBlock = () => {
-      blockedRef.current = true;
-    };
-    const onAllow = () => {
-      blockedRef.current = false;
-    };
-    window.addEventListener('sidebar:blockcollapse', onBlock);
-    window.addEventListener('sidebar:allowcollapse', onAllow);
-    return () => {
-      window.removeEventListener('sidebar:blockcollapse', onBlock);
-      window.removeEventListener('sidebar:allowcollapse', onAllow);
-    };
-  }, []);
-
-  const onMouseEnter = useCallback(() => {
-    if (!enabled) return;
-    clearTimers();
-    enterTimerRef.current = setTimeout(() => {
-      setIsHoverExpanded(true);
-    }, enterDelay);
-  }, [enabled, enterDelay, clearTimers]);
-
-  const onMouseLeave = useCallback(() => {
-    if (!enabled) return;
-    if (blockedRef.current) return;
-    clearTimers();
-    leaveTimerRef.current = setTimeout(() => {
-      setIsHoverExpanded(false);
-    }, leaveDelay);
-  }, [enabled, leaveDelay, clearTimers]);
-
-  useEffect(() => {
-    return () => clearTimers();
-  }, [clearTimers]);
-
-  const setHoverExpanded = useCallback((value: boolean) => {
-    clearTimers();
-    setIsHoverExpanded(value);
-  }, [clearTimers]);
-
-  return { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded };
-}
-
-/** Dispatch from any descendant to block sidebar collapse while e.g. a dropdown is open. */
-export function blockSidebarCollapse(): void {
-  window.dispatchEvent(new CustomEvent('sidebar:blockcollapse'));
-}
-
-/** Dispatch when the blocking reason is gone (e.g. dropdown closed). */
-export function allowSidebarCollapse(): void {
-  window.dispatchEvent(new CustomEvent('sidebar:allowcollapse'));
-}