@deenruv/admin-dashboard 1.0.17-dev.27 → 1.0.17-dev.29

package/dist/components/Menu/Breadcrumbs.js

@@ -0,0 +1,23 @@
+const normalizePath = (path) => `/${path.split('?')[0].split('#')[0].split('/').filter(Boolean).join('/')}`;
+export const buildMenuBreadcrumbs = ({ pathname, groups, links, extensions, fallbackLabels, }) => {
+    const normalizedPath = normalizePath(pathname);
+    const matchingLink = links.find((link) => normalizePath(link.href) === normalizedPath);
+    if (matchingLink?.permitted) {
+        const matchingGroup = groups.find((group) => group.id === matchingLink.groupId && group.permitted);
+        return [
+            ...(extensions.permitted
+                ? [{ label: extensions.label, href: normalizePath(extensions.href), current: false }]
+                : []),
+            ...(matchingGroup ? [{ label: matchingGroup.label, current: false }] : []),
+            { label: matchingLink.label, current: true },
+        ];
+    }
+    const segments = normalizedPath.split('/').filter(Boolean);
+    const fallbackCrumbs = segments
+        .map((segment, index) => ({ label: fallbackLabels[index] ?? segment }))
+        .filter((crumb) => crumb.label !== '');
+    return fallbackCrumbs.map((crumb, index) => ({
+        ...crumb,
+        current: index === fallbackCrumbs.length - 1,
+    }));
+};

package/dist/components/Menu/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { NavLink, useMatches, useNavigate } from 'react-router';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator, buildURL, Button, cn, dashToCamelCase, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ScrollArea, Sheet, SheetContent, SheetDescription, SheetTitle, TooltipProvider, Routes, useGlobalSearch, usePluginStore, useServer, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, cn, dashToCamelCase, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ScrollArea, Sheet, SheetContent, SheetDescription, SheetTitle, TooltipProvider, Routes, useGlobalSearch, usePluginStore, useServer, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
 import { MenuIcon, Moon, PanelLeftClose, PanelLeftOpen, SearchIcon, Slash, Sun, SunMoon } from 'lucide-react';
-import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
+import { adminNavigationGroups, canAccessAdminItem, useAdminAccess } from "../../access/index.js";
 import { ChannelSwitcher } from './ChannelSwitcher.js';
+import { buildMenuBreadcrumbs } from './Breadcrumbs.js';
 import { LanguagesDropdown } from './LanguagesDropdown.js';
 import { Notifications } from './Notifications.js';
 import { SidebarContent } from './SidebarContent.js';
