@djangocfg/layouts 2.1.590 → 2.1.592

package/package.json

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

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,9 +1,9 @@
 /**
  * Private Layout
  *
- * Authenticated shell: collapsible sidebar (icon rail vs expanded) + scrollable content.
- * Toggle lives in the sidebar header on desktop; on narrow viewports a `SidebarTrigger` sits in `PrivateContent` (opens the mobile Sheet).
- * Ctrl/Cmd + B still toggles the sidebar width.
+ * Authenticated shell: a docked, resizable sidebar + scrollable content.
+ * Collapsed, the sidebar leaves a trigger whose hover zone peeks it open over the page;
+ * on narrow viewports the same trigger opens a drawer. Ctrl/Cmd + B toggles it.
  *
  * Guarded: no session redirects to `header.authPath`. With `requireStaff`, a
  * signed-in non-staff user gets `ForbiddenState` instead — never a redirect,
@@ -18,9 +18,14 @@ import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-core/components';
 
 import { ForbiddenState, PrivateContent, PrivateSidebar } from './components';
-import { useAuthGuard } from './hooks';
-import { useLayoutVisual } from './hooks';
-import { useSidebarDefaultOpen } from './hooks';
+import {
+  SidebarPeekProvider,
+  SidebarWidthContext,
+  useAuthGuard,
+  useLayoutVisual,
+  useSidebarDefaultOpen,
+  useSidebarWidth,
+} from './hooks';
 
 import type { PrivateLayoutProps } from './types';
 
@@ -67,6 +72,7 @@ export function PrivateLayout({
     useLayoutVisual(visual);
 
   const defaultOpen = useSidebarDefaultOpen();
+  const sidebarWidth = useSidebarWidth(Boolean(sidebar) && sidebar?.resizable !== false);
 
   if (isLoading) {
     return (
@@ -90,28 +96,33 @@ export function PrivateLayout({
   return (
     <SidebarProvider
       defaultOpen={defaultOpen}
-      style={providerStyle}
+      style={{ ...providerStyle, ...sidebarWidth.style }}
       className={providerClassName}
+      data-sidebar-resizing={sidebarWidth.dragging || undefined}
     >
-      {sidebar && (
-        <PrivateSidebar
-          sidebar={sidebar}
-          header={header}
-          pathname={pathname}
-          variant={sidebarVariant}
-        />
-      )}
-
-      <SidebarInset className={insetClassName}>
-        <PrivateContent
-          padding={contentPadding}
-          scroll={contentScroll}
-          hasSidebar={Boolean(sidebar)}
-          visual={visual}
-        >
-          {children}
-        </PrivateContent>
-      </SidebarInset>
+      <SidebarWidthContext.Provider value={sidebarWidth}>
+        <SidebarPeekProvider pathname={pathname ?? ''}>
+          {sidebar && (
+            <PrivateSidebar
+              sidebar={sidebar}
+              header={header}
+              pathname={pathname}
+              variant={sidebarVariant}
+            />
+          )}
+
+          <SidebarInset className={insetClassName}>
+            <PrivateContent
+              padding={contentPadding}
+              scroll={contentScroll}
+              hasSidebar={Boolean(sidebar)}
+              visual={visual}
+            >
+              {children}
+            </PrivateContent>
+          </SidebarInset>
+        </SidebarPeekProvider>
+      </SidebarWidthContext.Provider>
 
       {/* Settings is the primary account dialog — always mounted so the
           account-menu "Settings" item works out of the box. `settings` is

package/src/layouts/PrivateLayout/README.md

@@ -1,6 +1,6 @@
 # PrivateLayout
 
-Authenticated app shell — collapsible sidebar (icon-rail vs expanded) + scrollable content area.
+Authenticated app shell — a docked, resizable sidebar + scrollable content area. Collapsed, a trigger remains and hovering it peeks the sidebar open over the page; on mobile it is a drawer.
 
 ```tsx
 <PrivateLayout
@@ -81,13 +81,13 @@ thin-wrapper reference, and the **BaseApp README** for the provider root.
 
 ## Visual variants
 
-`boxed` (default) — `<SidebarInset>` becomes a rounded card; the wrapper paints `bg-sidebar` so the brand colour bleeds to the viewport edges. Mobile (<md) degrades to full-bleed automatically.
+`boxed` — opt in with `visual={{ variant: 'boxed' }}`. `<SidebarInset>` becomes a rounded card; the wrapper paints `bg-sidebar` so the brand colour bleeds to the viewport edges. Mobile (<md) degrades to full-bleed automatically.
 
-`full-bleed` — content stretches edge-to-edge next to the sidebar (legacy look). Opt in with `visual={{ variant: 'full-bleed' }}`.
+`full-bleed` (default) — flat, Claude-style: sidebar, one 1px border, page.
 
 | Field | Type | Default | Notes |
 |---|---|---|---|
-| `variant` | `'full-bleed' \| 'boxed'` | `'boxed'` | Switch between the two shells. |
+| `variant` | `'full-bleed' \| 'boxed'` | `'full-bleed'` | Switch between the two shells. |
 | `inset` | `number \| { x?: number; y?: number }` | `12` | Gap (px) between the card and the viewport edges (md+). |
 | `radius` | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'2xl'` | Card corner radius. |
 | `background` | `'sidebar' \| 'muted' \| 'card' \| 'background'` | `'sidebar'` | Canvas colour painted *behind* the boxed card. |
@@ -139,10 +139,11 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 | `groups` | `SidebarGroupConfig[]` | Nav items grouped under labels. Set `group.label = ''` to render flat (no header). |
 | `homeHref` | `string` | Brand link target. |
 | `menuStart` / `menuEnd` | `ReactNode` | Free slots above / below `groups` in the scrollable column. |
-| `menuStartShowOnCollapsed` / `menuEndShowOnCollapsed` | `boolean` | Keep slots visible on the icon rail. |
+| `menuStartShowOnCollapsed` / `menuEndShowOnCollapsed` | `boolean` | Deprecated, no effect (no icon rail). |
+| `resizable` | `boolean` | Drag the sidebar edge (14–24rem, remembered under `cfg.layouts.sidebar-width`; double-click resets). Default `true`. |
 | `footer` | `ReactNode` | Custom footer node above the account block. |
-| `activeIndicator` | `'background' \| 'rail' \| 'both'` | Active item visual. Default `'background'` (legacy). `'rail'` paints a 2px primary stripe on the right edge (Vercel-style). |
-| `groupLabelStyle` | `'uppercase' \| 'plain'` | Label typography. Default `'uppercase'` (legacy ultra-light caps). Collapsible groups always render `plain`. |
+| `activeIndicator` | — | Deprecated, no effect. |
+| `groupLabelStyle` | — | Deprecated, no effect: labels are sentence case. |
 | `featured` | `SidebarFeaturedConfig` | Accent-tinted CTA tile rendered below groups (Mailersend-style). |
 
 `SidebarGroupConfig`:
@@ -152,7 +153,7 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 | `label` | `string` | Group title. Empty string → flat group (no header). |
 | `items` | `SidebarItem[]` | Nav links. |
 | `dynamic` | `boolean` | Hide group when `items` is empty (for extension-driven groups). |
-| `collapsible` | `boolean` | Render as accordion. Label becomes a clickable trigger; auto-expanded if a child is active. Disabled on the icon rail. |
+| `collapsible` | `boolean` | Render as accordion. Label becomes a clickable trigger; auto-expanded if a child is active. |
 | `defaultOpen` | `boolean` | Initial open state for collapsible groups. |
 | `icon` | `string \| LucideIcon` | Icon for the trigger (collapsible only). |
 | `hideItemIcons` | `boolean` | Hide per-item icons inside the group. Defaults to `true` when `collapsible`. |
@@ -186,7 +187,7 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 | `groups` | `UserMenuGroup[]` | Account links rendered inside the footer dropdown. |
 | `authPath` | `string` | Sign-in redirect target. |
 | `userPlan` | `string` | Subtitle under the display name (e.g. `"Max plan"`). |
-| `accountAction` | `'menu' \| 'dialog'` | Footer button behaviour. `'menu'` opens dropdown; `'dialog'` opens global ProfileDialog. Default `'menu'`. |
+| `accountAction` | — | Deprecated, no effect: the account footer always opens the menu. |
 | `footerSecondaryAction` | `{ icon, href?, onClick?, ariaLabel, pulse? }` | Optional secondary icon button inside the footer trigger (e.g. "Get apps" with pulsing dot). |
 
 The footer button opens a popover (`DropdownMenu`, `side="top"`) with: email, account links, **Language** (opens fullscreen `LocaleSwitcherDialog` if `LayoutI18nProvider` is mounted), **Theme** (cycles `light → dark → system`), and **Log out**. In dev mode the footer renders a `Guest (dev)` placeholder when there's no authenticated user, so debug controls stay reachable; in production the block hides itself.
@@ -233,7 +234,7 @@ const switcher: SidebarBrandSwitcherConfig = {
 | `onSelect` | `() => void` | Callback on select (alternative to `href`). |
 | `active` | `boolean` | Mark as currently selected (shows checkmark in dropdown). |
 
-On the collapsed icon-rail the switcher renders only the active item's avatar — no dropdown trigger.
+While the sidebar is peeked open the switcher menu keeps the panel open until it closes.
 
 ---
 
@@ -242,8 +243,6 @@ On the collapsed icon-rail the switcher renders only the active item's avatar
 ```tsx
 const sidebar: SidebarConfig = {
   homeHref: '/',
-  activeIndicator: 'rail',
-  groupLabelStyle: 'plain',
   groups: [
     {
       label: 'Email',
@@ -269,3 +268,12 @@ const header: HeaderConfig = {
   groups: [{ title: 'Account', items: [{ label: 'Settings', href: '/settings' }] }],
 };
 ```
+
+
+## Sidebar states
+
+| State | Behaviour |
+|---|---|
+| Docked | Width from `--sidebar-width`; drag the right edge, arrow keys, double-click to reset. |
+| Collapsed (desktop) | Hidden. A trigger stays top-left; hovering it (or the free area around it) floats the sidebar over the page. The panel stays while the pointer is on it or a menu opened from it is open; Esc, navigation and moving away close it. Clicking the trigger docks it. |
+| Mobile (< md) | Drawer up to 22rem: 44px rows, 20px icons, close button, safe-area insets. Trigger is a 44px ghost button, top-left. |

package/src/layouts/PrivateLayout/components/PrivateContent.tsx

@@ -1,6 +1,7 @@
 /**
- * Private layout main column — on narrow viewports a fixed menu FAB (`SidebarTrigger`) + scrollable area.
- * On viewports below `md`, the desktop sidebar is off-canvas; the trigger opens the `Drawer` from the ui-core sidebar.
+ * Private layout main column: the scroll surface, plus the sidebar trigger
+ * whenever the sidebar is not docked (collapsed on desktop, always on mobile).
+ * On desktop the trigger sits in a hover zone that peeks the sidebar open.
  */
 
 'use client';
