Work on thread detail page

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

@@ -1,10 +1,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {NOTE} from "@welshman/util"
+  import {NOTE, getListTags, getPubkeyTagValues} from "@welshman/util"
   import {feedFromFilter, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
   import {nthEq} from "@welshman/lib"
-  import {feedLoader} from "@welshman/app"
+  import {feedLoader, userMutes} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -21,6 +21,7 @@
   const feed = makeIntersectionFeed(makeRelayFeed(url), feedFromFilter({kinds}))
   const events = deriveEventsForUrl(url, kinds)
   const loader = feedLoader.getLoader(feed, {})
+  const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
 
   const openMenu = () => pushDrawer(MenuSpace, {url})
 
@@ -55,16 +56,20 @@
       <Icon icon="notes-minimalistic" />
     </div>
     <strong slot="title">Threads</strong>
-    <div slot="action" class="md:hidden">
-      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+    <div slot="action" class="row-2">
+      <Button class="btn btn-primary btn-sm" on:click={createThread}>
+        <Icon icon="notes-minimalistic" />
+        Create a Thread
+      </Button>
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
         <Icon icon="menu-dots" />
       </Button>
     </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2" bind:this={element}>
     {#each $events.slice(0, limit) as event (event.id)}
-      {#if !event.tags.some(nthEq(0, "e"))}
-        <ThreadItem {event} />
+      {#if !event.tags.some(nthEq(0, "e")) && !mutedPubkeys.includes(event.pubkey)}
+        <ThreadItem {url} {event} />
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
@@ -77,12 +82,4 @@
       </Spinner>
     </p>
   </div>
-  <Button
-    class="tooltip tooltip-left fixed bottom-16 right-4 z-feature p-1 sm:right-8 md:bottom-4 md:right-4"
-    data-tip="Create a Thread"
-    on:click={createThread}>
-    <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">
-      <Icon icon="notes-minimalistic" />
-    </div>
-  </Button>
 </div>

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import {ctx, sortBy} from "@welshman/lib"
+  import {page} from "$app/stores"
+  import {pubkey, repository} 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 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)
+  const event = deriveEvent(id)
+  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [id]}]})
+
+  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]})
+    }
+  }
+</script>
+
+<div class="flex flex-col-reverse gap-2 max-h-screen overflow-auto p-2">
+  {#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">
+      <div class="ml-12">
+        <Content event={reply} />
+        <Reactions event={reply} onReactionClick={getReactionHandler(reply)} />
+      </div>
+    </NoteCard>
+  {/each}
+  <NoteCard event={$event} class="card2 bg-alt w-full py-2 z-feature relative border border-solid border-neutral">
+    <div class="ml-12">
+      <Content event={$event} />
+      <Reactions event={$event} onReactionClick={getReactionHandler($event)} />
+    </div>
+  </NoteCard>
+  <Button class="flex gap-2 mt-5 mb-3 items-center" on:click={back}>
+    <Icon icon="alt-arrow-left" />
+    Back to threads
+  </Button>
+</div>
+<ThreadReply {url} event={$event} />