styling nits

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -135,7 +135,8 @@
 				btnClasses="w-full max-w-lg"
 				on:click={() => runPreview($previewArgs)}
 			>
-				Test flow <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd>
+				Test flow &nbsp;<Kbd small>{getModifierKey()}</Kbd>
+				<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 			</Button>
 		{/if}
 		<Button

frontend/src/lib/components/ModulePreview.svelte

@@ -88,7 +88,8 @@
 				</Button>
 			{:else}
 				<Button color="dark" btnClasses="truncate" size="sm" on:click={() => runTest(stepArgs)}
-					>Run&nbsp;<Kbd small>{getModifierKey()}</Kbd><Kbd small>Enter</Kbd></Button
+					>Run&nbsp; <Kbd small>{getModifierKey()}</Kbd>
+					<Kbd small><span class="text-lg font-bold">⏎</span></Kbd></Button
 				>
 			{/if}
 		</div>

frontend/src/lib/components/ScriptEditor.svelte

@@ -2,7 +2,7 @@
 	import type { Schema } from '$lib/common'
 	import { CompletedJob, Job, JobService } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { emptySchema, scriptLangToEditorLang } from '$lib/utils'
+	import { emptySchema, getModifierKey, scriptLangToEditorLang } from '$lib/utils'
 	import { faPlay } from '@fortawesome/free-solid-svg-icons'
 	import Editor from './Editor.svelte'
 	import { inferArgs } from '$lib/infer'
@@ -209,7 +209,8 @@
 							{#if testIsLoading}
 								Running
 							{:else}
-								Test&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>Enter</Kbd>
+								Test&nbsp;<Kbd small>{getModifierKey()}</Kbd>
+								<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 							{/if}
 						</Button>
 					{/if}

frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte

@@ -9,6 +9,7 @@
 	} from '../../inputType'
 	import type { AppViewerContext, InlineScript } from '../../types'
 	import RunnableComponent from './RunnableComponent.svelte'
+	import InitializeComponent from './InitializeComponent.svelte'
 
 	export let id: string
 	export let name: string
@@ -34,21 +35,25 @@
 	})
 </script>
 
-<RunnableComponent
-	render={false}
-	{id}
-	{fields}
-	{autoRefresh}
-	bind:result
-	transformer={undefined}
-	{recomputeOnInputChanged}
-	runnable={{
-		name,
-		inlineScript,
-		type: 'runnableByName'
-	}}
-	wrapperClass="hidden"
-	{outputs}
->
-	<slot />
-</RunnableComponent>
+{#if inlineScript}
+	<RunnableComponent
+		render={false}
+		{id}
+		{fields}
+		{autoRefresh}
+		bind:result
+		transformer={undefined}
+		{recomputeOnInputChanged}
+		runnable={{
+			name,
+			inlineScript,
+			type: 'runnableByName'
+		}}
+		wrapperClass="hidden"
+		{outputs}
+	>
+		<slot />
+	</RunnableComponent>
+{:else}
+	<InitializeComponent {id} />
+{/if}

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

@@ -19,6 +19,7 @@
 
 	export let name: string
 	export let componentType: string | undefined = undefined
+	export let cancelable = true
 
 	let tab = 'inlinescripts'
 	let filter: string = ''
@@ -146,21 +147,24 @@
 			<Button
 				on:click={() => picker?.openDrawer()}
 				size="xs"
+				variant="border"
 				color="blue"
 				startIcon={{ icon: faCodeBranch }}
 				btnClasses="truncate"
 			>
 				Fork a workspace or hub script
 			</Button>
-			<Button
-				on:click={() => dispatch('delete')}
-				size="xs"
-				color="red"
-				variant="border"
-				btnClasses="truncate"
-			>
-				Cancel
-			</Button>
+			{#if cancelable}
+				<Button
+					on:click={() => dispatch('delete')}
+					size="xs"
+					color="red"
+					variant="border"
+					btnClasses="truncate"
+				>
+					Cancel
+				</Button>
+			{/if}
 		</div>
 	</div>
 

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

@@ -3,7 +3,7 @@
 	import type { Preview } from '$lib/gen'
 	import { createEventDispatcher, getContext, onMount } from 'svelte'
 	import type { AppViewerContext, CancelablePromise, InlineScript } from '../../types'
-	import { CornerDownLeft, Loader2, Maximize2, Trash2 } from 'lucide-svelte'
+	import { Loader2, Maximize2, Trash2 } from 'lucide-svelte'
 	import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte'
 	import { inferArgs } from '$lib/infer'
 	import type { Schema } from '$lib/common'
@@ -161,9 +161,9 @@
 					<div class="flex flex-row gap-1 items-center">
 						Format
 
-						<div class="flex flex-row items-center gap-1">
-							<Kbd>{getModifierKey()}</Kbd>
-							<Kbd>S</Kbd>
+						<div class="flex flex-row items-center">
+							<Kbd small>{getModifierKey()}</Kbd>
+							<Kbd small>S</Kbd>
 						</div>
 					</div>
 				</Button>
@@ -189,13 +189,9 @@
 							<div class="flex flex-row gap-1 items-center">
 								Run
 
-								<div class="flex flex-row items-center gap-1">
-									<Kbd>{getModifierKey()}</Kbd>
-									<Kbd>
-										<div class="h-4 flex items-center justify-center">
-											<CornerDownLeft size={10} />
-										</div>
-									</Kbd>
+								<div class="flex flex-row items-center">
+									<Kbd small>{getModifierKey()}</Kbd>
+									<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 								</div>
 							</div>
 						</Button>

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

@@ -87,6 +87,7 @@
 									$app.hiddenInlineScripts[hiddenInlineScript].inlineScript = e.detail
 								}
 							}}
