Work on thread detail page

src/app/components/ThreadItem.svelte

@@ -1,14 +1,42 @@
 <script lang="ts">
+  import {max} from '@welshman/lib'
+  import {formatTimestamp, formatTimestampRelative} from "@welshman/app"
+  import {deriveEvents} from "@welshman/store"
+  import {repository} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Divider from "@lib/components/Divider.svelte"
   import Content from "@app/components/Content.svelte"
-  import NoteCard from "@app/components/NoteCard.svelte"
+  import Profile from "@app/components/Profile.svelte"
+  import {makeThreadPath} from "@app/routes"
+  import {pushDrawer} from "@app/modal"
+  import {REPLY} from "@app/state"
 
+  export let url
   export let event
+
+  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
+
+  $: lastActive = max([...$replies, event].map(e => e.created_at))
 </script>
 
-<div class="flex flex-col items-end">
-  <NoteCard {event} class="card2 bg-alt w-full">
-    <div class="ml-12">
-      <Content {event} />
+<Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeThreadPath(url, event.id)}>
+  <div class="flex w-full justify-between gap-2">
+    <Profile pubkey={event.pubkey} />
+    <p class="text-sm opacity-75">
+      {formatTimestamp(event.created_at)}
+    </p>
+  </div>
+  <div class="pl-12 w-full col-4">
+    <Content {event} />
+    <div class="row-2 justify-end">
+      <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 rounded-full">
+        Active {formatTimestampRelative(lastActive)}
+      </div>
     </div>
-  </NoteCard>
-</div>
+  </div>
+</Link>