app fixes

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

@@ -34,6 +34,8 @@
 		{noPadding}
 		bind:subGrid={subGrids[0]}
 		containerHeight={componentContainerHeight}
+		parentId={id}
+		index={0}
 		on:focus={() => {
 			$selectedComponent = id
 		}}

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

@@ -63,6 +63,8 @@
 	</div>
 	{#if subGrids && subGrids[selectedIndex]}
 		<SubGridEditor
+			parentId={id}
+			index={selectedIndex}
 			{noPadding}
 			bind:subGrid={subGrids[selectedIndex]}
 			containerHeight={componentContainerHeight - tabHeight}

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

@@ -467,8 +467,8 @@
 				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
 				<button
 					on:click={() => {
-						$focusedGrid = undefined
 						$selectedComponent = undefined
+						$focusedGrid = undefined
 					}}
 				>
 					<X size={14} />

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

@@ -37,8 +37,8 @@
 			const disabledGridItem = fct(gridItem)
 
 			if (disabledGridItem.data.subGrids) {
-				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid: GridItem[]) =>
-					subgrid.map((subgridItem: GridItem) => fct(subgridItem))
+				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map(
+					(subgrid: GridItem[]) => subgrid?.map((subgridItem: GridItem) => fct(subgridItem)) ?? []
 				)
 			}
 
@@ -87,6 +87,7 @@
 	function selectComponent(id: string) {
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			$focusedGrid = undefined
 		}
 	}
 

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

@@ -9,6 +9,8 @@
 	export let subGrid: GridItem[]
 	export let containerHeight: number
 	export let noPadding = false
+	export let parentId: string
+	export let index: number
 
 	const dispatch = createEventDispatcher()
 
@@ -36,6 +38,10 @@
 		onComponent = id
 		if (!$connectingInput.opened) {
 			$selectedComponent = id
+			$focusedGrid = {
+				parentComponentId: parentId,
+				subGridIndex: index
+			}
 		}
 	}
 
@@ -48,28 +54,6 @@
 
 	// @ts-ignore
 	let container
-
-	$: if ($focusedGrid?.parentComponentId !== $selectedComponent) {
-		const gridItemIds = $app.grid
-			.map((gridItem: GridItem) => {
-				if (gridItem.data.id === $focusedGrid?.parentComponentId) {
-					const subGrids = gridItem.data.subGrids ?? []
-					return [
-						gridItem.data.id,
-						...subGrids.map((subGrid: GridItem[]) =>
-							subGrid.map((gridItem: GridItem) => gridItem.data.id)
-						)
-					]
-				} else {
-					return []
-				}
-			})
-			.flat(2)
-
-		if (!gridItemIds.includes($selectedComponent)) {
-			$focusedGrid = undefined
-		}
-	}
 </script>
 
 <div class="relative w-full subgrid " bind:this={container}>

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

@@ -20,7 +20,6 @@ export function deleteComponent(parentItems: GridItem[] | undefined, component:
 	(component.subGrids ?? []).forEach((subgrid) => {
 		if (subgrid) {
 			subgrid.forEach((item) => {
-				console.log(item)
 				if (item.data) {
 					console.log(item.data)
 					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)