store search filters in query

frontend/src/lib/components/home/ItemsList.svelte

@@ -35,6 +35,8 @@
 	import FlowIcon from './FlowIcon.svelte'
 	import RawAppRow from '../common/table/RawAppRow.svelte'
 	import { canWrite } from '$lib/utils'
+	import { page } from '$app/stores'
+	import { setQuery } from '$lib/navigation'
 
 	type TableItem<T, U extends 'script' | 'flow' | 'app' | 'raw_app'> = T & {
 		canWrite: boolean
@@ -56,7 +58,7 @@
 
 	let filteredItems: (TableScript | TableFlow | TableApp | TableRawApp)[] = []
 
-	let itemKind: 'script' | 'flow' | 'app' | 'all' = 'all'
+	let itemKind = ($page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
 
 	let shareModal: ShareModal
 	let moveDrawer: MoveDrawer
@@ -281,7 +283,13 @@
 <CenteredPage>
 	<div class="flex flex-wrap gap-2 items-center justify-between w-full">
 		<div class="flex justify-start">
-			<ToggleButtonGroup bind:selected={itemKind} class="h-10">
+			<ToggleButtonGroup
+				bind:selected={itemKind}
+				on:selected={() => {
+					setQuery($page.url, 'kind', itemKind)
+				}}
+				class="h-10"
+			>
 				<ToggleButton value="all" label="All" class="text-sm px-4 py-2" />
 				<ToggleButton value="script" icon={Code2} label="Scripts" class="text-sm px-4 py-2" />
 				{#if HOME_SEARCH_SHOW_FLOW}

frontend/src/lib/components/home/ListFilters.svelte

@@ -5,11 +5,18 @@
 	import { fade } from 'svelte/transition'
 	import { Badge } from '../common'
 	import { APP_TO_ICON_COMPONENT } from '../icons'
+	import { setQuery } from '$lib/navigation'
+	import { page } from '$app/stores'
 
 	export let filters: string[]
 	export let selectedFilter: string | undefined = undefined
 	export let resourceType = false
+	export let queryName = 'filter'
 
+	if (selectedFilter == undefined) {
+		let queryValue = $page.url.searchParams.get(queryName) ?? undefined
+		selectedFilter = queryValue
+	}
 	function getIconComponent(name: string) {
 		return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
 	}
@@ -32,6 +39,11 @@
 					)}
 					on:click={() => {
 						selectedFilter = selectedFilter == filter ? undefined : filter
+						if (selectedFilter) {
+							setQuery($page.url, queryName, selectedFilter)
+						} else {
+							setQuery($page.url, queryName, undefined)
+						}
 					}}
 					color={filter === selectedFilter ? 'blue' : 'gray'}
 					baseClass={filter === selectedFilter ? 'border border-blue-500' : 'border'}

frontend/src/lib/navigation.ts

@@ -1,6 +1,10 @@
 import { goto } from '$app/navigation'
 
-export async function setQuery(url: URL, key: string, value: string): Promise<void> {
-	url.searchParams.set(key, value)
+export async function setQuery(url: URL, key: string, value: string | undefined): Promise<void> {
+	if (value != undefined) {
+		url.searchParams.set(key, value)
+	} else {
+		url.searchParams.delete(key)
+	}
 	await goto(`?${url.searchParams.toString()}`)
 }

frontend/src/routes/(root)/(logged)/resources/+page.svelte

@@ -377,7 +377,12 @@
 		</div>
 		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
 		{#if tab != 'states'}
-			<ListFilters bind:selectedFilter={typeFilter} filters={types} resourceType />
+			<ListFilters
+				queryName="app_filter"
+				bind:selectedFilter={typeFilter}
+				filters={types}
+				resourceType
+			/>
 		{/if}
 
 		<div class="overflow-x-auto pb-40">