refactor(layout): remove the legacy mobile layout from MainLayout and Header
Phone viewports run the separate MobileApp shell (and a viewport crossing now reloads into it), so the desktop layout's mobile branch was unreachable: the drawer machinery, the full-screen secondaryView surface switch (including the terminal/diagram desktop carve-out nothing could trigger), the mobile header with its tab bar, the Cmd+number tab shortcuts, the mobile quota panel, and the surface guard that reset non-chat tabs. DrawerContext had no consumers left and is deleted. Header drops from 2630 to 1853 lines; the desktop render is unchanged.
This commit is contained in:
Bohdan Triapitsyn
@@ -13,10 +13,8 @@ import {
|
|||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '@/components/ui/dropdown-menu';
|
} from '@/components/ui/dropdown-menu';
|
||||||
import { SortableTabsStrip, type SortableTabsStripItem } from '@/components/ui/sortable-tabs-strip';
|
|
||||||
|
|
||||||
import { DiffIcon } from '@/components/icons/DiffIcon';
|
import { useUIStore, type ContextPanelMode } from '@/stores/useUIStore';
|
||||||
import { useUIStore, type ContextPanelMode, type MainTab } from '@/stores/useUIStore';
|
|
||||||
import { useConfigStore } from '@/stores/useConfigStore';
|
import { useConfigStore } from '@/stores/useConfigStore';
|
||||||
import { useSessionUIStore } from '@/sync/session-ui-store';
|
import { useSessionUIStore } from '@/sync/session-ui-store';
|
||||||
import { useSessionWorktreeStore } from '@/sync/session-worktree-store';
|
import { useSessionWorktreeStore } from '@/sync/session-worktree-store';
|
||||||
@@ -39,33 +37,17 @@ import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
|
|||||||
import { WindowsWindowControls } from '@/components/desktop/WindowsWindowControls';
|
import { WindowsWindowControls } from '@/components/desktop/WindowsWindowControls';
|
||||||
import { UpdateDialog } from '@/components/ui/UpdateDialog';
|
import { UpdateDialog } from '@/components/ui/UpdateDialog';
|
||||||
import { useDeviceInfo, useTabletStandalonePwaRuntime } from '@/lib/device';
|
import { useDeviceInfo, useTabletStandalonePwaRuntime } from '@/lib/device';
|
||||||
import { cn, hasModifier } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { McpDropdownContent } from '@/components/mcp/McpDropdown';
|
|
||||||
import { McpIcon } from '@/components/icons/McpIcon';
|
|
||||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
|
||||||
import { formatQuotaValueLabel, formatQuotaResetLabel, formatWindowLabel, QUOTA_PROVIDERS } from '@/lib/quota';
|
|
||||||
import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar';
|
|
||||||
import { updateDesktopSettings } from '@/lib/persistence';
|
|
||||||
import { formatTimeForPreference } from '@/lib/timeFormat';
|
|
||||||
import { eventMatchesShortcut, formatShortcutForDisplay, getEffectiveShortcutCombo } from '@/lib/shortcuts';
|
import { eventMatchesShortcut, formatShortcutForDisplay, getEffectiveShortcutCombo } from '@/lib/shortcuts';
|
||||||
import {
|
import {
|
||||||
getAllModelFamilies,
|
|
||||||
getDisplayModelName,
|
|
||||||
groupModelsByFamily,
|
|
||||||
sortModelFamilies,
|
|
||||||
} from '@/lib/quota/model-families';
|
} from '@/lib/quota/model-families';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from '@/components/ui/collapsible';
|
} from '@/components/ui/collapsible';
|
||||||
import type { UsageWindow } from '@/types';
|
|
||||||
import type { GitHubAuthStatus } from '@/lib/api/types';
|
import type { GitHubAuthStatus } from '@/lib/api/types';
|
||||||
import type { SessionContextUsage } from '@/stores/types/sessionTypes';
|
import type { SessionContextUsage } from '@/stores/types/sessionTypes';
|
||||||
import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
|
import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
|
||||||
import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
|
import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
|
||||||
import { ProjectActionsButton } from '@/components/layout/ProjectActionsButton';
|
|
||||||
import { SessionSwitcherDropdown } from '@/components/session/SessionSwitcherDropdown';
|
import { SessionSwitcherDropdown } from '@/components/session/SessionSwitcherDropdown';
|
||||||
import { canUseElectronDesktopIPC, invokeDesktop, isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag, type UpdateInfo } from '@/lib/desktop';
|
import { canUseElectronDesktopIPC, invokeDesktop, isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag, type UpdateInfo } from '@/lib/desktop';
|
||||||
import { desktopHostsGet, redactSensitiveUrl } from '@/lib/desktopHosts';
|
import { desktopHostsGet, redactSensitiveUrl } from '@/lib/desktopHosts';
|
||||||
@@ -90,7 +72,6 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { startSessionTreeWorktreeMove, useIsSessionWorktreeMovePending } from '@/lib/worktrees/sessionWorktreeMove';
|
import { startSessionTreeWorktreeMove, useIsSessionWorktreeMovePending } from '@/lib/worktrees/sessionWorktreeMove';
|
||||||
|
|
||||||
const DESKTOP_HEADER_ICON_BUTTON_CLASS = 'app-region-no-drag inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md typography-ui-label font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:bg-interactive-hover transition-colors';
|
const DESKTOP_HEADER_ICON_BUTTON_CLASS = 'app-region-no-drag inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md typography-ui-label font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:bg-interactive-hover transition-colors';
|
||||||
const MOBILE_HEADER_ICON_BUTTON_CLASS = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 rounded-md 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 hover:bg-interactive-hover transition-colors';
|
|
||||||
|
|
||||||
type HeaderIconActionButtonProps = {
|
type HeaderIconActionButtonProps = {
|
||||||
visible?: boolean;
|
visible?: boolean;
|
||||||
@@ -416,14 +397,6 @@ const formatCompactHeaderLabel = (value: string): string => {
|
|||||||
return trimmed.length > 12 ? `${trimmed.slice(0, 9).trimEnd()}...` : trimmed;
|
return trimmed.length > 12 ? `${trimmed.slice(0, 9).trimEnd()}...` : trimmed;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatTime = (timestamp: number | null, timeFormatPreference: 'auto' | '12h' | '24h') => {
|
|
||||||
if (!timestamp) return '-';
|
|
||||||
try {
|
|
||||||
return formatTimeForPreference(timestamp, timeFormatPreference, { fallback: '-' });
|
|
||||||
} catch {
|
|
||||||
return '-';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalize = (value: string): string => {
|
const normalize = (value: string): string => {
|
||||||
if (!value) return '';
|
if (!value) return '';
|
||||||
@@ -444,32 +417,6 @@ const getActiveContextMode = (panelState: {
|
|||||||
return activeTab?.mode ?? null;
|
return activeTab?.mode ?? null;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface TabConfig {
|
|
||||||
id: MainTab;
|
|
||||||
label: string;
|
|
||||||
icon: IconName | 'diff';
|
|
||||||
badge?: number;
|
|
||||||
showDot?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RateLimitGroup {
|
|
||||||
providerId: string;
|
|
||||||
providerName: string;
|
|
||||||
entries: Array<[string, UsageWindow]>;
|
|
||||||
error?: string;
|
|
||||||
modelFamilies?: Array<{
|
|
||||||
familyId: string | null;
|
|
||||||
familyLabel: string;
|
|
||||||
models: Array<[string, UsageWindow]>;
|
|
||||||
}>;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface HeaderProps {
|
|
||||||
onToggleLeftDrawer?: () => void;
|
|
||||||
onToggleRightDrawer?: () => void;
|
|
||||||
leftDrawerOpen?: boolean;
|
|
||||||
rightDrawerOpen?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
type HeaderSessionSnapshot = {
|
type HeaderSessionSnapshot = {
|
||||||
title: string | null;
|
title: string | null;
|
||||||
@@ -480,24 +427,15 @@ type HeaderSessionSnapshot = {
|
|||||||
parentId: string | null;
|
parentId: string | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Header: React.FC<HeaderProps> = ({
|
export const Header: React.FC = () => {
|
||||||
onToggleLeftDrawer,
|
|
||||||
onToggleRightDrawer,
|
|
||||||
leftDrawerOpen,
|
|
||||||
rightDrawerOpen,
|
|
||||||
}) => {
|
|
||||||
streamPerfCount('ui.header.render');
|
streamPerfCount('ui.header.render');
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
|
|
||||||
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
|
||||||
const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
|
const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
|
||||||
const openContextOverview = useUIStore((state) => state.openContextOverview);
|
const openContextOverview = useUIStore((state) => state.openContextOverview);
|
||||||
const openContextPlan = useUIStore((state) => state.openContextPlan);
|
const openContextPlan = useUIStore((state) => state.openContextPlan);
|
||||||
const closeContextPanel = useUIStore((state) => state.closeContextPanel);
|
const closeContextPanel = useUIStore((state) => state.closeContextPanel);
|
||||||
const activeMainTab = useUIStore((state) => state.activeMainTab);
|
const activeMainTab = useUIStore((state) => state.activeMainTab);
|
||||||
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
|
|
||||||
const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
|
const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
|
||||||
const timeFormatPreference = useUIStore((state) => state.timeFormatPreference);
|
|
||||||
|
|
||||||
const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
|
const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
|
||||||
const runtimeApis = useRuntimeAPIs();
|
const runtimeApis = useRuntimeAPIs();
|
||||||
@@ -548,12 +486,7 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
}, [activeProject]);
|
}, [activeProject]);
|
||||||
const quotaResults = useQuotaStore((state) => state.results);
|
const quotaResults = useQuotaStore((state) => state.results);
|
||||||
const fetchAllQuotas = useQuotaStore((state) => state.fetchAllQuotas);
|
const fetchAllQuotas = useQuotaStore((state) => state.fetchAllQuotas);
|
||||||
const isQuotaLoading = useQuotaStore((state) => state.isLoading);
|
|
||||||
const quotaLastUpdated = useQuotaStore((state) => state.lastUpdated);
|
|
||||||
const quotaDisplayMode = useQuotaStore((state) => state.displayMode);
|
|
||||||
const dropdownProviderIds = useQuotaStore((state) => state.dropdownProviderIds);
|
|
||||||
const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
|
const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
|
||||||
const setQuotaDisplayMode = useQuotaStore((state) => state.setDisplayMode);
|
|
||||||
|
|
||||||
const { isMobile } = useDeviceInfo();
|
const { isMobile } = useDeviceInfo();
|
||||||
const githubAuthStatus = useGitHubAuthStore((state) => state.status);
|
const githubAuthStatus = useGitHubAuthStore((state) => state.status);
|
||||||
@@ -639,14 +572,11 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
}
|
}
|
||||||
}, [contextUsage, currentSessionId, isContextUsageResolvedForSession]);
|
}, [contextUsage, currentSessionId, isContextUsageResolvedForSession]);
|
||||||
|
|
||||||
const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
|
|
||||||
const githubAvatarUrl = githubAuthStatus?.connected ? (githubAuthStatus.user?.avatarUrl ?? null) : null;
|
const githubAvatarUrl = githubAuthStatus?.connected ? (githubAuthStatus.user?.avatarUrl ?? null) : null;
|
||||||
const githubLogin = githubAuthStatus?.connected ? (githubAuthStatus.user?.login ?? null) : null;
|
const githubLogin = githubAuthStatus?.connected ? (githubAuthStatus.user?.login ?? null) : null;
|
||||||
const githubAccounts = githubAuthStatus?.accounts ?? [];
|
const githubAccounts = githubAuthStatus?.accounts ?? [];
|
||||||
const [isSwitchingGitHubAccount, setIsSwitchingGitHubAccount] = React.useState(false);
|
const [isSwitchingGitHubAccount, setIsSwitchingGitHubAccount] = React.useState(false);
|
||||||
const [isMobileRateLimitsOpen, setIsMobileRateLimitsOpen] = React.useState(false);
|
|
||||||
const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
|
const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
|
||||||
const [isUsageRefreshSpinning, setIsUsageRefreshSpinning] = React.useState(false);
|
|
||||||
const [currentInstanceLabel, setCurrentInstanceLabel] = React.useState('Local');
|
const [currentInstanceLabel, setCurrentInstanceLabel] = React.useState('Local');
|
||||||
const [currentInstanceIsLocal, setCurrentInstanceIsLocal] = React.useState(true);
|
const [currentInstanceIsLocal, setCurrentInstanceIsLocal] = React.useState(true);
|
||||||
const [remoteUpdateDialogOpen, setRemoteUpdateDialogOpen] = React.useState(false);
|
const [remoteUpdateDialogOpen, setRemoteUpdateDialogOpen] = React.useState(false);
|
||||||
@@ -654,7 +584,6 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
const [remoteUpdateChecking, setRemoteUpdateChecking] = React.useState(false);
|
const [remoteUpdateChecking, setRemoteUpdateChecking] = React.useState(false);
|
||||||
const [remoteUpdateError, setRemoteUpdateError] = React.useState<string | null>(null);
|
const [remoteUpdateError, setRemoteUpdateError] = React.useState<string | null>(null);
|
||||||
const compactCurrentInstanceLabel = React.useMemo(() => formatCompactHeaderLabel(currentInstanceLabel), [currentInstanceLabel]);
|
const compactCurrentInstanceLabel = React.useMemo(() => formatCompactHeaderLabel(currentInstanceLabel), [currentInstanceLabel]);
|
||||||
const [mobileServicesTab, setMobileServicesTab] = React.useState<'usage' | 'mcp'>('usage');
|
|
||||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||||
// While the work-status panel is on screen it already reports the project,
|
// While the work-status panel is on screen it already reports the project,
|
||||||
// the branch and the context fill — three paces away in the same window.
|
// the branch and the context fill — three paces away in the same window.
|
||||||
@@ -817,126 +746,11 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
}, [checkRemoteInstanceUpdate, remoteUpdateInfo?.available]);
|
}, [checkRemoteInstanceUpdate, remoteUpdateInfo?.available]);
|
||||||
|
|
||||||
useQuotaAutoRefresh();
|
useQuotaAutoRefresh();
|
||||||
const selectedModels = useQuotaStore((state) => state.selectedModels);
|
|
||||||
const expandedFamilies = useQuotaStore((state) => state.expandedFamilies);
|
|
||||||
const toggleFamilyExpanded = useQuotaStore((state) => state.toggleFamilyExpanded);
|
|
||||||
|
|
||||||
const rateLimitGroups = React.useMemo(() => {
|
|
||||||
const groups: RateLimitGroup[] = [];
|
|
||||||
|
|
||||||
for (const provider of QUOTA_PROVIDERS) {
|
|
||||||
if (!dropdownProviderIds.includes(provider.id)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const result = quotaResults.find((entry) => entry.providerId === provider.id);
|
|
||||||
const windows = (result?.usage?.windows ?? {}) as Record<string, UsageWindow>;
|
|
||||||
const models = result?.usage?.models;
|
|
||||||
const entries = Object.entries(windows);
|
|
||||||
|
|
||||||
const group: RateLimitGroup = {
|
|
||||||
providerId: provider.id,
|
|
||||||
providerName: provider.name,
|
|
||||||
entries,
|
|
||||||
error: (result && !result.ok && result.configured) ? result.error : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add model families if provider has per-model quotas
|
|
||||||
if (models && Object.keys(models).length > 0) {
|
|
||||||
const providerSelectedModels = selectedModels[provider.id] ?? [];
|
|
||||||
// hasExplicitSelection = true means user has selected specific models to show
|
|
||||||
// If the array exists but is empty, treat as "show all" (user cleared selection)
|
|
||||||
const hasExplicitSelection = providerSelectedModels.length > 0;
|
|
||||||
const modelGroups = groupModelsByFamily(models, provider.id);
|
|
||||||
const families = getAllModelFamilies(provider.id);
|
|
||||||
const sortedFamilies = sortModelFamilies(families);
|
|
||||||
|
|
||||||
group.modelFamilies = [];
|
|
||||||
|
|
||||||
// Add predefined families first
|
|
||||||
for (const family of sortedFamilies) {
|
|
||||||
const modelNames = modelGroups.get(family.id) ?? [];
|
|
||||||
if (modelNames.length === 0) continue;
|
|
||||||
|
|
||||||
// Filter to selected models only, OR show all if nothing selected
|
|
||||||
const selectedModelNames = hasExplicitSelection
|
|
||||||
? modelNames.filter((m: string) => providerSelectedModels.includes(m))
|
|
||||||
: modelNames;
|
|
||||||
if (selectedModelNames.length === 0) continue;
|
|
||||||
|
|
||||||
const familyModels: Array<[string, UsageWindow]> = [];
|
|
||||||
for (const modelName of selectedModelNames) {
|
|
||||||
const modelUsage = models[modelName] as { windows?: Record<string, UsageWindow> } | undefined;
|
|
||||||
if (modelUsage?.windows) {
|
|
||||||
const windowEntries = Object.entries(modelUsage.windows);
|
|
||||||
if (windowEntries.length > 0) {
|
|
||||||
familyModels.push([modelName, windowEntries[0][1]]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (familyModels.length > 0) {
|
|
||||||
group.modelFamilies.push({
|
|
||||||
familyId: family.id,
|
|
||||||
familyLabel: family.label,
|
|
||||||
models: familyModels,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add "Other" family for remaining models
|
|
||||||
const otherModelNames = modelGroups.get(null) ?? [];
|
|
||||||
const selectedOtherModels = hasExplicitSelection
|
|
||||||
? otherModelNames.filter((m: string) => providerSelectedModels.includes(m))
|
|
||||||
: otherModelNames;
|
|
||||||
if (selectedOtherModels.length > 0) {
|
|
||||||
const otherModels: Array<[string, UsageWindow]> = [];
|
|
||||||
for (const modelName of selectedOtherModels) {
|
|
||||||
const modelUsage = models[modelName] as { windows?: Record<string, UsageWindow> } | undefined;
|
|
||||||
if (modelUsage?.windows) {
|
|
||||||
const windowEntries = Object.entries(modelUsage.windows);
|
|
||||||
if (windowEntries.length > 0) {
|
|
||||||
otherModels.push([modelName, windowEntries[0][1]]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (otherModels.length > 0) {
|
|
||||||
group.modelFamilies.push({
|
|
||||||
familyId: null,
|
|
||||||
familyLabel: t('header.services.modelFamily.other'),
|
|
||||||
models: otherModels,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entries.length > 0 || (group.modelFamilies && group.modelFamilies.length > 0) || group.error) {
|
|
||||||
groups.push(group);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return groups;
|
|
||||||
}, [dropdownProviderIds, quotaResults, selectedModels, t]);
|
|
||||||
const hasRateLimits = rateLimitGroups.length > 0;
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
void loadQuotaSettings();
|
void loadQuotaSettings();
|
||||||
}, [loadQuotaSettings]);
|
}, [loadQuotaSettings]);
|
||||||
const handleDisplayModeChange = React.useCallback(async (mode: 'usage' | 'remaining') => {
|
|
||||||
setQuotaDisplayMode(mode);
|
|
||||||
try {
|
|
||||||
await updateDesktopSettings({ usageDisplayMode: mode });
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Failed to update usage display mode:', error);
|
|
||||||
}
|
|
||||||
}, [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 currentSessionSnapshot = currentSessionId
|
const currentSessionSnapshot = currentSessionId
|
||||||
? currentGlobalSession ?? null
|
? currentGlobalSession ?? null
|
||||||
@@ -1330,17 +1144,10 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
};
|
};
|
||||||
}, [actionDirectory, activeProjectRef]);
|
}, [actionDirectory, activeProjectRef]);
|
||||||
|
|
||||||
const projectActionsContext = React.useMemo(() => {
|
|
||||||
if (activeProjectRef && actionDirectory) {
|
|
||||||
return { projectRef: activeProjectRef, directory: actionDirectory };
|
|
||||||
}
|
|
||||||
return lastProjectActionsContextRef.current;
|
|
||||||
}, [actionDirectory, activeProjectRef]);
|
|
||||||
|
|
||||||
const planModeEnabled = useFeatureFlagsStore((state) => state.planModeEnabled);
|
const planModeEnabled = useFeatureFlagsStore((state) => state.planModeEnabled);
|
||||||
const isSessionPlanAvailable = useSessionUIStore((state) => state.isSessionPlanAvailable);
|
const isSessionPlanAvailable = useSessionUIStore((state) => state.isSessionPlanAvailable);
|
||||||
const planTabAvailable = planModeEnabled && currentSessionId ? isSessionPlanAvailable(currentSessionId) : false;
|
const planTabAvailable = planModeEnabled && currentSessionId ? isSessionPlanAvailable(currentSessionId) : false;
|
||||||
const showPlanTab = planTabAvailable;
|
|
||||||
const lastPlanSessionKeyRef = React.useRef<string>('');
|
const lastPlanSessionKeyRef = React.useRef<string>('');
|
||||||
|
|
||||||
// Reset plan tab availability when session changes
|
// Reset plan tab availability when session changes
|
||||||
@@ -1404,32 +1211,7 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
}
|
}
|
||||||
}, [isSwitchingGitHubAccount, runtimeApis.github, setGitHubAuthStatus]);
|
}, [isSwitchingGitHubAccount, runtimeApis.github, setGitHubAuthStatus]);
|
||||||
|
|
||||||
const blurActiveElement = React.useCallback(() => {
|
|
||||||
if (typeof document === 'undefined') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const active = document.activeElement as HTMLElement | null;
|
|
||||||
if (!active) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tagName = active.tagName;
|
|
||||||
const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
|
|
||||||
|
|
||||||
if (isInput || active.isContentEditable) {
|
|
||||||
active.blur();
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleOpenSessionSwitcher = React.useCallback(() => {
|
|
||||||
if (isMobile) {
|
|
||||||
blurActiveElement();
|
|
||||||
setSessionSwitcherOpen(!isSessionSwitcherOpen);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
toggleSidebar();
|
|
||||||
}, [blurActiveElement, isMobile, isSessionSwitcherOpen, setSessionSwitcherOpen, toggleSidebar]);
|
|
||||||
|
|
||||||
const handleOpenDraftMiniChat = React.useCallback(() => {
|
const handleOpenDraftMiniChat = React.useCallback(() => {
|
||||||
void invokeDesktop('desktop_open_draft_mini_chat_window', {
|
void invokeDesktop('desktop_open_draft_mini_chat_window', {
|
||||||
@@ -1496,47 +1278,6 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
|
|
||||||
|
|
||||||
const desktopHeaderIconButtonClass = DESKTOP_HEADER_ICON_BUTTON_CLASS;
|
const desktopHeaderIconButtonClass = DESKTOP_HEADER_ICON_BUTTON_CLASS;
|
||||||
const mobileHeaderIconButtonClass = MOBILE_HEADER_ICON_BUTTON_CLASS;
|
|
||||||
const mobileActiveHeaderItem = React.useMemo(() => {
|
|
||||||
if (isMobileRateLimitsOpen) {
|
|
||||||
return 'services';
|
|
||||||
}
|
|
||||||
if (leftDrawerOpen) {
|
|
||||||
return 'sessions';
|
|
||||||
}
|
|
||||||
if (rightDrawerOpen) {
|
|
||||||
return 'git';
|
|
||||||
}
|
|
||||||
return activeMainTab;
|
|
||||||
}, [activeMainTab, isMobileRateLimitsOpen, leftDrawerOpen, rightDrawerOpen]);
|
|
||||||
|
|
||||||
const closeMobileHeaderPanels = React.useCallback(() => {
|
|
||||||
setIsMobileRateLimitsOpen(false);
|
|
||||||
if (leftDrawerOpen && onToggleLeftDrawer) {
|
|
||||||
onToggleLeftDrawer();
|
|
||||||
}
|
|
||||||
if (rightDrawerOpen && onToggleRightDrawer) {
|
|
||||||
onToggleRightDrawer();
|
|
||||||
}
|
|
||||||
if (!onToggleLeftDrawer && isSessionSwitcherOpen) {
|
|
||||||
setSessionSwitcherOpen(false);
|
|
||||||
}
|
|
||||||
}, [isSessionSwitcherOpen, leftDrawerOpen, onToggleLeftDrawer, onToggleRightDrawer, rightDrawerOpen, setSessionSwitcherOpen]);
|
|
||||||
|
|
||||||
const handleMobileLeftDrawerToggle = React.useCallback(() => {
|
|
||||||
if (!leftDrawerOpen) {
|
|
||||||
setIsMobileRateLimitsOpen(false);
|
|
||||||
}
|
|
||||||
onToggleLeftDrawer?.();
|
|
||||||
}, [leftDrawerOpen, onToggleLeftDrawer]);
|
|
||||||
|
|
||||||
const handleMobileRightDrawerToggle = React.useCallback(() => {
|
|
||||||
if (!rightDrawerOpen) {
|
|
||||||
setIsMobileRateLimitsOpen(false);
|
|
||||||
}
|
|
||||||
onToggleRightDrawer?.();
|
|
||||||
}, [onToggleRightDrawer, rightDrawerOpen]);
|
|
||||||
|
|
||||||
// Left padding the header needs to clear the OS window controls (macOS
|
// Left padding the header needs to clear the OS window controls (macOS
|
||||||
// traffic lights / window-controls-overlay). When the sidebar is open this
|
// traffic lights / window-controls-overlay). When the sidebar is open this
|
||||||
// space is owned by the sidebar's top strip instead, so the header drops back
|
// space is owned by the sidebar's top strip instead, so the header drops back
|
||||||
@@ -1701,44 +1442,10 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
}
|
}
|
||||||
}, [isDesktopApp]);
|
}, [isDesktopApp]);
|
||||||
|
|
||||||
const tabs: TabConfig[] = React.useMemo(() => {
|
|
||||||
if (isMobile) {
|
|
||||||
const base: TabConfig[] = [
|
|
||||||
{ id: 'chat', label: t('layout.mainTab.chat'), icon: "chat-4" },
|
|
||||||
];
|
|
||||||
|
|
||||||
if (showPlanTab) {
|
|
||||||
base.push({ id: 'plan', label: t('layout.mainTab.plan'), icon: "file-text" });
|
|
||||||
}
|
|
||||||
|
|
||||||
base.push(
|
|
||||||
{ id: 'diff', label: t('layout.mainTab.diff'), icon: 'diff' },
|
|
||||||
{ id: 'files', label: t('layout.mainTab.files'), icon: "folder-6" },
|
|
||||||
{ id: 'terminal', label: t('layout.mainTab.terminal'), icon: "terminal-box" },
|
|
||||||
{ id: 'context', label: t('layout.mainTab.context'), icon: "file-list-2" },
|
|
||||||
{ id: 'diagram', label: t('layout.mainTab.diagram'), icon: 'file' },
|
|
||||||
);
|
|
||||||
|
|
||||||
return base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Desktop: no tabs in header
|
|
||||||
return [];
|
|
||||||
}, [isMobile, showPlanTab, t]);
|
|
||||||
|
|
||||||
const shortcutLabel = React.useCallback((actionId: string) => {
|
const shortcutLabel = React.useCallback((actionId: string) => {
|
||||||
return formatShortcutForDisplay(getEffectiveShortcutCombo(actionId, shortcutOverrides));
|
return formatShortcutForDisplay(getEffectiveShortcutCombo(actionId, shortcutOverrides));
|
||||||
}, [shortcutOverrides]);
|
}, [shortcutOverrides]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Project actions may intentionally promote the terminal to the desktop
|
|
||||||
// main view, and diagram clicks open the diagram viewer; every other
|
|
||||||
// legacy main tab now lives in the context panel on desktop.
|
|
||||||
if (!isMobile && activeMainTab !== 'chat' && activeMainTab !== 'terminal' && activeMainTab !== 'diagram') {
|
|
||||||
setActiveMainTab('chat');
|
|
||||||
}
|
|
||||||
}, [activeMainTab, isMobile, setActiveMainTab]);
|
|
||||||
|
|
||||||
// Desktop keeps instances only: quota and MCP now live in the work-status
|
// Desktop keeps instances only: quota and MCP now live in the work-status
|
||||||
// panel, which reports them per session rather than per window. The mobile
|
// panel, which reports them per session rather than per window. The mobile
|
||||||
// menu below is untouched — it has no panel to defer to.
|
// menu below is untouched — it has no panel to defer to.
|
||||||
@@ -1751,31 +1458,6 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
}, [isDesktopApp, t]);
|
}, [isDesktopApp, t]);
|
||||||
|
|
||||||
|
|
||||||
const mobileServicesTabItems = React.useMemo<SortableTabsStripItem[]>(() => {
|
|
||||||
return [
|
|
||||||
{ id: 'usage', label: t('layout.services.usage'), icon: <Icon name="timer" className="h-3.5 w-3.5" /> },
|
|
||||||
{ id: 'mcp', label: 'MCP', icon: <McpIcon className="h-3.5 w-3.5" /> },
|
|
||||||
];
|
|
||||||
}, [t]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
|
||||||
if (hasModifier(e) && !e.shiftKey && !e.altKey) {
|
|
||||||
const num = parseInt(e.key, 10);
|
|
||||||
if (num >= 1 && num <= tabs.length) {
|
|
||||||
e.preventDefault();
|
|
||||||
if (isMobile) {
|
|
||||||
blurActiveElement();
|
|
||||||
closeMobileHeaderPanels();
|
|
||||||
}
|
|
||||||
setActiveMainTab(tabs[num - 1].id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.addEventListener('keydown', handleKeyDown);
|
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
||||||
}, [blurActiveElement, closeMobileHeaderPanels, isMobile, setActiveMainTab, tabs]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
const toggleServicesCombo = getEffectiveShortcutCombo('toggle_services_menu', shortcutOverrides);
|
const toggleServicesCombo = getEffectiveShortcutCombo('toggle_services_menu', shortcutOverrides);
|
||||||
@@ -1822,55 +1504,6 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
handleOpenContextPlan,
|
handleOpenContextPlan,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const renderTab = (tab: TabConfig) => {
|
|
||||||
const isActive = activeMainTab === tab.id;
|
|
||||||
const isDiffTab = tab.icon === 'diff';
|
|
||||||
const tabIconName = isDiffTab ? null : (tab.icon as IconName);
|
|
||||||
const isChatTab = tab.id === 'chat';
|
|
||||||
|
|
||||||
const renderIcon = (iconSize: number) => {
|
|
||||||
if (isDiffTab) {
|
|
||||||
return <DiffIcon size={iconSize} />;
|
|
||||||
}
|
|
||||||
return tabIconName ? <Icon name={tabIconName} className={`h-${iconSize/4} w-${iconSize/4}`} /> : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabButton = (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setActiveMainTab(tab.id)}
|
|
||||||
className={cn(
|
|
||||||
'relative flex h-8 items-center gap-2 px-3 rounded-lg typography-ui-label font-medium transition-colors',
|
|
||||||
isActive
|
|
||||||
? 'app-region-no-drag bg-interactive-selection text-interactive-selection-foreground shadow-none'
|
|
||||||
: 'app-region-no-drag text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground',
|
|
||||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
|
|
||||||
isChatTab && !isMobile && 'min-w-[100px] justify-center'
|
|
||||||
)}
|
|
||||||
aria-label={tab.label}
|
|
||||||
aria-selected={isActive}
|
|
||||||
role="tab"
|
|
||||||
>
|
|
||||||
{isMobile ? (
|
|
||||||
renderIcon(20)
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{renderIcon(16)}
|
|
||||||
<span className="header-tab-label">{tab.label}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tab.badge !== undefined && tab.badge > 0 && (
|
|
||||||
<span className="header-tab-badge typography-micro text-status-info font-medium">
|
|
||||||
{tab.badge}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
|
|
||||||
return <React.Fragment key={tab.id}>{tabButton}</React.Fragment>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const desktopSidebarActions = (
|
const desktopSidebarActions = (
|
||||||
<>
|
<>
|
||||||
<OpenInAppButton directory={actionDirectory} className="mr-1" />
|
<OpenInAppButton directory={actionDirectory} className="mr-1" />
|
||||||
@@ -2097,12 +1730,6 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{tabs.length > 0 && (
|
|
||||||
<div className="flex items-center gap-1 rounded-lg bg-[var(--surface-muted)]/50 p-1">
|
|
||||||
{tabs.map((tab) => renderTab(tab))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
|
|
||||||
<div className="flex shrink-0 items-center gap-1">
|
<div className="flex shrink-0 items-center gap-1">
|
||||||
@@ -2173,414 +1800,10 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderMobile = () => (
|
// The divider lives on the chat content wrapper instead of the header, so it
|
||||||
<div className="app-region-drag relative flex items-center gap-2 px-3 py-2 select-none">
|
// doesn't run between the header and the right sidebar (they read as one
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
// continuous surface).
|
||||||
{/* Use drawer toggle when onToggleLeftDrawer is provided, otherwise use legacy session switcher */}
|
const headerClassName = 'header-safe-area relative z-10 bg-background';
|
||||||
{onToggleLeftDrawer ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleMobileLeftDrawerToggle}
|
|
||||||
className={cn(
|
|
||||||
mobileHeaderIconButtonClass,
|
|
||||||
mobileActiveHeaderItem === 'sessions' && 'bg-interactive-selection text-interactive-selection-foreground'
|
|
||||||
)}
|
|
||||||
aria-label={leftDrawerOpen ? t('header.actions.closeSessionsAria') : t('header.actions.openSessionsAria')}
|
|
||||||
>
|
|
||||||
<Icon name="layout-left" className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
) : isSessionSwitcherOpen ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSessionSwitcherOpen(false)}
|
|
||||||
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 rounded-md active:bg-interactive-active"
|
|
||||||
aria-label={t('header.actions.backAria')}
|
|
||||||
>
|
|
||||||
<Icon name="arrow-left-s" className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="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 rounded-md active:bg-interactive-active"
|
|
||||||
aria-label={t('header.actions.openSessionsAria')}
|
|
||||||
>
|
|
||||||
<Icon name="play-list-add" className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!onToggleLeftDrawer && isSessionSwitcherOpen && (
|
|
||||||
<span className="typography-ui-label font-semibold text-foreground">{t('header.sessions.title')}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(!isSessionSwitcherOpen || Boolean(onToggleLeftDrawer)) && (
|
|
||||||
<>
|
|
||||||
<div className="app-region-no-drag flex min-w-0 flex-1 items-center">
|
|
||||||
<div className="flex min-w-0 flex-1 overflow-x-auto overflow-y-hidden scrollbar-hidden touch-pan-x overscroll-x-contain">
|
|
||||||
<div className="flex w-max items-center gap-1 pr-1">
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-0.5 rounded-lg bg-[var(--surface-muted)]/50 p-0.5"
|
|
||||||
role="tablist"
|
|
||||||
aria-label={t('header.navigation.mainAria')}
|
|
||||||
>
|
|
||||||
{tabs.map((tab) => {
|
|
||||||
const isActive = activeMainTab === tab.id;
|
|
||||||
const isDiffTab = tab.icon === 'diff';
|
|
||||||
const tabIconName = isDiffTab ? null : (tab.icon as IconName);
|
|
||||||
return (
|
|
||||||
<Tooltip key={tab.id}>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
if (isMobile) {
|
|
||||||
blurActiveElement();
|
|
||||||
closeMobileHeaderPanels();
|
|
||||||
}
|
|
||||||
setActiveMainTab(tab.id);
|
|
||||||
}}
|
|
||||||
aria-label={tab.label}
|
|
||||||
aria-selected={isActive}
|
|
||||||
role="tab"
|
|
||||||
className={cn(
|
|
||||||
mobileHeaderIconButtonClass,
|
|
||||||
'relative rounded-lg',
|
|
||||||
mobileActiveHeaderItem === tab.id && 'bg-interactive-selection text-interactive-selection-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isDiffTab ? (
|
|
||||||
<DiffIcon className="h-5 w-5" />
|
|
||||||
) : tabIconName ? (
|
|
||||||
<Icon name={tabIconName} className="h-5 w-5" />
|
|
||||||
) : null}
|
|
||||||
{tab.badge !== undefined && tab.badge > 0 && (
|
|
||||||
<span className="absolute -top-1 -right-1 text-[10px] font-semibold text-primary">
|
|
||||||
{tab.badge}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{tab.showDot && (
|
|
||||||
<span
|
|
||||||
className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
|
|
||||||
aria-label={t('header.changes.availableAria')}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>{tab.label}</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1 shrink-0">
|
|
||||||
{projectActionsContext && (
|
|
||||||
<ProjectActionsButton
|
|
||||||
projectRef={projectActionsContext.projectRef}
|
|
||||||
directory={projectActionsContext.directory}
|
|
||||||
compact
|
|
||||||
allowMobile
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Mobile Services Menu (Usage + MCP) */}
|
|
||||||
<DropdownMenu
|
|
||||||
open={isMobileRateLimitsOpen}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
if (open) {
|
|
||||||
if (leftDrawerOpen && onToggleLeftDrawer) {
|
|
||||||
onToggleLeftDrawer();
|
|
||||||
}
|
|
||||||
if (rightDrawerOpen && onToggleRightDrawer) {
|
|
||||||
onToggleRightDrawer();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setIsMobileRateLimitsOpen(open);
|
|
||||||
if (open && quotaResults.length === 0) {
|
|
||||||
fetchAllQuotas();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-label={t('header.services.viewAria')}
|
|
||||||
className={cn(
|
|
||||||
mobileHeaderIconButtonClass,
|
|
||||||
mobileActiveHeaderItem === 'services' && 'bg-interactive-selection text-interactive-selection-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Icon name="stack" className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>{t('header.services.title')}</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
<DropdownMenuContent
|
|
||||||
align="end"
|
|
||||||
sideOffset={0}
|
|
||||||
positionerClassName="!fixed !bottom-0 !left-0 !right-0 !top-[var(--oc-header-height,56px)] !transform-none"
|
|
||||||
className="h-full w-screen max-h-none rounded-none border-0 p-0 pt-1 overflow-hidden"
|
|
||||||
>
|
|
||||||
<div className="flex h-full flex-col bg-[var(--surface-elevated)]">
|
|
||||||
<div className="sticky top-0 z-20 bg-[var(--surface-elevated)] px-2 py-px">
|
|
||||||
<div className="flex items-center justify-between gap-2 px-3 py-0">
|
|
||||||
<div className="h-10 min-w-0 flex-1">
|
|
||||||
<SortableTabsStrip
|
|
||||||
items={mobileServicesTabItems}
|
|
||||||
activeId={mobileServicesTab}
|
|
||||||
onSelect={(tabID) => {
|
|
||||||
const value = tabID as 'usage' | 'mcp';
|
|
||||||
setMobileServicesTab(value);
|
|
||||||
if (value === 'usage' && quotaResults.length === 0) {
|
|
||||||
fetchAllQuotas();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
layoutMode="fit"
|
|
||||||
variant="active-pill"
|
|
||||||
activePillInsetClassName="gap-0.5 px-px py-0"
|
|
||||||
activePillButtonClassName="h-8"
|
|
||||||
className="h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setIsMobileRateLimitsOpen(false)}
|
|
||||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover"
|
|
||||||
aria-label={t('header.services.closeAria')}
|
|
||||||
>
|
|
||||||
<Icon name="close" className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mobileServicesTab === 'mcp' && (
|
|
||||||
<McpDropdownContent active={isMobileRateLimitsOpen && mobileServicesTab === 'mcp'} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{mobileServicesTab === 'usage' && (
|
|
||||||
<div className="flex-1 overflow-y-auto overflow-x-hidden pb-[calc(4rem+env(safe-area-inset-bottom))]">
|
|
||||||
{/* Mobile usage header */}
|
|
||||||
<div className="border-b border-[var(--interactive-border)]">
|
|
||||||
<div className="flex items-center justify-between gap-3 px-4 py-3">
|
|
||||||
<div className="flex flex-col min-w-0 gap-0.5">
|
|
||||||
<span className="typography-ui-header font-semibold text-foreground">{t('header.services.rateLimits')}</span>
|
|
||||||
<span className="truncate typography-micro text-muted-foreground">
|
|
||||||
{formatTime(quotaLastUpdated, timeFormatPreference)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
|
||||||
<div className="flex items-center h-6">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleDisplayModeChange('usage')}
|
|
||||||
className={cn(
|
|
||||||
'typography-ui-label px-1 pb-0.5 transition-colors',
|
|
||||||
quotaDisplayMode === 'usage'
|
|
||||||
? 'text-foreground border-b-2 border-[var(--primary-base)]'
|
|
||||||
: 'text-muted-foreground hover:text-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{t('header.services.used')}
|
|
||||||
</button>
|
|
||||||
<span className="text-muted-foreground typography-ui-label px-0.5">·</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleDisplayModeChange('remaining')}
|
|
||||||
className={cn(
|
|
||||||
'typography-ui-label px-1 pb-0.5 transition-colors',
|
|
||||||
quotaDisplayMode === 'remaining'
|
|
||||||
? 'text-foreground border-b-2 border-[var(--primary-base)]'
|
|
||||||
: 'text-muted-foreground hover:text-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{t('header.services.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={handleUsageRefresh}
|
|
||||||
disabled={isQuotaLoading || isUsageRefreshSpinning}
|
|
||||||
aria-label={t('header.services.refreshRateLimitsAria')}
|
|
||||||
>
|
|
||||||
<Icon name="refresh" className={cn('h-4 w-4', isUsageRefreshSpinning && 'animate-spin')} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!hasRateLimits && (
|
|
||||||
<div className="px-4 py-6 text-center">
|
|
||||||
<span className="typography-ui-label text-muted-foreground">{t('header.services.noRateLimits')}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Mobile provider groups */}
|
|
||||||
<div className="py-1">
|
|
||||||
{rateLimitGroups.map((group, index) => (
|
|
||||||
<React.Fragment key={group.providerId}>
|
|
||||||
{index > 0 ? (
|
|
||||||
<div className="mx-4 my-1 border-t border-[var(--interactive-border)]" />
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{/* Provider header */}
|
|
||||||
<div className="flex items-center gap-2 px-4 py-2">
|
|
||||||
<ProviderLogo providerId={group.providerId} className="h-4 w-4" />
|
|
||||||
<span className="typography-ui-label font-medium text-foreground">{group.providerName}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{group.entries.length === 0 && (!group.modelFamilies || group.modelFamilies.length === 0) ? (
|
|
||||||
<div className="px-4 pb-2">
|
|
||||||
<span className="typography-ui-label text-muted-foreground">
|
|
||||||
{group.error ?? t('header.services.noRateLimitsReported')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3 px-4 pb-2">
|
|
||||||
{/* Window-level entries */}
|
|
||||||
{group.entries.map(([label, window]) => {
|
|
||||||
const displayPercent = quotaDisplayMode === 'remaining'
|
|
||||||
? window.remainingPercent
|
|
||||||
: window.usedPercent;
|
|
||||||
const metricLabel = formatQuotaValueLabel(window.valueLabel, displayPercent);
|
|
||||||
const resetLabel = formatQuotaResetLabel(window.resetAt, window.resetAfterFormatted ?? window.resetAtFormatted, timeFormatPreference);
|
|
||||||
return (
|
|
||||||
<div key={`${group.providerId}-${label}`} className="flex flex-col gap-1.5">
|
|
||||||
<div className="flex min-w-0 items-center justify-between gap-3">
|
|
||||||
<div className="min-w-0 flex items-center gap-2">
|
|
||||||
<span className="truncate typography-ui-label text-foreground">{formatWindowLabel(label)}</span>
|
|
||||||
{resetLabel ? (
|
|
||||||
<span className="truncate typography-micro text-muted-foreground">
|
|
||||||
{resetLabel}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<span className="typography-ui-label text-foreground tabular-nums">
|
|
||||||
{metricLabel === '-' ? '' : metricLabel}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<UsageProgressBar
|
|
||||||
percent={displayPercent}
|
|
||||||
tonePercent={window.usedPercent}
|
|
||||||
className="h-1.5"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{/* Model family collapsibles */}
|
|
||||||
{group.modelFamilies && group.modelFamilies.length > 0 && (
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
{group.modelFamilies.map((family) => {
|
|
||||||
const providerExpandedFamilies = expandedFamilies[group.providerId] ?? [];
|
|
||||||
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 rounded-md px-1 py-1.5 text-left hover:bg-[var(--interactive-hover)]/50 transition-colors">
|
|
||||||
<span className="typography-ui-label font-medium text-foreground">
|
|
||||||
{family.familyLabel}
|
|
||||||
</span>
|
|
||||||
{isExpanded ? (
|
|
||||||
<Icon name="arrow-down-s" className="h-4 w-4 text-muted-foreground" />
|
|
||||||
) : (
|
|
||||||
<Icon name="arrow-right-s" className="h-4 w-4 text-muted-foreground" />
|
|
||||||
)}
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
<CollapsibleContent>
|
|
||||||
<div className="space-y-2.5 pb-1 pl-1 pt-1">
|
|
||||||
{family.models.map(([modelName, window]) => {
|
|
||||||
const displayPercent = quotaDisplayMode === 'remaining'
|
|
||||||
? window.remainingPercent
|
|
||||||
: window.usedPercent;
|
|
||||||
const metricLabel = formatQuotaValueLabel(window.valueLabel, displayPercent);
|
|
||||||
return (
|
|
||||||
<div key={`${group.providerId}-${modelName}`} className="flex flex-col gap-1.5">
|
|
||||||
<div className="flex min-w-0 items-center justify-between gap-3">
|
|
||||||
<span className="truncate typography-micro text-muted-foreground">{getDisplayModelName(modelName)}</span>
|
|
||||||
<span className="typography-ui-label text-foreground tabular-nums">
|
|
||||||
{metricLabel === '-' ? '' : metricLabel}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<UsageProgressBar
|
|
||||||
percent={displayPercent}
|
|
||||||
tonePercent={window.usedPercent}
|
|
||||||
className="h-1.5"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</Collapsible>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
|
|
||||||
{onToggleRightDrawer ? (
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleMobileRightDrawerToggle}
|
|
||||||
className={cn(
|
|
||||||
mobileHeaderIconButtonClass,
|
|
||||||
'relative',
|
|
||||||
mobileActiveHeaderItem === 'git' && 'bg-interactive-selection text-interactive-selection-foreground'
|
|
||||||
)}
|
|
||||||
aria-label={rightDrawerOpen ? 'Close git sidebar' : 'Open git sidebar'}
|
|
||||||
>
|
|
||||||
<Icon name="layout-right" className="h-5 w-5" />
|
|
||||||
</button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>{rightDrawerOpen ? 'Close git sidebar' : 'Open git sidebar'}</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const headerClassName = cn(
|
|
||||||
'header-safe-area relative z-10 bg-background',
|
|
||||||
// Mobile keeps a full-width divider. On desktop the divider lives on the chat
|
|
||||||
// content wrapper instead, so it doesn't run between the header and the right
|
|
||||||
// sidebar (they read as one continuous surface).
|
|
||||||
isMobile && 'border-b border-border/50'
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -2589,7 +1812,7 @@ export const Header: React.FC<HeaderProps> = ({
|
|||||||
className={headerClassName}
|
className={headerClassName}
|
||||||
style={{ ['--padding-scale' as string]: '1' } as React.CSSProperties}
|
style={{ ['--padding-scale' as string]: '1' } as React.CSSProperties}
|
||||||
>
|
>
|
||||||
{isMobile ? renderMobile() : renderDesktop()}
|
{renderDesktop()}
|
||||||
</header>
|
</header>
|
||||||
<Dialog open={pendingHeaderRetentionAction !== null} onOpenChange={(open) => { if (!open) setPendingHeaderRetentionAction(null); }}>
|
<Dialog open={pendingHeaderRetentionAction !== null} onOpenChange={(open) => { if (!open) setPendingHeaderRetentionAction(null); }}>
|
||||||
<DialogContent showCloseButton={false} className="max-w-sm gap-5">
|
<DialogContent showCloseButton={false} className="max-w-sm gap-5">
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
import React, { useRef, useEffect } from 'react';
|
import React from 'react';
|
||||||
import { animate, motion, useMotionValue } from 'motion/react';
|
|
||||||
import { Header } from './Header';
|
import { Header } from './Header';
|
||||||
import { Sidebar } from './Sidebar';
|
import { Sidebar } from './Sidebar';
|
||||||
import { SidebarTopBar } from './SidebarTopBar';
|
import { SidebarTopBar } from './SidebarTopBar';
|
||||||
import { TitlebarLeftControls } from './TitlebarLeftControls';
|
import { TitlebarLeftControls } from './TitlebarLeftControls';
|
||||||
import { ProjectContextPanel } from './RightSidebarTabs';
|
|
||||||
import { ContextPanel } from './ContextPanel';
|
import { ContextPanel } from './ContextPanel';
|
||||||
import { ContextPanelRail } from './ContextPanelRail';
|
import { ContextPanelRail } from './ContextPanelRail';
|
||||||
import { ErrorBoundary } from '../ui/ErrorBoundary';
|
import { ErrorBoundary } from '../ui/ErrorBoundary';
|
||||||
@@ -18,8 +16,6 @@ import { ArchiveView } from '@/components/views/ArchiveView';
|
|||||||
import { WorktreesView } from '@/components/views/WorktreesView';
|
import { WorktreesView } from '@/components/views/WorktreesView';
|
||||||
import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
|
import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
|
||||||
import { MultiRunLauncher } from '@/components/multirun';
|
import { MultiRunLauncher } from '@/components/multirun';
|
||||||
import { TerminalView } from '@/components/views/TerminalView';
|
|
||||||
import { DrawerProvider } from '@/contexts/DrawerContext';
|
|
||||||
|
|
||||||
import { useUIStore } from '@/stores/useUIStore';
|
import { useUIStore } from '@/stores/useUIStore';
|
||||||
import { useSessionUIStore } from '@/sync/session-ui-store';
|
import { useSessionUIStore } from '@/sync/session-ui-store';
|
||||||
@@ -30,24 +26,18 @@ import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
|
|||||||
|
|
||||||
import { ChatView } from '@/components/views/ChatView';
|
import { ChatView } from '@/components/views/ChatView';
|
||||||
|
|
||||||
// Keep TerminalView eager: the bottom dock reserves its height immediately, so
|
|
||||||
// suspending here leaves a large blank panel on slower machines.
|
|
||||||
// Other heavy views stay on-demand to reduce initial bundle parse time:
|
|
||||||
// DiffView/FilesView pull the CodeMirror and @pierre/diffs stacks into the
|
|
||||||
// startup graph when imported statically.
|
|
||||||
const PlanView = lazyWithChunkRecovery(() => import('@/components/views/PlanView').then(m => ({ default: m.PlanView })));
|
|
||||||
const GitView = lazyWithChunkRecovery(() => import('@/components/views/GitView').then(m => ({ default: m.GitView })));
|
|
||||||
const DiffView = lazyWithChunkRecovery(() => import('@/components/views/DiffView').then(m => ({ default: m.DiffView })));
|
|
||||||
const FilesView = lazyWithChunkRecovery(() => import('@/components/views/FilesView').then(m => ({ default: m.FilesView })));
|
|
||||||
const DiagramView = lazyWithChunkRecovery(() => import('@/components/views/DiagramView').then(m => ({ default: m.DiagramView })));
|
|
||||||
const SettingsView = lazyWithChunkRecovery(() => import('@/components/views/SettingsView').then(m => ({ default: m.SettingsView })));
|
|
||||||
const SettingsWindow = lazyWithChunkRecovery(() => import('@/components/views/SettingsWindow').then(m => ({ default: m.SettingsWindow })));
|
const SettingsWindow = lazyWithChunkRecovery(() => import('@/components/views/SettingsWindow').then(m => ({ default: m.SettingsWindow })));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Desktop-surface layout: the chat owns the main area, and every other
|
||||||
|
* surface (git, diff, files, terminal, ...) opens in the ContextPanel via the
|
||||||
|
* rail. Phone-sized viewports run the separate MobileApp shell — a viewport
|
||||||
|
* crossing the threshold reloads into it (see watchHostedSurfaceViewport).
|
||||||
|
*/
|
||||||
export const MainLayout: React.FC = () => {
|
export const MainLayout: React.FC = () => {
|
||||||
const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
|
const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
|
||||||
const activeSurface = useUIStore((state) => state.activeSurface);
|
const activeSurface = useUIStore((state) => state.activeSurface);
|
||||||
const setIsMobile = useUIStore((state) => state.setIsMobile);
|
const setIsMobile = useUIStore((state) => state.setIsMobile);
|
||||||
const isSessionSwitcherOpen = useUIStore((state) => state.isSessionSwitcherOpen);
|
|
||||||
const isSettingsDialogOpen = useUIStore((state) => state.isSettingsDialogOpen);
|
const isSettingsDialogOpen = useUIStore((state) => state.isSettingsDialogOpen);
|
||||||
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
|
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
|
||||||
// Mount the windowed settings dialog only after its first open: rendering
|
// Mount the windowed settings dialog only after its first open: rendering
|
||||||
@@ -67,10 +57,9 @@ export const MainLayout: React.FC = () => {
|
|||||||
const isScheduledTasksPageOpen = useUIStore((state) => state.isScheduledTasksDialogOpen);
|
const isScheduledTasksPageOpen = useUIStore((state) => state.isScheduledTasksDialogOpen);
|
||||||
const isArchivePageOpen = useUIStore((state) => state.isArchivePageOpen);
|
const isArchivePageOpen = useUIStore((state) => state.isArchivePageOpen);
|
||||||
const worktreesPageProjectId = useUIStore((state) => state.worktreesPageProjectId);
|
const worktreesPageProjectId = useUIStore((state) => state.worktreesPageProjectId);
|
||||||
// Any full-page surface replacing the chat area. While open, the chat and
|
// Any full-page surface replacing the chat area. While open, the chat is
|
||||||
// secondary views are fully hidden (not just covered) so none of their
|
// fully hidden (not just covered) so none of its floating chrome bleeds
|
||||||
// floating chrome bleeds through, and selecting a session / draft / main
|
// through, and selecting a session or draft anywhere closes the surface.
|
||||||
// tab anywhere closes the surface.
|
|
||||||
const isSurfacePageOpen = isScheduledTasksPageOpen || isArchivePageOpen || Boolean(worktreesPageProjectId) || isMultiRunLauncherOpen;
|
const isSurfacePageOpen = isScheduledTasksPageOpen || isArchivePageOpen || Boolean(worktreesPageProjectId) || isMultiRunLauncherOpen;
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@@ -91,157 +80,6 @@ export const MainLayout: React.FC = () => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
const { isMobile } = useDeviceInfo();
|
const { isMobile } = useDeviceInfo();
|
||||||
const mobilePanelsResetRef = React.useRef(false);
|
|
||||||
|
|
||||||
// Mobile drawer state
|
|
||||||
const [mobileLeftDrawerOpen, setMobileLeftDrawerOpen] = React.useState(false);
|
|
||||||
const [mobileRightSidebarOpen, setMobileRightSidebarOpen] = React.useState(false);
|
|
||||||
const [mobileLeftDrawerVisible, setMobileLeftDrawerVisible] = React.useState(false);
|
|
||||||
const [mobileRightDrawerVisible, setMobileRightDrawerVisible] = React.useState(false);
|
|
||||||
const setMobileSessionPanelOpen = React.useCallback((open: boolean) => {
|
|
||||||
setMobileLeftDrawerOpen(open);
|
|
||||||
useUIStore.getState().setSessionSwitcherOpen(open);
|
|
||||||
}, []);
|
|
||||||
const initialDrawerWidthRef = React.useRef(typeof window === 'undefined' ? 0 : window.innerWidth);
|
|
||||||
|
|
||||||
// Left drawer motion value
|
|
||||||
const leftDrawerX = useMotionValue(-initialDrawerWidthRef.current);
|
|
||||||
const leftDrawerWidth = useRef(0);
|
|
||||||
|
|
||||||
// Right drawer motion value
|
|
||||||
const rightDrawerX = useMotionValue(initialDrawerWidthRef.current);
|
|
||||||
const rightDrawerWidth = useRef(0);
|
|
||||||
|
|
||||||
// Compute drawer width
|
|
||||||
useEffect(() => {
|
|
||||||
if (isMobile) {
|
|
||||||
leftDrawerWidth.current = window.innerWidth;
|
|
||||||
rightDrawerWidth.current = window.innerWidth;
|
|
||||||
}
|
|
||||||
}, [isMobile]);
|
|
||||||
|
|
||||||
// Sync left drawer state and motion value
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile) {
|
|
||||||
setMobileLeftDrawerVisible(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (mobileLeftDrawerOpen) {
|
|
||||||
setMobileLeftDrawerVisible(true);
|
|
||||||
}
|
|
||||||
animate(leftDrawerX, mobileLeftDrawerOpen ? 0 : -leftDrawerWidth.current, {
|
|
||||||
type: 'spring',
|
|
||||||
stiffness: 400,
|
|
||||||
damping: 35,
|
|
||||||
mass: 0.8,
|
|
||||||
});
|
|
||||||
}, [mobileLeftDrawerOpen, isMobile, leftDrawerX]);
|
|
||||||
|
|
||||||
// Sync right drawer state and motion value
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile) {
|
|
||||||
setMobileRightDrawerVisible(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (mobileRightSidebarOpen) {
|
|
||||||
setMobileRightDrawerVisible(true);
|
|
||||||
}
|
|
||||||
animate(rightDrawerX, mobileRightSidebarOpen ? 0 : rightDrawerWidth.current, {
|
|
||||||
type: 'spring',
|
|
||||||
stiffness: 400,
|
|
||||||
damping: 35,
|
|
||||||
mass: 0.8,
|
|
||||||
});
|
|
||||||
}, [isMobile, mobileRightSidebarOpen, rightDrawerX]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile) return;
|
|
||||||
return leftDrawerX.on('change', (value) => {
|
|
||||||
const width = leftDrawerWidth.current || initialDrawerWidthRef.current;
|
|
||||||
const visible = mobileLeftDrawerOpen || value > -width + 0.5;
|
|
||||||
setMobileLeftDrawerVisible((previous) => previous === visible ? previous : visible);
|
|
||||||
});
|
|
||||||
}, [isMobile, leftDrawerX, mobileLeftDrawerOpen]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile) return;
|
|
||||||
return rightDrawerX.on('change', (value) => {
|
|
||||||
const width = rightDrawerWidth.current || initialDrawerWidthRef.current;
|
|
||||||
const visible = mobileRightSidebarOpen || value < width - 0.5;
|
|
||||||
setMobileRightDrawerVisible((previous) => previous === visible ? previous : visible);
|
|
||||||
});
|
|
||||||
}, [isMobile, mobileRightSidebarOpen, rightDrawerX]);
|
|
||||||
|
|
||||||
// Sync session switcher close events to left drawer.
|
|
||||||
useEffect(() => {
|
|
||||||
if (isMobile && !isSessionSwitcherOpen && mobileLeftDrawerOpen) {
|
|
||||||
setMobileSessionPanelOpen(false);
|
|
||||||
}
|
|
||||||
}, [isSessionSwitcherOpen, isMobile, mobileLeftDrawerOpen, setMobileSessionPanelOpen]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile) {
|
|
||||||
mobilePanelsResetRef.current = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mobilePanelsResetRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
mobilePanelsResetRef.current = true;
|
|
||||||
setMobileSessionPanelOpen(false);
|
|
||||||
setMobileRightSidebarOpen(false);
|
|
||||||
}, [isMobile, setMobileSessionPanelOpen]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile || activeSurface !== 'chat' || mobileLeftDrawerOpen || mobileRightSidebarOpen || isSettingsDialogOpen) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let disposed = false;
|
|
||||||
let timeoutId: number | undefined;
|
|
||||||
|
|
||||||
const scheduleDraftOpen = (delayMs: number) => {
|
|
||||||
timeoutId = window.setTimeout(() => {
|
|
||||||
if (disposed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sessionState = useSessionUIStore.getState();
|
|
||||||
const uiState = useUIStore.getState();
|
|
||||||
if (uiState.activeMainTab !== 'chat' || uiState.isSettingsDialogOpen || sessionState.currentSessionId || sessionState.newSessionDraft?.open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sessionState.isLoading) {
|
|
||||||
scheduleDraftOpen(250);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
sessionState.openNewSessionDraft({ automatic: true });
|
|
||||||
}, delayMs);
|
|
||||||
};
|
|
||||||
|
|
||||||
scheduleDraftOpen(500);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
disposed = true;
|
|
||||||
if (timeoutId !== undefined) {
|
|
||||||
window.clearTimeout(timeoutId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [activeSurface, isMobile, isSettingsDialogOpen, mobileLeftDrawerOpen, mobileRightSidebarOpen]);
|
|
||||||
|
|
||||||
// Ensure mobile drawers are closed when opening full-screen settings
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isMobile || !isSettingsDialogOpen) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setMobileSessionPanelOpen(false);
|
|
||||||
setMobileRightSidebarOpen(false);
|
|
||||||
}, [isMobile, isSettingsDialogOpen, setMobileSessionPanelOpen]);
|
|
||||||
|
|
||||||
useUpdatePolling();
|
useUpdatePolling();
|
||||||
|
|
||||||
@@ -252,247 +90,85 @@ export const MainLayout: React.FC = () => {
|
|||||||
}
|
}
|
||||||
}, [isMobile, setIsMobile]);
|
}, [isMobile, setIsMobile]);
|
||||||
|
|
||||||
const handleToggleMobileRightDrawer = React.useCallback(() => {
|
|
||||||
if (mobileLeftDrawerOpen) {
|
|
||||||
setMobileSessionPanelOpen(false);
|
|
||||||
}
|
|
||||||
setMobileRightSidebarOpen(!mobileRightSidebarOpen);
|
|
||||||
}, [mobileLeftDrawerOpen, mobileRightSidebarOpen, setMobileSessionPanelOpen]);
|
|
||||||
|
|
||||||
const secondaryView = React.useMemo(() => {
|
|
||||||
// Desktop surfaces live in the context panel; the only full-view
|
|
||||||
// overlays left there are the terminal (promoted by project actions)
|
|
||||||
// and the diagram viewer. Mobile keeps the full tab set.
|
|
||||||
if (!isMobile && activeSurface !== 'terminal' && activeSurface !== 'diagram') {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
switch (activeSurface) {
|
|
||||||
case 'plan':
|
|
||||||
return <React.Suspense fallback={null}><PlanView /></React.Suspense>;
|
|
||||||
case 'git':
|
|
||||||
return <React.Suspense fallback={null}><GitView isActive={!mobileRightSidebarOpen} /></React.Suspense>;
|
|
||||||
case 'diff':
|
|
||||||
return <React.Suspense fallback={null}><DiffView /></React.Suspense>;
|
|
||||||
case 'terminal':
|
|
||||||
return <TerminalView />;
|
|
||||||
case 'files':
|
|
||||||
return <React.Suspense fallback={null}><FilesView /></React.Suspense>;
|
|
||||||
case 'context':
|
|
||||||
return <React.Suspense fallback={null}><ProjectContextPanel /></React.Suspense>;
|
|
||||||
case 'diagram':
|
|
||||||
return <React.Suspense fallback={null}><DiagramView /></React.Suspense>;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}, [activeSurface, isMobile, mobileRightSidebarOpen]);
|
|
||||||
|
|
||||||
const isChatActive = activeSurface === 'chat';
|
const isChatActive = activeSurface === 'chat';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DiffWorkerProvider>
|
<DiffWorkerProvider>
|
||||||
<div
|
<div
|
||||||
data-page-scroll-lock="true"
|
data-page-scroll-lock="true"
|
||||||
className={cn(
|
className="main-content-safe-area relative flex h-[100dvh] bg-background"
|
||||||
'main-content-safe-area',
|
|
||||||
isMobile ? 'flex h-[100dvh] flex-col' : 'relative flex h-[100dvh]',
|
|
||||||
'bg-background'
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<CommandPalette />
|
<CommandPalette />
|
||||||
<HelpDialog />
|
<HelpDialog />
|
||||||
<OpenCodeStatusDialog />
|
<OpenCodeStatusDialog />
|
||||||
<SessionDialogs />
|
<SessionDialogs />
|
||||||
|
|
||||||
{isMobile ? (
|
{/* Persistent top-left controls (toggle + project actions) that
|
||||||
<DrawerProvider value={{
|
stay put while the sidebar/header animate beneath them. */}
|
||||||
leftDrawerOpen: mobileLeftDrawerOpen,
|
<TitlebarLeftControls />
|
||||||
rightDrawerOpen: mobileRightSidebarOpen,
|
{/* Full-height Sidebar beside [Header above (chat | RightSidebar)] */}
|
||||||
toggleLeftDrawer: () => {
|
<div className="flex flex-1 overflow-hidden" data-page-scroll-lock="true">
|
||||||
const nextOpen = !mobileLeftDrawerOpen;
|
<Sidebar
|
||||||
if (mobileRightSidebarOpen) {
|
isOpen={isSidebarOpen}
|
||||||
setMobileRightSidebarOpen(false);
|
isMobile={isMobile}
|
||||||
}
|
className="border-border"
|
||||||
setMobileSessionPanelOpen(nextOpen);
|
topBar={<SidebarTopBar />}
|
||||||
},
|
|
||||||
toggleRightDrawer: handleToggleMobileRightDrawer,
|
|
||||||
leftDrawerX,
|
|
||||||
rightDrawerX,
|
|
||||||
leftDrawerWidth,
|
|
||||||
rightDrawerWidth,
|
|
||||||
setMobileLeftDrawerOpen: setMobileSessionPanelOpen,
|
|
||||||
setRightSidebarOpen: setMobileRightSidebarOpen,
|
|
||||||
}}>
|
|
||||||
{/* Mobile: header + drawer mode */}
|
|
||||||
{!isSettingsDialogOpen && <Header
|
|
||||||
onToggleLeftDrawer={() => {
|
|
||||||
const nextOpen = !mobileLeftDrawerOpen;
|
|
||||||
if (mobileRightSidebarOpen) {
|
|
||||||
setMobileRightSidebarOpen(false);
|
|
||||||
}
|
|
||||||
setMobileSessionPanelOpen(nextOpen);
|
|
||||||
}}
|
|
||||||
onToggleRightDrawer={() => {
|
|
||||||
handleToggleMobileRightDrawer();
|
|
||||||
}}
|
|
||||||
leftDrawerOpen={mobileLeftDrawerOpen}
|
|
||||||
rightDrawerOpen={mobileRightSidebarOpen}
|
|
||||||
/>}
|
|
||||||
|
|
||||||
{/* Main content area (fixed) */}
|
|
||||||
<div
|
|
||||||
data-page-scroll-lock="true"
|
|
||||||
className={cn(
|
|
||||||
'flex flex-1 overflow-hidden relative',
|
|
||||||
isSettingsDialogOpen && 'hidden'
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<main className="w-full h-full overflow-hidden bg-background relative" data-page-scroll-lock="true">
|
<SessionSidebar isVisible={isSidebarOpen} />
|
||||||
<div className={cn('absolute inset-0', (!isChatActive || isSurfacePageOpen) && 'invisible')}>
|
</Sidebar>
|
||||||
<ErrorBoundary><ChatView active={isChatActive && !isSettingsDialogOpen && !isSurfacePageOpen} /></ErrorBoundary>
|
<div className="relative flex flex-1 min-w-0 flex-col overflow-hidden bg-background" data-page-scroll-lock="true">
|
||||||
</div>
|
<Header />
|
||||||
{secondaryView && (
|
<div className="relative flex flex-1 min-h-0 overflow-hidden bg-background" data-page-scroll-lock="true">
|
||||||
<div className={cn('absolute inset-0', isSurfacePageOpen && 'invisible')}>
|
<div className="relative flex flex-1 min-w-0 flex-col overflow-hidden border-t border-border bg-background" data-page-scroll-lock="true">
|
||||||
<ErrorBoundary>{secondaryView}</ErrorBoundary>
|
<div className="flex flex-1 min-h-0 overflow-hidden" data-page-scroll-lock="true">
|
||||||
</div>
|
{/* Holds the chat and the context panel together, so its
|
||||||
)}
|
width does not move when the context panel opens. The
|
||||||
{isMultiRunLauncherOpen && (
|
work-status panel measures this rather than the chat,
|
||||||
<div className="absolute inset-0 z-10 bg-background">
|
which the context panel animates. */}
|
||||||
<ErrorBoundary>
|
<div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden" data-page-scroll-lock="true" data-chat-area="true">
|
||||||
<MultiRunLauncher
|
<main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
|
||||||
initialPrompt={multiRunLauncherPrefillPrompt}
|
<div className={cn('absolute inset-0', (!isChatActive || isSurfacePageOpen) && 'invisible')}>
|
||||||
onCreated={() => setMultiRunLauncherOpen(false)}
|
<ErrorBoundary><ChatView active={isChatActive && !isSettingsDialogOpen && !isSurfacePageOpen} /></ErrorBoundary>
|
||||||
onCancel={() => setMultiRunLauncherOpen(false)}
|
</div>
|
||||||
/>
|
{isMultiRunLauncherOpen && (
|
||||||
</ErrorBoundary>
|
<div className="absolute inset-0 z-10 bg-background">
|
||||||
</div>
|
<ErrorBoundary>
|
||||||
)}
|
{/* isWindowed: the app Header already shows the surface
|
||||||
<ErrorBoundary><ScheduledTasksDialog /></ErrorBoundary>
|
title, so skip the launcher's own title bar. */}
|
||||||
<ErrorBoundary><ArchiveView /></ErrorBoundary>
|
<MultiRunLauncher
|
||||||
<ErrorBoundary><WorktreesView /></ErrorBoundary>
|
isWindowed
|
||||||
{/* Always mount SessionSidebar on mobile to match desktop behavior.
|
initialPrompt={multiRunLauncherPrefillPrompt}
|
||||||
Conditional mount (mobileLeftDrawerVisible && ...) caused a
|
onCreated={() => setMultiRunLauncherOpen(false)}
|
||||||
data-loading cascade on every drawer open: paginated sessions
|
onCancel={() => setMultiRunLauncherOpen(false)}
|
||||||
fetch, worktree discovery, repo status, PR status, and 10+ memo
|
/>
|
||||||
recomputations. On Android PWA this manifested as a >10s delay
|
</ErrorBoundary>
|
||||||
before the drawer became interactive (issue #1695). Visibility is
|
|
||||||
controlled by the leftDrawerX transform (off-screen when closed).
|
|
||||||
The invisible class matters when fully hidden: leftDrawerWidth is
|
|
||||||
not recomputed on resize/rotation, so a closed drawer translated by
|
|
||||||
the old width could otherwise peek into the viewport; it also keeps
|
|
||||||
the off-screen sidebar out of the tab order and skips painting it. */}
|
|
||||||
<motion.div
|
|
||||||
className={cn(
|
|
||||||
'absolute inset-0 z-20 bg-sidebar',
|
|
||||||
!mobileLeftDrawerVisible && 'pointer-events-none invisible',
|
|
||||||
)}
|
|
||||||
data-page-scroll-lock="true"
|
|
||||||
style={{ x: leftDrawerX }}
|
|
||||||
aria-hidden={!mobileLeftDrawerOpen}
|
|
||||||
>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<SessionSidebar mobileVariant isVisible={mobileLeftDrawerVisible} />
|
|
||||||
</ErrorBoundary>
|
|
||||||
</motion.div>
|
|
||||||
{mobileRightDrawerVisible && (
|
|
||||||
<motion.div className="absolute inset-0 z-20 bg-sidebar" data-page-scroll-lock="true" style={{ x: rightDrawerX }} aria-hidden={!mobileRightSidebarOpen}>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<React.Suspense fallback={null}><GitView isActive={mobileRightSidebarOpen} /></React.Suspense>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile settings: full screen */}
|
|
||||||
{isSettingsDialogOpen && (
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 z-10 bg-background"
|
|
||||||
style={{ paddingTop: 'var(--oc-safe-area-top, 0px)' }}
|
|
||||||
>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<React.Suspense fallback={null}>
|
|
||||||
<SettingsView onClose={() => setSettingsDialogOpen(false)} />
|
|
||||||
</React.Suspense>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DrawerProvider>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{/* Persistent top-left controls (toggle + project actions) that
|
|
||||||
stay put while the sidebar/header animate beneath them. */}
|
|
||||||
<TitlebarLeftControls />
|
|
||||||
{/* Desktop: full-height Sidebar beside [Header above (chat | RightSidebar)] */}
|
|
||||||
<div className="flex flex-1 overflow-hidden" data-page-scroll-lock="true">
|
|
||||||
<Sidebar
|
|
||||||
isOpen={isSidebarOpen}
|
|
||||||
isMobile={isMobile}
|
|
||||||
className="border-border"
|
|
||||||
topBar={<SidebarTopBar />}
|
|
||||||
>
|
|
||||||
<SessionSidebar isVisible={isSidebarOpen} />
|
|
||||||
</Sidebar>
|
|
||||||
<div className="relative flex flex-1 min-w-0 flex-col overflow-hidden bg-background" data-page-scroll-lock="true">
|
|
||||||
<Header />
|
|
||||||
<div className="relative flex flex-1 min-h-0 overflow-hidden bg-background" data-page-scroll-lock="true">
|
|
||||||
<div className="relative flex flex-1 min-w-0 flex-col overflow-hidden border-t border-border bg-background" data-page-scroll-lock="true">
|
|
||||||
<div className="flex flex-1 min-h-0 overflow-hidden" data-page-scroll-lock="true">
|
|
||||||
{/* Holds the chat and the context panel together, so its
|
|
||||||
width does not move when the context panel opens. The
|
|
||||||
work-status panel measures this rather than the chat,
|
|
||||||
which the context panel animates. */}
|
|
||||||
<div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden" data-page-scroll-lock="true" data-chat-area="true">
|
|
||||||
<main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
|
|
||||||
<div className={cn('absolute inset-0', (!isChatActive || isSurfacePageOpen) && 'invisible')}>
|
|
||||||
<ErrorBoundary><ChatView active={isChatActive && !isSettingsDialogOpen && !isSurfacePageOpen} /></ErrorBoundary>
|
|
||||||
</div>
|
</div>
|
||||||
{secondaryView && (
|
)}
|
||||||
<div className={cn('absolute inset-0', isSurfacePageOpen && 'invisible')}>
|
<ErrorBoundary><ScheduledTasksDialog /></ErrorBoundary>
|
||||||
<ErrorBoundary>{secondaryView}</ErrorBoundary>
|
<ErrorBoundary><ArchiveView /></ErrorBoundary>
|
||||||
</div>
|
<ErrorBoundary><WorktreesView /></ErrorBoundary>
|
||||||
)}
|
</main>
|
||||||
{isMultiRunLauncherOpen && (
|
<ContextPanel />
|
||||||
<div className="absolute inset-0 z-10 bg-background">
|
|
||||||
<ErrorBoundary>
|
|
||||||
{/* isWindowed: the app Header already shows the surface
|
|
||||||
title, so skip the launcher's own title bar. */}
|
|
||||||
<MultiRunLauncher
|
|
||||||
isWindowed
|
|
||||||
initialPrompt={multiRunLauncherPrefillPrompt}
|
|
||||||
onCreated={() => setMultiRunLauncherOpen(false)}
|
|
||||||
onCancel={() => setMultiRunLauncherOpen(false)}
|
|
||||||
/>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<ErrorBoundary><ScheduledTasksDialog /></ErrorBoundary>
|
|
||||||
<ErrorBoundary><ArchiveView /></ErrorBoundary>
|
|
||||||
<ErrorBoundary><WorktreesView /></ErrorBoundary>
|
|
||||||
</main>
|
|
||||||
<ContextPanel />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="border-t border-border" data-page-scroll-lock="true">
|
</div>
|
||||||
<ErrorBoundary><ContextPanelRail /></ErrorBoundary>
|
<div className="border-t border-border" data-page-scroll-lock="true">
|
||||||
</div>
|
<ErrorBoundary><ContextPanelRail /></ErrorBoundary>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Desktop settings: windowed dialog with blur */}
|
{/* Settings: windowed dialog with blur */}
|
||||||
{settingsWindowMounted ? (
|
{settingsWindowMounted ? (
|
||||||
<React.Suspense fallback={null}>
|
<React.Suspense fallback={null}>
|
||||||
<SettingsWindow
|
<SettingsWindow
|
||||||
open={isSettingsDialogOpen}
|
open={isSettingsDialogOpen}
|
||||||
onOpenChange={setSettingsDialogOpen}
|
onOpenChange={setSettingsDialogOpen}
|
||||||
/>
|
/>
|
||||||
</React.Suspense>
|
</React.Suspense>
|
||||||
) : null}
|
) : null}
|
||||||
</>
|
</div>
|
||||||
)}
|
</DiffWorkerProvider>
|
||||||
|
|
||||||
</div>
|
|
||||||
</DiffWorkerProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,29 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import type { MotionValue } from 'motion/react';
|
|
||||||
|
|
||||||
export interface DrawerContextValue {
|
|
||||||
leftDrawerOpen: boolean;
|
|
||||||
rightDrawerOpen: boolean;
|
|
||||||
toggleLeftDrawer: () => void;
|
|
||||||
toggleRightDrawer: () => void;
|
|
||||||
// Motion values for real-time drawer dragging
|
|
||||||
leftDrawerX: MotionValue<number>;
|
|
||||||
rightDrawerX: MotionValue<number>;
|
|
||||||
leftDrawerWidth: React.MutableRefObject<number>;
|
|
||||||
rightDrawerWidth: React.MutableRefObject<number>;
|
|
||||||
setMobileLeftDrawerOpen: (open: boolean) => void;
|
|
||||||
setRightSidebarOpen: (open: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DrawerContext = React.createContext<DrawerContextValue | null>(null);
|
|
||||||
|
|
||||||
export const DrawerProvider: React.FC<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
value: DrawerContextValue;
|
|
||||||
}> = ({ children, value }) => {
|
|
||||||
return (
|
|
||||||
<DrawerContext.Provider value={value}>
|
|
||||||
{children}
|
|
||||||
</DrawerContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user