Add multi-tag filtering with active tag display, optimize directory browsing performance, and improve mobile editor UI

frontend/app.js

@@ -13,6 +13,7 @@
   let cachedRawSource = null;
   let allVaults = [];
   let selectedContextVault = "all";
+  let selectedTags = [];
   let editorView = null;
   let editorVault = null;
   let editorPath = null;
@@ -289,6 +290,8 @@
     const data = await api(url);
     container.innerHTML = "";
 
+    const fragment = document.createDocumentFragment();
+
     data.items.forEach((item) => {
       if (item.type === "directory") {
         const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [
@@ -297,10 +300,10 @@
           document.createTextNode(` ${item.name} `),
           smallBadge(item.children_count),
         ]);
-        container.appendChild(dirItem);
+        fragment.appendChild(dirItem);
 
         const subContainer = el("div", { class: "tree-children collapsed", id: `dir-${vaultName}-${item.path}` });
-        container.appendChild(subContainer);
+        fragment.appendChild(subContainer);
 
         dirItem.addEventListener("click", async () => {
           if (subContainer.classList.contains("collapsed")) {
@@ -329,10 +332,11 @@
           openFile(vaultName, item.path);
           closeMobileSidebar();
         });
-        container.appendChild(fileItem);
+        fragment.appendChild(fileItem);
       }
     });
 
+    container.appendChild(fragment);
     safeCreateIcons();
   }
 
@@ -422,11 +426,54 @@
     });
   }
 
-  function searchByTag(tag) {
+  function addTagFilter(tag) {
+    if (!selectedTags.includes(tag)) {
+      selectedTags.push(tag);
+      renderActiveTags();
+      performTagSearch();
+    }
+  }
+
+  function removeTagFilter(tag) {
+    selectedTags = selectedTags.filter(t => t !== tag);
+    renderActiveTags();
+    if (selectedTags.length > 0) {
+      performTagSearch();
+    } else {
+      const input = document.getElementById("search-input");
+      if (!input.value.trim()) {
+        showWelcome();
+      }
+    }
+  }
+
+  function renderActiveTags() {
+    const container = document.getElementById("active-tags");
+    if (!container) return;
+    
+    container.innerHTML = "";
+    
+    selectedTags.forEach(tag => {
+      const tagEl = el("div", { class: "active-tag" }, [
+        document.createTextNode(`#${tag}`),
+        el("span", { class: "remove-icon" }, [icon("x", 14)])
+      ]);
+      tagEl.addEventListener("click", () => removeTagFilter(tag));
+      container.appendChild(tagEl);
+    });
+    
+    safeCreateIcons();
+  }
+
+  function performTagSearch() {
     const input = document.getElementById("search-input");
-    input.value = "";
+    const query = input.value.trim();
     const vault = document.getElementById("vault-filter").value;
-    performSearch("", vault, tag);
+    performSearch(query, vault, selectedTags.join(","));
+  }
+
+  function searchByTag(tag) {
+    addTagFilter(tag);
   }
 
   // ---------------------------------------------------------------------------
@@ -608,8 +655,9 @@
       searchTimeout = setTimeout(() => {
         const q = input.value.trim();
         const vault = document.getElementById("vault-filter").value;
-        if (q.length > 0) {
-          performSearch(q, vault, null);
+        const tagFilter = selectedTags.length > 0 ? selectedTags.join(",") : null;
+        if (q.length > 0 || tagFilter) {
+          performSearch(q, vault, tagFilter);
         } else {
           showWelcome();
         }
@@ -632,10 +680,14 @@
     area.innerHTML = "";
 
     const header = el("div", { class: "search-results-header" });
-    if (query) {
+    if (query && tagFilter) {
+      const tags = tagFilter.split(',').map(t => `#${t}`).join(', ');
+      header.textContent = `${data.count} résultat(s) pour "${query}" avec les tags ${tags}`;
+    } else if (query) {
       header.textContent = `${data.count} résultat(s) pour "${query}"`;
     } else if (tagFilter) {
-      header.textContent = `${data.count} fichier(s) avec le tag #${tagFilter}`;
+      const tags = tagFilter.split(',').map(t => `#${t}`).join(', ');
+      header.textContent = `${data.count} fichier(s) avec les tags ${tags}`;
     }
     area.appendChild(header);
 
@@ -657,7 +709,12 @@
       if (r.tags && r.tags.length > 0) {
         const tagsDiv = el("div", { class: "search-result-tags" });
         r.tags.forEach((tag) => {
-          tagsDiv.appendChild(el("span", { class: "file-tag" }, [document.createTextNode(`#${tag}`)]));
+          const tagEl = el("span", { class: "file-tag" }, [document.createTextNode(`#${tag}`)]);
+          tagEl.addEventListener("click", (e) => {
+            e.stopPropagation();
+            addTagFilter(tag);
+          });
+          tagsDiv.appendChild(tagEl);
         });
         item.appendChild(tagsDiv);
       }
@@ -921,11 +978,11 @@
 
     const content = editorView ? editorView.state.doc.toString() : fallbackEditorEl.value;
     const saveBtn = document.getElementById("editor-save");
-    const originalText = saveBtn.textContent;
+    const originalHTML = saveBtn.innerHTML;
 
     try {
       saveBtn.disabled = true;
-      saveBtn.innerHTML = '<i data-lucide="loader" style="width:14px;height:14px"></i> Sauvegarde...';
+      saveBtn.innerHTML = '<i data-lucide="loader" style="width:14px;height:14px"></i><span class="editor-btn-text">Sauvegarde...</span>';
       safeCreateIcons();
 
       const response = await fetch(
@@ -933,7 +990,7 @@
         {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ content: content }),
+          body: JSON.stringify({ content }),
         }
       );
 
@@ -942,12 +999,11 @@
         throw new Error(error.detail || "Erreur de sauvegarde");
       }
 
-      saveBtn.innerHTML = '<i data-lucide="check" style="width:14px;height:14px"></i> Sauvegardé !';
+      saveBtn.innerHTML = '<i data-lucide="check" style="width:14px;height:14px"></i><span class="editor-btn-text">Sauvegardé !</span>';
       safeCreateIcons();
 
       setTimeout(() => {
         closeEditor();
-        // Reload the file if it's currently open
         if (currentVault === editorVault && currentPath === editorPath) {
           openFile(currentVault, currentPath);
         }
@@ -955,7 +1011,7 @@
     } catch (err) {
       console.error("Save error:", err);
       alert(`Erreur: ${err.message}`);
-      saveBtn.innerHTML = originalText;
+      saveBtn.innerHTML = originalHTML;
       saveBtn.disabled = false;
       safeCreateIcons();
     }