Add calendar actions, menus, etc

src/app/components/CalendarEventActions.svelte

@@ -0,0 +1,96 @@
+<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, deriveIsDeleted} from "@welshman/store"
+  import type {TrustedEvent} from "@welshman/util"
+  import {COMMENT} from "@welshman/util"
+  import {thunks, load, pubkey, repository, formatTimestampRelative} 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 ThunkStatus from "@app/components/ThunkStatus.svelte"
+  import CalendarEventMenu from "@app/components/CalendarEventMenu.svelte"
+  import {publishDelete, publishReaction} from "@app/commands"
+  import {notifications} from "@app/notifications"
+  import {makeCalendarPath} from "@app/routes"
+
+  interface Props {
+    url: any
+    event: any
+    showActivity?: boolean
+  }
+
+  const {url, event, showActivity = false}: Props = $props()
+
+  const thunk = $derived($thunks[event.id])
+  const deleted = deriveIsDeleted(repository, event)
+  const path = makeCalendarPath(url, event.id)
+  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
+  const replies = deriveEvents(repository, {filters})
+
+  const showPopover = () => popover?.show()
+
+  const hidePopover = () => popover?.hide()
+
+  const onReactionClick = (content: string, events: TrustedEvent[]) => {
+    const reaction = events.find(e => e.pubkey === $pubkey)
+
+    if (reaction) {
+      publishDelete({relays: [url], event: reaction})
+    } else {
+      publishReaction({event, content, relays: [url]})
+    }
+  }
+
+  const onEmoji = (emoji: NativeEmoji) =>
+    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">
+  <div class="flex flex-grow flex-wrap justify-end gap-2">
+    <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-left" />
+    {#if $deleted}
+      <div class="btn btn-error btn-xs rounded-full">Deleted</div>
+    {:else if thunk}
+      <ThunkStatus {thunk} />
+    {/if}
+    {#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>
+    {/if}
+    <Button class="join rounded-full">
+      <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/CalendarEventItem.svelte

@@ -3,11 +3,13 @@
   import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
-  import ThreadActions from "@app/components/ThreadActions.svelte"
+  import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {makeCalendarPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const {url, event} = $props()
@@ -22,7 +24,7 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 </script>
 
-<div class="card2 bg-alt col-2">
+<Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
   <div class="flex items-center justify-between gap-2">
     <span>{meta.title || meta.name}</span>
     <div class="flex items-center gap-2 text-sm">
@@ -40,6 +42,6 @@
         @<ProfileName pubkey={event.pubkey} />
       </Button>
     </span>
-    <ThreadActions {url} {event} />
+    <CalendarEventActions {url} {event} />
   </div>
-</div>
+</Link>

src/app/components/CalendarEventMenu.svelte

@@ -0,0 +1,67 @@
+<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 CalendarEventShare from "@app/components/CalendarEventShare.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(CalendarEventShare, {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" />
+      Event Details
+    </Button>
+  </li>
+  {#if event.pubkey === $pubkey}
+    <li>
+      <Button onclick={showDelete} class="text-error">
+        <Icon size={4} icon="trash-bin-2" />
+        Delete Event
+      </Button>
+    </li>
+  {:else}
+    <li>
+      <Button class="text-error" onclick={report}>
+        <Icon size={4} icon="danger" />
+        Report Content
+      </Button>
+    </li>
+  {/if}
+</ul>

src/app/components/CalendarEventShare.svelte

@@ -0,0 +1,66 @@
+<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 Event</div>
+    {/snippet}
+    {#snippet info()}
+      <div>Which room would you like to share this event 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 Event
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>

src/app/components/ThreadActions.svelte

@@ -16,7 +16,7 @@
   import ThreadMenu from "@app/components/ThreadMenu.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {notifications} from "@app/notifications"
-  import {makeSpacePath} from "@app/routes"
+  import {makeThreadPath} from "@app/routes"
 
   interface Props {
     url: any
@@ -28,7 +28,7 @@
 
   const thunk = $derived($thunks[event.id])
   const deleted = deriveIsDeleted(repository, event)
-  const path = makeSpacePath(url, "threads", event.id)
+  const path = makeThreadPath(url, event.id)
   const filters = [{kinds: [COMMENT], "#E": [event.id]}]
   const replies = deriveEvents(repository, {filters})