From 3351674c21bf4d34afbb6936671e46524f048b1d Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 10 Jul 2021 17:35:18 +0100
Subject: [PATCH] Fix: Prevent context menu on images in settings. Revert
 mobile change. Messages: Add channel id matching.

---
 src/components/markdown/Renderer.tsx          | 15 +++++++
 .../navigation/left/ServerListSidebar.tsx     | 39 +++++++------------
 src/pages/settings/panes/Appearance.tsx       | 12 +++---
 src/pages/settings/panes/Panes.module.scss    |  6 +--
 src/redux/reducers/experiments.ts             |  2 +-
 5 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx
index 7cc5ae05..cbbd188b 100644
--- a/src/components/markdown/Renderer.tsx
+++ b/src/components/markdown/Renderer.tsx
@@ -82,6 +82,9 @@ md.renderer.rules.emoji = function (token, idx) {
 
 const RE_TWEMOJI = /:(\w+):/g;
 
+// ! FIXME: Move to library
+const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
+
 export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
     const client = useContext(AppContext);
     if (typeof content === "undefined") return null;
@@ -99,6 +102,18 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
                 return `[@${user.username}](/@${id})`;
             }
 
+            return sub;
+        },
+    ).replace(
+        RE_CHANNELS,
+        (sub: string, ...args: any[]) => {
+            const id = args[0],
+                channel = client.channels.get(id);
+
+            if (channel?.channel_type === 'TextChannel') {
+                return `[#${channel.name}](/server/${channel.server}/channel/${id})`;
+            }
+
             return sub;
         },
     );
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 72aa0938..06509437 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -233,30 +233,21 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                     to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
                     <ServerEntry home active={homeActive}>
                         <Swoosh />
-                        {isTouchscreenDevice ? (
-                            <Icon size={42} unread={homeUnread}>
-                                <img
-                                    style={{ width: 32, height: 32 }}
-                                    src={logoSVG}
-                                />
-                            </Icon>
-                        ) : (
-                            <div
-                                onContextMenu={attachContextMenu("Status")}
-                                onClick={() =>
-                                    homeActive && openContextMenu("Status")
-                                }>
-                                <UserHover user={self}>
-                                    <Icon size={42} unread={homeUnread}>
-                                        <UserIcon
-                                            target={self}
-                                            size={32}
-                                            status
-                                        />
-                                    </Icon>
-                                </UserHover>
-                            </div>
-                        )}
+                        <div
+                            onContextMenu={attachContextMenu("Status")}
+                            onClick={() =>
+                                homeActive && openContextMenu("Status")
+                            }>
+                            <UserHover user={self}>
+                                <Icon size={42} unread={homeUnread}>
+                                    <UserIcon
+                                        target={self}
+                                        size={32}
+                                        status
+                                    />
+                                </Icon>
+                            </UserHover>
+                        </div>
                     </ServerEntry>
                 </ConditionalLink>
                 <LineDivider />
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 0c0bfcd5..846dae9f 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -1,6 +1,6 @@
-// @ts-ignore
 import { Reset, Import } from "@styled-icons/boxicons-regular";
 import { Pencil } from "@styled-icons/boxicons-solid";
+// @ts-ignore
 import pSBC from "shade-blend-color";
 
 import styles from "./Panes.module.scss";
@@ -103,6 +103,7 @@ export function Component(props: Props) {
                             selected !== "light" &&
                             setTheme({ preset: "light" })
                         }
+                        onContextMenu={e => e.preventDefault()}
                     />
                     <h4>
                         <Text id="app.settings.pages.appearance.color.light" />
@@ -116,6 +117,7 @@ export function Component(props: Props) {
                         onClick={() =>
                             selected !== "dark" && setTheme({ preset: "dark" })
                         }
+                        onContextMenu={e => e.preventDefault()}
                     />
                     <h4>
                         <Text id="app.settings.pages.appearance.color.dark" />
@@ -199,7 +201,7 @@ export function Component(props: Props) {
                             className={styles.button}
                             onClick={() => setEmojiPack("mutant")}
                             data-active={emojiPack === "mutant"}>
-                            <img src={mutantSVG} draggable={false} />
+                            <img src={mutantSVG} draggable={false} onContextMenu={e => e.preventDefault()} />
                         </div>
                         <h4>
                             Mutant Remix{" "}
@@ -216,7 +218,7 @@ export function Component(props: Props) {
                             className={styles.button}
                             onClick={() => setEmojiPack("twemoji")}
                             data-active={emojiPack === "twemoji"}>
-                            <img src={twemojiSVG} draggable={false} />
+                            <img src={twemojiSVG} draggable={false} onContextMenu={e => e.preventDefault()} />
                         </div>
                         <h4>Twemoji</h4>
                     </div>
@@ -227,7 +229,7 @@ export function Component(props: Props) {
                             className={styles.button}
                             onClick={() => setEmojiPack("openmoji")}
                             data-active={emojiPack === "openmoji"}>
-                            <img src={openmojiSVG} draggable={false} />
+                            <img src={openmojiSVG} draggable={false} onContextMenu={e => e.preventDefault()} />
                         </div>
                         <h4>Openmoji</h4>
                     </div>
@@ -236,7 +238,7 @@ export function Component(props: Props) {
                             className={styles.button}
                             onClick={() => setEmojiPack("noto")}
                             data-active={emojiPack === "noto"}>
-                            <img src={notoSVG} draggable={false} />
+                            <img src={notoSVG} draggable={false} onContextMenu={e => e.preventDefault()} />
                         </div>
                         <h4>Noto Emoji</h4>
                     </div>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index f90ba442..42957ac7 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -500,12 +500,12 @@
     flex-direction: column;
 }
 
-.experiments { /* TOFIX: Center the "No new experiments available at this time" text without having a scrollbar */
-    height: 100%;
+.experiments {
+    height: calc(100% - 40px);
+
     .empty {
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 100%;
     }
 }
\ No newline at end of file
diff --git a/src/redux/reducers/experiments.ts b/src/redux/reducers/experiments.ts
index 39ee5c1a..f220013b 100644
--- a/src/redux/reducers/experiments.ts
+++ b/src/redux/reducers/experiments.ts
@@ -1,5 +1,5 @@
 export type Experiments = "search";
-export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"];
+export const AVAILABLE_EXPERIMENTS: Experiments[] = ['search'];
 export const EXPERIMENTS: {
     [key in Experiments]: { title: string; description: string };
 } = {