fix(templ): stop emitting literal { expr } text into attributes and body classes

templ does not interpolate { expr } inside quoted attribute values — the
braces ship as literal text (AGENTS.md gotcha #1). Swept every templ
source for the pattern and fixed all of it:

Body theme classes: 22 page bodies rendered class="theme-{ user.Theme }"
literally, so every page first-painted the :root default (Tokyo Night)
and flashed when main.js applied the real theme. All now render
class={ "theme-" + user.Theme } server-side.

Attribute interpolations (26 across 8 files):
- api_explorer: initAPIExplorerDoc path/body/response and the Copy
  Request/Response buttons (invalid JS, silently dead)
- collections: book-selection :checked/@change/@click ids and four
  hx-get search URLs (collection_id={ collection.ID })
- conflicts: Resolve button id
- devices: Kobo sync-url/auth-token element ids (copy lookups only
  worked because the id and the lookup were the same literal)
- unlinked_books: search-matches/manual-link clicks and container ids
- queue: status/priority badge classes never matched their CSS
- dashboard: Restore-section tooltip text
- collection_rules/collections: collection icon color

Free text goes through the new templates.JSONArg (json.Marshal) —
templ.JSONString in this templ version returns (string, error) and
cannot compose in attribute expressions; uuids via device.ID.String().
Includes regen-only drift from running templ generate (error-path
normalization) on files with no source change.

templates/unlinked_books.templ

@@ -11,7 +11,7 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 			<link href="/static/style.css" rel="stylesheet"/>
 			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
 		</head>
-		<body class="theme-{ user.Theme }" x-data="unlinkedBooks" x-init="setupEventDelegation()">
+		<body class={ "theme-" + user.Theme } x-data="unlinkedBooks" x-init="setupEventDelegation()">
 			@Header(user, "/unlinked")
 			<main class="mx-auto container px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-8">
@@ -109,24 +109,24 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 									</div>
 									<div class="mb-4 flex gap-2 flex-wrap">
 										<button
-											@click="searchMatches('{ book.ProgressID }', '{ book.SHA256 }', '{ book.TitleFromDevice }')"
+											@click={ "searchMatches(" + JSONArg(book.ProgressID) + ", " + JSONArg(book.SHA256) + ", " + JSONArg(book.TitleFromDevice) + ")" }
 											class="btn btn-secondary text-sm"
 										>
 											@Icon("search", "h-4 w-4")
 											Find Potential Matches
 										</button>
 										<button
-											@click="showManualLinkModal('{ book.ProgressID }', '{ book.TitleFromDevice }')"
+											@click={ "showManualLinkModal(" + JSONArg(book.ProgressID) + ", " + JSONArg(book.TitleFromDevice) + ")" }
 											class="btn btn-primary text-sm"
 										>
 											@Icon("edit", "h-4 w-4")
 											Manually Link
 										</button>
 									</div>
-									<div id="matches-{ book.ProgressID }" class="hidden">
+									<div id={ "matches-" + book.ProgressID } class="hidden">
 										<div class="border-t pt-4 mt-2" style="border-color: var(--border);">
 											<h4 class="font-semibold mb-3" style="color: var(--text-primary)">Potential Matches</h4>
-											<div id="matches-list-{ book.ProgressID }" class="space-y-3">
+											<div id={ "matches-list-" + book.ProgressID } class="space-y-3">
 												<p style="color: var(--text-secondary)">Click "Find Potential Matches" to search</p>
 											</div>
 										</div>