Blur nsfw images on cards

This was meant to do this already, but I missed it, so nsfw images were showing unblurred when the blur setting is on.

Author: sheodox

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "Alexandrite",
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

package.json

@@ -18,6 +18,15 @@
 	.image-mode-thumbnail.blur:not(:hover) img {
 		filter: blur(10px);
 	}
+	.image-mode-full.blur {
+		// need to do this otherwise the blur overflows its container and goes all over the card
+		display: block;
+		overflow: hidden;
+
+		&:not(:hover) img {
+			filter: blur(40px);
+		}
+	}
 	img {
 		width: 100%;
 	}

src/lib/Image.svelte

@@ -16,14 +16,22 @@
 	}
 </style>
 
-<div class="card-image" class:nsfw={postView.post.nsfw || postView.community.nsfw}>
+<div class="card-image" class:nsfw={isNsfw}>
 	{#if (postView.post.nsfw || postView.community.nsfw) && $nsfwImageHandling === 'HIDE' && !showAnyway}
 		<div class="card-image-placeholder">
 			<button class="tertiary" on:click|stopPropagation={() => (showAnyway = true)}> Show NSFW </button>
 		</div>
 	{:else if postAssertions.imageSrc}
-		<!-- not passing nsfw, this component handles it otherwise we'd have nested buttons -->
-		<Image src={postAssertions.imageSrc} full resizable={false} lazy={false} loadingHeight="20rem" />
+		<!-- not passing nsfw when handling='show' this component handles it otherwise we'd have nested buttons,
+		but we need to still tell it when it needs to blur otherwise you see unblurred nsfw content -->
+		<Image
+			src={postAssertions.imageSrc}
+			full
+			resizable={false}
+			lazy={false}
+			loadingHeight="20rem"
+			nsfw={$nsfwImageHandling === 'BLUR' && isNsfw}
+		/>
 	{/if}
 </div>
 
@@ -39,4 +47,5 @@
 
 	let showAnyway = false;
 	$: postAssertions = makePostAssertions(postView);
+	$: isNsfw = postView.post.nsfw || postView.community.nsfw;
 </script>