add join date on profiles

assets/public/custom/utils.js

@@ -40,6 +40,8 @@ window.CSS_CLASSES = {
     settingsRegion: "sidebarRegion-1VBisG",
     contentRegion: "contentRegion-3HkfJJ",
     settingsSidebar: "standardSidebarView-E9Pc3j",
+    profileHeader: "defaultColor-24IHKz eyebrow-Ejf06y defaultColor-HXu-5n userInfoSectionHeader-2mYYun",
+    profileText: "userInfoText-2MFCmH markup-eYLPri clamped-2ZePhX",
     title: "colorStandard-1Xxp1s size14-k_3Hy4 h1-34Txb0 title-3hptVQ defaultColor-2cKwKo defaultMarginh1-EURXsm",
     hidden: "hidden-27eifz",
     hamburger: "btnHamburger-3GF0_5",

assets/public/custom/web/main.js

@@ -9,26 +9,12 @@
     const CONFIG_KEY = "rscord_config";
     const DEFAULT_CONFIG = { customCss: "", revertStatusIcons: false };
     
-    const CSS_CLASSES = {
-        tabItem: "item-3XjbnG",
-        selected: "selected-g-kMVV",
-        contentColumn: "contentColumn-1C7as6",
-        settingsRegion: "sidebarRegion-1VBisG",
-        contentRegion: "contentRegion-3HkfJJ",
-        settingsSidebar: "standardSidebarView-E9Pc3j",
-        title: "colorStandard-1Xxp1s size14-k_3Hy4 h1-34Txb0 title-3hptVQ defaultColor-2cKwKo defaultMarginh1-EURXsm",
-        miniTitle: "colorStandard-1Xxp1s size14-k_3Hy4 h5-2RwDNl title-3hptVQ title-1HgbhV",
-        hidden: "hidden-27eifz",
-        hamburger: "btnHamburger-3GF0_5",
-        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(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(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(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(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)
+        "hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)": "#43B581", // Online (green)
     };
 
     const IS_MOBILE = window
@@ -61,6 +47,32 @@
         return updated;
     }
 
+    // this is a shitty patch
+    // you can just grab this shit from the req but i do not care
+    function addJoinDates() {
+        if (document.getElementById("join-date")) return;
+
+        const noteTextArea = document.querySelector(".userInfoSection-2u2hir > :has(+ .note-3M15gE)") ?? document.querySelector(".bodyInnerWrapper-2bQs1k > h3");
+        const nitroBadge = document.querySelector(".clickable-1knRMS[aria-label]");
+        if (!noteTextArea || !nitroBadge) return;
+
+        const nitroText = nitroBadge.getAttribute("aria-label");
+        if (!nitroText) return;
+
+        const div1 = document.createElement("div");
+        div1.id = "join-date";
+        div1.className = CSS_CLASSES.profileHeader;
+        div1.textContent = "Account since";
+
+        const div2 = document.createElement("div");
+        div2.id = "join-date";
+        div2.className = CSS_CLASSES.profileText;
+        div2.textContent = nitroText.replace("Subscriber since ", "");
+
+        noteTextArea.insertAdjacentElement("beforebegin", div1);
+        div1.insertAdjacentElement("afterend", div2);
+    }
+
     async function addSwitches(container) {
         const config = loadConfig();
 
@@ -91,7 +103,7 @@
     }
 
     function revertStatusIcons() {
-        const statusRects = document.querySelectorAll('rect[fill^="hsl"]');
+        const statusRects = document.querySelectorAll("rect[fill^='hsl']");
         for (const rect of statusRects) {
             const fill = rect.getAttribute("fill");
             if (STATUS_COLOR_MAP[fill]) {
@@ -107,7 +119,7 @@
             const mask = document.getElementById(maskId);
             if (!mask) continue;
 
-            mask.querySelectorAll('[fill="black"]').forEach(el => el.remove());
+            mask.querySelectorAll("[fill='black']").forEach(el => el.remove());
         }
     }
 
@@ -140,7 +152,7 @@
     }
 
     function addSettingsTab() {
-        const advancedTab = document.querySelector(`.${CSS_CLASSES.tabItem}[aria-controls='advanced-tab']`);
+        const advancedTab = document.querySelector(`.${CSS_CLASSES.tabItem}[aria-controls="advanced-tab"]`);
         if (!advancedTab) return;
         if (document.getElementById(BUTTON_ID)) return;
 
@@ -153,7 +165,7 @@
         settingsBtn.textContent = "RSCord Settings";
 
         settingsBtn.addEventListener("click", () => {
-            const tabs = settingsBtn.parentElement.querySelectorAll('[role="tab"]');
+            const tabs = settingsBtn.parentElement.querySelectorAll("[role='tab']");
             tabs.forEach(tab => tab.classList.remove(CSS_CLASSES.selected));
             tabs.forEach(tab => tab.setAttribute("aria-selected", "false"));
             settingsBtn.classList.add(CSS_CLASSES.selected);
@@ -188,6 +200,7 @@
     const observer = new MutationObserver(() => {
         if (document.querySelector(`.${CSS_CLASSES.settingsSidebar}`)) addSettingsTab();
         if (loadConfig().revertStatusIcons) revertStatusIcons();
+        addJoinDates();
     });
 
     observer.observe(document.body, { childList: true, subtree: true });
@@ -203,10 +216,10 @@
             contentRegion.classList.add(CSS_CLASSES.hidden);
         }
 
-        const clickedTab = e.target.closest('[role="tab"]');
+        const clickedTab = e.target.closest("[role='tab']");
         if (!clickedTab) return;
 
-        const allTabs = document.querySelectorAll('[role="tab"]');
+        const allTabs = document.querySelectorAll("[role='tab']");
         allTabs.forEach(tab => tab.classList.remove(CSS_CLASSES.selected));
         allTabs.forEach(tab => tab.setAttribute("aria-selected", "false"));
         clickedTab.classList.add(CSS_CLASSES.selected);