gallery comment

prisma/schema.prisma

@@ -35,7 +35,7 @@ model Gallery {
   modelId   String
   user      User?      @relation(fields: [userId], references: [sub])
   userId    String?
-  Comment   Comment[]
+  comments  Comment[]
 }
 
 model Reaction {

src/lib/components/community/drawer/Comments.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { error } from "$lib/utils/toaster";
+
+  import Button from "$lib/components/Button.svelte";
+	import type { CommentType, CommunityCard } from "$lib/type";
+  import Comment from "$lib/components/comments/Comment.svelte";
+
+  export let comments: CommentType[] = [];
+  export let gallery: CommunityCard;
+
+  let text = "";
+  let loading = false;
+
+  const handleSubmit = async () => {
+    loading = true;
+    const comment_request = await fetch(`/api/community/${gallery?.id}/comments`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ text }),
+    });
+
+    const comment_response = await comment_request.json();
+    if (comment_response.error) {
+      error(comment_response.error)
+    } else {
+      comments = [comment_response.comment, ...comments];
+      text = "";
+    }
+    loading = false;
+  }
+
+  const handleChange = async (event: any) => {
+    text = event.target.value;
+  }
+</script>
+
+<div class="grid grid-cols-1 gap-3 overflow-auto h-full max-h-[300px]">
+    {#if comments?.length === 0}
+      <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
+    {/if}
+    {#each comments as comment}
+      <Comment comment={comment} />
+    {/each}
+</div>
+<div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7">
+  <textarea
+    value={text}
+    class="rounded-xl bg-neutral-900 text-neutral-200 text-base placeholder:text-neutral-500 outline-none resize-none p-4 w-full"
+    placeholder="Write a comment..."
+    on:input={handleChange}
+  />
+  <Button
+    theme="blue"
+    size="md"
+    icon="carbon:send-alt-filled"
+    iconPosition="right"
+    loading={loading}
+    disabled={text.length < 3}
+    onClick={handleSubmit}
+  >
+    Post
+  </Button>
+</div>

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { clickoutside } from '@svelte-put/clickoutside';
+  import { goto, invalidate } from "$app/navigation";
+  import { page } from "$app/stores"; 
+  import { get } from "svelte/store";
+  import Icon from "@iconify/svelte";
+
+  import { galleryStore } from "$lib/stores/use-gallery";
+  import UserIsLogged from '$lib/components/UserIsLogged.svelte';
+  import Comments from '$lib/components/community/drawer/Comments.svelte';
+  import Reactions from '$lib/components/community/reactions/Reactions.svelte';
+  
+  export let form: Record<string, string> | undefined = undefined;
+  let { open, gallery, next, previous } = get(galleryStore);
+
+  galleryStore.subscribe((value) => {
+    open = value?.open;
+    gallery = value?.gallery;
+    next = value?.next;
+    previous = value?.previous;
+  });
+
+  const handleClose = async () => {
+    galleryStore.update((value) => {
+      return {
+        ...value,
+        open: false,
+      };
+    });
+
+    $page.url.searchParams.delete('model');
+    await goto(`?${$page.url.searchParams.toString()}`);
+    await invalidate(url => url.pathname.includes("/api/models"));
+  };
+  
+  const handleClickNext = () => {
+    const element = document.getElementById('gallery_examples');
+    element?.scrollBy({
+      left: 300,
+      behavior: 'smooth'
+    });
+  }
+  const handlePressEscape = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      handleClose();
+    }
+  };
+</script>
+
+<div
+  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}
+>
+  {#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}
+      >
+      {#if gallery?.id}
+        <div class="overflow-auto p-8">
+          <header class="mb-6 justify-between items-start flex">
+            <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 cursor-pointer" />
+            </button>
+          </header>
+          <main class="w-full grid grid-cols-1 gap-5">
+            <div class="w-full">
+              <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
+            </div>
+            <img src="/api/images/{gallery?.image}" class="max-w-[450px] w-full h-[450px] bg-neutral-800 object-cover rounded-xl" alt={gallery?.prompt} />
+            <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 class="px-2">
+              <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>
+          </main>
+        </div>
+        <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between">
+          <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
+            Commentaire{(gallery?.comments?.length ?? 0) > 1 ? 's' : ''} ({gallery?.comments?.length ?? 0})
+          </p>
+          {#if gallery?.id}
+            <UserIsLogged>
+              <Comments comments={gallery?.comments} gallery={gallery} />
+            </UserIsLogged>
+          {/if}
+        </footer>
+      {/if}
+    </div>
+  {/if}
+</div>
+<svelte:window on:keydown={handlePressEscape} />

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

@@ -148,7 +148,7 @@
           {/if}
         </main>
       </div>
-      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
+      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between">
         <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
           Commentaire{(model?.comments?.length ?? 0) > 1 ? 's' : ''} ({model?.comments?.length ?? 0})
         </p>

src/lib/components/models/drawer/comments/Comments.svelte

@@ -3,7 +3,7 @@
 
   import Button from "$lib/components/Button.svelte";
 	import type { ModelCard, CommentType } from "$lib/type";
-  import Comment from "./Comment.svelte";
+  import Comment from "$lib/components/comments/Comment.svelte";
 
   export let comments: CommentType[] = [];
   export let model: ModelCard;
@@ -36,32 +36,30 @@
   }
 </script>
 
-<div>
-  <div class="grid grid-cols-1 gap-3">
-    {#if comments?.length === 0}
-      <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
-    {/if}
-    {#each comments as comment}
-      <Comment comment={comment} />
-    {/each}
-  </div>
-  <div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7">
-    <textarea
-      value={text}
-      class="rounded-xl bg-neutral-900 text-neutral-200 text-base placeholder:text-neutral-500 outline-none resize-none p-4 w-full"
-      placeholder="Write a comment..."
-      on:input={handleChange}
-    />
-    <Button
-      theme="blue"
-      size="md"
-      icon="carbon:send-alt-filled"
-      iconPosition="right"
-      loading={loading}
-      disabled={text.length < 3}
-      onClick={handleSubmit}
-    >
-      Post
-    </Button>
-  </div>
+<div class="grid grid-cols-1 gap-3 overflow-auto h-full max-h-[300px]">
+  {#if comments?.length === 0}
+    <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
+  {/if}
+  {#each comments as comment}
+    <Comment comment={comment} />
+  {/each}
+</div>
+<div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7">
+  <textarea
+    value={text}
+    class="rounded-xl bg-neutral-900 text-neutral-200 text-base placeholder:text-neutral-500 outline-none resize-none p-4 w-full"
+    placeholder="Write a comment..."
+    on:input={handleChange}
+  />
+  <Button
+    theme="blue"
+    size="md"
+    icon="carbon:send-alt-filled"
+    iconPosition="right"
+    loading={loading}
+    disabled={text.length < 3}
+    onClick={handleSubmit}
+  >
+    Post
+  </Button>
 </div>

src/lib/type.ts

@@ -13,6 +13,7 @@ export interface CommunityCard {
   createdAt: Date,
   user: UserType,
   image: string,
+  comments?: CommentType[],
 }
 
 export interface ModelCard {

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

@@ -29,6 +29,22 @@ export async function GET({ params, url } : RequestEvent) {
           preferred_username: true,
         }
       },
+      comments: {
+        select: {
+          id: true,
+          createdAt: true,
+          text: true,
+          user: {
+            select: {
+              id: true,
+              name: true,
+              sub: true,
+              picture: true,
+              preferred_username: true,
+            }
+          }
+        }
+      },
       model: {
         select: {
           image: true,

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

@@ -0,0 +1,89 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+import { tokenIsAvailable } from '$lib/utils';
+import prisma from '$lib/prisma';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function POST({ cookies, request, params } : RequestEvent) {
+  const id = params.id;
+
+  const gallery = await prisma.gallery.findFirst({
+    where: {
+      id,
+    },
+  })
+  if (!gallery) {
+    return json({
+      error: "Gallery not found",
+    }, { status: 404 })
+  }
+  
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: "You must be logged",
+    }, { status: 401 })
+  }
+
+  const is_token_available = await tokenIsAvailable(token)
+  if (!is_token_available) {
+    return json({
+      error: "Invalid token",
+    }, { status: 401 })
+  }
+
+  // check if user has already comment this model twice
+  const total_comments = await prisma.comment.count({
+    where: {
+      galleryId: gallery.id,
+      userId: is_token_available.sub,
+    }
+  })
+
+  if (total_comments >= 2) {
+    return json({
+      error: "You have already comment this image twice",
+    }, { status: 401 })
+  }
+
+  const { text } = await request.json()
+  if (!text || text.length < 3) {
+    return json({
+      error: "Text must be at least 10 characters",
+    }, { status: 400 })
+  }
+
+  const comment = await prisma.comment.create({
+    data: {
+      text,
+      user: {
+        connect: {
+          sub: is_token_available.sub
+        }
+      },
+      gallery: {
+        connect: {
+          id
+        }
+      }
+    },
+    select: {
+      id: true,
+      text: true,
+      createdAt: true,
+      user: {
+        select: {
+          name: true,
+          picture: true,
+          preferred_username: true,
+          sub: true,
+        }
+      }
+    }
+  })
+
+  return json({
+    success: true,
+    comment
+  })
+}

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

@@ -74,6 +74,7 @@ export async function POST({ cookies, request, params } : RequestEvent) {
       user: {
         select: {
           name: true,
+          preferred_username: true,
           picture: true,
           sub: true,
         }

src/routes/gallery/+page.svelte

@@ -8,7 +8,8 @@
 	import Radio from "$lib/components/fields/Radio.svelte";
 	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
 	import GoTop from "$lib/components/GoTop.svelte";
-	import GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
+	// import GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
+	import GalleryDrawer from "$lib/components/community/drawer/Drawer.svelte";
 	// import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
@@ -84,5 +85,6 @@
 		/>
 		<GoTop />
 	</div>
-	<GalleryViewer form={form} />
+	<!-- <GalleryViewer form={form} /> -->
+	<GalleryDrawer form={form} />
 </main>