@djangocfg/layouts 2.1.591 → 2.1.593

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

@@ -11,7 +11,7 @@
 
 'use client';
 
-import { ChevronsUpDown, Languages, LogOut, Settings as SettingsIcon } from 'lucide-react';
+import { ChevronDown, Languages } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
 import React, { memo } from 'react';
 
@@ -29,12 +29,12 @@ import type { MenuItem } from '@djangocfg/ui-core/components';
 import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-core/components';
 
-import { useLogout } from '../../../hooks';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 import { LucideIcon as LucideIconRender } from '../../../components';
 import { getLocaleMeta } from '../../_components/locale-switcher/localeMeta';
-import { useShellVisualState } from '../hooks';
-import { useSettingsDialogStore } from '../../SettingsLayout/store';
+import { usePeekPin } from '../hooks';
+import { usePrivateLayoutContext } from '../context';
+import { useAccountMenuItems } from '../../SettingsLayout/hooks';
 
 import type { HeaderConfig } from '../types';
 
@@ -52,14 +52,12 @@ interface AccountView {
 
 function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const { user } = useAuth();
-  const handleLogout = useLogout();
   const t = useAppT();
   const layoutI18n = useLayoutI18nOptional();
   const { setOpen: setSidebarOpen } = useSidebar();
-  const { content } = useShellVisualState();
+  const { isMobile } = usePrivateLayoutContext();
   const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
-
-  const signOutLabel = t('layouts.profile.signOut');
+  usePeekPin(isAccountMenuOpen);
 
   const accountLinks = React.useMemo(() => {
     if (!header?.groups?.length) return [];
@@ -91,43 +89,15 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     };
   }, [user, header?.userPlan]);
 
-  const onTriggerInteract = React.useCallback(() => {
-    if (content.isAccountCompact) setSidebarOpen(true);
-  }, [content.isAccountCompact, setSidebarOpen]);
-
   const onSecondaryExpand = React.useCallback(() => {
     setSidebarOpen(true);
   }, [setSidebarOpen]);
 
   const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
 
-  // `accountAction: 'dialog'` opens the global SettingsDialog (mounted in
-  // PrivateLayout). Requires `settings` to be passed to PrivateLayout.
-  const openSettingsDialog = React.useCallback(() => {
-    useSettingsDialogStore.getState().open();
-  }, []);
-
-  // ── Declarative account menu (Claude-style) — fed to MenuBuilder ──
-  const menuItems = React.useMemo<MenuItem[]>(() => {
+  // Language submenu and the app's account links sit between the shared Settings shortcuts and Sign out.
+  const extraItems = React.useMemo<MenuItem[]>(() => {
     const items: MenuItem[] = [];
-
-    // Email header.
-    if (headerLabelText) {
-      items.push({ kind: 'label', id: 'email', label: headerLabelText });
-    }
-
-    // Settings → opens the global SettingsDialog (⌘, like Claude).
-    items.push({
-      kind: 'item',
-      id: 'settings',
-      label: t('layouts.profile.settings') || 'Settings',
-      icon: SettingsIcon,
-      shortcut: '⇧⌘,',
-      onSelect: () => useSettingsDialogStore.getState().open(),
-    });
-
-    // Language → submenu with a radio group of locales (flag + native name,
-    // checkmark on the active one). Only when an i18n layout context is present.
     if (layoutI18n && layoutI18n.locales.length > 1) {
       items.push({
         kind: 'submenu',
@@ -153,36 +123,17 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
         ],
       });
     }
-
-    // App-provided account links (from header.groups).
     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,
-        });
+        items.push({ kind: 'item', id: link.href!, label: link.label, icon: link.icon, href: link.href });
       }
     }
-
-    // Log out (destructive). Let the menu close normally (no preventDefault) —
-    // the logout confirm dialog should appear over a CLOSED menu, not under a
-    // still-open one.
-    items.push({ kind: 'separator', id: 'sep-logout' });
-    items.push({
-      kind: 'item',
-      id: 'logout',
-      label: signOutLabel,
-      icon: LogOut,
-      variant: 'destructive',
-      onSelect: () => handleLogout(),
-    });
-
     return items;
