@orsetra/shared-ui 1.2.4 → 1.3.1

package/components/layout/layout-container.tsx

@@ -1,328 +1,159 @@
-"use client"
-
-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, 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 { cn } from "../../lib/utils"
-import { Menu, ChevronDown, ChevronRight } from "lucide-react"
-
-// ─── Dropdown Organisation / Projets ────────────────────────────────────────
-
-function OrgProjectDropdown({
-  loadOrg,
-  loadProjects,
-  currentProject,
-  onProjectChange,
-}: {
-  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) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener("mousedown", handleOutside)
-    return () => document.removeEventListener("mousedown", handleOutside)
-  }, [open])
-
-  if (!org) return null
-
-  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.name} 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.name.charAt(0).toUpperCase()}
-          </div>
-        )}
-        <span className="font-medium">{org.name}</span>
-        <ChevronDown className={cn("h-3 w-3 text-text-secondary transition-transform duration-150", open && "rotate-180")} />
-      </button>
-
-      {open && (
-        <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 ? (
-            <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 justify-between w-full px-4 py-2.5 text-left transition-colors",
-                    isActive
-                      ? "bg-interactive/10"
-                      : "hover:bg-ui-background"
-                  )}
-                >
-                  <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>
-                  {isActive ? (
-                    <div className="h-5 w-5 bg-[#0f62fe] flex items-center justify-center flex-shrink-0 ml-2">
-                      <svg className="h-3 w-3 text-white" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <polyline points="2,6 5,9 10,3" />
-                      </svg>
-                    </div>
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5 text-text-secondary flex-shrink-0 ml-2" />
-                  )}
-                </button>
-              )
-            })
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ─── Layout ──────────────────────────────────────────────────────────────────
-
-interface LayoutContainerProps {
-  main_base_url: string
-  children: React.ReactNode
-  sidebarMenus?: SidebarMenus
-  user?: { profile?: { email?: string; preferred_username?: string } } | null
-  onSignOut?: () => void
-  mode?: SidebarMode
-  userMenuConfig?: UserMenuConfig
-  fetchMenus?: () => Promise<MenuApiResponse>
-  getSidebarMode?: (pathname: string, params: Record<string, string>, searchParams: URLSearchParams) => SidebarMode
-  getCurrentMenu?: (pathname: string, searchParams: URLSearchParams) => string
-  getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
-  loadOrg?: () => Promise<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,
-  loadOrg,
-  loadProjects,
-  currentProject,
-  onProjectChange,
-}: LayoutContainerProps) {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const params = useParams()
-  const { setOpen } = useSidebar()
-  const isMobile = useIsMobile()
-  const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
-  const [currentMenu, setCurrentMenu] = useState<string>("overview")
-
-  const effectiveMode = getSidebarMode ? getSidebarMode(pathname, params as Record<string, string>, searchParams) : mode
-  const isMinimized = effectiveMode === 'minimized'
-  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 }[]>>({})
-
-  useEffect(() => {
-    if (!fetchMenus) return
-    fetchMenus().then((response) => {
-      if (!response.success) return
-      const { main, subMenus, userMenu: apiUserMenu } = response.data
-
-      setMainMenuItems(
-        main.map((item) => ({
-          id: item.id,
-          label: item.label,
-          icon: resolveIcon(item.icon),
-        }))
-      )
-
-      const menus: SidebarMenus = {}
-      const labels: Record<string, string> = {}
-      Object.entries(subMenus).forEach(([key, subMenu]) => {
-        menus[key] = subMenu.items.map((item) => ({
-          id: item.id,
-          name: item.label,
-          href: item.href,
-          icon: resolveIcon(item.icon),
-        }))
-        labels[key] = subMenu.header
-      })
-      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
-  }, [])
-
-  const effectiveSidebarMenus: SidebarMenus = { ...fetchedSidebarMenus, ...sidebarMenus }
-
-  // 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)
-  }, [pathname, isMobile])
-
-  useEffect(() => {
-    const contextualMenu = getCurrentMenu ? getCurrentMenu(pathname, searchParams) : getMenuFromPath(pathname)
-    setCurrentMenu(contextualMenu)
-  }, [pathname, searchParams, getCurrentMenu])
-
-  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 overflow-visible">
-      {!isMinimized && !isHidden && (
-        <Sidebar
-          currentMenu={currentMenu}
-          onMainMenuToggle={handleMainSidebarToggle}
-          sidebarMenus={effectiveSidebarMenus}
-          main_base_url={main_base_url}
-          sectionLabels={sectionLabels}
-          getCurrentMenuItem={getCurrentMenuItem}
-          loadOrg={loadOrg}
-        />
-      )}
-
-      <MainSidebar
-        main_base_url={main_base_url}
-        isOpen={isMainSidebarOpen}
-        onToggle={handleMainSidebarToggle}
-        onMenuSelect={handleMenuSelect}
-        currentMenu={currentMenu}
-        onSecondarySidebarOpen={handleSecondarySidebarOpen}
-        mode={isHidden ? "expanded" : mode}
-        sidebarMenus={effectiveSidebarMenus}
-        mainMenuItems={mainMenuItems}
-      />
-
-      <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">
-            {/* Gauche : bouton menu (mobile/hidden) */}
-            {isHidden ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleMainSidebarToggle}
-                className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-                title="Ouvrir le menu"
-              >
-                <Menu className="h-5 w-5" />
-              </Button>
-            ) : (
-              <div />
-            )}
-
-            {/* Droite : dropdown organisation + user menu */}
-            <div className="flex items-center gap-1">
-              {loadOrg && loadProjects && onProjectChange && (
-                <OrgProjectDropdown
-                  loadOrg={loadOrg}
-                  loadProjects={loadProjects}
-                  currentProject={currentProject}
-                  onProjectChange={onProjectChange}
-                />
-              )}
-              <UserMenu
-                username={user?.profile?.email || user?.profile?.preferred_username}
-                onSignOut={onSignOut || (() => {})}
-                menuConfig={effectiveUserMenuConfig}
-              />
-            </div>
-          </div>
-        </header>
-
-        <main className="flex-1 overflow-auto">
-          {children}
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export function LayoutContainer(props: LayoutContainerProps) {
-  return (
-    <SidebarProvider defaultOpen={true}>
-      <LayoutContent {...props} />
-    </SidebarProvider>
-  )
-}
+"use client"
+
+import { useState, useEffect } 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, resolveIcon } from "./sidebar/data"
+import { Button } from "../ui"
+import { getMenuFromPath } from "../../lib/menu-utils"
+import { useIsMobile } from "../../hooks/use-mobile"
+import { Menu } from "lucide-react"
+import { UserPanel } from "./user-panel"
+import { useMenuContext } from "../../context/menu-context"
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
+
+export interface LayoutContainerProps {
+  main_base_url: string
+  children: React.ReactNode
+  sidebarMenus?: SidebarMenus
+  mode?: SidebarMode
+  getSidebarMode?: (pathname: string, params: Record<string, string>, searchParams: URLSearchParams) => SidebarMode
+  getCurrentMenu?: (pathname: string, searchParams: URLSearchParams) => string
+  getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
+}
+
+function LayoutContent({
+  children,
+  sidebarMenus = {},
+  mode = 'expanded',
+  main_base_url,
+  getSidebarMode,
+  getCurrentMenu,
+  getCurrentMenuItem,
+}: LayoutContainerProps) {
+  const { fetchMenus } = useMenuContext()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const params = useParams()
+  const { setOpen } = useSidebar()
+  const isMobile = useIsMobile()
+  const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
+  const [currentMenu, setCurrentMenu] = useState<string>("overview")
+
+  const effectiveMode = getSidebarMode ? getSidebarMode(pathname, params as Record<string, string>, searchParams) : mode
+  const isMinimized = effectiveMode === 'minimized'
+  const isHidden = effectiveMode === 'hidden' || isMobile
+
+  const [mainMenuItems, setMainMenuItems] = useState<MainMenuItem[]>([])
+  const [fetchedSidebarMenus, setFetchedSidebarMenus] = useState<SidebarMenus>({})
+  const [sectionLabels, setSectionLabels] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    if (!fetchMenus) return
+    fetchMenus().then((response) => {
+      if (!response.success) return
+      const { main, subMenus } = response.data
+
+      setMainMenuItems(
+        main.map((item) => ({
+          id: item.id,
+          label: item.label,
+          icon: resolveIcon(item.icon),
+        }))
+      )
+
+      const menus: SidebarMenus = {}
+      const labels: Record<string, string> = {}
+      Object.entries(subMenus).forEach(([key, subMenu]) => {
+        menus[key] = subMenu.items.map((item) => ({
+          id: item.id,
+          name: item.label,
+          href: item.href,
+          icon: resolveIcon(item.icon),
+        }))
+        labels[key] = subMenu.header
+      })
+      setFetchedSidebarMenus(menus)
+      setSectionLabels(labels)
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const effectiveSidebarMenus: SidebarMenus = { ...fetchedSidebarMenus, ...sidebarMenus }
+
+  useEffect(() => {
+    if (isMobile) setIsMainSidebarOpen(false)
+  }, [pathname, isMobile])
+
+  useEffect(() => {
+    const contextualMenu = getCurrentMenu ? getCurrentMenu(pathname, searchParams) : getMenuFromPath(pathname)
+    setCurrentMenu(contextualMenu)
+  }, [pathname, searchParams, getCurrentMenu])
+
+  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 overflow-visible">
+      {!isMinimized && !isHidden && (
+        <Sidebar
+          currentMenu={currentMenu}
+          onMainMenuToggle={handleMainSidebarToggle}
+          sidebarMenus={effectiveSidebarMenus}
+          main_base_url={main_base_url}
+          sectionLabels={sectionLabels}
+          getCurrentMenuItem={getCurrentMenuItem}
+        />
+      )}
+
+      <MainSidebar
+        main_base_url={main_base_url}
+        isOpen={isMainSidebarOpen}
+        onToggle={handleMainSidebarToggle}
+        onMenuSelect={handleMenuSelect}
+        currentMenu={currentMenu}
+        onSecondarySidebarOpen={handleSecondarySidebarOpen}
+        mode={isHidden ? "expanded" : mode}
+        sidebarMenus={effectiveSidebarMenus}
+        mainMenuItems={mainMenuItems}
+      />
+
+      <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">
+            {isHidden ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleMainSidebarToggle}
+                className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
+                title="Ouvrir le menu"
+              >
+                <Menu className="h-5 w-5" />
+              </Button>
+            ) : (
+              <div />
+            )}
+
+            <UserPanel main_base_url={main_base_url} />
+          </div>
+        </header>
+
+        <main className="flex-1 overflow-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export function LayoutContainer(props: LayoutContainerProps) {
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <LayoutContent {...props} />
+    </SidebarProvider>
+  )
+}

