feat(ui): add desktop git sidebar + terminal dock and improve in-app PR workflow (#362)
* feat: add unified dropdown with services content in header * feat: add right Git sidebar with resizable panel * feat: implement responsive panel auto-toggle and terminal rehydration - Auto-close the right sidebar when width is below a threshold and auto-open it when space permits - Auto-close the bottom terminal when height is below a threshold and auto-open it when enough space - Apply a dedicated rehydrated streaming configuration for terminal sessions to optimize reconnect behavior * feat: enhance PR view with status caching and annotations * feat(ui): enable chat dispatch in PullRequestSection * feat(TerminalView): adjust layout * feat: refine chat input layout and text selection menu * fix(ui): show empty state in GitView when no changes * feat(git): update PR actions styling and create PR button
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
3f29b2c6a2
commit
5b0a97d170
@@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
|
||||
const BOTTOM_DOCK_MIN_HEIGHT = 180;
|
||||
const BOTTOM_DOCK_MAX_HEIGHT = 640;
|
||||
const BOTTOM_DOCK_COLLAPSE_THRESHOLD = 110;
|
||||
|
||||
interface BottomTerminalDockProps {
|
||||
isOpen: boolean;
|
||||
isMobile: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const BottomTerminalDock: React.FC<BottomTerminalDockProps> = ({ isOpen, isMobile, children }) => {
|
||||
const bottomTerminalHeight = useUIStore((state) => state.bottomTerminalHeight);
|
||||
const setBottomTerminalHeight = useUIStore((state) => state.setBottomTerminalHeight);
|
||||
const setBottomTerminalOpen = useUIStore((state) => state.setBottomTerminalOpen);
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
const startYRef = React.useRef(0);
|
||||
const startHeightRef = React.useRef(bottomTerminalHeight || 300);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isMobile || !isResizing) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePointerMove = (event: PointerEvent) => {
|
||||
const delta = startYRef.current - event.clientY;
|
||||
const nextHeight = Math.min(
|
||||
BOTTOM_DOCK_MAX_HEIGHT,
|
||||
Math.max(BOTTOM_DOCK_MIN_HEIGHT, startHeightRef.current + delta)
|
||||
);
|
||||
setBottomTerminalHeight(nextHeight);
|
||||
};
|
||||
|
||||
const handlePointerUp = () => {
|
||||
setIsResizing(false);
|
||||
const latestState = useUIStore.getState();
|
||||
if (latestState.bottomTerminalHeight <= BOTTOM_DOCK_COLLAPSE_THRESHOLD) {
|
||||
setBottomTerminalOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', handlePointerMove);
|
||||
window.addEventListener('pointerup', handlePointerUp, { once: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('pointermove', handlePointerMove);
|
||||
window.removeEventListener('pointerup', handlePointerUp);
|
||||
};
|
||||
}, [isMobile, isResizing, setBottomTerminalHeight, setBottomTerminalOpen]);
|
||||
|
||||
if (isMobile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const appliedHeight = isOpen
|
||||
? Math.min(BOTTOM_DOCK_MAX_HEIGHT, Math.max(BOTTOM_DOCK_MIN_HEIGHT, bottomTerminalHeight || 300))
|
||||
: 0;
|
||||
|
||||
const handlePointerDown = (event: React.PointerEvent) => {
|
||||
if (!isOpen) return;
|
||||
setIsResizing(true);
|
||||
startYRef.current = event.clientY;
|
||||
startHeightRef.current = appliedHeight;
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
'relative flex overflow-hidden border-t border-border bg-sidebar',
|
||||
isResizing ? 'transition-none' : 'transition-[height] duration-300 ease-in-out',
|
||||
!isOpen && 'border-t-0'
|
||||
)}
|
||||
style={{
|
||||
height: `${appliedHeight}px`,
|
||||
minHeight: `${appliedHeight}px`,
|
||||
maxHeight: `${appliedHeight}px`,
|
||||
}}
|
||||
aria-hidden={!isOpen || appliedHeight === 0}
|
||||
>
|
||||
{isOpen && (
|
||||
<div
|
||||
className={cn(
|
||||
'absolute left-0 top-0 z-20 h-[4px] w-full cursor-row-resize hover:bg-primary/50 transition-colors',
|
||||
isResizing && 'bg-primary'
|
||||
)}
|
||||
onPointerDown={handlePointerDown}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
aria-label="Resize terminal panel"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'relative z-10 flex h-full min-h-0 w-full flex-col transition-opacity duration-300 ease-in-out',
|
||||
!isOpen && 'pointer-events-none select-none opacity-0'
|
||||
)}
|
||||
aria-hidden={!isOpen}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -12,8 +12,9 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { AnimatedTabs } from '@/components/ui/animated-tabs';
|
||||
|
||||
import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCloseLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGithubFill, RiLayoutLeftLine, RiPlayListAddLine, RiQuestionLine, RiRefreshLine, RiSettings3Line, RiTerminalBoxLine, RiTimerLine, type RemixiconComponentType } from '@remixicon/react';
|
||||
import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCloseLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGithubFill, RiLayoutLeftLine, RiLayoutRightLine, RiPlayListAddLine, RiRefreshLine, RiServerLine, RiSettings3Line, RiStackLine, RiTerminalBoxLine, RiTimerLine, type RemixiconComponentType } from '@remixicon/react';
|
||||
import { DiffIcon } from '@/components/icons/DiffIcon';
|
||||
import { useUIStore, type MainTab } from '@/stores/useUIStore';
|
||||
import { useUpdateStore } from '@/stores/useUpdateStore';
|
||||
@@ -27,7 +28,7 @@ import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
|
||||
import { useDiffFileCount } from '@/components/views/DiffView';
|
||||
import { McpDropdown } from '@/components/mcp/McpDropdown';
|
||||
import { McpDropdown, McpDropdownContent } from '@/components/mcp/McpDropdown';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { formatPercent, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
|
||||
import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar';
|
||||
@@ -46,7 +47,7 @@ import {
|
||||
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react';
|
||||
import type { UsageWindow } from '@/types';
|
||||
import type { GitHubAuthStatus } from '@/lib/api/types';
|
||||
import { DesktopHostSwitcherButton } from '@/components/desktop/DesktopHostSwitcher';
|
||||
import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
|
||||
import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
|
||||
import { isDesktopShell } from '@/lib/desktop';
|
||||
|
||||
@@ -106,9 +107,10 @@ interface TabConfig {
|
||||
export const Header: React.FC = () => {
|
||||
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
||||
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
||||
const toggleBottomTerminal = useUIStore((state) => state.toggleBottomTerminal);
|
||||
const toggleRightSidebar = useUIStore((state) => state.toggleRightSidebar);
|
||||
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
|
||||
const toggleCommandPalette = useUIStore((state) => state.toggleCommandPalette);
|
||||
const toggleHelpDialog = useUIStore((state) => state.toggleHelpDialog);
|
||||
const activeMainTab = useUIStore((state) => state.activeMainTab);
|
||||
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
|
||||
|
||||
@@ -195,6 +197,16 @@ export const Header: React.FC = () => {
|
||||
const githubAccounts = githubAuthStatus?.accounts ?? [];
|
||||
const [isSwitchingGitHubAccount, setIsSwitchingGitHubAccount] = React.useState(false);
|
||||
const [isMobileRateLimitsOpen, setIsMobileRateLimitsOpen] = React.useState(false);
|
||||
const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
|
||||
const [isUsageRefreshSpinning, setIsUsageRefreshSpinning] = React.useState(false);
|
||||
const [desktopServicesTab, setDesktopServicesTab] = React.useState<'instance' | 'usage' | 'mcp'>(
|
||||
isDesktopApp ? 'instance' : 'usage'
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!isDesktopApp && desktopServicesTab === 'instance') {
|
||||
setDesktopServicesTab('usage');
|
||||
}
|
||||
}, [desktopServicesTab, isDesktopApp]);
|
||||
useQuotaAutoRefresh();
|
||||
const selectedModels = useQuotaStore((state) => state.selectedModels);
|
||||
const expandedFamilies = useQuotaStore((state) => state.expandedFamilies);
|
||||
@@ -318,6 +330,15 @@ export const Header: React.FC = () => {
|
||||
}
|
||||
}, [setQuotaDisplayMode]);
|
||||
|
||||
const handleUsageRefresh = React.useCallback(() => {
|
||||
if (isUsageRefreshSpinning) return;
|
||||
setIsUsageRefreshSpinning(true);
|
||||
const minSpinPromise = new Promise(resolve => setTimeout(resolve, 500));
|
||||
Promise.all([fetchAllQuotas(), minSpinPromise]).finally(() => {
|
||||
setIsUsageRefreshSpinning(false);
|
||||
});
|
||||
}, [fetchAllQuotas, isUsageRefreshSpinning]);
|
||||
|
||||
const currentSession = React.useMemo(() => {
|
||||
if (!currentSessionId) return null;
|
||||
return sessions.find((s) => s.id === currentSessionId) ?? null;
|
||||
@@ -604,18 +625,49 @@ export const Header: React.FC = () => {
|
||||
badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
|
||||
},
|
||||
{ id: 'files', label: 'Files', icon: RiFolder6Line },
|
||||
{ id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
|
||||
{
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
base.push({
|
||||
id: 'terminal',
|
||||
label: 'Terminal',
|
||||
icon: RiTerminalBoxLine,
|
||||
}, {
|
||||
id: 'git',
|
||||
label: 'Git',
|
||||
icon: RiGitBranchLine,
|
||||
showDot: isMobile && diffFileCount > 0,
|
||||
},
|
||||
);
|
||||
showDot: diffFileCount > 0,
|
||||
});
|
||||
}
|
||||
|
||||
return base;
|
||||
}, [diffFileCount, isMobile, showPlanTab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile && (activeMainTab === 'git' || activeMainTab === 'terminal')) {
|
||||
setActiveMainTab('chat');
|
||||
}
|
||||
}, [activeMainTab, isMobile, setActiveMainTab]);
|
||||
|
||||
const servicesTabs = React.useMemo(() => {
|
||||
const base: Array<{ value: 'instance' | 'usage' | 'mcp'; label: string; icon: RemixiconComponentType }> = [];
|
||||
if (isDesktopApp) {
|
||||
base.push({ value: 'instance', label: 'Instance', icon: RiServerLine });
|
||||
}
|
||||
base.push(
|
||||
{ value: 'usage', label: 'Usage', icon: RiTimerLine },
|
||||
{ value: 'mcp', label: 'MCP', icon: RiCommandLine }
|
||||
);
|
||||
return base;
|
||||
}, [isDesktopApp]);
|
||||
|
||||
const quotaDisplayTabs = React.useMemo(() => {
|
||||
return [
|
||||
{ value: 'usage' as const, label: 'Used' },
|
||||
{ value: 'remaining' as const, label: 'Remaining' },
|
||||
];
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (hasModifier(e) && !e.shiftKey && !e.altKey) {
|
||||
@@ -749,9 +801,225 @@ export const Header: React.FC = () => {
|
||||
|
||||
<div className="flex items-center gap-1 pr-3">
|
||||
<OpenInAppButton directory={openDirectory} className="mr-1" />
|
||||
{isDesktopApp && (
|
||||
<DesktopHostSwitcherButton headerIconButtonClass={headerIconButtonClass} />
|
||||
)}
|
||||
<DropdownMenu
|
||||
open={isDesktopServicesOpen}
|
||||
onOpenChange={(open) => {
|
||||
setIsDesktopServicesOpen(open);
|
||||
if (open && desktopServicesTab === 'usage' && quotaResults.length === 0) {
|
||||
fetchAllQuotas();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open instance, usage and MCP"
|
||||
className={headerIconButtonClass}
|
||||
>
|
||||
<RiStackLine className="h-5 w-5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Instance / Usage / MCP</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<DropdownMenuContent align="end" className="w-[min(30rem,calc(100vw-2rem))] max-h-[75vh] overflow-hidden p-0">
|
||||
<div className="sticky top-0 z-20 border-b border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-2">
|
||||
<AnimatedTabs<'instance' | 'usage' | 'mcp'>
|
||||
value={desktopServicesTab}
|
||||
onValueChange={(value) => {
|
||||
setDesktopServicesTab(value);
|
||||
if (value === 'usage' && quotaResults.length === 0) {
|
||||
fetchAllQuotas();
|
||||
}
|
||||
}}
|
||||
tabs={servicesTabs}
|
||||
className="rounded-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isDesktopApp && desktopServicesTab === 'instance' && (
|
||||
<DesktopHostSwitcherDialog
|
||||
embedded
|
||||
open={isDesktopServicesOpen && desktopServicesTab === 'instance'}
|
||||
onOpenChange={() => {}}
|
||||
onHostSwitched={() => setIsDesktopServicesOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{desktopServicesTab === 'mcp' && (
|
||||
<McpDropdownContent active={isDesktopServicesOpen && desktopServicesTab === 'mcp'} />
|
||||
)}
|
||||
|
||||
{desktopServicesTab === 'usage' && (
|
||||
<div className="max-h-[calc(75vh-3.25rem)] overflow-y-auto overflow-x-hidden">
|
||||
<div className="sticky top-0 z-20 bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
|
||||
<DropdownMenuLabel className="flex items-center justify-between gap-3 py-2.5">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="typography-ui-header font-semibold text-foreground">Rate limits</span>
|
||||
<span className="truncate typography-ui-label text-muted-foreground">
|
||||
Last updated {formatTime(quotaLastUpdated)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<AnimatedTabs<'usage' | 'remaining'>
|
||||
value={quotaDisplayMode}
|
||||
onValueChange={handleDisplayModeChange}
|
||||
tabs={quotaDisplayTabs}
|
||||
size="sm"
|
||||
className="w-[8.25rem]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors',
|
||||
'hover:text-foreground hover:bg-interactive-hover',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
|
||||
)}
|
||||
onClick={handleUsageRefresh}
|
||||
disabled={isQuotaLoading || isUsageRefreshSpinning}
|
||||
aria-label="Refresh rate limits"
|
||||
>
|
||||
<RiRefreshLine className={cn('h-4 w-4', isUsageRefreshSpinning && 'animate-spin')} />
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
</div>
|
||||
{!hasRateLimits && (
|
||||
<DropdownMenuItem
|
||||
className="cursor-default hover:bg-transparent focus:bg-transparent data-[highlighted]:bg-transparent"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
<span className="typography-ui-label text-muted-foreground">No rate limits available.</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{rateLimitGroups.map((group, index) => {
|
||||
const providerExpandedFamilies = expandedFamilies[group.providerId] ?? [];
|
||||
|
||||
return (
|
||||
<React.Fragment key={group.providerId}>
|
||||
<DropdownMenuLabel className="sticky top-[44px] z-10 flex items-center gap-2 bg-[var(--surface-elevated)] typography-ui-label text-foreground">
|
||||
<ProviderLogo providerId={group.providerId} className="h-4 w-4" />
|
||||
{group.providerName}
|
||||
</DropdownMenuLabel>
|
||||
|
||||
{group.entries.length === 0 && (!group.modelFamilies || group.modelFamilies.length === 0) ? (
|
||||
<DropdownMenuItem
|
||||
key={`${group.providerId}-empty`}
|
||||
className="cursor-default hover:bg-transparent focus:bg-transparent data-[highlighted]:bg-transparent"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
<span className="typography-ui-label text-muted-foreground">No rate limits reported.</span>
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<>
|
||||
{group.entries.map(([label, window]) => (
|
||||
<DropdownMenuItem
|
||||
key={`${group.providerId}-${label}`}
|
||||
className="cursor-default items-start hover:bg-transparent focus:bg-transparent data-[highlighted]:bg-transparent"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
<span className="flex min-w-0 flex-1 flex-col gap-2">
|
||||
{(() => {
|
||||
const displayPercent = quotaDisplayMode === 'remaining'
|
||||
? window.remainingPercent
|
||||
: window.usedPercent;
|
||||
return (
|
||||
<>
|
||||
<span className="flex min-w-0 items-center justify-between gap-3">
|
||||
<span className="min-w-0 flex items-center gap-2">
|
||||
<span className="truncate typography-ui-label text-foreground">{formatWindowLabel(label)}</span>
|
||||
{(window.resetAfterFormatted ?? window.resetAtFormatted) ? (
|
||||
<span className="truncate typography-ui-label text-muted-foreground">
|
||||
{window.resetAfterFormatted ?? window.resetAtFormatted}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="typography-ui-label text-foreground tabular-nums">
|
||||
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
|
||||
</span>
|
||||
</span>
|
||||
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1.5 mb-1.5" />
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
|
||||
{group.modelFamilies && group.modelFamilies.length > 0 && (
|
||||
<div className="px-2 py-1">
|
||||
{group.modelFamilies.map((family) => {
|
||||
const isExpanded = providerExpandedFamilies.includes(family.familyId ?? 'other');
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
key={family.familyId ?? 'other'}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleFamilyExpanded(group.providerId, family.familyId ?? 'other')}
|
||||
>
|
||||
<CollapsibleTrigger className="flex w-full items-center justify-between py-1.5 text-left">
|
||||
<span className="typography-ui-label font-medium text-foreground">
|
||||
{family.familyLabel}
|
||||
</span>
|
||||
{isExpanded ? (
|
||||
<RiArrowDownSLine className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<RiArrowRightSLine className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="space-y-1 pl-2">
|
||||
{family.models.map(([modelName, window]) => (
|
||||
<div
|
||||
key={`${group.providerId}-${modelName}`}
|
||||
className="py-1.5"
|
||||
>
|
||||
<div className="flex min-w-0 flex-col gap-1.5">
|
||||
<span className="flex min-w-0 items-center justify-between gap-3">
|
||||
<span className="truncate typography-micro text-muted-foreground">{modelName}</span>
|
||||
{(() => {
|
||||
const displayPercent = quotaDisplayMode === 'remaining'
|
||||
? window.remainingPercent
|
||||
: window.usedPercent;
|
||||
return (
|
||||
<span className="typography-ui-label text-foreground tabular-nums">
|
||||
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</span>
|
||||
{(() => {
|
||||
const displayPercent = quotaDisplayMode === 'remaining'
|
||||
? window.remainingPercent
|
||||
: window.usedPercent;
|
||||
return (
|
||||
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1.5 mb-1.5" />
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{index < rateLimitGroups.length - 1 && <DropdownMenuSeparator />}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
@@ -768,223 +1036,38 @@ export const Header: React.FC = () => {
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<DropdownMenu onOpenChange={(open) => {
|
||||
if (open && quotaResults.length === 0) {
|
||||
fetchAllQuotas();
|
||||
}
|
||||
}}>
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="View rate limits"
|
||||
className={headerIconButtonClass}
|
||||
disabled={isQuotaLoading}
|
||||
>
|
||||
<RiTimerLine className="h-5 w-5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Rate limits</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<DropdownMenuContent align="end" className="w-80 max-h-[70vh] overflow-y-auto overflow-x-hidden p-0">
|
||||
<div className="sticky top-0 z-20 bg-[var(--surface-elevated)] border-b border-[var(--interactive-border)]">
|
||||
<DropdownMenuLabel className="flex items-center justify-between gap-3 typography-ui-header font-semibold text-foreground">
|
||||
<span>Rate limits</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="flex items-center rounded-md border border-[var(--interactive-border)] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-sm typography-micro text-[10px] transition-colors',
|
||||
quotaDisplayMode === 'usage'
|
||||
? 'bg-interactive-selection text-interactive-selection-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
onClick={() => handleDisplayModeChange('usage')}
|
||||
aria-label="Show used quota"
|
||||
>
|
||||
Used
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-sm typography-micro text-[10px] transition-colors',
|
||||
quotaDisplayMode === 'remaining'
|
||||
? 'bg-interactive-selection text-interactive-selection-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
onClick={() => handleDisplayModeChange('remaining')}
|
||||
aria-label="Show remaining quota"
|
||||
>
|
||||
Remaining
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors',
|
||||
'hover:text-foreground hover:bg-interactive-hover',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
|
||||
)}
|
||||
onClick={() => fetchAllQuotas()}
|
||||
disabled={isQuotaLoading}
|
||||
aria-label="Refresh rate limits"
|
||||
>
|
||||
<RiRefreshLine className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<div className="px-2 pb-2 typography-micro text-muted-foreground text-[10px]">
|
||||
Last updated {formatTime(quotaLastUpdated)}
|
||||
</div>
|
||||
</div>
|
||||
{!hasRateLimits && (
|
||||
<DropdownMenuItem className="cursor-default" onSelect={(event) => event.preventDefault()}>
|
||||
<span className="typography-ui-label text-muted-foreground">No rate limits available.</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{rateLimitGroups.map((group, index) => {
|
||||
const providerExpandedFamilies = expandedFamilies[group.providerId] ?? [];
|
||||
|
||||
return (
|
||||
<React.Fragment key={group.providerId}>
|
||||
<DropdownMenuLabel className="sticky top-[60px] z-10 flex items-center gap-2 bg-[var(--surface-elevated)] typography-ui-label text-foreground">
|
||||
<ProviderLogo providerId={group.providerId} className="h-4 w-4" />
|
||||
{group.providerName}
|
||||
</DropdownMenuLabel>
|
||||
|
||||
{/* Provider-level entries */}
|
||||
{group.entries.length === 0 && (!group.modelFamilies || group.modelFamilies.length === 0) ? (
|
||||
<DropdownMenuItem
|
||||
key={`${group.providerId}-empty`}
|
||||
className="cursor-default"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
<span className="typography-ui-label text-muted-foreground">No rate limits reported.</span>
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<>
|
||||
{/* Provider-level windows */}
|
||||
{group.entries.map(([label, window]) => (
|
||||
<DropdownMenuItem
|
||||
key={`${group.providerId}-${label}`}
|
||||
className="cursor-default items-start"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
<span className="flex min-w-0 flex-1 flex-col gap-2">
|
||||
{(() => {
|
||||
const displayPercent = quotaDisplayMode === 'remaining'
|
||||
? window.remainingPercent
|
||||
: window.usedPercent;
|
||||
return (
|
||||
<>
|
||||
<span className="flex min-w-0 items-center justify-between gap-3">
|
||||
<span className="truncate typography-micro text-muted-foreground">{formatWindowLabel(label)}</span>
|
||||
<span className="typography-ui-label text-foreground tabular-nums">
|
||||
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
|
||||
</span>
|
||||
</span>
|
||||
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1" />
|
||||
<span className="flex items-center justify-between typography-micro text-muted-foreground text-[10px]">
|
||||
<span>{window.resetAfterFormatted ?? window.resetAtFormatted ?? ''}</span>
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
|
||||
{/* Model families with collapsible sections - default COLLAPSED */}
|
||||
{group.modelFamilies && group.modelFamilies.length > 0 && (
|
||||
<div className="px-2 py-1">
|
||||
{group.modelFamilies.map((family) => {
|
||||
const isExpanded = providerExpandedFamilies.includes(family.familyId ?? 'other');
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
key={family.familyId ?? 'other'}
|
||||
open={isExpanded}
|
||||
onOpenChange={() => toggleFamilyExpanded(group.providerId, family.familyId ?? 'other')}
|
||||
>
|
||||
<CollapsibleTrigger className="flex w-full items-center justify-between py-1.5 text-left">
|
||||
<span className="typography-ui-label font-medium text-foreground">
|
||||
{family.familyLabel}
|
||||
</span>
|
||||
{isExpanded ? (
|
||||
<RiArrowDownSLine className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<RiArrowRightSLine className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="space-y-1 pl-2">
|
||||
{family.models.map(([modelName, window]) => (
|
||||
<div
|
||||
key={`${group.providerId}-${modelName}`}
|
||||
className="py-1.5"
|
||||
>
|
||||
<div className="flex min-w-0 flex-col gap-1.5">
|
||||
<span className="flex min-w-0 items-center justify-between gap-3">
|
||||
<span className="truncate typography-micro text-muted-foreground">{modelName}</span>
|
||||
{(() => {
|
||||
const displayPercent = quotaDisplayMode === 'remaining'
|
||||
? window.remainingPercent
|
||||
: window.usedPercent;
|
||||
return (
|
||||
<span className="typography-ui-label text-foreground tabular-nums">
|
||||
{formatPercent(displayPercent) === '-' ? '' : formatPercent(displayPercent)}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</span>
|
||||
{(() => {
|
||||
const displayPercent = quotaDisplayMode === 'remaining'
|
||||
? window.remainingPercent
|
||||
: window.usedPercent;
|
||||
return (
|
||||
<UsageProgressBar percent={displayPercent} tonePercent={window.usedPercent} className="h-1" />
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{index < rateLimitGroups.length - 1 && <DropdownMenuSeparator />}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<McpDropdown headerIconButtonClass={headerIconButtonClass} />
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleBottomTerminal}
|
||||
aria-label="Toggle terminal panel"
|
||||
className={headerIconButtonClass}
|
||||
>
|
||||
<RiTerminalBoxLine className="h-5 w-5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Terminal panel</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleHelpDialog}
|
||||
aria-label="Keyboard shortcuts"
|
||||
onClick={toggleRightSidebar}
|
||||
aria-label="Toggle git sidebar"
|
||||
className={headerIconButtonClass}
|
||||
>
|
||||
<RiQuestionLine className="h-5 w-5" />
|
||||
<RiLayoutRightLine className="h-5 w-5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Keyboard Shortcuts ({getModifierLabel()}+.)</p>
|
||||
<p>Git sidebar</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{githubAuthStatus?.connected && !isMobile ? (
|
||||
githubAccounts.length > 1 ? (
|
||||
<DropdownMenu>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Header } from './Header';
|
||||
import { BottomTerminalDock } from './BottomTerminalDock';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { RightSidebar } from './RightSidebar';
|
||||
import { ErrorBoundary } from '../ui/ErrorBoundary';
|
||||
import { CommandPalette } from '../ui/CommandPalette';
|
||||
import { HelpDialog } from '../ui/HelpDialog';
|
||||
@@ -19,8 +21,16 @@ import { cn } from '@/lib/utils';
|
||||
import { ChatView, PlanView, GitView, DiffView, TerminalView, FilesView, SettingsView, SettingsWindow } from '@/components/views';
|
||||
|
||||
export const MainLayout: React.FC = () => {
|
||||
const RIGHT_SIDEBAR_AUTO_CLOSE_WIDTH = 1140;
|
||||
const RIGHT_SIDEBAR_AUTO_OPEN_WIDTH = 1220;
|
||||
const BOTTOM_TERMINAL_AUTO_CLOSE_HEIGHT = 640;
|
||||
const BOTTOM_TERMINAL_AUTO_OPEN_HEIGHT = 700;
|
||||
const {
|
||||
isSidebarOpen,
|
||||
isRightSidebarOpen,
|
||||
isBottomTerminalOpen,
|
||||
setRightSidebarOpen,
|
||||
setBottomTerminalOpen,
|
||||
activeMainTab,
|
||||
setIsMobile,
|
||||
isSessionSwitcherOpen,
|
||||
@@ -32,6 +42,8 @@ export const MainLayout: React.FC = () => {
|
||||
} = useUIStore();
|
||||
|
||||
const { isMobile } = useDeviceInfo();
|
||||
const rightSidebarAutoClosedRef = React.useRef(false);
|
||||
const bottomTerminalAutoClosedRef = React.useRef(false);
|
||||
|
||||
useEdgeSwipe({ enabled: true });
|
||||
|
||||
@@ -78,6 +90,95 @@ export const MainLayout: React.FC = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
let timeoutId: number | undefined;
|
||||
|
||||
const handleResponsivePanels = () => {
|
||||
const state = useUIStore.getState();
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
const shouldCloseRightSidebar = width < RIGHT_SIDEBAR_AUTO_CLOSE_WIDTH;
|
||||
const canAutoOpenRightSidebar = width >= RIGHT_SIDEBAR_AUTO_OPEN_WIDTH;
|
||||
|
||||
if (shouldCloseRightSidebar) {
|
||||
if (state.isRightSidebarOpen) {
|
||||
setRightSidebarOpen(false);
|
||||
rightSidebarAutoClosedRef.current = true;
|
||||
}
|
||||
} else if (canAutoOpenRightSidebar && rightSidebarAutoClosedRef.current) {
|
||||
setRightSidebarOpen(true);
|
||||
rightSidebarAutoClosedRef.current = false;
|
||||
}
|
||||
|
||||
const shouldCloseBottomTerminal =
|
||||
height < BOTTOM_TERMINAL_AUTO_CLOSE_HEIGHT;
|
||||
const canAutoOpenBottomTerminal =
|
||||
height >= BOTTOM_TERMINAL_AUTO_OPEN_HEIGHT;
|
||||
|
||||
if (shouldCloseBottomTerminal) {
|
||||
if (state.isBottomTerminalOpen) {
|
||||
setBottomTerminalOpen(false);
|
||||
bottomTerminalAutoClosedRef.current = true;
|
||||
}
|
||||
} else if (canAutoOpenBottomTerminal && bottomTerminalAutoClosedRef.current) {
|
||||
setBottomTerminalOpen(true);
|
||||
bottomTerminalAutoClosedRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
if (timeoutId !== undefined) {
|
||||
window.clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
timeoutId = window.setTimeout(() => {
|
||||
handleResponsivePanels();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
handleResponsivePanels();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (timeoutId !== undefined) {
|
||||
window.clearTimeout(timeoutId);
|
||||
}
|
||||
};
|
||||
}, [setBottomTerminalOpen, setRightSidebarOpen]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
const unsubscribe = useUIStore.subscribe((state, prevState) => {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
const rightCanAutoOpen = width >= RIGHT_SIDEBAR_AUTO_OPEN_WIDTH;
|
||||
const bottomCanAutoOpen =
|
||||
height >= BOTTOM_TERMINAL_AUTO_OPEN_HEIGHT;
|
||||
|
||||
if (state.isRightSidebarOpen !== prevState.isRightSidebarOpen && rightCanAutoOpen) {
|
||||
rightSidebarAutoClosedRef.current = false;
|
||||
}
|
||||
|
||||
if (state.isBottomTerminalOpen !== prevState.isBottomTerminalOpen && bottomCanAutoOpen) {
|
||||
bottomTerminalAutoClosedRef.current = false;
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined' || typeof document === 'undefined') {
|
||||
return;
|
||||
@@ -378,16 +479,26 @@ export const MainLayout: React.FC = () => {
|
||||
<Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
|
||||
<SessionSidebar />
|
||||
</Sidebar>
|
||||
<main className="flex-1 overflow-hidden bg-background relative">
|
||||
<div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
|
||||
<ErrorBoundary><ChatView /></ErrorBoundary>
|
||||
<div className="flex flex-1 min-w-0 flex-col overflow-hidden">
|
||||
<div className="flex flex-1 min-h-0 overflow-hidden">
|
||||
<main className="flex-1 overflow-hidden bg-background relative">
|
||||
<div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
|
||||
<ErrorBoundary><ChatView /></ErrorBoundary>
|
||||
</div>
|
||||
{secondaryView && (
|
||||
<div className="absolute inset-0">
|
||||
<ErrorBoundary>{secondaryView}</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
<RightSidebar isOpen={isRightSidebarOpen} isMobile={isMobile}>
|
||||
<ErrorBoundary><GitView mode="sidebar" /></ErrorBoundary>
|
||||
</RightSidebar>
|
||||
</div>
|
||||
{secondaryView && (
|
||||
<div className="absolute inset-0">
|
||||
<ErrorBoundary>{secondaryView}</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
<BottomTerminalDock isOpen={isBottomTerminalOpen} isMobile={isMobile}>
|
||||
<ErrorBoundary><TerminalView /></ErrorBoundary>
|
||||
</BottomTerminalDock>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
|
||||
const RIGHT_SIDEBAR_MIN_WIDTH = 400;
|
||||
const RIGHT_SIDEBAR_MAX_WIDTH = 860;
|
||||
|
||||
interface RightSidebarProps {
|
||||
isOpen: boolean;
|
||||
isMobile: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, isMobile, children }) => {
|
||||
const rightSidebarWidth = useUIStore((state) => state.rightSidebarWidth);
|
||||
const setRightSidebarWidth = useUIStore((state) => state.setRightSidebarWidth);
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
const startXRef = React.useRef(0);
|
||||
const startWidthRef = React.useRef(rightSidebarWidth || 420);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isMobile || !isResizing) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePointerMove = (event: PointerEvent) => {
|
||||
const delta = startXRef.current - event.clientX;
|
||||
const nextWidth = Math.min(
|
||||
RIGHT_SIDEBAR_MAX_WIDTH,
|
||||
Math.max(RIGHT_SIDEBAR_MIN_WIDTH, startWidthRef.current + delta)
|
||||
);
|
||||
setRightSidebarWidth(nextWidth);
|
||||
};
|
||||
|
||||
const handlePointerUp = () => {
|
||||
setIsResizing(false);
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', handlePointerMove);
|
||||
window.addEventListener('pointerup', handlePointerUp, { once: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('pointermove', handlePointerMove);
|
||||
window.removeEventListener('pointerup', handlePointerUp);
|
||||
};
|
||||
}, [isMobile, isResizing, setRightSidebarWidth]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isMobile && isResizing) {
|
||||
setIsResizing(false);
|
||||
}
|
||||
}, [isMobile, isResizing]);
|
||||
|
||||
if (isMobile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const appliedWidth = isOpen
|
||||
? Math.min(RIGHT_SIDEBAR_MAX_WIDTH, Math.max(RIGHT_SIDEBAR_MIN_WIDTH, rightSidebarWidth || 420))
|
||||
: 0;
|
||||
|
||||
const handlePointerDown = (event: React.PointerEvent) => {
|
||||
if (!isOpen) {
|
||||
return;
|
||||
}
|
||||
setIsResizing(true);
|
||||
startXRef.current = event.clientX;
|
||||
startWidthRef.current = appliedWidth;
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
'relative flex h-full overflow-hidden border-l border-border bg-sidebar',
|
||||
isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
|
||||
!isOpen && 'border-l-0'
|
||||
)}
|
||||
style={{
|
||||
width: `${appliedWidth}px`,
|
||||
minWidth: `${appliedWidth}px`,
|
||||
maxWidth: `${appliedWidth}px`,
|
||||
overflowX: 'clip',
|
||||
}}
|
||||
aria-hidden={!isOpen || appliedWidth === 0}
|
||||
>
|
||||
{isOpen && (
|
||||
<div
|
||||
className={cn(
|
||||
'absolute left-0 top-0 z-20 h-full w-[4px] cursor-col-resize hover:bg-primary/50 transition-colors',
|
||||
isResizing && 'bg-primary'
|
||||
)}
|
||||
onPointerDown={handlePointerDown}
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-label="Resize right panel"
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'relative z-10 flex h-full min-h-0 w-full flex-col transition-opacity duration-300 ease-in-out',
|
||||
!isOpen && 'pointer-events-none select-none opacity-0'
|
||||
)}
|
||||
aria-hidden={!isOpen}
|
||||
>
|
||||
{isOpen ? children : null}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { RiDownloadLine, RiInformationLine, RiSettings3Line } from '@remixicon/react';
|
||||
import { RiDownloadLine, RiInformationLine, RiQuestionLine, RiSettings3Line } from '@remixicon/react';
|
||||
import { toast } from '@/components/ui';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ErrorBoundary } from '../ui/ErrorBoundary';
|
||||
@@ -20,7 +20,7 @@ interface SidebarProps {
|
||||
}
|
||||
|
||||
export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children }) => {
|
||||
const { sidebarWidth, setSidebarWidth, setSettingsDialogOpen, setAboutDialogOpen } = useUIStore();
|
||||
const { sidebarWidth, setSidebarWidth, setSettingsDialogOpen, setAboutDialogOpen, toggleHelpDialog } = useUIStore();
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
const startXRef = React.useRef(0);
|
||||
const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
|
||||
@@ -193,39 +193,58 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
|
||||
<RiSettings3Line className="h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
{(available || downloaded) ? (
|
||||
<button
|
||||
onClick={() => setUpdateDialogOpen(true)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-md px-2 py-1',
|
||||
'text-xs font-semibold',
|
||||
'bg-primary/10 text-primary',
|
||||
'hover:bg-primary/20',
|
||||
'transition-colors'
|
||||
)}
|
||||
>
|
||||
<RiDownloadLine className="h-3.5 w-3.5" />
|
||||
<span>Update</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-1">
|
||||
{(available || downloaded) ? (
|
||||
<button
|
||||
onClick={() => setUpdateDialogOpen(true)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-md px-2 py-1',
|
||||
'text-xs font-semibold',
|
||||
'bg-primary/10 text-primary',
|
||||
'hover:bg-primary/20',
|
||||
'transition-colors'
|
||||
)}
|
||||
>
|
||||
<RiDownloadLine className="h-3.5 w-3.5" />
|
||||
<span>Update</span>
|
||||
</button>
|
||||
|
||||
) : !isDesktopApp && (
|
||||
) : !isDesktopApp && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={() => setAboutDialogOpen(true)}
|
||||
className={cn(
|
||||
'flex h-8 w-8 items-center justify-center rounded-md',
|
||||
'text-sidebar-foreground/70',
|
||||
'hover:text-sidebar-foreground hover:bg-interactive-hover',
|
||||
'transition-all duration-200'
|
||||
)}
|
||||
>
|
||||
<RiInformationLine className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">About OpenChamber</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={() => setAboutDialogOpen(true)}
|
||||
onClick={toggleHelpDialog}
|
||||
className={cn(
|
||||
'flex h-8 w-8 items-center justify-center rounded-md',
|
||||
'text-sidebar-foreground/70',
|
||||
'hover:text-sidebar-foreground hover:bg-interactive-hover',
|
||||
'transition-all duration-200'
|
||||
)}
|
||||
aria-label="Keyboard shortcuts"
|
||||
>
|
||||
<RiInformationLine className="h-4 w-4" />
|
||||
<RiQuestionLine className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">About OpenChamber</TooltipContent>
|
||||
<TooltipContent side="top">Keyboard shortcuts</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UpdateDialog
|
||||
|
||||
Reference in New Issue
Block a user