@djangocfg/layouts 2.1.592 → 2.1.594

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/hooks/index.ts

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

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { LogOut, Settings as SettingsIcon } from 'lucide-react';
+import { useMemo } from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
+import type { MenuItem } from '@djangocfg/ui-core/components';
+
+import { useLogout } from '../../../hooks';
+import { useSettingsDialogStore } from '../store';
+
+export interface UseAccountMenuItemsOptions {
+  /** Items placed between the settings shortcuts and Sign out (language, app links). */
+  extra?: MenuItem[];
+  /** Label above the items; defaults to the signed-in user's email. */
+  label?: string | null;
+}
+
+/**
+ * The user menu every host shares: email, Settings, a shortcut per Settings section (built-in and the host's),
+ * then Sign out. Feed it to `MenuBuilder` with any trigger, so a site's own chrome gets the same menu as
+ * `PrivateLayout`'s sidebar footer instead of a hand-rolled copy.
+ */
+export function useAccountMenuItems({ extra, label }: UseAccountMenuItemsOptions = {}): MenuItem[] {
+  const { user } = useAuth();
+  const t = useAppT();
+  const handleLogout = useLogout();
+  const sections = useSettingsDialogStore((s) => s.sections);
+  const headerLabel = label === undefined ? (user?.email ?? null) : label;
+  const signOutLabel = t('layouts.profile.signOut');
+  const settingsLabel = t('layouts.profile.settings') || 'Settings';
+
+  return useMemo<MenuItem[]>(() => {
+    const items: MenuItem[] = [];
+    if (headerLabel) items.push({ kind: 'label', id: 'email', label: headerLabel });
+
+    items.push({
+      kind: 'item',
+      id: 'settings',
+      label: settingsLabel,
+      icon: SettingsIcon,
+      shortcut: '⇧⌘,',
+      onSelect: () => useSettingsDialogStore.getState().open(),
+    });
+    for (const section of sections) {
+      items.push({
+        kind: 'item',
+        id: `settings-${section.id}`,
+        label: section.label,
+        icon: section.icon,
+        onSelect: () => useSettingsDialogStore.getState().open(section.id),
+      });
+    }
+
+    if (extra?.length) items.push(...extra);
+
+    items.push({ kind: 'separator', id: 'sep-logout' });
+    items.push({
+      kind: 'item',
+      id: 'logout',
+      label: signOutLabel,
+      icon: LogOut,
+      variant: 'destructive',
+      onSelect: () => handleLogout(),
+    });
+    return items;
+  }, [headerLabel, settingsLabel, sections, extra, signOutLabel, handleLogout]);
+}

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

@@ -15,7 +15,7 @@
 
 import { useCallback, useMemo } from 'react';
 
-import { useSettingsDialogStore } from '../store';
+import { useSettingsDialogStore, type SettingsMenuSection } from '../store';
 
 export interface UseSettingsDialogReturn {
   /** Whether the dialog is currently open. */
@@ -30,6 +30,8 @@ export interface UseSettingsDialogReturn {
   toggle: () => void;
   /** Switch the active section. */
   setSection: (sectionId: string) => void;
+  /** The visible sections of the mounted dialog (built-in and the host's), in rail order: for menu shortcuts, `open(id)`. */
+  sections: SettingsMenuSection[];
 }
 
 export function useSettingsDialog(): UseSettingsDialogReturn {
@@ -39,6 +41,7 @@ export function useSettingsDialog(): UseSettingsDialogReturn {
   const storeClose = useSettingsDialogStore((s) => s.close);
   const storeToggle = useSettingsDialogStore((s) => s.toggle);
   const storeSetSection = useSettingsDialogStore((s) => s.setSection);
+  const sections = useSettingsDialogStore((s) => s.sections);
 
   const open = useCallback((sectionId?: string) => storeOpen(sectionId), [storeOpen]);
   const close = useCallback(() => storeClose(), [storeClose]);
@@ -46,7 +49,7 @@ export function useSettingsDialog(): UseSettingsDialogReturn {
   const setSection = useCallback((id: string) => storeSetSection(id), [storeSetSection]);
 
   return useMemo(
-    () => ({ isOpen, activeSection, open, close, toggle, setSection }),
-    [isOpen, activeSection, open, close, toggle, setSection],
+    () => ({ isOpen, activeSection, open, close, toggle, setSection, sections }),
+    [isOpen, activeSection, open, close, toggle, setSection, sections],
   );
 }

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,

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

@@ -8,7 +8,7 @@ import { ThemeSegmented } from '@djangocfg/ui-core/theme';
 
 import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
 import { useSettingsCopy } from '../i18n';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 
 /**
  * Preferences as native SettingRows (Language + Time zone + Theme), so they share the exact

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;
   /**
@@ -33,7 +43,27 @@ interface SettingsDialogState {
   setSection: (sectionId: string) => void;
 }
 
-export const useSettingsDialogStore = create<SettingsDialogState>((set) => ({
+/**
+ * Same shortcuts, whatever the identity of the array or of the host's JSX labels. The dialog re-registers on
+ * every render of a host that passes `sections` inline; storing a fresh array each time would re-render every
+ * menu that reads `sections`, and when that menu shares a parent with the dialog the two feed each other.
+ * String labels are compared by value; a node label is trusted to follow its id.
+ */
+function sameMenuSections(a: SettingsMenuSection[], b: SettingsMenuSection[]): boolean {
+  if (a.length !== b.length) return false;
+  return a.every((x, i) => {
+    const y = b[i]!;
+    const sameLabel = typeof x.label === 'string' || typeof y.label === 'string' ? x.label === y.label : true;
+    return x.id === y.id && x.icon === y.icon && sameLabel;
+  });
+}
+
+export const useSettingsDialogStore = create<SettingsDialogState>((set, get) => ({
+  sections: [],
+  setSections: (sections) => {
+    if (sameMenuSections(get().sections, sections)) return;
+    set({ sections });
+  },
   isOpen: false,
   activeSection: null,
   open: (sectionId) =>

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/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);