Adds escape hotkey to close floating panels

frontend/src/features/gallery/ImageGallery.tsx

@@ -163,6 +163,15 @@ export default function ImageGallery() {
     [shouldPinGallery]
   );
 
+  useHotkeys(
+    'esc',
+    () => {
+      if (shouldPinGallery) return;
+      dispatch(setShouldShowGallery(false));
+    },
+    [shouldPinGallery]
+  );
+
   const IMAGE_SIZE_STEP = 32;
 
   useHotkeys(

frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -32,10 +32,12 @@ import {
   setUpscalingStrength,
   setWidth,
   setInitialImage,
+  setShouldShowImageDetails,
 } from '../../options/optionsSlice';
 import promptToString from '../../../common/util/promptToString';
 import { seedWeightsToString } from '../../../common/util/seedWeightPairs';
 import { FaCopy } from 'react-icons/fa';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 type MetadataItemProps = {
   isLink?: boolean;
@@ -107,7 +109,10 @@ const memoEqualityCheck = (
 const ImageMetadataViewer = memo(
   ({ image, styleClass }: ImageMetadataViewerProps) => {
     const dispatch = useAppDispatch();
-    // const jsonBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
+
+    useHotkeys('esc', () => {
+      dispatch(setShouldShowImageDetails(false));
+    });
 
     const metadata = image?.metadata?.image || {};
     const {

frontend/src/features/system/Console.tsx

@@ -75,6 +75,10 @@ const Console = () => {
     [shouldShowLogViewer]
   );
 
+  useHotkeys('esc', () => {
+    dispatch(setShouldShowLogViewer(false));
+  });
+
   const handleOnScroll = () => {
     if (!viewerRef.current) return;
     if (

frontend/src/features/system/HotkeysModal/HotkeysModal.tsx

@@ -100,6 +100,7 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       hotkey: 'Shift+I',
     },
     { title: 'Delete Image', desc: 'Delete the current image', hotkey: 'Del' },
+    { title: 'Close Panels', desc: 'Closes open panels', hotkey: 'Esc' },
   ];
 
   const galleryHotkeys = [

frontend/src/features/tabs/InvokeOptionsPanel.tsx

@@ -67,6 +67,15 @@ const InvokeOptionsPanel = (props: Props) => {
     [shouldShowOptionsPanel]
   );
 
+  useHotkeys(
+    'esc',
+    () => {
+      if (shouldPinOptionsPanel) return;
+      dispatch(setShouldShowOptionsPanel(false));
+    },
+    [shouldPinOptionsPanel]
+  );
+
   useHotkeys(
     'shift+o',
     () => {
@@ -74,7 +83,6 @@ const InvokeOptionsPanel = (props: Props) => {
     },
     [shouldPinOptionsPanel]
   );
-  //
 
   const handleCloseOptionsPanel = useCallback(() => {
     if (shouldPinOptionsPanel) return;