psa-systems/lets-chat
Watch
9
0
Fork
You've already forked lets-chat
 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

Migrate hand-rolled callout boxes to the .alert component (redesign follow-up) #534

Merged
longjacksonle merged 1 commit from refactor/alert-component-migration into main 2026-07-09 22:23:04 +02:00
Conversation 0 Commits 1 Files changed 19 +41 -41
longjacksonle commented 2026-07-09 22:14:07 +02:00
Owner
Copy link

Follow-up flagged in LC-565: replace the hand-rolled danger / success / warning callout boxes with the shared .alert component (LC-555), so callout chrome lives in one place and themes consistently.

Converted (28 boxes, 19 files)

Every simple single-message callout across admin (bridges, bots, branding, slash-commands, link-filter, outgoing-webhooks, backup-restore, bridge-avatars, settings, anti-spam), settings (page, api-tokens), enclave (branding, settings, discover, page), and the room utility pages (feeds, webhooks, email-inboxes) now reads .alert alert-danger|success|warning instead of an ad-hoc rounded-md border border-X-border bg-X-surface px-3 py-2 text-sm ... box.

The flex nuance

.alert is flex items-start gap-2.5. A single text run is one anonymous flex item (fine), but a body mixing inline <strong> / <code> with text would split into separate gapped flex items and break the sentence. So those bodies are wrapped in a single <span> to stay one flex item - the same "one message block" contract the component already expects after an icon.

Deliberately left hand-rolled

  • Multi-element success panels - the space-y-1 token-display panels (new webhook/bot/bridge secret, created feed/API-token URL) stack a <p> + a block <code>; under .alert's flex they'd go horizontal.
  • OOB retention-preview panel (#retention-preview, space-y-2, swapped live).
  • Two compact inline error notes (px-2 py-1.5 text-xs) inside the ingress / retention stats panels - intentionally quieter and smaller than a top-level alert.
  • Non-callout badges / chips / icon circles (ack bar, member-trust chip, error-page icon).

Scope / safety

Pure template class changes (plus <span> wraps). No id / handler / hx-swap-oob target touched. Built CSS regenerates - the .alert* classes are now emitted since templates reference them (previously only the dev theme gallery + login/welcome did).

Verify

  • just build-css -> clean.
  • dev/cargo test --test routes_admin_bridges -> 10/10
  • dev/cargo test --test routes_enclave -> 19/19
  • dev/cargo test --test lc77_webhook_render_fixture -> 4/4
  • dev/cargo test --test outgoing_webhooks -> 8/8

🤖 Generated with Claude Code

https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

Follow-up flagged in LC-565: replace the hand-rolled danger / success / warning callout boxes with the shared `.alert` component (LC-555), so callout chrome lives in one place and themes consistently. ## Converted (28 boxes, 19 files) Every simple single-message callout across **admin** (bridges, bots, branding, slash-commands, link-filter, outgoing-webhooks, backup-restore, bridge-avatars, settings, anti-spam), **settings** (page, api-tokens), **enclave** (branding, settings, discover, page), and the **room utility pages** (feeds, webhooks, email-inboxes) now reads `.alert alert-danger|success|warning` instead of an ad-hoc `rounded-md border border-X-border bg-X-surface px-3 py-2 text-sm ...` box. ## The flex nuance `.alert` is `flex items-start gap-2.5`. A single text run is one anonymous flex item (fine), but a body mixing inline `<strong>` / `<code>` with text would split into separate gapped flex items and break the sentence. So those bodies are wrapped in a single `<span>` to stay one flex item - the same "one message block" contract the component already expects after an icon. ## Deliberately left hand-rolled - **Multi-element success panels** - the `space-y-1` token-display panels (new webhook/bot/bridge secret, created feed/API-token URL) stack a `<p>` + a block `<code>`; under `.alert`'s flex they'd go horizontal. - **OOB retention-preview panel** (`#retention-preview`, `space-y-2`, swapped live). - **Two compact inline error notes** (`px-2 py-1.5 text-xs`) inside the ingress / retention stats panels - intentionally quieter and smaller than a top-level alert. - Non-callout **badges / chips / icon circles** (ack bar, member-trust chip, error-page icon). ## Scope / safety Pure template class changes (plus `<span>` wraps). No id / handler / `hx-swap-oob` target touched. Built CSS regenerates - the `.alert*` classes are now emitted since templates reference them (previously only the dev theme gallery + login/welcome did). ## Verify - `just build-css` -> clean. - `dev/cargo test --test routes_admin_bridges` -> **10/10** - `dev/cargo test --test routes_enclave` -> **19/19** - `dev/cargo test --test lc77_webhook_render_fixture` -> **4/4** - `dev/cargo test --test outgoing_webhooks` -> **8/8** 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN
refactor(ui): migrate hand-rolled callout boxes to the .alert component
All checks were successful
check-secrets / Nosey parker (push) Successful in 3s
Details
check-secrets / TruffleHog (push) Successful in 4s
Details
check-secrets / Kingfisher (push) Successful in 6s
Details
check-secrets / Kingfisher (pull_request) Successful in 4s
Details
check-secrets / TruffleHog (pull_request) Successful in 5s
Details
check-secrets / Nosey parker (pull_request) Successful in 5s
Details
Check / clippy + fmt + tests (pull_request) Successful in 3m42s
Details
Create release / Create release from merged PR (pull_request) Has been skipped
Details
1491843a7d 
Replace 28 hand-rolled danger / success / warning callout boxes across admin, settings, enclave, and the room utility pages (feeds, webhooks, email inboxes, API tokens) with the shared .alert component (LC-555). Each was an ad-hoc `rounded-md border border-X-border bg-X-surface px-3 py-2 text-sm ...` box; they now read `.alert alert-danger|success|warning`, so the callout chrome lives in one place and themes consistently.

.alert is `flex items-start gap-2.5`, so only single-message callouts are converted; boxes whose body mixes inline `<strong>` / `<code>` with text wrap that body in a single `<span>` to keep it one flex item (otherwise flex would split the sentence into gapped items). Deliberately left hand-rolled: multi-element success panels (the `space-y-1` token-display panels with a `<p>` + block `<code>`), the OOB retention-preview panel, the two compact `px-2 text-xs` inline error notes inside the ingress/retention stats panels, and non-callout badges/chips - none of which fit the single-flex-item alert contract.

Pure template class changes; no id / handler / OOB target touched. Built CSS regenerates (the .alert classes are now emitted since templates reference them). Verified: routes_admin_bridges 10/10, routes_enclave 19/19, lc77_webhook_render_fixture 4/4, outgoing_webhooks 8/8; just build-css clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN
longjacksonle deleted branch refactor/alert-component-migration 2026-07-09 22:23:04 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/lets-chat!534
No description provided.