@nsxbet/admin-sdk 0.5.1 → 0.6.0

package/dist/shell/components/LeftNav.js

@@ -4,7 +4,9 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../../hooks/useAuth";
 import { useAuthContext } from "../../components/AuthProvider";
 import { useI18n } from "../../hooks/useI18n";
+import { resolveLocalizedString } from "../../i18n";
 import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarHeader, SidebarFooter, SidebarTrigger, useSidebar, Collapsible, CollapsibleContent, CollapsibleTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Icon, ChevronRight, ChevronUp, ChevronDown, Lock, Pin, } from "@nsxbet/admin-ui";
+import { StackedPanel } from "./StackedPanel";
 export function LeftNav({ modules }) {
     const navigate = useNavigate();
     const location = useLocation();
@@ -27,13 +29,13 @@ export function LeftNav({ modules }) {
             // Ignore localStorage errors
         }
     }, []);
-    // Load pinned commands from localStorage
     useEffect(() => {
         const loadPinnedCommands = () => {
             try {
                 const pinned = localStorage.getItem("adminPlatform.pinnedCommands");
                 if (pinned) {
-                    setPinnedCommands(JSON.parse(pinned));
+                    const parsed = JSON.parse(pinned);
+                    setPinnedCommands(parsed.filter((p) => p.moduleId && p.commandId && p.route));
                 }
                 else {
                     setPinnedCommands([]);
@@ -63,16 +65,13 @@ export function LeftNav({ modules }) {
         return () => window.removeEventListener("storage", handleStorageChange);
     }, []);
     const handleModuleClick = (module) => {
-        // Navigate to the shell-rendered overview page
         navigate(`/_modules/${module.id}`);
     };
-    // Helper to check if user has permission to view a module
     const checkModulePermission = (module) => {
         if (module.permissions.view.length === 0)
             return true;
         return module.permissions.view.some((perm) => auth.hasPermission(perm));
     };
-    // Group modules by category (show all active modules, including those without permission)
     const modulesByCategory = useMemo(() => {
         const grouped = modules
             .filter((m) => m.status === "active")
@@ -88,93 +87,77 @@ export function LeftNav({ modules }) {
             acc[category].push(module);
             return acc;
         }, {});
-        // Sort modules within each category by navOrder then title
         Object.keys(grouped).forEach((category) => {
             grouped[category].sort((a, b) => {
-                if (a.navOrder !== undefined && b.navOrder !== undefined) {
-                    return a.navOrder - b.navOrder;
+                if (a.navigationOrder !== undefined && b.navigationOrder !== undefined) {
+                    return a.navigationOrder - b.navigationOrder;
                 }
-                if (a.navOrder !== undefined)
+                if (a.navigationOrder !== undefined)
                     return -1;
-                if (b.navOrder !== undefined)
+                if (b.navigationOrder !== undefined)
                     return 1;
-                return a.title.localeCompare(b.title);
+                return resolveLocalizedString(a.title, i18n.language).localeCompare(resolveLocalizedString(b.title, i18n.language));
             });
         });
         return grouped;
-    }, [modules, auth]);
-    // Get sorted category names
-    const categories = Object.keys(modulesByCategory).sort();
-    // Permission denied tooltip message
+    }, [modules, auth, i18n.language]);
+    const categories = Object.keys(modulesByCategory).sort((a, b) => {
+        const minOrder = (cat) => {
+            const mods = modulesByCategory[cat];
+            return Math.min(...mods.map((m) => m.navigationOrder ?? Number.MAX_SAFE_INTEGER));
+        };
+        return minOrder(a) - minOrder(b);
+    });
     const noPermissionTooltip = t('errors.accessDeniedDescription');
-    // Check if a route is active
     const isRouteActive = (route) => {
         return location.pathname === route || location.pathname.startsWith(route + "/");
     };
-    // Helper to translate module/command titles
-    // titleKey format: "namespace:key" (e.g., "tasks:module.title")
-    const translateTitle = useCallback((title, titleKey) => {
-        if (titleKey && titleKey.includes(':')) {
-            // Parse "namespace:key" format
-            const [ns, key] = titleKey.split(':');
-            // Use i18n.t with explicit namespace option
-            const translated = i18n.t(key, { ns, defaultValue: title });
-            return translated;
-        }
-        if (titleKey) {
-            // Fallback: try using the titleKey directly
-            const translated = t(titleKey, { defaultValue: title });
-            return translated;
-        }
-        return title;
-    }, [i18n, t]);
-    // Check if a command is pinned
     const isCommandPinned = useCallback((moduleId, commandId) => {
         return pinnedCommands.some((p) => p.moduleId === moduleId && p.commandId === commandId);
     }, [pinnedCommands]);
-    // Toggle pin state for a command
+    const getPinnedDisplayTitles = useCallback((pinned) => {
+        const module = modules.find((m) => m.id === pinned.moduleId);
+        const command = module?.commands?.find((c) => c.id === pinned.commandId);
+        const moduleTitle = module
+            ? resolveLocalizedString(module.title, i18n.language)
+            : pinned.moduleId;
+        const commandTitle = command
+            ? resolveLocalizedString(command.title, i18n.language)
+            : pinned.commandId;
+        return { moduleTitle, commandTitle };
+    }, [modules, i18n.language]);
     const togglePin = useCallback((module, command) => {
         const isPinned = isCommandPinned(module.id, command.id);
         let updated;
         if (isPinned) {
-            // Unpin
             updated = pinnedCommands.filter((p) => !(p.moduleId === module.id && p.commandId === command.id));
         }
         else {
-            // Pin
             const pinnedCommand = {
                 moduleId: module.id,
-                moduleTitle: module.title,
-                moduleTitleKey: module.titleKey,
-                moduleIcon: module.icon,
                 commandId: command.id,
-                commandTitle: command.title,
-                commandTitleKey: command.titleKey,
-                commandIcon: command.icon,
                 route: command.route,
+                moduleIcon: module.icon,
+                commandIcon: command.icon,
             };
             updated = [...pinnedCommands, pinnedCommand];
         }
         setPinnedCommands(updated);
         localStorage.setItem("adminPlatform.pinnedCommands", JSON.stringify(updated));
-        // Notify other components by dispatching a storage event
         window.dispatchEvent(new StorageEvent("storage", {
             key: "adminPlatform.pinnedCommands",
             newValue: JSON.stringify(updated),
         }));
-    }, [pinnedCommands, isCommandPinned]);
-    // Unpin a command by moduleId and commandId
+    }, [pinnedCommands, isCommandPinned, modules]);
     const unpinCommand = useCallback((moduleId, commandId) => {
         const updated = pinnedCommands.filter((p) => !(p.moduleId === moduleId && p.commandId === commandId));
         setPinnedCommands(updated);
         localStorage.setItem("adminPlatform.pinnedCommands", JSON.stringify(updated));
-        // Notify other components by dispatching a storage event
         window.dispatchEvent(new StorageEvent("storage", {
             key: "adminPlatform.pinnedCommands",
             newValue: JSON.stringify(updated),
         }));
     }, [pinnedCommands]);
