@djangocfg/layouts 2.1.590 → 2.1.592

package/src/layouts/SettingsLayout/i18n/locales/tr.ts

@@ -0,0 +1,66 @@
+import type { SettingsCopy } from '../types';
+
+export const tr: SettingsCopy = {
+  nav: {
+    title: "Ayarlar",
+    platform: "Platform",
+    account: "Hesap",
+    preferences: "Tercihler",
+    apiKeys: "API anahtarları",
+    apiKeysDescription: "Programatik erişim için anahtarlar oluşturun ve yönetin.",
+  },
+  prefs: {
+    general: "Genel",
+    other: "Diğer",
+    language: "Dil",
+    timeZone: "Saat dilimi",
+    theme: "Tema",
+  },
+  account: {
+    dangerZone: "Tehlikeli bölge",
+    deleteAccountDescription: "Hesabınızı ve ilişkili tüm verileri kalıcı olarak silin.",
+    changeAvatar: "Avatarı değiştir",
+  },
+  search: {
+    clear: "Aramayı temizle",
+  },
+  security: {
+    title: "Güvenlik",
+    twoFactor: "İki adımlı doğrulama",
+    on: "Açık",
+    off: "Kapalı · oturum açarken ikinci bir adım ekler",
+    checking: "Kontrol ediliyor…",
+    unavailable: "Kullanılamıyor",
+    turnOn: "Aç",
+    turnOff: "Kapat",
+    setupTitle: "İki adımlı doğrulamayı ayarla",
+    setupHint: "QR kodunu kimlik doğrulama uygulamanızla (Google Authenticator, Authy vb.) tarayın",
+    cancel: "İptal",
+    deviceAdded: "{{date}} tarihinde eklendi",
+    devicePrimary: "Birincil",
+    disableTitle: "İki adımlı doğrulama kapatılsın mı?",
+    disableHint: "Onaylamak için kimlik doğrulama uygulamanızdaki 6 haneli kodu girin. Bu, hesabınızı daha az güvenli hale getirir.",
+    disabling: "Kapatılıyor…",
+    disable: "2FA'yı kapat",
+  },
+  apiKey: {
+    title: "API anahtarı",
+    description: "Programatik erişim için kişisel API anahtarınız",
+    created: "Oluşturuldu",
+    reissued: "Son yenileme",
+    neverReissued: "Hiç yenilenmedi",
+    regenerate: "API anahtarını yeniden oluştur",
+    confirmRegenerate: "Onaylamak için tıklayın",
+    regenerating: "Yeniden oluşturuluyor…",
+    regenerated: "API anahtarı yeniden oluşturuldu",
+    failedToRegenerate: "API anahtarı yeniden oluşturulamadı",
+    done: "Bitti",
+    test: "API anahtarını test et",
+    testing: "Test ediliyor…",
+    testSuccess: "API anahtarı geçerli",
+    testFailed: "API anahtarı testi başarısız oldu",
+    keyRow: "API anahtarı",
+    active: "Etkin",
+    freshKey: "Bu yeni API anahtarınız: şimdi kopyalayın. Bu sayfadan ayrıldığınızda gizlenecek.",
+  },
+};

package/src/layouts/SettingsLayout/i18n/locales/zh.ts

@@ -0,0 +1,66 @@
+import type { SettingsCopy } from '../types';
+
+export const zh: SettingsCopy = {
+  nav: {
+    title: "设置",
+    platform: "平台",
+    account: "账户",
+    preferences: "偏好设置",
+    apiKeys: "API 密钥",
+    apiKeysDescription: "创建并管理用于程序化访问的密钥。",
+  },
+  prefs: {
+    general: "常规",
+    other: "其他",
+    language: "语言",
+    timeZone: "时区",
+    theme: "主题",
+  },
+  account: {
+    dangerZone: "危险区域",
+    deleteAccountDescription: "永久删除您的账户及所有相关数据。",
+    changeAvatar: "更换头像",
+  },
+  search: {
+    clear: "清除搜索",
+  },
+  security: {
+    title: "安全",
+    twoFactor: "双重身份验证",
+    on: "已开启",
+    off: "已关闭 · 登录时增加第二步验证",
+    checking: "检查中…",
+    unavailable: "不可用",
+    turnOn: "开启",
+    turnOff: "关闭",
+    setupTitle: "设置双重身份验证",
+    setupHint: "使用您的验证器应用（Google Authenticator、Authy 等）扫描二维码",
+    cancel: "取消",
+    deviceAdded: "添加于 {{date}}",
+    devicePrimary: "主要",
+    disableTitle: "要关闭双重身份验证吗？",
+    disableHint: "请输入验证器应用中的 6 位验证码以确认。这会降低账户的安全性。",
+    disabling: "正在关闭…",
+    disable: "关闭双重验证",
+  },
+  apiKey: {
+    title: "API 密钥",
+    description: "用于程序化访问的个人 API 密钥",
+    created: "创建时间",
+    reissued: "上次重新签发",
+    neverReissued: "从未重新签发",
+    regenerate: "重新生成 API 密钥",
+    confirmRegenerate: "点击确认",
+    regenerating: "正在重新生成…",
+    regenerated: "API 密钥已重新生成",
+    failedToRegenerate: "重新生成 API 密钥失败",
+    done: "完成",
+    test: "测试 API 密钥",
+    testing: "测试中…",
+    testSuccess: "API 密钥有效",
+    testFailed: "API 密钥测试失败",
+    keyRow: "API 密钥",
+    active: "有效",
+    freshKey: "这是您的新 API 密钥，请立即复制。离开此页面后将被隐藏。",
+  },
+};

package/src/layouts/SettingsLayout/i18n/types.ts

@@ -0,0 +1,65 @@
+/** Built-in Settings strings. English is the schema of record; `{{name}}` is filled by `fill`. */
+export interface SettingsCopy {
+  nav: {
+    title: string;
+    platform: string;
+    account: string;
+    preferences: string;
+    apiKeys: string;
+    apiKeysDescription: string;
+  };
+  prefs: {
+    general: string;
+    other: string;
+    language: string;
+    timeZone: string;
+    theme: string;
+  };
+  account: {
+    dangerZone: string;
+    deleteAccountDescription: string;
+    changeAvatar: string;
+  };
+  search: {
+    clear: string;
+  };
+  security: {
+    title: string;
+    twoFactor: string;
+    on: string;
+    off: string;
+    checking: string;
+    unavailable: string;
+    turnOn: string;
+    turnOff: string;
+    setupTitle: string;
+    setupHint: string;
+    cancel: string;
+    deviceAdded: string;
+    devicePrimary: string;
+    disableTitle: string;
+    disableHint: string;
+    disabling: string;
+    disable: string;
+  };
+  apiKey: {
+    title: string;
+    description: string;
+    created: string;
+    reissued: string;
+    neverReissued: string;
+    regenerate: string;
+    confirmRegenerate: string;
+    regenerating: string;
+    regenerated: string;
+    failedToRegenerate: string;
+    done: string;
+    test: string;
+    testing: string;
+    testSuccess: string;
+    testFailed: string;
+    keyRow: string;
+    active: string;
+    freshKey: string;
+  };
+}

package/src/layouts/SettingsLayout/index.ts

@@ -50,7 +50,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 { useSettingsCopy } from '../i18n';
 import { useLayoutI18nOptional } from '../../AppLayout/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/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/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/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;