feat(facets+ui): clickable facet values everywhere, genre prettify, active-filter chips

Frontend half of the faceted-navigation Phase 2. 'Everything filterable
should be clickable': every displayed facet value links to the bookshelf
pre-filtered by its raw stored value; display forms are prettified at
render, never in the DB.

- templates/facet_links.templ: FacetLink (inline links) + FacetBadge
  (badge links) to /bookshelf?<facet>_filter=<value>; the raw value
  rides the param while the shown text is prettified, so matching and
  display can never disagree. Series/tags keep their dedicated pages
  by design; the card media-type icon stays unlinked (a derived kind,
  not a column value — deep-linking it would send wrong values).
- book_detail.templ: publisher, language, edition, genre, imprint
  cells + narrators line + age-rating/story-arc badges are now links.
- prettifyGenre (templates/utils.go + unit tests): title-cases only
  entirely-lowercase values; small words stay down except first
  position; & preserved. TS port for chip labels documents the twin.
- bookshelf.templ + bookshelf.ts: active-filter chips bar — Alpine
  renders chips from client-local form state (sanctioned island);
  one bubbled htmx:afterRequest hook keeps chips + shareable URL in
  sync; removeFilterChip clears the facet and re-applies. URL deep
  links now accept all 18 facet params (hidden inputs where the
  drawer has no field).

Pins changelog: Batch B/C entry in docs/contract_pins.md. Rendering
ownership guard (make lint-rendering) green.

templates/book_detail.templ

@@ -83,7 +83,13 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 							}
 							if book.IsAudio() && len(book.Narrators) > 0 {
 								<h3 class="text-sm md:text-base mb-5" style="color: var(--text-secondary)">
-									Narrated by { strings.Join(book.Narrators, ", ") }
+									Narrated by
+									for i, narratorName := range book.Narrators {
+										if i > 0 {
+											<span>, </span>
+										}
+										@FacetLink("narrator", narratorName, narratorName)
+									}
 								</h3>
 							}
 							<!-- Action buttons -->
