fix: Concatenate WS and DB messages together before iterating

This lets us remove the snippets, and also fixes a bug involving wierd
interactions with the context menu limiter between WS and DB messages,
since they're now part of the same iterable.

src/routes/(main)/channel/[channel]/+page.svelte

@@ -6,7 +6,6 @@
   import { buttonVariants } from '$lib/components/ui/button';
   import { autoResize } from '$lib/functions/autoresize.svelte';
   import Websocket from '$lib/functions/clientWebsocket.svelte';
-  import type { TypeMessage } from '$lib/types';
   import Send from 'lucide-svelte/icons/send';
   import { io } from 'socket.io-client';
   import { onMount } from 'svelte';
@@ -79,8 +78,14 @@
   <title>SVChat | #{channel}</title>
 </svelte:head>
 
-{#snippet message(messages: TypeMessage[])}
+<MessageLengthDialog messageLength={msg.length} bind:showDialog />
-  {#each messages as message, i}
+
+<div class="flex h-full flex-col items-center justify-center gap-1 rounded-lg shadow-sm">
+  <div class="relative flex size-full h-full w-full flex-auto flex-grow flex-col-reverse overflow-x-hidden overflow-y-scroll rounded-lg border">
+    {#if data.messages.length != 0 || socket?.messages.length != 0}
+      <div class="flex flex-col-reverse">
+        <!-- Concatenate the two arrays together -->
+        {#each [...(socket?.messages ?? []), ...data.messages] as message, i}
           <Message
             bind:open={contextMenus[i]}
             imageSrc={message.imageSrc}
@@ -92,16 +97,6 @@
             {i}
           />
         {/each}
-{/snippet}
-
-<MessageLengthDialog messageLength={msg.length} bind:showDialog />
-
-<div class="flex h-full flex-col items-center justify-center gap-1 rounded-lg shadow-sm">
-  <div class="relative flex size-full h-full w-full flex-auto flex-grow flex-col-reverse overflow-x-hidden overflow-y-scroll rounded-lg border">
-    {#if data.messages.length != 0 || socket?.messages.length != 0}
-      <div class="flex flex-col-reverse">
-        {@render message(socket?.messages ?? [])}
-        {@render message(data.messages)}
       </div>
     {:else}
       <EmptyChannel />