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.

1 files changed, 16 insertions, 23 deletions

diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index b8e8ecf..8cfe34d 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -1,5 +1,8 @@
-<script lang="ts" module>
-	import type { ComicFragment, ImageFragment } from '$gql/graphql';
+<script lang="ts">
+	import type { ImageFragment } from '$gql/graphql';
+	import { src } from '$lib/Utils';
+	import Star from '$lib/icons/Star.svelte';
+	import type { Snippet } from 'svelte';
 
 	interface CardDetails {
 		title: string;
@@ -8,24 +11,6 @@
 		cover?: ImageFragment;
 	}
 
-	export function comicCard(comic: ComicFragment) {
-		return {
-			href: `/comics/${comic.id.toString()}`,
-			details: {
-				title: comic.title,
-				subtitle: comic.originalTitle,
-				favourite: comic.favourite,
-				cover: comic.cover
-			}
-		};
-	}
-</script>
-
-<script lang="ts">
-	import { src } from '$lib/Utils';
-	import Star from '$lib/icons/Star.svelte';
-	import type { Snippet } from 'svelte';
-
 	interface Props {
 		href: string;
 		details: CardDetails;
@@ -33,6 +18,7 @@
 		coverOnly?: boolean;
 		overlay?: Snippet;
 		children?: Snippet;
+		footer?: Snippet;
 		onclick?: (event: MouseEvent) => void;
 	}
 
@@ -43,6 +29,7 @@
 		coverOnly = false,
 		overlay,
 		children,
+		footer,
 		onclick
 	}: Props = $props();
 </script>
@@ -66,8 +53,8 @@
 		/>
 	{/if}
 	{#if !coverOnly}
-		<article class="flex h-full flex-col gap-2 p-2">
-			<header>
+		<article class="p flex h-full flex-col p-2 pb-1">
+			<header class="mb-2">
 				<h2 class="self-center text-sm font-medium [grid-area:title]" title={details.title}>
 					{details.title}
 				</h2>
@@ -86,9 +73,15 @@
 				{/if}
 			</header>
 
-			<section class="max-h-full grow overflow-auto border-t border-slate-800/80 pt-2 text-xs">
+			<section class="max-h-full grow overflow-auto border-y border-slate-800/80 pt-2 text-xs">
 				{@render children?.()}
 			</section>
+
+			{#if footer}
+				<div class="mt-1 text-xs">
+					{@render footer()}
+				</div>
+			{/if}
 		</article>
 	{/if}
 </a>