1 files changed, 68 insertions, 0 deletions
diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte
new file mode 100644
index 0000000..80efaed
--- /dev/null
+++ b/frontend/src/lib/tabs/ArchiveEdit.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { addComic, updateArchives } from '$gql/Mutations';
+	import { type FullArchiveFragment } from '$gql/graphql';
+	import { getSelectionContext } from '$lib/Selection';
+	import { toastFinally } from '$lib/Toasts';
+	import AddButton from '$lib/components/AddButton.svelte';
+	import Card, { comicCard } from '$lib/components/Card.svelte';
+	import OrganizedButton from '$lib/components/OrganizedButton.svelte';
+	import ComicPills from '$lib/pills/ComicPills.svelte';
+	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
+	import { getContextClient } from '@urql/svelte';
+	import AddOverlay from './AddOverlay.svelte';
+
+	const client = getContextClient();
+	const selection = getSelectionContext();
+
+	export let archive: FullArchiveFragment;
+
+	function addNew() {
+		addComic(client, {
+			input: {
+				archive: { id: archive.id },
+				title: archive.name,
+				pages: { ids: $selection.ids },
+				cover: { id: archive.pages[$selection.indices.toSorted((a, b) => a - b)[0]].id }
+			}
+		})
+			.then((mutatation) => {
+				const data = mutatation.addComic;
+				if (data.__typename === 'AddComicSuccess' && !data.archivePagesRemaining) {
+					$selection = $selection.clear();
+				} else {
+					$selection = $selection.none();
+				}
+			})
+			.catch(toastFinally);
+	}
+
+	function toggleOrganized() {
+		updateArchives(client, { ids: archive.id, input: { organized: !archive.organized } }).catch(
+			toastFinally
+		);
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="flex gap-2 text-sm">
+		<SelectionControls page>
+			<AddButton title="Add Comic from selected" on:click={addNew} />
+		</SelectionControls>
+		<div class="grow" />
+		<OrganizedButton organized={archive.organized} on:click={toggleOrganized} />
+	</div>
+
+	{#if archive.comics.length > 0}
+		<div class="flex flex-col gap-1">
+			<h2 class="text-base font-medium">Comics</h2>
+			<div class="flex shrink-0 flex-col gap-4">
+				{#each archive.comics as comic}
+					<Card compact {...comicCard(comic)}>
+						<AddOverlay slot="overlay" id={comic.id} />
+						<ComicPills {comic} />
+					</Card>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>