fix: Correction du panneau de notes partiellement visible au démarrage

- Position cachée ajustée à -620px pour invisibilité totale
- Gestion dynamique du décalage selon la largeur
- Indicateur de redimensionnement rendu plus visible (3 barres CSS)
- Zone de clic élargie à 16px pour meilleure ergonomie

docs/changelog.md

@@ -1,5 +1,21 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.13] - 2025-09-04
+
+### Corrigé
+- **Panneau de notes partiellement visible** : Correction du bug d'affichage au démarrage
+  - Le panneau était partiellement visible même fermé
+  - Position cachée ajustée à -620px pour garantir l'invisibilité complète
+  - Gestion dynamique du décalage selon la largeur actuelle
+  - Réinitialisation explicite de la position à l'ouverture
+
+### Amélioré
+- **Indicateur de redimensionnement plus visible** : Meilleure visibilité des barres
+  - Zone de clic élargie à 16px pour faciliter la saisie
+  - 3 barres verticales créées avec gradient CSS au lieu de caractères
+  - Hauteur de 30px pour une meilleure visibilité
+  - Changement de couleur gris vers violet au survol
+
 ## [1.2.12] - 2025-09-04
 
 ### Ajouté

renderer.js

@@ -878,6 +878,11 @@ function showNotes() {
         }
     }
     
+    // Réinitialiser la position pour l'affichage
+    if (notesSection) {
+        notesSection.style.right = '0';
+    }
+    
     notesSection.classList.add('visible');
     toggleBtn.classList.add('active');
     
@@ -912,6 +917,12 @@ function hideNotes() {
         webviewContainer.classList.remove('notes-open');
     }
     
+    // S'assurer que le panneau est complètement caché
+    if (notesSection) {
+        const currentWidth = notesSection.offsetWidth || 380;
+        notesSection.style.right = `-${currentWidth + 20}px`;
+    }
+    
     // Sauvegarder la préférence
     localStorage.setItem('notesVisible', 'false');
 }

styles-modern.css

@@ -616,7 +616,7 @@ body {
 .notes-section {
     position: fixed;
     top: 60px; /* Juste sous le header */
-    right: -400px; /* Caché par défaut */
+    right: -620px; /* Complètement caché par défaut (largeur max + marges) */
     width: 380px;
     min-width: 280px;
     max-width: 600px;
@@ -633,55 +633,73 @@ body {
 /* Poignée de redimensionnement */
 .notes-resize-handle {
     position: absolute;
-    left: -5px;
+    left: -8px;
     top: 0;
     bottom: 0;
-    width: 10px;
+    width: 16px;
     cursor: col-resize;
-    background: linear-gradient(90deg, 
-        transparent 0%, 
-        transparent 30%, 
-        rgba(209, 213, 219, 0.5) 50%, 
-        transparent 70%, 
-        transparent 100%);
     z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .notes-resize-handle:hover {
     background: linear-gradient(90deg, 
         transparent 0%, 
-        rgba(102, 126, 234, 0.1) 30%, 
-        rgba(102, 126, 234, 0.3) 50%, 
-        rgba(102, 126, 234, 0.1) 70%, 
+        rgba(102, 126, 234, 0.1) 20%, 
+        rgba(102, 126, 234, 0.2) 50%, 
+        rgba(102, 126, 234, 0.1) 80%, 
         transparent 100%);
 }
 
 .notes-resize-handle:active {
     background: linear-gradient(90deg, 
         transparent 0%, 
-        rgba(102, 126, 234, 0.2) 30%, 
-        rgba(102, 126, 234, 0.5) 50%, 
-        rgba(102, 126, 234, 0.2) 70%, 
+        rgba(102, 126, 234, 0.2) 20%, 
+        rgba(102, 126, 234, 0.4) 50%, 
+        rgba(102, 126, 234, 0.2) 80%, 
         transparent 100%);
 }
 
-/* Indicateur visuel permanent - 3 points verticaux */
+/* Indicateur visuel permanent - 3 barres verticales */
 .notes-resize-handle::before {
-    content: '⋮⋮⋮';
+    content: '';
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%) rotate(90deg);
-    font-size: 16px;
-    color: #9ca3af;
-    letter-spacing: -4px;
-    font-weight: bold;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 30px;
+    background: linear-gradient(180deg,
+        #d1d5db 0%,
+        #d1d5db 20%,
+        transparent 20%,
+        transparent 40%,
+        #d1d5db 40%,
+        #d1d5db 60%,
+        transparent 60%,
+        transparent 80%,
+        #d1d5db 80%,
+        #d1d5db 100%
+    );
+    border-radius: 2px;
     pointer-events: none;
-    user-select: none;
 }
 
 .notes-resize-handle:hover::before {
-    color: #667eea;
+    background: linear-gradient(180deg,
+        #667eea 0%,
+        #667eea 20%,
+        transparent 20%,
+        transparent 40%,
+        #667eea 40%,
+        #667eea 60%,
+        transparent 60%,
+        transparent 80%,
+        #667eea 80%,
+        #667eea 100%
+    );
 }
 
 /* Désactiver les transitions pendant le redimensionnement */