Inline comment composer: move Cancel from header row to bottom action row (lower left, opposite Stage comment) #587

New issue

Closed

opened 2026-09-15 18:06:27 +00:00 by crueber · 1 comment

crueber commented

2026-09-15 18:06:27 +00:00

Owner

What's requested

The inline (staged-draft) comment composer keeps its Cancel button in the header row, next to the "commenting on …" anchor label. Move Cancel out of the header and into the composer's bottom action row, lower left, opposite the right-aligned primary submit ("Stage comment" / "Save" / "Start thread").

Evidence (current tree, `git pull` fresh at filing time)

Both instances of the pattern share the same defect:

web/src/pages/Pull.jsx:594-599 — the dismissable draft composer (Forgejo #566, rendered under a diff line): the header <p> is commenting on <anchor> followed immediately by the small secondary Cancel button (btn ml-2 px-2 py-0.5 text-xs), then the CommentComposer at line 600 renders its own bottom action row (web/src/components/CommentComposer.jsx:262): flex flex-wrap items-center justify-end gap-2 with the primary submit right-aligned. The action being about the whole draft sits next to an informational label, disconnected from the row the user submits from.
web/src/pages/PullFiles.jsx:109-114 — the Files-tab staged composer (same #566 idiom): identical header-anchored Cancel above a CommentComposer whose submit is "Start thread".

Header comment/idiom refs: the header row is purely informational (commenting on <anchorLabel>); the Cancel behavior (drops only the keyed draft, Escape equivalence, refocus) is documented at web/src/pages/Pull.jsx:572-592 and web/src/pages/PullFiles.jsx:94-99.

Architecture notes

The bottom action row lives inside CommentComposer (web/src/components/CommentComposer.jsx:262-316) and is shared by every surface (issues, PR conversation, review). Cleanest shape: add an optional onCancel/cancelLabel prop pair to CommentComposer that renders the Cancel button at the left of that row (e.g. justify-between, left slot = Cancel, right slot = existing close/submit cluster). Both call sites above then drop their header-row button and pass the handler instead — one mechanism, no per-page fork of the row.
The header <p> keeps only the anchor label.
Behavior is unchanged: Cancel (and Escape) drops only the keyed draft, calls nothing (no onStage, no POST), and refocuses the staging trigger (refocusTrigger path in Pull.jsx). Update the comments at both call sites that currently describe the button as header-row ("Cancel wears the small secondary .btn treatment" etc.) so they describe the new position.
All styling stays Tailwind utilities / existing .btn classes — no new CSS.

Acceptance criteria

Inline composer (Pull.jsx diff-line draft): Cancel renders in the bottom action row, lower left, opposite the right-aligned "Stage comment"/"Save" button.
Files-tab staged composer (PullFiles.jsx): same placement, opposite "Start thread".
Header row shows only the commenting on <anchor> label — no button.
Cancel and Escape behavior identical to today: drops only that keyed draft, no network call, refocuses the gutter "+" trigger (Pull.jsx) / dismisses the staged composer (PullFiles.jsx).
Issues-page composer and other CommentComposer consumers without onCancel render exactly as before.
Render verification before close: headless DOM assertions on the rendered composer structure (Cancel shares the bottom flex row with the submit button; header <p> contains no <button>), and/or screenshot review.

## What's requested The inline (staged-draft) comment composer keeps its **Cancel** button in the header row, next to the "commenting on …" anchor label. Move Cancel out of the header and into the composer's bottom action row, **lower left**, opposite the right-aligned primary submit ("Stage comment" / "Save" / "Start thread"). ## Evidence (current tree, `git pull` fresh at filing time) Both instances of the pattern share the same defect: 1. `web/src/pages/Pull.jsx:594-599` — the dismissable draft composer (Forgejo #566, rendered under a diff line): the header `<p>` is `commenting on <anchor>` followed immediately by the small secondary `Cancel` button (`btn ml-2 px-2 py-0.5 text-xs`), then the `CommentComposer` at line 600 renders its own bottom action row (`web/src/components/CommentComposer.jsx:262`): `flex flex-wrap items-center justify-end gap-2` with the primary submit right-aligned. The action being about the *whole draft* sits next to an informational label, disconnected from the row the user submits from. 2. `web/src/pages/PullFiles.jsx:109-114` — the Files-tab staged composer (same #566 idiom): identical header-anchored Cancel above a `CommentComposer` whose submit is "Start thread". Header comment/idiom refs: the header row is purely informational (`commenting on <anchorLabel>`); the Cancel behavior (drops only the keyed draft, Escape equivalence, refocus) is documented at `web/src/pages/Pull.jsx:572-592` and `web/src/pages/PullFiles.jsx:94-99`. ## Architecture notes - The bottom action row lives inside `CommentComposer` (`web/src/components/CommentComposer.jsx:262-316`) and is shared by every surface (issues, PR conversation, review). Cleanest shape: add an optional `onCancel`/`cancelLabel` prop pair to `CommentComposer` that renders the Cancel button at the **left** of that row (e.g. `justify-between`, left slot = Cancel, right slot = existing close/submit cluster). Both call sites above then drop their header-row button and pass the handler instead — one mechanism, no per-page fork of the row. - The header `<p>` keeps only the anchor label. - Behavior is unchanged: Cancel (and Escape) drops only the keyed draft, calls nothing (no `onStage`, no POST), and refocuses the staging trigger (`refocusTrigger` path in Pull.jsx). Update the comments at both call sites that currently describe the button as header-row ("Cancel wears the small secondary .btn treatment" etc.) so they describe the new position. - All styling stays Tailwind utilities / existing `.btn` classes — no new CSS. ## Acceptance criteria - [ ] Inline composer (Pull.jsx diff-line draft): Cancel renders in the bottom action row, lower left, opposite the right-aligned "Stage comment"/"Save" button. - [ ] Files-tab staged composer (PullFiles.jsx): same placement, opposite "Start thread". - [ ] Header row shows only the `commenting on <anchor>` label — no button. - [ ] Cancel and Escape behavior identical to today: drops only that keyed draft, no network call, refocuses the gutter "+" trigger (Pull.jsx) / dismisses the staged composer (PullFiles.jsx). - [ ] Issues-page composer and other `CommentComposer` consumers without `onCancel` render exactly as before. - [ ] Render verification before close: headless DOM assertions on the rendered composer structure (Cancel shares the bottom flex row with the submit button; header `<p>` contains no `<button>`), and/or screenshot review.

crueber added the

enhancement

issues

labels

2026-09-15 18:06:48 +00:00

crueber added this to the v1 milestone

2026-09-15 18:06:48 +00:00

crueber added

bug

pull requests

and removed

enhancement

labels

2026-09-15 18:08:15 +00:00

crueber referenced this issue from a commit

2026-09-15 19:08:11 +00:00

Move inline-composer Cancel to the bottom action row (Forgejo #587)

crueber referenced this issue from a pull request that will close it,

2026-09-15 19:08:14 +00:00

Move inline-composer Cancel to the bottom action row (Fix #587) #590

crueber referenced this issue from a commit

2026-09-15 19:10:21 +00:00

Fix #587 amendment test count: 13 -> 14 (review pin)

crueber referenced this issue

2026-09-15 19:10:29 +00:00

Move inline-composer Cancel to the bottom action row (Fix #587) #590

crueber closed this issue

2026-09-15 19:10:48 +00:00

crueber referenced this issue from a commit

2026-09-15 19:10:48 +00:00

Merge pull request 'Move inline-composer Cancel to the bottom action row (Fix #587)' (#590) from fix/issue-587 into main

crueber commented

2026-09-15 19:10:48 +00:00

Author

Owner

Fixed by #590 (merged): CommentComposer gains optional onCancel/cancelLabel rendering Cancel lower-left opposite the submit cluster; both inline composers pass their existing handlers verbatim (behavior identical, incl. refocus semantics); no-onCancel consumers byte-identical. Verified: 1470 unit tests green (smoke excluded, pre-existing), vite/esbuild green, independent review APPROVE.