From 281ea730e3369955ef6100d2bfb730b69ef68835 Mon Sep 17 00:00:00 2001
From: Sqaaakoi <sqaaakoi-git@sqaaakoi.xyz>
Date: Tue, 16 Jul 2024 01:35:01 +1200
Subject: [PATCH] ThemeAttributes: Add classes to `html` for hard to detect
 state (streamer mode)

---
 src/plugins/themeAttributes/README.md |  6 ++++++
 src/plugins/themeAttributes/index.ts  | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/plugins/themeAttributes/README.md b/src/plugins/themeAttributes/README.md
index 89001aae4..642865be8 100644
--- a/src/plugins/themeAttributes/README.md
+++ b/src/plugins/themeAttributes/README.md
@@ -27,3 +27,9 @@ This allows themes to more easily theme those elements or even do things that ot
 `--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)
+
+## CSS Classes
+
+Discord sets some classes on the `html` element to indicate app state. ThemeAttributes adds a few more classes to this list for certain features that cannot be reliably detected using other selectors
+
+- `streamer-mode` is added when Streamer Mode is enabled, as the Notice bar for this can be dismissed
diff --git a/src/plugins/themeAttributes/index.ts b/src/plugins/themeAttributes/index.ts
index b80844546..65fa8347a 100644
--- a/src/plugins/themeAttributes/index.ts
+++ b/src/plugins/themeAttributes/index.ts
@@ -6,9 +6,11 @@
 
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { UserStore } from "@webpack/common";
+import { findStoreLazy } from "@webpack";
+import { UserStore, useStateFromStores } from "@webpack/common";
 import { Message } from "discord-types/general";
 
+const StreamerModeStore = findStoreLazy("StreamerModeStore");
 
 export default definePlugin({
     name: "ThemeAttributes",
@@ -51,6 +53,13 @@ export default definePlugin({
                 match: /src:(\i),"aria-hidden":!0/,
                 replace: "$&,style:$self.getAvatarStyles($1)"
             }
+        },
+        {
+            find: '"; --devtools-sidebar-width: "',
+            replacement: {
+                match: /overlay:__OVERLAY__/,
+                replace: "$&,...$self.rootClassNames()"
+            }
         }
     ],
 
@@ -71,5 +80,9 @@ export default definePlugin({
             "data-author-username": author?.username,
             "data-is-self": authorId && authorId === UserStore.getCurrentUser()?.id,
         };
-    }
+    },
+
+    rootClassNames: () => ({
+        "streamer-mode": useStateFromStores([StreamerModeStore], () => StreamerModeStore.enabled),
+    })
 });