Filtre de colonnes + panneau de détail d'une entrée (onglet Données)

Un objet avec beaucoup de champs rendait le tableau "Données
enregistrées" illisible (toutes les colonnes serrées sur une ligne,
valeurs tronquées) — deux ajouts pour compenser :

1) "🔧 Colonnes" : menu déroulant (une case à cocher par champ, toutes
cochées par défaut) au-dessus du tableau — décocher un champ masque sa
colonne (th + td, via [data-col]) sans reconstruire le tableau. Un seul
menu ouvert à la fois, fermé au clic ailleurs sur la page.

2) 👁️ par ligne : ouvre un panneau de détail (déplaçable/redimensionnable/
plein écran par défaut, comme les autres) listant TOUS les champs de
cette entrée, un par ligne, valeur complète non tronquée — reprend le
style .rowDetailField/.rowDetailLabel/.rowDetailValue de l'ancienne
modale Bulma de data_list.html (retirée, mais ce CSS ne dépendait pas du
template et a été gardé). Un seul panneau PAR OBJET (pas par ligne) :
son contenu est reconstruit à l'ouverture en lisant en direct la ligne
du tableau déjà affiché (via [data-row-id] sur chaque <tr>) — reflète
donc aussi une modification tout juste saisie mais pas encore
"Enregistrer"ée, sans aller-retour serveur.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

templates/game_dashboard.html

@@ -376,9 +376,19 @@
       {% endif %}
       <div class="dashPanelHeader">
         <h2>Données enregistrées</h2>
-        {% if definition.fields %}
-        <button type="button" class="button is-small primary" onclick="openAddEntryPanel({{ d.id }})">+ Ajouter</button>
-        {% endif %}
+        <div style="display:flex; gap:6px;">
+          {% if definition.fields %}
+          <div class="columnFilterWrap">
+            <button type="button" class="button is-small" onclick="toggleColumnFilterMenu({{ d.id }})">🔧 Colonnes</button>
+            <div class="columnFilterMenu hidden" id="columnFilterMenu-{{ d.id }}">
+              {% for f in definition.fields %}
+              <label class="checkbox columnFilterOption"><input type="checkbox" checked data-col="field-{{ f.id }}" onchange="toggleDataColumn({{ d.id }}, 'field-{{ f.id }}', this.checked)"> {{ f.name }}</label>
+              {% endfor %}
+            </div>
+          </div>
+          <button type="button" class="button is-small primary" onclick="openAddEntryPanel({{ d.id }})">+ Ajouter</button>
+          {% endif %}
+        </div>
       </div>
       {% if definition.fields %}
       {% set rows = rows_by_definition[d.id] %}
@@ -389,17 +399,17 @@
             onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');"></form>
       {% endfor %}
       <div class="fieldsTableWrap">
-        <table class="table is-fullwidth is-hoverable dataTable fieldsTable">
+        <table class="table is-fullwidth is-hoverable dataTable fieldsTable" id="dataTable-{{ d.id }}">
           <thead>
-            <tr><th>#</th>{% for f in definition.fields %}<th>{{ f.name }}</th>{% endfor %}<th></th></tr>
+            <tr><th>#</th>{% for f in definition.fields %}<th data-col="field-{{ f.id }}">{{ f.name }}</th>{% endfor %}<th></th></tr>
           </thead>
           <tbody>
             {% for r in rows %}
-            <tr>
+            <tr data-row-id="{{ r.id }}">
               <td>{{ r.id }}</td>
               {% for f in definition.fields %}
               {% set col = f.name|colname %}
-              <td>
+              <td data-col="field-{{ f.id }}" data-field-label="{{ f.name }}">
                 {% if f.type == 'texte' %}
                 <input class="input is-small" type="text" form="dataEditForm{{ r.id }}" name="{{ col }}" value="{{ r[col] or '' }}">
                 {% elif f.type == 'texte_long' %}
@@ -423,6 +433,7 @@
               </td>
               {% endfor %}
               <td class="fieldsTableActions">
+                <button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetailPanel({{ d.id }}, {{ r.id }})">👁️</button>
                 <button type="submit" form="dataEditForm{{ r.id }}" class="button is-small">Enregistrer</button>
                 <button type="submit" form="dataDeleteForm{{ r.id }}" class="button is-small is-danger">🗑️</button>
               </td>
@@ -551,6 +562,25 @@
   </div>
   <div class="floatPanelResizeHandle"></div>
 </div>
