@orsetra/shared-ui 1.9.2 → 1.10.0

package/components/layout/index.ts

@@ -1,6 +1,7 @@
 // Layout components exports
 export { MainSidebar, type SidebarMode } from './sidebar/main-sidebar'
-export { resolveIcon, type MainMenuItem, type SubMenuItem, type SidebarMenus, type MenuApiResponse, type ApiMenuData, type ApiMainMenuItem, type ApiSubMenuItem, type ApiSubMenu, type OrgInfo, type Project } from './sidebar/data'
+export { resolveIcon, type MainMenuItem, type SubMenuItem, type SidebarMenus, type SidebarMenuMeta, type MenuApiResponse, type ApiMenuData, type ApiMainMenuItem, type ApiSubMenuItem, type ApiSubMenu, type OrgInfo, type Project } from './sidebar/data'
+export { QuickAccessTracker } from './sidebar/quick-access-tracker'
 export { 
   Sidebar,
   SidebarContent,

package/components/layout/layout-container.tsx

@@ -80,7 +80,16 @@ function LayoutContent({
           icon: resolveIcon(item.icon),
         }))
         labels[key] = subMenu.header
-        meta[key] = { header: subMenu.header, description: subMenu.description }
+        meta[key] = {
+          header:      subMenu.header,
+          description: subMenu.description,
+          links:       subMenu.links?.map(l => ({
+            label:       l.label,
+            href:        l.href,
+            description: l.description,
+            icon:        l.icon,
+          })),
+        }
       })
       setFetchedSidebarMenus(menus)
       setSectionLabels(labels)

package/components/layout/sidebar/data.tsx

