feat: implement 3-state has_cover filter and filter item component
Template changes for bookshelf page: Cover filter (tristate button): - Replace checkbox with 3-state button: Any (null) → Has Cover → No Cover - Add Alpine state management for hasCoverState (true/false/null) - Button shows dynamic icon and label based on state: - ○ Cover: Any - ✓ Has Cover - ✗ No Cover - Hidden input conditionally rendered by Alpine (x-if="hasCoverState !== null") - Only submits "true"/"false" or not at all, never empty string - Theme-aware styling using CSS variables and color-mix() Filter management improvements: - Add name="library" attribute to library select for proper form submission - Create filter_item.templ component for rendering individual filter items - Add Load Filter and Delete Filter buttons with Alpine event handlers - Update save filter form to use HTMX attributes: - hx-post, hx-target, hx-swap, hx-include for AJAX submission - @htmx:afterRequest event for modal cleanup This fixes issues where: - Library wasn't being submitted with search/filter requests - has_cover was sending empty string causing no results - Saved filters couldn't be loaded or deleted
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
package templates
|
||||
|
||||
// FilterItem renders a single saved filter item for the list
|
||||
templ FilterItem(id string, name string) {
|
||||
<div
|
||||
class="flex items-center justify-between p-2 rounded hover:opacity-80"
|
||||
style="background-color: var(--bg-primary);"
|
||||
data-filter-id={ id }
|
||||
>
|
||||
<button
|
||||
data-action="load-filter"
|
||||
@click="loadFilter($event)"
|
||||
class="flex-1 text-left px-2 py-1 rounded"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
{ name }
|
||||
</button>
|
||||
<button
|
||||
data-action="delete-filter"
|
||||
@click="deleteFilter($event)"
|
||||
class="p-1 hover:opacity-70 rounded"
|
||||
style="color: var(--text-secondary);"
|
||||
title="Delete filter"
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user