From ebf9347d3fd876689dba58bc24399e9036ef5b67 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Tue, 17 Mar 2026 21:14:33 +0100
Subject: [PATCH] fix: Folders as presets in FilterSearchbar (#8409)

* Folder presets in filter search bar

* nit max preset height
---
 .../src/lib/components/FilterSearchbar.svelte |  2 +-
 .../(root)/(logged)/resources/+page.svelte    | 21 ++++++++++++-------
 .../(root)/(logged)/variables/+page.svelte    | 21 ++++++++++++-------
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/FilterSearchbar.svelte b/frontend/src/lib/components/FilterSearchbar.svelte
index 8b902a8896..0161e21dd9 100644
--- a/frontend/src/lib/components/FilterSearchbar.svelte
+++ b/frontend/src/lib/components/FilterSearchbar.svelte
@@ -604,7 +604,7 @@
 		{#if !currentTag || !schema[currentTag]}
 			{#if presets.length}
 				<div class="text-xs px-2 my-2 font-bold">Presets</div>
-				<div class="mb-3 px-2 flex gap-2 flex-wrap">
+				<div class="mb-3 px-2 flex gap-2 flex-wrap max-h-24 overflow-y-auto">
 					{#each presets as preset}
 						{@render presetTag(preset)}
 					{/each}
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index eecfd72729..600cc45183 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -30,7 +30,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import type { ResourceType, WorkspaceDeployUISettings } from '$lib/gen'
-	import { OauthService, ResourceService, WorkspaceService, type ListableResource } from '$lib/gen'
+	import { FolderService, OauthService, ResourceService, WorkspaceService, type ListableResource } from '$lib/gen'
 	import {
 		enterpriseLicense,
 		userStore,
@@ -127,6 +127,7 @@
 	})
 
 	let showCreateButtons = $state(false)
+	let folders: string[] = $state([])
 
 	// FilterSearchbar setup
 	let userFoldersFilterType = $derived(
@@ -147,6 +148,12 @@
 		})
 	)
 	let filters = useUrlSyncedFilterInstance(untrack(() => resourcesFilterSchema))
+	let folderPresets = $derived([
+		...folders.map((f) => ({ name: `f/${f}`, value: `path_start:\\ f/${f}/` })),
+		...(resourcesFilterSchema.user_folders_only
+			? [{ name: resourcesFilterSchema.user_folders_only.label ?? '?', value: 'user_folders_only:\\ true' }]
+			: [])
+	])
 
 	async function loadResources(): Promise<void> {
 		resources = await loadResourceInternal(undefined, 'cache,state,app_theme')
@@ -538,11 +545,16 @@
 			})
 		}
 	})
+	async function loadFolders() {
+		folders = await FolderService.listFolderNames({ workspace: $workspaceStore! })
+	}
+
 	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			untrack(() => {
 				loadResources()
 				loadResourceTypes()
+				loadFolders()
 			})
 		}
 	})
@@ -895,12 +907,7 @@
 					class="max-w-[26rem] grow"
 					bind:value={filters.val}
 					placeholder="Filter resources..."
-					presets={[
-						{
-							name: resourcesFilterSchema.user_folders_only?.label ?? '?',
-							value: 'user_folders_only:\\ true'
-						}
-					]}
+					presets={folderPresets}
 				/>
 			</div>
 		</div>
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index 870bf8e7c4..ea48db42cd 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -22,7 +22,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import VariableEditor from '$lib/components/VariableEditor.svelte'
 	import type { ContextualVariable, ListableVariable, WorkspaceDeployUISettings } from '$lib/gen'
-	import { OauthService, VariableService, WorkspaceService } from '$lib/gen'
+	import { FolderService, OauthService, VariableService, WorkspaceService } from '$lib/gen'
 	import { enterpriseLicense, userStore, workspaceStore, userWorkspaces } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { canWrite, isOwner, truncate } from '$lib/utils'
@@ -51,6 +51,7 @@
 	// Collect unique values for filter autocomplete
 	let allPaths: string[] = $state([])
 	let allOwners: string[] = $state([])
+	let folders: string[] = $state([])
 
 	// FilterSearchbar setup
 	let userFoldersFilterType = $derived(
@@ -70,6 +71,12 @@
 		})
 	)
 	let filters = useUrlSyncedFilterInstance(untrack(() => variablesFilterSchema))
+	let folderPresets = $derived([
+		...folders.map((f) => ({ name: `f/${f}`, value: `path_start:\\ f/${f}/` })),
+		...(variablesFilterSchema.user_folders_only
+			? [{ name: variablesFilterSchema.user_folders_only.label ?? '?', value: 'user_folders_only:\\ true' }]
+			: [])
+	])
 	let contextualVariables: ContextualVariable[] = $state([])
 	let shareModal: ShareModal | undefined = $state()
 	let variableEditor: VariableEditor | undefined = $state()
@@ -175,11 +182,16 @@
 		sendUserToast(`Variable ${path} was deleted`)
 	}
 
+	async function loadFolders() {
+		folders = await FolderService.listFolderNames({ workspace: $workspaceStore! })
+	}
+
 	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			untrack(() => {
 				loadVariables()
 				loadContextualVariables()
+				loadFolders()
 			})
 		}
 	})
@@ -285,12 +297,7 @@
 					schema={variablesFilterSchema}
 					bind:value={filters.val}
 					placeholder="Filter variables..."
-					presets={[
-						{
-							name: variablesFilterSchema.user_folders_only?.label ?? '?',
-							value: 'user_folders_only:\\ true'
-						}
-					]}
+					presets={folderPresets}
 				/>
 			{/if}
 		</div>