@djangocfg/layouts 2.1.606 → 2.1.608

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

@@ -0,0 +1,230 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { SidebarProvider } from '@djangocfg/ui-core/components';
+
+import { PrivateContent } from './PrivateContent';
+
+vi.mock('@djangocfg/api/auth', () => ({ useAuth: () => ({ user: { email: 'a@b.c', display_username: 'Mark', avatar: null } }) }));
+vi.mock('next/navigation', () => ({ usePathname: () => '/', useRouter: () => ({ push: () => {}, replace: () => {} }), useSearchParams: () => new URLSearchParams() }));
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let phone = false;
+let host: HTMLElement | null = null;
+let root: Root | null = null;
+
+beforeAll(() => {
+  window.matchMedia ??= ((query: string) => ({
+    matches: phone,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia;
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  host?.remove();
+  host = root = null;
+  phone = false;
+});
+
+function render(defaultOpen: boolean, padding: 'none' | 'default', title?: React.ReactNode, actions?: React.ReactNode, showAccount = false) {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  act(() =>
+    root!.render(
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <PrivateContent title={title} actions={actions} showAccount={showAccount} padding={padding} scroll={padding === 'none' ? 'hidden' : 'auto'}>
+          <p>page</p>
+          <input aria-label="field" />
+        </PrivateContent>
+      </SidebarProvider>,
+    ),
+  );
+  return host;
+}
+
+describe('PrivateContent top bar', () => {
+  it.each(['none', 'default'] as const)('desktop, sidebar collapsed: the same overlay bar, content offset by its real height (padding %s)', (padding) => {
+    const el = render(false, padding);
+    const bar = el.querySelector('[data-sidebar="topbar"]')!;
+    const col = bar.parentElement as HTMLElement;
+    expect(bar).not.toBeNull();
+    expect(col.style.getPropertyValue('--layout-bar-height')).toContain('3rem');
+    expect(bar.className).toContain('h-[var(--layout-bar-height)]');
+    expect(bar.className).toContain('pt-[var(--safe-top');
+    expect(bar.className).toMatch(/\babsolute\b/);
+    expect(bar.querySelector('[data-sidebar="trigger"]')).not.toBeNull();
+    expect((bar.nextElementSibling as HTMLElement).className).toContain('layout-bar-height');
+  });
+
+  it('draws no bar while the sidebar is docked, and the bar height is 0', () => {
+    const el = render(true, 'default');
+    expect(el.querySelector('[data-sidebar="topbar"]')).toBeNull();
+    expect(el.querySelector<HTMLElement>('[style*="--layout-bar-height"]')!.style.getPropertyValue('--layout-bar-height')).toBe('0px');
+  });
+
+  it.each(['none', 'default'] as const)('phone + padding %s: one fixed-height in-flow bar, the same for every page', (padding) => {
+    phone = true;
+    const el = render(false, padding, 'Acme');
+    const bar = el.querySelector('[data-sidebar="topbar"]')!;
+    const col = bar.parentElement as HTMLElement;
+    expect(col.style.getPropertyValue('--layout-bar-height')).toBe('calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 3rem)');
+    expect(bar.className).toContain('h-[var(--layout-bar-height)]');
+    expect(bar.className).toMatch(/\bborder-b\b/);
+    expect(bar.className).toContain('bg-background');
+    expect(bar.className).toContain('pt-[var(--safe-top');
+    expect(bar.className).toContain('pl-[calc(var(--safe-left');
+    expect(bar.className).toContain('pr-[calc(var(--safe-right');
+    // Overlays the column (transform-hidden), so hiding never reflows; the content pads by the bar height.
+    expect(bar.className).toMatch(/\babsolute\b/);
+    expect(bar.className).toContain('transition-transform');
+    expect((bar.nextElementSibling as HTMLElement).className).toContain('layout-bar-height');
+    expect(bar.querySelector('[data-sidebar="trigger"]')!.className).not.toMatch(/\b(rounded-full|border|shadow)/);
+    expect(bar.textContent).toBe('Acme');
+    expect(bar.getAttribute('data-hidden')).toBe('false');
+    // Content is the next sibling: it starts under the bar and carries no trigger offsets.
+    const scroller = bar.nextElementSibling as HTMLElement;
+    expect(scroller.className).not.toContain('layout-trigger');
+  });
+
+  it('phone without a title shows the toggle only; desktop sets the bar height to 0', () => {
+    phone = true;
+    expect(render(false, 'default').querySelector('[data-sidebar="topbar"]')!.textContent).toBe('');
+  });
+
+  it('top bar is shrink-0 and the content below it is flex-1 min-h-0 (document cannot grow)', () => {
+    const el = render(false, 'default');
+    const bar = el.querySelector('[data-sidebar="topbar"]')!;
+    const col = bar.parentElement!;
+    const scroller = bar.nextElementSibling as HTMLElement;
+    expect(bar.className).toMatch(/\bshrink-0\b/);
+    expect(col.className).toMatch(/\bmin-h-0\b/);
+    expect(scroller.className).toMatch(/\bmin-h-0\b/);
+    expect(scroller.className).toMatch(/\bflex-1\b/);
+    expect(scroller.className).toMatch(/\boverflow-y-auto\b/);
+  });
+
+  describe('phone auto-hide', () => {
+    function mountPhone(isPhone = true) {
+      phone = isPhone;
+      // Deferred like a real frame: useScroll's store expects the id to be assigned before the callback runs.
+      let id = 0;
+      vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+        void Promise.resolve().then(() => cb(0));
+        return ++id;
+      });
+      const el = render(false, 'default', 'Acme');
+      const bar = el.querySelector('[data-sidebar="topbar"]') as HTMLElement;
+      const scroller = bar.nextElementSibling as HTMLElement;
+      Object.defineProperty(scroller, 'scrollHeight', { configurable: true, value: 3000 });
+      Object.defineProperty(scroller, 'clientHeight', { configurable: true, value: 800 });
+      const scrollTo = (top: number) =>
+        act(async () => {
+          scroller.scrollTop = top;
+          scroller.dispatchEvent(new Event('scroll'));
+          await Promise.resolve();
+          await Promise.resolve();
+        });
+      return { el, bar, scroller, scrollTo };
+    }
+    afterEach(() => vi.unstubAllGlobals());
+
+    it('hides on scroll down, shows on scroll up and at the top', async () => {
+      const { bar, scrollTo } = mountPhone();
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+      await scrollTo(120);
+      await scrollTo(200);
+      expect(bar.getAttribute('data-hidden')).toBe('true');
+      await scrollTo(180);
+      await scrollTo(150);
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+      await scrollTo(300);
+      await scrollTo(400);
+      expect(bar.getAttribute('data-hidden')).toBe('true');
+      await scrollTo(0);
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+    });
+
+    it('desktop (sidebar collapsed): the bar is static and never hides', async () => {
+      const { bar, scrollTo } = mountPhone(false);
+      await scrollTo(120);
+      await scrollTo(400);
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+    });
+
+    it('stays visible while the drawer is open', async () => {
+      const { bar, scrollTo } = mountPhone();
+      act(() => (bar.querySelector('[data-sidebar="trigger"]') as HTMLElement).click());
+      await scrollTo(120);
+      await scrollTo(400);
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+    });
+
+    it('stays visible while a field has focus', async () => {
+      const { el, bar, scrollTo } = mountPhone();
+      act(() => (el.querySelector('input') as HTMLInputElement).focus());
+      await scrollTo(120);
+      await scrollTo(400);
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+    });
+
+    it('never hides when the content is not scrollable', async () => {
+      const { bar, scroller, scrollTo } = mountPhone();
+      Object.defineProperty(scroller, 'scrollHeight', { configurable: true, value: 800 });
+      await scrollTo(120);
+      await scrollTo(400);
+      expect(bar.getAttribute('data-hidden')).toBe('false');
+    });
+  });
+
+  describe('topBar content', () => {
+    it('renders title and right-hand actions; the toggle stays first and does not shrink', () => {
+      phone = true;
+      const bar = render(false, 'default', 'Calls', <button>New</button>).querySelector('[data-sidebar="topbar"]')!;
+      const children = [...bar.children];
+      expect(children[0].getAttribute('data-sidebar')).toBe('trigger');
+      expect(children[0].className).toMatch(/\bshrink-0\b/);
+      const title = children[1] as HTMLElement;
+      expect(title.textContent).toBe('Calls');
+      expect(title.className).toContain('truncate');
+      expect(title.className).toContain('flex-1');
+      const actions = children[2] as HTMLElement;
+      expect(actions.className).toMatch(/\bshrink-0\b/);
+      expect(actions.className).toContain('items-center');
+      expect(actions.textContent).toBe('New');
+    });
+
+    it('desktop, sidebar collapsed: same markup, title and actions', () => {
+      const bar = render(false, 'default', 'Calls', <button>New</button>).querySelector('[data-sidebar="topbar"]')!;
+      expect(bar.children[0].getAttribute('data-sidebar')).toBe('trigger');
+      expect(bar.children[1].textContent).toBe('Calls');
+      expect(bar.children[2].textContent).toBe('New');
+    });
+
+    it('account avatar: after the actions, in the actions container, only with showAccount', () => {
+      phone = true;
+      const bar = render(false, 'default', 'Calls', <button>New</button>, true).querySelector('[data-sidebar="topbar"]')!;
+      const actions = bar.querySelector('[data-sidebar="topbar-actions"]')!;
+      expect(actions.children[0].textContent).toBe('New');
+      expect(actions.children[1].getAttribute('data-sidebar')).toBe('topbar-account');
+      expect(actions.children[1].getAttribute('aria-label')).toBe('User menu');
+    });
+
+    it('no avatar without showAccount', () => {
+      phone = true;
+      const bar = render(false, 'default', 'Calls').querySelector('[data-sidebar="topbar"]')!;
+      expect(bar.querySelector('[data-sidebar="topbar-account"]')).toBeNull();
+      expect(bar.querySelector('[data-sidebar="topbar-actions"]')).toBeNull();
+    });
+  });
+});

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

@@ -1,19 +1,25 @@
 /**
- * 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 (fine pointer) the trigger sits in a hover zone that peeks the sidebar open after a short intent delay.
+ * Private layout main column: the scroll surface, plus ONE top bar whenever the sidebar is not visible: always on a
+ * phone (below md), on desktop while the sidebar is collapsed. Same markup and props at every width: sidebar toggle,
+ * title, actions, account avatar. Height `--layout-bar-height` = safe-top + 3rem; it overlays the column and the
+ * content has that height as top padding, so pages need to know nothing about it. Below md it slides away on
+ * scroll-down (same `useNavbarScroll` policy as PublicLayout, driven by the content scroller); on desktop it is static.
+ * `--layout-bar-height` is `0px` only when no bar is shown (docked sidebar, or no sidebar at all).
  */
 
 'use client';
 
 import React, { ReactNode } from 'react';
 
-import { useSidebar } from '@djangocfg/ui-core/components';
+import { Link, useSidebar } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import type { LayoutVisualConfig } from '../../types';
-import { useSidebarPeek } from '../hooks';
+import type { HeaderConfig } from '../types';
+import { LAYOUT_BAR_HEIGHT } from '../geometry';
+import { useNavbarScroll } from '../../PublicLayout/hooks/useNavbarScroll';
 import { PrivateSidebarTrigger } from './PrivateSidebarTrigger';
+import { PrivateTopBarAccount } from './PrivateTopBarAccount';
 
 interface PrivateContentProps {
   children: ReactNode;
@@ -27,6 +33,18 @@ interface PrivateContentProps {
   scroll?: 'auto' | 'hidden';
   /** When false, no mobile hamburger (e.g. layout without a sidebar). Default true. */
   hasSidebar?: boolean;
+  /** A change scrolls the content surface back to the top (the document no longer scrolls, so the router cannot). */
+  pathname?: string;
+  /** Bar title next to the toggle (`topBar.title`, else `header.title`). */
+  title?: ReactNode;
+  /** When set, the title is a router link to this href (the default `header.title` fallback only). */
+  titleHref?: string;
+  /** Bar right-hand actions (`topBar.actions`), left of the account avatar. */
+  actions?: ReactNode;
+  /** Show the account avatar at the right end of the bar (signed-in user and `topBar.account !== false`). */
+  showAccount?: boolean;
+  /** Account menu config (links, plan) for the avatar. */
+  header?: HeaderConfig;
   /** Visual config from PrivateLayout — controls maxWidth in boxed mode. */
   visual?: LayoutVisualConfig;
 }
@@ -44,25 +62,52 @@ export function PrivateContent({
   scroll = 'auto',
   hasSidebar = true,
   visual,
+  pathname,
+  title,
+  titleHref,
+  actions,
+  showAccount = false,
+  header,
 }: PrivateContentProps) {
-  const { isMobile, state } = useSidebar();
-  const peek = useSidebarPeek();
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const lastPath = React.useRef(pathname);
+  React.useEffect(() => {
+    if (lastPath.current === pathname) return;
+    lastPath.current = pathname;
+    scrollRef.current?.scrollTo?.({ top: 0 });
+  }, [pathname]);
 
-  const showTrigger = hasSidebar && (isMobile || state === 'collapsed');
+  const { isMobile, state, openMobile } = useSidebar();
 
-  // 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)))]'
+  const showBar = hasSidebar && (isMobile || state === 'collapsed');
+  const mobileBar = showBar && isMobile;
+
+  // Auto-hide: the content scroller (the document never scrolls) drives the shared navbar policy. The bar stays put
+  // while the drawer is open or a field has focus (iOS keyboard), and when there is nothing to scroll.
+  const { hidden: scrolledAway } = useNavbarScroll({ hideNavOnScroll: mobileBar, target: scrollRef, respectReducedMotion: false });
+  const [fieldFocused, setFieldFocused] = React.useState(false);
+  const onFocusChange = (e: React.FocusEvent) => {
+    const el = e.target as HTMLElement;
+    setFieldFocused(
+      e.type === 'focus' && (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable),
+    );
+  };
+  const barHidden = mobileBar && scrolledAway && !openMobile && !fieldFocused;
+
+  const topPadding = showBar
+    ? 'pt-[calc(var(--layout-bar-height)+1rem)]'
     : hasSidebar
-      ? 'max-md:pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))] md:pt-6 lg:pt-8'
+      ? 'pt-6 lg:pt-8'
       : 'pt-4 sm:pt-6 lg:pt-8';
 
   const scrollAreaClass = cn(
     'min-h-0 flex-1 bg-background',
+    // The bar overlays the column, so every page starts below it.
+    showBar && padding === 'none' && 'pt-[var(--layout-bar-height)]',
     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))]',
+      'pb-[calc(1rem+var(--safe-bottom,env(safe-area-inset-bottom,0px)))] sm:pb-[calc(1.5rem+var(--safe-bottom,env(safe-area-inset-bottom,0px)))] lg:pb-[calc(2rem+var(--safe-bottom,env(safe-area-inset-bottom,0px)))]',
       topPadding,
     ],
   );
