From d8b3869b8113f304a352677907c6ee9975ee0cd1 Mon Sep 17 00:00:00 2001
From: Board <26598490+BoardTM@users.noreply.github.com>
Date: Wed, 15 May 2024 01:07:33 +0200
Subject: [PATCH] ThemeAttributes: add larger avatar url variables to avatars
 (#2449)

Co-authored-by: vee <vendicated@riseup.net>
---
 src/plugins/themeAttributes/README.md | 10 ++++++++-
 src/plugins/themeAttributes/index.ts  | 30 ++++++++++++++++++++++++++-
 src/utils/constants.ts                |  4 ++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/plugins/themeAttributes/README.md b/src/plugins/themeAttributes/README.md
index 87cb803c..89001aae 100644
--- a/src/plugins/themeAttributes/README.md
+++ b/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)
diff --git a/src/plugins/themeAttributes/index.ts b/src/plugins/themeAttributes/index.ts
index b8ceac62..b8084454 100644
--- a/src/plugins/themeAttributes/index.ts
+++ b/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;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index e446a27b..69c18cd5 100644
--- a/src/utils/constants.ts
+++ b/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