[FA-misc] Switches to using DTOs, updates frontend with details and reader page, updates novel import to be an upsert
This commit is contained in:
gamer147
@@ -4,10 +4,10 @@
|
||||
|
||||
let isOpen = $state(false);
|
||||
|
||||
const email = $derived(
|
||||
$user?.profile?.email ??
|
||||
const name = $derived(
|
||||
$user?.profile?.name ??
|
||||
$user?.profile?.preferred_username ??
|
||||
$user?.profile?.name ??
|
||||
$user?.profile?.email ??
|
||||
$user?.profile?.sub ??
|
||||
'User'
|
||||
);
|
||||
@@ -38,7 +38,7 @@
|
||||
{:else if $user}
|
||||
<div class="auth-dropdown relative">
|
||||
<Button variant="outline" onclick={toggleDropdown}>
|
||||
{email}
|
||||
{name}
|
||||
</Button>
|
||||
{#if isOpen}
|
||||
<div
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import List from '@lucide/svelte/icons/list';
|
||||
|
||||
interface Props {
|
||||
novelId: string;
|
||||
prevChapterOrder: number | null | undefined;
|
||||
nextChapterOrder: number | null | undefined;
|
||||
showKeyboardHints?: boolean;
|
||||
}
|
||||
|
||||
let { novelId, prevChapterOrder, nextChapterOrder, showKeyboardHints = true }: Props = $props();
|
||||
|
||||
const hasPrev = $derived(prevChapterOrder != null);
|
||||
const hasNext = $derived(nextChapterOrder != null);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
href={hasPrev ? `/novels/${novelId}/chapters/${prevChapterOrder}` : undefined}
|
||||
disabled={!hasPrev}
|
||||
class="gap-2"
|
||||
>
|
||||
<ChevronLeft class="h-4 w-4" />
|
||||
<span class="hidden sm:inline">Previous</span>
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" href="/novels/{novelId}" class="gap-2">
|
||||
<List class="h-4 w-4" />
|
||||
<span class="hidden sm:inline">Contents</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
href={hasNext ? `/novels/${novelId}/chapters/${nextChapterOrder}` : undefined}
|
||||
disabled={!hasNext}
|
||||
class="gap-2"
|
||||
>
|
||||
<span class="hidden sm:inline">Next</span>
|
||||
<ChevronRight class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{#if showKeyboardHints}
|
||||
<p class="text-muted-foreground hidden text-center text-xs md:block">
|
||||
Use <kbd class="bg-muted rounded px-1 py-0.5 text-xs">←</kbd> and
|
||||
<kbd class="bg-muted rounded px-1 py-0.5 text-xs">→</kbd> arrow keys to navigate
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
progress: number;
|
||||
}
|
||||
|
||||
let { progress }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed top-0 left-0 right-0 z-50 h-1 bg-muted"
|
||||
role="progressbar"
|
||||
aria-valuenow={Math.round(progress)}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label="Reading progress"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-primary transition-[width] duration-150 ease-out"
|
||||
style="width: {progress}%"
|
||||
></div>
|
||||
</div>
|
||||
@@ -0,0 +1,183 @@
|
||||
<script lang="ts" module>
|
||||
import type { GetChapterQuery } from '$lib/graphql/__generated__/graphql';
|
||||
|
||||
export type ChapterData = NonNullable<GetChapterQuery['chapter']>;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { client } from '$lib/graphql/client';
|
||||
import { GetChapterDocument } from '$lib/graphql/__generated__/graphql';
|
||||
import { Card, CardContent } from '$lib/components/ui/card';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
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;
|
||||
chapterNumber?: string;
|
||||
}
|
||||
|
||||
let { novelId, chapterNumber }: Props = $props();
|
||||
|
||||
// State
|
||||
let chapter: ChapterData | null = $state(null);
|
||||
let fetching = $state(true);
|
||||
let error: string | null = $state(null);
|
||||
let scrollProgress = $state(0);
|
||||
|
||||
// Derived values
|
||||
const sanitizedBody = $derived(chapter?.body ? sanitizeChapterHtml(chapter.body) : '');
|
||||
|
||||
function handleScroll() {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
scrollProgress = docHeight > 0 ? Math.min(100, (scrollTop / docHeight) * 100) : 0;
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
// Don't trigger if user is typing in an input
|
||||
if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowLeft' && chapter?.prevChapterOrder != null) {
|
||||
window.location.href = `/novels/${novelId}/chapters/${chapter.prevChapterOrder}`;
|
||||
} else if (event.key === 'ArrowRight' && chapter?.nextChapterOrder != null) {
|
||||
window.location.href = `/novels/${novelId}/chapters/${chapter.nextChapterOrder}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchChapter() {
|
||||
if (!novelId || !chapterNumber) {
|
||||
error = 'Missing novel ID or chapter number';
|
||||
fetching = false;
|
||||
return;
|
||||
}
|
||||
|
||||
fetching = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const result = await client
|
||||
.query(GetChapterDocument, {
|
||||
novelId: parseInt(novelId, 10),
|
||||
chapterOrder: parseInt(chapterNumber, 10)
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
if (result.error) {
|
||||
error = result.error.message;
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.data?.chapter) {
|
||||
chapter = result.data.chapter;
|
||||
} else {
|
||||
error = 'Chapter not found';
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error';
|
||||
} finally {
|
||||
fetching = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchChapter();
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<CardContent>
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div
|
||||
class="border-primary h-10 w-10 animate-spin rounded-full border-2 border-t-transparent"
|
||||
aria-label="Loading chapter"
|
||||
></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<!-- Error State -->
|
||||
{#if error && !fetching}
|
||||
<Card class="border-destructive/40 bg-destructive/5">
|
||||
<CardContent class="py-8">
|
||||
<div class="text-center">
|
||||
<p class="text-destructive text-lg font-medium">
|
||||
{error === 'Chapter not found' ? 'Chapter Not Found' : 'Error Loading Chapter'}
|
||||
</p>
|
||||
<p class="text-muted-foreground mt-2 text-sm">{error}</p>
|
||||
<Button variant="outline" onclick={fetchChapter} class="mt-4"> Try Again </Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<!-- Chapter Content -->
|
||||
{#if chapter && !fetching}
|
||||
<!-- Navigation (top) -->
|
||||
<ChapterNavigation
|
||||
novelId={novelId ?? ''}
|
||||
prevChapterOrder={chapter.prevChapterOrder}
|
||||
nextChapterOrder={chapter.nextChapterOrder}
|
||||
/>
|
||||
|
||||
<!-- Chapter Header -->
|
||||
<Card>
|
||||
<CardContent class="py-6">
|
||||
<div class="space-y-2 text-center">
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{chapter.novelName}
|
||||
</p>
|
||||
<h1 class="text-2xl font-bold">Chapter {chapter.order}: {chapter.name}</h1>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Chapter Body -->
|
||||
<Card>
|
||||
<CardContent class="px-6 py-8 md:px-12">
|
||||
<article
|
||||
class="prose prose-lg dark:prose-invert mx-auto max-w-none whitespace-pre-line
|
||||
prose-p:text-foreground prose-p:mb-4 prose-p:leading-relaxed
|
||||
prose-headings:text-foreground
|
||||
first:prose-p:mt-0 last:prose-p:mb-0"
|
||||
>
|
||||
{@html sanitizedBody}
|
||||
</article>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Navigation (bottom) -->
|
||||
<ChapterNavigation
|
||||
novelId={novelId ?? ''}
|
||||
prevChapterOrder={chapter.prevChapterOrder}
|
||||
nextChapterOrder={chapter.nextChapterOrder}
|
||||
showKeyboardHints={false}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { isLoading, isConfigured, login } from '$lib/auth/authStore';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
</script>
|
||||
|
||||
{#if $isLoading}
|
||||
<Button variant="outline" disabled>Loading...</Button>
|
||||
{:else if !isConfigured}
|
||||
<span class="text-sm text-yellow-600">Auth not configured</span>
|
||||
{:else}
|
||||
<Button onclick={login}>Sign in</Button>
|
||||
{/if}
|
||||
@@ -38,14 +38,8 @@
|
||||
|
||||
let { novel }: NovelCardProps = $props();
|
||||
|
||||
function pickText(novelText?: NovelNode['name'] | NovelNode['description']) {
|
||||
const texts = novelText?.texts ?? [];
|
||||
const english = texts.find((t) => t.language === 'EN');
|
||||
return (english ?? texts[0])?.text ?? 'No description available.';
|
||||
}
|
||||
|
||||
const title = $derived(pickText(novel.name));
|
||||
const descriptionRaw = $derived(pickText(novel.description));
|
||||
const title = $derived(novel.name || 'Untitled');
|
||||
const descriptionRaw = $derived(novel.description || 'No description available.');
|
||||
const descriptionHtml = $derived(sanitizeHtml(descriptionRaw));
|
||||
const coverSrc = $derived(novel.coverImage?.newPath ?? novel.coverImage?.originalPath);
|
||||
|
||||
|
||||
@@ -1,25 +1,375 @@
|
||||
<script lang="ts" module>
|
||||
import type { NovelQuery, NovelStatus, Language } from '$lib/graphql/__generated__/graphql';
|
||||
|
||||
export type NovelNode = NonNullable<NonNullable<NovelQuery['novels']>['nodes']>[number];
|
||||
|
||||
const statusColors: Record<NovelStatus, string> = {
|
||||
IN_PROGRESS: 'bg-green-500 text-white',
|
||||
COMPLETED: 'bg-blue-500 text-white',
|
||||
HIATUS: 'bg-amber-500 text-white',
|
||||
ABANDONED: 'bg-gray-500 text-white',
|
||||
UNKNOWN: 'bg-gray-500 text-white'
|
||||
};
|
||||
|
||||
const statusLabels: Record<NovelStatus, string> = {
|
||||
IN_PROGRESS: 'Ongoing',
|
||||
COMPLETED: 'Complete',
|
||||
HIATUS: 'Hiatus',
|
||||
ABANDONED: 'Dropped',
|
||||
UNKNOWN: 'Unknown'
|
||||
};
|
||||
|
||||
const languageLabels: Record<Language, string> = {
|
||||
EN: 'English',
|
||||
KR: 'Korean',
|
||||
JA: 'Japanese',
|
||||
CH: 'Chinese'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import { onMount } from 'svelte';
|
||||
import { client } from '$lib/graphql/client';
|
||||
import { NovelDocument } from '$lib/graphql/__generated__/graphql';
|
||||
import { Card, CardContent, CardHeader } from '$lib/components/ui/card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
TooltipProvider
|
||||
} from '$lib/components/ui/tooltip';
|
||||
import { formatRelativeTime, formatAbsoluteTime } from '$lib/utils/time';
|
||||
import { sanitizeHtml } from '$lib/utils/sanitize';
|
||||
// Direct imports for faster builds
|
||||
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
||||
import ExternalLink from '@lucide/svelte/icons/external-link';
|
||||
import BookOpen from '@lucide/svelte/icons/book-open';
|
||||
import ChevronDown from '@lucide/svelte/icons/chevron-down';
|
||||
import ChevronUp from '@lucide/svelte/icons/chevron-up';
|
||||
|
||||
interface Props {
|
||||
novelId?: string;
|
||||
}
|
||||
|
||||
let { novelId }: Props = $props();
|
||||
|
||||
let novel: NovelNode | null = $state(null);
|
||||
let fetching = $state(true);
|
||||
let error: string | null = $state(null);
|
||||
let descriptionExpanded = $state(false);
|
||||
|
||||
const DESCRIPTION_PREVIEW_LENGTH = 300;
|
||||
|
||||
// Derived values
|
||||
const coverSrc = $derived(novel?.coverImage?.newPath ?? novel?.coverImage?.originalPath);
|
||||
const status = $derived(novel?.rawStatus ?? 'UNKNOWN');
|
||||
const statusColor = $derived(statusColors[status]);
|
||||
const statusLabel = $derived(statusLabels[status]);
|
||||
const language = $derived(novel?.rawLanguage ?? 'EN');
|
||||
const languageLabel = $derived(languageLabels[language]);
|
||||
|
||||
const lastUpdated = $derived(novel?.lastUpdatedTime ? new Date(novel.lastUpdatedTime) : null);
|
||||
const relativeTime = $derived(lastUpdated ? formatRelativeTime(lastUpdated) : null);
|
||||
const absoluteTime = $derived(lastUpdated ? formatAbsoluteTime(lastUpdated) : null);
|
||||
|
||||
const description = $derived(novel?.description ?? '');
|
||||
const descriptionHtml = $derived(sanitizeHtml(description));
|
||||
const isDescriptionLong = $derived(description.length > DESCRIPTION_PREVIEW_LENGTH);
|
||||
const truncatedDescriptionHtml = $derived(
|
||||
isDescriptionLong && !descriptionExpanded
|
||||
? sanitizeHtml(description.slice(0, DESCRIPTION_PREVIEW_LENGTH) + '...')
|
||||
: descriptionHtml
|
||||
);
|
||||
|
||||
const sortedChapters = $derived(
|
||||
[...(novel?.chapters ?? [])].sort((a, b) => a.order - b.order)
|
||||
);
|
||||
|
||||
const chapterCount = $derived(novel?.chapters?.length ?? 0);
|
||||
|
||||
async function fetchNovel() {
|
||||
if (!novelId) {
|
||||
error = 'No novel ID provided';
|
||||
fetching = false;
|
||||
return;
|
||||
}
|
||||
|
||||
fetching = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const result = await client
|
||||
.query(NovelDocument, { id: parseInt(novelId, 10) })
|
||||
.toPromise();
|
||||
|
||||
if (result.error) {
|
||||
error = result.error.message;
|
||||
return;
|
||||
}
|
||||
|
||||
const nodes = result.data?.novels?.nodes;
|
||||
if (nodes && nodes.length > 0) {
|
||||
novel = nodes[0];
|
||||
} else {
|
||||
error = 'Novel not found';
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error';
|
||||
} finally {
|
||||
fetching = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchNovel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<Card class="shadow-md shadow-primary/10">
|
||||
<CardHeader>
|
||||
<CardTitle>Novel Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{#if novelId}
|
||||
Viewing novel ID: <code class="rounded bg-muted px-1 py-0.5">{novelId}</code>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-muted-foreground">
|
||||
Detail view coming soon. Select a novel to explore chapters and metadata once implemented.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div class="space-y-6">
|
||||
<!-- Back Navigation -->
|
||||
<Button variant="ghost" href="/novels" class="gap-2 -ml-2">
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
Back to Novels
|
||||
</Button>
|
||||
|
||||
<!-- Loading State -->
|
||||
{#if fetching}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div
|
||||
class="border-primary h-10 w-10 animate-spin rounded-full border-2 border-t-transparent"
|
||||
aria-label="Loading novel"
|
||||
></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<!-- Error State -->
|
||||
{#if error && !fetching}
|
||||
<Card class="border-destructive/40 bg-destructive/5">
|
||||
<CardContent class="py-8">
|
||||
<div class="text-center">
|
||||
<p class="text-destructive text-lg font-medium">
|
||||
{error === 'Novel not found' ? 'Novel Not Found' : 'Error Loading Novel'}
|
||||
</p>
|
||||
<p class="text-muted-foreground mt-2 text-sm">{error}</p>
|
||||
<Button variant="outline" onclick={fetchNovel} class="mt-4">
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<!-- Novel Content -->
|
||||
{#if novel && !fetching}
|
||||
<!-- Header Section (Metadata + Tags + Description) -->
|
||||
<Card class="shadow-md shadow-primary/10 overflow-hidden">
|
||||
<CardContent class="p-0">
|
||||
<!-- Cover Image + Metadata + Tags -->
|
||||
<div class="flex flex-col sm:flex-row gap-6 p-6 pb-4">
|
||||
<!-- Cover Image -->
|
||||
<div class="shrink-0 sm:w-40">
|
||||
{#if coverSrc}
|
||||
<div class="aspect-[3/4] w-full overflow-hidden rounded-lg bg-muted/50">
|
||||
<img
|
||||
src={coverSrc}
|
||||
alt={novel.name}
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="aspect-[3/4] w-full rounded-lg bg-muted/50 flex items-center justify-center">
|
||||
<BookOpen class="h-12 w-12 text-muted-foreground/50" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Metadata + Tags -->
|
||||
<div class="flex-1 space-y-3">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold leading-tight">{novel.name}</h1>
|
||||
{#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}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Badges -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge class={statusColor}>{statusLabel}</Badge>
|
||||
<Badge variant="outline">{languageLabel}</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Stats (inline) -->
|
||||
<div class="text-sm text-muted-foreground flex flex-wrap gap-x-4 gap-y-1">
|
||||
{#if novel.source}
|
||||
<span>
|
||||
Source:
|
||||
<a
|
||||
href={novel.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{novel.source.name}
|
||||
<ExternalLink class="h-3 w-3" />
|
||||
</a>
|
||||
</span>
|
||||
{/if}
|
||||
{#if relativeTime && absoluteTime}
|
||||
<span>
|
||||
Updated:
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger class="cursor-default hover:text-foreground transition-colors">
|
||||
<time datetime={lastUpdated?.toISOString()}>{relativeTime}</time>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{absoluteTime}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</span>
|
||||
{/if}
|
||||
<span>{chapterCount} chapters</span>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
{#if novel.tags && novel.tags.length > 0}
|
||||
<div class="flex flex-wrap gap-1.5 pt-1">
|
||||
{#each novel.tags as tag (tag.key)}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
href="/novels?tags={tag.key}"
|
||||
class="cursor-pointer hover:bg-secondary/80 transition-colors text-xs"
|
||||
>
|
||||
{tag.displayName}
|
||||
</Badge>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description (full width below) -->
|
||||
{#if description}
|
||||
<div class="border-t px-6 py-4">
|
||||
<div class="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
|
||||
{@html truncatedDescriptionHtml}
|
||||
</div>
|
||||
{#if isDescriptionLong}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onclick={() => (descriptionExpanded = !descriptionExpanded)}
|
||||
class="mt-2 gap-1 -ml-2"
|
||||
>
|
||||
{#if descriptionExpanded}
|
||||
<ChevronUp class="h-4 w-4" />
|
||||
Show less
|
||||
{:else}
|
||||
<ChevronDown class="h-4 w-4" />
|
||||
Show more
|
||||
{/if}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Tabbed Content -->
|
||||
<Card>
|
||||
<Tabs value="chapters" 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
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="comments"
|
||||
disabled
|
||||
class="rounded-md data-[state=active]:bg-background data-[state=active]:shadow-sm px-3 py-1.5 text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Comments
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="recommendations"
|
||||
disabled
|
||||
class="rounded-md data-[state=active]:bg-background data-[state=active]:shadow-sm px-3 py-1.5 text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Recommendations
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="pt-4">
|
||||
<TabsContent value="chapters" class="mt-0">
|
||||
{#if sortedChapters.length === 0}
|
||||
<p class="text-muted-foreground text-sm py-4 text-center">
|
||||
No chapters available yet.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="max-h-96 overflow-y-auto -mx-2">
|
||||
{#each sortedChapters as chapter (chapter.id)}
|
||||
{@const chapterDate = chapter.lastUpdatedTime ? new Date(chapter.lastUpdatedTime) : null}
|
||||
<a
|
||||
href="/novels/{novelId}/chapters/{chapter.order}"
|
||||
class="flex items-center justify-between px-3 py-2.5 hover:bg-muted/50 rounded-md transition-colors group"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="text-muted-foreground text-sm font-medium shrink-0 w-14">
|
||||
Ch. {chapter.order}
|
||||
</span>
|
||||
<span class="text-sm truncate group-hover:text-primary transition-colors">
|
||||
{chapter.name}
|
||||
</span>
|
||||
</div>
|
||||
{#if chapterDate}
|
||||
<span class="text-xs text-muted-foreground/70 shrink-0 ml-2">
|
||||
{formatRelativeTime(chapterDate)}
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="comments" class="mt-0">
|
||||
<p class="text-muted-foreground text-sm py-8 text-center">
|
||||
Comments coming soon.
|
||||
</p>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="recommendations" class="mt-0">
|
||||
<p class="text-muted-foreground text-sm py-8 text-center">
|
||||
Recommendations coming soon.
|
||||
</p>
|
||||
</TabsContent>
|
||||
</CardContent>
|
||||
</Tabs>
|
||||
</Card>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
222
fictionarchive-web-astro/src/lib/components/NovelFilters.svelte
Normal file
222
fictionarchive-web-astro/src/lib/components/NovelFilters.svelte
Normal file
@@ -0,0 +1,222 @@
|
||||
<script lang="ts">
|
||||
import { Select } from 'bits-ui';
|
||||
// Direct imports for faster Astro builds
|
||||
import Search from '@lucide/svelte/icons/search';
|
||||
import X from '@lucide/svelte/icons/x';
|
||||
import ChevronDown from '@lucide/svelte/icons/chevron-down';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
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 { NovelStatus, type NovelTagDto } from '$lib/graphql/__generated__/graphql';
|
||||
|
||||
interface Props {
|
||||
filters: NovelFilters;
|
||||
onFilterChange: (filters: NovelFilters) => void;
|
||||
availableTags: Pick<NovelTagDto, 'key' | 'displayName'>[];
|
||||
}
|
||||
|
||||
let { filters, onFilterChange, availableTags }: Props = $props();
|
||||
|
||||
// Local state for search input (for debouncing)
|
||||
let searchInput = $state(filters.search);
|
||||
let searchTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
// Status options
|
||||
const statusOptions: { value: NovelStatus; label: string }[] = [
|
||||
{ value: NovelStatus.InProgress, label: 'In Progress' },
|
||||
{ value: NovelStatus.Completed, label: 'Completed' },
|
||||
{ value: NovelStatus.Hiatus, label: 'Hiatus' },
|
||||
{ value: NovelStatus.Abandoned, label: 'Abandoned' },
|
||||
{ value: NovelStatus.Unknown, label: 'Unknown' }
|
||||
];
|
||||
|
||||
// Derived state for display
|
||||
const selectedStatusLabels = $derived(
|
||||
filters.statuses.map((s) => statusOptions.find((o) => o.value === s)?.label ?? s).join(', ')
|
||||
);
|
||||
|
||||
const selectedTagLabels = $derived(
|
||||
filters.tags.map((t) => availableTags.find((tag) => tag.key === t)?.displayName ?? t).join(', ')
|
||||
);
|
||||
|
||||
// Debounced search handler
|
||||
function handleSearchInput(value: string) {
|
||||
searchInput = value;
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
onFilterChange({ ...filters, search: value });
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Status selection handler
|
||||
function handleStatusChange(selected: NovelStatus[]) {
|
||||
onFilterChange({ ...filters, statuses: selected });
|
||||
}
|
||||
|
||||
// Tag selection handler
|
||||
function handleTagChange(selected: string[]) {
|
||||
onFilterChange({ ...filters, tags: selected });
|
||||
}
|
||||
|
||||
// Clear all filters
|
||||
function clearFilters() {
|
||||
searchInput = '';
|
||||
onFilterChange({ ...EMPTY_FILTERS });
|
||||
}
|
||||
|
||||
// Sync search input when filters prop changes externally
|
||||
$effect(() => {
|
||||
if (filters.search !== searchInput && !searchTimeout) {
|
||||
searchInput = filters.search;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- Search Input -->
|
||||
<div class="relative min-w-[200px] flex-1">
|
||||
<Search class="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search novels..."
|
||||
value={searchInput}
|
||||
oninput={(e) => handleSearchInput(e.currentTarget.value)}
|
||||
class="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<Select.Root
|
||||
type="multiple"
|
||||
value={filters.statuses}
|
||||
onValueChange={(v) => handleStatusChange(v as NovelStatus[])}
|
||||
>
|
||||
<Select.Trigger
|
||||
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 min-w-[140px] 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">
|
||||
{filters.statuses.length > 0 ? selectedStatusLabels : 'Status'}
|
||||
</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-[140px] overflow-auto rounded-md border p-1 shadow-md"
|
||||
>
|
||||
{#each statusOptions 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="border-primary flex h-4 w-4 items-center justify-center rounded-sm border {selected
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: ''}"
|
||||
>
|
||||
{#if selected}
|
||||
<Check class="h-3 w-3" />
|
||||
{/if}
|
||||
</div>
|
||||
<span>{option.label}</span>
|
||||
{/snippet}
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
|
||||
<!-- Tags Filter -->
|
||||
{#if availableTags.length > 0}
|
||||
<Select.Root
|
||||
type="multiple"
|
||||
value={filters.tags}
|
||||
onValueChange={(v) => handleTagChange(v as string[])}
|
||||
>
|
||||
<Select.Trigger
|
||||
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 min-w-[120px] 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">
|
||||
{filters.tags.length > 0 ? selectedTagLabels : 'Tags'}
|
||||
</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-[180px] overflow-auto rounded-md border p-1 shadow-md"
|
||||
>
|
||||
{#each availableTags as tag (tag.key)}
|
||||
<Select.Item
|
||||
value={tag.key}
|
||||
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="border-primary flex h-4 w-4 items-center justify-center rounded-sm border {selected
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: ''}"
|
||||
>
|
||||
{#if selected}
|
||||
<Check class="h-3 w-3" />
|
||||
{/if}
|
||||
</div>
|
||||
<span>{tag.displayName}</span>
|
||||
{/snippet}
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{/if}
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
{#if hasActiveFilters(filters)}
|
||||
<Button variant="outline" size="sm" onclick={clearFilters} class="gap-1">
|
||||
<X class="h-4 w-4" />
|
||||
Clear
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Active Filter Badges -->
|
||||
{#if hasActiveFilters(filters)}
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
{#if filters.search}
|
||||
<Badge variant="secondary" class="gap-1">
|
||||
Search: {filters.search}
|
||||
<button
|
||||
onclick={() => {
|
||||
searchInput = '';
|
||||
onFilterChange({ ...filters, search: '' });
|
||||
}}
|
||||
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}
|
||||
<button
|
||||
onclick={() =>
|
||||
onFilterChange({ ...filters, statuses: filters.statuses.filter((s) => s !== status) })}
|
||||
class="hover:bg-secondary-foreground/20 ml-1 rounded-full p-0.5"
|
||||
>
|
||||
<X class="h-3 w-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
{/each}
|
||||
|
||||
{#each filters.tags as tag (tag)}
|
||||
<Badge variant="secondary" class="gap-1">
|
||||
{availableTags.find((t) => t.key === tag)?.displayName ?? tag}
|
||||
<button
|
||||
onclick={() => onFilterChange({ ...filters, tags: filters.tags.filter((t) => t !== tag) })}
|
||||
class="hover:bg-secondary-foreground/20 ml-1 rounded-full p-0.5"
|
||||
>
|
||||
<X class="h-3 w-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,10 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { SvelteMap } from 'svelte/reactivity';
|
||||
import { client } from '$lib/graphql/client';
|
||||
import { NovelsDocument, type NovelsQuery } from '$lib/graphql/__generated__/graphql';
|
||||
import { NovelsDocument, type NovelsQuery, type NovelTagDto } from '$lib/graphql/__generated__/graphql';
|
||||
import NovelCard from './NovelCard.svelte';
|
||||
import NovelFilters from './NovelFilters.svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import {
|
||||
type NovelFilters as NovelFiltersType,
|
||||
parseFiltersFromURL,
|
||||
syncFiltersToURL,
|
||||
filtersToGraphQLWhere,
|
||||
hasActiveFilters,
|
||||
EMPTY_FILTERS
|
||||
} from '$lib/utils/filterParams';
|
||||
|
||||
const PAGE_SIZE = 12;
|
||||
|
||||
@@ -15,16 +25,33 @@
|
||||
let fetching = $state(false);
|
||||
let error: string | null = $state(null);
|
||||
let initialLoad = $state(true);
|
||||
let filters: NovelFiltersType = $state({ ...EMPTY_FILTERS });
|
||||
|
||||
const hasNextPage = $derived(pageInfo?.hasNextPage ?? false);
|
||||
const novels = $derived(edges.map((edge) => edge.node).filter(Boolean));
|
||||
|
||||
// Extract unique tags from loaded novels for the tag filter dropdown
|
||||
const availableTags = $derived(() => {
|
||||
const tagMap = new SvelteMap<string, Pick<NovelTagDto, 'key' | 'displayName'>>();
|
||||
for (const novel of novels) {
|
||||
for (const tag of novel.tags ?? []) {
|
||||
if (!tagMap.has(tag.key)) {
|
||||
tagMap.set(tag.key, { key: tag.key, displayName: tag.displayName });
|
||||
}
|
||||
}
|
||||
}
|
||||
return Array.from(tagMap.values()).sort((a, b) => a.displayName.localeCompare(b.displayName));
|
||||
});
|
||||
|
||||
async function fetchNovels(after: string | null = null) {
|
||||
fetching = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const result = await client.query(NovelsDocument, { first: PAGE_SIZE, after }).toPromise();
|
||||
const where = filtersToGraphQLWhere(filters);
|
||||
const result = await client
|
||||
.query(NovelsDocument, { first: PAGE_SIZE, after, where })
|
||||
.toPromise();
|
||||
|
||||
if (result.error) {
|
||||
error = result.error.message;
|
||||
@@ -36,7 +63,7 @@
|
||||
// Append for pagination
|
||||
edges = [...edges, ...result.data.novels.edges];
|
||||
} else {
|
||||
// Initial load
|
||||
// Initial load or filter change
|
||||
edges = result.data.novels.edges;
|
||||
}
|
||||
pageInfo = result.data.novels.pageInfo;
|
||||
@@ -55,17 +82,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
function handleFilterChange(newFilters: NovelFiltersType) {
|
||||
filters = newFilters;
|
||||
// Reset pagination and refetch
|
||||
edges = [];
|
||||
pageInfo = null;
|
||||
syncFiltersToURL(filters);
|
||||
fetchNovels();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Parse filters from URL on initial load
|
||||
filters = parseFiltersFromURL();
|
||||
fetchNovels();
|
||||
|
||||
// Listen for browser back/forward navigation
|
||||
const handlePopState = () => {
|
||||
filters = parseFiltersFromURL();
|
||||
edges = [];
|
||||
pageInfo = null;
|
||||
fetchNovels();
|
||||
};
|
||||
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
return () => window.removeEventListener('popstate', handlePopState);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<Card class="shadow-md shadow-primary/10">
|
||||
<CardHeader>
|
||||
<CardTitle>Latest Novels</CardTitle>
|
||||
<p class="text-sm text-muted-foreground">Novels that have recently been updated.</p>
|
||||
<CardTitle>Novels</CardTitle>
|
||||
<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()} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{#if fetching && initialLoad}
|
||||
@@ -73,7 +131,7 @@
|
||||
<CardContent>
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<div
|
||||
class="h-10 w-10 animate-spin rounded-full border-2 border-primary border-t-transparent"
|
||||
class="border-primary h-10 w-10 animate-spin rounded-full border-2 border-t-transparent"
|
||||
aria-label="Loading novels"
|
||||
></div>
|
||||
</div>
|
||||
@@ -84,7 +142,7 @@
|
||||
{#if error}
|
||||
<Card class="border-destructive/40 bg-destructive/5">
|
||||
<CardContent>
|
||||
<p class="py-4 text-sm text-destructive">Could not load novels: {error}</p>
|
||||
<p class="text-destructive py-4 text-sm">Could not load novels: {error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
@@ -92,8 +150,12 @@
|
||||
{#if !fetching && novels.length === 0 && !error && !initialLoad}
|
||||
<Card>
|
||||
<CardContent>
|
||||
<p class="py-4 text-sm text-muted-foreground">
|
||||
No novels found yet. Try adding content to the gateway.
|
||||
<p class="text-muted-foreground py-4 text-sm">
|
||||
{#if hasActiveFilters(filters)}
|
||||
No novels match your filters. Try adjusting your search criteria.
|
||||
{:else}
|
||||
No novels found yet. Try adding content to the gateway.
|
||||
{/if}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
18
fictionarchive-web-astro/src/lib/components/ui/tabs/index.ts
Normal file
18
fictionarchive-web-astro/src/lib/components/ui/tabs/index.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Tabs as TabsPrimitive } from 'bits-ui';
|
||||
|
||||
const Root = TabsPrimitive.Root;
|
||||
const List = TabsPrimitive.List;
|
||||
const Trigger = TabsPrimitive.Trigger;
|
||||
const Content = TabsPrimitive.Content;
|
||||
|
||||
export {
|
||||
Root,
|
||||
List,
|
||||
Trigger,
|
||||
Content,
|
||||
//
|
||||
Root as Tabs,
|
||||
List as TabsList,
|
||||
Trigger as TabsTrigger,
|
||||
Content as TabsContent
|
||||
};
|
||||
Reference in New Issue
Block a user