queue

settings-site/public/index.html

@@ -13,19 +13,19 @@
   <!-- Sidebar -->
   <nav class="sidebar">
     <div class="logo">Broccolini Settings</div>
-    <a href="#s-core" class="active">Core</a>
-    <a href="#s-channels">Channels</a>
-    <a href="#s-categories">Categories</a>
-    <a href="#s-gmail">Gmail</a>
-    <a href="#s-behavior">Ticket Behavior</a>
-    <a href="#s-threads">Staff Threads</a>
-    <a href="#s-pins">Pin Messages</a>
-    <a href="#s-notifications">Notifications</a>
-    <a href="#s-logging">Logging</a>
-    <a href="#s-automation">Automation</a>
-    <a href="#s-appearance">Appearance</a>
-    <a href="#s-staff">Staff</a>
-    <a href="#s-advanced">Advanced</a>
+    <a href="/" class="active">Core</a>
+    <a href="/channels">Channels</a>
+    <a href="/categories">Categories</a>
+    <a href="/gmail">Gmail</a>
+    <a href="/behavior">Ticket Behavior</a>
+    <a href="/threads">Staff Threads</a>
+    <a href="/pins">Pin Messages</a>
+    <a href="/notifications">Notifications</a>
+    <a href="/logging">Logging</a>
+    <a href="/automation">Automation</a>
+    <a href="/appearance">Appearance</a>
+    <a href="/staff">Staff</a>
+    <a href="/advanced">Advanced</a>
   </nav>
 
   <!-- Top bar -->
@@ -294,7 +294,7 @@
     <div class="section" id="s-logging">
       <div class="section-header"><h2>Logging</h2><p>Log channel configuration (channels set in Channels section)</p><span class="chevron">&#9660;</span></div>
       <div class="section-body"><div class="field-grid">
-        <div class="field full-width"><p style="color:var(--text-muted);font-size:13px;">Log channels are configured in the <a href="#s-channels" style="color:var(--accent);">Channels</a> section. This section shows which logs are active based on configured channels.</p></div>
+        <div class="field full-width"><p style="color:var(--text-muted);font-size:13px;">Log channels are configured in the <a href="/channels" style="color:var(--accent);">Channels</a> section. This section shows which logs are active based on configured channels.</p></div>
       </div></div>
     </div>
 

settings-site/public/js/app.js

@@ -153,19 +153,6 @@ function setupSectionToggles() {
       header.closest('.section').classList.toggle('collapsed');
     });
   });
-  // Sidebar navigation
-  document.querySelectorAll('.sidebar a').forEach(link => {
-    link.addEventListener('click', (e) => {
-      e.preventDefault();
-      const target = document.getElementById(link.getAttribute('href').slice(1));
-      if (target) {
-        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        target.classList.remove('collapsed');
-      }
-      document.querySelectorAll('.sidebar a').forEach(l => l.classList.remove('active'));
-      link.classList.add('active');
-    });
-  });
 }
 
 function markChanged(key, value) {
@@ -435,4 +422,54 @@ function toHumanLabel(key) {
     .join(' ');
 }
 
-document.addEventListener('DOMContentLoaded', init);
+const ROUTES = {
+  '/': 's-core',
+  '/channels': 's-channels',
+  '/categories': 's-categories',
+  '/gmail': 's-gmail',
+  '/behavior': 's-behavior',
+  '/threads': 's-threads',
+  '/pins': 's-pins',
+  '/notifications': 's-notifications',
+  '/logging': 's-logging',
+  '/automation': 's-automation',
+  '/appearance': 's-appearance',
+  '/staff': 's-staff',
+  '/advanced': 's-advanced'
+};
+
+function navigate(path, updateHistory = true) {
+  const sectionId = ROUTES[path] || ROUTES['/'];
+  const normalizedPath = ROUTES[path] ? path : '/';
+  if (updateHistory) history.pushState({}, '', normalizedPath);
+
+  document.querySelectorAll('.section').forEach(section => {
+    section.classList.toggle('hidden', section.id !== sectionId);
+  });
+
+  document.querySelectorAll('.sidebar a').forEach(link => {
+    link.classList.toggle('active', link.getAttribute('href') === normalizedPath);
+  });
+}
+
+function setupSidebarRouting() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar) return;
+
+  sidebar.addEventListener('click', e => {
+    const a = e.target.closest('a');
+    if (!a) return;
+    e.preventDefault();
+    navigate(a.getAttribute('href'));
+  });
+
+  window.addEventListener('popstate', () => {
+    navigate(location.pathname, false);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  setupSidebarRouting();
+  await init();
+  navigate(location.pathname, false);
+});

settings-site/server.js

@@ -12,7 +12,7 @@ const ADMIN_PASSWORD = process.env.SETTINGS_ADMIN_PASSWORD;
 
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, 'public'), { index: false }));
 app.use(session({
   secret: SECRET || 'fallback-secret-change-me',
   resave: false,
@@ -93,6 +93,10 @@ app.get('/api/restart/status', requireAuth, async (req, res) => {
   catch (e) { res.status(502).json({ error: 'Bot unreachable' }); }
 });
 
+app.get('*', requireAuth, (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
 app.listen(PORT, '0.0.0.0', () => {
   console.log(`[settings] running on port ${PORT}`);
 });