package/components/layout/sidebar/sidebar.tsx

@@ -18,15 +18,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../../ui/tooltip"
-import {
-  Settings,
-  Menu,
-  User,
-  ChevronUp,
-  ChevronRight,
-} from "lucide-react"
+import { Menu } from "lucide-react"
 import { Logo } from "../../ui/logo"
-import { type SidebarMenus, type SubMenuItem, type OrgInfo } from "./data"
+import { type SidebarMenus, type SubMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
@@ -173,42 +167,14 @@ interface SidebarProps {
   main_base_url?: string
   sectionLabels?: Record<string, string>
   getCurrentMenuItem?: (pathname: string, searchParams: URLSearchParams) => string
-  loadOrg?: () => Promise<OrgInfo>
 }
 
 
 
-function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem, loadOrg }: SidebarProps = {}) {
+function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_url = "", sectionLabels = {}, getCurrentMenuItem }: 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(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (settingsRef.current && !settingsRef.current.contains(event.target as Node)) {
-        setSettingsOpen(false)
-      }
-    }
-    if (settingsOpen) {
-      document.addEventListener("mousedown", handleClickOutside)
-      return () => document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [settingsOpen])
 
   // Micro apps: utilise 'items' comme clé standard
   // Main app: utilise currentMenu pour sélectionner le bon groupe
