feat(frontend): wip

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>

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'

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>