From 6fcd72c79453dd9d60ca869cd9996cc0c25971fa Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 27 Sep 2023 19:13:57 +0200
Subject: [PATCH] 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
---
 .../src/lib/components/apps/editor/AppEditor.svelte   | 10 ++++++++--
 .../lib/components/apps/editor/SettingsPanel.svelte   | 11 +++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 7a62308c65..3ac628ce6e 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/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">
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 324225f99d..4ee72d0a18 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/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}