Add shared EventActions component

src/app/components/CalendarEventActions.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
-  import {type Instance} from "tippy.js"
-  import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   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"
-  import EmojiButton from "@lib/components/EmojiButton.svelte"
   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 EventActions from "@app/components/EventActions.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {makeCalendarPath} from "@app/routes"
 
@@ -26,10 +21,6 @@
 
   const path = makeCalendarPath(url, event.id)
 
-  const showPopover = () => popover?.show()
-
-  const hidePopover = () => popover?.hide()
-
   const onReactionClick = (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
 
@@ -39,11 +30,6 @@
       publishReaction({event, content, relays: [url]})
     }
   }
-
-  const onEmoji = (emoji: NativeEmoji) =>
-    publishReaction({event, content: emoji.unicode, relays: [url]})
-
-  let popover: Instance | undefined = $state()
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
@@ -53,19 +39,6 @@
     {#if showActivity}
       <EventActivity {url} {path} {event} />
     {/if}
-    <Button class="join rounded-full">
+    <EventActions {url} {event} component={CalendarEventMenu} />
-      <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">
-        <Icon icon="smile-circle" size={4} />
-      </EmojiButton>
-      <Tippy
-        bind:popover
-        component={CalendarEventMenu}
-        props={{url, event, onClick: hidePopover}}
-        params={{trigger: "manual", interactive: true}}>
-        <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
-          <Icon icon="menu-dots" size={4} />
-        </Button>
-      </Tippy>
-    </Button>
   </div>
 </div>

src/app/components/EventActions.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type {Component} from "svelte"
+  import type {Instance} from "tippy.js"
+  import type {NativeEmoji} from "emoji-picker-element/shared"
+  import type {TrustedEvent} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
+  import {publishReaction} from "@app/commands"
+
+  const {
+    url,
+    event,
+    component,
+  }: {
+    url: string
+    event: TrustedEvent
+    component: Component<any>
+  } = $props()
+
+  const showPopover = () => popover?.show()
+
+  const hidePopover = () => popover?.hide()
+
+  const onEmoji = (emoji: NativeEmoji) =>
+    publishReaction({event, content: emoji.unicode, relays: [url]})
+
+  let popover: Instance | undefined = $state()
+</script>
+
+<Button class="join rounded-full">
+  <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">
+    <Icon icon="smile-circle" size={4} />
+  </EmojiButton>
+  <Tippy
+    {component}
+    bind:popover
+    props={{url, event, onClick: hidePopover}}
+    params={{trigger: "manual", interactive: true}}>
+    <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
+      <Icon icon="menu-dots" size={4} />
+    </Button>
+  </Tippy>
+</Button>

src/app/components/ThreadActions.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
-  import {type Instance} from "tippy.js"
-  import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   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"
-  import EmojiButton from "@lib/components/EmojiButton.svelte"
   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 EventActions from "@app/components/EventActions.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {makeThreadPath} from "@app/routes"
 
@@ -24,10 +19,6 @@
 
   const path = makeThreadPath(url, event.id)
 
-  const showPopover = () => popover?.show()
-
-  const hidePopover = () => popover?.hide()
-
   const onReactionClick = (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
 
@@ -37,11 +28,6 @@
       publishReaction({event, content, relays: [url]})
     }
   }
-
-  const onEmoji = (emoji: NativeEmoji) =>
-    publishReaction({event, content: emoji.unicode, relays: [url]})
-
-  let popover: Instance | undefined = $state()
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
@@ -51,19 +37,6 @@
     {#if showActivity}
       <EventActivity {url} {path} {event} />
     {/if}
-    <Button class="join rounded-full">
+    <EventActions {url} {event} component={ThreadMenu} />
-      <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">
-        <Icon icon="smile-circle" size={4} />
-      </EmojiButton>
-      <Tippy
-        bind:popover
-        component={ThreadMenu}
-        props={{url, event, onClick: hidePopover}}
-        params={{trigger: "manual", interactive: true}}>
-        <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
-          <Icon icon="menu-dots" size={4} />
-        </Button>
-      </Tippy>
-    </Button>
   </div>
 </div>