fix(ux): P2 — coloured badges, collapse empty detail fields, honest notifications state - #106
Merged
Conversation
…onest notifications state Polish from the mobile UX walkthrough: - Status/select values render as the option's colour. Option metadata carries hex colours (e.g. `#10B981`), which the named-colour map couldn't resolve, so every badge fell back to flat grey. `StatusBadge` now renders a hex option as an inline tint, and list rows show the option badge (via the exported `OptionBadge`) instead of plain "Status: Completed" text. - The detail auto-layout collapses empty-valued fields instead of rendering a column of "—". Curated views still show every field the author listed. - The notifications screen distinguishes a failed fetch (service unavailable → retry) from a genuinely empty inbox, so a 404 no longer masquerades as "you're all caught up". New i18n keys in en/zh/ar. Deliberately deferred: a web content max-width cap. Web is the secondary target (the app runs full-width-constrained on device), and a good global width cap is a broad layout change not worth the regression risk here. Verified in the browser: list + detail badges are coloured (Completed green, High amber, Urgent red…), empty detail fields are gone, notifications shows the unavailable state. +6 tests, 1281 pass, lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Final P2 polish from the mobile UX walkthrough.
Coloured status badges (list + detail)
Object metadata carries hex option colours (
#10B981,#3B82F6…), which the named-colour Tailwind map couldn't resolve — so every status/priority badge rendered flat grey.StatusBadgenow renders a hex option as an inline tint (light background + the colour as text). List rows render the option badge (via a new exportedOptionBadge) instead of plainStatus: Completedtext.Result: Completed = green, In Progress = blue, High = amber, Urgent = red, Low = light-blue — in both the list and the detail view.
Collapse empty fields in the detail auto-layout
The no-curated-view fallback rendered a column of
—for every empty field (Description, Due Date, Tags…). It now collapses empty-valued fields. Curated views are untouched — they still show every field the author listed, empty or not.Honest notifications state
The screen showed the cheerful "You're all caught up" even when the fetch failed (e.g. the notifications service isn't mounted → 404). It now distinguishes unavailable (with a retry) from a genuinely empty inbox. New
notifications.unavailable*keys in en/zh/ar.Deliberately deferred
A web content max-width cap. Web is the secondary target (on device the app is already width-constrained), and a good global width cap is a broad layout change whose regression risk isn't justified here. Easy to add later if web becomes a priority.
Verification
Browser (zh, mobile width): list + detail badges coloured, empty detail fields gone, notifications shows
通知不可用 … 重试. +6 tests, 1281 pass, typecheck + lint clean.🤖 Generated with Claude Code