fix(templates): use expression attributes and fix indentation

Convert string-interpolation attributes (value="{ x }") to templ
expression attributes (value={ x }) for IDs, paths, and titles, and
fix indentation in header.templ and progress.templ.

templates/admin_library.templ

@@ -78,7 +78,7 @@ templ AdminLibrary(user User, libraries []LibraryData, users []User) {
 								<select id="user-select" onchange="loadUserVisibility()" class="px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
 									<option value="">Select a user...</option>
 									for _, user := range users {
-										<option value="{ user.ID }">{ user.Username } ({ user.Email })</option>
+										<option value={ user.ID }>{ user.Username } ({ user.Email })</option>
 									}
 								</select>
 							</div>

templates/book_detail.templ

@@ -43,7 +43,7 @@ templ BookDetail(user User, book handlers.MediaDetail, errorMessage string) {
 						} else {
 							<img
 								src="/static/placeholder-book.svg"
-								alt="{ book.Title }"
+								alt={ book.Title }
 								class="w-64 h-96 object-cover rounded-lg shadow-xl"
 							/>
 						}

templates/collection_rules.templ

@@ -38,7 +38,7 @@ templ CollectionRules(user User, collection CollectionData) {
 				<div class="mb-8">
 					<h2 class="text-2xl font-bold mb-4" style="color: var(--text-primary)">Create New Rule</h2>
 					<form id="rule-form" @submit="handleCreateRule($event)">
-						<input type="hidden" id="collection-id" value="{ collection.ID }"/>
+						<input type="hidden" id="collection-id" value={ collection.ID }/>
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 							<div>
 								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Field</label>

templates/conflicts.templ

@@ -92,13 +92,13 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
 						</div>
 					}
 					for _, conflict := range conflicts {
-						<div class="conflict-item card p-6 rounded-lg border" data-conflict-id="{ conflict.ID }" style="background-color: var(--bg-secondary); border-color: var(--border); border-left-width: 4px; border-left-style: solid; border-left-color: rgb(245, 158, 11);">
+						<div class="conflict-item card p-6 rounded-lg border" data-conflict-id={ conflict.ID } style="background-color: var(--bg-secondary); border-color: var(--border); border-left-width: 4px; border-left-style: solid; border-left-color: rgb(245, 158, 11);">
 							<div class="flex justify-between items-start mb-4">
 								<div class="flex items-start space-x-4">
 									<input
 										type="checkbox"
 										class="conflict-checkbox w-5 h-5 rounded mt-1"
-										data-conflict-id="{ conflict.ID }"
+										data-conflict-id={ conflict.ID }
 										onchange="updateBulkActions()"
 									/>
 									<div>

templates/header.templ

@@ -1,7 +1,7 @@
 package templates
 
 templ Header(user User, currentPath string) {
-		<nav x-data="header" x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators(); restoreLibrarySelection(); initializeScanListener()" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
+	<nav x-data="header" x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators(); restoreLibrarySelection(); initializeScanListener()" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
 		<div x-data="{}" x-init="console.log('Alpine is working!', $el)"></div>
 		<div class="w-full px-4 sm:px-6 lg:px-8">
 			<div class="flex justify-between items-center h-16">
@@ -274,7 +274,7 @@ templ Header(user User, currentPath string) {
 								style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;"
 							>
 								<form hx-post="/api/auth/login" hx-target="#login-result" hx-swap="innerHTML" class="space-y-3">
-									<input type="hidden" name="redirect" value="{ currentPath }"/>
+									<input type="hidden" name="redirect" value={ currentPath }/>
 									<div>
 										<label class="block text-sm mb-1" style="color: var(--text-secondary)">Email or Username</label>
 										<input type="text" name="login" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required/>
@@ -504,7 +504,7 @@ templ Header(user User, currentPath string) {
 					} else {
 						<div class="space-y-3">
 							<form hx-post="/api/auth/login" hx-target="#login-result-mobile" hx-swap="innerHTML" class="space-y-3">
-								<input type="hidden" name="redirect" value="{ currentPath }"/>
+								<input type="hidden" name="redirect" value={ currentPath }/>
 								<div>
 									<label class="block text-sm mb-1" style="color: var(--text-secondary)">Email or Username</label>
 									<input type="text" name="login" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required/>

templates/progress.templ

@@ -33,7 +33,7 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
 							<div class="flex gap-6">
 								<div class="flex-shrink-0">
 									<img
-										src="{ item.CoverImagePath }"
+										src={ item.CoverImagePath }
 										alt="Cover"
 										class="w-24 h-32 object-cover rounded"
 										onerror="this.src='/static/placeholder-book.svg'"
@@ -63,18 +63,18 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
 									</div>
 									<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
 										<div>
-										<p style="color: var(--text-secondary)">Current Position</p>
+											<p style="color: var(--text-secondary)">Current Position</p>
-										<p style="color: var(--text-primary)">
+											<p style="color: var(--text-primary)">
-											if item.FormatGroup == "reflowable" {
+												if item.FormatGroup == "reflowable" {
-												if item.EstimatedPages > 0 {
+													if item.EstimatedPages > 0 {
-													{ fmt.Sprintf("Page %d of %d (est.)", item.CurrentPage, item.EstimatedPages) }
+														{ fmt.Sprintf("Page %d of %d (est.)", item.CurrentPage, item.EstimatedPages) }
+													} else {
+														{ fmt.Sprintf("%.1f%%", item.ProgressPercentage) }
+													}
 												} else {
-													{ fmt.Sprintf("%.1f%%", item.ProgressPercentage) }
+													{ fmt.Sprintf("%d / %d", item.CurrentPage, item.TotalPages) }
 												}
-											} else {
+											</p>
-												{ fmt.Sprintf("%d / %d", item.CurrentPage, item.TotalPages) }
-											}
-										</p>
 										</div>
 										<div>
 											<p style="color: var(--text-secondary)">Last Updated</p>

templates/unlinked_books.templ

@@ -49,7 +49,7 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 						<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
 							<div class="flex gap-6">
 								<div class="flex items-start pt-2">
-									<input type="checkbox" class="unlinked-checkbox w-5 h-5" data-progress-id="{ book.ProgressID }" data-title="{ book.TitleFromDevice }" onchange="updateSelectedCount()"/>
+									<input type="checkbox" class="unlinked-checkbox w-5 h-5" data-progress-id={ book.ProgressID } data-title={ book.TitleFromDevice } onchange="updateSelectedCount()"/>
 								</div>
 								<div class="flex-1">
 									<div class="flex items-center gap-3 mb-4">