434 lines
14 KiB
TypeScript
434 lines
14 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip';
|
|
|
|
import { RiChat4Line, RiCodeLine, RiGitBranchLine, RiLayoutLeftLine, RiPlayListAddLine, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
|
|
import { useUIStore, type MainTab } from '@/stores/useUIStore';
|
|
import { useConfigStore } from '@/stores/useConfigStore';
|
|
import { useSessionStore } from '@/stores/useSessionStore';
|
|
import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
|
|
import { useDeviceInfo } from '@/lib/device';
|
|
import { cn } from '@/lib/utils';
|
|
import { useDiffFileCount } from '@/components/views/DiffView';
|
|
|
|
interface TabConfig {
|
|
id: MainTab;
|
|
label: string;
|
|
icon: RemixiconComponentType;
|
|
badge?: number;
|
|
}
|
|
|
|
export const FixedSessionsButton: React.FC = () => {
|
|
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
|
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
|
const { isMobile } = useDeviceInfo();
|
|
|
|
const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
|
|
if (typeof window === 'undefined') {
|
|
return false;
|
|
}
|
|
return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
|
|
});
|
|
|
|
const isMacPlatform = React.useMemo(() => {
|
|
if (typeof navigator === 'undefined') {
|
|
return false;
|
|
}
|
|
return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
const detected = typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
|
|
setIsDesktopApp(detected);
|
|
}, []);
|
|
|
|
const handleOpenSessionSwitcher = React.useCallback(() => {
|
|
if (isMobile) {
|
|
setSessionSwitcherOpen(true);
|
|
} else {
|
|
toggleSidebar();
|
|
}
|
|
}, [isMobile, setSessionSwitcherOpen, toggleSidebar]);
|
|
|
|
const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground';
|
|
|
|
if (isMobile || !isDesktopApp || !isMacPlatform) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed top-[0.375rem] left-[5.25rem] z-[9999]" style={{ pointerEvents: 'auto' }}>
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenSessionSwitcher}
|
|
aria-label="Open sessions"
|
|
className={headerIconButtonClass}
|
|
>
|
|
<RiLayoutLeftLine className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Header: React.FC = () => {
|
|
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
|
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
|
const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
|
|
const sidebarWidth = useUIStore((state) => state.sidebarWidth);
|
|
const activeMainTab = useUIStore((state) => state.activeMainTab);
|
|
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
|
|
|
|
const { getCurrentModel } = useConfigStore();
|
|
|
|
const getContextUsage = useSessionStore((state) => state.getContextUsage);
|
|
const { isMobile } = useDeviceInfo();
|
|
const diffFileCount = useDiffFileCount();
|
|
|
|
const headerRef = React.useRef<HTMLElement | null>(null);
|
|
|
|
const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
|
|
if (typeof window === 'undefined') {
|
|
return false;
|
|
}
|
|
return typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
|
|
});
|
|
|
|
const isMacPlatform = React.useMemo(() => {
|
|
if (typeof navigator === 'undefined') {
|
|
return false;
|
|
}
|
|
return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
const detected = typeof (window as typeof window & { opencodeDesktop?: unknown }).opencodeDesktop !== 'undefined';
|
|
setIsDesktopApp(detected);
|
|
}, []);
|
|
|
|
const currentModel = getCurrentModel();
|
|
const limit = currentModel && typeof currentModel.limit === 'object' && currentModel.limit !== null
|
|
? (currentModel.limit as Record<string, unknown>)
|
|
: null;
|
|
const contextLimit = (limit && typeof limit.context === 'number' ? limit.context : 0);
|
|
const outputLimit = (limit && typeof limit.output === 'number' ? limit.output : 0);
|
|
const contextUsage = getContextUsage(contextLimit, outputLimit);
|
|
const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
|
|
|
|
const handleOpenSessionSwitcher = React.useCallback(() => {
|
|
if (isMobile) {
|
|
setSessionSwitcherOpen(!isSessionSwitcherOpen);
|
|
return;
|
|
}
|
|
toggleSidebar();
|
|
}, [isMobile, isSessionSwitcherOpen, setSessionSwitcherOpen, toggleSidebar]);
|
|
|
|
const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground';
|
|
|
|
const desktopPaddingClass = React.useMemo(() => {
|
|
if (isDesktopApp && isMacPlatform) {
|
|
|
|
return isSidebarOpen ? 'pl-0' : 'pl-[8.0rem]';
|
|
}
|
|
return 'pl-3';
|
|
}, [isDesktopApp, isMacPlatform, isSidebarOpen]);
|
|
|
|
const updateHeaderHeight = React.useCallback(() => {
|
|
if (typeof document === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const height = headerRef.current?.getBoundingClientRect().height;
|
|
if (height) {
|
|
document.documentElement.style.setProperty('--oc-header-height', `${height}px`);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
updateHeaderHeight();
|
|
|
|
const node = headerRef.current;
|
|
if (!node || typeof ResizeObserver === 'undefined') {
|
|
return () => {};
|
|
}
|
|
|
|
const observer = new ResizeObserver(() => {
|
|
updateHeaderHeight();
|
|
});
|
|
|
|
observer.observe(node);
|
|
window.addEventListener('resize', updateHeaderHeight);
|
|
window.addEventListener('orientationchange', updateHeaderHeight);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
window.removeEventListener('resize', updateHeaderHeight);
|
|
window.removeEventListener('orientationchange', updateHeaderHeight);
|
|
};
|
|
}, [updateHeaderHeight]);
|
|
|
|
useEffect(() => {
|
|
updateHeaderHeight();
|
|
}, [updateHeaderHeight, isMobile]);
|
|
|
|
const handleDragStart = React.useCallback(async (e: React.MouseEvent) => {
|
|
|
|
if ((e.target as HTMLElement).closest('button, a, input, select, textarea')) {
|
|
return;
|
|
}
|
|
|
|
if (e.button !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (isDesktopApp) {
|
|
try {
|
|
const { getCurrentWindow } = await import('@tauri-apps/api/window');
|
|
const window = getCurrentWindow();
|
|
await window.startDragging();
|
|
} catch (error) {
|
|
console.error('Failed to start window dragging:', error);
|
|
}
|
|
}
|
|
}, [isDesktopApp]);
|
|
|
|
const handleActiveTabDragStart = React.useCallback(async (e: React.MouseEvent) => {
|
|
|
|
if (e.button !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (isDesktopApp) {
|
|
try {
|
|
const { getCurrentWindow } = await import('@tauri-apps/api/window');
|
|
const window = getCurrentWindow();
|
|
await window.startDragging();
|
|
} catch (error) {
|
|
console.error('Failed to start window dragging:', error);
|
|
}
|
|
}
|
|
}, [isDesktopApp]);
|
|
|
|
const tabs: TabConfig[] = React.useMemo(() => [
|
|
{ id: 'chat', label: 'Chat', icon: RiChat4Line },
|
|
{
|
|
id: 'diff',
|
|
label: 'Diff',
|
|
icon: RiCodeLine,
|
|
badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
|
|
},
|
|
{ id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
|
|
{ id: 'git', label: 'Git', icon: RiGitBranchLine },
|
|
], [diffFileCount, isMobile]);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
|
|
if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
|
|
const num = parseInt(e.key, 10);
|
|
if (num >= 1 && num <= tabs.length) {
|
|
e.preventDefault();
|
|
setActiveMainTab(tabs[num - 1].id);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [tabs, setActiveMainTab]);
|
|
|
|
const renderTab = (tab: TabConfig, isLast: boolean) => {
|
|
const isActive = activeMainTab === tab.id;
|
|
const Icon = tab.icon;
|
|
const isChatTab = tab.id === 'chat';
|
|
const isGitTab = tab.id === 'git';
|
|
|
|
return (
|
|
<React.Fragment key={tab.id}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveMainTab(tab.id)}
|
|
onMouseDown={isActive ? handleActiveTabDragStart : undefined}
|
|
className={cn(
|
|
'relative flex h-full items-center gap-2 px-4 typography-ui-label font-medium transition-colors',
|
|
isActive ? 'app-region-drag' : 'app-region-no-drag',
|
|
'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
|
|
isActive ? 'text-foreground' : 'text-muted-foreground',
|
|
|
|
isActive && 'after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-[2px] after:bg-background',
|
|
|
|
isActive && isChatTab && isSidebarOpen && 'before:absolute before:bottom-[-1px] before:right-full before:h-px before:bg-[var(--interactive-border)] before:w-[var(--sidebar-w)]',
|
|
|
|
isChatTab && !(isDesktopApp && isMacPlatform && isSidebarOpen) && 'border-l',
|
|
|
|
isGitTab && 'border-r',
|
|
|
|
isChatTab && !isMobile && 'min-w-[165px]'
|
|
)}
|
|
style={{
|
|
...(isActive && isChatTab && isSidebarOpen ? {
|
|
|
|
['--sidebar-w' as string]: (isDesktopApp && isMacPlatform) ? `${sidebarWidth}px` : '64px'
|
|
} : {}),
|
|
...((isChatTab && !(isDesktopApp && isMacPlatform && isSidebarOpen)) || isGitTab ? { borderColor: 'var(--interactive-border)' } : {}),
|
|
}}
|
|
aria-selected={isActive}
|
|
role="tab"
|
|
>
|
|
{isMobile ? (
|
|
<Icon size={20} />
|
|
) : (
|
|
<>
|
|
<Icon size={16} />
|
|
<span>{tab.label}</span>
|
|
</>
|
|
)}
|
|
{}
|
|
{isChatTab && !isMobile && contextUsage && contextUsage.totalTokens > 0 && (
|
|
<span className="ml-1">
|
|
<ContextUsageDisplay
|
|
totalTokens={contextUsage.totalTokens}
|
|
percentage={contextUsage.percentage}
|
|
contextLimit={contextUsage.contextLimit}
|
|
outputLimit={contextUsage.outputLimit ?? 0}
|
|
size="compact"
|
|
/>
|
|
</span>
|
|
)}
|
|
{}
|
|
{tab.badge !== undefined && tab.badge > 0 && (
|
|
<span className="text-xs font-semibold text-primary">
|
|
{tab.badge}
|
|
</span>
|
|
)}
|
|
</button>
|
|
{}
|
|
{!isLast && (
|
|
<div className="h-full w-px bg-border" aria-hidden="true" />
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
const renderDesktop = () => (
|
|
<div
|
|
onMouseDown={handleDragStart}
|
|
className={cn(
|
|
'app-region-drag relative flex h-12 select-none items-center',
|
|
desktopPaddingClass
|
|
)}
|
|
role="tablist"
|
|
aria-label="Main navigation"
|
|
>
|
|
{}
|
|
{!(isDesktopApp && isMacPlatform) && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenSessionSwitcher}
|
|
aria-label="Open sessions"
|
|
className={`${headerIconButtonClass} mr-2.5`}
|
|
>
|
|
<RiLayoutLeftLine className="h-5 w-5" />
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{}
|
|
<div className="flex h-full items-center">
|
|
{tabs.map((tab, index) => renderTab(tab, index === tabs.length - 1))}
|
|
</div>
|
|
|
|
{}
|
|
<div className="flex-1" />
|
|
</div>
|
|
);
|
|
|
|
const renderMobile = () => (
|
|
<div className="app-region-drag relative flex items-center justify-between gap-2 px-3 py-2 select-none">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleOpenSessionSwitcher}
|
|
className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
aria-label="Open sessions"
|
|
>
|
|
<RiPlayListAddLine className="h-5 w-5" />
|
|
</button>
|
|
{contextUsage && contextUsage.totalTokens > 0 && activeMainTab === 'chat' && (
|
|
<ContextUsageDisplay
|
|
totalTokens={contextUsage.totalTokens}
|
|
percentage={contextUsage.percentage}
|
|
contextLimit={contextUsage.contextLimit}
|
|
outputLimit={contextUsage.outputLimit ?? 0}
|
|
size="compact"
|
|
isMobile={true}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="app-region-no-drag flex items-center gap-1.5">
|
|
<div className="flex items-center" role="tablist" aria-label="Main navigation">
|
|
{tabs.map((tab) => {
|
|
const isActive = activeMainTab === tab.id;
|
|
const Icon = tab.icon;
|
|
return (
|
|
<Tooltip key={tab.id} delayDuration={500}>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveMainTab(tab.id)}
|
|
aria-label={tab.label}
|
|
aria-selected={isActive}
|
|
role="tab"
|
|
className={cn(
|
|
headerIconButtonClass,
|
|
isActive && 'text-foreground'
|
|
)}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
{tab.badge !== undefined && tab.badge > 0 && (
|
|
<span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
|
|
{tab.badge}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{tab.label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const headerClassName = cn(
|
|
'header-safe-area border-b relative z-10',
|
|
isDesktopApp ? 'bg-background' : 'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80'
|
|
);
|
|
|
|
return (
|
|
<header
|
|
ref={headerRef}
|
|
className={headerClassName}
|
|
style={{ borderColor: 'var(--interactive-border)' }}
|
|
>
|
|
{isMobile ? renderMobile() : renderDesktop()}
|
|
</header>
|
|
);
|
|
};
|