feat: amélioration UX interface admin audio

- Admin : regroupement des 3 dropdowns cartes son dans une seule section - Admin : suppression du mode édition pour noms de canaux (directement éditables) - Admin : unification des boutons de sauvegarde en bas de chaque section - Admin : routing par hash URL pour persistance des onglets (#groups, #audio, etc.) - AudioRoutingMatrix : bouton sauvegarde déplacé en bas de la matrice - AudioRoutingMatrix : dropdowns de gain en nuance de bleu (cohérence visuelle)
fix: UX interface admin et client
2026-06-01 23:04:57 +02:00 · 2026-06-01 22:30:51 +02:00
6 changed files with 181 additions and 196 deletions
@@ -1,11 +1,17 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import './Admin.css';
 import AudioRoutingMatrix from './components/AudioRoutingMatrix';

 const API_URL = import.meta.env.VITE_API_URL || '/api';

 function Admin() {
-  const [activeTab, setActiveTab] = useState('groups');
+  // Lire l'onglet depuis l'URL hash (ex: #audio) ou utiliser 'groups' par défaut
+  const getInitialTab = () => {
+    const hash = window.location.hash.slice(1); // Enlever le #
+    return ['groups', 'audio', 'users', 'stats', 'logs'].includes(hash) ? hash : 'groups';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab());
  const [groups, setGroups] = useState([]);
  const [users, setUsers] = useState([]);
  const [stats, setStats] = useState(null);
@@ -19,11 +25,10 @@ function Admin() {
  const [selectedInputDevice, setSelectedInputDevice] = useState(null);
  const [selectedOutputDevice, setSelectedOutputDevice] = useState(null);
  const [selectedSampleRate, setSelectedSampleRate] = useState(48000);
-  const [isEditingAudio, setIsEditingAudio] = useState(false);
+  const isEditingAudioRef = useRef(false);

  // Channel names (Phase 2.5)
  const [channelNames, setChannelNames] = useState({ inputs: {}, outputs: {} });
-  const [editingChannelNames, setEditingChannelNames] = useState(false);

  // Gestion formulaire nouveau groupe
  const [showGroupForm, setShowGroupForm] = useState(false);
@@ -33,6 +38,19 @@ function Admin() {
    audioBitrate: 96
  });

+  // Synchroniser l'onglet avec l'URL hash
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (['groups', 'audio', 'users', 'stats', 'logs'].includes(hash)) {
+        setActiveTab(hash);
+      }
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
  // Rafraîchissement automatique
  useEffect(() => {
    loadData();
@@ -106,8 +124,8 @@ function Admin() {
    setCurrentDevice(device);
    setChannelNames(channelNamesData.channelNames || { inputs: {}, outputs: {} });

-    // Ne réinitialiser les sélections que si l'utilisateur n'est pas en train d'éditer
-    if (!isEditingAudio) {
+    // Ne réinitialiser les sélections que lors du chargement initial (pas en train d'éditer)
+    if (!isEditingAudioRef.current) {
      setSelectedInputDevice(device.inputDeviceId ?? null);
      setSelectedOutputDevice(device.outputDeviceId ?? null);
      setSelectedSampleRate(device.sampleRate || 48000);
@@ -216,7 +234,6 @@ function Admin() {

      if (res.ok) {
        alert('Noms de canaux sauvegardés avec succès!');
-        setEditingChannelNames(false);
        await loadAudioDevices();
      } else {
        const error = await res.json();
@@ -251,7 +268,7 @@ function Admin() {
      });

      if (res.ok) {
-        setIsEditingAudio(false); // Désactiver le mode édition
+        isEditingAudioRef.current = false; // Désactiver le mode édition
        alert('Configuration audio sauvegardée avec succès!');
        await loadAudioDevices();
      } else {
@@ -311,31 +328,31 @@ function Admin() {
      <nav className="admin-tabs">
        <button
          className={activeTab === 'groups' ? 'active' : ''}
-          onClick={() => setActiveTab('groups')}
+          onClick={() => { window.location.hash = 'groups'; setActiveTab('groups'); }}
        >
          Groupes
        </button>
        <button
          className={activeTab === 'audio' ? 'active' : ''}
-          onClick={() => setActiveTab('audio')}
+          onClick={() => { window.location.hash = 'audio'; setActiveTab('audio'); }}
        >
          Audio
        </button>
        <button
          className={activeTab === 'users' ? 'active' : ''}
-          onClick={() => setActiveTab('users')}
+          onClick={() => { window.location.hash = 'users'; setActiveTab('users'); }}
        >
          Utilisateurs ({users.length})
        </button>
        <button
          className={activeTab === 'stats' ? 'active' : ''}
-          onClick={() => setActiveTab('stats')}
+          onClick={() => { window.location.hash = 'stats'; setActiveTab('stats'); }}
        >
          Statistiques
        </button>
        <button
          className={activeTab === 'logs' ? 'active' : ''}
-          onClick={() => setActiveTab('logs')}
+          onClick={() => { window.location.hash = 'logs'; setActiveTab('logs'); }}
        >
          Logs
        </button>
@@ -438,11 +455,17 @@ function Admin() {

            <div className="audio-config-container">
              <div className="audio-section">
-                <h3>Carte son d'entrée (Input)</h3>
+                <h3>Configuration des cartes son</h3>
+
+                <div style={{display: 'grid', gap: 'var(--spacing-lg)', marginTop: 'var(--spacing-md)'}}>
+                  <div>
+                    <label style={{display: 'block', marginBottom: 'var(--spacing-xs)', fontSize: '0.9rem', fontWeight: 600, color: 'var(--color-text-secondary)'}}>
+                      Carte son d'entrée (Input)
+                    </label>
                    <select
                      value={selectedInputDevice ?? ''}
                      onChange={(e) => {
-                    setIsEditingAudio(true);
+                        isEditingAudioRef.current = true;
                        setSelectedInputDevice(e.target.value === '' ? null : e.target.value);
                      }}
                      className="device-select"
@@ -463,12 +486,14 @@ function Admin() {
                    )}
                  </div>

-              <div className="audio-section">
-                <h3>Carte son de sortie (Output)</h3>
+                  <div>
+                    <label style={{display: 'block', marginBottom: 'var(--spacing-xs)', fontSize: '0.9rem', fontWeight: 600, color: 'var(--color-text-secondary)'}}>
+                      Carte son de sortie (Output)
+                    </label>
                    <select
                      value={selectedOutputDevice ?? ''}
                      onChange={(e) => {
-                    setIsEditingAudio(true);
+                        isEditingAudioRef.current = true;
                        setSelectedOutputDevice(e.target.value === '' ? null : e.target.value);
                      }}
                      className="device-select"
@@ -489,12 +514,14 @@ function Admin() {
                    )}
                  </div>

-              <div className="audio-section">
-                <h3>Sample Rate</h3>
+                  <div>
+                    <label style={{display: 'block', marginBottom: 'var(--spacing-xs)', fontSize: '0.9rem', fontWeight: 600, color: 'var(--color-text-secondary)'}}>
+                      Sample Rate
+                    </label>
                    <select
                      value={selectedSampleRate}
                      onChange={(e) => {
-                    setIsEditingAudio(true);
+                        isEditingAudioRef.current = true;
                        setSelectedSampleRate(parseInt(e.target.value));
                      }}
                      className="device-select"
@@ -504,33 +531,19 @@ function Admin() {
                      <option value={96000}>96000 Hz (High quality)</option>
                    </select>
                  </div>
+                </div>

                <div className="audio-actions">
                  <button onClick={handleSaveAudioDevice} className="btn-primary">
-                  Sauvegarder la configuration
+                    Sauvegarder la configuration audio
                  </button>
                </div>
+              </div>

              <div className="audio-section">
-                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-md)'}}>
                <h3>Nommage des canaux physiques</h3>
-                  {!editingChannelNames ? (
-                    <button onClick={() => setEditingChannelNames(true)} className="btn-secondary">
-                      Modifier les noms
-                    </button>
-                  ) : (
-                    <div style={{display: 'flex', gap: 'var(--spacing-sm)'}}>
-                      <button onClick={handleSaveChannelNames} className="btn-primary">
-                        Sauvegarder
-                      </button>
-                      <button onClick={() => { setEditingChannelNames(false); loadAudioDevices(); }} className="btn-secondary">
-                        Annuler
-                      </button>
-                    </div>
-                  )}
-                </div>

-                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-xl)'}}>
+                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-xl)', marginTop: 'var(--spacing-md)'}}>
                  <div>
                    <h4 style={{marginBottom: 'var(--spacing-md)', color: 'var(--color-text-secondary)'}}>
                      Entrées (Inputs) - {currentDevice.inputChannels || 0} canaux disponibles
@@ -544,10 +557,9 @@ function Admin() {
                            value={channelNames.inputs?.[i] || ''}
                            onChange={(e) => updateChannelName('inputs', i, e.target.value)}
                            placeholder={`Input ${i}`}
-                            disabled={!editingChannelNames}
                            style={{
                              padding: 'var(--spacing-sm)',
-                              background: editingChannelNames ? 'var(--color-bg)' : 'var(--color-surface-hover)',
+                              background: 'var(--color-bg)',
                              border: '1px solid var(--color-border)',
                              borderRadius: '6px',
                              color: 'var(--color-text)',
@@ -572,10 +584,9 @@ function Admin() {
                            value={channelNames.outputs?.[i] || ''}
                            onChange={(e) => updateChannelName('outputs', i, e.target.value)}
                            placeholder={`Output ${i}`}
-                            disabled={!editingChannelNames}
                            style={{
                              padding: 'var(--spacing-sm)',
-                              background: editingChannelNames ? 'var(--color-bg)' : 'var(--color-surface-hover)',
+                              background: 'var(--color-bg)',
                              border: '1px solid var(--color-border)',
                              borderRadius: '6px',
                              color: 'var(--color-text)',
@@ -587,6 +598,12 @@ function Admin() {
                    </div>
                  </div>
                </div>
+
+                <div className="audio-actions">
+                  <button onClick={handleSaveChannelNames} className="btn-primary">
+                    Sauvegarder les noms des canaux
+                  </button>
+                </div>
              </div>

              <AudioRoutingMatrix groups={groups} channelNames={channelNames} />
@@ -6,6 +6,13 @@
  margin-top: var(--spacing-lg);
 }

+.routing-actions {
+  margin-top: var(--spacing-xl);
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+}
+
 .routing-matrix-header {
  display: flex;
  justify-content: space-between;
@@ -169,9 +176,9 @@
  width: 100%;
  padding: 4px 8px;
  font-size: 0.75rem;
-  background: rgba(255, 255, 255, 0.9);
-  color: var(--color-text);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(59, 130, 246, 0.2);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
@@ -180,8 +187,9 @@

 .gain-select:focus {
  outline: none;
-  border-color: rgba(255, 255, 255, 0.6);
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+  background: rgba(59, 130, 246, 0.3);
+  border-color: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }

@media (max-width: 1024px) {
@@ -194,7 +194,6 @@ function AudioRoutingMatrix({ groups, channelNames }) {
            {wsConnected ? '● Live' : '○ Offline'}
          </span>
        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
          <input
            type="checkbox"
@@ -203,10 +202,6 @@ function AudioRoutingMatrix({ groups, channelNames }) {
          />
          <span>Afficher uniquement les canaux nommés</span>
        </label>
-          <button onClick={saveRouting} className="btn-primary">
-            Sauvegarder le routing
-          </button>
-        </div>
      </div>

      <div className="routing-section">
@@ -341,6 +336,12 @@ function AudioRoutingMatrix({ groups, channelNames }) {
          ))}
        </div>
      </div>
+
+      <div className="routing-actions">
+        <button onClick={saveRouting} className="btn-primary">
+          Sauvegarder le routing audio
+        </button>
+      </div>
    </div>
  );
 }
@@ -22,16 +22,6 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
  const currentYRef = useRef(null);
  const [dragOffset, setDragOffset] = useState(0); // Offset visuel du drag (en pixels)

-  // Initialiser le mode selon les préférences au démarrage
-  useEffect(() => {
-    const currentSettings = loadSettings();
-    if (currentSettings.defaultPTTMode === 'continuous') {
-      setIsLockMode(true);
-      isLockModeRef.current = true;
-      console.log('Mode continu activé par défaut (préférences)');
-    }
-  }, []);
-
  useEffect(() => {
    const button = buttonRef.current;
    if (!button) return;
@@ -3,8 +3,22 @@
  bottom: 0;
  left: 0;
  right: 0;
+  top: 0;
  z-index: 1001;
-  animation: slideUp 0.3s ease;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

@keyframes slideUp {
@@ -17,12 +31,14 @@
 }

 .pwa-prompt {
-  background: var(--bg-secondary);
+  width: 100%;
+  background: #1a1a1a;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
+  animation: slideUp 0.3s ease;
 }

 .pwa-prompt-header {
@@ -36,13 +52,13 @@
 .pwa-prompt-header h3 {
  margin: 0;
  font-size: 1.2rem;
-  color: var(--text-primary);
+  color: #ffffff;
 }

 .pwa-prompt-close {
  background: none;
  border: none;
-  color: var(--text-secondary);
+  color: #9ca3af;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
@@ -50,8 +66,8 @@
 }

 .pwa-prompt-close:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
 }

 .pwa-prompt-content {
@@ -59,8 +75,8 @@
 }

 .pwa-prompt-content > p {
-  margin: 0 0 var(--spacing-lg) 0;
-  color: var(--text-secondary);
+  margin: 0 0 1.5rem 0;
+  color: #d1d5db;
  line-height: 1.6;
 }

@@ -73,9 +89,9 @@
 .pwa-prompt-step {
  display: flex;
  align-items: center;
-  gap: var(--spacing-md);
-  padding: var(--spacing-md);
-  background: var(--bg-hover);
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
 }

@@ -85,7 +101,7 @@
  justify-content: center;
  width: 32px;
  height: 32px;
-  background: var(--primary-color);
+  background: #3b82f6;
  color: white;
  border-radius: 50%;
  font-weight: 600;
@@ -95,13 +111,13 @@
 .pwa-prompt-step p {
  flex: 1;
  margin: 0;
-  color: var(--text-primary);
+  color: #ffffff;
  font-size: 0.95rem;
 }

 .pwa-prompt-step svg {
  flex-shrink: 0;
-  color: var(--primary-color);
+  color: #3b82f6;
 }

 .pwa-prompt-footer {
@@ -4,9 +4,7 @@ import './Settings.css';
 const STORAGE_KEY = 'ptt-live-settings';

 const defaultSettings = {
-  defaultPTTMode: 'normal', // 'normal' ou 'continuous'
-  vibrationEnabled: true,
-  audioFeedbackEnabled: true
+  vibrationEnabled: true
 };

 /**
@@ -68,39 +66,6 @@ export default function Settings({ isOpen, onClose }) {
        </div>

        <div className="settings-content">
-          <div className="setting-section">
-            <h3>Mode PTT</h3>
-            <p className="setting-description">
-              Choisissez le mode de fonctionnement par défaut du bouton PTT
-            </p>
-
-            <label className="radio-option">
-              <input
-                type="radio"
-                name="pttMode"
-                checked={settings.defaultPTTMode === 'normal'}
-                onChange={() => handleChange('defaultPTTMode', 'normal')}
-              />
-              <div>
-                <strong>Mode normal (Push-To-Talk)</strong>
-                <p>Maintenir le bouton pour parler, relâcher pour arrêter</p>
-              </div>
-            </label>
-
-            <label className="radio-option">
-              <input
-                type="radio"
-                name="pttMode"
-                checked={settings.defaultPTTMode === 'continuous'}
-                onChange={() => handleChange('defaultPTTMode', 'continuous')}
-              />
-              <div>
-                <strong>Mode continu (verrouillé)</strong>
-                <p>Un appui active le micro en continu, un second appui le désactive</p>
-              </div>
-            </label>
-          </div>
-
          <div className="setting-section">
            <h3>Feedback</h3>

@@ -112,19 +77,7 @@ export default function Settings({ isOpen, onClose }) {
              />
              <div>
                <strong>Vibrations</strong>
-                <p>Activer le retour haptique (si disponible)</p>
-              </div>
-            </label>
-
-            <label className="checkbox-option">
-              <input
-                type="checkbox"
-                checked={settings.audioFeedbackEnabled}
-                onChange={(e) => handleChange('audioFeedbackEnabled', e.target.checked)}
-              />
-              <div>
-                <strong>Feedback audio</strong>
-                <p>Sons de confirmation pour les actions</p>
+                <p>Activer le retour haptique lors du verrouillage PTT</p>
              </div>
            </label>
          </div>