add revert status icons patch

assets/public/custom/web/main.js

@@ -4,9 +4,11 @@
     const SWITCH_CONTAINER_ID = "switch-container";
 
     const CUSTOM_CSS_ID = "custom-css";
-    const CUSTOM_CSS_STORAGE = "custom_css";
     const CUSTOM_CSS_INPUT_ID = "custom-css-input";
 
+    const CONFIG_KEY = "rscord_config";
+    const DEFAULT_CONFIG = { customCss: "", revertStatusIcons: false };
+
     const CSS_CLASSES = {
         tabItem: "item-3XjbnG",
         selected: "selected-g-kMVV",
@@ -21,6 +23,14 @@
         textInput: "inputDefault-3FGxgL input-2g-os5"
     };
 
+    const STATUS_COLOR_MAP = {
+        'hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)': '#FAA61A', // Idle (yellow)
+        'hsl(0, calc(var(--saturation-factor, 1) * 100%), 71.4%)': '#F04747', // DND (red)
+        'hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%)': '#7289DA', // Away (blue)
+        'hsl(0, calc(var(--saturation-factor, 1) * 0%), 47.5%)': '#747F8D', // Offline (gray)
+        'hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)': '#43B581', // Online (green)
+    };
+
     const IS_MOBILE = window
         .matchMedia("(pointer: coarse)")
         .matches;
@@ -33,7 +43,27 @@
         <textarea id="${CUSTOM_CSS_INPUT_ID}" class="${CSS_CLASSES.textInput}" placeholder="CSS goes here" type="text" name="" style="resize: vertical;height: 400px;"></textarea>
     `;
 
+    function loadConfig() {
+        try {
+            return {
+                ...DEFAULT_CONFIG,
+                ...JSON.parse(localStorage_.getItem(CONFIG_KEY) || "{}")
+            };
+        } catch {
+            return { ...DEFAULT_CONFIG };
+        }
+    }
+
+    function saveConfig(patch) {
+        const config = loadConfig();
+        const updated = { ...config, ...patch };
+        localStorage_.setItem(CONFIG_KEY, JSON.stringify(updated));
+        return updated;
+    }
+
     async function addSwitches(container) {
+        const config = loadConfig();
+
         container.appendChild(createSwitch(
             "Push Notifications",
             "Sends you notifications even when you close the app",
@@ -41,45 +71,71 @@
             await isPushRegistered(),
             async (checked) => {
                 const publicKey = window.GLOBAL_ENV.VAPID_KEY;
-                if (!publicKey) {
+                if (!publicKey) return false;
-                    alert("Server has not enabled push notifications")
-                    return false;
-                }
                 try {
                     checked ? await registerPush(publicKey) : await unregisterPush();
                     return true;
-                } catch(err) {
+                } catch {
-                    alert(err.message);
                     return false;
                 }
             }
         ));
+
+        container.appendChild(createSwitch(
+            "Revert Status Icons",
+            "Revert the colorblind status icons added in 2019",
+            "revert-status",
+            config.revertStatusIcons,
+            (checked) => saveConfig({ revertStatusIcons: checked })
+        ));
     }
 
-    function applySavedCSS() {
+    function revertStatusIcons() {
-        let css = localStorage_.getItem(CUSTOM_CSS_STORAGE) || "";
+        const statusRects = document.querySelectorAll('rect[fill^="hsl"]');
-        let style = document.getElementById(CUSTOM_CSS_ID);
+        for (const rect of statusRects) {
+            const fill = rect.getAttribute("fill");
+            if (STATUS_COLOR_MAP[fill]) {
+                rect.setAttribute("fill", STATUS_COLOR_MAP[fill]);
+            }
 
+            const maskRef = rect.getAttribute("mask");
+            if (!maskRef) continue;
+
+            const maskId = maskRef.match(/#([^)]+)/)?.[1];
+            if (!maskId) continue;
+
+            const mask = document.getElementById(maskId);
+            if (!mask) continue;
+
+            mask.querySelectorAll('[fill="black"]').forEach(el => el.remove());
+        }
+    }
+
+    function applyCustomCss() {
+        const { customCss } = loadConfig();
+
+        let style = document.getElementById(CUSTOM_CSS_ID);
         if (!style) {
             style = document.createElement("style");
             style.id = CUSTOM_CSS_ID;
             document.head.appendChild(style);
         }
 
-        style.textContent = css;
+        style.textContent = customCss;
     }
 
-    function loadCustomCSS(textarea) {
+    function setupCssInput(textarea) {
         if (!textarea) return;
-        textarea.value = localStorage_.getItem(CUSTOM_CSS_STORAGE) || "";
 
-        let style = document.getElementById(CUSTOM_CSS_ID);
+        const config = loadConfig();
+        textarea.value = config.customCss;
+
+        const style = document.getElementById(CUSTOM_CSS_ID);
         if (!style) return;
 
         textarea.addEventListener("input", () => {
-            const css = textarea.value;
+            style.textContent = textarea.value;
-            style.textContent = css;
+            saveConfig({ customCss: textarea.value });
-            localStorage_.setItem(CUSTOM_CSS_STORAGE, css);
         });
     }
 
@@ -115,7 +171,7 @@
                 document.querySelector(`.${CSS_CLASSES.contentColumn}`).appendChild(customContent);
 
                 const cssInput = document.getElementById(CUSTOM_CSS_INPUT_ID);
-                loadCustomCSS(cssInput);
+                setupCssInput(cssInput);
             }
 
             const contentColumn = document.querySelector(`.${CSS_CLASSES.contentColumn}`);
@@ -129,16 +185,13 @@
         return true;
     }
 
-    function startObserver() {
+    const observer = new MutationObserver(() => {
-        const observer = new MutationObserver(() => {
+        if (document.querySelector(`.${CSS_CLASSES.settingsSidebar}`)) addSettingsTab();
-            const sidebar = document.querySelector(`.${CSS_CLASSES.settingsSidebar}`);
+        if (loadConfig().revertStatusIcons) revertStatusIcons();
-            if (sidebar) addSettingsTab();
+    });
-        });
-        observer.observe(document.body, { childList: true, subtree: true });
-    }
 
-    startObserver();
+    observer.observe(document.body, { childList: true, subtree: true });
-    applySavedCSS();
+    applyCustomCss();
 
     document.body.addEventListener("click", (e) => {
         const clickedHamburger = e.target.closest(`.${CSS_CLASSES.hamburger}`)