feat: Move theme switch and version label out of the breadcrumb - #5744
Merged
mmabrouk merged 11 commits intoAug 8, 2026
Conversation
…used breadcrumb imports
…lazy-load version
…n SidebarBottomSection
…ve layout consistency
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR replaces the Feature Flags settings page with Preferences, moves theme selection into Preferences and the project switcher, adds reusable sidebar controls, displays the application version in the sidebar, and removes obsolete breadcrumb theme and toggle controls. ChangesPreferences and settings navigation
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant SettingsNavigation
participant Preferences
participant ThemePicker
participant AppTheme
participant ProjectOrgSwitcher
User->>SettingsNavigation: select Preferences
SettingsNavigation->>Preferences: render settings page
Preferences->>ThemePicker: render theme choices
ThemePicker->>AppTheme: apply selected theme
User->>ProjectOrgSwitcher: hover switcher
ProjectOrgSwitcher->>AppTheme: apply Light, Dark, or System
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Author
|
I will add the preview images later after I test it fully |
ashrafchowdury
marked this pull request as ready for review
August 6, 2026 04:55
dosubot
Bot
added
size:XL
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: eaa90711-f53c-4a05-89cc-79ff7624d1c5
📒 Files selected for processing (20)
web/oss/src/components/Layout/assets/Breadcrumbs.tsxweb/oss/src/components/Layout/assets/ThemeSwitcher.tsxweb/oss/src/components/Layout/assets/styles.tsweb/oss/src/components/Layout/assets/themeOptions.tsweb/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsxweb/oss/src/components/Sidebar/components/SidebarLogo.tsxweb/oss/src/components/Sidebar/components/SidebarToggleButton.tsxweb/oss/src/components/Sidebar/engine/SidebarMenu.tsxweb/oss/src/components/Sidebar/engine/types.tsweb/oss/src/components/Sidebar/scopes/bottomSection.tsxweb/oss/src/components/Sidebar/scopes/settingsScope.tsxweb/oss/src/components/pages/settings/FeatureFlags/FeatureFlags.tsxweb/oss/src/components/pages/settings/Preferences/Preferences.tsxweb/oss/src/components/pages/settings/Preferences/components/ThemePicker.tsxweb/oss/src/components/pages/settings/assets/navigation.test.tsweb/oss/src/components/pages/settings/assets/navigation.tsweb/oss/src/pages/w/[workspace_id]/p/[project_id]/settings/index.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/RevertGroupButton.tsxweb/packages/agenta-ui/src/components/presentational/EnhancedButton.tsxweb/packages/agenta-ui/src/components/ui/segmented.tsx
💤 Files with no reviewable changes (2)
- web/oss/src/components/pages/settings/FeatureFlags/FeatureFlags.tsx
- web/oss/src/components/Layout/assets/ThemeSwitcher.tsx
Contributor
Railway Preview Environment
Updated at 2026-08-08T16:14:26.602Z |
ardaerzin
approved these changes
Aug 6, 2026
Both branches independently edited the same explanatory comment above the Revert button's className in RevertGroupButton.tsx. The release branch's wording is kept because it states the reason more completely: Tailwind scans comments as well as class attributes, so writing the bracketed class name out in prose would itself be picked up and emitted into globals.css as invalid CSS, breaking the build. The feature branch's shorter comment made the same underlying point without explaining why it matters, so it is discarded in favor of the more complete version. This is a comment-only resolution with no behavioral difference.
mmabrouk
approved these changes
Aug 8, 2026
mmabrouk
left a comment
mmabrouk
left a comment
Member
There was a problem hiding this comment.
Mahmoud reviewed this change on a live deployment and approved merging. Resolved the RevertGroupButton.tsx comment conflict against release/v0.111.0 by keeping the release branch's version.
…ake the theme fly-out keyboard-reachable This PR moved the collapse toggle out of the breadcrumb bar and into the sidebar. The main sidebar always renders SidebarToggleButton alongside the logo, but the Settings header gated it on `!collapsed`, so the one place a user needs it most - after collapsing the rail - is exactly where it disappears. Collapsing anywhere and then opening Settings left only a Back arrow with no way back to the expanded state short of leaving Settings first. Render the toggle unconditionally, matching SidebarLogo. The collapsed rail is only 48px wide, too narrow for the Back button and the toggle side by side, so the collapsed layout now stacks them instead of squeezing both into one row. Separately, the Theme row in the project/org switcher opened its fly-out on `trigger="hover"` only. antd's Popover wires focus handling solely when "focus" is in the trigger set, so a hover-only trigger left the underlying button focusable but inert: Tab lands on it, but neither focus nor Enter nor Space opens the menu. Every sibling row in the same switcher is a real button with an onClick, and the outer switcher itself opens on click, so the Theme row was the odd one out. Add "click" to the trigger array so the native button's Enter/Space-triggered click opens the fly-out too, the same way the outer switcher's Dropdown already does, while keeping hover working since that's the existing behavior.
This was referenced Aug 9, 2026
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
3 participants
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.
Context
The breadcrumb bar carried two controls as permanent chrome: a three-icon theme
switcher and the "agenta vX" version label. Both sat in the row that truncates first
on narrow screens, for settings people touch about once. This PR clears the breadcrumb
of both and relocates them to where they belong, and reworks the old "Feature flags"
settings tab into a proper Preferences tab in the process.
Changes
Breadcrumb. The top-right cluster is gone. The breadcrumb now shows only navigation.
Theme control moves to two places:
Light / Dark / System as radio cards with mini preview thumbnails.
the organization panel, above Logout.
Both read and write the same
useAppTheme()state, so a change in one is reflectedeverywhere. The old
ThemeSwitcher(the breadcrumb's segmented control) is deleted.Version label moves to a small lazy-loaded
vXsuffix on the "Help & Docs" sidebaritem, so the version string stays out of the initial bundle.
"Feature flags" tab becomes "Preferences." The tab key is renamed, not aliased:
There is no backward-compatible alias. An old
?tab=featureFlagslink now falls back tothe default Members tab. The body is split into Appearance (the theme control) and
Experiments (the existing toggles). The "Playground inspector" toggle keeps a small
DEBUGtag inline instead of the old separate red "Debug flags" subsection.Sidebar collapse toggle moves into the logo header as a new
SidebarToggleButton.The collapsed rail now shows the toggle rather than the symbol logo.
Supporting changes:
themeOptions.ts: one source of truth for the theme choices, shared by the Preferencescards and the sidebar fly-out.
SwitcherFooter/MenuDivider: the switcher's shared footer, so the theme + logoutblock is defined once instead of per panel.
SidebarConfig.suffix+SidebarMenurender a right-aligned suffix (the version label).EnhancedButtonnow honorstooltipProps.mouseEnterDelay(seconds to ms) instead of afixed 100ms, so the toggle's slow-reveal tooltip works.
Tests / notes
tsc(fullweb/oss) passes; ESLint clean on all touched files.navigation.test.tsupdated for thepreferenceskey and passing.correctly with no palette changes. The only fixed colors are the preview thumbnails,
which intentionally depict each theme.
?tab=featureFlagsalias is deliberate (productcall this iteration), and it diverges from the earlier design proposal that kept it.
What to QA
shows Appearance then Experiments.
survives a reload.
/ Dark / System, a check on the current one. Confirm it appears on both the project view
and the organization view (via "Switch organization").
vXnow sitson the "Help & Docs" sidebar item.
/settings?tab=preferences(lands on Preferences) and the old/settings?tab=featureFlags(now falls back to the Members tab, no crash).Previews
Click to expand
Full page:Theme is a selector:
App version:
Settings > feature-flags = Preference