@cosmicdrift/kumiko-bundled-features 0.67.1 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.67.1",
+  "version": "0.68.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -84,11 +84,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.67.1",
-    "@cosmicdrift/kumiko-framework": "0.67.1",
-    "@cosmicdrift/kumiko-headless": "0.67.1",
-    "@cosmicdrift/kumiko-renderer": "0.67.1",
-    "@cosmicdrift/kumiko-renderer-web": "0.67.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.68.0",
+    "@cosmicdrift/kumiko-framework": "0.68.0",
+    "@cosmicdrift/kumiko-headless": "0.68.0",
+    "@cosmicdrift/kumiko-renderer": "0.68.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.68.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

package/src/auth-email-password/web/__tests__/user-menu.test.tsx

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import { SidebarProvider } from "@cosmicdrift/kumiko-renderer-web";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { UserMenu } from "../user-menu";
@@ -46,4 +47,21 @@ describe("UserMenu", () => {
     await user.click(screen.getByText("Abmelden"));
     expect(session.logout).toHaveBeenCalledTimes(1);
   });
+  test("sidebar variant: NavUser-Row zeigt Name + Email, Dropdown trägt Logout", async () => {
+    const user = userEvent.setup();
+    const session = makeSessionApi({
+      user: { id: "u1", email: "alice@example.com", displayName: "Alice Wonder", globalRoles: [] },
+    });
+    renderWithProviders(
+      <SidebarProvider>
+        <UserMenu variant="sidebar" />
+      </SidebarProvider>,
+      { session },
+    );
+    // Anders als die Pill: die Row zeigt Name UND Email direkt.
+    expect(screen.getByText("Alice Wonder")).toBeTruthy();
+    expect(screen.getByText("alice@example.com")).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: /Alice Wonder/ }));
+    expect(screen.getByText("Abmelden")).toBeTruthy();
+  });
 });

package/src/auth-email-password/web/user-menu.tsx

@@ -1,8 +1,9 @@
 // @runtime client
-// UserMenu — Avatar-Dropdown in der Topbar/Sidebar. Zeigt Name/Email
-// des aktuellen Users + Logout-Button. Auf Radix-DropdownMenu, damit
-// Click-outside, Escape, Focus-Management, Keyboard-Nav (↑↓/Home/End)
-// und ARIA-Roles aus der Kiste funktionieren.
+// UserMenu — Avatar-Dropdown für die Topbar (variant="pill", Default) oder den
+// Sidebar-Footer (variant="sidebar" = die sidebar-07-NavUser-Row). Zeigt
+// Name/Email + Logout. Auf Radix-DropdownMenu, damit Click-outside, Escape,
+// Focus-Management, Keyboard-Nav (↑↓/Home/End) und ARIA-Roles aus der Kiste
+// funktionieren.
 //
 // Rendert NICHTS wenn kein User eingeloggt ist — Hosts dürfen das
 // Component außerhalb des AuthGate einhängen ohne dass ein harter
@@ -17,15 +18,23 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
 } from "@cosmicdrift/kumiko-renderer-web";
-import { ChevronDown, LogOut } from "lucide-react";
+import { ChevronDown, ChevronsUpDown, LogOut } from "lucide-react";
 import type { ReactNode } from "react";
 import { useSession } from "./session";
 
+export type UserMenuVariant = "pill" | "sidebar";
+
 export type UserMenuProps = {
   /** Zusätzliche Menu-Items über dem Logout. Per-item class/behaviour
    *  controlliert der Caller — wir packen nur den Frame drumrum. */
   readonly children?: ReactNode;
+  /** "pill" (Default) = kompakter Topbar-Trigger; "sidebar" = volle NavUser-
+   *  Row (Avatar + Name + Email) für den `sidebarFooter`-Slot der App-Shell. */
+  readonly variant?: UserMenuVariant;
 };
 
 function initials(value: string): string {
@@ -41,15 +50,63 @@ function initials(value: string): string {
   return trimmed.slice(0, 2).toUpperCase();
 }
 
-export function UserMenu({ children }: UserMenuProps): ReactNode {
+export function UserMenu({ children, variant = "pill" }: UserMenuProps): ReactNode {
   const t = useTranslation();
   const { user, logout } = useSession();
 
   if (user === null) return null;
 
-  const displayName = user.displayName.length > 0 ? user.displayName : user.email;
+  const hasName = user.displayName.length > 0;
+  const displayName = hasName ? user.displayName : user.email;
   const avatarText = initials(displayName);
 
+  const content = (
+    <DropdownMenuContent align="end" aria-label={t("auth.user.menu.label")}>
+      <DropdownMenuLabel className="text-xs">
+        <div className="font-medium text-foreground truncate">{displayName}</div>
+        <div className="truncate">{user.email}</div>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      {children}
+      <DropdownMenuItem onSelect={() => void logout()}>
+        <LogOut className="h-4 w-4" />
+        <span>{t("auth.user.menu.logout")}</span>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+
+  // Sidebar-Footer: volle NavUser-Row (sidebar-07) als Dropdown-Trigger —
+  // gleiche Optik wie SidebarUser, aber klickbar mit Logout/Profil.
+  if (variant === "sidebar") {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <span
+                  aria-hidden="true"
+                  className="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted text-xs font-medium text-muted-foreground"
+                >
+                  {avatarText}
+                </span>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{displayName}</span>
+                  {hasName && <span className="truncate text-xs">{user.email}</span>}
+                </div>
+                <ChevronsUpDown className="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            {content}
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -72,18 +129,7 @@ export function UserMenu({ children }: UserMenuProps): ReactNode {
           <ChevronDown className="h-3 w-3 text-muted-foreground" />
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" aria-label={t("auth.user.menu.label")}>
-        <DropdownMenuLabel className="text-xs">
-          <div className="font-medium text-foreground truncate">{displayName}</div>
-          <div className="truncate">{user.email}</div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {children}
-        <DropdownMenuItem onSelect={() => void logout()}>
-          <LogOut className="h-4 w-4" />
-          <span>{t("auth.user.menu.logout")}</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
+      {content}
     </DropdownMenu>
   );
 }