[FA-misc] Add delete button

Reviewed-on: #49

FictionArchive.Service.NovelService/GraphQL/Mutation.cs

@@ -7,6 +7,7 @@ using FictionArchive.Service.NovelService.Services;
 using FictionArchive.Service.NovelService.Services.SourceAdapters;
 using FictionArchive.Service.Shared.Services.EventBus;
 using HotChocolate.Authorization;
+using HotChocolate.Types;
 using Microsoft.EntityFrameworkCore;
 
 namespace FictionArchive.Service.NovelService.GraphQL;
@@ -26,4 +27,12 @@ public class Mutation
     {
         return await service.QueueChapterPull(novelId, chapterNumber);
     }
+
+    [Error<KeyNotFoundException>]
+    [Authorize]
+    public async Task<bool> DeleteNovel(uint novelId, NovelUpdateService service)
+    {
+        await service.DeleteNovel(novelId);
+        return true;
+    }
 }

FictionArchive.Service.NovelService/Program.cs

@@ -44,7 +44,6 @@ public class Program
         #region GraphQL
 
         builder.Services.AddDefaultGraphQl<Query, Mutation>()
-            .ModifyCostOptions(opt => opt.MaxFieldCost = 5000)
             .AddAuthorization();
         
         #endregion
@@ -63,12 +62,14 @@ public class Program
         builder.Services.AddHttpClient<NovelpiaAuthMessageHandler>(client =>
         {
             client.BaseAddress = new Uri("https://novelpia.com");
-        });
+        })
+        .AddStandardResilienceHandler();
         builder.Services.AddHttpClient<ISourceAdapter, NovelpiaAdapter>(client =>
             {
                 client.BaseAddress = new Uri("https://novelpia.com");
             })
-            .AddHttpMessageHandler<NovelpiaAuthMessageHandler>();
+            .AddHttpMessageHandler<NovelpiaAuthMessageHandler>()
+            .AddStandardResilienceHandler();
 
         builder.Services.Configure<NovelUpdateServiceConfiguration>(builder.Configuration.GetSection("UpdateService"));
         builder.Services.AddTransient<NovelUpdateService>();

FictionArchive.Service.NovelService/Services/NovelUpdateService.cs

@@ -289,7 +289,8 @@ public class NovelUpdateService
             .Include(n => n.Description)
             .ThenInclude(lk => lk.Texts)
             .Include(n => n.Tags)
