some changes

src/lib/components/community/Card.svelte

@@ -8,9 +8,10 @@
 	import Reactions from "./reactions/Reactions.svelte";
 
   export let card: CommunityCard;
+  export let form: Record<string, string>;
 
   const handleClick = async () => {
-    const request = await fetch(`/api/community/${card?.id}`);
+    const request = await fetch(`/api/community/${card?.id}?${new URLSearchParams(form)}`);
     const { gallery, next, previous } = await request.json();
     galleryStore.set({
       gallery,
@@ -27,7 +28,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1] overflow-hidden"
+  class="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-90 hover:brightness-100 z-[1] overflow-hidden"
   on:click={handleClick}
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">

src/lib/components/community/viewer/Viewer.svelte

@@ -7,10 +7,10 @@
   import Icon from "@iconify/svelte";
 
   import { galleryStore } from "$lib/stores/use-gallery";
-  import UserIsLogged from '$lib/components/UserIsLogged.svelte';
 	import Reactions from '../reactions/Reactions.svelte';
 	import Button from '$lib/components/Button.svelte';
 
+  export let form: Record<string, string>;
   let { open, gallery, previous, next } = get(galleryStore);
   let loading = false;
 
@@ -36,7 +36,7 @@
   const handlePagination = async (id?: string) => {
     if (!id) return;
     loading = true;
-    const request = await fetch(`/api/community/${id}`);
+    const request = await fetch(`/api/community/${id}?${new URLSearchParams(form)}`);
     const { gallery, next, previous } = await request.json();
     galleryStore.set({
       gallery,
@@ -48,6 +48,14 @@
     $page.url.searchParams.set('gallery', id);
     goto(`?${$page.url.searchParams.toString()}`);
   };
+
+  // to url search params
+  const handleClickModel = (id?: string) => {
+    if (!id) return;
+    $page.url.searchParams.set('model', id);
+    $page.url.searchParams.delete('gallery');
+    goto(`/?${$page.url.searchParams.toString()}`);
+  };
 </script>
 
 <div
@@ -55,77 +63,84 @@
   class:opacity-0={!open}
   class:pointer-events-none={!open}
 >
-  <div
-    class="mx-auto lg:h-2/3 w-full max-w-6xl bg-neutral-900 transition-all duration-200 grid grid-cols-1 lg:grid-cols-2 rounded-xl overflow-hidden"
-    class:translate-x-full={!open}
-    use:clickoutside on:clickoutside={handleClose}
-  >
-    {#if gallery?.id}
-      <img src={env.PUBLIC_FILE_UPLOAD_DIR}/{gallery?.image} alt={gallery?.prompt} class="w-full h-full object-cover" />
-      <div class="flex flex-col justify-between w-full">
-        <div class="w-full p-8">
-          <header class="w-full flex items-start justify-between">
-            <div class="flex items-center justify-start gap-4">
-              <img src={gallery?.user?.picture} class="w-12 h-12 rounded-full object-cover" alt={gallery?.user?.name} />
+  {#if open}
+    <div
+      class="mx-auto w-full max-w-6xl bg-neutral-900 transition-all duration-200 lg:grid lg:grid-cols-2 rounded-xl overflow-hidden"
+      use:clickoutside on:clickoutside={handleClose}
+    >
+      {#if gallery?.id}
+        <img src={env.PUBLIC_FILE_UPLOAD_DIR}/{gallery?.image} alt={gallery?.prompt} class="w-full object-cover h-[200px] lg:h-auto" />
+        <div class="flex flex-col justify-between w-full overflow-auto flex-1">
+          <div class="w-full p-8">
+            <header class="w-full flex items-start justify-between">
+              <div class="flex items-center justify-start gap-4">
+                <img src={gallery?.user?.picture} class="w-12 h-12 rounded-full object-cover" alt={gallery?.user?.name} />
+                <div>
+                  <p class="text-neutral-100 font-bold text-lg">
+                    {gallery?.user?.name}
+                  </p>
+                  <p class="text-neutral-400 text-sm">
+                    @{gallery?.user?.preferred_username}
+                  </p>
+                </div>
+              </div>
+              <button on:click={handleClose}>
+                <Icon icon="carbon:close" class="w-6 h-6 text-white" />
+              </button>
+            </header>
+            <div class="mt-8 grid grid-cols-1 gap-5 overflow-auto">
+              <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
+              <div>
+                <button
+                  class="flex items-center justify-start gap-4 cursor-pointer w-full text-left transition-all duration-200 hover:bg-neutral-950/50 py-3 pr-3 pl-6 -mx-3 group relative"
+                  on:click={() => handleClickModel(gallery?.model?.id)}
+                >
+                  <img src={gallery?.model?.image} alt={gallery?.model?.title} class="w-14 h-14 rounded-lg object-cover" />
+                  <div>
+                    <p class="text-neutral-200 text-base font-medium">{gallery?.model?.title}</p>
+                    <p class="text-neutral-400 text-sm">{gallery?.model?.id}</p>
+                  </div>
+                  <div class="rounded-full absolute top-1/2 -translate-y-1/2 text-neutral-100 w-8 h-8 right-4 bg-pink-500 flex items-center justify-center transition-all duration-200 group-hover:opacity-100 opacity-0">
+                    <Icon icon="tabler:arrow-up" class="w-5 h-5 transform rotate-45 font-bold" />
+                  </div>
+                </button>
+              </div>
               <div>
-                <p class="text-neutral-100 font-bold text-lg">
-                  {gallery?.user?.name}
+                <p class="text-neutral-400 font-semibold text-xs uppercase">
+                  Prompt
                 </p>
-                <p class="text-neutral-400 text-sm">
-                  @{gallery?.user?.preferred_username}
+                <p class="text-neutral-200 text-base font-medium mt-2">"{gallery?.prompt}"</p>
+              </div>
+              <div>
+                <p class="text-neutral-400 font-semibold text-xs uppercase">
+                  Dimension
                 </p>
+                <p class="text-neutral-200 text-base font-medium mt-2">1024x1024</p>
               </div>
             </div>
-            <button on:click={handleClose}>
-              <Icon icon="carbon:close" class="w-6 h-6 text-white" />
-            </button>
-          </header>
-          <div class="mt-8 grid grid-cols-1 gap-5">
-            <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
-            <div>
-              <a
-                href="/generate?model={gallery?.model?.id}"
-                class="flex items-center justify-start gap-4 rounded-lg cursor-pointer w-full text-left transition-all duration-200 hover:bg-neutral-950/50 p-3 -mx-3 group relative"
-              >
-                <img src={gallery?.model?.image} alt={gallery?.model?.title} class="w-14 h-14 rounded-lg object-cover" />
-                <div>
-                  <p class="text-neutral-200 text-base font-medium">{gallery?.model?.title}</p>
-                  <p class="text-neutral-400 text-sm">{gallery?.model?.id}</p>
-                </div>
-                <div class="rounded-full absolute top-1/2 -translate-y-1/2 text-neutral-100 w-8 h-8 right-4 bg-pink-500 flex items-center justify-center transition-all duration-200 group-hover:opacity-100 opacity-0">
-                  <Icon icon="tabler:arrow-up" class="w-5 h-5 transform rotate-45 font-bold" />
-                </div>
-              </a>
-            </div>
-            <div>
-              <p class="text-neutral-400 font-semibold text-xs uppercase">
-                Prompt
-              </p>
-              <p class="text-neutral-200 text-base font-medium mt-2">"{gallery?.prompt}"</p>
-            </div>
           </div>
+          <footer class="border-t border-neutral-800 px-8 py-6 flex items-center justify-between">
+            <Button
+              size="lg"
+              theme="dark"
+              disabled={!previous}
+              loading={loading}
+              onClick={() => handlePagination(previous)}
+            >
+              Previous
+            </Button>
+            <Button
+              size="lg"
+              theme="light"
+              loading={loading}
+              disabled={!next}
+              onClick={() => handlePagination(next)}
+            >
+              Next
+            </Button>
+          </footer>
         </div>
-        <footer class="border-t border-neutral-800 px-8 py-6 flex items-center justify-between">
-          <Button
-            size="lg"
-            theme="dark"
-            disabled={!previous}
-            loading={loading}
-            onClick={() => handlePagination(previous)}
-          >
-            Previous
-          </Button>
-          <Button
-            size="lg"
-            theme="light"
-            loading={loading}
-            disabled={!next}
-            onClick={() => handlePagination(next)}
-          >
-            Next
-          </Button>
-        </footer>
-      </div>
-    {/if}
-  </div>
+      {/if}
+    </div>
+  {/if}
 </div>

src/lib/components/models/Card.svelte

@@ -22,7 +22,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
+  class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-90 hover:brightness-100 z-[1]"
   on:click={handleClick}
 >
   <div class="w-full h-[350px] relative z-[1] mb-3 overflow-hidden">

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

@@ -9,6 +9,7 @@
   import UserIsLogged from '$lib/components/UserIsLogged.svelte';
   import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
 	import { env } from '$env/dynamic/public';
+	import Button from '$lib/components/Button.svelte';
 
   let { open, model } = get(modelStore);
 
@@ -31,63 +32,86 @@
 </script>
 
 <div
-  class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-40 backdrop-blur transition-all duration-100"
+  class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-0 backdrop-blur transition-all duration-100"
   class:opacity-0={!open}
   class:pointer-events-none={!open}
+  class:!z-40={open}
 >
-  <div
-    class="ml-auto w-full max-w-3xl bg-neutral-950 h-full border-l border-neutral-800 transition-all duration-200 flex flex-col justify-between"
-    class:translate-x-full={!open}
-    use:clickoutside on:clickoutside={handleClose}
-  >
-    <div class="p-8 overflow-auto">
-      <header class="flex w-full justify-between items-start mb-6">
-        <div class="flex items-center justify-start gap-3 lg:gap-6">
-          <img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
-          <div>
-            <p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
-              {model?.title ?? model?.id}
-            </p>
-            <div class="justify-start items-center gap-2 flex">
-              <div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
-                <Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
-                {model?.likes ?? 0}
-              </div>
-              <div class="bg-blue-500 bg-opacity-20 border border-blue-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
-                <Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
-                {model?.downloads ?? 0}
-              </div>
+  {#if open}
+    <div
+      class="ml-auto w-full max-w-3xl bg-neutral-950 h-full border-l border-neutral-800 transition-all duration-200 flex flex-col justify-between"
+      use:clickoutside on:clickoutside={handleClose}
+      >
+      <div class="p-8 overflow-auto">
+        <header class="flex w-full justify-between items-start mb-6 pr-6">
+          <div class="flex items-center justify-start gap-3 lg:gap-6">
+            <img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
+            <div>
+              <p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
+                {model?.title ?? model?.id}
+              </p>
+              <a href="https://huggingface.co/{model?.id}" class="text-neutral-400 underline hover:text-blue-00 flex items-center justify-start gap-1">
+                <Icon icon="iconamoon:link-external-fill" class="w-4 h-4" /> 
+                View on HuggingFace
+              </a>
             </div>
           </div>
-        </div>
-        <button on:click={handleClose}>
-          <Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
-        </button>
-      </header>
-      <main>
-        {#if model?.gallery && model?.gallery?.length > 0}
-          <div>
-            <p class="text-neutral-400 uppercase text-xs font-bold">Examples</p>
-            <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-5 mt-2">
-              {#each model?.gallery as example}
-                <div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
-                  <img src="{env.PUBLIC_FILE_UPLOAD_DIR}/{example.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
-                </div>
-              {/each}
+          <button on:click={handleClose}>
+            <Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
+          </button>
+        </header>
+        <main>
+          <div class="justify-start items-center gap-4 flex mb-6">
+            <div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm">
+              <Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
+              {model?.likes ?? 0}
             </div>
+            <a
+              href="/"
+              class="bg-blue-500 bg-opacity-20 border border-blue-500 hover:bg-opacity-60 transition-all duration-200 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
+            >
+              <Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
+              View files
+            </a>
+            <a
+              href="/generate?model={model?.id}"
+              class="bg-pink-500 bg-opacity-20 hover:bg-opacity-60 transition-all duration-200 border border-pink-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
+            >
+              <Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-4 lg:h-4 w-3 h-3 text-pink-500" />
+              Generate
+            </a>
           </div>
+          {#if model?.gallery && model?.gallery?.length > 0}
+            <div>
+              <p class="text-neutral-400 uppercase text-xs font-bold">Examples</p>
+              <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-5 mt-2">
+                {#each model?.gallery as example}
+                  <div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
+                    <img src="{env.PUBLIC_FILE_UPLOAD_DIR}/{example.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {:else}
+            <div class="bg-neutral-900 rounded-lg p-8 text-center">
+              <p class="text-neutral-400 font-base">No generation examples available for this model</p>
+              <a href="/generate?model={model?.id}" class="text-neutral-100 underline">
+                Generate the first one
+              </a>
+            </div>
+          {/if}
+        </main>
+      </div>
+      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
+        <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
+          Commentaires ({model?.comments?.length ?? 0})
+        </p>
+        {#if model?.id}
+          <UserIsLogged>
+            <Comments comments={model?.comments} model={model} />
+          </UserIsLogged>
         {/if}
-      </main>
+      </footer>
     </div>
-    <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
-      <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
-        Commentaires ({model?.comments?.length ?? 0})
-      </p>
-      {#if model?.id}
-        <UserIsLogged>
-          <Comments comments={model?.comments} model={model} />
-        </UserIsLogged>
-      {/if}
-    </footer>
-  </div>
+  {/if}
 </div>

src/lib/components/sidebar/Sidebar.svelte

@@ -2,11 +2,13 @@
   import cookies from 'js-cookie';
   import Icon from "@iconify/svelte"
   import { get } from 'svelte/store';
+	import { page } from '$app/stores';
 
   import { userStore, openWindowLogin } from "$lib/stores/use-user";
 	import { SIDEBAR_MENUS } from "$lib/utils";
 
 	import Menu from "./Menu.svelte";
+	import { browser } from '$app/environment';
 
   let isOpen = false;
   let user = get(userStore);
@@ -23,6 +25,13 @@
     cookies.remove("hf_access_token");
     window.location.href = "/";
   }
+
+  // sveltekit close sidebar on route change
+  if (browser) {
+    page.subscribe((value) => {
+      if (isOpen) handleClick();
+    });
+  }
 </script>
 
 <button class="bg-transparent absolute top-10 right-8 cursor-pointer xl:hidden" on:click="{handleClick}">

src/routes/+page.svelte

@@ -26,7 +26,10 @@
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
 	if (data?.model?.id) {
-		modelStore.set(data.model);
+		modelStore.set({
+			model: data.model,
+			open: true
+		});
 	}
 
 	const handleFetchMore = async () => {
@@ -48,7 +51,10 @@
 		const request = await fetch(`/api/models?${new URLSearchParams(form)}`);
 		const response = await request.json();
 		if (add) data = {...data, models: [...data.models, ...response.cards ]};
-		else data = response;
+		else {
+			data.models = response.cards;
+			data.total_items = response.total_items;
+		}
 	}
 </script>
 
@@ -61,6 +67,7 @@
 	<Dialog open={submitModelDialog} onClose={() => submitModelDialog = false}>
 		<SubmitModel onClose={() => submitModelDialog = false} />
 	</Dialog>
+	<Drawer />
 	<h1 class="text-white font-semibold text-2xl">
 		Explore Models ({data?.total_items ?? 0})
 	</h1>
@@ -110,5 +117,4 @@
 		/>
 		<GoTop />
 	</div>
-	<Drawer />
 </main>

src/routes/api/community/[id]/+server.ts

@@ -3,8 +3,10 @@ import prisma from '$lib/prisma';
 
 /** @type {import('./$types').RequestHandler} */
 
-export async function GET({ params } : RequestEvent) {
+export async function GET({ params, url } : RequestEvent) {
   const id = params.id;
+  const filter = url.searchParams.get('filter') || 'new'
+  const search = url.searchParams.get('search') || ''
 
   const gallery = await prisma.gallery.findFirst({
     where: {
@@ -63,7 +65,20 @@ export async function GET({ params } : RequestEvent) {
       isPublic: true,
       createdAt: {
         lt: gallery.createdAt
+      },
+      OR: [
+        { prompt: { contains: search } },
+      ],
+    },
+    orderBy: {
+      ...(filter === 'new' ? {
+        createdAt: 'desc'
+      } : {
+        reactions: {
+          _count: 'desc'
+        }
       }
+      )
     },
     select: {
       id: true,
@@ -75,7 +90,20 @@ export async function GET({ params } : RequestEvent) {
       isPublic: true,
       createdAt: {
         gt: gallery.createdAt
+      },
+      OR: [
+        { prompt: { contains: search } },
+      ],
+    },
+    orderBy: {
+      ...(filter === 'new' ? {
+        createdAt: 'desc'
+      } : {
+        reactions: {
+          _count: 'desc'
+        }
       }
+      )
     },
     select: {
       id: true,

src/routes/gallery/+page.svelte

@@ -53,7 +53,7 @@
 	<h1 class="text-white font-semibold text-2xl">
 		Community Gallery ({data.total_items})
 	</h1>
-	<div class="flex items-center justify-between mt-5">
+	<div class="flex items-start sm:items-center justify-between mt-5 flex-col sm:flex-row gap-5 sm:justify-between">
 		<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
 		<div class="items-center justify-end gap-5 hidden lg:flex">
 			<!-- <UserIsLogged> -->
@@ -74,7 +74,7 @@
 	<!-- mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-5 mt-8 lg:mt-10 -->
 	<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}
-			<Card card={card} />
+			<Card card={card} form={form} />
 		{/each}
 		<InfiniteScroll
 			elementScroll="{elementScroll ?? undefined}"
@@ -84,5 +84,5 @@
 		/>
 		<GoTop />
 	</div>
-	<GalleryViewer />
+	<GalleryViewer form={form} />
 </main>