feat: add book detail page links from browse pages

Add clickable links to book detail page (/media/:uuid) from:

- Dashboard: BookCard components now link to detail page
  - Changed from data-action pattern to direct <a> tags
  - Removes unused viewBook() function and switch case
  - Follows progressive enhancement (works without JS)

- Collections: Book titles link to detail page
  - Books displayed in collection detail view

- Progress: Book titles link to detail page
  - Progress cards now have clickable title links

All links use direct navigation for better UX and progressive enhancement.
Book detail page can display comprehensive metadata, reading progress,
sync status, and external service links.

templates/collections.templ

@@ -163,64 +163,66 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 						<div id="empty-state" class="col-span-full text-center py-16" style="color: var(--text-secondary)">No books in this collection yet.</div>
 					}
 					for _, book := range books {
-						<div
-							class="card p-4 rounded-lg border hover:shadow-lg transition-shadow"
-							style="background-color: var(--bg-secondary); border-color: var(--border);"
-						>
-							<div class="flex gap-4">
-								<!-- Checkbox and Book Info -->
-								<div class="flex-shrink-0 pt-1">
-									<input
-										type="checkbox"
-										onchange="toggleBookForRemoval('{ book.MediaItemID }')"
-										class="w-5 h-5"
-									/>
-								</div>
-								<div class="flex-1 min-w-0">
-									<h3
-										class="font-semibold text-lg mb-1 line-clamp-2"
-										style="color: var(--text-primary)"
-									>
-										{ book.Title }
-									</h3>
-									if book.Author != "" {
-										<p
-											class="text-sm line-clamp-1"
-											style="color: var(--text-secondary)"
+						<a href={ "/media/" + book.MediaItemID }>
+							<div
+								class="card p-4 rounded-lg border hover:shadow-lg transition-shadow"
+								style="background-color: var(--bg-secondary); border-color: var(--border);"
+							>
+								<div class="flex gap-4">
+									<!-- Checkbox and Book Info -->
+									<div class="flex-shrink-0 pt-1">
+										<input
+											type="checkbox"
+											onchange="toggleBookForRemoval('{ book.MediaItemID }')"
+											class="w-5 h-5"
+										/>
+									</div>
+									<div class="flex-1 min-w-0">
+										<h3
+											class="font-semibold text-lg mb-1 line-clamp-2"
+											style="color: var(--text-primary)"
 										>
-											by { book.Author }
-										</p>
-									}
+											{ book.Title }
+										</h3>
+										if book.Author != "" {
+											<p
+												class="text-sm line-clamp-1"
+												style="color: var(--text-secondary)"
+											>
+												by { book.Author }
+											</p>
+										}
+									</div>
+									<!-- Book Cover -->
+									<div class="flex-shrink-0 w-16 sm:w-20">
+										if book.CoverImagePath != "" {
+											<img
+												src={ book.CoverImagePath }
+												alt="Cover"
+												class="w-full aspect-[3/4] object-cover rounded shadow-md"
+												onerror="this.src='/static/placeholder-book.svg'"
+											/>
+										} else {
+											<img
+												src="/static/placeholder-book.svg"
+												alt="Cover"
+												class="w-full aspect-[3/4] object-cover rounded shadow-md"
+											/>
+										}
+									</div>
 								</div>
-								<!-- Book Cover -->
-								<div class="flex-shrink-0 w-16 sm:w-20">
-									if book.CoverImagePath != "" {
-										<img
-											src={ book.CoverImagePath }
-											alt="Cover"
-											class="w-full aspect-[3/4] object-cover rounded shadow-md"
-											onerror="this.src='/static/placeholder-book.svg'"
-										/>
-									} else {
-										<img
-											src="/static/placeholder-book.svg"
-											alt="Cover"
-											class="w-full aspect-[3/4] object-cover rounded shadow-md"
-										/>
-									}
+								<!-- Remove Button -->
+								<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
+									<button
+										@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);"
+									>
+										🗑️ Remove from Collection
+									</button>
 								</div>
 							</div>
-							<!-- Remove Button -->
-							<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
-								<button
-									@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);"
-								>
-									🗑️ Remove from Collection
-								</button>
-							</div>
-						</div>
+						</a>
 					}
 				</div>
 			</div>