@orsetra/shared-ui 1.10.10 → 1.10.12

package/components/ui/environment-picker-dialog.tsx

@@ -78,15 +78,18 @@ export function EnvironmentPickerDialog({
               <p className="text-sm text-ibm-gray-60">
                 No environments found for this project yet. Create one to continue.
               </p>
-              {CREATE_ENV_URL && (
-                <Button
-                  variant="secondary"
-                  className="rounded-none h-9"
-                  leftIcon={<Plus className="h-3.5 w-3.5" />}
-                  onClick={() => { window.location.href = CREATE_ENV_URL }}
+              {CREATE_ENV_URL ? (
+                <a
+                  href={CREATE_ENV_URL}
+                  className="inline-flex items-center gap-1.5 h-9 px-4 text-sm border border-ibm-gray-30 bg-white hover:bg-ibm-gray-10 transition-colors"
                 >
+                  <Plus className="h-3.5 w-3.5" />
                   Create an environment
-                </Button>
+                </a>
+              ) : (
+                <p className="text-xs text-ibm-gray-50">
+                  Go to Environments in the platform settings to create one.
+                </p>
               )}
             </div>
           ) : (

package/context/user-context.tsx

@@ -4,10 +4,11 @@ import React, { createContext, useContext } from "react"
 import type { OrgInfo, Project } from "../components/layout/sidebar/data"
 
 export interface UserProfile {
-  email?: string
+  sub?:                string
+  email?:              string
   preferred_username?: string
-  name?: string
-  avatar?: string
+  name?:               string
+  avatar?:             string
 }
 
 interface UserContextValue {
@@ -19,7 +20,7 @@ interface UserContextValue {
   openBusinessUnitSwitcher: () => void
 }
 
-const UserContext = createContext<UserContextValue | null>(null)
+export const UserContext = createContext<UserContextValue | null>(null)
 
 export function useUserContext(): UserContextValue {
   const ctx = useContext(UserContext)

package/hooks/use-quick-access.ts

@@ -1,11 +1,12 @@
 "use client"
 
-import { useState, useEffect, useCallback } from "react"
+import { useState, useEffect, useCallback, useContext } from "react"
+import { UserContext } from "../context/user-context"
 
-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
+const BASE_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  // origin + pathname (stable, no query params)
@@ -20,14 +21,14 @@ export interface QuickAccessItem {
 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
+  const recency = Math.exp(-ageDays / DECAY_DAYS)
   return item.visitCount * 0.6 + recency * 0.4
 }
 
-function readStorage(): QuickAccessItem[] {
+function readStorage(key: string): QuickAccessItem[] {
   if (typeof window === "undefined") return []
   try {
-    const raw = localStorage.getItem(STORAGE_KEY)
+    const raw = localStorage.getItem(key)
     if (!raw) return []
     const parsed = JSON.parse(raw)
     return Array.isArray(parsed)
@@ -46,8 +47,8 @@ function readStorage(): QuickAccessItem[] {
   }
 }
 
-function writeStorage(items: QuickAccessItem[]): void {
-  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(items)) } catch {}
+function writeStorage(key: string, items: QuickAccessItem[]): void {
+  try { localStorage.setItem(key, JSON.stringify(items)) } catch {}
 }
 
 /** Top DISPLAY_SIZE items from pool, sorted by score descending. */
@@ -56,24 +57,38 @@ function topItems(pool: QuickAccessItem[]): QuickAccessItem[] {
 }
 
 export function useQuickAccess() {
-  const [pool,  setPool]  = useState<QuickAccessItem[]>(readStorage)
-  const [items, setItems] = useState<QuickAccessItem[]>(() => topItems(readStorage()))
+  // Read sub from UserContext without throwing when outside provider
+  const ctx = useContext(UserContext)
+  const sub = ctx?.profile?.sub
+  const storageKey = sub ? `${BASE_KEY}:${sub}` : null
+
+  const [pool,  setPool]  = useState<QuickAccessItem[]>(() => storageKey ? readStorage(storageKey) : [])
+  const [items, setItems] = useState<QuickAccessItem[]>(() => storageKey ? topItems(readStorage(storageKey)) : [])
+
+  // Re-read when storage key changes (user logs in / switches account)
+  useEffect(() => {
+    if (!storageKey) { setPool([]); setItems([]); return }
+    const p = readStorage(storageKey)
+    setPool(p)
+    setItems(topItems(p))
+  }, [storageKey])
 
   // Sync across tabs
   useEffect(() => {
+    if (!storageKey) return
     const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY) {
-        const p = readStorage()
+      if (e.key === storageKey) {
+        const p = readStorage(storageKey)
         setPool(p)
         setItems(topItems(p))
       }
     }
     window.addEventListener("storage", onStorage)
     return () => window.removeEventListener("storage", onStorage)
-  }, [])
+  }, [storageKey])
 
   const addItem = useCallback((item: { label: string; href: string; icon?: string }) => {
-    // Normalize: strip query params and fragments — use origin + pathname as stable id
+    if (!storageKey) return
     let id: string
     try {
       const u = new URL(item.href)
@@ -81,38 +96,58 @@ export function useQuickAccess() {
     } catch {
       id = item.href
     }
+    // Normalise: strip trailing slash for consistent comparison
+    const normId = id.replace(/\/$/, "")
 
     setPool(prev => {
-      const existing = prev.find(i => i.id === id)
+      const prefix = (ancestor: string, descendant: string) =>
+        descendant !== ancestor && descendant.startsWith(ancestor.replace(/\/$/, "") + "/")
+
+      // A deeper item for this path already exists → bump its score, skip adding the shallower one
+      const deeper = prev.find(i => prefix(normId, i.id))
+      if (deeper) {
+        const updated = { ...deeper, visitCount: deeper.visitCount + 1, lastVisit: Date.now() }
+        const next = [updated, ...prev.filter(i => i.id !== deeper.id)]
+          .sort((a, b) => score(b) - score(a))
+          .slice(0, POOL_SIZE)
+        writeStorage(storageKey, next)
+        setItems(topItems(next))
+        return next
+      }
+
+      // Remove any shallower items that are ancestors of the new path
+      const withoutAncestors = prev.filter(i => !prefix(i.id, normId))
+
+      const existing = withoutAncestors.find(i => i.id === normId)
       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() }
+        : { id: normId, label: item.label, href: normId, 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)]
+      const next = [updated, ...withoutAncestors.filter(i => i.id !== normId)]
         .sort((a, b) => score(b) - score(a))
         .slice(0, POOL_SIZE)
 
-      writeStorage(next)
+      writeStorage(storageKey, next)
       setItems(topItems(next))
       return next
     })
-  }, [])
+  }, [storageKey])
 
   const removeItem = useCallback((id: string) => {
+    if (!storageKey) return
     setPool(prev => {
       const next = prev.filter(i => i.id !== id)
-      writeStorage(next)
+      writeStorage(storageKey, next)
       setItems(topItems(next))
       return next
     })
-  }, [])
+  }, [storageKey])
 
   const clearItems = useCallback(() => {
     setPool([])
     setItems([])
-    try { localStorage.removeItem(STORAGE_KEY) } catch {}
-  }, [])
+    if (storageKey) try { localStorage.removeItem(storageKey) } catch {}
+  }, [storageKey])
 
   return { items, pool, addItem, removeItem, clearItems }
 }

package/package.json

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