@open-mercato/ui 0.4.5-develop-6bdcebbece → 0.4.5-develop-986cfd8c37

package/dist/backend/AppShell.js

@@ -17,18 +17,176 @@ import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
 import { slugifySidebarId } from "@open-mercato/shared/modules/navigation/sidebarPreferences";
 import { InjectionSpot } from "./injection/InjectionSpot.js";
 import { LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID } from "./injection/mutationEvents.js";
+import { mergeMenuItems } from "./injection/mergeMenuItems.js";
+import { useInjectedMenuItems } from "./injection/useInjectedMenuItems.js";
+import { resolveInjectedIcon } from "./injection/resolveInjectedIcon.js";
+import { useEventBridge } from "./injection/eventBridge.js";
+import { SseEventIndicator } from "./injection/SseEventIndicator.js";
 import {
   BACKEND_LAYOUT_FOOTER_INJECTION_SPOT_ID,
   BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID,
   BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID,
   BACKEND_SIDEBAR_FOOTER_INJECTION_SPOT_ID,
-  BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID
+  BACKEND_SIDEBAR_TOP_INJECTION_SPOT_ID,
+  BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID,
+  BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID,
+  BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID,
+  GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID,
+  GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID
 } from "./injection/spotIds.js";
+function convertInjectedMenuItemToSidebarItem(item, title) {
+  if (!item.href) return null;
+  return {
+    id: item.id,
+    href: item.href,
+    title,
+    defaultTitle: title,
+    icon: resolveInjectedIcon(item.icon) ?? void 0,
+    enabled: true,
+    hidden: false,
+    pageContext: "main"
+  };
+}
+function resolveInjectedMenuLabel(item, t) {
+  if (item.labelKey && item.label) return t(item.labelKey, item.label);
+  if (item.labelKey) return t(item.labelKey, item.id);
+  if (item.label && item.label.includes(".")) return t(item.label, item.id);
+  return item.label ?? item.id;
+}
+function mergeSidebarItemsWithInjected(items, injectedItems, t) {
+  if (injectedItems.length === 0) return items;
+  const builtInById = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    builtInById.set(item.id ?? item.href, item);
+  }
+  const merged = mergeMenuItems(
+    items.map((item) => ({
+      id: item.id ?? item.href
+    })),
+    injectedItems
+  );
+  const result = [];
+  for (const entry of merged) {
+    if (entry.source === "built-in") {
+      const original = builtInById.get(entry.id);
+      if (original) result.push(original);
+      continue;
+    }
+    const translatedLabel = resolveInjectedMenuLabel(
+      { id: entry.id, label: entry.label, labelKey: entry.labelKey },
+      t
+    );
+    const converted = convertInjectedMenuItemToSidebarItem(
+      {
+        id: entry.id,
+        label: translatedLabel,
+        icon: entry.icon,
+        href: entry.href
+      },
+      translatedLabel
+    );
+    if (converted) result.push(converted);
+  }
+  return result;
+}
+function mergeSidebarGroupsWithInjected(groups, injectedItems, t) {
+  if (injectedItems.length === 0) return groups;
+  const injectedByGroup = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const item of injectedItems) {
+    if (item.groupId && item.groupId.trim().length > 0) {
+      const groupItems = injectedByGroup.get(item.groupId) ?? [];
+      groupItems.push(item);
+      injectedByGroup.set(item.groupId, groupItems);
+      continue;
+    }
+    ungrouped.push(item);
+  }
+  const nextGroups = groups.map((group, index) => {
+    const groupId = group.id || resolveGroupKey(group);
+    const groupInjected = [
+      ...injectedByGroup.get(groupId) ?? [],
+      ...index === 0 ? ungrouped : []
+    ];
+    return {
+      ...group,
+      items: mergeSidebarItemsWithInjected(group.items, groupInjected, t)
+    };
+  });
+  const existingIds = new Set(nextGroups.map((group) => group.id || resolveGroupKey(group)));
+  for (const [groupId, items] of injectedByGroup.entries()) {
+    if (existingIds.has(groupId)) continue;
+    const first = items[0];
+    const label = first.groupLabelKey ? t(first.groupLabelKey, first.groupLabel ?? groupId) : first.groupLabel ?? groupId;
+    const groupItems = mergeSidebarItemsWithInjected([], items, t);
+    if (groupItems.length === 0) continue;
+    nextGroups.push({
+      id: groupId,
+      name: label,
+      defaultName: label,
+      items: groupItems
+    });
+  }
+  return nextGroups;
+}
+function mergeSectionGroupsWithInjected(sections, injectedItems, t) {
+  if (injectedItems.length === 0) return sections;
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const item of injectedItems) {
+    const groupId = item.groupId && item.groupId.trim().length > 0 ? item.groupId : "injected";
+    const bucket = byGroup.get(groupId) ?? [];
+    bucket.push(item);
+    byGroup.set(groupId, bucket);
+  }
+  const nextSections = sections.map((section) => {
+    const sectionItems = byGroup.get(section.id) ?? [];
+    if (sectionItems.length === 0) return section;
+    const mergedItems = mergeMenuItems(
+      section.items.map((item) => ({ id: item.id, item })),
+      sectionItems
+    ).flatMap((item) => {
+      if (item.source === "built-in") {
+        const original = section.items.find((entry) => entry.id === item.id);
+        return original ? [original] : [];
+      }
+      if (!item.href) return [];
+      const label = resolveInjectedMenuLabel(item, t);
+      return [{
+        id: item.id,
+        label,
+        href: item.href
+      }];
+    });
+    return {
+      ...section,
+      items: mergedItems
+    };
+  });
+  for (const [sectionId, sectionItems] of byGroup.entries()) {
+    const exists = nextSections.some((section) => section.id === sectionId);
+    if (exists) continue;
+    const first = sectionItems[0];
+    const label = first.groupLabelKey ? t(first.groupLabelKey, first.groupLabel ?? sectionId) : first.groupLabel ?? sectionId;
+    const items = sectionItems.flatMap((item) => {
+      if (!item.href) return [];
+      const itemLabel = resolveInjectedMenuLabel(item, t);
+      return [{ id: item.id, label: itemLabel, href: item.href }];
+    });
+    if (items.length === 0) continue;
+    nextSections.push({ id: sectionId, label, items });
+  }
+  return nextSections;
+}
 function resolveGroupKey(group) {
   if (group.id && group.id.length) return group.id;
   if (group.defaultName && group.defaultName.length) return slugifySidebarId(group.defaultName);
   return slugifySidebarId(group.name);
 }
