@orsetra/shared-ui 1.1.30 → 1.1.33

package/components/layout/layout-container.tsx

@@ -9,26 +9,32 @@ import { UserMenu, Button, type UserMenuConfig } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
 import { useIsMobile } from "../../hooks/use-mobile"
 import { cn } from "../../lib/utils"
-import { Menu, ChevronDown, Check } from "lucide-react"
+import { Menu, ChevronDown } from "lucide-react"
 
 // ─── Dropdown Organisation / Projets ────────────────────────────────────────
 
 function OrgProjectDropdown({
-  org,
+  loadOrg,
   loadProjects,
   currentProject,
   onProjectChange,
 }: {
-  org: OrgInfo
+  loadOrg: () => Promise<OrgInfo>
   loadProjects: () => Promise<Project[]>
   currentProject?: string | null
   onProjectChange: (id: string) => void
 }) {
+  const [org, setOrg] = useState<OrgInfo | null>(null)
   const [open, setOpen] = useState(false)
   const [projects, setProjects] = useState<Project[]>([])
   const [loading, setLoading] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    loadOrg().then(setOrg).catch(() => {})
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useEffect(() => {
     if (!open) return
     function handleOutside(e: MouseEvent) {
@@ -38,6 +44,8 @@ function OrgProjectDropdown({
     return () => document.removeEventListener("mousedown", handleOutside)
   }, [open])
 
+  if (!org) return null
+
   const handleToggle = async () => {
     if (!open && projects.length === 0) {
       setLoading(true)
@@ -69,7 +77,7 @@ function OrgProjectDropdown({
       </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">
+        <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 bg-white border border-ui-border shadow-lg z-[100] w-56 max-h-[280px] overflow-y-auto">
           {loading ? (
             <div className="px-4 py-3 text-sm text-text-secondary">Chargement…</div>
           ) : projects.length === 0 ? (
@@ -82,14 +90,19 @@ function OrgProjectDropdown({
                   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",
+                    "flex items-center gap-3 w-full px-4 py-2 text-sm text-left transition-colors",
                     isActive
-                      ? "bg-interactive/10 text-interactive font-medium border-interactive"
-                      : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
+                      ? "bg-interactive/10 text-interactive font-medium"
+                      : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
                   )}
                 >
-                  <Check className={cn("h-4 w-4 flex-shrink-0", !isActive && "invisible")} />
-                  {project.name}
+                  <div className={cn(
+                    "h-3 w-3 rounded-full flex-shrink-0 ring-2",
+                    isActive
+                      ? "bg-interactive ring-interactive/30"
+                      : "bg-transparent ring-transparent"
+                  )} />
+                  <span>{project.name}</span>
                 </button>
               )
             })
@@ -114,7 +127,7 @@ interface LayoutContainerProps {
   getSidebarMode?: (pathname: string, params: Record<string, string>, searchParams: URLSearchParams) => SidebarMode
   getCurrentMenu?: (pathname: string, searchParams: URLSearchParams) => string
   getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
-  org?: OrgInfo
+  loadOrg?: () => Promise<OrgInfo>
   loadProjects?: () => Promise<Project[]>
   currentProject?: string | null
   onProjectChange?: (id: string) => void
@@ -132,7 +145,7 @@ function LayoutContent({
   getSidebarMode,
   getCurrentMenu,
   getCurrentMenuItem,
-  org,
+  loadOrg,
   loadProjects,
   currentProject,
   onProjectChange,
@@ -227,7 +240,7 @@ function LayoutContent({
   const handleSecondarySidebarOpen = () => setOpen(true)
 
   return (
-    <div className="flex h-screen w-full bg-white">
+    <div className="flex h-screen w-full bg-white overflow-visible">
       {!isMinimized && !isHidden && (
         <Sidebar
           currentMenu={currentMenu}
@@ -236,7 +249,7 @@ function LayoutContent({
           main_base_url={main_base_url}
           sectionLabels={sectionLabels}
           getCurrentMenuItem={getCurrentMenuItem}
-          org={org}
+          loadOrg={loadOrg}
         />
       )}
 
@@ -272,9 +285,9 @@ function LayoutContent({
 
             {/* Droite : dropdown organisation + user menu */}
             <div className="flex items-center gap-1">
-              {org && loadProjects && onProjectChange && (
+              {loadOrg && loadProjects && onProjectChange && (
                 <OrgProjectDropdown
-                  org={org}
+                  loadOrg={loadOrg}
                   loadProjects={loadProjects}
                   currentProject={currentProject}
                   onProjectChange={onProjectChange}

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

@@ -83,19 +83,24 @@ export function PageWithSidePanel({
         <>
           <div
             className={cn(
-              "hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width] duration-300 ease-in-out",
-              isOpen && showBorder && "border-l border-ibm-gray-40",
+              "hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width,border-color] duration-300 ease-in-out",
+              showBorder ? "border-l" : "",
+              showBorder && isOpen ? "border-ibm-gray-40" : "border-transparent",
               isOpen ? panelWidthClass : "w-0",
               sidePanelClassName
             )}
           >
             {/* Inner wrapper at fixed width to prevent content reflow during animation */}
-            <div className={`flex flex-col h-full bg-white ${panelWidthClass}`}>
+            <div className={cn(
+              `flex flex-col h-full bg-white ${panelWidthClass}`,
+              "transition-opacity duration-200 ease-in-out",
+              isOpen ? "opacity-100 delay-100" : "opacity-0"
+            )}>
 
-              {/* Panel header */}
+              {/* Panel header — no bottom border */}
               {(sidePanelHeader || closable) && (
                 <div className={cn(
-                  "flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20",
+                  "flex items-center justify-between h-14 flex-shrink-0 px-4",
                   sidePanelHeaderClassName
                 )}>
                   <div className="flex-1 min-w-0">
@@ -122,10 +127,13 @@ export function PageWithSidePanel({
           </div>
 
           {/* Toggle button — fixed keeps it vertically centered in the viewport */}
-          {closable && !isOpen && (
+          {closable && (
             <button
-              onClick={handleOpen}
-              className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-colors duration-200"
+              onClick={isOpen ? handleClose : handleOpen}
+              className={cn(
+                "hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-[opacity,transform] duration-300 ease-in-out",
+                isOpen ? "opacity-0 pointer-events-none translate-x-2" : "opacity-100 translate-x-0"
+              )}
               aria-label="Open side panel"
             >
               <ChevronLeft className="h-4 w-4 text-ibm-gray-70" />

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

@@ -89,7 +89,7 @@ export function MainSidebar({
 
   return (
     <>
-      {isOpen && !isMinimized && !hoveredMenu && (
+      {isOpen && !isMinimized && (
         <div
           className="fixed inset-0 bg-black/40 z-40"
           onClick={onToggle}
@@ -153,7 +153,7 @@ export function MainSidebar({
                       "h-5 w-5 flex-shrink-0",
                       isActive ? "text-interactive" : "text-text-secondary"
                     )} />
-                    {!isMinimized && <span className="text-sm">{item.label}</span>}
+                    {!isMinimized && <span className="text-base">{item.label}</span>}
                   </button>
                 </div>
               )

package/components/layout/sidebar/sidebar.tsx

@@ -172,17 +172,29 @@ interface SidebarProps {
   main_base_url?: string
   sectionLabels?: Record<string, string>
   getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
-  org?: OrgInfo
+  loadOrg?: () => Promise<OrgInfo>
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, org }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, loadOrg }: SidebarProps = {}) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const { state } = useSidebar()
   const [settingsOpen, setSettingsOpen] = React.useState(false)
   const settingsRef = React.useRef<HTMLDivElement>(null)
+  const [orgData, setOrgData] = React.useState<OrgInfo | null>(null)
+  const [orgLoading, setOrgLoading] = React.useState(false)
+
+  // Load org lazily when settings panel opens
+  React.useEffect(() => {
+    if (settingsOpen && loadOrg && !orgData && !orgLoading) {
+      setOrgLoading(true)
+      loadOrg()
+        .then((data) => { setOrgData(data); setOrgLoading(false) })
+        .catch(() => setOrgLoading(false))
+    }
+  }, [settingsOpen, loadOrg, orgData, orgLoading])
 
   // Close dropdown on click outside
   React.useEffect(() => {
@@ -204,7 +216,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
     || []
 
   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"
+    <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">
@@ -248,7 +260,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           
           return (
             <Link
-              key={item.name}
+              key={item.id}
               href={item.href}
               onClick={handleClick}
               className={cn(
@@ -269,33 +281,41 @@ 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-0 right-0 mb-0 bg-white border border-ui-border shadow-lg z-50">
+          <div className="absolute bottom-full left-0 mb-3 bg-white border border-ui-border shadow-2xl z-50 min-w-[380px]">
+            {/* Flèche pointant vers le bas en direction du bouton Paramètres */}
+            <div className="absolute -bottom-[5px] left-6 w-[10px] h-[10px] bg-white border-r border-b border-ui-border rotate-45" />
+
             {/* 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"
+              className="flex items-center gap-4 px-5 py-4 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" />
+              {orgLoading ? (
+                <div className="h-14 w-14 bg-ui-background animate-pulse flex-shrink-0" />
+              ) : orgData?.logo ? (
+                <img src={orgData.logo} alt={orgData.nom} className="h-14 w-14 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 className="h-14 w-14 bg-interactive flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
+                  {orgData?.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>
+                <span className="text-xs text-text-secondary uppercase tracking-wide mb-1">Organisation</span>
+                <span className="text-base font-semibold text-text-primary truncate">
+                  {orgLoading ? '…' : (orgData?.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"
+              className="flex items-center gap-3 px-5 py-3 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
+              <User className="h-5 w-5 flex-shrink-0" />
+              <span>Paramètres du compte</span>
             </Link>
           </div>
         )}

package/components/ui/side-panel.tsx

@@ -66,7 +66,7 @@ const SidePanel = ({
           )}
         >
           {/* Header fixe */}
-          <div className="flex items-center justify-between border-b border-ibm-gray-20 px-6 py-4 flex-shrink-0">
+          <div className="flex items-center justify-between px-6 py-4 flex-shrink-0">
             <div className="flex-1">
               <DialogPrimitive.Title className="text-lg font-semibold text-ibm-gray-100">
                 {title}
@@ -92,7 +92,7 @@ const SidePanel = ({
           </div>
 
           {/* Footer fixe */}
-          <div className="flex items-center justify-end gap-3 border-t border-ibm-gray-20 px-6 py-4 flex-shrink-0">
+          <div className="flex items-center justify-end gap-3 px-6 py-4 flex-shrink-0">
             {actions}
           </div>
         </DialogPrimitive.Content>
@@ -140,7 +140,7 @@ const SidePanelHeader = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex items-center justify-between border-b border-ibm-gray-20 px-6 py-4 flex-shrink-0",
+      "flex items-center justify-between px-6 py-4 flex-shrink-0",
       className
     )}
     {...props}
@@ -191,7 +191,7 @@ const SidePanelFooter = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex items-center justify-end gap-3 border-t border-ibm-gray-20 px-6 py-4 flex-shrink-0",
+      "flex items-center justify-end gap-3 px-6 py-4 flex-shrink-0",
       className
     )}
     {...props}

package/package.json

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