windmill-components 1.623.2 → 1.655.0

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -18,7 +18,6 @@ interface Props {
     } | undefined;
     innerModule?: FlowModuleValue | undefined;
     render?: boolean;
-    isOwner?: boolean;
     selectedNode?: string | undefined;
     globalModuleStates: Record<string, GraphModuleState>[];
     globalDurationStatuses?: Record<string, DurationStatus>[];
@@ -26,7 +25,6 @@ interface Props {
     isSubflow?: boolean;
     reducedPolling?: boolean;
     wideResults?: boolean;
-    hideFlowResult?: boolean;
     topModuleStates?: Record<string, GraphModuleState>;
     workspace?: string | undefined;
     prefix?: string | undefined;
@@ -67,6 +65,8 @@ interface Props {
         isToolCallToBeLoaded: (storeKey: string) => boolean;
         addToolCallToLoad: (storeKey: string) => void;
     };
+    showLogsWithResult?: boolean;
+    showJobDetailHeader?: boolean;
 }
 export type FlowModuleForTimeline = {
     id: string;

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -107,17 +107,15 @@ $effect(() => {
 });
 </script>
 
-<div class="w-full h-full mt-2 text-xs text-primary">
-	{#if !light}
-		<p>Waiting to be resumed</p>
-	{/if}
+<div class="w-full h-full text-xs text-primary">
 	{#if description != undefined}
 		<DisplayResult {workspaceId} noControls result={description} language={job?.language} />
+		<div class="mt-2"></div>
 	{/if}
 	<div>
 		{#if isOwner || resumeUrl}
-			<div class={twMerge('flex gap-2 mt-2', light ? 'flex-col' : 'flex-row ')}>
-				{#if cancelUrl && !hide_cancel}
+			<div class={twMerge('flex gap-2', light ? 'flex-col' : 'flex-row ')}>
+				{#if !hide_cancel}
 					<div>
 						<Button
 							title="Cancel the step"
@@ -125,13 +123,15 @@ $effect(() => {
 							iconOnly
 							startIcon={{ icon: X }}
 							variant="default"
+							disabled={!cancelUrl}
 							destructive
+							unifiedSize="md"
 							on:click={() => continu(false)}
 						/>
 					</div>
 				{/if}
 				<div>
-					<Button variant="accent" on:click={() => continu(true)} {loading}>
+					<Button variant="accent" onClick={() => continu(true)} {loading} unifiedSize="md">
 						Resume
 						<Tooltip class="text-white">
 							Since you are an owner of this flow, you can send resume events without necessarily
@@ -149,10 +149,11 @@ $effect(() => {
 					>
 						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
 					</div>
+					<Tooltip>
+						The payload is optional, it is passed to the following step through the `resume`
+						variable
+					</Tooltip>
 				{/if}
-				<Tooltip>
-					The payload is optional, it is passed to the following step through the `resume` variable
-				</Tooltip>
 			</div>
 		{:else}
 			You cannot resume the flow yourself without receiving the resume secret since you are not an

package/package/components/FlowViewer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { FlowService } from '../gen';
+<script lang="ts">import { untrack } from 'svelte';
+import { FlowService } from '../gen';
 import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
@@ -11,12 +12,13 @@ import FlowViewerInner from './FlowViewerInner.svelte';
 import FlowInputViewer from './FlowInputViewer.svelte';
 let { flow, initialOpen = undefined, noSide = false, noGraph = false, availableVersions = undefined, initTab = undefined, noSummary = false, noGraphDownload = false, selectedVersionId = undefined } = $props();
 let open = {};
-if (initialOpen) {
-    open[initialOpen] = true;
+const untrackedInitialOpen = untrack(() => initialOpen);
+if (untrackedInitialOpen) {
+    open[untrackedInitialOpen] = true;
 }
 let previousVersionId = $state(undefined);
 let previousFlow = $state(undefined);
-let tab = $state(initTab ?? 'diff');
+let tab = $state(untrack(() => initTab) ?? 'diff');
 let previousFlowCache = {};
 async function loadPreviousFlow(version) {
     try {

package/package/components/FlowWrapper.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 import FlowBuilder from './FlowBuilder.svelte';
 let { flowStore: oldFlowStore, flowStateStore: oldFlowStateStore, disableAi, light, ...props } = $props();
-let flowStore = $state(oldFlowStore);
-let flowStateStore = $state(oldFlowStateStore);
+let flowStore = $state(untrack(() => oldFlowStore));
+let flowStateStore = $state(untrack(() => oldFlowStateStore));
 let trialRender = $state(true);
-if (light) {
+if (untrack(() => light)) {
     setTimeout(() => {
         trialRender = false;
     }, 1000 * 300);

package/package/components/FolderEditor.svelte

@@ -240,12 +240,14 @@ let reloadHistory = $state(0);
 			{/if}
 			{#if perms}
 				<TableCustom>
-					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
-						<th>user/group</th>
-						<th></th>
-						<th></th>
-					</tr>
+
+					{#snippet headerRow()}
+										<tr >
+							<th>user/group</th>
+							<th></th>
+							<th></th>
+						</tr>
+									{/snippet}
 					{#snippet body()}
 						<tbody>
 							{#each perms ?? [] as { owner_name, role }}<tr>
@@ -377,7 +379,7 @@ let reloadHistory = $state(0);
 				<p class="text-primary text-sm">No folder is managing this folder</p>
 			{:else}
 				<TableCustom>
-					<tr slot="header-row">
+					<tr slot="headerRow">
 						<th>folder</th>
 						<th />
 					</tr>

package/package/components/FolderPicker.svelte

@@ -1,98 +1,228 @@
 <script lang="ts">import { FolderService } from '../gen';
 import { workspaceStore, userStore } from '../stores';
-import { Plus, Eye } from 'lucide-svelte';
+import { Pen, PlusIcon } from 'lucide-svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import FolderEditor from './FolderEditor.svelte';
+import Select from './select/Select.svelte';
+import TextInput from './text_input/TextInput.svelte';
+import Label from './Label.svelte';
+import InputError from './InputError.svelte';
+import { tick } from 'svelte';
+import { sendUserToast } from '../toast';
+const VALID_FOLDER_NAME = /^[a-zA-Z_0-9]+$/;
 let folders = $state([]);
+let filterText = $state('');
+let selectOpen = $state(false);
+let nameInput = $state();
 let newFolder = $state(null);
 let viewFolder = $state(null);
 let newFolderName = $state('');
 let folderCreated = $state(undefined);
-let { folderName = $bindable(''), initialPath = $bindable(undefined), disabled = $bindable(undefined), disableEditing = $bindable(undefined), } = $props();
+let creating = $state(false);
+let loadingFolders = $state(true);
+let editingFolder = $state('');
+let { folderName = $bindable(''), initialPath = $bindable(undefined), disabled = $bindable(undefined), disableEditing = $bindable(undefined), size = 'md', drawerOffset = 0 } = $props();
+let hovering = $state(false);
 async function loadFolders() {
-    let initialFolders = [];
-    let initialFolder = '';
-    if (initialPath?.split('/')?.[0] == 'f') {
-        initialFolder = initialPath?.split('/')?.[1];
-        initialFolders.push({ name: initialFolder, write: true });
+    loadingFolders = true;
+    try {
+        let initialFolders = [];
+        let initialFolder = '';
+        if (initialPath?.split('/')?.[0] == 'f') {
+            initialFolder = initialPath?.split('/')?.[1];
+            initialFolders.push({ name: initialFolder, write: true });
+        }
+        const excludedFolders = [initialFolder, 'app_groups', 'app_custom', 'app_themes'];
+        folders = initialFolders.concat((await FolderService.listFolderNames({
+            workspace: $workspaceStore
+        }))
+            .filter((x) => !excludedFolders.includes(x))
+            .map((x) => ({
+            name: x,
+            write: $userStore?.folders?.includes(x) == true ||
+                ($userStore?.is_admin ?? false) ||
+                ($userStore?.is_super_admin ?? false)
+        })));
+    }
+    catch (e) {
+        sendUserToast(`Could not load folders: ${e}`, true);
+    }
+    finally {
+        loadingFolders = false;
     }
-    const excludedFolders = [initialFolder, 'app_groups', 'app_custom', 'app_themes'];
-    folders = initialFolders.concat((await FolderService.listFolderNames({
-        workspace: $workspaceStore
-    }))
-        .filter((x) => !excludedFolders.includes(x))
-        .map((x) => ({
-        name: x,
-        write: $userStore?.folders?.includes(x) == true ||
-            ($userStore?.is_admin ?? false) ||
-            ($userStore?.is_super_admin ?? false)
-    })));
+}
+async function openCreateFolder() {
+    newFolderName = filterText;
+    folderCreated = undefined;
+    newFolder?.openDrawer();
+    await tick();
+    nameInput?.focus();
 }
 async function addFolder() {
-    await FolderService.createFolder({
-        workspace: $workspaceStore ?? '',
-        requestBody: { name: newFolderName }
-    });
-    folderCreated = newFolderName;
-    $userStore?.folders?.push(newFolderName);
-    folderName = newFolderName;
-    loadFolders();
+    if (nameError || !newFolderName || creating)
+        return;
+    creating = true;
+    try {
+        await FolderService.createFolder({
+            workspace: $workspaceStore ?? '',
+            requestBody: { name: newFolderName }
+        });
+        folderCreated = newFolderName;
+        await loadFolders();
+        folderName = newFolderName;
+        // Writing $userStore.folders = [...] would call userStore.set(),
+        // which re-triggers Path.svelte's $effect.pre and calls initPath()/reset(),
+        // switching the owner toggle from "Folder" back to "User".
+        if ($userStore) {
+            if (!$userStore.folders)
+                $userStore.folders = [];
+            $userStore.folders.push(newFolderName);
+        }
+    }
+    catch (e) {
+        sendUserToast(`Could not create folder: ${e}`, true);
+    }
+    finally {
+        creating = false;
+    }
+}
+let selectItems = $derived(folders.map((f) => ({
+    value: f.name,
+    label: f.name + (f.write ? '' : ' (read-only)'),
+    disabled: !f.write
+})));
+let nameError = $derived(!newFolderName
+    ? ''
+    : !VALID_FOLDER_NAME.test(newFolderName)
+        ? 'Folder name can only contain alphanumeric characters and underscores'
+        : folders.some((f) => f.name === newFolderName)
+            ? 'A folder with this name already exists'
+            : '');
+let noMatchingItems = $derived(filterText &&
+    !selectItems.some((item) => item.label.toLowerCase().includes(filterText.toLowerCase())));
+function handleSelectKeydown(e) {
+    if (e.key === 'Enter' && selectOpen && noMatchingItems) {
+        e.preventDefault();
+        selectOpen = false;
+        openCreateFolder();
+    }
 }
 loadFolders();
 </script>
 
-<Drawer bind:this={newFolder} name="newFolder">
+<Drawer bind:this={newFolder} name="newFolder" offset={drawerOffset}>
 	<DrawerContent
-		title="New Folder"
+		title={folderCreated ? `Folder ${folderCreated}` : 'Create folder'}
 		on:close={() => {
 			newFolder?.closeDrawer()
 			folderCreated = undefined
 		}}
 	>
-		{#if !folderCreated}
-			<div class="flex flex-col gap-2">
-				<input placeholder="New folder name" bind:value={newFolderName} />
-				<Button size="md" startIcon={{ icon: Plus }} disabled={!newFolderName} on:click={addFolder}>
-					New&nbsp;folder
+		{#if folderCreated}
+			<FolderEditor name={folderCreated} />
+		{:else}
+			<div class="flex flex-col gap-4">
+				<Label label="Folder name">
+					<TextInput
+						bind:this={nameInput}
+						bind:value={newFolderName}
+						error={!!nameError}
+						inputProps={{
+							placeholder: 'folder_name',
+							onkeydown: (e: KeyboardEvent) => {
+								if (e.key === 'Enter' && newFolderName) {
+									e.preventDefault()
+									addFolder()
+								}
+							}
+						}}
+					/>
+					<InputError error={nameError} />
+				</Label>
+				<Button
+					variant="accent"
+					disabled={!newFolderName || !!nameError || creating}
+					loading={creating}
+					onClick={addFolder}
+				>
+					Create
 				</Button>
 			</div>
-		{:else}
-			<FolderEditor name={folderCreated} />
 		{/if}
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:this={viewFolder}>
-	<DrawerContent title="Folder {folderName}" on:close={viewFolder.closeDrawer}>
-		<FolderEditor name={folderName ?? ''} />
+<Drawer bind:this={viewFolder} offset={drawerOffset}>
+	<DrawerContent title="Folder {editingFolder}" on:close={viewFolder.closeDrawer}>
+		<FolderEditor name={editingFolder} />
 	</DrawerContent>
 </Drawer>
 
-<div class="flex flex-row items-center gap-1 w-full">
-	<select class="grow w-full" disabled={disabled || disableEditing} bind:value={folderName}>
-		{#if folders?.length == 0}
-			<option disabled>No folders</option>
-		{/if}
-		{#each folders as { name, write }}
-			<option disabled={!write}>{name}{write ? '' : ' (read-only)'}</option>
-		{/each}
-	</select>
-	<Button
-		title="View folder"
-		variant="default"
-		unifiedSize="md"
-		disabled={!folderName || folderName == ''}
-		on:click={viewFolder.openDrawer}
-		iconOnly
-		startIcon={{ icon: Eye }}
-	/>
-	<Button
-		title="New folder"
-		variant="default"
-		unifiedSize="md"
-		{disabled}
-		on:click={newFolder.openDrawer}
-		iconOnly
-		startIcon={{ icon: Plus }}
-	/>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="flex flex-row w-full items-center relative"
+	role="group"
+	onkeydown={handleSelectKeydown}
+	onmouseenter={() => (hovering = true)}
+	onmouseleave={() => (hovering = false)}
+>
+	<Select
+		bind:value={folderName}
+		bind:filterText
+		bind:open={selectOpen}
+		items={selectItems}
+		disabled={disabled || disableEditing}
+		loading={loadingFolders}
+		{size}
+		placeholder="Select folder"
+		class="grow min-w-0"
+	>
+		{#snippet endSnippet({ item, close })}
+			<Button
+				disabled={disabled || disableEditing}
+				variant="subtle"
+				unifiedSize="xs"
+				wrapperClasses="-mr-2 pl-1 -my-2"
+				btnClasses="hover:bg-surface-tertiary"
+				onClick={() => {
+					editingFolder = item.value ?? ''
+					viewFolder?.openDrawer()
+					close()
+				}}
+				startIcon={{ icon: Pen }}
+				iconOnly
+			/>
+		{/snippet}
+		{#snippet bottomSnippet({ close })}
+			<button
+				class="sticky py-2 px-4 w-full text-left text-xs font-medium hover:bg-surface-hover flex items-center justify-center gap-2 border-t border-border-light {noMatchingItems
+					? 'bg-surface-hover'
+					: ''}"
+				onclick={() => {
+					close()
+					openCreateFolder()
+				}}
+			>
+				<PlusIcon class="inline" size={16} />
+				Create folder
+			</button>
+		{/snippet}
+	</Select>
+	{#if folderName && hovering && !loadingFolders && !disabled && !disableEditing}
+		<div class="absolute right-2 z-20">
+			<Button
+				variant="subtle"
+				unifiedSize="xs"
+				wrapperClasses="pl-1"
+				btnClasses="hover:bg-surface-tertiary"
+				onClick={() => {
+					editingFolder = folderName
+					viewFolder?.openDrawer()
+				}}
+				startIcon={{ icon: Pen }}
+				iconOnly
+			/>
+		</div>
+	{/if}
 </div>

package/package/components/FolderPicker.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     initialPath?: string;
     disabled?: boolean;
     disableEditing?: boolean;
+    size?: 'sm' | 'md';
+    drawerOffset?: number;
 };
 declare const FolderPicker: import("svelte").Component<Props, {}, "disabled" | "folderName" | "initialPath" | "disableEditing">;
 type FolderPicker = ReturnType<typeof FolderPicker>;

package/package/components/FolderUsageInfo.svelte

@@ -1,14 +1,15 @@
-<script lang="ts">import { FolderService } from '../gen';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { FolderService } from '../gen';
 import { workspaceStore } from '../stores';
 import Cell from './table/Cell.svelte';
-export let name;
-export let tabular = false;
-export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'];
-$: $workspaceStore && loadUsage();
-let usage = {};
+let { name, tabular = false, order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'] } = $props();
+let usage = $state({});
 async function loadUsage() {
     usage = await FolderService.getFolderUsage({ workspace: $workspaceStore, name });
 }
+run(() => {
+    $workspaceStore && loadUsage();
+});
 </script>
 
 {#if tabular}

package/package/components/FolderUsageInfo.svelte.d.ts

@@ -1,22 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FolderUsageInfo: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     name: string;
     tabular?: boolean;
-    order?: string[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FolderUsageInfo = InstanceType<typeof FolderUsageInfo>;
+    order?: any;
+}
+declare const FolderUsageInfo: import("svelte").Component<Props, {}, "">;
+type FolderUsageInfo = ReturnType<typeof FolderUsageInfo>;
 export default FolderUsageInfo;

package/package/components/GraphqlSchemaViewer.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
 import { editor as meditor, KeyMod, KeyCode } from 'monaco-editor';
 import { onDestroy, onMount } from 'svelte';
-let divEl = null;
+let divEl = $state(null);
 let editor;
-export let code = '';
+let { code = '', class: className = '' } = $props();
 async function loadMonaco() {
     editor = meditor.create(divEl, {
         value: code,
@@ -35,4 +35,4 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={divEl} class="{$$props.class ?? ''} editor"></div>
+<div bind:this={divEl} class="{className} editor"></div>

package/package/components/GraphqlSchemaViewer.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    code?: string;
+    class?: string;
 }
-declare const GraphqlSchemaViewer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    code?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type GraphqlSchemaViewer = InstanceType<typeof GraphqlSchemaViewer>;
+declare const GraphqlSchemaViewer: import("svelte").Component<Props, {}, "">;
+type GraphqlSchemaViewer = ReturnType<typeof GraphqlSchemaViewer>;
 export default GraphqlSchemaViewer;

package/package/components/GroupEditor.svelte

@@ -14,6 +14,7 @@ import { safeSelectItems } from './select/utils.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import { Trash } from 'lucide-svelte';
 import PermissionHistory from './PermissionHistory.svelte';
+import Alert from './common/alert/Alert.svelte';
 let { name } = $props();
 let can_write = $state(false);
 let group;
@@ -94,6 +95,13 @@ let reloadHistory = $state(0);
 </script>
 
 <div class="flex flex-col gap-6">
+	{#if name === 'wm_deployers'}
+		<Alert type="info" title="Deployer permissions">
+			Members of this group can preserve the original author (on_behalf_of / edited_by) when
+			deploying scripts, flows, apps, and triggers to this workspace. Without this permission,
+			deployed items will be reassigned to the deploying user.
+		</Alert>
+	{/if}
 	<Label label="Summary" for="summary">
 		<div class="flex flex-row gap-2">
 			<TextInput
@@ -129,12 +137,14 @@ let reloadHistory = $state(0);
 		{/if}
 		{#if members}
 			<TableCustom>
-				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-				<tr slot="header-row">
-					<th>user</th>
-					<th></th>
-					<th></th>
-				</tr>
+
+				{#snippet headerRow()}
+								<tr >
+						<th>user</th>
+						<th></th>
+						<th></th>
+					</tr>
+							{/snippet}
 				{#snippet body()}
 					<tbody>
 						{#each members ?? [] as { member_name, role }}<tr>
@@ -271,10 +281,12 @@ let reloadHistory = $state(0);
 			{#if instance_group?.emails}
 				<h2 class="mt-6 text-emphasis text-xs font-semibold">Members from the instance group</h2>
 				<TableCustom>
-					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
-						<th>user</th>
-					</tr>
+	
+					{#snippet headerRow()}
+										<tr >
+							<th>user</th>
+						</tr>
+									{/snippet}
 					{#snippet body()}
 						<tbody>
 							{#each instance_group?.emails ?? [] as email}<tr>

package/package/components/HistoricInputs.svelte

@@ -73,14 +73,13 @@ let jobsLoader = useJobsLoader(() => ({
     filters: {
         show_skipped: false,
         path: runnableId,
-        success: 'running',
-        arg: searchArgs ? JSON.stringify(searchArgs) : '',
-        per_page: 5
+        status: 'running',
+        arg: searchArgs ? JSON.stringify(searchArgs) : ''
     },
+    perPage: 5,
     jobKinds: getJobKinds(runnableType),
     syncQueuedRunsCount: false,
     refreshRate: 10000,
-    computeMinAndMax: undefined,
     currentWorkspace: $workspaceStore ?? '',
     skip: !runnableId
 }));

package/package/components/IconedResourceType.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { FileText } from 'lucide-svelte'
+	import { FileText, FolderOpen } from 'lucide-svelte'
 	import { APP_TO_ICON_COMPONENT } from './icons'
 	/**
 	 * @typedef {Object} Props
@@ -11,6 +11,7 @@
 	 * @property {boolean} [center]
 	 * @property {boolean} [isSelected]
 	 * @property {any} [formatExtension]
+	 * @property {boolean} [isFileset]
 	 */
 
 	/** @type {Props} */
@@ -22,7 +23,8 @@
 		width = '24px',
 		center = false,
 		isSelected = false,
-		formatExtension = undefined
+		formatExtension = undefined,
+		isFileset = false
 	} = $props()
 
 	let iconComponent = $derived(
@@ -45,6 +47,10 @@
 		<span class={isSelected ? 'text-secondary' : 'text-secondary'}>
 			<SvelteComponent {height} {width} size={widthInPixels} />
 		</span>
+	{:else if isFileset}
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+			<FolderOpen {height} {width} />
+		</span>
 	{:else if formatExtension}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
 			<FileText {height} {width} />