+function resolveItemKey(item) {
+  const candidate = item.id?.trim();
+  if (candidate && candidate.length > 0) return candidate;
+  return item.href;
+}
 const HeaderContext = React.createContext(null);
 function ApplyBreadcrumb({ breadcrumb, title, titleKey }) {
   const ctx = React.useContext(HeaderContext);
@@ -79,6 +237,11 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
   const searchParams = useSearchParams();
   const t = useT();
   const locale = useLocale();
+  const { items: mainSidebarInjectedMenuItems } = useInjectedMenuItems("menu:sidebar:main");
+  const { items: settingsSidebarInjectedMenuItems } = useInjectedMenuItems("menu:sidebar:settings");
+  const { items: profileSidebarInjectedMenuItems } = useInjectedMenuItems("menu:sidebar:profile");
+  const { items: topbarInjectedMenuItems } = useInjectedMenuItems("menu:topbar:actions");
+  useEventBridge();
   const resolvedProductName = productName ?? t("appShell.productName");
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const [collapsed, setCollapsed] = React.useState(sidebarCollapsedDefault);
@@ -117,6 +280,10 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
     return profilePathPrefixes.some((prefix) => pathname.startsWith(prefix));
   }, [pathname, profilePathPrefixes]);
   const sidebarMode = isOnSettingsPath ? "settings" : isOnProfilePath ? "profile" : "main";
+  const mainNavGroupsWithInjected = React.useMemo(
+    () => mergeSidebarGroupsWithInjected(navGroups, mainSidebarInjectedMenuItems, t),
+    [mainSidebarInjectedMenuItems, navGroups, t]
+  );
   React.useEffect(() => {
     if (!mobileOpen || typeof document === "undefined") return;
     const prev = document.body.style.overflow;
@@ -181,7 +348,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
           responseItemLabels[trimmedKey] = value;
         }
       }