-            .Include(n => n.Chapters)
+            .Include(n => n.Chapters).ThenInclude(chapter => chapter.Body)
+            .ThenInclude(localizationKey => localizationKey.Texts)
             .Include(n => n.CoverImage)
             .FirstOrDefaultAsync(n =>
                 n.ExternalId == metadata.ExternalId &&
@@ -378,12 +379,23 @@ public class NovelUpdateService
         var chapter = novel.Chapters.Where(chapter => chapter.Order == chapterNumber).FirstOrDefault();
         var adapter = _sourceAdapters.FirstOrDefault(adapter => adapter.SourceDescriptor.Key == novel.Source.Key);
         var rawChapter = await adapter.GetRawChapter(chapter.Url);
-        var localizationText = new LocalizationText()
+        
+        // If we already have the raw for this, overwrite it for now. Revisions will come later.
+        var localizationText = chapter.Body.Texts.FirstOrDefault(text => text.Language == novel.RawLanguage);
+        if (localizationText == null)
+        {
+            localizationText = new LocalizationText()
             {
                 Text = rawChapter.Text,
                 Language = novel.RawLanguage
             };
             chapter.Body.Texts.Add(localizationText);
+        }
+        else
+        {
+            localizationText.Text = rawChapter.Text;
+        }
+        
         chapter.Images = rawChapter.ImageData.Select(img => new Image()
         {
             OriginalPath = img.Url
@@ -476,4 +488,49 @@ public class NovelUpdateService
         await _eventBus.Publish(chapterPullEvent);
         return chapterPullEvent;
     }
+
+    public async Task DeleteNovel(uint novelId)
+    {
+        var novel = await _dbContext.Novels
+            .Include(n => n.CoverImage)
+            .Include(n => n.Name).ThenInclude(k => k.Texts)
+            .Include(n => n.Description).ThenInclude(k => k.Texts)
+            .Include(n => n.Chapters).ThenInclude(c => c.Images)
+            .Include(n => n.Chapters).ThenInclude(c => c.Name).ThenInclude(k => k.Texts)
+            .Include(n => n.Chapters).ThenInclude(c => c.Body).ThenInclude(k => k.Texts)
+            .FirstOrDefaultAsync(n => n.Id == novelId);
+
+        if (novel == null)
+            throw new KeyNotFoundException($"Novel with ID '{novelId}' not found");
+
+        // Collect all LocalizationKey IDs for cleanup
+        var locKeyIds = new List<Guid> { novel.Name.Id, novel.Description.Id };
+        locKeyIds.AddRange(novel.Chapters.Select(c => c.Name.Id));
+        locKeyIds.AddRange(novel.Chapters.Select(c => c.Body.Id));
+
+        // 1. Remove LocalizationRequests referencing these keys
+        var locRequests = await _dbContext.LocalizationRequests
+            .Where(r => locKeyIds.Contains(r.KeyRequestedForTranslation.Id))
+            .ToListAsync();
+        _dbContext.LocalizationRequests.RemoveRange(locRequests);
+
+        // 2. Remove LocalizationTexts (NO ACTION FK - won't cascade)
+        _dbContext.RemoveRange(novel.Name.Texts);
+        _dbContext.RemoveRange(novel.Description.Texts);
+        foreach (var chapter in novel.Chapters)
+        {
+            _dbContext.RemoveRange(chapter.Name.Texts);
+            _dbContext.RemoveRange(chapter.Body.Texts);
+        }
+
+        // 3. Remove Images (NO ACTION FK - won't cascade)
+        if (novel.CoverImage != null)
+            _dbContext.Images.Remove(novel.CoverImage);
+        foreach (var chapter in novel.Chapters)
+            _dbContext.Images.RemoveRange(chapter.Images);
+
+        // 4. Remove novel - cascades: chapters, localization keys, tag mappings
+        _dbContext.Novels.Remove(novel);
+        await _dbContext.SaveChangesAsync();
+    }
 }

FictionArchive.Service.Shared/Extensions/GraphQLExtensions.cs

@@ -22,6 +22,7 @@ public static class GraphQLExtensions
                         .AddErrorFilter<LoggingErrorFilter>()
                         .AddType<UnsignedIntType>()
                         .AddType<InstantType>()
+                        .ModifyCostOptions(opt => opt.MaxFieldCost = 10000)
                         .AddMutationConventions(applyToAllMutations: true)
                         .AddFiltering(opt => opt.AddDefaults().BindRuntimeType<uint, UnsignedIntOperationFilterInputType>())
                         .AddSorting()

FictionArchive.Service.Shared/FictionArchive.Service.Shared.csproj

@@ -25,10 +25,12 @@
             <PrivateAssets>all</PrivateAssets>
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
+        <PackageReference Include="Microsoft.Extensions.Http.Resilience" Version="10.1.0" />
         <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
         <PackageReference Include="NodaTime.Serialization.JsonNet" Version="3.2.0" />
         <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
         <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL.NodaTime" Version="9.0.4" />
+        <PackageReference Include="Polly" Version="8.6.5" />
         <PackageReference Include="RabbitMQ.Client" Version="7.2.0" />
         <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.11" />
     </ItemGroup>

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

@@ -74,6 +74,8 @@
 
 			if (result.data?.chapter) {
 				chapter = result.data.chapter;
+				// Update the page title with chapter info
+				document.title = `${chapter.novelName} - ${chapter.order}`;
 			} else {
 				error = 'Chapter not found';
 			}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Input } from '$lib/components/ui/input';
 	import * as NavigationMenu from '$lib/components/ui/navigation-menu';
 	import AuthenticationDisplay from './AuthenticationDisplay.svelte';
+	import SearchBar from './SearchBar.svelte';
 
 	let pathname = $state(typeof window !== 'undefined' ? window.location.pathname : '/');
 
@@ -27,7 +27,7 @@
 			</NavigationMenu.List>
 		</NavigationMenu.Root>
 		<div class="flex-1"></div>
-		<Input type="search" placeholder="Search..." class="max-w-xs" />
+		<SearchBar />
 		<AuthenticationDisplay />
 	</nav>
 </header>

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

