@orsetra/shared-ui 1.2.4 → 1.3.0

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

@@ -26,8 +26,9 @@ import {
   ChevronRight,
 } 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"
+import { useUserContext } from "../../../context/user-context"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -173,29 +174,17 @@ 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])
+  const { organization: orgData } = useUserContext()
 
   // Close dropdown on click outside
   React.useEffect(() => {
@@ -292,9 +281,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
               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 ? (
+              {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">
@@ -304,7 +291,7 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
               <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')}
+                  {orgData?.name ?? 'Organisation'}
                 </span>
               </div>
               <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0 opacity-40" />

package/components/layout/user-panel.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronDown, Settings, LogOut } from "lucide-react"
+import ReactAvatar from "react-avatar"
+import { useUserContext } from "../../context/user-context"
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from "../ui/sheet"
+import { Button } from "../ui"
+import { cn } from "../../lib/utils"
+
+interface UserPanelProps {
+  main_base_url: string
+}
+
+export function UserPanel({ main_base_url }: UserPanelProps) {
+  const [open, setOpen] = useState(false)
+  const { profile, currentProject, organization, logout } = useUserContext()
+
+  const displayName =
+    profile?.name || profile?.preferred_username || profile?.email || "User"
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="flex items-center gap-1 h-9 px-2"
+          style={{ borderRadius: 0 }}
+        >
+          <ReactAvatar
+            name={displayName}
+            src={profile?.avatar}
+            size="28"
+            round
+            color="#0f62fe"
+            textSizeRatio={2}
+          />
+          <ChevronDown
+            className={cn(
+              "h-4 w-4 text-gray-500 transition-transform duration-150",
+              open && "rotate-180"
+            )}
+          />
+        </Button>
+      </SheetTrigger>
+
+      <SheetContent side="right" className="w-72 p-0 flex flex-col">
+        <SheetTitle className="sr-only">Menu utilisateur</SheetTitle>
+
+        {/* Header — Business Unit */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-ui-border">
+          <span className="font-semibold text-sm text-text-primary truncate">
+            {currentProject?.name ?? "—"}
+          </span>
+          {currentProject && organization && (
+            <a
+              href={`${main_base_url}/${organization.id}/projects/${currentProject.id}`}
+              className="text-text-secondary hover:text-text-primary ml-2 flex-shrink-0"
+              onClick={() => setOpen(false)}
+              title="Paramètres du projet"
+            >
+              <Settings className="h-4 w-4" />
+            </a>
+          )}
+        </div>
+
+        {/* User info */}
+        <div className="flex items-start gap-3 px-4 py-5">
+          <ReactAvatar
+            name={displayName}
+            src={profile?.avatar}
+            size="48"
+            round
+            color="#0f62fe"
+            textSizeRatio={2}
+          />
+          <div className="flex flex-col min-w-0 justify-center">
+            <span className="font-bold text-sm text-text-primary truncate">
+              {displayName}
+            </span>
+            {profile?.email && (
+              <span className="text-xs text-text-secondary truncate">
+                {profile.email}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="border-t border-ui-border" />
+
+        {/* Account settings */}
+        <div className="px-4 py-3">
+          <a
+            href={`${main_base_url}/profile`}
+            className="text-sm text-text-primary hover:underline"
+            onClick={() => setOpen(false)}
+          >
+            Paramètres du compte
+          </a>
+        </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Footer — Logout */}
+        <div className="border-t border-ui-border px-4 py-3">
+          <button
+            onClick={() => { setOpen(false); logout() }}
+            className="flex items-center gap-2 text-sm text-red-600 hover:text-red-700 w-full"
+          >
+            <LogOut className="h-4 w-4" />
+            Logout
+          </button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

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/user-context.tsx

@@ -0,0 +1,57 @@
+"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
+}
+
+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
+}
+
+export function UserContextProvider({
+  children,
+  profile,
+  currentProject = null,
+  organization = null,
+  onSignOut,
+  onProjectChange,
+}: UserContextProviderProps) {
+  return (
+    <UserContext.Provider value={{
+      profile: profile ?? null,
+      currentProject,
+      organization,
+      logout: onSignOut ?? (() => {}),
+      switchBusinessUnit: onProjectChange ?? (() => {}),
+    }}>
+      {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.0",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",