@@ -216,13 +222,13 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 									<span class="chip" style="background-color: var(--accent); color: var(--bg-primary);">{ strings.ToUpper(book.ReadingDirection.String) }</span>
 								}
 								if book.AgeRating.Valid && book.AgeRating.String != "" {
-									<span class="badge" style="border: 1px solid var(--border); color: var(--text-secondary);">{ book.AgeRating.String }</span>
+									@FacetBadge("age_rating", book.AgeRating.String, book.AgeRating.String)
 								}
 								if book.IsBlackAndWhite.Valid && book.IsBlackAndWhite.Bool {
 									<span class="badge" style="border: 1px solid var(--border); color: var(--text-secondary);">B&W</span>
 								}
 								if book.StoryArc.Valid && book.StoryArc.String != "" {
-									<span class="badge" style="border: 1px solid var(--border); color: var(--text-secondary);">{ book.StoryArc.String }</span>
+									@FacetBadge("story_arc", book.StoryArc.String, book.StoryArc.String)
 								}
 							</div>
 							if len(book.Tags) > 0 {
@@ -377,7 +383,7 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 						if book.Publisher.Valid && book.Publisher.String != "" {
 							<div>
 								<p class="text-xs uppercase tracking-wide" style="color: var(--text-secondary)">Publisher</p>
-								<p style="color: var(--text-primary)">{ book.Publisher.String }</p>
+								<p style="color: var(--text-primary)">@FacetLink("publisher", book.Publisher.String, book.Publisher.String)</p>
 							</div>
 						}
 						if book.DatePublished.Valid {
@@ -395,13 +401,20 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 						if book.Language.Valid && book.Language.String != "" {
 							<div>
 								<p class="text-xs uppercase tracking-wide" style="color: var(--text-secondary)">Language</p>
-								<p class="capitalize" style="color: var(--text-primary)">{ book.Language.String }</p>
+								<p style="color: var(--text-primary)">@FacetLink("language", book.Language.String, languageDisplay(book.Language.String))</p>
 							</div>
 						}
 						if book.IsAudio() && len(book.Narrators) > 0 {
 							<div>
 								<p class="text-xs uppercase tracking-wide" style="color: var(--text-secondary)">Narrator</p>
-								<p style="color: var(--text-primary)">{ strings.Join(book.Narrators, ", ") }</p>
+								<p style="color: var(--text-primary)">
+									for i, narratorName := range book.Narrators {
+										if i > 0 {
+											<span>, </span>
+										}
+										@FacetLink("narrator", narratorName, narratorName)
+									}
+								</p>
 							</div>
 						}
 						if book.IsAudio() && book.AudioDuration() > 0 {
@@ -419,7 +432,7 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 						if book.Edition.Valid && book.Edition.String != "" {
 							<div>
 								<p class="text-xs uppercase tracking-wide" style="color: var(--text-secondary)">Edition</p>
-								<p style="color: var(--text-primary)">{ book.Edition.String }</p>
+								<p style="color: var(--text-primary)">@FacetLink("edition", book.Edition.String, book.Edition.String)</p>
 							</div>
 						}
 						if book.PageCount.Valid && book.PageCount.Int32 > 0 {
@@ -431,7 +444,7 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 						if book.Genre.Valid && book.Genre.String != "" {
 							<div>
 								<p class="text-xs uppercase tracking-wide" style="color: var(--text-secondary)">Genre</p>
-								<p style="color: var(--text-primary)">{ book.Genre.String }</p>
+								<p style="color: var(--text-primary)">@FacetLink("genre", book.Genre.String, prettifyGenre(book.Genre.String))</p>
 							</div>
 						}
 						if book.SeriesCount.Valid && book.SeriesCount.Int32 > 0 {
@@ -449,7 +462,7 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string, tomb
 						if book.Imprint.Valid && book.Imprint.String != "" {
 							<div>
 								<p class="text-xs uppercase tracking-wide" style="color: var(--text-secondary)">Imprint</p>
-								<p style="color: var(--text-primary)">{ book.Imprint.String }</p>
+								<p style="color: var(--text-primary)">@FacetLink("imprint", book.Imprint.String, book.Imprint.String)</p>
 							</div>
 						}
 						if book.CopyrightYear.Valid && book.CopyrightYear.Int32 > 0 {

templates/bookshelf.templ

@@ -286,6 +286,28 @@ templ BookShelf(
 						</div>
 					</div>
 				</form>
+				<!-- Active-filter chips: a pure function of the client-side
+					form state (Alpine renders them, templ owns the look —
+					sanctioned TS island). Removing a chip clears that facet
+					and re-applies the form. -->
+				<div
+					id="active-filter-chips"
+					class="flex flex-wrap items-center gap-2 mb-4"
+					x-show="activeFilters.length > 0"
+					x-cloak
+				>
+					<template x-for="chip in activeFilters" :key="chip.param">
+						<button
+							type="button"
+							class="badge inline-flex items-center gap-1.5 hover:opacity-80 transition-opacity cursor-pointer"
+							style="background-color: var(--accent-muted); color: var(--accent); border: 1px solid transparent;"
+							@click="removeFilterChip(chip.param)"
+						>
+							<span x-text="chip.label"></span>
+							<span aria-hidden="true">×</span>
+						</button>
+					</template>
+				</div>
 				<div id="books-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
 					@BooksGrid(books, limit, offset, count, currentLibraryID)
 					if errorMessage != "" {

templates/bookshelf_templ.go

@@ -406,7 +406,7 @@ func BookShelf(
 				}
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</select></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Author</label> <input type=\"text\" name=\"author_filter\" placeholder=\"Filter by author\" class=\"input\" list=\"author-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchAuthorValues($el)\"> <datalist id=\"author-datalist\"></datalist></div><div class=\"relative\"><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Tags</label> <input type=\"text\" name=\"tags_filter\" placeholder=\"Filter by tags\" class=\"input\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchTagValues($el)\" @keydown=\"onTagFilterKeydown($event)\" @blur=\"hideTagDropdown()\"><div x-show=\"showTagDropdown\" x-transition x-cloak class=\"absolute z-50 mt-1 w-full rounded-lg shadow-lg max-h-48 overflow-y-auto\" style=\"background-color: var(--bg-primary); border: 1px solid var(--border);\"><template x-for=\"sug in tagSuggestions\" :key=\"sug.value\"><button type=\"button\" class=\"w-full text-left px-3 py-2 text-sm flex justify-between items-center\" :class=\"tagHighlightIndex === tagSuggestions.indexOf(sug) ? 'opacity-80' : ''\" :style=\"tagHighlightIndex === tagSuggestions.indexOf(sug) ? 'background-color: var(--bg-secondary); color: var(--text-primary);' : 'color: var(--text-primary);'\" @click=\"selectTagSuggestion(sug.value)\"><span x-text=\"sug.value\"></span> <span class=\"text-xs\" style=\"color: var(--text-secondary);\" x-text=\"sug.count + ' books'\"></span></button></template></div></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Series</label> <input type=\"text\" name=\"series_filter\" placeholder=\"Filter by series\" class=\"input\" list=\"series-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchSeriesValues($el)\"> <datalist id=\"series-datalist\"></datalist></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Narrator</label> <input type=\"text\" name=\"narrator_filter\" placeholder=\"Filter by narrator\" class=\"input\" list=\"narrator-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchNarratorValues($el)\"> <datalist id=\"narrator-datalist\"></datalist></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Language</label> <input type=\"text\" name=\"language_filter\" placeholder=\"Filter by language\" class=\"input\" list=\"language-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchLanguageValues($el)\"> <datalist id=\"language-datalist\"></datalist></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Year Range</label><div class=\"flex gap-2\"><input type=\"number\" name=\"year_min\" placeholder=\"From\" class=\"input\"> <input type=\"number\" name=\"year_max\" placeholder=\"To\" class=\"input\"></div></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Cover</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=\"{\n\t\t\t\t\t\t\t\t\t\t\t'state-null': hasCoverState === null,\n\t\t\t\t\t\t\t\t\t\t\t'state-true': hasCoverState === true,\n\t\t\t\t\t\t\t\t\t\t\t'state-false': hasCoverState === false\n\t\t\t\t\t\t\t\t\t\t}\" :value=\"hasCoverState === null ? '○ Any cover' : hasCoverState === true ? '✓ Has cover' : '✗ No cover'\" @click=\"cycleHasCover()\"><template x-if=\"hasCoverState !== null\"><input type=\"hidden\" name=\"has_cover\" :value=\"hasCoverState ? 'true' : 'false'\"></template></div></div><div class=\"sticky bottom-0 px-6 py-4 border-t\" style=\"background-color: var(--bg-secondary); border-color: color-mix(in srgb, var(--text-primary) 7%, transparent);\"><button type=\"submit\" @click=\"filtersOpen = false\" class=\"btn btn-primary w-full\">Apply Filters</button></div></div></div></form><div id=\"books-grid\" class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</select></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Author</label> <input type=\"text\" name=\"author_filter\" placeholder=\"Filter by author\" class=\"input\" list=\"author-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchAuthorValues($el)\"> <datalist id=\"author-datalist\"></datalist></div><div class=\"relative\"><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Tags</label> <input type=\"text\" name=\"tags_filter\" placeholder=\"Filter by tags\" class=\"input\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchTagValues($el)\" @keydown=\"onTagFilterKeydown($event)\" @blur=\"hideTagDropdown()\"><div x-show=\"showTagDropdown\" x-transition x-cloak class=\"absolute z-50 mt-1 w-full rounded-lg shadow-lg max-h-48 overflow-y-auto\" style=\"background-color: var(--bg-primary); border: 1px solid var(--border);\"><template x-for=\"sug in tagSuggestions\" :key=\"sug.value\"><button type=\"button\" class=\"w-full text-left px-3 py-2 text-sm flex justify-between items-center\" :class=\"tagHighlightIndex === tagSuggestions.indexOf(sug) ? 'opacity-80' : ''\" :style=\"tagHighlightIndex === tagSuggestions.indexOf(sug) ? 'background-color: var(--bg-secondary); color: var(--text-primary);' : 'color: var(--text-primary);'\" @click=\"selectTagSuggestion(sug.value)\"><span x-text=\"sug.value\"></span> <span class=\"text-xs\" style=\"color: var(--text-secondary);\" x-text=\"sug.count + ' books'\"></span></button></template></div></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Series</label> <input type=\"text\" name=\"series_filter\" placeholder=\"Filter by series\" class=\"input\" list=\"series-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchSeriesValues($el)\"> <datalist id=\"series-datalist\"></datalist></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Narrator</label> <input type=\"text\" name=\"narrator_filter\" placeholder=\"Filter by narrator\" class=\"input\" list=\"narrator-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchNarratorValues($el)\"> <datalist id=\"narrator-datalist\"></datalist></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Language</label> <input type=\"text\" name=\"language_filter\" placeholder=\"Filter by language\" class=\"input\" list=\"language-datalist\" @input.debounce.300ms=\"if($el.value.length >= 2) fetchLanguageValues($el)\"> <datalist id=\"language-datalist\"></datalist></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Year Range</label><div class=\"flex gap-2\"><input type=\"number\" name=\"year_min\" placeholder=\"From\" class=\"input\"> <input type=\"number\" name=\"year_max\" placeholder=\"To\" class=\"input\"></div></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Cover</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=\"{\n\t\t\t\t\t\t\t\t\t\t\t'state-null': hasCoverState === null,\n\t\t\t\t\t\t\t\t\t\t\t'state-true': hasCoverState === true,\n\t\t\t\t\t\t\t\t\t\t\t'state-false': hasCoverState === false\n\t\t\t\t\t\t\t\t\t\t}\" :value=\"hasCoverState === null ? '○ Any cover' : hasCoverState === true ? '✓ Has cover' : '✗ No cover'\" @click=\"cycleHasCover()\"><template x-if=\"hasCoverState !== null\"><input type=\"hidden\" name=\"has_cover\" :value=\"hasCoverState ? 'true' : 'false'\"></template></div></div><div class=\"sticky bottom-0 px-6 py-4 border-t\" style=\"background-color: var(--bg-secondary); border-color: color-mix(in srgb, var(--text-primary) 7%, transparent);\"><button type=\"submit\" @click=\"filtersOpen = false\" class=\"btn btn-primary w-full\">Apply Filters</button></div></div></div></form><!-- Active-filter chips: a pure function of the client-side\n\t\t\t\t\tform state (Alpine renders them, templ owns the look —\n\t\t\t\t\tsanctioned TS island). Removing a chip clears that facet\n\t\t\t\t\tand re-applies the form. --><div id=\"active-filter-chips\" class=\"flex flex-wrap items-center gap-2 mb-4\" x-show=\"activeFilters.length > 0\" x-cloak><template x-for=\"chip in activeFilters\" :key=\"chip.param\"><button type=\"button\" class=\"badge inline-flex items-center gap-1.5 hover:opacity-80 transition-opacity cursor-pointer\" style=\"background-color: var(--accent-muted); color: var(--accent); border: 1px solid transparent;\" @click=\"removeFilterChip(chip.param)\"Line truncated
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -422,7 +422,7 @@ func BookShelf(
 			var templ_7745c5c3_Var20 string
 			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(errorMessage)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 293, Col: 59}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 315, Col: 59}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 			if templ_7745c5c3_Err != nil {
@@ -445,7 +445,7 @@ func BookShelf(
 			var templ_7745c5c3_Var21 string
 			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("/api/media-items/search?library_id=%s&limit=%d&offset=%d", currentLibraryID, limit, offset-limit))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 302, Col: 126}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 324, Col: 126}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21)
 			if templ_7745c5c3_Err != nil {
@@ -476,7 +476,7 @@ func BookShelf(
 			var templ_7745c5c3_Var22 string
 			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(offset/limit + 1)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 311, Col: 32}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 333, Col: 32}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 			if templ_7745c5c3_Err != nil {
@@ -489,7 +489,7 @@ func BookShelf(
 			var templ_7745c5c3_Var23 string
 			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("/api/media-items/search?library_id=%s&limit=%d&offset=%d", currentLibraryID, limit, offset+limit))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 316, Col: 126}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `bookshelf.templ`, Line: 338, Col: 126}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var23)
 			if templ_7745c5c3_Err != nil {

templates/facet_links.templ

@@ -0,0 +1,37 @@
+package templates
+
+import (
+	"bookhoard/internal/services"
+	"net/url"
+)
+
+// Facet navigation helpers (faceted-navigation plan, Batch B).
+//
+// "Everything filterable should be clickable": every place a facet value
+// is DISPLAYED links to the bookshelf pre-filtered by that value. The
+// raw (stored) value rides the param — for genre that is the canonical
+// lowercase form, while the shown text is prettified — so matching and
+// display can never disagree. Series and tags keep their dedicated
+// pages (/series/detail, /tags/detail) by design and do NOT use these
+// helpers; author links predate them and stay as-is.
+
+// FacetLink renders a facet value as an inline text link (metadata
+// grid cells, the narrators line) to /bookshelf?<facet>_filter=<value>.
+templ FacetLink(facet string, value string, display string) {
+	<a href={ "/bookshelf?" + facet + "_filter=" + url.QueryEscape(value) } class="hover:underline" style="color: var(--text-primary);">{ display }</a>
+}
+
+// FacetBadge is the badge-styled FacetLink (the detail page's
+// age-rating and story-arc badges).
+templ FacetBadge(facet string, value string, display string) {
+	<a href={ "/bookshelf?" + facet + "_filter=" + url.QueryEscape(value) } class="badge hover:opacity-80 transition-opacity" style="border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none;">{ display }</a>
+}
+
+// languageDisplay renders a stored language value for display:
+// "en" → "English"; unknown/legacy values pass through verbatim.
+func languageDisplay(value string) string {
+	if name := services.LanguageDisplayName(value); name != "" {
+		return name
+	}
+	return value
+}

templates/facet_links_templ.go

@@ -0,0 +1,149 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.1020
+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"
+
+import (
+	"bookhoard/internal/services"
+	"net/url"
+)
+
+// Facet navigation helpers (faceted-navigation plan, Batch B).
+//
+// "Everything filterable should be clickable": every place a facet value
+// is DISPLAYED links to the bookshelf pre-filtered by that value. The
+// raw (stored) value rides the param — for genre that is the canonical
+// lowercase form, while the shown text is prettified — so matching and
+// display can never disagree. Series and tags keep their dedicated
+// pages (/series/detail, /tags/detail) by design and do NOT use these
+// helpers; author links predate them and stay as-is.
+
+// FacetLink renders a facet value as an inline text link (metadata
+// grid cells, the narrators line) to /bookshelf?<facet>_filter=<value>.
+func FacetLink(facet string, value string, display 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, "<a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.SafeURL
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinURLErrs("/bookshelf?" + facet + "_filter=" + url.QueryEscape(value))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `facet_links.templ`, Line: 21, Col: 70}
+		}
+		_, 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, "\" class=\"hover:underline\" 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(display)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `facet_links.templ`, Line: 21, Col: 142}
+		}
+		_, 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, "</a>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// FacetBadge is the badge-styled FacetLink (the detail page's
+// age-rating and story-arc badges).
+func FacetBadge(facet string, value string, display 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_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 templ.SafeURL
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs("/bookshelf?" + facet + "_filter=" + url.QueryEscape(value))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `facet_links.templ`, Line: 27, Col: 70}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" class=\"badge hover:opacity-80 transition-opacity\" style=\"border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(display)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `facet_links.templ`, Line: 27, Col: 226}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</a>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// languageDisplay renders a stored language value for display:
+// "en" → "English"; unknown/legacy values pass through verbatim.
+func languageDisplay(value string) string {
+	if name := services.LanguageDisplayName(value); name != "" {
+		return name
+	}
+	return value
+}
+
+var _ = templruntime.GeneratedTemplate

templates/utils.go

@@ -9,6 +9,7 @@ import (
 	"net/url"
 	"sort"
 	"strings"
+	"unicode"
 	"time"
 
 	"github.com/google/uuid"
@@ -255,6 +256,41 @@ func conflictID(c *handlers.ConflictDetailResponse) string {
 	return c.ID
 }
 
+// genreSmallWords stay lowercase in title-case rendering (except the
+// first word of the value).
+var genreSmallWords = map[string]bool{
+	"a": true, "an": true, "and": true, "of": true, "the": true,
+	"in": true, "on": true, "for": true, "to": true, "or": true,
+}
+
+// prettifyGenre renders the canonically-lowercase genre value in title
+// case at display time (Batch B transform — never in the DB). Only
+// values that are ENTIRELY lowercase get transformed; anything else is
+// returned verbatim, protecting user-entered mixed case. Small words
+// stay down except in the first position; "&" has no case and passes
+// through. "science fiction" → "Science Fiction", "sword & sorcery" →
+// "Sword & Sorcery".
+func prettifyGenre(value string) string {
+	trimmed := strings.TrimSpace(value)
+	if trimmed == "" {
+		return ""
+	}
+	if trimmed != strings.ToLower(trimmed) {
+		return trimmed // mixed case = user-authored; display as written
+	}
+	words := strings.Fields(trimmed)
+	out := make([]string, len(words))
+	for i, w := range words {
+		if i > 0 && genreSmallWords[w] {
+			out[i] = w
+			continue
+		}
+		runes := []rune(w)
+		out[i] = string(append([]rune{unicode.ToUpper(runes[0])}, runes[1:]...))
+	}
+	return strings.Join(out, " ")
+}
+
 // getAlternateSeries extracts the alternate series name from JSONB data
 func getAlternateSeries(data []byte) string {
 	if len(data) == 0 {

templates/utils_test.go

@@ -95,3 +95,27 @@ func TestLibraryTypeDisplayName(t *testing.T) {
 		}
 	}
 }
+
+func TestPrettifyGenre(t *testing.T) {
+	cases := []struct{ in, want string }{
+		{"science fiction", "Science Fiction"},
+		{"sword & sorcery", "Sword & Sorcery"},
+		{"action & adventure", "Action & Adventure"},
+		{"war & military", "War & Military"},
+		{"historical fiction", "Historical Fiction"},
+		{"children's", "Children's"},
+		{"middle grade", "Middle Grade"},
+		{"fiction", "Fiction"},
+		// Small words stay down except in first position.
+		{"towers of midnight", "Towers of Midnight"},
+		// Mixed case = user-authored; verbatim.
+		{"Science Fiction", "Science Fiction"},
+		{"HardSF", "HardSF"},
+		{"", ""},
+	}
+	for _, c := range cases {
+		if got := prettifyGenre(c.in); got != c.want {
+			t.Errorf("prettifyGenre(%q) = %q, want %q", c.in, got, c.want)
+		}
+	}
+}