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
39
frontend/src/components/dashboard/FiltersBar.tsx
Normal file
39
frontend/src/components/dashboard/FiltersBar.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Filter } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface FilterChip {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface FiltersBarProps {
|
||||
filters: FilterChip[]
|
||||
activeFilter: string
|
||||
onFilterChange: (id: string) => void
|
||||
}
|
||||
|
||||
export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBarProps) {
|
||||
return (
|
||||
<div className="fade-in flex items-center gap-1.5 overflow-x-auto py-1" style={{ animationDelay: '100ms' }}>
|
||||
{filters.map(f => (
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => onFilterChange(f.id)}
|
||||
className={cn(
|
||||
'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
|
||||
activeFilter === f.id
|
||||
? 'border-primary/30 bg-primary/10 text-primary'
|
||||
: 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="mx-1.5 h-5 w-px shrink-0 bg-border" />
|
||||
<button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Filter size={14} />
|
||||
More Filters
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
44
frontend/src/components/dashboard/QuickStats.tsx
Normal file
44
frontend/src/components/dashboard/QuickStats.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface StatCard {
|
||||
label: string
|
||||
value: string | number
|
||||
meta?: string
|
||||
gradient?: boolean
|
||||
color?: string
|
||||
}
|
||||
|
||||
interface QuickStatsProps {
|
||||
stats: StatCard[]
|
||||
}
|
||||
|
||||
export function QuickStats({ stats }: QuickStatsProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{stats.map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className="fade-in rounded-xl border border-border bg-card p-4 transition-colors hover:border-border/80"
|
||||
style={{ animationDelay: `${50 + i * 30}ms` }}
|
||||
>
|
||||
<p className="font-label text-[0.6875rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground">
|
||||
{stat.label}
|
||||
</p>
|
||||
<p
|
||||
className={cn(
|
||||
'mt-1 font-heading text-2xl font-bold tracking-tight',
|
||||
stat.gradient && 'text-gradient-brand',
|
||||
stat.color
|
||||
)}
|
||||
style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}
|
||||
>
|
||||
{stat.value}
|
||||
</p>
|
||||
{stat.meta && (
|
||||
<p className="mt-0.5 text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{stat.meta}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
frontend/src/components/dashboard/SectionGroup.tsx
Normal file
40
frontend/src/components/dashboard/SectionGroup.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { useState } from 'react'
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SectionGroupProps {
|
||||
title: string
|
||||
count?: number
|
||||
defaultOpen?: boolean
|
||||
delay?: number
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function SectionGroup({ title, count, defaultOpen = true, delay = 150, children }: SectionGroupProps) {
|
||||
const [open, setOpen] = useState(defaultOpen)
|
||||
|
||||
return (
|
||||
<div className="fade-in" style={{ animationDelay: `${delay}ms` }}>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex w-full items-center gap-2 py-2"
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-gradient-brand" />
|
||||
<span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground">
|
||||
{title}
|
||||
</span>
|
||||
{count !== undefined && (
|
||||
<span className="rounded-full bg-secondary px-2 py-0.5 font-label text-[0.6875rem] text-muted-foreground">
|
||||
{count}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1" />
|
||||
<ChevronDown
|
||||
size={14}
|
||||
className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')}
|
||||
/>
|
||||
</button>
|
||||
{open && <div className="mt-1 space-y-1">{children}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
75
frontend/src/components/dashboard/SessionsPanel.tsx
Normal file
75
frontend/src/components/dashboard/SessionsPanel.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SessionItem {
|
||||
id: string
|
||||
treeName: string
|
||||
status: 'in_progress' | 'completed' | 'abandoned'
|
||||
currentStep?: string
|
||||
totalSteps?: number
|
||||
stepNumber?: number
|
||||
ticketNumber?: string
|
||||
timeAgo: string
|
||||
}
|
||||
|
||||
interface SessionsPanelProps {
|
||||
sessions: SessionItem[]
|
||||
delay?: number
|
||||
}
|
||||
|
||||
export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
|
||||
if (sessions.length === 0) return null
|
||||
|
||||
return (
|
||||
<div className="fade-in rounded-xl border border-border bg-card" style={{ animationDelay: `${delay}ms` }}>
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-3">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
|
||||
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
|
||||
View All
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-border">
|
||||
{sessions.map(session => (
|
||||
<Link
|
||||
key={session.id}
|
||||
to={`/sessions/${session.id}`}
|
||||
className="grid items-center gap-3 px-4 py-2.5 transition-colors hover:bg-accent/50"
|
||||
style={{ gridTemplateColumns: '8px 1fr 140px 80px 100px' }}
|
||||
>
|
||||
{/* Status dot */}
|
||||
<span
|
||||
className={cn(
|
||||
'h-2 w-2 rounded-full',
|
||||
session.status === 'completed' ? 'bg-green-500' :
|
||||
session.status === 'in_progress' ? 'bg-amber-500' :
|
||||
'bg-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Name */}
|
||||
<span className="text-sm text-foreground truncate">{session.treeName}</span>
|
||||
|
||||
{/* Progress */}
|
||||
<span className="text-[0.6875rem] text-muted-foreground truncate">
|
||||
{session.status === 'completed'
|
||||
? '✓ Resolved'
|
||||
: session.stepNumber && session.totalSteps
|
||||
? `→ step ${session.stepNumber}/${session.totalSteps}`
|
||||
: '→ In progress'}
|
||||
</span>
|
||||
|
||||
{/* Ticket */}
|
||||
<span className="font-label text-[0.6875rem] text-muted-foreground truncate">
|
||||
{session.ticketNumber || '—'}
|
||||
</span>
|
||||
|
||||
{/* Time */}
|
||||
<span className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
|
||||
{session.timeAgo}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
109
frontend/src/components/dashboard/TreeListItem.tsx
Normal file
109
frontend/src/components/dashboard/TreeListItem.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { MoreHorizontal } from 'lucide-react'
|
||||
import { getTreeNavigatePath, getTreeEditorPath } from '@/lib/routing'
|
||||
|
||||
interface TreeListItemProps {
|
||||
id: string
|
||||
name: string
|
||||
description?: string | null
|
||||
treeType: string
|
||||
category?: { name: string; color?: string } | null
|
||||
tags?: string[]
|
||||
usageCount?: number
|
||||
updatedAt: string
|
||||
icon?: string
|
||||
}
|
||||
|
||||
export function TreeListItem({
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
treeType,
|
||||
category,
|
||||
tags = [],
|
||||
usageCount = 0,
|
||||
updatedAt,
|
||||
icon,
|
||||
}: TreeListItemProps) {
|
||||
const navigate = useNavigate()
|
||||
const categoryColor = category?.color || '#3b82f6'
|
||||
|
||||
const timeAgo = getTimeAgo(updatedAt)
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => navigate(getTreeNavigatePath(id, treeType))}
|
||||
className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[hsl(var(--sidebar-hover))]"
|
||||
style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
|
||||
>
|
||||
{/* Icon box */}
|
||||
<div
|
||||
className="flex h-9 w-9 items-center justify-center rounded-lg text-base"
|
||||
style={{ backgroundColor: `${categoryColor}15` }}
|
||||
>
|
||||
{icon || (treeType === 'procedural' ? '📋' : '🔧')}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="min-w-0">
|
||||
<p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p>
|
||||
<div className="mt-0.5 flex items-center gap-2">
|
||||
{tags.slice(0, 3).map(tag => (
|
||||
<span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-label text-[0.625rem] text-muted-foreground">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{description && tags.length === 0 && (
|
||||
<span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{category && (
|
||||
<>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
|
||||
<span className="font-label text-xs text-muted-foreground truncate">{category.name}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Usage count */}
|
||||
<div className="text-right font-label text-xs text-muted-foreground">
|
||||
{usageCount} uses
|
||||
</div>
|
||||
|
||||
{/* Updated */}
|
||||
<div className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
|
||||
{timeAgo}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
navigate(getTreeEditorPath(id, treeType))
|
||||
}}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
|
||||
>
|
||||
<MoreHorizontal size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getTimeAgo(dateStr: string): string {
|
||||
const now = Date.now()
|
||||
const date = new Date(dateStr).getTime()
|
||||
const diff = now - date
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
if (minutes < 1) return 'Just now'
|
||||
if (minutes < 60) return `${minutes} min ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days === 1) return 'Yesterday'
|
||||
if (days < 7) return `${days}d ago`
|
||||
return new Date(dateStr).toLocaleDateString()
|
||||
}
|
||||
Reference in New Issue
Block a user