feat: Mejorar la interfaz de ajustes del servidor y añadir funcionalidad de filtrado para roles de staff

src/server/views/pages/dashboard.ejs

@@ -47,7 +47,10 @@
     <% if (typeof page !== 'undefined' && page === 'settings' && selectedGuild) { %>
       <div class="w-full max-w-3xl mt-6">
         <div class="backdrop-blur-md bg-white/6 border border-white/8 rounded-xl p-6 glass-card">
-          <h2 class="text-xl font-semibold mb-4">Ajustes del servidor</h2>
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold">Ajustes del servidor</h2>
+            <a href="/dashboard/<%= selectedGuild %>/overview" class="text-sm text-slate-200/80 hover:underline">← Volver al overview</a>
+          </div>
           <form id="guildSettingsForm" class="space-y-4">
             <div>
               <label class="block text-sm text-slate-200 mb-1">Prefix del bot</label>
@@ -60,6 +63,9 @@
             <div>
               <label class="block text-sm text-slate-200 mb-1">Roles de staff</label>
               <% if (typeof guildRoles !== 'undefined' && guildRoles && guildRoles.length) { %>
+                <div class="mb-2">
+                  <input id="staffFilter" type="search" placeholder="Filtrar roles..." class="w-full rounded p-2 bg-transparent border border-white/6" />
+                </div>
                 <select id="staffSelect" name="staffSelect" multiple class="w-full rounded p-2 bg-transparent border border-white/6 h-36">
                   <% const selectedStaff = (guildConfig && Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String) : (guildConfig && guildConfig.staff ? String(guildConfig.staff).split(',') : [])) || []; %>
                   <% guildRoles.forEach(r => { %>
@@ -82,6 +88,18 @@
         (function(){
           const form = document.getElementById('guildSettingsForm');
           const status = document.getElementById('saveStatus');
+                const staffFilter = document.getElementById('staffFilter');
+                if (staffFilter) {
+                  staffFilter.addEventListener('input', ()=>{
+                    const q = staffFilter.value.trim().toLowerCase();
+                    const sel = document.getElementById('staffSelect');
+                    if (!sel) return;
+                    for (const opt of Array.from(sel.options)) {
+                      const txt = (opt.textContent || '').toLowerCase();
+                      opt.style.display = (!q || txt.indexOf(q) !== -1) ? '' : 'none';
+                    }
+                  });
+                }
             form.addEventListener('submit', async (e)=>{
             e.preventDefault();
             status.textContent = 'Guardando...';

src/server/views/partials/dashboard_nav.ejs

@@ -31,10 +31,10 @@
             <span id="miniGuildName"><%= selectedGuildName || 'Seleccionar servidor' %></span>
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
           </button>
-          <div id="miniGuildList" class="origin-top-right absolute right-0 mt-2 w-72 bg-white/6 backdrop-blur rounded-md p-2 hidden transition-transform duration-180 ease-out transform scale-95 opacity-0 pointer-events-none">
+          <div id="miniGuildList" class="origin-top-right absolute right-0 mt-2 w-72 bg-white/6 backdrop-blur rounded-md p-2 hidden transition-transform duration-180 ease-out transform scale-95 opacity-0 pointer-events-none" style="-webkit-overflow-scrolling: touch;">
             <% if (guilds && guilds.length) { %>
               <% guilds.forEach(g => { %>
-                <div class="p-2 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-2 <%= selectedGuildId && selectedGuildId.toString() === g.id.toString() ? 'bg-white/8' : '' %>" data-id="<%= g.id %>">
+                <div class="p-2 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-2 <%= selectedGuildId && selectedGuildId.toString() === g.id.toString() ? 'bg-white/8' : '' %>" data-id="<%= g.id %>" tabindex="0" role="button">
                   <%# icono del servidor si viene (g.icon) %>
                   <% if (g.icon) { %>
                     <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-6 h-6 rounded-full" alt="icon">
@@ -88,6 +88,9 @@
       setTimeout(()=> container.classList.add('hidden','pointer-events-none'), 180);
     }
       if (btn && list) {
+      // ensure the dropdown itself is scrollable when many guilds exist
+      list.style.maxHeight = '20rem';
+      list.style.overflowY = 'auto';
       btn.addEventListener('click', (e)=>{
         e.stopPropagation();
         const expanded = btn.getAttribute('aria-expanded') === 'true';
@@ -98,6 +101,13 @@
           const id = it.getAttribute('data-id');
           if (id) window.location.href = `/dashboard/${id}/overview`;
         });
+        // keyboard activation (Enter / Space)
+        it.addEventListener('keydown', (ev)=>{
+          if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            it.click();
+          }
+        });
       });
     }
     if (userBtn && userMenu) {