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

@@ -151,46 +151,46 @@ templ CollectionCarousel(section handlers.SectionData) {
 }
 
 templ BookCard(item handlers.BookInfo) {
-	<div
-		class="book-card flex-shrink-0 w-36 rounded-lg overflow-hidden snap-start cursor-pointer
-					transition-transform duration-200 hover:scale-105"
-		data-action="view-book"
-		data-book-id={ item.MediaItemID }
-		tabindex="0"
-		role="button"
-		aria-label={ "View " + item.Title }
-	>
+	<a href={ "/media/" + item.MediaItemID }>
 		<div
-			class="aspect-[2/3] overflow-hidden shadow-lg
-						bg-gradient-to-br from-gray-700 to-gray-900"
+			class="book-card flex-shrink-0 w-36 rounded-lg overflow-hidden snap-start cursor-pointer
+					transition-transform duration-200 hover:scale-105"
+			tabindex="0"
+			role="button"
+			aria-label={ "View " + item.Title }
 		>
-			if item.CoverImagePath != "" {
-				<img
-					src={ item.CoverImagePath }
-					alt={ item.Title }
-					class="w-full h-full object-cover"
-					loading="lazy"
-					onerror="this.src='/static/placeholder-book.svg'"
-				/>
-			} else {
-				<img
-					src="/static/placeholder-book.svg"
-					alt={ item.Title }
-					class="w-full h-full object-cover"
-				/>
-			}
+			<div
+				class="aspect-[2/3] overflow-hidden shadow-lg
+						bg-gradient-to-br from-gray-700 to-gray-900"
+			>
+				if item.CoverImagePath != "" {
+					<img
+						src={ item.CoverImagePath }
+						alt={ item.Title }
+						class="w-full h-full object-cover"
+						loading="lazy"
+						onerror="this.src='/static/placeholder-book.svg'"
+					/>
+				} else {
+					<img
+						src="/static/placeholder-book.svg"
+						alt={ item.Title }
+						class="w-full h-full object-cover"
+					/>
+				}
+			</div>
+			<div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]">
+				<h3 class="font-semibold text-base line-clamp-2" style="color: var(--text-primary)">
+					{ item.Title }
+				</h3>
+				if item.Author != "" {
+					<p class="text-sm line-clamp-1" style="color: var(--text-secondary)">
+						{ item.Author }
+					</p>
+				}
+			</div>
 		</div>
-		<div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]">
-			<h3 class="font-semibold text-base line-clamp-2" style="color: var(--text-primary)">
-				{ item.Title }
-			</h3>
-			if item.Author != "" {
-				<p class="text-sm line-clamp-1" style="color: var(--text-secondary)">
-					{ item.Author }
-				</p>
-			}
-		</div>
-	</div>
+	</a>
 }
 
 templ DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections []string, itemsPerSection int) {