windmill-components 1.60.4 → 1.75.0

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
     };
     events: {
+        delete: CustomEvent<any>;
         new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -1,19 +1,24 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, getContext, onMount } from 'svelte';
-import { CheckCircle, Code2, X } from 'lucide-svelte';
+import { CornerDownLeft, Maximize2, Plus, Trash2, X } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
 import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
-import Tooltip from '../../../Tooltip.svelte';
+import Popover from '../../../Popover.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
+import Kbd from '../../../common/kbd/Kbd.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
 export let id;
-const { runnableComponents } = getContext('AppEditorContext');
+export let defaultUserInput = false;
+export let fields = {};
+export let syncFields = false;
+const { runnableComponents, stateId } = getContext('AppViewerContext');
 let editor;
 let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
@@ -31,76 +36,117 @@ onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
         inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
     }
+    if (inlineScript.schema) {
+        loadSchemaAndInputsByName();
+    }
 });
 const dispatch = createEventDispatcher();
 let runLoading = false;
+async function loadSchemaAndInputsByName() {
+    if (syncFields) {
+        const newSchema = inlineScript.schema;
+        const newFields = computeFields(newSchema, defaultUserInput, fields);
+        if (!deepEqual(newFields, fields)) {
+            fields = newFields;
+            $stateId++;
+        }
+    }
+}
+let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 </script>
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
-	<div class="flex justify-between w-full gap-1 px-2 pt-1 flex-row items-center">
+<div class="h-full flex flex-col gap-1">
+	<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
-			<input bind:value={name} placeholder="Inline script name" />
+			<input
+				on:keydown|stopPropagation
+				bind:value={name}
+				placeholder="Inline script name"
+				class="!text-xs !rounded-xs"
+			/>
 		{/if}
 		<div class="flex w-full flex-row gap-2 items-center justify-end">
 			{#if validCode}
-				<Badge color="green">
-					<CheckCircle size={16} />
-				</Badge>
+				<Badge color="green" baseClass="!text-2xs">Valid</Badge>
 			{:else}
-				<Badge color="red">
-					<X size={16} />
-				</Badge>
+				<Badge color="red" baseClass="!text-2xs">Invalid</Badge>
 			{/if}
 
+			{#if id.startsWith('unused-') || id.startsWith('bg_')}
+				<Popover notClickable placement="bottom">
+					<Button
+						size="xs"
+						color="light"
+						btnClasses="!px-2 !bg-red-100 hover:!bg-red-200"
+						aria-label="Delete"
+						on:click={() => dispatch('delete')}
+					>
+						<Trash2 size={14} class="text-red-800" />
+					</Button>
+					<svelte:fragment slot="text">Delete</svelte:fragment>
+				</Popover>
+			{/if}
+			<Popover notClickable placement="bottom">
+				<Button
+					size="xs"
+					color="light"
+					btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
+					aria-label="Open full editor"
+					on:click={() => {
+						inlineScriptEditorDrawer?.openDrawer()
+					}}
+				>
+					<Maximize2 size={14} />
+				</Button>
+				<svelte:fragment slot="text">Open full editor</svelte:fragment>
+			</Popover>
 			<Button
 				variant="border"
 				size="xs"
-				color="blue"
+				color="light"
+				btnClasses="!px-2 !py-1"
 				on:click={async () => {
 					editor.format()
 				}}
 			>
-				Format&nbsp;<Tooltip>Ctrl+S</Tooltip>
+				<div class="flex flex-row gap-1 items-center">
+					Format
+
+					<div class="flex flex-row items-center gap-1">
+						<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+						<Kbd>S</Kbd>
+					</div>
+				</div>
 			</Button>
-			{#if id.startsWith('unused-')}
-				<Button
-					size="xs"
-					color="light"
-					variant="border"
-					iconOnly
-					startIcon={{ icon: faTrash }}
-					on:click={() => dispatch('delete')}
-				/>
-			{:else if $runnableComponents[id] != undefined}
+			{#if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
-					color="blue"
+					color="dark"
+					variant="border"
+					btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
 					on:click={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.()
 						runLoading = false
 					}}
 				>
-					Run&nbsp;
-					<Tooltip light>Ctrl+Enter</Tooltip>
+					<div class="flex flex-row gap-1 items-center">
+						Run
+
+						<div class="flex flex-row items-center gap-1">
+							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>
+								<div class="h-4 flex items-center justify-center">
+									<CornerDownLeft size={10} />
+								</div>
+							</Kbd>
+						</div>
+					</div>
 				</Button>
 			{/if}
-
-			<Button
-				size="xs"
-				color="blue"
-				on:click={() => {
-					inlineScriptEditorDrawer?.openDrawer()
-				}}
-			>
-				<div class="flex gap-1 items-center">
-					<Code2 size={16} />
-					Open full editor
-				</div>
-			</Button>
 		</div>
 	</div>
 
@@ -125,6 +171,7 @@ let runLoading = false;
 					await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
 					if (JSON.stringify(inlineScript.schema) != oldSchema) {
 						inlineScript = inlineScript
+						loadSchemaAndInputsByName()
 					}
 				}
 			}}

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -1,12 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { InlineScript } from '../../types';
+import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         inlineScript: InlineScript;
         name?: string | undefined;
         id: string;
