diff --git a/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte b/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte index 37182f3e..5dc14bfd 100644 --- a/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte +++ b/packages/dashboard/src/routes/(app)/dashboard/InstanceList.svelte @@ -5,6 +5,9 @@ import InstanceCard from './InstanceCard.svelte' import { faArrowDownAZ, faArrowDownZA } from '@fortawesome/free-solid-svg-icons' import Fa from 'svelte-fa' + import { page } from '$app/state' + import { onMount } from 'svelte' + import { goto } from '$app/navigation' type SortOptions = 'subdomain' | 'created' | 'power' type SortDirection = 'asc' | 'desc' @@ -14,6 +17,31 @@ let filterPower: 'all' | 'on' | 'off' = 'all' let sortDirection: SortDirection = 'asc' + const updateStateFromUrl = () => { + const params = page.url.searchParams + sortDirection = (params.get('sort') as SortDirection) || 'asc' + sortBy = (params.get('by') as SortOptions) || 'power' + filterPower = (params.get('f') as 'all' | 'on' | 'off') || 'all' + searchQuery = params.get('q') || '' + } + onMount(() => { + updateStateFromUrl() + }) + + const updateUrl = () => { + const params = new URLSearchParams() + if (sortDirection) params.set('sort', sortDirection) + if (sortBy) params.set('by', sortBy) + if (filterPower) params.set('f', filterPower) + if (searchQuery) params.set('q', searchQuery) + goto(`?${params.toString()}`, { replaceState: true, keepFocus: true, noScroll: true }) + } + + // Reactively update URL when state changes + $: if (sortBy || sortDirection || searchQuery || filterPower) { + updateUrl() + } + const sortFn = (type: SortOptions, direction: SortDirection) => { const multiplier = direction === 'asc' ? 1 : -1 switch (type) { @@ -78,7 +106,11 @@ -