From aa36671e95fcbbc504ce209cbcebbe095f56f8e1 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Fri, 29 May 2026 06:39:15 -0700
Subject: [PATCH] feat(tracker-web): migrate board + item detail to primitives
 (UX-2.3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Board: type/priority pills → StatusDot/StatusBadge tones, count pill →
Badge, quick status-move buttons → Button, load errors → AlertBanner
(keeping the existing TooltipProvider + column accents).

Item detail: title/description editor → Input/Textarea/Button, the
status/priority/visibility selects → shared Select, the vote control →
Button, comment composer → Textarea/Button, errors → AlertBanner.
ActionMenu + Timeline (UX-12.2) are untouched.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../src/app/dashboard/board/page.tsx          |  53 +++++----
 .../src/app/dashboard/items/[id]/page.tsx     | 104 ++++++++----------
 2 files changed, 76 insertions(+), 81 deletions(-)

diff --git a/dashboards/tracker-web/src/app/dashboard/board/page.tsx b/dashboards/tracker-web/src/app/dashboard/board/page.tsx
index 44552f12..e390bdca 100644
--- a/dashboards/tracker-web/src/app/dashboard/board/page.tsx
+++ b/dashboards/tracker-web/src/app/dashboard/board/page.tsx
@@ -4,10 +4,16 @@ import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { PageHeader } from '@bytelyst/dashboard-components';
 import {
+  Button,
+  Badge,
+  StatusBadge,
+  StatusDot,
+  AlertBanner,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  type StatusTone,
 } from '@/components/ui/Primitives';
 import { useAuth } from '@/lib/auth-context';
 import { listItems, updateItemStatus, type TrackerItem } from '@/lib/tracker-client';
@@ -19,17 +25,17 @@ const COLUMNS: { key: string; label: string; color: string }[] = [
   { key: 'closed', label: 'Closed', color: 'border-t-gray-500' },
 ];
 
-const TYPE_DOT: Record<string, string> = {
-  bug: 'bg-red-500',
-  feature: 'bg-blue-500',
-  task: 'bg-amber-500',
+const TYPE_TONE: Record<string, StatusTone> = {
+  bug: 'danger',
+  feature: 'info',
+  task: 'warning',
 };
 
-const PRIORITY_LABEL: Record<string, string> = {
-  critical: 'text-red-600 dark:text-red-400',
-  high: 'text-orange-600 dark:text-orange-400',
-  medium: 'text-yellow-600 dark:text-yellow-400',
-  low: 'text-green-600 dark:text-green-400',
+const PRIORITY_TONE: Record<string, StatusTone> = {
+  critical: 'danger',
+  high: 'warning',
+  medium: 'neutral',
+  low: 'success',
 };
 
 export default function BoardPage() {
@@ -71,9 +77,9 @@ export default function BoardPage() {
         <p className="-mt-4 text-sm text-muted-foreground">Kanban view of all items</p>
 
         {error && (
-          <div className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          <AlertBanner tone="error" title="Something went wrong">
             {error}
-          </div>
+          </AlertBanner>
         )}
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
@@ -86,9 +92,7 @@ export default function BoardPage() {
               >
                 <div className="mb-3 flex items-center justify-between">
                   <h3 className="text-sm font-semibold">{col.label}</h3>
-                  <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
-                    {colItems.length}
-                  </span>
+                  <Badge variant="neutral">{colItems.length}</Badge>
                 </div>
 
                 <div className="space-y-2">
@@ -98,15 +102,14 @@ export default function BoardPage() {
                       className="rounded-lg border border-border bg-background p-3 shadow-sm transition-shadow hover:shadow-md"
                     >
                       <div className="mb-1 flex items-center gap-2">
-                        <span
-                          className={`h-2 w-2 rounded-full ${TYPE_DOT[item.type] || 'bg-gray-400'}`}
-                        />
+                        <StatusDot tone={TYPE_TONE[item.type] ?? 'neutral'} />
                         <span className="text-xs text-muted-foreground">{item.type}</span>
-                        <span
-                          className={`ml-auto text-xs font-medium ${PRIORITY_LABEL[item.priority] || ''}`}
+                        <StatusBadge
+                          tone={PRIORITY_TONE[item.priority] ?? 'neutral'}
+                          className="ml-auto"
                         >
                           {item.priority}
-                        </span>
+                        </StatusBadge>
                       </div>
 
                       <Tooltip>
@@ -127,16 +130,18 @@ export default function BoardPage() {
                       </div>
 
                       {/* Quick status move */}
-                      <div className="mt-2 flex gap-1">
+                      <div className="mt-2 flex flex-wrap gap-1">
                         {COLUMNS.filter(c => c.key !== item.status).map(c => (
-                          <button
+                          <Button
                             key={c.key}
+                            variant="ghost"
+                            size="sm"
                             onClick={() => handleStatusChange(item.id, c.key)}
-                            className="rounded px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                            className="h-auto px-1.5 py-0.5 text-[10px]"
                             title={`Move to ${c.label}`}
                           >
                             → {c.label}
-                          </button>
+                          </Button>
                         ))}
                       </div>
                     </div>
diff --git a/dashboards/tracker-web/src/app/dashboard/items/[id]/page.tsx b/dashboards/tracker-web/src/app/dashboard/items/[id]/page.tsx
index 5bce47da..b00029c5 100644
--- a/dashboards/tracker-web/src/app/dashboard/items/[id]/page.tsx
+++ b/dashboards/tracker-web/src/app/dashboard/items/[id]/page.tsx
@@ -3,7 +3,15 @@
 import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { PageHeader, LoadingSpinner } from '@bytelyst/dashboard-components';
-import { ActionMenu, Timeline } from '@/components/ui/Primitives';
+import {
+  ActionMenu,
+  Timeline,
+  Button,
+  Input,
+  Textarea,
+  Select,
+  AlertBanner,
+} from '@/components/ui/Primitives';
 import { useAuth } from '@/lib/auth-context';
 import {
   getItem,
@@ -158,40 +166,35 @@ export default function ItemDetailPage() {
       />
 
       {error && (
-        <div className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+        <AlertBanner tone="error" title="Something went wrong">
           {error}
-        </div>
+        </AlertBanner>
       )}
 
       {/* Title/description editor */}
       <div className="space-y-2">
         {editing ? (
           <div className="space-y-3">
-            <input
+            <Input
               type="text"
+              aria-label="Title"
               value={editTitle}
               onChange={e => setEditTitle(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-lg font-bold outline-none ring-ring focus:ring-2"
+              className="text-lg font-bold"
             />
-            <textarea
+            <Textarea
+              aria-label="Description"
               value={editDescription}
               onChange={e => setEditDescription(e.target.value)}
               rows={6}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
             />
             <div className="flex gap-2">
-              <button
-                onClick={handleSaveEdit}
-                className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-              >
+              <Button size="sm" onClick={handleSaveEdit}>
                 Save
-              </button>
-              <button
-                onClick={() => setEditing(false)}
-                className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent"
-              >
+              </Button>
+              <Button size="sm" variant="ghost" onClick={() => setEditing(false)}>
                 Cancel
-              </button>
+              </Button>
             </div>
           </div>
         ) : (
@@ -209,54 +212,45 @@ export default function ItemDetailPage() {
         </div>
         <div>
           <div className="text-xs font-medium text-muted-foreground">Status</div>
-          <select
+          <Select
+            aria-label="Status"
+            controlSize="sm"
+            className="mt-1"
             value={item.status}
             onChange={e => handleStatusChange(e.target.value)}
-            className="mt-1 rounded border border-input bg-background px-2 py-1 text-sm"
-          >
-            {STATUSES.map(s => (
-              <option key={s} value={s}>
-                {s.replace(/_/g, ' ')}
-              </option>
-            ))}
-          </select>
+            options={STATUSES.map(s => ({ value: s, label: s.replace(/_/g, ' ') }))}
+          />
         </div>
         <div>
           <div className="text-xs font-medium text-muted-foreground">Priority</div>
-          <select
+          <Select
+            aria-label="Priority"
+            controlSize="sm"
+            className="mt-1"
             value={item.priority}
             onChange={e => handlePriorityChange(e.target.value)}
-            className="mt-1 rounded border border-input bg-background px-2 py-1 text-sm"
-          >
-            {PRIORITIES.map(p => (
-              <option key={p} value={p}>
-                {p}
-              </option>
-            ))}
-          </select>
+            options={PRIORITIES.map(p => ({ value: p, label: p }))}
+          />
         </div>
         <div>
           <div className="text-xs font-medium text-muted-foreground">Visibility</div>
-          <select
+          <Select
+            aria-label="Visibility"
+            controlSize="sm"
+            className="mt-1"
             value={item.visibility || 'internal'}
             onChange={e => handleVisibilityChange(e.target.value)}
-            className="mt-1 rounded border border-input bg-background px-2 py-1 text-sm"
-          >
-            {VISIBILITIES.map(v => (
-              <option key={v} value={v}>
-                {v === 'public' ? '🌐 Public' : '🔒 Internal'}
-              </option>
-            ))}
-          </select>
+            options={VISIBILITIES.map(v => ({
+              value: v,
+              label: v === 'public' ? '🌐 Public' : '🔒 Internal',
+            }))}
+          />
         </div>
         <div>
           <div className="text-xs font-medium text-muted-foreground">Votes</div>
-          <button
-            onClick={handleVote}
-            className="mt-1 flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1 text-sm hover:bg-accent"
-          >
+          <Button variant="outline" size="sm" className="mt-1" onClick={handleVote}>
             ▲ {item.voteCount}
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -291,20 +285,16 @@ export default function ItemDetailPage() {
         />
 
         <form onSubmit={handleAddComment} className="space-y-2">
-          <textarea
+          <Textarea
+            aria-label="Add a comment"
             value={newComment}
             onChange={e => setNewComment(e.target.value)}
             placeholder="Add a comment..."
             rows={3}
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
           />
-          <button
-            type="submit"
-            disabled={!newComment.trim()}
-            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-          >
+          <Button type="submit" disabled={!newComment.trim()}>
             Comment
-          </button>
+          </Button>
         </form>
       </div>
     </div>