refactor(ui): full-width header with framed chat shell
Header now spans the full window width above the [sidebar | chat | right-sidebar] row instead of nesting inside the central column. The chat area becomes a self-contained framed window with its own border and rounded corners on all four sides, and sidebars sit flush against the header sharing its bg-sidebar so the seam is invisible. Removed the duplicated shell controls the old layout needed to fake header-height inside sidebars: portal host on RightSidebar, paddingTop reservation, top drag overlay, duplicated layout-left / chat-new buttons in SidebarHeader, the showDesktopSidebarChrome block in SessionSidebar, and the conditional traffic-lights inset on the desktop header. Mac WCO inset now lives only on the header. Moved the new-session action into the SessionSwitcher dropdown as its first item, removed the standalone chat-new button from the header, relocated scheduled-tasks into the left action group of the sidebar header, and bumped ContextPanel tab strip to h-10 to balance the more prominent header.
This commit is contained in:
Bohdan Triapitsyn
@@ -1,5 +1,4 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@@ -646,7 +645,6 @@ interface HeaderProps {
|
||||
onToggleRightDrawer?: () => void;
|
||||
leftDrawerOpen?: boolean;
|
||||
rightDrawerOpen?: boolean;
|
||||
desktopRightSidebarActionsHost?: HTMLElement | null;
|
||||
}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({
|
||||
@@ -654,13 +652,10 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
onToggleRightDrawer,
|
||||
leftDrawerOpen,
|
||||
rightDrawerOpen,
|
||||
desktopRightSidebarActionsHost = null,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
||||
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
||||
const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
|
||||
const isRightSidebarOpen = useUIStore((state) => state.isRightSidebarOpen);
|
||||
const toggleBottomTerminal = useUIStore((state) => state.toggleBottomTerminal);
|
||||
const toggleRightSidebar = useUIStore((state) => state.toggleRightSidebar);
|
||||
const openContextOverview = useUIStore((state) => state.openContextOverview);
|
||||
@@ -677,7 +672,6 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
const [isDevShutdownInFlight, setIsDevShutdownInFlight] = React.useState(false);
|
||||
|
||||
const getContextUsage = useSessionUIStore((state) => state.getContextUsage);
|
||||
const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
|
||||
const isNewSessionDraftOpen = useSessionUIStore((state) => Boolean(state.newSessionDraft?.open));
|
||||
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
|
||||
const currentSessionMessagesResolved = useSessionMessagesResolved(currentSessionId ?? '');
|
||||
@@ -815,15 +809,6 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
}, [desktopServicesTab, isDesktopApp]);
|
||||
|
||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
const isLeftSidebarOpen = React.useMemo(() => {
|
||||
if (!isMobile) {
|
||||
return isSidebarOpen;
|
||||
}
|
||||
if (typeof onToggleLeftDrawer === 'function') {
|
||||
return Boolean(leftDrawerOpen);
|
||||
}
|
||||
return isSessionSwitcherOpen;
|
||||
}, [isMobile, isSessionSwitcherOpen, isSidebarOpen, leftDrawerOpen, onToggleLeftDrawer]);
|
||||
const showDesktopHeaderContextUsage = !isVSCode && activeMainTab === 'chat' && !!stableDesktopContextUsage && stableDesktopContextUsage.totalTokens > 0;
|
||||
const desktopHeaderDisplayPercentage = stableDesktopContextUsage && stableDesktopContextUsage.contextLimit > 0
|
||||
? Math.min(999, (stableDesktopContextUsage.totalTokens / stableDesktopContextUsage.contextLimit) * 100)
|
||||
@@ -1275,12 +1260,6 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
toggleSidebar();
|
||||
}, [blurActiveElement, isMobile, isSessionSwitcherOpen, setSessionSwitcherOpen, toggleSidebar]);
|
||||
|
||||
const handleHeaderNewSession = React.useCallback(() => {
|
||||
setActiveMainTab('chat');
|
||||
setSessionSwitcherOpen(false);
|
||||
openNewSessionDraft();
|
||||
}, [openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
|
||||
|
||||
const handleOpenDraftMiniChat = React.useCallback(() => {
|
||||
void invokeDesktop('desktop_open_draft_mini_chat_window', {
|
||||
directory: normalize(openDirectory || activeProject?.path || ''),
|
||||
@@ -1367,11 +1346,11 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
const mobileHeaderIconButtonClass = MOBILE_HEADER_ICON_BUTTON_CLASS;
|
||||
|
||||
const desktopPaddingClass = React.useMemo(() => {
|
||||
if (!isSidebarOpen && ((isDesktopApp && isMacPlatform && !isDesktopWindowFullscreen) || isTabletStandalonePwa)) {
|
||||
if ((isDesktopApp && isMacPlatform && !isDesktopWindowFullscreen) || isTabletStandalonePwa) {
|
||||
return 'pl-[5.5rem]';
|
||||
}
|
||||
return 'pl-3';
|
||||
}, [isDesktopApp, isDesktopWindowFullscreen, isMacPlatform, isSidebarOpen, isTabletStandalonePwa]);
|
||||
}, [isDesktopApp, isDesktopWindowFullscreen, isMacPlatform, isTabletStandalonePwa]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDesktopApp || !isMacPlatform) {
|
||||
@@ -1439,14 +1418,14 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
}
|
||||
|
||||
return {
|
||||
paddingLeft: isTabletStandalonePwa && !isSidebarOpen
|
||||
paddingLeft: isTabletStandalonePwa
|
||||
? 'max(calc(0.75rem + var(--oc-wco-left-inset, 0px)), 5.5rem)'
|
||||
: 'calc(0.75rem + var(--oc-wco-left-inset, 0px))',
|
||||
paddingRight: 'calc(0.75rem + var(--oc-wco-right-inset, 0px))',
|
||||
minHeight: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
|
||||
height: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
|
||||
};
|
||||
}, [isDesktopApp, isSidebarOpen, isTabletStandalonePwa, isVSCode]);
|
||||
}, [isDesktopApp, isTabletStandalonePwa, isVSCode]);
|
||||
|
||||
const updateHeaderHeight = React.useCallback(() => {
|
||||
if (typeof document === 'undefined') {
|
||||
@@ -1844,7 +1823,6 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
</>
|
||||
);
|
||||
|
||||
const desktopSidebarActionsInline = !isRightSidebarOpen || !desktopRightSidebarActionsHost;
|
||||
const showMiniChatHeaderAction = hasElectronDesktopIPC && (isNewSessionDraftOpen || Boolean(currentSessionId));
|
||||
|
||||
const renderDesktop = () => (
|
||||
@@ -1860,7 +1838,6 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
aria-label={t('header.navigation.mainAria')}
|
||||
>
|
||||
<HeaderIconActionButton
|
||||
visible={!isSidebarOpen}
|
||||
title={t('header.actions.openSessionsWithShortcut', { shortcut: shortcutLabel('toggle_sidebar') })}
|
||||
ariaLabel={t('header.actions.openSessionsAria')}
|
||||
onClick={handleOpenSessionSwitcher}
|
||||
@@ -1868,24 +1845,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
Icon={'layout-left'}
|
||||
/>
|
||||
|
||||
<div className={cn('flex min-w-0 flex-1 items-center', !isSidebarOpen && 'pl-3')}>
|
||||
{!isLeftSidebarOpen ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t('header.actions.newSessionAria')}
|
||||
onClick={handleHeaderNewSession}
|
||||
className={cn(desktopHeaderIconButtonClass, 'mr-6 shrink-0')}
|
||||
>
|
||||
<Icon name="chat-new" className="h-[18px] w-[18px]" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t('header.actions.newSessionWithShortcut', { shortcut: shortcutLabel('new_chat') })}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<div className="flex min-w-0 flex-1 items-center pl-3">
|
||||
{projectActionsContext && (
|
||||
<ProjectActionsButton
|
||||
projectRef={projectActionsContext.projectRef}
|
||||
@@ -1953,7 +1913,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
showPercentIcon
|
||||
onClick={handleOpenContextPanel}
|
||||
pressed={isContextPanelActive}
|
||||
className={desktopSidebarActionsInline && !showMiniChatHeaderAction ? 'mr-3.5' : ''}
|
||||
className={!showMiniChatHeaderAction ? 'mr-3.5' : ''}
|
||||
valueClassName="typography-ui-label font-medium leading-none text-foreground"
|
||||
percentIconClassName="h-5 w-5"
|
||||
/>
|
||||
@@ -1963,13 +1923,10 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
title={isNewSessionDraftOpen ? t('header.actions.newMiniChat') : t('header.actions.openSessionMiniChat')}
|
||||
ariaLabel={isNewSessionDraftOpen ? t('header.actions.newMiniChatAria') : t('header.actions.openSessionMiniChatAria')}
|
||||
onClick={handleOpenCurrentMiniChat}
|
||||
className={cn(desktopHeaderIconButtonClass, desktopSidebarActionsInline && showDesktopHeaderContextUsage ? 'mr-3.5' : 'mr-1')}
|
||||
className={cn(desktopHeaderIconButtonClass, showDesktopHeaderContextUsage ? 'mr-3.5' : 'mr-1')}
|
||||
Icon={'picture-in-picture-2'}
|
||||
/>
|
||||
{desktopSidebarActionsInline ? desktopSidebarActions : null}
|
||||
{!desktopSidebarActionsInline && desktopRightSidebarActionsHost
|
||||
? createPortal(desktopSidebarActions, desktopRightSidebarActionsHost)
|
||||
: null}
|
||||
{desktopSidebarActions}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2386,8 +2343,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
|
||||
const headerClassName = cn(
|
||||
'header-safe-area relative z-10',
|
||||
isMobile && 'border-b border-border/50',
|
||||
'bg-background'
|
||||
isMobile ? 'border-b border-border/50 bg-background' : 'bg-sidebar'
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user