-      const responseHiddenItems = Array.isArray(rawSettings?.hiddenItems) ? rawSettings.hiddenItems.map((href) => typeof href === "string" ? href.trim() : "").filter((href) => href.length > 0) : [];
+      const responseHiddenItems = Array.isArray(rawSettings?.hiddenItems) ? rawSettings.hiddenItems.map((itemId) => typeof itemId === "string" ? itemId.trim() : "").filter((itemId) => itemId.length > 0) : [];
       const canManageRoles = data?.canApplyToRoles === true;
       setCanApplyToRoles(canManageRoles);
       if (canManageRoles) {
@@ -201,9 +368,9 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
       const order = mergeGroupOrder(responseOrder, currentIds);
       const { itemDefaults } = collectSidebarDefaults(baseSnapshot);
       const hiddenItemIds = {};
-      for (const href of responseHiddenItems) {
-        if (!itemDefaults.has(href)) continue;
-        hiddenItemIds[href] = true;
+      for (const itemId of responseHiddenItems) {
+        if (!itemDefaults.has(itemId)) continue;
+        hiddenItemIds[itemId] = true;
       }
       const draft = {
         order,
@@ -261,17 +428,17 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
         if (trimmed !== base) sanitizedGroupLabels[key] = trimmed;
       }
       const sanitizedItemLabels = {};
-      for (const [href, value] of Object.entries(customDraft.itemLabels)) {
+      for (const [itemId, value] of Object.entries(customDraft.itemLabels)) {
         const trimmed = value.trim();
-        const base = itemDefaults.get(href);
+        const base = itemDefaults.get(itemId);
         if (!trimmed || !base) continue;
-        if (trimmed !== base) sanitizedItemLabels[href] = trimmed;
+        if (trimmed !== base) sanitizedItemLabels[itemId] = trimmed;
       }
       const sanitizedHiddenItems = [];
-      for (const [href, hidden] of Object.entries(customDraft.hiddenItemIds)) {
+      for (const [itemId, hidden] of Object.entries(customDraft.hiddenItemIds)) {
         if (!hidden) continue;
-        if (!itemDefaults.has(href)) continue;
-        sanitizedHiddenItems.push(href);
+        if (!itemDefaults.has(itemId)) continue;
+        sanitizedHiddenItems.push(itemId);
       }
       const applyToRolesPayload = canApplyToRoles ? [...selectedRoleIds] : [];
       const clearRoleIdsPayload = canApplyToRoles ? availableRoleTargets.filter((role) => role.hasPreference && !selectedRoleIds.includes(role.id)).map((role) => role.id) : [];
@@ -342,19 +509,19 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
       return { ...draft, groupLabels: next };
     });
   }, [updateDraft]);
