feat: 🚸 shift key queue cancellations

invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx

@@ -2,16 +2,17 @@ import { useDisclosure } from '@chakra-ui/react';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
 import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
+import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
-import { memo } from 'react';
+import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook'
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
 type Props = Omit<InvIconButtonProps, 'aria-label'>;
 
-const ClearQueueIconButton = (props: Props) => {
+const ClearQueueIconButton = ({ onOpen, ...props }: Props & { onOpen: () => void }) => {
   const { t } = useTranslation();
-  const disclosure = useDisclosure();
   const { isLoading, isDisabled } = useClearQueue();
 
   return (
@@ -23,13 +24,57 @@ const ClearQueueIconButton = (props: Props) => {
         tooltip={t('queue.clearTooltip')}
         icon={<PiTrashSimpleBold size="16px" />}
         colorScheme="error"
-        onClick={disclosure.onOpen}
+        onClick={onOpen}
         data-testid={t('queue.clear')}
         {...props}
       />
-      <ClearQueueConfirmationAlertDialog disclosure={disclosure} />
     </>
   );
 };
 
-export default memo(ClearQueueIconButton);
+const ClearSingleQueueItemIconButton = (props: Props) => {
+  const { t } = useTranslation();
+  const {
+    cancelQueueItem,
+    isLoading,
+    isDisabled,
+  } = useCancelCurrentQueueItem();
+
+  return (
+    <>
+      <InvIconButton
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        aria-label={t('queue.cancelTooltip')}
+        tooltip={t('queue.cancelTooltip')}
+        icon={<PiTrashSimpleBold size="16px" />}
+        colorScheme="error"
+        onClick={cancelQueueItem}
+        data-testid={t('queue.clear')}
+        {...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 disclosure = useDisclosure()
+
+  return (
+    <>
+      {showSingleItemClear
+        ? <ClearSingleQueueItemIconButton {...props} />
+        : <ClearQueueIconButton {...props} onOpen={disclosure.onOpen} />
+      }
+      <ClearQueueConfirmationAlertDialog disclosure={disclosure} />
+    </>
+  )
+}
+
+export default ClearQueueButton;

invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx

@@ -10,7 +10,8 @@ import {
   InvMenuButton,
   InvMenuDivider,
 } from 'common/components/InvMenu/wrapper';
-import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
+import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
+import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
 import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -25,6 +26,7 @@ export const QueueActionsMenuButton = memo(() => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const clearQueueDisclosure = useDisclosure()
   const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
   const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
   const { queueSize } = useGetQueueStatusQuery(undefined, {
@@ -35,10 +37,9 @@ export const QueueActionsMenuButton = memo(() => {
     }),
   });
   const {
-    cancelQueueItem,
+    isLoading: isLoadingClearQueue,
-    isLoading: isLoadingCancelQueueItem,
+    isDisabled: isDisabledClearQueue,
-    isDisabled: isDisabledCancelQueueItem,
+  } = useClearQueue();
-  } = useCancelCurrentQueueItem();
   const {
     resumeProcessor,
     isLoading: isLoadingResumeProcessor,
@@ -55,6 +56,8 @@ export const QueueActionsMenuButton = memo(() => {
 
   return (
     <Box pos="relative">
+      <ClearQueueConfirmationAlertDialog disclosure={clearQueueDisclosure} />
+
       <InvMenu
         isOpen={isOpen}
         onOpen={onOpen}
@@ -70,11 +73,11 @@ export const QueueActionsMenuButton = memo(() => {
           <InvMenuItem
             isDestructive
             icon={<PiXBold size="16px" />}
-            onClick={cancelQueueItem}
+            onClick={clearQueueDisclosure.onOpen}
-            isLoading={isLoadingCancelQueueItem}
+            isLoading={isLoadingClearQueue}
-            isDisabled={isDisabledCancelQueueItem}
+            isDisabled={isDisabledClearQueue}
           >
-            {t('queue.cancelTooltip')}
+            {t('queue.clearTooltip')}
           </InvMenuItem>
           {isResumeEnabled && (
             <InvMenuItem

invokeai/frontend/web/src/features/queue/components/QueueControls.tsx

@@ -36,53 +36,3 @@ const QueueControls = () => {
 };
 
 export default memo(QueueControls);
-
-// const QueueCounts = () => {
-//   const { t } = useTranslation();
-//   const dispatch = useAppDispatch();
-//   const { hasItems, pending } = useGetQueueStatusQuery(undefined, {
-//     selectFromResult: ({ data }) => {
-//       if (!data) {
-//         return {
-//           hasItems: false,
-//           pending: 0,
-//         };
-//       }
-
-//       const { pending, in_progress } = data.queue;
-
-//       return {
-//         hasItems: pending + in_progress > 0,
-//         pending,
-//       };
-//     },
-//   });
-
-//   const handleClick = useCallback(() => {
-//     dispatch(setActiveTab('queue'));
-//   }, [dispatch]);
-
-//   return (
-//     <Flex
-//       justifyContent="space-between"
-//       alignItems="center"
-//       pe={1}
-//       data-testid="queue-count"
-//     >
-//       <Spacer />
-//       <InvButton
-//         onClick={handleClick}
-//         size="sm"
-//         variant="link"
-//         opacity={0.7}
-//         fontStyle="oblique 10deg"
-//       >
-//         {hasItems
-//           ? t('queue.queuedCount', {
-//               pending,
-//             })
-//           : t('queue.queueEmpty')}
-//       </InvButton>
-//     </Flex>
-//   );
-// };