ThemeAttributes: add larger avatar url variables to avatars (#2449)

Co-authored-by: vee <vendicated@riseup.net>

src/plugins/themeAttributes/README.md

@@ -1,6 +1,6 @@
 # ThemeAttributes
 
-This plugin adds data attributes to various elements inside Discord
+This plugin adds data attributes and CSS variables to various elements inside Discord
 
 This allows themes to more easily theme those elements or even do things that otherwise wouldn't be possible
 
@@ -19,3 +19,11 @@ This allows themes to more easily theme those elements or even do things that ot
 - `data-is-self` is a boolean indicating whether this is the current user's message
 
 ![image](https://github.com/Vendicated/Vencord/assets/45497981/34bd5053-3381-402f-82b2-9c812cc7e122)
+
+## CSS Variables
+
+### Avatars
+
+`--avatar-url-<resolution>` contains a URL for the users avatar with the size attribute adjusted for the resolutions `128, 256, 512, 1024, 2048, 4096`.
+
+![image](https://github.com/Vendicated/Vencord/assets/26598490/192ddac0-c827-472f-9933-fa99ff36f723)

src/plugins/themeAttributes/index.ts

@@ -9,10 +9,11 @@ import definePlugin from "@utils/types";
 import { UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
+
 export default definePlugin({
     name: "ThemeAttributes",
     description: "Adds data attributes to various elements for theming purposes",
-    authors: [Devs.Ven],
+    authors: [Devs.Ven, Devs.Board],
 
     patches: [
         // Add data-tab-id to all tab bar items
@@ -32,9 +33,36 @@ export default definePlugin({
                 match: /\.messageListItem(?=,"aria)/,
                 replace: "$&,...$self.getMessageProps(arguments[0])"
             }
+        },
+
+        // add --avatar-url-<resolution> css variable to avatar img elements
+        // popout profiles
+        {
+            find: ".LABEL_WITH_ONLINE_STATUS",
+            replacement: {
+                match: /src:null!=\i\?(\i).{1,50}"aria-hidden":!0/,
+                replace: "$&,style:$self.getAvatarStyles($1)"
+            }
+        },
+        // chat avatars
+        {
+            find: "showCommunicationDisabledStyles",
+            replacement: {
+                match: /src:(\i),"aria-hidden":!0/,
+                replace: "$&,style:$self.getAvatarStyles($1)"
+            }
         }
     ],
 
+    getAvatarStyles(src: string) {
+        return Object.fromEntries(
+            [128, 256, 512, 1024, 2048, 4096].map(size => [
+                `--avatar-url-${size}`,
+                `url(${src.replace(/\d+$/, String(size))})`
+            ])
+        );
+    },
+
     getMessageProps(props: { message: Message; }) {
         const author = props.message?.author;
         const authorId = author?.id;

src/utils/constants.ts

@@ -382,6 +382,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "ant0n",
         id: 145224646868860928n
     },
+    Board: {
+        name: "BoardTM",
+        id: 285475344817848320n,
+    },
     philipbry: {
         name: "philipbry",
         id: 554994003318276106n