Add menu to threads

src/app.css

@@ -181,7 +181,7 @@
 }
 
 .note-editor .tiptap[contenteditable="true"] {
-  @apply input input-bordered h-auto min-h-32 p-[.65rem] pb-6 rounded-box;
+  @apply input input-bordered h-auto min-h-32 rounded-box p-[.65rem] pb-6;
 }
 
 .tiptap pre code {

src/app/components/ChannelMessageEmojiButton.svelte

@@ -1,53 +1,18 @@
 <script lang="ts">
-  import {throttle} from "throttle-debounce"
-  import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
-  import {between} from "@welshman/lib"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Tippy from "@lib/components/Tippy.svelte"
-  import EmojiPicker from "@lib/components/EmojiPicker.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
   import {tagRoom} from "@app/state"
   import {publishReaction} from "@app/commands"
 
   export let url, room, event
 
-  const open = () => popover.show()
-
-  const onClick = (emoji: NativeEmoji) => {
+  const onEmoji = (emoji: NativeEmoji) =>
     publishReaction({
       event,
       relays: [url],
       content: emoji.unicode,
       tags: [tagRoom(room, url)],
     })
-
-    popover.hide()
-  }
-
-  const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
-    const {x, y, width, height} = popover.popper.getBoundingClientRect()
-
-    if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
-      popover.hide()
-    }
-  })
-
-  let popover: Instance
 </script>
 
-<svelte:document on:mousemove={onMouseMove} />
-
-<div class="flex">
-  <Button class="btn join-item btn-xs" on:click={open}>
-    <Icon icon="smile-circle" size={4} />
-  </Button>
-  <Tippy
-    bind:popover
-    component={EmojiPicker}
-    props={{onClick}}
-    params={{
-      trigger: "manual",
-      interactive: true,
-    }} />
-</div>
+<EmojiButton {onEmoji} class="join-item" />

src/app/components/ChannelThread.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import {writable} from "svelte/store"
   import {assoc, sortBy, append} from "@welshman/lib"
-  import {createEvent} from "@welshman/util"
   import type {EventContent, TrustedEvent} from "@welshman/util"
-  import {repository, publishThunk} from "@welshman/app"
+  import {repository} from "@welshman/app"
   import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"

src/app/components/ChatMessageEmojiButton.svelte

@@ -1,50 +1,14 @@
 <script lang="ts">
-  import {throttle} from "throttle-debounce"
-  import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
-  import {between} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Tippy from "@lib/components/Tippy.svelte"
-  import EmojiPicker from "@lib/components/EmojiPicker.svelte"
+  import EmojiButton from "@lib/components/EmojiButton.svelte"
   import {makeReaction, sendWrapped} from "@app/commands"
 
   export let event: TrustedEvent
   export let pubkeys: string[]
 
-  const open = () => popover.show()
-
-  const onClick = async (emoji: NativeEmoji) => {
-    const template = makeReaction({event, content: emoji.unicode})
-
-    sendWrapped({template, pubkeys})
-    popover.hide()
-  }
-
-  const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
-    const {x, y, width, height} = popover.popper.getBoundingClientRect()
-
-    if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
-      popover.hide()
-    }
-  })
-
-  let popover: Instance
+  const onEmoji = (emoji: NativeEmoji) =>
+    sendWrapped({template: makeReaction({event, content: emoji.unicode}), pubkeys})
 </script>
 
-<svelte:document on:mousemove={onMouseMove} />
-
-<div class="flex">
-  <Button class="btn join-item btn-xs" on:click={open}>
-    <Icon icon="smile-circle" size={4} />
-  </Button>
-  <Tippy
-    bind:popover
-    component={EmojiPicker}
-    props={{onClick}}
-    params={{
-      trigger: "manual",
-      interactive: true,
-    }} />
-</div>
+<EmojiButton {onEmoji} class="join-item" />

src/app/components/Profile.svelte

@@ -24,7 +24,8 @@
 
   const onClick = () => pushDrawer(ProfileDetail, {pubkey})
 
-  $: following = pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
+  $: following =
+    pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
 </script>
 
 <div class="flex max-w-full gap-3">

