[FA-misc] Refresh button, UI mostly gold

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

@@ -13,7 +13,6 @@
 	import ChapterNavigation from './ChapterNavigation.svelte';
 	import ChapterProgressBar from './ChapterProgressBar.svelte';
 	import { sanitizeChapterHtml } from '$lib/utils/sanitizeChapter';
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 
 	interface Props {
 		novelId?: string;
@@ -102,12 +101,6 @@
 <ChapterProgressBar progress={scrollProgress} />
 
 <div class="space-y-6 pt-2">
-	<!-- Back Navigation -->
-	<Button variant="ghost" href="/novels/{novelId}" class="-ml-2 gap-2">
-		<ArrowLeft class="h-4 w-4" />
-		Back to Novel
-	</Button>
-
 	<!-- Loading State -->
 	{#if fetching}
 		<Card>

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

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { client } from '$lib/graphql/client';
+	import { ImportNovelDocument } from '$lib/graphql/__generated__/graphql';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		onSuccess?: () => void;
+	}
+
+	let { open = $bindable(), onClose, onSuccess }: Props = $props();
+
+	let novelUrl = $state('');
+	let submitting = $state(false);
+	let error: string | null = $state(null);
+	let success = $state(false);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+
+		if (!novelUrl.trim()) {
+			error = 'Please enter a URL';
+			return;
+		}
+
+		submitting = true;
+		error = null;
+
+		try {
+			const result = await client
+				.mutation(ImportNovelDocument, { input: { novelUrl: novelUrl.trim() } })
+				.toPromise();
+
+			if (result.error) {
+				error = result.error.message;
+				return;
+			}
+
+			if (result.data?.importNovel?.novelUpdateRequestedEvent) {
+				success = true;
+				setTimeout(() => {
+					handleClose();
+					onSuccess?.();
+				}, 1500);
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Unknown error occurred';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleClose() {
+		novelUrl = '';
+		error = null;
+		success = false;
+		onClose();
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			handleClose();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			handleClose();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="import-modal-title"
+		tabindex="-1"
+	>
+		<Card class="w-full max-w-md mx-4 shadow-xl">
+			<CardHeader>
+				<CardTitle id="import-modal-title">Import Novel</CardTitle>
+				<p class="text-muted-foreground text-sm">
+					Enter the URL of the novel you want to import
+				</p>
+			</CardHeader>
+			<CardContent>
+				<form onsubmit={handleSubmit} class="space-y-4">
+					<div class="space-y-2">
+						<label for="novel-url" class="text-sm font-medium">Novel URL</label>
+						<Input
+							id="novel-url"
+							type="url"
+							placeholder="https://example.com/novel/..."
+							bind:value={novelUrl}
+							disabled={submitting || success}
+						/>
+					</div>
+
+					{#if error}
+						<p class="text-destructive text-sm">{error}</p>
+					{/if}
+
+					{#if success}
+						<p class="text-green-600 dark:text-green-400 text-sm">
+							Import request submitted successfully!
+						</p>
+					{/if}
+
+					<div class="flex justify-end gap-2 pt-2">
+						<Button
+							type="button"
+							variant="outline"
+							onclick={handleClose}
+							disabled={submitting}
+						>
+							Cancel
+						</Button>
+						<Button type="submit" disabled={submitting || success || !novelUrl.trim()}>
+							{#if submitting}
+								Importing...
+							{:else if success}
+								Done
+							{:else}
+								Import
+							{/if}
+						</Button>
+					</div>
+				</form>
+			</CardContent>
+		</Card>
+	</div>
+{/if}

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) -->

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

@@ -21,7 +21,9 @@
 
 	// Local state for search input (for debouncing)
 	let searchInput = $state(filters.search);
+	let authorInput = $state(filters.authorName);
 	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+	let authorTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	// Status options
 	const statusOptions: { value: NovelStatus; label: string }[] = [
@@ -50,6 +52,15 @@
 		}, 300);
 	}
 
+	// Debounced author handler
+	function handleAuthorInput(value: string) {
+		authorInput = value;
+		if (authorTimeout) clearTimeout(authorTimeout);
+		authorTimeout = setTimeout(() => {
+			onFilterChange({ ...filters, authorName: value });
+		}, 300);
+	}
+
 	// Status selection handler
 	function handleStatusChange(selected: NovelStatus[]) {
 		onFilterChange({ ...filters, statuses: selected });
@@ -63,6 +74,7 @@
 	// Clear all filters
 	function clearFilters() {
 		searchInput = '';
+		authorInput = '';
 		onFilterChange({ ...EMPTY_FILTERS });
 	}
 
@@ -72,6 +84,13 @@
 			searchInput = filters.search;
 		}
 	});
+
+	// Sync author input when filters prop changes externally
+	$effect(() => {
+		if (filters.authorName !== authorInput && !authorTimeout) {
+			authorInput = filters.authorName;
+		}
+	});
 </script>
 
 <div class="flex flex-wrap items-center gap-3">
@@ -87,6 +106,16 @@
 		/>
 	</div>
 
+	<!-- Author Input -->
+	<div class="min-w-[150px]">
+		<Input
+			type="text"
+			placeholder="Author..."
+			value={authorInput}
+			oninput={(e) => handleAuthorInput(e.currentTarget.value)}
+		/>
+	</div>
+
 	<!-- Status Filter -->
 	<Select.Root
 		type="multiple"
@@ -194,6 +223,21 @@
 			</Badge>
 		{/if}
 
+		{#if filters.authorName}
+			<Badge variant="secondary" class="gap-1">
+				Author: {filters.authorName}
+				<button
+					onclick={() => {
+						authorInput = '';
+						onFilterChange({ ...filters, authorName: '' });
+					}}
+					class="hover:bg-secondary-foreground/20 ml-1 rounded-full p-0.5"
+				>
+					<X class="h-3 w-3" />
+				</button>
+			</Badge>
+		{/if}
+
 		{#each filters.statuses as status (status)}
 			<Badge variant="secondary" class="gap-1">
 				{statusOptions.find((o) => o.value === status)?.label ?? status}

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

@@ -5,8 +5,10 @@
 	import { NovelsDocument, type NovelsQuery, type NovelTagDto } from '$lib/graphql/__generated__/graphql';
 	import NovelCard from './NovelCard.svelte';
 	import NovelFilters from './NovelFilters.svelte';
+	import ImportNovelModal from './ImportNovelModal.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { isAuthenticated } from '$lib/auth/authStore';
 	import {
 		type NovelFilters as NovelFiltersType,
 		parseFiltersFromURL,
@@ -26,6 +28,7 @@
 	let error: string | null = $state(null);
 	let initialLoad = $state(true);
 	let filters: NovelFiltersType = $state({ ...EMPTY_FILTERS });
+	let showImportModal = $state(false);
 
 	const hasNextPage = $derived(pageInfo?.hasNextPage ?? false);
 	const novels = $derived(edges.map((edge) => edge.node).filter(Boolean));
@@ -112,7 +115,14 @@
 <div class="space-y-4">
 	<Card class="shadow-md shadow-primary/10">
 		<CardHeader>
-			<CardTitle>Novels</CardTitle>
+			<div class="flex items-center justify-between">
+				<CardTitle>Novels</CardTitle>
+				{#if $isAuthenticated}
+					<Button variant="outline" onclick={() => (showImportModal = true)}>
+						Import Novel
+					</Button>
+				{/if}
+			</div>
 			<p class="text-muted-foreground text-sm">
 				{#if hasActiveFilters(filters)}
 					Showing filtered results
@@ -177,3 +187,9 @@
 		</div>
 	{/if}
 </div>
+
+<ImportNovelModal
+	bind:open={showImportModal}
+	onClose={() => (showImportModal = false)}
+	onSuccess={() => fetchNovels()}
+/>