Fix an issue with the OutsideWatcher

The OutsideWatcher was disabling hotkeys because it was always being active -- whether the object was pinned or not. Modified the hook to now take a new optional argument called "req" which is a boolean that indicates whether to trigger it or not.

We can pass this from the component to control when the outside watcher should work and when it shouldn't.

frontend/src/common/hooks/useClickOutsideWatcher.ts

@@ -2,7 +2,8 @@ import { RefObject, useEffect } from 'react';
 
 const useClickOutsideWatcher = (
   ref: RefObject<HTMLElement>,
-  callback: () => void
+  callback: () => void,
+  req = true
 ) => {
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
@@ -10,11 +11,15 @@ const useClickOutsideWatcher = (
         callback();
       }
     }
-    document.addEventListener('mousedown', handleClickOutside);
+    if (req) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      if (req) {
+        document.removeEventListener('mousedown', handleClickOutside);
+      }
     };
-  }, [ref, callback]);
+  }, [ref, req, callback]);
 };
 
 export default useClickOutsideWatcher;

frontend/src/features/gallery/ImageGallery.tsx

@@ -111,13 +111,13 @@ export default function ImageGallery() {
   };
 
   const handleCloseGallery = () => {
-    if (shouldPinGallery) return;
+    // if (shouldPinGallery) return;
+    dispatch(setShouldShowGallery(false));
     dispatch(
       setGalleryScrollPosition(
         galleryContainerRef.current ? galleryContainerRef.current.scrollTop : 0
       )
     );
-    dispatch(setShouldShowGallery(false));
     dispatch(setShouldHoldGalleryOpen(false));
     // dispatch(setNeedsCache(true));
   };
@@ -249,7 +249,7 @@ export default function ImageGallery() {
     setShouldShowButtons(galleryWidth >= 280);
   }, [galleryWidth]);
 
-  useClickOutsideWatcher(galleryRef, handleCloseGallery);
+  useClickOutsideWatcher(galleryRef, handleCloseGallery, !shouldPinGallery);
 
   return (
     <CSSTransition

frontend/src/features/tabs/InvokeOptionsPanel.tsx

@@ -84,7 +84,11 @@ const InvokeOptionsPanel = (props: Props) => {
     // dispatch(setNeedsCache(true));
   }, [dispatch, shouldPinOptionsPanel]);
 
-  useClickOutsideWatcher(optionsPanelRef, handleCloseOptionsPanel);
+  useClickOutsideWatcher(
+    optionsPanelRef,
+    handleCloseOptionsPanel,
+    !shouldPinOptionsPanel
+  );
 
   const setCloseOptionsPanelTimer = () => {
     timeoutIdRef.current = window.setTimeout(