home page filter sync

frontend/src/lib/components/SearchItems.svelte

@@ -39,7 +39,7 @@
 	}
 	let plaintextItems = $derived(items?.map((item) => f(item)) ?? [])
 
-	$effect(() => {
+	$effect.pre(() => {
 		plaintextItems && filter != undefined && setTimeout(() => untrack(() => filterItems()), 0)
 	})
 </script>

frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -15,6 +15,7 @@
 		allowEmpty?: boolean
 		class?: string
 		children?: import('svelte').Snippet<[any]>
+		onSelected?: (value: any) => void
 	}
 
 	let {
@@ -25,6 +26,7 @@
 		tabListClass = '',
 		allowEmpty = false,
 		class: className = '',
+		onSelected,
 		children
 	}: Props = $props()
 
@@ -40,6 +42,7 @@
 			}
 			if (curr !== next && curr !== undefined) {
 				dispatch('selected', next)
+				onSelected?.(next)
 			}
 			return next
 		}

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

@@ -361,11 +361,11 @@
 		<div class="flex justify-start">
 			<ToggleButtonGroup
 				bind:selected={itemKind}
-				on:selected={() => {
+				onSelected={(v) => {
 					if (itemKind != 'all') {
-						subtab = itemKind
+						subtab = v
 					}
-					setQuery($page.url, 'kind', itemKind)
+					setQuery($page.url, 'kind', v)
 				}}
 				class="h-10"
 			>

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

@@ -5,13 +5,23 @@
 	import { APP_TO_ICON_COMPONENT } from '../icons'
 	import { onDestroy, onMount } from 'svelte'
 
-	export let filters: string[]
-	export let selectedFilter: string | undefined = undefined
-	export let resourceType = false
-	export let queryName = 'filter'
-	export let syncQuery = false
+	interface Props {
+		filters: string[]
+		selectedFilter?: string | undefined
+		resourceType?: boolean
+		queryName?: string
+		syncQuery?: boolean
+		bottomMargin?: boolean
+	}
 
-	export let bottomMargin: boolean = true
+	let {
+		filters,
+		selectedFilter = $bindable(undefined),
+		resourceType = false,
+		queryName = 'filter',
+		syncQuery = false,
+		bottomMargin = true
+	}: Props = $props()
 
 	const queryChange: (value: URL) => void = (url: URL) => {
 		if (syncQuery) {
@@ -53,11 +63,13 @@
 		queryChange(url)
 	}
 
-	$: filtersAndSelected = selectedFilter
-		? filters.includes(selectedFilter)
-			? filters
-			: [selectedFilter, ...filters]
-		: filters
+	let filtersAndSelected = $derived(
+		selectedFilter
+			? filters.includes(selectedFilter)
+				? filters
+				: [selectedFilter, ...filters]
+			: filters
+	)
 </script>
 
 {#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
@@ -82,7 +94,8 @@
 				>
 					<span style="height: 12px" class="-mt-0.5">
 						{#if resourceType}
-							<svelte:component this={getIconComponent(filter)} height="14px" width="14px" />
+							{@const SvelteComponent = getIconComponent(filter)}
+							<SvelteComponent height="14px" width="14px" />
 						{:else if filter.startsWith('u/')}
 							<User class="mr-0.5" size={14} />
 						{:else if filter.startsWith('f/')}