[FA-27] Bookmark implementation

fictionarchive-web-astro/src/lib/components/NovelDetailPage.svelte

@@ -1,8 +1,10 @@
 <script lang="ts" module>
-	import type { NovelQuery, NovelStatus, Language } from '$lib/graphql/__generated__/graphql';
+	import type { NovelQuery, NovelStatus, Language, GetBookmarksQuery } from '$lib/graphql/__generated__/graphql';
 	import { TagType } from '$lib/graphql/__generated__/graphql';
 	import { SystemTags } from '$lib/constants/systemTags';
 
+	export type BookmarkData = GetBookmarksQuery['bookmarks'][number];
+
 	export type NovelNode = NonNullable<NonNullable<NovelQuery['novels']>['nodes']>[number];
 
 	const statusColors: Record<NovelStatus, string> = {
@@ -32,7 +34,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { client } from '$lib/graphql/client';
-	import { NovelDocument, ImportNovelDocument, DeleteNovelDocument } from '$lib/graphql/__generated__/graphql';
+	import { NovelDocument, ImportNovelDocument, DeleteNovelDocument, GetBookmarksDocument } from '$lib/graphql/__generated__/graphql';
 	import { isAuthenticated } from '$lib/auth/authStore';
 	import { Card, CardContent, CardHeader } from '$lib/components/ui/card';
 	import { Badge } from '$lib/components/ui/badge';
@@ -98,6 +100,11 @@
 	let activeTab = $state('chapters');
 	let galleryLoaded = $state(false);
 
+	// Bookmarks state
+	let bookmarks: BookmarkData[] = $state([]);
+	let bookmarksLoaded = $state(false);
+	let bookmarksFetching = $state(false);
+
 	const DESCRIPTION_PREVIEW_LENGTH = 300;
 
 	// Derived values
@@ -128,6 +135,15 @@
 
 	const isSingleVolume = $derived(sortedVolumes.length === 1);
 
+	// Chapter lookup for bookmarks (maps chapterId to chapter details)
+	const chapterLookup = $derived(
+		new Map(
+			sortedVolumes.flatMap((v) =>
+				v.chapters.map((c) => [c.id, { ...c, volumeOrder: v.order }])
+			)
+		)
+	);
+
 	const chapterCount = $derived(
 		sortedVolumes.reduce((sum, v) => sum + v.chapters.length, 0)
 	);
@@ -184,6 +200,34 @@
 		}
 	});
 
+	// Load bookmarks when tab is first activated
+	$effect(() => {
+		if (activeTab === 'bookmarks' && !bookmarksLoaded && novelId) {
+			fetchBookmarks();
+		}
+	});
+
+	async function fetchBookmarks() {
+		if (!novelId || bookmarksFetching) return;
+
+		bookmarksFetching = true;
+
+		try {
+			const result = await client
+				.query(GetBookmarksDocument, { novelId: parseInt(novelId, 10) })
+				.toPromise();
+
+			if (result.data?.bookmarks) {
+				bookmarks = result.data.bookmarks;
+			}
+		} catch {
+			// Silently fail - bookmarks are non-critical
+		} finally {
+			bookmarksFetching = false;
+			bookmarksLoaded = true;
+		}
+	}
+
 	// Image viewer functions
 	function openImageViewer(index: number) {
 		viewerIndex = index;
@@ -528,10 +572,9 @@
 						</TabsTrigger>
 						<TabsTrigger
 							value="bookmarks"
-							disabled
-							class="rounded-md data-[state=active]:bg-background data-[state=active]:shadow-sm px-3 py-1.5 text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+							class="rounded-md data-[state=active]:bg-background data-[state=active]:shadow-sm px-3 py-1.5 text-sm font-medium transition-all"
 						>
-							Bookmarks
+							Bookmarks{bookmarksLoaded ? ` (${bookmarks.length})` : ''}
 						</TabsTrigger>
 					</TabsList>
 				</CardHeader>
@@ -646,9 +689,50 @@
 					</TabsContent>
 
 					<TabsContent value="bookmarks" class="mt-0">
-						<p class="text-muted-foreground text-sm py-8 text-center">
-							Bookmarks coming soon.
-						</p>
+						{#if bookmarksFetching}
+							<div class="flex items-center justify-center py-8">
+								<div
+									class="border-primary h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
+									aria-label="Loading bookmarks"
+								></div>
+							</div>
+						{:else if bookmarks.length === 0}
+							<p class="text-muted-foreground text-sm py-8 text-center">
+								No bookmarks yet. Add bookmarks while reading chapters.
+							</p>
+						{:else}
+							<div class="max-h-96 overflow-y-auto -mx-2">
+								{#each bookmarks as bookmark (bookmark.id)}
+									{@const chapter = chapterLookup.get(bookmark.chapterId)}
+									{#if chapter}
+										{@const bookmarkDate = new Date(bookmark.createdTime)}
+										<a
+											href="/novels/{novelId}/volumes/{chapter.volumeOrder}/chapters/{chapter.order}"
+											class="flex items-center justify-between px-3 py-2.5 hover:bg-muted/50 rounded-md transition-colors group"
+										>
+											<div class="flex-1 min-w-0">
+												<div class="flex items-center gap-3">
+													<span class="text-muted-foreground text-sm font-medium shrink-0 w-14">
+														Ch. {chapter.order}
+													</span>
+													<span class="text-sm truncate group-hover:text-primary transition-colors">
+														{chapter.name}
+													</span>
+												</div>
+												{#if bookmark.description}
+													<p class="text-xs text-muted-foreground/70 mt-1 ml-[4.25rem] truncate">
+														{bookmark.description}
+													</p>
+												{/if}
+											</div>
+											<span class="text-xs text-muted-foreground/70 shrink-0 ml-2">
+												{formatRelativeTime(bookmarkDate)}
+											</span>
+										</a>
+									{/if}
+								{/each}
+							</div>
+						{/if}
 					</TabsContent>
 				</CardContent>
 			</Tabs>