fix search

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { clickoutside } from '@svelte-put/clickoutside';
-  import { goto } from "$app/navigation";
+  import { goto, invalidate } from "$app/navigation";
   import { page } from "$app/stores"; 
   import { get } from "svelte/store";
   import Icon from "@iconify/svelte";
@@ -19,7 +19,7 @@
     model = value?.model;
   });
 
-  const handleClose = () => {
+  const handleClose = async () => {
     modelStore.update((value) => {
       return {
         ...value,
@@ -28,7 +28,8 @@
     });
 
     $page.url.searchParams.delete('model');
-    goto(`?${$page.url.searchParams.toString()}`);
+    await goto(`?${$page.url.searchParams.toString()}`);
+    await invalidate(url => url.pathname.includes("/api/models"));
   };
   
   const handleClickNext = () => {
@@ -43,10 +44,9 @@
       handleClose();
     }
   };
-  const handleClickAuthor = () => {
+  const handleClickAuthor = async () => {
     $page.url.searchParams.set('search', author as string);
-    goto(`?${$page.url.searchParams.toString()}`);
-    handleClose()
+    handleClose();
   }
 </script>
 

src/routes/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import InfiniteScroll from "svelte-infinite-scroll";
+	import { page } from "$app/stores";
+
+	import { goto, invalidate } from "$app/navigation";
 	import Button from "$lib/components/Button.svelte";
 	import Card from "$lib/components/models/Card.svelte";
 	import Input from "$lib/components/fields/Input.svelte";
@@ -10,13 +13,10 @@
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import SubmitModel from "$lib/components/models/Submit.svelte";
 	import Drawer from "$lib/components/models/drawer/Drawer.svelte";
-	import { page } from "$app/stores";
-	import { goto } from "$app/navigation";
-	// import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
 
-	let form = {
+	$: form = {
 		filter: data?.filter,
 		search: data?.search,
 		page: "0",
@@ -30,18 +30,18 @@
 		refetch(true);
 	}
 	const handleChangeFilter = async (filter: string) => {
-		form = { ...form, filter, page: (0).toString()};
 		$page.url.searchParams.set('filter', filter);
-		goto(`?${$page.url.searchParams.toString()}`, { replaceState: true, invalidateAll: true });
+		await goto(`?${$page.url.searchParams.toString()}`);
+		await invalidate(url => url.pathname.includes("/api/models"));
 	}
 	let timeout: any;
 	const handleChangeSearch = async (search: string) => {
 		clearTimeout(timeout);
-		form = { ...form, search, page: (0).toString()};
-		timeout = setTimeout(() => {
+		timeout = setTimeout(async () => {
 			if (search === "") $page.url.searchParams.delete('search');
 			else $page.url.searchParams.set('search', search);
-			goto(`?${$page.url.searchParams.toString()}`, { replaceState: true, invalidateAll: true });
+			await goto(`?${$page.url.searchParams.toString()}`);
+			await invalidate(url => url.pathname.includes("/api/models"));
 		}, 500);
 	}
 	
@@ -107,6 +107,9 @@
 		{#each data.models as card}
 			<Card card={card} />
 		{/each}
+		{#if data.models.length === 0}
+			<p class="text-neutral-400 text-left w-full">No models found</p>
+		{/if}
 		<InfiniteScroll
 			elementScroll="{elementScroll ?? undefined}"
 			threshold={100}

src/routes/+page.ts

@@ -4,7 +4,8 @@ import { modelStore } from "$lib/stores/use-model";
 export async function load({ fetch, url }) {
   const model_param = url.searchParams.get("model")
   const search_param = url.searchParams.get("search") ?? undefined
-  const filter_param = url.searchParams.get("filter") ?? undefined
+  const filter_param = url.searchParams.get("filter") ?? "hotest"
+
   
   if (model_param) {
     const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}?full=true`, {
@@ -20,14 +21,7 @@ export async function load({ fetch, url }) {
     });
   }
 
-  
-  const data = {
-    filter: filter_param ?? "hotest",
-    page: "0",
-    search: search_param ?? ""
-  }
-
-  const response = await fetch(`/api/models?${new URLSearchParams(data)}`, {
+  const response = await fetch(`/api/models${url.search}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json"
@@ -39,6 +33,5 @@ export async function load({ fetch, url }) {
     total_items: models?.total_items ?? 0,
     search: search_param ?? "",
     filter: filter_param,
-    // model: model?.model ?? null
   }
 }