fix: Fullscreen Hotkey Bug

After upgrading the deps, the full screen hotkey started to bug out. I believe this was happening because it was triggered in two different components causing it to run twice. Removed it from both floating buttons and moved it to the Invoke tab. Makes sense to keep it there as it is a global hotkey.

invokeai/frontend/src/features/ui/components/FloatingGalleryButton.tsx

@@ -2,20 +2,13 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
-import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { MdPhotoLibrary } from 'react-icons/md';
 import { floatingSelector } from './FloatingParametersPanelButtons';
 
 const FloatingGalleryButton = () => {
   const dispatch = useAppDispatch();
-  const {
+  const { shouldShowGalleryButton, shouldPinGallery } =
-    shouldShowGallery,
+    useAppSelector(floatingSelector);
-    shouldShowGalleryButton,
-    shouldPinGallery,
-    shouldShowParametersPanel,
-    shouldPinParametersPanel,
-  } = useAppSelector(floatingSelector);
 
   const handleShowGallery = () => {
     dispatch(setShouldShowGallery(true));
@@ -24,22 +17,6 @@ const FloatingGalleryButton = () => {
     }
   };
 
-  useHotkeys(
-    'f',
-    () => {
-      if (shouldShowGallery || shouldShowParametersPanel) {
-        dispatch(setShouldShowParametersPanel(false));
-        dispatch(setShouldShowGallery(false));
-      } else {
-        dispatch(setShouldShowParametersPanel(true));
-        dispatch(setShouldShowGallery(true));
-      }
-      if (shouldPinGallery || shouldPinParametersPanel)
-        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
-    },
-    [shouldShowGallery, shouldShowParametersPanel]
-  );
-
   return shouldShowGalleryButton ? (
     <IAIIconButton
       tooltip="Show Gallery (G)"

invokeai/frontend/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -3,10 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import { gallerySelector } from 'features/gallery/store/gallerySelectors';
-import {
+import { GalleryState } from 'features/gallery/store/gallerySlice';
-  GalleryState,
-  setShouldShowGallery,
-} from 'features/gallery/store/gallerySlice';
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
 import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
 import {
@@ -16,7 +13,6 @@ import {
 import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
 import { isEqual } from 'lodash';
 
-import { useHotkeys } from 'react-hotkeys-hook';
 import { FaSlidersH } from 'react-icons/fa';
 
 export const floatingSelector = createSelector(
@@ -67,12 +63,9 @@ export const floatingSelector = createSelector(
 const FloatingParametersPanelButtons = () => {
   const dispatch = useAppDispatch();
   const {
-    shouldShowParametersPanel,
     shouldShowParametersPanelButton,
     shouldShowProcessButtons,
     shouldPinParametersPanel,
-    shouldShowGallery,
-    shouldPinGallery,
   } = useAppSelector(floatingSelector);
 
   const handleShowOptionsPanel = () => {
@@ -82,22 +75,6 @@ const FloatingParametersPanelButtons = () => {
     }
   };
 
-  useHotkeys(
-    'f',
-    () => {
-      if (shouldShowGallery || shouldShowParametersPanel) {
-        dispatch(setShouldShowParametersPanel(false));
-        dispatch(setShouldShowGallery(false));
-      } else {
-        dispatch(setShouldShowParametersPanel(true));
-        dispatch(setShouldShowGallery(true));
-      }
-      if (shouldPinGallery || shouldPinParametersPanel)
-        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
-    },
-    [shouldShowGallery, shouldShowParametersPanel]
-  );
-
   return shouldShowParametersPanelButton ? (
     <div className="show-hide-button-options">
       <IAIIconButton

invokeai/frontend/src/features/ui/components/InvokeTabs.tsx

@@ -11,14 +11,20 @@ import PostprocessingIcon from 'common/icons/PostprocessingIcon';
 import TextToImageIcon from 'common/icons/TextToImageIcon';
 import TrainingIcon from 'common/icons/TrainingIcon';
 import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
+import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
+import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
-import { setActiveTab } from 'features/ui/store/uiSlice';
+import {
+  setActiveTab,
+  setShouldShowParametersPanel,
+} from 'features/ui/store/uiSlice';
 import i18n from 'i18n';
 import { ReactElement } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { activeTabIndexSelector } from '../store/uiSelectors';
+import { floatingSelector } from './FloatingParametersPanelButtons';
 import ImageToImageWorkarea from './ImageToImage';
 import TextToImageWorkarea from './TextToImage';
 import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea';
@@ -73,10 +79,18 @@ function updateTabTranslations() {
 
 export default function InvokeTabs() {
   const activeTab = useAppSelector(activeTabIndexSelector);
+
   const isLightBoxOpen = useAppSelector(
     (state: RootState) => state.lightbox.isLightboxOpen
   );
 
+  const {
+    shouldShowGallery,
+    shouldShowParametersPanel,
+    shouldPinGallery,
+    shouldPinParametersPanel,
+  } = useAppSelector(floatingSelector);
+
   useUpdateTranslations(updateTabTranslations);
 
   const dispatch = useAppDispatch();
@@ -114,6 +128,22 @@ export default function InvokeTabs() {
     [isLightBoxOpen]
   );
 
+  useHotkeys(
+    'f',
+    () => {
+      if (shouldShowGallery || shouldShowParametersPanel) {
+        dispatch(setShouldShowParametersPanel(false));
+        dispatch(setShouldShowGallery(false));
+      } else {
+        dispatch(setShouldShowParametersPanel(true));
+        dispatch(setShouldShowGallery(true));
+      }
+      if (shouldPinGallery || shouldPinParametersPanel)
+        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
+    },
+    [shouldShowGallery, shouldShowParametersPanel]
+  );
+
   const renderTabs = () => {
     const tabsToRender: ReactElement[] = [];
     Object.keys(tabDict).forEach((key) => {