src/app/components/ThreadActions.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import {type Instance} from "tippy.js"
+  import type {NativeEmoji} from "emoji-picker-element/shared"
+  import {pubkey} from "@welshman/app"
+  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 Reactions from "@app/components/Reactions.svelte"
+  import ThreadMenu from "@app/components/ThreadMenu.svelte"
+  import {publishDelete, publishReaction} from "@app/commands"
+
+  export let url
+  export let event
+
+  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, relays: [url], content: emoji.unicode})
+
+  let popover: Instance
+</script>
+
+<div class="flex items-center justify-between">
+  <div>
+    <Reactions {event} {onReactionClick} />
+  </div>
+  <div class="join">
+    <EmojiButton {onEmoji} class="join-item btn-neutral" />
+    <Tippy
+      bind:popover
+      component={ThreadMenu}
+      props={{url, event, onClick: hidePopover}}
+      params={{trigger: "manual", interactive: true}}>
+      <Button class="btn btn-neutral btn-xs join-item" on:click={showPopover}>
+        <Icon icon="menu-dots" size={4} />
+      </Button>
+    </Tippy>
+  </div>
+</div>

src/app/components/ThreadItem.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-  import {max} from '@welshman/lib'
+  import {max} from "@welshman/lib"
   import {formatTimestamp, formatTimestampRelative} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import {repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
-  import Divider from "@lib/components/Divider.svelte"
   import Content from "@app/components/Content.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {makeThreadPath} from "@app/routes"
-  import {pushDrawer} from "@app/modal"
   import {REPLY} from "@app/state"
 
   export let url
@@ -27,12 +25,12 @@
       {formatTimestamp(event.created_at)}
     </p>
   </div>
-  <div class="pl-12 w-full col-4">
+  <div class="col-4 w-full pl-12">
     <Content {event} />
     <div class="row-2 justify-end">
       <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>
+        <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
       </div>
       <div class="btn btn-neutral btn-xs rounded-full">
         Active {formatTimestampRelative(lastActive)}

src/app/components/ThreadMenu.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {pubkey} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
+  import {publishDelete} from "@app/commands"
+  import {pushModal} from "@app/modal"
+
+  export let url
+  export let event
+  export let onClick
+
+  const showInfo = () => {
+    onClick()
+    pushModal(EventInfo, {event})
+  }
+
+  const showDelete = () => {
+    onClick()
+    pushModal(Confirm, {
+      title: "Delete Message",
+      subtitle: "Are you sure you want to delete this message?",
+      message: `
+        This will send a request to delete this message.
+        Be aware that not all relays may honor this request.`,
+      confirm: async () => {
+        await publishDelete({event, relays: [url]})
+
+        history.back()
+      },
+    })
+  }
+</script>
+
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
+  <li>
+    <Button on:click={showInfo}>
+      <Icon size={4} icon="code-2" />
+      Message Details
+    </Button>
+  </li>
+  {#if event.pubkey === $pubkey}
+    <li>
+      <Button on:click={showDelete} class="text-error">
+        <Icon size={4} icon="trash-bin-2" />
+        Delete Message
+      </Button>
+    </li>
+  {/if}
+</ul>

src/app/components/ThreadReply.svelte

@@ -3,44 +3,33 @@
   import type {Readable} from "svelte/store"
   import {writable} from "svelte/store"
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
-  import {createEvent} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
-  import {fly} from '@lib/transition'
+  import {fly, slideAndFade} from "@lib/transition"
   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 {REPLY} from "@app/state"
   import {getPubkeyHints, publishReply} from "@app/commands"
   import {getEditorOptions, addFile, uploadFiles, getEditorTags} from "@lib/editor"
 
   export let url
   export let event
+  export let onClose
+  export let onSubmit
 
   const startSubmit = () => uploadFiles($editor)
 
   const loading = writable(false)
 
   const submit = () => {
-    const thunk = publishReply({
-      event,
-      content: $editor.getText(),
-      tags: getEditorTags($editor),
-      relays: [url],
-    })
-
-    hide()
+    onSubmit(
+      publishReply({
+        event,
+        content: $editor.getText(),
+        tags: getEditorTags($editor),
+        relays: [url],
+      }),
+    )
   }
 
-  const show = () => {
-    visible = true
-  }
-
-  const hide = () => {
-    visible = false
-  }
-
-  let visible = false
   let editor: Readable<Editor>
 
   onMount(() => {
@@ -48,35 +37,28 @@
   })
 </script>
 
-{#if visible}
-  <form on:submit|preventDefault={startSubmit} in:fly class="sticky bottom-2 card2 bg-alt mt-2 mx-2">
-    <div class="relative">
-      <div class="note-editor flex-grow overflow-hidden">
-        <EditorContent editor={$editor} />
-      </div>
-      <Button
-        data-tip="Add an image"
-        class="tooltip tooltip-left absolute bottom-1 right-2"
-        on:click={() => addFile($editor)}>
-        {#if $loading}
-          <span class="loading loading-spinner loading-xs"></span>
-        {:else}
-          <Icon icon="paperclip" size={3} />
-        {/if}
-      </Button>
+<form
+  on:submit|preventDefault={startSubmit}
+  in:fly
+  out:slideAndFade
+  class="card2 sticky bottom-2 z-feature mx-2 mt-2 bg-neutral">
+  <div class="relative">
+    <div class="note-editor flex-grow overflow-hidden">
+      <EditorContent editor={$editor} />
     </div>
-    <ModalFooter>
-      <Button class="btn btn-link" on:click={hide}>
-        Cancel
-      </Button>
-      <Button type="submit" class="btn btn-primary">Post Reply</Button>
-    </ModalFooter>
-  </form>
-{:else}
-  <div class="flex justify-end p-2">
-    <Button class="btn btn-primary" on:click={show}>
-      <Icon icon="reply" />
-      Reply
+    <Button
+      data-tip="Add an image"
+      class="tooltip tooltip-left absolute bottom-1 right-2"
+      on:click={() => addFile($editor)}>
+      {#if $loading}
+        <span class="loading loading-spinner loading-xs"></span>
+      {:else}
+        <Icon icon="paperclip" size={3} />
+      {/if}
     </Button>
   </div>
-{/if}
+  <ModalFooter>
+    <Button class="btn btn-link" on:click={onClose}>Cancel</Button>
+    <Button type="submit" class="btn btn-primary">Post Reply</Button>
+  </ModalFooter>
+</form>

src/app/routes.ts

@@ -13,7 +13,8 @@ export const makeSpacePath = (url: string, extra = "") => {
 
 export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
 
-export const makeThreadPath = (url: string, eventId: string) => `/spaces/${encodeRelay(url)}/threads/${eventId}`
+export const makeThreadPath = (url: string, eventId: string) =>
+  `/spaces/${encodeRelay(url)}/threads/${eventId}`
 
 export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
 

src/lib/components/EmojiButton.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import {throttle} from "throttle-debounce"
+  import {type Instance} from "tippy.js"
+  import type {NativeEmoji} from "emoji-picker-element/shared"
+  import {between} from "@welshman/lib"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import EmojiPicker from "@lib/components/EmojiPicker.svelte"
+
+  export let onEmoji
+
+  const open = () => popover.show()
+
+  const onClick = (emoji: NativeEmoji) => {
+    onEmoji(emoji)
+    popover.hide()
+  }
+
+  const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
+    const {x, y, width, height} = popover.popper.getBoundingClientRect()
+
+    if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
+      popover.hide()
+    }
+  })
+
+  let popover: Instance
+</script>
+
+<svelte:document on:mousemove={onMouseMove} />
+
+<Tippy
+  bind:popover
+  component={EmojiPicker}
+  props={{onClick}}
+  params={{trigger: "manual", interactive: true}}>
+  <Button class="btn btn-xs {$$props.class}" on:click={open}>
+    <Icon icon="smile-circle" size={4} />
+  </Button>
+</Tippy>

src/routes/discover/+layout.svelte

@@ -0,0 +1 @@
+

src/routes/people/+page.svelte

@@ -1,50 +1 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {createScroller} from "@lib/html"
-  import {profileSearch} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
-  import Page from "@lib/components/Page.svelte"
-  import ContentSearch from "@lib/components/ContentSearch.svelte"
-  import PeopleItem from "@app/components/PeopleItem.svelte"
-  import {getDefaultPubkeys} from "@app/state"
 
-  const defaultPubkeys = getDefaultPubkeys()
-
-  let term = ""
-  let limit = 10
-  let element: Element
-
-  $: pubkeys = term ? $profileSearch.searchValues(term) : defaultPubkeys
-
-  onMount(() => {
-    console.log(element)
-    const scroller = createScroller({
-      element,
-      onScroll: () => {
-        limit += 10
-      },
-    })
-
-    return () => scroller.stop()
-  })
-</script>
-
-<Page>
-  <ContentSearch>
-    <label slot="input" class="row-2 input input-bordered">
-      <Icon icon="magnifer" />
-      <!-- svelte-ignore a11y-autofocus -->
-      <input
-        autofocus
-        bind:value={term}
-        class="grow"
-        type="text"
-        placeholder="Search for people..." />
-    </label>
-    <div slot="content" class="col-2" bind:this={element}>
-      {#each pubkeys.slice(0, limit) as pubkey (pubkey)}
-        <PeopleItem {pubkey} />
-      {/each}
-    </div>
-  </ContentSearch>
-</Page>

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
-  import {ctx, sortBy} from "@welshman/lib"
+  import {sortBy} from "@welshman/lib"
   import {page} from "$app/stores"
-  import {pubkey, repository} from "@welshman/app"
+  import {repository} from "@welshman/app"
+  import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
-  import {getReplyFilters} from "@welshman/util"
-  import type {TrustedEvent} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Divider from "@lib/components/Divider.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import Content from "@app/components/Content.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import MenuSpace from "@app/components/MenuSpace.svelte"
-  import Reactions from "@app/components/Reactions.svelte"
+  import ThreadActions from "@app/components/ThreadActions.svelte"
   import ThreadReply from "@app/components/ThreadReply.svelte"
   import {REPLY, deriveEvent, decodeRelay} from "@app/state"
-  import {publishDelete, publishReaction} from "@app/commands"
-  import {pushDrawer} from "@app/modal"
 
   const {relay, id} = $page.params
   const url = decodeRelay(relay)
@@ -26,37 +19,48 @@
 
   const back = () => history.back()
 
-  const openMenu = () => pushDrawer(MenuSpace, {url})
-
-  const getReactionHandler = (event: TrustedEvent) => (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 openReply = () => {
+    showReply = true
   }
+
+  const closeReply = () => {
+    showReply = false
+  }
+
+  const onReplySubmit = (thunk: Thunk) => {}
+
+  let showReply = false
 </script>
 
-<div class="flex flex-col-reverse gap-2 max-h-screen overflow-auto p-2">
+<div class="relative flex flex-col-reverse gap-3 p-2">
+  <div class="absolute left-[51px] top-20 h-[calc(100%-200px)] w-[2px] bg-neutral" />
+  {#if !showReply}
+    <div class="flex justify-end p-2">
+      <Button class="btn btn-primary" on:click={openReply}>
+        <Icon icon="reply" />
+        Reply to thread
+      </Button>
+    </div>
+  {/if}
   {#each sortBy(e => -e.created_at, $replies) as reply (reply.id)}
-    <NoteCard event={reply} class="w-full border-l border-b border-r border-solid border-neutral -mt-8 pt-12 p-6 rounded-box">
+    <NoteCard event={reply} class="card2 bg-alt z-feature w-full">
       <div class="ml-12">
         <Content event={reply} />
-        <Reactions event={reply} onReactionClick={getReactionHandler(reply)} />
       </div>
+      <ThreadActions event={reply} {url} />
     </NoteCard>
   {/each}
-  <NoteCard event={$event} class="card2 bg-alt w-full py-2 z-feature relative border border-solid border-neutral">
+  <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
     <div class="ml-12">
       <Content event={$event} />
-      <Reactions event={$event} onReactionClick={getReactionHandler($event)} />
     </div>
+    <ThreadActions event={$event} {url} />
   </NoteCard>
-  <Button class="flex gap-2 mt-5 mb-3 items-center" on:click={back}>
+  <Button class="mb-2 mt-5 flex items-center gap-2" on:click={back}>
     <Icon icon="alt-arrow-left" />
     Back to threads
   </Button>
 </div>
-<ThreadReply {url} event={$event} />
+{#if showReply}
+  <ThreadReply {url} event={$event} onClose={closeReply} onSubmit={onReplySubmit} />
+{/if}