fix(app): fix all nested behavior

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -9,7 +9,6 @@
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number
 	export let tabs: string[]
 

frontend/src/lib/components/apps/editor/SettingsPanel.svelte

@@ -8,7 +8,6 @@
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
-	$: subgridKeys = Object.keys($app.subgrids ?? {})
 </script>
 
 {#each $app.grid as gridItem (gridItem.data.id)}
@@ -20,7 +19,7 @@
 {/each}
 
 {#if $app.subgrids}
-	{#each subgridKeys as key (key)}
+	{#each Object.keys($app.subgrids ?? {}) as key (key)}
 		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
 			{#if gridItem.data.id === $selectedComponent}
 				<ComponentPanel parent={key} bind:component={gridItem.data} />

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -92,25 +92,26 @@ export function insertNewGridItem(
 ) {
 	const id = getNextGridItemId(app)
 
+	if (!app.subgrids) {
+		app.subgrids = {}
+	}
+
 	if (!focusedGrid) {
 		const newItem = createNewGridItem(app.grid, id, data)
 		app.grid.push(newItem)
 	} else {
 		const { parentComponentId, subGridIndex } = focusedGrid
 
-		if (!app.subgrids) {
-			app.subgrids = {}
-		}
-
-		const subGrid = app.subgrids[`${parentComponentId}-${subGridIndex}`] ?? []
-		const newItem = createNewGridItem(subGrid, id, data)
 		const key = `${parentComponentId}-${subGridIndex ?? 0}`
 
-		if (!app.subgrids[key]) {
-			app.subgrids[key] = [newItem]
-		} else {
-			app.subgrids[key].push(newItem)
-		}
+		const subGrid = app.subgrids[key] ?? []
+		subGrid.push(createNewGridItem(subGrid, id, data))
+		app.subgrids[key] = subGrid
+
+
+	}
+	for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+		app.subgrids[`${id}-${i}`] = []
 	}
 
 	return id
@@ -124,8 +125,10 @@ export function getAllSubgridsAndComponentIds(
 	let components: string[] = [component.id]
 	if (app.subgrids && component.numberOfSubgrids) {
 		for (let i = 0; i < component.numberOfSubgrids; i++) {
-			const subgrid = app.subgrids[`${component.id}-${i}`]
+			const key = `${component.id}-${i}`
+			const subgrid = app.subgrids[key]
 			if (subgrid) {
+				subgrids.push(key)
 				for (const item of subgrid) {
 					let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data)
 					subgrids.push(...recSubgrids)

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -25,7 +25,7 @@
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
 
-			{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+			{#each $app.grid as gridItem (gridItem.data.id)}
 				{#if gridItem.data.id === selectedScriptComponentId}
 					<InlineScriptEditorPanel
 						id={gridItem.data.id}
@@ -44,6 +44,31 @@
 					{/each}
 				{/if}
 			{/each}
+
+			{#if $app.subgrids}
+				{#each Object.keys($app.subgrids ?? {}) as key (key)}
+					{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
+						{#if gridItem.data.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								id={gridItem.data.id}
+								bind:componentInput={gridItem.data.componentInput}
+							/>
+						{/if}
+
+						{#if gridItem.data.type === 'tablecomponent'}
+							{#each gridItem.data.actionButtons as actionButton, index (index)}
+								{#if actionButton.id === selectedScriptComponentId}
+									<InlineScriptEditorPanel
+										id={actionButton.id}
+										bind:componentInput={actionButton.componentInput}
+									/>
+								{/if}
+							{/each}
+						{/if}
+					{/each}
+				{/each}
+			{/if}
+
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor

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

@@ -44,7 +44,7 @@
 		$focusedGrid = undefined
 		if (component && !noGrid) {
 			let ids = deleteGridItem($app, component, parent)
-			for (const key in ids) {
+			for (const key of ids) {
 				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}

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

@@ -26,17 +26,24 @@
 	}
 
 	function deleteSubgrid(index: number) {
-		tabs.splice(index, 1)
-		tabs = tabs
 		let subgrid = `${component.id}-${index}`
 		for (const item of $app!.subgrids![subgrid]) {
 			const components = deleteGridItem($app, item.data, subgrid)
+			console.log(components)
 			for (const key in components) {
 				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}
 		}
-		delete $app!.subgrids![subgrid]
+		$staticOutputs = $staticOutputs
+		$runnableComponents = $runnableComponents
+		for (let i = index; i < tabs.length - 1; i++) {
+			$app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`]
+		}
+		tabs.splice(index, 1)
+		tabs = tabs
+		component.numberOfSubgrids = tabs.length
+		$app = $app
 	}
 </script>