feat: Rotating messages for empty channel

src/lib/components/emptyChannel.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { blur } from 'svelte/transition';
+
+  const messages = [
+    'A wild empty channel appears! What will you do?',
+    'Be the hero this chat deserves. Or just type "hi".',
+    'Echo... Echo... Is anyone there?',
+    'Empty chat, press "F" to pay respects.',
+    'Get the party started by sending a message!',
+    "Go ahead, say something! I won't bite… much.",
+    'Hello? Is this thing on?',
+    'If a message is sent in an empty chat, does it make a sound?',
+    'Imagine crickets chirping… now stop them by sending a message!',
+    "Just type something, this isn't rocket science.",
+    'Silence is golden, but chatting is more fun!',
+    'Talk to me, Goose.',
+    'Your keyboard looks bored. Give it something to do.',
+    'Your words will be the first ever spoken here. No pressure.',
+  ];
+</script>
+
+<div class="abs-center text-center text-muted-foreground" out:blur>
+  <h1 class="text-4xl" in:blur={{ delay: 100 }}>No messages yet!</h1>
+  <h2 class="mt-2 text-sm" in:blur={{ delay: 300 }}>{messages[Math.floor(Math.random() * messages.length)]}</h2>
+</div>

src/routes/channel/[channel]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
+  import EmptyChannel from '$lib/components/emptyChannel.svelte';
   import Message from '$lib/components/message.svelte';
   import MessageLengthDialog from '$lib/components/messageLengthDialog.svelte';
   import { Button } from '$lib/components/ui/button/index';
@@ -11,7 +12,6 @@
   import { onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
   import type { PageData } from './$types';
-  import { blur } from 'svelte/transition';
 
   const { data }: { data: PageData } = $props();
 
@@ -73,10 +73,7 @@
         {@render message(data.messages)}
       </div>
     {:else}
-      <div class="abs-center text-center text-muted-foreground" in:blur={{ delay: 100 }} out:blur>
+      <EmptyChannel />
-        <h1 class="text-4xl">No messages yet!</h1>
-        <h2 class="mt-2 text-sm">Send a message to get the conversation started.</h2>
-      </div>
     {/if}
   </div>
   <form bind:this={formref} class="flex w-full gap-1" onsubmit={submit}>