fix: add context menu to individual attachments if > 1 attached (#348)

src/components/common/messaging/Message.tsx

@@ -5,6 +5,8 @@ import { attachContextMenu } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useState } from "preact/hooks";
 
+import { internalEmit } from "../../../lib/eventEmitter";
+
 import { QueuedMessage } from "../../../redux/reducers/queue";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -25,7 +27,6 @@ import Attachment from "./attachments/Attachment";
 import { MessageReply } from "./attachments/MessageReply";
 import Embed from "./embed/Embed";
 import InviteList from "./embed/EmbedInvite";
-import { internalEmit } from "../../../lib/eventEmitter";
 
 interface Props {
     attachContext?: boolean;
@@ -62,10 +63,10 @@ const Message = observer(
         // bree: Fatal please...
         const userContext = attachContext
             ? (attachContextMenu("Menu", {
-                user: message.author_id,
+                  user: message.author_id,
-                contextualChannel: message.channel_id,
+                  contextualChannel: message.channel_id,
-                // eslint-disable-next-line
+                  // eslint-disable-next-line
-            }) as any)
+              }) as any)
             : undefined;
 
         const openProfile = () =>
@@ -80,9 +81,9 @@ const Message = observer(
                     "mention",
                 );
             } else {
-                openProfile()
+                openProfile();
             }
-        }
+        };
 
         // ! FIXME(?): animate on hover
         const [animate, setAnimate] = useState(false);
@@ -105,11 +106,11 @@ const Message = observer(
                         hideReply
                             ? false
                             : (head &&
-                                !(
+                                  !(
-                                    message.reply_ids &&
+                                      message.reply_ids &&
-                                    message.reply_ids.length > 0
+                                      message.reply_ids.length > 0
-                                )) ??
+                                  )) ??
-                            false
+                              false
                     }
                     contrast={contrast}
                     sending={typeof queued !== "undefined"}
@@ -118,10 +119,10 @@ const Message = observer(
                     onContextMenu={
                         attachContext
                             ? attachContextMenu("Menu", {
-                                message,
+                                  message,
-                                contextualChannel: message.channel_id,
+                                  contextualChannel: message.channel_id,
-                                queued,
+                                  queued,
-                            })
+                              })
                             : undefined
                     }
                     onMouseEnter={() => setAnimate(true)}

src/components/common/messaging/attachments/Attachment.tsx

@@ -2,6 +2,7 @@ import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
+import { attachContextMenu } from "preact-context-menu";
 import { useContext, useState } from "preact/hooks";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
@@ -9,9 +10,9 @@ import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 
 import AttachmentActions from "./AttachmentActions";
 import { SizedGrid } from "./Grid";
+import ImageFile from "./ImageFile";
 import Spoiler from "./Spoiler";
 import TextFile from "./TextFile";
-import ImageFile from "./ImageFile";
 
 interface Props {
     attachment: AttachmentI;
@@ -37,11 +38,18 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 <SizedGrid
                     width={metadata.width}
                     height={metadata.height}
+                    onContextMenu={attachContextMenu("Menu", {
+                        attachment: attachment,
+                    })}
                     className={classNames({
                         [styles.margin]: hasContent,
                         spoiler,
                     })}>
-                    <ImageFile attachment={attachment} width={metadata.width} height={metadata.height} />
+                    <ImageFile
+                        attachment={attachment}
+                        width={metadata.width}
+                        height={metadata.height}
+                    />
                     {spoiler && <Spoiler set={setSpoiler} />}
                 </SizedGrid>
             );

src/lib/ContextMenus.tsx

@@ -63,6 +63,7 @@ interface ContextMenuData {
     server_list?: string;
     channel?: string;
     message?: Message;
+    attachment?: Attachment;
 
     unread?: boolean;
     queued?: QueuedMessage;
@@ -468,6 +469,7 @@ function ContextMenus(props: Props) {
                     channel: cid,
                     server: sid,
                     message,
+                    attachment,
                     server_list,
                     queued,
                     unread,
@@ -747,7 +749,10 @@ function ContextMenus(props: Props) {
                             });
                         }
 
-                        if (message.attachments) {
+                        if (
+                            message.attachments &&
+                            message.attachments.length == 1 // if there are multiple attachments, the individual ones have to be clicked
+                        ) {
                             pushDivider();
                             const { metadata } = message.attachments[0];
                             const { type } = metadata;
@@ -796,6 +801,44 @@ function ContextMenus(props: Props) {
                         }
                     }
 
+                    if (attachment) {
+                        pushDivider();
+                        const { metadata } = attachment;
+                        const { type } = metadata;
+
+                        generateAction(
+                            {
+                                action: "open_file",
+                                attachment,
+                            },
+                            type === "Image"
+                                ? "open_image"
+                                : type === "Video"
+                                ? "open_video"
+                                : "open_file",
+                        );
+
+                        generateAction(
+                            {
+                                action: "save_file",
+                                attachment,
+                            },
+                            type === "Image"
+                                ? "save_image"
+                                : type === "Video"
+                                ? "save_video"
+                                : "save_file",
+                        );
+
+                        generateAction(
+                            {
+                                action: "copy_file_link",
+                                attachment,
+                            },
+                            "copy_link",
+                        );
+                    }
+
                     const id = sid ?? cid ?? uid ?? message?._id;
                     if (id) {
                         pushDivider();