+        defaultUserInput?: boolean | undefined;
+        fields?: Record<string, AppInput> | undefined;
+        syncFields?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -3,12 +3,16 @@ import Button from '../../../common/button/Button.svelte';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
 import { inferArgs } from '../../../../infer';
+import { workspaceStore } from '../../../../stores';
 import { emptySchema, getScriptByPath } from '../../../../utils';
 import { faCodeBranch, faExternalLinkAlt, faEye, faPen } from '@fortawesome/free-solid-svg-icons';
 import { clearResultAppInput } from '../../utils';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
 export let componentInput;
+export let defaultUserInput = false;
 export let id;
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
@@ -34,6 +38,27 @@ async function fork(path) {
 }
 let drawerFlowViewer;
 let flowPath = '';
+async function refreshScript(x) {
+    let { schema } = await getScriptByPath(x.path);
+    if (!deepEqual(x.schema, schema)) {
+        x.schema = schema;
+        if (componentInput?.type == 'runnable') {
+            componentInput.fields = computeFields(schema, false, componentInput.fields);
+        }
+        componentInput = componentInput;
+    }
+}
+$: if (componentInput &&
+    componentInput.type == 'runnable' &&
+    componentInput?.runnable?.type === 'runnableByPath' &&
+    componentInput.runnable.runType == 'script') {
+    refreshScript(componentInput.runnable);
+}
+function deleteInlineScript() {
+    if (componentInput && componentInput.type == 'runnable') {
+        componentInput = clearResultAppInput(componentInput);
+    }
+}
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
@@ -46,19 +71,19 @@ let flowPath = '';
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
+				{defaultUserInput}
 				{id}
 				bind:inlineScript={componentInput.runnable.inlineScript}
 				bind:name={componentInput.runnable.name}
-				on:delete={() => {
-					if (componentInput && componentInput.type == 'runnable') {
-						componentInput = clearResultAppInput(componentInput)
-					}
-				}}
+				bind:fields={componentInput.fields}
+				syncFields
+				on:delete={deleteInlineScript}
 			/>
 		{:else}
 			<EmptyInlineScript
 				{id}
 				name={componentInput.runnable.name}
