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

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -291,10 +291,10 @@ export function TreeLibraryPage() {
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">
{typeFilter === 'procedural' ? 'Projects' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : typeFilter === 'maintenance' ? 'Maintenance Flows' : 'Flow Library'}
</h1>
<p className="mt-2 text-muted-foreground">
<p className="mt-2 text-[#848b9b]">
{typeFilter === 'procedural'
? 'Step-by-step projects and runbooks'
: typeFilter === 'troubleshooting'
@@ -333,8 +333,8 @@ export function TreeLibraryPage() {
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
className={cn(
'flex-1 rounded-md border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
@@ -348,8 +348,8 @@ export function TreeLibraryPage() {
onChange={(e) => setSelectedCategoryId(e.target.value)}
aria-label="Filter by category"
className={cn(
'rounded-md border border-border bg-card px-3 py-2',
'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
>
<option value="">All Categories</option>
@@ -364,7 +364,7 @@ export function TreeLibraryPage() {
{/* View Controls */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
{/* Type filter tabs */}
<div className="flex rounded-lg border border-border p-0.5">
<div className="flex rounded-lg border border-[#1e2130] p-0.5">
{(['all', 'troubleshooting', 'procedural', 'maintenance'] as const).map((t) => (
<button
key={t}
@@ -372,8 +372,8 @@ export function TreeLibraryPage() {
className={cn(
'rounded-md px-3 py-1 text-xs font-medium transition-colors',
typeFilter === t
? 'bg-accent text-foreground'
: 'text-muted-foreground hover:text-foreground'
? 'bg-accent text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
{t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : t === 'procedural' ? 'Projects' : 'Maintenance'}
@@ -392,9 +392,9 @@ export function TreeLibraryPage() {
{/* Active Filters */}
{hasActiveFilters && (
<div className="mb-6 flex flex-wrap items-center gap-2">
<span className="text-sm text-muted-foreground">Filters:</span>
<span className="text-sm text-[#848b9b]">Filters:</span>
{selectedFolderId && (
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#e2e5eb]">
Folder
<button
onClick={() => setSelectedFolderId(null)}
@@ -405,7 +405,7 @@ export function TreeLibraryPage() {
</span>
)}
{selectedCategoryId && (
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#e2e5eb]">
{categories.find((c) => c.id === selectedCategoryId)?.name}
<button
onClick={() => setSelectedCategoryId('')}
@@ -418,7 +418,7 @@ export function TreeLibraryPage() {
{selectedTags.map((tag) => (
<span
key={tag}
className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground"
className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#e2e5eb]"
>
{tag}
<button
@@ -431,7 +431,7 @@ export function TreeLibraryPage() {
))}
<button
onClick={clearAllFilters}
className="text-sm text-muted-foreground hover:text-foreground"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb]"
>
Clear all
</button>
@@ -442,12 +442,12 @@ export function TreeLibraryPage() {
{visibleIncompleteSessions.length > 0 && (
<div className="mb-6 space-y-2">
{visibleIncompleteSessions.map(s => (
<div key={s.id} className="bg-card border border-border flex items-center justify-between rounded-xl p-4">
<div key={s.id} className="bg-[#14161d] border border-[#1e2130] flex items-center justify-between rounded-xl p-4">
<div className="min-w-0 flex-1">
<p className="truncate font-medium text-foreground">
<p className="truncate font-medium text-[#e2e5eb]">
{s.tree_snapshot?.name || 'Unknown tree'}
</p>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-[#848b9b]">
{s.client_name && `${s.client_name} · `}
{s.started_at ? `Started ${formatTimeAgo(s.started_at)}` : 'Not started'}
</p>
@@ -462,7 +462,7 @@ export function TreeLibraryPage() {
</Button>
<button
onClick={() => dismissSession(s.id)}
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<X className="h-4 w-4" />
</button>
@@ -480,8 +480,8 @@ export function TreeLibraryPage() {
state: { prefillClientName: lastSessionData.client_name, prefillTicketNumber: lastSessionData.ticket_number },
})}
className={cn(
'flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground',
'hover:border-border hover:bg-accent hover:text-foreground'
'flex items-center gap-2 rounded-lg border border-[#1e2130] px-4 py-2.5 text-sm text-[#848b9b]',
'hover:border-[#1e2130] hover:bg-accent hover:text-[#e2e5eb]'
)}
>
<RotateCcw className="h-4 w-4" />