@djangocfg/layouts 2.1.319 → 2.1.321

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -1,11 +1,12 @@
 /**
- * Account block: collapsible trigger + expanded card (email, links, footer row:
- * sign out on the left, locale + theme toggles on the right).
+ * Sidebar account: rich footer trigger (avatar + name + plan + optional secondary
+ * action) opens a popover (DropdownMenu) upward with email, account links, locale +
+ * theme controls, and sign-out. Replaces the legacy inline collapsible.
  */
 
 'use client';
 
-import { ChevronDown, LogOut } from 'lucide-react';
+import { ChevronRight, ChevronsUpDown, Globe, LogOut, Monitor, Moon, Sun } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
 import React from 'react';
 
@@ -16,65 +17,47 @@ import {
   AvatarFallback,
   AvatarImage,
   Button,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-import { useSidebar } from '@djangocfg/ui-nextjs/components';
-import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+import { cn, isDev } from '@djangocfg/ui-core/lib';
+import { useSidebar } from '@djangocfg/ui-core/components';
+import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
 import { useLogout } from '../../hooks';
-import { LocaleSwitcher } from './LocaleSwitcher';
+import { LocaleSwitcherDialog } from './locale-switcher';
+import { getLocaleMeta } from './locale-switcher/localeMeta';
 import { useLayoutI18nOptional } from '../AppLayout/LayoutI18nProvider';
+import { LucideIcon as LucideIconRender } from '../../components';
 
 import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
 
-/** Radix portals (dropdown, select, popover) render outside the account node — ignore those clicks for “outside”. */
-function isPointerFromRadixOverlay(target: EventTarget | null): boolean {
-  if (!target || !(target instanceof Element)) return false;
-  return Boolean(
-    target.closest('[data-radix-popper-content-wrapper]') ||
-      target.closest('[data-radix-dropdown-menu-content]') ||
-      target.closest('[data-radix-select-content]') ||
-      target.closest('[data-radix-popover-content]'),
-  );
-}
-
 interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
 }
 
+interface AccountView {
+  source: 'user' | 'dev-fallback';
+  displayName: string;
+  email: string | null;
+  avatarUrl: string;
+  plan: string | null;
+}
+
 export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
   const { user } = useAuth();
   const handleLogout = useLogout();
   const t = useAppT();
   const layoutI18n = useLayoutI18nOptional();
   const { state, setOpen: setSidebarOpen } = useSidebar();
-  const [accountOpen, setAccountOpen] = React.useState(false);
-  const accountRootRef = React.useRef<HTMLDivElement>(null);
+  const { theme, setTheme } = useThemeContext();
+  const [langDialogOpen, setLangDialogOpen] = React.useState(false);
   const narrow = state === 'collapsed';
 
-  React.useEffect(() => {
-    if (state === 'collapsed') setAccountOpen(false);
-  }, [state]);
-
-  React.useEffect(() => {
-    if (!accountOpen) return;
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const root = accountRootRef.current;
-      const target = event.target;
-      if (!(target instanceof Node)) return;
-      if (root?.contains(target)) return;
-      if (isPointerFromRadixOverlay(target)) return;
-      setAccountOpen(false);
-    };
-
-    document.addEventListener('pointerdown', handlePointerDown);
-    return () => document.removeEventListener('pointerdown', handlePointerDown);
-  }, [accountOpen]);
-
   const signOutLabel = t('layouts.profile.signOut');
 
   const accountLinks = React.useMemo(() => {
@@ -82,134 +65,289 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
     return header.groups.flatMap((g) => g.items.filter((i) => i.href));
   }, [header?.groups]);
 
