frontend: Introduce ComicCard and ArchiveCard

Instead of repeatedly supplying Card content in all the places it is
required, it makes more sense to create dedicated ComicCard and
ArchiveCard components. These wrap around Card itself and can be used in
a more straightforward and consistent fashion.

Whilst we are here, simplify and streamline the display of Comic and
Archive metadata by introducing a Card footer. The footer is used for
information on page count, release date, and archive size.

3 files changed, 12 insertions, 28 deletions

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d2a59c8..237b573 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 	import { href } from '$lib/Navigation';
 	import { fadeDefault } from '$lib/Transitions';
 	import logo from '$lib/assets/logo.webp';
-	import Card, { comicCard } from '$lib/components/Card.svelte';
+	import ComicCard from '$lib/components/ComicCard.svelte';
 	import Guard from '$lib/components/Guard.svelte';
 	import Head from '$lib/components/Head.svelte';
 	import Carousel from '$lib/containers/Carousel.svelte';
@@ -52,21 +52,21 @@
 			{#if recent && recent.count > 0}
 				<Carousel title="Recently added" href={recentLink}>
 					{#each recent.edges as comic}
-						<Card coverOnly {...comicCard(comic)} />
+						<ComicCard coverOnly {comic} />
 					{/each}
 				</Carousel>
 			{/if}
 			{#if favourites && favourites.count > 0}
 				<Carousel title="Favourites" href={favouriteLink}>
 					{#each favourites.edges as comic}
-						<Card coverOnly {...comicCard(comic)} />
+						<ComicCard coverOnly {comic} />
 					{/each}
 				</Carousel>
 			{/if}
 			{#if bookmarked && bookmarked.count > 0}
 				<Carousel title="Bookmarks" href={bookmarkLink}>
 					{#each bookmarked.edges as comic}
-						<Card coverOnly {...comicCard(comic)} />
+						<ComicCard coverOnly {comic} />
 					{/each}
 				</Carousel>
 			{/if}
diff --git a/frontend/src/routes/archives/+page.svelte b/frontend/src/routes/archives/+page.svelte
index b75c140..2bc6703 100644
--- a/frontend/src/routes/archives/+page.svelte
+++ b/frontend/src/routes/archives/+page.svelte
@@ -4,7 +4,7 @@
 	import type { ArchiveFragment } from '$gql/graphql';
 	import { ArchiveSortLabel } from '$lib/Enums';
 	import { ArchiveFilterContext } from '$lib/Filter.svelte';
-	import Card from '$lib/components/Card.svelte';
+	import ArchiveCard from '$lib/components/ArchiveCard.svelte';
 	import Empty from '$lib/components/Empty.svelte';
 	import Guard from '$lib/components/Guard.svelte';
 	import Head from '$lib/components/Head.svelte';
@@ -12,7 +12,6 @@
 	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 { initSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
@@ -26,7 +25,6 @@
 	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 { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -79,26 +77,14 @@
 		<Pagination {pagination} total={archives.count} />
 		<main>
 			<Cards>
-				{#each archives.edges as { id, name, cover, size, pageCount }, index (id)}
-					<Selectable {index} {id}>
+				{#each archives.edges as archive, index (archive.id)}
+					<Selectable {index} id={archive.id}>
 						{#snippet children({ onclick, selected })}
-							<Card href={id.toString()} details={{ title: name, cover }} {onclick}>
+							<ArchiveCard {archive} {onclick}>
 								{#snippet overlay()}
 									<SelectionOverlay position="left" {selected} />
 								{/snippet}
-								<div class="flex gap-1 text-xs">
-									<Pill name={`${pageCount} pages`}>
-										{#snippet icon()}
-											<span class="icon-[material-symbols--note] mr-0.5"></span>
-										{/snippet}
-									</Pill>
-									<Pill name={filesize(size, { base: 2 })}>
-										{#snippet icon()}
-											<span class="icon-[material-symbols--hard-drive] mr-0.5"></span>
-										{/snippet}
-									</Pill>
-								</div>
-							</Card>
+							</ArchiveCard>
 						{/snippet}
 					</Selectable>
 				{:else}
diff --git a/frontend/src/routes/comics/+page.svelte b/frontend/src/routes/comics/+page.svelte
index 03123be..11289e7 100644
--- a/frontend/src/routes/comics/+page.svelte
+++ b/frontend/src/routes/comics/+page.svelte
@@ -4,7 +4,7 @@
 	import { type ComicFragment } from '$gql/graphql';
 	import { ComicSortLabel } from '$lib/Enums';
 	import { ComicFilterContext } from '$lib/Filter.svelte';
-	import Card, { comicCard } from '$lib/components/Card.svelte';
+	import ComicCard from '$lib/components/ComicCard.svelte';
 	import Empty from '$lib/components/Empty.svelte';
 	import Guard from '$lib/components/Guard.svelte';
 	import Head from '$lib/components/Head.svelte';
@@ -13,7 +13,6 @@
 	import UpdateComicsDialog from '$lib/dialogs/UpdateComics.svelte';
 	import ComicFilterForm from '$lib/filter/ComicFilterForm.svelte';
 	import Pagination from '$lib/pagination/Pagination.svelte';
-	import ComicPills from '$lib/pills/ComicPills.svelte';
 	import Selectable from '$lib/selection/Selectable.svelte';
 	import { initSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
@@ -96,12 +95,11 @@
 				{#each comics.edges as comic, index (comic.id)}
 					<Selectable {index} id={comic.id}>
 						{#snippet children({ onclick, selected })}
-							<Card {...comicCard(comic)} {onclick}>
+							<ComicCard {comic} {onclick}>
 								{#snippet overlay()}
 									<SelectionOverlay position="left" {selected} />
 								{/snippet}
-								<ComicPills {comic} />
-							</Card>
+							</ComicCard>
 						{/snippet}
 					</Selectable>
 				{:else}