+							cancelable={false}
 						/>
 					{/if}
 				{/key}

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

@@ -60,7 +60,6 @@
 <PanelSection title="Runnables">
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
-			<div class="text-sm font-semibold truncate mb-1"> Inline scripts </div>
 			<div class="flex flex-col gap-2 w-full">
 				{#if runnables.inline.length > 0}
 					<div class="flex gap-1 flex-col">
@@ -93,6 +92,32 @@
 						{/each}
 					</div>
 				{/if}
+				{#each runnables.imported as { name, id, transformer }, index (index)}
+					<button
+						id={PREFIX + id}
+						class="panel-item
+						{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+						on:click={() => selectScript(id)}
+					>
+						<span class="text-2xs truncate">{name}</span>
+						<Badge color="dark-indigo">{id}</Badge>
+					</button>
+					{#if transformer}
+						<div class="w-full pl-4">
+							<button
+								id={PREFIX + id + '_transformer'}
+								class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+{$selectedComponentInEditor === id + '_transformer'
+									? 'border-blue-500 bg-blue-100'
+									: 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id + '_transformer')}
+							>
+								<span class="text-2xs truncate">Transformer</span>
+							</button>
+						</div>
+					{/if}
+				{/each}
+
 				{#if $app.unusedInlineScripts?.length > 0}
 					<div class="flex gap-1 flex-col">
 						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
@@ -110,49 +135,14 @@
 					</div>
 				{/if}
 				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
-					<div class="text-xs text-gray-500">No inline scripts</div>
-				{/if}
-			</div>
-		</div>
-
-		<div>
-			<div class="text-sm font-semibold truncate mb-1"> Workspace/Hub </div>
-			<div class="flex flex-col gap-1 w-full">
-				{#if runnables.imported.length > 0}
-					{#each runnables.imported as { name, id, transformer }, index (index)}
-						<button
-							id={PREFIX + id}
-							class="panel-item
-								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
-							on:click={() => selectScript(id)}
-						>
-							<span class="text-2xs truncate">{name}</span>
-							<Badge color="dark-indigo">{id}</Badge>
-						</button>
-						{#if transformer}
-							<div class="w-full pl-4">
-								<button
-									id={PREFIX + id + '_transformer'}
-									class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
-	{$selectedComponentInEditor === id + '_transformer'
-										? 'border-blue-500 bg-blue-100'
-										: 'hover:bg-blue-50'}"
-									on:click={() => selectScript(id + '_transformer')}
-								>
-									<span class="text-2xs truncate">Transformer</span>
-								</button>
-							</div>
-						{/if}
-					{/each}
-				{:else}
-					<div class="text-xs text-gray-500">No imported scripts/flows</div>
+					<div class="text-xs text-gray-500">No scripts/flows</div>
 				{/if}
 			</div>
 		</div>
 
 		<div>
 			<div class="w-full flex justify-between items-center mb-1">
-				<div class="text-sm font-semibold truncate">
+				<div class="text-xs text-gray-600 font-semibold truncate">
 					Background scripts
 					<Tooltip class="mb-0.5">
 						Background scripts are triggered upon global refresh or when their input changes. The

frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte

@@ -133,7 +133,8 @@
 												startIcon={{ icon: faPlay }}
 												disabled={runForm == undefined || !isValid}
 												on:click={() => runForm?.run()}
-												>Run <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd></Button
+												>Run &nbsp;<Kbd small>{getModifierKey()}</Kbd>
+												<Kbd small><span class="text-lg font-bold">⏎</span></Kbd></Button
 											>
 										</div>
 									</div>

frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte

@@ -166,7 +166,8 @@
 												disabled={runForm == undefined || !isValid}
 												on:click={() => runForm?.run()}
 											>
-												Run <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd>
+												Run &nbsp;<Kbd small>{getModifierKey()}</Kbd>
+												<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 											</Button>
 										</div>
 									</div>