@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	import type { NovelsQuery, NovelStatus } from '$lib/graphql/__generated__/graphql';
+	import { SystemTags } from '$lib/constants/systemTags';
 
 	export type NovelNode = NonNullable<NonNullable<NovelsQuery['novels']>['edges']>[number]['node'];
 
@@ -55,6 +56,8 @@
 	const status = $derived(novel.rawStatus ?? 'UNKNOWN');
 	const statusColor = $derived(statusColors[status]);
 	const statusLabel = $derived(statusLabels[status]);
+
+	const isNsfw = $derived(novel.tags?.some((tag) => tag.key === SystemTags.Nsfw) ?? false);
 </script>
 
 <a
@@ -76,6 +79,9 @@
 			>
 				{statusLabel}
 			</Badge>
+			{#if isNsfw}
+				<Badge class="absolute top-9 right-2 bg-red-600 text-white shadow-sm">NSFW</Badge>
+			{/if}
 		</div>
 		<CardHeader class="space-y-2 pt-4">
 			<CardTitle class="line-clamp-2 text-lg leading-tight" title={title}>

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

@@ -1,5 +1,7 @@
 <script lang="ts" module>
 	import type { NovelQuery, NovelStatus, Language } from '$lib/graphql/__generated__/graphql';
+	import { TagType } from '$lib/graphql/__generated__/graphql';
+	import { SystemTags } from '$lib/constants/systemTags';
 
 	export type NovelNode = NonNullable<NonNullable<NovelQuery['novels']>['nodes']>[number];
 
@@ -30,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';
@@ -51,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';
@@ -69,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;
@@ -80,6 +88,8 @@
 	};
 	let viewerOpen = $state(false);
 	let viewerIndex = $state(0);
+	let activeTab = $state('chapters');
+	let galleryLoaded = $state(false);
 
 	const DESCRIPTION_PREVIEW_LENGTH = 300;
 
@@ -110,8 +120,11 @@
 
 	const chapterCount = $derived(novel?.chapters?.length ?? 0);
 
+	// Filter out system tags for display, check for NSFW
+	const displayTags = $derived(novel?.tags?.filter((tag) => tag.tagType !== TagType.System) ?? []);
+	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;
@@ -146,6 +159,14 @@
 	});
 
 	const currentImage = $derived(galleryImages[viewerIndex]);
+	const imageCount = $derived(galleryImages.length);
+
+	// Load gallery images when tab is first activated
+	$effect(() => {
+		if (activeTab === 'gallery' && !galleryLoaded) {
+			galleryLoaded = true;
+		}
+	});
 
 	// Image viewer functions
 	function openImageViewer(index: number) {
@@ -199,6 +220,7 @@
 			const nodes = result.data?.novels?.nodes;
 			if (nodes && nodes.length > 0) {
 				novel = nodes[0];
+				document.title = novel.name;
 			} else {
 				error = 'Novel not found';
 			}
@@ -234,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();
 	});
@@ -321,6 +369,9 @@
 						<!-- Badges -->
 						<div class="flex flex-wrap gap-2 items-center">
 							<Badge class={statusColor}>{statusLabel}</Badge>
