refactor: Fusion du header et des onglets pour optimiser l'espace vertical (v1.2.1)

- Header et barre d'onglets combinés sur une seule ligne
- Gain de 10px en hauteur (60px au lieu de 70px)
- Logo et agent à gauche, onglets au centre, actions à droite
- Interface plus compacte avec éléments redimensionnés
- Plus d'espace vertical disponible pour les webviews

docs/changelog.md

@@ -1,5 +1,28 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.1] - 2025-09-04
+
+### Modifié
+- **Header et onglets fusionnés** : Optimisation de l'espace vertical
+  - Fusion du header et de la barre d'onglets sur une seule ligne
+  - Logo SimpleConnect et nom de l'agent à gauche
+  - Onglets des centres au milieu (espace flexible)
+  - Statut de connexion et boutons d'action à droite
+  - Gain de 10px en hauteur (60px au lieu de 70px)
+  
+### Amélioré
+- **Interface plus compacte** : Meilleure utilisation de l'espace écran
+  - Plus d'espace vertical pour l'affichage des webviews
+  - Tous les contrôles accessibles sur une seule ligne
+  - Tailles des éléments légèrement réduites (boutons 36x36px, textes 13-14px)
+  - Padding optimisé sur tous les éléments
+  
+### Technique
+- Nouvelle classe CSS `.header-with-tabs` remplaçant l'ancien header séparé
+- Onglets avec `flex: 1` pour occuper l'espace disponible
+- Hauteur du conteneur principal ajustée à `calc(100vh - 60px)`
+- Webview container à 100% de hauteur (plus de déduction pour les onglets)
+
 ## [1.2.0] - 2025-09-04
 
 ### Supprimé

index.html

@@ -56,25 +56,6 @@
 
     <!-- Page principale -->
     <div id="mainPage" class="page">
-      <!-- Header -->
-      <header>
-        <div class="header-left">
-          <h1>SimpleConnect</h1>
-          <span id="agentName" class="agent-name"></span>
-        </div>
-        <div class="header-center">
-          <div id="callStatus" class="call-status">
-            <span class="status-indicator" id="statusIndicator"></span>
-            <span id="statusText">En attente</span>
-          </div>
-        </div>
-        <div class="header-right">
-          <button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
-            <span class="icon-notes">📝</span>
-          </button>
-          <button id="logoutBtn" class="btn-secondary">Déconnexion</button>
-        </div>
-      </header>
 
       <!-- Zone d'alerte appel entrant -->
       <div id="incomingCallAlert" class="incoming-call-alert">
@@ -87,12 +68,32 @@
         <button id="acceptCallBtn" class="btn-accept">Prendre l'appel</button>
       </div>
 
+      <!-- Header et onglets combinés -->
+      <header class="header-with-tabs">
+        <div class="header-left">
+          <h1>SimpleConnect</h1>
+          <span id="agentName" class="agent-name"></span>
+        </div>
+        
+        <!-- Onglets des centres -->
+        <div class="tabs" id="centerTabs"></div>
+        
+        <div class="header-right">
+          <div id="callStatus" class="call-status">
+            <span class="status-indicator" id="statusIndicator"></span>
+            <span id="statusText">Disponible</span>
+          </div>
+          <button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
+            <span class="icon-notes">📝</span>
+          </button>
+          <button id="logoutBtn" class="btn-secondary">Déconnexion</button>
+        </div>
+      </header>
+
       <!-- Conteneur principal -->
       <div class="main-container">
         <!-- Zone principale avec les webviews -->
         <main class="content">
-          <!-- Onglets des centres -->
-          <div class="tabs" id="centerTabs"></div>
 
           <!-- Container des webviews -->
           <div id="webviewContainer" class="webview-container">

styles-modern.css

@@ -286,56 +286,54 @@ body {
     overflow: hidden;
 }
 
-/* === HEADER === */
+/* === HEADER AVEC ONGLETS === */
-header {
+.header-with-tabs {
     background: white;
-    padding: 15px 30px;
+    padding: 0;
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     display: flex;
-    justify-content: space-between;
+    align-items: flex-end;
-    align-items: center;
     z-index: 1000;
-    min-height: 70px;
+    min-height: 60px;
+    border-bottom: 2px solid #e9ecef;
 }
 
 .header-left {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 15px;
+    padding: 15px 20px;
+    padding-bottom: 12px;
+    flex-shrink: 0;
 }
 
 .header-left h1 {
-    font-size: 24px;
+    font-size: 20px;
     color: #667eea;
     margin: 0;
 }
 
 .agent-name {
-    font-size: 16px;
+    font-size: 14px;
     color: #666;
     font-weight: 500;
 }
 
-.header-center {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 
 .call-status {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
-    padding: 10px 20px;
+    padding: 8px 15px;
     background: #f8f9fa;
-    border-radius: 25px;
+    border-radius: 20px;
     border: 1px solid #e9ecef;
+    font-size: 13px;
 }
 
 .status-indicator {
-    width: 12px;
+    width: 10px;
-    height: 12px;
+    height: 10px;
     border-radius: 50%;
 }
 
@@ -355,7 +353,7 @@ header {
 }
 
 #statusText {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: #495057;
 }
@@ -364,18 +362,21 @@ header {
     display: flex;
     gap: 10px;
     align-items: center;
+    padding: 15px 20px;
+    padding-bottom: 12px;
+    flex-shrink: 0;
 }
 
 .btn-icon {
-    width: 40px;
+    width: 36px;
-    height: 40px;
+    height: 36px;
     padding: 0;
     background: white;
     border: 1px solid #dee2e6;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 18px;
+    font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -395,13 +396,13 @@ header {
 }
 
 .btn-secondary {
-    padding: 10px 20px;
+    padding: 8px 16px;
     background: white;
     border: 1px solid #dee2e6;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: #495057;
 }
@@ -494,7 +495,7 @@ header {
     flex: 1;
     overflow: hidden;
     flex-direction: column;
-    height: calc(100vh - 70px); /* Hauteur totale moins le header */
+    height: calc(100vh - 60px); /* Hauteur totale moins le header combiné */
 }
 
 /* === ZONE PRINCIPALE === */
@@ -512,15 +513,12 @@ header {
 /* === ONGLETS === */
 .tabs {
     display: flex;
-    background: white;
+    flex: 1;
-    border-bottom: 2px solid #e9ecef;
+    gap: 3px;
-    padding: 0 20px;
-    gap: 5px;
     overflow-x: auto;
     overflow-y: hidden;
-    min-height: 50px;
     align-items: flex-end;
-    flex-shrink: 0;
+    padding: 0 10px;
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE/Edge */
 }
@@ -532,18 +530,19 @@ header {
 }
 
 .tab {
-    padding: 12px 24px;
+    padding: 10px 20px;
     background: #f8f9fa;
     border: 1px solid #e9ecef;
     border-bottom: none;
-    border-radius: 8px 8px 0 0;
+    border-radius: 6px 6px 0 0;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: #666;
     margin-bottom: -2px;
     position: relative;
+    white-space: nowrap;
 }
 
 .tab:hover {
@@ -555,7 +554,7 @@ header {
     background: white;
     color: #667eea;
     border-color: #e9ecef;
-    padding-bottom: 14px;
+    padding-bottom: 12px;
     font-weight: 600;
 }
 
@@ -575,7 +574,7 @@ header {
     position: relative;
     background: white;
     overflow: hidden;
-    height: calc(100% - 50px); /* Hauteur moins les onglets */
+    height: 100%; /* Pleine hauteur car les onglets sont dans le header */
 }
 
 .no-center-selected {