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;