@@ -278,66 +244,6 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         })}
       </nav>
 
-      {/* Footer - Menu Paramètres */}
-      <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 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-4 px-5 py-4 hover:bg-ui-background transition-colors border-b border-ui-border no-underline"
-            >
-              {orgLoading ? (
-                <div className="h-14 w-14 bg-ui-background animate-pulse flex-shrink-0" />
-              ) : orgData?.logo ? (
-                <img src={orgData.logo} alt={orgData.name } className="h-14 w-14 object-cover flex-shrink-0" />
-              ) : (
-                <div className="h-14 w-14 bg-interactive flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
-                  {orgData?.name?.charAt(0)?.toUpperCase() ?? 'O'}
-                </div>
-              )}
-              <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?.name ?? 'Organisation')}
-                </span>
-              </div>
-              <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0 opacity-40" />
-            </Link>
-
-            {/* Paramètres du compte */}
-            <Link
-              href={`${main_base_url}/profile`}
-              onClick={() => setSettingsOpen(false)}
-              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 className="flex-1">Paramètres du compte</span>
-              <ChevronRight className="h-4 w-4 flex-shrink-0 opacity-40" />
-            </Link>
-          </div>
-        )}
-        <button
-          onClick={() => setSettingsOpen(!settingsOpen)}
-          className={cn(
-            "flex items-center justify-between w-full px-3 py-2 text-sm rounded-none gap-x-3 transition-colors",
-            settingsOpen
-              ? "bg-interactive/10 text-interactive font-medium"
-              : "text-text-secondary hover:bg-ui-background hover:text-text-primary"
-          )}
-        >
-          <span className="flex items-center gap-x-3">
-            <Settings className="h-4 w-4" />
-            {state === "expanded" && "Paramètres"}
-          </span>
-          {state === "expanded" && <ChevronUp className={cn("h-4 w-4 transition-transform", settingsOpen ? "rotate-0" : "rotate-180")} />}
-        </button>
-      </div>
     </div>
   )
 }

