Ignite v3 Plan 3 — the Focus surface - #8
Merged
Conversation
…nd label wrap - #main was missing min-width: 0, so its automatic min-content size forced the layout wider than the viewport between 768px and ~911px on every route - .task__time-label wrapped onto two lines on the Tomorrow tab, breaking row-height alignment with the other tabs - .focus-tab__count used --text-faint, which fails WCAG AA (4.21:1) in light theme; switched to --text-muted (6.70:1 light / 10.11:1 dark) and dropped the now-redundant active-state override - the tab strip's own overflow-x: auto clipped the keyboard focus ring off the first/last tab; outline-offset: -2px keeps it inside
… Today-to-Focus rename - an empty tabpanel dropped focus to <body> on the 60s tick or any model notify because the pre-rewrite focus capture only matched .focus-tab, not .focus-panel; now captures and restores both - a live rename could be stranded off-tab when a task's bucket changed at the day boundary, silently dropping the typed text; selectTab and destroy() now fall back to pendingRenameTaskValue when the row (and its input) is already gone from the DOM - deleteAreaCascade and the area-not-found route still redirected to #today; both now use #focus, matching every other redirect in the branch - stale doc comments in focus.js and task.js brought up to date with the callbacks and options the views actually use
Spec §7 put the area badge and time column at 768px, but at that width the sidebar already claims 240px, so reserving 8rem + 6rem left the task title 6-9 characters. Malin chose 1024px, her documented desktop breakpoint: tablet now keeps the phone row, desktop gets the columns. Verified at 1000, 1023, 1024 and 1440px: badge hidden through 1023, block with a 128px basis at 1024, time column 96px and right-aligned, no horizontal scroll at any width.
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.
Replaces the Today view with Focus, the app's landing surface: a tab strip over Today, Tomorrow, Starred and a Focus notepad, headed by the day and the day's shape, with a "Next" hero pulled from the Today bucket.
What this closes
Breakpoint change
The spec put the badge and time columns at 768px. At that width the sidebar already claims 240px, so reserving
8rem + 6remleft the task title 6–9 characters. They now appear at 1024px — tablet keeps the phone row, desktop gets the columns. Verified at 1000, 1023, 1024 and 1440px, no horizontal scroll at any width.Verification
biome check .clean over 60 files, zero suppressionsnpm run buildclean, 68.3 kB JS / 41.4 kB CSSKnown follow-ups, not in this PR
docs/desktop_preview.pngstill shows the pre-Focus Today view; its README alt text already describes the new surface.