Mockup pixel-match: amethyst palette + room Details panel #537

Merged
vas2000-work merged 16 commits from docs/lets-chat-mockup-pixel-match into main 2026-07-10 14:28:22 +02:00
Owner

Implements the safe, verifiable parts of the "completely match the mockups" overhaul. Full progress log + morning screenshot checklist: docs/superpowers/2026-07-10-overnight-progress-and-screenshot-checklist.md.

What is in this PR

Amethyst palette (LC-567) - a new additive 7th theme palette (violet); blue-harbor stays the default. Full 4-mode token set in main.css, wired through every palette enumeration (backend allow-lists, the no-flash bootstrap JS map, the cookie-sync list, settings picker, dev gallery, contrast checker). Contrast checker passes 84/84. A review pass caught two would-be-silent fallbacks (base.html + auth.rs) and fixed them.

Room Details panel (LC-568) - inline Details panel in the room right column below the thread panel (Created / Members / Notifications / Pinned / Leave room), matching the design comp. Coexists with the full-page room/info.html route. i18n en+es parity holds.

Connection-status banner (LC-570) - moved fixed-hex status colors onto the warning/danger/success tokens so the banner themes. The rest of the app was already tokenized.

Please review before merge

I added a new mutating endpoint POST /room/{id}/leave because no room-level leave control existed and the comp shows a functional "Leave room" button. It is security-reviewed and verified safe (authenticated-only, membership-gated via is_room_accessible, deletes only the caller's own membership, server-side gated to private rooms, CSRF-covered by the app's SameSite session cookie). It is new surface beyond the ticket scope - veto it if you would prefer the button link to the info page instead.

Not in this PR (deferred)

The fine chat-surface pixel pass (LC-569) is deliberately left for the screenshot loop - doing it blind would risk regressing the shipped UI. The static reference at docs/superpowers/reference/2026-07-10-mockup-reference.html encodes the target.

Verification

./dev/cargo check, the i18n_catalog test, and the contrast checker all pass. The binary compiles and boots to the pre-existing Bunyip-SSO config gate (LC-22); a full rendered boot needs the SSO env/OP. Visual screenshot verification across the four target states (blue-harbor/amethyst x light/dark) is the remaining step - see the checklist doc.

Implements the safe, verifiable parts of the "completely match the mockups" overhaul. Full progress log + morning screenshot checklist: `docs/superpowers/2026-07-10-overnight-progress-and-screenshot-checklist.md`. ## What is in this PR **Amethyst palette (LC-567)** - a new additive 7th theme palette (violet); blue-harbor stays the default. Full 4-mode token set in main.css, wired through every palette enumeration (backend allow-lists, the no-flash bootstrap JS map, the cookie-sync list, settings picker, dev gallery, contrast checker). Contrast checker passes 84/84. A review pass caught two would-be-silent fallbacks (base.html + auth.rs) and fixed them. **Room Details panel (LC-568)** - inline Details panel in the room right column below the thread panel (Created / Members / Notifications / Pinned / Leave room), matching the design comp. Coexists with the full-page room/info.html route. i18n en+es parity holds. **Connection-status banner (LC-570)** - moved fixed-hex status colors onto the warning/danger/success tokens so the banner themes. The rest of the app was already tokenized. ## Please review before merge I added a new mutating endpoint `POST /room/{id}/leave` because no room-level leave control existed and the comp shows a functional "Leave room" button. It is security-reviewed and verified safe (authenticated-only, membership-gated via is_room_accessible, deletes only the caller's own membership, server-side gated to private rooms, CSRF-covered by the app's SameSite session cookie). It is new surface beyond the ticket scope - veto it if you would prefer the button link to the info page instead. ## Not in this PR (deferred) The fine chat-surface pixel pass (LC-569) is deliberately left for the screenshot loop - doing it blind would risk regressing the shipped UI. The static reference at `docs/superpowers/reference/2026-07-10-mockup-reference.html` encodes the target. ## Verification `./dev/cargo check`, the i18n_catalog test, and the contrast checker all pass. The binary compiles and boots to the pre-existing Bunyip-SSO config gate (LC-22); a full rendered boot needs the SSO env/OP. Visual screenshot verification across the four target states (blue-harbor/amethyst x light/dark) is the remaining step - see the checklist doc.
docs(lets-chat): plan the mockup pixel-match overhaul
All checks were successful
check-secrets / Nosey parker (push) Successful in 6s
check-secrets / Kingfisher (push) Successful in 9s
check-secrets / TruffleHog (push) Successful in 11s
c54dba3707
Locks the six design comps as the target for a full visual match: a new additive amethyst violet palette (blue-harbor stays default), the missing right-column Details panel, a region-by-region chat-surface pixel pass, and an app-wide token sweep. Reference-first approach: a self-contained static HTML reproduction (all four states, using main.css token names so values port 1:1) plus the archived comps serve as the locked target and regression fixture.

