From 1629008eb2eb48ff9cc2cf6b3a351efcf682244d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 13 Sep 2023 23:09:07 +0200
Subject: [PATCH] fix: improve splitpane + improve deleting conditional tab

---
 .../components/layout/AppSplitpanes.svelte    | 76 ++++++++++---------
 .../apps/components/layout/AppTabs.svelte     |  2 +-
 .../apps/editor/RecomputeAllComponents.svelte | 11 ++-
 .../editor/settingsPanel/GridCondition.svelte | 13 +++-
 .../apps/editor/settingsPanel/GridPane.svelte | 13 ++--
 5 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index c2c9e525c6..96256ec38b 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -57,7 +57,7 @@
 		}
 	}
 
-	let sumedup = [50, 50]
+	let sumedup = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
 	$: {
 		let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
 		if (!deepEqual(ns, sumedup)) {
@@ -69,41 +69,43 @@
 <InitializeComponent {id} />
 
 <div class="h-full w-full border" on:pointerdown={onFocus}>
-	<Splitpanes {horizontal}>
-		{#each sumedup as paneSize, index (index)}
-			<Pane size={paneSize} minSize={20}>
-				<div
-					class="w-full h-full"
-					on:pointerdown|stopPropagation={() => {
-						$selectedComponent = [id]
-						$focusedGrid = {
-							parentComponentId: id,
-							subGridIndex: index
-						}
-					}}
-				>
-					{#if $app.subgrids?.[`${id}-${index}`]}
-						<SubGridEditor
-							visible={render}
-							{id}
-							shouldHighlight={$focusedGrid?.subGridIndex === index}
-							class={css?.container?.class}
-							style={css?.container?.style}
-							subGridId={`${id}-${index}`}
-							containerHeight={horizontal ? undefined : componentContainerHeight - 8}
-							on:focus={() => {
-								if (!$connectingInput.opened) {
-									$selectedComponent = [id]
-									$focusedGrid = {
-										parentComponentId: id,
-										subGridIndex: index
+	{#key sumedup}
+		<Splitpanes {horizontal}>
+			{#each sumedup as paneSize, index (index)}
+				<Pane size={paneSize} minSize={20}>
+					<div
+						class="w-full h-full"
+						on:pointerdown|stopPropagation={() => {
+							$selectedComponent = [id]
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: index
+							}
+						}}
+					>
+						{#if $app.subgrids?.[`${id}-${index}`]}
+							<SubGridEditor
+								visible={render}
+								{id}
+								shouldHighlight={$focusedGrid?.subGridIndex === index}
+								class={css?.container?.class}
+								style={css?.container?.style}
+								subGridId={`${id}-${index}`}
+								containerHeight={horizontal ? undefined : componentContainerHeight - 8}
+								on:focus={() => {
+									if (!$connectingInput.opened) {
+										$selectedComponent = [id]
+										$focusedGrid = {
+											parentComponentId: id,
+											subGridIndex: index
+										}
 									}
-								}
-							}}
-						/>
-					{/if}
-				</div>
-			</Pane>
-		{/each}
-	</Splitpanes>
+								}}
+							/>
+						{/if}
+					</div>
+				</Pane>
+			{/each}
+		</Splitpanes>
+	{/key}
 </div>
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index a1f2eee2cb..c59258e3da 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -118,7 +118,7 @@
 		>
 			{#each tabs ?? [] as res}
 				<button
-					class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border hover:text-black px-1 py-2 {selected ==
+					class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border-gray-300 border border-transparent hover:text-black px-1 py-2 {selected ==
 					res
 						? 'outline outline-gray-500 outline-1 bg-surface text-black'
 						: ''}"
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 0205ef20b2..5784752cc8 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -101,9 +101,16 @@
 	]
 </script>
 
-<!-- {allItems($app.grid, $app.subgrids)
+<!-- {$initialized.initializedComponents?.join(', ')} -->
+<!-- {allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length}
+{$initialized.initializedComponents}
+{allItems($app.grid, $app.subgrids)
 	.map((x) => x.id)
-	.filter((x) => !$initialized.initializedComponents?.includes(x))} -->
+	.filter((x) => !$initialized.initializedComponents?.includes(x))
+	.sort()
+	.join(', ')} -->
+<!-- {allItems($app.grid, $app.subgrids).map((x) => x.id)} -->
+
 <div class="flex items-center">
 	<Button
 		disabled={componentNumber == 0}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
index a617bdf6b4..8d4603a08c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
@@ -89,11 +89,18 @@
 			$app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`]
 		}
 
-		items.splice(index, 1)
-
-		items = [...items]
+		// Remove the corresponding item from the items array
+		items = items.filter((item) => item.originalIndex !== index)
 
 		component.numberOfSubgrids = items.length
+		// Update the originalIndex of the remaining items
+		items.forEach((item, i) => {
+			item.originalIndex = i
+		})
+		items = items
+
+		delete $app!.subgrids![`${component.id}-${items.length}`]
+		$app = $app
 	}
 
 	function addCondition(): void {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
index 27829c4ee5..c2a511926c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
@@ -14,16 +14,15 @@
 
 	function addTab() {
 		const numberOfPanes = panes.length
-		panes = Array(panes.length + 1)
-			.fill(0)
-			.map((_) => Math.floor(100 / (panes.length + 1)))
-
 		if (!$app.subgrids) {
 			$app.subgrids = {}
 		}
-
 		$app.subgrids[`${component.id}-${numberOfPanes}`] = []
-		component.numberOfSubgrids = panes.length
+		component.numberOfSubgrids = panes.length + 1
+
+		panes = Array(panes.length + 1)
+			.fill(0)
+			.map((_) => Math.floor(100 / (panes.length + 1)))
 	}
 
 	function deleteSubgrid(index: number) {
@@ -39,6 +38,8 @@
 			$app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`]
 		}
 		panes.splice(index, 1)
+		delete $app!.subgrids![`${component.id}-${panes.length}`]
+
 		panes = panes
 		component.numberOfSubgrids = panes.length
 		$app = $app