feat: refactorer l'interface avec système de vues grid/list/compact, toolbar moderne avec toggle de vue et pagination intégrée, styles hover unifiés pour header-nav-link avec état active, suppression des pills Notes obsolètes, ajout content-container responsive, link cards avec sélection visuelle et checkbox repositionné, badges visibility/readlater optimisés, et restructuration majeure du CSS avec 2500+ lignes de nouveaux styles pour grilles adaptatives, modales, formulaires, et compos

This commit is contained in:
2026-02-20 10:31:41 -05:00
parent 83d9a7425e
commit f230ff0acd
9 changed files with 15500 additions and 189 deletions
+26 -16
View File
@@ -264,20 +264,30 @@ Bookmarklet detection logic
<div class="search-modal">
<form method="GET" action="{$base_path}/" id="search-form">
<div class="search-modal-header">
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
placeholder="Type to search..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
<div class="search-modal-actions">
<button type="button" class="search-pill-btn search-pill-notes" id="search-notes-btn" aria-pressed="false">
<i class="mdi mdi-note-text-outline"></i>
<span>notes</span>
<div class="search-input-row">
<i class="mdi mdi-magnify search-input-icon" aria-hidden="true"></i>
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
placeholder="Rechercher des notes, tags..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
<button type="submit" class="search-submit-btn" id="search-submit-btn" aria-label="Lancer la recherche">
<i class="mdi mdi-arrow-right"></i>
</button>
<button type="button" class="search-pill-btn search-pill-tags" id="search-tags-btn">
<i class="mdi mdi-tag-outline"></i>
<span>tags</span>
</button>
<button type="button" class="search-pill-btn search-pill-search active" id="search-all-btn" aria-pressed="true">
</div>
<div class="search-mode-bar" role="tablist" aria-label="Modes de recherche">
<button type="button" class="search-mode-btn active" id="search-all-btn" aria-pressed="true" role="tab">
<i class="mdi mdi-magnify"></i>
<span>search</span>
<span>Globale</span>
<kbd class="search-mode-kbd">S</kbd>
</button>
<button type="button" class="search-mode-btn" id="search-tags-btn" aria-pressed="false" role="tab">
<i class="mdi mdi-pound"></i>
<span>Tags</span>
<kbd class="search-mode-kbd">T</kbd>
</button>
<button type="button" class="search-mode-btn" id="search-notes-btn" aria-pressed="false" role="tab">
<i class="mdi mdi-note-text-outline"></i>
<span>Notes</span>
<kbd class="search-mode-kbd">N</kbd>
</button>
</div>
</div>
@@ -285,7 +295,7 @@ Bookmarklet detection logic
<div class="search-separator"></div>
<div class="search-results" id="search-results">
<div class="search-results-empty">
<span class="search-results-hint">Start typing to see suggestions...</span>
<span class="search-results-hint">Tapez pour voir des suggestions...</span>
</div>
</div>
<div class="search-footer">
@@ -293,9 +303,9 @@ Bookmarklet detection logic
<kbd class="search-kbd">S</kbd> global
<kbd class="search-kbd">T</kbd> tags
<kbd class="search-kbd">N</kbd> notes
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> to navigate
<kbd class="search-kbd">Enter</kbd> to select
<kbd class="search-kbd">ESC</kbd> to close
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> naviguer
<kbd class="search-kbd">Enter</kbd> sélectionner
<kbd class="search-kbd">Esc</kbd> fermer
</span>
</div>
</div>