subgrids editor panel iter 1

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { GridItem } from '../types'
+
+	import SettingsPanelRec from './SettingsPanelRec.svelte'
+
+	export let subgrids: GridItem[][]
+
+	let elems = subgrids
+	$: subgrids = elems
+</script>
+
+{#if subgrids}
+	{#each elems as subGrid, i (i)}
+		<SettingsPanelRec bind:gridItems={subGrid} />
+	{/each}
+{/if}

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

@@ -3,6 +3,7 @@
 	import type { AppEditorContext, GridItem } from '../types'
 
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
+	import SettingsPanelList from './SettingsPanelList.svelte'
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
@@ -17,9 +18,7 @@
 		{:else if gridItem.data.type === 'tablecomponent'}
 			<TablePanel bind:component={gridItem.data} />
 		{:else if gridItem.data.subGrids}
-			{#each gridItem.data.subGrids as subGrid}
-				<svelte:self bind:gridItems={subGrid} />
-			{/each}
+			<SettingsPanelList bind:subgrids={gridItem.data.subGrids} />
 		{/if}
 	{/each}
 {/if}

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { GridItem } from '../../types'
+	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
+
+	export let subgrids: GridItem[][]
+	export let selectedScriptComponentId: string | undefined = undefined
+
+	let elems = subgrids
+	$: subgrids = elems
+</script>
+
+{#if subgrids}
+	{#each elems as subGrid, i (i)}
+		<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={subGrid} />
+	{/each}
+{/if}

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { GridItem } from '../../types'
+	import InlineScriptEditorList from './InlineScriptEditorList.svelte'
+
+	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
+
+	export let gridItems: GridItem[]
+
+	export let selectedScriptComponentId: string | undefined = undefined
+</script>
+
+{gridItems}
+{#if gridItems}
+	{#each gridItems as gridComponent, index (index)}
+		{#if gridComponent.data}
+			{#if gridComponent.data.id === selectedScriptComponentId}
+				<InlineScriptEditorPanel
+					id={gridComponent.data.id}
+					bind:componentInput={gridComponent.data.componentInput}
+				/>
+			{:else if gridComponent.data.subGrids}
+				<!-- <InlineScriptEditorList
+					{selectedScriptComponentId}
+					bind:subgrids={gridComponent.data.subGrids}
+				/> -->
+			{/if}
+
+			{#if gridComponent.data.type === 'tablecomponent'}
+				{#each gridComponent.data.actionButtons as actionButton, index (index)}
+					{#if actionButton.id === selectedScriptComponentId}
+						<InlineScriptEditorPanel
+							id={actionButton.id}
+							bind:componentInput={actionButton.componentInput}
+						/>
+					{/if}
+				{/each}
+			{/if}
+		{/if}
+	{/each}
+{/if}

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

@@ -4,11 +4,11 @@
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
-	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
+	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
 
-	const { lazyGrid, app, staticOutputs, runnableComponents } =
+	const { app, staticOutputs, runnableComponents } =
 		getContext<AppEditorContext>('AppEditorContext')
 
 	let selectedScriptComponentId: string | undefined = undefined
@@ -23,25 +23,8 @@
 			{#if !selectedScriptComponentId}
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
-			{#each $lazyGrid as gridComponent, index (index)}
-				{#if gridComponent.data.id === selectedScriptComponentId}
-					<InlineScriptEditorPanel
-						id={gridComponent.data.id}
-						bind:componentInput={gridComponent.data.componentInput}
-					/>
-				{/if}
 
-				{#if gridComponent.data.type === 'tablecomponent'}
-					{#each gridComponent.data.actionButtons as actionButton, index (index)}
-						{#if actionButton.id === selectedScriptComponentId}
-							<InlineScriptEditorPanel
-								id={actionButton.id}
-								bind:componentInput={actionButton.componentInput}
-							/>
-						{/if}
-					{/each}
-				{/if}
-			{/each}
+			<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={$app.grid} />
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor

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

@@ -21,7 +21,6 @@ export function deleteComponent(parentItems: GridItem[] | undefined, component:
 		if (subgrid) {
 			subgrid.forEach((item) => {
 				if (item.data) {
-					console.log(item.data)
 					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
 				}
 			})
@@ -276,6 +275,8 @@ export function findParent(root: GridItem[], id: string): GridItem | undefined {
 				}
 			}
 		}
+
+
 	}
 
 	return undefined