@orsetra/shared-ui 1.5.27 → 1.5.29

package/components/layout/sidebar/data.tsx

@@ -33,6 +33,9 @@ import {
   FileText,
   Code,
   Cloud,
+  ArrowRightLeft,
+  ArrowLeftRight,
+  Puzzle,
 } from "lucide-react"
 
 export interface MainMenuItem {
@@ -126,6 +129,9 @@ const ICON_MAP: Record<string, LucideIcon> = {
   // API Manager
   Braces,
   GitMerge,
+  ArrowRightLeft,
+  ArrowLeftRight,
+  Puzzle,
   Database,
   // Access
   Users,

package/components/layout/sidebar/sidebar.tsx

@@ -21,7 +21,6 @@ import {
 import { Menu } from "lucide-react"
 import { Logo } from "../../ui/logo"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
-import { SidebarFlyout } from "./sidebar-flyout"
 import { Skeleton } from "../skeleton"
 
 const SIDEBAR_STORAGE_KEY = "sidebar:state"
@@ -194,17 +193,11 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
     || []
 
   const isCollapsed = state === "collapsed"
-  const [flyoutMenu, setFlyoutMenu] = React.useState<string | null>(null)
-
   const filteredMainItems = React.useMemo(() => {
     if (!isCollapsed || mainMenuItems.length === 0) return []
     const navIds = new Set(currentNavigation.map((n) => n.id))
-    return mainMenuItems.filter((item) => {
-      if (item.id === currentMenu || navIds.has(item.id)) return false
-      const hasSubItems = (sidebarMenus[item.id]?.length ?? 0) > 0
-      return hasSubItems || !!item.href
-    })
-  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu, sidebarMenus])
+    return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id) && !!item.href)
+  }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
 
   return (
     <div
@@ -299,56 +292,33 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           return linkEl
         })}
 
-        {/* Main menu items — only in collapsed mode, below secondary items */}
+        {/* Main menu items — only in collapsed mode, below secondary items, neutral color */}
         {filteredMainItems.length > 0 && (
           <>
             <div className="border-t border-ui-border mx-1 my-2" />
             {filteredMainItems.map((item) => {
-              const subItems = sidebarMenus[item.id] ?? []
-              const hasSubItems = subItems.length > 0
-
-              const iconBtn = (
+              const handleClick = (e: React.MouseEvent) => {
+                const href = item.href ?? ""
+                if (href.startsWith("http://") || href.startsWith("https://")) {
+                  e.preventDefault()
+                  window.location.href = new URL(href).pathname
+                }
+              }
+              const linkEl = (
                 <Link
-                  href={hasSubItems ? "#" : (item.href ?? "#")}
-                  onClick={(e) => {
-                    if (hasSubItems) { e.preventDefault(); return }
-                    const href = item.href ?? ""
-                    if (href.startsWith("http://") || href.startsWith("https://")) {
-                      e.preventDefault()
-                      window.location.href = new URL(href).pathname
-                    }
-                  }}
-                  className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background w-full"
+                  key={item.id}
+                  href={item.href ?? "#"}
+                  onClick={handleClick}
+                  className="flex items-center justify-center p-2 transition-colors border-l-4 border-transparent hover:bg-ui-background"
                 >
                   <item.icon className="h-4 w-4 flex-shrink-0" style={{ color: "#8d8d8d" }} />
                 </Link>
               )
-
               return (
-                <div
-                  key={item.id}
-                  className="relative"
-                  onMouseEnter={() => { if (hasSubItems) setFlyoutMenu(item.id) }}
-                  onMouseLeave={() => setFlyoutMenu(null)}
-                >
-                  {hasSubItems ? (
-                    iconBtn
-                  ) : (
-                    <Tooltip>
-                      <TooltipTrigger asChild>{iconBtn}</TooltipTrigger>
-                      <TooltipContent side="right" align="center">{item.label}</TooltipContent>
-                    </Tooltip>
-                  )}
-
-                  {/* Flyout panel */}
-                  {hasSubItems && flyoutMenu === item.id && (
-                    <SidebarFlyout
-                      label={item.label}
-                      subItems={subItems}
-                      onClose={() => setFlyoutMenu(null)}
-                    />
-                  )}
-                </div>
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>{linkEl}</TooltipTrigger>
+                  <TooltipContent side="right" align="center">{item.label}</TooltipContent>
+                </Tooltip>
               )
             })}
           </>

package/components/ui/page-header.tsx

@@ -12,23 +12,23 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, backLink, actions, statusNode}: PageHeaderProps) {
   return (
-    <div className="mb-4 sm:mb-8">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div className="flex items-center space-x-3 min-w-0">
+    <div>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div className="flex items-center gap-2.5 min-w-0">
           {backLink && (
             <Link href={backLink} className="flex-shrink-0">
-              <ArrowLeft className="h-5 w-5 sm:h-6 sm:w-6 text-text-secondary" />
+              <ArrowLeft className="h-4 w-4 text-ibm-gray-60" />
             </Link>
           )}
           <div className="min-w-0">
-            <div className="flex items-center space-x-3">
-              <h1 className="text-xl sm:text-2xl font-semibold text-text-primary truncate">{title}</h1>
-              {statusNode && <div className="mt-2 flex-shrink-0">{statusNode}</div>}
+            <div className="flex items-center gap-2.5">
+              <h1 className="text-base font-semibold text-ibm-gray-100 truncate leading-tight">{title}</h1>
+              {statusNode && <div className="flex-shrink-0">{statusNode}</div>}
             </div>
-            {description && <p className="text-sm sm:text-base text-text-secondary line-clamp-2">{description}</p>}
+            {description && <p className="text-xs text-ibm-gray-60 truncate mt-0.5">{description}</p>}
           </div>
         </div>
-        {actions && <div className="flex items-center space-x-2 sm:space-x-4 flex-shrink-0">{actions}</div>}
+        {actions && <div className="flex items-center gap-2 flex-shrink-0">{actions}</div>}
       </div>
     </div>
   )

package/package.json

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