@orsetra/shared-ui 1.1.30 → 1.1.32

package/components/layout/layout-container.tsx

@@ -14,21 +14,27 @@ import { Menu, ChevronDown, Check } 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)
@@ -114,7 +122,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 +140,7 @@ function LayoutContent({
   getSidebarMode,
   getCurrentMenu,
   getCurrentMenuItem,
-  org,
+  loadOrg,
   loadProjects,
   currentProject,
   onProjectChange,
@@ -227,7 +235,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 +244,7 @@ function LayoutContent({
           main_base_url={main_base_url}
           sectionLabels={sectionLabels}
           getCurrentMenuItem={getCurrentMenuItem}
-          org={org}
+          loadOrg={loadOrg}
         />
       )}
 
@@ -272,9 +280,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/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">
@@ -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/package.json

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