@orsetra/shared-ui 1.1.29 → 1.1.30

package/components/layout/index.ts

@@ -1,6 +1,6 @@
 // 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 } from './sidebar/data'
+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 { 
   Sidebar,
   SidebarContent,

package/components/layout/layout-container.tsx

@@ -1,14 +1,106 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { usePathname, useSearchParams, useParams } from "next/navigation"
 import { MainSidebar, type SidebarMode } from "./sidebar/main-sidebar"
 import { Sidebar, SidebarProvider, useSidebar } from "./sidebar/sidebar"
-import { type SidebarMenus, type MainMenuItem, type MenuApiResponse, resolveIcon } from "./sidebar/data"
+import { type SidebarMenus, type MainMenuItem, type MenuApiResponse, type OrgInfo, type Project, resolveIcon } from "./sidebar/data"
 import { UserMenu, Button, type UserMenuConfig } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
-import { Menu } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Menu, ChevronDown, Check } from "lucide-react"
+
+// ─── Dropdown Organisation / Projets ────────────────────────────────────────
+
+function OrgProjectDropdown({
+  org,
+  loadProjects,
+  currentProject,
+  onProjectChange,
+}: {
+  org: OrgInfo
+  loadProjects: () => Promise<Project[]>
+  currentProject?: string | null
+  onProjectChange: (id: string) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [projects, setProjects] = useState<Project[]>([])
+  const [loading, setLoading] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handleOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener("mousedown", handleOutside)
+    return () => document.removeEventListener("mousedown", handleOutside)
+  }, [open])
+
+  const handleToggle = async () => {
+    if (!open && projects.length === 0) {
+      setLoading(true)
+      try {
+        const data = await loadProjects()
+        setProjects(data)
+      } finally {
+        setLoading(false)
+      }
+    }
+    setOpen((v) => !v)
+  }
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={handleToggle}
+        className="flex items-center gap-2 h-9 px-3 text-sm text-text-primary hover:bg-ui-background transition-colors"
+      >
+        {org.logo ? (
+          <img src={org.logo} alt={org.nom} className="h-5 w-5 object-cover flex-shrink-0" />
+        ) : (
+          <div className="h-5 w-5 bg-interactive flex items-center justify-center text-white text-[10px] font-bold flex-shrink-0">
+            {org.nom.charAt(0).toUpperCase()}
+          </div>
+        )}
+        <span className="font-medium">{org.nom}</span>
+        <ChevronDown className={cn("h-3 w-3 text-text-secondary transition-transform duration-150", open && "rotate-180")} />
+      </button>
+
+      {open && (
+        <div className="absolute left-0 top-full bg-white border border-ui-border shadow-lg z-[100] min-w-[220px] max-h-[280px] overflow-y-auto">
+          {loading ? (
+            <div className="px-4 py-3 text-sm text-text-secondary">Chargement…</div>
+          ) : projects.length === 0 ? (
+            <div className="px-4 py-3 text-sm text-text-secondary">Aucun projet disponible</div>
+          ) : (
+            projects.map((project) => {
+              const isActive = currentProject === project.id
+              return (
+                <button
+                  key={project.id}
+                  onClick={() => { onProjectChange(project.id); setOpen(false) }}
+                  className={cn(
+                    "flex items-center gap-3 w-full px-4 py-2 text-sm text-left transition-colors border-l-4",
+                    isActive
+                      ? "bg-interactive/10 text-interactive font-medium border-interactive"
+                      : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
+                  )}
+                >
+                  <Check className={cn("h-4 w-4 flex-shrink-0", !isActive && "invisible")} />
+                  {project.name}
+                </button>
+              )
+            })
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
 
 interface LayoutContainerProps {
   main_base_url: string
@@ -19,12 +111,32 @@ interface LayoutContainerProps {
   mode?: SidebarMode
   userMenuConfig?: UserMenuConfig
   fetchMenus?: () => Promise<MenuApiResponse>
-  getSidebarMode?: (pathname: string,params: Record<string, string>, searchParams: URLSearchParams) => SidebarMode
+  getSidebarMode?: (pathname: string, params: Record<string, string>, searchParams: URLSearchParams) => SidebarMode
   getCurrentMenu?: (pathname: string, searchParams: URLSearchParams) => string
   getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
+  org?: OrgInfo
+  loadProjects?: () => Promise<Project[]>
+  currentProject?: string | null
+  onProjectChange?: (id: string) => void
 }
 
-function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'expanded', userMenuConfig, main_base_url, fetchMenus, getSidebarMode, getCurrentMenu, getCurrentMenuItem }: LayoutContainerProps) {
+function LayoutContent({
+  children,
+  sidebarMenus = {},
+  user,
+  onSignOut,
+  mode = 'expanded',
+  userMenuConfig,
+  main_base_url,
+  fetchMenus,
+  getSidebarMode,
+  getCurrentMenu,
+  getCurrentMenuItem,
+  org,
+  loadProjects,
+  currentProject,
+  onProjectChange,
+}: LayoutContainerProps) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const params = useParams()
@@ -32,23 +144,21 @@ function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'e
   const isMobile = useIsMobile()
   const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
   const [currentMenu, setCurrentMenu] = useState<string>("overview")
-  
-  // Use custom mode function if provided, otherwise use prop
+
   const effectiveMode = getSidebarMode ? getSidebarMode(pathname, params as Record<string, string>, searchParams) : mode
   const isMinimized = effectiveMode === 'minimized'
-  // Force hidden mode on mobile
   const isHidden = effectiveMode === 'hidden' || isMobile
 
   const [mainMenuItems, setMainMenuItems] = useState<MainMenuItem[]>([])
   const [fetchedSidebarMenus, setFetchedSidebarMenus] = useState<SidebarMenus>({})
   const [sectionLabels, setSectionLabels] = useState<Record<string, string>>({})
+  const [fetchedUserMenu, setFetchedUserMenu] = useState<Record<string, { id: string; label: string; href: string; icon: string }[]>>({})
 
-  // Load menus from API when fetchMenus is provided
   useEffect(() => {
     if (!fetchMenus) return
     fetchMenus().then((response) => {
       if (!response.success) return
-      const { main, subMenus } = response.data
+      const { main, subMenus, userMenu: apiUserMenu } = response.data
 
       setMainMenuItems(
         main.map((item) => ({
@@ -71,41 +181,53 @@ function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'e
       })
       setFetchedSidebarMenus(menus)
       setSectionLabels(labels)
+
+      if (apiUserMenu) {
+        const userMenuMap: Record<string, { id: string; label: string; href: string; icon: string }[]> = {}
+        Object.entries(apiUserMenu).forEach(([key, subMenu]) => {
+          userMenuMap[key] = subMenu.items.map((item) => ({
+            id: item.id,
+            label: item.label,
+            href: item.href,
+            icon: item.icon,
+          }))
+        })
+        setFetchedUserMenu(userMenuMap)
+      }
     })
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Effective sidebarMenus: fetched provides section keys, prop provides items key (micro apps)
   const effectiveSidebarMenus: SidebarMenus = { ...fetchedSidebarMenus, ...sidebarMenus }
 
-  // Close sidebar on route change (mobile)
+  // UserMenuConfig : priorité API (context-sensitive par currentMenu), sinon prop
+  const effectiveUserMenuConfig: UserMenuConfig | undefined =
+    fetchedUserMenu[currentMenu]?.length
+      ? {
+          items: fetchedUserMenu[currentMenu].map((item) => ({
+            id: item.id,
+            label: item.label,
+            href: item.href,
+            icon: resolveIcon(item.icon),
+          })),
+        }
+      : userMenuConfig
+
   useEffect(() => {
-    if (isMobile) {
-      setIsMainSidebarOpen(false)
-    }
+    if (isMobile) setIsMainSidebarOpen(false)
   }, [pathname, isMobile])
 
   useEffect(() => {
-    // Use custom menu function if provided, otherwise use default getMenuFromPath
     const contextualMenu = getCurrentMenu ? getCurrentMenu(pathname, searchParams) : getMenuFromPath(pathname)
     setCurrentMenu(contextualMenu)
   }, [pathname, searchParams, getCurrentMenu])
 
-  const handleMainSidebarToggle = () => {
-    setIsMainSidebarOpen(!isMainSidebarOpen)
-  }
-
-  const handleMenuSelect = (menu: string) => {
-    setCurrentMenu(menu)
-  }
-
-  const handleSecondarySidebarOpen = () => {
-    setOpen(true)
-  }
+  const handleMainSidebarToggle = () => setIsMainSidebarOpen((v) => !v)
+  const handleMenuSelect = (menu: string) => setCurrentMenu(menu)
+  const handleSecondarySidebarOpen = () => setOpen(true)
 
   return (
     <div className="flex h-screen w-full bg-white">
-      {/* Desktop sidebar - hidden on mobile (isHidden is true on mobile) */}
       {!isMinimized && !isHidden && (
         <Sidebar
           currentMenu={currentMenu}
@@ -114,10 +236,10 @@ function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'e
           main_base_url={main_base_url}
           sectionLabels={sectionLabels}
           getCurrentMenuItem={getCurrentMenuItem}
+          org={org}
         />
       )}
 
-      {/* MainSidebar - always available, opens as overlay when isHidden */}
       <MainSidebar
         main_base_url={main_base_url}
         isOpen={isMainSidebarOpen}
@@ -133,7 +255,7 @@ function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'e
       <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">
-            {/* Menu button - shown when sidebar is hidden (including on mobile) */}
+            {/* Gauche : bouton menu (mobile/hidden) */}
             {isHidden ? (
               <Button
                 variant="ghost"
@@ -147,11 +269,23 @@ function LayoutContent({ children, sidebarMenus = {}, user, onSignOut, mode = 'e
             ) : (
               <div />
             )}
-            <UserMenu
-              username={user?.profile?.email || user?.profile?.preferred_username}
-              onSignOut={onSignOut || (() => {})}
-              menuConfig={userMenuConfig}
-            />
+
+            {/* Droite : dropdown organisation + user menu */}
+            <div className="flex items-center gap-1">
+              {org && loadProjects && onProjectChange && (
+                <OrgProjectDropdown
+                  org={org}
+                  loadProjects={loadProjects}
+                  currentProject={currentProject}
+                  onProjectChange={onProjectChange}
+                />
+              )}
+              <UserMenu
+                username={user?.profile?.email || user?.profile?.preferred_username}
+                onSignOut={onSignOut || (() => {})}
+                menuConfig={effectiveUserMenuConfig}
+              />
+            </div>
           </div>
         </header>
 

package/components/layout/sidebar/data.tsx

@@ -42,6 +42,17 @@ export interface SidebarMenus {
   [key: string]: SubMenuItem[]
 }
 
+export interface OrgInfo {
+  nom: string
+  id: string
+  logo?: string
+}
+
+export interface Project {
+  id: string
+  name: string
+}
+
 // API response types
 export interface ApiMainMenuItem {
   id: string
@@ -65,6 +76,7 @@ export interface ApiSubMenu {
 export interface ApiMenuData {
   main: ApiMainMenuItem[]
   subMenus: Record<string, ApiSubMenu>
+  userMenu?: Record<string, ApiSubMenu>
 }
 
 export interface MenuApiResponse {

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

@@ -59,28 +59,42 @@ export function MainSidebar({
       onSecondarySidebarOpen()
     }
 
-      const targetUrl = `${main_base_url}/${menuId}`
-      const path = targetUrl.startsWith('http://') || targetUrl.startsWith('https://')
-        ? new URL(targetUrl).pathname
-        : targetUrl
-      window.location.href = path
-    
+    const targetUrl = `${main_base_url}/${menuId}`
+    const path = targetUrl.startsWith('http://') || targetUrl.startsWith('https://')
+      ? new URL(targetUrl).pathname
+      : targetUrl
+    window.location.href = path
+
     if (!isMinimized) {
       onToggle()
     }
   }
 
-  const handleSubMenuClick = (e: React.MouseEvent, href: string) => {
+  const buildSubItemHref = (menuId: string, href: string): string => {
+    if (href.startsWith('http://') || href.startsWith('https://')) {
+      return new URL(href).pathname
+    }
+    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) => {
     e.preventDefault()
-    const path = href.startsWith('http://') || href.startsWith('https://')
-      ? new URL(href).pathname
-      : href
-    window.location.href = path
+    window.location.href = buildSubItemHref(menuId, href)
     setHoveredMenu(null)
   }
 
   return (
     <>
+      {isOpen && !isMinimized && !hoveredMenu && (
+        <div
+          className="fixed inset-0 bg-black/40 z-40"
+          onClick={onToggle}
+        />
+      )}
 
       <div className={cn(
         "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
@@ -112,10 +126,11 @@ export function MainSidebar({
           "overflow-y-auto h-full",
           isMinimized ? "p-2" : "p-3"
         )}>
-          <nav className="space-y-2">
+          <nav className="space-y-1">
             {mainMenuItems.map((item) => {
               const Icon = item.icon
               const hasSubMenu = sidebarMenus[item.id]?.length > 0
+              const isActive = currentMenu === item.id
               return (
                 <div
                   key={item.id}
@@ -126,21 +141,19 @@ export function MainSidebar({
                   <button
                     onClick={() => handleMenuClick(item.id)}
                     className={cn(
-                      "w-full flex items-center text-left rounded-lg transition-all duration-200 font-medium",
-                      isMinimized
-                        ? "justify-center p-3"
-                        : "gap-3 px-3 py-3",
-                      currentMenu === item.id
-                        ? "bg-interactive/10 text-interactive"
-                        : "text-text-primary hover:bg-ui-background hover:text-text-primary"
+                      "w-full flex items-center text-left transition-all duration-150 font-medium",
+                      isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
+                      isActive
+                        ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
+                        : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
                     )}
                     title={isMinimized ? item.label : undefined}
                   >
                     <Icon className={cn(
-                      "h-6 w-6",
-                      currentMenu === item.id ? "text-interactive" : "text-text-secondary"
+                      "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-sm">{item.label}</span>}
                   </button>
                 </div>
               )
@@ -154,24 +167,25 @@ export function MainSidebar({
           if (!activeItem) return null
           return (
             <div
-              className="fixed bg-white border border-ui-border rounded-lg shadow-xl z-[9999] min-w-[200px] py-2"
+              className="fixed bg-white border border-ui-border shadow-lg z-[9999] min-w-[220px] py-1"
               style={{ top: flyoutPos.top, left: flyoutPos.left }}
               onMouseEnter={() => handleFlyoutMouseEnter(hoveredMenu)}
               onMouseLeave={handleFlyoutMouseLeave}
             >
-              <div className="absolute -left-[5px] top-[18px] w-[10px] h-[10px] bg-white border-l border-t border-ui-border -rotate-45" />
+              {/* Arrow pointing left */}
+              <div className="absolute -left-[5px] top-[14px] w-[10px] h-[10px] bg-white border-l border-t border-ui-border -rotate-45" />
               <div className="px-4 py-2 border-b border-ui-border">
-                <h3 className="text-sm font-semibold text-text-primary">{activeItem.label}</h3>
+                <p className="text-xs font-semibold text-text-primary uppercase tracking-wide">{activeItem.label}</p>
               </div>
-              <div className="py-1">
+              <div>
                 {sidebarMenus[hoveredMenu].map((subItem) => (
                   <a
                     key={subItem.id}
-                    href={subItem.href}
-                    onClick={(e) => handleSubMenuClick(e, subItem.href)}
-                    className="flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline"
+                    href={buildSubItemHref(hoveredMenu, subItem.href)}
+                    onClick={(e) => handleSubMenuClick(e, hoveredMenu, subItem.href)}
+                    className="flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-4 border-transparent hover:border-interactive"
                   >
-                    <subItem.icon className="h-4 w-4" />
+                    <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
                     {subItem.name}
                   </a>
                 ))}

package/components/layout/sidebar/sidebar.tsx

@@ -21,12 +21,11 @@ import {
 import {
   Settings,
   Menu,
-  Building2,
   User,
   ChevronUp,
 } from "lucide-react"
 import { Logo } from "../../ui/logo"
-import { type SidebarMenus, type SubMenuItem } from "./data"
+import { type SidebarMenus, type SubMenuItem, type OrgInfo } from "./data"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
@@ -173,11 +172,12 @@ interface SidebarProps {
   main_base_url?: string
   sectionLabels?: Record<string, string>
   getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
+  org?: OrgInfo
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, org }: SidebarProps = {}) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const { state } = useSidebar()
@@ -252,13 +252,13 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
               href={item.href}
               onClick={handleClick}
               className={cn(
-                "flex items-center px-3 py-2 text-sm rounded-md gap-x-3 transition-colors",
+                "flex items-center px-3 py-2 text-sm gap-x-3 transition-colors border-l-4",
                 isActive
-                  ? "bg-interactive/10 text-interactive font-medium"
-                  : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
+                  ? "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="h-4 w-4" />
+              <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-text-secondary")} />
               {item.name}
             </Link>
           )
@@ -269,25 +269,34 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
       <div className="relative border-t border-ui-border px-3 py-3" ref={settingsRef}>
         {/* Dropdown vers le haut */}
         {settingsOpen && (
-          <div className="absolute bottom-full left-2 right-2 mb-1 bg-gray-50 border border-ui-border rounded-none shadow-lg z-50">
-            <div className="py-1">
-              <Link
-                href={`${main_base_url}/organization`}
-                onClick={() => setSettingsOpen(false)}
-                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"
-              >
-                <Building2 className="h-4 w-4" />
-                Organization
-              </Link>
-              <Link
-                href={`${main_base_url}/profile`}
-                onClick={() => setSettingsOpen(false)}
-                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"
-              >
-                <User className="h-4 w-4" />
-                Compte
-              </Link>
-            </div>
+          <div className="absolute bottom-full left-0 right-0 mb-0 bg-white border border-ui-border shadow-lg z-50">
+            {/* Organisation */}
+            <Link
+              href={`${main_base_url}/organization`}
+              onClick={() => setSettingsOpen(false)}
+              className="flex items-center gap-3 px-3 py-3 hover:bg-ui-background transition-colors border-b border-ui-border no-underline"
+            >
+              {org?.logo ? (
+                <img src={org.logo} alt={org.nom} className="h-8 w-8 object-cover flex-shrink-0" />
+              ) : (
+                <div className="h-8 w-8 bg-interactive flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
+                  {org?.nom?.charAt(0)?.toUpperCase() ?? 'O'}
+                </div>
+              )}
+              <div className="flex flex-col min-w-0">
+                <span className="text-xs text-text-secondary leading-none mb-0.5">Organisation</span>
+                <span className="text-sm font-medium text-text-primary truncate">{org?.nom ?? 'Organisation'}</span>
+              </div>
+            </Link>
+            {/* Paramètres du compte */}
+            <Link
+              href={`${main_base_url}/profile`}
+              onClick={() => setSettingsOpen(false)}
+              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"
+            >
+              <User className="h-4 w-4 flex-shrink-0" />
+              Paramètres du compte
+            </Link>
           </div>
         )}
         <button

package/package.json

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