@open-mercato/ui 0.5.1-develop.2975.ccbadc8198 → 0.5.1-develop.2996.ce62fd491c

package/dist/backend/AppShell.js

@@ -4,20 +4,20 @@ import * as React from "react";
 import { createContext, useContext } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { ChevronUp, ChevronDown } from "lucide-react";
+import { ChevronDown, Search, X } from "lucide-react";
 import { Button } from "../primitives/button.js";
 import { IconButton } from "../primitives/icon-button.js";
-import { Checkbox } from "../primitives/checkbox.js";
+import { Input } from "../primitives/input.js";
 import { FlashMessages } from "./FlashMessages.js";
 import { QueryProvider } from "../theme/QueryProvider.js";
 import { usePathname, useSearchParams } from "next/navigation";
-import { apiCall } from "./utils/apiCall.js";
 import { LastOperationBanner } from "./operations/LastOperationBanner.js";
 import { ProgressTopBar } from "./progress/ProgressTopBar.js";
 import { UpgradeActionBanner } from "./upgrades/UpgradeActionBanner.js";
 import { PartialIndexBanner } from "./indexes/PartialIndexBanner.js";
 import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
 import { slugifySidebarId } from "@open-mercato/shared/modules/navigation/sidebarPreferences";
+import { cloneSidebarGroups } from "./sidebar/customization-helpers.js";
 import { InjectionSpot } from "./injection/InjectionSpot.js";
 import { LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID } from "./injection/mutationEvents.js";
 import { mergeMenuItems } from "./injection/mergeMenuItems.js";
@@ -266,7 +266,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
   const locale = useLocale();
   const { payload: chromePayload, isReady: isChromeReady, isLoading: isChromeLoading } = useBackendChrome();
   const resolvedGroups = React.useMemo(
-    () => AppShell.cloneGroups(chromePayload?.groups ?? groups),
+    () => cloneSidebarGroups(chromePayload?.groups ?? groups),
     [chromePayload?.groups, groups]
   );
   const resolvedSettingsSections = chromePayload?.settingsSections ?? settingsSections;
@@ -285,19 +285,44 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
   const [openGroups, setOpenGroups] = React.useState(
     () => Object.fromEntries(resolvedGroups.map((g) => [resolveGroupKey(g), true]))
   );
-  const [customizing, setCustomizing] = React.useState(false);
-  const [customDraft, setCustomDraft] = React.useState(null);
-  const [loadingPreferences, setLoadingPreferences] = React.useState(false);
-  const [savingPreferences, setSavingPreferences] = React.useState(false);
-  const [customizationError, setCustomizationError] = React.useState(null);
-  const [availableRoleTargets, setAvailableRoleTargets] = React.useState([]);
-  const [selectedRoleIds, setSelectedRoleIds] = React.useState([]);
-  const [canApplyToRoles, setCanApplyToRoles] = React.useState(false);
-  const originalNavRef = React.useRef(null);
   const [headerTitle, setHeaderTitle] = React.useState(currentTitle);
   const [headerBreadcrumb, setHeaderBreadcrumb] = React.useState(breadcrumb);
