From 2686cc5d11b97161fe74a8f9b9c6a3ee002c38bc Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Thu, 26 Mar 2026 15:17:55 -0400
Subject: [PATCH] feat: add dynamic button state updates for hidden files
 config with modified vault count display and visual highlights to indicate
 unsaved changes

---
 frontend/app.js     | 30 ++++++++++++++++++++++++++++++
 frontend/index.html |  5 ++++-
 frontend/style.css  |  9 +++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/frontend/app.js b/frontend/app.js
index b17992a..7f4b18e 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -3234,6 +3234,29 @@
   // Track which vaults have been modified
   let modifiedVaults = new Set();
   
+  function updateHiddenFilesButtonStates() {
+    const saveBtn = document.getElementById("cfg-save-hidden-files");
+    const reindexBtn = document.getElementById("cfg-reindex-hidden");
+    
+    if (modifiedVaults.size > 0) {
+      if (saveBtn) {
+        saveBtn.textContent = `💾 Sauvegarder (${modifiedVaults.size} modifié${modifiedVaults.size > 1 ? 's' : ''})`;
+        saveBtn.classList.add("config-btn-highlight");
+      }
+      if (reindexBtn) {
+        reindexBtn.textContent = "🔄 Sauvegarder et réindexer";
+      }
+    } else {
+      if (saveBtn) {
+        saveBtn.textContent = "💾 Sauvegarder";
+        saveBtn.classList.remove("config-btn-highlight");
+      }
+      if (reindexBtn) {
+        reindexBtn.textContent = "🔄 Réindexer";
+      }
+    }
+  }
+  
   async function loadHiddenFilesSettings() {
     const container = document.getElementById("hidden-files-vault-list");
     if (!container) return;
@@ -3338,15 +3361,18 @@
       addBtn.addEventListener("click", () => {
         addWhitelistItem(vault.name);
         modifiedVaults.add(vault.name);
+        updateHiddenFilesButtonStates();
       });
       input.addEventListener("keypress", (e) => {
         if (e.key === "Enter") {
           addWhitelistItem(vault.name);
           modifiedVaults.add(vault.name);
+          updateHiddenFilesButtonStates();
         }
       });
       checkbox.addEventListener("change", () => {
         modifiedVaults.add(vault.name);
+        updateHiddenFilesButtonStates();
       });
     });
   }
@@ -3367,6 +3393,7 @@
     removeBtn.addEventListener("click", () => {
       item.remove();
       modifiedVaults.add(vaultName);
+      updateHiddenFilesButtonStates();
     });
     
     return item;
@@ -3435,6 +3462,7 @@
       
       await Promise.all(promises);
       modifiedVaults.clear();
+      updateHiddenFilesButtonStates();
       showToast("✓ Paramètres sauvegardés", "success");
     } catch (err) {
       console.error("Failed to save hidden files settings:", err);
@@ -3467,6 +3495,8 @@
         showToast("✓ Réindexation terminée", "success");
       }
       
+      modifiedVaults.clear();
+      updateHiddenFilesButtonStates();
       loadDiagnostics();
       await Promise.all([loadVaults(), loadTags()]);
     } catch (err) {
diff --git a/frontend/index.html b/frontend/index.html
index 2865fed..2b18f3d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -550,8 +550,11 @@
 
           <!-- Hidden Files/Folders Configuration -->
           <section class="config-section">
-            <h2>�️ Fichiers cachés</h2>
+            <h2>🗂️ Fichiers cachés</h2>
             <p class="config-description">Gérez l'affichage des fichiers/dossiers cachés (commençant par <code>.</code>) par vault.</p>
+            <p class="config-hint" style="margin-bottom: 12px; padding: 8px; background: var(--background-secondary); border-radius: 4px;">
+              ⚠️ <strong>Important :</strong> Après avoir modifié les paramètres, cliquez sur <strong>"Sauvegarder"</strong> puis sur <strong>"Réindexer"</strong> pour appliquer les changements.
+            </p>
             
             <div id="hidden-files-vault-list">
               <!-- Vault-specific settings will be injected here -->
diff --git a/frontend/style.css b/frontend/style.css
index 58e63b5..101f17a 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2785,6 +2785,15 @@ body.resizing-v {
   transition: opacity 150ms;
 }
 .config-btn-save:hover { opacity: 0.9; }
+.config-btn-save.config-btn-highlight {
+  background: var(--accent-green);
+  border-color: var(--accent-green);
+  animation: pulse 2s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
 .config-btn-secondary {
   padding: 8px 16px;
   border: 1px solid var(--border);