reply navigator

src/plugins/findReply/ReplyNavigator.tsx

@@ -0,0 +1,73 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { ModalCloseButton } from "@utils/modal";
+import { findByPropsLazy } from "@webpack";
+import { Paginator, React, useRef, useState } from "@webpack/common";
+import { Message } from "discord-types/general";
+import { MutableRefObject } from "react";
+
+import { jumper } from "./index";
+
+const containerStyles = findByPropsLazy("containerBottom", "containerTop");
+
+export default function ReplyNavigator({ replies }: { replies: Message[]; }) {
+    const [page, setPage] = useState(1);
+    const [visible, setVisible] = useState(true);
+    const ref: MutableRefObject<HTMLDivElement | null> = useRef(null);
+    React.useEffect(() => {
+        setPage(1);
+        setVisible(true);
+    }, [replies]);
+    React.useEffect(() => {
+        function onMouseDown(event: MouseEvent) {
+            if (ref.current && event.target instanceof Element && !ref.current.contains(event.target)) {
+                setVisible(false);
+            }
+        }
+
+        document.addEventListener("mousedown", onMouseDown);
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+        };
+    }, [ref]);
+    return (
+        <ErrorBoundary>
+            <div ref={ref} className={containerStyles.containerBottom + " vc-findreply-div"} style={{
+                display: visible ? "flex" : "none",
+                backgroundColor: "var(--background-primary)",
+                borderRadius: "3vmin",
+                zIndex: 0,
+                flexDirection: "row",
+                alignItems: "center",
+                paddingLeft: "1em",
+                paddingRight: "1em",
+                opacity: "80%"
+            }}>
+                <Paginator
+                    className={"vc-findreply-paginator"}
+                    currentPage={page}
+                    maxVisiblePages={5}
+                    pageSize={1}
+                    totalCount={replies.length}
+                    onPageChange={processPageChange}
+                />
+                <ModalCloseButton className={"vc-findreply-close"} onClick={() => setVisible(false)}/>
+            </div>
+        </ErrorBoundary>
+    );
+
+    function processPageChange(page: number) {
+        setPage(page);
+        jumper.jumpToMessage({
+            channelId: replies[page - 1].channel_id,
+            messageId: replies[page - 1].id,
+            flash: true,
+            jumpType: "INSTANT"
+        });
+    }
+}

src/plugins/findReply/index.tsx

@@ -17,41 +17,53 @@
 */
 
 import { addButton, removeButton } from "@api/MessagePopover";
