MessageLogger: add compact display of history & edit modal (#2299)

Co-authored-by: vee <vendicated@riseup.net>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.9.4",
+    "version": "1.9.5",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {

src/plugins/messageLogger/HistoryModal.tsx

@@ -0,0 +1,91 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { findByPropsLazy } from "@webpack";
+import { TabBar, Text, Timestamp, TooltipContainer, useState } from "@webpack/common";
+
+import { parseEditContent } from ".";
+
+const CodeContainerClasses = findByPropsLazy("markup", "codeContainer");
+const MiscClasses = findByPropsLazy("messageContent", "markupRtl");
+
+const cl = classNameFactory("vc-ml-modal-");
+
+export function openHistoryModal(message: any) {
+    openModal(props =>
+        <ErrorBoundary>
+            <HistoryModal
+                modalProps={props}
+                message={message}
+            />
+        </ErrorBoundary>
+    );
+}
+
+export function HistoryModal({ modalProps, message }: { modalProps: ModalProps; message: any; }) {
+    const [currentTab, setCurrentTab] = useState(message.editHistory.length);
+    const timestamps = [message.firstEditTimestamp, ...message.editHistory.map(m => m.timestamp)];
+    const contents = [...message.editHistory.map(m => m.content), message.content];
+
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.LARGE}>
+            <ModalHeader className={cl("head")}>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Message Edit History</Text>
+                <ModalCloseButton onClick={close} />
+            </ModalHeader>
+
+            <ModalContent className={cl("contents")}>
+                <TabBar
+                    type="top"
+                    look="brand"
+                    className={classes("vc-settings-tab-bar", cl("tab-bar"))}
+                    selectedItem={currentTab}
+                    onItemSelect={setCurrentTab}
+                >
+                    {message.firstEditTimestamp.getTime() !== message.timestamp.getTime() && (
+                        <TooltipContainer text="This edit state was not logged so it can't be displayed.">
+                            <TabBar.Item
+                                className="vc-settings-tab-bar-item"
+                                id={-1}
+                                disabled
+                            >
+                                <Timestamp
+                                    className={cl("timestamp")}
+                                    timestamp={message.timestamp}
+                                    isEdited={true}
+                                    isInline={false}
+                                />
+                            </TabBar.Item>
+                        </TooltipContainer>
+                    )}
+
+                    {timestamps.map((timestamp, index) => (
+                        <TabBar.Item
+                            className="vc-settings-tab-bar-item"
+                            id={index}
+                        >
+                            <Timestamp
+                                className={cl("timestamp")}
+                                timestamp={timestamp}
+                                isEdited={true}
+                                isInline={false}
+                            />
+                        </TabBar.Item>
+                    ))}
+                </TabBar>
+
+                <div className={classes(CodeContainerClasses.markup, MiscClasses.messageContent, Margins.top20)}>
+                    {parseEditContent(contents[currentTab], message)}
+                </div>
+            </ModalContent>
+        </ModalRoot>
+    );
+}

src/plugins/messageLogger/index.tsx

@@ -24,21 +24,26 @@ import { Settings } from "@api/Settings";
 import { disableStyle, enableStyle } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
+import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy } from "@webpack";
+import { findByCodeLazy, findByPropsLazy } from "@webpack";
 import { ChannelStore, FluxDispatcher, i18n, Menu, MessageStore, Parser, SelectedChannelStore, Timestamp, UserStore, useStateFromStores } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 import overlayStyle from "./deleteStyleOverlay.css?managed";
 import textStyle from "./deleteStyleText.css?managed";
+import { openHistoryModal } from "./HistoryModal";
 
 interface MLMessage extends Message {
     deleted?: boolean;
     editHistory?: { timestamp: Date; content: string; }[];
+    firstEditTimestamp?: Date;
 }
 
 const styles = findByPropsLazy("edited", "communicationDisabled", "isSystemMessage");
