keep model in URL to be able to share it or refresh

src/lib/components/models/Card.svelte

@@ -2,6 +2,8 @@
   import { modelStore } from "$lib/stores/use-model";
 	import type { ModelCard } from "$lib/type";
 	import Icon from "@iconify/svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores"; 
 
   export let card: ModelCard;
 
@@ -9,6 +11,8 @@
     const request = await fetch(`/api/models/${card?.id?.replace("/", "@")}?full=true`);
     const { model } = await request.json();
     modelStore.set(model);
+    $page.url.searchParams.set('model', card?.id);
+    goto(`?${$page.url.searchParams.toString()}`);
   };
 </script>
 

src/lib/components/models/drawer/Drawer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { clickoutside } from '@svelte-put/clickoutside';
-
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores"; 
   import { get } from "svelte/store";
   import Icon from "@iconify/svelte";
 
@@ -16,6 +17,9 @@
 
   const handleClose = () => {
     modelStore.set(undefined);
+
+    $page.url.searchParams.delete('model');
+    goto(`?${$page.url.searchParams.toString()}`);
   };
 </script>
 

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import InfiniteScroll from "svelte-infinite-scroll";
+
+	import { modelStore } from "$lib/stores/use-model.js";
 	import Button from "$lib/components/Button.svelte";
 	import Card from "$lib/components/models/Card.svelte";
 	import Input from "$lib/components/fields/Input.svelte";
@@ -23,6 +25,10 @@
 
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
+	if (data?.model?.id) {
+		modelStore.set(data.model);
+	}
+
 	const handleFetchMore = async () => {
 		form = {...form, page: (Number(form.page) + 1).toString()};
 		refetch(true);
@@ -41,7 +47,7 @@
 	const refetch = async (add: boolean) => {
 		const request = await fetch(`/api/models?${new URLSearchParams(form)}`);
 		const response = await request.json();
-		if (add) data = {...data, cards: [...data.cards, ...response.cards ]};
+		if (add) data = {...data, models: [...data.models, ...response.models ]};
 		else data = response;
 	}
 </script>
@@ -56,7 +62,7 @@
 		<SubmitModel onClose={() => submitModelDialog = false} />
 	</Dialog>
 	<h1 class="text-white font-semibold text-2xl">
-		Explore Models ({data.total_items})
+		Explore Models ({data?.total_items ?? 0})
 	</h1>
 	<div class="flex items-start sm:items-center justify-between mt-5 flex-col sm:flex-row gap-5 sm:justify-between">
 		<Radio options={MODELS_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
@@ -93,13 +99,13 @@
 		<Input value={form.search} placeholder="Filter by model name" onChange={handleChangeSearch} />
 	</div>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
-		{#each data.cards as card}
+		{#each data.models as card}
 			<Card card={card} />
 		{/each}
 		<InfiniteScroll
 			elementScroll="{elementScroll ?? undefined}"
 			threshold={100}
-			hasMore={data.total_items > data.cards.length}
+			hasMore={data.total_items > data.models.length}
 			on:loadMore={handleFetchMore}
 		/>
 		<GoTop />

src/routes/+page.ts

@@ -1,10 +1,29 @@
-export async function load({ fetch }) {
+export async function load({ fetch, url }) {
+  const model_param = url.searchParams.get("model")
+
+  let model;
+
+  if (model_param) {
+    const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    })
+    const model_response = await model_request?.clone().json().catch(() => null);
+    model = model_response
+  }
+
   const response = await fetch("/api/models?page=0&filter=hotest", {
     method: "GET",
     headers: {
       "Content-Type": "application/json"
     }
   })
-  const data = await response.json()
-  return data
+  const models = await response.json()
+  return {
+    models: models?.cards ?? [],
+    total_items: models?.total_items ?? 0,
+    model: model?.model ?? null
+  }
 }