feat(frontend): Add inline script picker to apps (#945)

* feat(frontend): Add inline script picker

frontend/src/lib/components/ItemPicker.svelte

@@ -57,12 +57,13 @@
 				{#each new Array(6) as _}
 					<Skeleton layout={[[2], 0.7]} />
 				{/each}
-			{:else if filteredItems}
+			{:else if filteredItems?.length}
 				<ul class="divide-y divide-gray-200">
 					{#each filteredItems as obj}
 						<li class="flex flex-row w-full">
 							<button
-								class="py-4 px-1 gap-1 flex flex-row grow hover:bg-white hover:border text-black"
+								class="py-4 px-1 gap-1 flex flex-row grow border  border-gray-300 border-opacity-0 
+								hover:bg-white hover:border-opacity-100 text-black"
 								on:click={() => {
 									if (closeOnClick) {
 										drawer.closeDrawer()
@@ -113,7 +114,9 @@
 					{/each}
 				</ul>
 			{:else}
-				<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
+				<div class="text-center text-sm text-gray-600 mt-2">
+					{@html noItemMessage}
+				</div>
 			{/if}
 		</div>
 		<span slot="submission" class="mr-2">

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -18,6 +18,7 @@
 	import InputsSpecsEditor from './InputsSpecsEditor.svelte'
 	import PickFlow from './PickFlow.svelte'
 	import gridHelp from 'svelte-grid/build/helper/index.mjs'
+	import PickInlineScript from './PickInlineScript.svelte'
 
 	export let component: AppComponent | undefined
 
@@ -70,6 +71,15 @@
 
 				{#if component.runnable && component['path'] === undefined && component['inlineScriptName'] === undefined}
 					<span class="text-sm">Select a script or a flow to continue</span>
+					<PickInlineScript
+						scripts={(Object.keys($app.inlineScripts) || []).map((summary) => ({summary}))}
+						on:pick={({ detail }) => {
+							if (component?.runnable) {
+								// @ts-ignore
+								component.inlineScriptName = detail.summary
+							}
+						}}
+					/>
 					<PickScript
 						kind="script"
 						on:pick={({ detail }) => {
@@ -88,22 +98,6 @@
 						}}
 					/>
 				{/if}
-
-				{#if component.runnable && component['path'] === undefined && component['inlineScriptName'] === undefined}
-					{#each Object.keys($app.inlineScripts ?? {}) as inlineScriptName}
-						<Button
-							on:click={() => {
-								if (component?.runnable) {
-									// @ts-ignore
-									component.inlineScriptName = inlineScriptName
-								}
-							}}
-							size="xs"
-						>
-							Link {inlineScriptName}
-						</Button>
-					{/each}
-				{/if}
 			</PanelSection>
 		{/if}
 		{#if Object.values(component.inputs).length > 0}

frontend/src/lib/components/apps/editor/settingsPanel/PickInlineScript.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import ItemPicker from '$lib/components/ItemPicker.svelte'
+	import { createEventDispatcher } from 'svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
+
+	export let scripts: Item[]
+
+	type Item = { summary: string }
+
+	let itemPicker: ItemPicker
+	const dispatch = createEventDispatcher()
+
+	async function loadItems(): Promise<Item[]> {
+		return scripts
+	}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary })
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	noItemMessage={`There are no inline scripts.<br>
+	Click '<span class="font-semibold">Add script</span>' on the left panel to create one.`}
+	{loadItems}
+/>
+
+<Button size="xs" color="dark" on:click={() => itemPicker.openDrawer()}>
+	Pick an inline script
+</Button>