Add render support

src/app/components/ThreadItem.svelte

@@ -1,31 +1,17 @@
 <script lang="ts">
-  import {displayPubkey} from "@welshman/util"
-  import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
-  import Avatar from "@lib/components/Avatar.svelte"
+  import Content from "@app/components/Content.svelte"
+  import NoteCard from "@app/components/NoteCard.svelte"
 
   export let root
   export let replies
-
-  const profile = deriveProfile(root.pubkey)
-  const profileDisplay = deriveProfileDisplay(root.pubkey)
 </script>
 
 <div>
-  <div class="card2 flex flex-col gap-2">
-    <div class="flex items-center justify-between gap-2">
-      <div class="flex gap-2">
-        <div class="py-1">
-          <Avatar src={$profile?.picture} size={10} />
-        </div>
-        <div class="flex flex-col">
-          <div class="text-bold">{$profileDisplay}</div>
-          <div class="text-sm opacity-75">{displayPubkey(root.pubkey)}</div>
-        </div>
-      </div>
-      <span class="text-sm opacity-75">{formatTimestamp(root.created_at)}</span>
+  <NoteCard event={root} class="card2">
+    <div class="ml-12">
+      <Content event={root} />
     </div>
-    <div class="ml-12"></div>
-  </div>
+  </NoteCard>
   {#if replies.length > 0}
     Show {replies.length} {replies.length === 1 ? "reply" : "replies"}
   {/if}