refactor: migrate FlowPilot components to Design System v4
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
@@ -61,13 +61,13 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<div className="border-b px-6 py-4" style={{ borderColor: 'var(--glass-border)' }}>
|
||||
<h2 className="font-heading text-lg font-semibold text-foreground">{proposal.title}</h2>
|
||||
<h2 className="font-heading text-lg font-semibold text-[#e2e5eb]">{proposal.title}</h2>
|
||||
{proposal.description && (
|
||||
<p className="mt-1 text-sm text-muted-foreground">{proposal.description}</p>
|
||||
<p className="mt-1 text-sm text-[#848b9b]">{proposal.description}</p>
|
||||
)}
|
||||
<div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
|
||||
<div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-[#848b9b]">
|
||||
{proposal.problem_domain && (
|
||||
<span className="font-label rounded-md bg-primary/10 px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
|
||||
<span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
|
||||
{proposal.problem_domain}
|
||||
</span>
|
||||
)}
|
||||
@@ -89,12 +89,12 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-5">
|
||||
{/* Source session link */}
|
||||
<div className="glass-card-static p-4">
|
||||
<h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Source Session</h4>
|
||||
<div className="card-flat p-4">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Source Session</h4>
|
||||
<Link
|
||||
to={`/pilot/${proposal.source_session_id}`}
|
||||
target="_blank"
|
||||
className="flex items-center gap-2 text-sm text-primary hover:underline"
|
||||
className="flex items-center gap-2 text-sm text-[#22d3ee] hover:underline"
|
||||
>
|
||||
<ExternalLink size={12} />
|
||||
View session that generated this proposal
|
||||
@@ -105,16 +105,16 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
{proposal.proposed_diff && (() => {
|
||||
const diff = proposal.proposed_diff as { diff_description?: string; new_nodes?: Array<{ title?: string; question?: string; description?: string }> }
|
||||
return (
|
||||
<div className="glass-card-static border-l-2 border-l-amber-500 p-4">
|
||||
<h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Proposed Changes</h4>
|
||||
<div className="card-flat border-l-2 border-l-amber-500 p-4">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Proposed Changes</h4>
|
||||
{diff.diff_description && (
|
||||
<p className="text-sm text-foreground">{diff.diff_description}</p>
|
||||
<p className="text-sm text-[#e2e5eb]">{diff.diff_description}</p>
|
||||
)}
|
||||
{diff.new_nodes && diff.new_nodes.length > 0 && (
|
||||
<div className="mt-3 space-y-1.5">
|
||||
<p className="text-xs font-medium text-muted-foreground">New nodes:</p>
|
||||
<p className="text-xs font-medium text-[#848b9b]">New nodes:</p>
|
||||
{diff.new_nodes.map((node, i) => (
|
||||
<div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-foreground">
|
||||
<div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-[#e2e5eb]">
|
||||
<span className="text-emerald-400">+ </span>
|
||||
{node.title || node.question || node.description || 'New node'}
|
||||
</div>
|
||||
@@ -126,16 +126,16 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
})()}
|
||||
|
||||
{/* Flow data preview */}
|
||||
<div className="glass-card-static p-4">
|
||||
<div className="card-flat p-4">
|
||||
<button
|
||||
onClick={() => setShowFlowData(!showFlowData)}
|
||||
className="flex items-center gap-1.5 font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] hover:text-foreground transition-colors"
|
||||
className="flex items-center gap-1.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] hover:text-[#e2e5eb] transition-colors"
|
||||
>
|
||||
{showFlowData ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
Flow Data (JSON)
|
||||
</button>
|
||||
{showFlowData && (
|
||||
<pre className="mt-3 max-h-[400px] overflow-auto rounded-lg bg-card/80 p-3 text-xs text-muted-foreground font-mono">
|
||||
<pre className="mt-3 max-h-[400px] overflow-auto rounded-lg bg-[#14161d]/80 p-3 text-xs text-[#848b9b] font-mono">
|
||||
{JSON.stringify(proposal.proposed_flow_data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
@@ -143,8 +143,8 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
|
||||
{/* Supporting sessions */}
|
||||
{proposal.supporting_session_ids.length > 1 && (
|
||||
<div className="glass-card-static p-4">
|
||||
<h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">
|
||||
<div className="card-flat p-4">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">
|
||||
Supporting Sessions ({proposal.supporting_session_ids.length})
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
@@ -153,7 +153,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
key={sid}
|
||||
to={`/pilot/${sid}`}
|
||||
target="_blank"
|
||||
className="block text-xs text-primary hover:underline truncate"
|
||||
className="block text-xs text-[#22d3ee] hover:underline truncate"
|
||||
>
|
||||
{sid}
|
||||
</Link>
|
||||
@@ -164,14 +164,14 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
|
||||
{/* Review info (for already-reviewed proposals) */}
|
||||
{proposal.reviewed_at && (
|
||||
<div className="glass-card-static p-4">
|
||||
<h4 className="font-label text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Review</h4>
|
||||
<p className="text-sm text-foreground">
|
||||
<div className="card-flat p-4">
|
||||
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Review</h4>
|
||||
<p className="text-sm text-[#e2e5eb]">
|
||||
<span className="capitalize">{proposal.status}</span> on{' '}
|
||||
{new Date(proposal.reviewed_at).toLocaleString()}
|
||||
</p>
|
||||
{proposal.reviewer_notes && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">{proposal.reviewer_notes}</p>
|
||||
<p className="mt-1 text-xs text-[#848b9b]">{proposal.reviewer_notes}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -180,15 +180,14 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
{/* Review actions bar */}
|
||||
{canReview && (
|
||||
<div
|
||||
className="border-t px-5 py-3 space-y-3"
|
||||
style={{ borderColor: 'var(--glass-border)', background: 'rgba(16, 17, 20, 0.8)', backdropFilter: 'blur(12px)' }}
|
||||
className="border-t border-[#1e2130] bg-[#14161d] px-5 py-3 space-y-3"
|
||||
>
|
||||
{/* Notes input */}
|
||||
<input
|
||||
value={reviewNotes}
|
||||
onChange={(e) => setReviewNotes(e.target.value)}
|
||||
placeholder="Reviewer notes (optional)"
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
|
||||
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
|
||||
/>
|
||||
|
||||
{/* Action buttons */}
|
||||
@@ -203,14 +202,14 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
Approve & Publish
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic px-2">
|
||||
<span className="text-xs text-[#848b9b] italic px-2">
|
||||
Enhancement proposals require Edit & Publish
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={handleEditAndPublish}
|
||||
disabled={isSubmitting}
|
||||
className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
|
||||
className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
|
||||
>
|
||||
<Pencil size={14} />
|
||||
Edit & Publish
|
||||
@@ -218,7 +217,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
|
||||
<button
|
||||
onClick={() => handleAction('dismiss')}
|
||||
disabled={isSubmitting}
|
||||
className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors ml-auto"
|
||||
className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors ml-auto"
|
||||
>
|
||||
<EyeOff size={14} />
|
||||
Dismiss
|
||||
|
||||
Reference in New Issue
Block a user