frontend: add "send" button for small viewports

frontend/src/components/MessageInput.svelte

@@ -1,17 +1,15 @@
 <script>
+    import { SendIcon } from "svelte-feather-icons";
 import request from "../request";
     import { apiRoute } from "../storage";
-    import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, smallViewport, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
 
     $: messages = messagesStoreProvider.getStore(channel.id);
 
-    const onKeydown = async (e) => {
+    const sendMessage = async () => {
-        if (e.code !== "Enter")
-            return;
-
         if (messageInput.trim() === "" || !$userInfoStore)
             return;
 
@@ -44,10 +42,20 @@
             });
         }
     };
+
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await sendMessage();
+    };
 </script>
 
 <style>
     .message-input-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 100%;
         padding: var(--space-norm);
     }
@@ -67,6 +75,10 @@
     .message-input::placeholder {
         color: var(--foreground-color-3);
     }
+
+    .send-button {
+        margin-left: var(--space-sm);
+    }
 </style>
 
 <div class="message-input-container">
@@ -77,4 +89,9 @@
         on:keydown={ onKeydown }
         bind:value={ messageInput }
     >
+    {#if $smallViewport}
+        <button class="icon-button send-button" on:click="{ sendMessage }">
+            <SendIcon />
+        </button>
+    {/if}
 </div>