bytelyst/learning_ai_common_plat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tracker-web): re-skin public roadmap to the token system (UX-3.1)

Browse Source 
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 2026-05-29 06:44:22 -07:00
parent 8354595d0f
commit f612d2ecd1
1 changed files with 94 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
dashboards/tracker-web/src/app/roadmap/page.tsx
View File

@ -1,7 +1,18 @@
'use client'; 'use client';
import { useEffect, useState, useCallback } from 'react'; 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 { import {
getRoadmapItems, getRoadmapItems,
getRoadmapStats, getRoadmapStats,
@ -11,57 +22,26 @@ import {
type PublicRoadmapStats, type PublicRoadmapStats,
} from '@/lib/tracker-client'; } from '@/lib/tracker-client';
type BadgeVariant = NonNullable<BadgeProps['variant']>;
// ── Status column config ──────────────────────────────────────────── // ── Status column config ────────────────────────────────────────────
const STATUS_COLUMNS = [ const STATUS_COLUMNS = [
{ { key: 'open', label: 'Planned', tone: 'info' as StatusTone },
key: 'open', { key: 'in_progress', label: 'In Progress', tone: 'warning' as StatusTone },
label: 'Planned', { key: 'done', label: 'Complete', tone: 'success' as StatusTone },
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',
},
] as const; ] as const;
const TYPE_BADGES: Record<string, { label: string; className: string }> = { const TYPE_BADGES: Record<string, { label: string; variant: BadgeVariant }> = {
feature: { feature: { label: 'Feature', variant: 'info' },
label: 'Feature', bug: { label: 'Bug', variant: 'danger' },
className: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300', task: { label: 'Task', variant: 'neutral' },
},
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 PRIORITY_BADGES: Record<string, { label: string; className: string }> = { const PRIORITY_BADGES: Record<string, { label: string; variant: BadgeVariant }> = {
critical: { critical: { label: 'Critical', variant: 'danger' },
label: 'Critical', high: { label: 'High', variant: 'warning' },
className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200', medium: { label: 'Medium', variant: 'neutral' },
}, low: { label: 'Low', variant: 'success' },
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',
},
}; };
export default function RoadmapPage() { export default function RoadmapPage() {
@ -196,26 +176,21 @@ export default function RoadmapPage() {
const itemsByStatus = (status: string) => items.filter(i => i.status === status); const itemsByStatus = (status: string) => items.filter(i => i.status === status);
return ( 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 */}
<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 className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">Product Roadmap</h1> <h1 className="text-2xl font-bold text-foreground">Product Roadmap</h1>
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5"> <p className="text-sm text-muted-foreground mt-0.5">
Vote on features, report bugs, and shape what we build next Vote on features, report bugs, and shape what we build next
</p> </p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <Button onClick={() => setShowSubmit(true)}>+ Submit Idea</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>
<a <a
href="/login" 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 → Admin →
</a> </a>
@ -225,46 +200,47 @@ export default function RoadmapPage() {
<main className="max-w-7xl mx-auto px-4 sm:px-6 py-6"> <main className="max-w-7xl mx-auto px-4 sm:px-6 py-6">
{loadError ? ( {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} {loadError}
</div> </AlertBanner>
) : null} ) : null}
{voteError ? ( {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} {voteError}
</div> </AlertBanner>
) : null} ) : null}
{/* Stats bar */} {/* Stats bar */}
{stats && ( {stats && (
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
<StatCard label="Total Items" value={stats.total} /> <MetricCard label="Total Items" value={stats.total} />
<StatCard label="Total Votes" value={stats.totalVotes} /> <MetricCard label="Total Votes" value={stats.totalVotes} />
<StatCard label="In Progress" value={stats.byStatus?.in_progress || 0} /> <MetricCard label="In Progress" value={stats.byStatus?.in_progress || 0} />
<StatCard label="Completed" value={stats.byStatus?.done || 0} /> <MetricCard label="Completed" value={stats.byStatus?.done || 0} />
</div> </div>
)} )}
{/* Filters */} {/* Filters */}
<div className="flex flex-col sm:flex-row gap-3 mb-6"> <div className="flex flex-col sm:flex-row gap-3 mb-6">
<input <Input
type="text" type="text"
placeholder="Search items..." placeholder="Search items..."
aria-label="Search items"
className="flex-1"
value={search} value={search}
onChange={e => setSearch(e.target.value)} 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} value={typeFilter}
onChange={e => setTypeFilter(e.target.value)} onChange={e => setTypeFilter(e.target.value)}
aria-label="Filter by type" 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" options={[
> { value: '', label: 'All Types' },
<option value="">All Types</option> { value: 'feature', label: 'Features' },
<option value="feature">Features</option> { value: 'bug', label: 'Bugs' },
<option value="bug">Bugs</option> { value: 'task', label: 'Tasks' },
<option value="task">Tasks</option> ]}
</select> />
<SegmentedControl <SegmentedControl
aria-label="Roadmap view" aria-label="Roadmap view"
value={view} value={view}
@ -282,27 +258,22 @@ export default function RoadmapPage() {
{STATUS_COLUMNS.map(col => ( {STATUS_COLUMNS.map(col => (
<div key={col.key} className="space-y-3"> <div key={col.key} className="space-y-3">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className={`w-3 h-3 rounded-full ${col.color} animate-pulse`} /> <StatusDot tone={col.tone} className="animate-pulse" />
<h2 <h2 className="h-5 w-24 bg-muted rounded animate-pulse" />
className={`font-semibold ${col.textColor} h-5 w-24 bg-slate-200 dark:bg-slate-700 rounded animate-pulse`}
/>
</div> </div>
{[1, 2, 3].map(i => ( {[1, 2, 3].map(i => (
<div <div key={i} className="bg-card rounded-xl border border-border p-4">
key={i}
className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4"
>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="flex flex-col items-center min-w-[44px] py-1.5 px-2"> <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-4 bg-muted 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-6 bg-muted rounded mt-1 animate-pulse" />
</div> </div>
<div className="flex-1 min-w-0 space-y-2"> <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-4 w-full bg-muted rounded animate-pulse" />
<div className="h-3 w-3/4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" /> <div className="h-3 w-3/4 bg-muted rounded animate-pulse" />
<div className="flex gap-2 pt-2"> <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-muted 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> </div>
</div> </div>
</div> </div>
@ -316,19 +287,19 @@ export default function RoadmapPage() {
{[1, 2, 3, 4, 5].map(i => ( {[1, 2, 3, 4, 5].map(i => (
<div <div
key={i} 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="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-4 bg-muted 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-6 bg-muted rounded mt-1 animate-pulse" />
</div> </div>
<div className="flex-1 min-w-0 space-y-2"> <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-4 w-full bg-muted rounded animate-pulse" />
<div className="h-3 w-1/2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" /> <div className="h-3 w-1/2 bg-muted rounded animate-pulse" />
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <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-5 w-12 bg-muted rounded-full animate-pulse" />
<div className="h-4 w-16 bg-slate-200 dark:bg-slate-700 rounded animate-pulse" /> <div className="h-4 w-16 bg-muted rounded animate-pulse" />
</div> </div>
</div> </div>
))} ))}
@ -340,14 +311,14 @@ export default function RoadmapPage() {
{STATUS_COLUMNS.map(col => ( {STATUS_COLUMNS.map(col => (
<div key={col.key} className="space-y-3"> <div key={col.key} className="space-y-3">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className={`w-3 h-3 rounded-full ${col.color}`} /> <StatusDot tone={col.tone} />
<h2 className={`font-semibold ${col.textColor}`}>{col.label}</h2> <h2 className="font-semibold text-foreground">{col.label}</h2>
<span className="text-xs text-slate-400 ml-auto"> <span className="text-xs text-muted-foreground ml-auto">
{itemsByStatus(col.key).length} {itemsByStatus(col.key).length}
</span> </span>
</div> </div>
{itemsByStatus(col.key).length === 0 ? ( {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 => ( itemsByStatus(col.key).map(item => (
<ItemCard <ItemCard
@ -365,7 +336,7 @@ export default function RoadmapPage() {
/* List View */ /* List View */
<div className="space-y-3"> <div className="space-y-3">
{items.length === 0 ? ( {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 => ( items.map(item => (
<ItemRow <ItemRow
@ -508,14 +479,12 @@ export default function RoadmapPage() {
// ── Sub-components ────────────────────────────────────────────────── // ── Sub-components ──────────────────────────────────────────────────
function StatCard({ label, value }: { label: string; value: number }) { const voteButtonClass = (hasVoted: boolean) =>
return ( `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 ${
<div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4"> hasVoted
<p className="text-2xl font-bold text-slate-900 dark:text-white">{value}</p> ? 'border-primary bg-primary/10 text-primary'
<p className="text-xs text-slate-500 dark:text-slate-400">{label}</p> : 'border-border bg-muted/50 text-muted-foreground hover:border-primary hover:text-primary'
</div> }`;
);
}
function ItemCard({ function ItemCard({
item, item,
@ -531,45 +500,29 @@ function ItemCard({
const hasVoted = votedItems.has(item.id); const hasVoted = votedItems.has(item.id);
return ( 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"> <div className="flex items-start gap-3">
<button <button
onClick={() => onVote(item.id)} onClick={() => onVote(item.id)}
type="button" type="button"
aria-pressed={hasVoted} aria-pressed={hasVoted}
aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`} 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 ${ className={voteButtonClass(hasVoted)}
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'
}`}
title={hasVoted ? 'Remove vote' : 'Upvote'} title={hasVoted ? 'Remove vote' : 'Upvote'}
> >
<span className="text-xs">▲</span> <span className="text-xs">▲</span>
<span>{item.voteCount}</span> <span>{item.voteCount}</span>
</button> </button>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h3 className="font-medium text-slate-900 dark:text-white text-sm leading-snug"> <h3 className="font-medium text-foreground text-sm leading-snug">{item.title}</h3>
{item.title}
</h3>
{item.description && ( {item.description && (
<p className="text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2"> <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.description}</p>
{item.description}
</p>
)} )}
<div className="flex flex-wrap gap-1.5 mt-2"> <div className="flex flex-wrap items-center gap-1.5 mt-2">
<span <Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${typeBadge.className}`} <Badge variant={priorityBadge.variant}>{priorityBadge.label}</Badge>
>
{typeBadge.label}
</span>
<span
className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${priorityBadge.className}`}
>
{priorityBadge.label}
</span>
{item.commentCount > 0 && ( {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>
</div> </div>
@ -592,44 +545,34 @@ function ItemRow({
const hasVoted = votedItems.has(item.id); const hasVoted = votedItems.has(item.id);
return ( 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 <button
onClick={() => onVote(item.id)} onClick={() => onVote(item.id)}
type="button" type="button"
aria-pressed={hasVoted} aria-pressed={hasVoted}
aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`} aria-label={hasVoted ? `Remove vote from ${item.title}` : `Upvote ${item.title}`}
title={hasVoted ? 'Remove vote' : 'Upvote'} 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 ${ className={voteButtonClass(hasVoted)}
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'
}`}
> >
<span className="text-xs">▲</span> <span className="text-xs">▲</span>
<span>{item.voteCount}</span> <span>{item.voteCount}</span>
</button> </button>
<div className="flex-1 min-w-0"> <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 && ( {item.description && (
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1"> <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{item.description}</p>
{item.description}
</p>
)} )}
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <div className="flex items-center gap-2 shrink-0">
<span <Badge variant={typeBadge.variant}>{typeBadge.label}</Badge>
className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${typeBadge.className}`}
>
{typeBadge.label}
</span>
{statusCol && ( {statusCol && (
<span className="flex items-center gap-1 text-xs text-slate-500"> <span className="flex items-center gap-1 text-xs text-muted-foreground">
<span className={`w-2 h-2 rounded-full ${statusCol.color}`} /> <StatusDot tone={statusCol.tone} />
{statusCol.label} {statusCol.label}
</span> </span>
)} )}
{item.commentCount > 0 && ( {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>
</div> </div>