Add shared EventActivity component

src/app/components/ThreadActions.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-  import {onMount} from "svelte"
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
-  import {max} from "@welshman/lib"
-  import {deriveEvents} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
-  import {COMMENT} from "@welshman/util"
-  import {load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
+  import {pubkey} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,8 +10,8 @@
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import ThreadMenu from "@app/components/ThreadMenu.svelte"
+  import EventActivity from "@app/components/EventActivity.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
-  import {notifications} from "@app/notifications"
   import {makeThreadPath} from "@app/routes"
 
   interface Props {
@@ -27,8 +23,6 @@
   const {url, event, showActivity = false}: Props = $props()
 
   const path = makeThreadPath(url, event.id)
-  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
-  const replies = deriveEvents(repository, {filters})
 
   const showPopover = () => popover?.show()
 
@@ -48,12 +42,6 @@
     publishReaction({event, content: emoji.unicode, relays: [url]})
 
   let popover: Instance | undefined = $state()
-
-  const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
-
-  onMount(() => {
-    load({relays: [url], filters})
-  })
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
@@ -61,16 +49,7 @@
     <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-left" />
     <ThunkStatusOrDeleted {event} />
     {#if showActivity}
-      <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
-        <Icon icon="reply" />
-        <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
-      </div>
-      <div class="btn btn-neutral btn-xs relative hidden rounded-full sm:flex">
-        {#if $notifications.has(path)}
-          <div class="h-2 w-2 rounded-full bg-primary"></div>
-        {/if}
-        Active {formatTimestampRelative(lastActive)}
-      </div>
+      <EventActivity {url} {path} {event} />
     {/if}
     <Button class="join rounded-full">
       <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">