Skip to content

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped

Motir · Work items

MOTIR-269Done

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.html panel-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 authority
  • app/(authed)/issues/[key]/page.tsx + _components/ (the Activity placeholder, ContentSectionCard, the Server-Action + router.refresh() pattern from edit/actions.ts)
  • commentsService + routes (5.1.2); MarkdownEditor mentions (5.1.4)
  • The 2.4.6 a11y sweep scope (extend to the comments surface); finding #57 (paged, never load-all)