6 files changed, 37 insertions, 54 deletions
diff --git a/frontend/src/lib/tabs/ArchiveDelete.svelte b/frontend/src/lib/tabs/ArchiveDelete.svelte
index 50a99c2..d2b2465 100644
--- a/frontend/src/lib/tabs/ArchiveDelete.svelte
+++ b/frontend/src/lib/tabs/ArchiveDelete.svelte
@@ -21,21 +21,12 @@
 </script>
 
 <div class="flex flex-col gap-2">
-	<div>
-		<p>
-			Deleting this archive will remove the
-			<span class="cursor-help font-medium underline" title={archive.path}>archive file</span> on disk.
-		</p>
-		{#if archive.comics.length > 0}
-			<p>The following comics will also be deleted:</p>
-			<ul class="ml-8 list-disc">
-				{#each archive.comics as comic}
-					<li><a href="/comics/{comic.id}" class="underline">{comic.title}</a></li>
-				{/each}
-			</ul>
-		{/if}
-		<p class="mt-2 font-medium">This action is irrevocable.</p>
-	</div>
+	<p>
+		Deleting this archive will remove all of its comics as well as the
+		<span class="cursor-help font-medium underline" title={archive.path}>archive file</span> on
+		disk.
+		<span class="font-medium">This action is irrevocable.</span>
+	</p>
 	<div class="flex">
 		<DeleteButton prominent onclick={deleteArchive} />
 	</div>
diff --git a/frontend/src/lib/tabs/ArchiveDetails.svelte b/frontend/src/lib/tabs/ArchiveDetails.svelte
index b3d570f..c1ad68e 100644
--- a/frontend/src/lib/tabs/ArchiveDetails.svelte
+++ b/frontend/src/lib/tabs/ArchiveDetails.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { FullArchiveFragment } from '$gql/graphql';
 	import { formatListSize, joinText } from '$lib/Utils';
-	import Card, { comicCard } from '$lib/components/Card.svelte';
-	import ComicPills from '$lib/pills/ComicPills.svelte';
+	import ComicCard from '$lib/components/ComicCard.svelte';
 	import { formatDistance, formatISO9075 } from 'date-fns';
 	import { filesize } from 'filesize';
 	import Header from './DetailsHeader.svelte';
@@ -39,10 +38,8 @@
 		<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)}>
-						<ComicPills {comic} />
-					</Card>
+				{#each archive.comics as comic (comic.id)}
+					<ComicCard compact {comic} />
 				{/each}
 			</div>
 		</div>
diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte
index 83a492b..c6ea684 100644
--- a/frontend/src/lib/tabs/ArchiveEdit.svelte
+++ b/frontend/src/lib/tabs/ArchiveEdit.svelte
@@ -3,9 +3,8 @@
 	import { type FullArchiveFragment } from '$gql/graphql';
 	import { toastFinally } from '$lib/Toasts';
 	import AddButton from '$lib/components/AddButton.svelte';
-	import Card, { comicCard } from '$lib/components/Card.svelte';
+	import ComicCard from '$lib/components/ComicCard.svelte';
 	import OrganizedButton from '$lib/components/OrganizedButton.svelte';
-	import ComicPills from '$lib/pills/ComicPills.svelte';
 	import { getSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
 	import { getContextClient } from '@urql/svelte';
@@ -56,13 +55,12 @@
 		<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)}>
