fix: click on model doesnt display drawer

src/lib/components/models/Card.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import type { ModelCard } from "$lib/type";
 	import Icon from "@iconify/svelte";
-  import { goto } from "$app/navigation";
+  import { goto, invalidate } from "$app/navigation";
   import { page } from "$app/stores"; 
 	import Button from "$lib/components/Button.svelte";
 	import { success } from "$lib/utils/toaster";
 	import { userStore } from "$lib/stores/use-user";
 
   export let card: ModelCard;
-
+  export let onClick: (modelId: string) => void;
 
   const handleClick = async () => {
     $page.url.searchParams.set('model', card?.id);
     goto(`?${$page.url.searchParams.toString()}`);
+    onClick(card?.id);
   };
 
   const publish = async () => {

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { browser } from "$app/environment";
 	import InfiniteScroll from "svelte-infinite-scroll";
 	import { page } from "$app/stores";
+	import { modelStore } from "$lib/stores/use-model";
 
 	import { goto } from "$app/navigation";
 	import Button from "$lib/components/Button.svelte";
@@ -35,6 +36,9 @@
 
 	onMount(() => {
 		refetch(false);
+		if ($page.url.searchParams.get('model')) {
+			getModel($page.url.searchParams.get('model') as string);
+		}
 	});
 
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
@@ -71,7 +75,21 @@
 			data.models = response.cards;
 			data.total_items = response.total_items;
 		}
-	}	
+	}
+
+	const getModel = async (modelId: string) => {
+		const model_request = await fetch(`/api/models/${modelId?.replace("/", "@")}?full=true`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    })
+    const data = await model_request?.clone().json().catch(() => null);
+    modelStore.set({
+      model: data?.model ?? null,
+      open: true
+    });
+	}
 </script>
 
 <svelte:head>
@@ -135,7 +153,7 @@
 	</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.models as card}
-			<Card card={card} />
+			<Card card={card} onClick={getModel} />
 		{/each}
 		{#if data.models.length === 0}
 			<p class="text-neutral-400 text-left w-full">No models found</p>

src/routes/+page.ts

@@ -1,22 +0,0 @@
-import { modelStore } from "$lib/stores/use-model";
-
-/** @type {import('./$types').PageServerLoad} */
-export async function load({ fetch, url }) {
-  const model_param = url.searchParams.get("model")
-  
-  if (model_param) {
-    const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}?full=true`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json"
-      }
-    })
-    const data = await model_request?.clone().json().catch(() => null);
-    modelStore.set({
-      model: data?.model ?? null,
-      open: true
-    });
-  }
-  return {
-  }
-}