problem: not clear who we are following

src/lib/components/UserProfilePic.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { FrontendDataStore } from '@/snort_workers/main';
 	import { kind0 } from '@/stores/user';
 	import { System } from '@/views/messages/snort';
 	import { RequestBuilder, type QueryLike } from '@snort/system';
@@ -54,9 +55,9 @@
 	});
 </script>
 <img
-class="w-8 h-8 rounded-full "
+class="w-8 h-8 rounded-full ring-2 {$FrontendDataStore.baseFollows.has(pubkey)?"ring-orange-500":"ring-gray-500"}"
 src={$profilePic}
-alt="profile pic"
+alt=""
 width="32px"
 height="32px"
 />

src/lib/views/messages/RenderKind1AsThreadHead.svelte

@@ -1,63 +1,26 @@
 <script lang="ts">
 	import RenderNoteContent from '@/components/RenderNoteContent.svelte';
-	import { PushEvent, viewed } from '@/snort_workers/main';
-	import { seedRelays } from '@/snort_workers/seed_relays';
+	import UserDisplayName from '@/components/UserDisplayName.svelte';
+	import UserProfilePic from '@/components/UserProfilePic.svelte';
+	import { viewed } from '@/snort_workers/main';
 	import type { FrontendData } from '@/snort_workers/types';
-	import { NostrSystem, RequestBuilder, type QueryLike } from '@snort/system';
 	import type { NostrEvent } from 'nostr-tools';
-	import { onDestroy, onMount } from 'svelte';
 	import { type Writable } from 'svelte/store';
-	import { System, init } from './snort';
 
 	export let note: NostrEvent;
 	export let store: Writable<FrontendData>;
 
 	let top: HTMLDivElement;
-	let q: QueryLike;
-
-	// onMount(() => {
-	// 	(async () => {
-	// 		// ID should be unique to the use case, this is important as all data fetched from this ID will be merged into the same NoteStore
-	// 		const rb = new RequestBuilder(`get-${note.id}`);
-	// 		rb.withFilter().tag('e', [note.id]).kinds([1]);
-	// 		rb.withOptions({ leaveOpen: false });
-	// 		q = System.Query(rb);
-	// 		// basic usage using "onEvent", fired every 100ms
-	// 		q.on('event', (evs) => {
-	// 			if (evs.length > 0) {
-	// 				console.log(35, evs);
-	// 				PushEvent(evs);
-	// 			}
-
-	// 			// something else..
-	// 		});
-	// 	})();
-
-	// 	(async () => {
-	// 		top.scrollIntoView();
-	// 		//top.scrollIntoView()
-	// 	})();
-	// });
-
-	// onDestroy(() => {
-	// 	if (q) {
-	// 		q.cancel();
-	// 	}
-	// });
 
 	$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
 </script>
 
 <div class="w-full pt-2">
 	<div class="grid">
 		<div class="flex gap-2">
-			<img
-				class="w-8 h-8 rounded-full"
-				src="https://zenquotes.io/img/marcus-aurelius.jpg"
-				alt="profile pic"
-			/>
+			<UserProfilePic pubkey={note.pubkey} />
 			<div class="grid">
-				<h5 class="text-gray-900 dark:text-orange-600 font-semibold leading-snug pb-1">Marcus</h5>
+				<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">
 					<div
 						class="px-3.5 py-2 bg-fuchsia-300 dark:bg-fuchsia-950 rounded-e-xl rounded-es-xl flex flex-col gap-2"