Projets/ObsiGate
1
1
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

Replace collapsible sidebar panels with tab-based navigation for vaults and tags with debounced filtering and dynamic placeholder text

Browse Source
This commit is contained in:
bruno
2026-03-22 22:42:35 -04:00
parent 6a782750de
commit 0d60dd8acc
3 changed files with 162 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+35 -32
View File
@@ -158,23 +158,39 @@
<!-- Sidebar -->
<aside class="sidebar" id="sidebar" role="navigation" aria-label="Navigation des vaults">
<div class="sidebar-tree" id="sidebar-tree">
<!-- Sidebar filter -->
<div class="sidebar-filter">
<i data-lucide="filter" class="sidebar-filter-icon" style="width:14px;height:14px"></i>
<div class="sidebar-filter-input-wrapper">
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers et tags..." autocomplete="off">
<div class="sidebar-filter-actions">
<button class="sidebar-filter-btn" id="sidebar-filter-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
<span>Aa</span>
</button>
<button class="sidebar-filter-btn" id="sidebar-filter-clear-btn" type="button" title="Effacer le filtrage" aria-label="Effacer le filtrage">
<i data-lucide="x" style="width:14px;height:14px"></i>
</button>
</div>
<!-- Sidebar filter -->
<div class="sidebar-filter">
<i data-lucide="filter" class="sidebar-filter-icon" style="width:14px;height:14px"></i>
<div class="sidebar-filter-input-wrapper">
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers..." autocomplete="off">
<div class="sidebar-filter-actions">
<button class="sidebar-filter-btn" id="sidebar-filter-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
<span>Aa</span>
</button>
<button class="sidebar-filter-btn" id="sidebar-filter-clear-btn" type="button" title="Effacer le filtrage" aria-label="Effacer le filtrage">
<i data-lucide="x" style="width:14px;height:14px"></i>
</button>
</div>
</div>
</div>
<!-- Tab bar -->
<div class="sidebar-tabs" role="tablist" aria-label="Sections sidebar">
<button class="sidebar-tab active" id="sidebar-tab-vaults" role="tab"
aria-selected="true" aria-controls="sidebar-panel-vaults" data-tab="vaults">
<i data-lucide="folder-tree" style="width:13px;height:13px"></i>
<span>Vaults</span>
</button>
<button class="sidebar-tab" id="sidebar-tab-tags" role="tab"
aria-selected="false" aria-controls="sidebar-panel-tags" data-tab="tags">
<i data-lucide="tag" style="width:13px;height:13px"></i>
<span>Tags</span>
</button>
</div>
<!-- Vaults panel -->
<div class="sidebar-tab-panel active" id="sidebar-panel-vaults" role="tabpanel" aria-labelledby="sidebar-tab-vaults">
<div class="custom-dropdown sidebar-dropdown" id="vault-quick-select-dropdown">
<button class="custom-dropdown-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
<span class="custom-dropdown-selected">Tous les vaults</span>
@@ -185,27 +201,14 @@
</ul>
<input type="hidden" id="vault-quick-select" value="all">
</div>
<button class="sidebar-panel-toggle" id="vault-panel-toggle" type="button" aria-expanded="true" aria-controls="vault-panel-content">
<span class="sidebar-section-title">Vaults</span>
<i data-lucide="chevron-down" style="width:16px;height:16px"></i>
</button>
<div class="sidebar-panel-content" id="vault-panel-content">
<div id="vault-tree" role="tree" aria-label="Arborescence des fichiers"></div>
</div>
<div id="vault-tree" role="tree" aria-label="Arborescence des fichiers"></div>
</div>
<!-- Tag resize handle -->
<div class="tag-resize-handle" id="tag-resize-handle"></div>
<div class="tag-cloud-section" id="tag-cloud-section">
<button class="sidebar-panel-toggle" id="tag-panel-toggle" type="button" aria-expanded="true" aria-controls="tag-panel-content">
<span class="tag-cloud-title">Tags</span>
<i data-lucide="chevron-down" style="width:16px;height:16px"></i>
</button>
<div class="sidebar-panel-content" id="tag-panel-content">
<div class="tag-cloud" id="tag-cloud"></div>
</div>
<!-- Tags panel -->
<div class="sidebar-tab-panel" id="sidebar-panel-tags" role="tabpanel" aria-labelledby="sidebar-tab-tags">
<div class="tag-cloud" id="tag-cloud"></div>
</div>
</aside>
<!-- Sidebar resize handle -->