From a92ba2542cc2a7972d1fc5bf863fc9db4726ef31 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 25 Jun 2025 14:37:44 +1000
Subject: [PATCH] feat(ui): switch to canvas tab when using launchpad

---
 .../SimpleSession/CanvasLaunchpadPanel.tsx    | 16 ++++++++++-----
 .../LaunchpadAddStyleReference.tsx            |  5 +++--
 .../LaunchpadEditImageButton.tsx              |  5 +++--
 .../LaunchpadGenerateFromTextButton.tsx       | 20 ++++++++++++++-----
 .../LaunchpadUseALayoutImageButton.tsx        |  5 +++--
 .../components/Core/ParamNegativePrompt.tsx   |  2 +-
 .../components/Core/ParamPositivePrompt.tsx   |  2 +-
 .../ParamSDXLNegativeStylePrompt.tsx          |  2 +-
 .../ParamSDXLPositiveStylePrompt.tsx          |  2 +-
 .../ui/layouts/auto-layout-context.tsx        | 11 +++++++---
 .../ui/layouts/canvas-tab-auto-layout.tsx     |  8 ++++----
 .../ui/layouts/generate-tab-auto-layout.tsx   |  8 ++++----
 .../ui/layouts/upscaling-tab-auto-layout.tsx  |  8 ++++----
 .../ui/layouts/workflows-tab-auto-layout.tsx  |  8 ++++----
 14 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
index 2af9fb2056..f773d6e8ba 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx
@@ -1,5 +1,7 @@
 import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
-import { memo } from 'react';
+import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
+import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
+import { memo, useCallback } from 'react';
 
 import { InitialStateMainModelPicker } from './InitialStateMainModelPicker';
 import { LaunchpadAddStyleReference } from './LaunchpadAddStyleReference';
