[FA-misc] Refresh button, UI mostly gold

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

@@ -30,7 +30,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { client } from '$lib/graphql/client';
-	import { NovelDocument } from '$lib/graphql/__generated__/graphql';
+	import { NovelDocument, ImportNovelDocument } 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';
 	import { Button } from '$lib/components/ui/button';
@@ -49,6 +50,7 @@
 	import BookOpen from '@lucide/svelte/icons/book-open';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 	import ChevronUp from '@lucide/svelte/icons/chevron-up';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 
 	interface Props {
 		novelId?: string;
@@ -60,6 +62,9 @@
 	let fetching = $state(true);
 	let error: string | null = $state(null);
 	let descriptionExpanded = $state(false);
+	let refreshing = $state(false);
+	let refreshError: string | null = $state(null);
+	let refreshSuccess = $state(false);
 
 	const DESCRIPTION_PREVIEW_LENGTH = 300;
 
@@ -90,6 +95,13 @@
 
 	const chapterCount = $derived(novel?.chapters?.length ?? 0);
 
+	const canRefresh = $derived(() => {
+		if (status === 'COMPLETED') return false;
+		if (!lastUpdated) return true;
+		const sixHoursAgo = Date.now() - 6 * 60 * 60 * 1000;
+		return lastUpdated.getTime() < sixHoursAgo;
+	});
+
 	async function fetchNovel() {
 		if (!novelId) {
 			error = 'No novel ID provided';
@@ -123,6 +135,31 @@
 		}
 	}
 
+	async function refreshNovel() {
+		if (!novel?.url) return;
+
+		refreshing = true;
+		refreshError = null;
+		refreshSuccess = false;
+
+		try {
+			const result = await client
+				.mutation(ImportNovelDocument, { input: { novelUrl: novel.url } })
+				.toPromise();
+
+			if (result.error) {
+				refreshError = result.error.message;
+			} else {
+				refreshSuccess = true;
+				setTimeout(() => (refreshSuccess = false), 2000);
+			}
+		} catch (e) {
+			refreshError = e instanceof Error ? e.message : 'Failed to refresh';
+		} finally {
+			refreshing = false;
+		}
+	}
+
 	onMount(() => {
 		fetchNovel();
 	});
@@ -197,27 +234,53 @@
 							{#if novel.author}
 								<p class="text-muted-foreground mt-1">
 									by
-									{#if novel.author.externalUrl}
-										<a
-											href={novel.author.externalUrl}
-											target="_blank"
-											rel="noopener noreferrer"
-											class="text-primary hover:underline inline-flex items-center gap-1"
-										>
-											{novel.author.name}
-											<ExternalLink class="h-3 w-3" />
-										</a>
-									{:else}
-										<span>{novel.author.name}</span>
-									{/if}
+									<a
+										href="/novels?author={encodeURIComponent(novel.author.name)}"
+										class="text-primary hover:underline"
+									>
+										{novel.author.name}
+									</a>
 								</p>
 							{/if}
 						</div>
 
 						<!-- Badges -->
-						<div class="flex flex-wrap gap-2">
+						<div class="flex flex-wrap gap-2 items-center">
 							<Badge class={statusColor}>{statusLabel}</Badge>
 							<Badge variant="outline">{languageLabel}</Badge>
+							{#if $isAuthenticated}
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Button
+												variant="outline"
+												size="sm"
+												onclick={refreshNovel}
+												disabled={refreshing || !canRefresh()}
+												class="gap-1.5 h-6 text-xs"
+											>
+												<RefreshCw class="h-3 w-3 {refreshing ? 'animate-spin' : ''}" />
+												{refreshing ? 'Refreshing...' : 'Refresh'}
+											</Button>
+										</TooltipTrigger>
+										{#if !canRefresh()}
+											<TooltipContent>
+												{status === 'COMPLETED' ? 'Cannot refresh completed novels' : 'Updated less than 6 hours ago'}
+											</TooltipContent>
+										{/if}
+									</Tooltip>
+								</TooltipProvider>
+							{/if}
+							{#if refreshSuccess}
+								<Badge variant="outline" class="bg-green-500/10 text-green-600 border-green-500/30">
+									Refresh queued
+								</Badge>
+							{/if}
+							{#if refreshError}
+								<Badge variant="outline" class="bg-destructive/10 text-destructive border-destructive/30">
+									{refreshError}
+								</Badge>
+							{/if}
 						</div>
 
 						<!-- Stats (inline) -->