bind algoId with selector

src/lib/algo/SelectResolver.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-    import { Icon, InputRelation } from 'fuma'
-    import { mdiClose } from '@mdi/js'
+    import { Icon, InputRelation, urlParam } from 'fuma'
+    import { mdiClose, mdiTruckRemove } from '@mdi/js'
     import type { Algorithm } from '@prisma/client'
     import { algoToResolver, NewResolver, type Resolver } from '$lib/algo'
     import { api } from '$lib'
+    import { goto } from '$app/navigation'
 
     let {
         algo,
         onSelect,
     }: {
-        algo?: Algorithm
+        algo?: Algorithm | null
         onSelect: (resolver: Resolver | undefined) => unknown
     } = $props()
 
     type SelectType = 'proposed' | 'listed'
-    let selectedType = $state<SelectType>()
+    let selectedType = $state<SelectType>('listed')
     let resolverProposed = $state<Resolver>()
     let resolverListed = $state<Resolver>()
     let inputRelation = $state<InputRelation<Algorithm>>()
@@ -28,6 +29,20 @@
     async function handleSelectAlgorithm(a: Algorithm) {
         resolverListed = await algoToResolver(a)
         select('listed')
+        goto($urlParam.with({ algoId: a.id }), {
+            replaceState: true,
+            noScroll: true,
+            keepFocus: true,
+        })
+    }
+
+    function handleClear() {
+        inputRelation?.clear()
+        goto($urlParam.without('algoId'), {
+            replaceState: true,
+            noScroll: true,
+            keepFocus: true,
+        })
     }
 </script>
 
@@ -40,7 +55,7 @@
         >
             <span>{a.name}</span>
         </button>
-        <button onclick={() => inputRelation?.clear()} class="btn btn-square">
+        <button onclick={handleClear} class="btn btn-square">
             <Icon path={mdiClose} />
         </button>
     </div>

src/routes/analyze/+page.server.ts

@@ -0,0 +1,11 @@
+import { z } from 'fuma'
+import { parseQuery } from 'fuma/server'
+import { prisma } from '$lib/server'
+
+export const load = async ({ url }) => {
+    const { algoId } = parseQuery(url, { algoId: z.coerce.number().nullish() })
+    if (!algoId) return { algo: null }
+    return {
+        algo: await prisma.algorithm.findFirst({ where: { id: algoId } }),
+    }
+}

src/routes/analyze/+page.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
     import { Analyze } from '$lib/analyze'
-    import { SelectResolver } from '$lib/algo'
+    import { algoToResolver, SelectResolver } from '$lib/algo'
     import type { Resolver } from '$lib'
+    import { onMount } from 'svelte'
 
+    let { data } = $props()
     let resolver = $state<Resolver | undefined>()
+
+    onMount(async () => {
+        if (!data.algo) return
+        resolver = await algoToResolver(data.algo)
+    })
 </script>
 
 <Analyze {resolver}>
-    <SelectResolver onSelect={(r) => (resolver = r)} />
+    <SelectResolver onSelect={(r) => (resolver = r)} algo={data.algo} />
 </Analyze>