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

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

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