refactor: migrate page components to Design System v4
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -89,20 +89,20 @@ export default function ReviewQueuePage() {
|
||||
{/* Left panel — Proposal list */}
|
||||
<div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(12px)' }}>
|
||||
<div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', }}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Lightbulb size={16} className="text-amber-400" />
|
||||
<h1 className="font-heading text-base font-semibold text-foreground">Review Queue</h1>
|
||||
<h1 className="font-heading text-base font-semibold text-[#e2e5eb]">Review Queue</h1>
|
||||
</div>
|
||||
<button onClick={loadProposals} className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<button onClick={loadProposals} className="text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
|
||||
<RefreshCw size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats bar */}
|
||||
{stats && (
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-3 text-xs text-[#848b9b]">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={10} className="text-amber-400" />
|
||||
{stats.pending_count} pending
|
||||
@@ -112,7 +112,7 @@ export default function ReviewQueuePage() {
|
||||
{stats.approved_this_week} approved
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Sparkles size={10} className="text-primary" />
|
||||
<Sparkles size={10} className="text-[#22d3ee]" />
|
||||
{stats.auto_reinforced_this_week} reinforced
|
||||
</span>
|
||||
</div>
|
||||
@@ -126,8 +126,8 @@ export default function ReviewQueuePage() {
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`shrink-0 rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${
|
||||
activeTab === tab.key
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
|
||||
: 'text-[#848b9b] hover:text-[#e2e5eb]'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
@@ -144,7 +144,7 @@ export default function ReviewQueuePage() {
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-xs text-foreground"
|
||||
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-xs text-[#e2e5eb]"
|
||||
>
|
||||
<option value="newest">Newest first</option>
|
||||
<option value="confidence">Highest confidence</option>
|
||||
@@ -156,12 +156,12 @@ export default function ReviewQueuePage() {
|
||||
<div className="p-3 space-y-2">
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
<Loader2 size={20} className="animate-spin text-[#848b9b]" />
|
||||
</div>
|
||||
) : proposals.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<Lightbulb size={24} className="mx-auto mb-2 text-muted-foreground/40" />
|
||||
<p className="text-sm text-muted-foreground">No proposals found</p>
|
||||
<Lightbulb size={24} className="mx-auto mb-2 text-[#848b9b]/40" />
|
||||
<p className="text-sm text-[#848b9b]">No proposals found</p>
|
||||
</div>
|
||||
) : (
|
||||
proposals.map((proposal) => (
|
||||
@@ -180,7 +180,7 @@ export default function ReviewQueuePage() {
|
||||
<div className={`flex-1 overflow-y-auto ${!detail && !isLoadingDetail ? 'hidden lg:flex' : ''}`}>
|
||||
{isLoadingDetail ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
<Loader2 size={20} className="animate-spin text-[#848b9b]" />
|
||||
</div>
|
||||
) : detail ? (
|
||||
<ProposalDetail
|
||||
@@ -190,8 +190,8 @@ export default function ReviewQueuePage() {
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<Lightbulb size={32} className="mx-auto mb-3 text-muted-foreground/30" />
|
||||
<p className="text-sm text-muted-foreground">Select a proposal to review</p>
|
||||
<Lightbulb size={32} className="mx-auto mb-3 text-[#848b9b]/30" />
|
||||
<p className="text-sm text-[#848b9b]">Select a proposal to review</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user