Refactor code structure for improved readability and maintainability

scripts/collab-tests/dashboard/README.md

@@ -0,0 +1,52 @@
+# Pruebas colaborativas - Dashboard
+
+Objetivo
+
+- Producir una prueba rápida que renderice la plantilla `dashboard` y detecte si aparece la cadena "[object Promise]" en el HTML final.
+
+Ejecutar (solo colaboradores)
+
+- Para evitar ejecuciones accidentales, este script solo se ejecuta si la variable de entorno `COLLAB_TEST` está establecida en `1`.
+
+Ejemplo:
+
+```bash
+COLLAB_TEST=1 ./scripts/collab-tests/dashboard/run.sh
+```
+
+Salida
+
+- El script imprimirá un JSON con la forma:
+
+  - ok: true|false
+  - length: longitud del HTML renderizado
+  - foundIndex: índice de "[object Promise]" o -1
+
+Notas
+
+- Este test está pensado para replicar exactamente el pipeline de EJS con `{ async: true }` y los locals mínimos necesarios. Si el test falla en tu entorno de desarrollo, revisa las modificaciones temporales en locales u otras plantillas.
+
+Uso de la fuente BoldPixels.ttf
+
+- Copia de la fuente del repo: `src/server/public/assets/fonts/BoldPixels.ttf`.
+
+- Añade la regla CSS siguiente (por ejemplo en `src/server/public/assets/css/_fonts.css`) y luego importa ese archivo en tu layout o en `styles.css`:
+
+```css
+@font-face {
+  font-family: 'BoldPixels';
+  src: url('/assets/fonts/BoldPixels.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+.bold-pixels {
+  font-family: 'BoldPixels', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+}
+```
+
+Ejemplo de uso en EJS:
+
+```html
+<h1 class="bold-pixels">Título con fuente BoldPixels</h1>
+```

scripts/collab-tests/dashboard/check_dashboard_render.js

@@ -0,0 +1,35 @@
+const ejs = require('ejs');
+const path = require('path');
+const fs = require('fs');
+
+(async function(){
+  try{
+    const cwd = process.cwd();
+    const viewsDir = path.join(cwd,'src','server','views');
+    const pageFile = path.join(viewsDir,'pages','dashboard.ejs');
+    const layoutFile = path.join(viewsDir,'layouts','layout.ejs');
+
+    const locals = {
+      appName:'amayo',
+      user:{username:'collab-test',id:'1',avatar:''},
+      guilds:[],
+      useDashboardNav:false,
+      version:'test',
+      selectedGuild:null,
+      title:'Dashboard collab test',
+      hideNavbar:false
+    };
+
+    const pageBody = await ejs.renderFile(pageFile, locals, {async:true, views:[viewsDir]});
+    const html = await ejs.renderFile(layoutFile, {...locals, body: pageBody, dashboardNav:null, navbar:null}, {async:true, views:[viewsDir]});
+
+    const found = html.indexOf('[object Promise]') !== -1;
+    const out = { ok: !found, length: html.length, foundIndex: found ? html.indexOf('[object Promise]') : -1 };
+
+    console.log(JSON.stringify(out, null, 2));
+    if(found) process.exitCode = 2;
+  }catch(err){
+    console.error('ERROR', err && err.stack ? err.stack : err);
+    process.exitCode = 3;
+  }
+})();

scripts/collab-tests/dashboard/run.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+# Small wrapper to run the collab test only when COLLAB_TEST=1 is set.
+set -euo pipefail
+
+if [ "${COLLAB_TEST:-0}" != "1" ]; then
+  echo "This test is for collaborators only. Set COLLAB_TEST=1 to run it."
+  echo "Example: COLLAB_TEST=1 ./scripts/collab-tests/dashboard/run.sh"
+  exit 1
+fi
+
+node ./scripts/collab-tests/dashboard/check_dashboard_render.js

scripts/test_render.js

