From a7e9318819d87432aaba30a5347a9366e09e709f Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 6 Feb 2025 09:53:50 -0800
Subject: [PATCH] Add shared EventActivity component

---
 .../components/CalendarEventActions.svelte    | 40 +++++--------------
 src/app/components/CalendarEventItem.svelte   | 15 ++++++-
 src/app/components/EventActivity.svelte       | 31 ++++++++++++++
 src/app/components/ThreadActions.svelte       | 27 ++-----------
 src/app/components/ThreadItem.svelte          | 15 ++++---
 5 files changed, 67 insertions(+), 61 deletions(-)
 create mode 100644 src/app/components/EventActivity.svelte

diff --git a/src/app/components/CalendarEventActions.svelte b/src/app/components/CalendarEventActions.svelte
index b5706a4..fc9b0af 100644
--- a/src/app/components/CalendarEventActions.svelte
+++ b/src/app/components/CalendarEventActions.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,20 +10,21 @@
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import CalendarEventMenu from "@app/components/CalendarEventMenu.svelte"
+  import EventActivity from "@app/components/EventActivity.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
-  import {notifications} from "@app/notifications"
   import {makeCalendarPath} from "@app/routes"
 
-  interface Props {
-    url: any
-    event: any
+  const {
+    url,
+    event,
+    showActivity = false,
+  }: {
+    url: string
+    event: TrustedEvent
     showActivity?: boolean
-  }
+  } = $props()
 
-  const {url, event, showActivity = false}: Props = $props()
   const path = makeCalendarPath(url, event.id)
-  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
-  const replies = deriveEvents(repository, {filters})
 
   const showPopover = () => popover?.show()
 
@@ -47,12 +44,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">
@@ -60,16 +51,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">
diff --git a/src/app/components/CalendarEventItem.svelte b/src/app/components/CalendarEventItem.svelte
index b23252a..0e92464 100644
--- a/src/app/components/CalendarEventItem.svelte
+++ b/src/app/components/CalendarEventItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
   import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
@@ -8,7 +9,15 @@
   import EventPostedBy from "@app/components/EventPostedBy.svelte"
   import {makeCalendarPath} from "@app/routes"
 
-  const {url, event} = $props()
+  const {
+    url,
+    event,
+    hideActions = false,
+  }: {
+    url: string
+    event: TrustedEvent
+    hideActions?: boolean
+  } = $props()
 
   const meta = $derived(fromPairs(event.tags) as Record<string, string>)
   const end = $derived(parseInt(meta.end))
@@ -31,6 +40,8 @@
   <Content {event} expandMode="inline" quoteProps={{relays: [url]}} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
     <EventPostedBy {event} />
-    <CalendarEventActions {url} {event} />
+    {#if !hideActions}
+      <CalendarEventActions showActivity {url} {event} />
+    {/if}
   </div>
 </Link>
diff --git a/src/app/components/EventActivity.svelte b/src/app/components/EventActivity.svelte
new file mode 100644
index 0000000..edefea2
--- /dev/null
+++ b/src/app/components/EventActivity.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {max} from "@welshman/lib"
+  import {COMMENT} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
+  import type {TrustedEvent} from "@welshman/util"
+  import {formatTimestampRelative, repository, load} from "@welshman/app"
+  import {notifications} from "@app/notifications"
+  import Icon from "@lib/components/Icon.svelte"
+
+  const {url, path, event}: {url: string; path: string; event: TrustedEvent} = $props()
+
+  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
+  const replies = deriveEvents(repository, {filters})
+  const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
+
+  onMount(() => {
+    load({relays: [url], filters})
+  })
+</script>
+
+<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>
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index eeb7525..62e8ae4 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/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">
diff --git a/src/app/components/ThreadItem.svelte b/src/app/components/ThreadItem.svelte
index ea10e8a..f40fe7f 100644
--- a/src/app/components/ThreadItem.svelte
+++ b/src/app/components/ThreadItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {nthEq} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
   import {formatTimestamp} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
@@ -7,13 +8,15 @@
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeThreadPath} from "@app/routes"
 
-  interface Props {
-    url: any
-    event: any
+  const {
+    url,
+    event,
+    hideActions = false,
+  }: {
+    url: string
+    event: TrustedEvent
     hideActions?: boolean
-  }
-
-  const {url, event, hideActions = false}: Props = $props()
+  } = $props()
 
   const title = event.tags.find(nthEq(0, "title"))?.[1]
 </script>