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/services/api/endpoints/images.ts

@@ -127,6 +127,13 @@ export const imagesApi = api.injectEndpoints({
       // 24 hours - reducing this to a few minutes would reduce memory usage.
       keepUnusedDataFor: 86400,
     }),
+    getIntermediatesCount: build.query<number, void>({
+      query: () => ({ url: getListImagesUrl({ is_intermediate: true }) }),
+      providesTags: ['IntermediatesCount'],
+      transformResponse: (response: OffsetPaginatedResults_ImageDTO_) => {
+        return response.total;
+      },
+    }),
     getImageDTO: build.query<ImageDTO, string>({
       query: (image_name) => ({ url: `images/${image_name}` }),
       providesTags: (result, error, arg) => {
@@ -148,8 +155,9 @@ export const imagesApi = api.injectEndpoints({
       },
       keepUnusedDataFor: 86400, // 24 hours
     }),
-    clearIntermediates: build.mutation({
+    clearIntermediates: build.mutation<number, void>({
       query: () => ({ url: `images/clear-intermediates`, method: 'POST' }),
+      invalidatesTags: ['IntermediatesCount'],
     }),
     deleteImage: build.mutation<void, ImageDTO>({
       query: ({ image_name }) => ({
@@ -617,6 +625,7 @@ export const imagesApi = api.injectEndpoints({
 });
 
 export const {
+  useGetIntermediatesCountQuery,
   useListImagesQuery,
   useLazyListImagesQuery,
   useGetImageDTOQuery,

invokeai/frontend/web/src/services/api/hooks/useBoardName.ts

@@ -0,0 +1,26 @@
+import { BoardId } from 'features/gallery/store/gallerySlice';
+import { useListAllBoardsQuery } from '../endpoints/boards';
+
+export const useBoardName = (board_id: BoardId | null | undefined) => {
+  const { boardName } = useListAllBoardsQuery(undefined, {
+    selectFromResult: ({ data }) => {
+      let boardName = '';
+      if (board_id === 'images') {
+        boardName = 'All Images';
+      } else if (board_id === 'assets') {
+        boardName = 'All Assets';
+      } else if (board_id === 'no_board') {
+        boardName = 'No Board';
+      } else if (board_id === 'batch') {
+        boardName = 'Batch';
+      } else {
+        const selectedBoard = data?.find((b) => b.board_id === board_id);
+        boardName = selectedBoard?.board_name || 'Unknown Board';
+      }
+
+      return { boardName };
+    },
+  });
+
+  return boardName;
+};