+const getMessage = findByCodeLazy('replace(/^\\n+|\\n+$/g,"")');
 
 function addDeleteStyle() {
     if (Settings.plugins.MessageLogger.deleteStyle === "text") {
@@ -125,10 +130,22 @@ const patchChannelContextMenu: NavContextMenuPatchCallback = (children, { channe
     );
 };
 
+export function parseEditContent(content: string, message: Message) {
+    return Parser.parse(content, true, {
+        channelId: message.channel_id,
+        messageId: message.id,
+        allowLinks: true,
+        allowHeading: true,
+        allowList: true,
+        allowEmojiLinks: true,
+        viewingChannelId: SelectedChannelStore.getChannelId(),
+    });
+}
+
 export default definePlugin({
     name: "MessageLogger",
     description: "Temporarily logs deleted and edited messages.",
-    authors: [Devs.rushii, Devs.Ven, Devs.AutumnVN, Devs.Nickyux],
+    authors: [Devs.rushii, Devs.Ven, Devs.AutumnVN, Devs.Nickyux, Devs.Kyuuhachi],
     dependencies: ["MessageUpdaterAPI"],
 
     contextMenus: {
@@ -150,19 +167,11 @@ export default definePlugin({
             (oldMsg, newMsg) => oldMsg?.editHistory === newMsg?.editHistory
         );
 
-        return (
+        return Settings.plugins.MessageLogger.inlineEdits && (
             <>
                 {message.editHistory?.map(edit => (
                     <div className="messagelogger-edited">
-                        {Parser.parse(edit.content, true, {
-                            channelId,
-                            messageId,
-                            allowLinks: true,
-                            allowHeading: true,
-                            allowList: true,
-                            allowEmojiLinks: true,
-                            viewingChannelId: SelectedChannelStore.getChannelId(),
-                        })}
+                        {parseEditContent(edit.content, message)}
                         <Timestamp
                             timestamp={edit.timestamp}
                             isEdited={true}
@@ -199,11 +208,21 @@ export default definePlugin({
             description: "Whether to log deleted messages",
             default: true,
         },
+        collapseDeleted: {
+            type: OptionType.BOOLEAN,
+            description: "Whether to collapse deleted messages, similar to blocked messages",
+            default: false
+        },
         logEdits: {
             type: OptionType.BOOLEAN,
             description: "Whether to log edited messages",
             default: true,
         },
+        inlineEdits: {
+            type: OptionType.BOOLEAN,
+            description: "Whether to display edit history as part of message content",
+            default: true
+        },
         ignoreBots: {
             type: OptionType.BOOLEAN,
             description: "Whether to ignore messages by bots",
@@ -279,6 +298,23 @@ export default definePlugin({
             (message.channel_id === "1026515880080842772" && message.author?.id === "1017176847865352332");
     },
 
+    EditMarker({ message, className, children, ...props }: any) {
+        return (
+            <span
+                {...props}
+                className={classes("messagelogger-edit-marker", className)}
+                onClick={() => openHistoryModal(message)}
+                aria-role="button"
+            >
+                {children}
+            </span>
+        );
+    },
+
+    Messages: proxyLazy(() => ({
+        DELETED_MESSAGE_COUNT: getMessage("{count, plural, =0 {No deleted messages} one {{count} deleted message} other {{count} deleted messages}}")
+    })),
+
     patches: [
         {
             // MessageStore
@@ -332,7 +368,8 @@ export default definePlugin({
                     match: /this\.customRenderedContent=(\i)\.customRenderedContent,/,
                     replace: "this.customRenderedContent = $1.customRenderedContent," +
                         "this.deleted = $1.deleted || false," +
-                        "this.editHistory = $1.editHistory || [],"
+                        "this.editHistory = $1.editHistory || []," +
+                        "this.firstEditTimestamp = $1.firstEditTimestamp || this.editedTimestamp || this.timestamp,"
                 }
             ]
         },
@@ -345,7 +382,7 @@ export default definePlugin({
                     // Pass through editHistory & deleted & original attachments to the "edited message" transformer
                     match: /(?<=null!=\i\.edited_timestamp\)return )\i\(\i,\{reactions:(\i)\.reactions.{0,50}\}\)/,
                     replace:
-                        "Object.assign($&,{ deleted:$1.deleted, editHistory:$1.editHistory })"
+                        "Object.assign($&,{ deleted:$1.deleted, editHistory:$1.editHistory, firstEditTimestamp:$1.firstEditTimestamp })"
                 },
 
                 {
@@ -364,7 +401,8 @@ export default definePlugin({
                         "   return $2;" +
                         "})())," +
                         "deleted: arguments[1]?.deleted," +
-                        "editHistory: arguments[1]?.editHistory"
+                        "editHistory: arguments[1]?.editHistory," +
+                        "firstEditTimestamp: new Date(arguments[1]?.firstEditTimestamp ?? $2.editedTimestamp ?? $2.timestamp)"
                 },
                 {
                     // Preserve deleted attribute on attachments
@@ -412,6 +450,11 @@ export default definePlugin({
                     // Render editHistory in the deepest div for message content
                     match: /(\)\("div",\{id:.+?children:\[)/,
                     replace: "$1 (!!arguments[0].message.editHistory?.length && $self.renderEdits(arguments[0])),"
+                },
+                {
+                    // Make edit marker clickable
+                    match: /"span",\{(?=className:\i\.edited,)/,
+                    replace: "$self.EditMarker,{message:arguments[0].message,"
                 }
             ]
         },
@@ -441,6 +484,30 @@ export default definePlugin({
                     replace: "children:arguments[0].message.deleted?[]:$1"
                 }
             ]
+        },
+        {
+            // Message grouping
+            find: "NON_COLLAPSIBLE.has(",
+            replacement: {
+                match: /if\((\i)\.blocked\)return \i\.\i\.MESSAGE_GROUP_BLOCKED;/,
+                replace: '$&else if($1.deleted) return"MESSAGE_GROUP_DELETED";',
+            },
+            predicate: () => Settings.plugins.MessageLogger.collapseDeleted
+        },
+        {
+            // Message group rendering
+            find: "Messages.NEW_MESSAGES_ESTIMATED_WITH_DATE",
+            replacement: [
+                {
+                    match: /(\i).type===\i\.\i\.MESSAGE_GROUP_BLOCKED\|\|/,
+                    replace: '$&$1.type==="MESSAGE_GROUP_DELETED"||',
+                },
+                {
+                    match: /(\i).type===\i\.\i\.MESSAGE_GROUP_BLOCKED\?.*?:/,
+                    replace: '$&$1.type==="MESSAGE_GROUP_DELETED"?$self.Messages.DELETED_MESSAGE_COUNT:',
+                },
+            ],
+            predicate: () => Settings.plugins.MessageLogger.collapseDeleted
         }
     ]
 });

src/plugins/messageLogger/messageLogger.css

@@ -38,3 +38,17 @@
 .theme-light .messagelogger-edited {
     opacity: 0.5;
 }
+
+.messagelogger-edit-marker {
+    cursor: pointer;
+}
+
+.vc-ml-modal-timestamp {
+    cursor: unset;
+    height: unset;
+}
+
+.vc-ml-modal-tab-bar {
+    flex-wrap: wrap;
+    gap: 16px;
+}

src/plugins/viewRaw/index.tsx

@@ -55,6 +55,7 @@ function cleanMessage(msg: Message) {
     const cloneAny = clone as any;
     delete cloneAny.editHistory;
     delete cloneAny.deleted;
+    delete cloneAny.firstEditTimestamp;
     cloneAny.attachments?.forEach(a => delete a.deleted);
 
     return clone;