Improved UI

views/layout.html

@@ -59,13 +59,59 @@
                 document.getElementById('storage-total').textContent = `${storage.max_gb} GB total`;
                 document.getElementById('progress-fill').style.width = `${storage.usage_percent}%`;
             } catch (error) {
-                document.getElementById('storage-used').textContent = 'Error loading storage info';
-                document.getElementById('storage-percent').textContent = '';
-                document.getElementById('storage-total').textContent = '';
+                const used = document.getElementById('storage-used');
+                const percent = document.getElementById('storage-percent');
+                const total = document.getElementById('storage-total');
+                if (used) used.textContent = 'Error loading storage info';
+                if (percent) percent.textContent = '';
+                if (total) total.textContent = '';
             }
         }
 
-        loadStorageInfo();
+        function initTabs() {
+            const btns = Array.from(document.querySelectorAll('.tab-btn'));
+            const panels = Array.from(document.querySelectorAll('.tab-panel'));
+            if (!btns.length || !panels.length) return;
+
+            function activate(tab) {
+                btns.forEach(b => {
+                    const isActive = b.dataset.tab === tab;
+                    b.classList.toggle('active', isActive);
+                    b.setAttribute('aria-selected', String(isActive));
+                });
+                panels.forEach(p => {
+                    const isActive = p.id === `tab-${tab}`;
+                    p.classList.toggle('active', isActive);
+                    if (isActive) {
+                        p.removeAttribute('hidden');
+                    } else {
+                        p.setAttribute('hidden', '');
+                    }
+                });
+            }
+
+            // Read initial state from hash
+            const hash = window.location.hash.replace('#', '');
+            if (hash === 'changelog' || hash === 'about' || hash === 'guide') {
+                activate(hash);
+            } else {
+                activate('guide');
+            }
+
+            // Wire click handlers
+            btns.forEach(b => b.addEventListener('click', () => {
+                const tab = b.dataset.tab;
+                activate(tab);
+                // push state without jumping
+                history.replaceState(null, '', `#${tab}`);
+            }));
+        }
+
+        // Initialize on DOM ready
+        document.addEventListener('DOMContentLoaded', () => {
+            loadStorageInfo();
+            initTabs();
+        });
 
         function copyToClipboard(text) {
             navigator.clipboard.writeText(text).then(() => {