-    // Move a pinned item up in the list
     const movePinnedUp = useCallback((index) => {
         if (index <= 0)
             return;
@@ -187,7 +170,6 @@ export function LeftNav({ modules }) {
             newValue: JSON.stringify(updated),
         }));
     }, [pinnedCommands]);
-    // Move a pinned item down in the list
     const movePinnedDown = useCallback((index) => {
         if (index >= pinnedCommands.length - 1)
             return;
@@ -200,48 +182,64 @@ export function LeftNav({ modules }) {
             newValue: JSON.stringify(updated),
         }));
     }, [pinnedCommands]);
-    return (_jsxs(Sidebar, { collapsible: "icon", "data-testid": "left-nav", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarTrigger, { "data-testid": "sidebar-toggle" }) }) }) }), _jsxs(SidebarContent, { children: [showPinned && pinnedCommands.length > 0 && (_jsxs(SidebarGroup, { "data-testid": "pinned-section", children: [_jsxs(SidebarGroupLabel, { className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: [_jsx(Pin, { className: "mr-2 h-4 w-4" }), !isCollapsed && t('nav.pinned')] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: pinnedCommands.map((pinned, index) => {
-                                        const iconName = pinned.commandIcon || pinned.moduleIcon || "file-text";
-                                        const isFirst = index === 0;
-                                        const isLast = index === pinnedCommands.length - 1;
-                                        return (_jsx(SidebarMenuItem, { className: "group/pinned", children: _jsxs("div", { className: "flex items-center w-full", children: [_jsxs(SidebarMenuButton, { onClick: () => navigate(pinned.route), isActive: isRouteActive(pinned.route), tooltip: `${translateTitle(pinned.moduleTitle, pinned.moduleTitleKey)} / ${translateTitle(pinned.commandTitle, pinned.commandTitleKey)}`, "data-testid": `pinned-${pinned.commandId}`, className: "flex-1 min-w-0", children: [_jsx(Icon, { name: iconName, className: "h-4 w-4 shrink-0" }), _jsxs("span", { className: "truncate", children: [translateTitle(pinned.moduleTitle, pinned.moduleTitleKey), " / ", translateTitle(pinned.commandTitle, pinned.commandTitleKey)] })] }), !isCollapsed && (_jsxs("div", { className: "flex items-center gap-0.5 shrink-0 pr-2 opacity-0 group-hover/pinned:opacity-100 transition-opacity", children: [!isFirst && (_jsx("button", { onClick: (e) => {
-                                                                    e.stopPropagation();
-                                                                    e.preventDefault();
-                                                                    movePinnedUp(index);
-                                                                }, className: "hover:text-primary p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Move up", "data-testid": `move-up-${pinned.commandId}`, children: _jsx(ChevronUp, { className: "h-3.5 w-3.5" }) })), !isLast && (_jsx("button", { onClick: (e) => {
-                                                                    e.stopPropagation();
-                                                                    e.preventDefault();
-                                                                    movePinnedDown(index);
-                                                                }, className: "hover:text-primary p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Move down", "data-testid": `move-down-${pinned.commandId}`, children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })), _jsx("button", { onClick: (e) => {
-                                                                    e.stopPropagation();
-                                                                    e.preventDefault();
-                                                                    unpinCommand(pinned.moduleId, pinned.commandId);
-                                                                }, className: "hover:text-destructive p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Unpin", "data-testid": `unpin-${pinned.commandId}`, children: _jsx(Pin, { className: "h-3.5 w-3.5 fill-current" }) })] }))] }) }, `${pinned.moduleId}:${pinned.commandId}`));
-                                    }) }) })] })), categories.map((category) => (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { "data-testid": `category-${category}`, className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: category }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { "data-testid": `category-modules-${category}`, children: modulesByCategory[category].map((module) => {
-                                        const hasCommands = module.commands && module.commands.length > 0;
-                                        const isDisabled = !module.hasViewPermission;
-                                        if (!hasCommands) {
-                                            // Simple button for modules without commands
-                                            const moduleTitle = translateTitle(module.title, module.titleKey);
-                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: () => !isDisabled && handleModuleClick(module), disabled: isDisabled, tooltip: isDisabled ? noPermissionTooltip : moduleTitle, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: moduleTitle }), isDisabled && _jsx(Lock, { className: "ml-auto h-3 w-3 text-muted-foreground" })] }) }, module.id));
-                                        }
-                                        // Disabled module with commands - show as non-interactive
-                                        if (isDisabled) {
-                                            const disabledModuleTitle = translateTitle(module.title, module.titleKey);
-                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { disabled: true, tooltip: noPermissionTooltip, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: disabledModuleTitle }), _jsx(Lock, { className: "ml-auto h-3 w-3 text-muted-foreground" })] }) }, module.id));
-                                        }
-                                        // Module with commands - collapsible
-                                        const collapsibleModuleTitle = translateTitle(module.title, module.titleKey);
-                                        return (_jsx(Collapsible, { asChild: true, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: collapsibleModuleTitle, "data-testid": `module-${module.id}-trigger`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: collapsibleModuleTitle }), _jsx(ChevronRight, { className: "ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsxs(SidebarMenuSub, { children: [_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { onClick: () => handleModuleClick(module), isActive: location.pathname === `/_modules/${module.id}`, "data-testid": `module-${module.id}`, children: t('nav.overview') }) }), module.commands?.map((command) => {
-                                                                    const isPinned = isCommandPinned(module.id, command.id);
-                                                                    const commandTitle = translateTitle(command.title, command.titleKey);
-                                                                    return (_jsx(SidebarMenuSubItem, { className: "group/command", children: _jsxs("div", { className: "flex items-center w-full", children: [_jsx(SidebarMenuSubButton, { onClick: () => navigate(command.route), isActive: isRouteActive(command.route), "data-testid": `command-${command.id}`, className: "flex-1 min-w-0", children: _jsx("span", { className: "truncate", children: commandTitle }) }), showPinned && (_jsx("button", { onClick: (e) => {
-                                                                                        e.stopPropagation();
-                                                                                        e.preventDefault();
-                                                                                        togglePin(module, command);
-                                                                                    }, className: `shrink-0 p-0.5 rounded mr-2 transition-opacity ${isPinned
-                                                                                        ? "text-primary hover:text-destructive hover:bg-sidebar-accent opacity-100"
-                                                                                        : "text-muted-foreground hover:text-primary hover:bg-sidebar-accent opacity-0 group-hover/command:opacity-100"}`, title: isPinned ? "Unpin" : "Pin", "data-testid": `pin-toggle-${command.id}`, children: _jsx(Pin, { className: `h-3.5 w-3.5 ${isPinned ? "fill-current" : ""}` }) }))] }) }, command.id));
-                                                                })] }) })] }) }, module.id));
-                                    }) }) })] }, category)))] }), _jsx(SidebarFooter, { className: `border-t border-sidebar-border ${isCollapsed ? "items-center" : ""}`, children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", tooltip: user?.displayName || "User", "data-testid": "user-menu-trigger", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: user?.displayName?.charAt(0).toUpperCase() || "U" }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.displayName || "User" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email || "" })] }), _jsx(ChevronUp, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { side: isCollapsed ? "right" : "top", align: isCollapsed ? "end" : "start", className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", children: [_jsxs(DropdownMenuItem, { onClick: () => navigate("/_profile"), className: isRouteActive("/_profile") ? "bg-accent" : "", "data-testid": "nav-profile", children: [_jsx(Icon, { name: "user", className: "h-4 w-4 mr-2" }), t('nav.profile')] }), _jsxs(DropdownMenuItem, { onClick: () => navigate("/_settings"), className: isRouteActive("/_settings") ? "bg-accent" : "", "data-testid": "nav-settings", children: [_jsx(Icon, { name: "settings", className: "h-4 w-4 mr-2" }), t('nav.settings')] }), _jsxs(DropdownMenuItem, { onClick: () => navigate("/_registry"), className: isRouteActive("/_registry") ? "bg-accent" : "", "data-testid": "nav-registry", children: [_jsx(Icon, { name: "package", className: "h-4 w-4 mr-2" }), t('nav.registry')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => logout(), "data-testid": "nav-logout", children: [_jsx(Icon, { name: "log-out", className: "h-4 w-4 mr-2" }), t('nav.logout')] })] })] }) }) }) })] }));
+    // URL-driven stacked panel detection
+    const activeStackedModule = useMemo(() => {
+        return modules.find((m) => m.navigation?.style === "stacked" &&
+            m.status === "active" &&
+            (location.pathname === m.routeBase ||
+                location.pathname.startsWith(m.routeBase + "/"))) ?? null;
+    }, [modules, location.pathname]);
+    const isStacked = activeStackedModule !== null;
+    const isStackedModule = (module) => module.navigation?.style === "stacked";
+    const userFooter = (_jsx(SidebarFooter, { className: `border-t border-sidebar-border ${isCollapsed ? "items-center" : ""}`, children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", tooltip: user?.displayName || "User", "data-testid": "user-menu-trigger", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: user?.displayName?.charAt(0).toUpperCase() || "U" }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.displayName || "User" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email || "" })] }), _jsx(ChevronUp, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { side: isCollapsed ? "right" : "top", align: isCollapsed ? "end" : "start", className: "w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg", children: [_jsxs(DropdownMenuItem, { onClick: () => navigate("/_profile"), className: isRouteActive("/_profile") ? "bg-accent" : "", "data-testid": "nav-profile", children: [_jsx(Icon, { name: "user", className: "h-4 w-4 mr-2" }), t('navigation.profile')] }), _jsxs(DropdownMenuItem, { onClick: () => navigate("/_settings"), className: isRouteActive("/_settings") ? "bg-accent" : "", "data-testid": "nav-settings", children: [_jsx(Icon, { name: "settings", className: "h-4 w-4 mr-2" }), t('navigation.settings')] }), auth.hasPermission('admin.platform.view') && (_jsxs(DropdownMenuItem, { onClick: () => navigate("/_registry"), className: isRouteActive("/_registry") ? "bg-accent" : "", "data-testid": "nav-registry", children: [_jsx(Icon, { name: "package", className: "h-4 w-4 mr-2" }), t('navigation.registry')] })), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => logout(), "data-testid": "nav-logout", children: [_jsx(Icon, { name: "log-out", className: "h-4 w-4 mr-2" }), t('navigation.logout')] })] })] }) }) }) }));
+    return (_jsx(Sidebar, { collapsible: "icon", "data-testid": "left-nav", children: _jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsx(SidebarTrigger, { "data-testid": "sidebar-toggle" }) }) }) }), _jsxs("div", { className: "flex flex-1 min-h-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none", style: {
+                        width: "200%",
+                        transform: isStacked && !isCollapsed ? "translateX(-50%)" : "translateX(0)",
+                    }, children: [_jsx("div", { className: "w-1/2 flex flex-col min-h-0", children: _jsxs(SidebarContent, { className: "flex-1 min-h-0", children: [showPinned && pinnedCommands.length > 0 && (_jsxs(SidebarGroup, { "data-testid": "pinned-section", children: [_jsxs(SidebarGroupLabel, { className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: [_jsx(Pin, { className: "mr-2 h-4 w-4" }), !isCollapsed && t('navigation.pinned')] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: pinnedCommands.map((pinned, index) => {
+                                                        const iconName = pinned.commandIcon || pinned.moduleIcon || "file-text";
+                                                        const isFirst = index === 0;
+                                                        const isLast = index === pinnedCommands.length - 1;
+                                                        return (_jsx(SidebarMenuItem, { className: "group/pinned", children: _jsxs("div", { className: "flex items-center w-full", children: [_jsxs(SidebarMenuButton, { onClick: () => navigate(pinned.route), isActive: isRouteActive(pinned.route), tooltip: `${getPinnedDisplayTitles(pinned).moduleTitle} / ${getPinnedDisplayTitles(pinned).commandTitle}`, "data-testid": `pinned-${pinned.commandId}`, className: "flex-1 min-w-0", children: [_jsx(Icon, { name: iconName, className: "h-4 w-4 shrink-0" }), _jsxs("span", { className: "truncate", children: [getPinnedDisplayTitles(pinned).moduleTitle, " / ", getPinnedDisplayTitles(pinned).commandTitle] })] }), !isCollapsed && (_jsxs("div", { className: "flex items-center gap-0.5 shrink-0 pr-2 opacity-0 group-hover/pinned:opacity-100 transition-opacity", children: [!isFirst && (_jsx("button", { onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    e.preventDefault();
+                                                                                    movePinnedUp(index);
+                                                                                }, className: "hover:text-primary p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Move up", "data-testid": `move-up-${pinned.commandId}`, children: _jsx(ChevronUp, { className: "h-3.5 w-3.5" }) })), !isLast && (_jsx("button", { onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    e.preventDefault();
+                                                                                    movePinnedDown(index);
+                                                                                }, className: "hover:text-primary p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Move down", "data-testid": `move-down-${pinned.commandId}`, children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })), _jsx("button", { onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    e.preventDefault();
+                                                                                    unpinCommand(pinned.moduleId, pinned.commandId);
+                                                                                }, className: "hover:text-destructive p-0.5 rounded hover:bg-sidebar-accent text-muted-foreground", title: "Unpin", "data-testid": `unpin-${pinned.commandId}`, children: _jsx(Pin, { className: "h-3.5 w-3.5 fill-current" }) })] }))] }) }, `${pinned.moduleId}:${pinned.commandId}`));
+                                                    }) }) })] })), categories.map((category) => (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { "data-testid": `category-${category}`, className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: category }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { "data-testid": `category-modules-${category}`, children: modulesByCategory[category].map((module) => {
+                                                        const hasCommands = module.commands && module.commands.length > 0;
+                                                        const isDisabled = !module.hasViewPermission;
+                                                        if (!hasCommands) {
+                                                            const moduleTitle = resolveLocalizedString(module.title, i18n.language);
+                                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: () => !isDisabled && handleModuleClick(module), className: isDisabled ? "opacity-50 cursor-not-allowed" : "", tooltip: isDisabled ? noPermissionTooltip : moduleTitle, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: moduleTitle }), isDisabled && _jsx(Lock, { className: "ml-auto h-3 w-3 text-muted-foreground" })] }) }, module.id));
+                                                        }
+                                                        if (isDisabled) {
+                                                            const disabledModuleTitle = resolveLocalizedString(module.title, i18n.language);
+                                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { className: "opacity-50 cursor-not-allowed", tooltip: noPermissionTooltip, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: disabledModuleTitle }), _jsx(Lock, { className: "ml-auto h-3 w-3 text-muted-foreground" })] }) }, module.id));
+                                                        }
+                                                        // Stacked module: single button with chevron-right
+                                                        if (isStackedModule(module)) {
+                                                            const stackedModuleTitle = resolveLocalizedString(module.title, i18n.language);
+                                                            return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: () => navigate(module.routeBase), isActive: isRouteActive(module.routeBase), tooltip: stackedModuleTitle, "data-testid": `module-${module.id}`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: stackedModuleTitle }), _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] }) }, module.id));
+                                                        }
+                                                        // Collapsible module (default)
+                                                        const collapsibleModuleTitle = resolveLocalizedString(module.title, i18n.language);
+                                                        return (_jsx(Collapsible, { asChild: true, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: collapsibleModuleTitle, "data-testid": `module-${module.id}-trigger`, children: [module.icon && _jsx(Icon, { name: module.icon, className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: collapsibleModuleTitle }), _jsx(ChevronRight, { className: "ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsxs(SidebarMenuSub, { children: [_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { onClick: () => handleModuleClick(module), isActive: location.pathname === `/_modules/${module.id}`, "data-testid": `module-${module.id}`, children: t('navigation.overview') }) }), module.commands?.map((command) => {
+                                                                                    const isPinned = isCommandPinned(module.id, command.id);
+                                                                                    const commandTitle = resolveLocalizedString(command.title, i18n.language);
+                                                                                    return (_jsx(SidebarMenuSubItem, { className: "group/command", children: _jsxs("div", { className: "flex items-center w-full", children: [_jsx(SidebarMenuSubButton, { onClick: () => navigate(command.route), isActive: isRouteActive(command.route), "data-testid": `command-${command.id}`, className: "flex-1 min-w-0", children: _jsx("span", { className: "truncate", children: commandTitle }) }), showPinned && (_jsx("button", { onClick: (e) => {
+                                                                                                        e.stopPropagation();
+                                                                                                        e.preventDefault();
+                                                                                                        togglePin(module, command);
+                                                                                                    }, className: `shrink-0 p-0.5 rounded mr-2 transition-opacity ${isPinned
+                                                                                                        ? "text-primary hover:text-destructive hover:bg-sidebar-accent opacity-100"
+                                                                                                        : "text-muted-foreground hover:text-primary hover:bg-sidebar-accent opacity-0 group-hover/command:opacity-100"}`, title: isPinned ? "Unpin" : "Pin", "data-testid": `pin-toggle-${command.id}`, children: _jsx(Pin, { className: `h-3.5 w-3.5 ${isPinned ? "fill-current" : ""}` }) }))] }) }, command.id));
+                                                                                })] }) })] }) }, module.id));
+                                                    }) }) })] }, category))), auth.hasPermission('admin.platform.view') && (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { className: "text-sidebar-foreground/90 font-semibold uppercase text-[10px] tracking-wider", children: t('navigation.platform') }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { onClick: () => navigate("/_registry"), isActive: isRouteActive("/_registry"), tooltip: t('navigation.registry'), "data-testid": "nav-registry-sidebar", children: [_jsx(Icon, { name: "package", className: "h-4 w-4" }), _jsx("span", { className: "truncate", children: t('navigation.registry') })] }) }) }) })] }))] }) }), _jsx("div", { className: "w-1/2 flex flex-col min-h-0", children: activeStackedModule ? (_jsx(StackedPanel, { module: activeStackedModule, showPinned: showPinned, isCommandPinned: isCommandPinned, togglePin: togglePin })) : null })] }), userFooter] }) }));
 }

