From 1ae80f5ab9d00a25e0c3a21e2eccd318c5343401 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Thu, 3 Nov 2022 04:07:57 +1300
Subject: [PATCH] Readd Hotkey for Dual Display

---
 frontend/src/features/tabs/InvokeWorkarea.tsx | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/tabs/InvokeWorkarea.tsx b/frontend/src/features/tabs/InvokeWorkarea.tsx
index 16af7099d3..d79f413720 100644
--- a/frontend/src/features/tabs/InvokeWorkarea.tsx
+++ b/frontend/src/features/tabs/InvokeWorkarea.tsx
@@ -1,6 +1,7 @@
 import { Tooltip } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { ReactNode } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { VscSplitHorizontal } from 'react-icons/vsc';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
 import ImageGallery from '../gallery/ImageGallery';
@@ -26,6 +27,23 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
   const { optionsPanel, children, styleClass } = props;
   const { showDualDisplay, activeTabName } = useAppSelector(workareaSelector);
 
+  const handleDualDisplay = () => {
+    dispatch(setShowDualDisplay(!showDualDisplay));
+  };
+
+  // Hotkeys
+  // Toggle split view
+  useHotkeys(
+    'shift+j',
+    () => {
+      handleDualDisplay();
+    },
+    {
+      enabled: activeTabName === 'inpainting',
+    },
+    [showDualDisplay]
+  );
+
   return (
     <div
       className={
@@ -41,7 +59,7 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
               <div
                 className="workarea-split-button"
                 data-selected={showDualDisplay}
-                onClick={() => dispatch(setShowDualDisplay(!showDualDisplay))}
+                onClick={handleDualDisplay}
               >
                 <VscSplitHorizontal />
               </div>