@djangocfg/layouts 2.1.592 → 2.1.593

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -16,7 +16,6 @@
 'use client';
 
 import React, {
-  type ReactNode,
   memo,
   useEffect,
   useLayoutEffect,
@@ -31,190 +30,24 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { usePathnameWithoutLocale } from '../../../hooks';
 import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 import { usePublicLayoutOptional } from '../context';
 import {
   useDropdownMenu,
   useNavbarScroll,
   useNavbarViewportVars,
 } from '../hooks';
-import type {
-  PublicDesktopDropdownRenderer,
-  PublicNavbarHeight,
-  PublicNavbarInsetX,
-  PublicNavbarPosition,
-  PublicNavbarVariant,
-  PublicNavLayout,
-} from '../navbarTypes';
-import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { NavigationItem } from '../../types';
 
 import { NavActions } from '../primitives/NavActions';
-import type { NavAction } from '../primitives/NavActionItem';
 import { NavBrand } from '../primitives/NavBrand';
 import { NavControls } from '../primitives/NavControls';
 import { NavDesktopItems } from '../primitives/NavDesktopItems';
 
 import { NavbarRowDesktop, NavbarRowMobile } from './navbarRows';
 
-/**
- * Vertical padding, per breakpoint. Two independent scales rather than one with
- * `sm:` steps inside it: the mobile row's tallest element is the 44px burger,
- * so padding there is pure added height, while the desktop row needs the extra
- * air to keep the link list off the panel edge.
- */
-const heightClsDesktop: Record<PublicNavbarHeight, string> = {
-  sm: 'py-2',
-  md: 'py-3.5',
-  lg: 'py-5',
-};
-
-const heightClsMobile: Record<PublicNavbarHeight, string> = {
-  sm: 'py-1.5',
-  md: 'py-2',
-  lg: 'py-3',
-};
-
-/**
- * Token → Tailwind class for the inner-row horizontal padding.
- *
- * Deliberately ASYMMETRIC at every breakpoint (`pl` > `pr`) to correct an
- * optical imbalance, not a measured one. On the left the gutter meets the
- * brand's glyphs directly; on the right it meets a button — an icon square on
- * phones, the Login pill on desktop — whose box carries its own internal
- * padding around the glyph. Equal `px` therefore *looks* lopsided, with a
- * conspicuous moat to the right of the last control.
- *
- * It also stacks with the navbar shell's own outer gutter (`px-3 sm:px-4
- * lg:px-6`), which is why the right side stays small in absolute terms: at
- * `lg` the symmetric version put ~48px between the Login button and the
- * viewport edge.
- */
-/** Desktop (`lg`+) horizontal inset. Right stays trimmed — see the note above. */
-const insetXClsDesktop: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
-  none: '',
-  xs: 'lg:pl-4 lg:pr-1.5',
-  sm: 'lg:pl-6 lg:pr-2',
-  md: 'lg:pl-8 lg:pr-3',
-  lg: 'lg:pl-12 lg:pr-5',
-};
-
-/** Mobile horizontal inset — tighter, and asymmetric for the same reason. */
-const insetXClsMobile: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
-  none: '',
-  xs: 'pl-3 pr-1',
-  sm: 'pl-4 pr-1.5',
-  md: 'pl-5 pr-2',
-  lg: 'pl-6 pr-3',
-};
-
-/**
- * Resolves the inset token into one class string covering both breakpoints.
- *
- * A caller may also pass raw Tailwind instead of a token; that escape hatch is
- * applied verbatim to both rows, since we cannot know how to split it.
- */
-function resolveInsetX(value: PublicNavbarInsetX | undefined): string {
-  const token = (value ?? 'sm') as keyof typeof insetXClsMobile;
-  if (!(token in insetXClsMobile)) return value as string;
-  return cn(insetXClsMobile[token], insetXClsDesktop[token]);
-}
-
-interface ShapeInputs {
-  /** true at scrollY >= threshold */
-  scrolled: boolean;
-  /** Matches `transparent` flag at the source. */
-  transparent: boolean;
-  /**
-   * true while the mobile drawer is open. A `transparent` bar MUST go opaque
-   * here regardless of scroll position: an open drawer means the brand + close
-   * button sit over page content, and a see-through bar leaves them floating on
-   * whatever is scrolled behind — the "navbar lost its background" bug.
-   */
-  menuOpen: boolean;
-}
-
-export interface NavbarShellProps {
-  // ── Surface identity (reported to context) ────────────────────────────────
-  variant: PublicNavbarVariant;
-  position: PublicNavbarPosition;
-
-  // ── Content ───────────────────────────────────────────────────────────────
-  brand?: ReactNode;
-  brandHref?: string;
-  navigation?: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
-  /**
-   * Hard cap for how many items to try to fit on desktop. Useful when a
-   * consumer wants to force a compact primary row even if more would fit.
-   * Defaults to the full list length (let the responsive measurer decide).
-   */
-  desktopMaxPrimaryItems?: number;
-
-  // ── Layout ────────────────────────────────────────────────────────────────
-  navLayout?: PublicNavLayout;
-  navbarHeight?: PublicNavbarHeight;
-  /** Horizontal inset between outer edge and the inner row.
-   *  @default 'sm' */
-  insetX?: PublicNavbarInsetX;
-  /** Full override for the row container (escape hatch).
-   *  When set, wins over `insetX`. */
-  innerPadding?: string;
-
-  // ── Scroll behavior ───────────────────────────────────────────────────────
-  hideNavOnScroll?: boolean;
-  transparent?: boolean;
-  transparentThreshold?: number;
-
-  // ── Chrome (per-variant) ──────────────────────────────────────────────────
-  /** Classes on the outer wrapper (fixed/sticky, top offset, outer x-padding). */
-  outerClassName?: string;
-  /** Classes for the `<nav>` element defining the shape (rounding, border, shadow). */
-  shapeClassName?: string;
-  /** Surface classes (bg, backdrop-blur). Driven by `shapeForState`. */
-  shapeForState?: (inputs: ShapeInputs) => string;
-
-  /**
-   * Replaces the default actions column (UserMenu + mobile-toggle).
-   * Variant owns the mobile toggle too. Receives helpers so it can build the
-   * right-hand side however it wants.
-   */
-  renderActions?: (ctx: NavbarActionsContext) => ReactNode;
-
-  // ── Default-actions slots (only used when `renderActions` is NOT provided) ─
-  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
-  actions?: NavAction[];
-  /** Arbitrary ReactNode between actions and UserMenu. */
-  actionsLeadingSlot?: ReactNode;
-  /** Arbitrary ReactNode after the mobile toggle. */
-  actionsTrailingSlot?: ReactNode;
-
-  // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
-  /** Toggle individual controls. Locale switcher also requires `i18n`. */
-  controls?: {
-    /** Light / system / dark pill. @default false */
-    showThemeSwitcher?: boolean;
-    /** Locale dropdown. Requires `i18n`. @default false */
-    showLocaleSwitcher?: boolean;
-  };
-
-  // ── Props override (used by variants that proxy ctx differently) ──────────
-  mobileMenuOpen?: boolean;
-  onMobileMenuToggle?: () => void;
-}
-
-export interface NavbarActionsContext {
-  userMenu?: UserMenuConfig;
-  mobileMenuOpen: boolean;
-  toggleMobileMenu: () => void;
-  toggleMobileLabel: string;
-  navLayout: PublicNavLayout;
-  /**
-   * Pre-built theme/locale controls node. `null` when both toggles are off.
-   * Variants with a custom `renderActions` can choose where to place it.
-   */
-  controls: ReactNode | null;
-}
+import { heightClsDesktop, heightClsMobile, resolveInsetX } from './navbarShellStyles';
+import type { NavbarShellProps } from './navbarShell.types';
 
 function NavbarShellRaw(props: NavbarShellProps) {
   const context = usePublicLayoutOptional();

package/src/layouts/PublicLayout/shared/index.ts

@@ -1,4 +1,4 @@
 export { NavbarShell } from './NavbarShell';
-export type { NavbarShellProps, NavbarActionsContext } from './NavbarShell';
+export type { NavbarShellProps, NavbarActionsContext } from './navbarShell.types';
 export { MobileDrawerShell } from './MobileDrawerShell';
 export type { MobileDrawerShellProps } from './MobileDrawerShell';

package/src/layouts/PublicLayout/shared/navbarShell.types.ts

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react';
+
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarHeight,
+  PublicNavbarInsetX,
+  PublicNavbarPosition,
+  PublicNavbarVariant,
+  PublicNavLayout,
+} from '../navbarTypes';
+import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { NavAction } from '../primitives/NavActionItem';
+
+export interface ShapeInputs {
+  /** true at scrollY >= threshold */
+  scrolled: boolean;
+  /** Matches `transparent` flag at the source. */
+  transparent: boolean;
+  /**
+   * true while the mobile drawer is open. A `transparent` bar MUST go opaque
+   * here regardless of scroll position: an open drawer means the brand + close
+   * button sit over page content, and a see-through bar leaves them floating on
+   * whatever is scrolled behind — the "navbar lost its background" bug.
+   */
+  menuOpen: boolean;
+}
+
+export interface NavbarShellProps {
+  // ── Surface identity (reported to context) ────────────────────────────────
+  variant: PublicNavbarVariant;
+  position: PublicNavbarPosition;
+
+  // ── Content ───────────────────────────────────────────────────────────────
+  brand?: ReactNode;
+  brandHref?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  /**
+   * Hard cap for how many items to try to fit on desktop. Useful when a
+   * consumer wants to force a compact primary row even if more would fit.
+   * Defaults to the full list length (let the responsive measurer decide).
+   */
+  desktopMaxPrimaryItems?: number;
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  navLayout?: PublicNavLayout;
+  navbarHeight?: PublicNavbarHeight;
+  /** Horizontal inset between outer edge and the inner row.
+   *  @default 'sm' */
+  insetX?: PublicNavbarInsetX;
+  /** Full override for the row container (escape hatch).
+   *  When set, wins over `insetX`. */
+  innerPadding?: string;
+
+  // ── Scroll behavior ───────────────────────────────────────────────────────
+  hideNavOnScroll?: boolean;
+  transparent?: boolean;
+  transparentThreshold?: number;
+
+  // ── Chrome (per-variant) ──────────────────────────────────────────────────
+  /** Classes on the outer wrapper (fixed/sticky, top offset, outer x-padding). */
+  outerClassName?: string;
+  /** Classes for the `<nav>` element defining the shape (rounding, border, shadow). */
+  shapeClassName?: string;
+  /** Surface classes (bg, backdrop-blur). Driven by `shapeForState`. */
+  shapeForState?: (inputs: ShapeInputs) => string;
+
+  /**
+   * Replaces the default actions column (UserMenu + mobile-toggle).
+   * Variant owns the mobile toggle too. Receives helpers so it can build the
+   * right-hand side however it wants.
+   */
+  renderActions?: (ctx: NavbarActionsContext) => ReactNode;
+
+  // ── Default-actions slots (only used when `renderActions` is NOT provided) ─
+  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
+  actions?: NavAction[];
+  /** Arbitrary ReactNode between actions and UserMenu. */
+  actionsLeadingSlot?: ReactNode;
+  /** Arbitrary ReactNode after the mobile toggle. */
+  actionsTrailingSlot?: ReactNode;
+
+  // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
+  /** Toggle individual controls. Locale switcher also requires `i18n`. */
+  controls?: {
+    /** Light / system / dark pill. @default false */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+
+  // ── Props override (used by variants that proxy ctx differently) ──────────
+  mobileMenuOpen?: boolean;
+  onMobileMenuToggle?: () => void;
+}
+
+export interface NavbarActionsContext {
+  userMenu?: UserMenuConfig;
+  mobileMenuOpen: boolean;
+  toggleMobileMenu: () => void;
+  toggleMobileLabel: string;
+  navLayout: PublicNavLayout;
+  /**
+   * Pre-built theme/locale controls node. `null` when both toggles are off.
+   * Variants with a custom `renderActions` can choose where to place it.
+   */
+  controls: ReactNode | null;
+}

package/src/layouts/PublicLayout/shared/navbarShellStyles.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { PublicNavbarHeight, PublicNavbarInsetX } from '../navbarTypes';
+
+/**
+ * Vertical padding, per breakpoint. Two independent scales rather than one with
+ * `sm:` steps inside it: the mobile row's tallest element is the 44px burger,
+ * so padding there is pure added height, while the desktop row needs the extra
+ * air to keep the link list off the panel edge.
+ */
+export const heightClsDesktop: Record<PublicNavbarHeight, string> = {
+  sm: 'py-2',
+  md: 'py-3.5',
+  lg: 'py-5',
+};
+
+export const heightClsMobile: Record<PublicNavbarHeight, string> = {
+  sm: 'py-1.5',
+  md: 'py-2',
+  lg: 'py-3',
+};
+
+/**
+ * Token → Tailwind class for the inner-row horizontal padding.
+ *
+ * Deliberately ASYMMETRIC at every breakpoint (`pl` > `pr`) to correct an
+ * optical imbalance, not a measured one. On the left the gutter meets the
+ * brand's glyphs directly; on the right it meets a button — an icon square on
+ * phones, the Login pill on desktop — whose box carries its own internal
+ * padding around the glyph. Equal `px` therefore *looks* lopsided, with a
+ * conspicuous moat to the right of the last control.
+ *
+ * It also stacks with the navbar shell's own outer gutter (`px-3 sm:px-4
+ * lg:px-6`), which is why the right side stays small in absolute terms: at
+ * `lg` the symmetric version put ~48px between the Login button and the
+ * viewport edge.
+ */
+/** Desktop (`lg`+) horizontal inset. Right stays trimmed — see the note above. */
+export const insetXClsDesktop: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+  none: '',
+  xs: 'lg:pl-4 lg:pr-1.5',
+  sm: 'lg:pl-6 lg:pr-2',
+  md: 'lg:pl-8 lg:pr-3',
+  lg: 'lg:pl-12 lg:pr-5',
+};
+
+/** Mobile horizontal inset — tighter, and asymmetric for the same reason. */
+export const insetXClsMobile: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+  none: '',
+  xs: 'pl-3 pr-1',
+  sm: 'pl-4 pr-1.5',
+  md: 'pl-5 pr-2',
+  lg: 'pl-6 pr-3',
+};
+
+/**
+ * Resolves the inset token into one class string covering both breakpoints.
+ *
+ * A caller may also pass raw Tailwind instead of a token; that escape hatch is
+ * applied verbatim to both rows, since we cannot know how to split it.
+ */
+export function resolveInsetX(value: PublicNavbarInsetX | undefined): string {
+  const token = (value ?? 'sm') as keyof typeof insetXClsMobile;
+  if (!(token in insetXClsMobile)) return value as string;
+  return cn(insetXClsMobile[token], insetXClsDesktop[token]);
+}
+

