fix(ui,styles): Plan Reminder trigger logo + 100vh→100dvh sweep (kenji round 3 #2, #6) - #250
Merged
Merged
Conversation
… dvh @kenji audit msg `232aec0f` (`#my-ai:c28a6293`). Round 3 against `af66ebb7` post-#249. **#2 — Plan Reminder select collapsed state was text-only.** PR #247 added a brand icon to each `<SelectItem>`, but `<SelectValue />` defaulted to rendering just the label string — open dropdown showed a logo, collapsed trigger showed plain text. Build a `value → { label, icon }` lookup inside `PlanReminderSelect` and pass a function-child to `SelectValue` so the picked state renders the same icon + label row the dropdown items render. **#6 — `100vh` residue in renderer CSS.** Four sites still on `100vh`: - `maka-tokens.css:760` `.maka-shell` `height` - `maka-tokens.css:1941` `.maka-modal` `max-height: calc(100vh - 80px)` - `styles.css:5028` `.maka-help-modal` `max-height: calc(100vh - 96px)` - `styles.css:13121` `.maka-onboarding-stack` `min-height: calc(100vh - 84px)` Replace each with `100dvh` so Electron browser frames with dynamic chrome (or a future mobile-style viewport) don't get half a viewport of height calculation drift. Other renderer surfaces already use `100dvh`; this brings the legacy four into line. Deferred per kenji's own scope: - **#1** feishu/dingtalk official-brand-kit sourcing — separate PR. - **#3 / #4** SettingsSelect / Segmented / ChoiceCard primitive unification — design-system refactor; no end-result delta on its own. - **#5** layout-property transitions in sidebar/tabs/accordion — kenji explicitly gated on visual smoke harness.
6 tasks
jackwener
added a commit
that referenced
this pull request
Jun 25, 2026
… one primitive + dead selector sweep (#254) @kenji styles inventory task #128 (`notes/maka-styles-css-inventory-2026-06-25-task-128.md`) flagged that `styles.css` (14066 lines) had become the product's UI database, with the Settings select and Plan Reminder select drifted into two near-identical wrappers + two CSS recipes. The Plan Reminder copy got a real bug fix (selected-trigger icon) in PR #250; the Settings copy never did. @WAWQAQ msg `dea869c5` "做久一点 / 一次多做点" + msg `61862591` authorizing this round; coordination ack `a137b9d7`. This bundles Round A (dead selector sweep) and Round B (shared Rich Select primitive + call-site migration) into one PR. **Round B — shared SettingsSelect primitive.** - New `packages/ui/src/primitives/settings-select.tsx`. Option type `[value, label, icon?]`; `width` variant (`compact` | `select` | `full`); the trigger uses `SelectValue`'s function-child so the collapsed picked state renders the same icon + label row as the popup items. - `PlanReminderSelect` in `components.tsx` collapsed to a thin `<SettingsSelect width="full" {...props} />` specialization. Both surfaces now share one source of truth. - `SettingsModal.tsx` drops its local `SettingsSelect` definition; the 5 existing call sites (Daily Review 分析模型, Proxy 代理协议, Gateway 监听地址, Bot 域名, Usage 状态筛选) automatically pick up the imported primitive — same `[value, label]` props still work. - CSS: rename `.maka-plan-select*` / `.settingsBaseSelectTrigger*` → `.settingsSelect*` family on the primitive side; drop the `.settingsBaseSelectPopup` block that no longer has a consumer. `.settingsRow[data-control-width="select"]` and `.settingsField[data-orient="horizontal"]` keep the same width contract, now keyed off `.settingsSelectTrigger`. **Round A — dead selector sweep.** Per @kenji inventory the following had zero JSX/TSX consumers; I re-verified each with `grep --include='*.tsx'`: - `.maka-nav-primary` (3 rules under `.maka-session-panel[data- collapsed="true"]`) - `.maka-skill-workbench-rail` Promoted both into `renderer-style-pruning-contract.test.ts`'s retired-hook list alongside the 12 already locked there. The contract test (`✔ does not keep CSS for retired renderer hooks`) passes after the deletion. Net: +162 / -148 lines. One source of truth for the Settings/Plan Reminder Select chrome; one less wrapper and ~24 lines of dead CSS to maintain. Round C (ChoiceCard/RadioCard) and Round D (CSS ownership split) still on @kenji's plan.
jackwener
added a commit
that referenced
this pull request
Jun 25, 2026
…onnectionStatus) (#255) * refactor(ui,settings): unify SettingsSelect + PlanReminderSelect into one primitive + dead selector sweep @kenji styles inventory task #128 (`notes/maka-styles-css-inventory-2026-06-25-task-128.md`) flagged that `styles.css` (14066 lines) had become the product's UI database, with the Settings select and Plan Reminder select drifted into two near-identical wrappers + two CSS recipes. The Plan Reminder copy got a real bug fix (selected-trigger icon) in PR #250; the Settings copy never did. @WAWQAQ msg `dea869c5` "做久一点 / 一次多做点" + msg `61862591` authorizing this round; coordination ack `a137b9d7`. This bundles Round A (dead selector sweep) and Round B (shared Rich Select primitive + call-site migration) into one PR. **Round B — shared SettingsSelect primitive.** - New `packages/ui/src/primitives/settings-select.tsx`. Option type `[value, label, icon?]`; `width` variant (`compact` | `select` | `full`); the trigger uses `SelectValue`'s function-child so the collapsed picked state renders the same icon + label row as the popup items. - `PlanReminderSelect` in `components.tsx` collapsed to a thin `<SettingsSelect width="full" {...props} />` specialization. Both surfaces now share one source of truth. - `SettingsModal.tsx` drops its local `SettingsSelect` definition; the 5 existing call sites (Daily Review 分析模型, Proxy 代理协议, Gateway 监听地址, Bot 域名, Usage 状态筛选) automatically pick up the imported primitive — same `[value, label]` props still work. - CSS: rename `.maka-plan-select*` / `.settingsBaseSelectTrigger*` → `.settingsSelect*` family on the primitive side; drop the `.settingsBaseSelectPopup` block that no longer has a consumer. `.settingsRow[data-control-width="select"]` and `.settingsField[data-orient="horizontal"]` keep the same width contract, now keyed off `.settingsSelectTrigger`. **Round A — dead selector sweep.** Per @kenji inventory the following had zero JSX/TSX consumers; I re-verified each with `grep --include='*.tsx'`: - `.maka-nav-primary` (3 rules under `.maka-session-panel[data- collapsed="true"]`) - `.maka-skill-workbench-rail` Promoted both into `renderer-style-pruning-contract.test.ts`'s retired-hook list alongside the 12 already locked there. The contract test (`✔ does not keep CSS for retired renderer hooks`) passes after the deletion. Net: +162 / -148 lines. One source of truth for the Settings/Plan Reminder Select chrome; one less wrapper and ~24 lines of dead CSS to maintain. Round C (ChoiceCard/RadioCard) and Round D (CSS ownership split) still on @kenji's plan. * chore(css): drop 2 more verified-dead selectors + lock in retired-hook contract Round A-extended (yuejing 2026-06-25). @WAWQAQ 「继续」 (msg `76e36d3b`) after #254 landed. Sticking to zero-visual-risk cleanup while @kenji is offline and the ChoiceCard / RadioCard primitive (Round C) still needs a visual-smoke harness to be safe. Found two more selectors with zero JSX/TSX consumers via the standard sweep against `apps/desktop/src/renderer/styles.css`: - `.providerCatalog` — bare base class. `.providerCatalogRow` / `.providerCatalogTitle` / `.providerCatalogDesc` etc. are live in `ProvidersPanel.tsx`, but nothing renders the bare class itself. - `.connectionStatus[data-ok="false"]` — combinator. No element ever carries the `connectionStatus` class in the renderer; the live status arm in the codebase is `.settingsConnectionBadge[data-tone]`, and `.providerError` (the other arm of the same rule) is unrelated and stays. Both promoted into `renderer-style-pruning-contract.test.ts`'s retired-hook list (now locks 16). `\.${hook}\b` boundary keeps the live `.providerCatalogRow` / `.settingsConnectionBadge` siblings clear.
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.
Summary
Acts on @kenji audit thread
#my-ai:c28a6293msg232aec0f. Round 3 againstaf66ebb7post-#249.#2 — Plan Reminder select collapsed state was text-only. PR #247 added the brand icon to each
<SelectItem>, but<SelectValue />defaulted to rendering just the label string, so opening the dropdown showed logos and selecting one collapsed back to plain text. Build avalue → {label, icon}lookup insidePlanReminderSelectand feedSelectValuea function-child so the trigger renders the same icon + label row as the items.#6 —
100vhresidue in renderer CSS. Four sites swapped to100dvh:maka-tokens.css:760—.maka-shellheightmaka-tokens.css:1941—.maka-modalmax-height: calc(… - 80px)styles.css:5028—.maka-help-modalmax-height: calc(… - 96px)styles.css:13121—.maka-onboarding-stackmin-height: calc(… - 84px)Other renderer surfaces already use
100dvh; this brings the legacy four into line.Deferred (per kenji's own scope):
SettingsSelect/Segmented/ChoiceCardprimitive unification — design-system refactor with no end-result delta in isolation.Test plan
pnpm -F @maka/ui build— clean.平台select, pick an option — the closed trigger now shows the brand logo + label (not plain text).grep -n "100vh" apps/desktop/src/renderer/{maka-tokens,styles}.cssreturns nothing..maka-shelland.maka-modaldon't overshoot the visible viewport.