chihlasm
8fd4207ee6
- Switch from true-dark to charcoal palette (sidebar darkest, content lighter) Page #1a1c23, Sidebar #10121a, Card #22252e, Border #2e3240 - Update all Tailwind semantic mappings to match new palette - Update landing page CSS hardcoded hex to new palette values - Fix remaining hardcoded hex in SurveyResponsesPage, SessionsPanel, FlowPilotMessageBar - Sidebar drawer starts below topbar (top: var(--topbar-h)) instead of viewport top - Drawer section title uses amber (#fbbf24) for visual pop - Unify all rail icons: white when inactive, cyan with bg-accent-dim when active Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
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="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
|
|
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
|
|
<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-[#848b9b]'
|
|
)}
|
|
/>
|
|
|
|
{/* 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-sans text-xs text-[0.6875rem] text-muted-foreground truncate">
|
|
{session.ticketNumber || '—'}
|
|
</span>
|
|
|
|
{/* Time */}
|
|
<span className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
|
|
{session.timeAgo}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|