feat: Implement message limit of 2000 characters

src/lib/components/messageLengthDialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button/index.js';
+  import * as Dialog from '$lib/components/ui/dialog/index.js';
+
+  interface Props {
+    messageLength: number | undefined;
+    showDialog: boolean;
+  }
+
+  let { messageLength, showDialog = $bindable() }: Props = $props();
+  const lengthString = $derived(messageLength ? ` (${messageLength})` : '');
+  $inspect(lengthString);
+</script>
+
+<Dialog.Root bind:open={showDialog}>
+  <Dialog.Content class="sm:max-w-[425px]">
+    <Dialog.Header>
+      <Dialog.Title>Message too long</Dialog.Title>
+    </Dialog.Header>
+    This message exceeds the maximum character limit of 2000 characters {lengthString}. Please shorten it and then try again.
+    <Button onclick={() => (showDialog = false)}>Okay</Button>
+  </Dialog.Content>
+</Dialog.Root>

src/lib/functions/clientWebsocket.svelte.ts

@@ -39,7 +39,9 @@ class Websocket {
 
   // Send a message
   sendMessage(user: string, msg: string) {
-    if (this.socket) this.socket.emit('message', { id: user, content: msg, channel: this.channel });
+    if (this.socket && msg.length <= 2000) {
+      this.socket.emit('message', { id: user, content: msg, channel: this.channel });
+    }
   }
 }
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import Message from '$lib/components/message.svelte';
+  import MessageLengthDialog from '$lib/components/messageLengthDialog.svelte';
   import { Button } from '$lib/components/ui/button/index';
   import { autoResize } from '$lib/functions/autoresize.svelte';
   import Websocket from '$lib/functions/clientWebsocket.svelte';
@@ -16,10 +17,21 @@
   let user: string = uuidv4();
   let socket: Websocket | undefined = $state();
   let msg: string = $state('');
+  let showDialog: boolean = $state(false);
   const channel: string = $derived(page.params.channel);
-  let textareaRef: HTMLElement | undefined = $state();
+  let textareaRef: HTMLTextAreaElement | undefined = $state();
   let formref: HTMLFormElement | undefined = $state();
 
+  function submit() {
+    if (msg.length <= 2000) {
+      socket?.sendMessage(user!, msg);
+      if (textareaRef) textareaRef.style.height = '40px';
+      msg = '';
+    } else {
+      showDialog = true;
+    }
+  }
+
   onMount(() => {
     // Connect on page load
     socket = new Websocket(io());
@@ -49,19 +61,15 @@
     <Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
   {/each}
 {/snippet}
+
+<MessageLengthDialog messageLength={msg.length} bind:showDialog />
+
 <div class="flex h-full flex-1 flex-col items-center justify-center gap-1 rounded-lg shadow-sm">
   <div class="flex w-full flex-auto flex-grow flex-col-reverse overflow-x-hidden overflow-y-scroll rounded-lg border">
     {@render message(socket?.messages ?? [])}
     {@render message(data.messages)}
   </div>
-  <form
+  <form bind:this={formref} class="flex w-full gap-1" onsubmit={submit}>
-    bind:this={formref}
-    class="flex w-full gap-1"
-    onsubmit={() => {
-      socket?.sendMessage(user!, msg);
-      if (textareaRef) textareaRef.style.height = '40px';
-      msg = '';
-    }}>
     <textarea
       placeholder="Type Here"
       bind:value={msg}
@@ -69,7 +77,7 @@
       use:autoResize
       class="flex h-10 min-h-10 w-full resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm
       shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1
-       focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"></textarea>
+      focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"></textarea>
     <Button class="h-full min-h-10 w-14" type="submit"><Send class="size-full" /></Button>
   </form>
 </div>