feat: add Admin and Settings menu with collapsible submenus and placeholder pages

static/app.js

@@ -2,6 +2,12 @@
 const API = '';
 let currentChatId = null;
 
+// Toggle collapsible nav sections (Admin, Settings)
+function toggleNavSection(id) {
+  const el = document.getElementById(id);
+  if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
+}
+
 // ============================================================
 // NAVIGATION
 // ============================================================

static/index.html

@@ -22,6 +22,25 @@
       <li><a href="#" class="nav-link" data-page="batches">Batches</a></li>
       <li><a href="#" class="nav-link" data-page="generated">Generated CVs</a></li>
     </ul>
+    <ul class="nav" style="margin-top:auto">
+      <li class="nav-section">
+        <a href="#" class="nav-section-title" onclick="toggleNavSection('admin-section')">Admin ▾</a>
+        <ul class="nav-sub" id="admin-section">
+          <li><a href="#" class="nav-link" data-page="admin-users">Users</a></li>
+          <li><a href="#" class="nav-link" data-page="admin-health">System Health</a></li>
+        </ul>
+      </li>
+      <li class="nav-section">
+        <a href="#" class="nav-section-title" onclick="toggleNavSection('settings-section')">Settings ▾</a>
+        <ul class="nav-sub" id="settings-section">
+          <li><a href="#" class="nav-link" data-page="settings-ai">AI Provider</a></li>
+          <li><a href="#" class="nav-link" data-page="settings-appearance">Appearance</a></li>
+          <li><a href="#" class="nav-link" data-page="settings-branding">Branding</a></li>
+          <li><a href="#" class="nav-link" data-page="settings-onlyoffice">ONLYOFFICE</a></li>
+          <li><a href="#" class="nav-link" data-page="settings-notifications">Notifications</a></li>
+        </ul>
+      </li>
+    </ul>
   </nav>
 
   <!-- Main content -->
@@ -121,6 +140,48 @@
       <h2 style="margin-bottom:20px">Generated CVs</h2>
       <div id="generated-list"></div>
     </div>
+
+    <!-- ADMIN: USERS -->
+    <div id="page-admin-users" class="page">
+      <h2 style="margin-bottom:20px">Users</h2>
+      <div class="card"><p class="text-muted">User management with role-based access control — coming soon.</p></div>
+    </div>
+
+    <!-- ADMIN: SYSTEM HEALTH -->
+    <div id="page-admin-health" class="page">
+      <h2 style="margin-bottom:20px">System Health</h2>
+      <div class="card"><p class="text-muted">Service status dashboard — coming soon.</p></div>
+    </div>
+
+    <!-- SETTINGS: AI PROVIDER -->
+    <div id="page-settings-ai" class="page">
+      <h2 style="margin-bottom:20px">AI Provider</h2>
+      <div class="card"><p class="text-muted">Configure AI provider, model, and API key — coming soon.</p></div>
+    </div>
+
+    <!-- SETTINGS: APPEARANCE -->
+    <div id="page-settings-appearance" class="page">
+      <h2 style="margin-bottom:20px">Appearance</h2>
+      <div class="card"><p class="text-muted">Theme and display settings — coming soon.</p></div>
+    </div>
+
+    <!-- SETTINGS: BRANDING -->
+    <div id="page-settings-branding" class="page">
+      <h2 style="margin-bottom:20px">Branding</h2>
+      <div class="card"><p class="text-muted">Company name, logo, and header text — coming soon.</p></div>
+    </div>
+
+    <!-- SETTINGS: ONLYOFFICE -->
+    <div id="page-settings-onlyoffice" class="page">
+      <h2 style="margin-bottom:20px">ONLYOFFICE</h2>
+      <div class="card"><p class="text-muted">ONLYOFFICE connection URL and JWT secret — coming soon.</p></div>
+    </div>
+
+    <!-- SETTINGS: NOTIFICATIONS -->
+    <div id="page-settings-notifications" class="page">
+      <h2 style="margin-bottom:20px">Notifications</h2>
+      <div class="card"><p class="text-muted">Email notification settings — coming soon.</p></div>
+    </div>
   </main>
 </div>
 
@@ -140,7 +201,7 @@
   </div>
 </div>
 
-<script src="/static/app.js?v=18"></script>
+<script src="/static/app.js?v=19"></script>
 <script src="/static/carbone.js?v=16"></script>
 <script src="/static/batches.js?v=2"></script>
 </body>

static/style.css

@@ -74,6 +74,20 @@ a:hover { text-decoration: underline; }
   color: var(--accent);
   border-left-color: var(--accent);
 }
+.nav-section-title {
+  display: block;
+  padding: 10px 20px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+}
+.nav-section-title:hover { color: var(--text); text-decoration: none; }
+.nav-sub { list-style: none; padding: 0; margin: 0; }
+.nav-sub li a { font-size: 13px; padding: 7px 20px 7px 32px; }
 .main {
   flex: 1;
   padding: 24px 32px;