From e9012280abb38ac8ab5dc70717a761997dbb7cdd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 1 Jul 2025 13:38:52 +1000
Subject: [PATCH] fix(ui): upscaling tab boards/gallery collapse

---
 .../ui/layouts/canvas-tab-auto-layout.tsx     | 28 ++++++-------
 .../ui/layouts/generate-tab-auto-layout.tsx   | 34 ++++++----------
 .../ui/layouts/upscaling-tab-auto-layout.tsx  | 40 +++++++++----------
 .../ui/layouts/workflows-tab-auto-layout.tsx  | 30 ++++++--------
 4 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
index 404d4422fd..9995a11c7d 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
@@ -218,14 +218,12 @@ const RightPanel = memo(() => {
     [ctx._$rightPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={rightPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={rightPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 RightPanel.displayName = 'RightPanel';
@@ -256,14 +254,12 @@ const LeftPanel = memo(() => {
     [ctx._$leftPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={leftPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={leftPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 LeftPanel.displayName = 'LeftPanel';
diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
index 92b249642a..1854ac81ba 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
@@ -32,7 +32,6 @@ import { atom } from 'nanostores';
 import { memo, useCallback, useRef, useState } from 'react';
 
 import { GenerateTabLeftPanel } from './GenerateTabLeftPanel';
-import { registerFocusListener } from './layout-focus-bridge';
 import {
   BOARD_PANEL_DEFAULT_HEIGHT_PX,
   BOARD_PANEL_MIN_HEIGHT_PX,
@@ -78,7 +77,6 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
       focusRegion: 'launchpad',
     },
   });
-  registerFocusListener(launchpadPanel, 'launchpad');
 
   const viewerPanel = api.addPanel<PanelParameters>({
     id: VIEWER_PANEL_ID,
@@ -93,7 +91,6 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
       referencePanel: launchpadPanel.id,
     },
   });
-  registerFocusListener(viewerPanel, 'viewer');
 
   return { launchpadPanel, viewerPanel } satisfies Record<string, IDockviewPanel>;
 };
@@ -159,7 +156,6 @@ export const initializeRightPanelLayout = (api: GridviewApi) => {
       focusRegion: 'gallery',
     },
   });
-  registerFocusListener(galleryPanel, 'gallery');
 
   const boardsPanel = api.addPanel<PanelParameters>({
     id: BOARDS_PANEL_ID,
@@ -173,7 +169,6 @@ export const initializeRightPanelLayout = (api: GridviewApi) => {
       referencePanel: galleryPanel.id,
     },
   });
-  registerFocusListener(boardsPanel, 'boards');
 
   boardsPanel.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
 
@@ -190,14 +185,12 @@ const RightPanel = memo(() => {
     [ctx._$rightPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={rightPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={rightPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 RightPanel.displayName = 'RightPanel';
@@ -214,7 +207,6 @@ export const initializeLeftPanelLayout = (api: GridviewApi) => {
       focusRegion: 'settings',
     },
   });
-  registerFocusListener(settingsPanel, 'settings');
 
   return { settingsPanel } satisfies Record<string, IGridviewPanel>;
 };
@@ -229,14 +221,12 @@ const LeftPanel = memo(() => {
     [ctx._$leftPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={leftPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={leftPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 LeftPanel.displayName = 'LeftPanel';
diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
index e4cf8e9ebd..f34b1d3a1b 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
@@ -175,20 +175,22 @@ export const initializeRightPanelLayout = (api: GridviewApi) => {
   return { galleryPanel, boardsPanel } satisfies Record<string, IGridviewPanel>;
 };
 
-const onReadyRightPanel: IGridviewReactProps['onReady'] = (event) => {
-  initializeRightPanelLayout(event.api);
-};
-
 const RightPanel = memo(() => {
+  const ctx = useAutoLayoutContext();
+  const onReady = useCallback<IGridviewReactProps['onReady']>(
+    (event) => {
+      initializeRightPanelLayout(event.api);
+      ctx._$rightPanelApi.set(event.api);
+    },
+    [ctx._$rightPanelApi]
+  );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={rightPanelComponents}
-        onReady={onReadyRightPanel}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={rightPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 RightPanel.displayName = 'RightPanel';
@@ -219,14 +221,12 @@ const LeftPanel = memo(() => {
     [ctx._$leftPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={leftPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={leftPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 LeftPanel.displayName = 'LeftPanel';
diff --git a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
index 1b354f99ef..3d99b6e454 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
@@ -33,7 +33,6 @@ import { dockviewTheme } from 'features/ui/styles/theme';
 import { atom } from 'nanostores';
 import { memo, useCallback, useRef, useState } from 'react';
 
-import { registerFocusListener } from './layout-focus-bridge';
 import {
   BOARD_PANEL_DEFAULT_HEIGHT_PX,
   BOARD_PANEL_MIN_HEIGHT_PX,
@@ -203,14 +202,12 @@ const RightPanel = memo(() => {
     [ctx._$rightPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={rightPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={rightPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 RightPanel.displayName = 'RightPanel';
@@ -227,7 +224,6 @@ export const initializeLeftPanelLayout = (api: GridviewApi) => {
       focusRegion: 'settings',
     },
   });
-  registerFocusListener(settingsPanel, 'settings');
 
   return { settingsPanel } satisfies Record<string, IGridviewPanel>;
 };
@@ -242,14 +238,12 @@ const LeftPanel = memo(() => {
     [ctx._$leftPanelApi]
   );
   return (
-    <>
-      <GridviewReact
-        className="dockview-theme-invoke"
-        orientation={Orientation.VERTICAL}
-        components={leftPanelComponents}
-        onReady={onReady}
-      />
-    </>
+    <GridviewReact
+      className="dockview-theme-invoke"
+      orientation={Orientation.VERTICAL}
+      components={leftPanelComponents}
+      onReady={onReady}
+    />
   );
 });
 LeftPanel.displayName = 'LeftPanel';