From ae905881c00ac6594651fa540197fd36f756f399 Mon Sep 17 00:00:00 2001
From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com>
Date: Tue, 10 Sep 2024 20:42:37 +0100
Subject: [PATCH] feat(topbar): cross-version classname support (#3162)

Co-authored-by: ririxi <dev@ririxi.dev>
---
 jsHelper/spicetifyWrapper.js | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js
index d40a939bc1..386e64ddd2 100644
--- a/jsHelper/spicetifyWrapper.js
+++ b/jsHelper/spicetifyWrapper.js
@@ -2060,11 +2060,12 @@ Object.defineProperty(Spicetify, "TippyProps", {
 });
 
 Spicetify.Topbar = (() => {
+	let leftGeneratedClassName;
+	let rightGeneratedClassName;
 	let leftContainer;
 	let rightContainer;
 	const leftButtonsStash = new Set();
 	const rightButtonsStash = new Set();
-	const generatedClassName = "Button-medium-medium-buttonTertiary-iconOnly-condensed-disabled-isUsingKeyboard-useBrowserDefaultFocusStyle";
 
 	class Button {
 		constructor(label, icon, onClick, disabled = false, isRight = false) {
@@ -2080,19 +2081,12 @@ Spicetify.Topbar = (() => {
 			this.label = label;
 
 			this.element.appendChild(this.button);
-			const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons");
 			if (isRight) {
-				this.button.classList.add("encore-over-media-set", "main-topBar-buddyFeed");
-				if (globalHistoryButtons) this.button.classList.add("main-globalNav-buddyFeed");
-
+				this.button.className = rightGeneratedClassName;
 				rightButtonsStash.add(this.element);
 				rightContainer?.prepend(this.element);
 			} else {
-				this.button.classList.add("main-topBar-button");
-				if (globalHistoryButtons) {
-					this.button.classList.add("main-globalNav-icon", generatedClassName);
-				}
-
+				this.button.className = leftGeneratedClassName;
 				leftButtonsStash.add(this.element);
 				leftContainer?.append(this.element);
 			}
@@ -2136,9 +2130,15 @@ Spicetify.Topbar = (() => {
 
 	function waitForTopbarMounted() {
 		const globalHistoryButtons = document.querySelector(".main-globalNav-historyButtons");
+		leftGeneratedClassName = document.querySelector(
+			".main-topBar-historyButtons .main-topBar-button, .main-globalNav-historyButtons .main-globalNav-icon"
+		)?.className;
+		rightGeneratedClassName = document.querySelector(
+			".main-topBar-container .main-topBar-buddyFeed, .main-actionButtons .main-topBar-buddyFeed, .main-actionButtons .main-globalNav-buddyFeed"
+		)?.className;
 		leftContainer = document.querySelector(".main-topBar-historyButtons") ?? globalHistoryButtons;
 		rightContainer = document.querySelector(".main-actionButtons");
-		if (!leftContainer || !rightContainer) {
+		if (!leftContainer || !rightContainer || !leftGeneratedClassName || !rightGeneratedClassName) {
 			setTimeout(waitForTopbarMounted, 100);
 			return;
 		}
@@ -2148,19 +2148,14 @@ Spicetify.Topbar = (() => {
 			if (button.parentNode) button.parentNode.removeChild(button);
 
 			const buttonElement = button.querySelector("button");
-			if (globalHistoryButtons) {
-				buttonElement.classList.add("main-globalNav-icon", generatedClassName);
-			} else {
-				buttonElement.classList.remove("main-globalNav-icon", generatedClassName);
-			}
+			buttonElement.className = leftGeneratedClassName;
 		}
 		leftContainer.append(...leftButtonsStash);
 		for (const button of rightButtonsStash) {
 			if (button.parentNode) button.parentNode.removeChild(button);
 
 			const buttonElement = button.querySelector("button");
-			if (globalHistoryButtons) buttonElement.classList.add("main-globalNav-buddyFeed");
-			else buttonElement.classList.remove("main-globalNav-buddyFeed");
+			buttonElement.className = rightGeneratedClassName;
 		}
 		rightContainer.prepend(...rightButtonsStash);
 	}