v0.7.37 - Enhanced admin interface with sliding sidebar navigation, moved dark mode and logout to sidebar footer, improved button styling consistency

api/index.js

@@ -52,8 +52,6 @@ const loginModalContainer = document.getElementById('login-modal-container');
 const profileArea = document.getElementById('profile-area');
 const headerUserImage = document.getElementById('header-user-image');
 const headerUserName = document.getElementById('header-user-name');
-const logoutDropdown = document.getElementById('logout-dropdown');
-const logoutBtn = document.getElementById('logout-btn');
 
 // Legacy elements (kept for backward compatibility)
 const persistentUserName = document.getElementById('persistent-user-name');
@@ -579,10 +577,6 @@ function hideProfileFromHeader() {
     if (profileArea) {
         profileArea.style.display = 'none';
     }
-    // Also hide logout dropdown if visible
-    if (logoutDropdown) {
-        logoutDropdown.style.display = 'none';
-    }
 }
 
 // Update login/logout UI visibility (legacy function - kept for backward compatibility)
@@ -2102,45 +2096,8 @@ async function sendConfigUpdateCommand(configObjects) {
 
 
 
-// Profile area click handler for logout dropdown
-function toggleLogoutDropdown(event) {
-    if (!logoutDropdown) return;
-
-    // Only toggle if clicking on the image, not the text or container
-    if (event.target === headerUserImage) {
-        const isVisible = logoutDropdown.style.display === 'block';
-        logoutDropdown.style.display = isVisible ? 'none' : 'block';
-    }
-}
-
-// Close logout dropdown when clicking outside
-document.addEventListener('click', function(event) {
-    if (profileArea && logoutDropdown && !profileArea.contains(event.target)) {
-        logoutDropdown.style.display = 'none';
-    }
-});
-
-// Initialize profile area click handler
-if (profileArea) {
-    profileArea.addEventListener('click', toggleLogoutDropdown);
-}
-
-// Initialize logout button handler
-if (logoutBtn) {
-    logoutBtn.addEventListener('click', function(e) {
-        e.stopPropagation(); // Prevent profile area click
-        logout();
-    });
-}
-
-// Initialize dark mode button handler
-const darkModeBtn = document.getElementById('dark-mode-btn');
-if (darkModeBtn) {
-    darkModeBtn.addEventListener('click', function(e) {
-        e.stopPropagation(); // Prevent profile area click
-        toggleDarkMode();
-    });
-}
+// Profile area click handler removed - dropdown moved to sidebar
+// Logout and dark mode buttons are now in the sidebar footer
 
 // Initialize relay pubkey container click handler for clipboard copy
 const relayPubkeyContainer = document.getElementById('relay-pubkey-container');
@@ -4563,9 +4520,9 @@ function toggleDarkMode() {
 }
 
 function updateDarkModeButton(isDarkMode) {
-    const darkModeBtn = document.getElementById('dark-mode-btn');
-    if (darkModeBtn) {
-        darkModeBtn.textContent = isDarkMode ? 'LIGHT MODE' : 'DARK MODE';
+    const navDarkModeBtn = document.getElementById('nav-dark-mode-btn');
+    if (navDarkModeBtn) {
+        navDarkModeBtn.textContent = isDarkMode ? 'LIGHT MODE' : 'DARK MODE';
     }
 }
 
@@ -4655,6 +4612,18 @@ function switchPage(pageName) {
         }
     }
 
+    // Special handling for configuration page - ensure config-display is visible and refresh data
+    if (pageName === 'configuration') {
+        const configDisplay = document.getElementById('config-display');
+        if (configDisplay) {
+            configDisplay.classList.remove('hidden');
+        }
+        // Always refresh configuration data when navigating to config page
+        fetchConfiguration().catch(error => {
+            console.log('Failed to refresh configuration on page switch: ' + error.message);
+        });
+    }
+
     // Close side navigation
     closeSideNav();
 
@@ -4668,6 +4637,12 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize dark mode
     initializeDarkMode();
 
+    // Initialize sidebar button text
+    const navDarkModeBtn = document.getElementById('nav-dark-mode-btn');
+    if (navDarkModeBtn) {
+        navDarkModeBtn.textContent = document.body.classList.contains('dark-mode') ? 'LIGHT MODE' : 'DARK MODE';
+    }
+
     // Start RELAY letter animation
     startRelayAnimation();
 
@@ -4714,6 +4689,30 @@ function initializeSideNavigation() {
         });
     });
 
+    // Footer button handlers
+    const navDarkModeBtn = document.getElementById('nav-dark-mode-btn');
+    const navLogoutBtn = document.getElementById('nav-logout-btn');
+
+    if (navDarkModeBtn) {
+        navDarkModeBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggleDarkMode();
+            // Update button text after toggle
+            setTimeout(() => {
+                navDarkModeBtn.textContent = document.body.classList.contains('dark-mode') ? 'LIGHT MODE' : 'DARK MODE';
+            }, 10);
+            closeSideNav();
+        });
+    }
+
+    if (navLogoutBtn) {
+        navLogoutBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            logout();
+            closeSideNav();
+        });
+    }
+
     // Set initial page
     switchPage(currentPage);
 }