@@ -13,11 +14,12 @@ import { TopbarOverflow } from './TopbarOverflow.js';
 const removableCrumbs = ['draft', 'admin-ui'];
 export const Menu = ({ children }) => {
     const { t } = useTranslation('common');
+    const { t: pluginTranslation } = useTranslation();
     const navigate = useNavigate();
     const matches = useMatches();
     const openGlobalSearch = useGlobalSearch((state) => state.open);
-    const { topNavigationComponents } = usePluginStore();
-    const { defaultRoute } = useAdminAccess();
+    const { navMenuData, topNavigationComponents } = usePluginStore();
+    const { defaultRoute, routes } = useAdminAccess();
     const userPermissions = useServer((state) => state.userPermissions);
     const { theme, setTheme } = useSettings();
     const showChannelPicker = window.__DEENRUV_SETTINGS__.ui?.showChannelPicker !== false;
@@ -26,20 +28,51 @@ export const Menu = ({ children }) => {
     const defaultRoutePath = defaultRoute?.path || Routes.dashboard;
     const defaultRouteMenuKey = defaultRoute?.nav?.menuKey || defaultRoute?.search?.menuKey || 'dashboard';
     const allowedTopNavigationComponents = topNavigationComponents?.filter((entry) => canAccessAdminItem({ item: entry.access, userPermissions }));
-    const crumbs = useMemo(() => matches
-        .filter((match) => !!match.pathname)
-        .map((match) => match.pathname)
-        .flatMap((path) => path.split('/'))
-        .filter(Boolean)
-        .filter((crumb) => !removableCrumbs.includes(crumb)), [matches]);
+    const pathname = matches.at(-1)?.pathname || '';
+    const crumbSegments = pathname.split('/').filter(Boolean);
+    const pluginT = (translation) => {
+        const [namespace = '', ...keyParts] = translation.split('.');
+        return pluginTranslation(keyParts.join('.'), { ns: namespace });
+    };
+    const crumbs = useMemo(() => {
+        const groups = [
+            ...adminNavigationGroups.map((group) => ({
+                id: group.id,
+                label: t(`menuGroups.${group.labelKey}`),
+                permitted: true,
+            })),
+            ...navMenuData.groups.map((group) => ({
+                id: group.id,
+                label: pluginT(group.labelId),
+                permitted: canAccessAdminItem({ item: group.access, userPermissions }),
+            })),
+        ];
+        const links = navMenuData.links.map((link) => ({
+            href: link.href,
+            groupId: link.groupId,
+            label: pluginT(link.labelId),
+            permitted: canAccessAdminItem({ item: link.access, userPermissions }),
+        }));
+        const extensionsRoute = routes.find((route) => route.id === 'extensions');
+        return buildMenuBreadcrumbs({
+            pathname,
+            groups,
+            links,
+            extensions: {
+                label: t('menu.extensions'),
+                href: extensionsRoute?.path || '/admin-ui/extensions',
+                permitted: canAccessAdminItem({ item: extensionsRoute, userPermissions }),
+            },
+            fallbackLabels: crumbSegments.map((crumb) => removableCrumbs.includes(crumb) ? '' : t(`menu.${dashToCamelCase(crumb)}`, { defaultValue: crumb })),
+        });
+    }, [navMenuData.groups, navMenuData.links, pathname, pluginTranslation, routes, t, userPermissions]);
     const navigateHome = () => navigate(defaultRoutePath, { viewTransition: true });
     return (_jsx(TooltipProvider, { delayDuration: 100, children: _jsxs("div", { className: "flex h-screen w-full overflow-hidden bg-[var(--sidebar-canvas)]", children: [_jsx("aside", { "data-collapsed": isCollapsed, className: cn('hidden h-full shrink-0 border-r border-[var(--sidebar-hairline)] bg-[var(--sidebar-canvas)] transition-[width] duration-300 ease-out motion-reduce:transition-none md:block', isCollapsed ? 'w-12' : 'w-64'), "aria-label": t('mainNavigation'), children: _jsx(SidebarContent, { isCollapsed: isCollapsed, manuallyOpenGroupIds: manuallyOpenGroupIds, mode: "desktop", onExpand: () => setIsCollapsed(false), onOpenGroupIdsChange: setManuallyOpenGroupIds, onNavigate: () => undefined, onNavigateHome: navigateHome }) }), _jsx(Sheet, { open: isMobileOpen, onOpenChange: setIsMobileOpen, children: _jsxs(SheetContent, { side: "left", className: "w-72 max-w-[calc(100vw-1rem)] border-[var(--sidebar-hairline)] bg-[var(--sidebar-canvas)] p-0 sm:max-w-72 [&>button]:rounded-[4px] [&>button]:text-[var(--sidebar-secondary)] [&>button]:focus:ring-[var(--sidebar-focus)] [&>button]:data-[state=open]:bg-[var(--sidebar-hover)]", children: [_jsx(SheetTitle, { className: "sr-only", children: t('mainNavigation') }), _jsx(SheetDescription, { className: "sr-only", children: t('mobileNavigationDescription') }), _jsx(SidebarContent, { isCollapsed: false, manuallyOpenGroupIds: manuallyOpenGroupIds, mode: "mobile", onExpand: () => undefined, onOpenGroupIdsChange: setManuallyOpenGroupIds, onNavigate: () => setIsMobileOpen(false), onNavigateHome: () => {
                                     navigateHome();
                                     setIsMobileOpen(false);
                                 } })] }) }), _jsxs("main", { className: "flex min-w-0 flex-1 flex-col bg-[var(--sidebar-canvas)]", children: [_jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b border-[var(--sidebar-hairline)] bg-[var(--sidebar-canvas)] px-3 lg:h-[72px] lg:px-5", children: [_jsx(Button, { variant: "outline", size: "icon", className: "size-9 shrink-0 md:hidden", onClick: () => setIsMobileOpen(true), "aria-label": t('openSidebar'), title: t('openSidebar'), children: _jsx(MenuIcon, { className: "size-4" }) }), _jsx(Button, { variant: "outline", size: "icon", className: "hidden size-9 shrink-0 md:inline-flex", onClick: toggleDesktop, "aria-label": isCollapsed ? t('expandSidebar') : t('collapseSidebar'), title: `${isCollapsed ? t('expandSidebar') : t('collapseSidebar')} (${t('sidebarShortcut')})`, children: isCollapsed ? _jsx(PanelLeftOpen, { className: "size-4" }) : _jsx(PanelLeftClose, { className: "size-4" }) }), _jsx("div", { className: "hidden min-w-0 flex-col items-start justify-center sm:flex", children: _jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { className: "flex-nowrap overflow-hidden", children: crumbs.length ? (crumbs.map((crumb, index) => {
-                                                const path = crumbs.slice(0, index + 1);
-                                                return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { className: "min-w-0", children: _jsx(NavLink, { to: buildURL(path), viewTransition: true, className: "truncate", children: _jsx("span", { className: "text-sm font-semibold tracking-tight text-foreground", children: index === 0 ? t(`menu.${dashToCamelCase(crumb)}`) : crumb }) }) }), index !== crumbs.length - 1 && (_jsx(BreadcrumbSeparator, { children: _jsx(Slash, { className: "text-muted-foreground" }) }))] }, `${crumb}-${index}`));
-                                            })) : (_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: defaultRoutePath, viewTransition: true, children: _jsx("span", { className: "text-lg font-semibold tracking-tight text-foreground", children: t(defaultRouteMenuKey === 'dashboard'
-                                                            ? 'dashboard'
-                                                            : `menu.${dashToCamelCase(defaultRouteMenuKey)}`) }) }) })) }) }) }), _jsxs("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-1.5", children: [_jsx(TopbarOverflow, { components: allowedTopNavigationComponents || [], showChannelPicker: showChannelPicker, showLanguagePicker: showLanguagePicker }), allowedTopNavigationComponents?.length ? (_jsx("div", { className: "hidden items-center gap-2 lg:flex", children: allowedTopNavigationComponents.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })) : null, showChannelPicker || showLanguagePicker ? (_jsxs("div", { className: "hidden items-center gap-1.5 lg:flex", children: [showLanguagePicker ? _jsx(LanguagesDropdown, {}) : null, showChannelPicker ? _jsx(ChannelSwitcher, { className: "min-w-44" }) : null] })) : null, _jsx(Button, { onClick: openGlobalSearch, variant: "outline", size: "icon", className: "relative size-9 shrink-0", "aria-label": t('openGlobalSearch'), title: t('openGlobalSearch'), children: _jsx(SearchIcon, { className: "size-4" }) }), _jsx(Notifications, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "relative size-9 shrink-0", children: [theme === 'light' ? (_jsx(Sun, { className: "size-[1.2rem]" })) : theme === 'dark' ? (_jsx(Moon, { className: "size-[1.2rem]" })) : (_jsx(SunMoon, { className: "size-[1.2rem]" })), _jsx("span", { className: "sr-only", children: t('toggleTheme') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme('light'), children: t('themeLight') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('dark'), children: t('themeDark') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('system'), children: t('themeSystem') })] })] })] })] }), _jsx(ScrollArea, { className: "relative min-h-0 flex-1 overflow-y-hidden bg-[var(--sidebar-canvas)]", children: children })] })] }) }));
+                                                return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { className: "min-w-0", children: crumb.current ? (_jsx(BreadcrumbPage, { className: "truncate text-sm font-semibold tracking-tight", children: crumb.label })) : crumb.href ? (_jsx(NavLink, { to: crumb.href, viewTransition: true, className: "truncate", children: _jsx("span", { className: "text-sm font-semibold tracking-tight text-foreground", children: crumb.label }) })) : (_jsx("span", { className: "truncate text-sm font-semibold tracking-tight text-muted-foreground", children: crumb.label })) }), index !== crumbs.length - 1 && (_jsx(BreadcrumbSeparator, { children: _jsx(Slash, { className: "text-muted-foreground" }) }))] }, `${crumb.label}-${index}`));
+                                            })) : (_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { className: "text-lg font-semibold tracking-tight", children: t(defaultRouteMenuKey === 'dashboard'
+                                                        ? 'dashboard'
+                                                        : `menu.${dashToCamelCase(defaultRouteMenuKey)}`) }) })) }) }) }), _jsxs("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-1.5", children: [_jsx(TopbarOverflow, { components: allowedTopNavigationComponents || [], showChannelPicker: showChannelPicker, showLanguagePicker: showLanguagePicker }), allowedTopNavigationComponents?.length ? (_jsx("div", { className: "hidden items-center gap-2 lg:flex", children: allowedTopNavigationComponents.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })) : null, showChannelPicker || showLanguagePicker ? (_jsxs("div", { className: "hidden items-center gap-1.5 lg:flex", children: [showLanguagePicker ? _jsx(LanguagesDropdown, {}) : null, showChannelPicker ? _jsx(ChannelSwitcher, { className: "min-w-44" }) : null] })) : null, _jsx(Button, { onClick: openGlobalSearch, variant: "outline", size: "icon", className: "relative size-9 shrink-0", "aria-label": t('openGlobalSearch'), title: t('openGlobalSearch'), children: _jsx(SearchIcon, { className: "size-4" }) }), _jsx(Notifications, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "relative size-9 shrink-0", children: [theme === 'light' ? (_jsx(Sun, { className: "size-[1.2rem]" })) : theme === 'dark' ? (_jsx(Moon, { className: "size-[1.2rem]" })) : (_jsx(SunMoon, { className: "size-[1.2rem]" })), _jsx("span", { className: "sr-only", children: t('toggleTheme') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme('light'), children: t('themeLight') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('dark'), children: t('themeDark') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('system'), children: t('themeSystem') })] })] })] })] }), _jsx(ScrollArea, { className: "relative min-h-0 flex-1 overflow-y-hidden bg-[var(--sidebar-canvas)]", children: children })] })] }) }));
 };

