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,
-                contextualChannel: message.channel_id,
-                // eslint-disable-next-line
-            }) as any)
+                  user: message.author_id,
+                  contextualChannel: message.channel_id,
+                  // eslint-disable-next-line
+              }) 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.length > 0
-                                )) ??
-                            false
+                                  !(
+                                      message.reply_ids &&
+                                      message.reply_ids.length > 0
+                                  )) ??
+                              false
                     }
                     contrast={contrast}
                     sending={typeof queued !== "undefined"}
@@ -118,10 +119,10 @@ const Message = observer(
                     onContextMenu={
                         attachContext
                             ? attachContextMenu("Menu", {
-                                message,
-                                contextualChannel: message.channel_id,
-                                queued,
-                            })
+                                  message,
+                                  contextualChannel: message.channel_id,
+                                  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>
             );