@open-mercato/ui 0.5.1-develop.2996.ce62fd491c → 0.5.1-develop.3032.01699048cb

package/dist/backend/AppShell.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { createContext, useContext } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { ChevronDown, Search, X } from "lucide-react";
+import { ChevronDown, ChevronLeft, Search, X } from "lucide-react";
 import { Button } from "../primitives/button.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { Input } from "../primitives/input.js";
@@ -383,6 +383,20 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     } catch {
     }
   }, [collapsed]);
+  const collapsedBeforeSectionRef = React.useRef(null);
+  const previousSidebarModeRef = React.useRef("main");
+  React.useEffect(() => {
+    const previous = previousSidebarModeRef.current;
+    if (previous === "main" && sidebarMode !== "main") {
+      collapsedBeforeSectionRef.current = collapsed;
+      if (!collapsed) setCollapsed(true);
+    } else if (previous !== "main" && sidebarMode === "main" && collapsedBeforeSectionRef.current !== null) {
+      const restoreTo = collapsedBeforeSectionRef.current;
+      collapsedBeforeSectionRef.current = null;
+      if (collapsed !== restoreTo) setCollapsed(restoreTo);
+    }
+    previousSidebarModeRef.current = sidebarMode;
+  }, [sidebarMode, collapsed]);
   React.useEffect(() => {
     try {
       localStorage.setItem("om:sidebarOpenGroups", JSON.stringify(openGroups));
@@ -410,7 +424,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
   React.useEffect(() => {
     setNavGroups(cloneSidebarGroups(resolvedGroups));
   }, [resolvedGroups]);
-  function renderSectionSidebar(sections, title, compact, hideHeader) {
+  function renderSectionSidebar(sections, title, compact, hideHeader, hideSearch) {
     const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
     const lastVisibleIndex = sortedSections.length - 1;
     return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
@@ -426,7 +440,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           ]
         }
       ) }),
-      !compact && /* @__PURE__ */ jsx(
+      !compact && !hideSearch && /* @__PURE__ */ jsx(
         Input,
         {
           type: "text",
@@ -450,13 +464,14 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
         }
       ),
       /* @__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 sectionNavQueryActive = hideSearch ? false : navQueryActive;
         const matchesItemQuery = (item) => {
-          if (!navQueryActive) return true;
+          if (!sectionNavQueryActive) 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;
+        const visibleItems = sectionNavQueryActive ? 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;
@@ -465,7 +480,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
         const sortSectionItems = (items = []) => [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
         const filterChildren = (children2) => {
           if (!children2) return [];
-          if (!navQueryActive) return [...children2];
+          if (!sectionNavQueryActive) return [...children2];
           return children2.filter(matchesItemQuery);
         };
         const renderSectionItem = (item, depth = 0) => {
@@ -473,7 +488,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           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 showChildren = childItems.length > 0 && (isOnItemBranch || sectionNavQueryActive);
           const isActive = isOnItemBranch || hasActiveChild;
           const base = compact ? "w-10 h-10 justify-center" : "w-full py-2 gap-2";
           const spacingStyle = !compact ? {
@@ -525,7 +540,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       }) }) })
     ] });
   }
-  function renderSidebar(compact, hideHeader) {
+  function renderSidebar(compact, hideHeader, forceMainOnly) {
     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: "mb-2", children: /* @__PURE__ */ jsxs(
@@ -559,7 +574,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
         ] })
       ] });
     }
-    if (sidebarMode === "settings" && resolvedSettingsSections && resolvedSettingsSections.length > 0) {
+    if (!forceMainOnly && sidebarMode === "settings" && resolvedSettingsSections && resolvedSettingsSections.length > 0) {
       const mergedSettingsSections = mergeSectionGroupsWithInjected(
         resolvedSettingsSections,
         settingsSidebarInjectedMenuItems,
@@ -572,7 +587,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
         hideHeader
       );
     }
-    if (sidebarMode === "profile" && resolvedProfileSections && resolvedProfileSections.length > 0) {
+    if (!forceMainOnly && sidebarMode === "profile" && resolvedProfileSections && resolvedProfileSections.length > 0) {
       const mergedProfileSections = mergeSectionGroupsWithInjected(
         resolvedProfileSections,
         profileSidebarInjectedMenuItems,
@@ -774,7 +789,44 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       ] })
     ] });
   }
-  const gridColsClass = effectiveCollapsed ? "lg:grid-cols-[80px_1fr]" : "lg:grid-cols-[240px_1fr]";
+  function renderSectionAside() {
+    let sections = null;
+    let title = "";
+    if (sidebarMode === "settings" && resolvedSettingsSections && resolvedSettingsSections.length > 0) {
+      sections = mergeSectionGroupsWithInjected(
+        resolvedSettingsSections,
+        settingsSidebarInjectedMenuItems,
+        t
+      );
+      title = settingsSectionTitle ?? t("backend.nav.settings", "Settings");
+    } else if (sidebarMode === "profile" && resolvedProfileSections && resolvedProfileSections.length > 0) {
+      sections = mergeSectionGroupsWithInjected(
+        resolvedProfileSections,
+        profileSidebarInjectedMenuItems,
+        t
+      );
+      title = profileSectionTitle ?? t("backend.nav.profile", "Profile");
+    }
+    if (!sections) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/backend",
+          className: "inline-flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-muted",
+          "data-testid": "appshell-section-back-to-main",
+          "aria-label": t("backend.nav.backToMain", "Back to Main"),
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: renderSectionSidebar(sections, title, false, true, true) })
+    ] });
+  }
+  const isSectionView = sidebarMode === "settings" && !!resolvedSettingsSections && resolvedSettingsSections.length > 0 || sidebarMode === "profile" && !!resolvedProfileSections && resolvedProfileSections.length > 0;
+  const gridColsClass = isSectionView ? effectiveCollapsed ? "lg:grid-cols-[80px_240px_1fr]" : "lg:grid-cols-[240px_240px_1fr]" : effectiveCollapsed ? "lg:grid-cols-[80px_1fr]" : "lg:grid-cols-[240px_1fr]";
   const headerCtxValue = React.useMemo(() => ({
     setBreadcrumb: setHeaderBreadcrumb,
     setTitle: setHeaderTitle
@@ -811,9 +863,9 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
     [t, topbarInjectedMenuItems]
   );
   return /* @__PURE__ */ jsxs(HeaderContext.Provider, { value: headerCtxValue, children: [
-    /* @__PURE__ */ jsxs("div", { className: `min-h-svh lg:grid ${gridColsClass}`, children: [
-      /* @__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),
+    /* @__PURE__ */ jsxs("div", { className: `min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`, children: [
+      /* @__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 transition-[width,padding] duration-200 ease-out`, style: { width: asideWidth }, children: [
+        renderSidebar(effectiveCollapsed, false, isSectionView),
         sidebarScrollState !== "none" ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -829,6 +881,24 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           }
         ) : null
       ] }),
+      isSectionView ? /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className: `${asideClassesBase} px-3 hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative`,
+          style: { width: "240px" },
+          "data-testid": "appshell-section-sidebar",
+          children: [
+            renderSectionAside(),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-background via-background/80 to-transparent"
+              }
+            )
+          ]
+        }
+      ) : 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(