@orsetra/shared-ui 1.4.0 → 1.5.0

package/components/layout/layout-container.tsx

@@ -122,7 +122,7 @@ function LayoutContent({
       />
 
       <div className="flex-1 flex flex-col min-w-0">
-        <header className="h-14 bg-gray-50 border-b border-ui-border flex-shrink-0">
+        <header className="h-14 bg-gray-50 flex-shrink-0">
           <div className="h-full px-4 md:px-6 flex items-center justify-between">
             {isHidden ? (
               <Button

package/components/layout/page-with-side-panel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { ReactNode, useState } from "react"
-import { X, ChevronLeft } from "lucide-react"
+import { X, ChevronLeft, SlidersHorizontal } from "lucide-react"
 import { Button } from "../ui/button"
 import { cn } from "../../lib/utils"
 
@@ -20,6 +20,9 @@ interface PageWithSidePanelProps {
   contentHeaderClassName?: string
   sidePanelClassName?: string
   sidePanelHeaderClassName?: string
+  /** Label for the mobile floating toggle button. When provided, a button
+   *  appears on small screens (<lg) that opens the side panel as an overlay. */
+  mobileToggleLabel?: string
 }
 
 const PANEL_WIDTHS = {
@@ -43,8 +46,10 @@ export function PageWithSidePanel({
   contentHeaderClassName,
   sidePanelClassName,
   sidePanelHeaderClassName,
+  mobileToggleLabel,
 }: PageWithSidePanelProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen)
+  const [mobileOpen, setMobileOpen] = useState(false)
   const panelWidthClass = PANEL_WIDTHS[sidePanelWidth]
 
   const handleClose = () => {
@@ -131,8 +136,44 @@ export function PageWithSidePanel({
               <ChevronLeft className="h-4 w-4 text-ibm-gray-70" />
             </button>
           )}
+
+          {/* Mobile overlay — only rendered below lg breakpoint */}
+          {mobileOpen && (
+            <div className="lg:hidden fixed inset-0 z-50 flex">
+              <div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} />
+              <div className="relative ml-auto flex flex-col bg-white shadow-xl h-full w-80 max-w-[90vw]">
+                <div className={cn(
+                  "flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20",
+                  sidePanelHeaderClassName
+                )}>
+                  <div className="flex-1 min-w-0">{sidePanelHeader}</div>
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={() => setMobileOpen(false)}
+                    className="h-8 w-8 p-0 ml-2 flex-shrink-0"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+                <div className="flex-1 overflow-y-auto">{sidePanel}</div>
+              </div>
+            </div>
+          )}
         </>
       )}
+
+      {/* Mobile floating toggle button */}
+      {sidePanel && mobileToggleLabel && (
+        <button
+          onClick={() => setMobileOpen(true)}
+          className="lg:hidden fixed bottom-5 right-4 z-40 flex items-center gap-2 px-4 py-2.5 bg-ibm-blue-60 text-white text-sm font-medium shadow-lg hover:bg-ibm-blue-70 transition-colors"
+          aria-label={mobileToggleLabel}
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+          {mobileToggleLabel}
+        </button>
+      )}
     </div>
   )
 }

package/components/layout/sidebar/main-sidebar.tsx

@@ -6,7 +6,7 @@ import { cn } from "../../../lib/utils"
 import { Button } from "../../ui/button"
 import { Logo } from "../../ui/logo"
 import { type MainMenuItem, type SidebarMenus } from "./data"
-import { X, Menu } from "lucide-react"
+import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
 
 export type SidebarMode = 'expanded' | 'minimized' | 'hidden'
 
@@ -36,12 +36,18 @@ export function MainSidebar({
   const isMinimized = mode === 'minimized'
   const [hoveredMenu, setHoveredMenu] = React.useState<string | null>(null)
   const [flyoutPos, setFlyoutPos] = React.useState<{ top: number; left: number } | null>(null)
+  const [expandedMenu, setExpandedMenu] = React.useState<string | null>(null)
   const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
   React.useEffect(() => {
     return () => { if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current) }
   }, [])
 
+  // Reset expanded menu when sidebar closes
+  React.useEffect(() => {
+    if (!isOpen) setExpandedMenu(null)
+  }, [isOpen])
+
   const handleFlyoutMouseEnter = (menuId: string, rect?: DOMRect) => {
     if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
     if (rect) setFlyoutPos({ top: rect.top, left: rect.right + 8 })
@@ -53,6 +59,14 @@ export function MainSidebar({
   }
 
   const handleMenuClick = (menuId: string) => {
+    const hasSubMenu = (sidebarMenus[menuId]?.length ?? 0) > 0
+
+    // In mobile overlay mode (not minimized, overlay open): expand inline instead of navigating
+    if (!isMinimized && isOpen && hasSubMenu) {
+      setExpandedMenu((prev) => (prev === menuId ? null : menuId))
+      return
+    }
+
     onMenuSelect(menuId)
 
     if (!isMinimized && onSecondarySidebarOpen) {
@@ -153,8 +167,30 @@ export function MainSidebar({
                       "h-5 w-5 flex-shrink-0",
                       isActive ? "text-interactive" : "text-text-secondary"
                     )} />
-                    {!isMinimized && <span className="text-base">{item.label}</span>}
+                    {!isMinimized && <span className="text-base flex-1">{item.label}</span>}
+                    {!isMinimized && hasSubMenu && isOpen && (
+                      expandedMenu === item.id
+                        ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                        : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                    )}
                   </button>
+
+                  {/* Inline accordion sub-items — shown on mobile (overlay open, not minimized) */}
+                  {!isMinimized && isOpen && expandedMenu === item.id && hasSubMenu && (
+                    <div className="pl-4 pb-1">
+                      {sidebarMenus[item.id].map((subItem) => (
+                        <a
+                          key={subItem.id}
+                          href={buildSubItemHref(item.id, subItem.href)}
+                          onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
+                          className="flex items-center gap-3 px-3 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
+                        >
+                          <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
+                          {subItem.name}
+                        </a>
+                      ))}
+                    </div>
+                  )}
                 </div>
               )
             })}

package/components/layout/sidebar/sidebar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
+import { PanelLeft, ChevronLeft, ChevronRight } from "lucide-react"
 import Link from "next/link"
 import { usePathname, useSearchParams } from "next/navigation"
 
@@ -23,8 +23,7 @@ import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_STORAGE_KEY = "sidebar:state"
 const SIDEBAR_WIDTH = "14rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
@@ -75,8 +74,19 @@ const SidebarProvider = React.forwardRef<
 
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
+    // Initialize from defaultOpen (SSR-safe); sync from localStorage after mount.
     const [_open, _setOpen] = React.useState(defaultOpen)
     const open = openProp ?? _open
+
+    // Hydrate from localStorage on first client render (avoids SSR mismatch).
+    React.useEffect(() => {
+      try {
+        const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
+        if (stored !== null) _setOpen(stored === "true")
+      } catch {}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const openState = typeof value === "function" ? value(open) : value
@@ -86,8 +96,10 @@ const SidebarProvider = React.forwardRef<
           _setOpen(openState)
         }
 
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+        // Persist state so it survives client-side navigation and page reloads.
+        try {
+          localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState))
+        } catch {}
       },
       [setOpenProp, open]
     )
