feat(ui): gallery bulk select styling

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/GalleryBulkSelect.tsx

@@ -1,49 +1,49 @@
-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();
   const { selection } = useAppSelector((s) => s.gallery);
   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]);
 
-  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 />
-      )}
+  useHotkeys(['ctrl+a', 'meta+a'], onSelectPage, { preventDefault: true }, [onSelectPage]);
+
+  if (selection.length <= 1) {
+    return null;
+  }
 
-      <Tooltip label={t('gallery.selectAllOnPage')}>
-        <IconButton
-          variant="outline"
-          size="sm"
-          icon={<BiSelectMultiple />}
-          aria-label="Bulk select"
-          onClick={onClickSelectAllPage}
-        />
-      </Tooltip>
-    </Flex>
+  return (
+    <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>
   );
 };

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 />

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>
   );
 };