From d7f16b7c878bf1d50df37f4b8b7760de7582fdcd Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Tue, 30 Jan 2024 16:45:14 +0300
Subject: [PATCH] fix(ui): the bottom button on floating side panel clears all
 queue items

---
 .../features/queue/components/ClearQueueIconButton.tsx |  2 +-
 .../ui/components/FloatingParametersPanelButtons.tsx   | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
index 6bc8cfb6a1..65f2008f53 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -12,7 +12,7 @@ type ClearQueueIconButtonProps = ClearQueueButtonProps & {
   onOpen: () => void;
 };
 
-const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButtonProps) => {
+export const ClearAllQueueIconButton = ({ onOpen, ...props }: ClearQueueIconButtonProps) => {
   const { t } = useTranslation();
   const { isLoading, isDisabled } = useClearQueue();
 
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 16500a1a79..926222b2aa 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -1,7 +1,8 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation } from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation, useDisclosure } from '@invoke-ai/ui-library';
 import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton';
-import ClearQueueIconButton from 'features/queue/components/ClearQueueIconButton';
+import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQueueConfirmationAlertDialog';
+import { ClearAllQueueIconButton } from 'features/queue/components/ClearQueueIconButton';
 import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
@@ -35,6 +36,8 @@ const FloatingSidePanelButtons = (props: Props) => {
     [isDisabled, queueStatus?.processor.is_processing]
   );
 
+  const disclosure = useDisclosure();
+
   if (!props.panelApi.isCollapsed) {
     return null;
   }
@@ -71,7 +74,8 @@ const FloatingSidePanelButtons = (props: Props) => {
           />
           <CancelCurrentQueueItemIconButton sx={floatingButtonStyles} />
         </ButtonGroup>
-        <ClearQueueIconButton sx={floatingButtonStyles} />
+        <ClearAllQueueIconButton sx={floatingButtonStyles} onOpen={disclosure.onOpen} />
+        <ClearQueueConfirmationAlertDialog disclosure={disclosure} />
       </Flex>
     </Portal>
   );