From ec6e0451f0185758df0e81a8f475d3feca0dbd56 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 16 Dec 2022 14:00:26 +0100
Subject: [PATCH] feat(frontend): Align output panel UI (#1025)

* feat(frontend): Align output pane UI

* feat(frontend): Align UI
---
 .../components/apps/editor/GridEditor.svelte  |  2 +-
 .../contextPanel/ComponentOutputViewer.svelte |  8 +++-
 .../editor/contextPanel/ContextPanel.svelte   | 37 ++++++++++++++-----
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index f4cfaccc2a..643be8e550 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -74,7 +74,7 @@
 	</Grid>
 	{#if $connectingInput.opened}
 		<div
-			class="fixed top-32 left-0 w-full z-10 flex justify-center items-center"
+			class="fixed top-32  z-10 flex justify-center items-center"
 			transition:fly={{ duration: 100, y: -100 }}
 		>
 			<Alert title="Connecting" type="info">
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index 0dedab20cb..a84a243831 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -13,7 +13,7 @@
 
 	function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>>) {
 		if (observableOutputs) {
-			outputs.forEach((output) => {
+			outputs.forEach((output: string) => {
 				observableOutputs[output].subscribe({
 					next: (value) => {
 						object[output] = value
@@ -27,4 +27,8 @@
 		subscribeToAllOutputs($worldStore.outputsById[componentId])
 </script>
 
-<ObjectViewer json={object} on:select topBrackets={true} />
+{#if Object.keys(object).length > 0}
+	<ObjectViewer json={object} on:select topBrackets={false} />
+{:else}
+	<div class="text-xs text-gray-500 px-4">No outputs</div>
+{/if}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 9a1c9ff047..51d3a2ecd4 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import Button from '$lib/components/common/button/Button.svelte'
 	import { classNames } from '$lib/utils'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../../types'
+	import { displayData } from '../../utils'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import ComponentOutputViewer from './ComponentOutputViewer.svelte'
 
-	const { connectingInput, staticOutputs, worldStore, selectedComponent } =
+	const { connectingInput, staticOutputs, worldStore, selectedComponent, app } =
 		getContext<AppEditorContext>('AppEditorContext')
 
 	function connectInput(componentId: string, path: string) {
@@ -23,21 +23,38 @@
 			}
 		}
 	}
+
+	function getComponentNameById(componentId: string) {
+		const component = $app.grid.find((c) => c.data.id === componentId)
+
+		if (component?.data.type) {
+			return displayData[component?.data.type].name
+		}
+	}
 </script>
 
 <PanelSection title="Outputs">
 	{#each Object.entries($staticOutputs) as [componentId, outputs], index}
 		{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-			<Button size="xs" on:click={() => ($selectedComponent = componentId)} color="blue">
-				Component: {componentId}
-			</Button>
-
-			<div
+			<button
+				on:click={() => ($selectedComponent = componentId)}
 				class={classNames(
-					'w-full p-2 rounded-xs border',
+					'px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit  -mb-2',
 					$selectedComponent === componentId
-						? 'outline-1 outline outline-offset-2 outline-blue-500'
-						: ''
+						? ' bg-indigo-500 text-white'
+						: 'bg-gray-200 text-gray-500'
+				)}
+			>
+				{getComponentNameById(componentId)} -
+				{componentId}
+			</button>
+
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				on:click={() => ($selectedComponent = componentId)}
+				class={classNames(
+					'w-full py-2 border',
+					$selectedComponent === componentId ? 'border border-blue-500' : 'cursor-pointer'
 				)}
 			>
 				<ComponentOutputViewer