problem: can't see profile pics

src/lib/components/UserProfilePic.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { kind0 } from '@/stores/user';
+	import { System } from '@/views/messages/snort';
+	import { RequestBuilder, type QueryLike } from '@snort/system';
+	import { nip19 } from 'nostr-tools';
+	import { onDestroy, onMount } from 'svelte';
+	import { derived } from 'svelte/store';
+
+	export let pubkey: string;
+	let q: QueryLike;
+
+	onMount(() => {
+		if (pubkey && pubkey.length == 64) {
+			if (!$kind0.get(pubkey)) {
+				const rb = new RequestBuilder(pubkey);
+				rb.withFilter().authors([pubkey]).kinds([0]);
+				rb.withOptions({ leaveOpen: false });
+				q = System.Query(rb);
+				q.on('event', (evs) => {
+					if (evs.length > 0) {
+						kind0.update((existing) => {
+							for (let e of evs) {
+								let _existing = existing.get(e.pubkey);
+								if (!_existing || (_existing && _existing.created_at <= e.created_at)) {
+									existing.set(e.pubkey, e);
+								}
+							}
+							return existing;
+						});
+					}
+				});
+			}
+		}
+	});
+	onDestroy(() => {
+		if (q) {
+			q.cancel();
+		}
+	});
+
+	let profilePic = derived(kind0, ($kind0) => {
+		let content = $kind0.get(pubkey)?.content;
+		if (content) {
+			try {
+				let json = JSON.parse(content);
+                if (json.picture && json.picture.length > 6) {
+                    return json.picture
+                } else {
+                    return "https://assets.americanmeadows.com/media/catalog/product/h/o/horse-pasture-and-hay-seed-mix-horse.jpg"
+                }
+			} catch {}
+		}
+		return name;
+	});
+</script>
+<img
+class="w-8 h-8 rounded-full"
+src={$profilePic}
+alt="profile pic"
+/>

src/lib/views/messages/RenderKind1.svelte

@@ -10,6 +10,7 @@
 	import { onMount } from 'svelte';
 	import { viewed } from '@/snort_workers/main';
 	import UserDisplayName from '@/components/UserDisplayName.svelte';
+	import UserProfilePic from '@/components/UserProfilePic.svelte';
 
 	export let note: NostrEvent;
 	export let onClickReply: () => void;
@@ -32,12 +33,12 @@ onMount(() => {
 
 <div bind:this={top} class="w-full pt-2 pl-2 pr-2">
 	<div class="grid">
-		<div class="flex gap-2">
-			<img
+		<div class="flex gap-2"><UserProfilePic pubkey={note.pubkey} />
+			<!-- <img
 				class="w-8 h-8 rounded-full"
 				src="https://zenquotes.io/img/marcus-aurelius.jpg"
 				alt="profile pic"
-			/>
+			/> -->
 			<div class="grid">
 				<h5 class="text-gray-900 dark:text-orange-600 font-semibold leading-snug pb-1"><UserDisplayName pubkey={note.pubkey} /></h5> 
 				<div class="grid overflow-hidden mr-2 min-w-56">