added user data

index.tsx

@@ -53,8 +53,8 @@ async function getMessage(channelId: string, messageId: string): Promise<Message
     }
 }
 const UserData = () => {
-    // powered by generative ai, idk react :trolley:
     const [data, setData] = useState([]);
+    const [collapsed, collapse] = useState(true);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -81,14 +81,34 @@ const UserData = () => {
 
     return (
         <>
+            <Forms.FormText style={{ fontSize: "1.07rem", fontWeight: "500" }}>User stats <a onClick={() => { collapsed ? collapse(false) : collapse(true); }}>[{collapsed ? "View all" : "Collapse"}]</a></Forms.FormText>
+            <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
                 {
                     data && data.map(user => <>
-                    <div>
+                        {
+                            collapsed && <>
+                                {
+                                    data.indexOf(user) < 6 &&
+                                    <div style={{ marginTop: data.indexOf(user) < 2 ? "0" : "7px" }}>
                                         {/* @ts-ignore */}
-                        {Parser.parse(`<@${user.id}>`)} <Forms.FormText>with {user.count} husks</Forms.FormText>
+                                        {Parser.parse(`<@${user.id}>`)} <Forms.FormText style={{ marginTop: "4px" }}>with {user.count} {user.count > 1 ? "husks" : "husk"}</Forms.FormText>
                                     </div>
+                                }
+                            </>
+                        }
+                        {
+                            !collapsed && <>
+                                {
+                                    <div style={{ marginTop: data.indexOf(user) < 2 ? "0" : "7px" }}>
+                                        {/* @ts-ignore */}
+                                        {Parser.parse(`<@${user.id}>`)} <Forms.FormText style={{ marginTop: "4px" }}>with {user.count} {user.count > 1 ? "husks" : "husk"}</Forms.FormText>
+                                    </div>
+                                }
+                            </>
+                        }
                     </>)
                 }
+            </div>
         </>
     );
 };
@@ -99,6 +119,7 @@ export default definePlugin({
     flux: {
         async MESSAGE_REACTION_ADD(event) {
             try {
+                if (event.userId === "428188716641812481") return;
                 const msg = await getMessage(event.channelId, event.messageId);
                 if (msg!.author.id !== UserStore.getCurrentUser().id) return;
                 if (!event.emoji.name.includes("husk")) return;
@@ -121,7 +142,7 @@ export default definePlugin({
             description: "User stats",
             component: (aaa) => (
                 <>
-                    <Forms.FormText style={{ fontSize: "1.07rem", fontWeight: "500" }}>User stats</Forms.FormText>
+
                     <UserData />
                 </>
             )