+import { disableStyle, enableStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { ChannelStore, MessageStore, Toasts } from "@webpack/common";
+import { ChannelStore, MessageStore, ReactDOM, Toasts } from "@webpack/common";
 import Message from "discord-types/general/Message";
+import { Root } from "react-dom/client";
+
+import ReplyNavigator from "./ReplyNavigator";
+import styles from "./styles.css?managed";
 
 
-const jumper = findByPropsLazy("jumpToMessage");
+export const jumper: any = findByPropsLazy("jumpToMessage");
 const FindReplyIcon = () => {
     return <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" width="18" height="18">
-        <path d="M 7 2 L 7 12 L 4 12 L 9 18 L 14 12 L 11 12 L 11 2" />
+        <path
+            d="M 7 3 L 7 11 C 7 11 7 12 6 12 L 5 12 C 4 12 4 12 4.983 13.115 L 8.164 17.036 C 9 18 9 18 9.844 17.018 L 12.991 13.277 C 14 12 14 12 13.006 11.985 L 12 12 C 12 12 11 12 11 11 L 11 3 C 11 2 11 2 10 2 L 8 2 C 7 2 7 2 7 3"/>
     </svg>;
 };
+let root: Root | null = null;
+let element: HTMLDivElement | null = null;
+let madeComponent = false;
 
-function findReply(message: Message) {
-    const messages: Array<Message & { deleted?: boolean; }> = [...MessageStore.getMessages(message.channel_id)?._array ?? []].filter(m => !m.deleted).sort((a, b) => {
+function findReplies(message: Message) {
+    const messages: Array<Message & {
+        deleted?: boolean;
+    }> = [...MessageStore.getMessages(message.channel_id)?._array ?? []].filter(m => !m.deleted).sort((a, b) => {
         return a.timestamp.toString().localeCompare(b.timestamp.toString());
     }); // Need to deep copy Message array when sorting
+    const found: Message[] = [];
     for (const other of messages) {
         if (other.timestamp.toString().localeCompare(message.timestamp.toString()) <= 0) continue;
         if (other.messageReference?.message_id === message.id) {
-            return other;
+            found.push(other);
         }
         if (Vencord.Settings.plugins.FindReply.includePings) {
             if (other.content?.includes(`<@${message.author.id}>`)) {
-                return other;
+                found.push(other);
             }
         }
         if (Vencord.Settings.plugins.FindReply.includeAuthor) {
             if (messages.find(m => m.id === other.messageReference?.message_id)?.author.id === message.author.id) {
-                return other;
+                found.push(other);
             }
         }
     }
-    return null;
+    return found;
 }
 
 export default definePlugin({
@@ -59,25 +71,40 @@ export default definePlugin({
     description: "Jumps to the earliest reply to a message in a channel (lets you follow past conversations more easily).",
     authors: [Devs.newwares],
     start() {
+        enableStyle(styles);
         addButton("vc-findreply", message => {
             if (!message.id) return null;
-            const reply = findReply(message);
-            if (Vencord.Settings.plugins.FindReply.hideButtonIfNoReply && !reply) return null;
+            const replies = findReplies(message);
+            if (Vencord.Settings.plugins.FindReply.hideButtonIfNoReply && !replies) return null;
             return {
                 label: "Jump to Reply",
                 icon: FindReplyIcon,
                 message,
                 channel: ChannelStore.getChannel(message.channel_id),
                 onClick: async () => {
-                    if (reply) {
-                        const channelId = reply.channel_id;
-                        const messageId = reply.id;
+                    if (replies.length) {
+                        const channelId = replies[0].channel_id;
+                        const messageId = replies[0].id;
                         jumper.jumpToMessage({
                             channelId,
                             messageId,
                             flash: true,
                             jumpType: "INSTANT"
                         });
+                        if (replies.length > 1) {
+                            Toasts.show({
+                                id: Toasts.genId(),
+                                message: "Use the bottom panel to navigate between replies.",
+                                type: Toasts.Type.MESSAGE
+                            });
+                            if (!madeComponent) {
+                                madeComponent = true;
+                                element = document.createElement("div");
+                                document.querySelector("[class^=base__]")!.appendChild(element);
+                                root = ReactDOM.createRoot(element);
+                            }
+                            root!.render(<ReplyNavigator replies={replies}/>);
+                        }
                     } else {
                         Toasts.show({
                             id: Toasts.genId(),
@@ -91,6 +118,9 @@ export default definePlugin({
     },
     stop() {
         removeButton("vc-findreply");
+        root && root.unmount();
+        element?.remove();
+        disableStyle(styles);
     },
     options: {
         includePings: {
@@ -108,7 +138,7 @@ export default definePlugin({
         hideButtonIfNoReply: {
             type: OptionType.BOOLEAN,
             description: "Hides the button if there are no replies to the message",
-            default: false,
+            default: true,
             restartNeeded: true
         }
     }

src/plugins/findReply/styles.css

@@ -0,0 +1,8 @@
+.vc-findreply-paginator {
+    margin-top: inherit !important;
+}
+
+.vc-findreply-close {
+    align-items: inherit !important;
+    line-height: 0 !important;
+}

src/webpack/common/types/components.d.ts

@@ -393,7 +393,7 @@ export type Paginator = ComponentType<{
     maxVisiblePages: number;
     pageSize: number;
     totalCount: number;
-
+    className?: string;
     onPageChange?(page: number): void;
     hideMaxPage?: boolean;
 }>;