feat: add admin Settings tab with 'Soon' placeholder

Author: ddrayko

public/js/admin.js

@@ -81,6 +81,9 @@ function adminNavigateTo(page) {
   } else if (basePage === 'activity') {
     renderAdminActivity();
     history.pushState({ adminPage: 'activity' }, '', '/admin/activity');
+  } else if (basePage === 'settings') {
+    renderAdminSettings();
+    history.pushState({ adminPage: 'settings' }, '', '/admin/settings');
   } else {
     renderAdminServers();
     history.pushState({ adminPage: 'servers' }, '', '/admin/servers');
@@ -193,6 +196,10 @@ function renderAdminLayout() {
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
             Activity
           </a>
+          <a class="admin-nav-link" data-page="settings" href="/admin/settings">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+            Settings
+          </a>
         </div>
         <div class="admin-navbar-right">
           <span class="admin-navbar-user">${adminState.user?.username || 'Admin'}</span>
@@ -210,6 +217,7 @@ function renderAdminLayout() {
         <div class="admin-page" id="admin-page-users"></div>
         <div class="admin-page" id="admin-page-user-detail"></div>
         <div class="admin-page" id="admin-page-activity"></div>
+        <div class="admin-page" id="admin-page-settings"></div>
       </main>
     </div>
   `;
@@ -259,6 +267,10 @@ function renderAdminLayout() {
     adminState.currentPage = 'activity';
     updateAdminNav();
     renderAdminActivity();
+  } else if (basePage === 'settings') {
+    adminState.currentPage = 'settings';
+    updateAdminNav();
+    renderAdminSettings();
   } else {
     adminState.currentPage = 'servers';
     updateAdminNav();
@@ -913,6 +925,24 @@ async function renderAdminActivity() {
   }
 }
 
+// ─── Settings ───────────────────────────────────────────
+async function renderAdminSettings() {
+  document.querySelectorAll('.admin-page').forEach(p => p.classList.remove('active'));
+  const el = $a('#admin-page-settings');
+  if (!el) return;
+  el.classList.add('active');
+  el.innerHTML = ahtml`
+    <div class="page-header">
+      <h1 class="page-title">Settings</h1>
+      <p class="page-subtitle">Admin panel configuration</p>
+    </div>
+    <div class="empty-state">
+      <div class="empty-state-title">Soon</div>
+      <div class="empty-state-desc">Settings are coming in a future update.</div>
+    </div>
+  `;
+}
+
 // ─── Common ─────────────────────────────────────────────
 function formatDate(d) {
   if (!d) return 'N/A';
@@ -946,6 +976,8 @@ window.addEventListener('popstate', () => {
     adminNavigateTo('dashboard');
   } else if (basePage === 'activity') {
     adminNavigateTo('activity');
+  } else if (basePage === 'settings') {
+    adminNavigateTo('settings');
   } else {
     adminNavigateTo('servers');
   }
@@ -990,6 +1022,8 @@ function initAdmin() {
         renderAdminLayout();
       } else if (basePage === 'user' && param) {
         renderAdminLayout();
+      } else if (basePage === 'settings') {
+        renderAdminLayout();
       } else {
         renderAdminLayout();
       }