windmill-components 1.493.9 → 1.501.4

package/package/components/runs/RunsFilter.svelte

@@ -2,50 +2,21 @@
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Tooltip from '../Tooltip.svelte';
-import AutoComplete from 'simple-svelte-autocomplete';
-import { AlertCircle, CheckCircle2, ChevronDown, Filter, Hourglass, PlayCircle, X } from 'lucide-svelte';
+import { AlertCircle, CheckCircle2, Filter, Hourglass, PlayCircle, X } from 'lucide-svelte';
 import JsonEditor from '../JsonEditor.svelte';
 import Toggle from '../Toggle.svelte';
 import Label from '../Label.svelte';
 import Section from '../Section.svelte';
 import { enterpriseLicense, workspaceStore } from '../../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte';
 import Popover from '../meltComponents/Popover.svelte';
-// Filters
-export let path = null;
-export let label = null;
-export let concurrencyKey = null;
-export let worker = null;
-export let tag = null;
-export let success = undefined;
-export let isSkipped = undefined;
-export let argFilter;
-export let argError;
-export let resultFilter;
-export let resultError;
-export let jobKindsCat;
-export let user = null;
-export let folder = null;
-export let mobile = false;
-export let schedulePath;
-export let allowWildcards = false;
-// Autocomplete data
-export let paths = [];
-export let usernames = [];
-export let folders = [];
-export let allWorkspaces = false;
-$: displayedLabel = label;
-$: displayedConcurrencyKey = concurrencyKey;
-$: displayedTag = tag;
-$: displayedSchedule = schedulePath;
-$: displayedWorker = worker;
-let copyArgFilter = argFilter;
-let copyResultFilter = resultFilter;
-export let filterBy = 'path';
+import Select from '../select/Select.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+let { path = $bindable(null), label = $bindable(null), concurrencyKey = $bindable(null), worker = $bindable(null), tag = $bindable(null), success = $bindable(undefined), isSkipped = $bindable(undefined), argFilter = $bindable(), argError = $bindable(), resultFilter = $bindable(), resultError = $bindable(), jobKindsCat = $bindable(), user = $bindable(null), folder = $bindable(null), mobile = false, schedulePath = $bindable(), allowWildcards = $bindable(false), paths = [], usernames = [], folders = [], allWorkspaces = $bindable(false), filterBy = $bindable('path') } = $props();
+let copyArgFilter = $state(argFilter);
+let copyResultFilter = $state(resultFilter);
 const dispatch = createEventDispatcher();
