From 947240b1f7d9b2fea687b25788e3e43b053efdf5 Mon Sep 17 00:00:00 2001
From: Masterjoona <69722179+Masterjoona@users.noreply.github.com>
Date: Sun, 4 Aug 2024 17:46:41 +0300
Subject: [PATCH] Use arguments[0] instead of lookbehinds, add setting to
 replace the white dot

---
 src/plugins/unreadCountBadge/README.md  |  4 +++
 src/plugins/unreadCountBadge/index.tsx  | 48 +++++++++++++++++--------
 src/plugins/unreadCountBadge/styles.css | 16 +++++++++
 3 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/plugins/unreadCountBadge/README.md b/src/plugins/unreadCountBadge/README.md
index 04dc72cea..fae38b1c0 100644
--- a/src/plugins/unreadCountBadge/README.md
+++ b/src/plugins/unreadCountBadge/README.md
@@ -3,3 +3,7 @@
 Shows unread message count badges on channels in the channel list
 
 ![](https://github.com/user-attachments/assets/58beb269-259c-47aa-84dc-60f2354e6207)
+
+Setting to replace the white dot
+
+![](https://github.com/user-attachments/assets/c0612bc2-d62b-45ca-86dd-105dcc484071)
diff --git a/src/plugins/unreadCountBadge/index.tsx b/src/plugins/unreadCountBadge/index.tsx
index 43e16419b..0b461cdc9 100644
--- a/src/plugins/unreadCountBadge/index.tsx
+++ b/src/plugins/unreadCountBadge/index.tsx
@@ -29,6 +29,12 @@ const settings = definePluginSettings({
         type: OptionType.BOOLEAN,
         default: false,
     },
+    replaceWhiteDot: {
+        description: "Replace the white dot with the badge",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: true,
+    },
 });
 
 export default definePlugin({
@@ -41,35 +47,49 @@ export default definePlugin({
         // Kanged from typingindicators
         {
             find: "UNREAD_IMPORTANT:",
-            replacement: {
-                match: /\.name\),.{0,120}\.children.+?:null(?<=,channel:(\i),guild:(\i).+?)/,
-                replace: "$&,$self.CountBadge({channel: $1})"
-            }
+            replacement: [
+                {
+                    match: /\.name\),.{0,120}\.children.+?:null/,
+                    replace: "$&,$self.CountBadge({channel: arguments[0].channel,})",
+                    predicate: () => !settings.store.replaceWhiteDot
+                },
+                {
+                    match: /\(0,\i\.jsx\)\("div",{className:\i\(\)\(\i\.unread,\i\?\i\.unreadImportant:void 0\)}\)/,
+                    replace: "$self.CountBadge({channel: arguments[0].channel, whiteDot:$&})",
+                    predicate: () => settings.store.replaceWhiteDot
+                }
+            ]
         },
         // Threads
         {
             // This is the thread "spine" that shows in the left
             find: "M11 9H4C2.89543 9 2 8.10457 2 7V1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1V7C0 9.20914 1.79086 11 4 11H11C11.5523 11 12 10.5523 12 10C12 9.44771 11.5523 9 11 9Z",
-            replacement:
-            {
-                match: /mentionsCount:\i.{0,50}?null(?<=channel:(\i).+?)/,
-                replace: "$&,$self.CountBadge({channel: $1})"
-            }
-
+            replacement: [
+                {
+                    match: /mentionsCount:\i.{0,50}?null/,
+                    replace: "$&,$self.CountBadge({channel: arguments[0].thread})",
+                    predicate: () => !settings.store.replaceWhiteDot
+                },
+                {
+                    match: /\(0,\i\.jsx\)\("div",{className:\i\(\)\(\i\.unread,\i\.unreadImportant\)}\)/,
+                    replace: "$self.CountBadge({channel: arguments[0].thread, whiteDot:$&})",
+                    predicate: () => settings.store.replaceWhiteDot
+                }
+            ]
         },
     ],
 
-    CountBadge: ErrorBoundary.wrap(({ channel }: { channel: Channel; }) => {
+    CountBadge: ErrorBoundary.wrap(({ channel, whiteDot }: { channel: Channel, whiteDot?: JSX.Element; }) => {
         const unreadCount = useStateFromStores([ReadStateStore], () => ReadStateStore.getUnreadCount(channel.id));
-        if (!unreadCount) return null;
+        if (!unreadCount) return whiteDot || null;
 
         if (!settings.store.showOnMutedChannels && (UserGuildSettingsStore.isChannelMuted(channel.guild_id, channel.id) || JoinedThreadsStore.isMuted(channel.id)))
             return null;
-
+        const className = `vc-unreadCountBadge${whiteDot ? "-dot" : ""}${channel.threadMetadata ? "-thread" : ""}`;
         return (
             <NumberBadge
                 color="var(--brand-500)"
-                className="vc-unreadCountBadge"
+                className={className}
                 count={
                     unreadCount > 99 && settings.store.notificationCountLimit
                         ? "+99"
diff --git a/src/plugins/unreadCountBadge/styles.css b/src/plugins/unreadCountBadge/styles.css
index d54621e5d..e0f0c2461 100644
--- a/src/plugins/unreadCountBadge/styles.css
+++ b/src/plugins/unreadCountBadge/styles.css
@@ -1,3 +1,19 @@
 .vc-unreadCountBadge {
     margin-left: 4px;
 }
+
+.vc-unreadCountBadge-dot {
+    position: absolute;
+    top: 25%;
+    margin-left: -3%;
+    scale: 0.9;
+    z-index: 1;
+}
+
+.vc-unreadCountBadge-dot-thread {
+    position: absolute;
+    top: 20%;
+    margin-left: -18%;
+    scale: 0.9;
+    z-index: 1;
+}