@djangocfg/layouts 2.1.501 → 2.1.503

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.501",
+  "version": "2.1.503",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.501",
-    "@djangocfg/api": "^2.1.501",
-    "@djangocfg/centrifugo": "^2.1.501",
-    "@djangocfg/devtools": "^2.1.501",
-    "@djangocfg/i18n": "^2.1.501",
-    "@djangocfg/ui-core": "^2.1.501",
+    "@djangocfg/analytics": "^2.1.503",
+    "@djangocfg/api": "^2.1.503",
+    "@djangocfg/centrifugo": "^2.1.503",
+    "@djangocfg/devtools": "^2.1.503",
+    "@djangocfg/i18n": "^2.1.503",
+    "@djangocfg/ui-core": "^2.1.503",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.501",
-    "@djangocfg/api": "^2.1.501",
-    "@djangocfg/centrifugo": "^2.1.501",
-    "@djangocfg/devtools": "^2.1.501",
-    "@djangocfg/i18n": "^2.1.501",
-    "@djangocfg/typescript-config": "^2.1.501",
-    "@djangocfg/ui-core": "^2.1.501",
-    "@djangocfg/ui-tools": "^2.1.501",
+    "@djangocfg/analytics": "^2.1.503",
+    "@djangocfg/api": "^2.1.503",
+    "@djangocfg/centrifugo": "^2.1.503",
+    "@djangocfg/devtools": "^2.1.503",
+    "@djangocfg/i18n": "^2.1.503",
+    "@djangocfg/typescript-config": "^2.1.503",
+    "@djangocfg/ui-core": "^2.1.503",
+    "@djangocfg/ui-tools": "^2.1.503",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { ThemeSegmented } from '@djangocfg/ui-core/theme';
+
+import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+
+interface SettingsRailFooterProps {
+  /**
+   * Horizontal layout (theme + language side-by-side on a single row) for the
+   * mobile header strip. Default is the stacked vertical layout used at the
+   * bottom of the desktop rail.
+   */
+  horizontal?: boolean;
+  className?: string;
+}
+
+/**
+ * Global preferences pinned to the bottom-left of the settings rail — the
+ * "chrome" controls (appearance + language) that belong with the shell, not
+ * inside the Account tab. Sits below a hairline, always visible regardless of
+ * the active section (mirrors the app-shell pattern: quick prefs live in the
+ * corner, not buried in a form).
+ *
+ * Language only renders when a layout i18n context is present.
+ */
+export const SettingsRailFooter: React.FC<SettingsRailFooterProps> = ({
+  horizontal = false,
+  className,
+}) => {
+  const layoutI18n = useLayoutI18nOptional();
+
+  return (
+    <div
+      className={cn(
+        'border-t border-border/70',
+        horizontal
+          ? 'flex items-center justify-end gap-2'
+          : 'flex flex-col gap-2 px-1 pt-3',
+        className,
+      )}
+    >
+      {!horizontal && (
+        <span className="px-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
+          Preferences
+        </span>
+      )}
+
+      <div
+        className={cn(
+          horizontal ? 'flex items-center gap-2' : 'flex items-center justify-between gap-2 px-0.5',
+        )}
+      >
+        <ThemeSegmented size="compact" />
+        {layoutI18n && (
+          <LocaleSwitcherDropdown
+            locale={layoutI18n.locale}
+            locales={layoutI18n.locales}
+            onChange={layoutI18n.onLocaleChange}
+            variant="outline"
+            size="sm"
+            showCode
+            showIcon={false}
+            showFlag
+            showTriggerLabel
+          />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -8,6 +8,7 @@ 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 {
@@ -45,8 +46,13 @@ export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, clas
       <div className={frame}>
         <div className="shrink-0 bg-muted">
           {/* Title row — `pr-12` leaves room for the dialog's corner close button. */}
-          <div className="px-4 pb-2 pt-3.5 pr-12">
-            <h2 className="text-base font-semibold tracking-tight text-foreground">{title}</h2>
+          <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">
@@ -63,9 +69,14 @@ export const SettingsShell: React.FC<SettingsShellProps> = ({ bare = false, clas
   // ── Desktop: rail + panel ──
   return (
     <div className={cn(frame, 'flex-row')}>
-      {/* Nav rail — recessed surface, one notch below the content panel. */}
-      <aside className="shrink-0 border-r border-border bg-muted p-3 md:w-52">
-        <SettingsNav />
+      {/* 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">
+          <SettingsNav />
+        </div>
+        <SettingsRailFooter className="mt-3" />
       </aside>
 
       {/* Detail panel — the lighter, primary surface. */}

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

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

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

@@ -9,7 +9,6 @@ import { Button, SettingRow, SettingsBlock } from '@djangocfg/ui-core/components
 import { AvatarSection } from '../components/AvatarSection';
 import { useProfileSave } from '../hooks/useProfileSave';
 import { DeleteAccountRow } from './DeleteAccountRow';
-import { PreferencesRows } from './PreferencesRows';
 
 interface AccountSectionProps {
   /** Render the "Danger zone" delete-account control. Default: true. */
@@ -80,9 +79,8 @@ export const AccountSection: React.FC<AccountSectionProps> = ({
         />
       </SettingsBlock>
 
-      <SettingsBlock title={labels.preferences ?? 'Preferences'}>
-        <PreferencesRows />
-      </SettingsBlock>
+      {/* Language + Theme moved to the settings-rail footer (bottom-left of the
+          dialog) — they are app-shell "chrome" prefs, not per-account fields. */}
 
       <SettingsBlock title={labels.actions}>
         <SettingRow