@@ -8,6 +10,10 @@ import { LaunchpadGenerateFromTextButton } from './LaunchpadGenerateFromTextButt
 import { LaunchpadUseALayoutImageButton } from './LaunchpadUseALayoutImageButton';
 
 export const CanvasLaunchpadPanel = memo(() => {
+  const ctx = useAutoLayoutContext();
+  const focusCanvas = useCallback(() => {
+    ctx.focusPanel(WORKSPACE_PANEL_ID);
+  }, [ctx]);
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
       <Flex flexDir="column" w="full" gap={4} px={14} maxW={768} pt="20vh">
@@ -24,10 +30,10 @@ export const CanvasLaunchpadPanel = memo(() => {
               </Text>
             </Flex>
           </Grid>
-          <LaunchpadGenerateFromTextButton />
-          <LaunchpadAddStyleReference />
-          <LaunchpadEditImageButton />
-          <LaunchpadUseALayoutImageButton />
+          <LaunchpadGenerateFromTextButton extraAction={focusCanvas} />
+          <LaunchpadAddStyleReference extraAction={focusCanvas} />
+          <LaunchpadEditImageButton extraAction={focusCanvas} />
+          <LaunchpadUseALayoutImageButton extraAction={focusCanvas} />
         </Flex>
       </Flex>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx
index b4dfcff423..6ab253565b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference.tsx
@@ -13,7 +13,7 @@ import type { ImageDTO } from 'services/api/types';
 
 const dndTargetData = addGlobalReferenceImageDndTarget.getData();
 
-export const LaunchpadAddStyleReference = memo(() => {
+export const LaunchpadAddStyleReference = memo((props: { extraAction?: () => void }) => {
   const { dispatch, getState } = useAppStore();
 
   const uploadOptions = useMemo(
@@ -23,10 +23,11 @@ export const LaunchpadAddStyleReference = memo(() => {
           const config = getDefaultRefImageConfig(getState);
           config.image = imageDTOToImageWithDims(imageDTO);
           dispatch(refImageAdded({ overrides: { config } }));
+          props.extraAction?.();
         },
         allowMultiple: false,
       }) as const,
-    [dispatch, getState]
+    [dispatch, getState, props]
   );
 
   const uploadApi = useImageUploadButton(uploadOptions);
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadEditImageButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadEditImageButton.tsx
index f509558427..afc5c6c403 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadEditImageButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadEditImageButton.tsx
@@ -13,14 +13,15 @@ const NEW_CANVAS_OPTIONS = { type: 'raster_layer', withInpaintMask: true } as co
 
 const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
 
-export const LaunchpadEditImageButton = memo(() => {
+export const LaunchpadEditImageButton = memo((props: { extraAction?: () => void }) => {
   const { getState, dispatch } = useAppStore();
 
   const onUpload = useCallback(
     (imageDTO: ImageDTO) => {
       newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
+      props.extraAction?.();
     },
-    [dispatch, getState]
+    [dispatch, getState, props]
   );
   const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
index bac9b2e750..055fb3a2ad 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadGenerateFromTextButton.tsx
@@ -1,19 +1,29 @@
 import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
 import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton';
-import { memo } from 'react';
+import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
+import { memo, useCallback } from 'react';
 import { PiCursorTextBold, PiTextAaBold } from 'react-icons/pi';
 
-const focusOnPrompt = () => {
-  const promptElement = document.getElementById('prompt');
+const focusOnPrompt = (el: HTMLElement) => {
+  const promptElement = el.querySelector('.positive-prompt-textarea');
   if (promptElement instanceof HTMLTextAreaElement) {
     promptElement.focus();
     promptElement.select();
   }
 };
 
-export const LaunchpadGenerateFromTextButton = memo(() => {
+export const LaunchpadGenerateFromTextButton = memo((props: { extraAction?: () => void }) => {
+  const { rootRef } = useAutoLayoutContext();
+  const onClick = useCallback(() => {
+    const el = rootRef.current;
+    if (!el) {
+      return;
+    }
+    focusOnPrompt(el);
+    props.extraAction?.();
+  }, [props, rootRef]);
   return (
-    <LaunchpadButton onClick={focusOnPrompt} position="relative" gap={8}>
+    <LaunchpadButton onClick={onClick} position="relative" gap={8}>
       <Icon as={PiTextAaBold} boxSize={8} color="base.500" />
       <Flex flexDir="column" alignItems="flex-start" gap={2}>
         <Heading size="sm">Generate from Text</Heading>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadUseALayoutImageButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadUseALayoutImageButton.tsx
index 204a684abb..f05290f095 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadUseALayoutImageButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/LaunchpadUseALayoutImageButton.tsx
@@ -14,14 +14,15 @@ const NEW_CANVAS_OPTIONS = { type: 'control_layer', withResize: true } as const;
 
 const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
 
-export const LaunchpadUseALayoutImageButton = memo(() => {
+export const LaunchpadUseALayoutImageButton = memo((props: { extraAction?: () => void }) => {
   const { getState, dispatch } = useAppStore();
 
   const onUpload = useCallback(
     (imageDTO: ImageDTO) => {
       newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
+      props.extraAction?.();
     },
-    [dispatch, getState]
+    [dispatch, getState, props]
   );
   const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index f18d1238ea..1ba98fa774 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -57,7 +57,7 @@ export const ParamNegativePrompt = memo(() => {
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
       <Box pos="relative" w="full">
         <Textarea
-          id="negativePrompt"
+          className="negative-prompt-textarea"
           name="negativePrompt"
           ref={textareaRef}
           value={prompt}
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index 2c3d178697..65945bc322 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -86,7 +86,7 @@ export const ParamPositivePrompt = memo(() => {
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
       <Box pos="relative">
         <Textarea
-          id="prompt"
+          className="positive-prompt-textarea"
           name="prompt"
           ref={textareaRef}
           value={prompt}
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index d31eeafbd5..41e57f5416 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -38,7 +38,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
       <Box pos="relative">
         <Textarea
-          id="prompt"
+          className="negative-style-prompt-textarea"
           name="prompt"
           ref={textareaRef}
           value={prompt}
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
index c9e76ddfca..3e8a9aa23d 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
@@ -38,7 +38,7 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
       <Box pos="relative">
         <Textarea
-          id="prompt"
+          className="positive-style-prompt-textarea"
           name="prompt"
           ref={textareaRef}
           value={prompt}
diff --git a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
index 4f4cd9ea9e..77804b7356 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
@@ -2,7 +2,7 @@ import type { DockviewApi, GridviewApi } from 'dockview';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import type { WritableAtom } from 'nanostores';
 import { atom } from 'nanostores';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, RefObject } from 'react';
 import { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
 
 import { LEFT_PANEL_ID, LEFT_PANEL_MIN_SIZE_PX, RIGHT_PANEL_ID, RIGHT_PANEL_MIN_SIZE_PX } from './shared';
@@ -13,6 +13,7 @@ type AutoLayoutContextValue = {
   toggleBothPanels: () => void;
   resetPanels: () => void;
   focusPanel: (id: string) => void;
+  rootRef: RefObject<HTMLDivElement>;
   _$rootPanelApi: WritableAtom<GridviewApi | null>;
   _$leftPanelApi: WritableAtom<GridviewApi | null>;
   _$centerPanelApi: WritableAtom<DockviewApi | null>;
@@ -55,8 +56,10 @@ const activatePanel = (api: GridviewApi | DockviewApi, panelId: string) => {
   panel.api.setActive();
 };
 
-export const AutoLayoutProvider = (props: PropsWithChildren<{ $rootApi: WritableAtom<GridviewApi | null> }>) => {
-  const { $rootApi, children } = props;
+export const AutoLayoutProvider = (
+  props: PropsWithChildren<{ $rootApi: WritableAtom<GridviewApi | null>; rootRef: RefObject<HTMLDivElement> }>
+) => {
+  const { $rootApi, rootRef, children } = props;
   const $leftApi = useState(() => atom<GridviewApi | null>(null))[0];
   const $centerApi = useState(() => atom<DockviewApi | null>(null))[0];
   const $rightApi = useState(() => atom<GridviewApi | null>(null))[0];
@@ -128,6 +131,7 @@ export const AutoLayoutProvider = (props: PropsWithChildren<{ $rootApi: Writable
       toggleBothPanels,
       resetPanels,
       focusPanel,
+      rootRef,
       _$rootPanelApi: $rootApi,
       _$leftPanelApi: $leftApi,
       _$centerPanelApi: $centerApi,
@@ -140,6 +144,7 @@ export const AutoLayoutProvider = (props: PropsWithChildren<{ $rootApi: Writable
       $rootApi,
       focusPanel,
       resetPanels,
+      rootRef,
       toggleBothPanels,
       toggleLeftPanel,
       toggleRightPanel,
diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
index 7e6004be1d..16a3a1df09 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
@@ -247,7 +247,7 @@ export const initializeRootPanelLayout = (api: GridviewApi) => {
 };
 
 export const CanvasTabAutoLayout = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
   const $rootPanelApi = useState(() => atom<GridviewApi | null>(null))[0];
   const onReady = useCallback<IGridviewReactProps['onReady']>(
     (event) => {
@@ -256,12 +256,12 @@ export const CanvasTabAutoLayout = memo(() => {
     },
     [$rootPanelApi]
   );
-  useResizeMainPanelOnFirstVisit($rootPanelApi, ref);
+  useResizeMainPanelOnFirstVisit($rootPanelApi, rootRef);
 
   return (
-    <AutoLayoutProvider $rootApi={$rootPanelApi}>
+    <AutoLayoutProvider $rootApi={$rootPanelApi} rootRef={rootRef}>
       <GridviewReact
-        ref={ref}
+        ref={rootRef}
         className="dockview-theme-invoke"
         components={rootPanelComponents}
         onReady={onReady}
diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
index 9041c9f444..e4edbbff0b 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
@@ -222,7 +222,7 @@ export const initializeRootPanelLayout = (api: GridviewApi) => {
 };
 
 export const GenerateTabAutoLayout = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
   const $rootPanelApi = useState(() => atom<GridviewApi | null>(null))[0];
   const onReady = useCallback<IGridviewReactProps['onReady']>(
     (event) => {
@@ -231,12 +231,12 @@ export const GenerateTabAutoLayout = memo(() => {
     },
     [$rootPanelApi]
   );
-  useResizeMainPanelOnFirstVisit($rootPanelApi, ref);
+  useResizeMainPanelOnFirstVisit($rootPanelApi, rootRef);
 
   return (
-    <AutoLayoutProvider $rootApi={$rootPanelApi}>
+    <AutoLayoutProvider $rootApi={$rootPanelApi} rootRef={rootRef}>
       <GridviewReact
-        ref={ref}
+        ref={rootRef}
         className="dockview-theme-invoke"
         components={rootPanelComponents}
         onReady={onReady}
diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
index ec2e378a87..236338001c 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
@@ -217,7 +217,7 @@ export const initializeRootPanelLayout = (api: GridviewApi) => {
 };
 
 export const UpscalingTabAutoLayout = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
   const $rootPanelApi = useState(() => atom<GridviewApi | null>(null))[0];
   const onReady = useCallback<IGridviewReactProps['onReady']>(
     (event) => {
@@ -226,12 +226,12 @@ export const UpscalingTabAutoLayout = memo(() => {
     },
     [$rootPanelApi]
   );
-  useResizeMainPanelOnFirstVisit($rootPanelApi, ref);
+  useResizeMainPanelOnFirstVisit($rootPanelApi, rootRef);
 
   return (
-    <AutoLayoutProvider $rootApi={$rootPanelApi}>
+    <AutoLayoutProvider $rootApi={$rootPanelApi} rootRef={rootRef}>
       <GridviewReact
-        ref={ref}
+        ref={rootRef}
         className="dockview-theme-invoke"
         components={rootPanelComponents}
         onReady={onReady}
diff --git a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
index 1c11a50ebb..11cc43ef7b 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
@@ -235,7 +235,7 @@ export const initializeRootPanelLayout = (api: GridviewApi) => {
 };
 
 export const WorkflowsTabAutoLayout = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
   const $rootPanelApi = useState(() => atom<GridviewApi | null>(null))[0];
   const onReady = useCallback<IGridviewReactProps['onReady']>(
     (event) => {
@@ -244,12 +244,12 @@ export const WorkflowsTabAutoLayout = memo(() => {
     },
     [$rootPanelApi]
   );
-  useResizeMainPanelOnFirstVisit($rootPanelApi, ref);
+  useResizeMainPanelOnFirstVisit($rootPanelApi, rootRef);
 
   return (
-    <AutoLayoutProvider $rootApi={$rootPanelApi}>
+    <AutoLayoutProvider $rootApi={$rootPanelApi} rootRef={rootRef}>
       <GridviewReact
-        ref={ref}
+        ref={rootRef}
         className="dockview-theme-invoke"
         components={rootPanelComponents}
         onReady={onReady}