+				{#each archive.comics as comic (comic.id)}
+					<ComicCard compact {comic}>
 						{#snippet overlay()}
 							<AddOverlay id={comic.id} />
 						{/snippet}
-						<ComicPills {comic} />
-					</Card>
+					</ComicCard>
 				{/each}
 			</div>
 		</div>
diff --git a/frontend/src/lib/tabs/ComicDelete.svelte b/frontend/src/lib/tabs/ComicDelete.svelte
index 3ae924c..93fa106 100644
--- a/frontend/src/lib/tabs/ComicDelete.svelte
+++ b/frontend/src/lib/tabs/ComicDelete.svelte
@@ -21,13 +21,12 @@
 </script>
 
 <div class="flex flex-col gap-2">
-	<div>
-		<p>
-			Deleting this comic will make all of its pages available again for allocation. All of its
-			metadata will be lost.
-		</p>
-		<p class="mt-2 font-medium">This action is irrevocable.</p>
-	</div>
+	<p>
+		Deleting this comic will make all of its pages available again for allocation. All of its
+		metadata will be lost.
+		<span class="font-medium">This action is irrevocable.</span>
+	</p>
+
 	<div class="flex">
 		<DeleteButton prominent {onclick} />
 	</div>
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 887b7a5..3f9090e 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComicFilter, FullComicFragment } from '$gql/graphql';
+	import { type ComicFilter, type FullComicFragment } from '$gql/graphql';
 	import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums';
 	import { href } from '$lib/Navigation';
 	import { formatListSize, joinText } from '$lib/Utils';
-	import AssociationPill from '$lib/pills/AssociationPill.svelte';
+	import Pill from '$lib/pills/Pill.svelte';
 	import TagPill from '$lib/pills/TagPill.svelte';
 	import { formatDistance, formatISO9075 } from 'date-fns';
 	import Header from './DetailsHeader.svelte';
@@ -27,18 +27,6 @@
 
 <div class="flex flex-col gap-4 text-sm">
 	<Header {title}>
-		{#if comic.url}
-			<a
-				href={comic.url}
-				target="_blank"
-				rel="noreferrer"
-				class="btn-slate"
-				title="Open URL"
-				aria-label="Open URL"
-			>
-				<span class="icon-base icon-[material-symbols--link]"></span>
-			</a>
-		{/if}
 		<a
 			href={`/archives/${comic.archive.id}`}
 			class="btn-slate"
@@ -85,11 +73,21 @@
 		</Section>
 	</div>
 
+	{#if comic.url}
+		<Section title="URL">
+			<a
+				class="ellipsis-nowrap transition-colors hover:text-white hover:underline"
+				rel="noreferrer"
+				href={comic.url}>{comic.url}</a
+			>
+		</Section>
+	{/if}
+
 	{#if comic.artists.length}
 		<Section title="Artists">
 			{#each comic.artists as { id, name } (id)}
 				<a href={filterFor('artists', id)}>
-					<AssociationPill {name} type="artist" />
+					<Pill highlight {name} style="artist" />
 				</a>
 			{/each}
 		</Section>
@@ -98,7 +96,7 @@
 		<Section title="Circles">
 			{#each comic.circles as { id, name } (id)}
 				<a href={filterFor('circles', id)}>
-					<AssociationPill {name} type="circle" />
+					<Pill highlight {name} style="circle" />
 				</a>
 			{/each}
 		</Section>
@@ -107,7 +105,7 @@
 		<Section title="Characters">
 			{#each comic.characters as { id, name } (id)}
 				<a href={filterFor('characters', id)}>
-					<AssociationPill {name} type="character" />
+					<Pill highlight {name} style="character" />
 				</a>
 			{/each}
 		</Section>
@@ -116,7 +114,7 @@
 		<Section title="Worlds">
 			{#each comic.worlds as { id, name } (id)}
 				<a href={filterFor('worlds', id)}>
-					<AssociationPill {name} type="world" />
+					<Pill highlight {name} style="world" />
 				</a>
 			{/each}
 		</Section>
@@ -125,7 +123,7 @@
 		<Section title="Tags">
 			{#each comic.tags as { id, name, description } (id)}
 				<a href={filterFor('tags', id)}>
-					<TagPill {name} {description} />
+					<TagPill highlight {name} {description} />
 				</a>
 			{/each}
 		</Section>
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index c2b12af..59b3220 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -31,7 +31,7 @@
 <div class="flex h-full max-h-full flex-col">
 	<nav>
 		<ul class="ms-1 me-3 flex border-b-2 border-slate-700 text-sm">
-			{#each Object.entries(context.tabs) as [id, { title }]}
+			{#each Object.entries(context.tabs) as [id, { title }] (id)}
 				<li class="-mb-0.5">
 					<button
 						type="button"