package/components/layout/user-panel.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronRight, LogOut } from "lucide-react"
+import ReactAvatar from "react-avatar"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { useUserContext } from "../../context/user-context"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
+import { Button } from "../ui"
+
+const Divider = () => <div className="h-px bg-gray-200 w-full" />
+
+interface UserPanelProps {
+  main_base_url: string
+}
+
+export function UserPanel({ main_base_url }: UserPanelProps) {
+  const [open, setOpen] = useState(false)
+  const { profile, currentProject, organization, logout, openBusinessUnitSwitcher } = useUserContext()
+
+  const displayName =
+    profile?.name || profile?.preferred_username || profile?.email || "User"
+
+  const close = () => setOpen(false)
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center h-9 px-2"
+          style={{ borderRadius: 0 }}
+        >
+          <ReactAvatar
+            name={displayName}
+            src={profile?.avatar}
+            size="28"
+            round
+            color="#0f62fe"
+            textSizeRatio={2}
+          />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="end"
+        sideOffset={8}
+        className="w-80 bg-white shadow-xl border border-gray-200 p-0 rounded-none"
+      >
+        <DropdownMenuPrimitive.Arrow width={16} height={8} style={{ fill: 'white', stroke: '#e5e7eb', strokeWidth: 1 }} />
+
+        {/* Organisation | Business Unit */}
+        <div className="flex items-stretch">
+
+          {/* Gauche — Organisation */}
+          <a
+            href={`${main_base_url}/organization`}
+            onClick={close}
+            className="flex items-center gap-2 flex-1 min-w-0 px-4 py-4 hover:bg-gray-50 transition-colors no-underline group"
+          >
+            <div className="flex flex-col min-w-0 flex-1">
+              <span className="text-[11px] text-gray-400 uppercase tracking-widest mb-1">Organisation</span>
+              <span className="text-sm font-semibold text-gray-900 truncate">
+                {organization?.name ?? '—'}
+              </span>
+            </div>
+            <ChevronRight className="h-4 w-4 text-gray-300 flex-shrink-0 group-hover:text-gray-500 transition-colors" />
+          </a>
+
+          {/* Séparateur vertical */}
+          <div className="flex items-center py-3">
+            <div className="w-px h-full bg-gray-200" />
+          </div>
+
+          {/* Droite — Business Unit */}
+          <div className="flex flex-col justify-center flex-1 min-w-0 px-4 py-4">
+            <span className="text-[11px] text-gray-400 uppercase tracking-widest mb-1">Business Unit</span>
+            <span className="text-sm font-semibold text-gray-900 truncate">
+              {currentProject?.name ?? '—'}
+            </span>
+            <div className="flex items-center gap-3 mt-1.5">
+              <button
+                onClick={() => { close(); openBusinessUnitSwitcher() }}
+                className="text-xs text-[#0f62fe] hover:underline"
+              >
+                Switch
+              </button>
+              {currentProject && organization && (
+                <a
+                  href={`${main_base_url}/${organization.id}/projects/${currentProject.id}`}
+                  onClick={close}
+                  className="text-xs text-[#0f62fe] hover:underline"
+                >
+                  Settings
+                </a>
+              )}
+            </div>
+          </div>
+
+        </div>
+
+        <Divider />
+
+        {/* User info + Logout */}
+        <div className="flex items-center gap-3 px-4 py-3">
+          <ReactAvatar
+            name={displayName}
+            src={profile?.avatar}
+            size="40"
+            round
+            color="#0f62fe"
+            textSizeRatio={2}
+          />
+          <div className="flex flex-col min-w-0 flex-1">
+            <span className="font-bold text-sm text-gray-900 truncate">{displayName}</span>
+            {profile?.email && (
+              <span className="text-xs text-gray-500 truncate">{profile.email}</span>
+            )}
+            <a
+              href={`${main_base_url}/profile`}
+              onClick={close}
+              className="text-xs text-[#0f62fe] hover:underline mt-0.5 w-fit"
+            >
+              Settings
+            </a>
+          </div>
+          <button
+            onClick={() => { close(); logout() }}
+            className="flex items-center gap-1.5 text-xs text-red-600 hover:text-red-700 flex-shrink-0 ml-2"
+            title="Logout"
+          >
+            <LogOut className="h-3.5 w-3.5" />
+            <span>Logout</span>
+          </button>
+        </div>
+
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/components/ui/project-selector-modal.tsx

@@ -21,23 +21,21 @@ import {
 import { Loader2, FolderKanban } from "lucide-react"
 
 export interface Project {
-  id: string,
+  id: string
   name: string
   alias?: string
   description?: string
 }
 
-export interface ProjectSelectorModalProps {
-  open: boolean
-  onOpenChange?: (open: boolean) => void
+export type ProjectSelectorProps = {
   getProjects: () => Promise<Project[]>
   createProject: (name: string) => Promise<Project>
-  storage: {
-    getItem: (key: string) => string | null
-    setItem: (key: string, value: string) => void
-  }
-  storageKey: string
-  doInit: () => void | Promise<void>
+  doInit: (id: string) => void | Promise<void>
+}
+
+export interface ProjectSelectorModalProps extends ProjectSelectorProps {
+  open: boolean
+  onOpenChange?: (open: boolean) => void
   title?: string
   description?: string
 }
@@ -45,13 +43,11 @@ export interface ProjectSelectorModalProps {
 export function ProjectSelectorModal({
   open,
   onOpenChange,
+  title = "Select Business Unit",
+  description = "Choose a business unit to continue. This will be used for all operations in this application.",
   getProjects,
   createProject,
-  storage,
-  storageKey,
   doInit,
-  title = "Select Business Unit",
-  description = "Choose a business unit to continue. This will be used for all operations in this application.",
 }: ProjectSelectorModalProps) {
   const [projects, setProjects] = React.useState<Project[]>([])
   const [loading, setLoading] = React.useState(true)
@@ -63,13 +59,8 @@ export function ProjectSelectorModal({
   React.useEffect(() => {
     if (open) {
       loadProjects()
-      // Try to load current project from storage
-      const currentProject = storage.getItem(storageKey)
-      if (currentProject) {
-        setSelectedProject(currentProject)
-      }
     }
-  }, [open, storage, storageKey])
+  }, [open])
 
   const loadProjects = async () => {
     setLoading(true)
@@ -107,11 +98,8 @@ export function ProjectSelectorModal({
         // Create the new project
         const newProject = await createProject(newProjectName.trim())
         
-        // Save to storage
-        storage.setItem(storageKey, newProject.name)
-        
         // Call doInit
-        await Promise.resolve(doInit())
+        await Promise.resolve(doInit(newProject.id))
         
         // Close modal
         onOpenChange?.(false)
@@ -132,11 +120,8 @@ export function ProjectSelectorModal({
     setError(null)
 
     try {
-      // Save to storage
-      storage.setItem(storageKey, selectedProject)
-      
       // Call doInit
-      await Promise.resolve(doInit())
+      await Promise.resolve(doInit(selectedProject))
       
       // Close modal
       onOpenChange?.(false)

package/context/index.tsx

@@ -36,4 +36,7 @@ type workflowEditContext = {
   stepName?: string;
 };
 
-export const WorkflowEditContext = React.createContext<workflowEditContext>({});
+export const WorkflowEditContext = React.createContext<workflowEditContext>({})
+
+export { useUserContext, UserContextProvider, type UserProfile } from './user-context'
+export { useMenuContext, MenuContextProvider } from './menu-context';

package/context/menu-context.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import React, { createContext, useContext } from "react"
+import type { MenuApiResponse } from "../components/layout/sidebar/data"
+
+interface MenuContextValue {
+  fetchMenus: () => Promise<MenuApiResponse>
+}
+
+const MenuContext = createContext<MenuContextValue | null>(null)
+
+export function useMenuContext(): MenuContextValue {
+  const ctx = useContext(MenuContext)
+  if (!ctx) throw new Error("useMenuContext must be used within MenuContextProvider")
+  return ctx
+}
+
+interface MenuContextProviderProps {
+  children: React.ReactNode
+  fetchMenus: () => Promise<MenuApiResponse>
+}
+
+export function MenuContextProvider({ children, fetchMenus }: MenuContextProviderProps) {
+  return (
+    <MenuContext.Provider value={{ fetchMenus }}>
+      {children}
+    </MenuContext.Provider>
+  )
+}

package/context/project-selector-context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react"
+
+export interface Project {
+  id: string
+  name: string
+  alias?: string
+  description?: string
+}
+
+export interface ProjectSelectorContextType {
+  getProjects: () => Promise<Project[]>
+  createProject: (name: string) => Promise<Project>
+  doInit: () => void | Promise<void>
+}
+
+export const ProjectSelectorContext = createContext<ProjectSelectorContextType | undefined>(undefined)
+
+export const useProjectSelector = () => {
+  const context = useContext(ProjectSelectorContext)
+  if (!context) {
+    throw new Error('useProjectSelector must be used within a ProjectSelectorProvider')
+  }
+  return context
+}

package/context/user-context.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import React, { createContext, useContext } from "react"
+import type { OrgInfo, Project } from "../components/layout/sidebar/data"
+
+export interface UserProfile {
+  email?: string
+  preferred_username?: string
+  name?: string
+  avatar?: string
+}
+
+interface UserContextValue {
+  profile: UserProfile | null
+  currentProject: Project | null
+  organization: OrgInfo | null
+  logout: () => void
+  switchBusinessUnit: (id: string) => void
+  openBusinessUnitSwitcher: () => void
+}
+
+const UserContext = createContext<UserContextValue | null>(null)
+
+export function useUserContext(): UserContextValue {
+  const ctx = useContext(UserContext)
+  if (!ctx) throw new Error("useUserContext must be used within UserContextProvider")
+  return ctx
+}
+
+interface UserContextProviderProps {
+  children: React.ReactNode
+  profile?: UserProfile | null
+  currentProject?: Project | null
+  organization?: OrgInfo | null
+  onSignOut?: () => void
+  onProjectChange?: (id: string) => void
+  onOpenBusinessUnitSwitcher?: () => void
+}
+
+export function UserContextProvider({
+  children,
+  profile,
+  currentProject = null,
+  organization = null,
+  onSignOut,
+  onProjectChange,
+  onOpenBusinessUnitSwitcher,
+}: UserContextProviderProps) {
+  return (
+    <UserContext.Provider value={{
+      profile: profile ?? null,
+      currentProject,
+      organization,
+      logout: onSignOut ?? (() => {}),
+      switchBusinessUnit: onProjectChange ?? (() => {}),
+      openBusinessUnitSwitcher: onOpenBusinessUnitSwitcher ?? (() => {}),
+    }}>
+      {children}
+    </UserContext.Provider>
+  )
+}

package/lib/interceptors.ts

@@ -6,16 +6,8 @@ export const interceptors: Interceptors = {
     return response;
   },
   onResponseError: (error: any) => {
-    if (error.response?.status) {
-      const status = error.response.status;
-      
-      if (typeof window !== 'undefined') {
-        switch (status) {
-          case 401:
-            window.location.href = '/login';
-            break;
-        }
-      }
+    if (error.response?.status === 401 && typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('http-unauthorized'));
     }
     return Promise.reject(error);
   }

package/package.json

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