-  const setItemLabel = React.useCallback((href, value) => {
+  const setItemLabel = React.useCallback((itemId, value) => {
     updateDraft((draft) => {
       const next = { ...draft.itemLabels };
-      if (value.trim().length === 0) delete next[href];
-      else next[href] = value;
+      if (value.trim().length === 0) delete next[itemId];
+      else next[itemId] = value;
       return { ...draft, itemLabels: next };
     });
   }, [updateDraft]);
-  const setItemHidden = React.useCallback((href, hidden) => {
+  const setItemHidden = React.useCallback((itemId, hidden) => {
     updateDraft((draft) => {
       const next = { ...draft.hiddenItemIds };
-      if (hidden) next[href] = true;
-      else delete next[href];
+      if (hidden) next[itemId] = true;
+      else delete next[itemId];
       return { ...draft, hiddenItemIds: next };
     });
   }, [updateDraft]);
@@ -565,6 +732,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
                   className: `relative text-sm rounded inline-flex items-center ${base} ${isActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"}`,
                   style: spacingStyle,
                   title: compact ? label : void 0,
+                  "data-menu-item-id": item.id,
                   onClick: () => setMobileOpen(false),
                   children: [
                     isActive && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }),
@@ -599,16 +767,26 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
   }
   function renderSidebar(compact, hideHeader) {
     if (sidebarMode === "settings" && settingsSections && settingsSections.length > 0) {
-      return renderSectionSidebar(
+      const mergedSettingsSections = mergeSectionGroupsWithInjected(
         settingsSections,
+        settingsSidebarInjectedMenuItems,
+        t
+      );
+      return renderSectionSidebar(
+        mergedSettingsSections,
         settingsSectionTitle ?? t("backend.nav.settings", "Settings"),
         compact,
         hideHeader
       );
     }
     if (sidebarMode === "profile" && profileSections && profileSections.length > 0) {
-      return renderSectionSidebar(
+      const mergedProfileSections = mergeSectionGroupsWithInjected(
         profileSections,
+        profileSidebarInjectedMenuItems,
+        t
+      );
+      return renderSectionSidebar(
+        mergedProfileSections,
         profileSectionTitle ?? t("backend.nav.profile", "Profile"),
         compact,
         hideHeader
@@ -616,13 +794,13 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
     }
     const isMobileVariant = !!hideHeader;
     const shouldRenderSidebarInjectionSpots = !isMobileVariant;
-    const baseGroupsForDefaults = originalNavRef.current ?? navGroups;
+    const baseGroupsForDefaults = originalNavRef.current ?? mainNavGroupsWithInjected;
     const baseGroupMap = /* @__PURE__ */ new Map();
     for (const group of baseGroupsForDefaults) {
       baseGroupMap.set(resolveGroupKey(group), group);
     }
     const localeLabel = (locale || "").toUpperCase();
-    const orderedGroupIds = customDraft ? mergeGroupOrder(customDraft.order, Array.from(baseGroupMap.keys())) : navGroups.map((group) => resolveGroupKey(group));
+    const orderedGroupIds = customDraft ? mergeGroupOrder(customDraft.order, Array.from(baseGroupMap.keys())) : mainNavGroupsWithInjected.map((group) => resolveGroupKey(group));
     const lastVisibleGroupIndex = (() => {
       for (let idx = navGroups.length - 1; idx >= 0; idx -= 1) {
         if (navGroups[idx].items.some((item) => item.hidden !== true)) return idx;
@@ -632,10 +810,11 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
     const renderEditableItems = (baseItems, currentItems, depth = 0) => {
       if (!customDraft) return null;
       return baseItems.map((baseItem) => {
+        const itemKey = resolveItemKey(baseItem);
         const current = currentItems.find((item) => item.href === baseItem.href) ?? baseItem;
         const placeholder = baseItem.defaultTitle ?? baseItem.title;
-        const value = customDraft.itemLabels[baseItem.href] ?? "";
-        const hidden = customDraft.hiddenItemIds[baseItem.href] === true;
+        const value = customDraft.itemLabels[itemKey] ?? "";
+        const hidden = customDraft.hiddenItemIds[itemKey] === true;
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -650,7 +829,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
                     type: "checkbox",
                     className: "h-4 w-4 accent-foreground",
                     checked: !hidden,
-                    onChange: (event) => setItemHidden(baseItem.href, !event.target.checked),
+                    onChange: (event) => setItemHidden(itemKey, !event.target.checked),
                     disabled: savingPreferences,
                     "aria-label": t("appShell.sidebarCustomizationShowItem"),
                     title: t("appShell.sidebarCustomizationShowItem")
@@ -660,7 +839,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
                   "input",
                   {
                     value,
-                    onChange: (event) => setItemLabel(baseItem.href, event.target.value),
+                    onChange: (event) => setItemLabel(itemKey, event.target.value),
                     placeholder,
                     disabled: savingPreferences,
                     className: "h-8 flex-1 rounded border bg-background px-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-60"
@@ -670,7 +849,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
               baseItem.children && baseItem.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: renderEditableItems(baseItem.children, current.children ?? [], depth + 1) }) : null
             ]
           },
-          baseItem.href
+          itemKey
         );
       });
     };
@@ -810,7 +989,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
           if (isSettingsPath(item.href)) return false;
           return true;
         };
-        const mainGroups = navGroups.map((g) => ({
+        const mainGroups = mainNavGroupsWithInjected.map((g) => ({
           ...g,
           items: g.items.filter((item) => isMainItem(item) && item.hidden !== true)
         })).filter((g) => g.items.length > 0);
@@ -821,117 +1000,146 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
           return -1;
         })();
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: mainGroups.map((g, gi) => {
-            const groupId = resolveGroupKey(g);
-            const open = openGroups[groupId] !== false;
-            const visibleItems = g.items.filter((item) => item.hidden !== true);
-            if (visibleItems.length === 0) return null;
-            return /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "muted",
-                  onClick: () => toggleGroup(groupId),
-                  className: `w-full ${compact ? "px-0 justify-center" : "px-2 justify-between"} flex text-xs uppercase text-muted-foreground/90 py-2`,
-                  "aria-expanded": open,
-                  children: [
-                    !compact && /* @__PURE__ */ jsx("span", { children: g.name }),
-                    !compact && /* @__PURE__ */ jsx(Chevron, { open })
-                  ]
-                }
-              ),
-              open && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-1" : ""}`, children: visibleItems.map((i) => {
-                const childItems = (i.children ?? []).filter((child) => child.hidden !== true);
-                const showChildren = !!pathname && childItems.length > 0 && pathname.startsWith(i.href);
-                const hasActiveChild = !!(pathname && childItems.some((c) => pathname.startsWith(c.href)));
-                const isParentActive = pathname === i.href || showChildren && !hasActiveChild;
-                const base = compact ? "w-10 h-10 justify-center" : "px-2 py-1 gap-2";
-                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  /* @__PURE__ */ jsxs(
-                    Link,
-                    {
-                      href: i.href,
-                      className: `relative text-sm rounded inline-flex items-center ${base} ${isParentActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"} ${i.enabled === false ? "pointer-events-none opacity-50" : ""}`,
-                      "aria-disabled": i.enabled === false,
-                      title: compact ? i.title : void 0,
-                      onClick: () => setMobileOpen(false),
-                      children: [
-                        isParentActive ? /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }) : null,
-                        /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: i.icon ?? DefaultIcon }),
-                        !compact && /* @__PURE__ */ jsx("span", { children: i.title })
-                      ]
-                    }
-                  ),
-                  showChildren ? /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-4" : ""}`, children: childItems.map((c) => {
-                    const childActive = pathname?.startsWith(c.href);
-                    const childBase = compact ? "w-10 h-8 justify-center" : "px-2 py-1 gap-2";
-                    return /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-2", "data-testid": "sidebar", children: [
+            shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
+              InjectionSpot,
+              {
+                spotId: BACKEND_SIDEBAR_NAV_INJECTION_SPOT_ID,
+                context: injectionContext
+              }
+            ) : null,
+            mainGroups.map((g, gi) => {
+              const groupId = resolveGroupKey(g);
+              const open = openGroups[groupId] !== false;
+              const visibleItems = g.items.filter((item) => item.hidden !== true);
+              if (visibleItems.length === 0) return null;
+              return /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "muted",
+                    onClick: () => toggleGroup(groupId),
+                    className: `w-full ${compact ? "px-0 justify-center" : "px-2 justify-between"} flex text-xs uppercase text-muted-foreground/90 py-2`,
+                    "aria-expanded": open,
+                    children: [
+                      !compact && /* @__PURE__ */ jsx("span", { children: g.name }),
+                      !compact && /* @__PURE__ */ jsx(Chevron, { open })
+                    ]
+                  }
+                ),
+                open && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-1" : ""}`, children: visibleItems.map((i) => {
+                  const childItems = (i.children ?? []).filter((child) => child.hidden !== true);
+                  const showChildren = !!pathname && childItems.length > 0 && pathname.startsWith(i.href);
+                  const hasActiveChild = !!(pathname && childItems.some((c) => pathname.startsWith(c.href)));
+                  const isParentActive = pathname === i.href || showChildren && !hasActiveChild;
+                  const base = compact ? "w-10 h-10 justify-center" : "px-2 py-1 gap-2";
+                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    /* @__PURE__ */ jsxs(
                       Link,
                       {
-                        href: c.href,
-                        className: `relative text-sm rounded inline-flex items-center ${childBase} ${childActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"} ${c.enabled === false ? "pointer-events-none opacity-50" : ""}`,
-                        "aria-disabled": c.enabled === false,
-                        title: compact ? c.title : void 0,
+                        href: i.href,
+                        className: `relative text-sm rounded inline-flex items-center ${base} ${isParentActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"} ${i.enabled === false ? "pointer-events-none opacity-50" : ""}`,
+                        "aria-disabled": i.enabled === false,
+                        title: compact ? i.title : void 0,
+                        "data-menu-item-id": i.id ?? i.href,
                         onClick: () => setMobileOpen(false),
                         children: [
-                          childActive ? /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }) : null,
-                          /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: c.icon ?? (c.href.includes("/backend/entities/user/") && c.href.endsWith("/records") ? DataTableIcon : DefaultIcon) }),
-                          !compact && /* @__PURE__ */ jsx("span", { children: c.title })
+                          isParentActive ? /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }) : null,
+                          /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: i.icon ?? DefaultIcon }),
+                          !compact && /* @__PURE__ */ jsx("span", { children: i.title })
                         ]