package/src/layouts/SettingsLayout/SettingsDialog.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
+import { useAuth } from '@djangocfg/api/auth';
 import {
   Dialog,
   DialogContent,
@@ -46,6 +47,8 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   const setSection = useSettingsDialogStore((s) => s.setSection);
   const isMobile = useIsMobile();
   const copy = useSettingsCopy();
+  // Settings are about the signed-in user: for a guest the panels are empty, so `#settings` opens nothing until sign-in.
+  const { isAuthenticated } = useAuth();
 
   // 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.
@@ -56,17 +59,24 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
     return ids;
   }, [builtins, enableDeleteAccount, appSections, copy]);
 
+  // Menus (the account menu) link to these; only this component knows the host's sections.
+  const setMenuSections = useSettingsDialogStore((s) => s.setSections);
+  useEffect(() => {
+    const all = [...buildBuiltinSections({ builtins, enableDeleteAccount, copy }), ...appSections];
+    setMenuSections(all.filter((s) => !s.hidden).map(({ id, label, icon }) => ({ id, label, icon })));
+  }, [builtins, enableDeleteAccount, appSections, copy, setMenuSections]);
+
   const resolveSection = useCallback(
     (id: string | null) => (id && knownIds.has(id) ? id : null),
     [knownIds],
   );
 
