From 8a6f03cd464ee8841a31879e771f65e2a9761d46 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 3 Jan 2024 21:16:47 +1100
Subject: [PATCH] feat(ui): improved panel interactions

---
 .../src/features/ui/components/InvokeTabs.tsx | 27 +++++++++++++++----
 .../ui/components/tabs/ResizeHandle.tsx       |  6 ++---
 .../web/src/features/ui/hooks/usePanel.ts     | 13 +++++++--
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 4f3a214690..bb4e052b89 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -192,6 +192,7 @@ const InvokeTabs = () => {
     expand: expandOptionsPanel,
     collapse: collapseOptionsPanel,
     toggle: toggleOptionsPanel,
+    onDoubleClickHandle: onDoubleClickOptionsPanelHandle,
   } = usePanel(optionsPanelUsePanelOptions);
 
   const {
@@ -204,10 +205,19 @@ const InvokeTabs = () => {
     expand: expandGalleryPanel,
     collapse: collapseGalleryPanel,
     toggle: toggleGalleryPanel,
+    onDoubleClickHandle: onDoubleClickGalleryPanelHandle,
   } = usePanel(galleryPanelUsePanelOptions);
 
-  useHotkeys('g', toggleGalleryPanel, []);
-  useHotkeys(['t', 'o'], toggleOptionsPanel, []);
+  useHotkeys('g', toggleGalleryPanel, [toggleGalleryPanel]);
+  useHotkeys(['t', 'o'], toggleOptionsPanel, [toggleOptionsPanel]);
+  useHotkeys(
+    'shift+r',
+    () => {
+      resetOptionsPanel();
+      resetGalleryPanel();
+    },
+    [resetOptionsPanel, resetGalleryPanel]
+  );
   useHotkeys(
     'f',
     () => {
@@ -219,7 +229,14 @@ const InvokeTabs = () => {
         collapseGalleryPanel();
       }
     },
-    [isOptionsPanelCollapsed, isGalleryPanelCollapsed]
+    [
+      isOptionsPanelCollapsed,
+      isGalleryPanelCollapsed,
+      expandOptionsPanel,
+      expandGalleryPanel,
+      collapseOptionsPanel,
+      collapseGalleryPanel,
+    ]
   );
 
   return (
@@ -265,7 +282,7 @@ const InvokeTabs = () => {
             </Panel>
             <ResizeHandle
               id="options-main-handle"
-              onDoubleClick={resetOptionsPanel}
+              onDoubleClick={onDoubleClickOptionsPanelHandle}
               orientation="vertical"
             />
           </>
@@ -279,8 +296,8 @@ const InvokeTabs = () => {
           <>
             <ResizeHandle
               id="main-gallery-handle"
-              onDoubleClick={resetGalleryPanel}
               orientation="vertical"
+              onDoubleClick={onDoubleClickGalleryPanelHandle}
             />
             <Panel
               id="gallery-panel"
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
index 334bcb5e2b..083d0790f3 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
@@ -64,18 +64,18 @@ export const resizeHandleTheme = defineStyleConfig({
     },
     '.resize-handle-drag-handle': {
       pos: 'absolute',
-      borderRadius: '2px',
+      borderRadius: '1px',
       transitionProperty: 'inherit',
       transitionDuration: 'inherit',
       '&[data-orientation="horizontal"]': {
-        w: '20px',
+        w: '30px',
         h: '6px',
         insetInlineStart: '50%',
         transform: 'translate(-50%, 0)',
       },
       '&[data-orientation="vertical"]': {
         w: '6px',
-        h: '20px',
+        h: '30px',
         insetBlockStart: '50%',
         transform: 'translate(0, -50%)',
       },
diff --git a/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts b/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
index 95f618c7bd..7c27bfdf08 100644
--- a/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
+++ b/invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
@@ -68,10 +68,14 @@ export type UsePanelReturn = {
    */
   onExpand: PanelOnExpand;
   /**
-   * Reset the panel to the minSize. If the panel is already at the minSize, collapse it.
-   * This can be provided to the `onDoubleClick` prop of the panel's nearest resize handle.
+   * Reset the panel to the minSize.
    */
   reset: () => void;
+  /**
+   * Reset the panel to the minSize. If the panel is already at the minSize, collapse it.
+   * This should be passed to the `onDoubleClick` prop of the panel's nearest resize handle.
+   */
+  onDoubleClickHandle: () => void;
   /**
    * Toggle the panel between collapsed and expanded.
    */
@@ -183,6 +187,10 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
   );
 
   const reset = useCallback(() => {
+    panelHandleRef.current?.resize(_minSize);
+  }, [_minSize]);
+
+  const onDoubleClickHandle = useCallback(() => {
     // If the panel is really super close to the min size, collapse it
     if (Math.abs((panelHandleRef.current?.getSize() ?? 0) - _minSize) < 0.01) {
       collapse();
@@ -204,6 +212,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
     expand,
     collapse,
     resize,
+    onDoubleClickHandle,
   };
 };