From 6e86c19262469e3032ddb89175217f06b3152438 Mon Sep 17 00:00:00 2001
From: morgane <enagore@gmail.com>
Date: Wed, 17 Jun 2026 17:43:46 +0000
Subject: [PATCH] Actualiser test.html

---
 test.html | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)
diff --git a/test.html b/test.html
index db471c2..e1020c2 100644
--- a/test.html
+++ b/test.html
@@ -2,16 +2,26 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>⚡ Debug Catégories - Fix</title>
+    <title>⚡ Debug Catégories - Final</title>
     <style>
         body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
+        .controls { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
         table { width: 100%; border-collapse: collapse; background: #333; }
         th, td { border: 1px solid #555; padding: 10px; text-align: left; }
         th { background: #444; }
         .key { color: #fbbf24; font-weight: bold; }
+        select { padding: 10px; width: 300px; border-radius: 5px; }
     </style>
 </head>
 <body>
+
+    <div class="controls">
+        <h3>Choisir une catégorie :</h3>
+        <select id="category-selector">
+            <option value="">-- Sélectionner --</option>
+        </select>
+    </div>
+
     <h1>Table des Catégories (Source: translations/fr.json)</h1>
     <table id="cat-table">
         <thead><tr><th>Clé</th><th>Libellé (Français)</th></tr></thead>
@@ -23,18 +33,21 @@
             .then(res => res.json())
             .then(data => {
                 const tbody = document.querySelector('#cat-table tbody');
-                
-                // On accède directement à la section 'categories'
+                const selector = document.querySelector('#category-selector');
                 const catData = data.categories; 
                 
                 if (catData) {
                     Object.entries(catData).forEach(([key, val]) => {
+                        // 1. Ajouter au tableau
                         const row = `<tr><td class="key">${key}</td><td>${val}</td></tr>`;
                         tbody.innerHTML += row;
+
+                        // 2. Ajouter à la liste déroulante
+                        const opt = document.createElement('option');
+                        opt.value = key;
+                        opt.textContent = val;
+                        selector.appendChild(opt);
                     });
-                } else {
-                    tbody.innerHTML = "<tr><td colspan='2'>Section 'categories' non trouvée. Vérifie la console.</td></tr>";
-                    console.log("Structure du JSON :", data);
                 }
             })
             .catch(err => alert("Erreur : " + err));

Clé	Libellé (Français)
${key}	${val}
Section 'categories' non trouvée. Vérifie la console.