[FA-misc] Refresh button, UI mostly gold

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()}
+/>