From 4ea110cfebeb5a24691355b970eb7a3178b88126 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Wed, 25 Mar 2026 20:38:21 -0400
Subject: [PATCH] refactor: replace genre with tags in frontend TypeScript

- Add fetchTagValues() function in bookshelf.ts
- Update custom-section-builder field id from "genre" to "tags"
- Genre code preserved as comments for easy restoration if needed
- collection-rules.ts already supports both genre and tags

Updates the frontend TypeScript to use tags instead of genre for filtering.
Genre code is preserved in comments for future use if the genre field
is populated.

Relates to IMPLEMENTATION_TAGS_FILTER.md Phase 4
---
 web/src/bookshelf.ts              | 11 ++++++++---
 web/src/custom-section-builder.ts | 27 +++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/web/src/bookshelf.ts b/web/src/bookshelf.ts
index ccbb234..e6a4b30 100644
--- a/web/src/bookshelf.ts
+++ b/web/src/bookshelf.ts
@@ -294,11 +294,16 @@ Alpine.data("bookshelf", () => ({
     await this.fetchFieldValues("author", input.value, "author-datalist");
   },
 
-  // Fetch genre values for autocomplete
-  async fetchGenreValues(input: HTMLInputElement): Promise<void> {
-    await this.fetchFieldValues("genre", input.value, "genre-datalist");
+  // Fetch tag values for autocomplete
+  async fetchTagValues(input: HTMLInputElement): Promise<void> {
+    await this.fetchFieldValues("tags", input.value, "tags-datalist");
   },
 
+  // // Fetch genre values for autocomplete
+  // async fetchGenreValues(input: HTMLInputElement): Promise<void> {
+  //   await this.fetchFieldValues("genre", input.value, "genre-datalist");
+  // },
+
   // Fetch series values for autocomplete
   async fetchSeriesValues(input: HTMLInputElement): Promise<void> {
     await this.fetchFieldValues("series", input.value, "series-datalist");
diff --git a/web/src/custom-section-builder.ts b/web/src/custom-section-builder.ts
index 631f10b..27a28ad 100644
--- a/web/src/custom-section-builder.ts
+++ b/web/src/custom-section-builder.ts
@@ -45,9 +45,32 @@ const FILTER_FIELDS: FilterField[] = [
     ],
     valueType: "text",
   },
+  // {
+  //   id: "genre",
+  //   label: "Genre",
+  //   operators: [
+  //     { id: "equals", label: "Equals", requiresValue: true },
+  //     { id: "not_equals", label: "Not Equals", requiresValue: true },
+  //     { id: "in", label: "In", requiresValue: true },
+  //     { id: "not_in", label: "Not In", requiresValue: true },
+  //   ],
+  //   valueType: "select",
+  //   options: [
+  //     "Fiction",
+  //     "Non-Fiction",
+  //     "Sci-Fi",
+  //     "Fantasy",
+  //     "Mystery",
+  //     "Romance",
+  //     "Thriller",
+  //     "Biography",
+  //     "History",
+  //     "Self-Help",
+  //   ],
+  // },
   {
-    id: "genre",
-    label: "Genre",
+    id: "tags",
+    label: "Tags",
     operators: [
       { id: "equals", label: "Equals", requiresValue: true },
       { id: "not_equals", label: "Not Equals", requiresValue: true },