feat(ui): Move Gallery to the Bottom

invokeai/frontend/web/public/locales/en.json

@@ -475,10 +475,13 @@
         "displayBoardSearch": "Board Search",
         "displaySearch": "Image Search",
         "download": "Download",
+        "expandGallery": "Show Gallery",
+        "collapseGallery": "Hide Gallery",
         "exitBoardSearch": "Exit Board Search",
         "exitSearch": "Exit Image Search",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
         "galleryImageSize": "Image Size",
+        "columns": "Columns",
         "gallerySettings": "Gallery Settings",
         "go": "Go",
         "image": "image",
@@ -523,7 +526,12 @@
         "openViewer": "Open Viewer",
         "closeViewer": "Close Viewer",
         "move": "Move",
-        "useForPromptGeneration": "Use for Prompt Generation"
+        "useForPromptGeneration": "Use for Prompt Generation",
+        "showBoardsSidebar": "Expand Boards",
+        "hideBoardsSidebar": "Minimize Boards",
+        "showSquareThumbnails": "Show Square Thumbnails",
+        "showAspectRatioThumbnails": "Show Aspect Ratio Thumbnails",
+        "toggleAspectRatio": "Toggle Aspect Ratio"
     },
     "hotkeys": {
         "hotkeys": "Hotkeys",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts

@@ -1,6 +1,8 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/store';
 import { truncate } from 'es-toolkit/compat';
+import { addGalleryProgressItems } from 'features/gallery/store/galleryProgressStore';
+import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
@@ -14,7 +16,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
   // success
   startAppListening({
     matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
-    effect: (action) => {
+    effect: (action, listenerApi) => {
       const enqueueResult = action.payload;
       const arg = action.meta.arg.originalArgs;
       log.debug({ enqueueResult } as JsonObject, 'Batch enqueued');
@@ -28,6 +30,14 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
           direction: arg.prepend ? t('queue.front') : t('queue.back'),
         }),
       });
+
+      // Track generate-destination batches as progress items in the gallery
+      const destination = enqueueResult.batch.destination;
+      if (destination === 'generate') {
+        const state = listenerApi.getState();
+        const targetBoardId = selectAutoAddBoardId(state);
+        addGalleryProgressItems(enqueueResult.item_ids, enqueueResult.batch.batch_id ?? '', targetBoardId);
+      }
     },
   });
 

invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx

@@ -15,7 +15,7 @@ export const CanvasLayersPanel = memo(() => {
 
   return (
     <CanvasManagerProviderGate>
-      <Flex flexDir="column" gap={2} w="full" h="full">
+      <Flex flexDir="column" gap={2} w="full" h="full" p={2}>
         <ParamDenoisingStrength />
         <Divider py={0} />
         <EntityListSelectedEntityActionBar />

invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIndicator.tsx

@@ -0,0 +1,16 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiCircleFill } from 'react-icons/pi';
+
+export const AutoAddIndicator = memo(() => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex color="invokeBlue.300" alignItems="center">
+      <PiCircleFill aria-label={t('common.auto')} size={10} />
+    </Flex>
+  );
+});
+
+AutoAddIndicator.displayName = 'AutoAddIndicator';

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx

@@ -1,12 +1,13 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import type { IconButtonProps } from '@invoke-ai/ui-library';
+import { Button, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { boardIdSelected, boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 import { useCreateBoardMutation } from 'services/api/endpoints/boards';
 
-const AddBoardButton = () => {
+const useAddBoard = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const [createBoard, { isLoading }] = useCreateBoardMutation();
@@ -21,20 +22,47 @@ const AddBoardButton = () => {
     }
   }, [t, createBoard, dispatch]);
 
+  return { handleCreateBoard, isLoading, t };
+};
+
+export const AddBoardButton = memo(() => {
+  const { handleCreateBoard, isLoading, t } = useAddBoard();
+
   return (
-    <IconButton
-      icon={<PiPlusBold />}
+    <Button
+      leftIcon={<PiPlusBold />}
       isLoading={isLoading}
-      tooltip={t('boards.addBoard')}
-      aria-label={t('boards.addBoard')}
       onClick={handleCreateBoard}
-      size="md"
+      size="sm"
       data-testid="add-board-button"
+      variant="ghost"
+      flex={1}
+      justifyContent="start"
+    >
+      {t('boards.addBoard')}
+    </Button>
+  );
+});
+
+AddBoardButton.displayName = 'AddBoardButton';
+
+export const AddBoardIconButton = memo((props: Partial<IconButtonProps>) => {
+  const { handleCreateBoard, isLoading, t } = useAddBoard();
+  const { 'aria-label': ariaLabel = t('boards.addBoard'), ...rest } = props;
+
+  return (
+    <IconButton
+      aria-label={ariaLabel}
+      size="sm"
       variant="link"
-      w={8}
-      h={8}
+      tooltip={t('boards.addBoard')}
+      icon={<PiPlusBold />}
+      isLoading={isLoading}
+      onClick={handleCreateBoard}
+      data-testid="add-board-icon-button"
+      {...rest}
     />
   );
-};
+});
 
-export default memo(AddBoardButton);
+AddBoardIconButton.displayName = 'AddBoardIconButton';

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardEditableTitle.tsx

@@ -45,7 +45,7 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
 
   if (!editable.isEditing) {
     return (
-      <Flex alignItems="center" gap={3} onMouseOver={isHovering.setTrue} onMouseOut={isHovering.setFalse}>
+      <Flex alignItems="center" gap={1} onMouseOver={isHovering.setTrue} onMouseOut={isHovering.setFalse} h={7}>
         <Text
           size="sm"
           fontWeight="semibold"
@@ -62,7 +62,7 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
             aria-label="edit name"
             icon={<PiPencilBold />}
             size="sm"
-            variant="ghost"
+            variant="link"
             onClick={editable.startEditing}
           />
         )}
@@ -76,6 +76,8 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
       {...editable.inputProps}
       variant="outline"
       isDisabled={updateBoardResult.isLoading}
+      h={7}
+      px={2}
       _focusVisible={{ borderWidth: 1, borderColor: 'invokeBlueAlpha.400', borderRadius: 'base' }}
     />
   );