-  const effectiveCollapsed = customizing ? false : collapsed;
-  const expandedSidebarWidth = customizing ? "320px" : "240px";
+  const [navQuery, setNavQuery] = React.useState("");
+  const navQueryNorm = navQuery.trim().toLowerCase();
+  const navQueryActive = navQueryNorm.length > 0;
+  const matchesQuery = React.useCallback((label) => {
+    if (!navQueryActive) return true;
+    if (!label) return false;
+    return label.toLowerCase().includes(navQueryNorm);
+  }, [navQueryActive, navQueryNorm]);
+  const effectiveCollapsed = collapsed;
+  const expandedSidebarWidth = "240px";
+  const sidebarAsideRef = React.useRef(null);
+  const [sidebarScrollState, setSidebarScrollState] = React.useState("down");
+  React.useEffect(() => {
+    const aside = sidebarAsideRef.current;
+    if (!aside) return;
+    const target = aside.querySelector('[data-sidebar-scroll="true"]');
+    if (!target) return;
+    const update = () => {
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      const canScroll = scrollHeight > clientHeight + 1;
+      if (!canScroll) {
+        setSidebarScrollState("none");
+        return;
+      }
+      const atBottom = scrollTop + clientHeight >= scrollHeight - 8;
+      setSidebarScrollState(atBottom ? "up" : "down");
+    };
+    update();
+    target.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(target);
+    return () => {
+      target.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, [pathname, effectiveCollapsed]);
   const injectionContext = React.useMemo(
     () => ({
       path: pathname ?? "",
@@ -346,226 +371,8 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     }
   }, [resolvedGroups]);
   const toggleGroup = (groupId) => setOpenGroups((prev) => ({ ...prev, [groupId]: prev[groupId] === false }));
-  const updateDraft = React.useCallback((updater) => {
-    setCustomDraft((prev) => {
-      if (!prev) return prev;
-      const next = updater(prev);
-      if (originalNavRef.current) {
-        setNavGroups(applyCustomizationDraft(originalNavRef.current, next));
-      }
-      return next;
-    });
-  }, []);
-  const startCustomization = React.useCallback(async () => {
-    if (customizing || loadingPreferences) return;
-    setCustomizationError(null);
-    setLoadingPreferences(true);
-    try {
-      const baseSnapshot = filterMainSidebarGroups(AppShell.cloneGroups(navGroups));
-      const call = await apiCall("/api/auth/sidebar/preferences");
-      const data = call.ok ? call.result ?? null : null;
-      const rawSettings = data?.settings;
-      const responseOrder = Array.isArray(rawSettings?.groupOrder) ? rawSettings.groupOrder.map((id) => typeof id === "string" ? id.trim() : "").filter((id) => id.length > 0) : [];
-      const responseGroupLabels = {};
-      if (rawSettings?.groupLabels && typeof rawSettings.groupLabels === "object") {
-        for (const [key, value] of Object.entries(rawSettings.groupLabels)) {
-          if (typeof value !== "string") continue;
-          const trimmedKey = key.trim();
-          if (!trimmedKey) continue;
-          responseGroupLabels[trimmedKey] = value;
-        }
-      }
-      const responseItemLabels = {};
-      if (rawSettings?.itemLabels && typeof rawSettings.itemLabels === "object") {
-        for (const [key, value] of Object.entries(rawSettings.itemLabels)) {
-          if (typeof value !== "string") continue;
-          const trimmedKey = key.trim();
-          if (!trimmedKey) continue;
-          responseItemLabels[trimmedKey] = value;
-        }
-      }
-      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) {
-        const roles = Array.isArray(data?.roles) ? data.roles.filter((role) => typeof role?.id === "string" && typeof role?.name === "string") : [];
-        const mappedRoles = roles.map((role) => ({
-          id: role.id,
-          name: role.name,
-          hasPreference: role.hasPreference === true
-        }));
-        setAvailableRoleTargets(mappedRoles);
-        setSelectedRoleIds(mappedRoles.filter((role) => role.hasPreference).map((role) => role.id));
-      } else {
-        setAvailableRoleTargets([]);
-        setSelectedRoleIds([]);
-      }
-      const currentIds = baseSnapshot.map((group) => resolveGroupKey(group));
-      const order = mergeGroupOrder(responseOrder, currentIds);
-      const { itemDefaults } = collectSidebarDefaults(baseSnapshot);
-      const hiddenItemIds = {};
-      for (const itemId of responseHiddenItems) {
-        if (!itemDefaults.has(itemId)) continue;
-        hiddenItemIds[itemId] = true;
-      }
-      const draft = {
-        order,
-        groupLabels: { ...responseGroupLabels },
-        itemLabels: { ...responseItemLabels },
-        hiddenItemIds
-      };
-      originalNavRef.current = baseSnapshot;
-      setCustomDraft(draft);
-      setNavGroups(applyCustomizationDraft(baseSnapshot, draft));
-      setCustomizing(true);
-    } catch (error) {
-      console.error("Failed to load sidebar preferences", error);
-      setCustomizationError(t("appShell.sidebarCustomizationLoadError"));
-    } finally {
-      setLoadingPreferences(false);
-    }
-  }, [customizing, loadingPreferences, navGroups, t]);
-  const cancelCustomization = React.useCallback(() => {
-    setCustomizing(false);
-    setCustomDraft(null);
-    setCustomizationError(null);
-    setAvailableRoleTargets([]);
-    setSelectedRoleIds([]);
-    setCanApplyToRoles(false);
-    if (originalNavRef.current) {
-      setNavGroups(AppShell.cloneGroups(originalNavRef.current));
-    }
-    originalNavRef.current = null;
-  }, []);
-  const resetCustomization = React.useCallback(() => {
-    if (!originalNavRef.current) return;
-    const base = AppShell.cloneGroups(originalNavRef.current);
-    const order = base.map((group) => resolveGroupKey(group));
-    const draft = { order, groupLabels: {}, itemLabels: {}, hiddenItemIds: {} };
-    originalNavRef.current = base;
-    setCustomDraft(draft);
-    setNavGroups(applyCustomizationDraft(base, draft));
-    if (canApplyToRoles) {
-      setSelectedRoleIds(availableRoleTargets.filter((role) => role.hasPreference).map((role) => role.id));
-    }
-  }, [availableRoleTargets, canApplyToRoles]);
-  const saveCustomization = React.useCallback(async () => {
-    if (!customDraft) return;
-    setSavingPreferences(true);
-    setCustomizationError(null);
-    try {
-      const baseGroups = originalNavRef.current ?? filterMainSidebarGroups(AppShell.cloneGroups(navGroups));
-      const { groupDefaults, itemDefaults } = collectSidebarDefaults(baseGroups);
-      const sanitizedGroupLabels = {};
-      for (const [key, value] of Object.entries(customDraft.groupLabels)) {
-        const trimmed = value.trim();
-        const base = groupDefaults.get(key);
-        if (!trimmed || !base) continue;
-        if (trimmed !== base) sanitizedGroupLabels[key] = trimmed;
-      }
-      const sanitizedItemLabels = {};
-      for (const [itemId, value] of Object.entries(customDraft.itemLabels)) {
-        const trimmed = value.trim();
-        const base = itemDefaults.get(itemId);
-        if (!trimmed || !base) continue;
-        if (trimmed !== base) sanitizedItemLabels[itemId] = trimmed;
-      }
-      const sanitizedHiddenItems = [];
-      for (const [itemId, hidden] of Object.entries(customDraft.hiddenItemIds)) {
-        if (!hidden) continue;
-        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) : [];
-      const payload = {
-        groupOrder: customDraft.order,
-        groupLabels: sanitizedGroupLabels,
-        itemLabels: sanitizedItemLabels,
-        hiddenItems: sanitizedHiddenItems
-      };
-      if (canApplyToRoles) {
-        payload.applyToRoles = applyToRolesPayload;
-        payload.clearRoleIds = clearRoleIdsPayload;
-      }
-      const call = await apiCall("/api/auth/sidebar/preferences", {
-        method: "PUT",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      if (!call.ok) {
-        setCustomizationError(t("appShell.sidebarCustomizationSaveError"));
-        return;
-      }
-      const data = call.result ?? null;
-      if (data?.canApplyToRoles !== void 0) {
-        setCanApplyToRoles(data.canApplyToRoles === true);
-      }
-      if (Array.isArray(data?.roles)) {
-        const mappedRoles = data.roles.filter((role) => typeof role?.id === "string" && typeof role?.name === "string").map((role) => ({
-          id: role.id,
-          name: role.name,
-          hasPreference: role.hasPreference === true
-        }));
-        setAvailableRoleTargets(mappedRoles);
-        setSelectedRoleIds(mappedRoles.filter((role) => role.hasPreference).map((role) => role.id));
-      }
-      originalNavRef.current = applyCustomizationDraft(baseGroups, customDraft);
-      setNavGroups(AppShell.cloneGroups(originalNavRef.current));
-      setCustomizing(false);
-      setCustomDraft(null);
-      try {
-        window.dispatchEvent(new Event("om:refresh-sidebar"));
-      } catch {
-      }
-    } catch (error) {
-      console.error("Failed to save sidebar preferences", error);
-      setCustomizationError(t("appShell.sidebarCustomizationSaveError"));
-    } finally {
-      setSavingPreferences(false);
-    }
-  }, [customDraft, navGroups, t]);
-  const moveGroup = React.useCallback((groupId, offset) => {
-    updateDraft((draft) => {
-      const order = [...draft.order];
-      const index = order.indexOf(groupId);
-      if (index === -1) return draft;
-      const nextIndex = Math.max(0, Math.min(order.length - 1, index + offset));
-      if (nextIndex === index) return draft;
-      order.splice(index, 1);
-      order.splice(nextIndex, 0, groupId);
-      return { ...draft, order };
-    });
-  }, [updateDraft]);
-  const setGroupLabel = React.useCallback((groupId, value) => {
-    updateDraft((draft) => {
-      const next = { ...draft.groupLabels };
-      if (value.trim().length === 0) delete next[groupId];
-      else next[groupId] = value;
-      return { ...draft, groupLabels: next };
-    });
-  }, [updateDraft]);
-  const setItemLabel = React.useCallback((itemId, value) => {
-    updateDraft((draft) => {
-      const next = { ...draft.itemLabels };
-      if (value.trim().length === 0) delete next[itemId];
-      else next[itemId] = value;
-      return { ...draft, itemLabels: next };
-    });
-  }, [updateDraft]);
-  const setItemHidden = React.useCallback((itemId, hidden) => {
-    updateDraft((draft) => {
-      const next = { ...draft.hiddenItemIds };
-      if (hidden) next[itemId] = true;
-      else delete next[itemId];
-      return { ...draft, hiddenItemIds: next };
-    });
-  }, [updateDraft]);
-  const toggleRoleSelection = React.useCallback((roleId) => {
-    setSelectedRoleIds((prev) => prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId]);
-  }, []);
-  const asideWidth = effectiveCollapsed ? "72px" : expandedSidebarWidth;
-  const asideClassesBase = `border-r bg-background/80 py-4 min-h-svh`;
+  const asideWidth = effectiveCollapsed ? "80px" : expandedSidebarWidth;
+  const asideClassesBase = `border-r bg-background py-4`;
   React.useEffect(() => {
     try {
       localStorage.setItem("om:sidebarCollapsed", collapsed ? "1" : "0");
@@ -601,107 +408,138 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     }
   }, [pathname]);
   React.useEffect(() => {
-    if (customizing && customDraft && originalNavRef.current) {
-      originalNavRef.current = filterMainSidebarGroups(AppShell.cloneGroups(resolvedGroups));
-      setNavGroups(applyCustomizationDraft(originalNavRef.current, customDraft));
-      return;
-    }
-    setNavGroups(AppShell.cloneGroups(resolvedGroups));
-  }, [resolvedGroups, customizing, customDraft]);
+    setNavGroups(cloneSidebarGroups(resolvedGroups));
+  }, [resolvedGroups]);
   function renderSectionSidebar(sections, title, compact, hideHeader) {
     const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
     const lastVisibleIndex = sortedSections.length - 1;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-full gap-3", children: [
-      !hideHeader && /* @__PURE__ */ jsx("div", { className: `flex items-center ${compact ? "justify-center" : "justify-between"} mb-2`, children: /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2", "aria-label": t("appShell.goToDashboard"), children: [
-        /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 32, height: 32, className: "rounded m-4" }),
-        !compact && /* @__PURE__ */ jsx("div", { className: "text-m font-semibold", children: resolvedProductName })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto pr-1", children: [
-        /* @__PURE__ */ jsxs(
-          Link,
-          {
-            href: "/backend",
-            className: `flex items-center gap-2 ${compact ? "justify-center px-2" : "px-2"} py-1 text-sm text-muted-foreground hover:text-foreground transition-colors`,
-            "aria-label": t("backend.nav.backToMain", "Back"),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: BackArrowIcon }),
-              !compact && /* @__PURE__ */ jsx("span", { children: title })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: sortedSections.map((section, sectionIndex) => {
-          const visibleItems = section.items;
-          if (visibleItems.length === 0) return null;
-          const sortedItems = [...visibleItems].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-          const sectionLabel = section.labelKey ? t(section.labelKey, section.label) : section.label;
-          const sectionKey = `settings:${section.id}`;
-          const open = openGroups[sectionKey] !== false;
-          const sortSectionItems = (items = []) => [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-          const renderSectionItem = (item, depth = 0) => {
-            const label = item.labelKey ? t(item.labelKey, item.label) : item.label;
-            const childItems = sortSectionItems(item.children);
-            const isOnItemBranch = !!pathname && (pathname === item.href || pathname.startsWith(`${item.href}/`));
-            const hasActiveChild = !!(pathname && childItems.some((child) => pathname === child.href || pathname.startsWith(`${child.href}/`)));
-            const showChildren = childItems.length > 0 && isOnItemBranch;
-            const isActive = isOnItemBranch || hasActiveChild;
-            const base = compact ? "w-10 h-10 justify-center" : "py-1 gap-2";
-            const spacingStyle = !compact ? {
-              paddingLeft: `${8 + depth * 16}px`,
-              paddingRight: "8px"
-            } : void 0;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                Link,
-                {
-                  href: item.href,
-                  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" }),
-                    /* @__PURE__ */ jsx("span", { className: `flex items-center justify-center shrink-0 ${compact ? "" : "text-muted-foreground"}`, children: renderIcon(
-                      item.icon,
-                      item.iconName,
-                      item.iconMarkup,
-                      item.href.includes("/backend/entities/user/") && item.href.endsWith("/records") ? DataTableIcon : DefaultIcon
-                    ) }),
-                    !compact && /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
-                  ]
-                }
-              ),
-              showChildren ? childItems.map((child) => renderSectionItem(child, depth + 1)) : null
-            ] }, item.id);
-          };
-          return /* @__PURE__ */ jsxs("div", { children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
+      !hideHeader && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/backend",
+          className: `flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? "p-2 justify-center" : "p-3"}`,
+          "aria-label": t("appShell.goToDashboard"),
+          children: [
+            /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 40, height: 40, className: "rounded-full shrink-0" }),
+            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedProductName })
+          ]
+        }
+      ) }),
+      !compact && /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: navQuery,
+          onChange: (e) => setNavQuery(e.target.value),
+          placeholder: t("appShell.searchNavPlaceholder", "Search..."),
+          "aria-label": t("appShell.searchNavAria", "Search navigation"),
+          leftIcon: /* @__PURE__ */ jsx(Search, { "aria-hidden": true }),
+          rightIcon: navQueryActive ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              onClick: () => setNavQuery(""),
+              "aria-label": t("appShell.searchNavClear", "Clear search"),
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": true })
+            }
+          ) : void 0,
+          className: "mb-2"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { "data-sidebar-scroll": "true", className: `flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? "-ml-2 pl-2" : "-ml-3 pl-3"}`, children: /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: sortedSections.map((section, sectionIndex) => {
+        const matchesItemQuery = (item) => {
+          if (!navQueryActive) return true;
+          const label = item.labelKey ? t(item.labelKey, item.label) : item.label;
+          if (matchesQuery(label)) return true;
+          return Array.isArray(item.children) && item.children.some(matchesItemQuery);
+        };
+        const visibleItems = navQueryActive ? section.items.filter(matchesItemQuery) : section.items;
+        if (visibleItems.length === 0) return null;
+        const sortedItems = [...visibleItems].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        const sectionLabel = section.labelKey ? t(section.labelKey, section.label) : section.label;
+        const sectionKey = `settings:${section.id}`;
+        const open = openGroups[sectionKey] !== false;
+        const sortSectionItems = (items = []) => [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        const filterChildren = (children2) => {
+          if (!children2) return [];
+          if (!navQueryActive) return [...children2];
+          return children2.filter(matchesItemQuery);
+        };
+        const renderSectionItem = (item, depth = 0) => {
+          const label = item.labelKey ? t(item.labelKey, item.label) : item.label;
+          const childItems = sortSectionItems(filterChildren(item.children));
+          const isOnItemBranch = !!pathname && (pathname === item.href || pathname.startsWith(`${item.href}/`));
+          const hasActiveChild = !!(pathname && childItems.some((child) => pathname === child.href || pathname.startsWith(`${child.href}/`)));
+          const showChildren = childItems.length > 0 && (isOnItemBranch || navQueryActive);
+          const isActive = isOnItemBranch || hasActiveChild;
+          const base = compact ? "w-10 h-10 justify-center" : "w-full py-2 gap-2";
+          const spacingStyle = !compact ? {
+            paddingLeft: `${12 + depth * 16}px`,
+            paddingRight: "12px"
+          } : void 0;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
             /* @__PURE__ */ jsxs(
-              Button,
+              Link,
               {
-                variant: "muted",
-                onClick: () => toggleGroup(sectionKey),
-                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,
+                href: item.href,
+                className: `relative text-sm font-medium rounded-lg inline-flex items-center ${base} ${isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"}`,
+                style: spacingStyle,
+                title: compact ? label : void 0,
+                "data-menu-item-id": item.id,
+                onClick: () => setMobileOpen(false),
                 children: [
-                  !compact && /* @__PURE__ */ jsx("span", { children: sectionLabel }),
-                  !compact && /* @__PURE__ */ jsx(Chevron, { open })
+                  isActive && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }),
+                  /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: renderIcon(
+                    item.icon,
+                    item.iconName,
+                    item.iconMarkup,
+                    item.href.includes("/backend/entities/user/") && item.href.endsWith("/records") ? DataTableIcon : DefaultIcon
+                  ) }),
+                  !compact && /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
                 ]
               }
             ),
-            open && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1 ${!compact ? "pl-1" : ""}`, children: sortedItems.map((item) => renderSectionItem(item)) }),
-            sectionIndex !== lastVisibleIndex && /* @__PURE__ */ jsx("div", { className: "my-2 border-t border-dotted" })
-          ] }, section.id);
-        }) })
-      ] })
+            showChildren ? childItems.map((child) => renderSectionItem(child, depth + 1)) : null
+          ] }, item.id);
+        };
+        return /* @__PURE__ */ jsxs("div", { children: [
+          !compact && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "muted",
+              onClick: () => toggleGroup(sectionKey),
+              className: "w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1",
+              "aria-expanded": open,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: sectionLabel }),
+                /* @__PURE__ */ jsx(Chevron, { open })
+              ]
+            }
+          ),
+          (open || compact) && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1`, children: sortedItems.map((item) => renderSectionItem(item)) }),
+          sectionIndex !== lastVisibleIndex && /* @__PURE__ */ jsx("div", { className: `my-2 border-t ${compact ? "-ml-2 -mr-3" : "-ml-3 -mr-4"}` })
+        ] }, section.id);
+      }) }) })
     ] });
   }
   function renderSidebar(compact, hideHeader) {
     if (!isChromeReady && isChromeLoading && resolvedGroups.length === 0) {
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-full gap-3", "data-testid": "backend-chrome-loading", children: [
-        !hideHeader ? /* @__PURE__ */ jsx("div", { className: `flex items-center ${compact ? "justify-center" : "justify-between"} mb-2`, children: /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2", "aria-label": t("appShell.goToDashboard"), children: [
-          /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 32, height: 32, className: "rounded m-4" }),
-          !compact && /* @__PURE__ */ jsx("div", { className: "text-m font-semibold", children: resolvedProductName })
-        ] }) }) : null,
+        !hideHeader ? /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: "/backend",
+            className: `flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? "p-2 justify-center" : "p-3"}`,
+            "aria-label": t("appShell.goToDashboard"),
+            children: [
+              /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 40, height: 40, className: "rounded-full shrink-0" }),
+              !compact && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedProductName })
+            ]
+          }
+        ) }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 pr-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("div", { className: "h-8 rounded bg-muted/50" }),
@@ -749,180 +587,19 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     }
     const isMobileVariant = !!hideHeader;
     const shouldRenderSidebarInjectionSpots = !isMobileVariant;
