Rend le panneau "Nouvel objet" compact — lignes de tableau, pas des cartes

Chaque champ prenait une grosse carte (~250px de haut : libellés Bulma
pleine taille, "Retirer ce champ" en texte) — inutilisable pour un objet
à 10+ champs, ce qui est pourtant l'usage visé par ce panneau.

Remplacé par une vraie ligne de tableau dense, sur le même principe que
"Champs existants" dans object_edit.html (déjà compact et sobre dans le
reste de l'outil) : une ligne = un champ, colonnes Nom/Type/Objet
lié/Mini/Maxi/Obligatoire, action "Retirer" réduite à une icône. Les
colonnes conditionnelles (Objet lié pour une relation, Mini/Maxi pour un
nombre) restent TOUJOURS présentes — sans quoi les colonnes de lignes
différentes ne s'aligneraient plus — seul leur contenu bascule entre le
vrai champ de saisie et un espace réservé "—", au lieu de masquer toute
la cellule comme avant.

object_form.js adapté en conséquence : bounds désormais 2 cibles
séparées (mini/maxi, chacune dans sa propre cellule) au lieu d'une seule
enveloppe commune, et chaque bascule s'accompagne de celle de son
espace réservé.

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

static/object_form.js

@@ -17,12 +17,28 @@
   var NUMERIC_FIELD_TYPES = ['nombre_entier', 'nombre_decimal'];
 
   function wireRow(row) {
+    // Ligne de TABLEAU dense (une ligne = un champ, comme "Champs
+    // existants" dans object_edit.html) : "Objet lié" et "Mini"/"Maxi"
+    // gardent toujours leur colonne (jamais masquée, sinon les colonnes
+    // des différentes lignes ne s'alignent plus) — seul leur CONTENU
+    // bascule entre le vrai champ de saisie et un espace réservé "—"
+    // quand il ne s'applique pas au type choisi.
     var typeSelect = row.querySelector('.fieldTypeSelect');
-    var relationWrap = row.querySelector('.relationTarget');
+    var relationTarget = row.querySelector('.relationTarget');
-    var boundsWrap = row.querySelector('.boundsTarget');
+    var relationPlaceholder = row.querySelector('.relationPlaceholder');
+    var boundsTargets = row.querySelectorAll('.boundsTarget');
+    var boundsPlaceholders = row.querySelectorAll('.boundsPlaceholder');
+
+    function toggle(target, placeholder, visible) {
+      target.style.display = visible ? '' : 'none';
+      placeholder.style.display = visible ? 'none' : '';
+    }
+
     function syncFieldTypeVisibility() {
-      relationWrap.style.display = typeSelect.value === 'relation' ? 'block' : 'none';
+      var isRelation = typeSelect.value === 'relation';
-      if (boundsWrap) boundsWrap.style.display = NUMERIC_FIELD_TYPES.includes(typeSelect.value) ? 'flex' : 'none';
+      var isNumeric = NUMERIC_FIELD_TYPES.includes(typeSelect.value);
+      toggle(relationTarget, relationPlaceholder, isRelation);
+      boundsTargets.forEach(function (el, i) { toggle(el, boundsPlaceholders[i], isNumeric); });
     }
     typeSelect.addEventListener('change', syncFieldTypeVisibility);
     syncFieldTypeVisibility();

templates/game_dashboard.html

@@ -213,8 +213,11 @@
      position persistée en localStorage ici, contrairement aux panneaux de
      l'éditeur d'écran — inutile pour un panneau ouvert ponctuellement).
      Contenu repris de l'ancienne page "Définir un nouvel objet"
-     (object_form.html, retirée) : même formulaire, même gabarit de ligne
+     (object_form.html, retirée), mais avec un gabarit de ligne dense —
-     de champ, même script (object_form.js). -->
+     une vraie ligne de tableau (comme "Champs existants" dans
+     object_edit.html) plutôt qu'une grosse carte par champ — pensé pour
+     ajouter beaucoup de champs d'affilée sans que le panneau explose en
+     hauteur. -->
 <div class="floatPanel floatPanel--center hidden" id="newObjectPanel">
   <div class="floatPanelHeader" id="newObjectPanelHeader">
     <span class="floatPanelTitle">⋮⋮ Nouvel objet</span>
@@ -226,80 +229,64 @@
         <label for="object_name">Nom de l'objet (ex. Personnage, Niveau, Question...)</label>
         <input type="text" id="object_name" name="object_name" required autocomplete="off">
       </div>
-      <h2 style="margin-top:16px;">Champs</h2>
+
-      <button type="button" class="button is-outlined is-fullwidth mb-2" id="btnAddField">+ Ajouter un champ</button>
+      <div class="dashPanelHeader" style="margin-top:14px;">
-      <div id="fieldsList"></div>
+        <h2>Champs</h2>
+        <button type="button" class="button is-small" id="btnAddField">+ Ajouter un champ</button>
+      </div>
+      <div class="fieldsTableWrap">
+        <table class="table is-fullwidth is-hoverable fieldsTable">
+          <thead>
+            <tr><th>Nom</th><th>Type</th><th>Objet lié</th><th>Mini</th><th>Maxi</th><th>Obligatoire</th><th></th></tr>
+          </thead>
+          <tbody id="fieldsList"></tbody>
+        </table>
+      </div>
       <div class="actionsRow"><button type="submit" class="primary">Créer l'objet</button></div>
     </form>
   </div>
 </div>
 
 <template id="fieldRowTemplate">
-  <div class="fieldRowCard box">
+  <tr>
-    <div class="columns">
+    <td><input class="input is-small" type="text" name="field_name[]" placeholder="ex. nom, pv..." required></td>
-      <div class="column">
+    <td>
-        <div class="field">
+      <div class="select is-small">
-          <label class="label">Nom du champ</label>
+        <select name="field_type[]" class="fieldTypeSelect">
-          <div class="control"><input class="input" type="text" name="field_name[]" placeholder="ex. nom, description, pv..." required></div>
+          {% for key, val in field_types.items() %}
-        </div>
+          <option value="{{ key }}">{{ val.label }}</option>
+          {% endfor %}
+        </select>
       </div>
-      <div class="column">
+    </td>
-        <div class="field">
+    <td>
-          <label class="label">Type</label>
+      <div class="select is-small relationTarget" style="display:none;">
-          <div class="control">
+        <select name="field_relation[]">
-            <div class="select is-fullwidth">
+          {% for d in definitions %}
-              <select name="field_type[]" class="fieldTypeSelect">
+          <option value="{{ d.id }}">{{ d.name }}</option>
-                {% for key, val in field_types.items() %}
+          {% endfor %}
-                <option value="{{ key }}">{{ val.label }}</option>
+        </select>
-                {% endfor %}
-              </select>
-            </div>
-          </div>
-        </div>
       </div>
-    </div>
+      <span class="has-text-grey relationPlaceholder">—</span>
-    <div class="relationTarget field" style="display:none;">
+    </td>
-      <label class="label">Objet lié</label>
+    <td>
-      <div class="control">
+      <input class="input is-small boundsTarget" type="number" step="any" name="field_min[]" placeholder="0" style="display:none;">
-        <div class="select is-fullwidth">
+      <span class="has-text-grey boundsPlaceholder">—</span>
-          <select name="field_relation[]">
+    </td>
-            {% for d in definitions %}
+    <td>
-            <option value="{{ d.id }}">{{ d.name }}</option>
+      <input class="input is-small boundsTarget" type="number" step="any" name="field_max[]" placeholder="100" style="display:none;">
-            {% endfor %}
+      <span class="has-text-grey boundsPlaceholder">—</span>
-          </select>
+    </td>
-        </div>
+    <td>
+      <div class="select is-small">
+        <select name="field_required[]">
+          <option value="0">Non</option>
+          <option value="1">Oui</option>
+        </select>
       </div>
-      {% if not definitions %}
+    </td>
-      <p class="help">Aucun autre objet défini.</p>
+    <td class="fieldsTableActions"><button type="button" class="button is-small is-danger btnRemoveField">🗑️</button></td>
-      {% endif %}
+  </tr>
-    </div>
-    <div class="boundsTarget columns" style="display:none;">
-      <div class="column">
-        <div class="field">
-          <label class="label">Valeur mini</label>
-          <div class="control"><input class="input" type="number" step="any" name="field_min[]" placeholder="ex. 0"></div>
-        </div>
-      </div>
-      <div class="column">
-        <div class="field">
-          <label class="label">Valeur maxi</label>
-          <div class="control"><input class="input" type="number" step="any" name="field_max[]" placeholder="ex. 100"></div>
-        </div>
-      </div>
-    </div>
-    <div class="field">
-      <label class="label">Obligatoire ?</label>
-      <div class="control">
-        <div class="select is-fullwidth">
-          <select name="field_required[]">
-            <option value="0">Non</option>
-            <option value="1">Oui</option>
-          </select>
-        </div>
-      </div>
-    </div>
-    <button type="button" class="button is-small is-danger btnRemoveField">🗑️ Retirer ce champ</button>
-  </div>
 </template>
 
 <script src="{{ url_for('static', filename='object_form.js') }}"></script>