Enhance workflow mode toggle with panel navigation and focus

Co-authored-by: kent <kent@invoke.ai>

Author: 2 people

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx

@@ -1,6 +1,9 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectWorkflowMode, workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice';
+import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
+import { VIEWER_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
+import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { MouseEventHandler } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,21 +13,30 @@ export const WorkflowViewEditToggleButton = memo(() => {
   const dispatch = useAppDispatch();
   const mode = useAppSelector(selectWorkflowMode);
   const { t } = useTranslation();
+  const { focusPanel } = useAutoLayoutContext();
 
   const onClickEdit = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (e) => {
       e.stopPropagation();
+      // Navigate to workflows tab and focus the Workflow Editor panel
+      dispatch(setActiveTab('workflows'));
       dispatch(workflowModeChanged('edit'));
+      // Focus the Workflow Editor panel
+      focusPanel(WORKSPACE_PANEL_ID);
     },
-    [dispatch]
+    [dispatch, focusPanel]
   );
 
   const onClickView = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (e) => {
       e.stopPropagation();
+      // Navigate to workflows tab and focus the Image Viewer panel
+      dispatch(setActiveTab('workflows'));
       dispatch(workflowModeChanged('view'));
+      // Focus the Image Viewer panel
+      focusPanel(VIEWER_PANEL_ID);
     },
-    [dispatch]
+    [dispatch, focusPanel]
   );
 
   if (mode === 'view') {