From 36ec1015d64f9d6742b45ca399bbfb75b0196551 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 23 Jun 2025 11:39:56 +1000
Subject: [PATCH] feat(ui): double-click staging area image to disable
 auto-switch

---
 .../SimpleSession/QueueItemPreviewMini.tsx    | 19 ++++++++++++++++++-
 .../StagingAreaToolbarMenuAutoSwitch.tsx      |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
index 420abee061..5fb525638e 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
@@ -11,6 +11,7 @@ import { QueueItemProgressImage } from 'features/controlLayers/components/Simple
 import { QueueItemStatusLabel } from 'features/controlLayers/components/SimpleSession/QueueItemStatusLabel';
 import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
 import { DndImage } from 'features/dnd/DndImage';
+import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
 import type { S } from 'services/api/types';
 
@@ -46,12 +47,28 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
     ctx.$selectedItemId.set(item.item_id);
   }, [ctx.$selectedItemId, item.item_id]);
 
+  const onDoubleClick = useCallback(() => {
+    const autoSwitch = ctx.$autoSwitch.get();
+    if (autoSwitch !== 'off') {
+      ctx.$autoSwitch.set('off');
+      toast({
+        title: 'Auto-Switch Disabled',
+      });
+    }
+  }, [ctx.$autoSwitch]);
+
   const onLoad = useCallback(() => {
     ctx.onImageLoad(item.item_id);
   }, [ctx, item.item_id]);
 
   return (
-    <Flex id={getQueueItemElementId(item.item_id)} sx={sx} data-selected={isSelected} onClick={onClick}>
+    <Flex
+      id={getQueueItemElementId(item.item_id)}
+      sx={sx}
+      data-selected={isSelected}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+    >
       <QueueItemStatusLabel item={item} position="absolute" margin="auto" />
       {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
       {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch.tsx
index bf6aa0ae51..1e23208c74 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch.tsx
@@ -17,7 +17,7 @@ export const StagingAreaToolbarMenuAutoSwitch = memo(() => {
   );
 
   return (
-    <MenuOptionGroup value={autoSwitch} onChange={onChange} title="Auto Switch" type="radio">
+    <MenuOptionGroup value={autoSwitch} onChange={onChange} title="Auto-Switch" type="radio">
       <MenuItemOption value="off" closeOnSelect={false}>
         Off
       </MenuItemOption>