Clickable things must look clickable: the entrypoint URL "copy" control, "+ Add", and every other one #375

Closed
opened 2026-10-01 21:17:33 +02:00 by clawbot · 3 comments
Collaborator

Owner's words (chat, 2026-10-01 ~19:17 UTC):

the "copy" button next to the webhook entrypoint url doesn't look clickable. clickable things should look clickable ("like the + Add not-button in the target section, that one is also bad").

PRIORITY: an owner's direct request of 1 October, in the tier of #367 to #374: after the production path, ahead of the older backlog. #370 reworks "+ Add", so either do this first or make 370 meet this rule.

Definition of done:

  • Every clickable control in the UI looks clickable at rest: the "copy" control next to each entrypoint URL, "+ Add" in the targets section, and every other link-styled or text-styled action found in an audit of all templates. That means button styling, or an unmistakable link style, with hover and focus states and a pointer cursor. Each clickable is a real <button> or <a>, never a styled <span>/<div>, so it also works by keyboard.
  • One shared style for buttons, and one for secondary or inline actions. No per-page one-offs.
  • "copy" gives visible feedback when clicked, such as "Copied".
  • The PR lists every control it changed, from the audit. Before and after screenshots of the webhook page are taken in the headless browser and attached to the PR. A test checks that the copy and add controls are buttons. Lands on next with an independent review.

model: opus-5-5

Owner's words (chat, 2026-10-01 ~19:17 UTC): > the "copy" button next to the webhook entrypoint url doesn't look clickable. clickable things should look clickable ("like the + Add not-button in the target section, that one is also bad"). PRIORITY: an owner's direct request of 1 October, in the tier of https://git.eeqj.de/sneak/webhooker/issues/367 to https://git.eeqj.de/sneak/webhooker/issues/374: after the production path, ahead of the older backlog. https://git.eeqj.de/sneak/webhooker/issues/370 reworks "+ Add", so either do this first or make 370 meet this rule. Definition of done: - Every clickable control in the UI looks clickable at rest: the "copy" control next to each entrypoint URL, "+ Add" in the targets section, and every other link-styled or text-styled action found in an audit of all templates. That means button styling, or an unmistakable link style, with hover and focus states and a pointer cursor. Each clickable is a real `<button>` or `<a>`, never a styled `<span>`/`<div>`, so it also works by keyboard. - One shared style for buttons, and one for secondary or inline actions. No per-page one-offs. - "copy" gives visible feedback when clicked, such as "Copied". - The PR lists every control it changed, from the audit. Before and after screenshots of the webhook page are taken in the headless browser and attached to the PR. A test checks that the copy and add controls are buttons. Lands on `next` with an independent review. model: opus-5-5
clawbot self-assigned this 2026-10-01 21:17:33 +02:00
Author
Collaborator

Plan.

  • Two shared styles in static/css/style.css: one for buttons (the existing btn-primary family) and one for secondary or inline actions, with a visible border or underline at rest, a pointer cursor, and hover and focus states. No per-page one-offs. A class the pages use must already be in the committed static/css/tailwind.css, or be a plain rule in style.css.
  • Every clickable control in every template becomes a real <button> for an action or an <a> for navigation, with one of the two styles. The PR lists each control it changed.
  • The copy control beside each entrypoint URL shows "Copied" for a moment after a click.
  • Before and after screenshots of the webhook page, taken in headless Chrome, are attached to the PR, as the definition of done asks.
  • Sequencing: after #367 (paths) and #371 (Alpine's directives rewritten for the page's security policy), which both touch every template, and before #370, #369, #372, #373 and #374, which then use the two shared styles.

Model: opus-5-5

Plan. - Two shared styles in `static/css/style.css`: one for buttons (the existing `btn-primary` family) and one for secondary or inline actions, with a visible border or underline at rest, a pointer cursor, and hover and focus states. No per-page one-offs. A class the pages use must already be in the committed `static/css/tailwind.css`, or be a plain rule in `style.css`. - Every clickable control in every template becomes a real `<button>` for an action or an `<a>` for navigation, with one of the two styles. The PR lists each control it changed. - The copy control beside each entrypoint URL shows "Copied" for a moment after a click. - Before and after screenshots of the webhook page, taken in headless Chrome, are attached to the PR, as the definition of done asks. - **Sequencing:** after https://git.eeqj.de/sneak/webhooker/issues/367 (paths) and https://git.eeqj.de/sneak/webhooker/issues/371 (Alpine's directives rewritten for the page's security policy), which both touch every template, and before https://git.eeqj.de/sneak/webhooker/issues/370, https://git.eeqj.de/sneak/webhooker/issues/369, https://git.eeqj.de/sneak/webhooker/issues/372, https://git.eeqj.de/sneak/webhooker/issues/373 and https://git.eeqj.de/sneak/webhooker/issues/374, which then use the two shared styles. Model: opus-5-5
Author
Collaborator

Found again by the audit for #377, on current next: Edit, Activate, Deactivate, Delete, Replay, Resubmit and both "+ Add" controls are plain coloured text with no button styling.

Model: opus-5-5

Found again by the audit for https://git.eeqj.de/sneak/webhooker/issues/377, on current `next`: Edit, Activate, Deactivate, Delete, Replay, Resubmit and both "+ Add" controls are plain coloured text with no button styling. Model: opus-5-5
Author
Collaborator

Built in #447. Every clickable control now looks clickable at rest, in one of two shared styles in static/css/style.css, which the layout now loads: buttons (btn-primary, btn-secondary, btn-danger, now with a pointer cursor) and secondary or inline actions (btn-small, a small bordered button with hover and focus states). Copy, both Add, the row actions on the webhook page, Resubmit, Replay, and the navigation, back and footer links each use one of them, and the event log's clickable rows are now buttons. The PR lists every control changed and carries the before and after screenshots of the webhook page.

  • Judgement call: the site name in the bar and the cards on the webhook list are unchanged.
  • Judgement call: the row Delete buttons keep red text.
  • Rows on the webhook page and in the event log now wrap at phone width.
  • btn-text is now unused; input.css and tailwind.css were not regenerated.
  • The browser test grants the headless browser clipboard permission, which a real tab gets on a click.

Model: opus-5-5

Built in https://git.eeqj.de/sneak/webhooker/pulls/447. Every clickable control now looks clickable at rest, in one of two shared styles in `static/css/style.css`, which the layout now loads: buttons (`btn-primary`, `btn-secondary`, `btn-danger`, now with a pointer cursor) and secondary or inline actions (`btn-small`, a small bordered button with hover and focus states). Copy, both Add, the row actions on the webhook page, Resubmit, Replay, and the navigation, back and footer links each use one of them, and the event log's clickable rows are now buttons. The PR lists every control changed and carries the before and after screenshots of the webhook page. - Judgement call: the site name in the bar and the cards on the webhook list are unchanged. - Judgement call: the row Delete buttons keep red text. - Rows on the webhook page and in the event log now wrap at phone width. - `btn-text` is now unused; `input.css` and `tailwind.css` were not regenerated. - The browser test grants the headless browser clipboard permission, which a real tab gets on a click. Model: opus-5-5
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: sneak/webhooker#375