feat(frontend): Switch to component list when deleting a component (#2346)

* feat(frontend): Switch to component list when deleting a component

* feat(frontend): remove console.log

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

@@ -168,7 +168,8 @@
 	let selectedTab: 'insert' | 'settings' | 'css' = 'insert'
 
 	let befSelected: string | undefined = undefined
-	$: if ($selectedComponent?.[0] != befSelected) {
+
+	$: if ($selectedComponent?.[0] != befSelected && $selectedComponent?.[0] != undefined) {
 		befSelected = $selectedComponent?.[0]
 		selectedTab = 'settings'
 
@@ -569,7 +570,12 @@
 								<div slot="content" class="h-full overflow-y-auto">
 									<TabContent class="overflow-auto h-full" value="settings">
 										{#if $selectedComponent !== undefined}
-											<SettingsPanel />
+											<SettingsPanel
+												on:delete={() => {
+													befSelected = undefined
+													selectedTab = 'insert'
+												}}
+											/>
 											<SecondaryMenu right />
 										{:else}
 											<div class="min-w-[150px] text-sm text-secondary text-center py-8 px-2">

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
 	import type { App, AppViewerContext } from '../types'
 	import { BG_PREFIX, allItems } from '../utils'
 	import { findComponentSettings, findGridItem } from './appUtils'
@@ -32,11 +32,18 @@
 			})
 			.find((x) => x)
 	}
+
+	const dispatch = createEventDispatcher()
 </script>
 
 {#if componentSettings}
 	{#key componentSettings?.item?.id}
-		<ComponentPanel bind:componentSettings />
+		<ComponentPanel
+			bind:componentSettings
+			onDelete={() => {
+				dispatch('delete')
+			}}
+		/>
 	{/key}
 {:else if tableActionSettings}
 	{#key tableActionSettings?.item?.data?.id}