From e0ba97deb3eba45721398f7617a9174937ab4ac2 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 27 Apr 2022 20:12:04 +0300
Subject: [PATCH] frontend: add "send" button for small viewports

---
 frontend/src/components/MessageInput.svelte | 29 ++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 6b8a2ca..4c93032 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,17 +1,15 @@
 <script>
-    import request from "../request";
+    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) => {
-        if (e.code !== "Enter")
-            return;
-
+    const sendMessage = async () => {
         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>