-$: (path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
-    autosetFilter();
 function autosetFilter() {
     if (path !== null && path !== '' && filterBy !== 'path') {
         filterBy = 'path';
@@ -72,11 +43,21 @@ function autosetFilter() {
         filterBy = 'worker';
     }
 }
-let labelTimeout = undefined;
-let concurrencyKeyTimeout = undefined;
-let tagTimeout = undefined;
-let workerTimeout = undefined;
-let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
+let labelTimeout = $state(undefined);
+let concurrencyKeyTimeout = $state(undefined);
+let tagTimeout = $state(undefined);
+let workerTimeout = $state(undefined);
+let allWorkspacesValue = $state(allWorkspaces ? 'all' : 'admins');
+let displayedLabel = $derived(label);
+let displayedConcurrencyKey = $derived(concurrencyKey);
+let displayedTag = $derived(tag);
+let displayedSchedule = $derived(schedulePath);
+let displayedWorker = $derived(worker);
+$effect(() => {
+    ;
+    (path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
+        untrack(() => autosetFilter());
+});
 </script>
 
 <div class="flex gap-4">
@@ -88,10 +69,11 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 					<ToggleButtonGroup
 						bind:selected={allWorkspacesValue}
 						on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-						let:item
 					>
-						<ToggleButton value={'admins'} label="Admins" {item} />
-						<ToggleButton value={'all'} label="All" {item} />
+						{#snippet children({ item })}
+							<ToggleButton value={'admins'} label="Admins" {item} />
+							<ToggleButton value={'all'} label="All" {item} />
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			{/if}
@@ -111,126 +93,67 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 							schedulePath = undefined
 						}
 					}}
-					let:item
 				>
-					<ToggleButton value="path" label="Path" {item} />
-					<ToggleButton value="user" label="User" {item} />
-					<ToggleButton value="folder" label="Folder" {item} />
-					<ToggleButtonMore
-						togglableItems={[
-							{ label: 'Schedule path', value: 'schedulePath' },
-							{ label: 'Concurrency key', value: 'concurrencyKey' },
-							{ label: 'Label', value: 'label' },
-							{ label: 'Tag', value: 'tag' },
-							{ label: 'Worker', value: 'worker' }
-						]}
-						{item}
-						bind:selected={filterBy}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton value="path" label="Path" {item} />
+						<ToggleButton value="user" label="User" {item} />
+						<ToggleButton value="folder" label="Folder" {item} />
+						<ToggleButtonMore
+							togglableItems={[
+								{ label: 'Schedule path', value: 'schedulePath' },
+								{ label: 'Concurrency key', value: 'concurrencyKey' },
+								{ label: 'Label', value: 'label' },
+								{ label: 'Tag', value: 'tag' },
+								{ label: 'Worker', value: 'worker' }
+							]}
+							{item}
+							bind:selected={filterBy}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 
 			{#if filterBy == 'user'}
 				{#key user}
 					<div class="relative">
-						{#if user}
-							<button
-								class="absolute top-2 right-2 z-50"
-								on:click={() => {
-									user = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{:else}
-							<ChevronDown class="absolute top-2 right-2" size={14} />
-						{/if}
-
 						<span class="text-xs absolute -top-4">User</span>
-						<AutoComplete
-							create
-							onCreate={(user) => {
-								usernames.push(user)
-								return user
-							}}
+						<Select
+							items={safeSelectItems(usernames)}
+							bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
+							clearable
+							onClear={() => ((user = null), dispatch('reset'))}
+							inputClass="!h-[32px]"
+							onCreateItem={(item) => (usernames.push(item), (user = item))}
 							createText="Press enter to use this value"
-							noInputStyles
-							items={usernames}
-							value={user}
-							bind:selectedItem={user}
-							inputClassName="!h-[32px] py-1 !text-xs !w-64"
-							hideArrow
-							className={user ? '!font-bold' : ''}
-							dropdownClassName="!font-normal !w-64 !max-w-64"
 						/>
 					</div>
 				{/key}
 			{:else if filterBy == 'folder'}
 				{#key folder}
 					<div class="relative">
-						{#if folder}
-							<button
-								class="absolute top-2 right-2 z-50"
-								on:click={() => {
-									folder = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{:else}
-							<ChevronDown class="absolute top-2 right-2" size={14} />
-						{/if}
-
 						<span class="text-xs absolute -top-4">Folder</span>
 
-						<AutoComplete
-							noInputStyles
-							items={folders}
-							value={folder}
-							bind:selectedItem={folder}
-							inputClassName="!h-[32px] py-1 !text-xs !w-64"
-							hideArrow
-							className={folder ? '!font-bold' : ''}
-							dropdownClassName="!font-normal !w-64 !max-w-64"
+						<Select
+							items={safeSelectItems(folders)}
+							bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
+							clearable
+							onClear={() => ((folder = null), dispatch('reset'))}
+							inputClass="!h-[32px]"
 						/>
 					</div>
 				{/key}
 			{:else if filterBy === 'path'}
 				{#key path}
 					<div class="relative">
-						{#if path}
-							<button
-								class="absolute top-2 right-2 z-50"
-								on:click={() => {
-									path = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{:else}
-							<ChevronDown class="absolute top-2 right-2" size={14} />
-						{/if}
-
 						<span class="text-xs absolute -top-4">Path</span>
-
-						<AutoComplete
-							create
-							onCreate={(path) => {
-								paths.push(path)
-								return path
-							}}
+						<Select
+							items={safeSelectItems(paths)}
+							bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
+							clearable
+							onClear={() => ((path = null), dispatch('reset'))}
+							inputClass="!h-[32px]"
+							onCreateItem={(item) => (paths.push(item), (path = item))}
 							createText="Press enter to use this value"
-							noInputStyles
-							items={paths}
-							value={path}
-							bind:selectedItem={path}
-							inputClassName="!h-[32px] py-1 !text-xs !w-64"
-							hideArrow
-							className={path ? '!font-bold' : ''}
-							dropdownClassName="!font-normal !w-64 !max-w-64"
 						/>
 					</div>
 				{/key}
@@ -240,7 +163,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{#if label}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									label = null
 									dispatch('reset')
 								}}
@@ -258,13 +181,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 							></span
 						>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedLabel}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (labelTimeout) {
 									clearTimeout(labelTimeout)
 								}
@@ -289,7 +212,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{#if concurrencyKey}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									concurrencyKey = null
 									dispatch('reset')
 								}}
@@ -307,13 +230,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 							</Tooltip></span
 						>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedConcurrencyKey}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (concurrencyKeyTimeout) {
 									clearTimeout(concurrencyKeyTimeout)
 								}
@@ -331,7 +254,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{#if tag}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									tag = null
 									dispatch('reset')
 								}}
@@ -341,13 +264,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{/if}
 						<span class="text-xs absolute -top-4"> Tag </span>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedTag}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (tagTimeout) {
 									clearTimeout(tagTimeout)
 								}
@@ -372,7 +295,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{#if tag}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									schedulePath = undefined
 									dispatch('reset')
 								}}
@@ -382,13 +305,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{/if}
 						<span class="text-xs absolute -top-4"> Schedule Path </span>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedSchedule}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (tagTimeout) {
 									clearTimeout(tagTimeout)
 								}
@@ -406,7 +329,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{#if worker}
 							<button
 								class="absolute top-2 right-2 z-50"
-								on:click={() => {
+								onclick={() => {
 									worker = null
 									dispatch('reset')
 								}}
@@ -416,13 +339,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 						{/if}
 						<span class="text-xs absolute -top-4"> Worker </span>
 
-						<!-- svelte-ignore a11y-autofocus -->
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
 							class="!h-[32px] py-1 !text-xs !w-64"
 							bind:value={displayedWorker}
-							on:keydown={(e) => {
+							onkeydown={(e) => {
 								if (workerTimeout) {
 									clearTimeout(workerTimeout)
 								}
@@ -445,36 +368,38 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 		</div>
 		<div class="relative">
 			<span class="text-xs absolute -top-4">Kind</span>
-			<ToggleButtonGroup bind:selected={jobKindsCat} let:item>
-				<ToggleButton value="all" label="All" {item} />
-				<ToggleButton
-					value="runs"
-					label="Runs"
-					showTooltipIcon
-					tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-					{item}
-				/>
-				<ToggleButton
-					value="previews"
-					label="Previews"
-					showTooltipIcon
-					tooltip="Previews are jobs that have been started in the editor as 'Tests'"
-					{item}
-				/>
-				<ToggleButton
-					value="dependencies"
-					label="Deps"
-					showTooltipIcon
-					tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-					{item}
-				/>
-				<ToggleButton
-					value="deploymentcallbacks"
-					label="Sync"
-					showTooltipIcon
-					tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
-					{item}
-				/>
+			<ToggleButtonGroup bind:selected={jobKindsCat}>
+				{#snippet children({ item })}
+					<ToggleButton value="all" label="All" {item} />
+					<ToggleButton
+						value="runs"
+						label="Runs"
+						showTooltipIcon
+						tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+						{item}
+					/>
+					<ToggleButton
+						value="previews"
+						label="Previews"
+						showTooltipIcon
+						tooltip="Previews are jobs that have been started in the editor as 'Tests'"
+						{item}
+					/>
+					<ToggleButton
+						value="dependencies"
+						label="Deps"
+						showTooltipIcon
+						tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+						{item}
+					/>
+					<ToggleButton
+						value="deploymentcallbacks"
+						label="Sync"
+						showTooltipIcon
+						tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 		<div class="relative">
@@ -485,52 +410,53 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 					success = detail === 'all' ? undefined : detail
 					dispatch('successChange', success)
 				}}
-				let:item
 			>
-				<ToggleButton value={'all'} label="All" {item} />
-				<ToggleButton
-					value={'running'}
-					tooltip="Running"
-					class="whitespace-nowrap"
-					icon={PlayCircle}
-					iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
-					{item}
-				/>
-				<ToggleButton
-					value={'success'}
-					tooltip="Success"
-					class="whitespace-nowrap"
-					icon={CheckCircle2}
-					iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
-					{item}
-				/>
-				<ToggleButton
-					value={'failure'}
-					tooltip="Failure"
-					class="whitespace-nowrap"
-					icon={AlertCircle}
-					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
-					{item}
-				/>
-				{#if success == 'waiting'}
+				{#snippet children({ item })}
+					<ToggleButton value={'all'} label="All" {item} />
+					<ToggleButton
+						value={'running'}
+						tooltip="Running"
+						class="whitespace-nowrap"
+						icon={PlayCircle}
+						iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
+						{item}
+					/>
 					<ToggleButton
-						value={'waiting'}
-						tooltip="Waiting"
+						value={'success'}
+						tooltip="Success"
 						class="whitespace-nowrap"
-						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						icon={CheckCircle2}
+						iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
 						{item}
 					/>
-				{:else if success == 'suspended'}
 					<ToggleButton
-						value={'suspended'}
-						tooltip="Suspended"
+						value={'failure'}
+						tooltip="Failure"
 						class="whitespace-nowrap"
-						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						icon={AlertCircle}
+						iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
 						{item}
 					/>
-				{/if}
+					{#if success == 'waiting'}
+						<ToggleButton
+							value={'waiting'}
+							tooltip="Waiting"
+							class="whitespace-nowrap"
+							icon={Hourglass}
+							iconProps={{ color: 'blue' }}
+							{item}
+						/>
+					{:else if success == 'suspended'}
+						<ToggleButton
+							value={'suspended'}
+							tooltip="Suspended"
+							class="whitespace-nowrap"
+							icon={Hourglass}
+							iconProps={{ color: 'blue' }}
+							{item}
+						/>
+					{/if}
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{/if}
@@ -539,20 +465,20 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 		contentClasses="p-4"
 		closeButton
+		usePointerDownOutside
 	>
-		<svelte:fragment slot="trigger">
+		{#snippet trigger()}
 			<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 				More filters
 			</Button>
-		</svelte:fragment>
+		{/snippet}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<Section label="Filters">
 				<div class="w-102 flex flex-col gap-4">
 					{#if mobile || true}
 						<Label label="Filter by">
 							<ToggleButtonGroup
-								let:item
 								bind:selected={filterBy}
 								on:selected={(e) => {
 									if (e.detail != filterBy) {
@@ -566,106 +492,52 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 									}
 								}}
 							>
-								<ToggleButton value="path" label="Path" {item} />
-								<ToggleButton value="user" label="User" {item} />
-								<ToggleButton value="folder" label="Folder" {item} />
-								<ToggleButton value="schedulePath" label="Schedule" {item} />
-								<ToggleButton value="concurrencyKey" label="Concurrency" {item} />
-								<ToggleButton value="tag" label="Tag" {item} />
-								<ToggleButton value="label" label="Label" {item} />
-								<ToggleButton value="worker" label="Worker" {item} />
+								{#snippet children({ item })}
+									<ToggleButton value="path" label="Path" {item} />
+									<ToggleButton value="user" label="User" {item} />
+									<ToggleButton value="folder" label="Folder" {item} />
+									<ToggleButton value="schedulePath" label="Schedule" {item} />
+									<ToggleButton value="concurrencyKey" label="Concurrency" {item} />
+									<ToggleButton value="tag" label="Tag" {item} />
+									<ToggleButton value="label" label="Label" {item} />
+									<ToggleButton value="worker" label="Worker" {item} />
+								{/snippet}
 							</ToggleButtonGroup>
 						</Label>
 
 						{#if filterBy == 'user'}
-							{#key user}
-								<Label label="User">
-									<div class="relative w-full">
-										{#if user}
-											<button
-												class="absolute top-2 right-2 z-50"
-												on:click={() => {
-													user = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{:else}
-											<ChevronDown class="absolute top-2 right-2" size={14} />
-										{/if}
-
-										<AutoComplete
-											items={usernames}
-											value={user}
-											bind:selectedItem={user}
-											inputClassName="!h-[32px] py-1 !text-xs !w-80"
-											hideArrow
-											className={user ? '!font-bold' : ''}
-											dropdownClassName="!font-normal !w-80 !max-w-80"
-										/>
-									</div>
-								</Label>
-							{/key}
+							<Label label="User">
+								<Select
+									disablePortal
+									items={safeSelectItems(usernames)}
+									bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
+									clearable
+									onClear={() => ((user = null), dispatch('reset'))}
+									inputClass="!h-[32px]"
+								/>
+							</Label>
 						{:else if filterBy == 'folder'}
-							{#key folder}
-								<Label label="Folder">
-									<div class="relative w-full">
-										{#if folder}
-											<button
-												class="absolute top-2 right-2 z-50"
-												on:click={() => {
-													folder = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{:else}
-											<ChevronDown class="absolute top-2 right-2" size={14} />
-										{/if}
-
-										<AutoComplete
-											noInputStyles
-											items={folders}
-											value={folder}
-											bind:selectedItem={folder}
-											inputClassName="!h-[32px] py-1 !text-xs !w-80"
-											hideArrow
-											className={folder ? '!font-bold' : ''}
-											dropdownClassName="!font-normal !w-80 !max-w-80"
-										/>
-									</div>
-								</Label>
-							{/key}
+							<Label label="Folder">
+								<Select
+									disablePortal
+									items={safeSelectItems(folders)}
+									bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
+									clearable
+									onClear={() => ((folder = null), dispatch('reset'))}
+									inputClass="!h-[32px]"
+								/>
+							</Label>
 						{:else if filterBy === 'path'}
-							{#key path}
-								<Label label="Path">
-									<div class="relative w-full">
-										{#if path}
-											<button
-												class="absolute top-2 right-2 z-50"
-												on:click={() => {
-													path = null
-												}}
-											>
-												<X size={14} />
-											</button>
-										{:else}
-											<ChevronDown class="absolute top-2 right-2" size={14} />
-										{/if}
-
-										<AutoComplete
-											noInputStyles
-											items={paths}
-											value={path}
-											bind:selectedItem={path}
-											inputClassName="!h-[32px] py-1 !text-xs !w-80"
-											hideArrow
-											className={path ? '!font-bold' : ''}
-											dropdownClassName="!font-normal !w-80 !max-w-80"
-										/>
-									</div>
-								</Label>
-							{/key}
+							<Label label="Path">
+								<Select
+									disablePortal
+									items={safeSelectItems(paths)}
+									bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
+									clearable
+									onClear={() => ((path = null), dispatch('reset'))}
+									inputClass="!h-[32px]"
+								/>
+							</Label>
 						{:else if filterBy === 'tag'}
 							{#key tag}
 								<Label label="Tag">
@@ -673,7 +545,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 										{#if tag}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													tag = null
 												}}
 											>
@@ -681,13 +553,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedTag}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (tagTimeout) {
 													clearTimeout(tagTimeout)
 												}
@@ -708,7 +580,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 										{#if label}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													label = null
 												}}
 											>
@@ -716,13 +588,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedLabel}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (labelTimeout) {
 													clearTimeout(labelTimeout)
 												}
@@ -742,7 +614,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 										{#if concurrencyKey}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													concurrencyKey = null
 													// dispatch('reset')
 												}}
@@ -751,13 +623,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedConcurrencyKey}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (concurrencyKeyTimeout) {
 													clearTimeout(concurrencyKeyTimeout)
 												}
@@ -777,7 +649,7 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 										{#if concurrencyKey}
 											<button
 												class="absolute top-2 right-2 z-50"
-												on:click={() => {
+												onclick={() => {
 													worker = null
 													// dispatch('reset')
 												}}
@@ -786,13 +658,13 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 											</button>
 										{/if}
 
-										<!-- svelte-ignore a11y-autofocus -->
+										<!-- svelte-ignore a11y_autofocus -->
 										<input
 											autofocus
 											type="text"
 											class="!h-[32px] py-1 !text-xs !w-80"
 											bind:value={displayedWorker}
-											on:keydown={(e) => {
+											onkeydown={(e) => {
 												if (workerTimeout) {
 													clearTimeout(workerTimeout)
 												}
@@ -815,36 +687,38 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 							></Toggle>
 						{/if}
 						<Label label="Kind">
-							<ToggleButtonGroup bind:selected={jobKindsCat} let:item>
-								<ToggleButton value="all" label="All" {item} />
-								<ToggleButton
-									value="runs"
-									label="Runs"
-									showTooltipIcon
-									tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
-									{item}
-								/>
-								<ToggleButton
-									value="previews"
-									label="Previews"
-									showTooltipIcon
-									tooltip="Previews are jobs that have been started in the editor as 'Tests'"
-									{item}
-								/>
-								<ToggleButton
-									value="dependencies"
-									label="Deps"
-									showTooltipIcon
-									tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
-									{item}
-								/>
-								<ToggleButton
-									value="deploymentcallbacks"
-									label="Sync"
-									showTooltipIcon
-									tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
-									{item}
-								/>
+							<ToggleButtonGroup bind:selected={jobKindsCat}>
+								{#snippet children({ item })}
+									<ToggleButton value="all" label="All" {item} />
+									<ToggleButton
+										value="runs"
+										label="Runs"
+										showTooltipIcon
+										tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+										{item}
+									/>
+									<ToggleButton
+										value="previews"
+										label="Previews"
+										showTooltipIcon
+										tooltip="Previews are jobs that have been started in the editor as 'Tests'"
+										{item}
+									/>
+									<ToggleButton
+										value="dependencies"
+										label="Deps"
+										showTooltipIcon
+										tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+										{item}
+									/>
+									<ToggleButton
+										value="deploymentcallbacks"
+										label="Sync"
+										showTooltipIcon
+										tooltip="Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings"
+										{item}
+									/>
+								{/snippet}
 							</ToggleButtonGroup>
 						</Label>
 
@@ -852,12 +726,28 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 							<ToggleButtonGroup
 								selected={success ?? 'all'}
 								on:selected={({ detail }) => (success = detail === 'all' ? undefined : detail)}
-								let:item
 							>
-								<ToggleButton value={'all'} label="All" {item} />
-								<ToggleButton value={'running'} label="Running" class="whitespace-nowrap" {item} />
-								<ToggleButton value={'success'} label="Success" class="whitespace-nowrap" {item} />
-								<ToggleButton value={'failure'} label="Failure" class="whitespace-nowrap" {item} />
+								{#snippet children({ item })}
+									<ToggleButton value={'all'} label="All" {item} />
+									<ToggleButton
+										value={'running'}
+										label="Running"
+										class="whitespace-nowrap"
+										{item}
+									/>
+									<ToggleButton
+										value={'success'}
+										label="Success"
+										class="whitespace-nowrap"
+										{item}
+									/>
+									<ToggleButton
+										value={'failure'}
+										label="Failure"
+										class="whitespace-nowrap"
+										{item}
+									/>
+								{/snippet}
 							</ToggleButtonGroup>
 						</Label>
 					{/if}
@@ -904,6 +794,6 @@ let allWorkspacesValue = allWorkspaces ? 'all' : 'admins';
 					</div>
 				</div>
 			</Section>
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 </div>