Should be mostly working, doing some additional QOL

2025-11-30 23:00:40 -05:00
parent 8d6f0d6cfd
commit b2f4548807
24 changed files with 839 additions and 73 deletions
--- a/fictionarchive-web-astro/src/lib/components/HeroSection.svelte
+++ b/fictionarchive-web-astro/src/lib/components/HeroSection.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { user, isLoading } from '$lib/auth/authStore';
+
+	const greeting = $derived.by(() => {
+		if ($isLoading) return 'Welcome to FictionArchive';
+		if ($user) {
+			const name = $user.profile?.name || $user.profile?.preferred_username;
+			return name ? `Welcome back, ${name}` : 'Welcome back';
+		}
+		return 'Welcome to FictionArchive';
+	});
+</script>
+
+<section class="py-8 text-center sm:py-12">
+	<h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
+		{greeting}
+	</h1>
+	<p class="mt-2 text-lg text-muted-foreground">
+		Your personal fiction library
+	</p>
+</section>
--- a/fictionarchive-web-astro/src/lib/components/HomePage.svelte
+++ b/fictionarchive-web-astro/src/lib/components/HomePage.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	// Direct imports for faster Astro builds
+	import BookOpen from '@lucide/svelte/icons/book-open';
+	import List from '@lucide/svelte/icons/list';
+	import Sparkles from '@lucide/svelte/icons/sparkles';
+	import HeroSection from './HeroSection.svelte';
+	import NavigationCard from './NavigationCard.svelte';
+	import RecentlyUpdatedSection from './RecentlyUpdatedSection.svelte';
+</script>
+
+<div class="flex flex-col gap-8">
+	<HeroSection />
+
+	<nav class="mx-auto flex w-full max-w-3xl flex-col gap-4">
+		<NavigationCard
+			href="/novels"
+			icon={BookOpen}
+			title="Novels"
+			description="Explore and read archived novels."
+		/>
+		<NavigationCard
+			href="/lists"
+			icon={List}
+			title="Reading Lists"
+			description="Organize stories into custom collections."
+			disabled
+		/>
+		<NavigationCard
+			href="/recommendations"
+			icon={Sparkles}
+			title="Recommendations"
+			description="Get suggestions based on your reading."
+			disabled
+		/>
+	</nav>
+
+	<RecentlyUpdatedSection />
+</div>
--- a/fictionarchive-web-astro/src/lib/components/Navbar.svelte
+++ b/fictionarchive-web-astro/src/lib/components/Navbar.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
+	import * as NavigationMenu from '$lib/components/ui/navigation-menu';
 	import AuthenticationDisplay from './AuthenticationDisplay.svelte';
+
+	let pathname = $state(typeof window !== 'undefined' ? window.location.pathname : '/');
+
+	function isActive(href: string): boolean {
+		if (href === '/') {
+			return pathname === '/';
+		}
+		return pathname.startsWith(href);
+	}
 </script>

 <header class="sticky top-0 z-10 border-b bg-white/80 backdrop-blur dark:bg-gray-900/80">
@@ -10,12 +19,15 @@
 			<span class="rounded bg-primary px-2 py-1 font-bold text-white">FA</span>
 			<span class="font-semibold">FictionArchive</span>
 		</a>
-		<a href="/">
-			<Button variant="ghost">Novels</Button>
-		</a>
-		<div class="flex-1">
-			<Input type="search" placeholder="Search..." class="max-w-xs" />
-		</div>
+		<NavigationMenu.Root viewport={false}>
+			<NavigationMenu.List>
+				<NavigationMenu.Item>
+					<NavigationMenu.Link href="/novels" active={isActive('/novels')}>Novels</NavigationMenu.Link>
+				</NavigationMenu.Item>
+			</NavigationMenu.List>
+		</NavigationMenu.Root>
+		<div class="flex-1"></div>
+		<Input type="search" placeholder="Search..." class="max-w-xs" />
 		<AuthenticationDisplay />
 	</nav>
 </header>
