From 6087f5b5e60de9d38855d6ee71e5b3ff9f28684b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 15 Apr 2024 17:46:46 -0700
Subject: feat(badges): fade hidden badges in edit mode

---
 src/lib/FallbackImage.svelte               | 2 ++
 src/routes/user/[user]/badges/+page.svelte | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/lib/FallbackImage.svelte b/src/lib/FallbackImage.svelte
index 0ea49c6c..52f0324d 100644
--- a/src/lib/FallbackImage.svelte
+++ b/src/lib/FallbackImage.svelte
@@ -6,6 +6,7 @@
 	export let replaceDelay = 1000;
 	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
 	export let hideOnError = false;
+	export let style = '';
 
 	let replaceCount = 0;
 
@@ -27,6 +28,7 @@
 		loading="lazy"
 		class="badge"
 		on:error={(e) => delayedReplace(e, fallback)}
+		{style}
 	/>
 {:else if !hideOnError}
 	<img src={error} alt="Not found" loading="lazy" class="badge" />
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 233be31a..d55068e4 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -760,6 +760,7 @@
 														source={cdn(thumbnail(badge.image))}
 														alternative={badge.description}
 														fallback={thumbnail(badge.image)}
+														style={badge.hidden ? 'filter: grayscale(100%); opacity: 50%;' : ''}
 													/>
 												</a>
 											{:else}
-- 
cgit v1.2.3