Replace native <select> with themed Dropdown (SOU-224)#38
Merged
Conversation
Native <select> popups on Windows are drawn by WebView2 and ignore the app's color-scheme / Tauri window theme, so they render in the OS theme: a light popup inside our dark UI. Replace every native select with a self-drawn, fully CSS-themed listbox that matches dark and light exactly. - Add components/Dropdown.tsx implementing the ARIA listbox keyboard model (Up/Down/Home/End move, Enter/Space commit, Escape closes, outside pointerdown dismisses) plus Dropdown.test.tsx. - Route FormControls.Select, MenuBarMetricSection, and RegionSection through Dropdown; drop the now-dead .provider-detail-select CSS. - Add .dropdown styles with dark defaults and [data-theme="light"] overrides, including a provider-detail variant. Note: the visual dark/light pass still needs a Windows eyeball since pixels can't be verified headlessly.
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
ceiling | 2b76592 | Commit Preview URL Branch Preview URL |
Jul 16 2026, 10:49 PM |
tsouth89
added a commit
that referenced
this pull request
Jul 17, 2026
Two v1-readiness cleanups. **Both change visual/user-facing surfaces that can't be pixel-verified headlessly — needs an eyeball on Windows before merge.** ## 1. Native-control theming audit (extends SOU-224) The dropdown fix (#38) removed native `<select>`. Same WebView2 root cause remained on **checkboxes**: `.provider-detail-toggle` (Claude/Codex credential toggles) and `.providers-sidebar__checkbox` (provider enable/disable) were raw native `<input type="checkbox">` with only margin set, so the OS drew them in its own theme (light checkbox inside the dark UI). - Folded both onto the existing custom `.toggle` styling: `appearance:none` + CSS checkmark + accent fill + explicit `[data-theme="light"]` overrides. Every checkbox now matches the app theme in both modes. - Audited the rest: **range sliders** (`.settings-field`, `.menu-surface__footer-zoom-slider`) and **scrollbars** already carry per-theme styling — no change needed. Number-spinner arrows are OS-drawn but minor. ## 2. SOU-155 leftovers - **Removed the dead `TrayOpenCodexBar` locale key** — stale CodexBar branding, never rendered (the live tray item uses `TrayPopOutDashboard` in `tray_menu.rs`). Dropped from `keys.ts`, `locale.rs`, and all 7 `.ftl` locales; TS↔Rust key parity preserved (`check-locale` green). - **Clarified the browser-cookie empty state**: it now states up front that App-Bound Encryption usually blocks automatic import on Chrome/Edge/Brave, so pasting the cookie header is the reliable path. - COOKIES.md already reflects ABE reality (PR #36). Remaining `CodexBar` strings are intentional upstream attribution in the About tab. ## Verification - `pnpm test` — 45 files / 226 tests pass - `pnpm run build` — check-locale + tsc + vite green - `cargo check` (shared crate) — green after the locale enum change ## Eyeball checklist (Windows, both themes) - Credential toggles (Settings → Providers → Claude/Codex) and the sidebar provider checkboxes: box + checkmark match the theme, accent fill when checked - Browser-cookie empty state reads clearly Partially addresses SOU-155; native-control audit extends SOU-224. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **User Interface** - Unified macOS-style checkbox visuals across provider and settings controls. - Enhanced interaction states (hover, focus, checked, disabled) with consistent light-theme behavior. - **Localization** - Updated the tray “pop out” dashboard label to “Open Ceiling.” - Removed an outdated tray translation entry. - **Bug Fixes** - Clarified browser cookie import empty-state guidance when automatic import is blocked for unsupported scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: tsouth89 <tsouth89@users.noreply.github.com>
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.
Why
Native
<select>popups on Windows are drawn by WebView2 and don't honor the app'scolor-schemeor the Tauri window theme, so the open list renders in the OS theme: a light popup inside our dark UI (SOU-224). Users also flagged this as "dropdowns aren't themed properly for dark mode."What
components/Dropdown.tsx— a self-drawn, fully CSS-themed listbox that replaces the native control. Implements the ARIA listbox keyboard model: Up/Down/Home/End move the active option, Enter/Space commit, Escape closes, Tab closes, and an outside pointerdown dismisses.aria-haspopup/aria-expanded/aria-selected/aria-activedescendantwired up.FormControls.Select(keeps the CJK-aware width calc),MenuBarMetricSection, andRegionSection. No<select>elements remain in the app..dropdown*rules with dark defaults +[data-theme="light"]overrides and a.dropdown--provider-detailvariant; removed the now-dead.provider-detail-selectrules.Dropdown.test.tsx(open/commit, aria-selected, keyboard, Escape, disabled); updatedMenuBarMetricSection.test.tsxto drive the new control.Verification
pnpm test— 45 files / 226 tests passpnpm run build— check-locale + tsc + vite all greenCloses SOU-224.