Clean up and clarify the web UI #57

Closed
opened 2026-04-07 20:19:20 +02:00 by clawbot · 5 comments
Collaborator

The webhooker web UI needs a cleanup pass to make it more conceptually clear and logically organized.

Goals:

  • Improve the overall layout and information hierarchy so the UI is intuitive at a glance
  • Make the conceptual model clearer (what webhooks exist, their status, how to configure them)
  • Ensure navigation and actions are logically grouped
  • Remove any confusing or redundant UI elements
  • Improve labeling and copy for clarity

This is a UX/design pass, not just cosmetic — the UI should make the system's concepts easy to understand for someone seeing it for the first time.

The webhooker web UI needs a cleanup pass to make it more conceptually clear and logically organized. Goals: - Improve the overall layout and information hierarchy so the UI is intuitive at a glance - Make the conceptual model clearer (what webhooks exist, their status, how to configure them) - Ensure navigation and actions are logically grouped - Remove any confusing or redundant UI elements - Improve labeling and copy for clarity This is a UX/design pass, not just cosmetic — the UI should make the system's concepts easy to understand for someone seeing it for the first time.
clawbot added this to the 1.0.0 milestone 2026-08-07 13:11:42 +02:00
Author
Collaborator

Concrete items for this cleanup, from the 1.0 re-audit (see #33):

  • Unify terminology: the nav and URLs say Sources / /source, but page headings say Webhook(s) — one concept, pick one name.
  • Finish or remove the Profile "Settings" section (currently placeholder copy); the password-change flow itself is #65.
  • Stop rendering the raw stored JSON target config in the UI (templates/source_detail.html) — present friendly fields instead of the verbatim config blob.
  • Do not offer the non-functional database / log target options (tracked as #70).
  • The retention field implies enforcement that does not yet exist; align the copy with real behaviour once #63 lands.
  • Add a copy-to-clipboard affordance for the entrypoint webhook URL.
  • Consider a real home/dashboard instead of / redirecting to the sources list.

Suggest tackling this as a proposal first (a short before/after of the target flow and terminology), then splitting into small sub-issues — pending your go-ahead in #33.

Concrete items for this cleanup, from the 1.0 re-audit (see #33): - Unify terminology: the nav and URLs say Sources / `/source`, but page headings say Webhook(s) — one concept, pick one name. - Finish or remove the Profile "Settings" section (currently placeholder copy); the password-change flow itself is #65. - Stop rendering the raw stored JSON target config in the UI (`templates/source_detail.html`) — present friendly fields instead of the verbatim config blob. - Do not offer the non-functional `database` / `log` target options (tracked as #70). - The retention field implies enforcement that does not yet exist; align the copy with real behaviour once #63 lands. - Add a copy-to-clipboard affordance for the entrypoint webhook URL. - Consider a real home/dashboard instead of `/` redirecting to the sources list. Suggest tackling this as a proposal first (a short before/after of the target flow and terminology), then splitting into small sub-issues — pending your go-ahead in #33.
Author
Collaborator

Correction per @sneak's 2026-08-07 decision: the database and log target options stay — they are required for 1.0 and will be implemented (database archiving in #43, log target in #70). Disregard the "do not offer the database / log options" bullet in my previous comment. For this UI-cleanup issue, the scope for those targets is to render their config and delivery status clearly, not to hide them.

Correction per @sneak's 2026-08-07 decision: the `database` and `log` target options **stay** — they are required for 1.0 and will be implemented (database archiving in #43, log target in #70). Disregard the "do not offer the `database` / `log` options" bullet in my previous comment. For this UI-cleanup issue, the scope for those targets is to render their config and delivery status clearly, not to hide them.
Author
Collaborator

Definition of done

Scoping this to land for 1.0.0. #43 and #70 have both closed, so the target-rendering bullets are actionable. The raw-config bullet turned out to be a credential exposure rather than a cosmetic issue and is split out as #113 so it can land on its own; it is not part of this unit.

  1. Unify terminology on "Webhook". Nav says Sources (templates/navbar.html:19,41) while headings say Webhooks (Webhooks, Create Webhook, Edit Webhook). Standardise user-visible copy on "Webhook", which matches the product name, the model (database.Webhook), and most existing headings. URLs are out of scope/sources and /source/{id} stay; changing routes breaks existing bookmarks and buys nothing here.
  2. Remove the Profile "Settings" placeholder. templates/profile.html:52-53 reads "Profile settings and preferences will be available here." Password change (#65) has landed and is the only real setting; delete the empty section rather than shipping placeholder copy.
  3. Retention copy matches real behaviour. The reaper (#63) and 0-means-forever (#79) have landed. The create and edit forms must state what actually happens, including that 0 retains forever.
  4. Copy-to-clipboard affordance for the entrypoint webhook URL on source_detail.html. Progressive enhancement only — no framework, and the URL stays selectable if the script does not run.

Out of scope

The "real home/dashboard instead of / redirecting to the sources list" bullet is deferred past 1.0. It is a design proposal rather than a cleanup, and nothing in the milestone depends on it. Say the word if you want it pulled in.

Implementation requirements

  • Branch from next; PR based on next; single commit; title ending (closes #57).
  • Copy-only and markup-only changes. No route changes, no handler behaviour changes, no model changes.
  • Item 3 must reflect the code as it stands on next, not the issue text — read parseRetentionDays and RetentionLabel before writing the copy.
  • Stay on existing Tailwind utility classes. If a new class is genuinely needed, regenerate the CSS with the repo's own target and commit the result.
  • Template rendering assertions for items 1 and 3, so the copy cannot silently drift back.
  • Gate on make check, plus script/cibuild with the Docker cache defeated.
## Definition of done Scoping this to land for 1.0.0. #43 and #70 have both closed, so the target-rendering bullets are actionable. The raw-config bullet turned out to be a credential exposure rather than a cosmetic issue and is split out as https://git.eeqj.de/sneak/webhooker/issues/113 so it can land on its own; it is not part of this unit. 1. **Unify terminology on "Webhook".** Nav says Sources (`templates/navbar.html:19,41`) while headings say Webhooks (`Webhooks`, `Create Webhook`, `Edit Webhook`). Standardise user-visible copy on "Webhook", which matches the product name, the model (`database.Webhook`), and most existing headings. **URLs are out of scope** — `/sources` and `/source/{id}` stay; changing routes breaks existing bookmarks and buys nothing here. 2. **Remove the Profile "Settings" placeholder.** `templates/profile.html:52-53` reads "Profile settings and preferences will be available here." Password change (#65) has landed and is the only real setting; delete the empty section rather than shipping placeholder copy. 3. **Retention copy matches real behaviour.** The reaper (#63) and 0-means-forever (#79) have landed. The create and edit forms must state what actually happens, including that 0 retains forever. 4. **Copy-to-clipboard affordance for the entrypoint webhook URL** on `source_detail.html`. Progressive enhancement only — no framework, and the URL stays selectable if the script does not run. ## Out of scope The "real home/dashboard instead of `/` redirecting to the sources list" bullet is deferred past 1.0. It is a design proposal rather than a cleanup, and nothing in the milestone depends on it. Say the word if you want it pulled in. ## Implementation requirements - Branch from `next`; PR based on `next`; single commit; title ending ` (closes #57)`. - Copy-only and markup-only changes. No route changes, no handler behaviour changes, no model changes. - Item 3 must reflect the code as it stands on `next`, not the issue text — read `parseRetentionDays` and `RetentionLabel` before writing the copy. - Stay on existing Tailwind utility classes. If a new class is genuinely needed, regenerate the CSS with the repo's own target and commit the result. - Template rendering assertions for items 1 and 3, so the copy cannot silently drift back. - Gate on `make check`, plus `script/cibuild` with the Docker cache defeated.
Author
Collaborator

Scope correction: the Definition of done above says #79 has landed. It has not — RetentionLabel, parseRetentionDays and RetentionForeverDays exist only on #96, still open.

Item 3 (retention copy) is therefore dropped from this unit: PR 96 already rewrites that copy in sources_new.html and source_edit.html, so doing it here would duplicate it and conflict. Items 1, 2 and 4 ship now; item 3 stays open on this issue and gets done once PR 96 lands.

Scope correction: the Definition of done above says #79 has landed. It has not — `RetentionLabel`, `parseRetentionDays` and `RetentionForeverDays` exist only on https://git.eeqj.de/sneak/webhooker/pulls/96, still open. Item 3 (retention copy) is therefore dropped from this unit: PR 96 already rewrites that copy in `sources_new.html` and `source_edit.html`, so doing it here would duplicate it and conflict. Items 1, 2 and 4 ship now; item 3 stays open on this issue and gets done once PR 96 lands.
Author
Collaborator

Items 1, 2 and 4 are up as #116 (base next).

  • 1. Terminology. Both templates/navbar.html links now read Webhooks, and templates/sources_list.html's title block says Webhooks - Webhooker. /sources and /source/{id} unchanged, per the DoD.
  • 2. Profile placeholder. The "Settings" column is gone from templates/profile.html; the two-column grid collapses to the one remaining column.
  • 4. Copy affordance. templates/source_detail.html renders each entrypoint URL in an id'd <code> followed by a button carrying the hidden attribute; static/js/app.js reveals it only when both the target and the Clipboard API resolve, so without the script there is no dead control and the URL stays selectable. No framework, no new Tailwind classes.

Item 3 is not in that PR. The DoD states #79 has landed; it has not — parseRetentionDays, RetentionLabel, RetainsForever and RetentionForeverDays exist only on the open #96. On next today a 0 is unreachable from the UI (create falls back to 30, edit ignores it, GORM substitutes the column default on insert), so "0 retains forever" copy would be false, and PR 96 already rewrites the same form lines. sources_new.html and source_edit.html are left byte-identical to next so that rebase stays clean.

Verified: make check exit 0 with 0 issues. from the linter, and script/cibuild exit 0 with the fmt-check, lint, test and build layers all executing rather than replaying from cache.

Separately noted while working here: page {{define "title"}} blocks never render, because parsePageTemplate parses the page before htmlheader.html, whose {{block "title"}} then redefines it. Every tab reads just "Webhooker". Pre-existing and left alone.

Items 1, 2 and 4 are up as https://git.eeqj.de/sneak/webhooker/pulls/116 (base `next`). - **1. Terminology.** Both `templates/navbar.html` links now read Webhooks, and `templates/sources_list.html`'s title block says `Webhooks - Webhooker`. `/sources` and `/source/{id}` unchanged, per the DoD. - **2. Profile placeholder.** The "Settings" column is gone from `templates/profile.html`; the two-column grid collapses to the one remaining column. - **4. Copy affordance.** `templates/source_detail.html` renders each entrypoint URL in an id'd `<code>` followed by a button carrying the `hidden` attribute; `static/js/app.js` reveals it only when both the target and the Clipboard API resolve, so without the script there is no dead control and the URL stays selectable. No framework, no new Tailwind classes. **Item 3 is not in that PR.** The DoD states #79 has landed; it has not — `parseRetentionDays`, `RetentionLabel`, `RetainsForever` and `RetentionForeverDays` exist only on the open https://git.eeqj.de/sneak/webhooker/pulls/96. On `next` today a 0 is unreachable from the UI (create falls back to 30, edit ignores it, GORM substitutes the column default on insert), so "0 retains forever" copy would be false, and PR 96 already rewrites the same form lines. `sources_new.html` and `source_edit.html` are left byte-identical to `next` so that rebase stays clean. Verified: `make check` exit 0 with `0 issues.` from the linter, and `script/cibuild` exit 0 with the fmt-check, lint, test and build layers all executing rather than replaying from cache. Separately noted while working here: page `{{define "title"}}` blocks never render, because `parsePageTemplate` parses the page before `htmlheader.html`, whose `{{block "title"}}` then redefines it. Every tab reads just "Webhooker". Pre-existing and left alone.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: sneak/webhooker#57