chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate session pages to new design system

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 19:34:22 -05:00
parent 9a74ea3544
commit 1364f70ca7
2 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/SessionDetailPage.tsx
View File

@@ -289,7 +289,7 @@ export function SessionDetailPage() {
if (isLoading) {
return (
<div className="flex h-64 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-primary" />
</div>
)
}
@@ -302,7 +302,7 @@ export function SessionDetailPage() {
</div>
<button
onClick={() => navigate('/sessions')}
className="mt-4 text-white hover:underline"
className="mt-4 text-foreground hover:underline"
>
Back to sessions
</button>
@@ -318,14 +318,14 @@ export function SessionDetailPage() {
<div>
<button
onClick={() => navigate('/sessions')}
className="mb-2 text-sm text-white/40 hover:text-white"
className="mb-2 text-sm text-muted-foreground hover:text-foreground"
>
← Back to sessions
</button>
<h1 className="text-2xl font-bold text-white sm:text-3xl">
<h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">
{session.ticket_number || 'Session Details'}
</h1>
<div className="mt-2 flex items-center gap-4 text-sm text-white/40">
<div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
<span
className={cn(
'flex items-center gap-1',
@@ -342,23 +342,23 @@ export function SessionDetailPage() {
</span>
{session.client_name && <span>Client: {session.client_name}</span>}
{session.completed_at && (
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white">
<span className="rounded-full bg-accent px-2 py-0.5 text-xs text-foreground">
Duration: {getTotalDuration()}
</span>
)}
{outcomeLabel && (
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white">
<span className="rounded-full bg-accent px-2 py-0.5 text-xs text-foreground">
Outcome: {outcomeLabel}
</span>
)}
</div>
{session.outcome_notes && (
<p className="mt-2 text-sm text-white/60">Outcome Notes: {session.outcome_notes}</p>
<p className="mt-2 text-sm text-muted-foreground">Outcome Notes: {session.outcome_notes}</p>
)}
{session.next_steps && (
<div className="mt-2">
<span className="text-sm text-white/40">Next Steps:</span>
<p className="mt-0.5 text-sm text-white/60 whitespace-pre-wrap">{session.next_steps}</p>
<span className="text-sm text-muted-foreground">Next Steps:</span>
<p className="mt-0.5 text-sm text-muted-foreground whitespace-pre-wrap">{session.next_steps}</p>
</div>
)}
</div>
@@ -384,8 +384,8 @@ export function SessionDetailPage() {
<button
onClick={handleCopyForTicket}
className={cn(
'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
{copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
@@ -399,8 +399,8 @@ export function SessionDetailPage() {
onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
aria-label="Export format"
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white sm:w-auto',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground sm:w-auto',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
>
<option value="markdown">Markdown</option>
@@ -414,8 +414,8 @@ export function SessionDetailPage() {
onChange={(e) => setMaxStepIndex(e.target.value ? Number(e.target.value) : null)}
aria-label="Export through step"
className={cn(
'rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
>
<option value="">All steps</option>
@@ -431,8 +431,8 @@ export function SessionDetailPage() {
onChange={(e) => setDetailLevel(e.target.value as 'standard' | 'full')}
aria-label="Detail level"
className={cn(
'rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
>
<option value="standard">Standard</option>
@@ -443,8 +443,8 @@ export function SessionDetailPage() {
disabled={isExporting}
title="Copy to clipboard"
className={cn(
'rounded-md border border-white/10 bg-transparent p-2 text-white/60',
'hover:bg-white/10 hover:text-white disabled:opacity-50'
'rounded-md border border-border bg-card p-2 text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
{copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
@@ -453,8 +453,8 @@ export function SessionDetailPage() {
onClick={handlePreview}
disabled={isExporting}
className={cn(
'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50'
'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50'
)}
>
<Eye className="h-4 w-4" />

40
frontend/src/pages/SessionHistoryPage.tsx
View File

@@ -151,14 +151,14 @@ export function SessionHistoryPage() {
return (
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-8">
<h1 className="text-2xl font-bold text-white sm:text-3xl">Session History</h1>
<p className="mt-2 text-white/40">
<h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
<p className="mt-2 text-muted-foreground">
Search and filter your troubleshooting sessions
</p>
</div>
{/* Filter Tabs */}
<div className="mb-6 flex gap-2 border-b border-white/[0.06]">
<div className="mb-6 flex gap-2 border-b border-border">
{(['all', 'active', 'completed'] as const).map((tab) => (
<button
key={tab}
@@ -166,8 +166,8 @@ export function SessionHistoryPage() {
className={cn(
'px-4 py-2 text-sm font-medium transition-colors',
filter === tab
? 'border-b-2 border-white text-white'
: 'text-white/40 hover:text-white'
? 'border-b-2 border-primary text-foreground'
: 'text-muted-foreground hover:text-foreground'
)}
>
{tab.charAt(0).toUpperCase() + tab.slice(1)}
@@ -188,22 +188,22 @@ export function SessionHistoryPage() {
{/* Loading State */}
{isLoading ? (
<div className="flex justify-center py-12">
<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-primary" />
</div>
) : sessions.length === 0 ? (
<div className="py-12 text-center text-white/40">
<div className="py-12 text-center text-muted-foreground">
No sessions found.{' '}
{filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from ? (
<button
onClick={handleClearFilters}
className="text-white hover:underline"
className="text-foreground hover:underline"
>
Clear filters
</button>
) : (
<button
onClick={() => navigate('/trees')}
className="text-white hover:underline"
className="text-foreground hover:underline"
>
Start a new session
</button>
@@ -214,7 +214,7 @@ export function SessionHistoryPage() {
{sessions.map((session) => (
<div
key={session.id}
className="glass-card rounded-2xl p-4 transition-all hover:glass-card-hover"
className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
>
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="flex-1">
@@ -226,11 +226,11 @@ export function SessionHistoryPage() {
session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
)}
/>
<span className="font-medium text-white">
<span className="font-medium text-foreground">
{session.ticket_number || 'No ticket'}
</span>
{session.client_name && (
<span className="rounded-full bg-white/10 px-2.5 py-0.5 text-xs font-medium text-white">
<span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-foreground">
{session.client_name}
</span>
)}
@@ -242,7 +242,7 @@ export function SessionHistoryPage() {
session.outcome === 'workaround' && 'bg-amber-500/20 text-amber-300',
session.outcome === 'escalated' && 'bg-blue-500/20 text-blue-300',
session.outcome === 'unresolved' && 'bg-rose-500/20 text-rose-300',
!session.outcome && 'bg-white/10 text-white/70'
!session.outcome && 'bg-accent text-muted-foreground'
)}
>
{formatOutcomeLabel(session.outcome)}
@@ -251,12 +251,12 @@ export function SessionHistoryPage() {
</div>
{/* Tree Name */}
<p className="mt-1 text-sm text-white/40">
<p className="mt-1 text-sm text-muted-foreground">
<span className="font-medium">Tree:</span> {getTreeName(session)}
</p>
{/* Timestamps */}
<p className="mt-1 text-sm text-white/40">
<p className="mt-1 text-sm text-muted-foreground">
Started: {formatDate(session.started_at)}
{session.completed_at && (
<> · Completed: {formatDate(session.completed_at)}</>
@@ -264,7 +264,7 @@ export function SessionHistoryPage() {
</p>
{/* Stats */}
<p className="mt-1 text-sm text-white/40">
<p className="mt-1 text-sm text-muted-foreground">
{session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
{session.scratchpad && session.scratchpad.trim() && (
<span> · Has notes</span>
@@ -277,8 +277,8 @@ export function SessionHistoryPage() {
<button
onClick={() => navigate(`/sessions/${session.id}`)}
className={cn(
'rounded-md border border-white/10 px-3 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
View Details
@@ -287,8 +287,8 @@ export function SessionHistoryPage() {
<button
onClick={() => navigate(getTreeNavigatePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
className={cn(
'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
Resume