feat: include passkey icons based on AAGUID (#1756)

frontend/src/lib/components/passkey-row.svelte

@@ -7,6 +7,7 @@
 
 	let {
 		icon,
+		providerIconUrl,
 		onRename,
 		onDelete,
 		showRenameAction = true,
@@ -14,18 +15,37 @@
 		description
 	}: {
 		icon: LucideIcon;
+		providerIconUrl?: string;
 		onRename?: () => void;
 		onDelete: () => void;
 		showRenameAction?: boolean;
 		description?: string;
 		label?: string;
 	} = $props();
+
+	// Falls back to the generic icon when the authenticator icon cannot be loaded
+	let iconFailed = $state(false);
+
+	// The row is reused across passkeys and themes, so a previous failure must not hide an icon that is now a different URL
+	$effect(() => {
+		void providerIconUrl;
+		iconFailed = false;
+	});
+
+	const showProviderIcon = $derived(!!providerIconUrl && !iconFailed);
 </script>
 
 <Item.Root variant="transparent" class="hover:bg-muted transition-colors py-3 px-0 sm:px-4">
-	<Item.Media class="bg-primary/10 text-primary rounded-full p-3">
-		{#if icon}{@const Icon = icon}
-			<Icon class="size-5" />
+	<Item.Media class="bg-muted text-muted-foreground size-11 rounded-xl">
+		{#if showProviderIcon}
+			<img
+				src={providerIconUrl}
+				alt=""
+				class="size-7 object-contain"
+				onerror={() => (iconFailed = true)}
+			/>
+		{:else if icon}{@const Icon = icon}
+			<Icon class="size-6" />
 		{/if}
 	</Item.Media>
 	<Item.Content class="gap-0.5">