Boo: Fix Counter Needing Rerender (#479)

* boo counter fix

* bleh

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>

src/equicordplugins/boo/Boo.tsx

@@ -12,7 +12,25 @@ import { cl } from ".";
 import { IconGhost } from "./IconGhost";
 
 const countedChannels = new Set<string>();
-export let booCount = 0;
+
+let _booCount = 0;
+const listeners = new Set<(n: number) => void>();
+
+export function getBooCount() {
+    return _booCount;
+}
+
+export function setBooCount(n: number) {
+    _booCount = n;
+    for (const l of listeners) l(_booCount);
+}
+
+export function onBooCountChange(cb: (n: number) => void) {
+    listeners.add(cb);
+    return () => {
+        listeners.delete(cb);
+    };
+}
 
 const ChannelWrapperStyles = findByPropsLazy("muted", "wrapper");
 
@@ -43,23 +61,28 @@ export function Boo({ channel }: { channel: Channel; }) {
         });
     }, [lastMessage, currentUserId]);
 
-    if (countedChannels.has(id) && state.isCurrentUser) {
-        countedChannels.delete(id);
-        booCount--;
-    }
+    useEffect(() => {
+        if (!state.isDataProcessed) return;
 
-    if (!state.isDataProcessed || !currentUserId || !lastMessage || state.isCurrentUser) return null;
+        if (!state.isCurrentUser) {
+            if (!countedChannels.has(id)) {
+                countedChannels.add(id);
+                setBooCount(getBooCount() + 1);
+            }
+        } else {
+            if (countedChannels.has(id)) {
+                countedChannels.delete(id);
+                setBooCount(getBooCount() - 1);
+            }
+        }
+    }, [state.isCurrentUser, state.isDataProcessed]);
 
-    if (!countedChannels.has(id)) {
-        countedChannels.add(id);
-        booCount++;
-    }
+    if (!state.isDataProcessed || !currentUserId || !lastMessage || state.isCurrentUser)
+        return null;
 
     return (
         <div className={cl("icon", ChannelWrapperStyles.wrapper)}>
-            {state.containsQuestionMark
-                ? <IconGhost fill="#ff8000" />
-                : <IconGhost fill="currentColor" />}
+            <IconGhost fill={state.containsQuestionMark ? "#ff8000" : "currentColor"} />
         </div>
     );
 }

src/equicordplugins/boo/index.tsx

@@ -1,6 +1,6 @@
 /*
  * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
+ * Copyright (c) 2025 Vendicated and contributors
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
@@ -12,17 +12,45 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Channel } from "@vencord/discord-types";
-import { Tooltip } from "@webpack/common";
+import { Tooltip, useEffect, useState } from "@webpack/common";
 
-import { Boo, booCount } from "./Boo";
+import { Boo, getBooCount, onBooCountChange } from "./Boo";
 import { IconGhost } from "./IconGhost";
 
 export const cl = classNameFactory("vc-boo-");
 
+
+
+function BooIndicator() {
+    const [count, setCount] = useState(getBooCount());
+
+    useEffect(() => {
+        const unsubscribe = onBooCountChange(setCount);
+        return () => unsubscribe();
+    }, []);
+
+    return (
+        <div id={cl("container")}>
+            <Tooltip text={`${count} Ghosted Users`} position="right">
+                {({ onMouseEnter, onMouseLeave }) => (
+                    <div
+                        id={cl("container")}
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                    >
+                        {count} <IconGhost fill="currentColor" />
+                    </div>
+                )}
+            </Tooltip>
+        </div>
+    );
+}
+
 export default definePlugin({
     name: "Boo",
     description: "A cute ghost will appear if you don't answer their DMs",
     authors: [EquicordDevs.vei, Devs.sadan],
+
     patches: [
         {
             find: "interactiveSelected]",
@@ -30,7 +58,7 @@ export default definePlugin({
                 match: /interactiveSelected.{0,50}children:\[/,
                 replace: "$&$self.renderBoo(arguments[0]),"
             }
-        }
+        },
     ],
 
     renderBoo(props: { channel: Channel; }) {
@@ -42,20 +70,11 @@ export default definePlugin({
     },
 
     renderIndicator() {
-        return <ErrorBoundary noop>
-            <div id={cl("container")}>
-                <Tooltip text={`${booCount} Ghosted Users`} position="right">
-                    {({ onMouseEnter, onMouseLeave }) => (
-                        <div
-                            id={cl("container")}
-                            onMouseEnter={onMouseEnter}
-                            onMouseLeave={onMouseLeave}>
-                            {booCount} <IconGhost fill="currentColor" />
-                        </div>
-                    )}
-                </Tooltip>
-            </div>
-        </ErrorBoundary>;
+        return (
+            <ErrorBoundary noop>
+                <BooIndicator />
+            </ErrorBoundary>
+        );
     },
 
     start() {
@@ -64,5 +83,5 @@ export default definePlugin({
 
     stop() {
         removeServerListElement(ServerListRenderPosition.Above, this.renderIndicator);
-    }
+    },
 });