tidy(ui): move star hotkey into own hook & use reactive state for focus

Author: psychedelicious

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

@@ -2,13 +2,14 @@ import { Box, Flex, forwardRef, Grid, GridItem, Spinner, Text } from '@invoke-ai
 import { createSelector } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { getFocusedRegion } from 'common/hooks/focus';
+import { getFocusedRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { useRangeBasedImageFetching } from 'features/gallery/hooks/useRangeBasedImageFetching';
 import type { selectGetImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import {
   selectGalleryImageMinimumWidth,
   selectImageToCompare,
   selectLastSelectedImage,
+  selectSelectionCount,
 } from 'features/gallery/store/gallerySelectors';
 import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
@@ -450,23 +451,10 @@ const useScrollableGallery = (rootRef: RefObject<HTMLDivElement>) => {
   return scrollerRef;
 };
 
-export const NewGallery = memo(() => {
-  const virtuosoRef = useRef<VirtuosoGridHandle>(null);
-  const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  // Get the ordered list of image names - this is our primary data source for virtualization
-  const { queryArgs, imageNames, isLoading } = useGalleryImageNames();
-
-  // Use range-based fetching for bulk loading image DTOs into cache based on the visible range
-  const { onRangeChanged } = useRangeBasedImageFetching({
-    imageNames,
-    enabled: !isLoading,
-  });
-
+const useStarImageHotkey = () => {
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
-  const selectionCount = useAppSelector((state) => state.gallery.selection.length);
-  const isGalleryFocused = getFocusedRegion() === 'gallery';
+  const selectionCount = useAppSelector(selectSelectionCount);
+  const isGalleryFocused = useIsRegionFocused('gallery');
   const imageDTO = useImageDTO(lastSelectedImage);
   const [starImages] = useStarImagesMutation();
   const [unstarImages] = useUnstarImagesMutation();
@@ -475,12 +463,15 @@ export const NewGallery = memo(() => {
     if (!imageDTO) {
       return;
     }
+    if (!isGalleryFocused) {
+      return;
+    }
     if (imageDTO.starred) {
       unstarImages({ image_names: [imageDTO.image_name] });
     } else {
       starImages({ image_names: [imageDTO.image_name] });
     }
-  }, [imageDTO, starImages, unstarImages]);
+  }, [imageDTO, isGalleryFocused, starImages, unstarImages]);
 
   useRegisteredHotkeys({
     id: 'starImage',
@@ -489,7 +480,23 @@ export const NewGallery = memo(() => {
     options: { enabled: !!imageDTO && selectionCount === 1 && isGalleryFocused },
     dependencies: [imageDTO, selectionCount, isGalleryFocused, handleStarHotkey],
   });
+};
+
+export const NewGallery = memo(() => {
+  const virtuosoRef = useRef<VirtuosoGridHandle>(null);
+  const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Get the ordered list of image names - this is our primary data source for virtualization
+  const { queryArgs, imageNames, isLoading } = useGalleryImageNames();
+
+  // Use range-based fetching for bulk loading image DTOs into cache based on the visible range
+  const { onRangeChanged } = useRangeBasedImageFetching({
+    imageNames,
+    enabled: !isLoading,
+  });
 
+  useStarImageHotkey();
   useKeepSelectedImageInView(imageNames, virtuosoRef, rootRef, rangeRef);
   useKeyboardNavigation(imageNames, virtuosoRef, rootRef);
   const scrollerRef = useScrollableGallery(rootRef);