-    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())) : 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;
-      }
-      return -1;
-    })();
-    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[itemKey] ?? "";
-        const hidden = customDraft.hiddenItemIds[itemKey] === true;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `flex flex-col gap-1 ${hidden ? "opacity-60" : ""}`,
-            style: depth ? { marginLeft: depth * 16 } : void 0,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: placeholder }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    checked: !hidden,
-                    onCheckedChange: (next) => setItemHidden(itemKey, next !== true),
-                    disabled: savingPreferences,
-                    "aria-label": t("appShell.sidebarCustomizationShowItem"),
-                    title: t("appShell.sidebarCustomizationShowItem")
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-                  }
-                )
-              ] }),
-              baseItem.children && baseItem.children.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: renderEditableItems(baseItem.children, current.children ?? [], depth + 1) }) : null
-            ]
-          },
-          itemKey
-        );
-      });
-    };
-    const customizationEditor = customizing ? customDraft ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded border border-dashed bg-muted/30 p-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: t("appShell.sidebarCustomizationHeading") }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: resetCustomization,
-              disabled: savingPreferences,
-              children: t("appShell.sidebarCustomizationReset")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: cancelCustomization,
-              disabled: savingPreferences,
-              children: t("appShell.sidebarCustomizationCancel")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "sm",
-              className: "bg-foreground text-background hover:bg-foreground/90",
-              onClick: saveCustomization,
-              disabled: savingPreferences,
-              children: savingPreferences ? t("appShell.sidebarCustomizationSaving") : t("appShell.sidebarCustomizationSave")
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("appShell.sidebarCustomizationHint", { locale: localeLabel }) }),
-      canApplyToRoles ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded border bg-background/80 p-3 shadow-sm", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: t("appShell.sidebarApplyToRolesTitle") }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("appShell.sidebarApplyToRolesDescription") })
-        ] }),
-        availableRoleTargets.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: availableRoleTargets.map((role) => {
-          const checked = selectedRoleIds.includes(role.id);
-          const willClear = role.hasPreference && !checked;
-          return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 rounded-md border bg-background px-2 py-1 text-sm shadow-sm cursor-pointer", children: [
-            /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked,
-                onCheckedChange: () => toggleRoleSelection(role.id),
-                disabled: savingPreferences
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: role.name }),
-            role.hasPreference ? /* @__PURE__ */ jsx("span", { className: `text-xs ${willClear ? "text-destructive" : "text-muted-foreground"}`, children: willClear ? t("appShell.sidebarRoleWillClear") : t("appShell.sidebarRoleHasPreset") }) : null
-          ] }, role.id);
-        }) }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("appShell.sidebarApplyToRolesEmpty") })
-      ] }) : null,
-      customizationError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: customizationError }) : null,
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: orderedGroupIds.map((groupId, index) => {
-        const baseGroup = baseGroupMap.get(groupId);
-        if (!baseGroup) return null;
-        const currentGroup = navGroups.find((group) => resolveGroupKey(group) === groupId) ?? baseGroup;
-        const placeholder = baseGroup.defaultName ?? baseGroup.name;
-        const value = customDraft.groupLabels[groupId] ?? "";
-        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded border bg-background p-3 shadow-sm", children: [
-          /* @__PURE__ */ jsxs("div", { className: `flex ${compact ? "flex-col gap-2" : "items-center gap-2"}`, children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("appShell.sidebarCustomizationGroupLabel") }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value,
-                  onChange: (event) => setGroupLabel(groupId, event.target.value),
-                  placeholder,
-                  disabled: savingPreferences,
-                  className: "mt-1 h-8 w-full rounded border bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 self-start", children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  className: "text-muted-foreground hover:text-foreground",
-                  onClick: () => moveGroup(groupId, -1),
-                  disabled: index === 0 || savingPreferences,
-                  "aria-label": t("appShell.sidebarCustomizationMoveUp"),
-                  children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  className: "text-muted-foreground hover:text-foreground",
-                  onClick: () => moveGroup(groupId, 1),
-                  disabled: index === orderedGroupIds.length - 1 || savingPreferences,
-                  "aria-label": t("appShell.sidebarCustomizationMoveDown"),
-                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderEditableItems(baseGroup.items, currentGroup.items) })
-        ] }, groupId);
-      }) })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed bg-muted/30 p-3 text-sm text-muted-foreground", children: t("appShell.sidebarCustomizationLoading") }) : null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-full gap-3", children: [
-      !hideHeader && /* @__PURE__ */ jsx("div", { className: `flex items-center ${compact ? "justify-center" : "justify-between"} mb-2`, children: /* @__PURE__ */ jsxs(Link, { href: "/backend", className: "flex items-center gap-2", "aria-label": t("appShell.goToDashboard"), children: [
-        /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 32, height: 32, className: "rounded m-4" }),
-        !compact && /* @__PURE__ */ jsx("div", { className: "text-m font-semibold", children: resolvedProductName })
-      ] }) }),
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
+      !hideHeader && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/backend",
+          className: `flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? "p-2 justify-center" : "p-3"}`,
+          "aria-label": t("appShell.goToDashboard"),
+          children: [
+            /* @__PURE__ */ jsx(Image, { src: logo?.src ?? "/open-mercato.svg", alt: logo?.alt ?? resolvedProductName, width: 40, height: 40, className: "rounded-full shrink-0" }),
+            !compact && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: resolvedProductName })
+          ]
+        }
+      ) }),
       shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
         InjectionSpot,
         {
@@ -930,7 +607,30 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           context: injectionContext
         }
       ) : null,
