@orsetra/shared-ui 1.3.0 → 1.3.2

package/components/layout/page-with-side-panel.tsx

@@ -16,6 +16,7 @@ interface PageWithSidePanelProps {
   showBorder?: boolean
   onClose?: () => void
   onOpen?: () => void
+  className?: string
   contentHeaderClassName?: string
   sidePanelClassName?: string
   sidePanelHeaderClassName?: string
@@ -38,6 +39,7 @@ export function PageWithSidePanel({
   showBorder = true,
   onClose,
   onOpen,
+  className,
   contentHeaderClassName,
   sidePanelClassName,
   sidePanelHeaderClassName,
@@ -56,7 +58,7 @@ export function PageWithSidePanel({
   }
 
   return (
-    <div className="flex items-start">
+    <div className={cn("flex items-start", className)}>
       {/* Main content column — grows to fill space left by the panel */}
       <div className="flex-1 min-w-0 flex flex-col">
 
@@ -71,9 +73,7 @@ export function PageWithSidePanel({
         )}
 
         {/* Content body */}
-        <div>
           {children}
-        </div>
       </div>
 
       {/* Side panel — sticky in the flex row, stays anchored while content scrolls.

package/components/layout/sidebar/sidebar.tsx

@@ -18,17 +18,10 @@ 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 } 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
@@ -182,22 +175,6 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const { state } = useSidebar()
-  const [settingsOpen, setSettingsOpen] = React.useState(false)
-  const settingsRef = React.useRef<HTMLDivElement>(null)
-  const { organization: orgData } = useUserContext()
-
-  // 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
@@ -267,64 +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"
-            >
-              {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">
-                  {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

@@ -1,17 +1,18 @@
 "use client"
 
 import { useState } from "react"
-import { ChevronDown, Settings, LogOut } from "lucide-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 {
-  Sheet,
-  SheetContent,
-  SheetTitle,
-  SheetTrigger,
-} from "../ui/sheet"
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
 import { Button } from "../ui"
-import { cn } from "../../lib/utils"
+
+const Divider = () => <div className="h-px bg-gray-200 w-full" />
 
 interface UserPanelProps {
   main_base_url: string
@@ -19,18 +20,20 @@ interface UserPanelProps {
 
 export function UserPanel({ main_base_url }: UserPanelProps) {
   const [open, setOpen] = useState(false)
-  const { profile, currentProject, organization, logout } = useUserContext()
+  const { profile, currentProject, organization, logout, openBusinessUnitSwitcher } = useUserContext()
 
   const displayName =
     profile?.name || profile?.preferred_username || profile?.email || "User"
 
+  const close = () => setOpen(false)
+
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
           size="sm"
-          className="flex items-center gap-1 h-9 px-2"
+          className="flex items-center h-9 px-2"
           style={{ borderRadius: 0 }}
         >
           <ReactAvatar
@@ -41,84 +44,102 @@ export function UserPanel({ main_base_url }: UserPanelProps) {
             color="#0f62fe"
             textSizeRatio={2}
           />
-          <ChevronDown
-            className={cn(
-              "h-4 w-4 text-gray-500 transition-transform duration-150",
-              open && "rotate-180"
-            )}
-          />
         </Button>
-      </SheetTrigger>
+      </DropdownMenuTrigger>
 
-      <SheetContent side="right" className="w-72 p-0 flex flex-col">
-        <SheetTitle className="sr-only">Menu utilisateur</SheetTitle>
+      <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>
 
-        {/* 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">
+        <Divider />
+
+        {/* User info + Logout */}
+        <div className="flex items-center gap-3 px-4 py-3">
           <ReactAvatar
             name={displayName}
             src={profile?.avatar}
-            size="48"
+            size="40"
             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>
+          <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-text-secondary truncate">
-                {profile.email}
-              </span>
+              <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>
-        </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"
+            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-4 w-4" />
-            Logout
+            <LogOut className="h-3.5 w-3.5" />
+            <span>Logout</span>
           </button>
         </div>
-      </SheetContent>
-    </Sheet>
+
+      </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/components/ui/strings-input.tsx

@@ -54,7 +54,7 @@ export function StringsInput({
     <div className="space-y-2">
       {items.map((item, index) => (
         <div key={index} className="flex items-center gap-2">
-          <span className="flex-1 text-sm px-3 py-2 border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate">
+          <span className="flex-1 text-sm px-3 h-7 flex items-center border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate">
             {item}
           </span>
           <Button
@@ -62,9 +62,9 @@ export function StringsInput({
             variant="secondary"
             onClick={() => handleRemove(index)}
             disabled={disabled}
-            className="rounded-none h-9 w-9 p-0 shrink-0"
+            className="rounded-none h-7 w-7 p-0 shrink-0"
           >
-            <X className="h-4 w-4" />
+            <X className="h-3.5 w-3.5" />
           </Button>
         </div>
       ))}
@@ -75,18 +75,16 @@ export function StringsInput({
           onKeyDown={handleKeyDown}
           disabled={disabled}
           placeholder={placeholder}
-          className="rounded-none flex-1"
+          className="rounded-none flex-1 h-7 text-sm"
         />
         <Button
           type="button"
           variant="secondary"
-          leftIcon={<Plus className="h-4 w-4 mr-1" />}
           onClick={handleAdd}
           disabled={disabled || !inputValue.trim()}
-          className="rounded-none shrink-0"
+          className="rounded-none h-7 w-7 p-0 shrink-0"
         >
-          
-          Add
+          <Plus className="h-3.5 w-3.5" />
         </Button>
       </div>
     </div>

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

@@ -16,6 +16,7 @@ interface UserContextValue {
   organization: OrgInfo | null
   logout: () => void
   switchBusinessUnit: (id: string) => void
+  openBusinessUnitSwitcher: () => void
 }
 
 const UserContext = createContext<UserContextValue | null>(null)
@@ -33,6 +34,7 @@ interface UserContextProviderProps {
   organization?: OrgInfo | null
   onSignOut?: () => void
   onProjectChange?: (id: string) => void
+  onOpenBusinessUnitSwitcher?: () => void
 }
 
 export function UserContextProvider({
@@ -42,6 +44,7 @@ export function UserContextProvider({
   organization = null,
   onSignOut,
   onProjectChange,
+  onOpenBusinessUnitSwitcher,
 }: UserContextProviderProps) {
   return (
     <UserContext.Provider value={{
@@ -50,6 +53,7 @@ export function UserContextProvider({
       organization,
       logout: onSignOut ?? (() => {}),
       switchBusinessUnit: onProjectChange ?? (() => {}),
+      openBusinessUnitSwitcher: onOpenBusinessUnitSwitcher ?? (() => {}),
     }}>
       {children}
     </UserContext.Provider>

package/package.json

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