-                      },
-                      c.href
-                    );
-                  }) }) : null
-                ] }, i.href);
-              }) }),
-              gi !== mainLastVisibleGroupIndex && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-dotted" })
-            ] }, groupId);
-          }) }),
-          /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t", children: /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href: "/backend/settings",
-              className: `relative text-sm rounded inline-flex items-center w-full ${compact ? "w-10 h-10 justify-center" : "px-2 py-1 gap-2"} ${pathname?.startsWith("/backend/settings") || pathname?.startsWith("/backend/config") || pathname?.startsWith("/backend/users") || pathname?.startsWith("/backend/roles") || pathname?.startsWith("/backend/api-keys") || pathname?.startsWith("/backend/entities") || pathname?.startsWith("/backend/query-indexes") || pathname?.startsWith("/backend/definitions") || pathname?.startsWith("/backend/instances") || pathname?.startsWith("/backend/tasks") || pathname?.startsWith("/backend/events") || pathname?.startsWith("/backend/rules") || pathname?.startsWith("/backend/sets") || pathname?.startsWith("/backend/logs") || pathname?.startsWith("/backend/directory") || pathname?.startsWith("/backend/feature-toggles") ? "bg-background border shadow-sm font-medium" : "hover:bg-accent hover:text-accent-foreground"}`,
-              title: compact ? t("backend.nav.settings", "Settings") : void 0,
-              onClick: () => setMobileOpen(false),
-              children: [
-                (pathname?.startsWith("/backend/settings") || pathname?.startsWith("/backend/config") || pathname?.startsWith("/backend/users") || pathname?.startsWith("/backend/roles") || pathname?.startsWith("/backend/api-keys") || pathname?.startsWith("/backend/entities") || pathname?.startsWith("/backend/query-indexes") || pathname?.startsWith("/backend/definitions") || pathname?.startsWith("/backend/instances") || pathname?.startsWith("/backend/tasks") || pathname?.startsWith("/backend/events") || pathname?.startsWith("/backend/rules") || pathname?.startsWith("/backend/sets") || pathname?.startsWith("/backend/logs") || pathname?.startsWith("/backend/directory") || pathname?.startsWith("/backend/feature-toggles")) && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }),
-                /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
-                ] }) }),
-                !compact && /* @__PURE__ */ jsx("span", { children: t("backend.nav.settings", "Settings") })
-              ]
-            }
-          ) })
+                      }
+                    ),
+                    showChildren ? /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-4" : ""}`, children: childItems.map((c) => {
+                      const childActive = pathname?.startsWith(c.href);
+                      const childBase = compact ? "w-10 h-8 justify-center" : "px-2 py-1 gap-2";
+                      return /* @__PURE__ */ jsxs(
+                        Link,
+                        {
+                          href: c.href,
+                          className: `relative text-sm rounded inline-flex items-center ${childBase} ${childActive ? "bg-background border shadow-sm" : "hover:bg-accent hover:text-accent-foreground"} ${c.enabled === false ? "pointer-events-none opacity-50" : ""}`,
+                          "aria-disabled": c.enabled === false,
+                          title: compact ? c.title : void 0,
+                          "data-menu-item-id": c.id ?? c.href,
+                          onClick: () => setMobileOpen(false),
+                          children: [
+                            childActive ? /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }) : null,
+                            /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: c.icon ?? (c.href.includes("/backend/entities/user/") && c.href.endsWith("/records") ? DataTableIcon : DefaultIcon) }),
+                            !compact && /* @__PURE__ */ jsx("span", { children: c.title })
+                          ]
+                        },
+                        c.href
+                      );
+                    }) }) : null
+                  ] }, i.href);
+                }) }),
+                gi !== mainLastVisibleGroupIndex && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-dotted" })
+              ] }, groupId);
+            })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t", children: [
+            shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
+              InjectionSpot,
+              {
+                spotId: BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID,
+                context: injectionContext
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: "/backend/settings",
+                className: `relative text-sm rounded inline-flex items-center w-full ${compact ? "w-10 h-10 justify-center" : "px-2 py-1 gap-2"} ${pathname?.startsWith("/backend/settings") || pathname?.startsWith("/backend/config") || pathname?.startsWith("/backend/users") || pathname?.startsWith("/backend/roles") || pathname?.startsWith("/backend/api-keys") || pathname?.startsWith("/backend/entities") || pathname?.startsWith("/backend/query-indexes") || pathname?.startsWith("/backend/definitions") || pathname?.startsWith("/backend/instances") || pathname?.startsWith("/backend/tasks") || pathname?.startsWith("/backend/events") || pathname?.startsWith("/backend/rules") || pathname?.startsWith("/backend/sets") || pathname?.startsWith("/backend/logs") || pathname?.startsWith("/backend/directory") || pathname?.startsWith("/backend/feature-toggles") ? "bg-background border shadow-sm font-medium" : "hover:bg-accent hover:text-accent-foreground"}`,
+                title: compact ? t("backend.nav.settings", "Settings") : void 0,
+                onClick: () => setMobileOpen(false),
+                children: [
+                  (pathname?.startsWith("/backend/settings") || pathname?.startsWith("/backend/config") || pathname?.startsWith("/backend/users") || pathname?.startsWith("/backend/roles") || pathname?.startsWith("/backend/api-keys") || pathname?.startsWith("/backend/entities") || pathname?.startsWith("/backend/query-indexes") || pathname?.startsWith("/backend/definitions") || pathname?.startsWith("/backend/instances") || pathname?.startsWith("/backend/tasks") || pathname?.startsWith("/backend/events") || pathname?.startsWith("/backend/rules") || pathname?.startsWith("/backend/sets") || pathname?.startsWith("/backend/logs") || pathname?.startsWith("/backend/directory") || pathname?.startsWith("/backend/feature-toggles")) && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded bg-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                    /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+                  ] }) }),
+                  !compact && /* @__PURE__ */ jsx("span", { children: t("backend.nav.settings", "Settings") })
+                ]
+              }
+            )
+          ] })
         ] });
       })() }),