-      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-3 pr-1", children: customizing ? customizationEditor : (() => {
+      !compact && /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: navQuery,
+          onChange: (e) => setNavQuery(e.target.value),
+          placeholder: t("appShell.searchNavPlaceholder", "Search..."),
+          "aria-label": t("appShell.searchNavAria", "Search navigation"),
+          leftIcon: /* @__PURE__ */ jsx(Search, { "aria-hidden": true }),
+          rightIcon: navQueryActive ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              onClick: () => setNavQuery(""),
+              "aria-label": t("appShell.searchNavClear", "Clear search"),
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": true })
+            }
+          ) : void 0,
+          className: "mb-2"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { "data-sidebar-scroll": "true", className: `flex flex-1 flex-col gap-3 overflow-y-auto scrollbar-hide pr-1 ${compact ? "-ml-2 pl-2" : "-ml-3 pl-3"}`, children: (() => {
         const isSettingsPath = (href) => {
           if (href === "/backend/settings") return true;
           return resolvedSettingsPathPrefixes.some((prefix) => href.startsWith(prefix));
@@ -960,42 +660,50 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           ) : null,
           mainGroups.map((g, gi) => {
             const groupId = resolveGroupKey(g);
-            const open = openGroups[groupId] !== false;
-            const visibleItems = g.items.filter((item) => item.hidden !== true);
+            const open = navQueryActive ? true : openGroups[groupId] !== false;
+            const visibleItems = g.items.filter((item) => {
+              if (item.hidden === true) return false;
+              if (!navQueryActive) return true;
+              if (matchesQuery(item.title)) return true;
+              const itemChildren = (item.children ?? []).filter((c) => c.hidden !== true);
+              return itemChildren.some((c) => matchesQuery(c.title));
+            });
             if (visibleItems.length === 0) return null;
             return /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(
+              !compact && /* @__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`,
+                  className: "w-full px-1 justify-between flex text-xs font-medium uppercase tracking-wider text-muted-foreground/70 py-1",
                   "aria-expanded": open,
                   children: [
-                    !compact && /* @__PURE__ */ jsx("span", { children: g.name }),
-                    !compact && /* @__PURE__ */ jsx(Chevron, { open })
+                    /* @__PURE__ */ jsx("span", { children: g.name }),
+                    /* @__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";
+              (open || compact) && /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "items-center" : ""} gap-1`, children: visibleItems.map((i) => {
+                const allChildItems = (i.children ?? []).filter((child) => child.hidden !== true);
+                const matchingChildItems = navQueryActive ? allChildItems.filter((c) => matchesQuery(c.title)) : allChildItems;
+                const childItems = navQueryActive ? matchingChildItems : allChildItems;
+                const showChildren = navQueryActive ? matchingChildItems.length > 0 : !!pathname && allChildItems.length > 0 && pathname.startsWith(i.href);
+                const hasActiveChild = !!(pathname && allChildItems.some((c) => pathname.startsWith(c.href)));
+                const isParentActive = pathname === i.href || !navQueryActive && showChildren && !hasActiveChild;
+                const base = compact ? "w-10 h-10 justify-center" : "w-full px-3 py-2 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" : ""}`,
+                      className: `relative text-sm font-medium rounded-lg inline-flex items-center ${base} ${isParentActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"} ${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: [
-                        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: renderIcon(
+                        isParentActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }) : null,
+                        /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: renderIcon(
                           i.icon,
                           i.iconName,
                           i.iconMarkup,
@@ -1005,40 +713,43 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                       ]
                     }
                   ),
-                  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: renderIcon(
-                            c.icon,
-                            c.iconName,
-                            c.iconMarkup,
-                            c.href.includes("/backend/entities/user/") && c.href.endsWith("/records") ? DataTableIcon : DefaultIcon
-                          ) }),
-                          !compact && /* @__PURE__ */ jsx("span", { children: c.title })
-                        ]
-                      },
-                      c.href
-                    );
-                  }) }) : null
+                  showChildren ? /* @__PURE__ */ jsxs("div", { className: `relative flex flex-col ${compact ? "items-center" : ""} gap-1`, children: [
+                    !compact && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute left-1.5 top-1 bottom-1 w-px bg-border" }),
+                    childItems.map((c) => {
+                      const childActive = pathname?.startsWith(c.href);
+                      const childBase = compact ? "w-10 h-8 justify-center" : "w-full pl-5 pr-3 py-2 gap-2";
+                      return /* @__PURE__ */ jsxs(
+                        Link,
+                        {
+                          href: c.href,
+                          className: `relative text-sm font-medium rounded-lg inline-flex items-center ${childBase} ${childActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"} ${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", { "aria-hidden": true, className: `absolute ${compact ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }) : null,
+                            /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: renderIcon(
+                              c.icon,
+                              c.iconName,
+                              c.iconMarkup,
+                              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" })
+              gi !== mainLastVisibleGroupIndex && /* @__PURE__ */ jsx("div", { className: `my-2 border-t ${compact ? "-ml-2 -mr-3" : "-ml-3 -mr-4"}` })
             ] }, groupId);
           })
         ] }) });
       })() }),