@@ -174,76 +186,113 @@ interface SidebarProps {
 function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem }: SidebarProps = {}) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const { state } = useSidebar()
+  const { state, toggleSidebar } = useSidebar()
 
-  // Micro apps: utilise 'items' comme clé standard
-  // Main app: utilise currentMenu pour sélectionner le bon groupe
   const currentNavigation: SubMenuItem[] = sidebarMenus['items']
     || (currentMenu && sidebarMenus[currentMenu])
     || []
 
+  const isCollapsed = state === "collapsed"
+
   return (
-    <div className="h-screen sticky top-0 flex flex-col bg-gray-50 border-r border-ui-border min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
-         style={{ width: state === "expanded" ? "var(--sidebar-width)" : "var(--sidebar-width-icon)" }}>
-      {/* Logo avec bouton de menu principal */}
-      <div className="h-14 flex items-center justify-between px-4 border-b border-ui-border">
-        <Logo />
-        {onMainMenuToggle && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onMainMenuToggle}
-            className="h-8 w-8 p-0 hover:bg-ibm-gray-20 rounded-lg"
-            title="Ouvrir le menu principal"
-          >
-            <Menu className="h-4 w-4" />
-          </Button>
+    <div
+      className="h-screen sticky top-0 flex flex-col bg-gray-50 min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
+      style={{ width: isCollapsed ? "var(--sidebar-width-icon)" : "var(--sidebar-width)" }}
+    >
+      {/* Header */}
+      <div className={cn(
+        "h-14 flex items-center flex-shrink-0",
+        isCollapsed ? "justify-center px-2" : "justify-between px-4"
+      )}>
+        {isCollapsed ? (
+          <Logo iconOnly />
+        ) : (
+          <>
+            <Logo />
+            {onMainMenuToggle && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onMainMenuToggle}
+                className="h-8 w-8 p-0 hover:bg-ui-background rounded-lg"
+                title="Ouvrir le menu principal"
+              >
+                <Menu className="h-4 w-4" />
+              </Button>
+            )}
+          </>
         )}
       </div>
 
