diff --git a/src/sidebarApps/index.js b/src/sidebarApps/index.js index f30c08a84..363578e72 100644 --- a/src/sidebarApps/index.js +++ b/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 { diff --git a/src/sidebarApps/sidebarApp.js b/src/sidebarApps/sidebarApp.js index df147dcdd..0c85339bc 100644 --- a/src/sidebarApps/sidebarApp.js +++ b/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);