The tab header is invisible at rest, and each tab carries its own title (#441) - #514
Merged
Conversation
…n title (#441) The design pairs an invisible header with a large title on the page; the app had the header always on and no large title anywhere. So the two ran opposite ways round — the design gains a title on scroll, the app lost an eyebrow. The header now floats over the tab rather than standing above it: at rest it draws nothing but its entries, and each tab root opens with its own large title. Scrolled past the design's 72, `HeaderChrome` fills — the page pulled over itself at 94%, blurred 16px and lifted back to its warmth, hairlined, with the short gradient fading below — and `HeaderCompactTitle` slides in carrying the title that has just gone under it. Cards regains the `Collection` heading #396 had to drop. The bar's painted half is laid beside its content and ignores the pointer: a `DecoratedBox` claims every hit inside its shape, so a bar wrapping its own contents would swallow the drag meant to scroll the page beneath it. `AppOverlay` grows the saturation the design writes beside its blur, so `blur(16px) saturate(1.3)` cannot be taken in halves. 0.18em leaves `OffTokens` for `AppTracking.chrome`: the tab label was the one component set at it until the compact eyebrow turned out to be too, and a width two things share is vocabulary rather than an exception. The `SubHeader` half of #245 is split out as #513, with the reason recorded there.
…Path's own inset Standards review: - `ScrolledProgress` carries the reduced-motion rule for a bar's fade once, where the chrome, the compact title and the reward screens' bar each stated it. `AppOverlay.at` scales the whole token, so a call site no longer takes the tint apart to fade the blur with it — which is what CLAUDE.md's overlay rule says, and it now names both renderers. - `_Paint` is a widget, so `_PaintedBar`; the compact title's builder no longer shadows its own `title`; `TabLargeTitle` takes an `AppRoute` rather than a path string, so a tab can only be named by the catalogue that defines it. Spec review: - `FloatTopbar` filled with an opaque page and no blur where the design writes it with the header's own `HEADER_FILL` and `HEADER_BLUR`. It takes `mood.headerFill` now — its own test already called that "the header fill". - The design opens Path's title at 64 where the other three tabs open at 24, and the app opened all four at 24. `TabLargeTitle` takes the room its tab opens on, and Path's 64 is registered with its reason. - The Path tally gap and the bar's two side insets say where they round and why, rather than diverging quietly.
…-at-rest # Conflicts: # docs/CHANGELOG.md
…behind them The bar floats over the tab now, so nothing lays the title and the entries out against each other. The design does not have to solve that: it freezes Learn's date to `Friday, May 8`. Measured in Fraunces at the display rung, the widest date `longDate` can make sets 350.5pt, and on a 393pt phone the entries begin 269pt into the title — so an ordinary Wednesday loses its tail behind the two buttons. Narrowing the title to clear them would make that same date wrap, which is worse. The design's own answer is the Path tab's `paddingTop: 64`, which opens the title below the entries instead of beside them, and Learn and Profile take it for the same reason: neither title is a fixed string. Cards keeps the design's 24 — `Collection` is nowhere near that wide. Registered as `tabTitleClearOfEntries` with the measurement, and pinned by a test that walks the three tabs and asserts the title starts below the entries.
…-at-rest # Conflicts: # CLAUDE.md # docs/CHANGELOG.md
This was referenced Sep 5, 2026
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.
Closes #441.
The design pairs an invisible header with a large title on the page. The app had the header always on and no large title anywhere, so the two ran opposite ways round — and every tab root was one title short.
The header floats over the tab now instead of standing above it. At rest it draws nothing but its entries, and each tab root opens with its own large title; past the design's 72 the bar fills, blurs and rules, and the compact title slides in to replace the large one that has gone under it. Cards regains the
Collectionheading #396 had to drop.The
SubHeaderhalf of #245 is split out as #513, with the reason recorded there — different seam, fifteen screens, and its own scroll-flag problem.Worth a look
DecoratedBoxclaims every hit inside its shape, so a bar wrapping its own contents swallows the drag meant to scroll the page beneath it.header_chrome_test.dartholds that down.AppOverlaygrows the saturation the design writes beside its blur, and anat(progress)that scales the whole token — so a bar fading in cannot fade the tint and snap the blur on behind it.OffTokensforAppTracking.chrome. The tab label was the one component set at it until the header's compact eyebrow turned out to be too, and a width two things share is vocabulary rather than an exception.FloatTopbarwas filling with an opaque page and no blur where the design writes it with the header's own two constants — fixed here, since the token now exists. Its own test already called that value "the header fill".Friday, May 8. Measured in Fraunces, the widest datelongDatecan make sets 350.5pt where the entries begin 269pt in. Narrowing the title would make that date wrap, so Learn and Profile take Path's ownpaddingTop: 64instead; Cards keeps the design's 24. Registered inOffTokenswith the measurement, and pinned by a test.Checks
dart format,flutter analyze, the metrics gate and the full suite (2511) all clean on the merge withmain.