index.tsx

@@ -10,7 +10,6 @@ import { addAccessory } from "@api/MessageAccessories";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Parser, React, Text } from "@webpack/common";
-import { Message } from "discord-types/general";
 
 let userFlags = new Map<string, Flag>();
 
@@ -27,23 +26,22 @@ type FlagRegistryEntry = {
     emoji: string;
 };
 
-// worst typing ever?
-const flagRegistry: { [key in FlagType]: FlagRegistryEntry } = {
+const flagRegistry: Record<FlagType, FlagRegistryEntry> = {
     [FlagType.DANGER]: {
         label: "Danger",
         color: "#ff7473",
         emoji: "🛑"
-    } as FlagRegistryEntry,
+    },
     [FlagType.WARNING]: {
         label: "Warning",
         color: "#ffb02e",
         emoji: "⚠️"
-    } as FlagRegistryEntry,
+    },
     [FlagType.INFO]: {
         label: "Info",
         color: "#62a8ff",
-        emoji: "🔵"
-    } as FlagRegistryEntry,
+        emoji: "ℹ️"
+    },
     [FlagType.POSITIVE]: {
         label: "Positive",
         color: "#62ff74",
@@ -57,16 +55,24 @@ type Flag = {
     text: string;
 };
 
+const subscribers = new Set<() => void>();
+function subscribe(callback: () => void) {
+    subscribers.add(callback);
+    return () => subscribers.delete(callback);
+};
+
 function Flag({ id }: { id: string; }) {
+    const flag = React.useSyncExternalStore(subscribe, () => userFlags.get(id));
+    if (!flag) return null;
     return (
         <div>
             <Text
                 variant="text-md/bold"
-                style={{ color: flagRegistry[userFlags.get(id)?.type || ""]?.color }}
+                style={{ color: flagRegistry[flag.type].color }}
             >
-                {Parser.parse(flagRegistry[userFlags.get(id)?.type || ""]?.emoji)} {userFlags.get(id)?.text}
+                {Parser.parse(flagRegistry[flag.type].emoji)} {flag.text}
             </Text>
-        </div >
+        </div>
     );
 }
 
@@ -81,15 +87,12 @@ export default definePlugin({
             if (typeof savedFlags === "string") {
                 userFlags = new Map<string, Flag>(JSON.parse(savedFlags));
             } else {
-                userFlags = new Map(savedFlags);
+                userFlags = new Map<string, Flag>(savedFlags);
             }
         }
-        addAccessory("flag", (props: Record<string, any>) => {
-            if (userFlags.has((props.message as Message).author.id)) {
-                return <Flag id={props.message.author.id} />;
-            }
-            return null;
-        }, 4);
+        addAccessory("flag", (props: Record<string, any>) => (
+            <Flag id={props.message.author.id} />
+        ), 4);
     },
     commands: [
         {
@@ -104,9 +107,9 @@ export default definePlugin({
                     required: true
                 },
                 {
-                    "name": "type",
-                    "type": ApplicationCommandOptionType.STRING,
-                    "description": "The type of flag to add",
+                    name: "type",
+                    type: ApplicationCommandOptionType.STRING,
+                    description: "The type of flag to add",
                     choices: Object.entries(flagRegistry).map(([key, flag]) => ({
                         name: key,
                         label: flag.label,
@@ -130,6 +133,7 @@ export default definePlugin({
                     type,
                     text
                 });
+                subscribers.forEach(cb => cb());
                 sendBotMessage(ctx.channel.id, {
                     content: `Flag set on <@${user}> with content \`${text}\`!`
                 });
@@ -152,6 +156,7 @@ export default definePlugin({
             execute: async (args: Argument[], ctx: CommandContext) => {
                 const user = findOption(args, "user", "");
                 userFlags.delete(user);
+                subscribers.forEach(cb => cb());
                 sendBotMessage(ctx.channel.id, {
                     content: `Flag removed from <@${user}>`
                 });