From a9cb0fa57fbc708dffa307ddb33fede68ca6a57c Mon Sep 17 00:00:00 2001
From: Frank <frank.van.den.berg@eleaf.com>
Date: Mon, 10 Aug 2026 16:48:06 +0200
Subject: [PATCH] Turn admin lobby chat panel into a tab

The lobby chat was a standalone card sitting above the per-player log
tabs. Folds it into the same tab bar as the first (default-active)
tab instead, so the session log view has one consistent tab strip.
The tab-switching script now toggles by an .admin-tab-panel class
instead of assuming every panel's id starts with "player-", since
that's no longer true.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 assets/admin-session-tabs.js                 |   2 +-
 templates/game/admin/sessions/view.html.twig | 130 +++++++++++--------
 2 files changed, 75 insertions(+), 57 deletions(-)

diff --git a/assets/admin-session-tabs.js b/assets/admin-session-tabs.js
index a913751..437afde 100644
--- a/assets/admin-session-tabs.js
+++ b/assets/admin-session-tabs.js
@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const activate = (id) => {
-        document.querySelectorAll('[id^="player-"]').forEach(el => el.style.display = 'none');
+        document.querySelectorAll('.admin-tab-panel').forEach(el => el.style.display = 'none');
         const target = document.getElementById(id);
         if (target) {
             target.style.display = 'block';
diff --git a/templates/game/admin/sessions/view.html.twig b/templates/game/admin/sessions/view.html.twig
index cfbda72..589965b 100644
--- a/templates/game/admin/sessions/view.html.twig
+++ b/templates/game/admin/sessions/view.html.twig
@@ -10,9 +10,58 @@
     <h1 style="margin: 0 0 0.25rem; font-size: 1.5rem; color: #0f172a;">{{ session.game.name }} — Session #{{ session.id }}</h1>
     <p style="margin: 0 0 1.5rem; color: #64748b; font-size: 0.9rem;">{{ session.status.value }} · {{ session.players|length }} player(s) · Created {{ session.created|date('Y-m-d H:i') }}</p>
 
-    <div style="background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.07); padding: 1.25rem; margin-bottom: 1.5rem;">
-        <h2 style="margin: 0 0 1rem; font-size: 1.1rem; color: #0f172a;">Pregame lobby chat</h2>
+    {# Tab buttons #}
+    <div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
+        <button
+            data-tab-target="lobby-chat-tab"
+            id="tab-lobby-chat"
+            style="
+                flex-shrink: 0;
+                white-space: nowrap;
+                padding: 0.6rem 1.25rem;
+                border: 1px solid #3b82f6;
+                border-bottom: 1px solid #fff;
+                background: #fff;
+                color: #1e40af;
+                font-size: 0.9rem;
+                font-weight: 600;
+                cursor: pointer;
+                border-radius: 6px 6px 0 0;
+                margin-bottom: -1px;
+            "
+        >Lobby Chat</button>
+        {% for playerLog in playersLogs %}
+            <button
+                data-tab-target="player-{{ loop.index }}"
+                id="tab-{{ loop.index }}"
+                style="
+                    flex-shrink: 0;
+                    white-space: nowrap;
+                    padding: 0.6rem 1.25rem;
+                    border: 1px solid #e2e8f0;
+                    border-bottom: 1px solid #e2e8f0;
+                    background: #f8fafc;
+                    color: #64748b;
+                    font-size: 0.9rem;
+                    font-weight: 400;
+                    cursor: pointer;
+                    border-radius: 6px 6px 0 0;
+                    margin-bottom: -1px;
+                "
+            >{{ playerLog.username }}</button>
+        {% endfor %}
+    </div>
 
+    {# Tab content #}
+    <div id="lobby-chat-tab" class="admin-tab-panel" style="
+        display: block;
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-top: none;
+        border-radius: 0 0 8px 8px;
+        padding: 1.25rem;
+        box-shadow: 0 1px 3px rgba(0,0,0,.07);
+    ">
         {% if lobbyMessages is empty %}
             <p style="margin: 0; color: #94a3b8;">No lobby chat messages for this session.</p>
         {% else %}
@@ -28,59 +77,28 @@
         {% endif %}
     </div>
 
-    {% if playersLogs is empty %}
-        <div style="background: #fff; border-radius: 8px; padding: 2rem; text-align: center; color: #94a3b8; box-shadow: 0 1px 3px rgba(0,0,0,.07);">
-            No players in this session.
+    {% for playerLog in playersLogs %}
+        <div id="player-{{ loop.index }}" class="admin-tab-panel" style="
+            display: none;
+            background: #fff;
+            border: 1px solid #e2e8f0;
+            border-top: none;
+            border-radius: 0 0 8px 8px;
+            padding: 1.25rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,.07);
+        ">
+            <pre style="
+                background: #1e293b;
+                color: #e2e8f0;
+                padding: 1rem;
+                border-radius: 6px;
+                overflow-x: auto;
+                white-space: pre-wrap;
+                word-break: break-word;
+                font-size: 0.85rem;
+                line-height: 1.5;
+                margin: 0;
+            ">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
         </div>
-    {% else %}
-        {# Tab buttons #}
-        <div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
-            {% for playerLog in playersLogs %}
-                <button
-                    data-tab-target="player-{{ loop.index }}"
-                    id="tab-{{ loop.index }}"
-                    style="
-                        flex-shrink: 0;
-                        white-space: nowrap;
-                        padding: 0.6rem 1.25rem;
-                        border: 1px solid {{ loop.first ? '#3b82f6' : '#e2e8f0' }};
-                        border-bottom: {{ loop.first ? '1px solid #fff' : '1px solid #e2e8f0' }};
-                        background: {{ loop.first ? '#fff' : '#f8fafc' }};
-                        color: {{ loop.first ? '#1e40af' : '#64748b' }};
-                        font-size: 0.9rem;
-                        font-weight: {{ loop.first ? '600' : '400' }};
-                        cursor: pointer;
-                        border-radius: 6px 6px 0 0;
-                        margin-bottom: -1px;
-                    "
-                >{{ playerLog.username }}</button>
-            {% endfor %}
-        </div>
-
-        {# Tab content #}
-        {% for playerLog in playersLogs %}
-            <div id="player-{{ loop.index }}" style="
-                display: {{ loop.first ? 'block' : 'none' }};
-                background: #fff;
-                border: 1px solid #e2e8f0;
-                border-top: none;
-                border-radius: 0 0 8px 8px;
-                padding: 1.25rem;
-                box-shadow: 0 1px 3px rgba(0,0,0,.07);
-            ">
-                <pre style="
-                    background: #1e293b;
-                    color: #e2e8f0;
-                    padding: 1rem;
-                    border-radius: 6px;
-                    overflow-x: auto;
-                    white-space: pre-wrap;
-                    word-break: break-word;
-                    font-size: 0.85rem;
-                    line-height: 1.5;
-                    margin: 0;
-                ">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
-            </div>
-        {% endfor %}
-    {% endif %}
+    {% endfor %}
 {% endblock %}