Add CTRL + ENTER to force send message.

Fix: cursor jumping to the end of message area.
Fix: inconsistent message send button on mobile.

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 &&

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) {
+        !isTouchscreenDevice &&
-            display: none;
+        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 (

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;
+            isTouchscreenDevice &&
-            top: -32px;
+            css`
-            padding: 0 12px;
+                height: 34px;
-        }
+                top: -32px;
+                padding: 0 12px;
+            `}
     }
 `;
 

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 &&

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) {