@orsetra/shared-ui 1.10.3 → 1.10.4

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