@djangocfg/layouts 2.1.607 → 2.1.608

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

package/src/layouts/PublicLayout/hooks/useNavbarScroll.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type RefObject } from 'react';
 
 import { useScroll } from '@djangocfg/ui-core/hooks';
 
@@ -11,6 +11,10 @@ export interface UseNavbarScrollOptions {
   transparent?: boolean;
   /** scrollY threshold for hide + transparent triggers. @default 40 */
   transparentThreshold?: number;
+  /** Scroll container to follow instead of the window (shells where the document never scrolls). */
+  target?: RefObject<HTMLElement | null>;
+  /** When false the hide still happens under `prefers-reduced-motion` (the caller drops the animation). @default true */
+  respectReducedMotion?: boolean;
 }
 
 export interface UseNavbarScrollReturn {
@@ -51,12 +55,12 @@ const DIRECTION_COMMIT_PX = 8;
  * renders.
  */
 export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbarScrollReturn {
-  const { hideNavOnScroll = false, transparent = false, transparentThreshold = 40 } = options;
+  const { hideNavOnScroll = false, transparent = false, transparentThreshold = 40, target, respectReducedMotion = true } = options;
 
   const active = hideNavOnScroll || transparent;
   // Subscribe to the shared store only when the feature is on. The `y` this
   // returns is already rAF-coalesced; we run cheap arithmetic on each change.
-  const { y } = useScroll(active ? undefined : NEVER_TARGET);
+  const { y } = useScroll(active ? target : NEVER_TARGET);
 
   const [hidden, setHidden] = useState(false);
   const [scrolled, setScrolled] = useState(false);
@@ -84,13 +88,15 @@ export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbar
     const prefersReducedMotion =
       typeof window.matchMedia === 'function' &&
       window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    const hideEnabled = hideNavOnScroll && !prefersReducedMotion;
+    const hideEnabled = hideNavOnScroll && !(respectReducedMotion && prefersReducedMotion);
 
     // iOS Safari rubber-banding reports negative scrollY at the top and values
     // past maxScroll at the bottom while the page bounces back; feeding those
     // into the integrator makes the bar twitch on every overscroll pull.
-    const doc = document.documentElement;
-    const maxScroll = Math.max(0, doc.scrollHeight - window.innerHeight);
+    const el = target?.current;
+    const maxScroll = el
+      ? Math.max(0, el.scrollHeight - el.clientHeight)
+      : Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
     const clampedY = Math.min(Math.max(0, y), maxScroll);
 
     if (transparent) {
@@ -134,7 +140,7 @@ export function useNavbarScroll(options: UseNavbarScrollOptions = {}): UseNavbar
     }
 
     lastY.current = clampedY;
-  }, [y, active, hideNavOnScroll, transparent, transparentThreshold]);
+  }, [y, active, hideNavOnScroll, transparent, transparentThreshold, target, respectReducedMotion]);
 
   return { hidden, scrolled };
 }

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

@@ -1,14 +1,11 @@
 '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';
+import { AccountAvatarTrigger, AccountFooterTrigger, AccountMenu } from '../../../components/account';
 
 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). */
@@ -26,67 +23,29 @@ export interface AccountMenuButtonProps {
 }
 
 /**
- * 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`.
+ * The ready user menu: the shared `AccountMenu` with a row or avatar trigger. Drop it into any chrome; renders
+ * nothing for a signed-out visitor.
  */
-export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({
-  variant = 'row',
-  extra,
-  plan,
-  className,
-  classNames,
-}) => {
-  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();
+export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({ variant = 'row', extra, plan, className, classNames }) => {
   const isRow = variant === 'row';
-
   return (
-    <MenuBuilder
-      items={items}
-      open={open}
-      onOpenChange={setOpen}
+    <AccountMenu
+      plan={plan}
+      extra={extra}
+      signIn="none"
       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={cn('size-6 shrink-0', classNames?.avatar)}>
-          <AvatarImage src={user.avatar ?? ''} alt={name} />
-          <AvatarFallback className="text-xs font-medium">{initial}</AvatarFallback>
-        </Avatar>
-        {isRow && (
-          <>
-            <span className={cn('flex min-w-0 items-baseline gap-1', classNames?.name)}>
-              <span className="truncate text-sm">{name}</span>
-              {plan ? <span className="shrink-0 text-xs text-muted-foreground">· {plan}</span> : null}
-            </span>
-            <ChevronDown
-              className={cn(
-                'ml-auto size-4 shrink-0 opacity-50 transition-transform duration-150 group-data-[state=open]:rotate-180',
-                classNames?.chevron,
-              )}
-              aria-hidden
-            />
-          </>
-        )}
-      </Button>
-    </MenuBuilder>
+      {isRow ? (
+        <AccountFooterTrigger
+          className={cn('h-9', className)}
+          avatarClassName={classNames?.avatar}
+          nameClassName={classNames?.name}
+          chevronClassName={classNames?.chevron}
+        />
+      ) : (
+        <AccountAvatarTrigger className={className} />
+      )}
+    </AccountMenu>
   );
 };

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

@@ -11,8 +11,8 @@ export type {
   UseSettingsSectionsResult,
 } from './useSettingsSections';
 
-export { useAccountMenuItems } from './useAccountMenuItems';
-export type { UseAccountMenuItemsOptions } from './useAccountMenuItems';
+export { useAccountMenuItems } from '../../../components/account/useAccountMenuItems';
+export type { UseAccountMenuItemsOptions } from '../../../components/account/useAccountMenuItems';
 
 export { useSettingsSectionState } from './useSettingsSectionState';
 export type { SettingsSectionState } from './useSettingsSectionState';

package/src/shared/ProjectContext.tsx

@@ -0,0 +1,18 @@
+/**
+ * The project name `BaseApp` already receives (`project` prop), exposed to descendants so shells can use it as the
+ * default product name. Outside `BaseApp` (stories, tests) the hook returns `undefined` and never throws.
+ */
+
+'use client';
+
+import React from 'react';
+
+const ProjectNameContext = React.createContext<string | undefined>(undefined);
+
+export function ProjectNameProvider({ value, children }: { value?: string; children: React.ReactNode }) {
+  return <ProjectNameContext.Provider value={value?.trim() || undefined}>{children}</ProjectNameContext.Provider>;
+}
+
+export function useProjectName(): string | undefined {
+  return React.useContext(ProjectNameContext);
+}

package/src/testing/MockAuthProvider.tsx

@@ -20,6 +20,8 @@ export interface MockAuthProviderProps {
   isAuthenticated?: boolean;
   /** Override `isAdminUser`. Defaults to `false`. */
   isAdminUser?: boolean;
+  /** Override resolved auth routes (e.g. `defaultCallback`, the private landing page). */
+  routes?: Partial<{ auth: string; defaultCallback: string; defaultAuthCallback: string }>;
 }
 
 const noopAsync = async () => {};
@@ -54,6 +56,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
   isLoading = false,
   isAuthenticated,
   isAdminUser = false,
+  routes,
 }) => {
   const [user, setUser] = useState<UserProfile | null>(initialUser);
 
@@ -62,7 +65,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
     isLoading,
     isAuthenticated: isAuthenticated ?? Boolean(user),
     isAdminUser,
-    routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth' },
+    routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth', ...routes },
 
     loadCurrentProfile: noopAsync,
     checkAuthAndRedirect: noopAsync,
@@ -93,7 +96,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
       return next;
     },
     uploadAvatar: async () => user ?? buildMockUser(),
-  }), [user, isLoading, isAuthenticated, isAdminUser]);
+  }), [user, isLoading, isAuthenticated, isAdminUser, routes]);
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };