feat: UI design system - sidebar layout, workspace system, and shell redesign (#77)
* feat: add workspace system and sidebar layout (UI design system Phase A+B) Backend: Workspace model, migration (036), schemas, CRUD API endpoints. Adds workspace_id to trees and categories, seeds 4 default workspaces per account, auto-assigns existing trees by tree_type. Frontend: Complete AppLayout rewrite from top-nav to CSS Grid shell with persistent sidebar + topbar. New components: WorkspaceSwitcher, NavItem, CategoryList, TagCloud, TopBar, Sidebar. Dashboard components: QuickStats, FiltersBar, SectionGroup, TreeListItem, SessionsPanel. WorkspaceStore with localStorage persistence. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add command palette search, dashboard rewrite, and shell height fixes (Phase C) - Add ⌘K command palette with debounced search across flows and sessions - Rewrite QuickStartPage as dashboard with stats, filters, sessions panel - Fix h-[calc(100vh-4rem)] → h-full across all pages for CSS Grid shell - Add active session count badge to sidebar Sessions nav item Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add sidebar collapse, category/tag filtering, and workspace CRUD (Phase D) - Sidebar collapse/expand toggle with icon-only rail mode (persisted) - Sidebar category/tag clicks navigate to /trees with URL params - TreeLibraryPage syncs filters from URL search params bidirectionally - Workspace create modal with icon picker and auto-slug generation - TopBar logo adapts to collapsed sidebar state Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Quick Launch modal with actions and recent flows - Zap button opens Quick Launch with create/navigate shortcuts - Shows recent flows for quick session start - Keyboard navigation support (arrows + enter) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add activity notifications panel with session feed - Bell icon shows dot indicator for recent activity - Dropdown panel shows recent sessions with status icons - Links to session detail and sessions list page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: remove workspace system, add pinned flows and label renames Replace workspace system with pinned flows API (pin/unpin/list/reorder). Rename user-facing labels: Tree→Flow, Procedure→Project. Add sidebar nav sub-items for flow type filtering. Remove 11 workspace files, add migrations 037-038, clean all workspace references. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: collapsed sidebar layout scaling and toggle button size Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate auth pages to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TreeLibraryPage to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate session pages to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TreeEditorPage to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate TreeNavigationPage to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate session sharing components to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: remove workspace dropdown animation (dead code) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate common components to new design system Migrate 15 components from monochrome glass-card design to purple gradient accent design system tokens (bg-card, border-border, text-foreground, bg-gradient-brand, etc.) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate procedural and step library components to new design system Migrate 10 components from monochrome glass-card design to purple gradient accent design system tokens. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate admin pages and components to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate remaining pages to new design system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: migrate remaining components to new design system Migrates 38 files: tree-editor forms, session modals, step library, common components, library views, tree preview, and misc UI to use design tokens (bg-card, border-border, text-foreground, bg-accent, bg-gradient-brand) replacing old monochrome patterns. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: keep brand text visible on sidebar collapse, hide sub-items until hover - TopBar: always show "ResolutionFlow" text regardless of sidebar state - NavItem: sub-items (Troubleshooting, Projects) hidden by default, revealed on hover or when a child route is active Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #77.
This commit is contained in:
chihlasm
@@ -1,61 +1,34 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'
|
||||
import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, LogOut, Shield } from 'lucide-react'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||
import { BrandLogo } from '@/components/common/BrandLogo'
|
||||
import { Menu, X, LogOut, User, Shield, ChevronDown, FolderTree, ListOrdered, Layers } from 'lucide-react'
|
||||
import { TopBar } from './TopBar'
|
||||
import { Sidebar } from './Sidebar'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavItem {
|
||||
path: string
|
||||
label: string
|
||||
children?: { path: string; label: string; icon: React.ReactNode }[]
|
||||
}
|
||||
|
||||
export function AppLayout() {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const { user, logout } = useAuthStore()
|
||||
const { effectiveRole, isSuperAdmin } = usePermissions()
|
||||
const { effectiveRole } = usePermissions()
|
||||
const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [flowsDropdownOpen, setFlowsDropdownOpen] = useState(false)
|
||||
const flowsDropdownRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleLogout = async () => {
|
||||
setMobileMenuOpen(false)
|
||||
await logout()
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
// Close mobile menu on route change
|
||||
const [prevPath, setPrevPath] = useState(location.pathname)
|
||||
if (prevPath !== location.pathname) {
|
||||
setPrevPath(location.pathname)
|
||||
if (mobileMenuOpen) setMobileMenuOpen(false)
|
||||
setFlowsDropdownOpen(false)
|
||||
}
|
||||
|
||||
// Close on Escape
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
setMobileMenuOpen(false)
|
||||
setFlowsDropdownOpen(false)
|
||||
}
|
||||
if (e.key === 'Escape') setMobileMenuOpen(false)
|
||||
}, [])
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (flowsDropdownRef.current && !flowsDropdownRef.current.contains(e.target as Node)) {
|
||||
setFlowsDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
if (flowsDropdownOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||
}, [flowsDropdownOpen])
|
||||
|
||||
useEffect(() => {
|
||||
if (mobileMenuOpen) {
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
@@ -69,250 +42,98 @@ export function AppLayout() {
|
||||
}
|
||||
}, [mobileMenuOpen, handleKeyDown])
|
||||
|
||||
const isFlowsActive = location.pathname.startsWith('/trees') || location.pathname.startsWith('/flows')
|
||||
const handleLogout = async () => {
|
||||
setMobileMenuOpen(false)
|
||||
await logout()
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: '/', label: 'Home' },
|
||||
{
|
||||
path: '/trees',
|
||||
label: 'Flows',
|
||||
children: [
|
||||
{ path: '/trees', label: 'All Flows', icon: <Layers className="h-4 w-4 text-white/50" /> },
|
||||
{ path: '/trees?type=troubleshooting', label: 'Troubleshooting', icon: <FolderTree className="h-4 w-4 text-white/50" /> },
|
||||
{ path: '/trees?type=procedural', label: 'Procedures', icon: <ListOrdered className="h-4 w-4 text-white/50" /> },
|
||||
],
|
||||
},
|
||||
{ path: '/my-trees', label: 'My Flows' },
|
||||
{ path: '/sessions', label: 'Sessions' },
|
||||
{ path: '/shares', label: 'My Shares' },
|
||||
{ path: '/account', label: 'Account' },
|
||||
...(isSuperAdmin ? [{ path: '/admin', label: 'Admin Panel' }] : []),
|
||||
const mobileNavItems = [
|
||||
{ path: '/', label: 'Dashboard', icon: LayoutGrid },
|
||||
{ path: '/trees', label: 'All Flows', icon: Box },
|
||||
{ path: '/my-trees', label: 'My Flows', icon: PenLine },
|
||||
{ path: '/sessions', label: 'Sessions', icon: Clock },
|
||||
{ path: '/shares', label: 'Exports', icon: FileText },
|
||||
{ path: '/step-library', label: 'Step Library', icon: Bookmark },
|
||||
{ path: '/account', label: 'Team', icon: Users },
|
||||
{ path: '/account', label: 'Settings', icon: Settings },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black">
|
||||
{/* Subtle radial overlay for depth */}
|
||||
<div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(80,80,100,0.02),transparent_50%)]" />
|
||||
<div className={cn('app-shell', sidebarCollapsed && 'app-shell--collapsed')}>
|
||||
{/* Top Bar - spans full width */}
|
||||
<TopBar />
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 border-b border-white/[0.06] bg-black/80 backdrop-blur-xl">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
className="rounded-xl p-2 text-white/50 hover:bg-white/10 hover:text-white transition-all sm:hidden"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</button>
|
||||
{/* Sidebar - desktop only */}
|
||||
<div className="hidden md:block">
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center gap-3 group">
|
||||
<div className="w-9 h-9 rounded-xl bg-white flex items-center justify-center transition-transform group-hover:scale-105">
|
||||
<BrandLogo size="sm" className="h-5 w-5 invert" />
|
||||
</div>
|
||||
<span className="text-xl font-semibold text-white tracking-tight">
|
||||
ResolutionFlow
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden items-center gap-1 sm:flex">
|
||||
{navItems.map((item) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<div key={item.path} className="relative" ref={flowsDropdownRef}>
|
||||
<button
|
||||
onClick={() => setFlowsDropdownOpen(!flowsDropdownOpen)}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-xl px-4 py-2 text-sm font-medium transition-all',
|
||||
isFlowsActive
|
||||
? 'bg-white/10 text-white border border-white/20'
|
||||
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
<ChevronDown className={cn('h-3.5 w-3.5 transition-transform', flowsDropdownOpen && 'rotate-180')} />
|
||||
</button>
|
||||
{flowsDropdownOpen && (
|
||||
<div className="absolute left-0 z-50 mt-1 w-52 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
|
||||
{item.children.map((child) => (
|
||||
<Link
|
||||
key={child.path}
|
||||
to={child.path}
|
||||
onClick={() => setFlowsDropdownOpen(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{child.icon}
|
||||
{child.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isActive = item.path === '/'
|
||||
? location.pathname === '/'
|
||||
: location.pathname.startsWith(item.path)
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={cn(
|
||||
'rounded-xl px-4 py-2 text-sm font-medium transition-all',
|
||||
isActive
|
||||
? 'bg-white/10 text-white border border-white/20'
|
||||
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Right side controls */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* User info */}
|
||||
<div className="hidden items-center gap-3 sm:flex">
|
||||
<div className="flex items-center gap-2 rounded-xl bg-white/[0.06] px-3 py-1.5 border border-white/10">
|
||||
<User className="h-4 w-4 text-white/40" />
|
||||
<span className="text-sm text-white/70">
|
||||
{user?.name || user?.email}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Role badge */}
|
||||
{effectiveRole && effectiveRole !== 'engineer' && (
|
||||
<div className="px-3 py-1.5 rounded-xl bg-white/10 border border-white/20">
|
||||
<span className="flex items-center gap-1.5 text-xs text-white font-semibold">
|
||||
<Shield className="h-3 w-3" />
|
||||
{effectiveRole === 'super_admin' ? 'Super Admin' :
|
||||
effectiveRole === 'owner' ? 'Owner' :
|
||||
'Viewer'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Logout button */}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={cn(
|
||||
'hidden items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium sm:flex',
|
||||
'text-white/50 hover:text-white hover:bg-white/10 transition-all',
|
||||
'border border-white/10 hover:border-white/20'
|
||||
)}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/* Mobile hamburger - overlaid on topbar */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
className="fixed left-4 top-3.5 z-50 rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors md:hidden"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<Menu size={20} />
|
||||
</button>
|
||||
|
||||
{/* Mobile Nav Drawer */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-50 sm:hidden">
|
||||
{/* Backdrop */}
|
||||
<div className="fixed inset-0 z-50 md:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200"
|
||||
className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-fade-in"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<nav className="absolute inset-y-0 left-0 w-72 border-r border-white/[0.06] bg-black shadow-2xl animate-in slide-in-from-left duration-300">
|
||||
<div className="flex h-16 items-center justify-between border-b border-white/[0.06] px-4">
|
||||
<Link to="/" className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-white flex items-center justify-center">
|
||||
<BrandLogo size="sm" className="h-5 w-5 invert" />
|
||||
<nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[hsl(var(--sidebar-bg))] shadow-2xl animate-slide-in-left">
|
||||
<div className="flex h-14 items-center justify-between border-b border-border px-4">
|
||||
<Link to="/" className="flex items-center gap-2.5">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
|
||||
<BrandLogo size="sm" className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-xl font-semibold text-white tracking-tight">
|
||||
ResolutionFlow
|
||||
</span>
|
||||
<span className="text-sm font-heading font-bold">ResolutionFlow</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-xl p-2 text-white/50 hover:bg-white/10 hover:text-white transition-all"
|
||||
className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col p-4">
|
||||
<div className="flex flex-col p-3">
|
||||
{/* User info */}
|
||||
<div className="mb-4 border-b border-white/[0.06] pb-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<User className="h-4 w-4 text-white/40" />
|
||||
<p className="text-sm font-medium text-white">
|
||||
{user?.name || user?.email}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-3 border-b border-border pb-3 px-3">
|
||||
<p className="text-sm font-medium text-foreground">{user?.name || user?.email}</p>
|
||||
{effectiveRole && effectiveRole !== 'engineer' && (
|
||||
<div className="inline-flex px-3 py-1.5 rounded-xl bg-white/10 border border-white/20">
|
||||
<span className="flex items-center gap-1.5 text-xs text-white font-semibold">
|
||||
<Shield className="h-3 w-3" />
|
||||
{effectiveRole === 'super_admin' ? 'Super Admin' :
|
||||
effectiveRole === 'owner' ? 'Owner' :
|
||||
'Viewer'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Shield size={10} />
|
||||
{effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
<div className="space-y-1">
|
||||
{navItems.map((item) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<div key={item.path}>
|
||||
<div className={cn(
|
||||
'px-4 py-2 text-xs font-semibold uppercase tracking-wider',
|
||||
isFlowsActive ? 'text-white/60' : 'text-white/30'
|
||||
)}>
|
||||
{item.label}
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{item.children.map((child) => (
|
||||
<Link
|
||||
key={child.path}
|
||||
to={child.path}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ml-1',
|
||||
'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
||||
)}
|
||||
>
|
||||
{child.icon}
|
||||
{child.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="space-y-0.5">
|
||||
{mobileNavItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = item.path === '/'
|
||||
? location.pathname === '/'
|
||||
: location.pathname.startsWith(item.path)
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
key={item.path + item.label}
|
||||
to={item.path}
|
||||
className={cn(
|
||||
'block rounded-xl px-4 py-3 text-sm font-medium transition-all',
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-white/10 text-white border border-white/20'
|
||||
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
||||
? 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Icon size={18} />
|
||||
{item.label}
|
||||
</Link>
|
||||
)
|
||||
@@ -320,16 +141,12 @@ export function AppLayout() {
|
||||
</div>
|
||||
|
||||
{/* Logout */}
|
||||
<div className="mt-4 border-t border-white/[0.06] pt-4">
|
||||
<div className="mt-3 border-t border-border pt-3">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-medium',
|
||||
'text-white/50 hover:text-white hover:bg-white/10 transition-all',
|
||||
'border border-white/10 hover:border-white/20'
|
||||
)}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<LogOut size={18} />
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
@@ -339,7 +156,7 @@ export function AppLayout() {
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="relative animate-in fade-in duration-500">
|
||||
<main className="main-content overflow-y-auto">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
217
frontend/src/components/layout/CommandPalette.tsx
Normal file
217
frontend/src/components/layout/CommandPalette.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Search, Loader2, ArrowRight, FileText, Clock } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { sessionsApi } from '@/api/sessions'
|
||||
import type { TreeListItem } from '@/types'
|
||||
import type { Session } from '@/types/session'
|
||||
import { getTreeNavigatePath } from '@/lib/routing'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface CommandPaletteProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface ResultItem {
|
||||
id: string
|
||||
type: 'tree' | 'session'
|
||||
title: string
|
||||
subtitle?: string
|
||||
icon: 'tree' | 'session'
|
||||
path: string
|
||||
}
|
||||
|
||||
export function CommandPalette({ open, onClose }: CommandPaletteProps) {
|
||||
const navigate = useNavigate()
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState<ResultItem[]>([])
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setQuery('')
|
||||
setResults([])
|
||||
setSelectedIndex(0)
|
||||
// Slight delay to ensure modal is rendered
|
||||
setTimeout(() => inputRef.current?.focus(), 50)
|
||||
}
|
||||
}, [open])
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [open, onClose])
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||||
if (query.length < 2) {
|
||||
setResults([])
|
||||
setIsSearching(false)
|
||||
return
|
||||
}
|
||||
setIsSearching(true)
|
||||
debounceRef.current = setTimeout(async () => {
|
||||
try {
|
||||
const [trees, sessions] = await Promise.all([
|
||||
treesApi.search(query, 6),
|
||||
sessionsApi.list({ size: 5 }).catch(() => [] as Session[]),
|
||||
])
|
||||
|
||||
const treeResults: ResultItem[] = trees.map((t: TreeListItem) => ({
|
||||
id: t.id,
|
||||
type: 'tree' as const,
|
||||
title: t.name,
|
||||
subtitle: t.description || undefined,
|
||||
icon: 'tree' as const,
|
||||
path: getTreeNavigatePath(t.id, t.tree_type),
|
||||
}))
|
||||
|
||||
// Filter sessions by tree name matching query
|
||||
const sessionResults: ResultItem[] = sessions
|
||||
.filter((s: Session) =>
|
||||
s.tree_snapshot?.name?.toLowerCase().includes(query.toLowerCase())
|
||||
)
|
||||
.slice(0, 3)
|
||||
.map((s: Session) => ({
|
||||
id: s.id,
|
||||
type: 'session' as const,
|
||||
title: s.tree_snapshot?.name || 'Session',
|
||||
subtitle: s.completed_at ? 'Completed' : 'In progress',
|
||||
icon: 'session' as const,
|
||||
path: `/sessions/${s.id}`,
|
||||
}))
|
||||
|
||||
setResults([...treeResults, ...sessionResults])
|
||||
} catch {
|
||||
setResults([])
|
||||
} finally {
|
||||
setIsSearching(false)
|
||||
}
|
||||
}, 250)
|
||||
return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
|
||||
}, [query])
|
||||
|
||||
const handleSelect = useCallback((item: ResultItem) => {
|
||||
onClose()
|
||||
navigate(item.path)
|
||||
}, [navigate, onClose])
|
||||
|
||||
// Keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
setSelectedIndex(i => Math.min(i + 1, results.length - 1))
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
setSelectedIndex(i => Math.max(i - 1, 0))
|
||||
} else if (e.key === 'Enter' && results[selectedIndex]) {
|
||||
e.preventDefault()
|
||||
handleSelect(results[selectedIndex])
|
||||
}
|
||||
}
|
||||
|
||||
if (!open) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-start justify-center pt-[20vh]">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Palette */}
|
||||
<div className="relative w-full max-w-lg rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
|
||||
{/* Search input */}
|
||||
<div className="flex items-center gap-3 border-b border-border px-4 py-3">
|
||||
<Search size={18} className="shrink-0 text-muted-foreground" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={e => { setQuery(e.target.value); setSelectedIndex(0) }}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search flows, sessions…"
|
||||
className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
|
||||
/>
|
||||
<kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
|
||||
ESC
|
||||
</kbd>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="max-h-72 overflow-y-auto">
|
||||
{isSearching ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : query.length >= 2 && results.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
No results for “{query}”
|
||||
</div>
|
||||
) : results.length > 0 ? (
|
||||
<div className="p-1">
|
||||
{results.map((item, i) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => handleSelect(item)}
|
||||
onMouseEnter={() => setSelectedIndex(i)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
|
||||
i === selectedIndex
|
||||
? 'bg-accent text-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
{item.type === 'tree' ? (
|
||||
<FileText size={16} className="shrink-0 opacity-60" />
|
||||
) : (
|
||||
<Clock size={16} className="shrink-0 opacity-60" />
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium truncate">{item.title}</p>
|
||||
{item.subtitle && (
|
||||
<p className="text-[0.6875rem] text-muted-foreground truncate">{item.subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
{i === selectedIndex && (
|
||||
<ArrowRight size={14} className="shrink-0 opacity-40" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 py-6 text-center text-sm text-muted-foreground">
|
||||
Type to search flows and sessions
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer hints */}
|
||||
{results.length > 0 && (
|
||||
<div className="flex items-center gap-4 border-t border-border px-4 py-2">
|
||||
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
|
||||
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
|
||||
Navigate
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
|
||||
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
|
||||
Open
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
127
frontend/src/components/layout/NavItem.tsx
Normal file
127
frontend/src/components/layout/NavItem.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavSubItem {
|
||||
href: string
|
||||
label: string
|
||||
count?: number
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
interface NavItemProps {
|
||||
href: string
|
||||
icon: LucideIcon
|
||||
label: string
|
||||
badge?: number | 'dot'
|
||||
matchPaths?: string[]
|
||||
collapsed?: boolean
|
||||
children?: NavSubItem[]
|
||||
}
|
||||
|
||||
export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, children }: NavItemProps) {
|
||||
const location = useLocation()
|
||||
const fullPath = location.pathname + location.search
|
||||
const isActive = matchPaths
|
||||
? matchPaths.some(p => location.pathname.startsWith(p))
|
||||
: href === '/'
|
||||
? location.pathname === '/'
|
||||
: location.pathname.startsWith(href)
|
||||
|
||||
// Check if any child is specifically active
|
||||
const activeChild = children?.find(c => fullPath === c.href || fullPath.startsWith(c.href + '&'))
|
||||
const isParentDimmed = !!activeChild && isActive
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
<Link
|
||||
to={href}
|
||||
className={cn(
|
||||
'group relative flex items-center justify-center rounded-lg p-2 transition-all duration-120',
|
||||
isActive
|
||||
? 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
)}
|
||||
title={label}
|
||||
>
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-brand" />
|
||||
)}
|
||||
<Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} />
|
||||
{badge !== undefined && badge !== 0 && badge !== 'dot' && (
|
||||
<span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[0.5rem] font-bold text-primary-foreground">
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group/nav">
|
||||
<Link
|
||||
to={href}
|
||||
className={cn(
|
||||
'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
|
||||
isActive
|
||||
? isParentDimmed
|
||||
? 'bg-[hsl(var(--sidebar-active))]/50 text-foreground/70'
|
||||
: 'bg-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{/* Active indicator bar */}
|
||||
{isActive && !isParentDimmed && (
|
||||
<div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-gradient-brand" />
|
||||
)}
|
||||
|
||||
<Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} />
|
||||
<span className="truncate">{label}</span>
|
||||
|
||||
{/* Badge */}
|
||||
{badge !== undefined && badge !== 0 && (
|
||||
badge === 'dot' ? (
|
||||
<span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-brand-gradient-from" />
|
||||
) : (
|
||||
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
|
||||
{badge}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Sub-items — visible on hover or when a child is active */}
|
||||
{children && children.length > 0 && (
|
||||
<div className={cn(
|
||||
'mt-0.5 space-y-0.5 overflow-hidden transition-all duration-200',
|
||||
isActive || activeChild
|
||||
? 'max-h-40 opacity-100'
|
||||
: 'max-h-0 opacity-0 group-hover/nav:max-h-40 group-hover/nav:opacity-100'
|
||||
)}>
|
||||
{children.map(child => {
|
||||
const childActive = fullPath === child.href || fullPath.startsWith(child.href + '&')
|
||||
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-[hsl(var(--sidebar-active))] text-foreground'
|
||||
: 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{child.label}</span>
|
||||
{child.count !== undefined && (
|
||||
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
|
||||
{child.count}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
105
frontend/src/components/layout/NotificationsPanel.tsx
Normal file
105
frontend/src/components/layout/NotificationsPanel.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Bell, CheckCircle, Clock } from 'lucide-react'
|
||||
import { sessionsApi } from '@/api/sessions'
|
||||
import type { Session } from '@/types/session'
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const diff = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
|
||||
if (diff < 60) return 'just now'
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
|
||||
return `${Math.floor(diff / 86400)}d ago`
|
||||
}
|
||||
|
||||
export function NotificationsPanel() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [sessions, setSessions] = useState<Session[]>([])
|
||||
const [hasNew, setHasNew] = useState(false)
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
sessionsApi.list({ size: 8 })
|
||||
.then(data => {
|
||||
setSessions(data)
|
||||
// Mark as "new" if any session was updated in the last hour
|
||||
const oneHourAgo = Date.now() - 3600000
|
||||
setHasNew(data.some(s => new Date(s.started_at).getTime() > oneHourAgo))
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
|
||||
}
|
||||
if (open) document.addEventListener('mousedown', handler)
|
||||
return () => document.removeEventListener('mousedown', handler)
|
||||
}, [open])
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
onClick={() => { setOpen(!open); setHasNew(false) }}
|
||||
className="relative rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
|
||||
title="Notifications"
|
||||
>
|
||||
<Bell size={18} />
|
||||
{hasNew && (
|
||||
<span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-primary" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 z-50 mt-2 w-80 rounded-xl border border-border bg-card shadow-xl animate-scale-in">
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-3">
|
||||
<h3 className="text-sm font-heading font-semibold text-foreground">Activity</h3>
|
||||
<Link
|
||||
to="/sessions"
|
||||
onClick={() => setOpen(false)}
|
||||
className="text-[0.6875rem] text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
View All
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{sessions.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
No recent activity
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-72 overflow-y-auto divide-y divide-border">
|
||||
{sessions.map(session => (
|
||||
<Link
|
||||
key={session.id}
|
||||
to={`/sessions/${session.id}`}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-start gap-3 px-4 py-3 hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div className="mt-0.5">
|
||||
{session.completed_at ? (
|
||||
<CheckCircle size={16} className="text-emerald-400" />
|
||||
) : (
|
||||
<Clock size={16} className="text-amber-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm text-foreground truncate">
|
||||
{session.tree_snapshot?.name || 'Session'}
|
||||
</p>
|
||||
<p className="text-[0.6875rem] text-muted-foreground">
|
||||
{session.completed_at
|
||||
? `Completed ${timeAgo(session.completed_at)}`
|
||||
: `Started ${timeAgo(session.started_at)}`}
|
||||
{session.client_name && ` · ${session.client_name}`}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -15,7 +15,7 @@ export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps)
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
157
frontend/src/components/layout/QuickLaunch.tsx
Normal file
157
frontend/src/components/layout/QuickLaunch.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Plus, Play, FileText, Bookmark, Users, X } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import type { TreeListItem } from '@/types'
|
||||
import { getTreeNavigatePath } from '@/lib/routing'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface QuickLaunchProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface QuickAction {
|
||||
id: string
|
||||
icon: typeof Plus
|
||||
label: string
|
||||
description: string
|
||||
path: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const ACTIONS: QuickAction[] = [
|
||||
{ id: 'new-tree', icon: Plus, label: 'New Troubleshooting Flow', description: 'Create a branching decision tree', path: '/trees/new', color: '#3b82f6' },
|
||||
{ id: 'new-project', icon: Plus, label: 'New Project', description: 'Create a step-by-step project', path: '/flows/new', color: '#8b5cf6' },
|
||||
{ id: 'sessions', icon: Play, label: 'View Sessions', description: 'See active and recent sessions', path: '/sessions', color: '#f59e0b' },
|
||||
{ id: 'step-library', icon: Bookmark, label: 'Step Library', description: 'Browse reusable steps', path: '/step-library', color: '#10b981' },
|
||||
{ id: 'exports', icon: FileText, label: 'Exports & Shares', description: 'View shared session exports', path: '/shares', color: '#6366f1' },
|
||||
{ id: 'team', icon: Users, label: 'Team Settings', description: 'Manage team members and roles', path: '/account', color: '#ec4899' },
|
||||
]
|
||||
|
||||
export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
|
||||
const navigate = useNavigate()
|
||||
const [recentTrees, setRecentTrees] = useState<TreeListItem[]>([])
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const allItems = [...ACTIONS.map(a => ({ type: 'action' as const, ...a })), ...recentTrees.slice(0, 4).map(t => ({ type: 'tree' as const, ...t }))]
|
||||
const totalItems = allItems.length
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setSelectedIndex(0)
|
||||
treesApi.list({ sort_by: 'updated_at' })
|
||||
.then(trees => setRecentTrees(trees.slice(0, 4)))
|
||||
.catch(() => {})
|
||||
}
|
||||
}, [open])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIndex(i => Math.min(i + 1, totalItems - 1)) }
|
||||
if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIndex(i => Math.max(i - 1, 0)) }
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
const item = allItems[selectedIndex]
|
||||
if (!item) return
|
||||
onClose()
|
||||
if (item.type === 'action') navigate(item.path)
|
||||
else navigate(getTreeNavigatePath(item.id, item.tree_type))
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [open, selectedIndex, totalItems, allItems, navigate, onClose])
|
||||
|
||||
if (!open) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" onClick={onClose} />
|
||||
<div ref={containerRef} className="relative w-full max-w-md rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-3">
|
||||
<h3 className="text-sm font-heading font-semibold text-foreground">Quick Launch</h3>
|
||||
<button onClick={onClose} className="rounded-lg p-1 text-muted-foreground hover:text-foreground">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-80 overflow-y-auto p-1">
|
||||
{/* Actions */}
|
||||
<p className="px-3 py-1.5 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Actions</p>
|
||||
{ACTIONS.map((action, i) => {
|
||||
const Icon = action.icon
|
||||
return (
|
||||
<button
|
||||
key={action.id}
|
||||
onClick={() => { onClose(); navigate(action.path) }}
|
||||
onMouseEnter={() => setSelectedIndex(i)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
|
||||
i === selectedIndex ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
|
||||
style={{ backgroundColor: `${action.color}15` }}
|
||||
>
|
||||
<Icon size={16} style={{ color: action.color }} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium">{action.label}</p>
|
||||
<p className="text-[0.6875rem] text-muted-foreground">{action.description}</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Recent flows */}
|
||||
{recentTrees.length > 0 && (
|
||||
<>
|
||||
<p className="mt-2 px-3 py-1.5 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Recent Flows</p>
|
||||
{recentTrees.slice(0, 4).map((tree, ti) => {
|
||||
const idx = ACTIONS.length + ti
|
||||
return (
|
||||
<button
|
||||
key={tree.id}
|
||||
onClick={() => { onClose(); navigate(getTreeNavigatePath(tree.id, tree.tree_type)) }}
|
||||
onMouseEnter={() => setSelectedIndex(idx)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
|
||||
idx === selectedIndex ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-card border border-border text-base">
|
||||
{tree.tree_type === 'procedural' ? '📋' : '🔧'}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate">{tree.name}</p>
|
||||
<p className="text-[0.6875rem] text-muted-foreground">
|
||||
{tree.tree_type === 'procedural' ? 'Project' : 'Troubleshooting'} · {tree.usage_count} uses
|
||||
</p>
|
||||
</div>
|
||||
<Play size={14} className="ml-auto shrink-0 opacity-40" />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 border-t border-border px-4 py-2">
|
||||
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
|
||||
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
|
||||
Navigate
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
|
||||
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
|
||||
Open
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
199
frontend/src/components/layout/Sidebar.tsx
Normal file
199
frontend/src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||
import { CategoryList } from '@/components/sidebar/CategoryList'
|
||||
import { TagCloud } from '@/components/sidebar/TagCloud'
|
||||
import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection'
|
||||
import { NavItem } from './NavItem'
|
||||
import { categoriesApi, tagsApi, sessionsApi, treesApi } from '@/api'
|
||||
import { pinnedFlowsApi } from '@/api/pinnedFlows'
|
||||
import type { PinnedFlow } from '@/api/pinnedFlows'
|
||||
import { toast } from '@/lib/toast'
|
||||
|
||||
interface CategoryItem {
|
||||
id: string
|
||||
name: string
|
||||
color: string
|
||||
count: number
|
||||
}
|
||||
|
||||
export function Sidebar() {
|
||||
const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
|
||||
const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar)
|
||||
|
||||
const [categories, setCategories] = useState<CategoryItem[]>([])
|
||||
const [tags, setTags] = useState<string[]>([])
|
||||
const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
|
||||
const [activeTags, setActiveTags] = useState<string[]>([])
|
||||
const [activeSessionCount, setActiveSessionCount] = useState(0)
|
||||
const [pinnedFlows, setPinnedFlows] = useState<PinnedFlow[]>([])
|
||||
const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0 })
|
||||
|
||||
// Fetch sidebar data on mount
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [cats, tagList, activeSessions, allTrees, pinnedData] = await Promise.all([
|
||||
categoriesApi.list(),
|
||||
tagsApi.list().catch(() => []),
|
||||
sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
|
||||
treesApi.list({ sort_by: 'name' }).catch(() => []),
|
||||
pinnedFlowsApi.list().catch(() => ({ items: [], count: 0 })),
|
||||
])
|
||||
setCategories(cats.map(c => ({
|
||||
id: c.id,
|
||||
name: c.name,
|
||||
color: c.color || '#3b82f6',
|
||||
count: c.tree_count || 0,
|
||||
})))
|
||||
setTags(tagList.map((t: { name: string }) => t.name).slice(0, 15))
|
||||
setActiveSessionCount(activeSessions.length)
|
||||
setPinnedFlows(pinnedData.items)
|
||||
|
||||
const total = allTrees.length
|
||||
const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length
|
||||
const procedural = allTrees.filter(t => t.tree_type === 'procedural').length
|
||||
setTreeCounts({ total, troubleshooting, procedural })
|
||||
} catch {
|
||||
// Silently handle errors
|
||||
}
|
||||
}
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
// Sync active filters from URL when on /trees page
|
||||
useEffect(() => {
|
||||
if (location.pathname === '/trees') {
|
||||
const params = new URLSearchParams(location.search)
|
||||
setActiveCategoryId(params.get('category') || null)
|
||||
const tagsParam = params.get('tags')
|
||||
setActiveTags(tagsParam ? tagsParam.split(',') : [])
|
||||
}
|
||||
}, [location.pathname, location.search])
|
||||
|
||||
const handleCategorySelect = (id: string | null) => {
|
||||
setActiveCategoryId(id)
|
||||
const params = new URLSearchParams(location.search)
|
||||
if (id) {
|
||||
params.set('category', id)
|
||||
} else {
|
||||
params.delete('category')
|
||||
}
|
||||
navigate(`/trees?${params.toString()}`)
|
||||
}
|
||||
|
||||
const handleTagClick = (tag: string) => {
|
||||
const next = activeTags.includes(tag)
|
||||
? activeTags.filter(t => t !== tag)
|
||||
: [...activeTags, tag]
|
||||
setActiveTags(next)
|
||||
const params = new URLSearchParams(location.search)
|
||||
if (next.length > 0) {
|
||||
params.set('tags', next.join(','))
|
||||
} else {
|
||||
params.delete('tags')
|
||||
}
|
||||
navigate(`/trees?${params.toString()}`)
|
||||
}
|
||||
|
||||
const handleUnpin = async (treeId: string) => {
|
||||
try {
|
||||
await pinnedFlowsApi.unpin(treeId)
|
||||
setPinnedFlows(prev => prev.filter(f => f.tree_id !== treeId))
|
||||
toast.success('Unpinned from sidebar')
|
||||
} catch {
|
||||
toast.error('Failed to unpin flow')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="sidebar flex flex-col border-r border-border bg-[hsl(var(--sidebar-bg))]">
|
||||
{sidebarCollapsed ? (
|
||||
<>
|
||||
{/* Collapsed: icon-only nav */}
|
||||
<div className="flex flex-col items-center px-1.5 py-3 space-y-1">
|
||||
<NavItem href="/" icon={LayoutGrid} label="Dashboard" collapsed />
|
||||
<NavItem href="/trees" icon={Box} label="All Flows" matchPaths={['/trees', '/flows']} collapsed />
|
||||
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
|
||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
|
||||
<NavItem href="/shares" icon={FileText} label="Exports" collapsed />
|
||||
<NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Pinned Flows */}
|
||||
<PinnedFlowsSection flows={pinnedFlows} onUnpin={handleUnpin} />
|
||||
|
||||
<div className="border-b border-[hsl(var(--border-subtle))]" />
|
||||
|
||||
{/* Primary Navigation */}
|
||||
<div className="px-3 py-2 space-y-0.5">
|
||||
<NavItem href="/" icon={LayoutGrid} label="Dashboard" />
|
||||
<NavItem
|
||||
href="/trees"
|
||||
icon={Box}
|
||||
label="All Flows"
|
||||
badge={treeCounts.total || undefined}
|
||||
matchPaths={['/trees', '/flows']}
|
||||
children={[
|
||||
{ href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: treeCounts.troubleshooting || undefined },
|
||||
{ href: '/trees?type=procedural', label: 'Projects', count: treeCounts.procedural || undefined },
|
||||
]}
|
||||
/>
|
||||
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
|
||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
|
||||
<NavItem href="/shares" icon={FileText} label="Exports" />
|
||||
<NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
|
||||
</div>
|
||||
|
||||
<div className="border-b border-[hsl(var(--border-subtle))]" />
|
||||
|
||||
{/* Categories */}
|
||||
<CategoryList
|
||||
categories={categories}
|
||||
activeId={activeCategoryId}
|
||||
onSelect={handleCategorySelect}
|
||||
/>
|
||||
|
||||
<div className="border-b border-[hsl(var(--border-subtle))]" />
|
||||
|
||||
{/* Tags */}
|
||||
<TagCloud tags={tags} activeTags={activeTags} onTagClick={handleTagClick} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Footer */}
|
||||
<div className={cn(
|
||||
"border-t border-[hsl(var(--border-subtle))]",
|
||||
sidebarCollapsed ? "px-1.5 py-2 flex flex-col items-center" : "px-3 py-2 space-y-0.5"
|
||||
)}>
|
||||
{!sidebarCollapsed && (
|
||||
<>
|
||||
<NavItem href="/account" icon={Users} label="Team" />
|
||||
<NavItem href="/account" icon={Settings} label="Settings" />
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className={cn(
|
||||
"flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors",
|
||||
sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
|
||||
)}
|
||||
title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
{sidebarCollapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={18} />}
|
||||
{!sidebarCollapsed && <span>Collapse</span>}
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
174
frontend/src/components/layout/TopBar.tsx
Normal file
174
frontend/src/components/layout/TopBar.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Search, Zap, LogOut, User, Shield, Settings } from 'lucide-react'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { BrandLogo } from '@/components/common/BrandLogo'
|
||||
import { CommandPalette } from './CommandPalette'
|
||||
import { QuickLaunch } from './QuickLaunch'
|
||||
import { NotificationsPanel } from './NotificationsPanel'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export function TopBar() {
|
||||
const navigate = useNavigate()
|
||||
const { user, logout } = useAuthStore()
|
||||
const { effectiveRole, isSuperAdmin } = usePermissions()
|
||||
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
||||
const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
|
||||
const [quickLaunchOpen, setQuickLaunchOpen] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleLogout = async () => {
|
||||
setUserMenuOpen(false)
|
||||
await logout()
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
||||
setUserMenuOpen(false)
|
||||
}
|
||||
}
|
||||
if (userMenuOpen) document.addEventListener('mousedown', handleClickOutside)
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||
}, [userMenuOpen])
|
||||
|
||||
// ⌘K / Ctrl+K global shortcut
|
||||
const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
setCommandPaletteOpen(prev => !prev)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleGlobalKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleGlobalKeyDown)
|
||||
}, [handleGlobalKeyDown])
|
||||
|
||||
const initials = user?.name
|
||||
? user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
|
||||
: user?.email?.[0]?.toUpperCase() || '?'
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
|
||||
{/* Logo area */}
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center gap-2.5 pr-4 transition-all duration-200"
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-brand">
|
||||
<BrandLogo size="sm" className="h-4 w-4" />
|
||||
</div>
|
||||
<span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap">
|
||||
<span className="text-foreground">Resolution</span>
|
||||
<span className="text-gradient-brand">Flow</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Spacer - push search to center */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Search trigger */}
|
||||
<button
|
||||
onClick={() => setCommandPaletteOpen(true)}
|
||||
className="relative w-full text-left"
|
||||
style={{ maxWidth: '480px' }}
|
||||
>
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<div className="w-full rounded-lg border border-border bg-card py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer hover:border-primary/30 transition-colors">
|
||||
Search flows, sessions, tags…
|
||||
</div>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
|
||||
{navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Spacer - push actions to right */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setQuickLaunchOpen(true)}
|
||||
className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
|
||||
title="Quick Launch"
|
||||
>
|
||||
<Zap size={18} />
|
||||
</button>
|
||||
<NotificationsPanel />
|
||||
|
||||
{/* User avatar & menu */}
|
||||
<div className="relative ml-2" ref={menuRef}>
|
||||
<button
|
||||
onClick={() => setUserMenuOpen(!userMenuOpen)}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
|
||||
title={user?.name || user?.email || 'User'}
|
||||
>
|
||||
{initials}
|
||||
</button>
|
||||
|
||||
{userMenuOpen && (
|
||||
<div className="absolute right-0 z-50 mt-2 w-56 rounded-lg border border-border bg-card p-1 shadow-xl animate-scale-in">
|
||||
<div className="border-b border-border px-3 py-2.5 mb-1">
|
||||
<p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
|
||||
{effectiveRole && effectiveRole !== 'engineer' && (
|
||||
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Shield size={10} />
|
||||
{effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
to="/account"
|
||||
onClick={() => setUserMenuOpen(false)}
|
||||
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<User size={14} />
|
||||
Account
|
||||
</Link>
|
||||
<Link
|
||||
to="/account"
|
||||
onClick={() => setUserMenuOpen(false)}
|
||||
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Settings size={14} />
|
||||
Settings
|
||||
</Link>
|
||||
{isSuperAdmin && (
|
||||
<Link
|
||||
to="/admin"
|
||||
onClick={() => setUserMenuOpen(false)}
|
||||
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Shield size={14} />
|
||||
Admin Panel
|
||||
</Link>
|
||||
)}
|
||||
<div className="border-t border-border mt-1 pt-1">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm',
|
||||
'text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<LogOut size={14} />
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Command Palette */}
|
||||
<CommandPalette open={commandPaletteOpen} onClose={() => setCommandPaletteOpen(false)} />
|
||||
<QuickLaunch open={quickLaunchOpen} onClose={() => setQuickLaunchOpen(false)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user