From 33faf12feea23962418ee527e3ddee1d41dd5bcc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 4 Jan 2023 05:07:18 +0100
Subject: [PATCH] fix apps UX nits

---
 frontend/Caddyfile                                     |  5 -----
 frontend/src/lib/components/Editor.svelte              | 10 +++++-----
 .../src/lib/components/apps/editor/AppEditor.svelte    |  2 +-
 .../apps/editor/contextPanel/ContextPanel.svelte       |  2 +-
 .../inlineScriptsPanel/InlineScriptEditor.svelte       |  4 ++--
 .../inlineScriptsPanel/InlineScriptsPanel.svelte       |  2 +-
 .../apps/editor/settingsPanel/ComponentPanel.svelte    |  5 ++++-
 .../apps/editor/settingsPanel/SelectedRunnable.svelte  |  4 ++--
 frontend/src/lib/components/apps/utils.ts              |  2 +-
 9 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/Caddyfile b/frontend/Caddyfile
index 1ac9ce1e69..d18bc1c756 100644
--- a/frontend/Caddyfile
+++ b/frontend/Caddyfile
@@ -1,12 +1,7 @@
-{
-  auto_https off
-}
-
 http://localhost {  
   bind {$ADDRESS}
   reverse_proxy /api/* http://localhost:8000
   reverse_proxy /* http://localhost:3000
-  reverse_proxy /ws/* http://localhost:3001
 }
 
 https://localhost {  
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 95485aba7c..2714936103 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -40,6 +40,8 @@
 		noSuggestionDiagnostics: true,
 		noSyntaxValidation: true
 	})
+	languages.typescript.typescriptDefaults.setExtraLibs([])
+
 	meditor.defineTheme('myTheme', {
 		base: 'vs',
 		inherit: true,
@@ -201,7 +203,6 @@
 						isTrusted: true
 					},
 
-					// workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
 					initializationOptions,
 					middleware: {
 						workspace: {
@@ -409,10 +410,9 @@
 		const model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
-		editor = meditor.create(
-			divEl as HTMLDivElement,
-			editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
-		)
+		editor = meditor.create(divEl as HTMLDivElement, {
+			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
+		})
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		editor.onDidChangeModelContent((event) => {
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index bdbed8d7a7..64dd1831cc 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -169,7 +169,7 @@
 								{#if $selectedComponent !== undefined}
 									<SettingsPanel />
 								{:else}
-									<div class="p-4 min-w-[150px] text-sm">No component selected.</div>
+									<div class="p-2 min-w-[150px] text-sm">No component selected.</div>
 								{/if}
 							</TabContent>
 							<TabContent value="insert">
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index b4362dbde4..f3f1791f72 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -43,7 +43,7 @@
 
 <PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">
 	<div
-		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-4 pt-4 pb-2"
+		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-2 pt-4 pb-2"
 	>
 		{#each panels as [componentId, outputs] (componentId)}
 			{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index ff3487022b..63be7c1475 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -54,7 +54,7 @@
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full p-4 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
+<div class="h-full p-2 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
 	<div class="flex justify-between w-full gap-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
@@ -102,7 +102,7 @@
 			class="flex flex-1 grow h-full"
 			lang={scriptLangToEditorLang(inlineScript?.language)}
 			bind:code={inlineScript.content}
-			fixedOverflowWidgets={false}
+			fixedOverflowWidgets={true}
 			on:change={async (e) => {
 				if (inlineScript) {
 					const oldSchema = JSON.stringify(inlineScript.schema)
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index e85c3d0d36..ead2996c55 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -12,7 +12,7 @@
 	let selectedScriptComponentId: string | undefined = undefined
 </script>
 
-<SplitPanesWrapper>
+<SplitPanesWrapper panesClass="!overflow-visible">
 	<Pane size={25}>
 		<InlineScriptsPanelList bind:selectedScriptComponentId />
 	</Pane>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index a5ca1f6491..a6beaaa0ea 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -93,7 +93,10 @@ declare const ${k} = ${JSON.stringify(v)};
 {#if component}
 	<div class="flex flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}>
+			<PanelSection
+				smallPadding
+				title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}
+			>
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
index f68084e30b..882be478fc 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
@@ -41,7 +41,7 @@
 		bind:inlineScript={appInput.runnable.inlineScript}
 	/>
 {/if}
-<div class="flex flex-col xl:flex-row justify-between w-full items-center gap-1">
+<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
 	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -49,7 +49,7 @@
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1">
+	<div class="flex gap-1 flex-wrap justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
 				Edit
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 6662943199..d51ce0e23f 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -19,7 +19,7 @@ import {
 	Calendar,
 	ToggleLeft
 } from 'lucide-svelte'
-import type { AppInput, AppInputs, InputType, ResultAppInput, StaticAppInput, StaticInput } from './inputType'
+import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
 import type { AppComponent } from './types'
 
 export async function loadSchema(