windmill-components 1.56.2 → 1.57.1

package/components/flows/content/FlowEditorPanel.svelte

@@ -4,6 +4,7 @@ import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
 import { flowStore } from '../flowStore';
+import FlowConstants from './FlowConstants.svelte';
 export let initialPath;
 const { selectedId } = getContext('FlowEditorContext');
 </script>
@@ -12,6 +13,8 @@ const { selectedId } = getContext('FlowEditorContext');
 	<FlowSettings {initialPath} />
 {:else if $selectedId === 'inputs'}
 	<FlowInput />
+{:else if $selectedId === 'constants'}
+	<FlowConstants />
 {:else if $selectedId === 'failure'}
 	<FlowFailureModule />
 {:else}

package/components/flows/content/FlowInputs.svelte

@@ -62,7 +62,7 @@ let filter = '';
 		>
 	{/if}
 	<h3 class="pb-2 pt-4">
-		Inline new <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script
+		Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
 		<Tooltip>
 			Embed a script directly inside a flow instead of saving the script into your workspace for
 			reuse. You can always save an inline script to your workspace later.
@@ -141,7 +141,7 @@ let filter = '';
 	</div>
 
 	<h3 class="mb-2 mt-6"
-		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script</h3
+		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
 	>
 	{#if pick_existing == 'hub'}
 		<PickHubScript bind:filter {kind} on:pick>

package/components/flows/content/FlowModuleComponent.svelte

@@ -13,7 +13,7 @@ import FlowModuleHeader from './FlowModuleHeader.svelte';
 import { flowStateStore } from '../flowState';
 import { schemaToObject, scriptLangToEditorLang } from '../../../utils';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import { afterUpdate, getContext, setContext } from 'svelte';
+import { afterUpdate, getContext } from 'svelte';
 import { loadSchemaFromModule } from '../utils';
 import FlowModuleScript from './FlowModuleScript.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
@@ -159,6 +159,9 @@ afterUpdate(() => {
 										modulePreview?.runTestWithStepArgs()
 									}}
 									on:change={async (event) => {
+										if (flowModule.value.type === 'rawscript') {
+											flowModule.value.content = event.detail
+										}
 										await reload(flowModule)
 									}}
 									formatAction={() => reload(flowModule)}

package/components/flows/content/FlowModuleHeader.svelte

@@ -1,41 +1,59 @@
 <script>import Button from '../../common/button/Button.svelte';
-import { classNames } from '../../../utils';
-import { faBed, faCodeBranch, faSave, faStop } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faSave } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
-import { PhoneIncoming, Repeat } from 'lucide-svelte';
+import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte';
+import Popover from '../../Popover.svelte';
 export let module;
 const dispatch = createEventDispatcher();
-let width = 0;
 $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 </script>
 
-<div class="flex flex-row space-x-2" bind:clientWidth={width}>
+<div class="flex flex-row space-x-2">
 	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
