[FA-misc] Various UI updates

fictionarchive-web-astro/src/lib/components/NovelCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	import type { NovelsQuery, NovelStatus } from '$lib/graphql/__generated__/graphql';
+	import { SystemTags } from '$lib/constants/systemTags';
 
 	export type NovelNode = NonNullable<NonNullable<NovelsQuery['novels']>['edges']>[number]['node'];
 
@@ -55,6 +56,8 @@
 	const status = $derived(novel.rawStatus ?? 'UNKNOWN');
 	const statusColor = $derived(statusColors[status]);
 	const statusLabel = $derived(statusLabels[status]);
+
+	const isNsfw = $derived(novel.tags?.some((tag) => tag.key === SystemTags.Nsfw) ?? false);
 </script>
 
 <a
@@ -76,6 +79,9 @@
 			>
 				{statusLabel}
 			</Badge>
+			{#if isNsfw}
+				<Badge class="absolute top-9 right-2 bg-red-600 text-white shadow-sm">NSFW</Badge>
+			{/if}
 		</div>
 		<CardHeader class="space-y-2 pt-4">
 			<CardTitle class="line-clamp-2 text-lg leading-tight" title={title}>