@orsetra/shared-ui 1.1.33 → 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 } from "lucide-react"
+import { Menu, ChevronDown, ChevronRight } from "lucide-react"
 
 // ─── Dropdown Organisation / Projets ────────────────────────────────────────
 
@@ -90,19 +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",
+                    "flex items-center justify-between w-full px-4 py-2.5 text-left transition-colors",
                     isActive
-                      ? "bg-interactive/10 text-interactive font-medium"
-                      : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
+                      ? "bg-interactive/10"
+                      : "hover:bg-ui-background"
                   )}
                 >
-                  <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>
+                  <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/page-with-side-panel.tsx

@@ -83,24 +83,19 @@ 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,border-color] duration-300 ease-in-out",
-              showBorder ? "border-l" : "",
-              showBorder && isOpen ? "border-ibm-gray-40" : "border-transparent",
+              "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",
               isOpen ? panelWidthClass : "w-0",
               sidePanelClassName
             )}
           >
             {/* Inner wrapper at fixed width to prevent content reflow during animation */}
-            <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"
-            )}>
+            <div className={`flex flex-col h-full bg-white ${panelWidthClass}`}>
 
-              {/* Panel header — no bottom border */}
+              {/* Panel header */}
               {(sidePanelHeader || closable) && (
                 <div className={cn(
-                  "flex items-center justify-between h-14 flex-shrink-0 px-4",
+                  "flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20",
                   sidePanelHeaderClassName
                 )}>
                   <div className="flex-1 min-w-0">
@@ -127,13 +122,10 @@ export function PageWithSidePanel({
           </div>
 
           {/* Toggle button — fixed keeps it vertically centered in the viewport */}
-          {closable && (
+          {closable && !isOpen && (
             <button
-              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"
-              )}
+              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"
               aria-label="Open side panel"
             >
               <ChevronLeft className="h-4 w-4 text-ibm-gray-70" />

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"
@@ -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/package.json

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