From 025acb884378a77453f4af97357a4f3de75561f0 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 9 Mar 2026 20:11:31 -0400
Subject: [PATCH] fix: Correct Alpine.js directive syntax in 4 template files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed templ parsing errors caused by escaped quotes in Alpine.js @click
directives. The previous migration to @click used backslash-escaped
quotes (\") which templ cannot parse correctly.

Files affected:
- templates/api_explorer.templ:28 - Fixed missing <button> tag and quotes
- templates/collection_modal.templ:69,135 - Fixed color picker buttons (edit & create forms)
- templates/collections.templ:216 - Fixed remove book button
- templates/conflicts.templ:110 - Fixed resolve conflict button

Root cause: Commit 08d4561 converted onclick→@click but used escaped quotes
Fix: Replace all @click=\"function()\" with @click="function()"

This aligns with the standard Alpine.js pattern and fixes the 4 templ
generation errors reported in ESBUILD_MIGRATION_PLAN.md line 1168.

Resolves: Template parsing errors preventing build
Related: ESBUILD_MIGRATION_PLAN.md Phase 3 (Template Migration)
---
 templates/api_explorer.templ     |  4 ++--
 templates/collection_modal.templ | 20 ++++++++++----------
 templates/collections.templ      |  2 +-
 templates/conflicts.templ        |  6 +++---
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/templates/api_explorer.templ b/templates/api_explorer.templ
index 8468bd2..bc65f2a 100644
--- a/templates/api_explorer.templ
+++ b/templates/api_explorer.templ
@@ -25,8 +25,8 @@ templ APIExplorer(explorer APIExplorerData) {
 				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.Response }</code></pre>
 			</div>
 			<div class="flex gap-2 mt-4">
-				@click="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
-				@click="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
+				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
+				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
 			</div>
 		</div>
 	} else {
diff --git a/templates/collection_modal.templ b/templates/collection_modal.templ
index 9cac027..809a311 100644
--- a/templates/collection_modal.templ
+++ b/templates/collection_modal.templ
@@ -66,11 +66,11 @@ templ CollectionModal(collection CollectionData) {
 					<div class="mb-6">
 						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
 						<div class="flex gap-2">
-							<button type="button" @click=\"selectColor('blue')\" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
-							<button type="button" @click=\"selectColor('red')\" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
-							<button type="button" @click=\"selectColor('yellow')\" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
-							<button type="button" @click=\"selectColor('green')\" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
-							<button type="button" @click=\"selectColor('purple')\" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
+							<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
+							<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
+							<button type="button" @click="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
+							<button type="button" @click="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
+							<button type="button" @click="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
 						</div>
 						<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
 					</div>
@@ -132,11 +132,11 @@ templ CollectionModal(collection CollectionData) {
 					<div class="mb-6">
 						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
 						<div class="flex gap-2">
-							<button type="button" @click=\"selectColor('blue')\" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
-							<button type="button" @click=\"selectColor('red')\" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
-							<button type="button" @click=\"selectColor('yellow')\" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
-							<button type="button" @click=\"selectColor('green')\" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
-							<button type="button" @click=\"selectColor('purple')\" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
+							<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
+							<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
+							<button type="button" @click="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
+							<button type="button" @click="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
+							<button type="button" @click="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
 						</div>
 						<input type="hidden" name="color" id="collection-color" value="blue"/>
 					</div>
diff --git a/templates/collections.templ b/templates/collections.templ
index acb8c45..559a5c1 100644
--- a/templates/collections.templ
+++ b/templates/collections.templ
@@ -213,7 +213,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 							<!-- Remove Button -->
 							<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
 								<button
-									@click=\"removeBook('{ book.MediaItemID }')\"
+									@click="removeBook('{ book.MediaItemID }')"
 									class="px-3 py-1 text-sm border rounded hover:opacity-80"
 									style="border-color: var(--border); color: var(--text-secondary);"
 								>
diff --git a/templates/conflicts.templ b/templates/conflicts.templ
index 4ac1d07..c9284b7 100644
--- a/templates/conflicts.templ
+++ b/templates/conflicts.templ
@@ -107,9 +107,9 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
 										<p class="text-sm" style="color: var(--text-secondary)">Type: { conflict.ConflictType }</p>
 									</div>
 								</div>
-								<button @click=\"showConflictModal('{ conflict.ID }')\" class="btn-primary px-4 py-2 rounded-lg">
-									Resolve
-								</button>
+							<button @click="showConflictModal('{ conflict.ID }')" class="btn-primary px-4 py-2 rounded-lg">
+								Resolve
+							</button>
 							</div>
 							<div class="text-sm" style="color: var(--text-secondary)">
 								Created: { conflict.CreatedAt.Format("2006-01-02 15:04:05") }