package/dist/shell/components/MainContent.d.ts

@@ -1,9 +1,10 @@
 import { type ReactNode } from "react";
 import type { Module } from "../types";
+import type { Breadcrumb } from "../../types/platform";
 interface MainContentProps {
     modules: Module[];
     children?: ReactNode;
+    moduleBreadcrumbs?: Breadcrumb[] | null;
 }
-export declare function MainContent({ modules, children }: MainContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainContent({ modules, children, moduleBreadcrumbs }: MainContentProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=MainContent.d.ts.map

package/dist/shell/components/MainContent.js

@@ -1,29 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState, useEffect, useCallback } from "react";
+import { Fragment, useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useI18n } from "../../hooks/useI18n";
-export function MainContent({ modules, children }) {
+import { resolveLocalizedString } from "../../i18n";
+export function MainContent({ modules, children, moduleBreadcrumbs }) {
     const location = useLocation();
     const navigate = useNavigate();
     const { t, i18n } = useI18n();
     const [breadcrumbs, setBreadcrumbs] = useState([]);
-    // Helper to translate module/command titles
-    // titleKey format: "namespace:key" (e.g., "tasks:module.title")
-    const translateTitle = useCallback((title, titleKey) => {
-        if (titleKey && titleKey.includes(':')) {
-            // Parse "namespace:key" format
-            const [ns, key] = titleKey.split(':');
-            // Use i18n.t with explicit namespace option
-            const translated = i18n.t(key, { ns, defaultValue: title });
-            return translated;
-        }
-        if (titleKey) {
-            // Fallback: try using the titleKey directly
-            const translated = t(titleKey, { defaultValue: title });
-            return translated;
-        }
-        return title;
-    }, [i18n, t]);
     // Auto-detect module and update breadcrumbs based on current route
     useEffect(() => {
         const currentPath = location.pathname;
@@ -55,10 +39,10 @@ export function MainContent({ modules, children }) {
             const moduleHref = module.commands && module.commands.length > 0
                 ? module.commands[0].route
                 : module.routeBase;
-            crumbs.push({ label: translateTitle(module.title, module.titleKey), href: moduleHref });
+            crumbs.push({ label: resolveLocalizedString(module.title, i18n.language), href: moduleHref });
             if (command) {
                 // Add command as breadcrumb (with translation)
-                crumbs.push({ label: translateTitle(command.title, command.titleKey) });
+                crumbs.push({ label: resolveLocalizedString(command.title, i18n.language) });
             }
             else {
                 // Add sub-paths if any (for non-command routes)
@@ -83,6 +67,7 @@ export function MainContent({ modules, children }) {
             // No module matched, show home
             setBreadcrumbs([{ label: t('breadcrumbs.home') }]);
         }
-    }, [location.pathname, modules, t, translateTitle]);
-    return (_jsxs("main", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { "data-testid": "breadcrumbs", className: "flex h-10 items-center justify-between border-b px-4 text-sm text-muted-foreground", children: _jsx("div", { className: "flex items-center gap-2", children: breadcrumbs.map((crumb, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { children: "/" }), crumb.href ? (_jsx("button", { onClick: () => navigate(crumb.href), className: "transition-colors hover:text-foreground", children: crumb.label })) : (_jsx("span", { className: "text-foreground", children: crumb.label }))] }, index))) }) }), _jsx("div", { className: "flex-1 overflow-auto p-4", "data-testid": "module-container", children: children })] }));
+    }, [location.pathname, modules, i18n.language]);
+    const displayBreadcrumbs = moduleBreadcrumbs ?? breadcrumbs;
+    return (_jsxs("main", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { "data-testid": "breadcrumbs", className: "flex h-10 items-center justify-between border-b px-4 text-sm text-muted-foreground", children: _jsx("div", { className: "flex items-center gap-2", children: displayBreadcrumbs.map((crumb, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { children: "/" }), crumb.href ? (_jsx("button", { onClick: () => navigate(crumb.href), className: "transition-colors hover:text-foreground", children: crumb.label })) : (_jsx("span", { className: "text-foreground", children: crumb.label }))] }, index))) }) }), _jsx("div", { className: "flex-1 overflow-auto p-4", "data-testid": "module-container", children: children })] }));
 }

