frontend: initial multi-line support

frontend/src/components/Message.svelte

@@ -28,6 +28,7 @@
 
     .message-content {
         color: var(--foreground-color-2);
+        white-space: pre-wrap;
     }
 
     .pending {

frontend/src/components/MessageInput.svelte

@@ -44,10 +44,14 @@
     };
 
     const onKeydown = async (e) => {
-        if (e.code !== "Enter")
+        if (e.code === "Enter") {
+            if (e.shiftKey) {
                 return;
-
+            } else {
+                e.preventDefault();
                 await sendMessage();
+            }
+        }
     };
 </script>
 
@@ -82,13 +86,13 @@
 </style>
 
 <div class="message-input-container">
-    <input
+    <textarea
         placeholder={`Send something interesting to #${channel.name}`}
         type="text"
         class="message-input"
         on:keydown={ onKeydown }
         bind:value={ messageInput }
-    >
+    />
     {#if $smallViewport}
         <button class="icon-button send-button" on:click="{ sendMessage }">
             <SendIcon />