[FA-misc] Add delete button

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

@@ -32,7 +32,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { client } from '$lib/graphql/client';
-	import { NovelDocument, ImportNovelDocument } from '$lib/graphql/__generated__/graphql';
+	import { NovelDocument, ImportNovelDocument, DeleteNovelDocument } 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';
@@ -53,6 +53,7 @@
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 	import ChevronUp from '@lucide/svelte/icons/chevron-up';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
@@ -71,6 +72,11 @@
 	let refreshError: string | null = $state(null);
 	let refreshSuccess = $state(false);
 
+	// Delete state
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+	let deleteError: string | null = $state(null);
+
 	// Image viewer state
 	type GalleryImage = {
 		src: string;
@@ -119,7 +125,6 @@
 	const isNsfw = $derived(novel?.tags?.some((tag) => tag.key === SystemTags.Nsfw) ?? false);
 
 	const canRefresh = $derived(() => {
-		if (status === 'COMPLETED') return false;
 		if (!lastUpdated) return true;
 		const sixHoursAgo = Date.now() - 6 * 60 * 60 * 1000;
 		return lastUpdated.getTime() < sixHoursAgo;
@@ -251,6 +256,32 @@
 		}
 	}
 
+	async function deleteNovel() {
+		if (!novel) return;
+
+		deleting = true;
+		deleteError = null;
+
+		try {
+			const result = await client
+				.mutation(DeleteNovelDocument, { input: { novelId: novel.id } })
+				.toPromise();
+
+			if (result.error) {
+				deleteError = result.error.message;
+			} else if (result.data?.deleteNovel?.errors?.length) {
+				deleteError = result.data.deleteNovel.errors[0].message;
+			} else {
+				// Successfully deleted - redirect to novels list
+				window.location.href = '/novels';
+			}
+		} catch (e) {
+			deleteError = e instanceof Error ? e.message : 'Failed to delete';
+		} finally {
+			deleting = false;
+		}
+	}
+
 	onMount(() => {
 		fetchNovel();
 	});
@@ -359,11 +390,20 @@
 										</TooltipTrigger>
 										{#if !canRefresh()}
 											<TooltipContent>
-												{status === 'COMPLETED' ? 'Cannot refresh completed novels' : 'Updated less than 6 hours ago'}
+												Updated less than 6 hours ago
 											</TooltipContent>
 										{/if}
 									</Tooltip>
 								</TooltipProvider>
+								<Button
+									variant="destructive"
+									size="sm"
+									onclick={() => (showDeleteConfirm = true)}
+									class="gap-1.5 h-6 text-xs"
+								>
+									<Trash2 class="h-3 w-3" />
+									Delete
+								</Button>
 							{/if}
 							{#if refreshSuccess}
 								<Badge variant="outline" class="bg-green-500/10 text-green-600 border-green-500/30">
@@ -622,3 +662,54 @@
 		</div>
 	</div>
 {/if}
+
+<!-- Delete Confirmation Modal -->
+{#if showDeleteConfirm && novel}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+		onclick={() => !deleting && (showDeleteConfirm = false)}
+		onkeydown={(e) => e.key === 'Escape' && !deleting && (showDeleteConfirm = false)}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="delete-modal-title"
+		tabindex="-1"
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div onclick={(e: MouseEvent) => e.stopPropagation()}>
+			<Card class="w-full max-w-md mx-4 shadow-xl">
+				<CardHeader>
+					<h2 id="delete-modal-title" class="text-lg font-semibold">Delete Novel</h2>
+				</CardHeader>
+				<CardContent class="space-y-4">
+					<p class="text-muted-foreground">
+						Are you sure you want to delete <strong class="text-foreground">{novel.name}</strong>?
+					</p>
+					<p class="text-sm text-muted-foreground">
+						This will permanently delete the novel, all chapters, images, and translations. This action cannot be undone.
+					</p>
+					{#if deleteError}
+						<p class="text-sm text-destructive">{deleteError}</p>
+					{/if}
+					<div class="flex justify-end gap-2 pt-2">
+						<Button
+							variant="outline"
+							onclick={() => (showDeleteConfirm = false)}
+							disabled={deleting}
+						>
+							Cancel
+						</Button>
+						<Button
+							variant="destructive"
+							onclick={deleteNovel}
+							disabled={deleting}
+						>
+							{deleting ? 'Deleting...' : 'Delete'}
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	</div>
+{/if}