@orsetra/shared-ui 1.1.32 → 1.1.34

package/components/layout/layout-container.tsx

@@ -9,7 +9,7 @@ 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, ChevronRight } from "lucide-react"
 
 // ─── Dropdown Organisation / Projets ────────────────────────────────────────
 
@@ -77,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 ? (
@@ -90,14 +90,20 @@ 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 justify-between w-full px-4 py-2.5 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"
+                      : "hover:bg-ui-background"
                   )}
                 >
-                  <Check className={cn("h-4 w-4 flex-shrink-0", !isActive && "invisible")} />
-                  {project.name}
+                  <div className="flex flex-col min-w-0">
+                    <span className={cn(
+                      "text-sm font-medium truncate",
+                      isActive ? "text-interactive" : "text-text-primary"
+                    )}>{project.name}</span>
+                    <span className="text-xs text-text-secondary truncate">{project.id}</span>
+                  </div>
+                  <ChevronRight className="h-3.5 w-3.5 text-text-secondary flex-shrink-0 ml-2" />
                 </button>
               )
             })

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

@@ -23,6 +23,7 @@ import {
   Menu,
   User,
   ChevronUp,
+  ChevronRight,
 } from "lucide-react"
 import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type OrgInfo } from "./data"
@@ -260,7 +261,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           
           return (
             <Link
-              key={item.name}
+              key={item.id}
               href={item.href}
               onClick={handleClick}
               className={cn(
@@ -300,12 +301,13 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                   {orgData?.nom?.charAt(0)?.toUpperCase() ?? 'O'}
                 </div>
               )}
-              <div className="flex flex-col min-w-0">
+              <div className="flex flex-col min-w-0 flex-1">
                 <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>
+              <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0 opacity-40" />
             </Link>
 
             {/* Paramètres du compte */}
@@ -315,7 +317,8 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
               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-5 w-5 flex-shrink-0" />
-              <span>Paramètres du compte</span>
+              <span className="flex-1">Paramètres du compte</span>
+              <ChevronRight className="h-4 w-4 flex-shrink-0 opacity-40" />
             </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.32",
+  "version": "1.1.34",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",