@orsetra/shared-ui 1.5.5 → 1.5.7

package/components/layout/layout-container.tsx

@@ -61,6 +61,7 @@ function LayoutContent({
           id: item.id,
           label: item.label,
           icon: resolveIcon(item.icon),
+          href: item.href,
         }))
       )
 

package/components/layout/sidebar/data.tsx

@@ -29,6 +29,7 @@ export interface MainMenuItem {
   id: string
   label: string
   icon: LucideIcon
+  href?: string
 }
 
 export interface SubMenuItem {
@@ -58,6 +59,7 @@ export interface ApiMainMenuItem {
   id: string
   label: string
   icon: string
+  href?: string
 }
 
 export interface ApiSubMenuItem {

package/components/layout/sidebar/sidebar.tsx

@@ -195,6 +195,12 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   const isCollapsed = state === "collapsed"
 
+  const filteredMainItems = React.useMemo(() => {
+    if (!isCollapsed || mainMenuItems.length === 0) return []
+    const navIds = new Set(currentNavigation.map((n) => n.id))
+    return mainMenuItems.filter((item) => !navIds.has(item.id))
+  }, [isCollapsed, mainMenuItems, currentNavigation])
+
   return (
     <div
       className="h-screen sticky top-0 flex flex-col bg-gray-50 min-w-[var(--sidebar-width-icon)] transition-[width] duration-200 overflow-visible"
@@ -239,28 +245,28 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
         "flex-1 overflow-y-auto",
         isCollapsed ? "px-1 py-3 space-y-0.5" : "px-3 py-4 space-y-1"
       )}>
-        {/* Main menu items — only shown in collapsed mode, excluding items already in currentNavigation */}
-        {isCollapsed && mainMenuItems.length > 0 && (() => {
-          const navIds = new Set(currentNavigation.map((n) => n.id))
-          const filteredMain = mainMenuItems.filter((item) => !navIds.has(item.id))
-          if (filteredMain.length === 0) return null
-          return (
+        {/* Main menu items — only in collapsed mode, above secondary items */}
+        {filteredMainItems.length > 0 && (
           <>
-            {filteredMain.map((item) => {
-              const href = `${main_base_url}/${item.id}`
+            {filteredMainItems.map((item) => {
+              const rawHref = item.href || `${main_base_url}/${item.id}`
+              const href = rawHref.startsWith('http') ? new URL(rawHref).pathname : rawHref
               const isActive = currentMenu === item.id
               const linkEl = (
                 <Link
                   key={item.id}
-                  href={href.startsWith('http') ? new URL(href).pathname : href}
+                  href={href}
                   className={cn(
                     "flex items-center justify-center p-2 transition-colors border-l-4",
                     isActive
-                      ? "bg-interactive/10 text-interactive border-interactive"
-                      : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
+                      ? "bg-interactive/10 border-interactive"
+                      : "hover:bg-ui-background border-transparent"
                   )}
                 >
-                  <item.icon className={cn("h-4 w-4 flex-shrink-0", isActive ? "text-interactive" : "text-text-secondary")} />
+                  <item.icon
+                    className="h-4 w-4 flex-shrink-0"
+                    style={{ color: isActive ? '#0f62fe' : '#8d8d8d' }}
+                  />
                 </Link>
               )
               return (
@@ -270,10 +276,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
                 </Tooltip>
               )
             })}
-            <div className="border-t border-ui-border mx-1 my-1" />
+            <div className="border-t border-ui-border mx-1 my-2" />
           </>
-          )
-        })()}
+        )}
 
         {currentNavigation.map((item) => {
           const activeItemId = getCurrentMenuItem ? getCurrentMenuItem(pathname, searchParams) : null

package/components/ui/detail-page-header.tsx

@@ -29,6 +29,8 @@ export interface DetailPageHeaderProps {
   icon?: ReactNode
   /** Page title – truncated to one line */
   title: string
+  /** Optional ReactNode rendered instead of title string (e.g. editable title) */
+  titleNode?: ReactNode
   /** Optional subtitle – truncated to one line */
   description?: string
   /** Slot for badges, status buttons, action buttons placed to the right */
@@ -48,6 +50,7 @@ export function DetailPageHeader({
   backLabel,
   icon,
   title,
+  titleNode,
   description,
   actions,
   tabBar,
@@ -80,7 +83,7 @@ export function DetailPageHeader({
             )}
             <div className="min-w-0">
               <h1 className="text-lg font-semibold text-ibm-gray-100 leading-tight truncate">
-                {title}
+                {titleNode ?? title}
               </h1>
               {description && (
                 <p className="text-xs text-ibm-gray-50 mt-0.5 truncate">

package/package.json

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