feat(ui): restore clear queue button

It is accessible in two places:
- The queue actions hamburger menu.
- On the queue tab.

If the clear queue app feature is disabled, it is not shown in either of
those places.

invokeai/frontend/web/public/locales/en.json

@@ -253,6 +253,7 @@
         "cancel": "Cancel",
         "cancelAllExceptCurrentQueueItemAlertDialog": "Canceling all queue items except the current one will stop pending items but allow the in-progress one to finish.",
         "cancelAllExceptCurrentQueueItemAlertDialog2": "Are you sure you want to cancel all pending queue items?",
+        "cancelAllExceptCurrent": "Cancel All Except Current",
         "cancelAllExceptCurrentTooltip": "Cancel All Except Current Item",
         "cancelTooltip": "Cancel Current Item",
         "cancelSucceeded": "Item Canceled",
@@ -273,7 +274,7 @@
         "retryItem": "Retry Item",
         "cancelBatchSucceeded": "Batch Canceled",
         "cancelBatchFailed": "Problem Canceling Batch",
-        "clearQueueAlertDialog": "Clearing the queue immediately cancels any processing items and clears the queue entirely. Pending filters will be canceled.",
+        "clearQueueAlertDialog": "Clearing the queue immediately cancels any processing items and clears the queue entirely. Pending filters will be canceled and the Canvas Staging Area will be reset.",
         "clearQueueAlertDialog2": "Are you sure you want to clear the queue?",
         "current": "Current",
         "next": "Next",

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

@@ -13,14 +13,13 @@ export const CancelAllExceptCurrentButton = memo((props: ButtonProps) => {
     <Button
       isDisabled={api.isDisabled}
       isLoading={api.isLoading}
-      aria-label={t('queue.clear')}
       tooltip={t('queue.cancelAllExceptCurrentTooltip')}
       leftIcon={<PiXCircle />}
       colorScheme="error"
       onClick={api.openDialog}
       {...props}
     >
-      {t('queue.clear')}
+      {t('queue.cancelAllExceptCurrentTooltip')}
     </Button>
   );
 });

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

@@ -0,0 +1,29 @@
+import type { ButtonProps } from '@invoke-ai/ui-library';
+import { Button } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiTrashBold } from 'react-icons/pi';
+
+import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog';
+
+export const ClearQueueButton = memo((props: ButtonProps) => {
+  const { t } = useTranslation();
+  const api = useClearQueueDialog();
+
+  return (
+    <Button
+      isDisabled={api.isDisabled}
+      isLoading={api.isLoading}
+      aria-label={t('queue.clear')}
+      tooltip={t('queue.clearTooltip')}
+      leftIcon={<PiTrashBold />}
+      colorScheme="error"
+      onClick={api.openDialog}
+      {...props}
+    >
+      {t('queue.clear')}
+    </Button>
+  );
+});
+
+ClearQueueButton.displayName = 'ClearQueueButton';

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 const [useClearQueueConfirmationAlertDialog] = buildUseBoolean(false);
 
-const useClearQueueDialog = () => {
+export const useClearQueueDialog = () => {
   const dialog = useClearQueueConfirmationAlertDialog();
   const clearQueue = useClearQueue();
 

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

@@ -9,15 +9,19 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiXBold, PiXCircle } from 'react-icons/pi';
+import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiTrashBold, PiXBold, PiXCircle } from 'react-icons/pi';
+
+import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog';
 
 export const QueueActionsMenuButton = memo(() => {
   const ref = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
+  const isClearAllEnabled = useFeatureStatus('cancelAndClearAll');
   const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();
   const cancelCurrentQueueItem = useCancelCurrentQueueItem();
+  const clearQueue = useClearQueueDialog();
   const resumeProcessor = useResumeProcessor();
   const pauseProcessor = usePauseProcessor();
   const openQueue = useCallback(() => {
@@ -55,6 +59,17 @@ export const QueueActionsMenuButton = memo(() => {
             >
               {t('queue.cancelAllExceptCurrentTooltip')}
             </MenuItem>
+            {isClearAllEnabled && (
+              <MenuItem
+                isDestructive
+                icon={<PiTrashBold />}
+                onClick={clearQueue.openDialog}
+                isLoading={clearQueue.isLoading}
+                isDisabled={clearQueue.isDisabled}
+              >
+                {t('queue.clearTooltip')}
+              </MenuItem>
+            )}
             {isResumeEnabled && (
               <MenuItem
                 icon={<PiPlayFill />}

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

@@ -4,6 +4,7 @@ import { memo } from 'react';
 
 import { CancelAllExceptCurrentButton } from './CancelAllExceptCurrentButton';
 import ClearModelCacheButton from './ClearModelCacheButton';
+import { ClearQueueButton } from './ClearQueueButton';
 import PauseProcessorButton from './PauseProcessorButton';
 import PruneQueueButton from './PruneQueueButton';
 import ResumeProcessorButton from './ResumeProcessorButton';
@@ -11,19 +12,20 @@ import ResumeProcessorButton from './ResumeProcessorButton';
 const QueueTabQueueControls = () => {
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
+  const isClearQueueEnabled = useFeatureStatus('cancelAndClearAll');
 
   return (
     <Flex flexDir="column" layerStyle="first" borderRadius="base" p={2} gap={2}>
       <Flex gap={2}>
         {(isPauseEnabled || isResumeEnabled) && (
-          <ButtonGroup w={28} orientation="vertical" size="sm">
+          <ButtonGroup orientation="vertical" size="sm">
             {isResumeEnabled && <ResumeProcessorButton />}
             {isPauseEnabled && <PauseProcessorButton />}
           </ButtonGroup>
         )}
-        <ButtonGroup w={28} orientation="vertical" size="sm">
+        <ButtonGroup orientation="vertical" size="sm">
           <PruneQueueButton />
-          <CancelAllExceptCurrentButton />
+          {isClearQueueEnabled ? <ClearQueueButton /> : <CancelAllExceptCurrentButton />}
         </ButtonGroup>
       </Flex>
       <ClearModelCacheButton />