feat: add server dropdown menu in sidebar

Replace static 'My Servers' link with a toggleable dropdown that
lists user's servers with status dots, allowing direct navigation
to /server/ID pages. Servers are lazy-loaded on first open.

Author: ddrayko

public/css/style.css

@@ -528,6 +528,24 @@ cap-widget {
   gap: 0;
 }
 
+.sidebar.collapsed .nav-parent {
+  font-size: 0;
+  justify-content: center;
+  padding: 10px 0;
+  gap: 0;
+}
+
+.sidebar.collapsed .nav-parent-label,
+.sidebar.collapsed .nav-parent-chevron {
+  display: none;
+}
+
+.sidebar.collapsed .nav-parent svg {
+  font-size: 1rem;
+  width: 20px;
+  height: 20px;
+}
+
 .sidebar.collapsed .nav-indicator {
   left: 8px;
   width: calc(100% - 16px);
@@ -688,6 +706,120 @@ cap-widget {
   flex-shrink: 0;
 }
 
+.nav-parent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color var(--transition);
+  text-decoration: none;
+  margin-bottom: 2px;
+  position: relative;
+  z-index: 2;
+  user-select: none;
+}
+
+.nav-parent:hover {
+  color: var(--text-primary);
+  background: rgba(238, 129, 50, 0.08);
+}
+
+.nav-parent svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.nav-parent-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.nav-parent-chevron {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.nav-parent.open .nav-parent-chevron {
+  transform: rotate(90deg);
+}
+
+.nav-sub-list {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.25s ease;
+  margin-bottom: 2px;
+}
+
+.nav-sub-list.open {
+  max-height: 400px;
+}
+
+.sidebar.collapsed .nav-sub-list {
+  display: none;
+}
+
+.nav-sub-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px 7px 42px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color var(--transition);
+  text-decoration: none;
+  margin-bottom: 1px;
+  position: relative;
+  z-index: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-sub-item:hover {
+  color: var(--text-primary);
+  background: rgba(238, 129, 50, 0.08);
+}
+
+.nav-sub-item.active {
+  color: var(--accent-1);
+}
+
+.nav-sub-item .nav-sub-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.nav-sub-dot.dot-active {
+  background: #22c55e;
+}
+
+.nav-sub-dot.dot-installing {
+  background: #f59e0b;
+}
+
+.nav-sub-dot.dot-suspended {
+  background: var(--accent-red);
+}
+
+.nav-sub-empty {
+  padding: 8px 12px 8px 42px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
 .sidebar-footer {
   padding: 12px 12px 4px;
   border-top: 1px solid var(--border);

public/js/app.js

@@ -18,6 +18,8 @@ const state = {
   notifPanelOpen: false,
   sidebarMode: 'main',
   accountTab: 'info',
+  sidebarServersOpen: false,
+  sidebarServersLoading: false,
 };
 
 function setRgpdConsent(preferences) {
@@ -1135,7 +1137,7 @@ function initSidebarTooltip() {
   }
 
   sidebarNav.addEventListener('mouseover', (e) => {
-    const item = e.target.closest('.nav-item');
+    const item = e.target.closest('.nav-item, .nav-parent');
     if (!item) return;
     if (!sidebar.classList.contains('collapsed')) return;
 
@@ -1199,10 +1201,27 @@ function renderSidebarNav() {
         <i data-lucide="grid-3x3"></i>
         Overview
       </a>
-      <a class="nav-item ${state.currentPage === 'servers' ? 'active' : ''}" data-page="servers" href="/servers">
+      <div class="nav-parent ${state.sidebarServersOpen ? 'open' : ''}" id="nav-servers-toggle">
         <i data-lucide="server"></i>
-        My Servers
-      </a>
+        <span class="nav-parent-label">My Servers</span>
+        <svg class="nav-parent-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </div>
+      <div class="nav-sub-list ${state.sidebarServersOpen ? 'open' : ''}" id="nav-servers-list">
+        ${state.sidebarServersLoading ? html`<div class="nav-sub-empty"><span class="spinner"></span> Loading...</div>` :
+          state.servers.length === 0 ? html`<div class="nav-sub-empty">No servers</div>` :
+          state.servers.map(s => {
+            const isInstalling = s.status === 'installing' || s.installed === 0 || s.installed === '0' || s.installed === false;
+            const isSuspended = s.status === 'suspended';
+            const dotClass = isSuspended ? 'dot-suspended' : (isInstalling ? 'dot-installing' : 'dot-active');
+            const isActive = state.currentPage === 'server' && state.serverId === s.id;
+            return html`
+              <a class="nav-sub-item ${isActive ? 'active' : ''}" data-server-nav="${s.id}" href="/server/${s.id}">
+                <span class="nav-sub-dot ${dotClass}"></span>
+                ${escapeHtml(s.name)}
+              </a>
+            `;
+          }).join('')}
+      </div>
       <a class="nav-item" id="nav-notifications" href="#">
         <span style="position:relative;display:inline-flex">
           <i data-lucide="bell"></i>
@@ -1255,6 +1274,37 @@ function renderSidebarNav() {
     });
   }
 
+  const serversToggle = document.querySelector('#nav-servers-toggle');
+  if (serversToggle) {
+    serversToggle.addEventListener('click', async (e) => {
+      e.preventDefault();
+      state.sidebarServersOpen = !state.sidebarServersOpen;
+      serversToggle.classList.toggle('open', state.sidebarServersOpen);
+      const subList = document.querySelector('#nav-servers-list');
+      if (subList) subList.classList.toggle('open', state.sidebarServersOpen);
+      if (state.sidebarServersOpen && state.servers.length === 0 && !state.sidebarServersLoading) {
+        state.sidebarServersLoading = true;
+        const subListEl = document.querySelector('#nav-servers-list');
+        if (subListEl) subListEl.innerHTML = html`<div class="nav-sub-empty"><span class="spinner"></span> Loading...</div>`;
+        try {
+          const data = await api('/servers/list');
+          state.servers = data.servers || [];
+        } catch (err) {
+          state.servers = [];
+        }
+        state.sidebarServersLoading = false;
+        renderSidebarNav();
+      }
+    });
+  }
+
+  document.querySelectorAll('.nav-sub-item[data-server-nav]').forEach(item => {
+    item.addEventListener('click', (e) => {
+      e.preventDefault();
+      navigateTo('server/' + item.dataset.serverNav);
+    });
+  });
+
   updateNavIndicator();
   initIcons();
 }
@@ -1343,6 +1393,8 @@ function navigateTo(page) {
   if (state.sidebarMode !== newSidebarMode) {
     state.sidebarMode = newSidebarMode;
     renderSidebarNav();
+  } else if (basePage === 'server') {
+    renderSidebarNav();
   }
 
   const url = basePage === 'overview' && !param ? '/' : `/${page}`;
@@ -1457,6 +1509,8 @@ window.addEventListener('popstate', () => {
   if (state.sidebarMode !== newSidebarMode) {
     state.sidebarMode = newSidebarMode;
     renderSidebarNav();
+  } else if (basePage === 'server') {
+    renderSidebarNav();
   }
 
   if (basePage === 'server' && state.serverId) {