@orsetra/shared-ui 1.8.5 → 1.9.1

package/components/layout/layout-container.tsx

@@ -6,6 +6,7 @@ import { MainSidebar, type SidebarMode } from "./sidebar/main-sidebar"
 import { Sidebar, SidebarProvider, useSidebar } from "./sidebar/sidebar"
 import { type SidebarMenus, type MainMenuItem, resolveIcon } from "./sidebar/data"
 import { Button } from "../ui"
+import { Logo } from "../ui/logo"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
@@ -100,51 +101,54 @@ function LayoutContent({
   const handleSecondarySidebarOpen = () => setOpen(true)
 
   return (
-    <div className="flex h-screen w-full bg-white overflow-hidden">
-      {!isMinimized && !isHidden && (
-        <Sidebar
+    <div className="flex flex-col h-screen w-full bg-white overflow-hidden">
+      <header className="h-14 bg-gray-50 border-b border-ui-border flex-shrink-0">
+        <div className="h-full flex items-center justify-between">
+          <div
+            className="h-full flex items-center justify-between flex-shrink-0 px-4 md:px-6"
+            style={{ width: 'var(--sidebar-width)' }}
+          >
+            <Logo href={main_base_url} />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleMainSidebarToggle}
+              className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+              title="Menu principal"
+            >
+              <Menu className="h-5 w-5" />
+            </Button>
+          </div>
+          <div className="flex-1 flex items-center justify-end px-4 md:px-6">
+            <UserPanel main_base_url={main_base_url} />
+          </div>
+        </div>
+      </header>
+
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {!isMinimized && !isHidden && (
+          <Sidebar
+            currentMenu={currentMenu}
+            onMainMenuToggle={handleMainSidebarToggle}
+            sidebarMenus={effectiveSidebarMenus}
+            main_base_url={main_base_url}
+            sectionLabels={sectionLabels}
+            getCurrentMenuItem={getCurrentMenuItem}
+            mainMenuItems={mainMenuItems}
+          />
+        )}
+
+        <MainSidebar
+          main_base_url={main_base_url}
+          isOpen={isMainSidebarOpen}
+          onToggle={handleMainSidebarToggle}
+          onMenuSelect={handleMenuSelect}
           currentMenu={currentMenu}
-          onMainMenuToggle={handleMainSidebarToggle}
+          onSecondarySidebarOpen={handleSecondarySidebarOpen}
+          mode={isHidden ? "expanded" : mode}
           sidebarMenus={effectiveSidebarMenus}
-          main_base_url={main_base_url}
-          sectionLabels={sectionLabels}
-          getCurrentMenuItem={getCurrentMenuItem}
           mainMenuItems={mainMenuItems}
         />
-      )}
-
-      <MainSidebar
-        main_base_url={main_base_url}
-        isOpen={isMainSidebarOpen}
-        onToggle={handleMainSidebarToggle}
-        onMenuSelect={handleMenuSelect}
-        currentMenu={currentMenu}
-        onSecondarySidebarOpen={handleSecondarySidebarOpen}
-        mode={isHidden ? "expanded" : mode}
-        sidebarMenus={effectiveSidebarMenus}
-        mainMenuItems={mainMenuItems}
-      />
-
-      <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">
-          <div className="h-full px-4 md:px-6 flex items-center justify-between">
-            {isHidden ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleMainSidebarToggle}
-                className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-                title="Ouvrir le menu"
-              >
-                <Menu className="h-5 w-5" />
-              </Button>
-            ) : (
-              <div />
-            )}
-
-            <UserPanel main_base_url={main_base_url} />
-          </div>
-        </header>
 
         <main className="flex-1 bg-ibm-gray-10 min-h-0 overflow-auto">
           {children}

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

@@ -3,13 +3,24 @@
 import * as React from "react"
 import { cn } from "../../../lib/utils"
 import type { MainMenuItem, SubMenuItem } from "./data"
