fix: missing fallback icon to failed service images (#116)

Author: dottmp

src/lib/components/icons/icons.svelte

@@ -66,6 +66,6 @@
 		social: UsersRound,
 		media: Film,
 		creativity: Paintbrush,
-		categoryFallback: Circle
+		fallback: Box
 	} as const;
 </script>

src/lib/features/awesome-privacy/components/category-icon.svelte

@@ -29,7 +29,7 @@
 	const slug = $derived(awesomePrivacy.slugify(category));
 
 	const IconComponent = $derived(
-		(categoryIcons as Record<string, typeof Icons.categoryFallback>)[slug] ?? Icons.categoryFallback
+		(categoryIcons as Record<string, typeof Icons.fallback>)[slug] ?? Icons.fallback
 	);
 </script>
 

src/lib/features/awesome-privacy/components/service-logo.svelte

@@ -3,6 +3,7 @@
 
 	import type { Service } from '../types';
 
+	import { Icons } from '$lib/components/icons/icons.svelte';
 	import { cn } from '$lib/utils/cn';
 
 	type ServiceLogoProps = HTMLAttributes<HTMLImageElement> & {
@@ -11,17 +12,28 @@
 
 	let { service, class: klass, ...props }: ServiceLogoProps = $props();
 
+	let error = $state(false);
+
 	const fallback = $derived(`https://icon.horse/icon/${service.url}`);
 </script>
 
-<img
-	referrerpolicy="no-referrer"
-	src={service.icon ?? fallback}
-	onerror={(e) => {
-		const target = e.target as HTMLImageElement;
-		if (target.src !== fallback) target.src = fallback;
-	}}
-	alt={service.name}
-	class={cn('shrink-0 object-contain', klass)}
-	{...props}
-/>
+{#if error}
+	<Icons.fallback class={cn('shrink-0', klass)} />
+{:else}
+	<img
+		referrerpolicy="no-referrer"
+		src={service.icon ?? fallback}
+		onerror={(e) => {
+			const target = e.target as HTMLImageElement;
+
+			if (target.src !== fallback) {
+				target.src = fallback;
+			} else if (target.src === fallback) {
+				error = true;
+			}
+		}}
+		alt={service.name}
+		class={cn('shrink-0 object-contain', klass)}
+		{...props}
+	/>
+{/if}