-  useSettingsUrl({ urlKey, enabled: syncUrl, resolveSection });
+  useSettingsUrl({ urlKey, enabled: syncUrl && isAuthenticated, resolveSection });
 
   const resolvedTitle = title ?? copy.nav.title;
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
+    <Dialog open={isOpen && isAuthenticated} onOpenChange={(open) => !open && close()}>
       <DialogContent
         // Desktop: large centred card, proportional to the viewport.
         // Mobile: near-fullscreen sheet (small inset) so the phone settings get

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import React from 'react';
+
+import { useAuth } from '@djangocfg/api/auth';
+import { Avatar, AvatarFallback, AvatarImage, Button, MenuBuilder } from '@djangocfg/ui-core/components';
+import type { MenuItem } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useAccountMenuItems } from '../hooks/useAccountMenuItems';
+
+export interface AccountMenuButtonProps {
+  /** `row`: avatar, name and chevron (a sidebar footer; the menu opens up). `avatar`: the avatar alone (a header; the menu opens down). */
+  variant?: 'row' | 'avatar';
+  /** Items between the Settings shortcuts and Sign out (language, app links). */
+  extra?: MenuItem[];
+  /** Small muted text after the name (a plan). */
+  plan?: string | null;
+  className?: string;
+}
+
+/**
+ * The ready user menu: trigger button plus the shared menu (email, Settings, a shortcut per
+ * Settings section, Sign out). Drop it into any chrome; renders nothing for a signed-out visitor.
+ * `PrivateLayout`'s sidebar footer builds on the same `useAccountMenuItems`.
+ */
+export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({
+  variant = 'row',
+  extra,
+  plan,
+  className,
+}) => {
+  const { user } = useAuth();
+  const items = useAccountMenuItems({ extra });
+  const [open, setOpen] = React.useState(false);
+
+  if (!user) return null;
+
+  const name = user.display_username || user.email || 'User';
+  const initial = (name.charAt(0) || '?').toUpperCase();
+  const isRow = variant === 'row';
+
+  return (
+    <MenuBuilder
+      items={items}
+      open={open}
+      onOpenChange={setOpen}
+      side={isRow ? 'top' : 'bottom'}
+      align={isRow ? 'start' : 'end'}
+      sideOffset={8}
+      contentClassName="w-60 p-1.5"
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        aria-label={name}
+        className={cn(
+          'group min-w-0 select-none gap-2 rounded-lg font-normal focus-visible:ring-0',
+          isRow ? 'h-9 w-full justify-start px-2 text-left' : 'size-9 p-0',
+          className,
+        )}
+      >
+        <Avatar className="size-6 shrink-0">
+          <AvatarImage src={user.avatar ?? ''} alt={name} />
+          <AvatarFallback className="text-xs font-medium">{initial}</AvatarFallback>
+        </Avatar>
+        {isRow && (
+          <>
+            <span className="flex min-w-0 items-baseline gap-1">
+              <span className="truncate text-sm">{name}</span>
+              {plan ? <span className="shrink-0 text-xs text-muted-foreground">· {plan}</span> : null}
+            </span>
+            <ChevronDown
+              className="ml-auto size-4 shrink-0 opacity-50 transition-transform duration-150 group-data-[state=open]:rotate-180"
+              aria-hidden
+            />
+          </>
+        )}
+      </Button>
+    </MenuBuilder>
+  );
+};

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

