highlight messages with mentions

frontend/src/components/Message.svelte

@@ -53,10 +53,26 @@
         height: 40px;
     }
 
-    .message:hover, .message.pinged {
+    .message:hover {
         background-color: var(--background-color-3);
     }
 
+    .message.pinged {
+        background-color: var(--purple-2-highlight);
+    }
+
+    .message.pinged::before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 3px;
+        border-radius: 2px;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        background-color: var(--purple-2);
+    }
+
     .message-content {
         color: var(--foreground-color-2);
         white-space: pre-wrap;

frontend/src/components/MessageInput.svelte

@@ -98,9 +98,9 @@
 
     const sendMessage = async () => {
         messageTextarea.focus();
-        const content = messageInput;
+        const content = messageInput.trim();
 
-        if (content.trim() === "" || !userInfoStore.value)
+        if (!content.length || !userInfoStore.value)
             return;
 
         // optimistically add message to store

frontend/src/styles/global.css

@@ -66,6 +66,8 @@
 	--yellow-2: hsl(50, 78%, 60%);
 	--red-2: hsl(2, 78%, 60%);
 
+	--purple-2-highlight: hsla(266, 62%, 58%, 0.1);
+
 
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));