+				on:delete={deleteInlineScript}
 				on:new={(e) => {
 					if (
 						componentInput &&
@@ -116,7 +141,8 @@ let flowPath = '';
 							startIcon={{ icon: faEye }}
 							endIcon={{ icon: faExternalLinkAlt }}
 							target="_blank"
-							href="/flows/get/{componentInput?.['runnable']?.path}">Details page</Button
+							href="/flows/get/{componentInput?.['runnable']?.path}?workspace_id={$workspaceStore}"
+							>Details page</Button
 						>
 					</div>
 					<FlowPathViewer path={componentInput.runnable.path} />

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte.d.ts

@@ -3,6 +3,7 @@ import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
+        defaultUserInput?: boolean | undefined;
         id: string;
     };
     events: {

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -2,10 +2,19 @@
 import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
-import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
-const { lazyGrid, app } = getContext('AppEditorContext');
+import EmptyInlineScript from './EmptyInlineScript.svelte';
+import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
+const { app, staticOutputs, runnableComponents } = getContext('AppViewerContext');
 let selectedScriptComponentId = undefined;
+function deleteBackgroundScript(index) {
+    // remove the script from the array at the index
+    $app.hiddenInlineScripts.splice(index, 1);
+    $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
+    delete $staticOutputs[`bg_${index}`];
+    delete $runnableComponents[`bg_${index}`];
+    $staticOutputs = $staticOutputs;
+}
 </script>
 
 <SplitPanesWrapper>
@@ -14,16 +23,24 @@ let selectedScriptComponentId = undefined;
 			<InlineScriptsPanelList bind:selectedScriptComponentId />
 		</Pane>
 		<Pane size={75}>
-			{#each $lazyGrid as gridComponent, index (index)}
-				{#if gridComponent.data.id === selectedScriptComponentId}
+			{#if !selectedScriptComponentId}
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					Select a script on the left panel
+				</div>
+			{/if}
+
+			{#each $app.grid as gridItem, index (gridItem?.data?.id ?? index)}
+				{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
 					<InlineScriptEditorPanel
-						id={gridComponent.data.id}
-						bind:componentInput={gridComponent.data.componentInput}
+						defaultUserInput={gridItem?.data?.type == 'formcomponent' ||
+							gridItem?.data?.type == 'buttonformcomponent'}
+						id={gridItem.data.id}
+						bind:componentInput={gridItem.data.componentInput}
 					/>
 				{/if}
 
-				{#if gridComponent.data.type === 'tablecomponent'}
-					{#each gridComponent.data.actionButtons as actionButton, index (index)}
+				{#if gridItem?.data?.type === 'tablecomponent'}
+					{#each gridItem.data.actionButtons as actionButton, index (index)}
 						{#if actionButton.id === selectedScriptComponentId}
 							<InlineScriptEditorPanel
 								id={actionButton.id}
@@ -33,6 +50,33 @@ let selectedScriptComponentId = undefined;
 					{/each}
 				{/if}
 			{/each}
+
+			{#if $app.subgrids}
+				{#each Object.keys($app.subgrids ?? {}) as key (key)}
+					{#each $app.subgrids[key] as gridItem (gridItem?.data?.id)}
+						{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								defaultUserInput={gridItem.data?.type == 'formcomponent' ||
+									gridItem.data?.type == 'buttonformcomponent'}
+								id={gridItem.data.id}
+								bind:componentInput={gridItem.data.componentInput}
+							/>
+						{/if}
+
+						{#if gridItem?.data?.type === 'tablecomponent'}
+							{#each gridItem.data.actionButtons as actionButton, index (index)}
+								{#if actionButton.id === selectedScriptComponentId}
+									<InlineScriptEditorPanel
+										id={actionButton.id}
+										bind:componentInput={actionButton.componentInput}
+									/>
+								{/if}
+							{/each}
+						{/if}
+					{/each}
+				{/each}
+			{/if}
+
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor
@@ -47,6 +91,29 @@ let selectedScriptComponentId = undefined;
 					/>
 				{/if}
 			{/each}
+			{#each $app?.hiddenInlineScripts ?? [] as hiddenInlineScript, index (index)}
+				{#if `bg_${index}` === selectedScriptComponentId}
+					{#if hiddenInlineScript.inlineScript}
+						<InlineScriptEditor
+							id={`bg_${index}`}
+							bind:inlineScript={hiddenInlineScript.inlineScript}
+							bind:name={hiddenInlineScript.name}
+							bind:fields={hiddenInlineScript.fields}
+							syncFields
+							on:delete={() => deleteBackgroundScript(index)}
+						/>
+					{:else}
+						<EmptyInlineScript
+							id={`b_${index}`}
+							name={hiddenInlineScript.name}
+							on:delete={() => deleteBackgroundScript(index)}
+							on:new={(e) => {
+								hiddenInlineScript.inlineScript = e.detail
+							}}
+						/>
+					{/if}
+				{/if}
+			{/each}
 		</Pane>
 	</Splitpanes>
 </SplitPanesWrapper>

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -1,93 +1,149 @@
-<script>import { Badge } from '../../../common';
-import { classNames } from '../../../../utils';
+<script>import { Badge, Button } from '../../../common';
+import { Plus } from 'lucide-svelte';
 import { getContext } from 'svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import { getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
+const PREFIX = 'script-selector-';
 export let selectedScriptComponentId = undefined;
-const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
-function selectInlineScript(id) {
+const { app, selectedComponent } = getContext('AppViewerContext');
+function selectScript(id) {
     selectedScriptComponentId = id;
-    if (!id.startsWith('unused-')) {
+    if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
         $selectedComponent = selectedScriptComponentId;
     }
 }
-$: runnables = getAppScripts($lazyGrid);
-// When seleced component changes, update selectedScriptComponentId
-$: {
-    if (selectedComponent) {
-        selectedScriptComponentId = $selectedComponent;
+$: runnables = getAppScripts($app.grid, $app.subgrids);
+// When selected component changes, update selectedScriptComponentId
+$: if ($selectedComponent != selectedScriptComponentId) {
+    selectedScriptComponentId = $selectedComponent;
+}
+function createBackgroundScript() {
+    let index = 0;
+    let newScriptPath = `Background Script ${index}`;
+    const names = getAllScriptNames($app);
+    // Find a name that is not used by any other inline script
+    while (names.includes(newScriptPath)) {
+        newScriptPath = `Background Script ${++index}`;
+    }
+    if (!$app.hiddenInlineScripts) {
+        $app.hiddenInlineScripts = [];
     }
+    $app.hiddenInlineScripts.push({
+        name: newScriptPath,
+        inlineScript: undefined,
+        fields: {}
+    });
+    $app.hiddenInlineScripts = $app.hiddenInlineScripts;
+    selectScript(`bg_${$app.hiddenInlineScripts.length - 1}`);
 }
 </script>
 
-<div class="min-h-full flex flex-col gap-4">
-	<PanelSection title="Inline scripts" smallPadding>
-		<div class="flex flex-col gap-2 w-full">
-			{#if runnables.inline.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each runnables.inline as { name, id }, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === id ? 'border-blue-500 border' : ''
-							)},"
-							on:click={() => selectInlineScript(id)}
-						>
-							<span class="text-xs truncate">{name}</span>
-							<div>
-								<Badge color="dark-indigo">{id}</Badge>
-							</div>
-						</div>
-					{/each}
-				</div>
-			{/if}
+<PanelSection title="Runnables" smallPadding>
+	<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 ">
+						{#each runnables.inline as { name, id }, index (index)}
+							<button
+								id={PREFIX + id}
+								class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{name}</span>
+								<div>
+									<Badge color="dark-indigo">{id}</Badge>
+								</div>
+							</button>
+						{/each}
+					</div>
+				{/if}
+				{#if $app.unusedInlineScripts?.length > 0}
+					<div class="flex gap-1 flex-col ">
+						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+							{@const id = `unused-${index}`}
+							<button
+								id={PREFIX + id}
+								class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{unusedInlineScript.name}</span>
+								<Badge color="red">Detached</Badge>
+							</button>
+						{/each}
+					</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>
 
-			{#if $app.unusedInlineScripts?.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === `unused-${index}` ? 'bg-blue-100 text-blue-600' : ''
-							)},"
-							on:click={() => selectInlineScript(`unused-${index}`)}
+		<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 }, index (index)}
+						<button
+							id={PREFIX + id}
+							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							on:click={() => selectScript(id)}
 						>
-							<span class="text-xs truncate">{unusedInlineScript.name}</span>
-							<Badge color="red">Detached</Badge>
-						</div>
+							<span class="text-2xs truncate">{name}</span>
+							<Badge color="dark-indigo">{id}</Badge>
+						</button>
 					{/each}
-				</div>
-			{/if}
-
-			{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
-				<div class="text-sm text-gray-500">No inline scripts</div>
-			{/if}
+				{:else}
+					<div class="text-xs text-gray-500">No imported scripts/flows</div>
+				{/if}
+			</div>
 		</div>
-	</PanelSection>
 
-	<PanelSection title="Imported scripts" smallPadding>
-		<div class="flex flex-col gap-2 w-full">
-			{#if runnables.imported.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each runnables.imported as { name, id }, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
-							)},"
-							on:click={() => selectInlineScript(id)}
+		<div>
+			<div class="w-full flex justify-between items-center">
+				<div class="text-sm font-semibold truncate mb-1">
+					Background scripts
+					<Tooltip class="mb-0.5">
+						Background scripts are triggered upon global refresh or when their input changes. The
+						result of a background script can be shared among many components.
+					</Tooltip>
+				</div>
+				<Button
+					size="xs"
+					color="light"
+					variant="border"
+					btnClasses="!rounded-full !p-1"
+					title="Create a new background script"
+					aria-label="Create a new background script"
+					on:click={createBackgroundScript}
+				>
+					<Plus size={14} class="text-gray-500" />
+				</Button>
+			</div>
+			<div class="flex flex-col gap-1 w-full">
+				{#if $app.hiddenInlineScripts?.length > 0}
+					{#each $app.hiddenInlineScripts as { name }, index (index)}
+						{@const id = `bg_${index}`}
+						<button
+							id={PREFIX + id}
+							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							on:click={() => selectScript(id)}
 						>
-							<span class="text-xs truncate">{name}</span>
+							<span class="text-2xs truncate">{name}</span>
 							<Badge color="dark-indigo">{id}</Badge>
-						</div>
+						</button>
 					{/each}
-				</div>
-			{:else}
-				<div class="text-sm text-gray-500">No items</div>
-			{/if}
+				{:else}
+					<div class="text-xs text-gray-500">No background scripts</div>
+				{/if}
+			</div>
 		</div>
-	</PanelSection>
-</div>
+	</div>
+</PanelSection>

package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,4 +1,6 @@
-import type { AppComponent, GridItem } from "../../types";
+import type { Schema } from '../../../../common';
+import type { AppInputs } from '../../inputType';
+import type { GridItem } from '../../types';
 export interface AppScriptsList {
     inline: {
         name: string;
@@ -9,7 +11,5 @@ export interface AppScriptsList {
         id: string;
     }[];
 }
-export declare function getAppScripts(grid: GridItem[]): FilledItem<{
-    data: AppComponent;
-    id: string;
-}>;
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): Record<string, import("../../inputType").StaticAppInput>;
+export declare function getAppScripts(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): AppScriptsList;