From 32dac7d466e22161afbb464d9711c79064962a76 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Thu, 28 May 2026 21:06:09 -0700
Subject: [PATCH] feat(tracker-web): item-detail ActionMenu + Timeline comments
 (UX-12.2)

Move the Edit/Delete item actions into a shared ActionMenu in the page header
and render the comment history with the shared Timeline. Document UX-12.3 as
data-gated/deferred: descriptions and comments are plain text with no backend
HTML sanitization, so RichTextEditor is intentionally not adopted yet.

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

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../docs/roadmaps/UX_INTEGRATION_BYTELYST.md  | 11 +++-
 .../src/app/dashboard/items/[id]/page.tsx     | 58 ++++++++++++-------
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md b/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md
index 2773e4ab..3feea67e 100644
--- a/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md
+++ b/dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md
@@ -220,12 +220,19 @@ pnpm build      # final gate
       (SegmentedControl now drives the roadmap board/list toggle — the app's only board↔list
       toggle — replacing the bespoke `blue-600` buttons; `Tooltip` wraps the truncated board
       card titles. e2e toggle selector updated button→radio. UX-12.1 verified: tc/lint/test 162 ✓/build/e2e 18 ✓)
-- [ ] **12.2** Item detail: move row/item actions into an `ActionMenu`, and render the item's
+- [x] **12.2** Item detail: move row/item actions into an `ActionMenu`, and render the item's
       activity/comment history with `Timeline`.
+      (Edit + Delete now live in an `ActionMenu` in the page header; comments render via
+      `Timeline`. UX-12.2 verified: tc/lint/test 162 ✓/build/e2e 18 ✓.)
 - [ ] **12.3** _(stretch — needs HTML-capable description/comment storage)_ Swap the plain
       description/comment `<textarea>` for `RichTextEditor`, and render saved content with
       `RichTextViewer`. **Only do this if** the backend stores/returns rich HTML safely;
       otherwise leave `- [ ]` with a note. **Verify per task:** `pnpm typecheck && pnpm lint && pnpm build`.
+      DEFERRED (data-gated): `TrackerItem.description` and `Comment.body` are plain `string`s
+      rendered with `whitespace-pre-wrap`; the `/api/tracker/*` proxy does not store or sanitize
+      rich HTML. Adopting `RichTextEditor` would persist HTML with no backend sanitization (XSS
+      risk) and mismatch the plain-text model, so `@bytelyst/rich-text` is intentionally not
+      adopted until the backend supports safe rich HTML. No dep added.
 
 ## UX-13 — Notifications surface via `@bytelyst/notifications-ui` (stretch / data-gated)
 
@@ -261,7 +268,7 @@ pnpm build      # final gate
 
 ```
 Core   : UX-1 ✅  UX-2 ⬜  UX-3 ⬜  UX-4 ⬜  UX-5 ⬜  UX-6 ⬜  UX-7 ⬜  UX-8 ⬜
-Expand : UX-9 ✅  UX-10 ✅  UX-11 ✅  UX-12 ⬜  UX-13 ⬜   (stretch: 12.3, 13.*)
+Expand : UX-9 ✅  UX-10 ✅  UX-11 ✅  UX-12 ✅  UX-13 ⬜   (stretch: 12.3, 13.*)
 ```
 
 **UX-1 is done** (token bridge + Primitives adapter, commit `dc01dd02`) — the `--bl-*` bridge is
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 64eafe54..5bce47da 100644
--- a/dashboards/tracker-web/src/app/dashboard/items/[id]/page.tsx
+++ b/dashboards/tracker-web/src/app/dashboard/items/[id]/page.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { PageHeader, LoadingSpinner } from '@bytelyst/dashboard-components';
+import { ActionMenu, Timeline } from '@/components/ui/Primitives';
 import { useAuth } from '@/lib/auth-context';
 import {
   getItem,
   updateItem,
   updateItemStatus,
+  deleteItem,
   listComments,
   addComment,
   toggleVote,
@@ -21,6 +23,7 @@ const VISIBILITIES = ['internal', 'public'] as const;
 
 export default function ItemDetailPage() {
   const { id } = useParams<{ id: string }>();
+  const router = useRouter();
   const { token } = useAuth();
 
   const [item, setItem] = useState<TrackerItem | null>(null);
@@ -107,6 +110,24 @@ export default function ItemDetailPage() {
     }
   };
 
+  const handleDelete = async () => {
+    if (!id) return;
+    if (!confirm('Delete this item? This cannot be undone.')) return;
+    try {
+      await deleteItem(id);
+      router.push('/dashboard/items');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete');
+    }
+  };
+
+  const startEdit = () => {
+    if (!item) return;
+    setEditTitle(item.title);
+    setEditDescription(item.description);
+    setEditing(true);
+  };
+
   if (!item) {
     return (
       <div className="mx-auto flex min-h-[400px] max-w-3xl items-center justify-center">
@@ -125,16 +146,13 @@ export default function ItemDetailPage() {
         ]}
         actions={
           editing ? undefined : (
-            <button
-              onClick={() => {
-                setEditTitle(item.title);
-                setEditDescription(item.description);
-                setEditing(true);
-              }}
-              className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent"
-            >
-              Edit
-            </button>
+            <ActionMenu
+              label="Item actions"
+              items={[
+                { id: 'edit', label: 'Edit', onSelect: startEdit },
+                { id: 'delete', label: 'Delete', destructive: true, onSelect: handleDelete },
+              ]}
+            />
           )
         }
       />
@@ -262,15 +280,15 @@ export default function ItemDetailPage() {
       <div className="space-y-4">
         <h2 className="text-lg font-semibold">Comments ({comments.length})</h2>
 
-        {comments.map(c => (
-          <div key={c.id} className="rounded-lg border border-border bg-card p-4">
-            <div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
-              <span>{c.authorEmail || c.authorId}</span>
-              <span>{new Date(c.createdAt).toLocaleString()}</span>
-            </div>
-            <p className="whitespace-pre-wrap text-sm">{c.body}</p>
-          </div>
-        ))}
+        <Timeline
+          emptyLabel="No comments yet."
+          items={comments.map(c => ({
+            id: c.id,
+            title: c.authorEmail || c.authorId,
+            meta: new Date(c.createdAt).toLocaleString(),
+            description: <span className="whitespace-pre-wrap">{c.body}</span>,
+          }))}
+        />
 
         <form onSubmit={handleAddComment} className="space-y-2">
           <textarea