collapse comments

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

@@ -10,6 +10,7 @@
 
   let text = "";
   let loading = false;
+  let collapse_comments = false;
 
   const handleSubmit = async () => {
     loading = true;
@@ -36,13 +37,23 @@
   }
 </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 class="grid grid-cols-1 gap-3 overflow-auto h-full max-h-[50%]">
+  {#if comments?.length === 0}
+    <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
+  {/if}
+  {#each comments.slice(0, collapse_comments ? comments?.length : 1) as comment}
+    <Comment comment={comment} />
+  {/each}
+  {#if comments?.length > 1}
+    <div class="flex items-center justify-start max-w-max absolute right-8 top-8">
+      <Button
+        theme="dark"
+        onClick={() => collapse_comments = !collapse_comments}
+      >
+        {collapse_comments ? "Show less" : "Show more"}
+      </Button>
+    </div>
+  {/if}
 </div>
 <div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7">
   <textarea

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

@@ -95,7 +95,7 @@
             </div>
           </main>
         </div>
-        <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between">
+        <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative">
           <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>

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 flex flex-col justify-between">
+      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative">
         <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

@@ -10,6 +10,7 @@
 
   let text = "";
   let loading = false;
+  let collapse_comments = false;
 
   const handleSubmit = async () => {
     loading = true;
@@ -36,13 +37,23 @@
   }
 </script>
 
-<div class="grid grid-cols-1 gap-3 overflow-auto h-full max-h-[300px]">
+<div class="grid grid-cols-1 gap-3 overflow-auto h-full max-h-[50%]">
   {#if comments?.length === 0}
     <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
   {/if}
-  {#each comments as comment}
+  {#each comments.slice(0, collapse_comments ? comments?.length : 1) as comment}
     <Comment comment={comment} />
   {/each}
+  {#if comments?.length > 1}
+    <div class="flex items-center justify-start max-w-max absolute right-8 top-8">
+      <Button
+        theme="dark"
+        onClick={() => collapse_comments = !collapse_comments}
+      >
+        {collapse_comments ? "Show less" : "Show more"}
+      </Button>
+    </div>
+  {/if}
 </div>
 <div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7">
   <textarea