-		<button
-			class={classNames('badge', module.stop_after_if ? 'badge-on' : 'badge-off')}
-			on:click={() => dispatch('toggleStopAfterIf')}
-		>
-			<Icon data={faStop} scale={0.8} />
-		</button>
-		<button
-			class={classNames('badge', moduleRetry ? 'badge-on' : 'badge-off', 'center-center')}
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2 
+			{moduleRetry
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
 			on:click={() => dispatch('toggleRetry')}
 		>
 			<Repeat size={14} />
-		</button>
-		<button
-			class={classNames('badge', Boolean(module.sleep) ? 'badge-on' : 'badge-off')}
-			on:click={() => dispatch('toggleSleep')}
+			<svelte:fragment slot="text">Retries</svelte:fragment>
+		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2
+			{module.stop_after_if
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleStopAfterIf')}
 		>
-			<Icon data={faBed} scale={0.8} />
-		</button>
-		<button
-			class={classNames('badge', Boolean(module.suspend) ? 'badge-on' : 'badge-off')}
+			<Square size={14} />
+			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2 
+			{module.suspend
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
 			on:click={() => dispatch('toggleSuspend')}
 		>
 			<PhoneIncoming size={14} />
-		</button>
+			<svelte:fragment slot="text">Suspend</svelte:fragment>
+		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2
+			{module.sleep
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleSleep')}
+		>
+			<Bed size={14} />
+			<svelte:fragment slot="text">Sleep</svelte:fragment>
+		</Popover>
 	{/if}
 	{#if module.value.type === 'script'}
 		<div class="w-2" />
@@ -64,69 +82,3 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		</Button>
 	{/if}
 </div>
-
-<style>
-	.badge {
-
-    display: flex;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    white-space: nowrap;
-
-    border-radius: 0.25rem;
-
-    border-width: 1px;
-
-    padding-left: 0.625rem;
-
-    padding-right: 0.625rem;
-
-    padding-top: 0.125rem;
-
-    padding-bottom: 0.125rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500
-}
-
-	.badge-on {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(30 64 175 / var(--tw-text-opacity))
-}
-
-	.badge-on:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
-}
-
-	.badge-off {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(31 41 55 / var(--tw-text-opacity))
-}
-
-	.badge-off:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
-}</style>

package/components/flows/content/FlowModuleHeader.svelte.d.ts

@@ -5,10 +5,10 @@ declare const __propDef: {
         module: FlowModule;
     };
     events: {
-        toggleStopAfterIf: CustomEvent<any>;
         toggleRetry: CustomEvent<any>;
-        toggleSleep: CustomEvent<any>;
+        toggleStopAfterIf: CustomEvent<any>;
         toggleSuspend: CustomEvent<any>;
+        toggleSleep: CustomEvent<any>;
         fork: CustomEvent<any>;
         createScriptFromInlineScript: CustomEvent<any>;
     } & {

package/components/flows/content/FlowSettings.svelte

@@ -34,7 +34,7 @@ let topHeight = 0;
 							<input
 								type="text"
 								bind:value={$flowStore.summary}
-								placeholder="A very short summary of the flow displayed when the flow is listed"
+								placeholder="A short summary of the flow displayed when the flow is listed"
 								rows="1"
 								id="flow-summary"
 							/>

package/components/flows/flowStore.d.ts

@@ -1,6 +1,6 @@
 import type { Flow, FlowModule } from '../../gen';
 export type FlowMode = 'push' | 'pull';
 export declare const flowStore: import("svelte/store").Writable<Flow>;
-export declare function dfs(modules: FlowModule[]): string[];
+export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[];
 export declare function initFlow(flow: Flow): Promise<void>;
 export declare function copyFirstStepSchema(): Promise<void>;

package/components/flows/flowStore.js

@@ -11,23 +11,23 @@ export const flowStore = writable({
     archived: false,
     extra_perms: {}
 });
-export function dfs(modules) {
+export function dfs(modules, f) {
     let result = [];
     for (const module of modules) {
         if (module.value.type == 'forloopflow') {
-            result = result.concat(module.id);
-            result = result.concat(dfs(module.value.modules));
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.modules, f));
         }
         else if (module.value.type == 'branchone') {
-            result = result.concat(module.id);
-            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat().concat(module.value.default)));
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat().concat(module.value.default), f));
         }
         else if (module.value.type == 'branchall') {
-            result = result.concat(module.id);
-            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat()));
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat(), f));
         }
         else {
-            result.push(module.id);
+            result.push(f(module));
         }
     }
     return result;

package/components/flows/header/FlowImportExportMenu.svelte

@@ -23,7 +23,7 @@ let jsonViewerDrawer;
 </div>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+	<DrawerContent title="OpenFlow JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		{#if $flowStore}
 			<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
 		{/if}

package/components/flows/header/FlowPreviewButtons.svelte

@@ -20,7 +20,8 @@ $: upToDisabled =
             'settings-graph',
             'inputs',
             'schedules',
-            'failure'
+            'failure',
+            'constants'
         ].includes($selectedId) ||
         $selectedId?.includes('branch');
 let is_owner = false;

package/components/flows/map/FlowConstantsItem.svelte

@@ -0,0 +1,13 @@
+<script>import { getContext } from 'svelte';
+import { classNames } from '../../../utils';
+import { DollarSign } from 'lucide-svelte';
+const { select, selectedId } = getContext('FlowEditorContext');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+</script>
+
+<button on:click={() => select('constants')} class={settingsClass}>
+	<DollarSign size={16} />
+	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
+		All Static Inputs
+	</span>
+</button>

package/components/flows/map/FlowConstantsItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowConstantsItemProps = typeof __propDef.props;
+export type FlowConstantsItemEvents = typeof __propDef.events;
+export type FlowConstantsItemSlots = typeof __propDef.slots;
+export default class FlowConstantsItem extends SvelteComponentTyped<FlowConstantsItemProps, FlowConstantsItemEvents, FlowConstantsItemSlots> {
+}
+export {};

package/components/flows/map/FlowInputsItem.svelte

