shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Mejorar la visualización de servidores en la lista, separando los que tienen bot y los que no

Browse Source
This commit is contained in:
Shni
2025-10-15 03:42:22 -05:00
parent 528dfb0186
commit 75b0305261
2 changed files with 61 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/server/views/pages/dashboard.ejs
View File

@@ -43,8 +43,9 @@
<div id="cardList" class="max-h-72 overflow-auto rounded"> <div id="cardList" class="max-h-72 overflow-auto rounded">
<% if (guilds && guilds.length) { %> <% if (guilds && guilds.length) { %>
<% guilds.sort((a,b)=> a.name.localeCompare(b.name)).forEach(g => { %> <% const sorted = guilds.slice().sort((a,b)=> a.name.localeCompare(b.name)); const withBot = sorted.filter(g=> g.botInGuild !== false); const withoutBot = sorted.filter(g=> g.botInGuild === false); %>
<div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white <%= (g.botInGuild === false) ? 'opacity-60' : '' %>" data-id="<%= g.id %>" data-bot="<%= (g.botInGuild === false) ? '0' : '1' %>" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>"> <% withBot.forEach(g => { %>
<div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white" data-id="<%= g.id %>" data-bot="1" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<% if (g.icon) { %> <% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon"> <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
@@ -60,6 +61,26 @@
</div> </div>
</div> </div>
<% }) %> <% }) %>
<% if (withoutBot && withoutBot.length) { %>
<div class="border-t border-white/6 my-2"></div>
<% withoutBot.forEach(g => { %>
<div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white opacity-60" data-id="<%= g.id %>" data-bot="0" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>">
<div class="flex items-center gap-3">
<% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
<% } else { %>
<div class="w-8 h-8 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
<% } %>
<div class="text-left">
<div class="font-medium"><%= g.name %></div>
</div>
</div>
<div class="flex items-center gap-2">
<div class="text-slate-300">&rsaquo;</div>
</div>
</div>
<% }) %>
<% } %>
<% } else { %> <% } else { %>
<div class="p-4 text-slate-300">No servers available</div> <div class="p-4 text-slate-300">No servers available</div>
<% } %> <% } %>

43
src/server/views/partials/dashboard_nav.ejs
View File

@@ -23,8 +23,9 @@
</button> </button>
<div id="miniGuildList" class="origin-top-left absolute top-full left-0 mt-2 w-56 bg-white/80 backdrop-blur-md rounded-lg p-1 hidden transition-transform duration-150 z-50" style="max-height:18rem; overflow:auto; background-color: rgba(12,15,18,0.92);"> <div id="miniGuildList" class="origin-top-left absolute top-full left-0 mt-2 w-56 bg-white/80 backdrop-blur-md rounded-lg p-1 hidden transition-transform duration-150 z-50" style="max-height:18rem; overflow:auto; background-color: rgba(12,15,18,0.92);">
<% if (guilds && guilds.length) { %> <% if (guilds && guilds.length) { %>
<% guilds.forEach(g => { %> <% const withBot = guilds.filter(g=> g.botInGuild !== false); const withoutBot = guilds.filter(g=> g.botInGuild === false); %>
<div class="p-1 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-3 <%= (g.botInGuild === false) ? 'opacity-60' : '' %>" data-id="<%= g.id %>" data-bot="<%= (g.botInGuild === false) ? '0' : '1' %>" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>"> <% withBot.forEach(g => { %>
<div class="p-1 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-3" data-id="<%= g.id %>" data-bot="1" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>">
<% if (g.icon) { %> <% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-5 h-5 rounded-full" alt="icon"> <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-5 h-5 rounded-full" alt="icon">
<% } else { %> <% } else { %>
@@ -34,6 +35,19 @@
<!-- invite button removed from inline list; rows without bot are dimmed and clicking them opens the invite --> <!-- invite button removed from inline list; rows without bot are dimmed and clicking them opens the invite -->
</div> </div>
<% }) %> <% }) %>
<% if (withoutBot && withoutBot.length) { %>
<div class="border-t border-white/6 my-1"></div>
<% withoutBot.forEach(g => { %>
<div class="p-1 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-3 opacity-60" data-id="<%= g.id %>" data-bot="0" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>">
<% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-5 h-5 rounded-full" alt="icon">
<% } else { %>
<div class="w-5 h-5 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
<% } %>
<div class="flex-1 text-sm truncate pl-1"><%= g.name %></div>
</div>
<% }) %>
<% } %>
<% } else { %> <% } else { %>
<div class="p-2 text-slate-300">No servers</div> <div class="p-2 text-slate-300">No servers</div>
<% } %> <% } %>
@@ -197,8 +211,9 @@
</div> </div>
<div id="mobileGuildList" class="space-y-2"> <div id="mobileGuildList" class="space-y-2">
<% if (guilds && guilds.length) { %> <% if (guilds && guilds.length) { %>
<% guilds.forEach(g => { %> <% const withBot = guilds.filter(g=> g.botInGuild !== false); const withoutBot = guilds.filter(g=> g.botInGuild === false); %>
<div class="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 cursor-pointer <%= (g.botInGuild === false) ? 'opacity-60' : '' %>" data-id="<%= g.id %>" data-bot="<%= (g.botInGuild === false) ? '0' : '1' %>" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>"> <% withBot.forEach(g => { %>
<div class="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 cursor-pointer" data-id="<%= g.id %>" data-bot="1" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>">
<% if (g.icon) { %> <% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon"> <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
<% } else { %> <% } else { %>
@@ -207,6 +222,19 @@
<div class="text-white"><%= g.name %></div> <div class="text-white"><%= g.name %></div>
</div> </div>
<% }) %> <% }) %>
<% if (withoutBot && withoutBot.length) { %>
<div class="border-t border-white/6 mt-2 pt-2"></div>
<% withoutBot.forEach(g => { %>
<div class="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 cursor-pointer opacity-60" data-id="<%= g.id %>" data-bot="0" data-invite="https://discord.com/oauth2/authorize?client_id=991062751633883136&permissions=2416176272&integration_type=0&scope=bot&guild_id=<%= g.id %>">
<% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
<% } else { %>
<div class="w-8 h-8 rounded-full bg-white/8"></div>
<% } %>
<div class="text-white"><%= g.name %></div>
</div>
<% }) %>
<% } %>
<% } else { %> <% } else { %>
<div class="text-slate-300">No servers</div> <div class="text-slate-300">No servers</div>
<% } %> <% } %>
@@ -260,7 +288,12 @@
document.getElementById('mobileGuildList')?.addEventListener('click', (e)=>{ document.getElementById('mobileGuildList')?.addEventListener('click', (e)=>{
let el = e.target; let el = e.target;
while (el && !el.dataset?.id) el = el.parentElement; while (el && !el.dataset?.id) el = el.parentElement;
if (el && el.dataset && el.dataset.id) { window.location.href = `/dashboard/${el.dataset.id}/overview`; } if (el && el.dataset && el.dataset.id) {
const bot = el.getAttribute('data-bot');
const invite = el.getAttribute('data-invite');
if (bot === '0' && invite) { window.open(invite, '_blank', 'noopener'); return; }
window.location.href = `/dashboard/${el.dataset.id}/overview`;
}
}); });
// user menu mobile // user menu mobile