drawer gallery view + WIP: redo the response check, user is able to post multiple time the same img

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

@@ -71,8 +71,8 @@
       {#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="w-full p-6">
+            <header class="w-full flex items-start justify-between px-2 pt-2">
               <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>
@@ -89,10 +89,12 @@
               </button>
             </header>
             <div class="mt-8 grid grid-cols-1 gap-5 overflow-auto">
-              <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
+              <div class="w-full px-2">
+                <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
+              </div>
               <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"
+                  class="flex items-center justify-start gap-4 cursor-pointer w-full text-left transition-all duration-200 hover:bg-neutral-950/50 p-3 group relative rounded-lg"
                   on:click={() => handleClickModel(gallery?.model?.id)}
                 >
                   <img src={gallery?.model?.image} alt={gallery?.model?.title} class="w-14 h-14 rounded-lg object-cover" />
@@ -105,13 +107,13 @@
                   </div>
                 </button>
               </div>
-              <div>
+              <div class="px-2">
                 <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>
+              <div class="px-2">
                 <p class="text-neutral-400 font-semibold text-xs uppercase">
                   Dimension
                 </p>

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 { browser } from '$app/environment';
 
   let { open, model } = get(modelStore);
 
@@ -28,8 +29,15 @@
     $page.url.searchParams.delete('model');
     goto(`?${$page.url.searchParams.toString()}`);
   };
-
-  $: console.log(model);
+  
+  const handleClickNext = () => {
+    // scroll into view
+    const element = document.getElementById('gallery_examples');
+    element?.scrollBy({
+      left: 300,
+      behavior: 'smooth'
+    });
+  }
 </script>
 
 <div
@@ -51,7 +59,7 @@
               <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}" target="_blank" class="text-neutral-400 underline hover:text-blue-00 flex items-center justify-start gap-1">
+              <a href="https://huggingface.co/{model?.id}" target="_blank" class="text-neutral-400 underline hover:text-neutral-300 flex items-center justify-start gap-1">
                 <Icon icon="iconamoon:link-external-fill" class="w-4 h-4" /> 
                 View on HuggingFace
               </a>
@@ -83,15 +91,23 @@
             </a>
           </div>
           {#if model?.gallery && model?.gallery?.length > 0}
-            <div>
+            <div class="-mr-8 relative">
               <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">
+              <div id="gallery_examples" class="w-full h-[300px] mt-2 flex flex-nowrap overflow-auto gap-5 relative">
                 {#each model?.gallery as example}
-                  <div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
+                  <div class="w-[300px] min-w-[300px] h-full relative">
                     <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 class="w-[100px] h-full absolute right-0 top-0 bg-gradient-to-r from-transparent to-neutral-950 flex items-center justify-end pr-4">
+                <button
+                  class="w-8 h-8 rounded-full bg-neutral-100/20 flex items-center justify-center text-neutral-100 hover:bg-neutral-100/40 transition-all duration-200"
+                  on:click={handleClickNext}
+                >
+                  <Icon icon="tabler:arrow-narrow-right" class="w-5 h-5" />
+                </button>
+              </div>
             </div>
           {:else}
             <div class="bg-neutral-900 rounded-lg p-8 text-center">

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

@@ -29,7 +29,11 @@ export async function GET({ url, params } : RequestEvent) {
           },
           where: {
             isPublic: true
-          }
+          },
+          orderBy: {
+            createdAt: 'desc'
+          },
+          take: 10
         },
         comments: {
           select: {