Show egg name below server name in sidebar dropdown

Author: ddrayko

public/css/style.css

@@ -1069,7 +1069,6 @@ cap-widget {
   margin-bottom: 1px;
   position: relative;
   z-index: 2;
-  white-space: nowrap;
 }
 
 .nav-sub-item:hover {
@@ -1081,9 +1080,24 @@ cap-widget {
   color: var(--accent-1);
 }
 
+.nav-sub-server-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .nav-sub-server-name {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-sub-egg-name {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .nav-sub-nest-icon {

public/js/app.js

@@ -1687,10 +1687,14 @@ function buildServerSubList() {
     const isSuspended = s.status === 'suspended';
     const dotClass = isSuspended ? 'dot-suspended' : (isInstalling ? 'dot-installing' : 'dot-active');
     const isActive = state.currentPage === 'server' && state.serverId === s.id;
+    const eggName = s.eggDetails?.name || '';
     return html`
       <a class="nav-sub-item ${isActive ? 'active' : ''}" data-server-nav="${s.id}" href="/server/${s.id}">
         <span class="nav-sub-nest-icon">${renderNestLogoSmall(s.nestLogo)}</span>
-        <span class="nav-sub-server-name">${escapeHtml(s.name)}</span>
+        <span class="nav-sub-server-info">
+          <span class="nav-sub-server-name">${escapeHtml(s.name)}</span>
+          ${eggName ? html`<span class="nav-sub-egg-name">${escapeHtml(eggName)}</span>` : ''}
+        </span>
         <span class="nav-sub-dot ${dotClass}"></span>
       </a>
     `;