Add menu to threads

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}