Break out a few shared sub-components

src/app/components/ThreadItem.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import {nthEq} from "@welshman/lib"
   import {formatTimestamp} from "@welshman/app"
-  import {preventDefault} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
-  import ProfileName from "@app/components/ProfileName.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import EventPostedBy from "@app/components/EventPostedBy.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeThreadPath} from "@app/routes"
-  import {pushModal} from "@app/modal"
 
   interface Props {
     url: any
@@ -19,8 +16,6 @@
   const {url, event, hideActions = false}: Props = $props()
 
   const title = event.tags.find(nthEq(0, "title"))?.[1]
-
-  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 </script>
 
 <Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeThreadPath(url, event.id)}>
@@ -38,12 +33,7 @@
   {/if}
   <Content {event} expandMode="inline" quoteProps={{relays: [url]}} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <span class="whitespace-nowrap py-1 text-sm opacity-75">
-      Posted by
-      <button type="button" onclick={preventDefault(openProfile)} class="link-content">
-        @<ProfileName pubkey={event.pubkey} />
-      </button>
-    </span>
+    <EventPostedBy {event} />
     {#if !hideActions}
       <ThreadActions showActivity {url} {event} />
     {/if}