@@ -36,6 +36,7 @@ import {
   ArrowRightLeft,
   ArrowLeftRight,
   Puzzle,
+  LifeBuoy,
 } from "lucide-react"
 
 export interface MainMenuItem {
@@ -91,12 +92,15 @@ export interface ApiSubMenu {
   id:           string
   header:       string
   description?: string
+  /** Resource/doc links shown in the flyout default state (distinct from nav items) */
+  links?:       ApiSubMenuItem[]
   items:        ApiSubMenuItem[]
 }
 
 export interface SidebarMenuMeta {
   header?:      string
   description?: string
+  links?:       Array<{ label: string; href: string; description?: string; icon?: string }>
 }
 
 export interface ApiMenuData {
@@ -156,6 +160,7 @@ const ICON_MAP: Record<string, LucideIcon> = {
   FileText,
   Code,
   Cloud,
+  LifeBuoy,
 }
 
 export function resolveIcon(name: string): LucideIcon {

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

@@ -3,13 +3,15 @@
 import * as React from "react"
 import { cn } from "../../../lib/utils"
 import type { MainMenuItem, SubMenuItem } from "./data"
+import { resolveIcon } from "./data"
 import { Home, ExternalLink, type LucideIcon } from "lucide-react"
+import type { QuickAccessItem } from "../../../hooks/use-quick-access"
 
 export interface FlyoutDefaultLink {
   label:        string
   href:         string
   description?: string
-  icon?:        LucideIcon
+  icon?:        LucideIcon | string
 }
 
 interface MainSidebarFlyoutProps {
@@ -21,6 +23,7 @@ interface MainSidebarFlyoutProps {
   defaultTitle?:       string
   defaultDescription?: string
   defaultLinks?:       FlyoutDefaultLink[]
+  quickAccessItems?:   QuickAccessItem[]
 }
 
 export function MainSidebarFlyout({
@@ -32,6 +35,7 @@ export function MainSidebarFlyout({
   defaultTitle = "Camel X Platform",
   defaultDescription,
   defaultLinks = [],
+  quickAccessItems = [],
 }: MainSidebarFlyoutProps) {
   const homePath = React.useMemo(() => {
     if (!main_base_url) return "/"
@@ -44,6 +48,8 @@ export function MainSidebarFlyout({
     }
   }, [main_base_url])
 
+  const hasQuickAccess = quickAccessItems.length > 0
+
   return (
     <div
       onMouseEnter={onMouseEnter}
@@ -91,6 +97,33 @@ export function MainSidebarFlyout({
             })}
           </nav>
         </>
+      ) : hasQuickAccess ? (
+        /* ── Quick access: pages recently visited ────────────────────────── */
+        <div className="flex flex-col h-full items-center justify-center px-6 gap-6">
+          <div className="w-full">
+            <p className="px-2 pb-1 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
+              Accès rapide
+            </p>
+            <nav className="space-y-0.5">
+              {quickAccessItems.map((qa) => {
+                const QAIcon = qa.icon ? resolveIcon(qa.icon) : null
+                return (
+                  <a
+                    key={qa.id}
+                    href={qa.href}
+                    className="flex items-center gap-x-3 px-2 py-2 border-l-4 border-transparent hover:bg-ui-background hover:border-interactive transition-colors"
+                  >
+                    {QAIcon
+                      ? <QAIcon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
+                      : <span className="h-4 w-4 flex-shrink-0" />
+                    }
+                    <p className="text-sm font-medium text-text-primary leading-snug truncate">{qa.label}</p>
+                  </a>
+                )
+              })}
+            </nav>
+          </div>
+        </div>
       ) : (
         /* ── Default state: centré verticalement ────────────────────────── */
         <div className="flex flex-col h-full items-center justify-center px-6 gap-6">
@@ -102,7 +135,7 @@ export function MainSidebarFlyout({
             )}
             <a
               href={homePath}
-              className="flex items-center justify-center gap-2 w-full px-3 py-2 border border-ui-border text-text-secondary hover:text-text-primary hover:bg-ui-background text-sm font-medium transition-colors"
+              className="flex items-center justify-center gap-2 w-full px-3 py-2 border border-interactive text-interactive hover:bg-interactive/10 text-sm font-medium transition-colors"
             >
               <Home className="h-4 w-4 flex-shrink-0" />
               Tableau de bord
@@ -116,8 +149,12 @@ export function MainSidebarFlyout({
                 Ressources
               </p>
               {defaultLinks.map((link, i) => {
-                const LinkIcon = link.icon ?? ExternalLink
                 const isExternal = link.href.startsWith("http://") || link.href.startsWith("https://")
+                const LinkIcon: LucideIcon = !link.icon
+                  ? ExternalLink
+                  : typeof link.icon === "string"
+                    ? resolveIcon(link.icon)
+                    : link.icon
                 return (
                   <a
                     key={i}

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

@@ -10,6 +10,7 @@ export type { SidebarMenuMeta }
 import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
 import { useIsMobile } from "../../../hooks/use-mobile"
 import { MainSidebarFlyout, type FlyoutDefaultLink } from "./main-sidebar-flyout"
+import { useQuickAccess } from "../../../hooks/use-quick-access"
 
 export type { FlyoutDefaultLink }
 
@@ -43,6 +44,7 @@ export function MainSidebar({
 }: MainSidebarProps) {
   const isMinimized = mode === 'minimized'
   const isMobile = useIsMobile()
+  const { items: quickAccessItems } = useQuickAccess()
 
   // Accordion — mobile only
   const [expandedMenu, setExpandedMenu] = React.useState<string | null>(null)
@@ -152,15 +154,15 @@ export function MainSidebar({
     }
   }
 
-  // Default flyout content derived from the "main" submenu in the loaded menu data
+  // Default flyout content derived from the menu metadata
   const mainMeta     = sidebarMenuMeta["main"] ?? {}
   const defaultTitle = mainMeta.header      ?? "Camel X Platform"
   const defaultDesc  = mainMeta.description ?? undefined
-  const defaultLinks: FlyoutDefaultLink[] = (sidebarMenus["main"] ?? []).map(sub => ({
-    label:       sub.name,
-    href:        sub.href,
-    description: sub.description,
-    icon:        sub.icon,
+  const defaultLinks: FlyoutDefaultLink[] = (mainMeta.links ?? []).map(l => ({
+    label:       l.label,
+    href:        l.href,
+    description: l.description,
+    icon:        l.icon,
   }))
 
   const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string) => {
@@ -315,6 +317,7 @@ export function MainSidebar({
             defaultTitle={defaultTitle}
             defaultDescription={defaultDesc}
             defaultLinks={defaultLinks}
+            quickAccessItems={quickAccessItems}
           />
         )}
 

package/components/layout/sidebar/quick-access-tracker.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { usePathname } from "next/navigation"
+import { useQuickAccess } from "../../../hooks/use-quick-access"
+
+interface QuickAccessTrackerProps {
+  /** Human-readable label shown in the quick-access list */
+  label:    string
+  /** Icon name (resolved via resolveIcon). Defaults to "Box". */
+  icon?:    string
+  /** Set to false to skip tracking this page (e.g. list/index pages) */
+  enabled?: boolean
+}
+
+/**
+ * Drop this inside any page or layout to register that page in the
+ * sidebar's quick-access list. Tracks on mount and whenever pathname changes.
+ * Renders nothing.
+ */
+export function QuickAccessTracker({ label, icon, enabled = true }: QuickAccessTrackerProps) {
+  const pathname = usePathname()
+  const { addItem } = useQuickAccess()
+  // Stable ref so the effect doesn't re-run when addItem reference changes
+  const addRef = useRef(addItem)
+  addRef.current = addItem
+
+  useEffect(() => {
+    if (!enabled || !label || !pathname) return
+    addRef.current({ label, href: pathname, icon })
+  // Re-track whenever the actual page changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, label, icon, enabled])
+
+  return null
+}

package/hooks/index.ts

@@ -3,3 +3,4 @@ export { useAuth } from './use-auth';
 export { useToast } from './use-toast';
 export { useIsMobile } from './use-mobile';
 export { useWebSocket } from './use-websocket';
+export { useQuickAccess, type QuickAccessItem } from './use-quick-access';

package/hooks/use-quick-access.ts

@@ -0,0 +1,74 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+
+const STORAGE_KEY = "sidebar:quick-access"
+const MAX_ITEMS   = 4
+
+export interface QuickAccessItem {
+  id:    string
+  label: string
+  href:  string
+  icon?: string
+}
+
+function readStorage(): QuickAccessItem[] {
+  if (typeof window === "undefined") return []
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed)
+      ? parsed.filter(
+          (i): i is QuickAccessItem =>
+            i && typeof i.id === "string" && typeof i.label === "string" && typeof i.href === "string"
+        )
+      : []
+  } catch {
+    return []
+  }
+}
+
+function writeStorage(items: QuickAccessItem[]): void {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)) } catch {}
+}
+
+export function useQuickAccess() {
+  const [items, setItems] = useState<QuickAccessItem[]>(readStorage)
+
+  // Sync across tabs
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY) setItems(readStorage())
+    }
+    window.addEventListener("storage", onStorage)
+    return () => window.removeEventListener("storage", onStorage)
+  }, [])
+
+  const addItem = useCallback((item: Omit<QuickAccessItem, "id"> & { id?: string }) => {
+    setItems(prev => {
+      const id   = item.id ?? item.href
+      const next = [
+        { id, label: item.label, href: item.href, icon: item.icon },
+        ...prev.filter(i => i.href !== item.href),
+      ].slice(0, MAX_ITEMS)
+      writeStorage(next)
+      return next
+    })
+  }, [])
+
+  const removeItem = useCallback((href: string) => {
+    setItems(prev => {
+      const next = prev.filter(i => i.href !== href)
+      writeStorage(next)
+      return next
+    })
+  }, [])
+
+  const clearItems = useCallback(() => {
+    setItems([])
+    try { localStorage.removeItem(STORAGE_KEY) } catch {}
+  }, [])
+
+  return { items, addItem, removeItem, clearItems }
+}

package/package.json

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