From b77fd3da366070f0dbbe9b436a3c351f72cd9264 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:09:47 +0200
Subject: [PATCH] Fix resizing reordered panels (#6011)

**Problem:**

A reordered panel that is the only element of a column cannot be
resized.

**Fix:**

When calculating non empty columns, take into account the visibility of
the column panels too, which would otherwise return a zombie column
index and mess up the resizing calculations.


https://github.com/concrete-utopia/utopia/assets/1081051/4b07009e-6849-4008-b1f8-8e3479126b2c

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #6005
---
 .../canvas/grid-panels-container.tsx          | 26 ++++++++++++++++---
 editor/src/components/canvas/stored-layout.ts |  2 ++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/canvas/grid-panels-container.tsx b/editor/src/components/canvas/grid-panels-container.tsx
index 6a9587f37eb9..3dedde6253a3 100644
--- a/editor/src/components/canvas/grid-panels-container.tsx
+++ b/editor/src/components/canvas/grid-panels-container.tsx
@@ -15,7 +15,7 @@ import {
   useResolvedGridPanels,
   wrapAroundColIndex,
 } from './grid-panels-state'
-import type { LayoutUpdate, StoredPanel } from './stored-layout'
+import type { LayoutUpdate, PanelVisibility, StoredPanel } from './stored-layout'
 import {
   GridHorizontalExtraPadding,
   GridPanelHorizontalGapHalf,
@@ -23,12 +23,32 @@ import {
   GridVerticalExtraPadding,
   NumberOfColumns,
 } from './stored-layout'
+import { Substores, useEditorState } from '../editor/store/store-hook'
 
 export const GridPanelsContainer = React.memo(() => {
   const [panelState, setPanelState] = useGridPanelState()
 
   const orderedPanels = useResolvedGridPanels()
 
+  const panelVisibility = useEditorState(
+    Substores.restOfEditor,
+    (store): PanelVisibility => {
+      return {
+        navigator: store.editor.leftMenu.visible,
+        inspector: store.editor.rightMenu.visible,
+        'code-editor': store.editor.interfaceDesigner.codePaneVisible,
+      }
+    },
+    'GridPanelsContainer panelVisibility',
+  )
+
+  const isPanelVisible = React.useCallback(
+    (panel: StoredPanel): boolean => {
+      return panelVisibility[panel.name]
+    },
+    [panelVisibility],
+  )
+
   const nonEmptyColumns = React.useMemo(() => {
     return Array.from(
       accumulate(new Set<number>(), (acc: Set<number>) => {
@@ -37,13 +57,13 @@ export const GridPanelsContainer = React.memo(() => {
         acc.add(wrapAroundColIndex(NumberOfColumns - 1))
 
         panelState.forEach((column, colIndex) => {
-          if (column.panels.length > 0) {
+          if (column.panels.length > 0 && column.panels.some(isPanelVisible)) {
             acc.add(wrapAroundColIndex(colIndex))
           }
         })
       }),
     )
-  }, [panelState])
+  }, [panelState, isPanelVisible])
 
   const onDrop = React.useCallback(
     (itemToMove: StoredPanel, newPosition: LayoutUpdate) => {
diff --git a/editor/src/components/canvas/stored-layout.ts b/editor/src/components/canvas/stored-layout.ts
index 6c8b7139b558..595716a5efd2 100644
--- a/editor/src/components/canvas/stored-layout.ts
+++ b/editor/src/components/canvas/stored-layout.ts
@@ -41,6 +41,8 @@ export interface GridPanelData {
 
 export type PanelName = Menu | Pane
 
+export type PanelVisibility = Record<PanelName, boolean>
+
 export interface StoredPanel {
   name: PanelName
   type: 'menu' | 'pane'