Make event menu/share generic

src/app/components/CalendarEventActions.svelte

@@ -3,7 +3,6 @@
   import {pubkey} from "@welshman/app"
   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"
@@ -39,6 +38,6 @@
     {#if showActivity}
       <EventActivity {url} {path} {event} />
     {/if}
-    <EventActions {url} {event} component={CalendarEventMenu} />
+    <EventActions {url} {event} noun="Event" />
   </div>
 </div>

src/app/components/EventActions.svelte

@@ -1,5 +1,4 @@
 <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"
@@ -7,16 +6,17 @@
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
+  import EventMenu from "@app/components/EventMenu.svelte"
   import {publishReaction} from "@app/commands"
 
   const {
     url,
+    noun,
     event,
-    component,
   }: {
     url: string
+    noun: string
     event: TrustedEvent
-    component: Component<any>
   } = $props()
 
   const showPopover = () => popover?.show()
@@ -34,9 +34,9 @@
     <Icon icon="smile-circle" size={4} />
   </EmojiButton>
   <Tippy
-    {component}
     bind:popover
-    props={{url, event, onClick: hidePopover}}
+    component={EventMenu}
+    props={{url, noun, 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} />

src/app/components/EventMenu.svelte

@@ -1,15 +1,26 @@
 <script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
   import {COMMENT} from "@welshman/util"
   import {pubkey} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import EventReport from "@app/components/EventReport.svelte"
-  import CalendarEventShare from "@app/components/CalendarEventShare.svelte"
+  import EventShare from "@app/components/EventShare.svelte"
   import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {pushModal} from "@app/modal"
 
-  const {url, event, onClick} = $props()
+  const {
+    url,
+    noun,
+    event,
+    onClick,
+  }: {
+    url: string
+    noun: string
+    event: TrustedEvent
+    onClick: () => void
+  } = $props()
 
   const isRoot = event.kind !== COMMENT
 
@@ -25,7 +36,7 @@
 
   const share = () => {
     onClick()
-    pushModal(CalendarEventShare, {url, event})
+    pushModal(EventShare, {url, event})
   }
 
   const showDelete = () => {
@@ -46,14 +57,14 @@
   <li>
     <Button onclick={showInfo}>
       <Icon size={4} icon="code-2" />
-      Event Details
+      {noun} Details
     </Button>
   </li>
   {#if event.pubkey === $pubkey}
     <li>
       <Button onclick={showDelete} class="text-error">
         <Icon size={4} icon="trash-bin-2" />
-        Delete Event
+        Delete {noun}
       </Button>
     </li>
   {:else}

src/app/components/EventShare.svelte

@@ -2,6 +2,7 @@
   import {nip19} from "nostr-tools"
   import {goto} from "$app/navigation"
   import {ctx} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
   import {toNostrURI} from "@welshman/util"
   import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
@@ -13,7 +14,7 @@
   import {makeRoomPath} from "@app/routes"
   import {setKey} from "@app/implicit"
 
-  const {url, event} = $props()
+  const {url, noun, event}: {url: string; noun: string; event: TrustedEvent} = $props()
 
   const relays = ctx.app.router.Event(event).getUrls()
   const nevent = nip19.neventEncode({id: event.id, relays})
@@ -35,7 +36,7 @@
 <form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
   <ModalHeader>
     {#snippet title()}
-      <div>Share Event</div>
+      <div>Share {noun}</div>
     {/snippet}
     {#snippet info()}
       <div>Which room would you like to share this event to?</div>
@@ -59,7 +60,7 @@
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={!selection}>
-      Share Event
+      Share {noun}
       <Icon icon="alt-arrow-right" />
     </Button>
   </ModalFooter>

src/app/components/ThreadActions.svelte

@@ -3,7 +3,6 @@
   import {pubkey} from "@welshman/app"
   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"
@@ -37,6 +36,6 @@
     {#if showActivity}
       <EventActivity {url} {path} {event} />
     {/if}
-    <EventActions {url} {event} component={ThreadMenu} />
+    <EventActions {url} {event} noun="Thread" />
   </div>
 </div>

src/app/components/ThreadMenu.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import {COMMENT} from "@welshman/util"
-  import {pubkey} from "@welshman/app"
-  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import EventInfo from "@app/components/EventInfo.svelte"
-  import EventReport from "@app/components/EventReport.svelte"
-  import ThreadShare from "@app/components/ThreadShare.svelte"
-  import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
-  import {pushModal} from "@app/modal"
-
-  const {url, event, onClick} = $props()
-
-  const isRoot = event.kind !== COMMENT
-
-  const report = () => {
-    onClick()
-    pushModal(EventReport, {url, event})
-  }
-
-  const showInfo = () => {
-    onClick()
-    pushModal(EventInfo, {event})
-  }
-
-  const share = () => {
-    onClick()
-    pushModal(ThreadShare, {url, event})
-  }
-
-  const showDelete = () => {
-    onClick()
-    pushModal(ConfirmDelete, {url, event})
-  }
-</script>
-
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
-  {#if isRoot}
-    <li>
-      <Button onclick={share}>
-        <Icon size={4} icon="share-circle" />
-        Share to Chat
-      </Button>
-    </li>
-  {/if}
-  <li>
-    <Button onclick={showInfo}>
-      <Icon size={4} icon="code-2" />
-      Message Details
-    </Button>
-  </li>
-  {#if event.pubkey === $pubkey}
-    <li>
-      <Button onclick={showDelete} class="text-error">
-        <Icon size={4} icon="trash-bin-2" />
-        Delete Message
-      </Button>
-    </li>
-  {:else}
-    <li>
-      <Button class="text-error" onclick={report}>
-        <Icon size={4} icon="danger" />
-        Report Content
-      </Button>
-    </li>
-  {/if}
-</ul>

src/app/components/ThreadShare.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  import {nip19} from "nostr-tools"
-  import {goto} from "$app/navigation"
-  import {ctx} from "@welshman/lib"
-  import {toNostrURI} from "@welshman/util"
-  import {preventDefault} from "@lib/html"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
-  import {channelsByUrl} from "@app/state"
-  import {makeRoomPath} from "@app/routes"
-  import {setKey} from "@app/implicit"
-
-  const {url, event} = $props()
-
-  const relays = ctx.app.router.Event(event).getUrls()
-  const nevent = nip19.neventEncode({id: event.id, relays})
-
-  const back = () => history.back()
-
-  const onSubmit = () => {
-    setKey("content", toNostrURI(nevent))
-    goto(makeRoomPath(url, selection), {replaceState: true})
-  }
-
-  const toggleRoom = (room: string) => {
-    selection = room === selection ? "" : room
-  }
-
-  let selection = $state("")
-</script>
-
-<form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Share Thread</div>
-    {/snippet}
-    {#snippet info()}
-      <div>Which room would you like to share this thread to?</div>
-    {/snippet}
-  </ModalHeader>
-  <div class="grid grid-cols-3 gap-2">
-    {#each $channelsByUrl.get(url) || [] as channel (channel.room)}
-      <button
-        type="button"
-        class="btn"
-        class:btn-neutral={selection !== channel.room}
-        class:btn-primary={selection === channel.room}
-        onclick={() => toggleRoom(channel.room)}>
-        #<ChannelName {...channel} />
-      </button>
-    {/each}
-  </div>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary" disabled={!selection}>
-      Share Thread
-      <Icon icon="alt-arrow-right" />
-    </Button>
-  </ModalFooter>
-</form>