Filtering

We can use the same approach to add filtering. Add an <input> to the <form>…

<input class="rounded" name="filter" value={page.url.searchParams.get('filter')} />

form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

[name='filter'] {
	width: 100%;
	padding: 1rem;
}

…and notice that it’s already wired up. We can neaten the URL when no filter is specified by deleting the empty filter param in our oninput handler, if we want.

In Files.svelte, add some filtering logic…

let filter = $derived(page.url.searchParams.get('filter') ?? '');

function matches(item: FileData, filter: string) {
	return !filter || item.name.toLowerCase().includes(filter.toLowerCase());
}

…and use it in list:

{#if f.kind === 'folder'}
	{@render folder(f, depth + 1)}
+{:else if matches(f, filter)}
	{@render file(f)}
{/if}