--- a/fictionarchive-web-astro/src/lib/components/NavigationCard.svelte
+++ b/fictionarchive-web-astro/src/lib/components/NavigationCard.svelte
@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import type { Component } from 'svelte';
+
+	export interface NavigationCardProps {
+		href: string;
+		icon: Component<{ class?: string }>;
+		title: string;
+		description: string;
+		disabled?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	let {
+		href,
+		icon: Icon,
+		title,
+		description,
+		disabled = false,
+		class: className
+	}: NavigationCardProps = $props();
+</script>
+
+{#if disabled}
+	<div
+		class={cn(
+			'flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
+			'cursor-not-allowed opacity-50',
+			className
+		)}
+	>
+		<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted">
+			<Icon class="h-6 w-6 text-muted-foreground" />
+		</div>
+		<div class="flex flex-col gap-1">
+			<span class="text-xl font-semibold">{title}</span>
+			<span class="text-sm text-muted-foreground">{description}</span>
+		</div>
+		<span
+			class="ml-auto rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground"
+		>
+			Coming soon
+		</span>
+	</div>
+{:else}
+	<a
+		{href}
+		class={cn(
+			'group flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
+			'shadow-sm transition-all duration-200',
+			'hover:shadow-lg hover:border-primary/20',
+			className
+		)}
+	>
+		<div
+			class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 transition-colors group-hover:bg-primary/20"
+		>
+			<Icon class="h-6 w-6 text-primary" />
+		</div>
+		<div class="flex flex-col gap-1">
+			<span class="text-xl font-semibold">{title}</span>
+			<span class="text-sm text-muted-foreground">{description}</span>
+		</div>
+		<svg
+			class="ml-auto h-5 w-5 text-muted-foreground transition-transform group-hover:translate-x-1"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="m9 18 6-6-6-6" />
+		</svg>
+	</a>
+{/if}
--- a/fictionarchive-web-astro/src/lib/components/NovelCard.svelte
+++ b/fictionarchive-web-astro/src/lib/components/NovelCard.svelte
@@ -1,15 +1,39 @@
 <script lang="ts" module>
-	import type { NovelsQuery } from '$lib/graphql/__generated__/graphql';
+	import type { NovelsQuery, NovelStatus } from '$lib/graphql/__generated__/graphql';

 	export type NovelNode = NonNullable<NonNullable<NovelsQuery['novels']>['edges']>[number]['node'];

 	export interface NovelCardProps {
 		novel: NovelNode;
 	}
+
+	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'
+	};
 </script>

 <script lang="ts">
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import {
+		Tooltip,
+		TooltipTrigger,
+		TooltipContent,
+		TooltipProvider
+	} from '$lib/components/ui/tooltip';
+	import { formatRelativeTime, formatAbsoluteTime } from '$lib/utils/time';

 	let { novel }: NovelCardProps = $props();

@@ -22,24 +46,72 @@
 	const title = $derived(pickText(novel.name));
 	const description = $derived(pickText(novel.description));
 	const coverSrc = $derived(novel.coverImage?.newPath ?? novel.coverImage?.originalPath);
+
+	const latestChapter = $derived(
+		novel.chapters?.slice().sort((a, b) => b.order - a.order)[0] ?? null
+	);
+	const chapterDisplay = $derived(latestChapter ? `Ch. ${latestChapter.order}` : null);
+
+	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 status = $derived(novel.rawStatus ?? 'UNKNOWN');
+	const statusColor = $derived(statusColors[status]);
+	const statusLabel = $derived(statusLabels[status]);
 </script>

-<Card class="overflow-hidden border shadow-sm transition-shadow hover:shadow-md">
-	{#if coverSrc}
-		<div class="aspect-[3/4] w-full overflow-hidden bg-muted/50">
-			<img src={coverSrc} alt={title} class="h-full w-full object-cover" loading="lazy" />
+<a
+	href="/novels/{novel.id}"
+	class="block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg"
+>
+	<Card class="overflow-hidden border shadow-sm transition-shadow hover:shadow-md h-full pt-0 gap-0">
+		<div class="relative">
+			{#if coverSrc}
+				<div class="aspect-[3/4] w-full overflow-hidden bg-muted/50">
+					<img src={coverSrc} alt={title} class="h-full w-full object-cover" loading="lazy" />
+				</div>
+			{:else}
+				<div class="aspect-[3/4] w-full bg-muted/50"></div>
+			{/if}
+			<Badge
+				class="absolute top-2 right-2 {statusColor} shadow-sm"
+				aria-label="Status: {statusLabel}"
+			>
+				{statusLabel}
+			</Badge>
 		</div>
-	{:else}
-		<div class="aspect-[3/4] w-full bg-muted/50"></div>
-	{/if}
-	<CardHeader class="space-y-2">
-		<CardTitle class="line-clamp-2 text-lg leading-tight">
-			{title}
-		</CardTitle>
-	</CardHeader>
-	<CardContent class="pt-0">
-		<p class="line-clamp-3 text-sm text-muted-foreground">
-			{description}
-		</p>
-	</CardContent>
-</Card>
+		<CardHeader class="space-y-2 pt-4">
+			<CardTitle class="line-clamp-2 text-lg leading-tight" title={title}>
+				{title}
+			</CardTitle>
+		</CardHeader>
+		<CardContent class="pt-0 pb-4 space-y-3">
+			<p class="line-clamp-3 text-sm text-muted-foreground" title={description}>
+				{description}
+			</p>
+			{#if chapterDisplay || relativeTime}
+				<div class="flex items-center gap-1 text-xs text-muted-foreground/80">
+					{#if chapterDisplay}
+						<span>{chapterDisplay}</span>
+					{/if}
+					{#if chapterDisplay && relativeTime}
+						<span aria-hidden="true">·</span>
+					{/if}
+					{#if relativeTime && absoluteTime}
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger class="cursor-default hover:text-foreground transition-colors">
+									<time datetime={lastUpdated?.toISOString()}>{relativeTime}</time>
+								</TooltipTrigger>
+								<TooltipContent>
+									{absoluteTime}
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					{/if}
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+</a>
--- a/fictionarchive-web-astro/src/lib/components/RecentlyUpdatedSection.svelte
+++ b/fictionarchive-web-astro/src/lib/components/RecentlyUpdatedSection.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { client } from '$lib/graphql/client';
+	import { NovelsDocument, type NovelsQuery } from '$lib/graphql/__generated__/graphql';
+	import NovelCard from './NovelCard.svelte';
+	import Clock from '@lucide/svelte/icons/clock';
+
+	type NovelEdge = NonNullable<NovelsQuery['novels']>['edges'][number];
+
+	let edges: NovelEdge[] = $state([]);
+	let fetching = $state(true);
+	let error: string | null = $state(null);
+
+	const novels = $derived(edges.map((edge) => edge.node).filter(Boolean).slice(0, 5));
+
+	async function fetchRecentNovels() {
+		fetching = true;
+		error = null;
+
+		try {
+			const result = await client.query(NovelsDocument, { first: 5 }).toPromise();
+
+			if (result.error) {
+				error = result.error.message;
+				return;
+			}
+
+			if (result.data?.novels) {
+				edges = result.data.novels.edges;
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Unknown error';
+		} finally {
+			fetching = false;
+		}
+	}
+
+	onMount(() => {
+		fetchRecentNovels();
+	});
+</script>
+
+<section class="space-y-4">
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-2">
+			<Clock class="h-5 w-5 text-muted-foreground" />
+			<h2 class="text-xl font-semibold">Recently Updated</h2>
+		</div>
+		<a
+			href="/novels"
+			class="text-sm text-muted-foreground transition-colors hover:text-primary"
+		>
+			View all
+		</a>
+	</div>
+
+	{#if fetching}
+		<div class="flex items-center justify-center py-8">
+			<div
+				class="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent"
+				aria-label="Loading novels"
+			></div>
+		</div>
+	{:else if error}
+		<div class="rounded-xl border border-destructive/40 bg-destructive/5 p-4">
+			<p class="text-sm text-destructive">Could not load novels: {error}</p>
+		</div>
+	{:else if novels.length === 0}
+		<div class="rounded-xl border bg-muted/50 p-4">
+			<p class="text-sm text-muted-foreground">No novels found yet.</p>
+		</div>
+	{:else}
+		<div class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
+			{#each novels as novel (novel.id)}
+				<a href="/novels/{novel.id}" class="block">
+					<NovelCard {novel} />
+				</a>
+			{/each}
+		</div>
+	{/if}
+</section>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/index.ts
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/index.ts
@@ -0,0 +1,28 @@
+import Root from "./navigation-menu.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Link from "./navigation-menu-link.svelte";
+import List from "./navigation-menu-list.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+
+export {
+	Root,
+	Content,
+	Indicator,
+	Item,
+	Link,
+	List,
+	Trigger,
+	Viewport,
+	//
+	Root as NavigationMenuRoot,
+	Content as NavigationMenuContent,
+	Indicator as NavigationMenuIndicator,
+	Item as NavigationMenuItem,
+	Link as NavigationMenuLink,
+	List as NavigationMenuList,
+	Trigger as NavigationMenuTrigger,
+	Viewport as NavigationMenuViewport,
+};
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ContentProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Content
+	bind:ref
+	data-slot="navigation-menu-content"
+	class={cn(
+		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-end-52 data-[motion=from-start]:slide-in-from-start-52 data-[motion=to-end]:slide-out-to-end-52 data-[motion=to-start]:slide-out-to-start-52 start-0 top-0 w-full md:absolute md:w-auto",
+		"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200",
+		className
+	)}
+	{...restProps}
+/>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.IndicatorProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Indicator
+	bind:ref
+	data-slot="navigation-menu-indicator"
+	class={cn(
+		"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	<div class="bg-border rounded-ts-sm relative top-[60%] h-2 w-2 rotate-45 shadow-md"></div>
+</NavigationMenuPrimitive.Indicator>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ItemProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Item
+	bind:ref
+	data-slot="navigation-menu-item"
+	class={cn("relative", className)}
+	{...restProps}
+/>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.LinkProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Link
+	bind:ref
+	data-slot="navigation-menu-link"
+	class={cn(
+		"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-all focus-visible:outline-1 focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ListProps = $props();
+</script>
+
+<NavigationMenuPrimitive.List
+	bind:ref
+	data-slot="navigation-menu-list"
+	class={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+	{...restProps}
+/>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" module>
+	import { cn } from "$lib/utils.js";
+	import { tv } from "tailwind-variants";
+
+	export const navigationMenuTriggerStyle = tv({
+		base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+	});
+</script>
+
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.TriggerProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Trigger
+	bind:ref
+	data-slot="navigation-menu-trigger"
+	class={cn(navigationMenuTriggerStyle(), "group", className)}
+	{...restProps}
+>
+	{@render children?.()}
+
+	<ChevronDownIcon
+		class="relative top-[1px] ms-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+		aria-hidden="true"
+	/>
+</NavigationMenuPrimitive.Trigger>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ViewportProps = $props();
+</script>
+
+<div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
+	<NavigationMenuPrimitive.Viewport
+		bind:ref
+		data-slot="navigation-menu-viewport"
+		class={cn(
+			"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--bits-navigation-menu-viewport-width)]",
+			className
+		)}
+		{...restProps}
+	/>
+</div>
--- a/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/navigation-menu/navigation-menu.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import NavigationMenuViewport from "./navigation-menu-viewport.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		viewport = true,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.RootProps & {
+		viewport?: boolean;
+	} = $props();
+</script>
+
+<NavigationMenuPrimitive.Root
+	bind:ref
+	data-slot="navigation-menu"
+	data-viewport={viewport}
+	class={cn(
+		"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+
+	{#if viewport}
+		<NavigationMenuViewport />
+	{/if}
+</NavigationMenuPrimitive.Root>
--- a/fictionarchive-web-astro/src/lib/components/ui/tooltip/index.ts
+++ b/fictionarchive-web-astro/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,18 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	//
+	Root as Tooltip,
+	Trigger as TooltipTrigger,
+	Content as TooltipContent,
+	Provider as TooltipProvider
+};
--- a/fictionarchive-web-astro/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/fictionarchive-web-astro/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		class: className,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		class={cn(
+			'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+			className
+		)}
+		{...restProps}
+	/>
+</TooltipPrimitive.Portal>
--- a/fictionarchive-web-astro/src/lib/graphql/generated/graphql.ts
+++ b/fictionarchive-web-astro/src/lib/graphql/generated/graphql.ts
@@ -779,7 +779,7 @@ export type NovelsQueryVariables = Exact<{
 }>;


-export type NovelsQuery = { novels: { edges: Array<{ cursor: string, node: { id: any, url: string, name: { texts: Array<{ language: Language, text: string }> }, description: { texts: Array<{ language: Language, text: string }> }, coverImage: { originalPath: string, newPath: string | null } | null } }> | null, pageInfo: { hasNextPage: boolean, endCursor: string | null } } | null };
+export type NovelsQuery = { novels: { edges: Array<{ cursor: string, node: { id: any, url: string, rawStatus: NovelStatus, lastUpdatedTime: any, name: { texts: Array<{ language: Language, text: string }> }, description: { texts: Array<{ language: Language, text: string }> }, coverImage: { originalPath: string, newPath: string | null } | null, chapters: Array<{ order: any, name: { texts: Array<{ language: Language, text: string }> } }> } }> | null, pageInfo: { hasNextPage: boolean, endCursor: string | null } } | null };


-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"}}}],"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"}}}],"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"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"texts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"description"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"texts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalPath"}},{"kind":"Field","name":{"kind":"Name","value":"newPath"}}]}}]}}]}},{"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"}}}],"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"}}}],"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"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"texts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"description"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"texts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"originalPath"}},{"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"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"texts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}}]}}]}}]}},{"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>;
--- a/fictionarchive-web-astro/src/lib/graphql/queries/novels.graphql
+++ b/fictionarchive-web-astro/src/lib/graphql/queries/novels.graphql
@@ -21,6 +21,17 @@ query Novels($first: Int, $after: String) {
          originalPath
          newPath
        }
+        rawStatus
+        lastUpdatedTime
+        chapters {
+          order
+          name {
+            texts {
+              language
+              text
+            }
+          }
+        }
      }
    }
    pageInfo {
--- a/fictionarchive-web-astro/src/lib/utils/time.ts
+++ b/fictionarchive-web-astro/src/lib/utils/time.ts
@@ -0,0 +1,23 @@
+import { formatDistanceToNow, format, differenceInDays } from 'date-fns';
+
+/**
+ * Formats a date as relative time (e.g., "2 hours ago") if within 7 days,
+ * otherwise returns an absolute date (e.g., "Mar 15").
+ */
+export function formatRelativeTime(date: Date | string): string {
+	const d = typeof date === 'string' ? new Date(date) : date;
+	const daysDiff = differenceInDays(new Date(), d);
+
+	if (daysDiff <= 7) {
+		return formatDistanceToNow(d, { addSuffix: true });
+	}
+	return format(d, 'MMM d');
+}
+
+/**
+ * Formats a date as an absolute timestamp (e.g., "Mar 15, 2024, 3:30 PM").
+ */
+export function formatAbsoluteTime(date: Date | string): string {
+	const d = typeof date === 'string' ? new Date(date) : date;
+	return format(d, 'PPpp');
+}
--- a/fictionarchive-web-astro/src/pages/index.astro
+++ b/fictionarchive-web-astro/src/pages/index.astro
@@ -2,9 +2,9 @@
 export const prerender = true; // Static page

 import AppLayout from '../layouts/AppLayout.astro';
-import NovelsPage from '../lib/components/NovelsPage.svelte';
+import HomePage from '../lib/components/HomePage.svelte';
 ---

-<AppLayout title="Novels - FictionArchive">
-	<NovelsPage client:load />
+<AppLayout title="FictionArchive - Your Personal Fiction Library">
+	<HomePage client:load />
 </AppLayout>
--- a/fictionarchive-web-astro/src/pages/novels/index.astro
+++ b/fictionarchive-web-astro/src/pages/novels/index.astro
@@ -0,0 +1,10 @@
+---
+export const prerender = true; // Static page
+
+import AppLayout from '../../layouts/AppLayout.astro';
+import NovelsPage from '../../lib/components/NovelsPage.svelte';
+---
+
+<AppLayout title="Novels - FictionArchive">
+	<NovelsPage client:load />
+</AppLayout>