Adds the design spec, the phased implementation plan, the static reference, and the renamed comps under docs/superpowers/.

#LC-566
#LC-553
#LC-567
#LC-567
#LC-567
#LC-567
#LC-567
fix(theme): render amethyst on load and tint its hc-dark accent surface
All checks were successful
check-secrets / TruffleHog (push) Successful in 8s
check-secrets / Nosey parker (push) Successful in 9s
check-secrets / Kingfisher (push) Successful in 10s
6ef017f12f
#LC-567
#LC-568
#LC-568
Rows: Created / Members / Notifications / Pinned / Leave room. The Notifications row shows the current mute_mode label and reuses the header's existing notify dropdown (room/notify_dropdown.html) by triggering its toggle button, rather than duplicating the hx-post wiring.

No existing self-serve leave-room control existed to reuse (grepped for leave-room/leave_room; only routes::enclave::post_leave, which is enclave-scoped). Added a small POST /room/{id}/leave handler mirroring that pattern, gated to room_type == "private" only: public-room access is derived from enclave membership rather than the room_members table (see db::chat::search_messages_filtered's scope_clause), so leaving would not actually revoke access there. The template only renders the Leave button for private rooms.

#LC-568
feat(room): mount Details panel in the room right column
All checks were successful
check-secrets / TruffleHog (push) Successful in 5s
check-secrets / Nosey parker (push) Successful in 5s
check-secrets / Kingfisher (push) Successful in 6s
5d832fe7e2
#LC-568
The reconnecting / failed / connected pills used fixed light-mode hex, so they stayed light in dark mode and ignored the palette. Map them onto the existing status-surface tokens so the banner recolors with theme and mode like the rest of the app.

#LC-570
docs(lets-chat): overnight progress log + morning screenshot checklist
All checks were successful
check-secrets / Kingfisher (push) Successful in 5s
check-secrets / TruffleHog (push) Successful in 6s
check-secrets / Nosey parker (push) Successful in 6s
aeea958a2d
Summarizes the mockup pixel-match work landed overnight (amethyst palette, Details panel, connection-banner tokens), the deferred pixel pass, the new leave endpoint flagged for review, and a per-state screenshot verification checklist for the morning.

#LC-567
#LC-568
#LC-570
docs(lets-chat): note SSO env requirement for local boot
All checks were successful
check-secrets / Nosey parker (push) Successful in 4s
check-secrets / TruffleHog (push) Successful in 4s
check-secrets / Kingfisher (push) Successful in 6s
check-secrets / Nosey parker (pull_request) Successful in 6s
check-secrets / TruffleHog (pull_request) Successful in 11s
check-secrets / Kingfisher (pull_request) Successful in 13s
Check / clippy + fmt + tests (pull_request) Successful in 6m26s
d2e30e675b
The dev boot needs the four LETS_CHAT_BUNYIP_SSO_* vars and a reachable OP (LC-22); recorded so the morning screenshot boot has the right prerequisites.

#LC-568
feat(dev): mock OIDC OP so dev-web-local boots without bunyip
All checks were successful
check-secrets / TruffleHog (push) Successful in 45s
check-secrets / Kingfisher (push) Successful in 46s
check-secrets / Nosey parker (push) Successful in 46s
check-secrets / Kingfisher (pull_request) Successful in 46s
check-secrets / TruffleHog (pull_request) Successful in 47s
check-secrets / Nosey parker (pull_request) Successful in 1m20s
Check / clippy + fmt + tests (pull_request) Successful in 4m37s
e6cb452fd1
Since the LC-22 SSO-only cutover the server refuses to start unless a Bunyip OP answers discovery + JWKS at boot, leaving just dev-web-local unbootable without the full bunyip dev-sso stack. Adds a stdlib mock OP, a compose overlay wiring the four SSO vars at it, and just dev-web-local-mock / -down recipes. Boots the server for unauthenticated debug routes (the theme gallery); authed pages still need the real dev-sso stack. Dev-only.

#LC-571
Merge branch 'main' into docs/lets-chat-mockup-pixel-match
All checks were successful
check-secrets / TruffleHog (push) Successful in 5s
check-secrets / Nosey parker (push) Successful in 5s
check-secrets / Kingfisher (push) Successful in 6s
check-secrets / TruffleHog (pull_request) Successful in 13s
check-secrets / Kingfisher (pull_request) Successful in 16s
check-secrets / Nosey parker (pull_request) Successful in 16s
Check / clippy + fmt + tests (pull_request) Successful in 4m4s
Create release / Create release from merged PR (pull_request) Has been skipped
133e242ed1
vas2000-work scheduled this pull request to auto merge when all checks succeed 2026-07-10 14:24:24 +02:00
vas2000-work deleted branch docs/lets-chat-mockup-pixel-match 2026-07-10 14:28:22 +02:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
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!537
No description provided.