@orsetra/shared-ui 1.10.2 → 1.10.4

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/quick-access-tracker.tsx

@@ -27,8 +27,9 @@ export function QuickAccessTracker({ label, icon, enabled = true }: QuickAccessT
 
   useEffect(() => {
     if (!enabled || !label || !pathname) return
-    addRef.current({ label, href: window.location.href, icon })
-  // pathname triggers the effect on navigation; window.location.href captures the full URL
+    // Use clean URL (no query params) — useQuickAccess normalises further
+    const href = window.location.origin + window.location.pathname
+    addRef.current({ label, href, icon })
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname, label, icon, enabled])
 

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/hooks/use-quick-access.ts

@@ -2,14 +2,26 @@
 
 import { useState, useEffect, useCallback } from "react"
 
-const STORAGE_KEY = "sidebar:quick-access"
-const MAX_ITEMS   = 4
+const STORAGE_KEY  = "sidebar:quick-access"
+const POOL_SIZE    = 20   // internal storage
+const DISPLAY_SIZE = 4    // shown in UI
+const DECAY_DAYS   = 14   // recency half-life
 
 export interface QuickAccessItem {
-  id:    string
-  label: string
-  href:  string
-  icon?: string
+  id:         string  // origin + pathname (stable, no query params)
+  label:      string
+  href:       string  // same as id — clean URL for navigation
+  icon?:      string
+  visitCount: number
+  lastVisit:  number  // unix ms
+}
+
+/** Score: balances visit frequency with recency. Items fade after DECAY_DAYS days. */
+function score(item: QuickAccessItem): number {
+  const ageMs   = Date.now() - item.lastVisit
+  const ageDays = ageMs / (1000 * 60 * 60 * 24)
+  const recency = Math.exp(-ageDays / DECAY_DAYS)   // 1.0 → 0 over time
+  return item.visitCount * 0.6 + recency * 0.4
 }
 
 function readStorage(): QuickAccessItem[] {
@@ -21,7 +33,12 @@ function readStorage(): QuickAccessItem[] {
     return Array.isArray(parsed)
       ? parsed.filter(
           (i): i is QuickAccessItem =>
-            i && typeof i.id === "string" && typeof i.label === "string" && typeof i.href === "string"
+            i &&
+            typeof i.id         === "string" &&
+            typeof i.label      === "string" &&
+            typeof i.href       === "string" &&
+            typeof i.visitCount === "number" &&
+            typeof i.lastVisit  === "number"
         )
       : []
   } catch {
@@ -33,42 +50,69 @@ function writeStorage(items: QuickAccessItem[]): void {
   try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)) } catch {}
 }
 
+/** Top DISPLAY_SIZE items from pool, sorted by score descending. */
+function topItems(pool: QuickAccessItem[]): QuickAccessItem[] {
+  return [...pool].sort((a, b) => score(b) - score(a)).slice(0, DISPLAY_SIZE)
+}
+
 export function useQuickAccess() {
-  const [items, setItems] = useState<QuickAccessItem[]>(readStorage)
+  const [pool,  setPool]  = useState<QuickAccessItem[]>(readStorage)
+  const [items, setItems] = useState<QuickAccessItem[]>(() => topItems(readStorage()))
 
   // Sync across tabs
   useEffect(() => {
     const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY) setItems(readStorage())
+      if (e.key === STORAGE_KEY) {
+        const p = readStorage()
+        setPool(p)
+        setItems(topItems(p))
+      }
     }
     window.addEventListener("storage", onStorage)
     return () => window.removeEventListener("storage", onStorage)
   }, [])
 
-  const addItem = useCallback((item: Omit<QuickAccessItem, "id"> & { id?: string }) => {
-    setItems(prev => {
-      const id   = item.id ?? item.href
-      const next = [
-        { id, label: item.label, href: item.href, icon: item.icon },
-        ...prev.filter(i => i.href !== item.href),
-      ].slice(0, MAX_ITEMS)
+  const addItem = useCallback((item: { label: string; href: string; icon?: string }) => {
+    // Normalize: strip query params and fragments — use origin + pathname as stable id
+    let id: string
+    try {
+      const u = new URL(item.href)
+      id = u.origin + u.pathname
+    } catch {
+      id = item.href
+    }
+
+    setPool(prev => {
+      const existing = prev.find(i => i.id === id)
+      const updated: QuickAccessItem = existing
+        ? { ...existing, label: item.label, icon: item.icon, visitCount: existing.visitCount + 1, lastVisit: Date.now() }
+        : { id, label: item.label, href: id, icon: item.icon, visitCount: 1, lastVisit: Date.now() }
+
+      // Merge into pool, sort by score, keep top POOL_SIZE
+      const next = [updated, ...prev.filter(i => i.id !== id)]
+        .sort((a, b) => score(b) - score(a))
+        .slice(0, POOL_SIZE)
+
       writeStorage(next)
+      setItems(topItems(next))
       return next
     })
   }, [])
 
-  const removeItem = useCallback((href: string) => {
-    setItems(prev => {
-      const next = prev.filter(i => i.href !== href)
+  const removeItem = useCallback((id: string) => {
+    setPool(prev => {
+      const next = prev.filter(i => i.id !== id)
       writeStorage(next)
+      setItems(topItems(next))
       return next
     })
   }, [])
 
   const clearItems = useCallback(() => {
+    setPool([])
     setItems([])
     try { localStorage.removeItem(STORAGE_KEY) } catch {}
   }, [])
 
-  return { items, addItem, removeItem, clearItems }
+  return { items, pool, addItem, removeItem, clearItems }
 }

package/package.json

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