@djangocfg/layouts 2.1.319 → 2.1.320

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.319",
+  "version": "2.1.320",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.319",
-    "@djangocfg/centrifugo": "^2.1.319",
-    "@djangocfg/debuger": "^2.1.319",
-    "@djangocfg/i18n": "^2.1.319",
-    "@djangocfg/monitor": "^2.1.319",
-    "@djangocfg/ui-core": "^2.1.319",
-    "@djangocfg/ui-nextjs": "^2.1.319",
-    "@djangocfg/ui-tools": "^2.1.319",
+    "@djangocfg/api": "^2.1.320",
+    "@djangocfg/centrifugo": "^2.1.320",
+    "@djangocfg/debuger": "^2.1.320",
+    "@djangocfg/i18n": "^2.1.320",
+    "@djangocfg/monitor": "^2.1.320",
+    "@djangocfg/ui-core": "^2.1.320",
+    "@djangocfg/ui-nextjs": "^2.1.320",
+    "@djangocfg/ui-tools": "^2.1.320",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -111,15 +111,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.319",
-    "@djangocfg/centrifugo": "^2.1.319",
-    "@djangocfg/debuger": "^2.1.319",
-    "@djangocfg/i18n": "^2.1.319",
-    "@djangocfg/monitor": "^2.1.319",
-    "@djangocfg/typescript-config": "^2.1.319",
-    "@djangocfg/ui-core": "^2.1.319",
-    "@djangocfg/ui-nextjs": "^2.1.319",
-    "@djangocfg/ui-tools": "^2.1.319",
+    "@djangocfg/api": "^2.1.320",
+    "@djangocfg/centrifugo": "^2.1.320",
+    "@djangocfg/debuger": "^2.1.320",
+    "@djangocfg/i18n": "^2.1.320",
+    "@djangocfg/monitor": "^2.1.320",
+    "@djangocfg/typescript-config": "^2.1.320",
+    "@djangocfg/ui-core": "^2.1.320",
+    "@djangocfg/ui-nextjs": "^2.1.320",
+    "@djangocfg/ui-tools": "^2.1.320",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -86,6 +86,17 @@ export interface HeaderConfig {
   groups?: UserMenuConfig['groups'];
   /** Auth page path (for sign in button) */
   authPath?: string;
+  /** Subtitle under the display name in the sidebar footer (e.g. "Max plan"). */
+  userPlan?: string;
+  /** Optional secondary action button rendered inside the footer trigger (e.g. Get apps download button). */
+  footerSecondaryAction?: {
+    icon: string | LucideIconType;
+    href?: string;
+    onClick?: () => void;
+    ariaLabel: string;
+    /** Show pulsing accent dot on the action (Claude-style "new"). */
+    pulse?: boolean;
+  };
 }
 
 export interface PrivateLayoutProps {

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

@@ -47,12 +47,13 @@ function navDensityFromCount(n: number): NavDensity {
  * Nav rows use semantic sidebar tokens so light/dark follows ui-core theme vars.
  */
 const navItemClass = cn(
-  'border-0 font-medium shadow-none transition-colors',
+  'group/nav border-0 font-medium shadow-none transition-colors',
   'text-sidebar-foreground/80',
   'data-[active=true]:font-semibold data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
   'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
   'data-[active=true]:hover:bg-sidebar-accent',
   '[&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/70 [&>svg]:opacity-85',
+  '[&>svg]:transition-transform [&>svg]:duration-200 group-hover/nav:[&>svg]:scale-110 group-active/nav:[&>svg]:scale-95',
   'data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:opacity-100',
 );
 
@@ -180,6 +181,7 @@ export function PrivateSidebar({ sidebar, header, pathname: pathnameProp, varian
 
     return sidebar.groups.map((group) => {
       if (group.dynamic && group.items.length === 0) return null;
+      const hasLabel = Boolean(group.label && group.label.trim().length > 0);
       const items = group.items.map((item: SidebarItem) => {
         const iconProp = typeof item.icon === 'string' ? item.icon : item.icon;
         const tooltipText = item.tooltip ?? item.label;
@@ -202,9 +204,12 @@ export function PrivateSidebar({ sidebar, header, pathname: pathnameProp, varian
         );
       });
 
+      const groupKey = group.label || `__flat_${group.items.map((i) => i.href).join('|')}`;
       return (
-        <SidebarGroup key={group.label} className={sidebarGroupClass}>
-          <SidebarGroupLabel className={groupLabelClass}>{group.label}</SidebarGroupLabel>
+        <SidebarGroup key={groupKey} className={sidebarGroupClass}>
+          {hasLabel ? (
+            <SidebarGroupLabel className={groupLabelClass}>{group.label}</SidebarGroupLabel>
+          ) : null}
           <SidebarGroupContent>
             <SidebarMenu className={menuNav.menu}>{items}</SidebarMenu>
           </SidebarGroupContent>
@@ -305,11 +310,16 @@ export function PrivateSidebar({ sidebar, header, pathname: pathnameProp, varian
   const railExpandHintClass =
     !isMobile && state === 'collapsed' ? 'cursor-pointer' : undefined;
 
+  const sidebarRootClass = cn(
+    railExpandHintClass,
+    '[&>[data-sidebar=sidebar]]:bg-gradient-to-t [&>[data-sidebar=sidebar]]:from-sidebar/85 [&>[data-sidebar=sidebar]]:to-sidebar',
+  );
+
   return (
     <Sidebar
       collapsible="icon"
       variant={variant}
-      className={railExpandHintClass}
+      className={sidebarRootClass}
       onClick={expandOnRailClick}
     >
       <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>

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 { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-nextjs/components';
-import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+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,280 @@ 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) {
+  const handleClick = (e: React.MouseEvent) => {
+    // Don't open the parent dropdown when interacting with the secondary action.
+    e.stopPropagation();
+    e.preventDefault();
+    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}
+        data-no-expand
+      >
+        {inner}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      aria-label={action.ariaLabel}
+      onClick={handleClick}
+      data-no-expand
+    >
+      {inner}
+    </button>
+  );
+}