@@ -31,7 +31,7 @@ export const SettingsNavItem: React.FC<SettingsNavItemProps> = ({
       aria-selected={active}
       onClick={() => onSelect(section.id)}
       className={cn(
-        'group flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-base',
+        'group flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm',
         'outline-none transition-colors',
         'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
         active

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

@@ -30,7 +30,7 @@ export const SettingsSearch: React.FC = () => {
         placeholder={placeholder}
         aria-label={placeholder}
         className={cn(
-          'h-8 w-full rounded-lg border border-transparent bg-foreground/[0.05] pl-8 pr-8 text-base',
+          'h-8 w-full rounded-lg border border-transparent bg-foreground/[0.05] pl-8 pr-8 text-base md:text-sm',
           'text-foreground placeholder:text-muted-foreground',
           'outline-none transition-[border-color,background-color,box-shadow]',
           // Crisp thin accent outline (matches ui-core Input), no blurry halo.

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

@@ -14,13 +14,12 @@ import {
 } from '@djangocfg/ui-core/components';
 
 import { fill, useSettingsCopy, type SettingsCopy } from '../../i18n';
-import { TwoFactorSetup } from '../../../../snippets/TwoFactor';
+import { TwoFactorSetupDialog } from './TwoFactorSetupDialog';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────────
 
-type View = 'status' | 'setup';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Disable confirmation — inline, not a dialog. Settings already lives in a
@@ -109,7 +108,7 @@ function deviceDescription(copy: SettingsCopy['security'], createdAt: string, is
 
 export const TwoFactorSection: React.FC = () => {
   const copy = useSettingsCopy().security;
-  const [view, setView] = useState<View>('status');
+  const [setupOpen, setSetupOpen] = useState(false);
   const [showDisable, setShowDisable] = useState(false);
 
   const {
@@ -128,11 +127,11 @@ export const TwoFactorSection: React.FC = () => {
 
   const handleEnableClick = () => {
     resetSetup();
-    setView('setup');
+    setSetupOpen(true);
   };
 
   const handleSetupDone = () => {
-    setView('status');
+    setSetupOpen(false);
     fetchStatus();
   };
 
@@ -146,30 +145,6 @@ export const TwoFactorSection: React.FC = () => {
     clearError();
   };
 
-  // ── Setup flow ──────────────────────────────────────────────────────────────
-  // Lighter, card-free container. The standalone setup flow brings its own
-  // visible (Preloader-based) loading state.
-  if (view === 'setup') {
-    return (
-      <SettingsBlock title={copy.setupTitle}>
-        <div className="flex items-center justify-between pb-2">
-          <p className="text-[13px] leading-relaxed text-muted-foreground">
-            {copy.setupHint}
-          </p>
-          <Button variant="ghost" size="sm" onClick={() => setView('status')}>
-            {copy.cancel}
-          </Button>
-        </div>
-        <div className="flex justify-center py-2">
-          <TwoFactorSetup
-            onComplete={handleSetupDone}
-            onSkip={() => setView('status')}
-          />
-        </div>
-      </SettingsBlock>
-    );
-  }
-
   // ── Status view ─────────────────────────────────────────────────────────────
   // One compact block: a single status row (state + action), the inline confirm
   // when turning off, then the connected devices as plain rows.
@@ -223,6 +198,16 @@ export const TwoFactorSection: React.FC = () => {
           description={deviceDescription(copy, device.createdAt, device.isPrimary)}
         />
       ))}
+
+      <TwoFactorSetupDialog
+        open={setupOpen}
+        onOpenChange={(open) => {
+          setSetupOpen(open);
+          // Closing mid-way or after finishing: the status row must reflect the server.
+          if (!open) fetchStatus();
+        }}
+        onComplete={handleSetupDone}
+      />
     </SettingsBlock>
   );
 };

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';