-      /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 pt-4 border-t bg-background/80 backdrop-blur-sm pb-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 bg-background pb-1", children: [
         shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
           InjectionSpot,
           {
@@ -1046,56 +757,13 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
             context: injectionContext
           }
         ) : null,
-        /* @__PURE__ */ jsxs(
-          Link,
+        shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
+          StatusBadgeInjectionSpot,
           {
-            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") })
-            ]
+            spotId: GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
+            context: injectionContext
           }
-        ),
-        !customizing && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-          shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
-            StatusBadgeInjectionSpot,
-            {
-              spotId: GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
-              context: injectionContext
-            }
-          ) : null,
-          compact || isMobileVariant ? /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "outline",
-              size: "lg",
-              onClick: startCustomization,
-              disabled: loadingPreferences,
-              "aria-label": t("appShell.customizeSidebar"),
-              children: CustomizeIcon
-            }
-          ) : /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "default",
-              onClick: startCustomization,
-              disabled: loadingPreferences,
-              "aria-label": t("appShell.customizeSidebar"),
-              children: [
-                CustomizeIcon,
-                loadingPreferences ? t("appShell.sidebarCustomizationLoading") : t("appShell.customizeSidebar")
-              ]
-            }
-          )
-        ] }),
+        ) : null,
         shouldRenderSidebarInjectionSpots ? /* @__PURE__ */ jsx(
           InjectionSpot,
           {
@@ -1106,7 +774,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       ] })
     ] });
   }
