Add nest icon to sidebar server cards and move status dot layout

Author: ddrayko

public/css/style.css

@@ -1070,8 +1070,6 @@ cap-widget {
   position: relative;
   z-index: 2;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .nav-sub-item:hover {
@@ -1083,6 +1081,19 @@ cap-widget {
   color: var(--accent-1);
 }
 
+.nav-sub-server-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-sub-nest-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
 .nav-sub-item .nav-sub-dot {
   width: 6px;
   height: 6px;

public/js/app.js

@@ -1672,6 +1672,13 @@ function initSidebarTooltip() {
   });
 }
 
+function renderNestLogoSmall(logo) {
+  if (!logo) return html`<i data-lucide="box" style="width:14px;height:14px;opacity:0.4"></i>`;
+  if (logo.startsWith('si:')) return html`<img src="${siUrl(logo.slice(3))}" alt="" style="width:14px;height:14px;opacity:0.5" />`;
+  if (logo.startsWith('lucide:')) return html`<i data-lucide="${logo.slice(7)}" style="width:14px;height:14px;opacity:0.5"></i>`;
+  return html`<img src="${logo}" alt="" style="width:14px;height:14px;opacity:0.5;border-radius:2px" />`;
+}
+
 function buildServerSubList() {
   if (state.sidebarServersLoading) return html`<div class="nav-sub-empty"><span class="spinner"></span> Loading...</div>`;
   if (state.servers.length === 0) return html`<div class="nav-sub-empty">No servers</div>`;
@@ -1683,7 +1690,8 @@ function buildServerSubList() {
     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)}
+        <span class="nav-sub-server-name">${escapeHtml(s.name)}</span>
+        <span class="nav-sub-nest-icon">${renderNestLogoSmall(s.nestLogo)}</span>
       </a>
     `;
   }).join('');

routes/servers.js

@@ -96,6 +96,13 @@ router.get('/list', authenticateToken, async (req, res) => {
       }
     }
 
+    const nestRows = await query('SELECT ptero_nest_id, logo FROM nests').catch(() => []);
+    const nestLogoMap = {};
+    for (const nr of nestRows) nestLogoMap[nr.ptero_nest_id] = nr.logo || null;
+    for (const s of servers) {
+      s.nestLogo = nestLogoMap[s.nest] || null;
+    }
+
     // Fetch live power state from Pyrodactyl Client API
     const userRows = await query('SELECT ptero_client_api_key FROM users WHERE id = ?', [req.user.userId]);
     const clientApiKey = userRows[0]?.ptero_client_api_key;