-      {/* En-tête du menu principal sélectionné */}
-      {currentMenu && sectionLabels[currentMenu] && (
-        <div className="h-14 flex items-center px-4 border-b border-ui-border">
-          <h2 className="text-sm font-semibold text-text-primary">
+      {/* 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>
       )}
 
-      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+      {/* Nav */}
+      <nav className={cn(
+        "flex-1 overflow-y-auto",
+        isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
+      )}>
         {currentNavigation.map((item) => {
-          // Use custom function if provided, otherwise use default pathname matching
           const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null
-          const isActive = activeItemId ? item.id === activeItemId : (pathname === item.href || pathname.startsWith(`${item.href}/`))
-          
+          const isActive = activeItemId
+            ? item.id === activeItemId
+            : (pathname === item.href || pathname.startsWith(`${item.href}/`))
+
           const handleClick = (e: React.MouseEvent) => {
             const href = item.href
             if (href.startsWith('http://') || href.startsWith('https://')) {
               e.preventDefault()
-              const path = new URL(href).pathname
-              window.location.href = path
-            } 
+              window.location.href = new URL(href).pathname
+            }
           }
-          
-          return (
+
+          const linkEl = (
             <Link
               key={item.id}
               href={item.href}
               onClick={handleClick}
               className={cn(
-                "flex items-center px-3 py-2 text-sm gap-x-3 transition-colors border-l-4",
+                "flex items-center transition-colors border-l-4",
+                isCollapsed ? "justify-center p-2" : "px-3 py-2 gap-x-3 text-sm",
                 isActive
                   ? "bg-interactive/10 text-interactive font-medium border-interactive"
                   : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
               )}
             >
               <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-text-secondary")} />
-              {item.name}
+              {!isCollapsed && item.name}
             </Link>
           )
+
+          if (isCollapsed) {
+            return (
+              <Tooltip key={item.id}>
+                <TooltipTrigger asChild>{linkEl}</TooltipTrigger>
+                <TooltipContent side="right" align="center">{item.name}</TooltipContent>
+              </Tooltip>
+            )
+          }
+          return linkEl
         })}
       </nav>
 
+      {/* Collapse / expand toggle */}
+      <div className={cn("flex-shrink-0 p-2", isCollapsed ? "flex justify-center" : "flex justify-end")}>
+        <button
+          type="button"
+          onClick={toggleSidebar}
+          className="h-8 w-8 flex items-center justify-center text-text-secondary hover:text-text-primary hover:bg-ui-background rounded-md transition-colors"
+          title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+        </button>
+      </div>
     </div>
   )
 }
@@ -679,7 +728,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className
     )}

package/components/ui/secret-context.tsx

@@ -9,23 +9,20 @@ export interface SecretEntry {
 }
 
 interface SecretContextValue {
-  templateId?: string
-  fetchSecrets: (templateId?: string) => Promise<SecretEntry[]>
+  secretsMap: Map<string, SecretEntry[]>
 }
 
 const SecretContext = createContext<SecretContextValue | null>(null)
 
 export function SecretContextProvider({
   children,
-  templateId,
-  fetchSecrets,
+  secretsMap,
 }: {
   children: ReactNode
-  templateId?: string
-  fetchSecrets: (templateId?: string) => Promise<SecretEntry[]>
+  secretsMap: Map<string, SecretEntry[]>
 }) {
   return (
-    <SecretContext.Provider value={{ templateId, fetchSecrets }}>
+    <SecretContext.Provider value={{ secretsMap }}>
       {children}
     </SecretContext.Provider>
   )

package/components/ui/secret-input.tsx

@@ -1,10 +1,7 @@
 "use client"
 
-import { useState, useEffect } from "react"
-import { Loader2 } from "lucide-react"
 import { SelectInput } from "./select-input"
 import { useSecretContext } from "./secret-context"
-import type { SecretEntry } from "./secret-context"
 
 interface SecretInputProps {
   id?: string
@@ -26,26 +23,6 @@ export function SecretInput({
   placeholder = "Select a secret",
 }: SecretInputProps) {
   const ctx = useSecretContext()
-  const [secrets, setSecrets] = useState<SecretEntry[]>([])
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (!ctx) return
-    setLoading(true)
-    ctx.fetchSecrets(type === "configs" ? ctx.templateId : type)
-      .then(setSecrets)
-      .catch(() => setSecrets([]))
-      .finally(() => setLoading(false))
-  }, [ctx?.templateId])
-
-  if (loading) {
-    return (
-      <div className="flex items-center gap-2 h-10 px-3 border border-ibm-gray-30 bg-white text-sm text-ibm-gray-60">
-        <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" />
-        Loading secrets…
-      </div>
-    )
-  }
 
   if (!ctx) {
     return (
@@ -54,7 +31,7 @@ export function SecretInput({
       </div>
     )
   }
-
+  const secrets = ctx.secretsMap.get(type || 'configs') || []
   return (
     <SelectInput
       id={id}
@@ -63,7 +40,7 @@ export function SecretInput({
       disabled={disabled}
       className={className}
       placeholder={placeholder}
-      options={secrets.map((s) => ({ label: s.description || s.name, value: s.name }))}
+      options={secrets.map((s) => ({ label: s.description || s.name, value: `secret:${s.name}` }))}
     />
   )
 }

package/package.json

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