5.1.5 Comments section UI on the issue detail page — thread + composer + reply/edit/delete + "Show more" paging in the Activity slot
Estimate: 35m · Depends on: 5.1.2, 5.1.3, 5.1.4
The user-facing surface: replace the detail page's Activity placeholder ("Comments coming in Epic 5") with the designed comments stream. Design-gated (5.1.3) and built on the service (5.1.2) + the mention-capable editor (5.1.4).
Build (in app/(authed)/issues/[key]/_components/): a CommentsSection inside the existing Activity ContentSectionCard — the section header count + the (disabled) History filter seam documented for 5.5 + the sort toggle (oldest-first default, localStorage-persisted per user); the thread list (roots + one-level replies, long threads collapsing middle replies behind "Show more replies"); the composer (MarkdownEditor compact mode + mentionCandidates wired to the issue-scoped read); reply composers (pre-mentioning the replied-to author); edit-in-place; the delete confirm popover naming the reply count; "Show more comments (N older)" driving the cursor-paged read (server action / route — never load-all, finding #57); loading skeleton, empty state, ErrorState. Mutations go through Server Actions calling commentsService + router.refresh() (the shipped detail-page pattern — no realtime, the documented story-level decision). Role-aware affordances: composer hidden for viewer (the quiet view-only line); Edit/Delete rendered per the 5.1.2 permission matrix (the server re-checks regardless — UI affordance is not the gate).
A11y: the thread is a labelled feed/list; rows expose author + time as text; focus returns to a sane place after post/edit/delete; the strict axe sweep covers the detail route with comments present (extending the 2.4.6 sweep scope).
Acceptance criteria
- The Activity placeholder is gone; the section renders the designed thread (matching
comments.mock.htmlpanel-for-panel: row grammar, Edited tag, reply indent + collapse, composer states, mention chips) with the count + sort toggle + History seam. - Add/reply/edit/delete round-trip through Server Actions with the permission-aware affordances (viewer: no composer; non-author: no Edit; admin: Delete on any) and the delete confirm naming the reply count.
- Pagination: first paint shows the newest 20 in the active order with "Show more comments (N older)"; extending appends without losing scroll position; an issue with 100+ comments never issues an unbounded read.
- Empty / loading / error states match the design; the sort toggle flips and persists; the detail-route axe sweep stays clean; colour/shape only through
--el-*/element tokens. - Component/integration tests over the section (role matrix rendering, paging, reply-collapse) + the existing detail E2E still green.
Context refs
design/work-items/comments.mock.html+ design-notes (5.1.3) — THE layout authorityapp/(authed)/issues/[key]/page.tsx+_components/(the Activity placeholder,ContentSectionCard, the Server-Action +router.refresh()pattern fromedit/actions.ts)commentsService+ routes (5.1.2);MarkdownEditormentions (5.1.4)- The 2.4.6 a11y sweep scope (extend to the comments surface); finding #57 (paged, never load-all)