package/dist/locales/en/common.json

@@ -972,13 +972,22 @@
     "asset": {
         "dialogTitle": "Select resource",
         "dialogButton": "Select resource",
+        "pickerDescription": "Choose one resource. Your selection is applied only after confirmation.",
+        "searchLabel": "Search resources by filename",
         "dialogSearchPlaceholder": "Searching for resources by name",
         "tags": "Filter by tag",
+        "removeTag": "Remove {{value}} filter",
         "perPageValue": "{{value}} per page",
         "confirmButton": "Add resource",
         "uploadButton": "Upload from disk",
         "cancel": "Cancel",
         "noImages": "No resources for a specific search",
+        "fetchError": "Resources could not be loaded. Try again.",
+        "loading": "Loading resources",
+        "selected": "Selected",
+        "resultRange": "{{from}}–{{to}} of {{total}}",
+        "paginationLabel": "Resource pages",
+        "actionsLabel": "Resource selection controls",
         "description": "Uploading and managing resources that can be used in content"
     },
     "product": {

package/dist/locales/pl/common.json

@@ -971,13 +971,22 @@
     "asset": {
         "dialogTitle": "Wybierz zasób",
         "dialogButton": "Wybierz zasób",
+        "pickerDescription": "Wybierz jeden zasób. Wybór zostanie zastosowany dopiero po potwierdzeniu.",
+        "searchLabel": "Szukaj zasobów według nazwy pliku",
         "dialogSearchPlaceholder": "Wyszukiwanie zasobów według nazwy",
         "tags": "Filtruj według tagu",
+        "removeTag": "Usuń filtr {{value}}",
         "perPageValue": "{{value}} na stronę",
         "confirmButton": "Dodaj zasób",
         "uploadButton": "Prześlij z dysku",
         "cancel": "Anuluj",
         "noImages": "Brak zasobów dla określonego wyszukiwania",
+        "fetchError": "Nie udało się załadować zasobów. Spróbuj ponownie.",
+        "loading": "Ładowanie zasobów",
+        "selected": "Wybrano",
+        "resultRange": "{{from}}–{{to}} z {{total}}",
+        "paginationLabel": "Strony zasobów",
+        "actionsLabel": "Elementy sterujące wyborem zasobu",
         "description": "Przesyłanie i zarządzanie zasobami, które mogą być używane w treści"
     },
     "product": {

package/dist/version.js

@@ -1 +1 @@
-export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.27';
+export const ADMIN_DASHBOARD_VERSION = '1.0.17-dev.29';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deenruv/admin-dashboard",
-  "version": "1.0.17-dev.27",
+  "version": "1.0.17-dev.29",
   "main": "dist/index.js",
   "style": "dist/index.css",
   "types": "dist/index.d.ts",
@@ -80,10 +80,10 @@
     "yup": "^1.7.1",
     "zod": "^4.4.3",
     "zustand": "^5.0.14",
-    "@deenruv/admin-dashboard": "1.0.17-dev.27",
-    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.27",
-    "@deenruv/admin-types": "1.0.17-dev.27",
-    "@deenruv/react-ui-devkit": "1.0.17-dev.27"
+    "@deenruv/admin-dashboard": "1.0.17-dev.29",
+    "@deenruv/admin-types": "1.0.17-dev.29",
+    "@deenruv/deenruv-examples-plugin": "1.0.17-dev.29",
+    "@deenruv/react-ui-devkit": "1.0.17-dev.29"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.20",