diff --git a/src/renderer/src/components/browser-pane/BrowserToolbarMenu.tsx b/src/renderer/src/components/browser-pane/BrowserToolbarMenu.tsx index 95b004f4aaa..01f9fc6b735 100644 --- a/src/renderer/src/components/browser-pane/BrowserToolbarMenu.tsx +++ b/src/renderer/src/components/browser-pane/BrowserToolbarMenu.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import { Check, Ellipsis, Import, Monitor, Plus, Settings } from 'lucide-react' import { toast } from 'sonner' import { Button } from '@/components/ui/button' @@ -58,6 +58,9 @@ export function BrowserToolbarMenu({ const fetchDetectedBrowsers = useAppStore((s) => s.fetchDetectedBrowsers) const browserSessionImportState = useAppStore((s) => s.browserSessionImportState) const setBrowserPageViewportPreset = useAppStore((s) => s.setBrowserPageViewportPreset) + const browserCookieTourStepActive = useAppStore( + (s) => s.activeContextualTourId === 'browser' && s.activeContextualTourStepIndex === 2 + ) const applyViewportPreset = (nextId: BrowserViewportPresetId | null): void => { setBrowserPageViewportPreset(browserPageId, nextId) @@ -72,8 +75,22 @@ export function BrowserToolbarMenu({ const [pendingSwitchProfileId, setPendingSwitchProfileId] = useState( undefined ) + const [menuOpen, setMenuOpen] = useState(false) const mountedRef = useMountedRef() + useEffect(() => { + // Why: step 3 anchors on Import Cookies inside this menu, so open it when + // the browser tour reaches the final step and close it when leaving. + setMenuOpen(browserCookieTourStepActive) + }, [browserCookieTourStepActive]) + + const handleMenuOpenChange = (open: boolean): void => { + if (browserCookieTourStepActive && !open) { + return + } + setMenuOpen(open) + } + const effectiveProfileId = currentProfileId ?? 'default' const defaultProfile = browserSessionProfiles.find((p) => p.id === 'default') @@ -165,7 +182,7 @@ export function BrowserToolbarMenu({ return ( <> - +