windmill-components 1.532.0 → 1.542.4

package/package/components/runs/RunsFilter.svelte

@@ -2,7 +2,7 @@
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Tooltip from '../Tooltip.svelte';
-import { AlertCircle, CheckCircle2, Filter, Hourglass, PlayCircle, X } from 'lucide-svelte';
+import { CircleAlert, CircleCheck, Hourglass, ListFilterPlus, CirclePlay, X } from 'lucide-svelte';
 import JsonEditor from '../JsonEditor.svelte';
 import Toggle from '../Toggle.svelte';
 import Label from '../Label.svelte';
@@ -13,7 +13,10 @@ import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte'
 import Popover from '../meltComponents/Popover.svelte';
 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();
+import RunOption from './RunOption.svelte';
+import DropdownSelect from '../DropdownSelect.svelte';
+import TooltipV2 from '../meltComponents/Tooltip.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'), small = false, calendarSmall = false } = $props();
 let copyArgFilter = $state(argFilter);
 let copyResultFilter = $state(resultFilter);
 const dispatch = createEventDispatcher();
@@ -58,106 +61,152 @@ $effect(() => {
     (path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
         untrack(() => autosetFilter());
 });
+function resetFilter() {
+    path = null;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = undefined;
+    worker = null;
+}
 </script>
 
-<div class="flex gap-4">
-	{#if !mobile}
-		<div class="flex gap-2">
-			{#if $workspaceStore == 'admins'}
-				<div class="relative">
-					<span class="text-xs absolute -top-4">Workspaces</span>
-					<ToggleButtonGroup
-						bind:selected={allWorkspacesValue}
-						on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
-					>
-						{#snippet children({ item })}
-							<ToggleButton value={'admins'} label="Admins" {item} />
-							<ToggleButton value={'all'} label="All" {item} />
-						{/snippet}
-					</ToggleButtonGroup>
-				</div>
-			{/if}
+{#snippet runsTooltip()}
+	<TooltipV2 placement="right">
+		{#snippet text()}
+			'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'
+		{/snippet}
+	</TooltipV2>
+{/snippet}
+{#snippet previewsTooltip()}
+	<TooltipV2 placement="right">
+		{#snippet text()}
+			'Previews are jobs that have been started in the editor as "Tests"'
+		{/snippet}
+	</TooltipV2>
+{/snippet}
+{#snippet dependenciesTooltip()}
+	<TooltipV2 placement="right">
+		{#snippet text()}
+			'Deploying a script, flow or an app launch a dependency job that creates and then attaches the
+			lockfile to the deployed item. This mechanism ensures that logic is always executed with the
+			exact same direct and indirect dependencies.'
+		{/snippet}
+	</TooltipV2>
+{/snippet}
+{#snippet syncTooltip()}
+	<TooltipV2 placement="right">
+		{#snippet text()}
+			'Sync jobs that are triggered on every script deployment to sync the workspace with the Git
+			repository configured in the workspace settings'
+		{/snippet}
+	</TooltipV2>
+{/snippet}
 
-			<div class="relative">
-				<span class="text-xs absolute -top-4">Filter by</span>
-				<ToggleButtonGroup
-					bind:selected={filterBy}
-					on:selected={(e) => {
-						if (e.detail != filterBy) {
-							path = null
-							user = null
-							folder = null
-							label = null
-							concurrencyKey = null
-							tag = null
-							schedulePath = undefined
+{#if !mobile}
+	{#if $workspaceStore == 'admins'}
+		<RunOption label="Workspaces" for="workspaces">
+			<ToggleButtonGroup
+				bind:selected={allWorkspacesValue}
+				on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
+			>
+				{#snippet children({ item })}
+					<ToggleButton value={'admins'} label="Admins" {item} />
+					<ToggleButton value={'all'} label="All" {item} />
+				{/snippet}
+			</ToggleButtonGroup>
+		</RunOption>
+	{/if}
+	<!-- Filter by -->
+	<div class="flex flex-row gap-1">
+		<RunOption label="Filter by" for="filter-by">
+			<ToggleButtonGroup
+				bind:selected={filterBy}
+				on:selected={(e) => {
+					if (e.detail != filterBy) {
+						resetFilter()
+					}
+				}}
+			>
+				{#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,
+							(v) => {
+								resetFilter()
+								filterBy = v
+							}
 						}
-					}}
-				>
-					{#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">
-						<span class="text-xs absolute -top-4">User</span>
-						<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"
-						/>
-					</div>
-				{/key}
-			{:else if filterBy == 'folder'}
+					/>
+				{/snippet}
+			</ToggleButtonGroup>
+		</RunOption>
+
+		{#if filterBy == 'user'}
+			{#key user}
+				<RunOption label="User" for="user">
+					<Select
+						items={safeSelectItems(usernames)}
+						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
+						clearable
+						onClear={() => ((user = null), dispatch('reset'))}
+						inputClass="!h-[32px] min-w-36"
+						onCreateItem={(item) => (usernames.push(item), (user = item))}
+						createText="Press enter to use this value"
+						id="user"
+					/>
+				</RunOption>
+			{/key}
+		{:else if filterBy == 'folder'}
+			<RunOption label="Folder" for="folder">
 				{#key folder}
-					<div class="relative">
-						<span class="text-xs absolute -top-4">Folder</span>
-
-						<Select
-							items={safeSelectItems(folders)}
-							bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
-							clearable
-							onClear={() => ((folder = null), dispatch('reset'))}
-							inputClass="!h-[32px]"
-						/>
-					</div>
+					<Select
+						items={safeSelectItems(folders)}
+						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
+						clearable
+						onClear={() => ((folder = null), dispatch('reset'))}
+						inputClass="!h-[32px] min-w-36"
+						id="folder"
+					/>
 				{/key}
-			{:else if filterBy === 'path'}
+			</RunOption>
+		{:else if filterBy === 'path'}
+			<RunOption label="Path" for="path">
 				{#key path}
-					<div class="relative">
-						<span class="text-xs absolute -top-4">Path</span>
-						<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"
-						/>
-					</div>
+					<Select
+						items={safeSelectItems(paths)}
+						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
+						clearable
+						onClear={() => ((path = null), dispatch('reset'))}
+						inputClass="!h-[32px] min-w-36"
+						onCreateItem={(item) => (paths.push(item), (path = item))}
+						createText="Press enter to use this value"
+						id="path"
+					/>
 				{/key}
-			{:else if filterBy === 'label'}
+			</RunOption>
+		{:else if filterBy === 'label'}
+			<RunOption label="Label" for="label">
+				{#snippet tooltip()}
+					<a
+						href="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#jobs-labels"
+						target="_blank">Job Labels</a
+					> are string values in the array at the result field 'wm_labels' to easily filter them.
+				{/snippet}
 				{#key label}
 					<div class="relative">
 						{#if label}
@@ -172,20 +221,11 @@ $effect(() => {
 							</button>
 						{/if}
 
-						<span class="text-xs absolute -top-4"
-							>Label <Tooltip
-								><a
-									href="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#jobs-labels"
-									target="_blank">Job Labels</a
-								> are string values in the array at the result field 'wm_labels' to easily filter them.</Tooltip
-							></span
-						>
-
 						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
-							class="!h-[32px] py-1 !text-xs !w-64"
+							class="!h-[32px] py-1 !text-xs min-w-36"
 							bind:value={displayedLabel}
 							onkeydown={(e) => {
 								if (labelTimeout) {
@@ -197,58 +237,59 @@ $effect(() => {
 								}, 1000)
 							}}
 						/>
-						<div class="absolute top-10">
+						<div class="absolute -top-4 right-0">
 							<Toggle
 								bind:checked={allowWildcards}
-								size="xs"
-								options={{ right: 'allow wildcards (*)' }}
+								size="2xs"
+								options={{ right: '(*)', title: 'allow wildcards (*)' }}
 							></Toggle>
 						</div>
 					</div>
 				{/key}
-			{:else if filterBy === 'concurrencyKey'}
+			</RunOption>
+		{:else if filterBy === 'concurrencyKey'}
+			<RunOption label="Concurrency Key" for="concurrencyKey">
+				{#snippet tooltip()}
+					For concurrency limited jobs, the concurrency key defines a group of jobs that share the
+					same limits.
+					{#if !$enterpriseLicense}
+						Concurrency limits are an EE feature.
+					{/if}
+				{/snippet}
 				{#key concurrencyKey}
-					<div class="relative">
-						{#if concurrencyKey}
-							<button
-								class="absolute top-2 right-2 z-50"
-								onclick={() => {
-									concurrencyKey = null
-									dispatch('reset')
-								}}
-							>
-								<X size={14} />
-							</button>
-						{/if}
-						<span class="text-xs absolute -top-4"
-							>Concurrency Key <Tooltip>
-								For concurrency limited jobs, the concurrency key defines a group of jobs that share
-								the same limits.
-								{#if !$enterpriseLicense}
-									Concurrency limits are an EE feature.
-								{/if}
-							</Tooltip></span
+					{#if concurrencyKey}
+						<button
+							class="absolute top-2 right-2 z-50"
+							onclick={() => {
+								concurrencyKey = null
+								dispatch('reset')
+							}}
 						>
+							<X size={14} />
+						</button>
+					{/if}
 
-						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs !w-64"
-							bind:value={displayedConcurrencyKey}
-							onkeydown={(e) => {
-								if (concurrencyKeyTimeout) {
-									clearTimeout(concurrencyKeyTimeout)
-								}
-
-								concurrencyKeyTimeout = setTimeout(() => {
-									concurrencyKey = displayedConcurrencyKey
-								}, 1000)
-							}}
-						/>
-					</div>
+					<!-- svelte-ignore a11y_autofocus -->
+					<input
+						autofocus
+						type="text"
+						class="!h-[32px] py-1 !text-xs min-w-36"
+						bind:value={displayedConcurrencyKey}
+						onkeydown={(e) => {
+							if (concurrencyKeyTimeout) {
+								clearTimeout(concurrencyKeyTimeout)
+							}
+
+							concurrencyKeyTimeout = setTimeout(() => {
+								concurrencyKey = displayedConcurrencyKey
+							}, 1000)
+						}}
+						id="concurrencyKey"
+					/>
 				{/key}
-			{:else if filterBy === 'tag'}
+			</RunOption>
+		{:else if filterBy === 'tag'}
+			<RunOption label="Tag" for="tag">
 				{#key tag}
 					<div class="relative">
 						{#if tag}
@@ -262,13 +303,12 @@ $effect(() => {
 								<X size={14} />
 							</button>
 						{/if}
-						<span class="text-xs absolute -top-4"> Tag </span>
 
 						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
-							class="!h-[32px] py-1 !text-xs !w-64"
+							class="!h-[32px] py-1 !text-xs min-w-36"
 							bind:value={displayedTag}
 							onkeydown={(e) => {
 								if (tagTimeout) {
@@ -279,17 +319,20 @@ $effect(() => {
 									tag = displayedTag
 								}, 1000)
 							}}
+							id="tag"
 						/>
-						<div class="absolute top-10">
+						<div class="absolute -top-4 right-0">
 							<Toggle
 								bind:checked={allowWildcards}
-								size="xs"
-								options={{ right: 'allow wildcards (*)' }}
+								size="2xs"
+								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
 							></Toggle>
 						</div>
 					</div>
 				{/key}
-			{:else if filterBy === 'schedulePath'}
+			</RunOption>
+		{:else if filterBy === 'schedulePath'}
+			<RunOption label="Schedule Path" for="schedulePath">
 				{#key tag}
 					<div class="relative">
 						{#if tag}
@@ -303,13 +346,12 @@ $effect(() => {
 								<X size={14} />
 							</button>
 						{/if}
-						<span class="text-xs absolute -top-4"> Schedule Path </span>
 
 						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
-							class="!h-[32px] py-1 !text-xs !w-64"
+							class="!h-[32px] py-1 !text-xs min-w-36"
 							bind:value={displayedSchedule}
 							onkeydown={(e) => {
 								if (tagTimeout) {
@@ -320,10 +362,13 @@ $effect(() => {
 									schedulePath = displayedSchedule
 								}, 1000)
 							}}
+							id="schedulePath"
 						/>
 					</div>
 				{/key}
-			{:else if filterBy === 'worker'}
+			</RunOption>
+		{:else if filterBy === 'worker'}
+			<RunOption label="Worker" for="worker">
 				{#key worker}
 					<div class="relative">
 						{#if worker}
@@ -337,13 +382,12 @@ $effect(() => {
 								<X size={14} />
 							</button>
 						{/if}
-						<span class="text-xs absolute -top-4"> Worker </span>
 
 						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
 							type="text"
-							class="!h-[32px] py-1 !text-xs !w-64"
+							class="!h-[32px] py-1 !text-xs min-w-36"
 							bind:value={displayedWorker}
 							onkeydown={(e) => {
 								if (workerTimeout) {
@@ -354,20 +398,70 @@ $effect(() => {
 									worker = displayedWorker
 								}, 1000)
 							}}
+							id="worker"
 						/>
-						<div class="absolute top-10">
+						<div class="absolute -top-4 right-0">
 							<Toggle
 								bind:checked={allowWildcards}
-								size="xs"
-								options={{ right: 'allow wildcards (*)' }}
+								size="2xs"
+								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
 							></Toggle>
 						</div>
 					</div>
 				{/key}
-			{/if}
-		</div>
-		<div class="relative">
-			<span class="text-xs absolute -top-4">Kind</span>
+			</RunOption>
+		{/if}
+	</div>
+
+	<!-- Kind -->
+	<RunOption label="Kind" for="kind">
+		{#if small && !calendarSmall}
+			<DropdownSelect
+				btnClasses="min-w-24"
+				items={[
+					{
+						displayName: 'All',
+						action: () => {
+							jobKindsCat = 'all'
+						},
+						id: 'all'
+					},
+					{
+						displayName: 'Runs',
+						action: () => {
+							jobKindsCat = 'runs'
+						},
+						id: 'runs',
+						extra: runsTooltip
+					},
+					{
+						displayName: 'Previews',
+						action: () => {
+							jobKindsCat = 'previews'
+						},
+						id: 'previews',
+						extra: previewsTooltip
+					},
+					{
+						displayName: 'Deps',
+						action: () => {
+							jobKindsCat = 'dependencies'
+						},
+						id: 'dependencies',
+						extra: dependenciesTooltip
+					},
+					{
+						displayName: 'Sync',
+						action: () => {
+							jobKindsCat = 'deploymentcallbacks'
+						},
+						id: 'deploymentcallbacks',
+						extra: syncTooltip
+					}
+				]}
+				selected={jobKindsCat}
+			/>
+		{:else}
 			<ToggleButtonGroup bind:selected={jobKindsCat}>
 				{#snippet children({ item })}
 					<ToggleButton value="all" label="All" {item} />
@@ -378,13 +472,6 @@ $effect(() => {
 						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"
@@ -392,75 +479,94 @@ $effect(() => {
 						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"
+					<ToggleButtonMore
+						togglableItems={[
+							{
+								label: 'Previews',
+								value: 'previews',
+								tooltip: "Previews are jobs that have been started in the editor as 'Tests'"
+							},
+							{
+								label: 'Sync',
+								value: 'deploymentcallbacks',
+								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}
+						bind:selected={
+							() => jobKindsCat,
+							(v) => {
+								resetFilter()
+								jobKindsCat = v
+							}
+						}
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-		</div>
-		<div class="relative">
-			<span class="text-xs absolute -top-4">Status</span>
-			<ToggleButtonGroup
-				selected={success ?? 'all'}
-				on:selected={({ detail }) => {
-					success = detail === 'all' ? undefined : detail
-					dispatch('successChange', success)
-				}}
-			>
-				{#snippet children({ item })}
-					<ToggleButton value={'all'} label="All" {item} />
+		{/if}
+	</RunOption>
+	<!-- Status -->
+	<RunOption label="Status" for="status">
+		<ToggleButtonGroup
+			selected={success ?? 'all'}
+			on:selected={({ detail }) => {
+				success = detail === 'all' ? undefined : detail
+				dispatch('successChange', success)
+			}}
+			id="status"
+		>
+			{#snippet children({ item })}
+				<ToggleButton value={'all'} label="All" {item} />
+				<ToggleButton
+					value={'running'}
+					tooltip="Running"
+					class="whitespace-nowrap"
+					icon={CirclePlay}
+					iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
+					{item}
+				/>
+				<ToggleButton
+					value={'success'}
+					tooltip="Success"
+					class="whitespace-nowrap"
+					icon={CircleCheck}
+					iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
+					{item}
+				/>
+				<ToggleButton
+					value={'failure'}
+					tooltip="Failure"
+					class="whitespace-nowrap"
+					icon={CircleAlert}
+					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
+					{item}
+				/>
+				{#if success == 'waiting'}
 					<ToggleButton
-						value={'running'}
-						tooltip="Running"
+						value={'waiting'}
+						tooltip="Waiting"
 						class="whitespace-nowrap"
-						icon={PlayCircle}
-						iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
+						icon={Hourglass}
+						iconProps={{ color: 'blue' }}
 						{item}
 					/>
+				{:else if success == 'suspended'}
 					<ToggleButton
-						value={'success'}
-						tooltip="Success"
+						value={'suspended'}
+						tooltip="Suspended"
 						class="whitespace-nowrap"
-						icon={CheckCircle2}
-						iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
+						icon={Hourglass}
+						iconProps={{ color: 'blue' }}
 						{item}
 					/>
-					<ToggleButton
-						value={'failure'}
-						tooltip="Failure"
-						class="whitespace-nowrap"
-						icon={AlertCircle}
-						iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
-						{item}
-					/>
-					{#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}
+				{/if}
+			{/snippet}
+		</ToggleButtonGroup>
+	</RunOption>
+{/if}
 
+<RunOption label="_" for="more-filters" noLabel>
 	<Popover
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 		contentClasses="p-4"
@@ -468,15 +574,33 @@ $effect(() => {
 		usePointerDownOutside
 	>
 		{#snippet trigger()}
-			<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
-				More filters
-			</Button>
+			<Button
+				color="light"
+				variant="border"
+				size="xs"
+				nonCaptureEvent={true}
+				startIcon={{ icon: ListFilterPlus }}
+				iconOnly
+			></Button>
 		{/snippet}
 
 		{#snippet content()}
 			<Section label="Filters">
 				<div class="w-102 flex flex-col gap-4">
-					{#if mobile || true}
+					{#if mobile}
+						{#if $workspaceStore == 'admins'}
+							<Label label="Workspaces">
+								<ToggleButtonGroup
+									bind:selected={allWorkspacesValue}
+									on:selected={({ detail }) => (allWorkspaces = detail === 'all')}
+								>
+									{#snippet children({ item })}
+										<ToggleButton value={'admins'} label="Admins" {item} />
+										<ToggleButton value={'all'} label="All" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							</Label>
+						{/if}
 						<Label label="Filter by">
 							<ToggleButtonGroup
 								bind:selected={filterBy}
@@ -682,8 +806,8 @@ $effect(() => {
 						{#if filterBy === 'tag' || filterBy === 'label' || filterBy === 'worker'}
 							<Toggle
 								bind:checked={allowWildcards}
-								size="xs"
-								options={{ right: 'allow wildcards (*)' }}
+								size="2xs"
+								options={{ right: 'wildcards (*)', title: 'allow wildcards (*)' }}
 							></Toggle>
 						{/if}
 						<Label label="Kind">
@@ -759,15 +883,17 @@ $effect(() => {
 						</div>
 					</Label>
 
-					<span class="text-xs leading-6">
-						{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-					</span>
-					<Label label="Filter by args">
-						<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
-					</Label>
-					<Label label="Filter by result">
-						<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
-					</Label>
+					<div class="flex flex-col gap-1">
+						<span class="text-xs leading-6">
+							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
+						</span>
+						<Label label="Filter by args">
+							<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
+						</Label>
+						<Label label="Filter by result">
+							<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
+						</Label>
+					</div>
 
 					<div class="flex flex-row gap-2 justify-between">
 						<Button
@@ -796,4 +922,4 @@ $effect(() => {
 			</Section>
 		{/snippet}
 	</Popover>
-</div>
+</RunOption>