-      !customizing && /* @__PURE__ */ jsx(Fragment, { children: compact || isMobileVariant ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          variant: "outline",
-          size: "lg",
-          className: "mt-auto",
-          onClick: startCustomization,
-          disabled: loadingPreferences,
-          "aria-label": t("appShell.customizeSidebar"),
-          children: CustomizeIcon
-        }
-      ) : /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "default",
-          className: "mt-auto",
-          onClick: startCustomization,
-          disabled: loadingPreferences,
-          "aria-label": t("appShell.customizeSidebar"),
-          children: [
-            CustomizeIcon,
-            loadingPreferences ? t("appShell.sidebarCustomizationLoading") : t("appShell.customizeSidebar")
-          ]
-        }
-      ) }),
+      !customizing && /* @__PURE__ */ jsxs(Fragment, { children: [
+        shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
+          InjectionSpot,
+          {
+            spotId: GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
+            context: injectionContext
+          }
+        ) : null,
+        compact || isMobileVariant ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "outline",
+            size: "lg",
+            className: "mt-auto",
+            onClick: startCustomization,
+            disabled: loadingPreferences,
+            "aria-label": t("appShell.customizeSidebar"),
+            children: CustomizeIcon
+          }
+        ) : /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "default",
+            className: "mt-auto",
+            onClick: startCustomization,
+            disabled: loadingPreferences,
+            "aria-label": t("appShell.customizeSidebar"),
+            children: [
+              CustomizeIcon,
+              loadingPreferences ? t("appShell.sidebarCustomizationLoading") : t("appShell.customizeSidebar")
+            ]
+          }
+        )
+      ] }),
       shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
         InjectionSpot,
         {
@@ -946,6 +1154,37 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
     setBreadcrumb: setHeaderBreadcrumb,
     setTitle: setHeaderTitle
   }), []);
