Match the sidebar app name to custom sidebar colors (#5324)
This commit is contained in:
parent
3a2d39cb37
commit
eec18be688
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue