chore(ui): format

Lots of changed bc the line length is now 120. May as well do it now.

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx

@@ -1,21 +1,10 @@
-import {
-  ConfirmationAlertDialog,
-  Divider,
-  Flex,
-  FormControl,
-  FormLabel,
-  Switch,
-  Text,
-} from '@invoke-ai/ui-library';
+import { ConfirmationAlertDialog, Divider, Flex, FormControl, FormLabel, Switch, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
-import {
-  getImageUsage,
-  selectImageUsage,
-} from 'features/deleteImageModal/store/selectors';
+import { getImageUsage, selectImageUsage } from 'features/deleteImageModal/store/selectors';
 import {
   imageDeletionCanceled,
   isModalOpenChanged,
@@ -41,14 +30,7 @@ const selectImageUsages = createMemoizedSelector(
     selectControlAdaptersSlice,
     selectImageUsage,
   ],
-  (
-    deleteImageModal,
-    generation,
-    canvas,
-    nodes,
-    controlAdapters,
-    imagesUsage
-  ) => {
+  (deleteImageModal, generation, canvas, nodes, controlAdapters, imagesUsage) => {
     const { imagesToDelete } = deleteImageModal;
 
     const allImageUsage = (imagesToDelete ?? []).map(({ image_name }) =>
@@ -73,19 +55,13 @@ const selectImageUsages = createMemoizedSelector(
 const DeleteImageModal = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const shouldConfirmOnDelete = useAppSelector(
-    (s) => s.system.shouldConfirmOnDelete
-  );
-  const canRestoreDeletedImagesFromBin = useAppSelector(
-    (s) => s.config.canRestoreDeletedImagesFromBin
-  );
+  const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete);
+  const canRestoreDeletedImagesFromBin = useAppSelector((s) => s.config.canRestoreDeletedImagesFromBin);
   const isModalOpen = useAppSelector((s) => s.deleteImageModal.isModalOpen);
-  const { imagesToDelete, imagesUsage, imageUsageSummary } =
-    useAppSelector(selectImageUsages);
+  const { imagesToDelete, imagesUsage, imageUsageSummary } = useAppSelector(selectImageUsages);
 
   const handleChangeShouldConfirmOnDelete = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) =>
-      dispatch(setShouldConfirmOnDelete(!e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldConfirmOnDelete(!e.target.checked)),
     [dispatch]
   );
 
@@ -99,9 +75,7 @@ const DeleteImageModal = () => {
       return;
     }
     dispatch(imageDeletionCanceled());
-    dispatch(
-      imageDeletionConfirmed({ imageDTOs: imagesToDelete, imagesUsage })
-    );
+    dispatch(imageDeletionConfirmed({ imageDTOs: imagesToDelete, imagesUsage }));
   }, [dispatch, imagesToDelete, imagesUsage]);
 
   return (
@@ -116,18 +90,11 @@ const DeleteImageModal = () => {
       <Flex direction="column" gap={3}>
         <ImageUsageMessage imageUsage={imageUsageSummary} />
         <Divider />
-        <Text>
-          {canRestoreDeletedImagesFromBin
-            ? t('gallery.deleteImageBin')
-            : t('gallery.deleteImagePermanent')}
-        </Text>
+        <Text>{canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')}</Text>
         <Text>{t('common.areYouSure')}</Text>
         <FormControl>
           <FormLabel>{t('common.dontAskMeAgain')}</FormLabel>
-          <Switch
-            isChecked={!shouldConfirmOnDelete}
-            onChange={handleChangeShouldConfirmOnDelete}
-          />
+          <Switch isChecked={!shouldConfirmOnDelete} onChange={handleChangeShouldConfirmOnDelete} />
         </FormControl>
       </Flex>
     </ConfirmationAlertDialog>

invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx

@@ -29,18 +29,10 @@ const ImageUsageMessage = (props: Props) => {
     <>
       <Text>{topMessage}</Text>
       <UnorderedList paddingInlineStart={6}>
-        {imageUsage.isInitialImage && (
-          <ListItem>{t('common.img2img')}</ListItem>
-        )}
-        {imageUsage.isCanvasImage && (
-          <ListItem>{t('common.unifiedCanvas')}</ListItem>
-        )}
-        {imageUsage.isControlImage && (
-          <ListItem>{t('common.controlNet')}</ListItem>
-        )}
-        {imageUsage.isNodesImage && (
-          <ListItem>{t('common.nodeEditor')}</ListItem>
-        )}
+        {imageUsage.isInitialImage && <ListItem>{t('common.img2img')}</ListItem>}
+        {imageUsage.isCanvasImage && <ListItem>{t('common.unifiedCanvas')}</ListItem>}
+        {imageUsage.isControlImage && <ListItem>{t('common.controlNet')}</ListItem>}
+        {imageUsage.isNodesImage && <ListItem>{t('common.nodeEditor')}</ListItem>}
       </UnorderedList>
       <Text>{bottomMessage}</Text>
     </>

invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts

@@ -27,23 +27,17 @@ export const getImageUsage = (
 ) => {
   const isInitialImage = generation.initialImage?.imageName === image_name;
 
-  const isCanvasImage = canvas.layerState.objects.some(
-    (obj) => obj.kind === 'image' && obj.imageName === image_name
-  );
+  const isCanvasImage = canvas.layerState.objects.some((obj) => obj.kind === 'image' && obj.imageName === image_name);
 
   const isNodesImage = nodes.nodes.filter(isInvocationNode).some((node) => {
     return some(
       node.data.inputs,
-      (input) =>
-        isImageFieldInputInstance(input) &&
-        input.value?.image_name === image_name
+      (input) => isImageFieldInputInstance(input) && input.value?.image_name === image_name
     );
   });
 
   const isControlImage = selectControlAdapterAll(controlAdapters).some(
-    (ca) =>
-      ca.controlImage === image_name ||
-      (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === image_name)
+    (ca) => ca.controlImage === image_name || (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === image_name)
   );
 
   const imageUsage: ImageUsage = {

invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts

@@ -22,13 +22,8 @@ const deleteImageModal = createSlice({
   },
 });
 
-export const {
-  isModalOpenChanged,
-  imagesToDeleteSelected,
-  imageDeletionCanceled,
-} = deleteImageModal.actions;
+export const { isModalOpenChanged, imagesToDeleteSelected, imageDeletionCanceled } = deleteImageModal.actions;
 
 export default deleteImageModal.reducer;
 
-export const selectDeleteImageModalSlice = (state: RootState) =>
-  state.deleteImageModal;
+export const selectDeleteImageModalSlice = (state: RootState) => state.deleteImageModal;