From 25a458d4b8e6ec1c764b8d544025d835d64121a1 Mon Sep 17 00:00:00 2001
From: sirpiglr <49359077-sirpiglr@users.noreply.replit.com>
Date: Tue, 9 Dec 2025 03:08:02 +0000
Subject: [PATCH] Update the guild selector to display server information using
 visual cards

Replace the existing guild dropdown with a new card-based UI for displaying server icons, names, and admin status, including updated CSS for styling and JavaScript logic for population.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: a66a236d-ea40-44f2-a853-1320114b514d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/xfdSNeM
Replit-Helium-Checkpoint-Created: true
---
 aethex-bot/public/dashboard.html | 301 ++++++++++++++++++++++++++++---
 1 file changed, 275 insertions(+), 26 deletions(-)

diff --git a/aethex-bot/public/dashboard.html b/aethex-bot/public/dashboard.html
index 8e6de43..0f841d6 100644
--- a/aethex-bot/public/dashboard.html
+++ b/aethex-bot/public/dashboard.html
@@ -321,15 +321,180 @@
       margin-bottom: 1.5rem;
     }
     
-    .guild-selector select {
-      width: 100%;
-      padding: 0.75rem;
+    .guild-selector-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
       background: var(--secondary);
       border: 1px solid var(--border);
-      border-radius: 8px;
-      color: var(--foreground);
-      font-size: 0.875rem;
+      border-radius: 10px;
       cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .guild-selector-header:hover {
+      background: var(--card-hover);
+      border-color: var(--aethex-500);
+    }
+    
+    .guild-selector-header.open {
+      border-radius: 10px 10px 0 0;
+      border-bottom-color: transparent;
+    }
+    
+    .selected-guild {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .selected-guild-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      background: var(--muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 0.875rem;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+    
+    .selected-guild-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .selected-guild-name {
+      font-weight: 500;
+      font-size: 0.875rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .guild-selector-arrow {
+      color: var(--muted-foreground);
+      transition: transform 0.2s;
+    }
+    
+    .guild-selector-header.open .guild-selector-arrow {
+      transform: rotate(180deg);
+    }
+    
+    .guild-dropdown {
+      display: none;
+      background: var(--secondary);
+      border: 1px solid var(--border);
+      border-top: none;
+      border-radius: 0 0 10px 10px;
+      max-height: 280px;
+      overflow-y: auto;
+    }
+    
+    .guild-dropdown.open {
+      display: block;
+    }
+    
+    .guild-card {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      cursor: pointer;
+      transition: all 0.15s;
+      border-left: 3px solid transparent;
+    }
+    
+    .guild-card:hover {
+      background: var(--card-hover);
+    }
+    
+    .guild-card.active {
+      background: rgba(59, 130, 246, 0.1);
+      border-left-color: var(--aethex-500);
+    }
+    
+    .guild-card:last-child {
+      border-radius: 0 0 8px 8px;
+    }
+    
+    .guild-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 0.875rem;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+    
+    .guild-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .guild-info {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .guild-name {
+      font-weight: 500;
+      font-size: 0.875rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .guild-status {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.7rem;
+      color: var(--muted-foreground);
+      margin-top: 0.125rem;
+    }
+    
+    .guild-admin-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.125rem 0.375rem;
+      background: rgba(59, 130, 246, 0.15);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      border-radius: 4px;
+      color: var(--aethex-400);
+      font-size: 0.65rem;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+    
+    .guild-member-count {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+    
+    .guild-check {
+      color: var(--aethex-500);
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+    
+    .guild-card.active .guild-check {
+      opacity: 1;
     }
     
     .nav-section {
@@ -789,9 +954,16 @@
       </a>
       
       <div class="guild-selector">
-        <select id="guildSelect">
-          <option value="">Select a server...</option>
-        </select>
+        <div class="guild-selector-header" id="guildSelectorHeader" onclick="toggleGuildDropdown()">
+          <div class="selected-guild">
+            <div class="selected-guild-icon" id="selectedGuildIcon">?</div>
+            <span class="selected-guild-name" id="selectedGuildName">Select a server...</span>
+          </div>
+          <svg class="guild-selector-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </div>
+        <div class="guild-dropdown" id="guildDropdown"></div>
       </div>
       
       <nav>
@@ -1424,27 +1596,19 @@
         document.getElementById('userAvatar').src = currentUser.avatarUrl;
         document.getElementById('userName').textContent = currentUser.globalName || currentUser.username;
         
-        const select = document.getElementById('guildSelect');
-        currentUser.guilds.forEach(g => {
-          const opt = document.createElement('option');
-          opt.value = g.id;
-          opt.textContent = g.name;
-          opt.dataset.isAdmin = g.isAdmin;
-          select.appendChild(opt);
-        });
-        
-        select.addEventListener('change', () => {
-          currentGuild = select.value;
-          const isAdmin = select.selectedOptions[0]?.dataset.isAdmin === 'true';
-          document.getElementById('adminSection').style.display = isAdmin ? 'block' : 'none';
-          loadPageData();
-        });
+        populateGuildCards(currentUser.guilds);
         
         if (currentUser.guilds.length > 0) {
-          select.value = currentUser.guilds[0].id;
-          select.dispatchEvent(new Event('change'));
+          selectGuild(currentUser.guilds[0]);
         }
         
+        document.addEventListener('click', (e) => {
+          const selector = document.querySelector('.guild-selector');
+          if (!selector.contains(e.target)) {
+            closeGuildDropdown();
+          }
+        });
+        
         document.querySelectorAll('.nav-item').forEach(item => {
           item.addEventListener('click', () => {
             document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
@@ -1483,6 +1647,91 @@
       }
     }
     
+    function populateGuildCards(guilds) {
+      const dropdown = document.getElementById('guildDropdown');
+      dropdown.innerHTML = '';
+      
+      if (guilds.length === 0) {
+        dropdown.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--muted-foreground);">No servers found</div>';
+        return;
+      }
+      
+      guilds.forEach(g => {
+        const card = document.createElement('div');
+        card.className = 'guild-card';
+        card.dataset.guildId = g.id;
+        card.dataset.isAdmin = g.isAdmin;
+        card.onclick = () => selectGuild(g);
+        
+        const iconContent = g.icon 
+          ? `<img src="${g.icon}" alt="${g.name}">`
+          : g.name.charAt(0).toUpperCase();
+        
+        let statusHtml = '';
+        if (g.isAdmin) {
+          statusHtml = '<span class="guild-admin-badge">Admin</span>';
+        }
+        if (g.memberCount) {
+          statusHtml += `<span class="guild-member-count">${g.memberCount.toLocaleString()} members</span>`;
+        }
+        
+        card.innerHTML = `
+          <div class="guild-icon">${iconContent}</div>
+          <div class="guild-info">
+            <div class="guild-name">${escapeHtml(g.name)}</div>
+            <div class="guild-status">${statusHtml}</div>
+          </div>
+          <svg class="guild-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+            <path d="M20 6L9 17l-5-5"/>
+          </svg>
+        `;
+        
+        dropdown.appendChild(card);
+      });
+    }
+    
+    function selectGuild(guild) {
+      currentGuild = guild.id;
+      
+      document.querySelectorAll('.guild-card').forEach(c => {
+        c.classList.toggle('active', c.dataset.guildId === guild.id);
+      });
+      
+      const iconEl = document.getElementById('selectedGuildIcon');
+      if (guild.icon) {
+        iconEl.innerHTML = `<img src="${guild.icon}" alt="${guild.name}">`;
+      } else {
+        iconEl.innerHTML = guild.name.charAt(0).toUpperCase();
+      }
+      
+      document.getElementById('selectedGuildName').textContent = guild.name;
+      
+      document.getElementById('adminSection').style.display = guild.isAdmin ? 'block' : 'none';
+      
+      closeGuildDropdown();
+      loadPageData();
+    }
+    
+    function toggleGuildDropdown() {
+      const header = document.getElementById('guildSelectorHeader');
+      const dropdown = document.getElementById('guildDropdown');
+      const isOpen = dropdown.classList.contains('open');
+      
+      header.classList.toggle('open', !isOpen);
+      dropdown.classList.toggle('open', !isOpen);
+    }
+    
+    function closeGuildDropdown() {
+      document.getElementById('guildSelectorHeader').classList.remove('open');
+      document.getElementById('guildDropdown').classList.remove('open');
+    }
+    
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    
     function showPage(page) {
       document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
       document.getElementById('page-' + page)?.classList.remove('hidden');