From 77c2d2fa843adac32dd901d67880b93fd2637ab2 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 19 Jun 2025 17:49:53 +0200
Subject: [PATCH] Remove last SelectLegacy (#6003)

* Replace SelectLegacy in AppPicker

* Better DynSelect

* remove select legacy

* fix unknown values not displayed

* undo tsconfig change

* better dyn select search

* index js remove

* use bindable defaults
---
 frontend/src/lib/components/DynSelect.svelte  |  162 +--
 .../svelte-select/lib/SelectLegacy.svelte     | 1043 -----------------
 .../apps/svelte-select/lib/index.js           |    1 -
 .../lib/components/select/MultiSelect.svelte  |    2 +-
 .../src/lib/components/select/Select.svelte   |   19 +-
 .../components/select/SelectDropdown.svelte   |    2 +-
 .../lib/components/wizards/AppPicker.svelte   |   39 +-
 frontend/src/lib/utils.ts                     |   10 +-
 8 files changed, 92 insertions(+), 1186 deletions(-)
 delete mode 100644 frontend/src/lib/components/apps/svelte-select/lib/SelectLegacy.svelte
 delete mode 100644 frontend/src/lib/components/apps/svelte-select/lib/index.js

diff --git a/frontend/src/lib/components/DynSelect.svelte b/frontend/src/lib/components/DynSelect.svelte
index 0241ab90f5..93a3bf0ed3 100644
--- a/frontend/src/lib/components/DynSelect.svelte
+++ b/frontend/src/lib/components/DynSelect.svelte
@@ -1,26 +1,4 @@
-<script lang="ts">
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
-	import type { Script } from '$lib/gen'
-	import { deepEqual } from 'fast-equals'
-	import SelectLegacy from './apps/svelte-select/lib/SelectLegacy.svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
-	import ResultJobLoader from './ResultJobLoader.svelte'
-	import Tooltip from './Tooltip.svelte'
-	import { Loader2 } from 'lucide-svelte'
-	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
-
-	export let value: any = undefined
-	export let helperScript:
-		| { type: 'inline'; path?: string; lang: Script['language']; code: string }
-		| { type: 'hash'; hash: string }
-		| undefined = undefined
-	export let entrypoint: string
-	export let args: Record<string, any> = {}
-	export let name: string
-
-	let darkMode: boolean = false
-
-	let rawCode = JSON.stringify(value, null, 2)
+<script lang="ts" module>
 	function validSelectObject(x): string | undefined {
 		if (typeof x != 'object') {
 			return JSON.stringify(x) + ' is not an object'
@@ -34,115 +12,105 @@
 		}
 		return
 	}
-	async function getItemsFromOptions(text: string) {
-		return new Promise((resolve, reject) => {
+</script>
+
+<script lang="ts">
+	import type { Script } from '$lib/gen'
+	import { usePromise } from '$lib/svelte5Utils.svelte'
+	import { deepEqual } from 'fast-equals'
+	import ResultJobLoader from './ResultJobLoader.svelte'
+	import Select from './select/Select.svelte'
+	import Tooltip from './Tooltip.svelte'
+	import { Loader2 } from 'lucide-svelte'
+	import { untrack } from 'svelte'
+	import { readFieldsRecursively } from '$lib/utils'
+
+	interface Props {
+		value?: any
+		helperScript?:
+			| { type: 'inline'; path?: string; lang: Script['language']; code: string }
+			| { type: 'hash'; hash: string }
+		entrypoint: string
+		args?: Record<string, any>
+		name: string
+	}
+
+	let { value = $bindable(), helperScript, entrypoint, args: _args, name }: Props = $props()
+
+	let args = $state(structuredClone($state.snapshot(_args)))
+	$effect(() => {
+		readFieldsRecursively(_args, { excludeField: [name] })
+		untrack(() => !deepEqual(args, _args) && (args = $state.snapshot(_args)))
+	})
+
+	async function getItemsFromOptions() {
+		return new Promise<{ label: string; value: any }[]>((resolve, reject) => {
 			let cb = {
 				done(res) {
 					if (!res || !Array.isArray(res)) {
 						reject('Result was not an array')
 						return
 					}
-					if (res.length == 0) {
-						resolve([])
-					}
-
+					if (res.length == 0) resolve([])
 					if (res.every((x) => typeof x == 'string')) {
-						res = res.map((x) => ({
-							label: x,
-							value: x
-						}))
+						res = res.map((x) => ({ label: x, value: x }))
 					} else if (res.find((x) => validSelectObject(x) != undefined)) {
 						reject(validSelectObject(res.find((x) => validSelectObject(x) != undefined)))
 					} else {
-						if (text != undefined && text != '') {
-							res = res.filter((x) => x['label'].includes(text))
-						}
+						if (filterText != undefined && filterText != '')
+							res = res.filter((x) => x['label'].includes(filterText))
 						resolve(res)
 					}
 				},
-				cancel() {
-					reject()
-				},
-				error(err) {
-					reject(err)
-				}
+				cancel: () => reject(),
+				error: (err) => reject(err)
 			}
 			helperScript?.type == 'inline'
 				? resultJobLoader?.runPreview(
 						helperScript?.path ?? 'NO_PATH',
 						helperScript.code,
 						helperScript.lang,
-						{ ...args, text, _ENTRYPOINT_OVERRIDE: entrypoint },
+						{ ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint },
 						undefined,
 						cb
 					)
 				: resultJobLoader?.runScriptByHash(
 						helperScript?.hash ?? 'NO_HASH',
-						{
-							...args,
-							text,
-							_ENTRYPOINT_OVERRIDE: entrypoint
-						},
+						{ ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint },
 						cb
 					)
 		})
 	}
 
-	let lastArgs = structuredClone({ ...stateSnapshot(args), [name]: undefined })
-	$: (entrypoint || helperScript) && refreshOptions()
+	let _items = usePromise(getItemsFromOptions)
+	let items = $derived(_items.value)
+	$effect(() => {
+		;[args, name, entrypoint, helperScript, filterText]
+		untrack(() => _items.refresh())
+	})
 
-	$: args && changeArgs()
-
-	let timeout: NodeJS.Timeout | undefined = undefined
-	function changeArgs() {
-		timeout && clearTimeout(timeout)
-		timeout = setTimeout(() => {
-			let argsWithoutSelf = { ...stateSnapshot(args), [name]: undefined }
-			if (deepEqual(argsWithoutSelf, lastArgs)) {
-				return
-			}
-			refreshOptions()
-			lastArgs = structuredClone(argsWithoutSelf)
-			timeout = undefined
-		}, 1000)
-	}
-
-	function refreshOptions() {
-		error = undefined
-		renderCount += 1
-	}
-
-	let error: string | undefined = undefined
-	let resultJobLoader: ResultJobLoader
-	let renderCount = 0
+	let resultJobLoader: ResultJobLoader | undefined = $state()
+	let filterText: string = $state('')
+	let open: boolean = $state(false)
 </script>
 
 {#if helperScript}
-	<DarkModeObserver bind:darkMode />
 	<ResultJobLoader bind:this={resultJobLoader} />
 
 	<div class="w-full flex-col flex">
-		<div class="w-full">
-			{#key renderCount}
-				<SelectLegacy
-					on:error={(e) => {
-						error = e.detail.details
-					}}
-					on:change={(e) => {
-						value = e.detail.value
-					}}
-					{value}
-					computeOnClick={value == undefined}
-					loadOptions={getItemsFromOptions}
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-					containerStyles={darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-				/>
-			{/key}
-		</div>
-		{#if error}
-			<div class="text-red-400 text-2xs">error: <Tooltip>{JSON.stringify(error)}</Tooltip></div>
+		<Select
+			bind:value
+			bind:open
+			{items}
+			bind:filterText
+			loading={!open && _items.status === 'loading'}
+			clearable
+			noItemsMsg={_items.status === 'loading' ? 'Loading...' : 'No items found'}
+		/>
+		{#if _items.error}
+			<div class="text-red-400 text-2xs">
+				error: <Tooltip>{JSON.stringify(_items.error)}</Tooltip>
+			</div>
 		{/if}
 	</div>
 {:else}
@@ -153,7 +121,7 @@
 		{#await import('$lib/components/JsonEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
-			<Module.default code={rawCode} bind:value />
+			<Module.default code={JSON.stringify(value, null, 2)} bind:value />
 		{/await}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/SelectLegacy.svelte b/frontend/src/lib/components/apps/svelte-select/lib/SelectLegacy.svelte
deleted file mode 100644
index 201a4ab7d7..0000000000
--- a/frontend/src/lib/components/apps/svelte-select/lib/SelectLegacy.svelte
+++ /dev/null
@@ -1,1043 +0,0 @@
-<script lang="ts">
-	// @ts-nocheck
-	import { beforeUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
-	import { offset, flip, shift } from '@floating-ui/dom'
-	import { createFloatingActions } from 'svelte-floating-ui'
-
-	// This component caused trouble with svelte 5 so better be extra safe
-	const dispatch = createDispatcherIfMounted(createEventDispatcher())
-
-	import _filter from './filter'
-	import _getItems from './get-items'
-
-	import ChevronIcon from './ChevronIcon.svelte'
-	import ClearIcon from './ClearIcon.svelte'
-	import LoadingIcon from './LoadingIcon.svelte'
-	import ConditionalPortal from './ConditionalPortal.svelte'
-	import ConditionalPortalGlobal from './ConditionalPortalGlobal.svelte'
-
-	import { extractCustomProperties, truncate } from '$lib/utils'
-	import { twMerge } from 'tailwind-merge'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
-
-	export let portal = true
-
-	export let justValue: any = null // read-only
-
-	export let inAppEditor = false
-
-	let PortalWrapper = inAppEditor ? ConditionalPortal : ConditionalPortalGlobal
-
-	export let filter: (args: any) => any[] = _filter
-	export let getItems = _getItems
-
-	export let id = null
-	export let name = null
-	export let container = undefined
-	export let input = undefined
-
-	export let disabled = false
-	export let focused = false
-	export let value: any = undefined
-	export let filterText = ''
-	export let placeholder = 'Please select'
-	export let items: { label: string | undefined; value: any }[] | any[] | string[] | undefined =
-		undefined
-	export let label = 'label'
-	export let itemFilter = (label, filterText, option) =>
-		`${label}`.toLowerCase().includes(filterText.toLowerCase())
-	export let groupBy: ((item: any) => string) | undefined = undefined
-	export let groupFilter = (groups) => groups
-	export let groupHeaderSelectable = false
-	export let itemId = 'value'
-	export let loadOptions: ((string) => Promise<any>) | undefined = undefined
-	export let containerStyles = ''
-	export let hasError = false
-	export let filterSelectedItems = true
-	export let required = false
-	export let closeListOnChange = true
-	export let computeOnClick = false
-
-	export let createGroupHeaderItem = (groupValue, item) => {
-		return {
-			value: groupValue,
-			[label]: groupValue
-		}
-	}
-
-	export const getFilteredItems = () => {
-		return filteredItems
-	}
-
-	export let searchable = true
-	export let inputStyles = ''
-	export let clearable = true
-	export let loading = false
-	export let listOpen = false
-
-	let timeout
-	export let debounce = (fn, wait = 1) => {
-		clearTimeout(timeout)
-		timeout = setTimeout(fn, wait)
-	}
-
-	export let debounceWait = 300
-	export let hideEmptyState = false
-	export let inputAttributes = {}
-	export let listAutoWidth = true
-	export let showChevron = false
-	export let listOffset = 5
-	export let hoverItemIndex = 0
-	export let floatingConfig = {}
-
-	export { containerClasses as class }
-
-	let containerClasses = ''
-	let activeValue
-	let prev_value
-	let prev_filterText
-	let hasClicked = false
-
-	function setValue() {
-		if (typeof value === 'string') {
-			let item = (items || []).find((item) => item[itemId] === value)
-			value = item || {
-				[itemId]: value,
-				label: value
-			}
-		}
-	}
-
-	let _inputAttributes
-	function assignInputAttributes() {
-		_inputAttributes = Object.assign(
-			{
-				autocapitalize: 'none',
-				autocomplete: 'off',
-				autocorrect: 'off',
-				spellcheck: false,
-				tabindex: 0,
-				type: 'text',
-				'aria-autocomplete': 'list'
-			},
-			inputAttributes
-		)
-
-		if (id) {
-			_inputAttributes['id'] = id
-		}
-
-		if (!searchable) {
-			_inputAttributes['readonly'] = true
-		}
-	}
-
-	function convertStringItemsToObjects(_items) {
-		return _items.map((item, index) => {
-			return {
-				index,
-				value: item,
-				label: `${item}`
-			}
-		})
-	}
-
-	function filterGroupedItems(_items) {
-		const groupValues = []
-		const groups = {}
-
-		_items.forEach((item) => {
-			const groupValue = groupBy(item)
-
-			if (!groupValues.includes(groupValue)) {
-				groupValues.push(groupValue)
-				groups[groupValue] = []
-
-				if (groupValue) {
-					groups[groupValue].push(
-						Object.assign(createGroupHeaderItem(groupValue, item), {
-							id: groupValue,
-							groupHeader: true,
-							selectable: groupHeaderSelectable
-						})
-					)
-				}
-			}
-
-			groups[groupValue].push(Object.assign({ groupItem: !!groupValue }, item))
-		})
-
-		const sortedGroupedItems = []
-
-		groupFilter(groupValues).forEach((groupValue) => {
-			if (groups[groupValue]) sortedGroupedItems.push(...groups[groupValue])
-		})
-
-		return sortedGroupedItems
-	}
-
-	function dispatchSelectedItem() {
-		if (!prev_value || JSON.stringify(value[itemId]) !== JSON.stringify(prev_value[itemId])) {
-			dispatch('input', value)
-		}
-	}
-
-	$: if ((items, value)) setValue()
-	$: if (inputAttributes || !searchable) assignInputAttributes()
-	$: if (value) dispatchSelectedItem()
-	$: if (!focused && input) closeList()
-	$: if (filterText !== prev_filterText) setupFilterText()
-	$: if (listOpen && value && filteredItems) setValueIndexAsHoverIndex()
-	$: dispatchHover(hoverItemIndex)
-
-	function setValueIndexAsHoverIndex() {
-		const valueIndex = filteredItems.findIndex((i) => {
-			return i[itemId] === value[itemId]
-		})
-
-		checkHoverSelectable(valueIndex, true)
-	}
-
-	function dispatchHover(i) {
-		dispatch('hoverItem', i)
-	}
-
-	function checkHoverSelectable(startingIndex = 0, ignoreGroup) {
-		hoverItemIndex = startingIndex < 0 ? 0 : startingIndex
-		if (
-			!ignoreGroup &&
-			groupBy &&
-			filteredItems[hoverItemIndex] &&
-			!filteredItems[hoverItemIndex].selectable
-		) {
-			setHoverIndex(1)
-		}
-	}
-
-	function setupFilterText() {
-		if (computeOnClick && !hasClicked) return
-		if (!loadOptions && filterText.length === 0) return
-
-		if (loadOptions) {
-			debounce(async function () {
-				loading = true
-				let res = await getItems({
-					dispatch,
-					loadOptions,
-					convertStringItemsToObjects,
-					filterText
-				})
-
-				if (res) {
-					loading = res.loading
-					listOpen = listOpen ? res.listOpen : filterText.length > 0 ? true : false
-					focused = listOpen && res.focused
-					items = groupBy ? filterGroupedItems(res.filteredItems) : res.filteredItems
-				} else {
-					loading = false
-					focused = true
-					listOpen = true
-				}
-			}, debounceWait)
-		} else {
-			listOpen = true
-		}
-	}
-
-	$: hasValue = value
-	$: hideSelectedItem = hasValue && filterText.length > 0
-	$: showClear = hasValue && clearable && !disabled && !loading
-	$: placeholderText = value ? '' : placeholder
-	$: ariaSelection = value ? handleAriaSelection() : ''
-	$: ariaContext = handleAriaContent({ filteredItems, hoverItemIndex, focused, listOpen })
-	$: updateValueDisplay(items)
-	$: justValue = computeJustValue(value, itemId)
-	$: if (prev_value && !value) dispatch('input', value)
-	$: filteredItems = filter({
-		loadOptions,
-		filterText,
-		items,
-		value,
-		itemId,
-		groupBy,
-		label,
-		filterSelectedItems,
-		itemFilter,
-		convertStringItemsToObjects,
-		filterGroupedItems
-	})
-	$: if (listOpen && filteredItems && !value) checkHoverSelectable()
-	$: handleFilterEvent(filteredItems)
-
-	$: if (container && floatingConfig) floatingUpdate(Object.assign(_floatingConfig, floatingConfig))
-	$: listDom = !!list
-	$: listMounted(list, listOpen)
-	$: if (listOpen && container && list) setListWidth()
-	$: scrollToHoverItem = hoverItemIndex
-	$: if (input && listOpen && !focused) handleFocus()
-	$: if (filterText) hoverItemIndex = 0
-
-	function handleFilterEvent(items) {
-		if (listOpen) dispatch('filter', items)
-	}
-
-	beforeUpdate(async () => {
-		prev_value = value
-		prev_filterText = filterText
-	})
-
-	function computeJustValue() {
-		return value ? value[itemId] : value
-	}
-
-	function findItem(selection) {
-		let matchTo = selection ? selection[itemId] : value[itemId]
-		return items.find((item) => item[itemId] === matchTo)
-	}
-
-	function updateValueDisplay(items) {
-		if (!items || items.length === 0 || items.some((item) => typeof item !== 'object')) return
-		if (!value || !value[itemId]) return
-
-		if (Array.isArray(value)) {
-			value = value.map((selection) => findItem(selection) || selection)
-		} else {
-			value = findItem() || value
-		}
-	}
-
-	function handleKeyDown(e) {
-		if (!focused) return
-		e.stopPropagation()
-		switch (e.key) {
-			case 'Escape':
-				e.preventDefault()
-				closeList()
-				break
-			case 'Enter':
-				e.preventDefault()
-
-				if (listOpen) {
-					if (filteredItems.length === 0) break
-					const hoverItem = filteredItems[hoverItemIndex]
-
-					if (value && value[itemId] === hoverItem[itemId]) {
-						closeList()
-						break
-					} else {
-						handleSelect(filteredItems[hoverItemIndex])
-					}
-				}
-
-				break
-			case 'ArrowDown':
-				e.preventDefault()
-
-				if (listOpen) {
-					setHoverIndex(1)
-				} else {
-					listOpen = true
-					activeValue = undefined
-				}
-
-				break
-			case 'ArrowUp':
-				e.preventDefault()
-
-				if (listOpen) {
-					setHoverIndex(-1)
-				} else {
-					listOpen = true
-					activeValue = undefined
-				}
-
-				break
-			case 'Tab':
-				if (listOpen && focused) {
-					if (
-						filteredItems.length === 0 ||
-						(value && value[itemId] === filteredItems[hoverItemIndex][itemId])
-					)
-						return closeList()
-
-					e.preventDefault()
-					handleSelect(filteredItems[hoverItemIndex])
-					closeList()
-				}
-
-				break
-			case 'Backspace':
-				if (filterText.length > 0) return
-
-				break
-			case 'ArrowLeft':
-				if (!value || filterText.length > 0) return
-				if (activeValue === undefined) {
-					activeValue = value.length - 1
-				} else if (value.length > activeValue && activeValue !== 0) {
-					activeValue -= 1
-				}
-				break
-			case 'ArrowRight':
-				if (!value || filterText.length > 0 || activeValue === undefined) return
-				if (activeValue === value.length - 1) {
-					activeValue = undefined
-				} else if (activeValue < value.length - 1) {
-					activeValue += 1
-				}
-				break
-		}
-	}
-
-	function handleFocus(e) {
-		if (focused && input === document?.activeElement) return
-		if (e) dispatch('focus', e)
-		input.focus()
-		focused = true
-	}
-
-	async function handleBlur(e) {
-		if (listOpen || focused) {
-			dispatch('blur', e)
-			closeList()
-			focused = false
-			activeValue = undefined
-			input.blur()
-		}
-	}
-
-	function handleClick() {
-		if (disabled) return
-		if (computeOnClick && !hasClicked) {
-			hasClicked = true
-			setupFilterText()
-		}
-		listOpen = !listOpen
-	}
-
-	export function handleClear() {
-		dispatch('clear', value)
-		value = undefined
-		closeList()
-		handleFocus()
-	}
-
-	onMount(() => {
-		if (listOpen) focused = true
-		if (focused && input) input.focus()
-	})
-
-	function itemSelected(selection) {
-		if (selection) {
-			filterText = ''
-			const item = Object.assign({}, selection)
-
-			if (item.groupHeader && !item.selectable) return
-			value = value = item
-
-			setTimeout(() => {
-				if (closeListOnChange) closeList()
-				activeValue = undefined
-				dispatch('change', value)
-				dispatch('select', selection)
-			})
-		}
-	}
-
-	function closeList() {
-		filterText = ''
-		listOpen = false
-	}
-
-	export let ariaValues = (values) => {
-		return `Option ${values}, selected.`
-	}
-
-	export let ariaListOpen = (label, count) => {
-		return `You are currently focused on option ${label}. There are ${count} results available.`
-	}
-
-	export let ariaFocused = () => {
-		return `Select is focused, type to refine list, press down to open the menu.`
-	}
-
-	function handleAriaSelection() {
-		let selected = undefined
-		selected = value[label]
-
-		return ariaValues(selected)
-	}
-
-	function handleAriaContent() {
-		if (!filteredItems || filteredItems.length === 0) return ''
-		let _item = filteredItems[hoverItemIndex]
-		if (listOpen && _item) {
-			let count = filteredItems ? filteredItems.length : 0
-			return ariaListOpen(_item[label], count)
-		} else {
-			return ariaFocused()
-		}
-	}
-
-	let list = null
-
-	function handleClickOutside(event) {
-		if (
-			!listOpen &&
-			!focused &&
-			container &&
-			!container.contains(event.target) &&
-			!list?.contains(event.target)
-		) {
-			handleBlur()
-		}
-	}
-
-	onDestroy(() => {
-		list?.remove()
-	})
-
-	function handleSelect(item) {
-		if (!item || item.selectable === false) return
-		itemSelected(item)
-	}
-
-	function handleHover(i) {
-		hoverItemIndex = i
-	}
-
-	function handleItemClick(args) {
-		const { item, i } = args
-		if (item?.selectable === false) return
-		if (value && value[itemId] === item[itemId]) return closeList()
-		if (isItemSelectable(item)) {
-			hoverItemIndex = i
-			handleSelect(item)
-		}
-	}
-
-	function setHoverIndex(increment) {
-		let selectableFilteredItems = filteredItems.filter(
-			(item) => !Object.hasOwn(item, 'selectable') || item.selectable === true
-		)
-
-		if (selectableFilteredItems.length === 0) {
-			return (hoverItemIndex = 0)
-		}
-
-		if (increment > 0 && hoverItemIndex === filteredItems.length - 1) {
-			hoverItemIndex = 0
-		} else if (increment < 0 && hoverItemIndex === 0) {
-			hoverItemIndex = filteredItems.length - 1
-		} else {
-			hoverItemIndex = hoverItemIndex + increment
-		}
-
-		const hover = filteredItems[hoverItemIndex]
-
-		if (hover && hover.selectable === false) {
-			if (increment === 1 || increment === -1) setHoverIndex(increment)
-			return
-		}
-	}
-
-	function isItemActive(item, value, itemId) {
-		return value && value[itemId] === item[itemId]
-	}
-
-	function isItemFirst(itemIndex) {
-		return itemIndex === 0
-	}
-
-	function isItemSelectable(item) {
-		return (
-			(item.groupHeader && item.selectable) || item.selectable || !item.hasOwnProperty('selectable')
-		)
-	}
-
-	function setListWidth() {
-		const { width } = container.getBoundingClientRect()
-		list.style.width =
-			listAutoWidth && list.clientWidth && list.clientWidth < width ? width + 'px' : 'auto'
-	}
-
-	let _floatingConfig = {
-		strategy: 'absolute',
-		placement: 'bottom-start',
-		middleware: [offset(listOffset), flip(), shift()],
-		autoUpdate: false
-	}
-
-	const [floatingRef, floatingContent, floatingUpdate] = createFloatingActions(_floatingConfig)
-
-	$: if (container && floatingConfig?.autoUpdate === undefined) {
-		_floatingConfig.autoUpdate = true
-	}
-
-	let prefloat = true
-	function listMounted(list, listOpen) {
-		if (!list || !listOpen) return (prefloat = true)
-		setTimeout(() => {
-			prefloat = false
-		}, 0)
-	}
-</script>
-
-<svelte:window on:click={handleClickOutside} on:keydown={handleKeyDown} />
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	class={twMerge('svelte-select', containerClasses)}
-	class:disabled
-	class:focused
-	class:list-open={listOpen}
-	class:show-chevron={showChevron}
-	class:error={hasError}
-	style={containerStyles}
-	on:pointerup|preventDefault={handleClick}
-	on:mousedown|preventDefault
-	bind:this={container}
-	use:floatingRef
->
-	{#if listOpen}
-		<PortalWrapper condition={portal}>
-			<div
-				style={extractCustomProperties(containerStyles)}
-				use:floatingContent
-				bind:this={list}
-				class="svelte-select-list"
-				class:prefloat
-				on:pointerup|preventDefault|stopPropagation
-				on:pointerdown|preventDefault|stopPropagation
-			>
-				{#if $$slots['list-prepend']}<slot name="list-prepend" />{/if}
-				{#if $$slots.list}<slot name="list" {filteredItems} />
-				{:else if filteredItems.length > 0}
-					{#each filteredItems as item, i}
-						<div
-							on:mouseover={() => handleHover(i)}
-							on:focus={() => handleHover(i)}
-							on:click|stopPropagation={() => handleItemClick({ item, i })}
-							on:keydown|preventDefault|stopPropagation
-							class="list-item"
-							tabindex="-1"
-						>
-							<div
-								class="item"
-								class:list-group-title={item.groupHeader}
-								class:active={isItemActive(item, value, itemId)}
-								class:first={isItemFirst(i)}
-								class:hover={hoverItemIndex === i}
-								class:group-item={item.groupItem}
-								class:not-selectable={item?.selectable === false}
-							>
-								<slot name="item" {item} index={i}>
-									{item ? truncate(item?.[label], 80) : ''}
-								</slot>
-							</div>
-						</div>
-					{/each}
-				{:else if !hideEmptyState}
-					<slot name="empty">
-						<div class="empty">No options</div>
-					</slot>
-				{/if}
-				{#if $$slots['list-append']}<slot name="list-append" />{/if}
-			</div>
-		</PortalWrapper>
-	{/if}
-
-	<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="a11y-text">
-		{#if focused}
-			<span id="aria-selection">{ariaSelection}</span>
-			<span id="aria-context">
-				{ariaContext}
-			</span>
-		{/if}
-	</span>
-
-	<div class="prepend">
-		<slot name="prepend" />
-	</div>
-
-	<div class="value-container">
-		{#if hasValue}
-			<div class="selected-item" class:hide-selected-item={hideSelectedItem}>
-				<slot name="selection" selection={value}>
-					{value[label]}
-				</slot>
-			</div>
-		{/if}
-
-		<input
-			on:keydown={handleKeyDown}
-			on:blur={handleBlur}
-			on:focus={handleFocus}
-			readOnly={!searchable}
-			{..._inputAttributes}
-			bind:this={input}
-			bind:value={filterText}
-			placeholder={placeholderText}
-			style={inputStyles}
-		/>
-	</div>
-
-	<div class="indicators">
-		{#if loading}
-			<div class="icon loading" aria-hidden="true">
-				<slot name="loading-icon">
-					<LoadingIcon />
-				</slot>
-			</div>
-		{/if}
-
-		{#if showClear}
-			<button type="button" class="icon clear-select" on:click|stopPropagation={handleClear}>
-				<slot name="clear-icon">
-					<ClearIcon />
-				</slot>
-			</button>
-		{/if}
-
-		{#if showChevron}
-			<div class="icon chevron" aria-hidden="true">
-				<slot name="chevron-icon" {listOpen}>
-					<ChevronIcon />
-				</slot>
-			</div>
-		{/if}
-	</div>
-
-	<slot name="input-hidden" {value}>
-		<input {name} type="hidden" value={value ? JSON.stringify(value) : null} />
-	</slot>
-
-	{#if required && (!value || value.length === 0)}
-		<slot name="required" {value}>
-			<select class="required" required tabindex="-1" aria-hidden="true"></select>
-		</slot>
-	{/if}
-</div>
-
-<style>
-	.svelte-select {
-		border: var(--border, 1px solid #d8dbdf);
-		border-radius: var(--border-radius, 6px);
-		min-height: var(--height, 42px);
-		position: relative;
-		display: flex;
-		align-items: stretch;
-		padding: var(--padding, var(--internal-padding));
-		background: var(--background, #fff);
-		margin: var(--margin, 0);
-		width: var(--width, 100%);
-		font-size: var(--font-size, 16px);
-		max-height: var(--max-height);
-	}
-
-	* {
-		box-sizing: var(--box-sizing, border-box);
-	}
-
-	.svelte-select:hover {
-		border: var(--border-hover, 1px solid #b2b8bf);
-	}
-
-	.value-container {
-		display: flex;
-		flex: 1 1 0%;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 5px 10px;
-		padding: var(--value-container-padding, 5px 0);
-		position: relative;
-		overflow: var(--value-container-overflow, hidden);
-		align-self: stretch;
-		padding: 0 !important;
-	}
-
-	.prepend,
-	.indicators {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-	}
-
-	.indicators {
-		position: var(--indicators-position);
-		top: var(--indicators-top);
-		right: var(--indicators-right);
-		bottom: var(--indicators-bottom);
-	}
-
-	input {
-		position: absolute;
-		cursor: default;
-		border: none;
-		color: var(--input-color, var(--item-color));
-		padding: var(--input-padding, 0) !important;
-		letter-spacing: var(--input-letter-spacing, inherit);
-		margin: var(--input-margin, 0) !important;
-		min-width: 10px;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background: transparent !important;
-		font-size: var(--font-size, 16px);
-		border: 0 !important;
-	}
-
-	:not(.multi) > .value-container > input {
-		width: 100%;
-		height: 100%;
-	}
-
-	input::placeholder {
-		color: var(--placeholder-color, #78848f);
-		opacity: var(--placeholder-opacity, 1);
-	}
-
-	input:focus {
-		outline: none;
-	}
-
-	.svelte-select.focused {
-		border: var(--border-focused, 1px solid #006fe8);
-		border-radius: var(--border-radius-focused, var(--border-radius, 6px));
-	}
-
-	.disabled {
-		background: var(--disabled-background, #ebedef);
-		border-color: var(--disabled-border-color, #ebedef);
-		color: var(--disabled-color, #c1c6cc);
-	}
-
-	.disabled input::placeholder {
-		color: var(--disabled-placeholder-color, #c1c6cc);
-		opacity: var(--disabled-placeholder-opacity, 0.8);
-	}
-
-	.selected-item {
-		position: relative;
-		overflow: var(--selected-item-overflow, hidden);
-		padding: var(--selected-item-padding, 0 20px 0 0);
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		color: var(--selected-item-color, inherit);
-		font-size: var(--font-size, 16px);
-	}
-
-	.multi .selected-item {
-		position: absolute;
-		line-height: var(--height, 42px);
-		height: var(--height, 42px);
-	}
-
-	.selected-item:focus {
-		outline: none;
-	}
-
-	.hide-selected-item {
-		opacity: 0;
-	}
-
-	.icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.clear-select {
-		all: unset;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--clear-select-width, 40px);
-		height: var(--clear-select-height, 100%);
-		color: var(--clear-select-color, var(--icons-color));
-		margin: var(--clear-select-margin, 0);
-		pointer-events: all;
-		flex-shrink: 0;
-	}
-
-	.clear-select:focus {
-		outline: var(--clear-select-focus-outline, 1px solid #006fe8);
-	}
-
-	.loading {
-		width: var(--loading-width, 40px);
-		height: var(--loading-height);
-		color: var(--loading-color, var(--icons-color));
-		margin: var(--loading--margin, 0);
-		flex-shrink: 0;
-	}
-
-	.chevron {
-		width: var(--chevron-width, 40px);
-		height: var(--chevron-height, 40px);
-		background: var(--chevron-background, transparent);
-		pointer-events: var(--chevron-pointer-events, none);
-		color: var(--chevron-color, var(--icons-color));
-		border: var(--chevron-border, 0 0 0 1px solid #d8dbdf);
-		flex-shrink: 0;
-	}
-
-	.multi {
-		padding: var(--multi-select-padding, var(--internal-padding));
-	}
-
-	.multi input {
-		padding: var(--multi-select-input-padding, 0);
-		position: relative;
-		margin: var(--multi-select-input-margin, 5px 0);
-		flex: 1 1 40px;
-	}
-
-	.svelte-select.error {
-		border: var(--error-border, 1px solid #ff2d55);
-		background: var(--error-background, #fff);
-	}
-
-	.a11y-text {
-		z-index: 9999;
-		border: 0px;
-		clip: rect(1px, 1px, 1px, 1px);
-		height: 1px;
-		width: 1px;
-		position: absolute;
-		overflow: hidden;
-		padding: 0px;
-		white-space: nowrap;
-	}
-
-	.multi-item {
-		background: var(--multi-item-bg, #ebedef);
-		margin: var(--multi-item-margin, 0);
-		outline: var(--multi-item-outline, 1px solid #ddd);
-		border-radius: var(--multi-item-border-radius, 4px);
-		height: var(--multi-item-height, 25px);
-		line-height: var(--multi-item-height, 25px);
-		display: flex;
-		cursor: default;
-		padding: var(--multi-item-padding, 0 5px);
-		overflow: hidden;
-		gap: var(--multi-item-gap, 4px);
-		outline-offset: -1px;
-		max-width: var(--multi-max-width, none);
-		color: var(--multi-item-color, var(--item-color));
-	}
-
-	.multi-item.disabled:hover {
-		background: var(--multi-item-disabled-hover-bg, #ebedef);
-		color: var(--multi-item-disabled-hover-color, #c1c6cc);
-	}
-
-	.multi-item-text {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.multi-item-clear {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		--clear-icon-color: var(--multi-item-clear-icon-color, #000);
-	}
-
-	.multi-item.active {
-		outline: var(--multi-item-active-outline, 1px solid #006fe8);
-	}
-
-	.svelte-select-list {
-		box-shadow: var(--list-shadow, 0 2px 3px 0 rgba(44, 62, 80, 0.24));
-		border-radius: var(--list-border-radius, 4px);
-		max-height: var(--list-max-height, 252px);
-		overflow-y: auto;
-		background: var(--list-background, #fff);
-		position: var(--list-position, absolute);
-		z-index: var(--list-z-index, 5000);
-		border: var(--list-border);
-		font-size: small !important;
-	}
-
-	.prefloat {
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	.list-group-title {
-		color: var(--group-title-color, #8f8f8f);
-		cursor: default;
-		font-size: var(--group-title-font-size, 16px);
-		font-weight: var(--group-title-font-weight, 600);
-		height: var(--height, 42px);
-		line-height: var(--height, 42px);
-		padding: var(--group-title-padding, 0 20px);
-		text-overflow: ellipsis;
-		overflow-x: hidden;
-		white-space: nowrap;
-		text-transform: var(--group-title-text-transform, uppercase);
-	}
-
-	.empty {
-		text-align: var(--list-empty-text-align, center);
-		padding: var(--list-empty-padding, 20px 0);
-		color: var(--list-empty-color, #78848f);
-	}
-
-	.item {
-		cursor: default;
-		height: var(--item-height, var(--height, 42px));
-		line-height: var(--item-line-height, var(--height, 42px));
-		padding: var(--item-padding, 0 20px);
-		color: var(--item-color, inherit);
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		transition: var(--item-transition, all 0.2s);
-		align-items: center;
-		width: 100%;
-	}
-
-	.item.group-item {
-		padding-left: var(--group-item-padding-left, 40px);
-	}
-
-	.item:active {
-		background: var(--item-active-background, #b9daff);
-	}
-
-	.item.active {
-		background: var(--item-is-active-bg, #007aff);
-		color: var(--item-is-active-color, #fff);
-	}
-
-	.item.first {
-		border-radius: var(--item-first-border-radius, 4px 4px 0 0);
-	}
-
-	.item.hover:not(.active) {
-		background: var(--item-hover-bg, #e7f2ff);
-		color: var(--item-hover-color, inherit);
-	}
-
-	.item.not-selectable,
-	.item.hover.item.not-selectable,
-	.item.active.item.not-selectable,
-	.item.not-selectable:active {
-		color: var(--item-is-not-selectable-color, #999);
-		background: transparent;
-	}
-
-	.required {
-		opacity: 0;
-		z-index: -1;
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-	}
-</style>
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/index.js b/frontend/src/lib/components/apps/svelte-select/lib/index.js
deleted file mode 100644
index 80d0787c5f..0000000000
--- a/frontend/src/lib/components/apps/svelte-select/lib/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as default } from './SelectLegacy.svelte'
diff --git a/frontend/src/lib/components/select/MultiSelect.svelte b/frontend/src/lib/components/select/MultiSelect.svelte
index 171528078e..e94a3cb72f 100644
--- a/frontend/src/lib/components/select/MultiSelect.svelte
+++ b/frontend/src/lib/components/select/MultiSelect.svelte
@@ -74,7 +74,7 @@
 	})
 
 	let valueEntry = $derived(
-		value.map((v) => processedItems.find((item) => item.value === v)!).filter(Boolean)
+		value.map((v) => processedItems.find((item) => item.value === v) ?? { value: v, label: v })
 	)
 
 	function onAddValue(item: ProcessedItem<Value>) {
diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
index ec0a4dcc47..69fb7bf16c 100644
--- a/frontend/src/lib/components/select/Select.svelte
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -4,7 +4,7 @@
 	import CloseButton from '../common/CloseButton.svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { untrack } from 'svelte'
-	import { processItems, type ProcessedItem } from './utils.svelte'
+	import { getLabel, processItems, type ProcessedItem } from './utils.svelte'
 	import SelectDropdown from './SelectDropdown.svelte'
 	import { deepEqual } from 'fast-equals'
 
@@ -14,7 +14,7 @@
 		items,
 		placeholder = 'Please select',
 		value = $bindable(),
-		filterText: _filterTextBind = $bindable(undefined),
+		filterText = $bindable(''),
 		class: className = '',
 		clearable = false,
 		listAutoWidth = true,
@@ -27,6 +27,7 @@
 		RightIcon,
 		createText,
 		noItemsMsg,
+		open = $bindable(false),
 		groupBy,
 		sortBy,
 		onFocus,
@@ -50,6 +51,7 @@
 		RightIcon?: any
 		createText?: string
 		noItemsMsg?: string
+		open?: boolean
 		groupBy?: (item: Item) => string
 		sortBy?: (a: Item, b: Item) => number
 		onFocus?: () => void
@@ -60,8 +62,6 @@
 
 	let disabled = $derived(_disabled || loading)
 
-	let filterText = $state<string>('')
-	let open = $state<boolean>(false)
 	let inputEl: HTMLInputElement | undefined = $state()
 
 	let processedItems: ProcessedItem<Value>[] = $derived.by(() => {
@@ -69,13 +69,6 @@
 		return untrack(() => processItems(args))
 	})
 
-	$effect(() => {
-		if (_filterTextBind !== undefined) filterText = _filterTextBind
-	})
-	$effect(() => {
-		if (_filterTextBind !== undefined) _filterTextBind = filterText
-	})
-
 	$effect(() => {
 		if (filterText) open = true
 	})
@@ -128,12 +121,12 @@
 		{disabled}
 		type="text"
 		bind:value={() => filterText, (v) => (filterText = v)}
-		placeholder={loading ? 'Loading...' : (valueEntry?.label ?? placeholder)}
+		placeholder={loading ? 'Loading...' : (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
 		style={containerStyle}
 		class={twMerge(
 			'!bg-surface text-ellipsis',
 			open ? '' : 'cursor-pointer',
-			valueEntry && !loading ? '!placeholder-primary' : '',
+			value && !loading ? '!placeholder-primary' : '',
 			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
 			inputClass ?? ''
 		)}
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index 7780828a70..a589bc22ff 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -137,7 +137,7 @@
 								onSelectValue(item)
 							}}
 						>
-							{item.label}
+							{item.label || '\xa0'}
 						</button>
 					</li>
 				{/each}
diff --git a/frontend/src/lib/components/wizards/AppPicker.svelte b/frontend/src/lib/components/wizards/AppPicker.svelte
index 6dd15edf18..b0369d3c96 100644
--- a/frontend/src/lib/components/wizards/AppPicker.svelte
+++ b/frontend/src/lib/components/wizards/AppPicker.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
-	import SelectLegacy from '../apps/svelte-select/lib/SelectLegacy.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '$lib/defaults'
 	import DarkModeObserver from '../DarkModeObserver.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { AppService, type ListableApp } from '$lib/gen'
 	import { canWrite } from '$lib/utils'
 	import type { AppViewerContext } from '../apps/types'
 	import Alert from '../common/alert/Alert.svelte'
+	import Select from '../select/Select.svelte'
 
 	export let value = ''
-	export let selecteValue = value
 	let darkMode = false
 
 	const { appPath } = getContext<AppViewerContext>('AppViewerContext')
@@ -33,38 +31,23 @@
 
 	onMount(() => {
 		loadApps()
-
-		if (selecteValue === '') {
-			selecteValue = $appPath
-			value = $appPath
-		}
+		if (value === '') value = $appPath
 	})
 </script>
 
 <DarkModeObserver bind:darkMode />
 
 <div class="flex flex-col gap-2 w-full">
-	<SelectLegacy
-		class="grow shrink max-w-full"
-		on:change={(e) => {
-			value = e.detail.value
-		}}
-		on:clear={() => {
-			value = ''
-		}}
-		bind:value={selecteValue}
-		items={apps.map((app) => {
-			return {
-				value: app.path,
-				label: app.path === $appPath ? `${app.path} (current app)` : app.path
-			}
-		})}
+	<Select
+		clearable
+		onClear={() => (value = '')}
+		bind:value
+		items={apps.map((app) => ({
+			value: app.path,
+			label: app.path === $appPath ? `${app.path} (current app)` : app.path
+		}))}
 		placeholder="Pick an app"
-		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={darkMode
-			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-		portal={false}
+		disablePortal
 	/>
 	{#if !appPath}
 		<Alert title="Current app not selectable" size="xs" type="warning" collapsible>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 083d22b8bf..c974f3e773 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1378,7 +1378,11 @@ export type StateStore<T> = {
 	val: T
 }
 
-export function readFieldsRecursively(obj: any): void {
+export type ReadFieldsRecursivelyOptions = {
+	excludeField?: string[]
+}
+
+export function readFieldsRecursively(obj: any, options: ReadFieldsRecursivelyOptions = {}): void {
 	if (Array.isArray(obj)) {
 		// <= in case a new object is added. should read as undefined
 		for (let i = 0; i <= obj.length; i++) {
@@ -1387,7 +1391,9 @@ export function readFieldsRecursively(obj: any): void {
 			}
 		}
 	} else if (obj !== null && typeof obj === 'object') {
-		Object.keys(obj).forEach((key) => readFieldsRecursively(obj[key]))
+		Object.keys(obj).forEach((key) => {
+			if (!options.excludeField?.includes(key)) readFieldsRecursively(obj[key], options)
+		})
 	}
 }