Womp Womp

src/equicordplugins/keywordNotify/index.tsx

@@ -7,23 +7,37 @@
 import "./style.css";
 
 import { DataStore } from "@api/index";
-import { showNotification } from "@api/Notifications";
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
 import { DeleteIcon } from "@components/Icons";
 import { EquicordDevs } from "@utils/constants";
 import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
 import { useForceUpdater } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ChannelStore, Forms, NavigationRouter, Select, Switch, TextInput, useState } from "@webpack/common";
-import { Message } from "discord-types/general/index.js";
+import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { Button, ChannelStore, Forms, Select, SelectedChannelStore, Switch, TabBar, TextInput, Tooltip, UserStore, useState } from "@webpack/common";
+import { Message, User } from "discord-types/general/index.js";
+import type { PropsWithChildren } from "react";
 
+
+type IconProps = JSX.IntrinsicElements["svg"];
 type KeywordEntry = { regex: string, listIds: Array<string>, listType: ListType, ignoreCase: boolean; };
 
 let keywordEntries: Array<KeywordEntry> = [];
+let currentUser: User;
+let keywordLog: Array<any> = [];
 
+const recentMentionsPopoutClass = findByPropsLazy("recentMentionsPopout");
+const tabClass = findByPropsLazy("tab");
+const buttonClass = findByPropsLazy("size36");
+
+const MenuHeader = findByCodeLazy(".getMessageReminders()).length");
+const Popout = findByCodeLazy("e.get(e.jumpTargetId");
+const createMessageRecord = findByCodeLazy(".createFromServer(", ".isBlockedForMessage", "messageReference:");
 const KEYWORD_ENTRIES_KEY = "KeywordNotify_keywordEntries";
+const KEYWORD_LOG_KEY = "KeywordNotify_log";
 
 const cl = classNameFactory("vc-keywordnotify-");
 
@@ -52,6 +66,32 @@ enum ListType {
     Whitelist = "Whitelist"
 }
 
+interface BaseIconProps extends IconProps {
+    viewBox: string;
+}
+
+function highlightKeywords(str: string, entries: Array<KeywordEntry>) {
+    let regexes: Array<RegExp>;
+    try {
+        regexes = entries.map(e => new RegExp(e.regex, "g" + (e.ignoreCase ? "i" : "")));
+    } catch (err) {
+        return [str];
+    }
+
+    const matches = regexes.map(r => str.match(r)).flat().filter(e => e != null) as Array<string>;
+    if (matches.length === 0) {
+        return [str];
+    }
+
+    const idx = str.indexOf(matches[0]);
+
+    return [
+        <span>{str.substring(0, idx)}</span>,
+        <span className="highlight">{matches[0]}</span>,
+        <span>{str.substring(idx + matches[0].length)}</span>
+    ];
+}
+
 function Collapsible({ title, children }) {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -115,7 +155,7 @@ function ListedIds({ listIds, setListIds }) {
     );
 }
 
