Align sidebar + homepage groups; flatten Relays (drop dropdown); move Notifications to system group

Both the sidebar and the homepage now share the same logical groups:
accounts (Users/Businesses/Bots/File Upload), relays (Chat/File/Message Relay),
system (Network/Notifications/Settings), external (Get App). Relays is now its
own flat divider-separated section in the sidebar instead of a collapsible
dropdown; remove the dropdown CSS/JS. Move Notifications into the system group
on the homepage cards.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

manager/templates/base.html

@@ -129,23 +129,6 @@
     .side-nav .ico { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }
     .side-nav a.nav-sep { margin-top: 10px; padding-top: 17px; border-top: 1px solid var(--border); }
 
-    /* collapsible nav group (e.g. Relays) */
-    .nav-group-toggle {
-      display: flex; align-items: center; gap: 12px; width: 100%;
-      padding: 11px 18px; background: none; border: none; border-left: 3px solid transparent;
-      color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600;
-      white-space: nowrap; overflow: hidden; cursor: pointer; text-align: left;
-    }
-    .nav-group-toggle:hover { color: var(--text); background: var(--bg); }
-    .nav-group-toggle .ico { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }
-    .nav-group-toggle .caret { margin-left: auto; font-size: 10px; transition: transform 0.15s; }
-    .nav-group.open .nav-group-toggle .caret { transform: rotate(90deg); }
-    .nav-sub { display: none; }
-    .nav-group.open .nav-sub { display: block; }
-    .nav-sub a { padding-left: 44px; font-size: 13px; }
-    html.collapsed .nav-group-toggle .caret { display: none; }
-    html.collapsed .nav-sub { display: none !important; }
-
     .side-foot { margin-top: auto; padding: 8px 0; border-top: 1px solid var(--border); }
 
     .side-status { padding: 10px 18px 12px; font-size: 12px; color: var(--muted);
@@ -286,23 +269,20 @@
       <span class="brand-icon">◆</span><span class="brand-text">SimpleX Manager</span>
     </a>
     <nav class="side-nav">
+      <!-- Group 1: accounts -->
       <a href="/users"    {% if nav_active == 'users'    %}class="active"{% endif %}><span class="ico">👤</span><span class="lbl">Users</span></a>
       <a href="/businesses" {% if nav_active == 'businesses' %}class="active"{% endif %}><span class="ico">💼</span><span class="lbl">Businesses</span></a>
       <a href="/bots"     {% if nav_active == 'bots'     %}class="active"{% endif %}><span class="ico">🤖</span><span class="lbl">Bots</span></a>
-      <div class="nav-group {% if nav_active == 'relays' %}open{% endif %}" id="nav-relays">
+      <a href="https://simplex.chat/file/" target="_blank" rel="noopener"><span class="ico">📁</span><span class="lbl">File Upload</span></a>
-        <button class="nav-group-toggle" onclick="toggleNavGroup('relays')" aria-label="Relays">
+      <!-- Group 2: relays -->
-          <span class="ico">🔀</span><span class="lbl">Relays</span><span class="caret">▸</span>
+      <a href="/relays/chat"    class="nav-sep {% if nav_active == 'relays' and kind == 'chat'    %}active{% endif %}"><span class="ico">💬</span><span class="lbl">Chat Relay</span></a>
-        </button>
-        <div class="nav-sub">
-          <a href="/relays/chat"    {% if nav_active == 'relays' and kind == 'chat'    %}class="active"{% endif %}><span class="ico">💬</span><span class="lbl">Chat Relay</span></a>
       <a href="/relays/file"    {% if nav_active == 'relays' and kind == 'file'    %}class="active"{% endif %}><span class="ico">📤</span><span class="lbl">File Relay</span></a>
       <a href="/relays/message" {% if nav_active == 'relays' and kind == 'message' %}class="active"{% endif %}><span class="ico">✉️</span><span class="lbl">Message Relay</span></a>
-        </div>
+      <!-- Group 3: system -->
-      </div>
+      <a href="/network" class="nav-sep {% if nav_active == 'network' %}active{% endif %}"><span class="ico">📡</span><span class="lbl">Network</span></a>
-      <a href="https://simplex.chat/file/" target="_blank" rel="noopener"><span class="ico">📁</span><span class="lbl">File Upload</span></a>
+      <a href="/notifications" {% if nav_active == 'notifications' %}class="active"{% endif %}><span class="ico">🔔</span><span class="lbl">Notifications</span><span class="notif-badge" id="notif-badge" style="display:none;"></span></a>
-      <a href="/notifications" class="nav-sep {% if nav_active == 'notifications' %}active{% endif %}"><span class="ico">🔔</span><span class="lbl">Notifications</span><span class="notif-badge" id="notif-badge" style="display:none;"></span></a>
-      <a href="/network" {% if nav_active == 'network' %}class="active"{% endif %}><span class="ico">📡</span><span class="lbl">Network</span></a>
       <a href="/settings" {% if nav_active == 'settings' %}class="active"{% endif %}><span class="ico">⚙️</span><span class="lbl">Settings</span></a>
+      <!-- Group 4: external -->
       <a href="https://simplex.chat/downloads/" target="_blank" rel="noopener" class="nav-sep"><span class="ico">📲</span><span class="lbl">Get App</span></a>
     </nav>
     <div class="side-foot">
@@ -349,18 +329,6 @@
     if (ico && document.documentElement.classList.contains('collapsed')) ico.textContent = '›';
   })();
 
-  // Collapsible sidebar groups (e.g. Relays) — persist open state
-  function toggleNavGroup(id) {
-    const g = document.getElementById('nav-' + id);
-    if (!g) return;
-    const open = g.classList.toggle('open');
-    localStorage.setItem('navgroup-' + id, open ? '1' : '');
-  }
-  (function(){
-    const g = document.getElementById('nav-relays');
-    if (g && localStorage.getItem('navgroup-relays')) g.classList.add('open');
-  })();
-
   // Poll for unread notifications and update the sidebar badge
   async function pollNotifications() {
     try {

manager/templates/home.html

@@ -44,10 +44,6 @@
     <span class="t-ico">🤖</span>
     <span class="t-title">Bots</span>
   </a>
-  <a class="tile" href="/notifications">
-    <span class="t-ico">🔔</span>
-    <span class="t-title">Notifications</span>
-  </a>
   <a class="tile" href="https://simplex.chat/file/" target="_blank" rel="noopener">
     <span class="t-ico">📁</span>
     <span class="t-title">File Upload</span>
@@ -70,12 +66,16 @@
   </a>
 </div>
 
-<!-- Area 2: manage -->
+<!-- Area 3: system -->
 <div class="tiles">
   <a class="tile" href="/network">
     <span class="t-ico">📡</span>
     <span class="t-title">Network</span>
   </a>
+  <a class="tile" href="/notifications">
+    <span class="t-ico">🔔</span>
+    <span class="t-title">Notifications</span>
+  </a>
   <a class="tile" href="/settings">
     <span class="t-ico">⚙️</span>
     <span class="t-title">Settings</span>