fix(ui): restore gallery selection count tag

Author: psychedelicious

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

@@ -111,9 +111,6 @@ export const GalleryPanel = memo(() => {
           </Box>
         </Collapse>
       </Tabs>
-
-      {/* <GalleryImageGrid />
-      <GalleryPagination /> */}
       <NewGallery />
     </Flex>
   );

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

@@ -1,20 +1,16 @@
 import { Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
 import { useGalleryImageNames } from 'features/gallery/components/NewGallery';
-import {
-  selectFirstSelectedImage,
-  selectSelection,
-  selectSelectionCount,
-} from 'features/gallery/store/gallerySelectors';
+import { selectFirstSelectedImage, selectSelectionCount } from 'features/gallery/store/gallerySelectors';
 import { selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const GallerySelectionCountTag = memo(() => {
-  const dispatch = useAppDispatch();
-  const selection = useAppSelector(selectSelection);
+  const { dispatch } = useAppStore();
+  const selectionCount = useAppSelector(selectSelectionCount);
   const { imageNames } = useGalleryImageNames();
   const isGalleryFocused = useIsRegionFocused('gallery');
 
@@ -30,7 +26,7 @@ export const GallerySelectionCountTag = memo(() => {
     dependencies: [onSelectPage, isGalleryFocused],
   });
 
-  if (selection.length <= 1) {
+  if (selectionCount <= 1) {
     return null;
   }
 

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

@@ -29,6 +29,7 @@ import type { ImageDTO } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 
 import { GalleryImage } from './ImageGrid/GalleryImage';
+import { GallerySelectionCountTag } from './ImageGrid/GallerySelectionCountTag';
 
 const log = logger('gallery');
 
@@ -494,7 +495,7 @@ export const NewGallery = memo(() => {
   }
 
   return (
-    <Box data-overlayscrollbars-initialize="" ref={rootRef} w="full" h="full">
+    <Box data-overlayscrollbars-initialize="" ref={rootRef} position="relative" w="full" h="full">
       <VirtuosoGrid<string, GridContext>
         ref={virtuosoRef}
         context={context}
@@ -508,6 +509,7 @@ export const NewGallery = memo(() => {
         scrollSeekConfiguration={scrollSeekConfiguration}
         rangeChanged={handleRangeChanged}
       />
+      <GallerySelectionCountTag />
     </Box>
   );
 });