feat(badges): optionally hide missing badges

3 files changed, 83 insertions, 1 deletions

diff --git a/src/lib/Database/userPreferences.ts b/src/lib/Database/userPreferences.ts
index ca872ea5..988ca0c0 100644
--- a/src/lib/Database/userPreferences.ts
+++ b/src/lib/Database/userPreferences.ts
@@ -61,3 +61,15 @@ export const toggleHololiveStreamPinning = async (userId: number, streamId: stri
 		hide_missing_badges: userPreferences.hide_missing_badges
 	});
 };
+
+export const toggleHideMissingBadges = async (userId: number) => {
+	const userPreferences = await getUserPreferences(userId);
+
+	if (!userPreferences) return null;
+
+	return await setUserPreferences(userId, {
+		updated_at: new Date().toISOString(),
+		pinned_hololive_streams: userPreferences.pinned_hololive_streams,
+		hide_missing_badges: !userPreferences.hide_missing_badges
+	});
+};
diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
new file mode 100644
index 00000000..faa021d4
--- /dev/null
+++ b/src/lib/FallbackBadge.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import locale from '$stores/locale';
+	import type { Badge } from './Database/userBadges';
+	import tooltip from './Tooltip/tooltip';
+	import { databaseTimeToDate } from './Utility/time';
+
+	export let source: string | undefined;
+	export let alternative: string | undefined;
+	export let fallback: string | undefined;
+	export let maxReplaceCount = 1;
+	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 badge: Badge;
+
+	let replaceCount = 0;
+
+	const delayedReplace = (event: Event, image: string | undefined) => {
+		if (replaceCount >= maxReplaceCount) return;
+
+		setTimeout(() => {
+			(event.target as HTMLImageElement).src = image || '';
+
+			replaceCount += 1;
+		}, replaceDelay);
+	};
+</script>
+
+{#if replaceCount < maxReplaceCount}
+	<a
+		href={badge.post}
+		target="_blank"
+		id={`badge-${badge.id}`}
+		class="badge"
+		title={`${badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''}${
+			badge.description ? `\n${badge.description}` : ''
+		}`}
+		use:tooltip
+	>
+		<img
+			src={source}
+			alt={alternative}
+			loading="lazy"
+			class="badge"
+			on:error={(e) => delayedReplace(e, fallback)}
+		/>
+	</a>
+{:else if !hideOnError}
+	<img src={error} alt="Not found" loading="lazy" class="badge" />
+{/if}
+
+<style>
+	.badge {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		transition: transform 0.3s ease;
+		box-sizing: border-box;
+		border-radius: 8px;
+	}
+
+	.badge:hover {
+		transform: scale(1.05);
+		position: relative;
+		z-index: 2;
+		transition: transform 0.3s ease;
+	}
+</style>
diff --git a/src/lib/FallbackImage.svelte b/src/lib/FallbackImage.svelte
index 4a53698d..0ea49c6c 100644
--- a/src/lib/FallbackImage.svelte
+++ b/src/lib/FallbackImage.svelte
@@ -5,6 +5,7 @@
 	export let maxReplaceCount = 1;
 	export let replaceDelay = 1000;
 	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
+	export let hideOnError = false;
 
 	let replaceCount = 0;
 
@@ -27,7 +28,7 @@
 		class="badge"
 		on:error={(e) => delayedReplace(e, fallback)}
 	/>
-{:else}
+{:else if !hideOnError}
 	<img src={error} alt="Not found" loading="lazy" class="badge" />
 {/if}