@@ -11,6 +12,7 @@ import { SidebarTrigger, useSidebar } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import type { LayoutVisualConfig } from '../../types';
+import { useSidebarPeek } from '../hooks';
 
 interface PrivateContentProps {
   children: ReactNode;
@@ -42,61 +44,46 @@ export function PrivateContent({
   hasSidebar = true,
   visual,
 }: PrivateContentProps) {
-  const { isMobile, openMobile } = useSidebar();
+  const { isMobile, state } = useSidebar();
+  const peek = useSidebarPeek();
 
-  /**
-   * Space for fixed FAB + safe area so content does not sit under the button.
-   * Tighter when the mobile drawer is closed (FAB only). When the drawer is open, a bit more
-   * room avoids the first line sitting under the overlay edge.
-   */
-  const mobileFabClearance =
-    hasSidebar &&
-    padding === 'default' &&
-    (isMobile && !openMobile
-      ? 'max-md:pt-[max(4.25rem,calc(3.5rem+env(safe-area-inset-top,0px)))]'
-      : 'max-md:pt-[max(4.5rem,calc(3.75rem+env(safe-area-inset-top,0px)))]');
+  const showTrigger = hasSidebar && (isMobile || state === 'collapsed');
 
-  const contentTopPaddingClass =
-    padding === 'default'
-      ? hasSidebar
-        ? 'md:pt-6 lg:pt-8'
-        : 'pt-4 sm:pt-6 lg:pt-8'
-      : undefined;
+  // The trigger floats over the top-left corner; reserve its row.
+  const topPadding = showTrigger
+    ? 'pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))]'
+    : hasSidebar
+      ? 'max-md:pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))] md:pt-6 lg:pt-8'
+      : 'pt-4 sm:pt-6 lg:pt-8';
 
   const scrollAreaClass = cn(
-    // The boxed content is the MAIN surface (Claude bg-100), not a raised card.
-    // `bg-background` keeps it the warm page tone; the slightly darker
-    // sidebar-canvas behind the inset gives the floating look. (`bg-card`, now
-    // lifted to 18.4%, made this big panel read too light.)
     'min-h-0 flex-1 bg-background',
     scroll === 'auto' ? 'overflow-y-auto' : 'flex flex-col overflow-hidden',
     padding === 'default' && scroll === 'auto' && [
       'px-4 sm:px-6 lg:px-8',
       'pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))] lg:pb-[calc(2rem+env(safe-area-inset-bottom,0px))]',
+      topPadding,
     ],
-    scroll === 'auto' && contentTopPaddingClass,
-    mobileFabClearance,
   );
 
-  const mobileMenuFab = hasSidebar ? (
-    <SidebarTrigger
-      variant="secondary"
-      className={cn(
-        'fixed z-40 md:hidden',
-        'left-3 top-[max(0.75rem,env(safe-area-inset-top,0px))]',
-        'h-12 w-12 rounded-xl',
-        'border border-border shadow-md',
-        '[&_svg]:!h-6 [&_svg]:!w-6',
-        'touch-manipulation',
-      )}
-    />
-  ) : null;
-
   const innerWidthClass = MAX_WIDTH_CLASS[visual?.maxWidth ?? 'none'];
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-      {mobileMenuFab}
+    <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+      {showTrigger ? (
+        <div
+          data-sidebar="trigger-zone"
+          {...(isMobile ? undefined : peek?.zoneProps)}
+          className="absolute left-0 top-[env(safe-area-inset-top,0px)] z-20 flex size-14 items-center justify-center"
+        >
+          <SidebarTrigger
+            className={cn(
+              'text-muted-foreground hover:text-foreground',
+              isMobile ? 'size-11 [&_svg]:!size-5' : 'size-8',
+            )}
+          />
+        </div>
+      ) : null}
       <div className={scrollAreaClass}>
         {innerWidthClass ? <div className={innerWidthClass}>{children}</div> : children}
       </div>

package/src/layouts/PrivateLayout/components/PrivateSidebar.tsx

@@ -1,22 +1,19 @@
+/**
+ * The sidebar: docked on desktop, a peek panel while collapsed, a drawer on mobile.
+ */
+
 'use client';
 
 import React from 'react';
 
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  useSidebar,
-} from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
+import { Sidebar, useSidebar } from '@djangocfg/ui-core/components';
 
-import { PrivateSidebarAccount } from './PrivateSidebarAccount';
 import { PrivateLayoutProvider } from '../context';
-import { useShellVisualState, useSidebarKeyboard } from '../hooks';
+import { useSidebarKeyboard } from '../hooks';
 import type { HeaderConfig, SidebarConfig } from '../types';
-import { SidebarBrand } from './SidebarBrand';
-import { SidebarNavGroup } from './SidebarNavGroup';
-import { SidebarSlots } from './SidebarSlots';
+import { SidebarBody } from './SidebarBody';
+import { SidebarPeek } from './SidebarPeek';
+import { SidebarResizeHandle } from './SidebarResizeHandle';
 
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
@@ -25,94 +22,28 @@ interface PrivateSidebarProps {
   variant?: 'sidebar' | 'inset';
 }
 
-export function PrivateSidebar({
-  sidebar,
-  header,
-  pathname: pathnameProp,
-  variant = 'sidebar',
-}: PrivateSidebarProps) {
+export function PrivateSidebar({ sidebar, header, pathname = '', variant = 'sidebar' }: PrivateSidebarProps) {
   const { state, isMobile, setOpenMobile } = useSidebar();
-  const pathname = pathnameProp ?? '';
+  const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
 
   React.useEffect(() => {
     if (isMobile) setOpenMobile(false);
   }, [pathname, isMobile, setOpenMobile]);
 
   return (
-    <PrivateLayoutProvider
-      sidebar={sidebar}
-      header={header}
-      pathname={pathname}
-      isMobile={isMobile}
-      state={state}
-    >
-      <PrivateSidebarInner
-        sidebar={sidebar}
-        header={header}
+    <PrivateLayoutProvider sidebar={sidebar} header={header} pathname={pathname} isMobile={isMobile}>
+      <Sidebar
+        ref={setSidebarRef}
+        collapsible="offcanvas"
         variant={variant}
-      />
+        onKeyDown={handleSidebarKeyDown}
+        // Collapsed: parked off-canvas. Inert keeps it out of tab order and the a11y tree.
+        inert={state === 'collapsed' && !isMobile}
+      >
+        <SidebarBody />
+        <SidebarResizeHandle />
+      </Sidebar>
+      <SidebarPeek />
     </PrivateLayoutProvider>
   );
 }
-
-interface PrivateSidebarInnerProps {
-  sidebar: SidebarConfig;
-  header?: HeaderConfig;
-  variant: 'sidebar' | 'inset';
-}
-
-function PrivateSidebarInner({ sidebar, header, variant }: PrivateSidebarInnerProps) {
-  const layoutVariant = variant === 'inset' ? 'boxed' : 'full-bleed';
-  const { modifiers } = useShellVisualState(layoutVariant);
-  const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
-
-  const sidebarRootClass = React.useMemo(
-    () =>
-      cn(
-        '[&>[data-sidebar=sidebar]]:bg-gradient-to-t [&>[data-sidebar=sidebar]]:from-sidebar/85 [&>[data-sidebar=sidebar]]:to-sidebar',
-        modifiers.sidebarRoot,
-        modifiers.sidebarInner.map((m) => `[&>[data-sidebar=sidebar]]:${m}`),
-      ),
-    [modifiers],
-  );
-
-  const sidebarContentClass = React.useMemo(
-    () => cn('gap-2', modifiers.sidebarContent),
-    [modifiers.sidebarContent],
-  );
-
-  const renderedGroups = React.useMemo(
-    () =>
-      sidebar.groups.map((group) => {
-        if (group.dynamic && group.items.length === 0) return null;
-        return (
-          <SidebarNavGroup
-            key={group.label || `__flat_${group.items.map((i) => i.href).join('|')}`}
-            group={group}
-          />
-        );
-      }),
-    [sidebar.groups],
-  );
-
-  return (
-    <Sidebar
-      ref={setSidebarRef}
-      collapsible="icon"
-      variant={variant}
-      className={sidebarRootClass}
-      onKeyDown={handleSidebarKeyDown}
-    >
-      <SidebarBrand />
-
-      <SidebarContent className={sidebarContentClass}>
-        <SidebarSlots />
-        {renderedGroups}
-      </SidebarContent>
-
-      <SidebarFooter className="p-0">
-        <PrivateSidebarAccount header={header} />
-      </SidebarFooter>
-    </Sidebar>
-  );
-}

package/src/layouts/PrivateLayout/components/PrivateSidebarAccount.tsx

@@ -11,7 +11,7 @@
 
 'use client';
 
-import { ChevronsUpDown, Languages, LogOut, Settings as SettingsIcon } from 'lucide-react';
+import { ChevronDown, Languages, LogOut, Settings as SettingsIcon } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
 import React, { memo } from 'react';
 
@@ -33,7 +33,8 @@ import { useLogout } from '../../../hooks';
 import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 import { LucideIcon as LucideIconRender } from '../../../components';
 import { getLocaleMeta } from '../../_components/locale-switcher/localeMeta';
-import { useShellVisualState } from '../hooks';
+import { usePeekPin } from '../hooks';
+import { usePrivateLayoutContext } from '../context';
 import { useSettingsDialogStore } from '../../SettingsLayout/store';
 
 import type { HeaderConfig } from '../types';
@@ -56,8 +57,9 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const t = useAppT();
   const layoutI18n = useLayoutI18nOptional();
   const { setOpen: setSidebarOpen } = useSidebar();
-  const { content } = useShellVisualState();
+  const { isMobile } = usePrivateLayoutContext();
   const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
+  usePeekPin(isAccountMenuOpen);
 
   const signOutLabel = t('layouts.profile.signOut');
 
@@ -91,22 +93,12 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     };
   }, [user, header?.userPlan]);
 
