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

72
frontend/src/pages/admin/GalleryManagementPage.tsx
View File

@@ -89,7 +89,7 @@ function SortOrderInput({
}
}}
className={cn(
'w-20 rounded-[8px] border border-border bg-card px-2 py-1 text-sm text-foreground',
'w-20 rounded-[8px] border border-[#1e2130] bg-[#14161d] px-2 py-1 text-sm text-[#e2e5eb]',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
disabled && 'cursor-not-allowed opacity-50',
)}
@@ -117,19 +117,19 @@ function FilterBar({
return (
<div className="flex flex-wrap items-center gap-3">
<div className="relative flex-1 min-w-[180px] max-w-xs">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#848b9b] pointer-events-none" />
<input
type="text"
placeholder="Search by name…"
value={search}
onChange={e => onSearchChange(e.target.value)}
className={cn(
'w-full rounded-[10px] border border-border bg-card pl-9 pr-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
'w-full rounded-lg border border-[#1e2130] bg-[#14161d] pl-9 pr-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
)}
/>
</div>
<div className="flex rounded-[10px] border border-border overflow-hidden text-sm">
<div className="flex rounded-lg border border-[#1e2130] overflow-hidden text-sm">
{(['all', 'featured', 'unfeatured'] as FilterMode[]).map(mode => (
<button
key={mode}
@@ -137,8 +137,8 @@ function FilterBar({
className={cn(
'px-3 py-1.5 capitalize transition-colors',
filter === mode
? 'bg-primary text-[#101114] font-semibold'
: 'text-muted-foreground hover:text-foreground bg-card',
? 'bg-primary text-white font-semibold'
: 'text-[#848b9b] hover:text-[#e2e5eb] bg-[#14161d]',
)}
>
{mode}
@@ -166,7 +166,7 @@ function FlowsTable({
}) {
if (flows.length === 0) {
return (
<p className="py-8 text-center text-sm text-muted-foreground">No flows match the current filter.</p>
<p className="py-8 text-center text-sm text-[#848b9b]">No flows match the current filter.</p>
)
}
@@ -174,19 +174,19 @@ function FlowsTable({
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border text-left">
<th className="pb-3 pr-4 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Name</th>
<th className="pb-3 pr-4 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Type</th>
<th className="pb-3 pr-4 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Featured</th>
<th className="pb-3 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Sort Order</th>
<tr className="border-b border-[#1e2130] text-left">
<th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Name</th>
<th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Type</th>
<th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Featured</th>
<th className="pb-3 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Sort Order</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{flows.map(flow => (
<tr key={flow.id} className="group hover:bg-[rgba(255,255,255,0.02)] transition-colors">
<td className="py-3 pr-4 text-foreground font-medium">{flow.name}</td>
<td className="py-3 pr-4 text-[#e2e5eb] font-medium">{flow.name}</td>
<td className="py-3 pr-4">
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border border-border text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border border-[#1e2130] text-[#848b9b]">
{flow.tree_type}
</span>
</td>
@@ -234,7 +234,7 @@ function ScriptsTable({
}) {
if (scripts.length === 0) {
return (
<p className="py-8 text-center text-sm text-muted-foreground">No scripts match the current filter.</p>
<p className="py-8 text-center text-sm text-[#848b9b]">No scripts match the current filter.</p>
)
}
@@ -242,24 +242,24 @@ function ScriptsTable({
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border text-left">
<th className="pb-3 pr-4 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Name</th>
<th className="pb-3 pr-4 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Status</th>
<th className="pb-3 pr-4 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Featured</th>
<th className="pb-3 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Sort Order</th>
<tr className="border-b border-[#1e2130] text-left">
<th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Name</th>
<th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Status</th>
<th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Featured</th>
<th className="pb-3 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Sort Order</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{scripts.map(script => (
<tr key={script.id} className="group hover:bg-[rgba(255,255,255,0.02)] transition-colors">
<td className="py-3 pr-4 text-foreground font-medium">{script.name}</td>
<td className="py-3 pr-4 text-[#e2e5eb] font-medium">{script.name}</td>
<td className="py-3 pr-4">
<span
className={cn(
'font-label text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border',
'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border',
script.is_active
? 'border-emerald-400/30 text-emerald-400 bg-emerald-400/10'
: 'border-border text-muted-foreground',
: 'border-[#1e2130] text-[#848b9b]',
)}
>
{script.is_active ? 'Active' : 'Inactive'}
@@ -417,23 +417,23 @@ export default function GalleryManagementPage() {
/>
{loading ? (
<div className="flex items-center justify-center py-16 text-muted-foreground text-sm">
<div className="flex items-center justify-center py-16 text-[#848b9b] text-sm">
Loading gallery items…
</div>
) : (
<div className="space-y-8">
{/* Summary stats */}
<div className="flex gap-4 flex-wrap">
<div className="glass-card-static rounded-[12px] px-4 py-3 flex items-center gap-3">
<div className="card-flat rounded-[12px] px-4 py-3 flex items-center gap-3">
<Star className="h-4 w-4 text-amber-400 fill-amber-400" />
<span className="text-sm text-muted-foreground">
<span className="text-foreground font-semibold">{featuredFlowCount}</span> featured flow{featuredFlowCount !== 1 ? 's' : ''}
<span className="text-sm text-[#848b9b]">
<span className="text-[#e2e5eb] font-semibold">{featuredFlowCount}</span> featured flow{featuredFlowCount !== 1 ? 's' : ''}
</span>
</div>
<div className="glass-card-static rounded-[12px] px-4 py-3 flex items-center gap-3">
<div className="card-flat rounded-[12px] px-4 py-3 flex items-center gap-3">
<Star className="h-4 w-4 text-amber-400 fill-amber-400" />
<span className="text-sm text-muted-foreground">
<span className="text-foreground font-semibold">{featuredScriptCount}</span> featured script{featuredScriptCount !== 1 ? 's' : ''}
<span className="text-sm text-[#848b9b]">
<span className="text-[#e2e5eb] font-semibold">{featuredScriptCount}</span> featured script{featuredScriptCount !== 1 ? 's' : ''}
</span>
</div>
</div>
@@ -442,14 +442,14 @@ export default function GalleryManagementPage() {
<section>
<div className="mb-4 flex items-center justify-between gap-4 flex-wrap">
<div>
<h2 className="text-base font-semibold text-foreground">Featured Flows</h2>
<p className="text-xs text-muted-foreground mt-0.5">
<h2 className="text-base font-semibold text-[#e2e5eb]">Featured Flows</h2>
<p className="text-xs text-[#848b9b] mt-0.5">
Toggle flows to show in the gallery. Lower sort order = shown first.
</p>
</div>
</div>
<div className="glass-card-static rounded-[16px] p-5 space-y-4">
<div className="card-flat rounded-lg p-5 space-y-4">
<FilterBar
search={flowSearch}
onSearchChange={setFlowSearch}
@@ -469,14 +469,14 @@ export default function GalleryManagementPage() {
<section>
<div className="mb-4 flex items-center justify-between gap-4 flex-wrap">
<div>
<h2 className="text-base font-semibold text-foreground">Featured Scripts</h2>
<p className="text-xs text-muted-foreground mt-0.5">
<h2 className="text-base font-semibold text-[#e2e5eb]">Featured Scripts</h2>
<p className="text-xs text-[#848b9b] mt-0.5">
Toggle scripts to show in the gallery. Lower sort order = shown first.
</p>
</div>
</div>
<div className="glass-card-static rounded-[16px] p-5 space-y-4">
<div className="card-flat rounded-lg p-5 space-y-4">
<FilterBar
search={scriptSearch}
onSearchChange={setScriptSearch}