chore(ui): lint

invokeai/frontend/web/src/common/components/IconSwitch.tsx

@@ -48,7 +48,7 @@ export const IconSwitch = memo(
     return (
       <Flex
         position="relative"
-        bg='base.800'
+        bg="base.800"
         borderRadius="base"
         alignItems="center"
         justifyContent="center"

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -1,7 +1,7 @@
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addScope, removeScope, setScopes } from 'common/hooks/interactionScopes';
+import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
-import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import { useQueueFront } from 'features/queue/hooks/useQueueFront';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx

@@ -23,7 +23,7 @@ export const CanvasEntityDeleteButton = memo(() => {
       alignSelf="stretch"
       icon={<PiTrashSimpleFill />}
       onClick={onClick}
-      colorScheme='error'
+      colorScheme="error"
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -685,8 +685,6 @@ export type StagingAreaImage = {
   offsetY: number;
 };
 
-export type SessionMode = 'generate' | 'compose';
-
 export type CanvasState = {
   _version: 3;
   selectedEntityIdentifier: CanvasEntityIdentifier | null;

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

@@ -1,27 +1,26 @@
 import type { ButtonProps } from '@invoke-ai/ui-library';
 import { Button } from '@invoke-ai/ui-library';
-import { useClearQueueConfirmationAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
-import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleFill } from 'react-icons/pi';
 
+import { useClearQueue } from './ClearQueueConfirmationAlertDialog';
+
 type Props = ButtonProps;
 
 const ClearQueueButton = (props: Props) => {
   const { t } = useTranslation();
-  const dialogState = useClearQueueConfirmationAlertDialog();
-  const { isLoading, isDisabled } = useClearQueue();
+  const clearQueue = useClearQueue();
 
   return (
     <>
       <Button
-        isDisabled={isDisabled}
-        isLoading={isLoading}
+        isDisabled={clearQueue.isDisabled}
+        isLoading={clearQueue.isLoading}
         tooltip={t('queue.clearTooltip')}
         leftIcon={<PiTrashSimpleFill />}
         colorScheme="error"
-        onClick={dialogState.setTrue}
+        onClick={clearQueue.openDialog}
         data-testid={t('queue.clear')}
         {...props}
       >

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

@@ -1,26 +1,75 @@
 import { ConfirmationAlertDialog, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { $isConnected } from 'app/hooks/useSocketIO';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { buildUseBoolean } from 'common/hooks/useBoolean';
-import { useClearQueue } from 'features/queue/hooks/useClearQueue';
+import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice';
+import { toast } from 'features/toast/toast';
 import { atom } from 'nanostores';
-import { memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useClearQueueMutation, useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
 const $boolean = atom(false);
-export const useClearQueueConfirmationAlertDialog = buildUseBoolean($boolean);
+const useClearQueueConfirmationAlertDialog = buildUseBoolean($boolean);
+
+export const useClearQueue = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const dialog = useClearQueueConfirmationAlertDialog();
+  const isOpen = useStore(dialog.$boolean);
+  const { data: queueStatus } = useGetQueueStatusQuery();
+  const isConnected = useStore($isConnected);
+  const [trigger, { isLoading }] = useClearQueueMutation({
+    fixedCacheKey: 'clearQueue',
+  });
+
+  const clearQueue = useCallback(async () => {
+    if (!queueStatus?.queue.total) {
+      return;
+    }
+
+    try {
+      await trigger().unwrap();
+      toast({
+        id: 'QUEUE_CLEAR_SUCCEEDED',
+        title: t('queue.clearSucceeded'),
+        status: 'success',
+      });
+      dispatch(listCursorChanged(undefined));
+      dispatch(listPriorityChanged(undefined));
+    } catch {
+      toast({
+        id: 'QUEUE_CLEAR_FAILED',
+        title: t('queue.clearFailed'),
+        status: 'error',
+      });
+    }
+  }, [queueStatus?.queue.total, trigger, dispatch, t]);
+
+  const isDisabled = useMemo(() => !isConnected || !queueStatus?.queue.total, [isConnected, queueStatus?.queue.total]);
+
+  return {
+    clearQueue,
+    isOpen,
+    openDialog: dialog.setTrue,
+    closeDialog: dialog.setFalse,
+    isLoading,
+    queueStatus,
+    isDisabled,
+  };
+};
 
 export const ClearQueueConfirmationsAlertDialog = memo(() => {
   const { t } = useTranslation();
-  const dialogState = useClearQueueConfirmationAlertDialog();
-  const isOpen = useStore(dialogState.$boolean);
-  const { clearQueue } = useClearQueue();
+  const clearQueue = useClearQueue();
 
   return (
     <ConfirmationAlertDialog
-      isOpen={isOpen}
-      onClose={dialogState.setFalse}
+      isOpen={clearQueue.isOpen}
+      onClose={clearQueue.closeDialog}
       title={t('queue.clearTooltip')}
-      acceptCallback={clearQueue}
+      acceptCallback={clearQueue.clearQueue}
       acceptButtonText={t('queue.clear')}
       useInert={false}
     >

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

@@ -1,11 +1,12 @@
 import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
 import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
-import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
 
+import { useClearQueue } from './ClearQueueConfirmationAlertDialog';
+
 export const ClearQueueIconButton = memo((_) => {
   const ref = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -1,8 +1,8 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation } from '@invoke-ai/ui-library';
 import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton';
+import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
-import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo, useMemo } from 'react';

invokeai/frontend/web/src/services/events/setEventListeners.tsx

@@ -96,8 +96,17 @@ export const setEventListeners = ({ socket, dispatch, getState, setIsConnected }
   });
 
   socket.on('invocation_denoise_progress', (data) => {
-    const { invocation_source_id, invocation, step, total_steps, progress_image, origin, destination, percentage, session_id } =
-      data;
+    const {
+      invocation_source_id,
+      invocation,
+      step,
+      total_steps,
+      progress_image,
+      origin,
+      destination,
+      percentage,
+      session_id,
+    } = data;
 
     if (cancellations.has(session_id)) {
       // Do not update the progress if this session has been cancelled. This prevents a race condition where we get a