feat: UI minimalista — una sola barra de navegación, drawer móvil, fix SSE

- Layout: fusiona topbar + nav en una sola barra de 56px (elimina doble menú)
- Desktop: brand izquierda, topnav centrado con underline activo, usuario derecha
- Móvil: hamburger animado (3 líneas → X), drawer lateral con overlay
- app.css: reescritura completa sin gradientes ni sombras pesadas
- DashboardController: corrige heights 104px→56px (chat, bot-config tabs)
- Live Feed: cierra EventSource en pagehide para evitar bloqueo al navegar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-19 21:41:37 -05:00
co-authored by Claude Sonnet 4.6
parent ef6e9c1f70
commit 333317e268
3 changed files with 225 additions and 125 deletions
+3 -2
View File
@@ -181,6 +181,7 @@ async function showRaw(id) {
}
function closeModal() { document.getElementById('modal').style.display = 'none'; }
document.addEventListener('keydown', e => { if(e.key==='Escape') closeModal(); });
window.addEventListener('pagehide', () => { es && es.close(); });
connect();
</script>
@@ -1252,7 +1253,7 @@ HTML;
echo <<<HTML
<style>
body{overflow:hidden;height:100vh}
.chat-layout{display:flex;height:calc(100vh - 104px);overflow:hidden}
.chat-layout{display:flex;height:calc(100vh - 56px);overflow:hidden}
.conv-sidebar{width:340px;min-width:340px;background:#fff;border-right:1px solid #eef1f5;display:flex;flex-direction:column;overflow:hidden}
.conv-search{padding:14px 16px;border-bottom:1px solid #eef1f5}
.conv-search input{width:100%;padding:9px 14px 9px 36px;border:1px solid #e2e5ea;border-radius:10px;font-size:13px;outline:none;background:#f5f7fb url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23999%22><path d=%22M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z/%22></svg>') 12px 50% no-repeat;background-size:16px;transition:all .15s}
@@ -1681,7 +1682,7 @@ HTML;
echo <<<HTML
<style>
.wrap{padding:24px;max-width:1100px;margin:0 auto}
.tabs{display:flex;gap:2px;margin-bottom:0;flex-wrap:wrap;position:sticky;top:104px;z-index:90;background:#f5f7fb;padding:10px 0 0}
.tabs{display:flex;gap:2px;margin-bottom:0;flex-wrap:wrap;position:sticky;top:56px;z-index:90;background:#f9fafb;padding:10px 0 0}
.tab-btn{padding:10px 18px;border:none;border-radius:10px 10px 0 0;font-size:13px;font-weight:600;cursor:pointer;background:#e8ecf2;color:#5f6b7a;transition:all .15s}
.tab-btn:hover{background:#dce1e8}
.tab-btn.active{background:#fff;color:#0b3d91;box-shadow:0 -2px 4px rgba(0,0,0,.04)}