feat(frontend): working animations

frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte

@@ -4,7 +4,7 @@
 	import type { AppViewerContext, GridItem } from '../../types'
 	import ComponentOutputViewer from './ComponentOutputViewer.svelte'
 	import { classNames } from '$lib/utils'
-	import { ChevronDown, ChevronRight, Lock } from 'lucide-svelte'
+	import { ChevronDown, ChevronRight, FolderOpen } from 'lucide-svelte'
 	import { isIdInsideGriditem } from '../appUtils'
 	import { slide } from 'svelte/transition'
 
@@ -12,6 +12,7 @@
 	export let first: boolean = false
 	export let nested: boolean = false
 	export let parentId: string | undefined = undefined
+	export let expanded: boolean = false
 
 	const { app, staticOutputs, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	const name = getComponentNameById(gridItem.id)
@@ -30,6 +31,12 @@
 
 	let manuallyOpened = false
 
+	$: if (expanded) {
+		manuallyOpened = true
+	} else {
+		manuallyOpened = false
+	}
+
 	$: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids }).map(
 		(_, i) => `${gridItem.id}-${i}`
 	)
@@ -87,7 +94,7 @@
 			{#if !opened && !manuallyOpened}
 				<ChevronRight size={14} />
 			{:else if manuallyOpened}
-				<Lock size={14} />
+				<FolderOpen size={14} />
 			{:else}
 				<ChevronDown size={14} />
 			{/if}
@@ -122,6 +129,7 @@
 											first={index === 0}
 											nested
 											parentId={gridItem.id}
+											{expanded}
 										/>
 									</div>
 								{/if}

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { X } from 'lucide-svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { Expand, Maximize, Minimize, Shrink, X } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 
 	import type { AppViewerContext } from '../../types'
@@ -55,6 +56,12 @@
 			componentId.toLowerCase().includes(search.toLowerCase())
 		)
 	})
+
+	let expanded = false
+
+	function toggleExpanded() {
+		expanded = !expanded
+	}
 </script>
 
 <PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
@@ -77,8 +84,18 @@
 			</div>
 		</div>
 
+		<div class="p-1 ">
+			<Button on:click={toggleExpanded} color="light" size="xs">
+				{#if !expanded}
+					<Maximize size="14" />
+				{:else}
+					<Minimize size="14" />
+				{/if}
+			</Button>
+		</div>
+
 		{#each $app.grid as gridItem, index}
-			<ComponentOutput {gridItem} first={index === 0} />
+			<ComponentOutput {gridItem} first={index === 0} {expanded} />
 		{/each}
 	</div>
 </PanelSection>