From d368820aeb0e6106a064acd35adb186a4cbc2f5d Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Mon, 30 Aug 2021 18:01:32 +0100
Subject: [PATCH] Add CTRL + ENTER to force send message. Fix: cursor jumping
 to the end of message area. Fix: inconsistent message send button on mobile.

---
 .../common/messaging/MessageBase.tsx          |  9 ++++++---
 .../common/messaging/MessageBox.tsx           | 19 +++++++++++++------
 .../common/messaging/bars/JumpToBottom.tsx    | 15 +++++++++------
 src/components/ui/Header.tsx                  |  8 +++++---
 src/lib/TextAreaAutoSize.tsx                  |  4 +++-
 5 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx
index 166f2918..2d854173 100644
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -6,6 +6,7 @@ import { decodeTime } from "ulid";
 import { Text } from "preact-i18n";
 
 import { useDictionary } from "../../../lib/i18n";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { dayjs } from "../../../context/Locale";
 
@@ -34,9 +35,11 @@ export default styled.div<BaseMessageProps>`
     flex-direction: row;
     padding-inline-end: 16px;
 
-    @media (pointer: coarse) {
-        user-select: none;
-    }
+    ${() =>
+        isTouchscreenDevice &&
+        css`
+            user-select: none;
+        `}
 
     ${(props) =>
         props.contrast &&
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index 5940100d..b561a928 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -3,7 +3,7 @@ import Axios, { CancelTokenSource } from "axios";
 import { observer } from "mobx-react-lite";
 import { ChannelPermission } from "revolt.js/dist/api/permissions";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";
@@ -99,11 +99,13 @@ const Action = styled.div`
         padding: 12px;
     }
 
-    .mobile {
-        @media (pointer: fine) {
-            display: none;
-        }
-    }
+    ${() =>
+        !isTouchscreenDevice &&
+        css`
+            .mobile {
+                display: none;
+            }
+        `}
 `;
 
 // For sed replacement
@@ -503,6 +505,11 @@ export default observer(({ channel }: Props) => {
                     value={draft ?? ""}
                     padding="var(--message-box-padding)"
                     onKeyDown={(e) => {
+                        if (e.ctrlKey && e.key === "Enter") {
+                            e.preventDefault();
+                            return send();
+                        }
+
                         if (onKeyDown(e)) return;
 
                         if (
diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx
index dc8e50a1..bde2f086 100644
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -1,10 +1,11 @@
 import { DownArrowAlt } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 
+import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 const Bar = styled.div`
@@ -42,11 +43,13 @@ const Bar = styled.div`
             transform: translateY(1px);
         }
 
-        @media (pointer: coarse) {
-            height: 34px;
-            top: -32px;
-            padding: 0 12px;
-        }
+        ${() =>
+            isTouchscreenDevice &&
+            css`
+                height: 34px;
+                top: -32px;
+                padding: 0 12px;
+            `}
     }
 `;
 
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 24c2cc29..87c59e4c 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -37,9 +37,11 @@ export default styled.div<Props>`
         padding: 0 12px;
     }*/
 
-    @media (pointer: coarse) {
-        height: 56px;
-    }
+    ${() =>
+        isTouchscreenDevice &&
+        css`
+            height: 56px;
+        `}
 
     ${(props) =>
         props.background &&
diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx
index 1efbd705..a4fe2fa6 100644
--- a/src/lib/TextAreaAutoSize.tsx
+++ b/src/lib/TextAreaAutoSize.tsx
@@ -99,7 +99,9 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
         // ? it is a quick and dirty hack to fix
         // ? value not setting correctly
         // ? I have no clue what's going on
-        ref.current.value = value;
+        // ref.current.value = value;
+        // * commented out of 30-08-21
+        // * hopefully nothing breaks :v
 
         if (!autoFocus) return;
         function keyDown(e: KeyboardEvent) {