tracking: full-app UI audit fixes — hit areas, button dedup, empty states, modal a11y, tokens (9 issues)

[ajianaz]

Tracking issue for the full-app UI audit (source-only review of all 18 views + App.svelte + ui primitives, using the make-interfaces-feel-better + mobile-ux-psychology skill sets).

Verdict from audit: Needs changes — 1 HIGH (hit area), rest MEDIUM/LOW systemic.

Priority order (impact × effort)

🔴 High priority

• fix(ui): btn-sm hit area below minimum (~21px) — bump to 32px+ / 40px for primary per-item actions #246 — btn-sm hit area below minimum (~21px → 32px+, 40px for primary per-item actions)
• refactor(ui): remove local .btn duplicates in Lifecycle/ContextPreview/Consolidate — use ui/Button (restores :active press feedback, kills transition:all) #247 — Remove local .btn duplicates (Lifecycle/ContextPreview/Consolidate) → use ui/Button; restores :active press feedback + kills transition: all

🟡 Medium priority

• fix(ui): replace emoji UI controls with lucide icons (tri-state checkbox, ⚙ header, ✕ button) #249 — Emoji UI controls → lucide icons (NamespaceFilter tri-state ☑☐⊟, SettingsModal ⚙, ToolsView ✕)
• fix(ui): dead-end empty states — add CTA/context in GraphView, MemoryList no-match, RoomsView tabs, Lifecycle recycle bin #250 — Dead-end empty states → add CTA/context (GraphView, MemoryList no-match, RoomsView tabs, Lifecycle recycle bin)
• fix(a11y): modal accessibility — aria-modal + focus trap; consolidate on ui/Modal (destructive modals first) #251 — Modal a11y: aria-modal + focus trap, consolidate on ui/Modal — destructive modals first (Consolidate, Lifecycle)
• fix(a11y): Svelte transition:* directives bypass prefers-reduced-motion (8 sites) #252 — Svelte transition:* bypasses prefers-reduced-motion (8 directive sites)

🟢 Low priority / mechanical

• chore(ui): tokenize 16 off-token border-radius values (3px/10px/12px/999px → --radius tokens) #248 — Tokenize 16 off-token border-radius values (separate PR, pure CSS)
• polish(ui): tabular-nums for dynamic numbers + text-wrap balance/pretty app-wide #253 — tabular-nums for dynamic numbers + text-wrap balance/pretty (one app.css addition)
• chore(ui): ToolsView uses wrong token vocabulary (--color-* + hardcoded fallbacks) #254 — ToolsView wrong token vocabulary (latent — view hidden from sidebar)

Notes for implementation

• fix(ui): btn-sm hit area below minimum (~21px) — bump to 32px+ / 40px for primary per-item actions #246 and refactor(ui): remove local .btn duplicates in Lifecycle/ContextPreview/Consolidate — use ui/Button (restores :active press feedback, kills transition:all) #247 are coupled — do refactor(ui): remove local .btn duplicates in Lifecycle/ContextPreview/Consolidate — use ui/Button (restores :active press feedback, kills transition:all) #247 first (local .btn removal), then fix(ui): btn-sm hit area below minimum (~21px) — bump to 32px+ / 40px for primary per-item actions #246 sizing lands once in ui/Button.svelte
• chore(ui): tokenize 16 off-token border-radius values (3px/10px/12px/999px → --radius tokens) #248, polish(ui): tabular-nums for dynamic numbers + text-wrap balance/pretty app-wide #253, chore(ui): ToolsView uses wrong token vocabulary (--color-* + hardcoded fallbacks) #254 are mechanical sweeps — good first issues
• fix(a11y): modal accessibility — aria-modal + focus trap; consolidate on ui/Modal (destructive modals first) #251 is the largest refactor (modal migration); can be split: (a) harden ui/Modal, (b) migrate Consolidate+Lifecycle, (c) migrate rest
• Already good (keep): Sidebar active state (4 visual changes), RoomsView empty state, transparency previews in destructive modals, reduced-motion CSS global

Audit report: full findings table in PR #245 review discussion (session 2026-08-19).