feat: lists

This commit is contained in:
2025-11-15 19:11:07 +01:00
parent 3ab8cdcc37
commit 3378a13fe4
5 changed files with 1550 additions and 27 deletions

View File

@@ -29,6 +29,16 @@
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</button>
<button id="listsToggle" class="lists-toggle-btn" title="Manage lists">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="6" x2="19" y2="6"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="5" y1="18" x2="19" y2="18"></line>
<line x1="2" y1="6" x2="2.01" y2="6"></line>
<line x1="2" y1="12" x2="2.01" y2="12"></line>
<line x1="2" y1="18" x2="2.01" y2="18"></line>
</svg>
</button>
<button id="archiveToggle" class="archive-toggle-btn" title="Toggle archived links">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
@@ -112,10 +122,79 @@
autocomplete="off"
>
</div>
<div class="list-filter-wrapper" id="listFilterWrapper">
<div class="list-filter-header">
<span class="list-filter-label"><b>Lists</b></span>
<div class="list-filter-actions">
<button id="editListsBtn" class="edit-lists-btn" title="Manage lists">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
<span>Edit</span>
</button>
<button id="clearListFilters" class="clear-list-filters-btn" title="Clear filters">Clear</button>
</div>
</div>
<div class="list-filter-chips" id="listFilterChips">
<!-- List filter chips will be inserted here -->
</div>
</div>
</div>
</div>
</header>
<!-- Lists Management Modal -->
<div id="listsModal" class="lists-modal">
<div class="lists-modal-content">
<div class="lists-modal-header">
<h2>Manage Lists</h2>
<button id="closeListsModal" class="close-modal-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="lists-modal-body">
<div class="create-list-form">
<input
type="text"
id="newListName"
placeholder="Enter list name..."
autocomplete="off"
>
<button id="createListBtn" class="btn-create-list">Create List</button>
</div>
<div class="lists-list" id="listsList">
<!-- Lists will be inserted here -->
</div>
</div>
</div>
</div>
<!-- List Selection Overlay -->
<div id="listSelectionOverlay" class="list-selection-overlay">
<div class="list-selection-content">
<div class="list-selection-header">
<h3>Add to Lists</h3>
<button id="closeListSelection" class="close-overlay-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="list-selection-body" id="listSelectionBody">
<!-- List checkboxes will be inserted here -->
</div>
<div class="list-selection-footer">
<button id="saveListSelection" class="btn-save-lists">Save</button>
<button id="cancelListSelection" class="btn-cancel-lists">Cancel</button>
</div>
</div>
</div>
<div class="container">
<div id="linksContainer" class="links-container">
<div class="empty-state">