feat(ui): tokenize message actor badges (webhook/email/bridge) (LC-225) #269
Loading…
Reference in a new issue
No description provided.
Delete branch "feat/lc-225-actor-badge-tokenize"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Three message-row actor badges (webhook / email-ingress / protocol-bridge) still rendered hardcoded
bg-emerald-100,bg-sky-100,bg-violet-100pairs after LC-189-era polish swept other surfaces. None themed. In dark + hc-dark all three stayed bright pale colors against the near-black surface. LC-198 wrap-up deferred them and LC-224 review reverted a one-site swap to keep three-badge symmetry until they could be tokenized together.Three soft-surface families added per theme (per-kind hue preserved):
--webhook-surface/-content--content--email-surface/-content--content--bridge-surface/-content--contentDark themes use the LC-222 contrast-fix posture (flip content to
--contentsince saturated-700text on-950surface fails WCAG AA).Tailwind:
bg-{webhook,email,bridge}-surface+text-{webhook,email,bridge}-content.Sweep: 3 sites in
server/templates/room/message.html(L26 webhook, L35 email, L45 bridge).Fixture regen
LC-77 pin fixtures regenerated via direct docker invocation (
FIXTURE_WRITE=1;dev/cargowrapper drops env vars). All 4 fixtures updated andcargo test --test lc77_webhook_render_fixturegreen.Test plan
just build-cssemits all 6 new utility rules.cargo check -p lets-chat-serverclean.cargo test --test lc77_webhook_render_fixture4/4 pass after fixture regen.Out of scope
partials/mention_popover.htmlbroadcast#avatar (LC-224 already atbg-success-surface; broadcast mentions aren't webhooks)..lc-mdblockquote/table/code-block +.lc-quote-bardrift.Three message-row actor badges still rendered hardcoded Tailwind `*-100 text-*-700` pairs after LC-189-era polish swept other surfaces: - LC-74 webhook: `bg-emerald-100 text-emerald-700` - LC-77 email-ingress: `bg-sky-100 text-sky-700` - LC-78 protocol bridge: `bg-violet-100 text-violet-700` None themed. In dark mode all three stayed bright pale colors on near-black, in hc-dark they ignored the maximal-contrast intent of the theme. LC-198 wrap-up listed the actor-badges set as deferred; LC-224 review reverted a one-site swap of just the webhook badge because tokenizing one of three breaks row-level symmetry on threads that mix actor kinds. Mirror the LC-215 / LC-222 / LC-224 sweep shape. Three soft-surface families with per-kind hue preserved so a viewer still sees "this is from a webhook" vs "from a bridge" at a glance, but every shade comes from a per-theme token so dark mode dims them as a SET. Token values per theme (in `server/assets/main.css`): | | Light | Dark | hc-light | hc-dark | |-----------------------|----------------------|-----------------------|----------------------|----------------------| | `--webhook-surface` | `#d1fae5` emerald-100| `#022c1b` dim emerald | `#d1fae5` emerald-100| `#0a0a0a` near-black | | `--webhook-content` | `#047857` emerald-700| `var(--content)` | `#047857` emerald-700| `#34d399` emerald-400| | `--email-surface` | `#e0f2fe` sky-100 | `#082f49` sky-950 | `#e0f2fe` sky-100 | `#0a0a0a` | | `--email-content` | `#0369a1` sky-700 | `var(--content)` | `#0369a1` sky-700 | `#7dd3fc` sky-300 | | `--bridge-surface` | `#ede9fe` violet-100 | `#2e1065` violet-950 | `#ede9fe` violet-100 | `#0a0a0a` | | `--bridge-content` | `#6d28d9` violet-700 | `var(--content)` | `#6d28d9` violet-700 | `#c4b5fd` violet-300 | Dark themes use the LC-222 contrast-fix posture: flip content to `var(--content)` so text reads on the dim per-hue surface (saturated emerald-700 / sky-700 / violet-700 on green-950 / sky-950 / violet-950 would all fail WCAG AA — same contrast trap LC-222 caught in dark accent-surface). hc-light keeps the bright surfaces with the darker text for AA contrast. hc-dark inverts: near-black surface with bright per-kind text (emerald-400 / sky-300 / violet-300 give ~9:1 contrast). Tailwind utilities exposed via `server/tailwind.config.js`: `bg-webhook-surface`, `text-webhook-content`, and sibling pairs for email + bridge. Sweep in `server/templates/room/message.html`: - L26 webhook: `bg-emerald-100 text-emerald-700` -> `bg-webhook-surface text-webhook-content`. - L35 email-ingress: `bg-sky-100 text-sky-700` -> `bg-email-surface text-email-content`. - L45 bridge: `bg-violet-100 text-violet-700` -> `bg-bridge-surface text-bridge-content`. LC-77 fixture pin tests regenerated via direct docker invocation with `FIXTURE_WRITE=1` (dev/cargo wrapper drops env vars). All 4 fixtures (`lc77_webhook_render_no_avatar.html`, `lc77_webhook_render_with_avatar.html`, `lc77_email_inbox_render_no_avatar.html`, `lc77_email_inbox_render_with_avatar.html`) now carry the tokenized classes and `cargo test --test lc77_webhook_render_fixture` is green. Out of scope: - `partials/mention_popover.html:17` broadcast `#` avatar — LC-224 already tokenized to `bg-success-surface`. Broadcast mentions aren't webhooks; semantic split is intentional. - LC-226 follows up the remaining `.lc-md` blockquote / table / code-block + `.lc-quote-bar` hardcoded slate. Verified: `just build-css` emits the 6 new utility rules (`.bg-{webhook,email,bridge}-surface`, `.text-{webhook,email,bridge}-content`). `cargo check -p lets-chat-server` clean. Grep AC clean: no `bg-(emerald|sky|violet)-100|text-(emerald|sky|violet)-700` remains in `server/templates/room/message.html`. #LC-225