Make sidebar shortcuts leave focus mode (#2717)

* fix(app): exit focus mode for sidebar shortcuts

Focus mode kept sidebar actions hidden after their handlers ran. Exit only after a sidebar action is handled so the requested action still takes effect.

* fix(app): order focus exit before sidebar action

Leave focus mode before dispatching the sidebar command so its handler runs against the visible panel state.

* fix(app): preserve focus mode outside workspaces

Only exit active workspace focus mode after a sidebar shortcut is handled. Keep persisted focus state unchanged when the shortcut has no foreground workspace target.

packages/app/src/app/_layout.tsx

@@ -428,6 +428,7 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
   const openDesktopAgentList = usePanelStore((state) => state.openDesktopAgentList);
   const closeDesktopAgentList = usePanelStore((state) => state.closeDesktopAgentList);
   const closeDesktopFileExplorer = usePanelStore((state) => state.closeDesktopFileExplorer);
+  const exitFocusMode = usePanelStore((state) => state.exitFocusMode);
   const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
   const isDesktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const isDesktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
@@ -472,8 +473,10 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
   useKeyboardShortcuts({
     enabled: keyboardShortcutsEnabled,
     isMobile: isCompactLayout,
+    isWorkspaceFocusModeEnabled,
     toggleAgentList,
     toggleBothSidebars: toggleDesktopSidebars,
+    exitFocusMode,
     cycleTheme,
   });
 

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -40,14 +40,18 @@ import {
 export function useKeyboardShortcuts({
   enabled,
   isMobile,
+  isWorkspaceFocusModeEnabled,
   toggleAgentList,
   toggleBothSidebars,
+  exitFocusMode,
   cycleTheme,
 }: {
   enabled: boolean;
   isMobile: boolean;
+  isWorkspaceFocusModeEnabled: boolean;
   toggleAgentList: () => void;
   toggleBothSidebars?: () => void;
+  exitFocusMode: () => void;
   cycleTheme?: () => void;
 }) {
   const pathname = usePathname();
@@ -207,11 +211,15 @@ export function useKeyboardShortcuts({
           shortcutsDialogOpen: store.shortcutsDialogOpen,
         },
       );
-      return performShortcutAction(
+      const handled = performShortcutAction(
         shortcutAction,
         input.domEvent,
         input.browserFocusRestoreElement,
       );
+      if (handled && isWorkspaceFocusModeEnabled && input.action.startsWith("sidebar.")) {
+        exitFocusMode();
+      }
+      return handled;
     };
 
     const resolveAndPerformShortcut = (input: {
@@ -371,10 +379,12 @@ export function useKeyboardShortcuts({
     bindings,
     cycleTheme,
     enabled,
+    exitFocusMode,
     activeWorkspaceSelection,
     isDesktopApp,
     isMac,
     isMobile,
+    isWorkspaceFocusModeEnabled,
     openProjectPickerAction,
     pathname,
     publishBrowserShortcutPolicy,

packages/app/src/stores/panel-store/index.ts

@@ -90,6 +90,7 @@ export interface PanelState {
 
   // Actions
   toggleFocusMode: () => void;
+  exitFocusMode: () => void;
   showMobileAgent: () => void;
   showMobileAgentList: () => void;
   toggleMobileAgentList: () => void;
@@ -157,6 +158,13 @@ export const usePanelStore = create<PanelState>()(
           desktop: { ...state.desktop, focusModeEnabled: !state.desktop.focusModeEnabled },
         })),
 
+      exitFocusMode: () =>
+        set((state) =>
+          state.desktop.focusModeEnabled
+            ? { desktop: { ...state.desktop, focusModeEnabled: false } }
+            : state,
+        ),
+
       showMobileAgent: () => set((state) => setMobilePanelTargetPatch(state, "agent")),
 
       showMobileAgentList: () => set((state) => setMobilePanelTargetPatch(state, "agent-list")),