-  const onTriggerInteract = React.useCallback(() => {
-    if (content.isAccountCompact) setSidebarOpen(true);
-  }, [content.isAccountCompact, setSidebarOpen]);
-
   const onSecondaryExpand = React.useCallback(() => {
     setSidebarOpen(true);
   }, [setSidebarOpen]);
 
   const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
 
-  // `accountAction: 'dialog'` opens the global SettingsDialog (mounted in
-  // PrivateLayout). Requires `settings` to be passed to PrivateLayout.
-  const openSettingsDialog = React.useCallback(() => {
-    useSettingsDialogStore.getState().open();
-  }, []);
-
   // ── Declarative account menu (Claude-style) — fed to MenuBuilder ──
   const menuItems = React.useMemo<MenuItem[]>(() => {
     const items: MenuItem[] = [];
@@ -201,80 +193,57 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const secondary = header?.footerSecondaryAction;
 
   const triggerClassName = cn(
-    'group h-auto w-full gap-3 rounded-lg px-3 py-3 text-left select-none',
-    'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+    'group h-8 min-w-0 max-w-full justify-start gap-2 rounded-lg px-2 text-left font-normal select-none',
+    // Full-width row unless a secondary action shares the footer.
+    !secondary && 'w-full',
+    'hover:bg-sidebar-accent/70 hover:text-sidebar-foreground',
     // No focus ring on the menu trigger — the open menu is the affordance.
     'focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-    content.isAccountCompact ? 'justify-center px-0 py-2' : 'min-h-[52px]',
+    isMobile && 'h-11',
   );
 
-  const secondaryButton = secondary && !content.isAccountCompact ? (
+  const secondaryButton = secondary ? (
     <SecondaryAction action={secondary} onParentExpand={onSecondaryExpand} />
   ) : null;
 
-  const dropdownContentClass = cn(
-    'p-1.5',
-    content.isAccountCompact ? 'min-w-60' : 'w-[var(--radix-dropdown-menu-trigger-width)] min-w-60',
-  );
+  const dropdownContentClass = 'w-60 p-1.5';
   // Always open UPWARD over the avatar (Claude pattern). The footer sits at the
   // bottom of the rail in both expanded and collapsed states, so `top` reads
   // correctly either way (vs. `right`, which floated off to the side).
   const dropdownSide = 'top' as const;
-  const avatarClass = cn(
-    'h-9 w-9 shrink-0 border border-transparent transition-colors',
-    'group-hover:border-sidebar-border/70',
-  );
+  const avatarClass = cn('shrink-0', isMobile ? 'size-7' : 'size-6');
 
-  const expandedMeta = content.isAccountCompact ? null : (
+  // Like Claude: "Name · Plan ⌄". The email lives in the menu header.
+  const expandedMeta = (
     <>
-      <span className="flex min-w-0 flex-1 flex-col text-left">
-        <span className="truncate text-sm font-medium leading-tight text-sidebar-foreground">
-          {account.displayName}
-        </span>
+      <span className="flex min-w-0 items-baseline gap-1 text-left">
+        <span className="truncate text-base text-sidebar-foreground">{account.displayName}</span>
         {account.plan ? (
-          <span className="truncate text-xs leading-snug text-sidebar-foreground/60">
-            {account.plan}
-          </span>
-        ) : null}
-      </span>
-      <span className="flex shrink-0 items-center gap-1.5">
-        {secondaryButton}
-        {header?.accountAction !== 'dialog' ? (
-          <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+          <span className="shrink-0 text-xs text-sidebar-foreground/50">· {account.plan}</span>
         ) : null}
       </span>
+      <ChevronDown
+        className={cn(
+          'size-4 shrink-0 text-sidebar-foreground/40 transition-transform duration-150 group-data-[state=open]:rotate-180',
+          !secondary && 'ml-auto',
+        )}
+        aria-hidden
+      />
     </>
   );
 
   const triggerButton = (
-    <Button
-      type="button"
-      variant="ghost"
-      aria-label={content.isAccountCompact ? account.displayName : undefined}
-      className={triggerClassName}
-      onClick={header?.accountAction === 'dialog' ? openSettingsDialog : onTriggerInteract}
-    >
+    <Button type="button" variant="ghost" className={triggerClassName}>
       <Avatar className={avatarClass}>
         <AvatarImage src={account.avatarUrl} alt={account.displayName} />
-        <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
+        <AvatarFallback className="text-xs font-medium">{userInitial}</AvatarFallback>
       </Avatar>
       {expandedMeta}
     </Button>
   );
 
-  const wrapperClass = cn(
-    'w-full min-w-0',
-    content.isAccountCompact ? 'px-0 pb-0' : 'px-2 pb-2',
-  );
-
-  // Dialog mode: simple button that opens the global SettingsDialog
-  if (header?.accountAction === 'dialog') {
-    return (
-      <div className={wrapperClass}>
-        {triggerButton}
-      </div>
-    );
-  }
+  const wrapperClass =
+    'flex w-full min-w-0 shrink-0 items-center justify-between gap-1 border-t border-sidebar-border/60 p-2 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]';
 
   return (
     <div className={wrapperClass}>
@@ -289,6 +258,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
       >
         {triggerButton}
       </MenuBuilder>
+      {secondaryButton}
     </div>
   );
 }
@@ -322,8 +292,8 @@ function SecondaryAction({ action, onParentExpand }: SecondaryActionProps) {
   const inner = (
     <span
       className={cn(
-        'relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
-        'border border-sidebar-border/40 bg-transparent text-sidebar-foreground/70',
+        'relative inline-flex size-7 shrink-0 items-center justify-center rounded-md',
+        'bg-transparent text-sidebar-foreground/60',
         'transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground',
       )}
     >