Visual polish: dark mode, linkification, empty states, avatar palette #14

New issue

Open

opened 2026-05-14 23:17:17 +02:00 by arne · 0 comments

arne commented

2026-05-14 23:17:17 +02:00

Owner

Parent

What to build

Final surface polish across the app. URL linkification in posta.text/v1 bodies (regex match https?://… → <a target="_blank" rel="noopener">). Status indicator rules finalized (only on last outbound in cluster, with full state matrix: pending/sending → clock, delivered → check, failed-permanent → red triangle, failed-pending-user → orange triangle). Empty states: "No conversations yet" (sidebar), "Start a conversation" hint (main pane on first login), "Say hi" (empty thread on fresh contact). Dark mode lifted from posta/web's @media (prefers-color-scheme: dark) rules. Avatar fallback color palette finalized (deterministic hash of peer URL → forest/sky/terracotta/gold/moss accent).

Acceptance criteria

Plain-text bodies have URLs auto-linked (regex match on https?://…); only the URL is anchor-wrapped, surrounding text unchanged
Auto-linked URLs open in a new tab with rel="noopener"
Status indicator matrix renders per the rule set; only on last outbound in a 2-minute cluster
First-login user with zero contacts sees a clear empty-state hint and a "+" CTA
Opening a brand-new empty thread shows a "Say hi" hint above the composer
OS-driven dark mode works (no in-app toggle): tokens flip on prefers-color-scheme: dark
Avatar fallback colors are deterministic per peer URL and drawn from the lifted accent tokens
All visual states render correctly in both light and dark modes
Failed status indicators have hover tooltips with the underlying lastErrorCode when available

Blocked by

## Parent #2 ## What to build Final surface polish across the app. URL linkification in `posta.text/v1` bodies (regex match `https?://…` → `<a target="_blank" rel="noopener">`). Status indicator rules finalized (only on last outbound in cluster, with full state matrix: pending/sending → clock, delivered → check, failed-permanent → red triangle, failed-pending-user → orange triangle). Empty states: "No conversations yet" (sidebar), "Start a conversation" hint (main pane on first login), "Say hi" (empty thread on fresh contact). Dark mode lifted from `posta/web`'s `@media (prefers-color-scheme: dark)` rules. Avatar fallback color palette finalized (deterministic hash of peer URL → forest/sky/terracotta/gold/moss accent). ## Acceptance criteria - [ ] Plain-text bodies have URLs auto-linked (regex match on `https?://…`); only the URL is anchor-wrapped, surrounding text unchanged - [ ] Auto-linked URLs open in a new tab with `rel="noopener"` - [ ] Status indicator matrix renders per the rule set; only on last outbound in a 2-minute cluster - [ ] First-login user with zero contacts sees a clear empty-state hint and a "+" CTA - [ ] Opening a brand-new empty thread shows a "Say hi" hint above the composer - [ ] OS-driven dark mode works (no in-app toggle): tokens flip on `prefers-color-scheme: dark` - [ ] Avatar fallback colors are deterministic per peer URL and drawn from the lifted accent tokens - [ ] All visual states render correctly in both light and dark modes - [ ] Failed status indicators have hover tooltips with the underlying `lastErrorCode` when available ## Blocked by - #12 - #13

arne added the

needs-triage

label

2026-05-14 23:17:17 +02:00