-  const gridColsClass = customizing ? "lg:grid-cols-[320px_1fr]" : effectiveCollapsed ? "lg:grid-cols-[72px_1fr]" : "lg:grid-cols-[240px_1fr]";
+  const gridColsClass = effectiveCollapsed ? "lg:grid-cols-[80px_1fr]" : "lg:grid-cols-[240px_1fr]";
   const headerCtxValue = React.useMemo(() => ({
     setBreadcrumb: setHeaderBreadcrumb,
     setTitle: setHeaderTitle
@@ -1144,7 +812,23 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
   );
   return /* @__PURE__ */ jsxs(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("aside", { ref: sidebarAsideRef, className: `${asideClassesBase} ${effectiveCollapsed ? "px-2" : "px-3"} hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`, style: { width: asideWidth }, children: [
+        renderSidebar(effectiveCollapsed),
+        sidebarScrollState !== "none" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-10 items-end justify-center bg-gradient-to-t from-background via-background/80 to-transparent pb-1.5",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `inline-flex transition-transform duration-300 ${sidebarScrollState === "up" ? "rotate-180" : ""}`,
+                children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 animate-bounce text-muted-foreground/70" })
+              }
+            )
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex min-h-svh flex-col min-w-0", children: [
         /* @__PURE__ */ jsxs("header", { className: "border-b bg-background/80 px-3 lg:px-4 py-2 lg:py-3 flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsx(
@@ -1165,7 +849,6 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                 className: "hidden lg:inline-flex",
                 "aria-label": t("appShell.toggleSidebar"),
                 onClick: () => setCollapsed((c) => !c),
-                disabled: customizing,
                 children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                   /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
                   /* @__PURE__ */ jsx("path", { d: "M9 4v16" })
@@ -1259,112 +942,6 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     /* @__PURE__ */ jsx(UmesDevToolsPanel, {})
   ] });
 }
-AppShell.cloneGroups = function cloneGroups(groups) {
-  const cloneItem = (item) => ({
-    id: item.id,
-    href: item.href,
-    title: item.title,
-    defaultTitle: item.defaultTitle,
-    icon: item.icon,
-    iconName: item.iconName,
-    iconMarkup: item.iconMarkup,
-    enabled: item.enabled,
-    hidden: item.hidden,
-    pageContext: item.pageContext,
-    children: item.children ? item.children.map((child) => cloneItem(child)) : void 0
-  });
-  return groups.map((group) => ({
-    id: group.id,
-    name: group.name,
-    defaultName: group.defaultName,
-    items: group.items.map((item) => cloneItem(item))
-  }));
-};
-function applyCustomizationDraft(baseGroups, draft) {
-  const clones = AppShell.cloneGroups(baseGroups);
-  const byId = /* @__PURE__ */ new Map();
-  for (const group of clones) {
-    byId.set(resolveGroupKey(group), group);
-  }
-  const orderedIds = mergeGroupOrder(draft.order, Array.from(byId.keys()));
-  const seen = /* @__PURE__ */ new Set();
-  const result = [];
-  for (const id of orderedIds) {
-    if (seen.has(id)) continue;
-    const group = byId.get(id);
-    if (!group) continue;
-    seen.add(id);
-    const baseName = group.defaultName ?? group.name;
-    const override = draft.groupLabels[id]?.trim();
-    result.push({
-      ...group,
-      name: override && override.length > 0 ? override : baseName,
-      items: group.items.map((item) => applyItemDraft(item, draft))
-    });
-  }
-  return result;
-}
-function applyItemDraft(item, draft) {
-  const itemKey = resolveItemKey(item);
-  const baseTitle = item.defaultTitle ?? item.title;
-  const override = draft.itemLabels[itemKey]?.trim();
-  const children = item.children ? item.children.map((child) => applyItemDraft(child, draft)) : void 0;
-  const hidden = draft.hiddenItemIds[itemKey] === true;
-  return {
-    ...item,
-    title: override && override.length > 0 ? override : baseTitle,
-    hidden,
-    children
-  };
-}
-function mergeGroupOrder(preferred, current) {
-  const seen = /* @__PURE__ */ new Set();
-  const merged = [];
-  for (const id of preferred) {
-    const trimmed = id.trim();
-    if (!trimmed || seen.has(trimmed) || !current.includes(trimmed)) continue;
-    seen.add(trimmed);
-    merged.push(trimmed);
-  }
-  for (const id of current) {
-    if (seen.has(id)) continue;
-    seen.add(id);
-    merged.push(id);
-  }
-  return merged;
-}
-function collectSidebarDefaults(groups) {
-  const groupDefaults = /* @__PURE__ */ new Map();
-  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);
-    }
-  };
-  for (const group of groups) {
-    const key = resolveGroupKey(group);
-    groupDefaults.set(key, group.defaultName ?? group.name);
-    visitItems(group.items);
-  }
-  return { groupDefaults, itemDefaults };
-}
-function filterMainSidebarGroups(groups) {
-  const isMainItem = (item) => {
-    if (item.pageContext && item.pageContext !== "main") return false;
-    return true;
-  };
-  return groups.map((group) => ({
-    ...group,
-    items: group.items.filter(isMainItem).map((item) => ({
-      ...item,
-      children: item.children?.filter(isMainItem)
-    }))
-  })).filter((group) => group.items.length > 0);
-}
 export {
   AppShell,
   ApplyBreadcrumb