4 files changed, 235 insertions, 0 deletions
diff --git a/frontend/src/routes/archives/+page.svelte b/frontend/src/routes/archives/+page.svelte
new file mode 100644
index 0000000..545058a
--- /dev/null
+++ b/frontend/src/routes/archives/+page.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { deleteArchives, updateArchives } from '$gql/Mutations';
+	import { archivesQuery } from '$gql/Queries';
+	import type { ArchiveFragment } from '$gql/graphql';
+	import { ArchiveSortLabel } from '$lib/Enums';
+	import { ArchiveFilterContext, initFilterContext } from '$lib/Filter';
+	import { initPaginationContext } from '$lib/Pagination';
+	import { initSelectionContext } from '$lib/Selection';
+	import { initSortContext } from '$lib/Sort';
+	import Card from '$lib/components/Card.svelte';
+	import Empty from '$lib/components/Empty.svelte';
+	import Guard from '$lib/components/Guard.svelte';
+	import Head from '$lib/components/Head.svelte';
+	import RefreshButton from '$lib/components/RefreshButton.svelte';
+	import Cards from '$lib/containers/Cards.svelte';
+	import Column from '$lib/containers/Column.svelte';
+	import Pagination from '$lib/pagination/Pagination.svelte';
+	import Pill from '$lib/pills/Pill.svelte';
+	import Selectable from '$lib/selection/Selectable.svelte';
+	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
+	import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte';
+	import FilterOrganized from '$lib/toolbar/FilterOrganized.svelte';
+	import MarkOrganized from '$lib/toolbar/MarkOrganized.svelte';
+	import MarkSelection from '$lib/toolbar/MarkSelection.svelte';
+	import Search from '$lib/toolbar/Search.svelte';
+	import SelectItems from '$lib/toolbar/SelectItems.svelte';
+	import SelectSort from '$lib/toolbar/SelectSort.svelte';
+	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
+	import Toolbar from '$lib/toolbar/Toolbar.svelte';
+	import { getContextClient } from '@urql/svelte';
+	import { filesize } from 'filesize';
+	import type { PageData } from './$types';
+
+	let client = getContextClient();
+
+	export let data: PageData;
+
+	$: result = archivesQuery(client, {
+		pagination: data.pagination,
+		filter: data.filter,
+		sort: data.sort
+	});
+
+	$: archives = $result.data?.archives;
+
+	const selection = initSelectionContext<ArchiveFragment>('Archive', (a) => a.name);
+	$: if (archives) {
+		$selection.view = archives.edges;
+		$pagination.total = archives.count;
+	}
+
+	const pagination = initPaginationContext();
+	$: $pagination.update = data.pagination;
+
+	const filter = initFilterContext<ArchiveFilterContext>();
+	$: $filter = new ArchiveFilterContext(data.filter);
+
+	const sort = initSortContext(data.sort, ArchiveSortLabel);
+	$: $sort.update = data.sort;
+
+	function refresh() {
+		result.reexecute({ requestPolicy: 'network-only' });
+	}
+</script>
+
+<Head section="Archives" />
+
+<Column>
+	<Toolbar>
+		<SelectionControls slot="start">
+			<MarkSelection>
+				<MarkOrganized mutation={updateArchives} />
+			</MarkSelection>
+			<DeleteSelection
+				mutation={deleteArchives}
+				warning="Deleting an archive will also delete its archive file on disk as well as all comics that belong to it."
+			/>
+		</SelectionControls>
+		<svelte:fragment slot="center">
+			<Search name="Archives" bind:field={$filter.include.controls.path.contains} />
+			<FilterOrganized />
+			<SelectSort />
+			<SelectItems />
+		</svelte:fragment>
+		<RefreshButton slot="end" on:click={refresh} />
+	</Toolbar>
+	{#if archives}
+		<Pagination />
+		<main>
+			<Cards>
+				{#each archives.edges as { id, name, cover, size, pageCount }, index (id)}
+					<Selectable {index} {id} let:handle let:selected>
+						<Card
+							ellipsis={false}
+							href={id.toString()}
+							details={{ title: name, cover: cover }}
+							on:click={handle}
+						>
+							<SelectionOverlay position="left" {selected} slot="overlay" />
+							<div class="flex gap-1 text-xs">
+								<Pill name={`${pageCount} pages`}>
+									<span class="icon-[material-symbols--note] mr-0.5" slot="icon" />
+								</Pill>
+								<Pill name={filesize(size, { base: 2 })}>
+									<span class="icon-[material-symbols--hard-drive] mr-0.5" slot="icon" />
+								</Pill>
+							</div>
+						</Card>
+					</Selectable>
+				{:else}
+					<Empty />
+				{/each}
+			</Cards>
+		</main>
+		<Pagination />
+	{:else}
+		<Guard {result} />
+	{/if}
+</Column>
diff --git a/frontend/src/routes/archives/+page.ts b/frontend/src/routes/archives/+page.ts
new file mode 100644
index 0000000..88acade
--- /dev/null
+++ b/frontend/src/routes/archives/+page.ts
@@ -0,0 +1,12 @@
+import { ArchiveSort, type ArchiveFilterInput } from '$gql/graphql';
+import { parseFilter, parsePaginationData, parseSortData } from '$lib/Navigation';
+
+export const trailingSlash = 'always';
+
+export function load({ url }: { url: URL; params: Record<string, string> }) {
+	return {
+		sort: parseSortData(url.searchParams, ArchiveSort.Path),
+		filter: parseFilter<ArchiveFilterInput>(url.searchParams),
+		pagination: parsePaginationData(url.searchParams, 24)
+	};
+}
diff --git a/frontend/src/routes/archives/[id]/+page.svelte b/frontend/src/routes/archives/[id]/+page.svelte
new file mode 100644
index 0000000..50a2940
--- /dev/null
+++ b/frontend/src/routes/archives/[id]/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { updateArchives } from '$gql/Mutations';
+	import { archiveQuery } from '$gql/Queries';
+	import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql';
+	import { initReaderContext } from '$lib/Reader';
+	import { initSelectionContext } from '$lib/Selection';
+	import { setTabContext } from '$lib/Tabs';
+	import { toastFinally } from '$lib/Toasts';
+	import Guard from '$lib/components/Guard.svelte';
+	import Head from '$lib/components/Head.svelte';
+	import Titlebar from '$lib/components/Titlebar.svelte';
+	import Grid from '$lib/containers/Grid.svelte';
+	import Gallery from '$lib/gallery/Gallery.svelte';
+	import PageView from '$lib/reader/PageView.svelte';
+	import Reader from '$lib/reader/Reader.svelte';
+	import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte';
+	import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte';
+	import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte';
+	import Tab from '$lib/tabs/Tab.svelte';
+	import Tabs from '$lib/tabs/Tabs.svelte';
+	import { getContextClient } from '@urql/svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	const client = getContextClient();
+	const reader = initReaderContext();
+	setTabContext({
+		tabs: {
+			details: { title: 'Details' },
+			edit: { title: 'Edit' },
+			deletion: { title: 'Delete' }
+		},
+		current: 'details'
+	});
+
+	$: result = archiveQuery(client, { id: data.id });
+
+	function updateCover(event: CustomEvent<number>) {
+		updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch(
+			toastFinally
+		);
+	}
+
+	let archive: FullArchiveFragment;
+
+	$: $result, update();
+	function update() {
+		if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
+			archive = structuredClone($result.data.archive);
+
+			$reader.pages = archive.pages;
+		}
+	}
+
+	const selection = initSelectionContext<PageFragment>('Page', (p) => p.path);
+	$selection.selectable = (p) => p.comicId === null;
+
+	$: if (archive) {
+		$selection.view = archive.pages;
+	}
+</script>
+
+<Head section="Archive" title={archive?.name} />
+
+{#if archive}
+	<Grid>
+		<header>
+			<Titlebar title={archive.name} />
+		</header>
+
+		<aside>
+			<Tabs>
+				<Tab id="details">
+					<ArchiveDetails {archive} />
+				</Tab>
+				<Tab id="edit">
+					<ArchiveEdit {archive} />
+				</Tab>
+				<Tab id="deletion">
+					<ArchiveDelete {archive} />
+				</Tab>
+			</Tabs>
+		</aside>
+
+		<main class="overflow-auto">
+			<Gallery
+				pages={archive.pages}
+				on:open={(e) => ($reader = $reader.open(e.detail))}
+				on:cover={updateCover}
+			/>
+		</main>
+	</Grid>
+{:else}
+	<Guard {result} />
+{/if}
+
+<Reader>
+	<PageView layout={Layout.Single} direction={Direction.LeftToRight} />
+</Reader>
diff --git a/frontend/src/routes/archives/[id]/+page.ts b/frontend/src/routes/archives/[id]/+page.ts
new file mode 100644
index 0000000..d872ba2
--- /dev/null
+++ b/frontend/src/routes/archives/[id]/+page.ts
@@ -0,0 +1,5 @@
+export function load({ params }: { params: Record<string, string> }) {
+	return {
+		id: +params.id
+	};
+}