Use arguments[0] instead of lookbehinds, add setting to replace the white dot

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)

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: {
+            replacement: [
-                match: /\.name\),.{0,120}\.children.+?:null(?<=,channel:(\i),guild:(\i).+?)/,
+                {
-                replace: "$&,$self.CountBadge({channel: $1})"
+                    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:
+            replacement: [
                 {
-                match: /mentionsCount:\i.{0,50}?null(?<=channel:(\i).+?)/,
+                    match: /mentionsCount:\i.{0,50}?null/,
-                replace: "$&,$self.CountBadge({channel: $1})"
+                    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"

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;
+}