stay on correct settings tab after reload

static/js/settings.js

@@ -2,6 +2,45 @@ document.addEventListener('DOMContentLoaded', function() {
     const primaryColorInput = document.getElementById('primaryColor');
     const secondaryColorInput = document.getElementById('secondaryColor');
 
+    // Tab persistence
+    const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
+    const tabContent = document.querySelectorAll('.tab-pane');
+
+    // Function to activate a specific tab
+    function activateTab(tabId) {
+        // Remove active class from all tabs and content
+        settingsTabs.forEach(tab => {
+            tab.classList.remove('active');
+            tab.setAttribute('aria-selected', 'false');
+        });
+        tabContent.forEach(content => {
+            content.classList.remove('show', 'active');
+        });
+
+        // Activate the selected tab
+        const selectedTab = document.querySelector(`#${tabId}-tab`);
+        const selectedContent = document.getElementById(tabId);
+        if (selectedTab && selectedContent) {
+            selectedTab.classList.add('active');
+            selectedTab.setAttribute('aria-selected', 'true');
+            selectedContent.classList.add('show', 'active');
+            // Save to localStorage
+            localStorage.setItem('settingsActiveTab', tabId);
+        }
+    }
+
+    // Add click event listeners to tabs
+    settingsTabs.forEach(tab => {
+        tab.addEventListener('click', (e) => {
+            const tabId = e.target.getAttribute('data-bs-target').substring(1);
+            activateTab(tabId);
+        });
+    });
+
+    // Restore active tab from localStorage or URL hash
+    const savedTab = localStorage.getItem('settingsActiveTab') || window.location.hash.substring(1) || 'colors';
+    activateTab(savedTab);
+
     // Color manipulation functions
     function hexToRgb(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);