From 906a2797e5d95f2932b3f86a368c0ef1f415cdec Mon Sep 17 00:00:00 2001
From: dom <dom@local>
Date: Fri, 13 Feb 2026 15:39:56 +0100
Subject: [PATCH] feat: champ de recherche dossiers dans la sidebar du viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Filtrage côté client en temps réel par nom de dossier ou document.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/viewer/templates/base.html | 61 ++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/viewer/templates/base.html b/src/viewer/templates/base.html
index 3585ce0..070dbab 100644
--- a/src/viewer/templates/base.html
+++ b/src/viewer/templates/base.html
@@ -77,6 +77,25 @@
     font-weight: 600;
   }
 
+  /* Search */
+  .sidebar-search {
+    padding: 0.75rem 1rem 0.5rem;
+    border-bottom: 1px solid #1e293b;
+  }
+  .sidebar-search input {
+    width: 100%;
+    padding: 0.45rem 0.6rem;
+    border-radius: 6px;
+    border: 1px solid #334155;
+    background: #1e293b;
+    color: #e2e8f0;
+    font-size: 0.8rem;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+  .sidebar-search input::placeholder { color: #475569; }
+  .sidebar-search input:focus { border-color: #3b82f6; }
+
   /* Admin section */
   .sidebar-admin {
     padding: 1rem;
@@ -224,6 +243,9 @@
     <h1>T2A Viewer</h1>
     <p>Visualisation CIM-10</p>
   </div>
+  <div class="sidebar-search">
+    <input type="text" id="sidebar-search" placeholder="Rechercher un dossier…" autocomplete="off">
+  </div>
   <nav class="sidebar-nav" id="sidebar-nav">
     {% block sidebar %}{% endblock %}
   </nav>
@@ -300,6 +322,45 @@
 
   loadModels();
 })();
+
+// Sidebar search filter
+(function() {
+  const input = document.getElementById('sidebar-search');
+  const nav = document.getElementById('sidebar-nav');
+  if (!input || !nav) return;
+
+  input.addEventListener('input', function() {
+    const q = this.value.toLowerCase().trim();
+    const groups = nav.querySelectorAll('.group-title');
+
+    groups.forEach(function(groupEl) {
+      // Collect all sibling links until next group-title
+      const links = [];
+      let next = groupEl.nextElementSibling;
+      while (next && !next.classList.contains('group-title')) {
+        if (next.tagName === 'A') links.push(next);
+        next = next.nextElementSibling;
+      }
+
+      if (!q) {
+        groupEl.style.display = '';
+        links.forEach(function(a) { a.style.display = ''; });
+        return;
+      }
+
+      const groupMatch = groupEl.textContent.toLowerCase().includes(q);
+      let anyLinkMatch = false;
+
+      links.forEach(function(a) {
+        const match = groupMatch || a.textContent.toLowerCase().includes(q);
+        a.style.display = match ? '' : 'none';
+        if (match) anyLinkMatch = true;
+      });
+
+      groupEl.style.display = (groupMatch || anyLinkMatch) ? '' : 'none';
+    });
+  });
+})();
 </script>
 {% block scripts %}{% endblock %}
 </body>