+							{#if isNsfw}
+								<Badge class="bg-red-600 text-white">NSFW</Badge>
+							{/if}
 							<Badge variant="outline">{languageLabel}</Badge>
 							{#if $isAuthenticated}
 								<TooltipProvider>
@@ -339,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">
@@ -390,9 +450,9 @@
 						</div>
 
 						<!-- Tags -->
-						{#if novel.tags && novel.tags.length > 0}
+						{#if displayTags.length > 0}
 							<div class="flex flex-wrap gap-1.5 pt-1">
-								{#each novel.tags as tag (tag.key)}
+								{#each displayTags as tag (tag.key)}
 									<Badge
 										variant="secondary"
 										href="/novels?tags={tag.key}"
@@ -435,20 +495,20 @@
 
 		<!-- Tabbed Content -->
 		<Card>
-			<Tabs value="chapters" class="w-full">
+			<Tabs bind:value={activeTab} class="w-full">
 				<CardHeader class="pb-0">
 					<TabsList class="grid w-full grid-cols-3 bg-muted/50 p-1 rounded-lg">
 						<TabsTrigger
 							value="chapters"
 							class="rounded-md data-[state=active]:bg-background data-[state=active]:shadow-sm px-3 py-1.5 text-sm font-medium transition-all"
 						>
-							Chapters
+							Chapters ({chapterCount})
 						</TabsTrigger>
 						<TabsTrigger
 							value="gallery"
 							class="rounded-md data-[state=active]:bg-background data-[state=active]:shadow-sm px-3 py-1.5 text-sm font-medium transition-all"
 						>
-							Gallery
+							Gallery ({imageCount})
 						</TabsTrigger>
 						<TabsTrigger
 							value="bookmarks"
@@ -498,7 +558,7 @@
 							<p class="text-muted-foreground text-sm py-4 text-center">
 								No images available.
 							</p>
-						{:else}
+						{:else if galleryLoaded}
 							<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
 								{#each galleryImages as image, index (image.src)}
 									<button
@@ -506,13 +566,20 @@
 										onclick={() => openImageViewer(index)}
 										class="relative aspect-square overflow-hidden rounded-md bg-muted/50 hover:ring-2 ring-primary transition-all"
 									>
-										<img src={image.src} alt={image.alt} class="h-full w-full object-cover" />
+										<img src={image.src} alt={image.alt} class="h-full w-full object-cover" loading="lazy" />
 										{#if image.isCover}
 											<Badge class="absolute top-1 left-1 text-xs">Cover</Badge>
 										{/if}
 									</button>
 								{/each}
 							</div>
+						{:else}
+							<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 gallery"
+								></div>
+							</div>
 						{/if}
 					</TabsContent>
 
@@ -595,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}

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

@@ -8,7 +8,7 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
-	import { type NovelFilters, hasActiveFilters, EMPTY_FILTERS } from '$lib/utils/filterParams';
+	import { type NovelFilters, type SortField, type SortDirection, hasActiveFilters, EMPTY_FILTERS } from '$lib/utils/filterParams';
 	import { NovelStatus, type NovelTagDto } from '$lib/graphql/__generated__/graphql';
 
 	interface Props {
@@ -34,6 +34,19 @@
 		{ value: NovelStatus.Unknown, label: 'Unknown' }
 	];
 
+	// Sort options
+	const sortOptions: { value: `${SortField}-${SortDirection}`; label: string }[] = [
+		{ value: 'lastUpdatedTime-DESC', label: 'Recently Updated' },
+		{ value: 'lastUpdatedTime-ASC', label: 'Oldest Updated' },
+		{ value: 'createdTime-DESC', label: 'Recently Added' },
+		{ value: 'createdTime-ASC', label: 'Oldest Added' },
+		{ value: 'name-ASC', label: 'Name (A-Z)' },
+		{ value: 'name-DESC', label: 'Name (Z-A)' }
+	];
+
+	// Current sort value as combined string for the select
+	const currentSortValue = $derived(`${filters.sort.field}-${filters.sort.direction}` as const);
+
 	// Derived state for display
 	const selectedStatusLabels = $derived(
 		filters.statuses.map((s) => statusOptions.find((o) => o.value === s)?.label ?? s).join(', ')
@@ -71,6 +84,12 @@
 		onFilterChange({ ...filters, tags: selected });
 	}
 
+	// Sort selection handler
+	function handleSortChange(value: string) {
+		const [field, direction] = value.split('-') as [SortField, SortDirection];
+		onFilterChange({ ...filters, sort: { field, direction } });
+	}
+
 	// Clear all filters
 	function clearFilters() {
 		searchInput = '';
@@ -196,6 +215,41 @@
 		</Select.Root>
 	{/if}
 
+	<!-- Sort Dropdown -->
+	<Select.Root
+		type="single"
+		value={currentSortValue}
+		onValueChange={(v) => v && handleSortChange(v)}
+	>
+		<Select.Trigger
+			class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 min-w-[160px] items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			<span class="truncate text-left">
+				{sortOptions.find((o) => o.value === currentSortValue)?.label ?? 'Sort by'}
+			</span>
+			<ChevronDown class="h-4 w-4 opacity-50" />
+		</Select.Trigger>
+		<Select.Content
+			class="bg-popover text-popover-foreground z-50 max-h-60 min-w-[160px] overflow-auto rounded-md border p-1 shadow-md"
+		>
+			{#each sortOptions as option (option.value)}
+				<Select.Item
+					value={option.value}
+					class="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+				>
+					{#snippet children({ selected })}
+						<div class="flex h-4 w-4 items-center justify-center">
+							{#if selected}
+								<Check class="h-3 w-3" />
+							{/if}
+						</div>
+						<span>{option.label}</span>
+					{/snippet}
+				</Select.Item>
+			{/each}
+		</Select.Content>
+	</Select.Root>
+
 	<!-- Clear Filters Button -->
 	{#if hasActiveFilters(filters)}
 		<Button variant="outline" size="sm" onclick={clearFilters} class="gap-1">

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

@@ -14,6 +14,7 @@
 		parseFiltersFromURL,
 		syncFiltersToURL,
 		filtersToGraphQLWhere,
+		sortToGraphQLOrder,
 		hasActiveFilters,
 		EMPTY_FILTERS
 	} from '$lib/utils/filterParams';
@@ -52,8 +53,9 @@
 
 		try {
 			const where = filtersToGraphQLWhere(filters);
+			const order = sortToGraphQLOrder(filters.sort);
 			const result = await client
-				.query(NovelsDocument, { first: PAGE_SIZE, after, where })
+				.query(NovelsDocument, { first: PAGE_SIZE, after, where, order })
 				.toPromise();
 
 			if (result.error) {
@@ -116,20 +118,13 @@
 	<Card class="shadow-md shadow-primary/10">
 		<CardHeader>
 			<div class="flex items-center justify-between">
-				<CardTitle>Novels</CardTitle>
+				<CardTitle>Controls</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
-				{:else}
-					Browse all novels
-				{/if}
-			</p>
 		</CardHeader>
 		<CardContent>
 			<NovelFilters {filters} onFilterChange={handleFilterChange} availableTags={availableTags()} />

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

@@ -18,7 +18,12 @@
 		error = null;
 
 		try {
-			const result = await client.query(NovelsDocument, { first: 5 }).toPromise();
+			const result = await client
+			.query(NovelsDocument, {
+				first: 5,
+				order: [{ lastUpdatedTime: 'DESC' }]
+			})
+			.toPromise();
 
 			if (result.error) {
 				error = result.error.message;

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

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import Search from '@lucide/svelte/icons/search';
+	import { Input } from '$lib/components/ui/input';
+	import { NovelsDocument, type NovelDto } from '$lib/graphql/__generated__/graphql';
+	import { client } from '$lib/graphql/client';
+
+	let searchTerm = $state('');
+	let results = $state<NovelDto[]>([]);
+	let isOpen = $state(false);
+	let fetching = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+	let containerRef: HTMLDivElement;
+
+	async function fetchResults(term: string) {
+		if (!term.trim()) {
+			results = [];
+			isOpen = false;
+			return;
+		}
+
+		fetching = true;
+		try {
+			const result = await client
+				.query(NovelsDocument, {
+					first: 4,
+					where: { name: { contains: term } }
+				})
+				.toPromise();
+
+			if (result.data?.novels?.edges) {
+				results = result.data.novels.edges.map((edge) => edge.node);
+				isOpen = results.length > 0;
+			} else {
+				results = [];
+				isOpen = false;
+			}
+		} catch (error) {
+			console.error('Search error:', error);
+			results = [];
+			isOpen = false;
+		} finally {
+			fetching = false;
+		}
+	}
+
+	function handleInput(value: string) {
+		searchTerm = value;
+		if (searchTimeout) clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			fetchResults(value);
+		}, 300);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && searchTerm.trim()) {
+			event.preventDefault();
+			isOpen = false;
+			window.location.href = `/novels?search=${encodeURIComponent(searchTerm.trim())}`;
+		} else if (event.key === 'Escape') {
+			isOpen = false;
+		}
+	}
+
+	function handleResultClick() {
+		isOpen = false;
+		searchTerm = '';
+		results = [];
+	}
+
+	function handleFocus() {
+		if (results.length > 0) {
+			isOpen = true;
+		}
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (containerRef && !containerRef.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	}
+
+	function getCoverSrc(novel: NovelDto): string | undefined {
+		return novel.coverImage?.newPath ?? novel.coverImage?.originalPath ?? undefined;
+	}
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			document.addEventListener('click', handleClickOutside);
+			return () => {
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}
+	});
+</script>
+
+<div class="relative max-w-xs" bind:this={containerRef}>
+	<div class="relative">
+		<Search class="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+		<Input
+			type="search"
+			placeholder="Search..."
+			class="pl-8"
+			value={searchTerm}
+			oninput={(e) => handleInput(e.currentTarget.value)}
+			onkeydown={handleKeydown}
+			onfocus={handleFocus}
+		/>
+	</div>
+
+	{#if isOpen}
+		<div
+			class="absolute top-full left-0 right-0 z-50 mt-1 overflow-hidden rounded-md border bg-white shadow-lg dark:bg-gray-900"
+		>
+			{#if fetching}
+				<div class="px-4 py-3 text-sm text-muted-foreground">Searching...</div>
+			{:else if results.length === 0}
+				<div class="px-4 py-3 text-sm text-muted-foreground">No results found</div>
+			{:else}
+				{#each results as novel (novel.id)}
+					<a
+						href="/novels/{novel.id}"
+						class="flex items-center gap-3 px-3 py-2 hover:bg-muted transition-colors"
+						onclick={handleResultClick}
+					>
+						{#if getCoverSrc(novel)}
+							<img
+								src={getCoverSrc(novel)}
+								alt=""
+								class="h-12 w-9 rounded object-cover flex-shrink-0"
+								loading="lazy"
+							/>
+						{:else}
+							<div class="h-12 w-9 rounded bg-muted flex-shrink-0"></div>
+						{/if}
+						<span class="text-sm font-medium truncate">{novel.name}</span>
+					</a>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>

fictionarchive-web-astro/src/lib/constants/systemTags.ts

@@ -0,0 +1,3 @@
+export const SystemTags = {
+	Nsfw: 'Nsfw'
+} as const;

fictionarchive-web-astro/src/lib/graphql/__generated__/graphql.ts

@@ -88,6 +88,17 @@ export type DeleteJobPayload = {
   errors: Maybe<Array<DeleteJobError>>;
 };
 
+export type DeleteNovelError = KeyNotFoundError;
+
+export type DeleteNovelInput = {
+  novelId: Scalars['UnsignedInt']['input'];
+};
+
+export type DeleteNovelPayload = {
+  boolean: Maybe<Scalars['Boolean']['output']>;
+  errors: Maybe<Array<DeleteNovelError>>;
+};
+
 export type DuplicateNameError = Error & {
   message: Scalars['String']['output'];
 };
@@ -201,6 +212,7 @@ export type ListFilterInputTypeOfNovelTagDtoFilterInput = {
 
 export type Mutation = {
   deleteJob: DeleteJobPayload;
+  deleteNovel: DeleteNovelPayload;
   fetchChapterContents: FetchChapterContentsPayload;
   importNovel: ImportNovelPayload;
   registerUser: RegisterUserPayload;
@@ -215,6 +227,11 @@ export type MutationDeleteJobArgs = {
 };
 
 
+export type MutationDeleteNovelArgs = {
+  input: DeleteNovelInput;
+};
+
+
 export type MutationFetchChapterContentsArgs = {
   input: FetchChapterContentsInput;
 };
@@ -707,6 +724,13 @@ export type UuidOperationFilterInput = {
   nlte?: InputMaybe<Scalars['UUID']['input']>;
 };
 
+export type DeleteNovelMutationVariables = Exact<{
+  input: DeleteNovelInput;
+}>;
+
+
+export type DeleteNovelMutation = { deleteNovel: { boolean: boolean | null, errors: Array<{ message: string }> | null } };
+
 export type ImportNovelMutationVariables = Exact<{
   input: ImportNovelInput;
 }>;
@@ -733,13 +757,15 @@ export type NovelsQueryVariables = Exact<{
   first?: InputMaybe<Scalars['Int']['input']>;
   after?: InputMaybe<Scalars['String']['input']>;
   where?: InputMaybe<NovelDtoFilterInput>;
+  order?: InputMaybe<Array<NovelDtoSortInput> | NovelDtoSortInput>;
 }>;
 
 
-export type NovelsQuery = { novels: { edges: Array<{ cursor: string, node: { id: any, url: string, name: string, description: string, rawStatus: NovelStatus, lastUpdatedTime: any, coverImage: { newPath: string | null } | null, chapters: Array<{ order: any, name: string }>, tags: Array<{ key: string, displayName: string }> } }> | null, pageInfo: { hasNextPage: boolean, endCursor: string | null } } | null };
+export type NovelsQuery = { novels: { edges: Array<{ cursor: string, node: { id: any, url: string, name: string, description: string, rawStatus: NovelStatus, lastUpdatedTime: any, coverImage: { newPath: string | null } | null, chapters: Array<{ order: any, name: string }>, tags: Array<{ key: string, displayName: string, tagType: TagType }> } }> | null, pageInfo: { hasNextPage: boolean, endCursor: string | null } } | null };
 
 
+export const DeleteNovelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteNovel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteNovelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteNovel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"boolean"}},{"kind":"Field","name":{"kind":"Name","value":"errors"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Error"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode<DeleteNovelMutation, DeleteNovelMutationVariables>;
 export const ImportNovelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ImportNovel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ImportNovelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"importNovel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"novelUpdateRequestedEvent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"novelUrl"}}]}}]}}]}}]} as unknown as DocumentNode<ImportNovelMutation, ImportNovelMutationVariables>;
 export const GetChapterDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetChapter"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"novelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UnsignedInt"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"chapterOrder"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UnsignedInt"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"novelId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"novelId"}}},{"kind":"Argument","name":{"kind":"Name","value":"chapterOrder"},"value":{"kind":"Variable","name":{"kind":"Name","value":"chapterOrder"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"order"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"body"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"revision"}},{"kind":"Field","name":{"kind":"Name","value":"createdTime"}},{"kind":"Field","name":{"kind":"Name","value":"lastUpdatedTime"}},{"kind":"Field","name":{"kind":"Name","value":"images"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"newPath"}}]}},{"kind":"Field","name":{"kind":"Name","value":"novelId"}},{"kind":"Field","name":{"kind":"Name","value":"novelName"}},{"kind":"Field","name":{"kind":"Name","value":"totalChapters"}},{"kind":"Field","name":{"kind":"Name","value":"prevChapterOrder"}},{"kind":"Field","name":{"kind":"Name","value":"nextChapterOrder"}}]}}]}}]} as unknown as DocumentNode<GetChapterQuery, GetChapterQueryVariables>;
 export const NovelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Novel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UnsignedInt"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"novels"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"rawLanguage"}},{"kind":"Field","name":{"kind":"Name","value":"rawStatus"}},{"kind":"Field","name":{"kind":"Name","value":"statusOverride"}},{"kind":"Field","name":{"kind":"Name","value":"externalId"}},{"kind":"Field","name":{"kind":"Name","value":"createdTime"}},{"kind":"Field","name":{"kind":"Name","value":"lastUpdatedTime"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"externalUrl"}}]}},{"kind":"Field","name":{"kind":"Name","value":"source"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"newPath"}}]}},{"kind":"Field","name":{"kind":"Name","value":"tags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"tagType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"chapters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"order"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"lastUpdatedTime"}},{"kind":"Field","name":{"kind":"Name","value":"images"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"newPath"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<NovelQuery, NovelQueryVariables>;
-export const NovelsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Novels"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"after"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"where"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"NovelDtoFilterInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"novels"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}},{"kind":"Argument","name":{"kind":"Name","value":"after"},"value":{"kind":"Variable","name":{"kind":"Name","value":"after"}}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"Variable","name":{"kind":"Name","value":"where"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"newPath"}}]}},{"kind":"Field","name":{"kind":"Name","value":"rawStatus"}},{"kind":"Field","name":{"kind":"Name","value":"lastUpdatedTime"}},{"kind":"Field","name":{"kind":"Name","value":"chapters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"order"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"tags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}}]}}]}}]} as unknown as DocumentNode<NovelsQuery, NovelsQueryVariables>;
+export const NovelsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Novels"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"after"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"where"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"NovelDtoFilterInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"order"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"NovelDtoSortInput"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"novels"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}},{"kind":"Argument","name":{"kind":"Name","value":"after"},"value":{"kind":"Variable","name":{"kind":"Name","value":"after"}}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"Variable","name":{"kind":"Name","value":"where"}}},{"kind":"Argument","name":{"kind":"Name","value":"order"},"value":{"kind":"Variable","name":{"kind":"Name","value":"order"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"newPath"}}]}},{"kind":"Field","name":{"kind":"Name","value":"rawStatus"}},{"kind":"Field","name":{"kind":"Name","value":"lastUpdatedTime"}},{"kind":"Field","name":{"kind":"Name","value":"chapters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"order"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"tags"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"tagType"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}}]}}]}}]} as unknown as DocumentNode<NovelsQuery, NovelsQueryVariables>;

fictionarchive-web-astro/src/lib/graphql/mutations/deleteNovel.graphql

@@ -0,0 +1,10 @@
+mutation DeleteNovel($input: DeleteNovelInput!) {
+  deleteNovel(input: $input) {
+    boolean
+    errors {
+      ... on Error {
+        message
+      }
+    }
+  }
+}

fictionarchive-web-astro/src/lib/graphql/queries/novels.graphql

@@ -1,5 +1,5 @@
-query Novels($first: Int, $after: String, $where: NovelDtoFilterInput) {
+query Novels($first: Int, $after: String, $where: NovelDtoFilterInput, $order: [NovelDtoSortInput!]) {
-  novels(first: $first, after: $after, where: $where) {
+  novels(first: $first, after: $after, where: $where, order: $order) {
     edges {
       cursor
       node {
@@ -19,6 +19,7 @@ query Novels($first: Int, $after: String, $where: NovelDtoFilterInput) {
         tags {
           key
           displayName
+          tagType
         }
       }
     }

fictionarchive-web-astro/src/lib/utils/filterParams.ts

@@ -1,20 +1,37 @@
-import type { NovelDtoFilterInput, NovelStatus } from '$lib/graphql/__generated__/graphql';
+import type { NovelDtoFilterInput, NovelDtoSortInput, NovelStatus, SortEnumType } from '$lib/graphql/__generated__/graphql';
+
+export type SortField = 'lastUpdatedTime' | 'createdTime' | 'name';
+export type SortDirection = SortEnumType;
+
+export interface NovelSort {
+	field: SortField;
+	direction: SortDirection;
+}
 
 export interface NovelFilters {
 	search: string;
 	statuses: NovelStatus[];
 	tags: string[];
 	authorName: string;
+	sort: NovelSort;
 }
 
+export const DEFAULT_SORT: NovelSort = {
+	field: 'lastUpdatedTime',
+	direction: 'DESC'
+};
+
 export const EMPTY_FILTERS: NovelFilters = {
 	search: '',
 	statuses: [],
 	tags: [],
-	authorName: ''
+	authorName: '',
+	sort: DEFAULT_SORT
 };
 
 const VALID_STATUSES: NovelStatus[] = ['ABANDONED', 'COMPLETED', 'HIATUS', 'IN_PROGRESS', 'UNKNOWN'];
+const VALID_SORT_FIELDS: SortField[] = ['lastUpdatedTime', 'createdTime', 'name'];
+const VALID_SORT_DIRECTIONS: SortDirection[] = ['ASC', 'DESC'];
 
 /**
  * Parse filter state from URL search parameters
@@ -34,7 +51,15 @@ export function parseFiltersFromURL(searchParams?: URLSearchParams): NovelFilter
 
 	const authorName = params.get('author') ?? '';
 
-	return { search, statuses, tags, authorName };
+	// Parse sort parameters
+	const sortField = params.get('sortBy') as SortField | null;
+	const sortDir = params.get('sortDir') as SortDirection | null;
+	const sort: NovelSort = {
+		field: sortField && VALID_SORT_FIELDS.includes(sortField) ? sortField : DEFAULT_SORT.field,
+		direction: sortDir && VALID_SORT_DIRECTIONS.includes(sortDir) ? sortDir : DEFAULT_SORT.direction
+	};
+
+	return { search, statuses, tags, authorName, sort };
 }
 
 /**
@@ -59,6 +84,12 @@ export function filtersToURLParams(filters: NovelFilters): string {
 		params.set('author', filters.authorName.trim());
 	}
 
+	// Only include sort params if different from default
+	if (filters.sort.field !== DEFAULT_SORT.field || filters.sort.direction !== DEFAULT_SORT.direction) {
+		params.set('sortBy', filters.sort.field);
+		params.set('sortDir', filters.sort.direction);
+	}
+
 	return params.toString();
 }
 
@@ -135,3 +166,10 @@ export function hasActiveFilters(filters: NovelFilters): boolean {
 		filters.authorName.trim().length > 0
 	);
 }
+
+/**
+ * Convert sort state to GraphQL order input
+ */
+export function sortToGraphQLOrder(sort: NovelSort): NovelDtoSortInput[] {
+	return [{ [sort.field]: sort.direction }];
+}