@@ -0,0 +1,16 @@
+(async()=>{
+  try{
+    const ejs=require('ejs'), path=require('path');
+    const viewsDir=path.join(process.cwd(),'src','server','views');
+    const pageFile = path.join(viewsDir,'pages','dashboard.ejs');
+    const layoutFile = path.join(viewsDir,'layouts','layout.ejs');
+  const locals={ appName:'amayo', user:{username:'test',id:'1',avatar:''}, guilds:[], useDashboardNav:false, version:'x', selectedGuild: null, title:'Dashboard test', hideNavbar:false };
+    console.log('render page');
+    const pageBody = await ejs.renderFile(pageFile, locals, {async:true, views:[viewsDir]});
+    console.log('pageBody type:', typeof pageBody);
+  const html = await ejs.renderFile(layoutFile, {...locals, body: pageBody, dashboardNav:null, navbar:null, title: locals.title, useDashboardNav: locals.useDashboardNav}, {async:true, views:[viewsDir]});
+    console.log('html length', html.length);
+    if (html.indexOf('[object Promise]')!==-1){ console.log('FOUND at', html.indexOf('[object Promise]')); console.log(html.slice(0,200)); process.exit(3);} 
+    console.log('OK NO PROMISE'); process.exit(0);
+  }catch(e){ console.error('ERR',e); process.exit(2);} 
+})();

src/server/public/assets/css/_fonts.css

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'BoldPixels';
+  src: url('/assets/fonts/BoldPixels.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+.bold-pixels {
+  font-family: 'BoldPixels', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+}

src/server/views/layouts/layout.ejs

@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="/assets/css/modern-pixel.css?v=<%= version || '2.0.0' %>">
   <link rel="stylesheet" href="/assets/css/modern-sections.css?v=<%= version || '2.0.0' %>">
   <link rel="stylesheet" href="/assets/css/styles.css?v=<%= version || '2.0.0' %>">
+  <link rel="stylesheet" href="/assets/css/_fonts.css?v=<%= version || '2.0.0' %>">
   <% if (typeof head !== 'undefined' && head) { %>
     <%= head %>
   <% } %>
@@ -26,13 +27,13 @@
     <% if (typeof dashboardNav !== 'undefined' && dashboardNav) { %>
       <%- dashboardNav %>
     <% } else { %>
-      <%- include('../partials/dashboard_nav') %>
+      <%- await include('../partials/dashboard_nav') %>
     <% } %>
   <% } else if (!hideNavbar) { %>
     <% if (typeof navbar !== 'undefined' && navbar) { %>
       <%- navbar %>
     <% } else { %>
-      <%- include('../partials/navbar', { appName }) %>
+      <%- await include('../partials/navbar', { appName }) %>
     <% } %>
   <% } %>
 

src/server/views/pages/dashboard.ejs

@@ -3,18 +3,18 @@
   <div class="relative">
   <% if (!selectedGuild) { %>
   <!-- When no guild selected show centered card -->
-  <%- include('../partials/dashboard/dashboard_noguild_card') %>
+  <%- await include('../partials/dashboard/dashboard_noguild_card') %>
   <% } else { %>
     <!-- When a guild is selected render sidebar + content layout -->
     <div class="w-full max-w-7xl mx-auto mt-6 px-4">
       <div class="flex items-start gap-8">
-          <%- include('../partials/dashboard/dashboard_sidebar') %>
+          <%- await include('../partials/dashboard/dashboard_sidebar') %>
         <div id="dashContent" class="flex-1">
           <!-- initial fragment content will be rendered inside #dashMain by partials -->
               <% if (typeof page !== 'undefined' && page === 'overview') { %>
-              <%- include('../partials/dashboard/dashboard_overview') %>
+              <%- await include('../partials/dashboard/dashboard_overview') %>
             <% } else if (typeof page !== 'undefined' && page === 'settings') { %>
-              <div id="dashMain"><%- include('../partials/dashboard/dashboard_settings') %></div>
+              <div id="dashMain"><%- await include('../partials/dashboard/dashboard_settings') %></div>
           <% } else { %>
             <div id="dashMain"><!-- empty main placeholder --></div>
           <% } %>
@@ -23,16 +23,7 @@
     </div>
   <% } %>
 
-    <div id="dashContent">
-      <!-- The dashContent keeps the outer layout; dashMain inside will be swapped by fragments -->
-      <% if (typeof page !== 'undefined' && page === 'overview' && selectedGuild) { %>
-        <%- include('partials/dashboard/dashboard_overview') %>
-      <% } %>
-
-      <% if (typeof page !== 'undefined' && page === 'settings' && selectedGuild) { %>
-        <%- include('partials/dashboard/dashboard_settings') %>
-      <% } %>
-    </div>
+    <!-- dashContent is rendered above inside the selectedGuild block to ensure includes use await -->
 
     <script>
       // Simple fragment navigation for a SPA-like feel inside /dashboard