+  const renderedTopbarInjectedActions = React.useMemo(
+    () => topbarInjectedMenuItems.map((item) => {
+      const label = resolveInjectedMenuLabel(item, t);
+      if (item.href) {
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: item.href,
+            className: "inline-flex items-center rounded border px-2 py-1 text-xs hover:bg-accent hover:text-accent-foreground",
+            "data-menu-item-id": item.id,
+            children: label
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "h-7 text-xs",
+          "data-menu-item-id": item.id,
+          onClick: () => item.onClick?.(),
+          children: label
+        },
+        item.id
+      );
+    }),
+    [t, topbarInjectedMenuItems]
+  );
   return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: headerCtxValue, children: /* @__PURE__ */ jsxs("div", { className: `min-h-svh lg:grid ${gridColsClass}`, children: [
     /* @__PURE__ */ jsx("aside", { className: `${asideClassesBase} ${effectiveCollapsed ? "px-2" : "px-3"} hidden lg:block`, style: { width: asideWidth }, children: renderSidebar(effectiveCollapsed) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col min-w-0", children: [
@@ -990,12 +1229,30 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
             }) });
           })()
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 md:gap-2 text-sm shrink-0", children: rightHeaderSlot ? rightHeaderSlot : /* @__PURE__ */ jsx("span", { className: "opacity-80", children: email || t("appShell.userFallback") }) })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-2 text-sm shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            InjectionSpot,
+            {
+              spotId: GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID,
+              context: injectionContext
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InjectionSpot,
+            {
+              spotId: BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID,
+              context: injectionContext
+            }
+          ),
+          renderedTopbarInjectedActions,
+          rightHeaderSlot ? rightHeaderSlot : /* @__PURE__ */ jsx("span", { className: "opacity-80", children: email || t("appShell.userFallback") })
+        ] })
       ] }),
       /* @__PURE__ */ jsx(ProgressTopBar, { t, className: "sticky top-0 z-10" }),
       /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 lg:p-6", children: [
         /* @__PURE__ */ jsx(InjectionSpot, { spotId: BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID, context: injectionContext }),
         /* @__PURE__ */ jsx(FlashMessages, {}),
