refactor: simplification structure des groupes

Simplification majeure de la configuration des groupes :
- Suppression des champs redondants 'id' et 'description'
- Le nom du groupe sert maintenant d'identifiant (converti en slug automatiquement)
- Génération automatique des IDs pour groupes et canaux via fonction slugify()

Backend (server/) :
- Ajout fonction slugify() pour génération d'IDs à partir des noms
- Génération automatique des IDs au chargement de la config (index.js)
- API admin adaptée : POST/PUT /admin/groups génèrent les IDs automatiquement
- Pas besoin de fournir l'ID lors de la création/modification

Frontend (client/src/Admin.jsx + Admin.css) :
- Suppression champs ID et description du formulaire
- Simplification interface : nom + bitrate + canaux
- Mise à jour layout CSS canal (4 colonnes au lieu de 5)
- Cartes de groupe épurées (plus d'affichage d'ID)

Configuration (config.yaml) :
- Format simplifié : groupes avec 'name', 'channels' et 'audioBitrate' optionnel
- Exemple : "Production" au lieu de id/name/description séparés
- Plus lisible et maintenable

Les IDs sont générés dynamiquement :
- Groupe "Production" → id: "production"
- Canal "Principal" → id: "production-principal"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

client/src/Admin.css

@@ -293,7 +293,7 @@
 
 .channel-item {
   display: grid;
-  grid-template-columns: 1fr 1fr 80px 80px 50px;
+  grid-template-columns: 2fr 80px 80px 50px;
   gap: 0.5rem;
   margin-bottom: 0.5rem;
   align-items: center;

client/src/Admin.jsx

@@ -16,9 +16,7 @@ function Admin() {
   const [showGroupForm, setShowGroupForm] = useState(false);
   const [editingGroup, setEditingGroup] = useState(null);
   const [groupForm, setGroupForm] = useState({
-    id: '',
     name: '',
-    description: '',
     audioBitrate: 96,
     channels: []
   });
@@ -152,9 +150,7 @@ function Admin() {
   const startEditGroup = (group) => {
     setEditingGroup(group.id);
     setGroupForm({
-      id: group.id,
       name: group.name,
-      description: group.description || '',
       audioBitrate: group.audioBitrate || 96,
       channels: group.channels || []
     });
@@ -163,9 +159,7 @@ function Admin() {
 
   const resetGroupForm = () => {
     setGroupForm({
-      id: '',
       name: '',
-      description: '',
       audioBitrate: 96,
       channels: []
     });
@@ -178,7 +172,7 @@ function Admin() {
       ...groupForm,
       channels: [
         ...groupForm.channels,
-        { id: '', name: '', audioInput: 0, audioOutput: 0 }
+        { name: '', audioInput: 0, audioOutput: 0 }
       ]
     });
   };
@@ -295,35 +289,15 @@ function Admin() {
 
                   <div className="form-row">
                     <label>
-                      ID groupe
+                      Nom du groupe
-                      <input
-                        type="text"
-                        value={groupForm.id}
-                        onChange={(e) => setGroupForm({ ...groupForm, id: e.target.value })}
-                        disabled={!!editingGroup}
-                        required
-                      />
-                    </label>
-
-                    <label>
-                      Nom
                       <input
                         type="text"
                         value={groupForm.name}
                         onChange={(e) => setGroupForm({ ...groupForm, name: e.target.value })}
+                        placeholder="ex: Production, Technique..."
                         required
                       />
                     </label>
-                  </div>
-
-                  <label>
-                    Description
-                    <input
-                      type="text"
-                      value={groupForm.description}
-                      onChange={(e) => setGroupForm({ ...groupForm, description: e.target.value })}
-                    />
-                  </label>
 
                     <label>
                       Bitrate audio (kbps)
@@ -348,14 +322,7 @@ function Admin() {
                       <div key={index} className="channel-item">
                         <input
                           type="text"
-                          placeholder="ID canal"
+                          placeholder="Nom canal (ex: Principal, Backup...)"
-                          value={channel.id}
-                          onChange={(e) => updateChannel(index, 'id', e.target.value)}
-                          required
-                        />
-                        <input
-                          type="text"
-                          placeholder="Nom"
                           value={channel.name}
                           onChange={(e) => updateChannel(index, 'name', e.target.value)}
                           required
@@ -397,10 +364,7 @@ function Admin() {
               {groups.map(group => (
                 <div key={group.id} className="group-card">
                   <div className="group-header">
-                    <div>
                     <h3>{group.name}</h3>
-                      <span className="group-id">#{group.id}</span>
-                    </div>
                     <div className="group-actions">
                       <button onClick={() => startEditGroup(group)} className="btn-edit">
                         ✏️
@@ -411,10 +375,6 @@ function Admin() {
                     </div>
                   </div>
 
-                  {group.description && (
-                    <p className="group-description">{group.description}</p>
-                  )}
-
                   <div className="group-info">
                     <span>Bitrate: {group.audioBitrate || 96} kbps</span>
                     <span>Canaux: {group.channels?.length || 0}</span>

server/api/admin.js

@@ -13,6 +13,21 @@ import { dirname } from 'path';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const router = Router();
 
+/**
+ * Génère un ID slug à partir d'un nom
+ */
+function slugify(text) {
+  return text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-');
+}
+
 // État en mémoire des utilisateurs connectés
 const connectedUsers = new Map(); // identity -> { username, groupId, roomName, connectedAt, lastActivity }
 
@@ -140,34 +155,42 @@ router.get('/groups', (req, res) => {
 /**
  * POST /admin/groups
  * Crée un nouveau groupe
- * Body: { id, name, description, audioBitrate?, channels }
+ * Body: { name, audioBitrate?, channels }
+ * L'ID est généré automatiquement à partir du nom
  */
 router.post('/groups', (req, res) => {
   try {
-    const { id, name, description, audioBitrate, channels } = req.body;
+    const { name, audioBitrate, channels } = req.body;
 
-    if (!id || !name || !channels || !Array.isArray(channels)) {
+    if (!name || !channels || !Array.isArray(channels)) {
       return res.status(400).json({
-        error: 'Missing required fields: id, name, channels'
+        error: 'Missing required fields: name, channels'
       });
     }
 
     const config = loadConfig();
 
+    // Générer l'ID à partir du nom
+    const id = slugify(name);
+
     // Vérifier que l'ID n'existe pas déjà
     if (config.groups.find(g => g.id === id)) {
       return res.status(409).json({
-        error: `Group ${id} already exists`
+        error: `Group "${name}" already exists (ID: ${id})`
       });
     }
 
+    // Générer les IDs pour les canaux
+    const channelsWithIds = channels.map(channel => ({
+      ...channel,
+      id: channel.id || `${id}-${slugify(channel.name)}`
+    }));
+
     // Créer le nouveau groupe
     const newGroup = {
-      id,
       name,
-      description: description || '',
       audioBitrate: audioBitrate || config.audio.defaultBitrate,
-      channels
+      channels: channelsWithIds
     };
 
     config.groups.push(newGroup);
@@ -177,7 +200,7 @@ router.post('/groups', (req, res) => {
 
     res.status(201).json({
       message: 'Group created',
-      group: newGroup
+      group: { ...newGroup, id }
     });
 
   } catch (error) {
@@ -189,12 +212,12 @@ router.post('/groups', (req, res) => {
 /**
  * PUT /admin/groups/:id
  * Modifie un groupe existant
- * Body: { name?, description?, audioBitrate?, channels? }
+ * Body: { name?, audioBitrate?, channels? }
  */
 router.put('/groups/:id', (req, res) => {
   try {
     const { id } = req.params;
-    const { name, description, audioBitrate, channels } = req.body;
+    const { name, audioBitrate, channels } = req.body;
 
     const config = loadConfig();
     const groupIndex = config.groups.findIndex(g => g.id === id);
@@ -207,9 +230,14 @@ router.put('/groups/:id', (req, res) => {
 
     // Mettre à jour les champs fournis
     if (name !== undefined) config.groups[groupIndex].name = name;
-    if (description !== undefined) config.groups[groupIndex].description = description;
     if (audioBitrate !== undefined) config.groups[groupIndex].audioBitrate = audioBitrate;
-    if (channels !== undefined) config.groups[groupIndex].channels = channels;
+    if (channels !== undefined) {
+      // Générer les IDs pour les canaux s'ils n'existent pas
+      config.groups[groupIndex].channels = channels.map(channel => ({
+        ...channel,
+        id: channel.id || `${id}-${slugify(channel.name)}`
+      }));
+    }
 
     saveConfig(config);
 

server/config/config.yaml

@@ -17,47 +17,31 @@ audio:
   jitterBufferMs: 40
 
 # Configuration des groupes
+# Format simplifié : nom du groupe + canaux
 groups:
-  - id: production
+  - name: "Production"
-    name: "Équipe Production"
+    audioBitrate: 96  # optionnel, sinon utilise defaultBitrate
-    description: "Réalisateur, cadreurs, régisseur"
-
-    # Qualité audio spécifique (optionnel, sinon utilise defaultBitrate)
-    audioBitrate: 96
-
-    # Canaux audio associés
     channels:
-      - id: prod-main
+      - name: "Principal"
-        name: "Production principale"
         audioInput: 0   # Index device CoreAudio/JACK
         audioOutput: 0
-
+      - name: "Backup"
-      - id: prod-backup
-        name: "Production backup"
         audioInput: 1
         audioOutput: 1
 
-  - id: technique
+  - name: "Technique"
-    name: "Équipe Technique"
-    description: "Techniciens, électriciens, machinistes"
-    audioBitrate: 96
     channels:
-      - id: tech-main
+      - name: "Général"
-        name: "Technique général"
         audioInput: 2
         audioOutput: 2
 
-  - id: sonorisation
+  - name: "Sonorisation"
-    name: "Équipe Sonorisation"
-    description: "Ingénieurs son, retours"
     audioBitrate: 128  # Qualité supérieure pour les ingénieurs son
     channels:
-      - id: son-main
+      - name: "Principal"
-        name: "Son principal"
         audioInput: 3
         audioOutput: 3
-      - id: son-retours
+      - name: "Retours"
-        name: "Retours scène"
         audioInput: 4
         audioOutput: 4
 

server/index.js

@@ -18,6 +18,38 @@ const configPath = join(__dirname, 'config', 'config.yaml');
 const configFile = readFileSync(configPath, 'utf8');
 const config = YAML.parse(configFile);
 
+/**
+ * Génère un ID slug à partir d'un nom
+ * Ex: "Équipe Production" -> "equipe-production"
+ */
+function slugify(text) {
+  return text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '') // Retire les accents
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-');
+}
+
+// Générer les IDs pour les groupes et canaux s'ils n'existent pas
+config.groups = config.groups.map(group => {
+  if (!group.id) {
+    group.id = slugify(group.name);
+  }
+  if (group.channels) {
+    group.channels = group.channels.map(channel => {
+      if (!channel.id) {
+        channel.id = `${group.id}-${slugify(channel.name)}`;
+      }
+      return channel;
+    });
+  }
+  return group;
+});
+
 /**
  * Détecte l'IP réseau locale (WiFi/Ethernet)
  * @returns {string|null} IP réseau ou null si non trouvée
@@ -195,7 +227,6 @@ app.get('/config', (req, res) => {
       groups: config.groups.map(g => ({
         id: g.id,
         name: g.name,
-        description: g.description,
         channels: g.channels.map(c => ({
           id: c.id,
           name: c.name
@@ -222,8 +253,7 @@ app.get('/groups', (req, res) => {
   try {
     const groups = config.groups.map(g => ({
       id: g.id,
-      name: g.name,
+      name: g.name
-      description: g.description
     }));
 
     res.json({ groups });