feat(tracker-web): re-skin public roadmap to the token system (UX-3.1)
Replace the hardcoded slate-*/blue-*/white utility classes on /roadmap with tokenized equivalents (bg-background/bg-card/text-foreground/ text-muted-foreground/border-border). Swap the type/priority pills to the shared Badge, the status column/list markers to StatusDot tones, the stat tiles to MetricCard, search/type filter to Input/Select, the Submit Idea button to Button, and load/vote errors to AlertBanner. Behaviour, the board/list SegmentedControl toggle, and the vote-button a11y attrs (aria-pressed/aria-label) are preserved. The submit + email-prompt modals are migrated to the shared Modal in UX-3.2. Generated with [Devin](https://cli.devin.ai/docs) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
saravanakumardb1
parent
8354595d0f
commit
f612d2ecd1
@ -1,7 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { SegmentedControl } from '@/components/ui/Primitives';
|
||||
import {
|
||||
SegmentedControl,
|
||||
Button,
|
||||
Input,
|
||||
Select,
|
||||
Badge,
|
||||
StatusDot,
|
||||
MetricCard,
|
||||
AlertBanner,
|
||||
type BadgeProps,
|
||||
type StatusTone,
|
||||
} from '@/components/ui/Primitives';
|
||||
import {
|
||||
getRoadmapItems,
|
||||
getRoadmapStats,
|
||||
@ -11,57 +22,26 @@ import {
|
||||
type PublicRoadmapStats,
|
||||
} from '@/lib/tracker-client';
|
||||
|
||||
type BadgeVariant = NonNullable<BadgeProps['variant']>;
|
||||
|
||||
// ── Status column config ────────────────────────────────────────────
|
||||
const STATUS_COLUMNS = [
|
||||
{
|
||||
key: 'open',
|
||||
label: 'Planned',
|
||||
color: 'bg-blue-500',
|
||||
textColor: 'text-blue-700 dark:text-blue-300',
|
||||
},
|
||||
{
|
||||
key: 'in_progress',
|
||||
label: 'In Progress',
|
||||
color: 'bg-amber-500',
|
||||
textColor: 'text-amber-700 dark:text-amber-300',
|
||||
},
|
||||
{
|
||||
key: 'done',
|
||||
label: 'Complete',
|
||||
color: 'bg-emerald-500',
|
||||
textColor: 'text-emerald-700 dark:text-emerald-300',
|
||||
},
|
||||
{ key: 'open', label: 'Planned', tone: 'info' as StatusTone },
|
||||
{ key: 'in_progress', label: 'In Progress', tone: 'warning' as StatusTone },
|
||||
{ key: 'done', label: 'Complete', tone: 'success' as StatusTone },
|
||||
] as const;
|
||||
|
||||
const TYPE_BADGES: Record<string, { label: string; className: string }> = {
|
||||
feature: {
|
||||
label: 'Feature',
|
||||
className: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
|
||||
},
|
||||
bug: { label: 'Bug', className: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' },
|
||||
task: {
|
||||
label: 'Task',
|
||||
className: 'bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-gray-300',
|
||||
},
|
||||
const TYPE_BADGES: Record<string, { label: string; variant: BadgeVariant }> = {
|
||||
feature: { label: 'Feature', variant: 'info' },
|
||||
bug: { label: 'Bug', variant: 'danger' },
|
||||
task: { label: 'Task', variant: 'neutral' },
|
||||
};
|
||||
|
||||
const PRIORITY_BADGES: Record<string, { label: string; className: string }> = {
|
||||
critical: {
|
||||
label: 'Critical',
|
||||
className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
||||
},
|
||||
high: {
|
||||
label: 'High',
|
||||
className: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
|
||||
},
|
||||
medium: {
|
||||
label: 'Medium',
|
||||
className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
||||
},
|
||||
low: {
|
||||
label: 'Low',
|
||||
className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
|
||||
},
|
||||
const PRIORITY_BADGES: Record<string, { label: string; variant: BadgeVariant }> = {
|
||||
critical: { label: 'Critical', variant: 'danger' },
|
||||
high: { label: 'High', variant: 'warning' },
|
||||
medium: { label: 'Medium', variant: 'neutral' },
|
||||
low: { label: 'Low', variant: 'success' },
|
||||
};
|
||||
|
||||
export default function RoadmapPage() {
|
||||
@ -196,26 +176,21 @@ export default function RoadmapPage() {
|
||||
const itemsByStatus = (status: string) => items.filter(i => i.status === status);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm sticky top-0 z-20">
|
||||
<header className="border-b border-border bg-card/80 backdrop-blur-sm sticky top-0 z-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">Product Roadmap</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
<h1 className="text-2xl font-bold text-foreground">Product Roadmap</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
Vote on features, report bugs, and shape what we build next
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setShowSubmit(true)}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
+ Submit Idea
|
||||
</button>
|
||||
<Button onClick={() => setShowSubmit(true)}>+ Submit Idea</Button>
|
||||
<a
|
||||
href="/login"
|
||||
className="text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Admin →
|
||||
</a>
|
||||
@ -225,46 +200,47 @@ export default function RoadmapPage() {
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 py-6">
|
||||
{loadError ? (
|
||||
<div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900 dark:bg-red-900/20 dark:text-red-300">
|
||||
<AlertBanner tone="error" title="Couldn't load the roadmap" className="mb-4">
|
||||
{loadError}
|
||||
</div>
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{voteError ? (
|
||||
<div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900 dark:bg-red-900/20 dark:text-red-300">
|
||||
<AlertBanner tone="error" title="Vote failed" className="mb-4">
|
||||
{voteError}
|
||||
</div>
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
{/* Stats bar */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard label="Total Items" value={stats.total} />
|
||||
<StatCard label="Total Votes" value={stats.totalVotes} />
|
||||
<StatCard label="In Progress" value={stats.byStatus?.in_progress || 0} />
|
||||
<StatCard label="Completed" value={stats.byStatus?.done || 0} />
|
||||
<MetricCard label="Total Items" value={stats.total} />
|
||||
<MetricCard label="Total Votes" value={stats.totalVotes} />
|
||||
<MetricCard label="In Progress" value={stats.byStatus?.in_progress || 0} />
|
||||
<MetricCard label="Completed" value={stats.byStatus?.done || 0} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-6">
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search items..."
|
||||
aria-label="Search items"
|
||||
className="flex-1"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="flex-1 px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<select
|
||||
<Select
|
||||
value={typeFilter}
|
||||
onChange={e => setTypeFilter(e.target.value)}
|
||||
aria-label="Filter by type"
|
||||
className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-sm"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="feature">Features</option>
|
||||
<option value="bug">Bugs</option>
|
||||
<option value="task">Tasks</option>
|
||||
</select>
|
||||
options={[
|
||||
{ value: '', label: 'All Types' },
|
||||
{ value: 'feature', label: 'Features' },
|
||||
{ value: 'bug', label: 'Bugs' },
|
||||
{ value: 'task', label: 'Tasks' },
|
||||
]}
|
||||
/>
|
||||
<SegmentedControl
|
||||
aria-label="Roadmap view"
|
||||
value={view}
|
||||
@ -282,27 +258,22 @@ export default function RoadmapPage() {
|
||||
{STATUS_COLUMNS.map(col => (
|
||||
<div key={col.key} className="space-y-3">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`w-3 h-3 rounded-full ${col.color} animate-pulse`} />
|
||||
<h2
|
||||
className={`font-semibold ${col.textColor} h-5 w-24 bg-slate-200 dark:bg-slate-700 rounded animate-pulse`}
|
||||
/>
|
||||
<StatusDot tone={col.tone} className="animate-pulse" />
|
||||
<h2 className="h-5 w-24 bg-muted rounded animate-pulse" />
|
||||
</div>
|
||||
{[1, 2, 3].map(i => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4"
|
||||
>
|
||||
<div key={i} className="bg-card rounded-xl border border-border p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex flex-col items-center min-w-[44px] py-1.5 px-2">
|
||||
<div className="h-4 w-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-4 w-6 bg-slate-200 dark:bg-slate-700 rounded mt-1 animate-pulse" />
|
||||
<div className="h-4 w-4 bg-muted rounded animate-pulse" />
|
||||
<div className="h-4 w-6 bg-muted rounded mt-1 animate-pulse" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="h-4 w-full bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-3 w-3/4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-4 w-full bg-muted rounded animate-pulse" />
|
||||
<div className="h-3 w-3/4 bg-muted rounded animate-pulse" />
|
||||
<div className="flex gap-2 pt-2">
|
||||
<div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
|
||||
<div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
|
||||
<div className="h-5 w-12 bg-muted rounded-full animate-pulse" />
|
||||
<div className="h-5 w-12 bg-muted rounded-full animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -316,19 +287,19 @@ export default function RoadmapPage() {
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 flex items-center gap-4"
|
||||
className="bg-card rounded-xl border border-border p-4 flex items-center gap-4"
|
||||
>
|
||||
<div className="flex flex-col items-center min-w-[44px] py-1.5 px-2">
|
||||
<div className="h-4 w-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-4 w-6 bg-slate-200 dark:bg-slate-700 rounded mt-1 animate-pulse" />
|
||||
<div className="h-4 w-4 bg-muted rounded animate-pulse" />
|
||||
<div className="h-4 w-6 bg-muted rounded mt-1 animate-pulse" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="h-4 w-full bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-3 w-1/2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-4 w-full bg-muted rounded animate-pulse" />
|
||||
<div className="h-3 w-1/2 bg-muted rounded animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<div className="h-5 w-12 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse" />
|
||||
<div className="h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" />
|
||||
<div className="h-5 w-12 bg-muted rounded-full animate-pulse" />
|
||||
<div className="h-4 w-16 bg-muted rounded animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -340,14 +311,14 @@ export default function RoadmapPage() {
|
||||
{STATUS_COLUMNS.map(col => (
|
||||
<div key={col.key} className="space-y-3">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`w-3 h-3 rounded-full ${col.color}`} />
|
||||
<h2 className={`font-semibold ${col.textColor}`}>{col.label}</h2>
|
||||
<span className="text-xs text-slate-400 ml-auto">
|
||||
<StatusDot tone={col.tone} />
|
||||
<h2 className="font-semibold text-foreground">{col.label}</h2>
|
||||
<span className="text-xs text-muted-foreground ml-auto">
|
||||
{itemsByStatus(col.key).length}
|
||||
</span>
|
||||
</div>
|
||||
{itemsByStatus(col.key).length === 0 ? (
|
||||
<p className="text-sm text-slate-400 italic py-4 text-center">No items</p>
|
||||
<p className="text-sm text-muted-foreground italic py-4 text-center">No items</p>
|
||||
) : (
|
||||
itemsByStatus(col.key).map(item => (
|
||||
<ItemCard
|
||||
@ -365,7 +336,7 @@ export default function RoadmapPage() {
|
||||
/* List View */
|
||||
<div className="space-y-3">
|
||||
{items.length === 0 ? (
|
||||
<p className="text-center py-10 text-slate-400">No items found</p>
|
||||
<p className="text-center py-10 text-muted-foreground">No items found</p>
|
||||
) : (
|
||||
items.map(item => (
|
||||
<ItemRow
|
||||
@ -508,14 +479,12 @@ export default function RoadmapPage() {
|
||||
|
||||
// ── Sub-components ──────────────────────────────────────────────────
|
||||
|
||||
function StatCard({ label, value }: { label: string; value: number }) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4">
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-white">{value}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{label}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const voteButtonClass = (hasVoted: boolean) =>
|
||||
`flex flex-col items-center min-w-[44px] py-1.5 px-2 rounded-lg border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
|
||||
hasVoted
|
||||
? 'border-primary bg-primary/10 text-primary'
|
||||
: 'border-border bg-muted/50 text-muted-foreground hover:border-primary hover:text-primary'
|
||||
}`;
|
||||
|
||||
function ItemCard({
|
||||
item,
|
||||
@ -531,45 +500,29 @@ function ItemCard({
|
||||
const hasVoted = votedItems.has(item.id);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 hover:shadow-md transition-shadow">
|
||||
<div className="bg-card rounded-xl border border-border p-4 hover:shadow-md transition-shadow">
|
||||
<div className="flex items-start gap-3">
|
||||
<button
|
||||
onClick={() => onVote(item.id)}
|
||||
type="button"
|
||||
aria-pressed={hasVoted}
|
||||
aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`}
|
||||
className={`flex flex-col items-center min-w-[44px] py-1.5 px-2 rounded-lg border text-sm font-semibold transition-colors ${
|
||||
hasVoted
|
||||
? 'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-300'
|
||||
: 'bg-slate-50 border-slate-200 text-slate-500 hover:border-blue-300 hover:text-blue-600 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300'
|
||||
}`}
|
||||
className={voteButtonClass(hasVoted)}
|
||||
title={hasVoted ? 'Remove vote' : 'Upvote'}
|
||||
>
|
||||
<span className="text-xs">▲</span>
|
||||
<span>{item.voteCount}</span>
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium text-slate-900 dark:text-white text-sm leading-snug">
|
||||
{item.title}
|
||||
</h3>
|
||||
<h3 className="font-medium text-foreground text-sm leading-snug">{item.title}</h3>
|
||||
{item.description && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.description}</p>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
<span
|
||||
className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${typeBadge.className}`}
|
||||
>
|
||||
{typeBadge.label}
|
||||
</span>
|
||||
<span
|
||||
className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${priorityBadge.className}`}
|
||||
>
|
||||
{priorityBadge.label}
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-1.5 mt-2">
|
||||
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
|
||||
<Badge variant={priorityBadge.variant}>{priorityBadge.label}</Badge>
|
||||
{item.commentCount > 0 && (
|
||||
<span className="text-[10px] text-slate-400">💬 {item.commentCount}</span>
|
||||
<span className="text-[10px] text-muted-foreground">💬 {item.commentCount}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -592,44 +545,34 @@ function ItemRow({
|
||||
const hasVoted = votedItems.has(item.id);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 flex items-center gap-4 hover:shadow-md transition-shadow">
|
||||
<div className="bg-card rounded-xl border border-border p-4 flex items-center gap-4 hover:shadow-md transition-shadow">
|
||||
<button
|
||||
onClick={() => onVote(item.id)}
|
||||
type="button"
|
||||
aria-pressed={hasVoted}
|
||||
aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`}
|
||||
title={hasVoted ? 'Remove vote' : 'Upvote'}
|
||||
className={`flex flex-col items-center min-w-[44px] py-1.5 px-2 rounded-lg border text-sm font-semibold transition-colors ${
|
||||
hasVoted
|
||||
? 'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-300'
|
||||
: 'bg-slate-50 border-slate-200 text-slate-500 hover:border-blue-300 hover:text-blue-600 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300'
|
||||
}`}
|
||||
className={voteButtonClass(hasVoted)}
|
||||
>
|
||||
<span className="text-xs">▲</span>
|
||||
<span>{item.voteCount}</span>
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium text-slate-900 dark:text-white text-sm">{item.title}</h3>
|
||||
<h3 className="font-medium text-foreground text-sm">{item.title}</h3>
|
||||
{item.description && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1">
|
||||
{item.description}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{item.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span
|
||||
className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${typeBadge.className}`}
|
||||
>
|
||||
{typeBadge.label}
|
||||
</span>
|
||||
<Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
|
||||
{statusCol && (
|
||||
<span className="flex items-center gap-1 text-xs text-slate-500">
|
||||
<span className={`w-2 h-2 rounded-full ${statusCol.color}`} />
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<StatusDot tone={statusCol.tone} />
|
||||
{statusCol.label}
|
||||
</span>
|
||||
)}
|
||||
{item.commentCount > 0 && (
|
||||
<span className="text-xs text-slate-400">💬 {item.commentCount}</span>
|
||||
<span className="text-xs text-muted-foreground">💬 {item.commentCount}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user