@@ -1,13 +1,12 @@
 <script>import { getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import Icon from 'svelte-awesome';
-import { faFlagCheckered, faPen } from '@fortawesome/free-solid-svg-icons';
+import { faFlagCheckered } from '@fortawesome/free-solid-svg-icons';
 const { select, selectedId } = getContext('FlowEditorContext');
 </script>
 
 <FlowModuleSchemaItem
 	on:click={() => select('inputs')}
-	isFirst
 	hasLine
 	selected={$selectedId === 'inputs'}
 	bold

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,10 +1,9 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
-import { PhoneIncoming, Repeat } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+import { Bed, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
 export let isFirst = false;
 export let isLast = false;
 export let hasLine = true;
@@ -40,39 +39,52 @@ const dispatch = createEventDispatcher();
 		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
 			{#if retry}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
 						<Repeat size={14} />
 					</div>
-					<span slot="text">Retries</span>
+					<svelte:fragment slot="text">Retries</svelte:fragment>
 				</Popover>
 			{/if}
 			{#if earlyStop}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1">
-						<Icon scale={0.8} data={faStop} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<Square size={14} />
 					</div>
-					<span slot="text">Early Stop/Break</span>
+					<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 				</Popover>
 			{/if}
-			{#if sleep}
+			{#if suspend}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1">
-						<Icon scale={0.8} data={faBed} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<PhoneIncoming size={14} />
 					</div>
-					<span slot="text">Sleep</span>
+					<svelte:fragment slot="text">Suspend</svelte:fragment>
 				</Popover>
 			{/if}
-			{#if suspend}
+			{#if sleep}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1 center-center">
-						<PhoneIncoming size={12} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<Bed size={14} />
 					</div>
-					<span slot="text">Suspend</span>
+					<svelte:fragment slot="text">Sleep</svelte:fragment>
 				</Popover>
 			{/if}
 		</div>
 		<div
-			class="flex justify-between items-center w-full overflow-hidden rounded-sm border border-gray-400 p-2 bg-white text-2xs module"
+			class="flex justify-between items-center w-full overflow-hidden rounded-sm 
+			border border-gray-400 p-2 bg-white text-2xs module"
 		>
 			{#if $$slots.icon}
 				<slot name="icon" />
@@ -85,16 +97,13 @@ const dispatch = createEventDispatcher();
 				{/if}
 				{#if deletable}
 					<button
-						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center bg-white {selected
-							? ''
-							: '!hidden'}"
+						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center 
+						border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+						hover:border-red-700 {selected ? '' : '!hidden'}"
 						on:click={(event) => dispatch('delete', event)}
-						><Icon
-							data={faTimesCircle}
-							class="text-gray-600 hover:text-red-600"
-							scale={0.9}
-						/></button
 					>
+						<X size={12} strokeWidth={2} />
+					</button>
 				{/if}
 			</div>
 		</div>

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -9,10 +9,14 @@ import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowInputsItem from './FlowInputsItem.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
 import { slide } from 'svelte/transition';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import { Icon } from 'svelte-awesome';
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
+import FlowConstantsItem from './FlowConstantsItem.svelte';
 export let root = false;
 export let modules;
 let indexToRemove = undefined;
-const { select } = getContext('FlowEditorContext');
+const { select, selectedId } = getContext('FlowEditorContext');
 async function insertNewModuleAtIndex(index, kind) {
     await idMutex.runExclusive(async () => {
         var module = emptyModule(kind == 'flow');
@@ -85,12 +89,13 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 <div class="flex flex-col h-full relative">
 	{#if root}
 		<div
-			class="z-10 sticky top-0 bg-gray-50 flex-initial inline-flex px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+			class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
 		>
 			<FlowSettingsItem />
+			<FlowConstantsItem />
 		</div>
 	{/if}
-	<ul class="w-full flex-auto   {root ? 'px-2 pb-2 pt-3' : ''} py-1">
+	<ul class="w-full flex-auto {root ? 'px-2 pb-2 pt-3' : ''} py-1">
 		{#if root}
 			<li>
 				<FlowInputsItem />
@@ -139,5 +144,6 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 			removeAtIndex(indexToRemove)
 			indexToRemove = undefined
 		}
+		$selectedId = 'settings-graph'
 	}}
 />

package/components/flows/map/FlowSettingsItem.svelte

@@ -1,23 +1,21 @@
 <script>import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { faCalendarAlt, faSliders } from '@fortawesome/free-solid-svg-icons';
 import { classNames } from '../../../utils';
 import { Badge } from '../../common';
 import { flowStore } from '../flowStore';
-const { select, selectedId, schedule } = getContext('FlowEditorContext');
+import { SlidersHorizontal } from 'lucide-svelte';
+const { select, selectedId } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
     ? 'outline outline-offset-1 outline-2  outline-slate-900'
     : '');
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => select('settings-metadata')} class={settingsClass}>
-	<Icon data={faSliders} class="mr-2" />
-	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate">
+<button on:click={() => select('settings-metadata')} class={settingsClass}>
+	<SlidersHorizontal size={16} />
+	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		Settings
 
 		{#if $flowStore.value.same_worker}
 			<Badge color="blue" baseClass="truncate">./shared</Badge>
 		{/if}
 	</span>
-</div>
+</button>

package/components/flows/pickers/PickHubScript.svelte

@@ -82,6 +82,6 @@ const maxItems = 40;
 	{/if}
 {:else}
 	{#each Array(10).fill(0) as _}
-		<Skeleton layout={[[4], 0.5]} />
+		<Skeleton layout={[0.5, [4]]} />
 	{/each}
 {/if}

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -3,6 +3,7 @@
 
 <script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
 import PropPickerResult from '../../propertyPicker/PropPickerResult.svelte';
+import { clickOutside } from '../../../utils';
 import { createEventDispatcher, setContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
@@ -28,34 +29,44 @@ setContext('PropPickerWrapper', {
 });
 </script>
 
-<Splitpanes>
-	<Pane minSize={20} size={60} class="relative p-4 !transition-none">
-		<slot />
-	</Pane>
-	<Pane minSize={20} size={40} class="py-2 relative !transition-none">
-		{#if result}
-			<PropPickerResult
-				{result}
-				on:select={({ detail }) => {
-					dispatch('select', detail)
-					if ($propPickerConfig?.onSelect(detail)) {
-						propPickerConfig.set(undefined)
-					}
-				}}
-			/>
-		{:else if pickableProperties}
-			<PropPicker
-				{displayContext}
-				{error}
-				{pickableProperties}
-				{notSelectable}
-				on:select={({ detail }) => {
-					dispatch('select', detail)
-					if ($propPickerConfig?.onSelect(detail)) {
-						propPickerConfig.set(undefined)
-					}
-				}}
-			/>
-		{/if}
-	</Pane>
-</Splitpanes>
+<div
+	class="h-full w-full"
+	use:clickOutside
+	on:click_outside={() => propPickerConfig.set(undefined)}
+>
+	<Splitpanes>
+		<Pane minSize={20} size={60} class="relative p-4 !transition-none">
+			<slot />
+		</Pane>
+		<Pane
+			minSize={20}
+			size={40}
+			class="pt-2 relative !transition-none {$propPickerConfig ? 'border-2 border-blue-500' : ''}"
+		>
+			{#if result}
+				<PropPickerResult
+					{result}
+					on:select={({ detail }) => {
+						dispatch('select', detail)
+						if ($propPickerConfig?.onSelect(detail)) {
+							propPickerConfig.set(undefined)
+						}
+					}}
+				/>
+			{:else if pickableProperties}
+				<PropPicker
+					{displayContext}
+					{error}
+					{pickableProperties}
+					{notSelectable}
+					on:select={({ detail }) => {
+						dispatch('select', detail)
+						if ($propPickerConfig?.onSelect(detail)) {
+							propPickerConfig.set(undefined)
+						}
+					}}
+				/>
+			{/if}
+		</Pane>
+	</Splitpanes>
+</div>

package/components/home/ItemsList.svelte

@@ -167,8 +167,8 @@ $: items && resetScroll();
 />
 
 <CenteredPage>
-	<div class="flex flex-col md:flex-row gap-2 items-center sm:justify-between w-full">
-		<div>
+	<div class="flex flex-wrap gap-2 items-center justify-between w-full">
+		<div class="flex justify-start">
 			<ToggleButtonGroup bind:selected={itemKind}>
 				<ToggleButton light position="left" value="all" size="sm">All</ToggleButton>
 				<ToggleButton light position="center" value="script" size="sm">
@@ -192,7 +192,7 @@ $: items && resetScroll();
 			</ToggleButtonGroup>
 		</div>
 
-		<div class="relative text-gray-600 w-full">
+		<div class="relative text-gray-600 grow min-w-[100px]">
 			<!-- svelte-ignore a11y-autofocus -->
 			<input
 				autofocus
@@ -236,7 +236,7 @@ $: items && resetScroll();
 		{:else}
 			<div class="border rounded-md divide-y divide-gray-200 mb-80">
 				<!-- <VirtualList {items} let:item bind:start bind:end> -->
-				{#each items ?? [] as item, i (item.type + '/' + item.path)}
+				{#each items ?? [] as item, i (item.type + '/' + item.path + (item.summary ?? ''))}
 					{#if item.type == 'script'}
 						<ScriptRow
 							starred={item.starred ?? false}
@@ -261,6 +261,8 @@ $: items && resetScroll();
 							marked={item.marked}
 							on:change={loadApps}
 							app={item}
+							{moveDrawer}
+							{shareModal}
 						/>
 					{/if}
 				{/each}