todo: improve deleting tab

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -2,6 +2,7 @@
 	import { classNames } from '$lib/utils'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../../types'
+	import { findParent } from '../../utils'
 	import { components } from '../component'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import ComponentOutputViewer from './ComponentOutputViewer.svelte'
@@ -26,7 +27,7 @@
 	}
 
 	function getComponentNameById(componentId: string) {
-		const component = $app.grid.find((c) => c?.data?.id === componentId)
+		const component = findParent($app.grid, componentId)
 
 		if (component?.data.type) {
 			return components[component?.data.type].name

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -13,6 +13,7 @@
 	import {
 		buildExtraLib,
 		createNewGridItem,
+		deleteComponent,
 		fieldTypeToTsType,
 		findParent,
 		getNextGridItemId,
@@ -65,34 +66,12 @@
 	function removeGridElement() {
 		$selectedComponent = undefined
 		if (component) {
-			if (gridItems) {
-				gridItems = gridItems.filter((gridComponent) => gridComponent.data.id !== component?.id)
-			}
-
-			delete $staticOutputs[component.id]
-			$staticOutputs = $staticOutputs
-
-			delete $runnableComponents[component.id]
-			$runnableComponents = $runnableComponents
-
-			if (
-				component.componentInput?.type === 'runnable' &&
-				component.componentInput?.runnable?.type === 'runnableByName'
-			) {
-				const { name, inlineScript } = component.componentInput.runnable
-
-				if (inlineScript) {
-					if (!$app.unusedInlineScripts) {
-						$app.unusedInlineScripts = []
-					}
-
-					$app.unusedInlineScripts.push({
-						name,
-						inlineScript
-					})
-				}
-			}
+			deleteComponent(gridItems, component, $app, $staticOutputs, $runnableComponents)
 		}
+		gridItems = gridItems
+		$staticOutputs = $staticOutputs
+		$runnableComponents = $runnableComponents
+
 		onDelete?.()
 	}
 
@@ -197,7 +176,7 @@
 		{/if}
 
 		{#if component.type === 'tabscomponent' && Array.isArray(component.subGrids)}
-			<GridTab id={component.id} bind:tabs={component.tabs} bind:subGrids={component.subGrids} />
+			<GridTab bind:tabs={component.tabs} bind:subGrids={component.subGrids} />
 		{/if}
 
 		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}

frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte

@@ -1,28 +1,31 @@
 <script lang="ts">
-	import { Badge } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
-	import { classNames } from '$lib/utils'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import { Icon } from 'svelte-awesome'
 	import type { AppEditorContext, GridItem } from '../../types'
+	import { deleteComponent } from '../../utils'
 	import PanelSection from './common/PanelSection.svelte'
-	import TableActionLabel from './TableActionLabel.svelte'
 
 	export let tabs: string[]
-	export let id: string
 	export let subGrids: GridItem[][]
 
-	const { selectedComponent, staticOutputs } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, staticOutputs, app } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	function addTab() {
 		tabs = [...tabs, `Tab ${tabs.length + 1}`]
 		subGrids = [...subGrids, []]
 	}
 
-	function deleteComponent(id: number) {
-		tabs = tabs.filter((x, i) => i !== id)
-		subGrids = subGrids.filter((x, i) => i !== id)
+	function deleteSubgrid(index: number) {
+		subGrids[index].forEach((x) => {
+			deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
+		})
+		tabs.splice(index, 1)
+		subGrids.splice(index, 1)
+		tabs = tabs
+		subGrids = subGrids
+		$app = $app
 	}
 </script>
 
@@ -52,10 +55,7 @@
 						color="light"
 						variant="border"
 						on:click={() => {
-							tabs.splice(index, 1)
-							subGrids.splice(index, 1)
-							tabs = tabs
-							subGrids = subGrids
+							deleteSubgrid(index)
 						}}
 						iconOnly
 						btnClasses="!text-red-500"

frontend/src/lib/components/apps/utils.ts

@@ -16,6 +16,45 @@ import type { Output } from './rx'
 import type { App, GridItem } from './types'
 import { getNextId } from '../flows/flowStateUtils'
 
+export function deleteComponent(parentItems: GridItem[] | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
+	(component.subGrids ?? []).forEach((subgrid) => {
+		if (subgrid) {
+			subgrid.forEach((item) => {
+				if (item.data) {
+					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
+				}
+			})
+		}
+	})
+
+	if (parentItems) {
+		let index = parentItems.findIndex((item) => item.data?.id === component.id)
+		if (index != -1) {
+			parentItems.splice(index, 1)
+		}
+	}
+
+	delete staticOutputs[component.id]
+	delete runnableComponents[component.id]
+
+	if (
+		component.componentInput?.type === 'runnable' &&
+		component.componentInput?.runnable?.type === 'runnableByName'
+	) {
+		const { name, inlineScript } = component.componentInput.runnable
+
+		if (inlineScript) {
+			if (!app.unusedInlineScripts) {
+				app.unusedInlineScripts = []
+			}
+
+			app.unusedInlineScripts.push({
+				name,
+				inlineScript
+			})
+		}
+	}
+}
 export async function loadSchema(
 	workspace: string,
 	path: string,