@orsetra/shared-ui 1.10.3 → 1.10.5

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/ui/index.ts

@@ -47,6 +47,7 @@ export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, Pagi
 export { Popover, PopoverTrigger, PopoverContent } from './popover'
 export { Progress } from './progress'
 export { RadioGroup, RadioGroupItem } from './radio-group'
+export { RelativeTimeRangePicker, type RelativeTimeRangeOption, type RelativeTimeRangePickerProps } from './relative-time-range-picker'
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable'
 export { ScrollArea, ScrollBar } from './scroll-area'
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator } from './select'

package/components/ui/relative-time-range-picker.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronDown, Clock } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+
+export interface RelativeTimeRangeOption {
+  label: string
+  /** Length of the window, in seconds (e.g. 3600 for "1h"). Used as the option's identity. */
+  seconds: number
+}
+
+export interface RelativeTimeRangePickerProps {
+  id?: string
+  value: number
+  onChange: (seconds: number) => void
+  options: RelativeTimeRangeOption[]
+  disabled?: boolean
+  className?: string
+  /** Popover alignment relative to the trigger. Defaults to "end" (picker anchored right — the
+   * common placement next to a panel's close button). */
+  align?: "start" | "center" | "end"
+  /** Accessible name and popover heading. Defaults to "Time range". */
+  triggerLabel?: string
+}
+
+/**
+ * Flyout picker for a small set of relative time ranges (20m, 1h, 3h, ...), styled as a gallery
+ * of choices rather than a dropdown list — the current selection is highlighted with both a
+ * filled background and a check mark (not color alone), mirroring how Calendar marks the
+ * selected day and Combobox marks the selected item in this same component set.
+ */
+export function RelativeTimeRangePicker({
+  id,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  className,
+  align = "end",
+  triggerLabel = "Time range",
+}: RelativeTimeRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const selected = options.find(o => o.seconds === value)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="secondary"
+          size="sm"
+          disabled={disabled}
+          aria-label={triggerLabel}
+          className={cn("rounded-none", className)}
+          leftIcon={<Clock className="h-3.5 w-3.5" />}
+          rightIcon={<ChevronDown className="h-3.5 w-3.5 opacity-60" />}
+        >
+          {selected?.label ?? "Select…"}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} sideOffset={6} className="w-auto rounded-none p-2">
+        <p className="px-1 pb-2 text-xs font-medium text-ibm-gray-50">{triggerLabel}</p>
+        <div role="listbox" aria-label={triggerLabel} className="grid grid-cols-3 gap-1.5">
+          {options.map(opt => {
+            const isSelected = opt.seconds === value
+            return (
+              <button
+                key={opt.seconds}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                onClick={() => { onChange(opt.seconds); setOpen(false) }}
+                className={cn(
+                  "flex items-center justify-center gap-1 h-9 px-2 text-sm font-medium border transition-colors whitespace-nowrap",
+                  isSelected
+                    ? "bg-ibm-blue-60 text-white border-ibm-blue-60"
+                    : "bg-white text-ibm-gray-100 border-ibm-gray-20 hover:bg-ibm-blue-10 hover:border-ibm-blue-40"
+                )}
+              >
+                {isSelected && <Check className="h-3 w-3 flex-shrink-0" />}
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

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