feat: add find-in-page functionality with keyboard shortcuts, regex support, and match navigation

This commit is contained in:
2026-03-24 21:29:05 -04:00
parent 94deb08e16
commit 7ccad9c589
4 changed files with 1101 additions and 0 deletions
+32
View File
@@ -894,6 +894,38 @@
</div>
</div>
<!-- Find in Page Bar -->
<div class="find-in-page-bar" id="find-in-page-bar" hidden>
<div class="find-in-page-content">
<i data-lucide="search" class="find-icon"></i>
<input type="text" id="find-input" placeholder="Rechercher..." autocomplete="off" aria-label="Rechercher dans la page">
<span class="find-counter" id="find-counter" aria-live="polite">0 occurrence</span>
<div class="find-nav-buttons">
<button class="find-btn" id="find-prev" title="Précédent (Shift+Enter)" aria-label="Résultat précédent" disabled>
<i data-lucide="chevron-up" style="width:14px;height:14px"></i>
</button>
<button class="find-btn" id="find-next" title="Suivant (Enter)" aria-label="Résultat suivant" disabled>
<i data-lucide="chevron-down" style="width:14px;height:14px"></i>
</button>
</div>
<div class="find-options">
<button class="find-btn find-option-btn" id="find-case-sensitive" title="Respecter la casse" aria-label="Respecter la casse" aria-pressed="false">
<span class="find-option-text">Aa</span>
</button>
<button class="find-btn find-option-btn" id="find-whole-word" title="Mot entier" aria-label="Mot entier" aria-pressed="false">
<span class="find-option-text">abc</span>
</button>
<button class="find-btn find-option-btn" id="find-regex" title="Expression régulière" aria-label="Expression régulière" aria-pressed="false">
<span class="find-option-text">.*</span>
</button>
</div>
<button class="find-btn find-close" id="find-close" title="Fermer (Escape)" aria-label="Fermer la recherche">
<i data-lucide="x" style="width:16px;height:16px"></i>
</button>
</div>
<div class="find-error" id="find-error" hidden></div>
</div>
<script src="/static/app.js"></script>
</body>
</html>