refactor(desktop): componentize the settings page container + residual sweep - #1991
Merged
Merged
Conversation
…l sweep Settings pages reached for the bare `.settingsStructuredPage` class as their root container — page-layout CSS referenced directly from 14 call sites, plus three sibling page-root grids (About / Usage / the orphaned voice hero vocabulary) carrying their own rhythms. - settings-section.tsx gains `SettingsPage` (div/section + aria-label): the kit now owns the page root. The class becomes `.settingsPageStack` — NOT `.settingsPage`, which would have collided with the pre-existing `.settingsModal.settingsPage` fullscreen-shell modifier — and keeps the #1362 grid `minmax(0, 1fr)` column on purpose: a flex stack's `min-width: auto` floor would let a wide <pre> or long mono path poke past the content column again. - All 14 containers move onto <SettingsPage>; the local section router in settings-surface.tsx is renamed SettingsPageBody to free the name. Page rhythm unifies at 32px (daily-review was 24, permission 20, About 16). - About's second container (`.settingsAboutPage`) retires; the Health footnote moves off `p.settingsHealthFootnote` onto the same supporting-Text treatment Permission Center already uses. - The orphaned voice hero vocabulary (`.settingsFeatureStatusPage` / Hero / Icon / HeroHeading — no consumers since the voice rebuild) is deleted; `.settingsFeatureStatusList` stays (voice 边界 list). - Usage CSS (~150 lines) moves out of bot.css into its own usage.css — a pure move; the #1879 height pins and 900px media query travel intact. - The daily-review Storybook bounds contract re-anchors from the deleted `.settingsFormPage` hook to `.settingsPageStack`; seven inert classNames with no CSS rule (`settingsHelpText`, `settingsHelpInlineTime` x5, `settingsBotMetaTime` x2) are dropped. Verified: desktop typecheck, check-dead-css, check-a11y/copy/console, product Storybook smoke (71 catalog renders x 3 viewports).
jackwener
added a commit
that referenced
this pull request
Aug 3, 2026
… seam (#1997) Adversarial review of #1984/#1991/#1993 (two independent lenses, findings verified before fixing) plus one user-reported shell defect. Shell: - The content column is a rounded floating plate flush to the sidebar; the theme's full-height sidenav hairline ran on the same seam and read as a doubled border beside the plate's corner radius. Dropped in the expanded state too (collapsed already did) — separation is tonal, per DESIGN.md's One Working Plane rule. Regressions from #1993, confirmed and fixed: - bot-chat-detail lost all inter-section rhythm: its wrapper pair kept a gap on a display:block section (inert) and a class with no CSS rule. The page is a SettingsPage now, like the overview next door; the back button keeps only its optical inline outdent. - bot.css had the file-header comment replace-all'd into the middle of `.settingsBotDetailHeader > .settingsBotLogo`. Parsed by luck; removed. - MetadataList destructures a closed prop list, so the runtime grid's aria-label was silently dropped — the group name rides a real role="group" wrapper now. - The kit section header now wraps: at the 480px window floor a multi-button action cluster drops under the title instead of crushing it (replaces the deleted bot-runtime media query). - Overview rows go flush-inline (the 10px inset was old card-grid residue); the WeChat QR dialog gets its height floor back (224px) so state swaps stop resizing the modal. Convergence completions the review surfaced: - claude-subscription-card drops its SectionHeader + full-width Card and repeated title: it renders under ProvidersPanel's RouteHeader like its sibling OAuth panels, as a bare VStack with the shared StatusDot + text status idiom. - ProvidersPanel connection status Badge -> StatusDot + text; health's hand-rolled five-arm dot mapping -> the shared statusDotVariant. - subagent-presets panel: Card-wrapped .settingsRows + a lead Item posing as a header -> SettingsSection; settings-surface fallback drops its Card wrap. - About hero pills referenced two classNames with no CSS rule — they are the Badges about.css's comment always described. - `.settingsPage .settingsPageStack` (rename slip) -> nested `.settingsPageStack .settingsPageStack`; quota labels round. Verified: typecheck, check-dead-css, check-a11y/copy/console, format:check, product Storybook smoke (71 renders x 3 viewports).
ARE404
added a commit
to ARE404/maka-agent
that referenced
this pull request
Aug 6, 2026
The 外观 page carried four leftovers from the moves that reshaped it — identity going to 通用 (P2-13), the Astryx open-group rebuild (apache#1972), and the settings-page kit (apache#1991). - Page root: `AppearanceSettingsPage` wrapped a `ThemeSettingsPage` that opened a `SettingsPage` of its own, so the page grid nested inside itself (two `.settingsPageStack` in the DOM). The page IS the theme page, as its own comment said, so it is now one component with one root. Same defect on 通用, where the identity block was a `*Page` rendered inside another page: it is a section of someone else's page and is now named, filed, and shaped as one (`personalization-settings-section.tsx`). - Grouping: the 14 option tiles were loose in the accessibility tree — the sections were unnamed landmarks and the visible 编辑器主题 / 产品色调 labels had no programmatic relationship to the grids they head. Sections now carry `titleId`, and each grid is a `role="group"` named by its label. - Copy: the nav description still advertised 界面语言 on 外观, a page that has not had it since P2-13; 通用, which does, never mentioned it. Both descriptions now say what their page holds. - Dead copy: `sections.paletteHelp` was defined in both locales and read by nobody, while the palette section reached into `appearance.persistenceHelp` for its lede. The palette section now takes its lede from `sections`, the same namespace the theme section above it uses, and the unread key is gone. `AppearanceSettingsPage` also stops taking a `settings` prop it only passed down one level to a component that never read it. Contract: `astryx-component-behavior` pins one page stack, the four labelledby anchors, three named groups, no 界面语言 on 外观, and that the identity block opens no page stack of its own. Verified: desktop typecheck; format:check; console/a11y/copy checks; dead-css; 1754 desktop tests; and both pages re-rendered in a real Electron fixture window (外观 unchanged apart from the two copy lines, 通用 pixel identical).
ARE404
added a commit
to ARE404/maka-agent
that referenced
this pull request
Aug 7, 2026
The 外观 page carried four leftovers from the moves that reshaped it — identity going to 通用 (P2-13), the Astryx open-group rebuild (apache#1972), and the settings-page kit (apache#1991). - Page root: `AppearanceSettingsPage` wrapped a `ThemeSettingsPage` that opened a `SettingsPage` of its own, so the page grid nested inside itself (two `.settingsPageStack` in the DOM). The page IS the theme page, as its own comment said, so it is now one component with one root. Same defect on 通用, where the identity block was a `*Page` rendered inside another page: it is a section of someone else's page and is now named, filed, and shaped as one (`personalization-settings-section.tsx`). - Grouping: the 14 option tiles were loose in the accessibility tree — the sections were unnamed landmarks and the visible 编辑器主题 / 产品色调 labels had no programmatic relationship to the grids they head. Sections now carry `titleId`, and each grid is a `role="group"` named by its label. - Copy: the nav description still advertised 界面语言 on 外观, a page that has not had it since P2-13; 通用, which does, never mentioned it. Both descriptions now say what their page holds. - Dead copy: `sections.paletteHelp` was defined in both locales and read by nobody, while the palette section reached into `appearance.persistenceHelp` for its lede. The palette section now takes its lede from `sections`, the same namespace the theme section above it uses, and the unread key is gone. `AppearanceSettingsPage` also stops taking a `settings` prop it only passed down one level to a component that never read it. Contract: `astryx-component-behavior` pins one page stack, the four labelledby anchors, three named groups, no 界面语言 on 外观, and that the identity block opens no page stack of its own. Verified: desktop typecheck; format:check; console/a11y/copy checks; dead-css; 1754 desktop tests; and both pages re-rendered in a real Electron fixture window (外观 unchanged apart from the two copy lines, 通用 pixel identical).
jackwener
pushed a commit
to ARE404/maka-agent
that referenced
this pull request
Aug 7, 2026
The 外观 page carried four leftovers from the moves that reshaped it — identity going to 通用 (P2-13), the Astryx open-group rebuild (apache#1972), and the settings-page kit (apache#1991). - Page root: `AppearanceSettingsPage` wrapped a `ThemeSettingsPage` that opened a `SettingsPage` of its own, so the page grid nested inside itself (two `.settingsPageStack` in the DOM). The page IS the theme page, as its own comment said, so it is now one component with one root. Same defect on 通用, where the identity block was a `*Page` rendered inside another page: it is a section of someone else's page and is now named, filed, and shaped as one (`personalization-settings-section.tsx`). - Grouping: the 14 option tiles were loose in the accessibility tree — the sections were unnamed landmarks and the visible 编辑器主题 / 产品色调 labels had no programmatic relationship to the grids they head. Sections now carry `titleId`, and each grid is a `role="group"` named by its label. - Copy: the nav description still advertised 界面语言 on 外观, a page that has not had it since P2-13; 通用, which does, never mentioned it. Both descriptions now say what their page holds. - Dead copy: `sections.paletteHelp` was defined in both locales and read by nobody, while the palette section reached into `appearance.persistenceHelp` for its lede. The palette section now takes its lede from `sections`, the same namespace the theme section above it uses, and the unread key is gone. `AppearanceSettingsPage` also stops taking a `settings` prop it only passed down one level to a component that never read it. Contract: `astryx-component-behavior` pins one page stack, the four labelledby anchors, three named groups, no 界面语言 on 外观, and that the identity block opens no page stack of its own. Verified: desktop typecheck; format:check; console/a11y/copy checks; dead-css; 1754 desktop tests; and both pages re-rendered in a real Electron fixture window (外观 unchanged apart from the two copy lines, 通用 pixel identical).
jackwener
pushed a commit
that referenced
this pull request
Aug 7, 2026
The 外观 page carried four leftovers from the moves that reshaped it — identity going to 通用 (P2-13), the Astryx open-group rebuild (#1972), and the settings-page kit (#1991). - Page root: `AppearanceSettingsPage` wrapped a `ThemeSettingsPage` that opened a `SettingsPage` of its own, so the page grid nested inside itself (two `.settingsPageStack` in the DOM). The page IS the theme page, as its own comment said, so it is now one component with one root. Same defect on 通用, where the identity block was a `*Page` rendered inside another page: it is a section of someone else's page and is now named, filed, and shaped as one (`personalization-settings-section.tsx`). - Grouping: the 14 option tiles were loose in the accessibility tree — the sections were unnamed landmarks and the visible 编辑器主题 / 产品色调 labels had no programmatic relationship to the grids they head. Sections now carry `titleId`, and each grid is a `role="group"` named by its label. - Copy: the nav description still advertised 界面语言 on 外观, a page that has not had it since P2-13; 通用, which does, never mentioned it. Both descriptions now say what their page holds. - Dead copy: `sections.paletteHelp` was defined in both locales and read by nobody, while the palette section reached into `appearance.persistenceHelp` for its lede. The palette section now takes its lede from `sections`, the same namespace the theme section above it uses, and the unread key is gone. `AppearanceSettingsPage` also stops taking a `settings` prop it only passed down one level to a component that never read it. Contract: `astryx-component-behavior` pins one page stack, the four labelledby anchors, three named groups, no 界面语言 on 外观, and that the identity block opens no page stack of its own. Verified: desktop typecheck; format:check; console/a11y/copy checks; dead-css; 1754 desktop tests; and both pages re-rendered in a real Electron fixture window (外观 unchanged apart from the two copy lines, 通用 pixel identical).
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.
Follow-up to #1972/#1984, per the review feedback that pages (记忆页 included) should not keep reaching for the bare
settingsStructuredPageclass.Page container → kit component
settings-section.tsxgainsSettingsPage(as: div|section,aria-label): the kit now owns the page root; pages never reference page-layout CSS directly..settingsPageStack— deliberately not.settingsPage, which would collide with the pre-existing.settingsModal.settingsPagefullscreen-shell modifier (caught in re-audit before shipping).minmax(0, 1fr)column on purpose — a flexVStackstack would reintroduce themin-width: automin-content floor for wide<pre>/long mono paths. Documented in the component JSDoc.settings-surface.tsx, whose local router is renamedSettingsPageBodyto free the name, and the provider story). Page rhythm unifies at 32px (daily-review was 24, permission 20, About 16).Residual sweep (from the post-#1972 re-audit)
.settingsAboutPage(16px rhythm) retired →SettingsPage.p.settingsHealthFootnotefloated outside every section → same supporting-Texttreatment Permission Center uses..settingsFeatureStatusPage/Hero/Icon/HeroHeading(no consumers since the voice rebuild;check-dead-cssmissed them because the names survived in comments)..settingsFeatureStatusListstays (voice 边界 list).usage.css(pure move — the fix(ui): pin the box height of single-line chips so leading cannot move them #1879 height pins and 900px media query travel intact)..settingsFormPagehook → now.settingsPageStack.settingsHelpText,settingsHelpInlineTime×5,settingsBotMetaTime×2 — no CSS rule anywhere).Verification
typecheck ✅ · check-dead-css ✅ · check-a11y/copy/console ✅ · product Storybook smoke 71 renders × 3 viewports ✅ (re-run after rebasing over #1929, which needed the new
mermaiddep installed)Net: 23 files, +105/−289.
Next PR: the bot-chat cluster (last page group on the pre-#1972 dialect) + remaining hand-tinted boxes in memory/web-search.