fix(ui): update studio destination options and get them all working w…

…ith new tab and store values

invokeai/frontend/web/src/app/components/App.tsx

@@ -1,4 +1,6 @@
 import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library';
+import type { StudioDestination } from 'app/hooks/useHandleStudioDestination';
+import { useHandleStudioDestination } from 'app/hooks/useHandleStudioDestination';
 import { useSyncQueueStatus } from 'app/hooks/useSyncQueueStatus';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
@@ -21,8 +23,6 @@ import RefreshAfterResetModal from 'features/system/components/SettingsModal/Ref
 import { configChanged } from 'features/system/store/configSlice';
 import { selectLanguage } from 'features/system/store/systemSelectors';
 import { AppContent } from 'features/ui/components/AppContent';
-import { setActiveTab } from 'features/ui/store/uiSlice';
-import type { TabName } from 'features/ui/store/uiTypes';
 import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
 import { AnimatePresence } from 'framer-motion';
 import i18n from 'i18n';
@@ -45,15 +45,15 @@ interface Props {
   };
   selectedWorkflowId?: string;
   selectedStylePresetId?: string;
-  destination?: TabName;
+  studioDestination?: StudioDestination;
 }
 
 const App = ({
   config = DEFAULT_CONFIG,
   selectedImage,
   selectedWorkflowId,
   selectedStylePresetId,
-  destination,
+  studioDestination,
 }: Props) => {
   const language = useAppSelector(selectLanguage);
   const logger = useLogger('system');
@@ -66,6 +66,8 @@ const App = ({
   useGlobalHotkeys();
   useGetOpenAPISchemaQuery();
 
+  const handleStudioDestination = useHandleStudioDestination();
+
   const { dropzone, isHandlingUpload, setIsHandlingUpload } = useFullscreenDropzone();
 
   const handleReset = useCallback(() => {
@@ -100,10 +102,10 @@ const App = ({
   }, [dispatch, selectedStylePresetId]);
 
   useEffect(() => {
-    if (destination) {
-      dispatch(setActiveTab(destination));
+    if (studioDestination) {
+      handleStudioDestination(studioDestination);
     }
-  }, [dispatch, destination]);
+  }, [handleStudioDestination, studioDestination]);
 
   useEffect(() => {
     dispatch(appStarted());

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -1,6 +1,7 @@
 import 'i18n';
 
 import type { Middleware } from '@reduxjs/toolkit';
+import type { StudioDestination } from 'app/hooks/useHandleStudioDestination';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
@@ -18,7 +19,6 @@ import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
 import AppDndContext from 'features/dnd/components/AppDndContext';
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
-import type { TabName } from 'features/ui/store/uiTypes';
 import type { PropsWithChildren, ReactNode } from 'react';
 import React, { lazy, memo, useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
@@ -46,7 +46,7 @@ interface Props extends PropsWithChildren {
   };
   selectedWorkflowId?: string;
   selectedStylePresetId?: string;
-  destination?: TabName;
+  studioDestination?: StudioDestination;
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
@@ -68,7 +68,7 @@ const InvokeAIUI = ({
   selectedImage,
   selectedWorkflowId,
   selectedStylePresetId,
-  destination,
+  studioDestination,
   customStarUi,
   socketOptions,
   isDebugging = false,
@@ -230,7 +230,7 @@ const InvokeAIUI = ({
                 selectedImage={selectedImage}
                 selectedWorkflowId={selectedWorkflowId}
                 selectedStylePresetId={selectedStylePresetId}
-                destination={destination}
+                studioDestination={studioDestination}
               />
             </AppDndContext>
           </ThemeLocaleProvider>

invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts

@@ -0,0 +1,57 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import { settingsSendToCanvasChanged } from 'features/controlLayers/store/canvasSettingsSlice';
+import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useCallback } from 'react';
+
+export type StudioDestination =
+  | 'generation'
+  | 'canvas'
+  | 'workflows'
+  | 'upscaling'
+  | 'viewAllWorkflows'
+  | 'viewAllStylePresets';
+
+export const useHandleStudioDestination = () => {
+  const dispatch = useAppDispatch();
+  const imageViewer = useImageViewer();
+
+  const handleStudioDestination = useCallback(
+    (destination: StudioDestination) => {
+      switch (destination) {
+        case 'generation':
+          dispatch(setActiveTab('canvas'));
+          dispatch(settingsSendToCanvasChanged(false));
+          imageViewer.open();
+          break;
+        case 'canvas':
+          dispatch(setActiveTab('canvas'));
+          dispatch(settingsSendToCanvasChanged(true));
+          imageViewer.close();
+          break;
+        case 'workflows':
+          dispatch(setActiveTab('workflows'));
+          break;
+        case 'upscaling':
+          dispatch(setActiveTab('upscaling'));
+          break;
+        case 'viewAllWorkflows':
+          dispatch(setActiveTab('workflows'));
+          $isWorkflowLibraryModalOpen.set(true);
+          break;
+        case 'viewAllStylePresets':
+          dispatch(setActiveTab('canvas'));
+          $isMenuOpen.set(true);
+          break;
+        default:
+          dispatch(setActiveTab('canvas'));
+          break;
+      }
+    },
+    [dispatch, imageViewer]
+  );
+
+  return handleStudioDestination;
+};