Redesign SFTP workspace and fix server monitoring

Replace Bootstrap dependencies with custom blue-accented light and dark themes and native dialogs.

Share the sidebar, top bar and responsive layout across file browsing, account settings, user management, server statistics and file previews. Add folder search, type filters, upload progress and asset cache versioning.

Fix SSH configuration usage, filesystem discovery, missing statistics and RAID health parsing. Adapt PDF sizing and fullscreen controls to the shared workspace.

Validation: PHP workspace and server statistics regression tests, JavaScript syntax checks, responsive browser checks and live XAMPP navigation.

Web/js/theme.js

@@ -1,40 +1,26 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const themeToggle = document.getElementById('themeToggle');
-    const html = document.documentElement;
-    const themeText = document.getElementById('themeText');
-    const themeIcon = themeToggle.querySelector('.bi');
-    
+(() => {
+    const preference = window.matchMedia('(prefers-color-scheme: dark)');
+    let saved;
+    try { saved = localStorage.getItem('theme'); } catch (_) { /* Storage may be disabled. */ }
     function setTheme(theme) {
-        html.setAttribute('data-bs-theme', theme);
-        document.body.classList.remove('theme-light', 'theme-dark');
-        document.body.classList.add('theme-' + theme);
-        localStorage.setItem('theme', theme);
-        
-        if (theme === 'dark') {
-            themeText.textContent = 'Light Mode';
-            themeIcon.className = 'bi bi-sun';
-            themeToggle.classList.remove('btn-dark');
-            themeToggle.classList.add('btn-light');
-        } else {
-            themeText.textContent = 'Dark Mode';
-            themeIcon.className = 'bi bi-moon';
-            themeToggle.classList.remove('btn-light');
-            themeToggle.classList.add('btn-dark');
+        document.documentElement.dataset.theme = theme;
+        const button = document.getElementById('themeToggle');
+        if (button) {
+            button.setAttribute('aria-label', `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`);
+            const label = document.getElementById('themeText');
+            if (label) label.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+            const icon = button.querySelector('i');
+            if (icon) { icon.textContent = theme === 'dark' ? '☀' : '◐'; icon.setAttribute('aria-hidden', 'true'); }
         }
     }
-    
-    const savedTheme = localStorage.getItem('theme');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
-    if (savedTheme) {
-        setTheme(savedTheme);
-    } else {
-        setTheme(prefersDark ? 'dark' : 'light');
-    }
-    
-    themeToggle.addEventListener('click', function() {
-        const currentTheme = html.getAttribute('data-bs-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        setTheme(newTheme);
+    setTheme(saved === 'dark' || saved === 'light' ? saved : preference.matches ? 'dark' : 'light');
+    document.addEventListener('DOMContentLoaded', () => {
+        setTheme(document.documentElement.dataset.theme);
+        document.getElementById('themeToggle')?.addEventListener('click', () => {
+            saved = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+            setTheme(saved);
+            try { localStorage.setItem('theme', saved); } catch (_) { /* Keep this session usable. */ }
+        });
     });
-});
+    preference.addEventListener('change', () => { if (saved !== 'dark' && saved !== 'light') setTheme(preference.matches ? 'dark' : 'light'); });
+})();

Web/js/ui.js

@@ -0,0 +1,10 @@
+// Native dialogs supply focus containment, Escape and focus restoration.
+document.addEventListener('click', event => {
+    const trigger = event.target.closest('[data-dialog]');
+    if (trigger) document.getElementById(trigger.dataset.dialog)?.showModal();
+    if (event.target.closest('[data-dialog-close]')) event.target.closest('dialog')?.close();
+    if (event.target instanceof HTMLDialogElement) {
+        const rect = event.target.getBoundingClientRect();
+        if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) event.target.close();
+    }
+});