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

templates/bookshelf.templ

@@ -46,6 +46,7 @@ templ BookShelf(
 								</label>
 								<select
 									id="library-select"
+									name="library"
 									class="w-full px-3 py-2 border rounded-lg"
 									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
 								>
@@ -63,13 +64,15 @@ templ BookShelf(
 								</select>
 							</div>
 							<!-- Search Input -->
-							<div class="flex-1 min-w-[200px]">
+							<div class="flex-1 min-w-[150px]">
 								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
 									Search
 								</label>
 								<input
 									name="q"
 									type="text"
+									class="w-full px-3 py-2 border rounded-lg"
+									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
 									placeholder="Search all fields..."
 								/>
 							</div>
@@ -173,19 +176,31 @@ templ BookShelf(
 									/>
 								</div>
 							</div>
-							<!-- Has Cover Filter -->
+							<!-- Has Cover Filter - TriState Button -->
-							<div class="flex items-end">
+							<div class="flex-1 min-w-[150px]">
-								<label class="flex items-center gap-2 cursor-pointer">
+								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
-									<input type="hidden" name="has_cover" value="false"/>
+									Cover Filter
-									<input
-										type="checkbox"
-										name="has_cover"
-										value="true"
-										checked
-										class="w-4 h-4 rounded"
-									/>
-									<span class="text-sm" style="color: var(--text-primary)">Has Cover</span>
 								</label>
+								<input
+									type="button"
+									id="has-cover-tristate"
+									class="tristate-btn w-full transition-all duration-300 cursor-pointer flex items-center justify-center gap-2 px-4 py-2 rounded-lg border text-sm"
+									:class="{
+                    'state-null': hasCoverState === null,
+                    'state-true': hasCoverState === true,
+                    'state-false': hasCoverState === false
+                  }"
+									:value="hasCoverState === null ? '○ Cover: Any' : hasCoverState === true ? '✓ Has Cover' : '✗ No Cover'"
+									@click="cycleHasCover()"
+								/>
+								<!-- Hidden input for HTMX form submission - conditionally rendered -->
+								<template x-if="hasCoverState !== null">
+									<input
+										type="hidden"
+										name="has_cover"
+										:value="hasCoverState ? 'true' : 'false'"
+									/>
+								</template>
 							</div>
 							<!-- Sort By Dropdown (PRESERVED) -->
 							<div class="flex-1 min-w-[150px]">
@@ -257,12 +272,11 @@ templ BookShelf(
 										<!-- Filter List -->
 										<div class="space-y-2" id="saved-filters-list">
 											for _, filter := range savedFilters {
-												filterUUID := string(filter.ID.Bytes[0:16])
 												<div class="flex items-center justify-between p-2 rounded hover:opacity-80" style="background-color: var(--bg-primary);" data-filter-id={ uuidToString(filter.ID) }>
-													<button data-action="load-filter" class="flex-1 text-left px-2 py-1 rounded" style="color: var(--text-primary);">
+													<button data-action="load-filter" @click="loadFilter($event)" class="flex-1 text-left px-2 py-1 rounded" style="color: var(--text-primary);">
 														{ filter.Name }
 													</button>
-													<button data-action="delete-filter" class="p-1 hover:opacity-70 rounded" style="color: var(--text-secondary);" title="Delete filter">🗑️</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>
 											}
 										</div>
@@ -349,19 +363,27 @@ templ BookShelf(
 							style="color: var(--text-primary)"
 						>✕</button>
 					</div>
-					<form @submit="saveFilter($event)">
+					<form
+						hx-post="/api/saved-filters"
+						hx-target="#saved-filters-list"
+						hx-swap="beforeend"
+						hx-include="#filter-form"
+						@htmx:afterRequest="if(event.detail.xhr.status < 400) { afterFilterSave() }"
+					>
 						<div class="mb-4">
 							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
 								Filter Name
 							</label>
 							<input
 								type="text"
-								x-model="filterName"
+								name="filter_name"
 								placeholder="My Custom Filter"
 								class="w-full px-3 py-2 border rounded-lg"
 								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
 								required
 							/>
+							<div id="filter-save-error" style="display: none; color: #ef4444; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem;"></div>
+							<input type="hidden" name="resource_type" value="media-items"/>
 						</div>
 						<div class="flex justify-end gap-2">
 							<button

templates/filter_item.templ

@@ -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>
+}

templates/filter_item_templ.go

@@ -0,0 +1,67 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.1001
+package templates
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+// FilterItem renders a single saved filter item for the list
+func FilterItem(id string, name string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex items-center justify-between p-2 rounded hover:opacity-80\" style=\"background-color: var(--bg-primary);\" data-filter-id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(id)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 8, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><button data-action=\"load-filter\" @click=\"loadFilter($event)\" class=\"flex-1 text-left px-2 py-1 rounded\" style=\"color: var(--text-primary);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 16, Col: 9}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate