@orsetra/shared-ui 1.5.31 → 1.6.0

package/components/layout/index.ts

@@ -25,7 +25,9 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
-  useSidebar
+  useSidebar,
+  useSidebarNavigation,
+  useInjectSidebarNavigation,
 } from './sidebar/sidebar'
 // Skeleton is exported from ../ui to avoid duplicate exports
 export { RootLayoutWrapper, ibmPlexSans, ibmPlexMono } from './root-layout-wrapper'

package/components/layout/sidebar/data.tsx

@@ -46,10 +46,11 @@ export interface MainMenuItem {
 }
 
 export interface SubMenuItem {
-  id: string
-  name: string
-  href: string
-  icon: LucideIcon
+  id:       string
+  name:     string
+  href:     string
+  icon:     LucideIcon
+  applied?: boolean
 }
 
 export interface SidebarMenus {

package/components/layout/sidebar/sidebar.tsx

@@ -23,6 +23,45 @@ import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
+// ── Dynamic secondary navigation ──────────────────────────────────────────────
+
+interface SidebarNavigationContextValue {
+  injectedItems: SubMenuItem[] | null | undefined  // null = not injected, undefined = injected but loading
+  injectedTitle: string | null
+  setInjectedItems: React.Dispatch<React.SetStateAction<SubMenuItem[] | null | undefined>>
+  setInjectedTitle: React.Dispatch<React.SetStateAction<string | null>>
+}
+
+const SidebarNavigationContext = React.createContext<SidebarNavigationContextValue>({
+  injectedItems:    null,
+  injectedTitle:    null,
+  setInjectedItems: () => {},
+  setInjectedTitle: () => {},
+})
+
+export function useSidebarNavigation() {
+  return React.useContext(SidebarNavigationContext)
+}
+
+/**
+ * Call inside a detail page/layout to replace the sidebar's secondary nav
+ * (and optionally its section title) for as long as the component is mounted.
+ * `items` must be referentially stable (useMemo / defined outside render).
+ */
+export function useInjectSidebarNavigation(items: SubMenuItem[] | undefined, title?: string) {
+  const { setInjectedItems, setInjectedTitle } = useSidebarNavigation()
+  React.useEffect(() => {
+    setInjectedItems(items)
+    setInjectedTitle(title ?? null)
+    return () => {
+      setInjectedItems(null)
+      setInjectedTitle(null)
+    }
+  }, [items, title]) // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+// ── Sidebar storage ───────────────────────────────────────────────────────────
+
 const SIDEBAR_STORAGE_KEY = "sidebar:state"
 const SIDEBAR_WIDTH = "14rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
@@ -142,35 +181,46 @@ const SidebarProvider = React.forwardRef<
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     )
 
+    const [injectedItems, setInjectedItems] = React.useState<SubMenuItem[] | null | undefined>(null)
+    const [injectedTitle, setInjectedTitle] = React.useState<string | null>(null)
+    const navContextValue = React.useMemo<SidebarNavigationContextValue>(
+      () => ({ injectedItems, injectedTitle, setInjectedItems, setInjectedTitle }),
+      [injectedItems, injectedTitle]
+    )
+
     return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            suppressHydrationWarning
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
+      <SidebarNavigationContext.Provider value={navContextValue}>
+        <SidebarContext.Provider value={contextValue}>
+          <TooltipProvider delayDuration={0}>
+            <div
+              style={
+                {
+                  "--sidebar-width": SIDEBAR_WIDTH,
+                  "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                  ...style,
+                } as React.CSSProperties
+              }
+              suppressHydrationWarning
+              className={cn(
+                "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+                className
+              )}
+              ref={ref}
+              {...props}
+            >
+              {children}
+            </div>
+          </TooltipProvider>
+        </SidebarContext.Provider>
+      </SidebarNavigationContext.Provider>
     )
   }
 )
 SidebarProvider.displayName = "SidebarProvider"
 
 
