From 7848859153dda26ed409165269023cbc90ddbfa8 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 6 Feb 2025 10:14:29 -0800
Subject: [PATCH] Make event menu/share generic

---
 .../components/CalendarEventActions.svelte    |  3 +-
 src/app/components/EventActions.svelte        | 10 +--
 ...endarEventMenu.svelte => EventMenu.svelte} | 21 ++++--
 ...darEventShare.svelte => EventShare.svelte} |  7 +-
 src/app/components/ThreadActions.svelte       |  3 +-
 src/app/components/ThreadMenu.svelte          | 67 -------------------
 src/app/components/ThreadShare.svelte         | 66 ------------------
 7 files changed, 27 insertions(+), 150 deletions(-)
 rename src/app/components/{CalendarEventMenu.svelte => EventMenu.svelte} (80%)
 rename src/app/components/{CalendarEventShare.svelte => EventShare.svelte} (91%)
 delete mode 100644 src/app/components/ThreadMenu.svelte
 delete mode 100644 src/app/components/ThreadShare.svelte

diff --git a/src/app/components/CalendarEventActions.svelte b/src/app/components/CalendarEventActions.svelte
index 3e626216..79893d6d 100644
--- a/src/app/components/CalendarEventActions.svelte
+++ b/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>
diff --git a/src/app/components/EventActions.svelte b/src/app/components/EventActions.svelte
index 81bc21ca..ad34a05b 100644
--- a/src/app/components/EventActions.svelte
+++ b/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} />
diff --git a/src/app/components/CalendarEventMenu.svelte b/src/app/components/EventMenu.svelte
similarity index 80%
rename from src/app/components/CalendarEventMenu.svelte
rename to src/app/components/EventMenu.svelte
index 85ada53c..b9c9f7de 100644
--- a/src/app/components/CalendarEventMenu.svelte
+++ b/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}
diff --git a/src/app/components/CalendarEventShare.svelte b/src/app/components/EventShare.svelte
similarity index 91%
rename from src/app/components/CalendarEventShare.svelte
rename to src/app/components/EventShare.svelte
index 6b7d3e4b..11f2f14e 100644
--- a/src/app/components/CalendarEventShare.svelte
+++ b/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>
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index b202aa45..5928c36d 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/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>
diff --git a/src/app/components/ThreadMenu.svelte b/src/app/components/ThreadMenu.svelte
deleted file mode 100644
index c3af3e84..00000000
--- a/src/app/components/ThreadMenu.svelte
+++ /dev/null
@@ -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>
diff --git a/src/app/components/ThreadShare.svelte b/src/app/components/ThreadShare.svelte
deleted file mode 100644
index d05efec4..00000000
--- a/src/app/components/ThreadShare.svelte
+++ /dev/null
@@ -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>