improve focusedGrid in tabs and drawers

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

@@ -79,21 +79,39 @@
 				$focusedGrid = undefined
 			}}
 		>
-			{#if $app.subgrids?.[`${id}-0`]}
-				<SubGridEditor
-					visible={open && render}
-					{id}
-					class={css?.container?.class}
-					style={css?.container?.style}
-					subGridId={`${id}-0`}
-					containerHeight={1200}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
+			<div
+				class="h-full"
+				on:pointerdown={(e) => {
+					e?.stopPropagation()
+					if (!$connectingInput.opened) {
+						$selectedComponent = [id]
+						$focusedGrid = {
+							parentComponentId: id,
+							subGridIndex: 0
 						}
-					}}
-				/>
-			{/if}
+					}
+				}}
+			>
+				{#if $app.subgrids?.[`${id}-0`]}
+					<SubGridEditor
+						visible={open && render}
+						{id}
+						class={css?.container?.class}
+						style={css?.container?.style}
+						subGridId={`${id}-0`}
+						containerHeight={1200}
+						on:focus={() => {
+							if (!$connectingInput.opened) {
+								$selectedComponent = [id]
+								$focusedGrid = {
+									parentComponentId: id,
+									subGridIndex: 0
+								}
+							}
+						}}
+					/>
+				{/if}
+			</div>
 		</DrawerContent>
 	</Drawer>
 </Portal>

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

@@ -29,7 +29,6 @@
 		}
 	}
 
-	$: $selectedComponent?.includes(id) && onFocus()
 	$: css = concatCustomCss($app.css?.containercomponent, customCss)
 
 	$componentControl[id] = {

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

@@ -39,7 +39,7 @@
 
 	function handleTabSelection() {
 		selectedIndex = tabs?.indexOf(selected)
-		outputs?.selectedTabIndex.set(selectedIndex, true)
+		outputs?.selectedTabIndex.set(selectedIndex)
 
 		if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
 			$focusedGrid = {
@@ -127,6 +127,7 @@
 					on:focus={() => {
 						if (!$connectingInput.opened) {
 							$selectedComponent = [id]
+							handleTabSelection()
 						}
 					}}
 				/>

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

@@ -73,8 +73,9 @@
 		hash: $page.url.hash
 	}
 
+	const worldStore = buildWorld(context)
 	setContext<AppViewerContext>('AppViewerContext', {
-		worldStore: buildWorld(context),
+		worldStore,
 		app: appStore,
 		summary: summaryStore,
 		selectedComponent,
@@ -143,6 +144,8 @@
 	$: if ($selectedComponent?.[0] != befSelected) {
 		befSelected = $selectedComponent?.[0]
 		selectedTab = 'settings'
+		console.log('focusedGrid1', befSelected)
+
 		if (befSelected) {
 			if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
 				let item = findGridItem($appStore, befSelected)
@@ -151,6 +154,12 @@
 						parentComponentId: befSelected,
 						subGridIndex: 0
 					}
+				} else if (item?.data.type === 'tabscomponent') {
+					$focusedGrid = {
+						parentComponentId: befSelected,
+						subGridIndex:
+							($worldStore.outputsById?.[befSelected]?.selectedTabIndex?.peak() as number) ?? 0
+					}
 				} else {
 					let subgrid = findGridItemParentGrid($appStore, befSelected)
 					if (subgrid) {