fix(frontend): Small app fixes (#1331)

* fix(frontend): wip

* fix(frontend): wip

* fix(frontend): merge main

* fix(frontend): fix build

* fix(frontend): revert css

* fix(frontend): fix alignement + remove id from  if deleted

* fix(frontend): fix connection height

* fix(frontend): done

frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -12,20 +12,19 @@
 	import { Building, Globe2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { fly } from 'svelte/transition'
-	import type { AppEditorContext, AppViewerContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { defaultCode } from '../component'
 	import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte'
 	import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte'
 
 	export let name: string
-	export let id: string
+	export let componentType: string | undefined = undefined
 
 	let tab = 'inlinescripts'
 	let filter: string = ''
 	let picker: Drawer
 
 	const { appPath, app } = getContext<AppViewerContext>('AppViewerContext')
-
 	const dispatch = createEventDispatcher()
 
 	async function inferInlineScriptSchema(
@@ -47,8 +46,6 @@
 		path: string,
 		subkind: 'pgsql' | 'mysql' | undefined = undefined
 	) {
-		const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type
-
 		const content =
 			defaultCode(componentType ?? '', language) ??
 			initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow')
@@ -93,10 +90,6 @@
 	}
 
 	const langs = ['deno', 'python3', 'go', 'bash'] as Script.language[]
-
-	function loadSchemaFromTriggerable(path: string, arg1: string) {
-		throw new Error('Function not implemented.')
-	}
 </script>
 
 <Drawer bind:this={picker} size="1000px">

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -9,7 +9,7 @@
 	import type { Schema } from '$lib/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Editor from '$lib/components/Editor.svelte'
-	import { emptySchema, scriptLangToEditorLang } from '$lib/utils'
+	import { emptySchema, isMac, scriptLangToEditorLang } from '$lib/utils'
 	import Popover from '../../../Popover.svelte'
 	import { computeFields } from './utils'
 	import { deepEqual } from 'fast-equals'
@@ -67,6 +67,7 @@
 			loadSchemaAndInputsByName()
 		}
 	})
+
 	const dispatch = createEventDispatcher()
 	let runLoading = false
 
@@ -82,8 +83,6 @@
 		}
 	}
 
-	let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
-
 	$: extraLib =
 		inlineScript?.language == 'frontend' && worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
@@ -177,7 +176,7 @@
 						Format
 
 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -199,7 +198,7 @@
 							Run
 
 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />
@@ -248,15 +247,15 @@
 			{:else}
 				<SimpleEditor
 					bind:this={simpleEditor}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
 					cmdEnterAction={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
 					on:change={() => {
 						$app = $app
 					}}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte

@@ -2,7 +2,6 @@
 	import { Button, Drawer, DrawerContent } from '$lib/components/common'
 	import type Editor from '$lib/components/Editor.svelte'
 	import ScriptEditor from '$lib/components/ScriptEditor.svelte'
-	import type { Preview } from '$lib/gen'
 	import { faSave } from '@fortawesome/free-solid-svg-icons'
 	import type { InlineScript } from '../../types'
 

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -18,6 +18,7 @@
 
 	export let componentInput: AppInput | undefined
 	export let defaultUserInput = false
+	export let componentType: string
 	export let id: string
 	export let transformer: boolean
 
@@ -97,8 +98,8 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600"
-			>Selected editor component is a transformer but component has no transformer
+		<span class="px-2 text-gray-600">
+			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
 {:else if componentInput && componentInput.type == 'runnable'}
@@ -115,7 +116,7 @@
 			/>
 		{:else}
 			<EmptyInlineScript
-				{id}
+				{componentType}
 				name={componentInput.runnable.name}
 				on:delete={deleteInlineScript}
 				on:new={(e) => {

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -74,7 +74,6 @@
 						/>
 					{:else}
 						<EmptyInlineScript
-							id={`b_${hiddenInlineScript}`}
 							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
 							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 							on:new={(e) => {

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext, GridItem } from '../../types'
-
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
 	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
@@ -14,6 +13,7 @@
 		defaultUserInput={gridItem.data?.type == 'formcomponent' ||
 			gridItem?.data?.type == 'formbuttoncomponent'}
 		id={gridItem.data.id}
+		componentType={gridItem.data.type}
 		transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 		bind:componentInput={gridItem.data.componentInput}
 	/>
@@ -23,6 +23,7 @@
 	{#each gridItem.data.actionButtons as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
+				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 				bind:componentInput={actionButton.componentInput}