-  }, [headerLabelText, t, layoutI18n, accountLinks, signOutLabel, handleLogout]);
+  }, [t, layoutI18n, 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
@@ -201,80 +152,57 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const secondary = header?.footerSecondaryAction;
 
   const triggerClassName = cn(
-    'group h-auto w-full gap-3 rounded-lg px-3 py-3 text-left select-none',
-    'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+    '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',
-    content.isAccountCompact ? 'justify-center px-0 py-2' : 'min-h-[52px]',
+    isMobile && 'h-11',
   );
 
-  const secondaryButton = secondary && !content.isAccountCompact ? (
+  const secondaryButton = secondary ? (
     <SecondaryAction action={secondary} onParentExpand={onSecondaryExpand} />
   ) : null;
 
-  const dropdownContentClass = cn(
-    'p-1.5',
-    content.isAccountCompact ? 'min-w-60' : 'w-[var(--radix-dropdown-menu-trigger-width)] min-w-60',
-  );
+  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(
-    'h-9 w-9 shrink-0 border border-transparent transition-colors',
-    'group-hover:border-sidebar-border/70',
-  );
+  const avatarClass = cn('shrink-0', isMobile ? 'size-7' : 'size-6');
 
-  const expandedMeta = content.isAccountCompact ? null : (
+  // Like Claude: "Name · Plan ⌄". The email lives in the menu header.
+  const expandedMeta = (
     <>
-      <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>
+      <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="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}
-        {header?.accountAction !== 'dialog' ? (
-          <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+          <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"
-      aria-label={content.isAccountCompact ? account.displayName : undefined}
-      className={triggerClassName}
-      onClick={header?.accountAction === 'dialog' ? openSettingsDialog : onTriggerInteract}
-    >
+    <Button type="button" variant="ghost" className={triggerClassName}>
       <Avatar className={avatarClass}>
         <AvatarImage src={account.avatarUrl} alt={account.displayName} />
-        <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
+        <AvatarFallback className="text-xs font-medium">{userInitial}</AvatarFallback>
       </Avatar>
       {expandedMeta}
     </Button>
   );
 
-  const wrapperClass = cn(
-    'w-full min-w-0',
-    content.isAccountCompact ? 'px-0 pb-0' : 'px-2 pb-2',
-  );
-
-  // Dialog mode: simple button that opens the global SettingsDialog
-  if (header?.accountAction === 'dialog') {
-    return (
-      <div className={wrapperClass}>
-        {triggerButton}
-      </div>
-    );
-  }
+  const wrapperClass =
+    'flex w-full min-w-0 shrink-0 items-center justify-between gap-1 border-t border-sidebar-border/60 p-2 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]';
 
   return (
     <div className={wrapperClass}>
@@ -289,6 +217,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
       >
         {triggerButton}
       </MenuBuilder>
+      {secondaryButton}
     </div>
   );
 }
@@ -322,8 +251,8 @@ function SecondaryAction({ action, onParentExpand }: SecondaryActionProps) {
   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',
+        'relative inline-flex size-7 shrink-0 items-center justify-center rounded-md',
+        'bg-transparent text-sidebar-foreground/60',
         'transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground',
       )}
     >

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

@@ -0,0 +1,45 @@
+/**
+ * The sidebar's content: brand header, scrollable nav, account footer.
+ * Rendered by the docked sidebar, the peek panel and the mobile drawer alike.
+ */
+
+'use client';
+
+import React, { useMemo } from 'react';
+
+import { usePrivateLayoutContext } from '../context';
+import { PrivateSidebarAccount } from './PrivateSidebarAccount';
+import { SidebarBrand } from './SidebarBrand';
+import { SidebarNavGroup } from './SidebarNavGroup';
+import { SidebarSlots } from './SidebarSlots';
+
+export function SidebarBody() {
+  const { sidebar, header } = usePrivateLayoutContext();
+
+  const groups = useMemo(
+    () =>
+      (sidebar?.groups ?? []).map((group) =>
+        group.dynamic && group.items.length === 0 ? null : (
+          <SidebarNavGroup
+            key={group.label || `__flat_${group.items.map((i) => i.href).join('|')}`}
+            group={group}
+          />
+        ),
+      ),
+    [sidebar?.groups],
+  );
+
+  return (
+    <>
+      <SidebarBrand />
+      <div
+        data-sidebar="content"
+        className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden py-2"
+      >
+        <SidebarSlots />
+        {groups}
+      </div>
+      <PrivateSidebarAccount header={header} />
+    </>
+  );
+}

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

@@ -1,179 +1,91 @@
 /**
- * Sidebar Brand Component
- *
- * Renders the sidebar header with brand mark + title.
- * Three modes: expanded (desktop), collapsed rail (desktop), mobile drawer.
+ * Sidebar header: brand (or workspace switcher) on the left, one control on the
+ * right — collapse on desktop, close on the mobile drawer.
  */
 
 'use client';
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
+import { X } from 'lucide-react';
 
-import { Link, SidebarHeader, SidebarTrigger } from '@djangocfg/ui-core/components';
+import { Button, Link, SidebarTrigger, useSidebar } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { LucideIcon } from '../../../components';
 import { usePrivateLayoutContext } from '../context';
-import { useShellVisualState } from '../hooks';
 import { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 
-const HEADER_ROW_CLASS = 'flex items-center gap-2 mb-2';
+const BRAND_LINK =
+  'flex min-w-0 items-center gap-2.5 rounded-lg py-1 outline-none ring-sidebar-ring focus-visible:ring-2';
 
 function SidebarBrandRaw() {
-  const { header, homeHref, brandTitle, brandMonogram, isMobile } =
-    usePrivateLayoutContext();
-  const { content } = useShellVisualState();
-
-  const brandMark = useMemo(
-    () =>
-      header?.brandIcon ? (
-        <LucideIcon
-          icon={header.brandIcon}
-          className="h-4 w-4 text-sidebar-primary-foreground"
-        />
-      ) : (
-        <span className="text-[11px] font-bold leading-none tracking-tight text-sidebar-primary-foreground">
-          {brandMonogram}
-        </span>
-      ),
-    [header?.brandIcon, brandMonogram],
-  );
+  const { header, homeHref, brandTitle, brandMonogram, isMobile } = usePrivateLayoutContext();
+  const { setOpenMobile } = useSidebar();
 
   const customBrand = header?.brand;
 
-  const headerRowClass = HEADER_ROW_CLASS;
-
-  const expandedHeader = useMemo(
-    () => (
-      <div className={headerRowClass}>
-        <div className="min-w-0 flex-1">
-          {customBrand != null && customBrand !== false ? (
-            typeof customBrand === 'string' ? (
-              <Link
-                href={homeHref}
-                className="flex min-w-0 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
-              >
-                <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
-                  {customBrand}
-                </span>
-              </Link>
-            ) : (
-              customBrand
-            )
-          ) : (
-            <Link
-              href={homeHref}
-              className="flex min-w-0 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
-            >
-              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
-                {brandMark}
-              </div>
-              <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
-                {brandTitle}
-              </span>
-            </Link>
+  const brand =
+    customBrand != null && customBrand !== false ? (
+      typeof customBrand === 'string' ? (
+        <Link href={homeHref} className={BRAND_LINK}>
+          <span className="truncate text-base font-medium tracking-tight">{customBrand}</span>
+        </Link>
+      ) : (
+        customBrand
+      )
+    ) : (
+      <Link href={homeHref} className={BRAND_LINK}>
+        <span
+          className={cn(
+            'flex shrink-0 items-center justify-center rounded-lg bg-sidebar-primary',
+            isMobile ? 'size-9' : 'size-7',
           )}
-        </div>
-        {!isMobile && <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />}
-      </div>
-    ),
-    [headerRowClass, customBrand, homeHref, brandMark, brandTitle, isMobile],
-  );
-
-  const collapsedHeader = useMemo(
-    () => (
-      <div className="group/collapsed-brand flex justify-center py-1">
-        <div className="relative h-7 w-7">
-          <Link
-            href={homeHref}
-            className="absolute inset-0 flex items-center justify-center rounded-md bg-sidebar-primary outline-none ring-sidebar-ring focus-visible:ring-2 transition-opacity group-hover/collapsed-brand:opacity-0"
-            aria-label={brandTitle}
-          >
-            {brandMark}
-          </Link>
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover/collapsed-brand:opacity-100">
-            <SidebarTrigger aria-label="Expand sidebar" />
-          </div>
-        </div>
-      </div>
-    ),
-    [homeHref, brandTitle, brandMark],
-  );
-
-  /** Mobile drawer: menu open/close only from the main column trigger — no duplicate toggle in the sheet. */
-  const mobileHeader = useMemo(
-    () => (
-      <div className="flex items-center gap-3">
-        <div className="min-w-0 flex-1">
-          {customBrand != null && customBrand !== false ? (
-            typeof customBrand === 'string' ? (
-              <Link
-                href={homeHref}
-                className="flex min-w-0 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
-              >
-                <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
-                  {customBrand}
-                </span>
-              </Link>
-            ) : (
-              customBrand
-            )
+        >
+          {header?.brandIcon ? (
+            <LucideIcon icon={header.brandIcon} className="size-4 text-sidebar-primary-foreground" />
           ) : (
-            <Link
-              href={homeHref}
-              className="flex min-w-0 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
-            >
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
-                {brandMark}
-              </div>
-              <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
-                {brandTitle}
-              </span>
-            </Link>
+            <span className="text-[11px] font-bold leading-none text-sidebar-primary-foreground">
+              {brandMonogram}
+            </span>
           )}
-        </div>
-      </div>
-    ),
-    [customBrand, homeHref, brandMark, brandTitle],
+        </span>
+        <span className={cn('truncate font-medium tracking-tight', isMobile ? 'text-lg' : 'text-base')}>
+          {brandTitle}
+        </span>
+      </Link>
+    );
+
+  const trailing = isMobile ? (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-11 shrink-0 text-sidebar-foreground/70"
+      aria-label="Close menu"
+      onClick={() => setOpenMobile(false)}
+    >
+      <X className="size-5" />
+    </Button>
+  ) : header?.switcher ? null : (
+    <SidebarTrigger className="shrink-0 text-sidebar-foreground/60 hover:text-sidebar-foreground" />
   );
 
-  // Switcher mode: trigger embedded inside switcher row on desktop expanded
-  const switcherContent = header?.switcher
-    ? (
-      <div className="mb-2">
-        <SidebarBrandSwitcher
-          config={header.switcher}
-          showCollapseTrigger={content.showLabels && !isMobile}
-        />
-      </div>
-    )
-    : null;
-
-  const sidebarHeaderContent = switcherContent
-    ?? (isMobile
-      ? mobileHeader
-      : content.showLabels
-        ? expandedHeader
-        : collapsedHeader);
-
-  const sidebarHeaderClass = useMemo(
-    () =>
-      cn(
-        'pb-2',
+  return (
+    <div
+      data-sidebar="header"
+      className={cn(
+        'flex shrink-0 items-center gap-2',
         isMobile
-          ? 'pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
-          : 'pt-3.5',
-      ),
-    [isMobile],
+          ? 'px-4 pb-2 pt-[max(0.5rem,env(safe-area-inset-top,0px))]'
+          : 'px-3 pb-1 pt-3',
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        {header?.switcher ? <SidebarBrandSwitcher config={header.switcher} showCollapseTrigger={!isMobile} /> : brand}
+      </div>
+      {trailing}
+    </div>
   );
-
-  return <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>;
 }
 
-/**
- * Memoised brand header. Re-renders only when context values change
- * (header config, brand title, mobile state, showLabels). The three
- * visual modes (expanded / collapsed rail / mobile) are pre-built with
- * useMemo so the JSX tree is stable across renders.
- */
 export const SidebarBrand = memo(SidebarBrandRaw);

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

@@ -4,8 +4,6 @@
  * Dropdown for switching workspaces / accounts / projects.
  * Renders in the sidebar header area, replacing the static brand block.
  *
- * Collapsed rail: shows only the active item's avatar/monogram (no dropdown trigger).
- * Hover-expanded / mobile: shows full trigger + dropdown.
  */
 
 'use client';
@@ -27,7 +25,7 @@ import {
 import { Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { useShellVisualState } from '../hooks';
+import { usePeekPin } from '../hooks';
 import type { SidebarBrandSwitcherConfig, SidebarBrandSwitcherItem } from '../types';
 
 interface SidebarBrandSwitcherProps {
@@ -37,8 +35,8 @@ interface SidebarBrandSwitcherProps {
 }
 
 function SidebarBrandSwitcherRaw({ config, showCollapseTrigger }: SidebarBrandSwitcherProps) {
-  const { content } = useShellVisualState();
   const [open, setOpen] = React.useState(false);
+  usePeekPin(open);
 
   const activeItem = useMemo(
     () => config.items.find((i) => i.active) ?? config.items[0] ?? null,
@@ -66,32 +64,6 @@ function SidebarBrandSwitcherRaw({ config, showCollapseTrigger }: SidebarBrandSw
     </Avatar>
   );
 
-  // Collapsed rail — avatar with trigger on hover
-  if (!content.showLabels) {
-    return (
-      <div className="group/collapsed-switcher flex justify-center py-1">
-        <div className="relative h-7 w-7">
-          {activeItem.href ? (
-            <Link
-              href={activeItem.href}
-              className="absolute inset-0 flex items-center justify-center rounded-md outline-none ring-sidebar-ring focus-visible:ring-2 transition-opacity group-hover/collapsed-switcher:opacity-0"
-              aria-label={activeItem.label}
-            >
-              {activeAvatar}
-            </Link>
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center transition-opacity group-hover/collapsed-switcher:opacity-0">
-              {activeAvatar}
-            </div>
-          )}
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover/collapsed-switcher:opacity-100">
-            <SidebarTrigger aria-label="Expand sidebar" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="flex items-center gap-1">
       <DropdownMenu open={open} onOpenChange={onOpenChange}>