feat(ui): reworked layout (wip)

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -13,11 +13,8 @@ import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid
 import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
 import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
 import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
-import {
-  imageToCompareChanged,
-  isImageViewerOpenChanged,
-  selectGallerySlice,
-} from 'features/gallery/store/gallerySlice';
+import { imageToCompareChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
+import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { MouseEvent, MouseEventHandler } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -116,7 +113,7 @@ const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
   }, []);
 
   const onDoubleClick = useCallback(() => {
-    dispatch(isImageViewerOpenChanged(true));
+    dispatch(setActiveTab('gallery'));
     dispatch(imageToCompareChanged(null));
   }, [dispatch]);
 
@@ -150,7 +147,7 @@ const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
   }
 
   return (
-    <Box w="full" h="full" p={1.5} className={GALLERY_IMAGE_CLASS_NAME} data-testid={dataTestId} sx={boxSx}>
+    <Box w="full" h="full" className={GALLERY_IMAGE_CLASS_NAME} data-testid={dataTestId} sx={boxSx}>
       <Flex
         ref={imageContainerRef}
         userSelect="none"
@@ -183,13 +180,12 @@ const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
                 color="base.50"
                 fontSize="sm"
                 fontWeight="semibold"
-                bottom={0}
-                left={0}
+                bottom={1}
+                left={1}
                 opacity={0.7}
                 px={2}
                 lineHeight={1.25}
                 borderTopEndRadius="base"
-                borderBottomStartRadius="base"
                 sx={badgeSx}
                 pointerEvents="none"
               >{`${imageDTO.width}x${imageDTO.height}`}</Text>
@@ -199,8 +195,8 @@ const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
               icon={starIcon}
               tooltip={starTooltip}
               position="absolute"
-              top={1}
-              insetInlineEnd={1}
+              top={2}
+              insetInlineEnd={2}
             />
 
             {isHovered && <DeleteIcon onClick={handleDelete} />}
@@ -227,8 +223,8 @@ const DeleteIcon = ({ onClick }: { onClick: MouseEventHandler }) => {
       icon={<PiTrashSimpleFill size="16px" />}
       tooltip={t('gallery.deleteImage_one')}
       position="absolute"
-      bottom={1}
-      insetInlineEnd={1}
+      bottom={2}
+      insetInlineEnd={2}
     />
   );
 };

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -78,24 +78,52 @@ const Content = () => {
       // Managing refs for dynamically rendered components is a bit tedious:
       // - https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback
       // As a easy workaround, we can just grab the first gallery image element directly.
-      const galleryImageEl = document.querySelector(`.${GALLERY_IMAGE_CLASS_NAME}`);
-      if (!galleryImageEl) {
+      const imageEl = document.querySelector(`.${GALLERY_IMAGE_CLASS_NAME}`);
+      if (!imageEl) {
         // No images in gallery?
         return;
       }
 
-      const galleryImageRect = galleryImageEl.getBoundingClientRect();
+      const gridEl = document.querySelector(`.${GALLERY_GRID_CLASS_NAME}`);
+
+      if (!gridEl) {
+        return;
+      }
+
+      const imageRect = imageEl.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
 
-      if (!galleryImageRect.width || !galleryImageRect.height || !containerRect.width || !containerRect.height) {
+      // We need to account for the gap between images
+      const gridElStyle = window.getComputedStyle(gridEl);
+      const gap = parseFloat(gridElStyle.gap);
+
+      if (!imageRect.width || !imageRect.height || !containerRect.width || !containerRect.height) {
         // Gallery is too small to fit images or not rendered yet
         return;
       }
 
-      // Floating-point precision requires we round to get the correct number of images per row
-      const imagesPerRow = Math.round(containerRect.width / galleryImageRect.width);
-      // However, when calculating the number of images per column, we want to floor the value to not overflow the container
-      const imagesPerColumn = Math.floor(containerRect.height / galleryImageRect.height);
+      let imagesPerColumn = 0;
+      let spaceUsed = 0;
+
+      while (spaceUsed + imageRect.height <= containerRect.height) {
+        imagesPerColumn++; // Increment the number of images
+        spaceUsed += imageRect.height; // Add image size to the used space
+        if (spaceUsed + gap <= containerRect.height) {
+          spaceUsed += gap; // Add gap size to the used space after each image except after the last image
+        }
+      }
+
+      let imagesPerRow = 0;
+      spaceUsed = 0;
+
+      while (spaceUsed + imageRect.width <= containerRect.width) {
+        imagesPerRow++; // Increment the number of images
+        spaceUsed += imageRect.width; // Add image size to the used space
+        if (spaceUsed + gap <= containerRect.width) {
+          spaceUsed += gap; // Add gap size to the used space after each image except after the last image
+        }
+      }
+
       // Always load at least 1 row of images
       const limit = Math.max(imagesPerRow, imagesPerRow * imagesPerColumn);
       dispatch(limitChanged(limit));
@@ -139,6 +167,7 @@ const Content = () => {
         <Grid
           className={GALLERY_GRID_CLASS_NAME}
           gridTemplateColumns={`repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr))`}
+          gap={1}
         >
           {imageDTOs.map((imageDTO, index) => (
             <GalleryImage key={imageDTO.image_name} imageDTO={imageDTO} index={index} />

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx

@@ -4,13 +4,13 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { $activeScopes } from 'common/hooks/interactionScopes';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { selectionChanged } from 'features/gallery/store/gallerySlice';
-import { $isGalleryPanelOpen } from 'features/ui/store/uiSlice';
+import { $isRightPanelOpen } from 'features/ui/store/uiSlice';
 import { computed } from 'nanostores';
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
-const $isSelectAllEnabled = computed([$activeScopes, $isGalleryPanelOpen], (activeScopes, isGalleryPanelOpen) => {
+const $isSelectAllEnabled = computed([$activeScopes, $isRightPanelOpen], (activeScopes, isGalleryPanelOpen) => {
   return activeScopes.has('gallery') && !activeScopes.has('workflows') && isGalleryPanelOpen;
 });