+        /* @__PURE__ */ jsx(SseEventIndicator, {}),
         /* @__PURE__ */ jsx(PartialIndexBanner, {}),
         /* @__PURE__ */ jsx(UpgradeActionBanner, {}),
         /* @__PURE__ */ jsx(LastOperationBanner, {}),
@@ -1037,6 +1294,7 @@ function AppShell({ productName, email, groups, rightHeaderSlot, children, sideb
 }
 AppShell.cloneGroups = function cloneGroups(groups) {
   const cloneItem = (item) => ({
+    id: item.id,
     href: item.href,
     title: item.title,
     defaultTitle: item.defaultTitle,
@@ -1078,10 +1336,11 @@ function applyCustomizationDraft(baseGroups, draft) {
   return result;
 }
 function applyItemDraft(item, draft) {
+  const itemKey = resolveItemKey(item);
   const baseTitle = item.defaultTitle ?? item.title;
-  const override = draft.itemLabels[item.href]?.trim();
+  const override = draft.itemLabels[itemKey]?.trim();
   const children = item.children ? item.children.map((child) => applyItemDraft(child, draft)) : void 0;
-  const hidden = draft.hiddenItemIds[item.href] === true;
+  const hidden = draft.hiddenItemIds[itemKey] === true;
   return {
     ...item,
     title: override && override.length > 0 ? override : baseTitle,
@@ -1110,7 +1369,9 @@ function collectSidebarDefaults(groups) {
   const itemDefaults = /* @__PURE__ */ new Map();
   const visitItems = (items) => {
     for (const item of items) {
+      const key = resolveItemKey(item);
       const baseTitle = item.defaultTitle ?? item.title;
+      itemDefaults.set(key, baseTitle);
       itemDefaults.set(item.href, baseTitle);
       if (item.children && item.children.length > 0) visitItems(item.children);
     }