+import { Home, ExternalLink, type LucideIcon } from "lucide-react"
+
+export interface FlyoutDefaultLink {
+  label:        string
+  href:         string
+  description?: string
+  icon?:        LucideIcon
+}
 
 interface MainSidebarFlyoutProps {
-  item: MainMenuItem
-  /** Sub-items with hrefs already resolved by the parent */
-  subItems: SubMenuItem[]
-  onMouseEnter: () => void
-  onMouseLeave: () => void
+  item:                 MainMenuItem | null
+  subItems:             SubMenuItem[]
+  onMouseEnter:         () => void
+  onMouseLeave:         () => void
+  main_base_url?:       string
+  defaultTitle?:        string
+  defaultDescription?:  string
+  defaultLinks?:        FlyoutDefaultLink[]
 }
 
 export function MainSidebarFlyout({
@@ -17,8 +28,21 @@ export function MainSidebarFlyout({
   subItems,
   onMouseEnter,
   onMouseLeave,
+  main_base_url = "/",
+  defaultTitle = "Camel X Platform",
+  defaultDescription,
+  defaultLinks = [],
 }: MainSidebarFlyoutProps) {
-  const Icon = item.icon
+  const homePath = React.useMemo(() => {
+    if (!main_base_url) return "/"
+    try {
+      return (main_base_url.startsWith("http://") || main_base_url.startsWith("https://"))
+        ? new URL(main_base_url).pathname
+        : main_base_url
+    } catch {
+      return "/"
+    }
+  }, [main_base_url])
 
   return (
     <div
@@ -26,46 +50,107 @@ export function MainSidebarFlyout({
       onMouseLeave={onMouseLeave}
       className="h-full flex flex-col flex-shrink-0 overflow-hidden bg-gray-50 border-r border-ui-border shadow-[4px_0_20px_-4px_rgba(0,0,0,0.10)] w-72 lg:w-80"
     >
-      {/* ── Section header ───────────────────────────────────────────────────── */}
-      <div className="flex items-center px-4 lg:px-5 pt-5 pb-1 flex-shrink-0 gap-2.5">
-        <Icon className="h-5 w-5 flex-shrink-0" style={{ color: "#4589ff" }} />
-        <h2 className="text-sm font-semibold text-text-primary tracking-wide truncate flex-1">
-          {item.label}
-        </h2>
-      </div>
+      {item ? (
+        /* ── Hovered item: sub-menu list ─────────────────────────────────── */
+        <>
+          <div className="flex items-center px-4 lg:px-5 pt-5 pb-1 flex-shrink-0 gap-2.5">
+            <item.icon className="h-5 w-5 flex-shrink-0" style={{ color: "#4589ff" }} />
+            <h2 className="text-sm font-semibold text-text-primary tracking-wide truncate flex-1">
+              {item.label}
+            </h2>
+          </div>
 
-      {/* ── Section description ───────────────────────────────────────────────── */}
-      {item.description && (
-        <p className="px-4 lg:px-5 pt-1 pb-4 text-xs text-text-secondary leading-relaxed">
-          {item.description}
-        </p>
-      )}
+          {item.description && (
+            <p className="px-4 lg:px-5 pt-1 pb-4 text-xs text-text-secondary leading-relaxed">
+              {item.description}
+            </p>
+          )}
+
+          <nav className="flex-1 overflow-y-auto px-2 lg:px-3 py-2 space-y-0.5">
+            {subItems.map((sub) => {
+              const SubIcon = sub.icon
+              return (
+                <a
+                  key={sub.id}
+                  href={sub.href}
+                  className={cn(
+                    "flex items-start transition-colors border-l-4",
+                    "px-2 lg:px-3 py-2 gap-x-3",
+                    "hover:bg-ui-background border-transparent hover:border-interactive",
+                  )}
+                >
+                  <SubIcon className="h-4 w-4 flex-shrink-0 mt-0.5" style={{ color: "#4589ff" }} />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium text-text-primary leading-snug truncate">{sub.name}</p>
+                    {sub.description && (
+                      <p className="text-xs text-text-secondary leading-relaxed mt-0.5 line-clamp-2">{sub.description}</p>
+                    )}
+                  </div>
+                </a>
+              )
+            })}
+          </nav>
+        </>
+      ) : (
+        /* ── Default state: welcome + CTA + doc links ───────────────────── */
+        <div className="flex flex-col h-full">
+          {/* Header */}
+          <div className="px-5 pt-6 pb-5 border-b border-ui-border flex-shrink-0">
+            <div className="flex items-center gap-2.5 mb-3">
+              <div className="h-8 w-8 rounded-md bg-interactive flex items-center justify-center flex-shrink-0">
+                <Home className="h-4 w-4 text-white" />
+              </div>
+              <span className="text-sm font-semibold text-text-primary truncate">{defaultTitle}</span>
+            </div>
+
+            {defaultDescription && (
+              <p className="text-xs text-text-secondary leading-relaxed mb-4">
+                {defaultDescription}
+              </p>
+            )}
 
-      {/* ── Nav items ────────────────────────────────────────────────────────── */}
-      <nav className="flex-1 overflow-y-auto px-2 lg:px-3 py-2 space-y-0.5">
-        {subItems.map((sub) => {
-          const SubIcon = sub.icon
-          return (
             <a
-              key={sub.id}
-              href={sub.href}
-              className={cn(
-                "flex items-start transition-colors border-l-4",
-                "px-2 lg:px-3 py-2 gap-x-3",
-                "hover:bg-ui-background border-transparent hover:border-interactive",
-              )}
+              href={homePath}
+              className="flex items-center justify-center gap-2 w-full px-3 py-2 bg-interactive hover:bg-interactive-hover text-white text-sm font-medium transition-colors"
             >
-              <SubIcon className="h-4 w-4 flex-shrink-0 mt-0.5" style={{ color: "#4589ff" }} />
-              <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium text-text-primary leading-snug truncate">{sub.name}</p>
-                {sub.description && (
-                  <p className="text-xs text-text-secondary leading-relaxed mt-0.5 line-clamp-2">{sub.description}</p>
-                )}
-              </div>
+              <Home className="h-4 w-4 flex-shrink-0" />
+              Tableau de bord
             </a>
-          )
-        })}
-      </nav>
+          </div>
+
+          {/* Doc / resource links */}
+          {defaultLinks.length > 0 && (
+            <nav className="flex-1 overflow-y-auto px-2 lg:px-3 py-3 space-y-0.5">
+              <p className="px-2 pb-1 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
+                Ressources
+              </p>
+              {defaultLinks.map((link, i) => {
+                const LinkIcon = link.icon ?? ExternalLink
+                const isExternal = link.href.startsWith("http://") || link.href.startsWith("https://")
+                return (
+                  <a
+                    key={i}
+                    href={link.href}
+                    {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                    className="flex items-start gap-x-3 px-2 lg:px-3 py-2 border-l-4 border-transparent hover:bg-ui-background hover:border-interactive transition-colors"
+                  >
+                    <LinkIcon className="h-4 w-4 flex-shrink-0 mt-0.5 text-text-secondary" />
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-text-primary leading-snug flex items-center gap-1.5">
+                        {link.label}
+                        {isExternal && <ExternalLink className="h-3 w-3 text-text-secondary flex-shrink-0" />}
+                      </p>
+                      {link.description && (
+                        <p className="text-xs text-text-secondary leading-relaxed mt-0.5 line-clamp-2">{link.description}</p>
+                      )}
+                    </div>
+                  </a>
+                )
+              })}
+            </nav>
+          )}
+        </div>
+      )}
     </div>
   )
 }

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

@@ -7,7 +7,9 @@ import { Logo } from "../../ui/logo"
 import { type MainMenuItem, type SidebarMenus } from "./data"
 import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
 import { useIsMobile } from "../../../hooks/use-mobile"
-import { MainSidebarFlyout } from "./main-sidebar-flyout"
+import { MainSidebarFlyout, type FlyoutDefaultLink } from "./main-sidebar-flyout"
+
+export type { FlyoutDefaultLink }
 
 export type SidebarMode = 'expanded' | 'minimized' | 'hidden'
 
@@ -21,6 +23,9 @@ interface MainSidebarProps {
   onSecondarySidebarOpen?: () => void
   sidebarMenus?: SidebarMenus
   mainMenuItems?: MainMenuItem[]
+  flyoutDefaultTitle?:        string
+  flyoutDefaultDescription?:  string
+  flyoutDefaultLinks?:        FlyoutDefaultLink[]
 }
 
 export function MainSidebar({
@@ -33,6 +38,9 @@ export function MainSidebar({
   onSecondarySidebarOpen,
   sidebarMenus = {},
   mainMenuItems = [],
+  flyoutDefaultTitle,
+  flyoutDefaultDescription,
+  flyoutDefaultLinks = [],
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
   const isMobile = useIsMobile()
@@ -66,6 +74,40 @@ export function MainSidebar({
     setHoveredItem(item)
   }
 
+  const applyTemplateVars = (href: string): string => {
+    // Guard: SSR has no window/localStorage
+    if (typeof window === "undefined") return href
+    try {
+      const projRaw = localStorage.getItem("current-business-unit")
+      const envRaw  = localStorage.getItem("current-environment")
+      // Parse carefully: value may be null (not yet set), invalid JSON, or a non-object
+      const currentProject = typeof projRaw === "string"
+        ? (JSON.parse(projRaw)?.state?.currentProject ?? "")
+        : ""
+      const currentEnv = typeof envRaw === "string"
+        ? (JSON.parse(envRaw)?.state?.currentEnv ?? "")
+        : ""
+      // Only replace when the value is a non-empty string; if empty, leave the
+      // placeholder in the URL so the link is visibly broken rather than silently
+      // producing a protocol-relative URL (e.g. "//path") that navigates incorrectly.
+      let result = href
+      if (currentProject && typeof currentProject === "string") {
+        result = result.replace(/\$\{currentProject\}/g, currentProject)
+      }
+      if (currentEnv && typeof currentEnv === "string") {
+        result = result.replace(/\$\{currentEnv\}/g, currentEnv)
+      }
+      return result
+    } catch {
+      // localStorage blocked (Safari private mode), JSON parse error, etc. — return unchanged
+      return href
+    }
+  }
+
+  const safeUrlPathname = (url: string): string => {
+    try { return new URL(url).pathname } catch { return "/" }
+  }
+
   const handleMenuClick = (item: MainMenuItem) => {
     const menuId = item.id
     const hasSubMenu = (sidebarMenus[menuId]?.length ?? 0) > 0
@@ -81,24 +123,34 @@ export function MainSidebar({
     if (!isMinimized && onSecondarySidebarOpen) onSecondarySidebarOpen()
 
     if (item.href) {
-      const path = item.href.startsWith('http://') || item.href.startsWith('https://')
-        ? new URL(item.href).pathname
-        : item.href
-      window.location.href = path
+      try {
+        const resolved = applyTemplateVars(item.href)
+        const path = resolved.startsWith('http://') || resolved.startsWith('https://')
+          ? safeUrlPathname(resolved)
+          : resolved
+        window.location.href = path
+      } catch {
+        // navigation error — don't crash the sidebar
+      }
     }
 
     if (!isMinimized) onToggle()
   }
 
   const buildSubItemHref = (menuId: string, href: string): string => {
-    if (href.startsWith('http://') || href.startsWith('https://')) {
-      return new URL(href).pathname
+    try {
+      const resolved = applyTemplateVars(href)
+      if (resolved.startsWith('http://') || resolved.startsWith('https://')) {
+        return safeUrlPathname(resolved)
+      }
+      const cleanHref = resolved.replace(/^\//, '')
+      const cleanBase = (main_base_url.startsWith('http://') || main_base_url.startsWith('https://'))
+        ? safeUrlPathname(main_base_url).replace(/\/$/, '')
+        : (main_base_url ?? "").replace(/\/$/, '')
+      return `${cleanBase}/${menuId}/${cleanHref}`
+    } catch {
+      return "/"
     }
-    const cleanHref = href.replace(/^\//, '')
-    const cleanBase = (main_base_url.startsWith('http://') || main_base_url.startsWith('https://'))
-      ? new URL(main_base_url).pathname.replace(/\/$/, '')
-      : main_base_url.replace(/\/$/, '')
-    return `${cleanBase}/${menuId}/${cleanHref}`
   }
 
   const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string) => {
@@ -119,7 +171,8 @@ export function MainSidebar({
         The flyout is never "in front of" the nav; it's always to its right.
       */}
       <div className={cn(
-        "fixed left-0 top-0 h-full z-50 flex",
+        "fixed left-0 z-50 flex",
+        isMinimized ? "top-14 h-[calc(100%-3.5rem)]" : "top-0 h-full",
         "transform transition-all duration-300 ease-in-out",
         isMinimized ? "translate-x-0" : (isOpen ? "translate-x-0" : "-translate-x-full"),
       )}>
@@ -131,27 +184,20 @@ export function MainSidebar({
           // Shadow only when flyout is not open (avoid double shadow)
           !hoveredItem && !isMinimized && "shadow-xl",
         )}>
-          {/* Header */}
-          <div className={cn(
-            "flex items-center h-14 bg-white sticky top-0 z-10 flex-shrink-0",
-            isMinimized ? "justify-center px-2" : "justify-between px-3 lg:px-4",
-          )}>
-            {isMinimized ? (
-              <Logo className="text-xl font-semibold text-text-primary" iconOnly href={main_base_url} />
-            ) : (
-              <>
-                <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onToggle}
-                  className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </>
-            )}
-          </div>
+          {/* Header — only in overlay (non-minimized) mode; logo lives in the global header */}
+          {!isMinimized && (
+            <div className="flex items-center justify-between h-14 bg-white sticky top-0 z-10 flex-shrink-0 px-3 lg:px-4">
+              <Logo className="text-2xl font-semibold text-text-primary" href={main_base_url} />
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onToggle}
+                className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
 
           {/* Nav items */}
           <nav className={cn("flex-1 space-y-0.5 lg:space-y-1", isMinimized ? "p-2" : "p-2 lg:p-3")}>
@@ -163,9 +209,14 @@ export function MainSidebar({
               const isFlyActive  = hoveredItem?.id === item.id
 
               const itemHref = !hasSubMenu && item.href
-                ? (item.href.startsWith('http://') || item.href.startsWith('https://')
-                    ? new URL(item.href).pathname
-                    : item.href)
+                ? (() => {
+                    try {
+                      const resolved = applyTemplateVars(item.href)
+                      return resolved.startsWith('http://') || resolved.startsWith('https://')
+                        ? safeUrlPathname(resolved)
+                        : resolved
+                    } catch { return item.href }
+                  })()
                 : undefined
 
               const itemCls = cn(
@@ -237,15 +288,23 @@ export function MainSidebar({
         </div>
 
         {/* ── Flyout — desktop only, flex child to the right of nav ─────────── */}
-        {!isMobile && hoveredItem && (
+        {/* Shown when the sidebar is open (default state) or an item is hovered (sub-menu state) */}
+        {!isMobile && (hoveredItem || (isOpen && !isMinimized)) && (
           <MainSidebarFlyout
             item={hoveredItem}
-            subItems={(sidebarMenus[hoveredItem.id] ?? []).map(sub => ({
-              ...sub,
-              href: buildSubItemHref(hoveredItem.id, sub.href),
-            }))}
+            subItems={hoveredItem
+              ? (sidebarMenus[hoveredItem.id] ?? []).map(sub => ({
+                  ...sub,
+                  href: buildSubItemHref(hoveredItem.id, sub.href),
+                }))
+              : []
+            }
             onMouseEnter={cancelCloseTimer}
             onMouseLeave={startCloseTimer}
+            main_base_url={main_base_url}
+            defaultTitle={flyoutDefaultTitle}
+            defaultDescription={flyoutDefaultDescription}
+            defaultLinks={flyoutDefaultLinks}
           />
         )}
 

package/components/layout/sidebar/sidebar.tsx

@@ -18,8 +18,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../../ui/tooltip"
-import { Menu } from "lucide-react"
-import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
@@ -232,7 +230,7 @@ interface SidebarProps {
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, mainMenuItems = [] }: SidebarProps = {}) {
+function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, mainMenuItems = [] }: SidebarProps = {}) {
   const pathname    = usePathname()
   const searchParams = useSearchParams()
   const router      = useRouter()
@@ -259,36 +257,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   return (
     <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"
+      className="h-full flex-shrink-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 ? (
-          <button type="button" onClick={toggleSidebar} title="Expand sidebar" className="flex items-center justify-center">
-            <Logo iconOnly />
-          </button>
-        ) : (
-          <>
-            <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>
-
       {/* Section label — hidden when collapsed */}
       {!isCollapsed && (
         injectedItems === undefined ? (

package/package.json

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