From 2dd172c2c650d40e01c41ce483ef287a672f464c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 26 Jun 2024 22:37:57 +1000
Subject: [PATCH] feat(ui): gallery bulk select styling

---
 .../gallery/components/GalleryBulkSelect.tsx  | 60 +++++++++----------
 .../components/ImageGalleryContent.tsx        | 13 +++-
 .../components/ImageGrid/GalleryImageGrid.tsx |  2 +
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBulkSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBulkSelect.tsx
index b06ef69e4e..b0c1eaa52c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBulkSelect.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBulkSelect.tsx
@@ -1,10 +1,10 @@
-import { Flex, IconButton, Spacer, Tag, TagCloseButton, TagLabel, Tooltip } from '@invoke-ai/ui-library';
+import { Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { BiSelectMultiple } from 'react-icons/bi';
 
 export const GalleryBulkSelect = () => {
   const dispatch = useAppDispatch();
@@ -12,38 +12,38 @@ export const GalleryBulkSelect = () => {
   const { t } = useTranslation();
   const { imageDTOs } = useGalleryImages();
 
-  const onClickClearSelection = useCallback(() => {
+  const onClearSelection = useCallback(() => {
     dispatch(selectionChanged([]));
   }, [dispatch]);
 
-  const onClickSelectAllPage = useCallback(() => {
-    dispatch(selectionChanged(selection.concat(imageDTOs)));
-  }, [dispatch, imageDTOs, selection]);
+  const onSelectPage = useCallback(() => {
+    dispatch(selectionChanged(imageDTOs));
+  }, [dispatch, imageDTOs]);
+
+  useHotkeys(['ctrl+a', 'meta+a'], onSelectPage, { preventDefault: true }, [onSelectPage]);
+
+  if (selection.length <= 1) {
+    return null;
+  }
 
   return (
-    <Flex alignItems="center" justifyContent="space-between">
-      {selection.length > 0 ? (
-        <Tag>
-          <TagLabel>
-            {selection.length} {t('common.selected')}
-          </TagLabel>
-          <Tooltip label="Clear selection">
-            <TagCloseButton onClick={onClickClearSelection} />
-          </Tooltip>
-        </Tag>
-      ) : (
-        <Spacer />
-      )}
-
-      <Tooltip label={t('gallery.selectAllOnPage')}>
-        <IconButton
-          variant="outline"
-          size="sm"
-          icon={<BiSelectMultiple />}
-          aria-label="Bulk select"
-          onClick={onClickSelectAllPage}
-        />
-      </Tooltip>
-    </Flex>
+    <Tag
+      position="absolute"
+      bg="invokeBlue.800"
+      color="base.50"
+      py={1}
+      px={3}
+      userSelect="none"
+      shadow="dark-lg"
+      fontWeight="semibold"
+      border={1}
+      borderStyle="solid"
+      borderColor="whiteAlpha.300"
+    >
+      <TagLabel>
+        {selection.length} {t('common.selected')}
+      </TagLabel>
+      <TagCloseButton onClick={onClearSelection} />
+    </Tag>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 00f3b4463e..1ce64753df 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -10,7 +10,6 @@ import { RiServerLine } from 'react-icons/ri';
 
 import BoardsList from './Boards/BoardsList/BoardsList';
 import GalleryBoardName from './GalleryBoardName';
-import { GalleryBulkSelect } from './GalleryBulkSelect';
 import GallerySettingsPopover from './GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 import { GalleryPagination } from './ImageGrid/GalleryPagination';
@@ -31,7 +30,16 @@ const ImageGalleryContent = () => {
   }, [dispatch]);
 
   return (
-    <Flex layerStyle="first" flexDirection="column" h="full" w="full" borderRadius="base" p={2} gap={2}>
+    <Flex
+      layerStyle="first"
+      position="relative"
+      flexDirection="column"
+      h="full"
+      w="full"
+      borderRadius="base"
+      p={2}
+      gap={2}
+    >
       {galleryHeader}
       <Box>
         <Flex alignItems="center" justifyContent="space-between" gap={2}>
@@ -72,7 +80,6 @@ const ImageGalleryContent = () => {
           </TabList>
         </Tabs>
       </Flex>
-      <GalleryBulkSelect />
 
       <GalleryImageGrid />
       <GalleryPagination />
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
index b16c13a783..809e6c512a 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
@@ -2,6 +2,7 @@ import { Box, Flex, Grid } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { GalleryBulkSelect } from 'features/gallery/components/GalleryBulkSelect';
 import { useGalleryHotkeys } from 'features/gallery/hooks/useGalleryHotkeys';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { limitChanged } from 'features/gallery/store/gallerySlice';
@@ -144,6 +145,7 @@ const Content = () => {
           ))}
         </Grid>
       </Box>
+      <GalleryBulkSelect />
     </Box>
   );
 };