8efc443949
72px icon rail with hover flyouts, pin-to-expand toggle (260px), keyboard accessible, mobile hamburger overlay. Flat TopBar styling (no blur/glass). New BrandLogo mark (gradient square + lightning bolt). BrandWordmark uses solid text color instead of gradient. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
423 lines
16 KiB
TypeScript
423 lines
16 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
import {
|
|
LayoutGrid, Clock, AlertTriangle, GitBranch, Layers, Code2, Wand2,
|
|
ListChecks, Download, BarChart3, Rocket, BookOpen, MessageSquare,
|
|
Settings, Pin, PinOff,
|
|
} from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
|
import { sidebarApi } from '@/api'
|
|
import type { SidebarStatsResponse } from '@/api/sidebar'
|
|
import { prefetchForRoute } from '@/lib/routePrefetch'
|
|
|
|
/* ── Types ──────────────────────────────────────────── */
|
|
|
|
interface NavSubItem {
|
|
href: string
|
|
label: string
|
|
count?: number
|
|
}
|
|
|
|
interface NavEntry {
|
|
href: string
|
|
icon: LucideIcon
|
|
label: string
|
|
shortLabel: string
|
|
badge?: number
|
|
matchPaths?: string[]
|
|
children?: NavSubItem[]
|
|
}
|
|
|
|
interface NavSection {
|
|
title: string
|
|
items: NavEntry[]
|
|
}
|
|
|
|
/* ── Sidebar component ──────────────────────────────── */
|
|
|
|
export function Sidebar() {
|
|
const location = useLocation()
|
|
const sidebarPinned = useUserPreferencesStore(s => s.sidebarPinned)
|
|
const toggleSidebarPinned = useUserPreferencesStore(s => s.toggleSidebarPinned)
|
|
|
|
const [stats, setStats] = useState<SidebarStatsResponse | null>(null)
|
|
const [flyoutIndex, setFlyoutIndex] = useState<string | null>(null)
|
|
const flyoutTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
const sidebarRef = useRef<HTMLElement>(null)
|
|
|
|
/* ── Stats fetching ───────────────────────────────── */
|
|
|
|
const refreshStats = useCallback(() => {
|
|
sidebarApi.getStats().then(setStats).catch(() => {})
|
|
}, [])
|
|
|
|
useEffect(() => { refreshStats() }, [location.pathname, refreshStats])
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('session-changed', refreshStats)
|
|
return () => window.removeEventListener('session-changed', refreshStats)
|
|
}, [refreshStats])
|
|
|
|
/* ── Navigation data ──────────────────────────────── */
|
|
|
|
const sections: NavSection[] = [
|
|
{
|
|
title: 'RESOLVE',
|
|
items: [
|
|
{ href: '/', icon: LayoutGrid, label: 'Dashboard', shortLabel: 'Dash' },
|
|
{ href: '/sessions', icon: Clock, label: 'Active Sessions', shortLabel: 'Sessions', badge: stats?.active_count || undefined, matchPaths: ['/sessions'] },
|
|
{ href: '/escalations', icon: AlertTriangle, label: 'Escalations', shortLabel: 'Escal', badge: stats?.escalation_count || undefined },
|
|
],
|
|
},
|
|
{
|
|
title: 'KNOWLEDGE',
|
|
items: [
|
|
{
|
|
href: '/trees', icon: GitBranch, label: 'Flows', shortLabel: 'Flows',
|
|
badge: stats?.tree_counts.total || undefined,
|
|
matchPaths: ['/trees', '/flows', '/my-trees'],
|
|
children: [
|
|
{ href: '/trees', label: 'All Flows' },
|
|
{ href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: stats?.tree_counts.troubleshooting || undefined },
|
|
{ href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
|
|
{ href: '/trees?type=maintenance', label: 'Maintenance', count: stats?.tree_counts.maintenance || undefined },
|
|
],
|
|
},
|
|
{ href: '/step-library', icon: Layers, label: 'Step Library', shortLabel: 'Steps' },
|
|
{ href: '/scripts', icon: Code2, label: 'Scripts', shortLabel: 'Scripts' },
|
|
{ href: '/script-builder', icon: Wand2, label: 'Script Builder', shortLabel: 'Builder' },
|
|
{ href: '/review-queue', icon: ListChecks, label: 'Review Queue', shortLabel: 'Review' },
|
|
],
|
|
},
|
|
{
|
|
title: 'INSIGHTS',
|
|
items: [
|
|
{ href: '/shares', icon: Download, label: 'Exports', shortLabel: 'Export' },
|
|
{ href: '/analytics', icon: BarChart3, label: 'Analytics', shortLabel: 'Stats' },
|
|
{ href: '/analytics/flowpilot', icon: Rocket, label: 'FlowPilot Analytics', shortLabel: 'FPilot' },
|
|
],
|
|
},
|
|
]
|
|
|
|
const footerItems: NavEntry[] = [
|
|
{ href: '/guides', icon: BookOpen, label: 'User Guides', shortLabel: 'Guides' },
|
|
{ href: '/feedback', icon: MessageSquare, label: 'Feedback', shortLabel: 'Feedbk' },
|
|
{ href: '/account', icon: Settings, label: 'Account', shortLabel: 'Acct' },
|
|
]
|
|
|
|
/* ── Active detection ─────────────────────────────── */
|
|
|
|
const isActive = (item: NavEntry) => {
|
|
if (item.matchPaths) return item.matchPaths.some(p => location.pathname.startsWith(p))
|
|
if (item.href === '/') return location.pathname === '/'
|
|
return location.pathname.startsWith(item.href)
|
|
}
|
|
|
|
const isChildActive = (child: NavSubItem) => {
|
|
const fullPath = location.pathname + location.search
|
|
return fullPath === child.href || fullPath.startsWith(child.href + '&')
|
|
}
|
|
|
|
/* ── Flyout management ────────────────────────────── */
|
|
|
|
const openFlyout = (key: string) => {
|
|
if (flyoutTimeout.current) clearTimeout(flyoutTimeout.current)
|
|
setFlyoutIndex(key)
|
|
}
|
|
|
|
const closeFlyout = () => {
|
|
flyoutTimeout.current = setTimeout(() => setFlyoutIndex(null), 120)
|
|
}
|
|
|
|
const keepFlyout = () => {
|
|
if (flyoutTimeout.current) clearTimeout(flyoutTimeout.current)
|
|
}
|
|
|
|
/* Close flyout on Escape */
|
|
useEffect(() => {
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') setFlyoutIndex(null)
|
|
}
|
|
document.addEventListener('keydown', handleKey)
|
|
return () => document.removeEventListener('keydown', handleKey)
|
|
}, [])
|
|
|
|
/* ── Wheel forwarding (when sidebar can't scroll) ── */
|
|
|
|
const handleWheel = (e: React.WheelEvent<HTMLElement>) => {
|
|
const el = e.currentTarget
|
|
const canScroll = el.scrollHeight > el.clientHeight
|
|
const atTop = el.scrollTop <= 0
|
|
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
|
|
if (!canScroll || (e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
|
|
const main = document.querySelector('.main-content') as HTMLElement | null
|
|
if (main) { main.scrollTop += e.deltaY; e.preventDefault() }
|
|
}
|
|
}
|
|
|
|
/* ── Render helpers ───────────────────────────────── */
|
|
|
|
const renderRailItem = (item: NavEntry, key: string) => {
|
|
const active = isActive(item)
|
|
const Icon = item.icon
|
|
const hasChildren = item.children && item.children.length > 0
|
|
|
|
return (
|
|
<div
|
|
key={key}
|
|
className="relative"
|
|
onMouseEnter={() => hasChildren && !sidebarPinned ? openFlyout(key) : undefined}
|
|
onMouseLeave={() => hasChildren && !sidebarPinned ? closeFlyout() : undefined}
|
|
>
|
|
<Link
|
|
to={item.href}
|
|
onMouseEnter={() => prefetchForRoute(item.href)}
|
|
onFocus={() => hasChildren && !sidebarPinned ? openFlyout(key) : undefined}
|
|
onBlur={() => hasChildren && !sidebarPinned ? closeFlyout() : undefined}
|
|
className={cn(
|
|
'group relative flex flex-col items-center justify-center rounded-lg px-1 py-2 transition-all duration-150',
|
|
active
|
|
? 'bg-[rgba(34,211,238,0.10)] text-[#67e8f9]'
|
|
: 'text-[#6b7280] hover:text-[#848b9b]'
|
|
)}
|
|
title={item.label}
|
|
>
|
|
<span className="relative">
|
|
<Icon size={20} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
|
|
{item.badge !== undefined && item.badge > 0 && (
|
|
<span className="absolute -right-1.5 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-[#22d3ee] px-1 text-[0.5rem] font-bold text-[#0c0d10]">
|
|
{item.badge > 99 ? '99+' : item.badge}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="mt-1 text-[0.5625rem] font-mono leading-tight truncate max-w-[60px]">
|
|
{item.shortLabel}
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Flyout panel (icon rail only) */}
|
|
{hasChildren && !sidebarPinned && flyoutIndex === key && (
|
|
<div
|
|
className="fixed z-50 ml-1"
|
|
style={{
|
|
left: '72px',
|
|
top: sidebarRef.current
|
|
? (() => {
|
|
const itemEl = sidebarRef.current.querySelector(`[data-flyout-key="${key}"]`)
|
|
if (itemEl) {
|
|
const rect = itemEl.getBoundingClientRect()
|
|
return `${rect.top}px`
|
|
}
|
|
return '0px'
|
|
})()
|
|
: '0px',
|
|
maxHeight: '70vh',
|
|
overflowY: 'auto',
|
|
}}
|
|
onMouseEnter={keepFlyout}
|
|
onMouseLeave={closeFlyout}
|
|
>
|
|
<div
|
|
className="w-[220px] rounded-lg p-2 animate-fade-in"
|
|
style={{
|
|
background: '#14161d',
|
|
border: '1px solid #1e2130',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
|
|
}}
|
|
>
|
|
{item.children!.map(child => (
|
|
<Link
|
|
key={child.href}
|
|
to={child.href}
|
|
className={cn(
|
|
'flex items-center justify-between rounded-md px-3 py-2 text-[0.8125rem] transition-colors',
|
|
isChildActive(child)
|
|
? 'bg-[rgba(34,211,238,0.10)] text-[#67e8f9]'
|
|
: 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
|
|
)}
|
|
>
|
|
<span>{child.label}</span>
|
|
{child.count !== undefined && (
|
|
<span className="text-[0.6875rem] font-mono text-[#4f5666]">{child.count}</span>
|
|
)}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderPinnedItem = (item: NavEntry, key: string) => {
|
|
const active = isActive(item)
|
|
const Icon = item.icon
|
|
const fullPath = location.pathname + location.search
|
|
const activeChild = item.children?.find(c => fullPath === c.href || fullPath.startsWith(c.href + '&'))
|
|
const isParentDimmed = !!activeChild && active
|
|
|
|
return (
|
|
<div key={key} className="group/nav">
|
|
<Link
|
|
to={item.href}
|
|
onMouseEnter={() => prefetchForRoute(item.href)}
|
|
className={cn(
|
|
'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-150',
|
|
active
|
|
? isParentDimmed
|
|
? 'bg-[rgba(34,211,238,0.05)] text-[#e2e5eb]/70'
|
|
: 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
|
|
: 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
|
|
)}
|
|
>
|
|
{active && !isParentDimmed && (
|
|
<div
|
|
className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2"
|
|
style={{ background: '#22d3ee', borderRadius: '0 3px 3px 0' }}
|
|
/>
|
|
)}
|
|
<Icon size={18} className={cn('shrink-0', active ? 'opacity-100' : 'opacity-70')} />
|
|
<span className="truncate">{item.label}</span>
|
|
{item.badge !== undefined && item.badge > 0 && (
|
|
<span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-[#4f5666]"
|
|
style={{ background: '#14161d', border: '1px solid #1e2130' }}>
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
|
|
{/* Sub-items for pinned mode */}
|
|
{item.children && item.children.length > 0 && (
|
|
<div className={cn(
|
|
'mt-0.5 space-y-0.5 overflow-hidden transition-all duration-200',
|
|
active || activeChild
|
|
? 'max-h-40 opacity-100'
|
|
: 'max-h-0 opacity-0 group-hover/nav:max-h-40 group-hover/nav:opacity-100'
|
|
)}>
|
|
{item.children.map(child => {
|
|
const childActive = isChildActive(child)
|
|
return (
|
|
<Link
|
|
key={child.href}
|
|
to={child.href}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-lg pl-9 pr-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
|
|
childActive
|
|
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
|
|
: 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
|
|
)}
|
|
>
|
|
<span className="truncate">{child.label}</span>
|
|
{child.count !== undefined && (
|
|
<span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-[#4f5666]"
|
|
style={{ background: '#14161d', border: '1px solid #1e2130' }}>
|
|
{child.count}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ── Flyout positioning: use data attribute for lookup ── */
|
|
|
|
const renderRailItemWithRef = (item: NavEntry, key: string) => {
|
|
return (
|
|
<div key={key} data-flyout-key={key}>
|
|
{renderRailItem(item, key + '-inner')}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ── Main render ──────────────────────────────────── */
|
|
|
|
if (sidebarPinned) {
|
|
return (
|
|
<nav
|
|
ref={sidebarRef}
|
|
className="sidebar flex flex-col"
|
|
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
|
|
onWheel={handleWheel}
|
|
>
|
|
{/* Pinned sidebar content */}
|
|
<div className="px-3 py-2 space-y-0.5">
|
|
{sections.map((section, si) => (
|
|
<div key={section.title}>
|
|
{si > 0 && (
|
|
<div className="font-mono text-[0.5625rem] uppercase tracking-[0.12em] text-[#4f5666] px-3 pt-3 pb-1">
|
|
{section.title}
|
|
</div>
|
|
)}
|
|
{section.items.map((item, ii) => renderPinnedItem(item, `${si}-${ii}`))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
{/* Footer */}
|
|
<div className="px-3 py-2 space-y-0.5" style={{ borderTop: '1px solid #1e2130' }}>
|
|
{footerItems.map((item, i) => renderPinnedItem(item, `footer-${i}`))}
|
|
<button
|
|
type="button"
|
|
onClick={toggleSidebarPinned}
|
|
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb] transition-colors"
|
|
title="Unpin sidebar"
|
|
>
|
|
<PinOff size={18} className="shrink-0" />
|
|
<span>Unpin</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
/* Icon Rail (default) */
|
|
return (
|
|
<nav
|
|
ref={sidebarRef}
|
|
className="sidebar flex flex-col items-center"
|
|
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
|
|
onWheel={handleWheel}
|
|
>
|
|
{/* Nav sections */}
|
|
<div className="flex flex-col items-center w-full px-1.5 py-2 space-y-0.5">
|
|
{sections.map((section, si) => (
|
|
<div key={section.title} className="w-full">
|
|
{si > 0 && (
|
|
<div className="mx-3 my-2" style={{ borderTop: '1px solid #1e2130' }} />
|
|
)}
|
|
{section.items.map((item, ii) => renderRailItemWithRef(item, `${si}-${ii}`))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
{/* Footer */}
|
|
<div className="flex flex-col items-center w-full px-1.5 py-2 space-y-0.5" style={{ borderTop: '1px solid #1e2130' }}>
|
|
{footerItems.map((item, i) => (
|
|
<div key={`footer-${i}`} data-flyout-key={`footer-${i}`}>
|
|
{renderRailItem(item, `footer-${i}-inner`)}
|
|
</div>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={toggleSidebarPinned}
|
|
className="flex flex-col items-center justify-center rounded-lg px-1 py-2 text-[#6b7280] hover:text-[#848b9b] transition-colors"
|
|
title="Pin sidebar"
|
|
>
|
|
<Pin size={18} className="opacity-60 hover:opacity-85" />
|
|
<span className="mt-1 text-[0.5625rem] font-mono leading-tight">Pin</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|