wip

app/static/js/app.js

@@ -58,6 +58,24 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
     });
+
+    // Wait for DOM to be fully loaded
+    document.addEventListener('DOMContentLoaded', function () {
+        // Initialize theme toggle
+        initThemeToggle();
+
+        // Initialize clipboard functionality
+        initClipboard();
+
+        // Initialize port map tooltips
+        initTooltips();
+
+        // Initialize mobile sidebar
+        initMobileSidebar();
+
+        // Initialize notifications
+        initNotifications();
+    });
 });
 
 function initTiptapEditor(element) {
@@ -134,9 +152,108 @@ function showNotification(message, type = 'info') {
 
     notificationArea.appendChild(notification);
 
-    // Remove notification after 3 seconds
+    // Auto-remove after 5 seconds
     setTimeout(() => {
-        notification.classList.remove('show');
-        setTimeout(() => notification.remove(), 150);
-    }, 3000);
+        if (notification.parentNode) {
+            notification.remove();
+        }
+    }, 5000);
+}
+
+function initThemeToggle() {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function () {
+            const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light';
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+            document.documentElement.setAttribute('data-bs-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+
+            console.log(`Theme switched to ${newTheme} mode`);
+        });
+    }
+
+    // Load saved theme or use OS preference
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme) {
+        document.documentElement.setAttribute('data-bs-theme', storedTheme);
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+    }
+}
+
+function initClipboard() {
+    // Add click handlers to any clipboard copy buttons
+    document.querySelectorAll('.copy-btn').forEach(btn => {
+        btn.addEventListener('click', function () {
+            const textToCopy = this.getAttribute('data-clipboard-text');
+            if (textToCopy) {
+                navigator.clipboard.writeText(textToCopy)
+                    .then(() => {
+                        showNotification('Copied to clipboard!', 'success');
+                    })
+                    .catch(err => {
+                        console.error('Failed to copy: ', err);
+                    });
+            }
+        });
+    });
+}
+
+function initTooltips() {
+    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    if (tooltips.length > 0) {
+        Array.from(tooltips).map(tooltipNode => new bootstrap.Tooltip(tooltipNode));
+    }
+}
+
+function initMobileSidebar() {
+    // Sidebar toggle for mobile
+    const sidebarToggler = document.querySelector('.sidebar-toggler');
+    if (sidebarToggler) {
+        sidebarToggler.addEventListener('click', function () {
+            document.querySelector('.sidebar').classList.toggle('show');
+            document.querySelector('.main-content').classList.toggle('sidebar-open');
+        });
+    }
+}
+
+function initNotifications() {
+    // Add flash messages as notifications
+    const flashMessages = document.querySelectorAll('.alert.flash-message');
+    flashMessages.forEach(message => {
+        setTimeout(() => {
+            const bsAlert = new bootstrap.Alert(message);
+            bsAlert.close();
+        }, 5000);
+    });
+}
+
+// For random port suggestion
+async function suggestRandomPort(serverId) {
+    try {
+        const response = await fetch(`/api/servers/${serverId}/suggest_port`);
+        if (!response.ok) throw new Error('Failed to get port suggestion');
+
+        const data = await response.json();
+        if (data.port) {
+            // Copy to clipboard
+            navigator.clipboard.writeText(data.port.toString())
+                .then(() => {
+                    showNotification(`Port ${data.port} copied to clipboard!`, 'success');
+                })
+                .catch(err => {
+                    console.error('Failed to copy: ', err);
+                    showNotification(`Suggested free port: ${data.port}`, 'info');
+                });
+        }
+        return data.port;
+    } catch (error) {
+        console.error('Error:', error);
+        showNotification('Failed to suggest port', 'danger');
+        return null;
+    }
 }