-function ListTypeSelector({ listType, setListType }) {
+function ListTypeSelector({ listType, setListType }: { listType: ListType, setListType: (v: ListType) => void; }) {
     return (
         <Select
             options={[
@@ -185,7 +225,6 @@ function KeywordEntries() {
                     >
                         Ignore Case
                     </Switch>
-                    <Forms.FormDivider className={[Margins.top8, Margins.bottom8].join(" ")} />
                     <Forms.FormTitle tag="h5">Whitelist/Blacklist</Forms.FormTitle>
                     <Flex flexDirection="row">
                         <div style={{ flexGrow: 1 }}>
@@ -215,22 +254,60 @@ function KeywordEntries() {
     );
 }
 
+function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
+    return (
+        <svg
+            className={classes(className, "vc-icon")}
+            role="img"
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            {...svgProps}
+        >
+            {children}
+        </svg>
+    );
+}
+
+// Ideally I would just add this to Icons.tsx, but I cannot as this is a user-plugin :/
+function DoubleCheckmarkIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-double-checkmark-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path fill="currentColor"
+                d="M16.7 8.7a1 1 0 0 0-1.4-1.4l-3.26 3.24a1 1 0 0 0 1.42 1.42L16.7 8.7ZM3.7 11.3a1 1 0 0 0-1.4 1.4l4.5 4.5a1 1 0 0 0 1.4-1.4l-4.5-4.5Z"
+            />
+            <path fill="currentColor"
+                d="M21.7 9.7a1 1 0 0 0-1.4-1.4L13 15.58l-3.3-3.3a1 1 0 0 0-1.4 1.42l4 4a1 1 0 0 0 1.4 0l8-8Z"
+            />
+        </Icon>
+    );
+}
+
 const settings = definePluginSettings({
     ignoreBots: {
         type: OptionType.BOOLEAN,
         description: "Ignore messages from bots",
         default: true
     },
+    amountToKeep: {
+        type: OptionType.NUMBER,
+        description: "Amount of messages to keep in the log",
+        default: 50
+    },
     keywords: {
         type: OptionType.COMPONENT,
-        description: "Keywords to detect",
+        description: "Manage keywords",
         component: () => <KeywordEntries />
     }
 });
 
 export default definePlugin({
     name: "KeywordNotify",
-    authors: [EquicordDevs.camila314, EquicordDevs.thororen],
+    authors: [EquicordDevs.camila314, EquicordDevs.x3rt, EquicordDevs.thororen],
     description: "Sends a notification if a given message matches certain keywords or regexes",
     settings,
     patches: [
@@ -240,20 +317,53 @@ export default definePlugin({
                 match: /}_dispatch\((\i),\i\){/,
                 replace: "$&$1=$self.modify($1);"
             }
+        },
+        {
+            find: "Messages.UNREADS_TAB_LABEL}",
+            replacement: {
+                match: /\i\?\(0,\i\.jsxs\)\(\i\.TabBar\.Item/,
+                replace: "$self.keywordTabBar(),$&"
+            }
+        },
+        {
+            find: "location:\"RecentsPopout\"})",
+            replacement: {
+                match: /:(\i)===\i\.\i\.MENTIONS\?\(0,.+?setTab:(\i),onJump:(\i),badgeState:\i,closePopout:(\i)/,
+                replace: ": $1 === 8 ? $self.tryKeywordMenu($2, $3, $4) $&"
+            }
+        },
+        {
+            find: ".guildFilter:null",
+            replacement: {
+                match: /function (\i)\(\i\){let{message:\i,gotoMessage/,
+                replace: "$self.renderMsg = $1; $&"
+            }
+        },
+        {
+            find: ".guildFilter:null",
+            replacement: {
+                match: /onClick:\(\)=>(\i\.\i\.deleteRecentMention\((\i)\.id\))/,
+                replace: "onClick: () => $2._keyword ? $self.deleteKeyword($2.id) : $1"
+            }
         }
     ],
 
     async start() {
+        this.onUpdate = () => null;
+        currentUser = UserStore.getCurrentUser();
         keywordEntries = await DataStore.get(KEYWORD_ENTRIES_KEY) ?? [];
+        await DataStore.set(KEYWORD_ENTRIES_KEY, keywordEntries);
+        (await DataStore.get(KEYWORD_LOG_KEY) ?? []).map(e => JSON.parse(e)).forEach(e => {
+            this.addToLog(e);
+        });
     },
 
     applyKeywordEntries(m: Message) {
         let matches = false;
-        let match = "";
 
         for (const entry of keywordEntries) {
             if (entry.regex === "") {
-                return;
+                continue;
             }
 
             let listed = entry.listIds.some(id => id === m.channel_id || id === m.author.id);
@@ -267,31 +377,30 @@ export default definePlugin({
             const whitelistMode = entry.listType === ListType.Whitelist;
 
             if (!whitelistMode && listed) {
-                return;
+                continue;
             }
             if (whitelistMode && !listed) {
-                return;
+                continue;
             }
 
             if (settings.store.ignoreBots && m.author.bot && (!whitelistMode || !entry.listIds.includes(m.author.id))) {
-                return;
+                continue;
             }
 
             const flags = entry.ignoreCase ? "i" : "";
             if (safeMatchesRegex(m.content, entry.regex, flags)) {
                 matches = true;
-                match = m.content;
-            }
-
-            for (const embed of m.embeds as any) {
-                if (safeMatchesRegex(embed.description, entry.regex, flags) || safeMatchesRegex(embed.title, entry.regex, flags)) {
-                    matches = true;
-                    match = m.content;
-                } else if (embed.fields != null) {
-                    for (const field of embed.fields as Array<{ name: string, value: string; }>) {
-                        if (safeMatchesRegex(field.value, entry.regex, flags) || safeMatchesRegex(field.name, entry.regex, flags)) {
-                            matches = true;
-                            match = m.content;
+            } else {
+                for (const embed of m.embeds as any) {
+                    if (safeMatchesRegex(embed.description, entry.regex, flags) || safeMatchesRegex(embed.title, entry.regex, flags)) {
+                        matches = true;
+                        break;
+                    } else if (embed.fields != null) {
+                        for (const field of embed.fields as Array<{ name: string, value: string; }>) {
+                            if (safeMatchesRegex(field.value, entry.regex, flags) || safeMatchesRegex(field.name, entry.regex, flags)) {
+                                matches = true;
+                                break;
+                            }
                         }
                     }
                 }
@@ -299,14 +408,112 @@ export default definePlugin({
         }
 
         if (matches) {
-            showNotification({
-                title: "Keyword Notify",
-                body: `${m.author.username} matched the keyword ${match}`,
-                onClick: () => NavigationRouter.transitionTo(`/channels/${ChannelStore.getChannel(m.channel_id)?.guild_id ?? "@me"}/${m.channel_id}${m.id ? "/" + m.id : ""}`)
-            });
+            // @ts-ignore
+            m.mentions.push({ id: currentUser.id });
+
+            if (m.author.id !== currentUser.id)
+                this.addToLog(m);
         }
     },
 
+    addToLog(m: Message) {
+        if (m == null || keywordLog.some(e => e.id === m.id))
+            return;
+
+        DataStore.get(KEYWORD_LOG_KEY).then(log => {
+            DataStore.set(KEYWORD_LOG_KEY, [...log, JSON.stringify(m)]);
+        });
+
+        const thing = createMessageRecord(m);
+        keywordLog.push(thing);
+        keywordLog.sort((a, b) => b.timestamp - a.timestamp);
+
+        if (keywordLog.length > settings.store.amountToKeep)
+            keywordLog.pop();
+
+        this.onUpdate();
+    },
+
+    deleteKeyword(id) {
+        keywordLog = keywordLog.filter(e => e.id !== id);
+        this.onUpdate();
+    },
+
+    keywordTabBar() {
+        return (
+            <TabBar.Item className={classes(tabClass.tab, tabClass.expanded)} id={8}>
+                Keywords
+            </TabBar.Item>
+        );
+    },
+
+    tryKeywordMenu(setTab, onJump, closePopout) {
+        const header = (
+            <MenuHeader tab={8} setTab={setTab} closePopout={closePopout} badgeState={{ badgeForYou: false }} children={
+                <Tooltip text="Clear All">
+                    {({ onMouseLeave, onMouseEnter }) => (
+                        <Button
+                            onMouseLeave={onMouseLeave}
+                            onMouseEnter={onMouseEnter}
+                            look={Button.Looks.BLANK}
+                            size={Button.Sizes.ICON}
+                            onClick={() => {
+                                keywordLog = [];
+                                DataStore.set(KEYWORD_LOG_KEY, []);
+                                this.onUpdate();
+                            }}>
+                            <div className={classes(buttonClass.button, buttonClass.secondary, buttonClass.size32)}>
+                                <DoubleCheckmarkIcon />
+                            </div>
+                        </Button>
+                    )}
+                </Tooltip>
+            } />
+        );
+
+        const channel = ChannelStore.getChannel(SelectedChannelStore.getChannelId());
+
+        const [tempLogs, setKeywordLog] = useState(keywordLog);
+        this.onUpdate = () => {
+            const newLog = Array.from(keywordLog);
+            setKeywordLog(newLog);
+        };
+
+        const messageRender = (e, t) => {
+            e._keyword = true;
+
+            e.customRenderedContent = {
+                content: highlightKeywords(e.content, keywordEntries)
+            };
+
+            const msg = this.renderMsg({
+                message: e,
+                gotoMessage: t,
+                dismissible: true
+            });
+
+            return [msg];
+        };
+
+        return (
+            <>
+                <Popout
+                    className={classes(recentMentionsPopoutClass.recentMentionsPopout)}
+                    renderHeader={() => header}
+                    renderMessage={messageRender}
+                    channel={channel}
+                    onJump={onJump}
+                    onFetch={() => null}
+                    onCloseMessage={this.deleteKeyword}
+                    loadMore={() => null}
+                    messages={tempLogs}
+                    renderEmptyState={() => null}
+                    canCloseAllMessages={true}
+                />
+            </>
+        );
+    },
+
     modify(e) {
         if (e.type === "MESSAGE_CREATE") {
             this.applyKeywordEntries(e.message);

src/utils/constants.ts

@@ -743,6 +743,10 @@ export const EquicordDevs = Object.freeze({
         name: "sadan",
         id: 521819891141967883n
     },
+    x3rt: {
+        name: "x3rt",
+        id: 131602100332396544n
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly