fix(sidebar): keep sidebar app activation exclusive after plugin install (#1932)

Author: bajrangCoder

src/sidebarApps/index.js

@@ -35,12 +35,13 @@ function add(
 ) {
 	currentSection ??= id;
 
-	const active = currentSection === id;
 	const app = new SidebarApp(icon, id, title, initFunction, onSelected);
-
-	app.active = active;
-	app.install(prepend);
 	apps.push(app);
+	app.install(prepend);
+
+	if (currentSection === id) {
+		setActiveApp(id);
+	}
 }
 
 /**
@@ -55,10 +56,14 @@ function remove(id) {
 	app.remove();
 	apps.splice(apps.indexOf(app), 1);
 	if (wasActive && apps.length > 0) {
-		const firstApp = apps[0];
-		firstApp.active = true;
-		currentSection = firstApp.id;
-		localStorage.setItem(SIDEBAR_APPS_LAST_SECTION, firstApp.id);
+		const preferredApp = apps.find((app) => app.id === currentSection);
+		setActiveApp(preferredApp?.id || apps[0].id);
+		return;
+	}
+
+	if (!apps.length) {
+		currentSection = null;
+		localStorage.removeItem(SIDEBAR_APPS_LAST_SECTION);
 	}
 }
 
@@ -121,12 +126,20 @@ function setSponsorSidebarAppVisibility(visible) {
  * @returns {void}
  */
 function ensureActiveApp() {
-	const hasActiveApp = apps.some((app) => app.active);
-	if (!hasActiveApp && apps.length > 0) {
-		const firstApp = apps[0];
-		firstApp.active = true;
-		currentSection = firstApp.id;
-		localStorage.setItem(SIDEBAR_APPS_LAST_SECTION, firstApp.id);
+	const activeApps = apps.filter((app) => app.active);
+	if (activeApps.length === 1) return;
+
+	if (activeApps.length > 1) {
+		const preferredActiveApp = activeApps.find(
+			(app) => app.id === currentSection,
+		);
+		setActiveApp(preferredActiveApp?.id || activeApps[0].id);
+		return;
+	}
+
+	if (apps.length > 0) {
+		const preferredApp = apps.find((app) => app.id === currentSection);
+		setActiveApp(preferredApp?.id || apps[0].id);
 	}
 }
 
@@ -150,11 +163,24 @@ function onclick(e) {
 
 	if (action !== "sidebar-app") return;
 
-	localStorage.setItem(SIDEBAR_APPS_LAST_SECTION, id);
-	const activeApp = apps.find((app) => app.active);
+	setActiveApp(id);
+}
+
+/**
+ * Activates the given sidebar app and deactivates all others.
+ * @param {string} id
+ * @returns {void}
+ */
+function setActiveApp(id) {
 	const app = apps.find((app) => app.id === id);
-	if (activeApp) activeApp.active = false;
-	if (app) app.active = true;
+	if (!app) return;
+
+	currentSection = id;
+	localStorage.setItem(SIDEBAR_APPS_LAST_SECTION, id);
+
+	for (const currentApp of apps) {
+		currentApp.active = currentApp.id === id;
+	}
 }
 
 export default {

src/sidebarApps/sidebarApp.js

@@ -86,7 +86,10 @@ export default class SidebarApp {
 
 	/**@param {boolean} value */
 	set active(value) {
-		this.#active = !!value;
+		const nextValue = !!value;
+		if (this.#active === nextValue) return;
+
+		this.#active = nextValue;
 		this.#icon.classList.toggle("active", this.#active);
 		if (this.#active) {
 			const oldContainer = getContainer(this.#container);