From 64ff09910bdecf23f1437eecb03eedef5aa44ab2 Mon Sep 17 00:00:00 2001
From: Eduard Prigoana <eduardgit@prigoana.com>
Date: Wed, 18 Feb 2026 03:50:00 +0000
Subject: [PATCH] close modals on navigation

---
 index.html     |  8 ++++----
 js/app.js      |  7 ++++---
 js/settings.js | 14 +++++++-------
 js/storage.js  | 42 +++++++++++++++++++++++++++++++++++++-----
 4 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index fcd7af9..a564724 100644
--- a/index.html
+++ b/index.html
@@ -3097,14 +3097,14 @@
                             <div class="settings-group">
                                 <div class="setting-item">
                                     <div class="info">
-                                        <span class="label">Close Queue on Navigation</span>
+                                        <span class="label">Close Modals on Navigation</span>
                                         <span class="description"
-                                            >Close the queue panel when navigating back or to a new page (useful for
-                                            mobile)</span
+                                            >Close open modals and panels (like lyrics, queue) when navigating back or
+                                            to a new page</span
                                         >
                                     </div>
                                     <label class="toggle-switch">
-                                        <input type="checkbox" id="queue-close-on-navigation-toggle" />
+                                        <input type="checkbox" id="close-modals-on-navigation-toggle" />
                                         <span class="slider"></span>
                                     </label>
                                 </div>
diff --git a/js/app.js b/js/app.js
index 984cd72..5507f3b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,7 +7,7 @@ import {
     downloadQualitySettings,
     sidebarSettings,
     pwaUpdateSettings,
-    queueBehaviorSettings,
+    modalSettings,
 } from './storage.js';
 import { UIRenderer } from './ui.js';
 import { Player } from './player.js';
@@ -2117,9 +2117,10 @@ document.addEventListener('DOMContentLoaded', async () => {
             return;
         }
 
-        // Close side panel (queue/lyrics) on navigation if setting is enabled
-        if (queueBehaviorSettings.shouldCloseOnNavigation()) {
+        // Close side panel (queue/lyrics) and modals on navigation if setting is enabled
+        if (modalSettings.shouldCloseOnNavigation()) {
             sidePanelManager.close();
+            modalSettings.closeAllModals();
         }
 
         await router();
diff --git a/js/settings.js b/js/settings.js
index 1654e75..88caab0 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -32,7 +32,7 @@ import {
     contentBlockingSettings,
     musicProviderSettings,
     analyticsSettings,
-    queueBehaviorSettings,
+    modalSettings,
 } from './storage.js';
 import { audioContextManager, EQ_PRESETS } from './audio-context.js';
 import { getButterchurnPresets } from './visualizers/butterchurn.js';
@@ -1910,12 +1910,12 @@ export function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
-    // Queue Close on Navigation Toggle
-    const queueCloseOnNavigationToggle = document.getElementById('queue-close-on-navigation-toggle');
-    if (queueCloseOnNavigationToggle) {
-        queueCloseOnNavigationToggle.checked = queueBehaviorSettings.shouldCloseOnNavigation();
-        queueCloseOnNavigationToggle.addEventListener('change', (e) => {
-            queueBehaviorSettings.setCloseOnNavigation(e.target.checked);
+    // Close Modals on Navigation Toggle
+    const closeModalsOnNavigationToggle = document.getElementById('close-modals-on-navigation-toggle');
+    if (closeModalsOnNavigationToggle) {
+        closeModalsOnNavigationToggle.checked = modalSettings.shouldCloseOnNavigation();
+        closeModalsOnNavigationToggle.addEventListener('change', (e) => {
+            modalSettings.setCloseOnNavigation(e.target.checked);
         });
     }
 
diff --git a/js/storage.js b/js/storage.js
index 0950ff7..20b28ad 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -2208,16 +2208,15 @@ export const musicProviderSettings = {
     },
 };
 
-export const queueBehaviorSettings = {
-    STORAGE_KEY: 'queue-close-on-navigation',
+export const modalSettings = {
+    STORAGE_KEY: 'close-modals-on-navigation',
 
     shouldCloseOnNavigation() {
         try {
-            // Default to true on mobile, false on desktop
+            // Default to false to preserve existing behavior
             const saved = localStorage.getItem(this.STORAGE_KEY);
             if (saved === null) {
-                // Auto-detect: default to true for mobile/touch devices
-                return window.matchMedia('(pointer: coarse)').matches;
+                return false;
             }
             return saved === 'true';
         } catch {
@@ -2228,6 +2227,39 @@ export const queueBehaviorSettings = {
     setCloseOnNavigation(enabled) {
         localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
     },
+
+    closeAllModals() {
+        // Close all modal overlays
+        document.querySelectorAll('.modal-overlay').forEach((modal) => {
+            modal.remove();
+        });
+
+        // Close all modals with active class
+        document.querySelectorAll('.modal.active').forEach((modal) => {
+            modal.classList.remove('active');
+        });
+
+        // Close specific modals by ID
+        const modalIds = [
+            'playlist-modal',
+            'folder-modal',
+            'playlist-select-modal',
+            'shortcuts-modal',
+            'missing-tracks-modal',
+            'sleep-timer-modal',
+            'discography-download-modal',
+            'custom-db-modal',
+            'tracker-modal',
+            'epilepsy-warning-modal',
+        ];
+
+        modalIds.forEach((id) => {
+            const modal = document.getElementById(id);
+            if (modal) {
+                modal.classList.remove('active');
+            }
+        });
+    },
 };
 
 export const contentBlockingSettings = {