@@ -70,17 +115,39 @@ export function PrivateContent({
   const innerWidthClass = MAX_WIDTH_CLASS[visual?.maxWidth ?? 'none'];
 
   return (
-    <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
-      {showTrigger ? (
+    <div
+      className="relative flex min-h-0 min-w-0 flex-1 flex-col"
+      style={{ '--layout-bar-height': showBar ? LAYOUT_BAR_HEIGHT : '0px' } as React.CSSProperties}
+    >
+      {showBar ? (
         <div
-          data-sidebar="trigger-zone"
-          {...(isMobile || !peek?.hoverEnabled ? undefined : peek.zoneProps)}
-          className="absolute left-0 top-[env(safe-area-inset-top,0px)] z-20 flex size-14 items-center justify-center"
+          data-sidebar="topbar"
+          data-hidden={barHidden ? 'true' : 'false'}
+          className="absolute inset-x-0 top-0 z-20 box-border flex h-[var(--layout-bar-height)] shrink-0 items-center gap-1 transition-transform duration-200 ease-out motion-reduce:transition-none data-[hidden=true]:-translate-y-full border-b border-border bg-background pl-[calc(var(--safe-left,env(safe-area-inset-left,0px))+0.75rem)] pr-[calc(var(--safe-right,env(safe-area-inset-right,0px))+0.75rem)] pt-[var(--safe-top,env(safe-area-inset-top,0px))]"
         >
           <PrivateSidebarTrigger className="text-muted-foreground hover:text-foreground" />
+          <span className="min-w-0 flex-1 truncate text-base font-semibold tracking-tight">
+            {titleHref ? (
+              <Link
+                href={titleHref}
+                aria-label={typeof title === 'string' && title ? title : 'Home'}
+                className="rounded-md text-foreground no-underline outline-none ring-ring transition-opacity hover:no-underline hover:opacity-80 focus-visible:ring-2"
+              >
+                {title}
+              </Link>
+            ) : (
+              title
+            )}
+          </span>
+          {actions || showAccount ? (
+            <div data-sidebar="topbar-actions" className="flex shrink-0 items-center gap-2">
+              {actions}
+              {showAccount ? <PrivateTopBarAccount header={header} /> : null}
+            </div>
+          ) : null}
         </div>
       ) : null}
-      <div className={scrollAreaClass}>
+      <div ref={scrollRef} className={scrollAreaClass} onFocusCapture={onFocusChange} onBlurCapture={onFocusChange}>
         {innerWidthClass ? <div className={innerWidthClass}>{children}</div> : children}
       </div>
     </div>

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

@@ -20,9 +20,11 @@ interface PrivateSidebarProps {
   header?: HeaderConfig;
   pathname?: string;
   variant?: 'sidebar' | 'inset';
+  /** The top bar shows the account avatar (phone drawer then has no footer account). */
+  accountInBar?: boolean;
 }
 
-export function PrivateSidebar({ sidebar, header, pathname = '', variant = 'sidebar' }: PrivateSidebarProps) {
+export function PrivateSidebar({ sidebar, header, pathname = '', variant = 'sidebar', accountInBar = false }: PrivateSidebarProps) {
   const { state, isMobile, setOpenMobile } = useSidebar();
   const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
 
@@ -31,7 +33,7 @@ export function PrivateSidebar({ sidebar, header, pathname = '', variant = 'side
   }, [pathname, isMobile, setOpenMobile]);
 
   return (
-    <PrivateLayoutProvider sidebar={sidebar} header={header} pathname={pathname} isMobile={isMobile}>
+    <PrivateLayoutProvider sidebar={sidebar} header={header} pathname={pathname} isMobile={isMobile} accountInBar={accountInBar}>
       <Sidebar
         ref={setSidebarRef}
         collapsible="offcanvas"

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

@@ -11,27 +11,18 @@
 
 'use client';
 
-import { ChevronDown } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
 import React, { memo } 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, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-core/components';
+import { cn, isDev } from '@djangocfg/ui-core/lib';
+import { useAuth } from '@djangocfg/api/auth';
 
 import { LucideIcon as LucideIconRender } from '../../../components';
+import { AccountFooterTrigger, AccountMenu } from '../../../components/account';
 import { usePeekPin } from '../hooks';
 import { usePrivateLayoutContext } from '../context';
 import { SIDEBAR_SPACING } from '../geometry';
-import { useAccountMenuItems } from '../../SettingsLayout/hooks';
 
 import type { HeaderConfig } from '../types';
 
@@ -39,72 +30,18 @@ interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
 }
 
-interface AccountView {
-  source: 'user' | 'dev-fallback';
-  displayName: string;
-  email: string | null;
-  avatarUrl: string;
-  plan: string | null;
-}
-
 function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
-  const { user } = useAuth();
   const { setOpen: setSidebarOpen } = useSidebar();
   const { isMobile } = usePrivateLayoutContext();
   const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
   usePeekPin(isAccountMenuOpen);
 
-  const accountLinks = React.useMemo(() => {
-    if (!header?.groups?.length) return [];
-    return header.groups.flatMap((g) => g.items.filter((i) => i.href));
-  }, [header?.groups]);
-
-  /**
-   * Single source of truth for what the footer renders. When `useAuth` returns
-   * a real user we use it; otherwise (in dev only) we fall back to a placeholder
-   * so the menu stays reachable for debugging. Production stays strict and the
-   * component returns null below.
-   */
-  const account = React.useMemo<AccountView>(() => {
-    if (user) {
-      return {
-        source: 'user',
-        displayName: user.display_username || user.email || 'User',
-        email: user.email ?? null,
-        avatarUrl: user.avatar ?? '',
-        plan: header?.userPlan ?? null,
-      };
-    }
-    return {
-      source: 'dev-fallback',
-      displayName: 'Guest (dev)',
-      email: null,
-      avatarUrl: '',
-      plan: header?.userPlan ?? 'No session',
-    };
-  }, [user, header?.userPlan]);
+  const { user } = useAuth();
 
   const onSecondaryExpand = React.useCallback(() => {
     setSidebarOpen(true);
   }, [setSidebarOpen]);
 
-  const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
-
-  // The app's account links sit between the shared Settings shortcuts and Sign out.
-  const extraItems = React.useMemo<MenuItem[]>(() => {
-    const items: MenuItem[] = [];
-    if (accountLinks.length > 0) {
-      items.push({ kind: 'separator', id: 'sep-links' });
-      for (const link of accountLinks) {
-        items.push({ kind: 'item', id: link.href!, label: link.label, icon: link.icon, href: link.href });
-      }
-    }
-    return items;
-  }, [accountLinks]);
-
-  // Shared with every host: email, Settings, section shortcuts, Sign out (logout confirm opens over a CLOSED menu).
-  const menuItems = useAccountMenuItems({ extra: extraItems, label: headerLabelText });
-
   // Hide entirely in production when there's no user (auth still loading or
   // /me failed and the parent guard hasn't redirected yet). In dev keep a
   // placeholder so the footer + Log out are reachable for debugging.
@@ -118,77 +55,33 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   // production because `isDev` makes this guard statically dead in development.
   if (!user && !isDev) return null;
 
-  const userInitial = (account.displayName.charAt(0) || '?').toUpperCase();
   const secondary = header?.footerSecondaryAction;
 
-  const triggerClassName = cn(
-    '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',
-    isMobile && 'h-11',
-  );
-
   const secondaryButton = secondary ? (
     <SecondaryAction action={secondary} onParentExpand={onSecondaryExpand} />
   ) : null;
 
-  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('shrink-0', isMobile ? 'size-7' : 'size-6');
-
-  // Like Claude: "Name · Plan ⌄". The email lives in the menu header.
-  const expandedMeta = (
-    <>
-      <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="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" className={triggerClassName}>
-      <Avatar className={avatarClass}>
-        <AvatarImage src={account.avatarUrl} alt={account.displayName} />
-        <AvatarFallback className="text-xs font-medium">{userInitial}</AvatarFallback>
-      </Avatar>
-      {expandedMeta}
-    </Button>
-  );
-
   const wrapperClass = cn(
-    'flex w-full min-w-0 shrink-0 items-center justify-between gap-1 border-t border-sidebar-border/60',
+    'flex w-full min-w-0 shrink-0 items-center justify-between gap-1 border-t border-sidebar-border/60 bg-sidebar',
     SIDEBAR_SPACING[isMobile ? 'mobile' : 'desktop'].footer,
   );
 
   return (
     <div className={wrapperClass}>
-      <MenuBuilder
-        items={menuItems}
-        open={isAccountMenuOpen}
-        onOpenChange={setIsAccountMenuOpen}
-        side={dropdownSide}
+      {/* Always opens UPWARD over the avatar (Claude pattern): the footer sits at the bottom of the rail. */}
+      <AccountMenu
+        groups={header?.groups}
+        plan={header?.userPlan}
+        signIn="none"
+        devFallback
+        side="top"
         align="start"
         sideOffset={8}
-        contentClassName={dropdownContentClass}
+        open={isAccountMenuOpen}
+        onOpenChange={setIsAccountMenuOpen}
       >
-        {triggerButton}
-      </MenuBuilder>
+        <AccountFooterTrigger hasSecondary={Boolean(secondary)} className={isMobile ? 'h-10 px-2.5' : undefined} avatarClassName={isMobile ? 'size-7' : undefined} />
+      </AccountMenu>
       {secondaryButton}
     </div>
   );

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

@@ -1,7 +1,8 @@
 /**
  * The one sidebar button: same box, icon and position rules on mobile and desktop.
- * Floating over the content it opens the sidebar; inside the sidebar header it closes or
- * collapses it. Both are `toggleSidebar`.
+ * In the top bar it opens the sidebar; inside the sidebar header it closes or collapses it. Both are
+ * `toggleSidebar`. No tooltip (the Cmd/Ctrl+B binding lives in ui-core's sidebar provider). The labels are plain
+ * English: the layouts have no message catalogue (only a locale hook).
  */
 
 'use client';
@@ -29,7 +30,6 @@ export const PrivateSidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      title={label}
       aria-label={label}
       className={cn(TRIGGER_CLASS, className)}
       onClick={(event) => {

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

@@ -0,0 +1,27 @@
+/**
+ * Account avatar for the top bar: the shared `AccountMenu` (the same items as the sidebar footer) opened downward
+ * and aligned to the right edge. Rendered only for a signed-in user; the caller decides whether the bar shows it.
+ */
+
+'use client';
+
+import React from 'react';
+
+import { AccountAvatarTrigger, AccountMenu } from '../../../components/account';
+
+import type { HeaderConfig } from '../types';
+
+export function PrivateTopBarAccount({ header }: { header?: HeaderConfig }) {
+  return (
+    <AccountMenu
+      groups={header?.groups}
+      plan={header?.userPlan}
+      signIn="none"
+      side="bottom"
+      align="end"
+      sideOffset={6}
+    >
+      <AccountAvatarTrigger />
+    </AccountMenu>
+  );
+}