@djangocfg/layouts 2.1.606 → 2.1.608

package/src/layouts/PrivateLayout/topBar.test.tsx

@@ -0,0 +1,213 @@
+// @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 { PrivateLayout } from './PrivateLayout';
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/', useRouter: () => ({ push: () => {}, replace: () => {} }), useSearchParams: () => new URLSearchParams() }));
+
+// PrivateLayout lazy-loads the settings dialog without its own Suspense; keep the test to the shell.
+vi.mock('../SettingsLayout/SettingsDialog', () => ({ SettingsDialog: () => null }));
+let currentUser: { email: string; display_username: string; avatar: null } | null = { email: 'a@b.c', display_username: 'Mark', avatar: null };
+vi.mock('@djangocfg/api/auth', async () => ({
+  AuthContext: (await import('react')).createContext(undefined),
+  useAuth: () => ({ user: currentUser }),
+}));
+vi.mock('./hooks/useAuthGuard', () => ({ useAuthGuard: () => ({ isLoading: false, isForbidden: false, loadingText: '' }) }));
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let phone = true;
+let host: HTMLElement | null = null;
+let root: Root | null = null;
+
+beforeAll(() => {
+  window.matchMedia = ((query: string) => ({
+    // A phone has no precise hover pointer; a desktop does.
+    matches: query.includes('hover: hover') ? !phone : 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 = true;
+  currentUser = { email: 'a@b.c', display_username: 'Mark', avatar: null };
+  document.cookie = 'sidebar_state=; path=/; max-age=0';
+});
+
+async function mount(props: Partial<React.ComponentProps<typeof PrivateLayout>>) {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  await act(async () =>
+    root!.render(
+      <PrivateLayout
+        requireAuth={false}
+        sidebar={{ groups: [{ label: 'A', items: [{ label: 'Home', href: '/' }] }] }}
+        header={{ title: 'Acme' }}
+        {...props}
+      >
+        <p>page</p>
+      </PrivateLayout>,
+    ),
+  );
+  return document.querySelector('[data-sidebar="topbar"]');
+}
+
+describe('PrivateLayout topBar', () => {
+  it('title falls back to header.title', async () => {
+    expect((await mount({ topBar: { account: false } }))?.textContent).toBe('Acme');
+  });
+
+  it('topBar.title overrides it and topBar.actions render on the right', async () => {
+    const bar = (await mount({ topBar: { title: 'Calls', actions: <button>New</button> } }))!;
+    expect(bar.textContent).toBe('CallsNewM');
+    expect(bar.querySelector('[data-sidebar="topbar-actions"]')!.firstElementChild?.textContent).toBe('New');
+  });
+
+  it('desktop, sidebar pinned open: no bar, the account stays in the sidebar footer', async () => {
+    phone = false;
+    document.cookie = 'sidebar_state=true; path=/';
+    await mount({ topBar: { title: 'Calls', actions: <button>New</button> } });
+    expect(document.querySelector('[data-sidebar="topbar"]')).toBeNull();
+    expect(document.querySelector('[data-sidebar="topbar-account"]')).toBeNull();
+    expect(document.body.textContent).toContain('Mark');
+  });
+
+  it('desktop, sidebar collapsed: the same bar with title, actions and avatar', async () => {
+    phone = false;
+    document.cookie = 'sidebar_state=false; path=/';
+    const bar = (await mount({ topBar: { title: 'Calls', actions: <button>New</button> } }))!;
+    expect(bar.children[1].textContent).toBe('Calls');
+    expect(bar.querySelector('[data-sidebar="topbar-actions"]')!.children[1].getAttribute('data-sidebar')).toBe('topbar-account');
+  });
+
+  describe('account', () => {
+    it('avatar present when signed in', async () => {
+      const bar = (await mount({}))!;
+      expect(bar.querySelector('[data-sidebar="topbar-account"]')).not.toBeNull();
+    });
+
+    it('no avatar without a session', async () => {
+      currentUser = null;
+      const bar = (await mount({}))!;
+      expect(bar.querySelector('[data-sidebar="topbar-account"]')).toBeNull();
+    });
+
+    it('no avatar with topBar.account === false', async () => {
+      const bar = (await mount({ topBar: { account: false } }))!;
+      expect(bar.querySelector('[data-sidebar="topbar-account"]')).toBeNull();
+    });
+
+    it('bar avatar and sidebar footer open the same menu items', async () => {
+      const labels = async (el: Element) => {
+        await act(async () => {
+          el.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }));
+          el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0 }));
+          (el as HTMLElement).click();
+        });
+        const items = [...document.querySelectorAll('[role="menuitem"]')].map((i) => i.textContent);
+        await act(async () => {
+          document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        return items;
+      };
+      const bar = (await mount({}))!;
+      const fromBar = await labels(bar.querySelector('[data-sidebar="topbar-account"]')!);
+      expect(fromBar.length).toBeGreaterThan(0);
+      await act(async () => root?.unmount());
+      host?.remove();
+      phone = false;
+      document.cookie = 'sidebar_state=true; path=/';
+      await mount({});
+      const footer = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Mark'))!;
+      expect(await labels(footer)).toEqual(fromBar);
+    });
+
+    async function openDrawer() {
+      await act(async () => {
+        (document.querySelector('[data-sidebar="trigger"]') as HTMLElement).click();
+      });
+      return document.querySelector('[data-sidebar="sidebar"][data-mobile="true"]') ?? document.body;
+    }
+
+    it('phone drawer has no footer account while the bar carries the avatar', async () => {
+      await mount({});
+      const drawer = await openDrawer();
+      expect(drawer.textContent).toContain('Home');
+      expect(document.body.textContent).not.toContain('Mark');
+    });
+
+    it('phone drawer shows the footer account again with topBar.account === false', async () => {
+      await mount({ topBar: { account: false } });
+      await openDrawer();
+      expect(document.body.textContent).toContain('Mark');
+    });
+  });
+
+  describe('toggle', () => {
+    it('no tooltip and no native title on desktop or phone; aria-label stays', async () => {
+      for (const isPhone of [false, true]) {
+        phone = isPhone;
+        document.cookie = 'sidebar_state=false; path=/';
+        const bar = (await mount({}))!;
+        const trigger = bar.querySelector<HTMLElement>('[data-sidebar="trigger"]')!;
+        expect(trigger.hasAttribute('data-state')).toBe(false);
+        expect(trigger.hasAttribute('title')).toBe(false);
+        expect(trigger.getAttribute('aria-label')).toBe('Open sidebar');
+        await act(async () => {
+          trigger.focus();
+          trigger.dispatchEvent(new FocusEvent('focus'));
+        });
+        expect(document.querySelector('[role="tooltip"]')).toBeNull();
+        await act(async () => root?.unmount());
+        host?.remove();
+        host = root = null;
+      }
+    });
+  });
+
+  describe('hover-open', () => {
+    const enter = (el: Element) =>
+      act(async () => {
+        const ev = new Event('pointerenter', { bubbles: false }) as Event & { pointerType?: string };
+        ev.pointerType = 'mouse';
+        el.dispatchEvent(ev);
+        // React's onPointerEnter listens to pointerover.
+        const over = new Event('pointerover', { bubbles: true }) as Event & { pointerType?: string };
+        over.pointerType = 'mouse';
+        el.dispatchEvent(over);
+      });
+
+    it('the bar toggle does not open the hover overlay; the left edge zone does', async () => {
+      vi.useFakeTimers();
+      try {
+        phone = false;
+        document.cookie = 'sidebar_state=false; path=/';
+        const bar = (await mount({}))!;
+        const trigger = bar.querySelector('[data-sidebar="trigger"]')!;
+        await enter(trigger);
+        await act(async () => { vi.advanceTimersByTime(1000); });
+        expect(document.querySelector('[data-sidebar="peek"]')).toBeNull();
+
+        const edge = document.querySelector('[data-sidebar="peek-edge"]')!;
+        expect(edge).not.toBeNull();
+        await enter(edge);
+        await act(async () => { vi.advanceTimersByTime(1000); });
+        expect(document.querySelector('[data-sidebar="peek"]')).not.toBeNull();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  });
+});

package/src/layouts/PrivateLayout/types.ts

@@ -21,7 +21,7 @@ interface SidebarItemBase {
   badge?: string | number;
   /** Visual style of `badge`: `'count'` (default, neutral pill) or `'pill'` (accent-tinted, e.g. "lite"/"new"). */
   badgeVariant?: 'count' | 'pill';
-  /** Collapsed rail: shown in tooltip; defaults to `label`. */
+  /** @deprecated No effect: a collapsed sidebar is hidden, not an icon rail, and rows show no tooltip. */
   tooltip?: string;
 }
 
@@ -128,7 +128,7 @@ export interface SidebarConfig<Id extends string = string> {
   groupLabelStyle?: SidebarGroupLabelStyle;
   /** Featured CTA tile rendered below all groups, above `menuEnd`. */
   featured?: SidebarFeaturedConfig;
-  /** @deprecated No effect: rows are one desktop size and one 44px touch size. */
+  /** @deprecated No effect: rows are one desktop size (36px) and one phone size (40px with a 44px hit area). */
   density?: 'comfortable' | 'default' | 'compact';
 }
 
@@ -172,6 +172,13 @@ export interface HeaderConfig {
    * Takes priority over `brand`, `title`, `brandIcon`, `brandLetter`.
    */
   switcher?: SidebarBrandSwitcherConfig;
+  /**
+   * Where the product name (sidebar header brand, phone drawer header, and the default top bar title) links to,
+   * through the router. Resolution: `header.href` > `sidebar.homeHref` > the auth route `routes.defaultCallback` configured on
+   * `BaseApp` (`auth.routes`, default `/private`) > `/` (outside the auth provider). A custom `brand` node is rendered as given (never
+   * wrapped in a second link); a string `brand` is linkified.
+   */
+  href?: string;
   /** Custom header brand node (same idea as PublicNavbar `brand`). */
   brand?: ReactNode;
   /** Shown next to the logo when the sidebar is expanded */
@@ -209,12 +216,30 @@ export interface HeaderConfig {
 // PrivateLayout Props
 // ============================================================================
 
+/**
+ * Top bar content. One bar at every width, shown whenever the sidebar is not visible (always on a phone; on desktop
+ * while the sidebar is collapsed; never while it is docked). The sidebar toggle is always on the left and not configurable.
+ */
+export interface PrivateTopBarConfig {
+  /** Truncated next to the toggle. Defaults to `header.title` (the product name). */
+  title?: ReactNode;
+  /** Right end of the bar, vertically centred. Keep it to a couple of compact controls. */
+  actions?: ReactNode;
+  /**
+   * Account avatar at the right end of the bar for a signed-in user (the same menu as the sidebar footer). Default
+   * `true`. `false` removes the avatar from the bar and keeps the account in the phone drawer's footer.
+   */
+  account?: boolean;
+}
+
 export interface PrivateLayoutProps {
   children: ReactNode;
   /** Sidebar configuration */
   sidebar?: SidebarConfig;
   /** Title + account links (no top navbar — title is used in the sidebar chrome) */
   header?: HeaderConfig;
+  /** Top bar content (title override, right-hand actions, account avatar). The bar shows only while the sidebar is not visible. */
+  topBar?: PrivateTopBarConfig;
   /**
    * Path for active nav highlighting. With `@djangocfg/nextjs` i18n routing, pass `usePathname()` from
    * `@djangocfg/nextjs/i18n/navigation` (no `/[locale]` segment). If omitted, uses `next/navigation` (includes locale).

package/src/layouts/PublicLayout/components/UserMenu.tsx

@@ -1,53 +1,16 @@
 /**
- * User Menu Component for Layouts
- *
- * Flexible user menu component with group-based structure (like footer)
- * Uses useAuth() hook for authentication state
+ * User menu for the public navbar and its phone drawer. A thin wrapper over the shared account menu
+ * (`components/account`): `desktop` is the avatar dropdown, `mobile` the inline list. Props are unchanged.
  *
  * @example
- * ```tsx
- * import { Settings, LogOut, User } from 'lucide-react';
- *
- * <UserMenu
- *   groups={[
- *     {
- *       title: 'Account',
- *       items: [
- *         { label: 'Profile', href: '/profile', icon: Settings },
- *         { label: 'Dashboard', href: '/dashboard', icon: User }
- *       ]
- *     },
- *     {
- *       items: [
- *         { label: 'Sign Out', onClick: () => logout(), icon: LogOut, variant: 'destructive' }
- *       ]
- *     }
- *   ]}
- *   authPath="/auth"
- * />
- * ```
+ * <UserMenu groups={[{ title: 'Account', items: [{ label: 'Profile', href: '/profile' }] }]} authPath="/auth" />
  */
 
 'use client';
 
-import { ArrowRight, Languages, LogOut } from 'lucide-react';
-import { Link } from '@djangocfg/ui-core/components';
-import React, { useMemo } from 'react';
-
-import { useAuth } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-
-import { useLogout } from '../../../hooks';
-import {
-  Button,
-  LanguageFlag,
-  MenuBuilder,
-} from '@djangocfg/ui-core/components';
-import type { MenuItem } from '@djangocfg/ui-core/components';
-
-import { LOCALE_LABELS } from '../../_components/LocaleSwitcher';
-import { UserAvatar } from './UserAvatar';
+import React from 'react';
 
+import { AccountAvatarTrigger, AccountInline, AccountMenu } from '../../../components/account';
 import type { UserMenuGroup, UserMenuLocaleConfig } from '../../types';
 
 export interface UserMenuProps {
@@ -61,270 +24,34 @@ export interface UserMenuProps {
   disableAuth?: boolean;
   /**
    * Language switching inside this menu (desktop: submenu; mobile: button row).
-   * Prefer this over nesting `<LocaleSwitcher />` in the same dropdown — nested menus close each other.
+   * Prefer this over nesting `<LocaleSwitcher />` in the same dropdown: nested menus close each other.
    */
   i18n?: UserMenuLocaleConfig;
 }
 
-export function UserMenu({
-  variant = 'desktop',
-  groups,
-  authPath,
-  disableAuth = false,
-  i18n,
-}: UserMenuProps) {
-  const { user, isAuthenticated, routes } = useAuth();
-  const resolvedAuthPath = authPath ?? routes.auth;
-  const handleLogout = useLogout();
+export function UserMenu({ variant = 'desktop', groups, authPath, disableAuth = false, i18n }: UserMenuProps) {
   const [mounted, setMounted] = React.useState(false);
-  const t = useAppT();
-
-  const labels = useMemo(() => ({
-    signIn: t('layouts.profile.login'),
-    signOut: t('layouts.profile.signOut'),
-    userMenu: t('layouts.profile.userMenu'),
-    language: t('layouts.profile.language'),
-  }), [t]);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  /** Profile links only; sign out rendered separately so we can insert locale UI between. */
-  const profileGroups: UserMenuGroup[] = React.useMemo(() => {
-    if (groups && groups.length > 0) return [...groups];
-    return [];
-  }, [groups]);
-
-  const signOutItem = React.useMemo(
-    () => ({
-      label: labels.signOut,
-      onClick: handleLogout,
-      icon: LogOut,
-      variant: 'destructive' as const,
-    }),
-    [handleLogout, labels.signOut],
-  );
-
-  /** Prepared locale UI data — avoid `i18n && i18n.locales.length` chains in JSX. */
-  const localeMenu = React.useMemo(() => {
-    const codes = i18n?.locales;
-    if (!i18n || !codes?.length) return null;
-    return {
-      codes,
-      current: i18n.locale,
-      onChange: i18n.onLocaleChange,
-    };
-  }, [i18n]);
-
-  const localeLabel = (code: string) => LOCALE_LABELS[code] || code.toUpperCase();
-
-  if (!mounted) {
-    return null;
-  }
-
-  if (!isAuthenticated || !user) {
-    // Guest user - show sign in button
-    if (variant === 'mobile') {
-      return (
-        <div className="pt-4 border-t border-border/50">
-          <Link
-            href={resolvedAuthPath}
-            className="group flex items-center justify-between rounded-control px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
-          >
-            <span>{labels.signIn}</span>
-            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-          </Link>
-        </div>
-      );
-    }
-    if (disableAuth) {
-      return (
-        <Button variant="default" size="sm" className="h-9 rounded-full px-5" disabled>
-          {labels.signIn}
-        </Button>
-      );
-    }
-    return (
-      <Link href={resolvedAuthPath}>
-        <Button variant="default" size="sm" className="h-9 rounded-full px-5">
-          {labels.signIn}
-        </Button>
-      </Link>
-    );
-  }
-
-  // Authenticated user
-  const displayName = user.display_username || user.email || 'User';
-  const userAvatar = user.avatar || '';
+  React.useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
 
   if (variant === 'mobile') {
-    return (
-      <div className="space-y-3">
-        <div className="flex items-center gap-3 px-4 py-3 rounded-[var(--radius-popover)] bg-accent/30">
-          <UserAvatar src={userAvatar} name={displayName} size="md" />
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-semibold text-foreground truncate">
-              {displayName}
-            </p>
-            <p className="text-xs text-muted-foreground truncate">
-              {user.email}
-            </p>
-          </div>
-        </div>
-        <div className="space-y-1">
-          {profileGroups.map((group, groupIndex) => (
-            <div key={groupIndex}>
-              {group.title && (
-                <div className="px-4 pt-2 pb-1">
-                  <p className="text-[11px] font-normal text-muted-foreground/70">
-                    {group.title}
-                  </p>
-                </div>
-              )}
-              {group.items.map((item, itemIndex) => {
-                const Icon = item.icon;
-                const isDestructive = item.variant === 'destructive';
-                const baseClasses = `flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-sm transition-colors w-full text-left ${
-                  isDestructive
-                    ? 'text-destructive hover:bg-destructive/10'
-                    : 'text-foreground hover:bg-accent hover:text-accent-foreground'
-                }`;
-
-                if (item.onClick) {
-                  return (
-                    <button
-                      key={itemIndex}
-                      onClick={item.onClick}
-                      className={baseClasses}
-                    >
-                      {Icon && <Icon className="h-4 w-4" />}
-                      {item.label}
-                    </button>
-                  );
-                }
-
-                if (item.href) {
-                  return (
-                    <Link key={itemIndex} href={item.href} className={baseClasses}>
-                      {Icon && <Icon className="h-4 w-4" />}
-                      {item.label}
-                    </Link>
-                  );
-                }
-
-                return null;
-              })}
-            </div>
-          ))}
-          {localeMenu && (
-            <div className="border-t border-border/50 px-4 pt-3">
-              <p className="text-[11px] font-normal text-muted-foreground/70">
-                {labels.language}
-              </p>
-              <div className="mt-2 flex flex-wrap gap-2">
-                {localeMenu.codes.map((code) => {
-                  const active = code === localeMenu.current;
-                  return (
-                    <button
-                      key={code}
-                      type="button"
-                      onClick={() => localeMenu.onChange(code)}
-                      className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors ${
-                        active
-                          ? 'border-primary bg-accent text-foreground'
-                          : 'border-border/60 text-muted-foreground hover:bg-accent hover:text-foreground'
-                      }`}
-                    >
-                      <LanguageFlag code={code} className="h-3 w-4" rounded />
-                      {localeLabel(code)}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-          <div>
-            <button
-              type="button"
-              onClick={signOutItem.onClick}
-              className="flex w-full items-center gap-3 rounded-sm px-4 py-3 text-left text-sm font-medium text-destructive transition-colors hover:bg-destructive/10"
-            >
-              <LogOut className="h-4 w-4" />
-              {signOutItem.label}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
+    return <AccountInline groups={groups} authPath={authPath} i18n={i18n} />;
   }
 
-  // Desktop variant — declarative menu via the shared MenuBuilder.
-  const menuItems: MenuItem[] = [
-    {
-      kind: 'label',
-      id: 'identity',
-      label: (
-        <div className="flex flex-col space-y-1">
-          <p className="text-sm font-medium leading-none">{displayName}</p>
-          <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
-        </div>
-      ),
-    },
-    // App-provided link groups (each its own section with a trailing separator).
-    ...profileGroups.map((group, i): MenuItem => ({
-      kind: 'section',
-      id: `group-${i}`,
-      label: group.title,
-      items: group.items.map((item, j): MenuItem => ({
-        kind: 'item',
-        id: item.href ?? `${i}-${j}`,
-        label: item.label,
-        icon: item.icon,
-        href: item.href,
-        onSelect: item.onClick ? () => item.onClick!() : undefined,
-        variant: item.variant === 'destructive' ? 'destructive' : 'default',
-      })),
-    })),
-    // Language submenu — radio group of locales (flag + label + checkmark).
-    ...(localeMenu
-      ? [{
-          kind: 'submenu' as const,
-          id: 'language',
-          label: labels.language,
-          icon: Languages,
-          items: [{
-            kind: 'radio-group' as const,
-            id: 'locale',
-            value: localeMenu.current,
-            onValueChange: localeMenu.onChange,
-            options: localeMenu.codes.map((code) => ({
-              id: code,
-              value: code,
-              label: localeLabel(code),
-              icon: <LanguageFlag code={code} className="h-3 w-4 shrink-0" rounded />,
-            })),
-          }],
-        }]
-      : []),
-    { kind: 'separator', id: 'sep-logout' },
-    {
-      kind: 'item',
-      id: 'signout',
-      label: signOutItem.label,
-      icon: LogOut,
-      variant: 'destructive',
-      onSelect: () => signOutItem.onClick(),
-    },
-  ];
-
   return (
-    <MenuBuilder items={menuItems} align="end" contentClassName="w-56">
-      <Button variant="ghost" size="icon" className="rounded-full p-0">
-        <UserAvatar src={userAvatar} name={displayName} size="sm" />
-        <span className="sr-only">{labels.userMenu}</span>
-      </Button>
-    </MenuBuilder>
+    <AccountMenu
+      groups={groups}
+      i18n={i18n}
+      authPath={authPath}
+      settings={false}
+      identity="card"
+      signIn={disableAuth ? 'disabled' : 'button'}
+      side="bottom"
+      align="end"
+      sideOffset={4}
+      contentClassName="w-56"
+    >
+      <AccountAvatarTrigger ring />
+    </AccountMenu>
   );
 }
-

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

@@ -1,4 +1,4 @@
 export { UserMenu } from './UserMenu';
 export type { UserMenuProps } from './UserMenu';
-export { UserAvatar } from './UserAvatar';
-export type { UserAvatarProps } from './UserAvatar';
+export { UserAvatar } from '../../../components/account/UserAvatar';
+export type { UserAvatarProps } from '../../../components/account/UserAvatar';