feat: ajout système de préférences utilisateur avec mode PTT par défaut

TODO.md

@@ -156,7 +156,7 @@ Valider la faisabilité technique : 2-4 clients, PTT basique, latence < 150ms, m
 ### 2.2 Modes PTT avancés
 - [x] Mode continu : toggle ON/OFF (appui long 3s)
 - [x] Vibration + indicateur visuel rouge (lock actif)
-- [ ] Préférences utilisateur (mode par défaut)
+- [x] Préférences utilisateur (mode par défaut)
 
 ### 2.3 Interface admin
 - [x] Page admin web (/admin)

client/src/App.css

@@ -125,6 +125,22 @@
   font-size: 0.85rem;
 }
 
+.btn-icon {
+  padding: var(--spacing-sm);
+  background: var(--color-surface-hover);
+  color: var(--color-text-secondary);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.btn-icon:hover {
+  background: var(--color-border);
+  color: var(--color-text);
+}
+
 .btn-disconnect {
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--color-surface-hover);

client/src/App.jsx

@@ -3,6 +3,7 @@ import useLiveKit from './hooks/useLiveKit';
 import PTTButton from './components/PTTButton';
 import UserList from './components/UserList';
 import GroupSelector from './components/GroupSelector';
+import Settings from './components/Settings';
 import './App.css';
 
 const API_URL = import.meta.env.VITE_API_URL || '/api';
@@ -13,6 +14,7 @@ function App() {
   const [groups, setGroups] = useState([]);
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
 
   const {
     isConnected,
@@ -222,12 +224,23 @@ function App() {
             {groups.find(g => g.id === groupId)?.name || groupId}
           </p>
         </div>
+        <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <button
+            className="btn-icon"
+            onClick={() => setShowSettings(true)}
+            title="Paramètres"
+          >
+            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+              <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
+            </svg>
+          </button>
           <button
             className="btn-disconnect"
             onClick={handleDisconnect}
           >
             Déconnexion
           </button>
+        </div>
       </header>
 
       <main className="app-main">
@@ -252,6 +265,9 @@ function App() {
           audioLevel={audioLevel}
         />
       </main>
+
+      {/* Modal de paramètres */}
+      <Settings isOpen={showSettings} onClose={() => setShowSettings(false)} />
     </div>
   );
 }

client/src/components/PTTButton.jsx

@@ -1,12 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 import './PTTButton.css';
+import { loadSettings } from './Settings';
 
 /**
  * Bouton PTT principal
  * Gère touch et mouse events pour desktop et mobile
  * Modes :
  * - PTT classique : maintenir pour parler
- * - Mode continu (lock) : glisser vers le haut pendant qu'on parle
+ * - Mode continu (lock) : glisser vers le haut pendant qu'on parle OU mode par défaut
  * Inclut VU-mètre intégré (anneau autour du bouton)
  */
 export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLevel = 0 }) {
@@ -14,12 +15,23 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
   const isPressingRef = useRef(false);
   const [isLockMode, setIsLockMode] = useState(false);
   const isLockModeRef = useRef(false); // Ref pour accès immédiat dans event handlers
+  const [settings, setSettings] = useState(loadSettings());
 
   // Drag tracking
   const dragStartYRef = useRef(null);
   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;
@@ -207,8 +219,8 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
 
     // Le micro est déjà actif (onPressStart a été appelé)
 
-    // Vibration pour feedback
+    // Vibration pour feedback (si activé dans les paramètres)
-    if (navigator.vibrate) {
+    if (settings.vibrationEnabled && navigator.vibrate) {
       navigator.vibrate([100, 50, 100]);
     }
   };
@@ -226,8 +238,8 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
       console.log('🔒 Mode lock ON');
       onPressStart();
 
-      // Vibration pour feedback
+      // Vibration pour feedback (si activé dans les paramètres)
-      if (navigator.vibrate) {
+      if (settings.vibrationEnabled && navigator.vibrate) {
         navigator.vibrate([100, 50, 100]);
       }
     } else {
@@ -235,8 +247,8 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
       console.log('🔓 Mode lock OFF');
       onPressEnd();
 
-      // Vibration pour feedback
+      // Vibration pour feedback (si activé dans les paramètres)
-      if (navigator.vibrate) {
+      if (settings.vibrationEnabled && navigator.vibrate) {
         navigator.vibrate(50);
       }
     }

client/src/components/Settings.css

@@ -0,0 +1,139 @@
+.settings-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--spacing-md);
+}
+
+.settings-modal {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.settings-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.settings-content {
+  padding: var(--spacing-lg);
+}
+
+.setting-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.setting-section:last-child {
+  margin-bottom: 0;
+}
+
+.setting-section h3 {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: 1.1rem;
+  color: var(--text-primary);
+}
+
+.setting-description {
+  margin: 0 0 var(--spacing-md) 0;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.radio-option,
+.checkbox-option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border: 2px solid var(--border-color);
+  border-radius: 8px;
+  margin-bottom: var(--spacing-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.radio-option:hover,
+.checkbox-option:hover {
+  background: var(--bg-hover);
+  border-color: var(--primary-color);
+}
+
+.radio-option:has(input:checked),
+.checkbox-option:has(input:checked) {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: var(--primary-color);
+}
+
+.radio-option input[type="radio"],
+.checkbox-option input[type="checkbox"] {
+  margin-top: 0.25rem;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.radio-option div,
+.checkbox-option div {
+  flex: 1;
+}
+
+.radio-option strong,
+.checkbox-option strong {
+  display: block;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary);
+}
+
+.radio-option p,
+.checkbox-option p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.settings-footer {
+  padding: var(--spacing-lg);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.settings-footer .btn-primary {
+  padding: var(--spacing-sm) var(--spacing-xl);
+}

client/src/components/Settings.jsx

@@ -0,0 +1,141 @@
+import { useState, useEffect } from 'react';
+import './Settings.css';
+
+const STORAGE_KEY = 'ptt-live-settings';
+
+const defaultSettings = {
+  defaultPTTMode: 'normal', // 'normal' ou 'continuous'
+  vibrationEnabled: true,
+  audioFeedbackEnabled: true
+};
+
+/**
+ * Charge les paramètres depuis localStorage
+ */
+export function loadSettings() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return { ...defaultSettings, ...JSON.parse(stored) };
+    }
+  } catch (error) {
+    console.error('Erreur chargement paramètres:', error);
+  }
+  return defaultSettings;
+}
+
+/**
+ * Sauvegarde les paramètres dans localStorage
+ */
+export function saveSettings(settings) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch (error) {
+    console.error('Erreur sauvegarde paramètres:', error);
+  }
+}
+
+/**
+ * Composant modal de paramètres
+ */
+export default function Settings({ isOpen, onClose }) {
+  const [settings, setSettings] = useState(defaultSettings);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSettings(loadSettings());
+    }
+  }, [isOpen]);
+
+  const handleChange = (key, value) => {
+    const newSettings = { ...settings, [key]: value };
+    setSettings(newSettings);
+    saveSettings(newSettings);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="settings-overlay" onClick={onClose}>
+      <div className="settings-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="settings-header">
+          <h2>Paramètres</h2>
+          <button className="close-btn" onClick={onClose}>
+            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+            </svg>
+          </button>
+        </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>
+
+            <label className="checkbox-option">
+              <input
+                type="checkbox"
+                checked={settings.vibrationEnabled}
+                onChange={(e) => handleChange('vibrationEnabled', e.target.checked)}
+              />
+              <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>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div className="settings-footer">
+          <button className="btn-primary" onClick={onClose}>
+            Fermer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}