feat: champ de recherche dossiers dans la sidebar du viewer

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dom
2026-02-13 15:39:56 +01:00
parent 837bdaca76
commit 906a2797e5

View File

@@ -77,6 +77,25 @@
font-weight: 600; 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 */ /* Admin section */
.sidebar-admin { .sidebar-admin {
padding: 1rem; padding: 1rem;
@@ -224,6 +243,9 @@
<h1>T2A Viewer</h1> <h1>T2A Viewer</h1>
<p>Visualisation CIM-10</p> <p>Visualisation CIM-10</p>
</div> </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"> <nav class="sidebar-nav" id="sidebar-nav">
{% block sidebar %}{% endblock %} {% block sidebar %}{% endblock %}
</nav> </nav>
@@ -300,6 +322,45 @@
loadModels(); 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> </script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>