web-ui: restructure Home + Settings onto the Oatmeal composition (#290) - #318
web-ui: restructure Home + Settings onto the Oatmeal composition (#290)#318bogdanpydev wants to merge 1 commit into
Conversation
Bring the signed-in Home and Settings surfaces onto the theme's composition, finishing the rollout #261 deferred. Two signature moves applied uniformly: section titles move from the tiny uppercase-muted <h2> labels to the shared Instrument Serif <Heading> display idiom, and every olive-50 (bg-card) panel moves from the compact rounded-xl px-4 py-3 to the calmer rounded-2xl p-5 (the auth cards' radius + cloud spacing). Activity, the one section without an in-page heading, gains a serif "Activity" title. Pure composition pass: no behavior, IA, or routing change; no literal bg-olive-*, no raw hex. Home launcher grids stay open (the tiles are already olive-50 cards); the pill Button/input element-idiom is deferred as a follow-up. make check-web green. Closes #290
bogdanpydev
changed the title
Confidence Score: 4/5The changed UI is close to mergeable after fixing the app detail heading level.
web-ui/src/views/settings/InstalledAppDetailSection.vue; web-ui/src/views/settings/AccountSection.vue Important Files Changed
Reviews (1): Last reviewed commit: "feat(web-ui): restructure Home + Setting..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
|
||
| <div class="min-w-0 flex-1"> | ||
| <h1 class="text-xl font-semibold">{{ app.name }}</h1> | ||
| <Heading :level="2">{{ app.name }}</Heading> |
There was a problem hiding this comment.
Changing the app name from the old h1 to Heading with level="2" means /settings/apps/:id no longer renders a page-level h1; the signed-in settings shell does not add one above it. Screen-reader heading navigation and accessibility checks that expect each routed page to expose a top-level heading can now miss the installed app detail title.
| <Heading :level="2">{{ app.name }}</Heading> | |
| <Heading :level="1">{{ app.name }}</Heading> |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| <h2 class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Account</h2> | ||
| <div class="space-y-3 rounded-xl border border-border bg-card px-4 py-3"> | ||
| <section class="space-y-4"> | ||
| <Heading :level="2">Account</Heading> |
There was a problem hiding this comment.
The wider p-5 card leaves less space for the non-wrapping account row below it. On a narrow phone, a long username plus the fixed Change password button can overflow the card because that row uses flex items-center justify-between without wrapping or truncation, leaving the password action outside the visible panel.
1 participant
Summary
Brings the signed-in Home and Settings surfaces onto the Oatmeal composition, finishing the rollout #261 deferred (which delivered the shared
Heading/Buttonidioms and applied them to chrome + auth). Two signature moves, applied uniformly:font-displaysection headings — every section title moves from the tiny uppercase-muted<h2>label (text-xs … uppercase … text-muted-foreground) to the sharedcomponents/ui/Heading.vue(Instrument Serif). Top-level titles use:level="2"; the app-detail page's per-app sub-sections (Outgoing email / Setup secrets / Settings) use:level="3"; the app-detail page title moves off its bespoke<h1>onto<Heading :level="2">.bg-card(olive-50); they move from the compactrounded-xl … px-4 py-3to the calmerrounded-2xl … p-5(the auth cards' radius + generous padding). Applied across every card/row/table container and the Settings desktop nav panel.Activity — the one section with no in-page heading — gains a serif "Activity" title on its header row.
This is a pure composition pass: no behavior, data flow, routing, or IA change; no literal
bg-olive-*and no raw hex introduced (colors keep flowing from the semantic tokens).Scope
Touched:
web-ui/src/views/HomeView.vueand everyweb-ui/src/views/settings/*section. Docs: a progress entry (docs/progress/oatmeal-home-settings-composition.md) + index row.Two judgement calls (worth an eyeball)
bg-card(olive-50), so nesting them inside an olive-50 panel washes out their contrast, and boxing the apps fightsDASHBOARD.md's calm-launcher north star. On the launcher the tiles are the cards; the composition change for Home is the serif headings + tiles-as-cards, while Settings carries the explicit card-panel composition.Button/input element-idiom is deferred. web-ui: restructure Home + Settings to the Oatmeal composition #290's "Do" list scopes to card-panel composition +font-displayheadings + structural utilities; the pill button is coupled to a pill-input idiom (there's no sharedInputcomponent yet) that's out of that scope. Converting only buttons would leave pill buttons beside square inputs in every form — a worse half-conversion. Left as a documented follow-up (see the progress entry's Known gaps).No spec change
WEB_UI.md# Styling already owns the Oatmeal theme this realizes;DASHBOARD.md/SETTINGS.mddescribe IA/behavior (unchanged) and pin no heading style — matching #261's "no visual-language rule changed" precedent.Verification
make check-web(typecheck + production build) — green. A live full-stack visual pass wasn't run in the dev environment (the signed-in surfaces sit behind the authenticated SPA and no headless-browser lib is available); the change is presentational and built on the already-provenHeadingidiom + semantic tokens.Closes #290