Match the sidebar app name to custom sidebar colors (#5324)

This commit is contained in:
Brennan Benson 2026-06-13 15:10:33 -07:00 committed by GitHub
parent 3a2d39cb37
commit eec18be688
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 0 deletions

View File

@ -5,6 +5,7 @@ import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
type SetStateAction
@ -21,6 +22,7 @@ import {
import logo from '../../../resources/logo.svg'
import { SYNC_FIT_PANES_EVENT, TOGGLE_TERMINAL_PANE_EXPAND_EVENT } from '@/constants/terminal'
import { syncZoomCSSVar } from '@/lib/ui-zoom'
import { resolveLeftSidebarStyleVariables } from '@/lib/left-sidebar-appearance'
import { canShowRightSidebarForView } from '@/lib/right-sidebar-visibility'
import { buildAppFontFamily } from '@/lib/app-font-family'
import { toast } from 'sonner'
@ -40,6 +42,7 @@ import RetainedAgentsSyncGate from './components/dashboard/RetainedAgentsSyncGat
import { ActivityTitlebarControls } from './components/activity/ActivityTitlebarControls'
import Sidebar from './components/Sidebar'
import { shutdownBufferCaptures } from './components/terminal-pane/shutdown-buffer-captures'
import { useSystemPrefersDark } from './components/terminal-pane/use-system-prefers-dark'
import RightSidebar from './components/right-sidebar'
import { StarNagCard } from './components/StarNagCard'
import { TelemetryFirstLaunchSurface } from './components/TelemetryFirstLaunchSurface'
@ -532,6 +535,11 @@ function App(): React.JSX.Element {
const rightSidebarExplorerView = useAppStore((s) => s.rightSidebarExplorerView)
const isFullScreen = useAppStore((s) => s.isFullScreen)
const settings = useAppStore((s) => s.settings)
const systemPrefersDark = useSystemPrefersDark()
const leftSidebarStyle = useMemo(
() => resolveLeftSidebarStyleVariables(settings, systemPrefersDark),
[settings, systemPrefersDark]
) as React.CSSProperties | undefined
const dictationState = useAppStore((s) => s.dictationState)
const hasSshCredentialRequest = useAppStore((s) => s.sshCredentialQueue.length > 0)
const shouldMountDictationController =
@ -1837,6 +1845,10 @@ function App(): React.JSX.Element {
: ' titlebar-left-floating absolute top-0 left-0 z-10 w-max border-r border-border'
}`}
style={{
// Why: custom sidebar appearances are scoped to the sidebar
// root, so mirror those variables onto the open header that
// visually belongs to the same left-column panel.
...(sidebarOpen ? leftSidebarStyle : undefined),
// Why: the Sidebar resize hook updates the sidebar DOM width
// directly during drag and only persists to Zustand on
// mouseup. In workspace view, size this header from the

View File

@ -760,6 +760,12 @@
cursor: pointer;
}
/* Why: when the app name sits inside the worktree sidebar header, it should
inherit that panel's contrast instead of the generic titlebar text color. */
.titlebar-left:not(.titlebar-left-floating) .titlebar-app-name {
color: var(--worktree-sidebar-foreground);
}
.titlebar-app-name-main {
flex: 0 0 auto;
}