+const SKELETON_WIDTHS = ["68%", "85%", "58%", "92%", "74%"]
+
 interface SidebarProps {
   currentMenu?: string
   onMainMenuToggle?: () => void
@@ -187,17 +237,19 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const { state, toggleSidebar } = useSidebar()
+  const { injectedItems, injectedTitle } = useSidebarNavigation()
 
-  const currentNavigation: SubMenuItem[] = sidebarMenus['items']
-    || (currentMenu && sidebarMenus[currentMenu])
-    || []
+  const isInjecting = injectedItems !== null  // null = default nav, undefined/array = detail page mounted
+  const currentNavigation: SubMenuItem[] = isInjecting
+    ? (injectedItems ?? [])
+    : (sidebarMenus['items'] ?? (currentMenu && sidebarMenus[currentMenu]) ?? [])
 
   const isCollapsed = state === "collapsed"
   const filteredMainItems = React.useMemo(() => {
-    if (!isCollapsed || mainMenuItems.length === 0) return []
+    if (!isCollapsed || mainMenuItems.length === 0 || isInjecting) return []
     const navIds = new Set(currentNavigation.map((n) => n.id))
     return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id) && !!item.href)
-  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
+  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu, isInjecting])
 
   return (
     <div
@@ -232,12 +284,18 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       </div>
 
       {/* Section label — hidden when collapsed */}
-      {!isCollapsed && currentMenu && sectionLabels[currentMenu] && (
-        <div className="h-10 flex items-center px-4 flex-shrink-0">
-          <h2 className="text-xs font-semibold text-text-secondary uppercase tracking-wide">
-            {sectionLabels[currentMenu]}
-          </h2>
-        </div>
+      {!isCollapsed && (
+        injectedItems === undefined ? (
+          <div className="h-10 flex items-center px-4 flex-shrink-0">
+            <div className="h-2.5 w-20 bg-gray-200 animate-pulse rounded" />
+          </div>
+        ) : (injectedTitle || (currentMenu && sectionLabels[currentMenu])) ? (
+          <div className="h-10 flex items-center px-4 flex-shrink-0">
+            <h2 className="text-xs font-semibold text-text-secondary uppercase tracking-wide truncate">
+              {injectedTitle || sectionLabels[currentMenu!]}
+            </h2>
+          </div>
+        ) : null
       )}
 
       {/* Nav */}
@@ -245,9 +303,24 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         "flex-1 overflow-y-auto",
         isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
       )}>
-        {/* Secondary nav items */}
-        {currentNavigation.map((item) => {
-          const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null
+        {/* Secondary nav items — skeleton while injected but loading */}
+        {injectedItems === undefined ? (
+          SKELETON_WIDTHS.map((w, i) => (
+            <div
+              key={i}
+              className={cn(
+                "flex items-center border-l-4 border-transparent animate-pulse",
+                isCollapsed ? "p-2 justify-center" : "px-3 py-2 gap-x-3"
+              )}
+            >
+              <div className="h-4 w-4 bg-gray-200 flex-shrink-0" />
+              {!isCollapsed && <div className="h-3 bg-gray-200 rounded" style={{ width: w }} />}
+            </div>
+          ))
+        ) : currentNavigation.map((item) => {
+          const activeItemId = !injectedItems && getCurrentMenuItem
+            ? getCurrentMenuItem(pathname, searchParams)
+            : null
           const isActive = activeItemId
             ? item.id === activeItemId
             : (pathname === item.href || pathname.startsWith(`${item.href}/`))
@@ -277,7 +350,14 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                 className="h-4 w-4 flex-shrink-0"
                 style={{ color: isActive ? '#0f62fe' : '#4589ff' }}
               />
-              {!isCollapsed && item.name}
+              {!isCollapsed && (
+                <>
+                  <span className="flex-1 truncate">{item.name}</span>
+                  {item.applied && (
+                    <span className="h-1.5 w-1.5 rounded-full bg-green-500 flex-shrink-0" />
+                  )}
+                </>
+              )}
             </Link>
           )
 
@@ -817,6 +897,8 @@ const SidebarMenuSubButton = React.forwardRef<
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
 
 export {
+  useSidebarNavigation,
+  useInjectSidebarNavigation,
   Sidebar,
   SidebarContent,
   SidebarFooter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.5.31",
+  "version": "1.6.0",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",