@djangocfg/layouts 2.1.479 → 2.1.481

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.479",
+  "version": "2.1.481",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.479",
-    "@djangocfg/api": "^2.1.479",
-    "@djangocfg/centrifugo": "^2.1.479",
-    "@djangocfg/devtools": "^2.1.479",
-    "@djangocfg/i18n": "^2.1.479",
-    "@djangocfg/ui-core": "^2.1.479",
+    "@djangocfg/analytics": "^2.1.481",
+    "@djangocfg/api": "^2.1.481",
+    "@djangocfg/centrifugo": "^2.1.481",
+    "@djangocfg/devtools": "^2.1.481",
+    "@djangocfg/i18n": "^2.1.481",
+    "@djangocfg/ui-core": "^2.1.481",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.479",
-    "@djangocfg/api": "^2.1.479",
-    "@djangocfg/centrifugo": "^2.1.479",
-    "@djangocfg/devtools": "^2.1.479",
-    "@djangocfg/i18n": "^2.1.479",
-    "@djangocfg/typescript-config": "^2.1.479",
-    "@djangocfg/ui-core": "^2.1.479",
-    "@djangocfg/ui-tools": "^2.1.479",
+    "@djangocfg/analytics": "^2.1.481",
+    "@djangocfg/api": "^2.1.481",
+    "@djangocfg/centrifugo": "^2.1.481",
+    "@djangocfg/devtools": "^2.1.481",
+    "@djangocfg/i18n": "^2.1.481",
+    "@djangocfg/typescript-config": "^2.1.481",
+    "@djangocfg/ui-core": "^2.1.481",
+    "@djangocfg/ui-tools": "^2.1.481",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -99,63 +99,8 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     setSidebarOpen(true);
   }, [setSidebarOpen]);
 
-  // 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(
-    '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',
-    // 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]',
-  );
-
-  const secondaryButton = secondary && !content.isAccountCompact ? (
-    <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',
-  );
-  // 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' = 'top';
-  const avatarClass = cn(
-    'h-9 w-9 shrink-0 border border-transparent transition-colors',
-    'group-hover:border-sidebar-border/70',
-  );
-
   const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
 
-  const expandedMeta = content.isAccountCompact ? null : (
-    <>
-      <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}
-        {header?.accountAction !== 'dialog' ? (
-          <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
-        ) : null}
-      </span>
-    </>
-  );
-
   // `accountAction: 'dialog'` opens the global SettingsDialog (mounted in
   // PrivateLayout). Requires `settings` to be passed to PrivateLayout.
   const openSettingsDialog = React.useCallback(() => {
@@ -239,6 +184,68 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     return items;
   }, [headerLabelText, t, layoutI18n, accountLinks, signOutLabel, handleLogout]);
 
+  // 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.
+  //
+  // EVERY hook must run above this line. When a terminal 401 clears the session,
+  // `user` flips to null and this branch starts returning early — if any hook
+  // lived below it, the hook count would drop between renders and React would
+  // throw #310 ("rendered more hooks than during the previous render"). That is
+  // exactly what happened on my.cmdop.com/private/: two hooks sat below and the
+  // dashboard white-screened on the 401 transition. It only reproduced in
+  // production because `isDev` makes this guard statically dead in development.
+  if (!user && !isDev) return null;
+
+  const userInitial = (account.displayName.charAt(0) || '?').toUpperCase();
+  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',
+    // 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]',
+  );
+
+  const secondaryButton = secondary && !content.isAccountCompact ? (
+    <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',
+  );
+  // 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' = 'top';
+  const avatarClass = cn(
+    'h-9 w-9 shrink-0 border border-transparent transition-colors',
+    'group-hover:border-sidebar-border/70',
+  );
+
+  const expandedMeta = content.isAccountCompact ? null : (
+    <>
+      <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}
+        {header?.accountAction !== 'dialog' ? (
+          <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+        ) : null}
+      </span>
+    </>
+  );
+
   const triggerButton = (
     <Button
       type="button"