empty state + click outside

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { clickoutside } from '@svelte-put/clickoutside';
+
   import { get } from "svelte/store";
   import Icon from "@iconify/svelte";
 
@@ -25,6 +27,7 @@
   <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={!data?.id}
+    use:clickoutside on:clickoutside={handleClose}
   >
     <div class="p-8 overflow-auto">
       <header class="flex w-full justify-between items-start mb-6">

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

@@ -37,6 +37,9 @@
 
 <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}