+
+<!-- Panneau de détail d'UNE entrée (voir openRowDetailPanel()) — un seul
+     panneau PAR OBJET (pas un par ligne, pour ne jamais alourdir la page
+     même avec beaucoup d'entrées) : son contenu est reconstruit à
+     l'ouverture en lisant directement la ligne correspondante du tableau
+     "Données enregistrées" (valeurs à jour, y compris une modification
+     pas encore enregistrée). Champ par ligne, étiquette bien visible —
+     pensé pour un objet avec beaucoup de colonnes, illisible en tableau
+     serré (voir la barre "🔧 Colonnes" pour l'inverse : cacher des
+     colonnes plutôt que tout regarder en détail). -->
+<div class="floatPanel floatPanel--center hidden rowDetailPanel" data-definition-id="{{ d.id }}" id="rowDetailPanel-{{ d.id }}">
+  <div class="floatPanelHeader">
+    <span class="floatPanelTitle rowDetailPanelTitle">⋮⋮ Entrée — {{ definition.name }}</span>
+    <button type="button" class="button is-small floatPanelFullscreenBtn" title="Plein écran">⛶</button>
+    <button type="button" class="button is-small" onclick="closeRowDetailPanel({{ d.id }})">✕</button>
+  </div>
+  <div class="floatPanelBody rowDetailPanelBody"></div>
+  <div class="floatPanelResizeHandle"></div>
+</div>
 {% endif %}
 {% endfor %}
 
@@ -814,6 +844,85 @@ function makeFloatPanelFullscreenable(panel, toggleBtn) {
   };
 })();
 
+// ---------- Filtre de colonnes (onglet Données) ----------
+function toggleColumnFilterMenu(definitionId) {
+  var menu = document.getElementById('columnFilterMenu-' + definitionId);
+  if (!menu) return;
+  var opening = menu.classList.contains('hidden');
+  // Un seul menu de filtre ouvert à la fois, tous objets confondus — évite
+  // d'en laisser traîner un ouvert par-dessus le panneau d'un autre objet.
+  document.querySelectorAll('.columnFilterMenu').forEach(function (m) { m.classList.add('hidden'); });
+  if (opening) menu.classList.remove('hidden');
+}
+document.addEventListener('click', function (e) {
+  if (e.target.closest('.columnFilterWrap')) return;
+  document.querySelectorAll('.columnFilterMenu').forEach(function (m) { m.classList.add('hidden'); });
+});
+function toggleDataColumn(definitionId, colKey, visible) {
+  var table = document.getElementById('dataTable-' + definitionId);
+  if (!table) return;
+  table.querySelectorAll('[data-col="' + colKey + '"]').forEach(function (cell) {
+    cell.style.display = visible ? '' : 'none';
+  });
+}
+
+// ---------- Panneau de détail d'une entrée (un par objet) ----------
+(function () {
+  document.querySelectorAll('.rowDetailPanel').forEach(function (panel) {
+    makeFloatPanelDraggable(panel, panel.querySelector('.floatPanelHeader'));
+    makeFloatPanelResizable(panel, panel.querySelector('.floatPanelResizeHandle'));
+    makeFloatPanelFullscreenable(panel, panel.querySelector('.floatPanelFullscreenBtn'));
+  });
+
+  // Reconstruit le contenu du panneau à chaque ouverture, en lisant
+  // directement la ligne correspondante du tableau "Données enregistrées"
+  // déjà affiché — pas d'aller-retour serveur, et ça reflète une
+  // modification tout juste saisie mais pas encore "Enregistrer"ée.
+  window.openRowDetailPanel = function (definitionId, rowId) {
+    var panel = document.querySelector('.rowDetailPanel[data-definition-id="' + definitionId + '"]');
+    var table = document.getElementById('dataTable-' + definitionId);
+    if (!panel || !table) return;
+    var row = table.querySelector('tr[data-row-id="' + rowId + '"]');
+    if (!row) return;
+
+    var body = panel.querySelector('.rowDetailPanelBody');
+    body.innerHTML = '';
+    var idField = document.createElement('div');
+    idField.className = 'rowDetailField';
+    idField.innerHTML = '<div class="rowDetailLabel">#</div><div class="rowDetailValue">' + rowId + '</div>';
+    body.appendChild(idField);
+
+    row.querySelectorAll('td[data-field-label]').forEach(function (cell) {
+      var label = cell.dataset.fieldLabel;
+      var control = cell.querySelector('input, textarea, select');
+      var value = '—';
+      if (control) {
+        if (control.type === 'checkbox') value = control.checked ? 'Oui' : 'Non';
+        else if (control.tagName === 'SELECT') value = control.options[control.selectedIndex] ? control.options[control.selectedIndex].text : '—';
+        else value = control.value || '—';
+      }
+      var field = document.createElement('div');
+      field.className = 'rowDetailField';
+      var labelEl = document.createElement('div');
+      labelEl.className = 'rowDetailLabel';
+      labelEl.textContent = label;
+      var valueEl = document.createElement('div');
+      valueEl.className = 'rowDetailValue';
+      valueEl.textContent = value;
+      field.appendChild(labelEl);
+      field.appendChild(valueEl);
+      body.appendChild(field);
+    });
+
+    panel.classList.remove('hidden');
+    panel._fsToggle.enter();
+  };
+  window.closeRowDetailPanel = function (definitionId) {
+    var panel = document.querySelector('.rowDetailPanel[data-definition-id="' + definitionId + '"]');
+    if (panel) panel.classList.add('hidden');
+  };
+})();
+
 // Sous-onglets Champs/Données d'UN panneau précis (voir plus haut) — scopé
 // au panneau ancêtre du bouton cliqué, jamais global (plusieurs objets
 // peuvent chacun avoir leurs sous-onglets sur leur propre panneau, en même