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/queue.templ

@@ -1,6 +1,9 @@
 package templates
 
-import "bookhoard/internal/handlers"
+import (
+	"bookhoard/internal/handlers"
+	"fmt"
+)
 
 templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.QueueStatsResponse) {
 	<!DOCTYPE html>
@@ -13,7 +16,7 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 			<link href="/static/style.css" rel="stylesheet"/>
 			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
 		</head>
-		<body x-data="queue" class="theme-{ user.Theme }">
+		<body x-data="queue" class={ "theme-" + user.Theme }>
 			@Header(user, "/queue")
 			<div class="mx-auto container px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-8">
@@ -127,10 +130,10 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 						<div class="card p-4 transition-colors" style="cursor: default;">
 							<div class="flex justify-between items-start mb-2 gap-2">
 								<div class="flex items-center gap-2 flex-wrap">
-									<span class="badge status-{ item.Status }">{ item.Status }</span>
+									<span class={ "badge status-" + item.Status }>{ item.Status }</span>
 									<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
 								</div>
-								<span class="badge priority-{ item.Priority }">P{ item.Priority }</span>
+								<span class={ fmt.Sprintf("badge priority-%d", item.Priority) }>P{ item.Priority }</span>
 							</div>
 							<div class="text-sm mb-2" style="color: var(--text-secondary)">
 								Device ID: { item.DeviceID }