@orsetra/shared-ui 1.10.9 → 1.10.11

package/components/ui/access-denied-state.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { Lock } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+export interface AccessDeniedStateProps {
+  resourceName: string
+  message?: string
+  className?: string
+}
+
+export function AccessDeniedState({ resourceName, message, className }: AccessDeniedStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 p-6 md:p-12 min-h-[450px] bg-white text-center md:text-left",
+        className
+      )}
+    >
+      <div className="flex-shrink-0 h-40 w-40 bg-red-50 flex items-center justify-center">
+        <Lock className="h-20 w-20 text-red-200" />
+      </div>
+      <div className="max-w-md">
+        <h2 className="text-xl md:text-2xl font-semibold text-ibm-gray-100 mb-3 text-center md:text-left">
+          Access denied
+        </h2>
+        <p className="text-ibm-gray-60 text-sm md:text-base leading-relaxed text-center md:text-left">
+          {message ?? `You don't have permission to view ${resourceName} in this business unit.`}
+        </p>
+      </div>
+    </div>
+  )
+}

package/components/ui/index.ts

@@ -24,6 +24,7 @@ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './alert-dialog'
 export { Alert, AlertTitle, AlertDescription } from './alert'
 export { AlertBanner, useAlertBanner, type AlertBannerProps, type AlertState } from './alert-banner'
+export { AccessDeniedState, type AccessDeniedStateProps } from './access-denied-state'
 export { ConfirmationDialog, type ConfirmationDialogProps } from './confirmation-dialog'
 export { AspectRatio } from './aspect-ratio'
 export { Badge } from './badge'

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.9",
+  "version": "1.10.11",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",