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

@@ -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';

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;">
+    {# Tab buttons #}
-        <h2 style="margin: 0 0 1rem; font-size: 1.1rem; color: #0f172a;">Pregame lobby chat</h2>
+    <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,39 +77,9 @@
         {% 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.
-        </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
+        <div id="player-{{ loop.index }}" class="admin-tab-panel" style="
-                    data-tab-target="player-{{ loop.index }}"
+            display: none;
-                    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;
@@ -82,5 +101,4 @@
             ">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
         </div>
     {% endfor %}
-    {% endif %}
 {% endblock %}