feat: Add option to show Send button on Desktop (#628)

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} />

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.
  */

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

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>