From 6fdd701b38d9195588cfde5b0290a2f3b528aa04 Mon Sep 17 00:00:00 2001
From: Jan <me@janderedev.xyz>
Date: Mon, 23 May 2022 22:19:55 +0200
Subject: [PATCH] feat: Add option to show Send button on Desktop (#628)

---
 src/components/common/messaging/MessageBox.tsx |  6 +++++-
 src/components/settings/AppearanceShims.tsx    | 18 ++++++++++++++++++
 src/mobx/stores/Settings.ts                    |  1 +
 src/pages/settings/panes/Appearance.tsx        |  6 ++++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index 6cb659b7..ce528b2a 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -637,7 +637,11 @@ export default observer(({ channel }: Props) => {
                 </Action>*/}
                 <Action>
                     <IconButton
-                        className="mobile"
+                        className={
+                            state.settings.get("appearance:show_send_button")
+                                ? ""
+                                : "mobile"
+                        }
                         onClick={send}
                         onMouseDown={(e) => e.preventDefault()}>
                         <Send size={20} />
diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx
index 4f619a04..3b3f4f09 100644
--- a/src/components/settings/AppearanceShims.tsx
+++ b/src/components/settings/AppearanceShims.tsx
@@ -211,6 +211,24 @@ export const DisplayLigaturesShim = observer(() => {
     );
 });
 
+/**
+ * Component providing a way to toggle showing the send button on desktop.
+ */
+export const ShowSendButtonShim = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            checked={settings.get("appearance:show_send_button") ?? false}
+            onChange={(v) => settings.set("appearance:show_send_button", v)}
+            description={
+                <Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
+            }>
+            <Text id="app.settings.pages.appearance.appearance_options.show_send" />
+        </Checkbox>
+    );
+});
+
 /**
  * Component providing a way to toggle seasonal themes.
  */
diff --git a/src/mobx/stores/Settings.ts b/src/mobx/stores/Settings.ts
index 8fed5083..56a36454 100644
--- a/src/mobx/stores/Settings.ts
+++ b/src/mobx/stores/Settings.ts
@@ -30,6 +30,7 @@ export interface ISettings {
     "appearance:ligatures": boolean;
     "appearance:seasonal": boolean;
     "appearance:transparency": boolean;
+    "appearance:show_send_button": boolean;
 
     "appearance:theme:base": "dark" | "light";
     "appearance:theme:overrides": Partial<Overrides>;
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index a38c9cb8..5a7440c3 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -16,6 +16,7 @@ import {
     ThemeCustomCSSShim,
     DisplaySeasonalShim,
     DisplayTransparencyShim,
+    ShowSendButtonShim,
 } from "../../../components/settings/AppearanceShims";
 import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
 import ThemeTools from "../../../components/settings/appearance/ThemeTools";
@@ -28,6 +29,11 @@ export const Appearance = observer(() => {
             <hr />
             <ThemeAccentShim />
             <hr />
+            <h3>
+                <Text id="app.settings.pages.appearance.appearance_options.title" />
+            </h3>
+            <ShowSendButtonShim />
+            <hr />
             <h3>
                 <Text id="app.settings.pages.appearance.theme_options.title" />
             </h3>