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

v0.7.36 - Implement sliding side navigation menu with page switching for admin sections
2025-10-22 12:43:09 -04:00 · 2025-10-22 11:01:30 -04:00
7 changed files with 363 additions and 88 deletions
--- a/api/index.css
+++ b/api/index.css
@@ -1109,3 +1109,123 @@ body.dark-mode .sql-results-table tbody tr:nth-child(even) {
    border-radius: var(--border-radius);
    box-sizing: border-box;
 }
+
+/* ================================
+   SIDE NAVIGATION MENU
+   ================================ */
+
+.side-nav {
+    position: fixed;
+    top: 0;
+    left: -300px;
+    width: 280px;
+    height: 100vh;
+    background: var(--secondary-color);
+    border-right: var(--border-width) solid var(--border-color);
+    z-index: 1000;
+    transition: left 0.3s ease;
+    overflow-y: auto;
+    padding-top: 80px;
+}
+
+.side-nav.open {
+    left: 0;
+}
+
+.side-nav-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    display: none;
+}
+
+.side-nav-overlay.show {
+    display: block;
+}
+
+.nav-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-menu li {
+    border-bottom: var(--border-width) solid var(--muted-color);
+}
+
+.nav-menu li:last-child {
+    border-bottom: none;
+}
+
+.nav-item {
+    display: block;
+    padding: 15px 20px;
+    color: var(--primary-color);
+    text-decoration: none;
+    font-family: var(--font-family);
+    font-size: 16px;
+    font-weight: bold;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: 2px solid var(--secondary-color);
+    background: none;
+    width: 100%;
+    text-align: left;
+}
+
+.nav-item:hover {
+    border: 2px solid var(--secondary-color);
+    background:var(--muted-color);
+    color: var(--accent-color);
+}
+
+.nav-item.active {
+    text-decoration: underline;
+      padding-left: 16px;
+  }
+
+.nav-footer {
+      position: absolute;
+      bottom: 20px;
+      left: 0;
+      right: 0;
+      padding: 0 20px;
+  }
+
+.nav-footer-btn {
+      display: block;
+      width: 100%;
+      padding: 12px 20px;
+      margin-bottom: 8px;
+      color: var(--primary-color);
+
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
+      font-family: var(--font-family);
+      font-size: 14px;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.2s ease;
+  }
+
+.nav-footer-btn:hover {
+      background:var(--muted-color);
+      border-color: var(--accent-color);
+  }
+
+.nav-footer-btn:last-child {
+      margin-bottom: 0;
+  }
+
+.header-title.clickable {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.header-title.clickable:hover {
+    opacity: 0.8;
+}
--- a/api/index.html
+++ b/api/index.html
@@ -9,11 +9,30 @@
 </head>

 <body>
+    <!-- Side Navigation Menu -->
+    <nav class="side-nav" id="side-nav">
+        <ul class="nav-menu">
+            <li><button class="nav-item" data-page="statistics">Statistics</button></li>
+            <li><button class="nav-item" data-page="subscriptions">Subscriptions</button></li>
+            <li><button class="nav-item" data-page="configuration">Configuration</button></li>
+            <li><button class="nav-item" data-page="authorization">Authorization</button></li>
+            <li><button class="nav-item" data-page="dm">DM</button></li>
+            <li><button class="nav-item" data-page="database">Database Query</button></li>
+        </ul>
+        <div class="nav-footer">
+            <button class="nav-footer-btn" id="nav-dark-mode-btn">DARK MODE</button>
+            <button class="nav-footer-btn" id="nav-logout-btn">LOGOUT</button>
+        </div>
+    </nav>
+
+    <!-- Side Navigation Overlay -->
+    <div class="side-nav-overlay" id="side-nav-overlay"></div>
+
    <!-- Header with title and profile display -->
    <div class="section">

            <div class="header-content">
-                <div class="header-title">
+                <div class="header-title clickable" id="header-title">
                    <span class="relay-letter" data-letter="R">R</span>
                    <span class="relay-letter" data-letter="E">E</span>
                    <span class="relay-letter" data-letter="L">L</span>
@@ -34,10 +53,7 @@
                        <span id="header-user-name" class="header-user-name">Loading...</span>
                    </div>
                    <!-- Logout dropdown -->
-                    <div class="logout-dropdown" id="logout-dropdown" style="display: none;">
-                        <button type="button" id="dark-mode-btn" class="logout-btn">🌙 DARK MODE</button>
-                        <button type="button" id="logout-btn" class="logout-btn">LOGOUT</button>
-                    </div>
+                    <!-- Dropdown menu removed - buttons moved to sidebar -->
                </div>
            </div>

--- a/api/index.js
+++ b/api/index.js
@@ -35,6 +35,10 @@ let statsAutoRefreshInterval = null;
 let countdownInterval = null;
 let countdownSeconds = 10;

+// Side navigation state
+let currentPage = 'statistics'; // Default page
+let sideNavOpen = false;
+
 // SQL Query state
 let pendingSqlQueries = new Map();

@@ -48,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');
@@ -484,36 +486,33 @@ function handleLogoutEvent() {

 // Update visibility of admin sections based on login and relay connection status
 function updateAdminSectionsVisibility() {
-    const divConfig = document.getElementById('div_config');
-    const authRulesSection = document.getElementById('authRulesSection');
-    const databaseStatisticsSection = document.getElementById('databaseStatisticsSection');
-    const subscriptionDetailsSection = document.getElementById('subscriptionDetailsSection');
-    const nip17DMSection = document.getElementById('nip17DMSection');
-    const sqlQuerySection = document.getElementById('sqlQuerySection');
    const shouldShow = isLoggedIn && isRelayConnected;

-    if (divConfig) divConfig.style.display = shouldShow ? 'block' : 'none';
-    if (authRulesSection) authRulesSection.style.display = shouldShow ? 'block' : 'none';
-    if (databaseStatisticsSection) databaseStatisticsSection.style.display = shouldShow ? 'block' : 'none';
-    if (subscriptionDetailsSection) subscriptionDetailsSection.style.display = shouldShow ? 'block' : 'none';
-    if (nip17DMSection) nip17DMSection.style.display = shouldShow ? 'block' : 'none';
-    if (sqlQuerySection) sqlQuerySection.style.display = shouldShow ? 'block' : 'none';
+    // If logged in and connected, show the current page, otherwise hide all sections
+    if (shouldShow) {
+        // Show the current page
+        switchPage(currentPage);

-    // Start/stop auto-refresh based on visibility
-    if (shouldShow && databaseStatisticsSection && databaseStatisticsSection.style.display === 'block') {
-        // Load statistics immediately (no auto-refresh - using real-time monitoring events)
-        sendStatsQuery().catch(error => {
-            console.log('Auto-fetch statistics failed: ' + error.message);
-        });
-        // startStatsAutoRefresh(); // DISABLED - using real-time monitoring events instead
-        // Also load configuration and auth rules automatically when sections become visible
-        fetchConfiguration().catch(error => {
-            console.log('Auto-fetch configuration failed: ' + error.message);
-        });
-        loadAuthRules().catch(error => {
-            console.log('Auto-load auth rules failed: ' + error.message);
-        });
+        // Load data for the current page
+        loadCurrentPageData();
    } else {
+        // Hide all sections when not logged in or not connected
+        const sections = [
+            'databaseStatisticsSection',
+            'subscriptionDetailsSection',
+            'div_config',
+            'authRulesSection',
+            'nip17DMSection',
+            'sqlQuerySection'
+        ];
+
+        sections.forEach(sectionId => {
+            const section = document.getElementById(sectionId);
+            if (section) {
+                section.style.display = 'none';
+            }
+        });
+
        stopStatsAutoRefresh();
    }

@@ -521,6 +520,31 @@ function updateAdminSectionsVisibility() {
    updateCountdownDisplay();
 }

+// Load data for the current page
+function loadCurrentPageData() {
+    switch (currentPage) {
+        case 'statistics':
+            // Load statistics immediately (no auto-refresh - using real-time monitoring events)
+            sendStatsQuery().catch(error => {
+                console.log('Auto-fetch statistics failed: ' + error.message);
+            });
+            break;
+        case 'configuration':
+            // Load configuration
+            fetchConfiguration().catch(error => {
+                console.log('Auto-fetch configuration failed: ' + error.message);
+            });
+            break;
+        case 'authorization':
+            // Load auth rules
+            loadAuthRules().catch(error => {
+                console.log('Auto-load auth rules failed: ' + error.message);
+            });
+            break;
+        // Other pages don't need initial data loading
+    }
+}
+
 // Show login modal
 function showLoginModal() {
    if (loginModal && loginModalContainer) {
@@ -553,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)
@@ -2076,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');
@@ -4537,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';
    }
 }

@@ -4556,6 +4539,97 @@ function initializeDarkMode() {
    }
 }

+// Side navigation functions
+function toggleSideNav() {
+    const sideNav = document.getElementById('side-nav');
+    const overlay = document.getElementById('side-nav-overlay');
+
+    if (sideNavOpen) {
+        sideNav.classList.remove('open');
+        overlay.classList.remove('show');
+        sideNavOpen = false;
+    } else {
+        sideNav.classList.add('open');
+        overlay.classList.add('show');
+        sideNavOpen = true;
+    }
+}
+
+function closeSideNav() {
+    const sideNav = document.getElementById('side-nav');
+    const overlay = document.getElementById('side-nav-overlay');
+
+    sideNav.classList.remove('open');
+    overlay.classList.remove('show');
+    sideNavOpen = false;
+}
+
+function switchPage(pageName) {
+    // Update current page
+    currentPage = pageName;
+
+    // Update navigation active state
+    const navItems = document.querySelectorAll('.nav-item');
+    navItems.forEach(item => {
+        item.classList.remove('active');
+        if (item.getAttribute('data-page') === pageName) {
+            item.classList.add('active');
+        }
+    });
+
+    // Hide all sections
+    const sections = [
+        'databaseStatisticsSection',
+        'subscriptionDetailsSection',
+        'div_config',
+        'authRulesSection',
+        'nip17DMSection',
+        'sqlQuerySection'
+    ];
+
+    sections.forEach(sectionId => {
+        const section = document.getElementById(sectionId);
+        if (section) {
+            section.style.display = 'none';
+        }
+    });
+
+    // Show selected section
+    const pageMap = {
+        'statistics': 'databaseStatisticsSection',
+        'subscriptions': 'subscriptionDetailsSection',
+        'configuration': 'div_config',
+        'authorization': 'authRulesSection',
+        'dm': 'nip17DMSection',
+        'database': 'sqlQuerySection'
+    };
+
+    const targetSectionId = pageMap[pageName];
+    if (targetSectionId) {
+        const targetSection = document.getElementById(targetSectionId);
+        if (targetSection) {
+            targetSection.style.display = 'block';
+        }
+    }
+
+    // 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();
+
+    log(`Switched to page: ${pageName}`, 'INFO');
+}
+
 // Initialize the app
 document.addEventListener('DOMContentLoaded', () => {
    console.log('C-Relay Admin API interface loaded');
@@ -4563,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();

@@ -4571,6 +4651,9 @@ document.addEventListener('DOMContentLoaded', () => {
        initializeEventRateChart();
    }, 1000); // Delay to ensure text_graph.js is loaded

+    // Initialize side navigation
+    initializeSideNavigation();
+
    // Ensure admin sections are hidden by default on page load
    updateAdminSectionsVisibility();

@@ -4581,6 +4664,59 @@ document.addEventListener('DOMContentLoaded', () => {
    }, 100);
 });

+// Initialize side navigation event handlers
+function initializeSideNavigation() {
+    // Header title click handler
+    const headerTitle = document.getElementById('header-title');
+    if (headerTitle) {
+        headerTitle.addEventListener('click', toggleSideNav);
+    }
+
+    // Overlay click handler
+    const overlay = document.getElementById('side-nav-overlay');
+    if (overlay) {
+        overlay.addEventListener('click', closeSideNav);
+    }
+
+    // Navigation item click handlers
+    const navItems = document.querySelectorAll('.nav-item');
+    navItems.forEach(item => {
+        item.addEventListener('click', (e) => {
+            const pageName = e.target.getAttribute('data-page');
+            if (pageName) {
+                switchPage(pageName);
+            }
+        });
+    });
+
+    // 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);
+}
+
 // ================================
 // SQL QUERY FUNCTIONS
 // ================================
--- a/relay.pid
+++ b/relay.pid
@@ -1 +1 @@
-3615986
+3957891
--- a/src/embedded_web_content.c
+++ b/src/embedded_web_content.c
--- a/src/main.h
+++ b/src/main.h
@@ -10,10 +10,10 @@
 #define MAIN_H

 // Version information (auto-updated by build system)
-#define VERSION "v0.7.35"
+#define VERSION "v0.7.37"
 #define VERSION_MAJOR 0
 #define VERSION_MINOR 7
-#define VERSION_PATCH 35
+#define VERSION_PATCH 37

 // Relay metadata (authoritative source for NIP-11 information)
 #define RELAY_NAME "C-Relay"
--- a/src/subscriptions.c
+++ b/src/subscriptions.c
@@ -25,6 +25,9 @@ int validate_timestamp_range(long since, long until, char* error_message, size_t
 int validate_numeric_limits(int limit, char* error_message, size_t error_size);
 int validate_search_term(const char* search_term, char* error_message, size_t error_size);

+// Forward declaration for monitoring function
+void monitoring_on_subscription_change(void);
+
 // Global database variable
 extern sqlite3* g_db;
Author	SHA1	Message	Date
Your Name	17b2aa8111	v0.7.37 - Enhanced admin interface with sliding sidebar navigation, moved dark mode and logout to sidebar footer, improved button styling consistency	2025-10-22 12:43:09 -04:00
Your Name	78d484cfe0	v0.7.36 - Implement sliding side navigation menu with page switching for admin sections	2025-10-22 11:01:30 -04:00