ui: enhance intermediates clear, enhance board auto-add (#3851)

* feat(ui): enhance clear intermediates feature

- retrieve the # of intermediates using a new query (just uses list images endpoint w/ limit of 0)
- display the count in the UI
- add types for clearIntermediates mutation
- minor styling and verbiage changes

* feat(ui): remove unused settings option for guides

* feat(ui): use solid badge variant

consistent with the rest of the usage of badges

* feat(ui): update board ctx menu, add board auto-add

- add context menu to system boards - only open is select board. did this so that you dont think its broken when you click it
- add auto-add board. you can right click a user board to enable it for auto-add, or use the gallery settings popover to select it. the invoke button has a tooltip on a short delay to remind you that you have auto-add enabled
- made useBoardName hook, provide it a board id and it gets your the board name
- removed `boardIdToAdTo` state & logic, updated workflows to auto-switch and auto-add on image generation

* fix(ui): clear controlnet when clearing intermediates

* feat: Make Add Board icon a button

* feat(db, api): clear intermediates now clears all of them

* feat(ui): make reset webui text subtext style

* feat(ui): board name change submits on blur

---------

Co-authored-by: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx

@@ -1,60 +1,71 @@
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useCallback, useEffect, useState } from 'react';
-import { StyledFlex } from './SettingsModal';
 import { Heading, Text } from '@chakra-ui/react';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useCallback, useEffect } from 'react';
 import IAIButton from '../../../../common/components/IAIButton';
-import { useClearIntermediatesMutation } from '../../../../services/api/endpoints/images';
-import { addToast } from '../../store/systemSlice';
+import {
+  useClearIntermediatesMutation,
+  useGetIntermediatesCountQuery,
+} from '../../../../services/api/endpoints/images';
 import { resetCanvas } from '../../../canvas/store/canvasSlice';
+import { addToast } from '../../store/systemSlice';
+import { StyledFlex } from './SettingsModal';
+import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 
 export default function SettingsClearIntermediates() {
   const dispatch = useAppDispatch();
-  const [isDisabled, setIsDisabled] = useState(false);
+
+  const { data: intermediatesCount, refetch: updateIntermediatesCount } =
+    useGetIntermediatesCountQuery();
 
   const [clearIntermediates, { isLoading: isLoadingClearIntermediates }] =
     useClearIntermediatesMutation();
 
   const handleClickClearIntermediates = useCallback(() => {
-    clearIntermediates({})
+    clearIntermediates()
       .unwrap()
       .then((response) => {
+        dispatch(controlNetReset());
         dispatch(resetCanvas());
         dispatch(
           addToast({
-            title:
-              response === 0
-                ? `No intermediates to clear`
-                : `Successfully cleared ${response} intermediates`,
+            title: `Cleared ${response} intermediates`,
             status: 'info',
           })
         );
-        if (response < 100) {
-          setIsDisabled(true);
-        }
       });
   }, [clearIntermediates, dispatch]);
 
+  useEffect(() => {
+    // update the count on mount
+    updateIntermediatesCount();
+  }, [updateIntermediatesCount]);
+
+  const buttonText = intermediatesCount
+    ? `Clear ${intermediatesCount} Intermediate${
+        intermediatesCount > 1 ? 's' : ''
+      }`
+    : 'No Intermediates to Clear';
+
   return (
     <StyledFlex>
       <Heading size="sm">Clear Intermediates</Heading>
       <IAIButton
-        colorScheme="error"
+        colorScheme="warning"
         onClick={handleClickClearIntermediates}
         isLoading={isLoadingClearIntermediates}
-        isDisabled={isDisabled}
+        isDisabled={!intermediatesCount}
       >
-        {isDisabled ? 'Intermediates Cleared' : 'Clear 100 Intermediates'}
+        {buttonText}
       </IAIButton>
-      <Text>
-        Will permanently delete first 100 intermediates found on disk and in
-        database
+      <Text fontWeight="bold">
+        Clearing intermediates will reset your Canvas and ControlNet state.
       </Text>
-      <Text fontWeight="bold">This will also clear your canvas state.</Text>
-      <Text>
+      <Text variant="subtext">
         Intermediate images are byproducts of generation, different from the
-        result images in the gallery. Purging intermediates will free disk
-        space. Your gallery images will not be deleted.
+        result images in the gallery. Clearing intermediates will free disk
+        space.
       </Text>
+      <Text variant="subtext">Your gallery images will not be deleted.</Text>
     </StyledFlex>
   );
 }

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -24,7 +24,6 @@ import {
   setEnableImageDebugging,
   setIsNodesEnabled,
   setShouldConfirmOnDelete,
-  setShouldDisplayGuides,
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
 } from 'features/system/store/systemSlice';
@@ -56,7 +55,6 @@ const selector = createSelector(
   (system: SystemState, ui: UIState) => {
     const {
       shouldConfirmOnDelete,
-      shouldDisplayGuides,
       enableImageDebugging,
       consoleLogLevel,
       shouldLogToConsole,
@@ -73,7 +71,6 @@ const selector = createSelector(
 
     return {
       shouldConfirmOnDelete,
-      shouldDisplayGuides,
       enableImageDebugging,
       shouldUseCanvasBetaLayout,
       shouldUseSliders,
@@ -139,7 +136,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 
   const {
     shouldConfirmOnDelete,
-    shouldDisplayGuides,
     enableImageDebugging,
     shouldUseCanvasBetaLayout,
     shouldUseSliders,
@@ -195,7 +191,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
       <Modal
         isOpen={isSettingsModalOpen}
         onClose={onSettingsModalClose}
-        size="xl"
+        size="2xl"
         isCentered
       >
         <ModalOverlay />
@@ -231,14 +227,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 
               <StyledFlex>
                 <Heading size="sm">{t('settings.ui')}</Heading>
-                <SettingSwitch
-                  label={t('settings.displayHelpIcons')}
-                  isChecked={shouldDisplayGuides}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                    dispatch(setShouldDisplayGuides(e.target.checked))
-                  }
-                />
-
                 <SettingSwitch
                   label={t('settings.useSlidersForAll')}
                   isChecked={shouldUseSliders}
@@ -317,8 +305,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                 </IAIButton>
                 {shouldShowResetWebUiText && (
                   <>
-                    <Text>{t('settings.resetWebUIDesc1')}</Text>
-                    <Text>{t('settings.resetWebUIDesc2')}</Text>
+                    <Text variant="subtext">
+                      {t('settings.resetWebUIDesc1')}
+                    </Text>
+                    <Text variant="subtext">
+                      {t('settings.resetWebUIDesc2')}
+                    </Text>
                   </>
                 )}
               </StyledFlex>