fix(ui): migrate app-render nav + theme-toggle to upstream sidebar + theme-orb — resolve v2026.3.13-1 sync drift (#2509)#2514
Merged
alexey-pelykh merged 1 commit intomainfrom Apr 23, 2026
Conversation
…theme-orb vocabulary — resolve v2026.3.13-1 sync drift (#2509) Cluster 2 of #2502 CSS class drift audit. The v2026.3.13-1 upstream sync (04a7853, #2398) also renamed `.nav*` → `.sidebar*` and replaced the `.theme-toggle*` segmented-button component with `.theme-orb*` trigger + dropdown. ui/src/ui/app-render.ts and app-render.helpers.ts were fork-diverged and not paired-updated in #2501/#2506 — this PR covers the residue (5 orphans from the same sync commit). Changes: - app-render.ts: `<aside class="nav …nav--collapsed">` → `.sidebar …sidebar--collapsed` (the `.nav` rule was removed upstream; `.sidebar` at layout.css:324 + `.sidebar--collapsed` at layout.css:350 plus 20+ descendant selectors at layout.css:630-801 drive the collapsed visual). - app-render.helpers.ts: replace `renderThemeToggle` segmented-button implementation with theme-orb trigger + dropdown menu pattern mirroring upstream f76a3c5. Adds setOpen/toggleOpen/pickMode helpers, THEME_ MODE_OPTIONS, and renderThemeModeIcon (DRY over trigger + options). Preserves fork's pointer-coord ThemeTransitionContext for the ripple theme transition (upstream's `pick` targets skins, not modes — fork needs the fine-grained origin). Keeps local renderSunIcon / renderMoonIcon / renderMonitorIcon helpers (still live via renderThemeModeIcon). Verification: - `node scripts/audit-css-class-drift.mjs`: cluster 04a7853 is gone from the report (orphans 36→31, clusters 3→2); remaining clusters (0667aa5: 21 config-*, 21ac4b9: 1 .btn-sm) are out of scope per #2502's per-cluster routing. - `pnpm tsgo` (0 errors), `pnpm lint` (0 warnings/errors), `pnpm test` (800 files, 7014 tests passing), `pnpm format` idempotent. - Fork-integrity gates: zombie-import, stub-debt (126 baseline), throwing-stub-callers — all pass. Third instance of the definition-site-sync-without-paired-call-site- update variant documented in HQ #57 (#2493 and #2501 were the first two). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
10 tasks
alexey-pelykh
added a commit
that referenced
this pull request
Apr 24, 2026
…am-sync class renames from silently desyncing (#2503) Adds lint:ui:no-css-class-drift pnpm script invoking the existing scripts/audit-css-class-drift.mjs (#2502), and appends it to the pnpm check chain so the lint CI job now fails on any template-string class reference in ui/src/**/*.{ts,tsx,html} that has no matching rule in the CSS files reachable from ui/src/styles.css. Baseline on main: 0 orphans / 403 references / 733 defined classes (cluster fixes from #2506, #2512, #2513, #2514, #2515 already resolved all existing drift before this gate is wired, per the #2503 AC "All findings from D-1 resolved BEFORE this check is wired into CI"). Script name adapted from the issue's suggested lint:css-classes to lint:ui:no-css-class-drift — matches the lint:<area>:no-<thing> pattern used by lint:ui:no-raw-window-open, lint:tmp:no-random-messaging, and lint:plugins:no-monolithic-plugin-sdk-entry-imports. Documented in CLAUDE.md § Formatting & Linting (local-dev orientation) and § Fork-integrity gates (CI/fork-lifecycle orientation, cross-referenced with the existing rebrand / zombie-import / stub-debt / throwing-stub-callers / obsolescence-audit gates). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
7 tasks
alexey-pelykh
added a commit
that referenced
this pull request
Apr 24, 2026
…am-sync class renames from silently desyncing (#2503) (#2516) Adds lint:ui:no-css-class-drift pnpm script invoking the existing scripts/audit-css-class-drift.mjs (#2502), and appends it to the pnpm check chain so the lint CI job now fails on any template-string class reference in ui/src/**/*.{ts,tsx,html} that has no matching rule in the CSS files reachable from ui/src/styles.css. Baseline on main: 0 orphans / 403 references / 733 defined classes (cluster fixes from #2506, #2512, #2513, #2514, #2515 already resolved all existing drift before this gate is wired, per the #2503 AC "All findings from D-1 resolved BEFORE this check is wired into CI"). Script name adapted from the issue's suggested lint:css-classes to lint:ui:no-css-class-drift — matches the lint:<area>:no-<thing> pattern used by lint:ui:no-raw-window-open, lint:tmp:no-random-messaging, and lint:plugins:no-monolithic-plugin-sdk-entry-imports. Documented in CLAUDE.md § Formatting & Linting (local-dev orientation) and § Fork-integrity gates (CI/fork-lifecycle orientation, cross-referenced with the existing rebrand / zombie-import / stub-debt / throwing-stub-callers / obsolescence-audit gates). Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 tasks
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
Cluster 2 of #2502 CSS class drift. The v2026.3.13-1 upstream sync (
04a7853f0f, #2398) renamed.nav*→.sidebar*and replaced the.theme-toggle*segmented-button with.theme-orb*trigger + dropdown. Fork-diverged files missed the paired call-site update; #2501/#2506 covered the.nav-section/.topbar/.brand*subset — this PR covers the residue.Fixes #2509. Part of the cluster filed by #2502.
Changes
ui/src/ui/app-render.ts:251:<aside class="nav …nav--collapsed">→.sidebar …sidebar--collapsed. The.navrule was removed upstream;.sidebaratlayout.css:324+.sidebar--collapsedatlayout.css:350(plus 20+ descendant selectors atlayout.css:630-801) drive the collapsed visual.ui/src/ui/app-render.helpers.ts: replacerenderThemeTogglesegmented-button implementation with theme-orb trigger + dropdown menu pattern mirroring upstreamf76a3c5225. New helpers:setOpen/toggleOpen/pickMode/renderThemeModeIcon/THEME_MODE_OPTIONS. Preserves fork's pointer-coordThemeTransitionContextfor the ripple theme transition (upstream'spicktargets skins, not modes — fork needs the fine-grained origin). Keeps localrenderSunIcon/renderMoonIcon/renderMonitorIconhelpers (still live viarenderThemeModeIcon).Rename table
.nav.sidebarlayout.css:324.nav--collapsed.sidebar--collapsedlayout.css:350.theme-toggle.theme-orbcomponents.css:391.theme-toggle__track.theme-orb__menucomponents.css:427.theme-toggle__indicator__option--activeinstead).theme-toggle__button.theme-orb__optioncomponents.css:455.theme-toggle__button.active.theme-orb__option--activecomponents.css:479.theme-orb__trigger+.theme-orb--opencomponents.css:397, 448Test plan
pnpm tsgo(0 errors)pnpm lint(0 warnings, 0 errors across 3926 files)pnpm format— idempotentpnpm canvas:a2ui:bundle+pnpm test(800 test files, 7014 tests passing, 3 pre-existing skips)check-no-zombie-imports.mjs,check-stub-debt.mjs(126 baseline),check-throwing-stub-callers.mjs— all passnode scripts/audit-css-class-drift.mjs: cluster04a7853f0fis gone from the report (orphans 36→31, clusters 3→2); remaining clusters (0667aa5596: 21config-*,21ac4b9a8a: 1.btn-sm) are out of scope per audit(ui): one-shot CSS class drift audit — surface fork-side references with no CSS definition #2502's per-cluster routing/overview,/chat,/agents; toggle sidebar collapse; cycle Light / Dark / System from the theme orbPattern class
Third instance of the definition-site-sync-without-paired-call-site-update variant documented in HQ #57. #2493 (type/class variant) and #2501 (CSS nav-section/topbar/brand subset) were the first two. Build-time gate tracked in #2503; per-cluster routing in #2502.
🤖 Generated with Claude Code