-  if (!user) {
-    return null;
-  }
+  /**
+   * 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 displayName = user.display_username || user.email || 'User';
-  const userInitial = displayName.charAt(0).toUpperCase();
-  const userAvatar = user.avatar || '';
-  const hasEmailOrLinks = Boolean(user.email) || accountLinks.length > 0;
+  const onTriggerInteract = React.useCallback(() => {
+    if (narrow) setSidebarOpen(true);
+  }, [narrow, setSidebarOpen]);
+
+  const onSecondaryExpand = React.useCallback(() => {
+    setSidebarOpen(true);
+  }, [setSidebarOpen]);
+
+  const onLogoutSelect = React.useCallback((e: Event) => {
+    e.preventDefault();
+    handleLogout();
+  }, [handleLogout]);
+
+  const onLanguageSelect = React.useCallback((e: Event) => {
+    // Keep the dropdown closed (default behaviour) but defer dialog mount to
+    // the next tick so Radix has time to unmount the dropdown overlay first
+    // (avoids the "two open overlays steal focus" bug).
+    e.preventDefault();
+    setTimeout(() => setLangDialogOpen(true), 0);
+  }, []);
+
+  const onThemeSelect = React.useCallback((e: Event) => {
+    e.preventDefault();
+    // Cycle: light → dark → system → light
+    const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light';
+    setTheme(next);
+  }, [theme, setTheme]);
+
+  // 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.
+  // NOTE: this early-return must stay AFTER all hooks above to keep hook order stable.
+  if (!user && !isDev) return null;
+
+  const userInitial = (account.displayName.charAt(0) || '?').toUpperCase();
+  const secondary = header?.footerSecondaryAction;
 
   const triggerClassName = cn(
-    'h-auto min-h-10 w-full gap-2 rounded-md px-2 py-2 text-left hover:bg-sidebar-accent',
-    narrow && 'justify-center px-0',
-  );
-  const chevronClassName = cn(
-    'h-4 w-4 shrink-0 text-sidebar-foreground/65 transition-transform duration-200',
-    accountOpen && 'rotate-180',
+    'group h-auto w-full gap-3 rounded-lg px-2 py-2 text-left',
+    'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+    narrow ? 'justify-center px-0 py-1.5' : 'min-h-14',
   );
-  const accountPanelClassName = cn(
-    'mt-2 flex flex-col gap-3 rounded-lg border border-sidebar-border/60 bg-sidebar-accent/45 p-3 shadow-sm',
-    'dark:border-sidebar-border dark:bg-sidebar-accent/20',
+
+  const secondaryButton = secondary && !narrow ? (
+    <SecondaryAction action={secondary} onParentExpand={onSecondaryExpand} />
+  ) : null;
+
+  const dropdownContentClass = cn(
+    'p-1.5',
+    narrow ? 'min-w-60' : 'w-[var(--radix-dropdown-menu-trigger-width)] min-w-60',
   );
-  const accountActionsClassName = cn(
-    'flex min-h-10 items-center gap-2',
-    hasEmailOrLinks && 'border-t border-sidebar-border/50 pt-3',
+  const dropdownSide: 'top' | 'right' = narrow ? 'right' : 'top';
+  const avatarClass = cn(
+    'h-9 w-9 shrink-0 border border-transparent transition-colors',
+    'group-hover:border-sidebar-border/70',
   );
 
-  const onAccountTriggerClick = React.useCallback(() => {
-    if (narrow) setSidebarOpen(true);
-  }, [narrow, setSidebarOpen]);
+  const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
+  const headerLabel = headerLabelText ? (
+    <DropdownMenuLabel className="truncate px-2 py-1.5 text-xs font-normal text-muted-foreground">
+      {headerLabelText}
+    </DropdownMenuLabel>
+  ) : null;
 
-  const accountLinkRows = React.useMemo(
-    () =>
-      accountLinks.map((item) => {
-        const Icon = item.icon;
-        return (
-          <Link
-            key={item.href}
-            href={item.href!}
-            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm leading-snug text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
-          >
-            {Icon ? <Icon className="h-4 w-4 shrink-0 text-sidebar-foreground/65" /> : null}
-            <span className="truncate">{item.label}</span>
-          </Link>
-        );
-      }),
-    [accountLinks],
-  );
+  const accountLinksItems = accountLinks.map((item) => {
+    const Icon = item.icon;
+    return (
+      <DropdownMenuItem key={item.href} asChild>
+        <Link
+          href={item.href!}
+          className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
+        >
+          {Icon ? <Icon className="h-4 w-4 shrink-0 text-muted-foreground" /> : null}
+          <span className="truncate">{item.label}</span>
+        </Link>
+      </DropdownMenuItem>
+    );
+  });
+  const accountLinksBlock = accountLinks.length > 0 ? (
+    <>
+      {headerLabel ? <DropdownMenuSeparator /> : null}
+      {accountLinksItems}
+    </>
+  ) : null;
 
-  const emailBlock = user.email ? (
-    <p className="truncate text-xs leading-snug text-sidebar-foreground/65">{user.email}</p>
+  const currentLocaleLabel = layoutI18n
+    ? getLocaleMeta(layoutI18n.locale).native
+    : null;
+  const languageItem = layoutI18n ? (
+    <DropdownMenuItem
+      onSelect={onLanguageSelect}
+      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
+    >
+      <Globe className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <span className="flex-1 truncate">Language</span>
+      <span className="ml-auto flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
+        {currentLocaleLabel}
+        <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+      </span>
+    </DropdownMenuItem>
   ) : null;
 
-  const accountLinksNav =
-    accountLinks.length > 0 ? (
-      <nav className="flex max-h-40 flex-col gap-0.5 overflow-y-auto" aria-label="Account">
-        {accountLinkRows}
-      </nav>
-    ) : null;
+  const themeIcon = theme === 'dark'
+    ? <Moon className="h-4 w-4 shrink-0 text-muted-foreground" />
+    : theme === 'light'
+      ? <Sun className="h-4 w-4 shrink-0 text-muted-foreground" />
+      : <Monitor className="h-4 w-4 shrink-0 text-muted-foreground" />;
+  const themeValueLabel = theme === 'dark' ? 'Dark' : theme === 'light' ? 'Light' : 'System';
+  const themeItem = (
+    <DropdownMenuItem
+      onSelect={onThemeSelect}
+      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
+    >
+      {themeIcon}
+      <span className="flex-1 truncate">Theme</span>
+      <span className="ml-auto shrink-0 text-xs text-muted-foreground">{themeValueLabel}</span>
+    </DropdownMenuItem>
+  );
 
-  const expandedTriggerMeta = narrow ? null : (
+  const expandedMeta = narrow ? null : (
     <>
-      <span className="min-w-0 flex-1 truncate text-left text-sm font-medium leading-tight text-sidebar-foreground">
-        {displayName}
+      <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>
+        {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}
+        <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
       </span>
-      <ChevronDown className={chevronClassName} aria-hidden />
     </>
   );
 
-  const localeThemeGroup = layoutI18n ? (
-    <LocaleSwitcher
-      variant="dropdown"
-      buttonVariant="ghost"
-      size="icon"
-      showTriggerLabel={false}
-      showIcon={false}
-      className="h-8 w-8 shrink-0 text-base leading-none"
-    />
-  ) : null;
-
   return (
-    <div ref={accountRootRef} className="w-full min-w-0 border-t border-sidebar-border/45 pt-2">
-      <Collapsible open={accountOpen} onOpenChange={setAccountOpen} className="w-full min-w-0">
-        <CollapsibleTrigger asChild>
+    <div className="w-full min-w-0 border-t border-sidebar-border/45 pt-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="ghost"
-            aria-expanded={accountOpen}
-            aria-label={narrow ? 'Account' : undefined}
+            aria-label={narrow ? account.displayName : undefined}
             className={triggerClassName}
-            onClick={onAccountTriggerClick}
+            onClick={onTriggerInteract}
           >
-            <Avatar className="h-8 w-8 shrink-0">
-              <AvatarImage src={userAvatar} alt={displayName} />
-              <AvatarFallback className="text-xs">{userInitial}</AvatarFallback>
+            <Avatar className={avatarClass}>
+              <AvatarImage src={account.avatarUrl} alt={account.displayName} />
+              <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
             </Avatar>
-            {expandedTriggerMeta}
+            {expandedMeta}
           </Button>
-        </CollapsibleTrigger>
-
-        <CollapsibleContent className="overflow-hidden data-[state=closed]:hidden">
-          <div className={accountPanelClassName}>
-            {emailBlock}
-            {accountLinksNav}
-
-            <div className={accountActionsClassName}>
-              <button
-                type="button"
-                onClick={handleLogout}
-                className="flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-destructive hover:bg-destructive/10"
-              >
-                <LogOut className="h-4 w-4 shrink-0" />
-                <span className="truncate">{signOutLabel}</span>
-              </button>
-              <div
-                className="flex shrink-0 items-center gap-0.5 border-l border-sidebar-border/50 pl-2"
-                role="group"
-                aria-label="Language and theme"
-              >
-                {localeThemeGroup}
-                <ThemeToggle
-                  size="compact"
-                  className="h-8 w-8 shrink-0 focus-visible:ring-1 focus-visible:ring-sidebar-ring focus-visible:ring-offset-0"
-                />
-              </div>
-            </div>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          side={dropdownSide}
+          align="start"
+          sideOffset={8}
+          className={dropdownContentClass}
+        >
+          {headerLabel}
+          {accountLinksBlock}
+
+          <DropdownMenuSeparator />
+          {languageItem}
+          {themeItem}
+
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={onLogoutSelect}
+            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-destructive focus:bg-destructive/10 focus:text-destructive"
+          >
+            <LogOut className="h-4 w-4 shrink-0" />
+            <span className="truncate">{signOutLabel}</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {layoutI18n ? (
+        <LocaleSwitcherDialog
+          open={langDialogOpen}
+          onOpenChange={setLangDialogOpen}
+          locale={layoutI18n.locale}
+          locales={layoutI18n.locales}
+          onChange={layoutI18n.onLocaleChange}
+          brand={layoutI18n.brand}
+          i18nLabels={layoutI18n.dialogLabels}
+        />
+      ) : null}
     </div>
   );
 }
+
+interface SecondaryActionProps {
+  action: NonNullable<HeaderConfig['footerSecondaryAction']>;
+  onParentExpand: () => void;
+}
+
+function SecondaryAction({ action, onParentExpand }: SecondaryActionProps) {
+  // Radix's DropdownMenuTrigger opens on pointerdown, before React onClick fires.
+  // Stop the event there too — onClick alone is too late.
+  const stop = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    stop(e);
+    onParentExpand();
+    action.onClick?.();
+  };
+
+  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',
+        'transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground',
+      )}
+    >
+      <LucideIconRender icon={action.icon} className="h-4 w-4" />
+      {action.pulse ? (
+        <span className="pointer-events-none absolute -right-0.5 -top-0.5 flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
+        </span>
+      ) : null}
+    </span>
+  );
+
+  if (action.href) {
+    return (
+      <Link
+        href={action.href}
+        aria-label={action.ariaLabel}
+        onClick={handleClick}
+        onPointerDown={stop}
+        onPointerUp={stop}
+        data-no-expand
+      >
+        {inner}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      aria-label={action.ariaLabel}
+      onClick={handleClick}
+      onPointerDown={stop}
+      onPointerUp={stop}
+      data-no-expand
+    >
+      {inner}
+    </button>
+  );
+}

package/src/layouts/_components/SidebarFeatured.tsx

@@ -0,0 +1,70 @@
+/**
+ * Featured CTA tile for the sidebar — accent-tinted plate with icon, label,
+ * optional inline badge, and a trailing arrow. Mailersend-style.
+ */
+
+'use client';
+
+import { ArrowRight } from 'lucide-react';
+import { Link } from '@djangocfg/ui-core/components';
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LucideIcon } from '../../components';
+
+import type { SidebarFeaturedConfig } from '../PrivateLayout/PrivateLayout';
+
+const ACCENT_CLASS: Record<NonNullable<SidebarFeaturedConfig['accent']>, string> = {
+  green: 'bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 dark:bg-emerald-400/10 dark:hover:bg-emerald-400/15',
+  blue: 'bg-sky-500/10 text-sky-700 hover:bg-sky-500/15 dark:text-sky-300 dark:bg-sky-400/10 dark:hover:bg-sky-400/15',
+  amber: 'bg-amber-500/10 text-amber-800 hover:bg-amber-500/15 dark:text-amber-300 dark:bg-amber-400/10 dark:hover:bg-amber-400/15',
+  primary: 'bg-primary/10 text-primary hover:bg-primary/15',
+};
+
+const BADGE_ACCENT_CLASS: Record<NonNullable<SidebarFeaturedConfig['accent']>, string> = {
+  green: 'bg-emerald-500 text-white dark:bg-emerald-400 dark:text-emerald-950',
+  blue: 'bg-sky-500 text-white dark:bg-sky-400 dark:text-sky-950',
+  amber: 'bg-amber-500 text-white dark:bg-amber-400 dark:text-amber-950',
+  primary: 'bg-primary text-primary-foreground',
+};
+
+interface SidebarFeaturedProps {
+  config: SidebarFeaturedConfig;
+}
+
+export function SidebarFeatured({ config }: SidebarFeaturedProps) {
+  const accent = config.accent ?? 'green';
+  const tileClass = cn(
+    'group/featured flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2',
+    'transition-colors',
+    ACCENT_CLASS[accent],
+  );
+
+  const badgeNode = config.badge ? (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+        BADGE_ACCENT_CLASS[accent],
+      )}
+    >
+      {config.badge}
+    </span>
+  ) : null;
+
+  const iconNode = config.icon ? (
+    <LucideIcon icon={config.icon} className="h-4 w-4 shrink-0" />
+  ) : null;
+
+  return (
+    <Link href={config.href} className={tileClass}>
+      {iconNode}
+      {badgeNode}
+      <span className="flex-1 truncate text-sm font-medium">{config.label}</span>
+      <ArrowRight
+        className="h-4 w-4 shrink-0 transition-transform duration-200 group-hover/featured:translate-x-0.5"
+        aria-hidden
+      />
+    </Link>
+  );
+}