From d9025333878d875c45c6b25a7648e4ed6d2a61f0 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 19 Jan 2024 14:54:19 +1100
Subject: [PATCH] feat(ui): use global modifier state for clear queue button
 mode switch

---
 .../queue/components/ClearQueueIconButton.tsx | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index d1618f2099..1ad16fc14c 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -1,11 +1,11 @@
 import { useDisclosure } from '@chakra-ui/react';
+import { useStore } from '@nanostores/react';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
+import { $shift } from 'common/hooks/useGlobalModifiers';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
-import { useState } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
 
@@ -60,24 +60,16 @@ const ClearSingleQueueItemIconButton = (props: Props) => {
 export const ClearQueueButton = (props: Props) => {
   // Show the single item clear button when shift is pressed
   // Otherwise show the clear queue button
-  const [showSingleItemClear, setShowSingleItemClear] = useState(true);
-  useHotkeys('shift', () => setShowSingleItemClear(false), {
-    keydown: true,
-    keyup: false,
-  });
-  useHotkeys('shift', () => setShowSingleItemClear(true), {
-    keydown: false,
-    keyup: true,
-  });
+  const shift = useStore($shift);
 
   const disclosure = useDisclosure();
 
   return (
     <>
-      {showSingleItemClear ? (
-        <ClearSingleQueueItemIconButton {...props} />
-      ) : (
+      {shift ? (
         <ClearQueueIconButton {...props} onOpen={disclosure.onOpen} />
+      ) : (
+        <ClearSingleQueueItemIconButton {...props} />
       )}
       <ClearQueueConfirmationAlertDialog disclosure={disclosure} />
     </>