fix hub script picker

frontend/src/lib/components/flows/content/FlowInputs.svelte

@@ -15,6 +15,7 @@
 	const dispatch = createEventDispatcher()
 	let kind: 'script' | 'failure' | 'approval' | 'trigger' = failureModule ? 'failure' : 'script'
 	let pick_existing: 'workspace' | 'hub' = 'hub'
+	let filter = ''
 </script>
 
 <div class="p-4 h-full flex flex-col">
@@ -134,8 +135,8 @@
 		</div></div
 	>
 	{#if pick_existing == 'hub'}
-		<PickHubScript {kind} on:pick />
+		<PickHubScript bind:filter {kind} on:pick />
 	{:else}
-		<WorkspaceScriptPicker {kind} on:pick />
+		<WorkspaceScriptPicker bind:filter {kind} on:pick />
 	{/if}
 </div>

frontend/src/lib/components/flows/pickers/PickHubScript.svelte

@@ -8,11 +8,11 @@
 	import { loadHubScripts } from '$lib/utils'
 
 	export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script'
+	export let filter = ''
 
 	$: items = ($hubScripts ?? []).filter((i) => i.kind === kind)
 
 	let filteredItems: (HubItem & { marked?: string })[] = []
-	let filter = ''
 	let appFilter: string | undefined = undefined
 
 	$: prefilteredItems = appFilter ? (items ?? []).filter((i) => i.app == appFilter) : items ?? []

frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
-	import type { HubItem } from './model'
 	import Fuse from 'fuse.js'
 	import { ScriptService } from '$lib/gen'
 
@@ -10,7 +9,7 @@
 	let items: Item[] = []
 
 	let filteredItems: Item[] | undefined = []
-	let itemsFilter = ''
+	export let filter = ''
 
 	const fuseOptions = {
 		includeScore: false,
@@ -18,10 +17,10 @@
 	}
 	const fuse: Fuse<Item> = new Fuse(items, fuseOptions)
 
-	$: $workspaceStore && loadItems()
+	$: $workspaceStore && kind && loadItems()
 
 	$: filteredItems =
-		itemsFilter.length > 0 && items ? fuse.search(itemsFilter).map((value) => value.item) : items
+		filter.length > 0 && items ? fuse.search(filter).map((value) => value.item) : items
 
 	async function loadItems(): Promise<void> {
 		items = await ScriptService.listScripts({ workspace: $workspaceStore!, kind })
@@ -32,8 +31,8 @@
 </script>
 
 <div class="flex flex-col min-h-0">
-	<div class="w-12/12 pb-4">
-		<input type="text" placeholder="Search script" bind:value={itemsFilter} class="search-item" />
+	<div class="w-12/12 pb-4 mt-1">
+		<input type="text" placeholder="Search script" bind:value={filter} class="text-2xl grow" />
 	</div>
 
 	{#if filteredItems}

frontend/src/routes/PickHubFlow.svelte

@@ -4,10 +4,11 @@
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import { loadHubFlows } from '$lib/utils'
 
+	export let filter = ''
+
 	type Item = { apps: string[]; summary: string }
 	let hubFlows: any[] | undefined = undefined
 	let filteredItems: (Item & { marked?: string })[] = []
-	let filter = ''
 	let appFilter: string | undefined = undefined
 
 	$: prefilteredItems = appFilter

frontend/src/routes/index.svelte

@@ -360,9 +360,9 @@
 					{/if}
 				</div>
 			{:else if tab == 'hubscripts'}
-				<PickHubScript on:pick={(e) => viewCode(e.detail)} />
+				<PickHubScript bind:filter on:pick={(e) => viewCode(e.detail)} />
 			{:else if tab == 'hubflows'}
-				<PickHubFlow on:pick={(e) => viewFlow(e.detail)} />
+				<PickHubFlow bind:filter on:pick={(e) => viewFlow(e.detail)} />
 			{/if}
 		</div>
 		<div>