package/dist/shell/components/ModuleOverview.d.ts

@@ -4,4 +4,3 @@ interface ModuleOverviewProps {
 }
 export declare function ModuleOverview({ modules }: ModuleOverviewProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=ModuleOverview.d.ts.map

package/dist/shell/components/ModuleOverview.js

@@ -2,27 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, Badge, Icon, } from "@nsxbet/admin-ui";
 import { useI18n } from "../../hooks/useI18n";
+import { resolveLocalizedString } from "../../i18n";
 export function ModuleOverview({ modules }) {
     const location = useLocation();
     const navigate = useNavigate();
     const { t, i18n } = useI18n();
-    // Helper to translate titles
-    // titleKey format: "namespace:key" (e.g., "tasks:module.title")
-    const translateTitle = (title, titleKey) => {
-        if (titleKey && titleKey.includes(':')) {
-            // Parse "namespace:key" format
-            const [ns, key] = titleKey.split(':');
-            // Use i18n.t with explicit namespace option
-            const translated = i18n.t(key, { ns, defaultValue: title });
-            return translated;
-        }
-        if (titleKey) {
-            // Fallback: try using the titleKey directly
-            const translated = t(titleKey, { defaultValue: title });
-            return translated;
-        }
-        return title;
-    };
     // Extract moduleId from path: /_modules/xxx -> xxx
     const moduleId = location.pathname.replace(/^\/_modules\//, "");
     const module = modules.find((m) => m.id === moduleId);
@@ -34,7 +18,7 @@ export function ModuleOverview({ modules }) {
         : module.status === "deprecated"
             ? "warning"
             : "secondary";
-    const moduleTitle = translateTitle(module.title, module.titleKey);
-    const moduleDescription = translateTitle(module.description, module.descriptionKey);
-    return (_jsxs("div", { className: "p-6 max-w-3xl mx-auto space-y-6", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex-shrink-0 p-3 rounded-lg bg-muted", children: _jsx(Icon, { name: module.icon || "package", className: "h-8 w-8" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx("h1", { className: "text-3xl font-bold", children: moduleTitle }), _jsx(Badge, { variant: statusVariant, className: "capitalize", children: module.status })] }), moduleDescription && (_jsx("p", { className: "text-muted-foreground", children: moduleDescription }))] })] }), module.commands && module.commands.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "zap", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('moduleOverview.actions') })] }), _jsx(CardDescription, { children: t('moduleOverview.actionsDescription') })] }), _jsx(CardContent, { children: _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: module.commands.map((command) => (_jsxs("button", { onClick: () => navigate(command.route), className: "flex items-center gap-3 rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-accent hover:border-accent", children: [_jsx("div", { className: "flex-shrink-0 p-2 rounded-md bg-muted", children: _jsx(Icon, { name: command.icon || "file-text", className: "h-5 w-5" }) }), _jsx("span", { className: "font-medium", children: translateTitle(command.title, command.titleKey) })] }, command.id))) }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "info", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('moduleOverview.information') })] }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "folder", className: "h-4 w-4" }), t('moduleOverview.category')] }), _jsx("dd", { className: "text-sm font-medium", children: module.category })] }), _jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "activity", className: "h-4 w-4" }), t('moduleOverview.status')] }), _jsx("dd", { children: _jsx(Badge, { variant: statusVariant, className: "capitalize", children: module.status }) })] }), module.owners?.team && (_jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "users", className: "h-4 w-4" }), t('moduleOverview.owner')] }), _jsx("dd", { className: "text-sm font-medium", children: module.owners.team })] })), module.owners?.supportChannel && (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "message-circle", className: "h-4 w-4" }), t('moduleOverview.support')] }), _jsx("dd", { className: "text-sm font-medium", children: module.owners.supportChannel })] }))] }) })] })] }));
+    const moduleTitle = resolveLocalizedString(module.title, i18n.language);
+    const moduleDescription = resolveLocalizedString(module.description, i18n.language);
+    return (_jsxs("div", { className: "p-6 max-w-3xl mx-auto space-y-6", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex-shrink-0 p-3 rounded-lg bg-muted", children: _jsx(Icon, { name: module.icon || "package", className: "h-8 w-8" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx("h1", { className: "text-3xl font-bold", children: moduleTitle }), _jsx(Badge, { variant: statusVariant, className: "capitalize", children: module.status })] }), moduleDescription && (_jsx("p", { className: "text-muted-foreground", children: moduleDescription }))] })] }), module.commands && module.commands.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "zap", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('moduleOverview.actions') })] }), _jsx(CardDescription, { children: t('moduleOverview.actionsDescription') })] }), _jsx(CardContent, { children: _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: module.commands.map((command) => (_jsxs("button", { onClick: () => navigate(command.route), className: "flex items-center gap-3 rounded-lg border border-border bg-card p-4 text-left transition-colors hover:bg-accent hover:border-accent", children: [_jsx("div", { className: "flex-shrink-0 p-2 rounded-md bg-muted", children: _jsx(Icon, { name: command.icon || "file-text", className: "h-5 w-5" }) }), _jsx("span", { className: "font-medium", children: resolveLocalizedString(command.title, i18n.language) })] }, command.id))) }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "info", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('moduleOverview.information') })] }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "folder", className: "h-4 w-4" }), t('moduleOverview.category')] }), _jsx("dd", { className: "text-sm font-medium", children: module.category })] }), _jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "activity", className: "h-4 w-4" }), t('moduleOverview.status')] }), _jsx("dd", { children: _jsx(Badge, { variant: statusVariant, className: "capitalize", children: module.status }) })] }), module.owners?.team && (_jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "users", className: "h-4 w-4" }), t('moduleOverview.owner')] }), _jsx("dd", { className: "text-sm font-medium", children: module.owners.team })] })), module.owners?.supportChannel && (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsxs("dt", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [_jsx(Icon, { name: "message-circle", className: "h-4 w-4" }), t('moduleOverview.support')] }), _jsx("dd", { className: "text-sm font-medium", children: module.owners.supportChannel })] }))] }) })] })] }));
 }

package/dist/shell/components/ProfilePage.d.ts

@@ -1,2 +1 @@
 export declare function ProfilePage(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ProfilePage.d.ts.map

package/dist/shell/components/ProfilePage.js

@@ -26,5 +26,5 @@ export function ProfilePage() {
     const handlePinnedClick = (route) => {
         navigate(route);
     };
-    return (_jsxs("div", { className: "p-6 max-w-3xl mx-auto space-y-6", "data-testid": "profile-page", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-1", "data-testid": "profile-heading", children: t('profilePage.title') }), _jsx("p", { className: "text-muted-foreground", children: t('profilePage.userInfo') })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "user", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('profilePage.userInfo') })] }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex items-center gap-4 mb-6", children: [_jsx(Avatar, { className: "h-16 w-16", children: _jsx(AvatarFallback, { className: "text-2xl font-bold bg-primary text-primary-foreground", children: user?.displayName?.charAt(0).toUpperCase() || "U" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold", children: user?.displayName || "User" }), _jsx("p", { className: "text-muted-foreground", children: user?.email || "No email" })] })] }), _jsxs("dl", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.name') }), _jsx("dd", { "data-testid": "profile-display-name", className: `text-sm font-medium ${!user?.displayName ? "text-muted-foreground" : ""}`, children: user?.displayName || "N/A" })] }), _jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.email') }), _jsx("dd", { "data-testid": "profile-email", className: `text-sm font-medium ${!user?.email ? "text-muted-foreground" : ""}`, children: user?.email || "N/A" })] }), _jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.roles') }), _jsx("dd", { "data-testid": "profile-roles", children: _jsx(Badge, { variant: "secondary", children: "Admin" }) })] })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "pin", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('profilePage.pinnedPages') })] }), _jsx(CardDescription, { children: t('profilePage.pinnedPages') })] }), _jsx(CardContent, { children: pinnedItems.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground py-2", children: t('profilePage.noPinnedPages') })) : (_jsx("ul", { "data-testid": "pinned-pages-list", className: "space-y-1", children: pinnedItems.map((item) => (_jsx("li", { children: _jsxs("button", { "data-testid": `pinned-page-${item.commandId}`, onClick: () => handlePinnedClick(item.route), className: "w-full flex items-center gap-3 text-left px-3 py-2.5 rounded-md hover:bg-accent transition-colors", children: [_jsx(Icon, { name: item.commandIcon || item.moduleIcon || "file-text", className: "h-4 w-4 text-muted-foreground" }), _jsxs("span", { className: "text-sm", children: [item.moduleTitle, " ", _jsx("span", { className: "text-muted-foreground", children: "/" }), " ", item.commandTitle] })] }) }, `${item.moduleId}-${item.commandId}`))) })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "shield", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('profilePage.auditInfo') })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("span", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.userId') }), _jsx("span", { "data-testid": "profile-user-id", className: `text-sm font-mono px-2 py-1 rounded ${user?.id ? "bg-muted" : "text-muted-foreground"}`, children: user?.id || "N/A" })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('profilePage.auditInfo') })] })] })] }));
+    return (_jsxs("div", { className: "p-6 max-w-3xl mx-auto space-y-6", "data-testid": "profile-page", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-1", "data-testid": "profile-heading", children: t('profilePage.title') }), _jsx("p", { className: "text-muted-foreground", children: t('profilePage.userInfo') })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "user", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('profilePage.userInfo') })] }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex items-center gap-4 mb-6", children: [_jsx(Avatar, { className: "h-16 w-16", children: _jsx(AvatarFallback, { className: "text-2xl font-bold bg-primary text-primary-foreground", children: user?.displayName?.charAt(0).toUpperCase() || "U" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold", children: user?.displayName || "User" }), _jsx("p", { className: "text-muted-foreground", children: user?.email || "No email" })] })] }), _jsxs("dl", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.name') }), _jsx("dd", { "data-testid": "profile-display-name", className: `text-sm font-medium ${!user?.displayName ? "text-muted-foreground" : ""}`, children: user?.displayName || "N/A" })] }), _jsxs("div", { className: "flex items-center justify-between py-2 border-b border-border", children: [_jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.email') }), _jsx("dd", { "data-testid": "profile-email", className: `text-sm font-medium ${!user?.email ? "text-muted-foreground" : ""}`, children: user?.email || "N/A" })] }), _jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.roles') }), _jsx("dd", { "data-testid": "profile-roles", className: "flex flex-wrap gap-1 px-2", children: user?.roles && user.roles.length > 0 ? (user.roles.map((role) => (_jsx(Badge, { variant: "secondary", children: role }, role)))) : (_jsx(Badge, { variant: "outline", children: "No roles" })) })] })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "pin", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('profilePage.pinnedPages') })] }), _jsx(CardDescription, { children: t('profilePage.pinnedPages') })] }), _jsx(CardContent, { children: pinnedItems.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground py-2", children: t('profilePage.noPinnedPages') })) : (_jsx("ul", { "data-testid": "pinned-pages-list", className: "space-y-1", children: pinnedItems.map((item) => (_jsx("li", { children: _jsxs("button", { "data-testid": `pinned-page-${item.commandId}`, onClick: () => handlePinnedClick(item.route), className: "w-full flex items-center gap-3 text-left px-3 py-2.5 rounded-md hover:bg-accent transition-colors", children: [_jsx(Icon, { name: item.commandIcon || item.moduleIcon || "file-text", className: "h-4 w-4 text-muted-foreground" }), _jsxs("span", { className: "text-sm", children: [item.moduleTitle, " ", _jsx("span", { className: "text-muted-foreground", children: "/" }), " ", item.commandTitle] })] }) }, `${item.moduleId}-${item.commandId}`))) })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "shield", className: "h-5 w-5 text-muted-foreground" }), _jsx(CardTitle, { className: "text-lg", children: t('profilePage.auditInfo') })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("span", { className: "text-sm font-medium text-muted-foreground", children: t('profilePage.userId') }), _jsx("span", { "data-testid": "profile-user-id", className: `text-sm font-mono px-2 py-1 rounded ${user?.id ? "bg-muted" : "text-muted-foreground"}`, children: user?.id || "N/A" })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('profilePage.auditInfo') })] })] })] }));
 }

package/dist/shell/components/RegistryPage.d.ts

@@ -5,4 +5,3 @@ interface RegistryPageProps {
 }
 export declare function RegistryPage({ apiUrl, registryClient }: RegistryPageProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=RegistryPage.d.ts.map