feat(bookshelf): replace broken datalist tag filter with custom autocomplete

The HTML <datalist> approach for tag autocomplete was unreliable across
browsers — showed empty suggestions or no dropdown at all.

Replace with a custom Alpine.js dropdown:
- New tag-dropdown.ts shared module: searchTagSuggestions() queries
  /api/media-items/search?tags=...&library_id=... and returns results
- Bookshelf: absolute-positioned dropdown below tags_filter input, shows
  tag name + book count per suggestion
- Keyboard navigation: ArrowUp/Down to highlight, Enter to select,
  Escape to close
- Click suggestion to populate the filter input

web/src/bookshelf.ts

@@ -2,6 +2,7 @@
 
 import { Alpine } from "./alpine";
 import { showToast } from "./toast";
+import { searchTagSuggestions, type TagSuggestion } from "./tag-dropdown";
 
 function clearFilters(): void {
   // Clear all form state (reuses helper)
@@ -82,6 +83,9 @@ Alpine.data("bookshelf", () => ({
   hasCoverState: null as boolean | null,
   dropdownAlign: "right" as "left" | "right",
   resizeTimeout: null as number | null,
+  tagSuggestions: [] as TagSuggestion[],
+  showTagDropdown: false,
+  tagHighlightIndex: -1,
 
   // Standalone function references (don't access component state)
   clearFilters,
@@ -382,9 +386,53 @@ Alpine.data("bookshelf", () => ({
     await this.fetchFieldValues("author", input.value, "author-datalist");
   },
 
-  // Fetch tag values for autocomplete
+  // Fetch tag values for autocomplete (custom dropdown)
   async fetchTagValues(input: HTMLInputElement): Promise<void> {
-    await this.fetchFieldValues("tags", input.value, "tags-datalist");
+    const libraryId = (document.getElementById("library-select") as HTMLSelectElement)?.value;
+    if (!libraryId || input.value.length < 2) {
+      this.tagSuggestions = [];
+      this.showTagDropdown = false;
+      return;
+    }
+    const results = await searchTagSuggestions(input.value, libraryId);
+    this.tagSuggestions = results;
+    this.showTagDropdown = results.length > 0;
+    this.tagHighlightIndex = -1;
+  },
+
+  selectTagSuggestion(tag: string) {
+    const input = document.querySelector('input[name="tags_filter"]') as HTMLInputElement;
+    if (input) input.value = tag;
+    this.showTagDropdown = false;
+    this.tagSuggestions = [];
+    this.tagHighlightIndex = -1;
+  },
+
+  hideTagDropdown() {
+    setTimeout(() => { this.showTagDropdown = false; this.tagHighlightIndex = -1; }, 200);
+  },
+
+  onTagFilterKeydown(event: KeyboardEvent) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (this.showTagDropdown && this.tagSuggestions.length > 0) {
+        this.tagHighlightIndex = (this.tagHighlightIndex + 1) % this.tagSuggestions.length;
+      }
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (this.showTagDropdown && this.tagSuggestions.length > 0) {
+        this.tagHighlightIndex = this.tagHighlightIndex <= 0
+          ? this.tagSuggestions.length - 1
+          : this.tagHighlightIndex - 1;
+      }
+    } else if (event.key === "Enter" && this.tagHighlightIndex >= 0 && this.showTagDropdown) {
+      event.preventDefault();
+      this.selectTagSuggestion(this.tagSuggestions[this.tagHighlightIndex].value);
+    } else if (event.key === "Escape") {
+      this.showTagDropdown = false;
+      this.tagSuggestions = [];
+      this.tagHighlightIndex = -1;
+    }
   },
 
   // // Fetch genre values for autocomplete

web/src/tag-dropdown.ts

@@ -0,0 +1,28 @@
+export interface TagSuggestion {
+  value: string;
+  count: number;
+}
+
+export async function searchTagSuggestions(
+  query: string,
+  libraryId: string,
+): Promise<TagSuggestion[]> {
+  if (!query || query.length < 2 || !libraryId) return [];
+
+  const token = localStorage.getItem("token");
+  if (!token) return [];
+
+  try {
+    const response = await fetch(
+      `/api/media-items/search?tags=${encodeURIComponent(query)}&library_id=${libraryId}&limit=20`,
+      { headers: { Authorization: `Bearer ${token}` } },
+    );
+
+    if (!response.ok) return [];
+
+    const data = await response.json();
+    return (data.results || []) as TagSuggestion[];
+  } catch {
+    return [];
+  }
+}