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

60
frontend/src/pages/MyTreesPage.tsx
View File

@@ -123,8 +123,8 @@ export function MyTreesPage() {
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-6 flex items-center justify-between sm:mb-8">
<div>
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">My Flows</h1>
<p className="mt-2 text-muted-foreground">
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">My Flows</h1>
<p className="mt-2 text-[#848b9b]">
Your forked and custom flows
</p>
</div>
@@ -140,38 +140,38 @@ export function MyTreesPage() {
{showCreateMenu && (
<>
<div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
<div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
<div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-[#1e2130] bg-[#14161d] p-1 shadow-xl">
<Link
to="/trees/new"
onClick={() => setShowCreateMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
>
<FolderTree className="h-4 w-4 text-muted-foreground" />
<FolderTree className="h-4 w-4 text-[#848b9b]" />
<div>
<div className="font-medium">Troubleshooting Tree</div>
<div className="text-xs text-muted-foreground">Branching decision flow</div>
<div className="text-xs text-[#848b9b]">Branching decision flow</div>
</div>
</Link>
<Link
to="/flows/new"
onClick={() => setShowCreateMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
>
<ListOrdered className="h-4 w-4 text-muted-foreground" />
<ListOrdered className="h-4 w-4 text-[#848b9b]" />
<div>
<div className="font-medium">Procedural Flow</div>
<div className="text-xs text-muted-foreground">Step-by-step procedure</div>
<div className="text-xs text-[#848b9b]">Step-by-step procedure</div>
</div>
</Link>
<Link
to="/flows/new?type=maintenance"
onClick={() => setShowCreateMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
>
<Wrench className="h-4 w-4 text-amber-400" />
<div>
<div className="font-medium">Maintenance Flow</div>
<div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
<div className="text-xs text-[#848b9b]">Scheduled multi-target tasks</div>
</div>
</Link>
</div>
@@ -187,18 +187,18 @@ export function MyTreesPage() {
<Spinner />
</div>
) : trees.length === 0 ? (
<div className="rounded-lg border border-dashed border-border bg-accent px-4 py-12 text-center">
<FolderTree className="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
<h2 className="mb-2 text-lg font-semibold text-foreground">No personal flows yet</h2>
<p className="mb-4 text-sm text-muted-foreground">
<div className="rounded-lg border border-dashed border-[#1e2130] bg-accent px-4 py-12 text-center">
<FolderTree className="mx-auto mb-4 h-12 w-12 text-[#848b9b]" />
<h2 className="mb-2 text-lg font-semibold text-[#e2e5eb]">No personal flows yet</h2>
<p className="mb-4 text-sm text-[#848b9b]">
Fork a flow from the library to customize it for your workflow
</p>
<div className="flex items-center justify-center gap-3">
<Link
to="/trees"
className={cn(
'inline-flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90'
'inline-flex items-center gap-2 rounded-md bg-[#22d3ee] text-white px-4 py-2 text-sm font-medium',
'hover:brightness-110'
)}
>
Browse Library
@@ -207,8 +207,8 @@ export function MyTreesPage() {
<Link
to="/trees/new"
className={cn(
'inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
'inline-flex items-center gap-2 rounded-md border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#848b9b]',
'hover:bg-accent hover:text-[#e2e5eb]'
)}
>
<Plus className="h-4 w-4" />
@@ -222,18 +222,18 @@ export function MyTreesPage() {
{trees.map((tree) => (
<div
key={tree.id}
className="bg-card border border-border rounded-xl p-4 transition-all hover:border-border/80 sm:p-6"
className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 transition-all hover:border-[#1e2130]/80 sm:p-6"
>
{/* Header */}
<div className="mb-3 flex items-start justify-between gap-2">
<div className="flex items-center gap-2">
{tree.tree_type === 'procedural' && (
<ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />
<ListOrdered className="h-4 w-4 shrink-0 text-[#848b9b]" />
)}
{tree.tree_type === 'maintenance' && (
<Wrench className="h-4 w-4 shrink-0 text-amber-400" />
)}
<h3 className="font-semibold text-foreground">{tree.name}</h3>
<h3 className="font-semibold text-[#e2e5eb]">{tree.name}</h3>
{tree.parent_tree_id && (
<span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
Fork
@@ -252,7 +252,7 @@ export function MyTreesPage() {
</span>
)}
{tree.category_info && (
<span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
<span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
{tree.category_info.name}
</span>
)}
@@ -260,19 +260,19 @@ export function MyTreesPage() {
</div>
{/* Description */}
<p className="mb-3 text-sm text-muted-foreground line-clamp-2">
<p className="mb-3 text-sm text-[#848b9b] line-clamp-2">
{tree.description || 'No description available'}
</p>
{/* Fork Badge */}
{tree.parent_tree_id && (
<div className="mb-3 flex items-center gap-2 rounded-md bg-accent px-2 py-1.5 text-sm">
<GitBranch className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">
<GitBranch className="h-4 w-4 text-[#848b9b]" />
<span className="text-[#848b9b]">
Forked from{' '}
<Link
to={`/trees/${tree.parent_tree_id}/navigate`}
className="font-medium text-foreground hover:underline"
className="font-medium text-[#e2e5eb] hover:underline"
>
original
</Link>
@@ -288,7 +288,7 @@ export function MyTreesPage() {
)}
{/* Stats */}
<div className="mb-4 flex items-center gap-4 text-xs text-muted-foreground">
<div className="mb-4 flex items-center gap-4 text-xs text-[#848b9b]">
<div className="flex items-center gap-1">
<Clock className="h-3.5 w-3.5" />
<span>{formatDate(tree.lastUsed)}</span>
@@ -312,8 +312,8 @@ export function MyTreesPage() {
<Link
to={getEditPath(tree)}
className={cn(
'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-accent hover:text-foreground'
'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
'hover:bg-accent hover:text-[#e2e5eb]'
)}
title="Edit tree"
>