@orsetra/shared-ui 1.10.2 → 1.10.3

package/components/layout/layout-container.tsx

@@ -78,6 +78,7 @@ function LayoutContent({
           description: item.description,
           href: item.href,
           icon: resolveIcon(item.icon),
+          target: item.target,
         }))
         labels[key] = subMenu.header
         meta[key] = {

package/components/layout/sidebar/data.tsx

@@ -54,6 +54,7 @@ export interface SubMenuItem {
   href:        string
   icon:        LucideIcon
   applied?:    boolean
+  target?:     string
 }
 
 export interface SidebarMenus {
@@ -86,6 +87,7 @@ export interface ApiSubMenuItem {
   description?: string
   href:        string
   icon:        string
+  target?:     string
 }
 
 export interface ApiSubMenu {

package/components/layout/sidebar/main-sidebar-flyout.tsx

@@ -79,6 +79,8 @@ export function MainSidebarFlyout({
                 <a
                   key={sub.id}
                   href={sub.href}
+                  target={sub.target}
+                  rel={sub.target === "_blank" ? "noopener noreferrer" : undefined}
                   className={cn(
                     "flex items-start transition-colors border-l-4",
                     "px-2 lg:px-3 py-2 gap-x-3",
@@ -99,10 +101,10 @@ export function MainSidebarFlyout({
         </>
       ) : hasQuickAccess ? (
         /* ── Quick access: pages recently visited ────────────────────────── */
-        <div className="flex flex-col h-full items-center justify-center px-6 gap-6">
+        <div className="flex flex-col h-full px-6 py-5 gap-5 overflow-y-auto">
           <div className="w-full">
             <p className="px-2 pb-1 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
-              Accès rapide
+              Quick Access
             </p>
             <nav className="space-y-0.5">
               {quickAccessItems.map((qa) => {
@@ -126,6 +128,43 @@ export function MainSidebarFlyout({
               })}
             </nav>
           </div>
+
+          {defaultLinks.length > 0 && (
+            <div className="w-full border-t border-ui-border pt-4">
+              <p className="px-2 pb-1 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
+                Resources
+              </p>
+              <nav className="space-y-0.5">
+                {defaultLinks.map((link, i) => {
+                  const isExternal = link.href.startsWith("http://") || link.href.startsWith("https://")
+                  const LinkIcon: LucideIcon = !link.icon
+                    ? ExternalLink
+                    : typeof link.icon === "string"
+                      ? resolveIcon(link.icon)
+                      : link.icon
+                  return (
+                    <a
+                      key={i}
+                      href={link.href}
+                      {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                      className="flex items-start gap-x-3 px-2 py-2 border-l-4 border-transparent hover:bg-ui-background hover:border-interactive transition-colors"
+                    >
+                      <LinkIcon className="h-4 w-4 flex-shrink-0 mt-0.5 text-text-secondary" />
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium text-text-primary leading-snug flex items-center gap-1.5">
+                          {link.label}
+                          {isExternal && <ExternalLink className="h-3 w-3 text-text-secondary flex-shrink-0" />}
+                        </p>
+                        {link.description && (
+                          <p className="text-xs text-text-secondary leading-relaxed mt-0.5 line-clamp-2">{link.description}</p>
+                        )}
+                      </div>
+                    </a>
+                  )
+                })}
+              </nav>
+            </div>
+          )}
         </div>
       ) : (
         /* ── Default state: centré verticalement ────────────────────────── */

package/components/layout/sidebar/main-sidebar.tsx

@@ -142,7 +142,7 @@ export function MainSidebar({
     try {
       const resolved = applyTemplateVars(href)
       if (resolved.startsWith('http://') || resolved.startsWith('https://')) {
-        return safeUrlPathname(resolved)
+        return resolved  // keep full URL for external links
       }
       const cleanHref = resolved.replace(/^\//, '')
       const cleanBase = (main_base_url.startsWith('http://') || main_base_url.startsWith('https://'))
@@ -165,9 +165,17 @@ export function MainSidebar({
     icon:        l.icon,
   }))
 
-  const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string) => {
+  const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string, target?: string) => {
     e.preventDefault()
-    window.location.href = buildSubItemHref(menuId, href)
+    const resolved = buildSubItemHref(menuId, href)
+    if (target === "_blank") {
+      window.open(resolved, "_blank", "noopener,noreferrer")
+    } else {
+      const path = resolved.startsWith('http://') || resolved.startsWith('https://')
+        ? safeUrlPathname(resolved)
+        : resolved
+      window.location.href = path
+    }
     setExpandedMenu(null)
   }
 
@@ -284,7 +292,9 @@ export function MainSidebar({
                         <a
                           key={subItem.id}
                           href={buildSubItemHref(item.id, subItem.href)}
-                          onClick={(e) => handleSubMenuClick(e, item.id, subItem.href)}
+                          target={subItem.target}
+                          rel={subItem.target === "_blank" ? "noopener noreferrer" : undefined}
+                          onClick={(e) => handleSubMenuClick(e, item.id, subItem.href, subItem.target)}
                           className="flex items-center gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
                         >
                           <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />

package/components/layout/sidebar/sidebar.tsx

@@ -325,25 +325,40 @@ function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLa
 
           const handleClick = (e: React.MouseEvent) => {
             const href = item.href
+            if (item.target === "_blank") {
+              e.preventDefault()
+              try {
+                let resolved = href
+                if (typeof window !== "undefined") {
+                  const projRaw = localStorage.getItem("current-business-unit")
+                  const cp = typeof projRaw === "string" ? (JSON.parse(projRaw)?.state?.currentProject ?? "") : ""
+                  if (cp) resolved = resolved.replace(/\$\{currentProject\}/g, cp)
+                  const envRaw = localStorage.getItem("current-environment")
+                  const ce = typeof envRaw === "string" ? (JSON.parse(envRaw)?.state?.currentEnv ?? "") : ""
+                  if (ce) resolved = resolved.replace(/\$\{currentEnv\}/g, ce)
+                }
+                window.open(resolved, "_blank", "noopener,noreferrer")
+              } catch {
+                window.open(href, "_blank", "noopener,noreferrer")
+              }
+              return
+            }
             if (href.startsWith('http://') || href.startsWith('https://')) {
               e.preventDefault()
               window.location.href = new URL(href).pathname
             }
           }
 
-          const linkEl = (
-            <Link
-              key={item.id}
-              href={item.href}
-              onClick={handleClick}
-              className={cn(
-                "flex items-center transition-colors border-l-4",
-                isCollapsed ? "justify-center p-2" : "px-2 lg:px-3 py-1.5 lg:py-2 gap-x-3 text-sm",
-                isActive
-                  ? "bg-interactive/10 text-interactive font-medium border-interactive"
-                  : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
-              )}
-            >
+          const linkCls = cn(
+            "flex items-center transition-colors border-l-4",
+            isCollapsed ? "justify-center p-2" : "px-2 lg:px-3 py-1.5 lg:py-2 gap-x-3 text-sm",
+            isActive
+              ? "bg-interactive/10 text-interactive font-medium border-interactive"
+              : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
+          )
+
+          const linkContent = (
+            <>
               <item.icon
                 className="h-4 w-4 flex-shrink-0"
                 style={{ color: isActive ? '#0f62fe' : '#4589ff' }}
@@ -351,6 +366,26 @@ function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLa
               {!isCollapsed && (
                 <span className="flex-1 truncate">{item.name}</span>
               )}
+            </>
+          )
+
+          const linkEl = item.target === "_blank" ? (
+            <a
+              key={item.id}
+              href={item.href}
+              onClick={handleClick}
+              className={linkCls}
+            >
+              {linkContent}
+            </a>
+          ) : (
+            <Link
+              key={item.id}
+              href={item.href}
+              onClick={handleClick}
+              className={linkCls}
+            >
+              {linkContent}
             </Link>
           )
 

package/package.json

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