From ae81d7ee2ce553e4b138b0254deb79fdc4d40e8f Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 13 Mar 2023 09:01:36 +0100
Subject: [PATCH] feat(frontend): wip

---
 .../contextPanel/ComponentOutput.svelte       |  4 +---
 .../contextPanel/ContainerOutput.svelte       |  0
 .../editor/contextPanel/ContextPanel.svelte   |  2 +-
 .../editor/contextPanel/SubGridOutput.svelte  | 23 ++++---------------
 4 files changed, 7 insertions(+), 22 deletions(-)
 delete mode 100644 frontend/src/lib/components/apps/editor/contextPanel/ContainerOutput.svelte

diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
index 305db879cd..508c988d18 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
@@ -84,10 +84,8 @@
 			{getComponentNameById(gridItem.id)}
 			{#if !opened && !manuallyOpened}
 				<ChevronRight size={14} />
-			{:else if manuallyOpened}
-				<FolderOpen size={14} />
 			{:else}
-				<ChevronDown size={14} />
+				<ChevronDown size={14} class={manuallyOpened ? 'text-indigo-500 ' : ''} />
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContainerOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContainerOutput.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 05330ef241..e61a673479 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
-	import { Expand, Maximize, Minimize, Shrink, X } from 'lucide-svelte'
+	import { Maximize, Minimize, X } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 
 	import type { AppViewerContext } from '../../types'
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
index dd6396122a..1c0f94d500 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
@@ -7,31 +7,18 @@
 	import ComponentOutput from './ComponentOutput.svelte'
 
 	export let name: string | undefined = undefined
-	export let parentId: string | undefined = undefined
+	export let parentId: string
 	export let expanded: boolean = false
 	export let subGrids: string[]
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	function getSubgridName(name: string) {
-		if (name === 'Tabs') {
-			return 'Tab'
-		} else if (name === 'Horizontal Split Panes') {
-			return 'Pane'
-		} else if (name === 'Vertical Split Panes') {
-			return 'Pane'
-		}
-	}
-
 	let selected = 0
 
-	$: outputs = parentId
-		? ($worldStore?.outputsById[parentId] as {
-				selectedTabIndex: Output<number>
-		  })
-		: undefined
+	$: outputs = $worldStore?.outputsById[parentId] as {
+		selectedTabIndex: Output<number>
+	}
 
-	// Set selected every time the output changes
 	$: if (outputs?.selectedTabIndex) {
 		outputs.selectedTabIndex.subscribe({
 			next: (value) => {
@@ -55,7 +42,7 @@
 				}}
 			>
 				<div class="text-xs">
-					{name ? getSubgridName(name) : 'Should implement'}
+					{name ? name : 'Should implement'}
 					{index + 1}
 				</div>
 			</div>