refactor: Suppression de la toolbar des webviews et ajout du bouton Rafraîchir dans le header (v1.2.2)

- Suppression complète de la barre d'outils des webviews
- Plus de boutons Précédent/Suivant et d'affichage d'URL
- Bouton Rafraîchir déplacé dans le header principal
- Animation de rotation lors du rafraîchissement
- Gain d'espace vertical supplémentaire (~40px)
- Code nettoyé avec suppression des fonctions inutilisées

docs/changelog.md

@@ -1,5 +1,28 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.2] - 2025-09-04
+
+### Supprimé
+- **Barre d'outils des webviews** : Suppression complète de la toolbar
+  - Plus de boutons de navigation (Précédent/Suivant)
+  - Plus d'affichage de l'URL courante
+  - Plus de bouton Rafraîchir dans la toolbar
+  - Gain d'espace vertical supplémentaire (~40px)
+  - Code nettoyé : suppression de navigateWebview() et des event listeners associés
+
+### Ajouté  
+- **Bouton Rafraîchir dans le header** : Nouvelle position pour le rafraîchissement
+  - Icône 🔄 ajoutée dans la zone droite du header
+  - Placé entre le statut de connexion et le bouton Notes
+  - Animation de rotation d'1 seconde lors du clic
+  - Fonction refreshCurrentWebview() pour rafraîchir uniquement la webview active
+
+### Technique
+- Suppression du code HTML de création de la toolbar
+- Suppression de l'event listener 'did-navigate' pour l'URL
+- Nouvelle animation CSS @keyframes rotate pour le bouton
+- Classe .rotating pour l'animation visuelle du rafraîchissement
+
 ## [1.2.1] - 2025-09-04
 
 ### Modifié

index.html

@@ -83,6 +83,9 @@
             <span class="status-indicator" id="statusIndicator"></span>
             <span id="statusText">Disponible</span>
           </div>
+          <button id="refreshBtn" class="btn-icon" title="Rafraîchir la page">
+            <span class="icon-refresh">🔄</span>
+          </button>
           <button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
             <span class="icon-notes">📝</span>
           </button>

renderer.js

@@ -67,6 +67,12 @@ document.addEventListener('DOMContentLoaded', async () => {
         closeNotesBtn.addEventListener('click', hideNotes);
     }
     
+    // Bouton rafraîchir
+    const refreshBtn = document.getElementById('refreshBtn');
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', refreshCurrentWebview);
+    }
+    
     // Charger les préférences utilisateur
     loadUserPreferences();
 
@@ -234,17 +240,6 @@ function initializeCenters() {
         webview.setAttribute('partition', `persist:${centre.id}`);
         webview.setAttribute('useragent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36');
         
-        // Barre d'outils pour la webview
-        const toolbar = document.createElement('div');
-        toolbar.className = 'webview-toolbar';
-        toolbar.innerHTML = `
-            <button onclick="navigateWebview('${centre.id}', 'back')">◀</button>
-            <button onclick="navigateWebview('${centre.id}', 'forward')">▶</button>
-            <button onclick="navigateWebview('${centre.id}', 'reload')">🔄</button>
-            <span class="webview-url" id="url-${centre.id}">${centre.url}</span>
-        `;
-        
-        webviewWrapper.appendChild(toolbar);
         webviewWrapper.appendChild(webview);
         webviewContainer.appendChild(webviewWrapper);
         
@@ -266,10 +261,6 @@ function initializeCenters() {
             }
         });
         
-        webview.addEventListener('did-navigate', (e) => {
-            document.getElementById(`url-${centre.id}`).textContent = e.url;
-        });
-        
         webview.addEventListener('did-fail-load', (e) => {
             console.error(`Erreur chargement ${centre.nom}:`, e);
         });
@@ -291,23 +282,6 @@ function selectCenter(centerId) {
     });
 }
 
-// Navigation dans les webviews
-window.navigateWebview = function(centerId, action) {
-    const webview = webviews[centerId];
-    if (webview) {
-        switch(action) {
-            case 'back':
-                webview.goBack();
-                break;
-            case 'forward':
-                webview.goForward();
-                break;
-            case 'reload':
-                webview.reload();
-                break;
-        }
-    }
-};
 
 // === GESTION DES APPELS ===
 function handleIncomingCall(callData) {
@@ -699,6 +673,25 @@ function saveUserPreferences() {
     });
 }
 
+// === FONCTION DE RAFRAÎCHISSEMENT ===
+function refreshCurrentWebview() {
+    if (activeCenter && webviews[activeCenter]) {
+        webviews[activeCenter].reload();
+        console.log(`Rafraîchissement de la webview ${activeCenter}`);
+        
+        // Animation visuelle du bouton
+        const refreshBtn = document.getElementById('refreshBtn');
+        if (refreshBtn) {
+            refreshBtn.classList.add('rotating');
+            setTimeout(() => {
+                refreshBtn.classList.remove('rotating');
+            }, 1000);
+        }
+    } else {
+        console.log('Aucune webview active à rafraîchir');
+    }
+}
+
 // === GESTION INDICATEUR SIGNALR ===
 function updateSignalRIndicator(status) {
     const indicator = document.getElementById('signalrIndicator');

styles-modern.css

@@ -70,6 +70,15 @@ body {
     }
 }
 
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* === PAGES === */
 .page {
     display: none;
@@ -395,6 +404,11 @@ body {
     border-color: #667eea;
 }
 
+.btn-icon.rotating .icon-refresh {
+    animation: rotate 1s linear;
+    display: inline-block;
+}
+
 .btn-secondary {
     padding: 8px 16px;
     background: white;
@@ -592,37 +606,6 @@ body {
     height: 100%;
 }
 
-.webview-toolbar {
-    background: #f8f9fa;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    border-bottom: 1px solid #e9ecef;
-}
-
-.webview-toolbar button {
-    padding: 6px 12px;
-    background: white;
-    border: 1px solid #dee2e6;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.webview-toolbar button:hover {
-    background: #e9ecef;
-}
-
-.webview-url {
-    flex: 1;
-    color: #666;
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .planning-webview {
     flex: 1;
     width: 100%;