From 2c8bbe7d1f78a766ca5b650a65a5960ac0d09e36 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 15 Jan 2022 12:52:50 +0000
Subject: [PATCH] feat(messaging): add message overlay logic

---
 .../messaging/bars/MessageOverlayBar.tsx      | 119 +++++++++++-------
 src/lib/modifiers.ts                          |  18 +++
 2 files changed, 93 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/modifiers.ts

diff --git a/src/components/common/messaging/bars/MessageOverlayBar.tsx b/src/components/common/messaging/bars/MessageOverlayBar.tsx
index 4eec2bd2..d47ac6d6 100644
--- a/src/components/common/messaging/bars/MessageOverlayBar.tsx
+++ b/src/components/common/messaging/bars/MessageOverlayBar.tsx
@@ -12,8 +12,11 @@ import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components";
 
 import { openContextMenu } from "preact-context-menu";
+import { useEffect, useState } from "preact/hooks";
 
 import { internalEmit } from "../../../../lib/eventEmitter";
+import { shiftKeyPressed } from "../../../../lib/modifiers";
+import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import { QueuedMessage } from "../../../../mobx/stores/MessageQueue";
 
@@ -89,9 +92,24 @@ const Divider = styled.div`
 
 export const MessageOverlayBar = observer(({ message, queued }: Props) => {
     const client = useClient();
-    const { openScreen } = useIntermediate();
+    const { openScreen, writeClipboard } = useIntermediate();
     const isAuthor = message.author_id === client.user!._id;
 
+    const [copied, setCopied] = useState<"link" | "id">(null!);
+    const [extraActions, setExtra] = useState(shiftKeyPressed);
+
+    useEffect(() => {
+        const handler = (ev: KeyboardEvent) => setExtra(ev.shiftKey);
+
+        document.addEventListener("keyup", handler);
+        document.addEventListener("keydown", handler);
+
+        return () => {
+            document.removeEventListener("keyup", handler);
+            document.removeEventListener("keydown", handler);
+        };
+    });
+
     return (
         <OverlayBar>
             <Tooltip content="Reply">
@@ -120,12 +138,14 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
                     ChannelPermission.ManageMessages) ? (
                 <Tooltip content="Delete">
                     <Entry
-                        onClick={() =>
-                            openScreen({
-                                id: "special_prompt",
-                                type: "delete_message",
-                                target: message,
-                            } as unknown as Screen)
+                        onClick={(e) =>
+                            e.shiftKey
+                                ? message.delete()
+                                : openScreen({
+                                      id: "special_prompt",
+                                      type: "delete_message",
+                                      target: message,
+                                  } as unknown as Screen)
                         }>
                         <Trash size={18} color={"var(--error)"} />
                     </Entry>
@@ -143,43 +163,54 @@ export const MessageOverlayBar = observer(({ message, queued }: Props) => {
                     <DotsVerticalRounded size={18} />
                 </Entry>
             </Tooltip>
-            <Divider />
-            <Tooltip content="Mark as Unread">
-                <Entry
-                    onClick={() =>
-                        openContextMenu("Menu", {
-                            message,
-                            contextualChannel: message.channel_id,
-                            queued,
-                        })
-                    }>
-                    <Notification size={18} />
-                </Entry>
-            </Tooltip>
-            <Tooltip content="Copy Link">
-                <Entry
-                    onClick={() =>
-                        openContextMenu("Menu", {
-                            message,
-                            contextualChannel: message.channel_id,
-                            queued,
-                        })
-                    }>
-                    <LinkAlt size={18} />
-                </Entry>
-            </Tooltip>
-            <Tooltip content="Copy ID">
-                <Entry
-                    onClick={() =>
-                        openContextMenu("Menu", {
-                            message,
-                            contextualChannel: message.channel_id,
-                            queued,
-                        })
-                    }>
-                    <InfoSquare size={18} />
-                </Entry>
-            </Tooltip>
+            {extraActions && (
+                <>
+                    <Divider />
+                    <Tooltip content="Mark as Unread">
+                        <Entry
+                            onClick={() => {
+                                const messages = getRenderer(
+                                    message.channel!,
+                                ).messages;
+                                const index = messages.findIndex(
+                                    (x) => x._id === message._id,
+                                );
+
+                                let unread_id = message._id;
+                                if (index > 0) {
+                                    unread_id = messages[index - 1]._id;
+                                }
+
+                                internalEmit("NewMessages", "mark", unread_id);
+                                message.channel?.ack(unread_id, true);
+                            }}>
+                            <Notification size={18} />
+                        </Entry>
+                    </Tooltip>
+                    <Tooltip
+                        content={copied === "link" ? "Copied!" : "Copy Link"}
+                        hideOnClick={false}>
+                        <Entry
+                            onClick={() => {
+                                setCopied("link");
+                                writeClipboard(message.url);
+                            }}>
+                            <LinkAlt size={18} />
+                        </Entry>
+                    </Tooltip>
+                    <Tooltip
+                        content={copied === "id" ? "Copied!" : "Copy ID"}
+                        hideOnClick={false}>
+                        <Entry
+                            onClick={() => {
+                                setCopied("id");
+                                writeClipboard(message._id);
+                            }}>
+                            <InfoSquare size={18} />
+                        </Entry>
+                    </Tooltip>
+                </>
+            )}
         </OverlayBar>
     );
 });
diff --git a/src/lib/modifiers.ts b/src/lib/modifiers.ts
new file mode 100644
index 00000000..105f81c0
--- /dev/null
+++ b/src/lib/modifiers.ts
@@ -0,0 +1,18 @@
+/**
+ * Utility file for detecting whether the
+ * shift key is currently pressed or not.
+ */
+
+export let shiftKeyPressed = false;
+
+if (typeof window !== "undefined") {
+    document.addEventListener("keydown", (ev) => {
+        if (ev.shiftKey) shiftKeyPressed = true;
+        else shiftKeyPressed = false;
+    });
+
+    document.addEventListener("keyup", (ev) => {
+        if (ev.shiftKey) shiftKeyPressed = true;
+        else shiftKeyPressed = false;
+    });
+}