From d6f19deb80dc182025d3aa1c286b92810c103a92 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Fri, 29 Nov 2024 15:52:46 +0100
Subject: [PATCH 1/9] hide `open with` for kind 1 and change the icon

---
 src/app/shared/NoteActions.svelte | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index a41f5cce1..5f1956a83 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -167,15 +167,17 @@
   $: canZap = zapper?.allowsNostr && note.pubkey !== $sessionWithMeta?.pubkey
   $: reply = replies.find(e => e.pubkey === $sessionWithMeta?.pubkey)
   $: $repliesCount = replies.length
-  $: handlers = $kindHandlers.filter(
-    h =>
-      h.name.toLowerCase() !== "coracle" &&
-      h.event.tags.some(
-        t =>
-          ["web", os].includes(t[0]) &&
-          (t.length === 2 || ["note", "nevent", ""].includes(last(t))),
-      ),
-  )
+  $: handlers =
+    note.kind != 1 &&
+    $kindHandlers.filter(
+      h =>
+        h.name.toLowerCase() !== "coracle" &&
+        h.event.tags.some(
+          t =>
+            ["web", os].includes(t[0]) &&
+            (t.length == 2 || ["note", "nevent", ""].includes(last(t))),
+        ),
+    )
 
   $: {
     actions = []
@@ -269,8 +271,8 @@
       <Popover theme="transparent" opts={{hideOnClick: true}}>
         <button
           slot="trigger"
-          class="relative flex hidden h-6 items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
-          <i class="fa fa-up-right-from-square fa-sm" />
+          class="relative flex h-6 items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
+          <i class="fa-solid fa-list" />
         </button>
         <div slot="tooltip" class="max-h-[300px] min-w-[180px] overflow-auto">
           <Menu>

From c5fb0903ef614d7d1e6d5b59e40bbbb2ef4a97d9 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 5 Dec 2024 17:48:05 +0100
Subject: [PATCH 2/9] refactor note thread

---
 src/app/shared/Feed.svelte        |   6 +-
 src/app/shared/FeedCard.svelte    |   5 +-
 src/app/shared/Note.svelte        |  32 +--
 src/app/shared/NoteActions.svelte | 412 ++++++++++++++++--------------
 src/app/shared/NoteContent.svelte |   3 +-
 src/app/shared/NoteHeader.svelte  |  80 ++++++
 src/app/shared/NoteKind.svelte    | 167 ++++++++++++
 src/app/shared/NotePending.svelte |   6 +-
 src/app/shared/Thread.svelte      | 238 +++++++++++++++++
 src/app/views/NoteDetail.svelte   |   4 +-
 10 files changed, 719 insertions(+), 234 deletions(-)
 create mode 100644 src/app/shared/NoteHeader.svelte
 create mode 100644 src/app/shared/NoteKind.svelte
 create mode 100644 src/app/shared/Thread.svelte

diff --git a/src/app/shared/Feed.svelte b/src/app/shared/Feed.svelte
index f3f63adbc..4c364e0e8 100644
--- a/src/app/shared/Feed.svelte
+++ b/src/app/shared/Feed.svelte
@@ -39,7 +39,6 @@
   import Card from "src/partials/Card.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import FlexColumn from "src/partials/FlexColumn.svelte"
-  import Note from "src/app/shared/Note.svelte"
   import FeedControls from "src/app/shared/FeedControls.svelte"
   import {router} from "src/app/util"
   import type {Feed} from "src/domain"
@@ -51,6 +50,7 @@
     isEventMuted,
     unwrapRepost,
   } from "src/engine"
+  import Thread from "src/app/shared/Thread.svelte"
 
   export let feed: Feed
   export let anchor = null
@@ -241,10 +241,10 @@
   </FeedControls>
 {/if}
 
-<FlexColumn xl bind:element>
+<FlexColumn bind:element>
   {#each events as note, i (note.id)}
     <div in:fly={{y: 20}}>
-      <Note {filters} {reposts} {depth} {anchor} {note} />
+      <Thread {filters} {reposts} {depth} {anchor} {note} />
     </div>
     {#if i > 20 && parseInt(hash(note.id)) % 100 === 0 && $promptDismissed < ago(WEEK)}
       <Card class="group flex items-center justify-between">
diff --git a/src/app/shared/FeedCard.svelte b/src/app/shared/FeedCard.svelte
index b794b0aaa..c4447d53f 100644
--- a/src/app/shared/FeedCard.svelte
+++ b/src/app/shared/FeedCard.svelte
@@ -12,7 +12,6 @@
   import {slide} from "src/util/transition"
   import {boolCtrl} from "src/partials/utils"
   import FlexColumn from "src/partials/FlexColumn.svelte"
-  import Card from "src/partials/Card.svelte"
   import Chip from "src/partials/Chip.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import CopyValueSimple from "src/partials/CopyValueSimple.svelte"
@@ -49,7 +48,7 @@
   )
 </script>
 
-<Card class="flex gap-3">
+<div class="flex gap-3">
   <div class="mt-[6px] hidden sm:block">
     <i class="fa fa-rss fa-2xl" />
   </div>
@@ -116,4 +115,4 @@
         )}</pre>
     {/if}
   </FlexColumn>
-</Card>
+</div>
diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
index 27dd21cac..587aa3ba9 100644
--- a/src/app/shared/Note.svelte
+++ b/src/app/shared/Note.svelte
@@ -1,25 +1,22 @@
 <script lang="ts">
-  import {ctx, nthEq} from "@welshman/lib"
+  import {ctx} from "@welshman/lib"
   import {
     isChildOf,
     getReplyFilters,
     getIdOrAddress,
-    getLnUrl,
     matchFilters,
-    zapFromEvent,
     NOTE,
     REACTION,
     ZAP_RESPONSE,
     getAncestorTagValues,
   } from "@welshman/util"
-  import {repository, deriveZapperForPubkey, deriveZapper} from "@welshman/app"
+  import {repository} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import {sleep} from "hurdak"
-  import {identity, uniqBy, prop} from "ramda"
   import {onMount} from "svelte"
   import {quantify} from "hurdak"
   import {fly, slide} from "src/util/transition"
-  import {isLike} from "src/util/nostr"
+  import {replyKinds} from "src/util/nostr"
   import {formatTimestamp, timestamp1} from "src/util/misc"
   import Popover from "src/partials/Popover.svelte"
   import AltColor from "src/partials/AltColor.svelte"
@@ -41,7 +38,6 @@
     loadEvent,
     ensureUnwrapped,
     isEventMuted,
-    userMutes,
     getSetting,
     sortEventsDesc,
   } from "src/engine"
@@ -122,9 +118,6 @@
   $: ancestors = getAncestorTagValues(event.tags || [])
   $: reply = ancestors.replies[0]
   $: root = ancestors.roots[0]
-  $: lnurl = getLnUrl(event.tags?.find(nthEq(0, "zap"))?.[1] || "")
-  $: zapper = lnurl ? deriveZapper(lnurl) : deriveZapperForPubkey(event.pubkey)
-  $: muted = $userMutes.has(event.id)
   $: hidden = $isEventMuted(event, true)
   $: children = $context.filter(e => isChildOf(e, event))
   $: replies = sortEventsDesc(children.filter(e => e.kind === NOTE))
@@ -173,15 +166,6 @@
     }
   }
 
-  // Split out likes, uniqify by pubkey since a like can be duplicated across groups
-  $: likes = uniqBy(prop("pubkey"), children.filter(isLike))
-
-  // Split out zaps
-  $: zaps = children
-    .filter(e => e.kind === 9735)
-    .map(e => ($zapper ? zapFromEvent(e, $zapper) : null))
-    .filter(identity)
-
   onMount(async () => {
     if (!event.pubkey) {
       event = await loadEvent(event.id, {
@@ -294,15 +278,7 @@
               {/if}
               <div class="cy-note-click-target h-[2px]" />
               {#if !isDraft || event.created_at < $timestamp1 - 45}
-                <NoteActions
-                  note={event}
-                  zapper={$zapper}
-                  {replyCtrl}
-                  {showHidden}
-                  {replies}
-                  {likes}
-                  {zaps}
-                  {muted} />
+                <NoteActions {event} {children} />
               {:else}
                 <NotePending {event} removeDraft={removeDraftCb} />
               {/if}
diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index 5f1956a83..57bb06ff2 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -15,9 +15,11 @@
     isSignedEvent,
     createEvent,
     getPubkeyTagValues,
+    getLnUrl,
+    zapFromEvent,
   } from "@welshman/util"
   import {fly} from "src/util/transition"
-  import {formatSats} from "src/util/misc"
+  import {formatSats, timestamp1} from "src/util/misc"
   import {quantify, pluralize} from "hurdak"
   import {browser} from "src/partials/state"
   import {showInfo} from "src/partials/Toast.svelte"
@@ -35,6 +37,7 @@
   import PersonBadge from "src/app/shared/PersonBadge.svelte"
   import HandlerCard from "src/app/shared/HandlerCard.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
+  import NotePending from "src/app/shared/NotePending.svelte"
   import {router} from "src/app/util/router"
   import {
     env,
@@ -47,35 +50,36 @@
     getClientTags,
     trackerStore,
     sessionWithMeta,
+    userMutes,
+    sortEventsDesc,
   } from "src/engine"
   import {getHandlerKey, readHandlers, displayHandler} from "src/domain"
+  import {drafts} from "src/app/state"
+  import {isLike, replyKinds} from "src/util/nostr"
 
-  export let note: TrustedEvent
-  export let muted
-  export let replyCtrl
-  export let showHidden
-  export let replies, likes, zaps
-  export let zapper
+  export let event: TrustedEvent
+  export let children: TrustedEvent[] = []
+  export let showHidden = false
 
-  const signedEvent = asSignedEvent(note as any)
+  const signedEvent = asSignedEvent(event as any)
   const nevent = nip19.neventEncode({
-    id: note.id,
-    kind: note.kind,
-    author: note.pubkey,
-    relays: ctx.app.router.Event(note).getUrls(),
+    id: event.id,
+    kind: event.kind,
+    author: event.pubkey,
+    relays: ctx.app.router.Event(event).getUrls(),
   })
 
   const interpolate = (a, b) => t => a + Math.round((b - a) * t)
-  const mentions = getPubkeyTagValues(note.tags)
+  const mentions = getPubkeyTagValues(event.tags)
   const likesCount = tweened(0, {interpolate})
   const zapsTotal = tweened(0, {interpolate})
   const repliesCount = tweened(0, {interpolate})
-  const kindHandlers = deriveHandlersForKind(note.kind)
-  const handlerId = String(note.tags.find(nthEq(0, "client"))?.[2] || "")
+  const kindHandlers = deriveHandlersForKind(event.kind)
+  const handlerId = String(event.tags.find(nthEq(0, "client"))?.[2] || "")
   const handlerEvent = handlerId ? repository.getEvent(handlerId) : null
   const noteActions = getSetting("note_actions")
   const seenOn = derived(trackerStore, $t =>
-    remove(LOCAL_RELAY_URL, Array.from($t.getRelays(note.id))),
+    remove(LOCAL_RELAY_URL, Array.from($t.getRelays(event.id))),
   )
 
   const setView = v => {
@@ -92,20 +96,21 @@
 
   const os = browser.os?.name?.toLowerCase()
 
-  const createLabel = () => router.at("notes").of(note.id).at("label").open()
+  const createLabel = () => router.at("notes").of(event.id).at("label").open()
 
-  const quote = () => router.at("notes/create").cx({quote: note}).open()
+  const quote = () => router.at("notes/create").cx({quote: event}).open()
 
-  const report = () => router.at("notes").of(note.id).at("report").open()
+  const report = () => router.at("notes").of(event.id).at("report").open()
 
-  const deleteNote = () => router.at("notes").of(note.id).at("delete").qp({kind: note.kind}).open()
+  const deleteNote = () =>
+    router.at("notes").of(event.id).at("delete").qp({kind: event.kind}).open()
 
   const react = async content => {
-    if (isSignedEvent(note)) {
-      publish({event: note, relays: ctx.app.router.PublishEvent(note).getUrls()})
+    if (isSignedEvent(event)) {
+      publish({event: event, relays: ctx.app.router.PublishEvent(event).getUrls()})
     }
 
-    const tags = [...tagReactionTo(note), ...getClientTags()]
+    const tags = [...tagReactionTo(event), ...getClientTags()]
     const template = createEvent(7, {content, tags})
     await signAndPublish(template)
   }
@@ -115,23 +120,23 @@
   }
 
   const startZap = () => {
-    const zapTags = note.tags.filter(nthEq(0, "zap"))
-    const defaultSplit = tagZapSplit(note.pubkey)
+    const zapTags = event.tags.filter(nthEq(0, "zap"))
+    const defaultSplit = tagZapSplit(event.pubkey)
     const splits = zapTags.length > 0 ? zapTags : [defaultSplit]
 
     router
       .at("zap")
       .qp({
         splits,
-        id: note.id,
-        anonymous: Boolean(note.wrap),
+        id: event.id,
+        anonymous: Boolean(event.wrap),
       })
       .open()
   }
 
   const broadcast = () => {
     publish({
-      event: asSignedEvent(note as SignedEvent),
+      event: asSignedEvent(event as SignedEvent),
       relays: ctx.app.router.FromUser().getUrls(),
     })
 
@@ -150,7 +155,7 @@
       return 0
     }, handler.event.tags)
 
-    const entity = last(templateTag) === "note" ? nip19.noteEncode(note.id) : nevent
+    const entity = last(templateTag) === "note" ? nip19.noteEncode(event.id) : nevent
 
     window.open(templateTag[1].replace("<bech32>", entity))
   }
@@ -159,16 +164,29 @@
   let actions = []
   let handlersShown = false
 
+  $: lnurl = getLnUrl(event.tags?.find(nthEq(0, "zap"))?.[1] || "")
+  $: zapper = lnurl ? deriveZapper(lnurl) : deriveZapperForPubkey(event.pubkey)
+  $: muted = $userMutes.has(event.id)
+  // Split out likes, uniqify by pubkey since a like can be duplicated across groups
+  $: likes = uniqBy(prop("pubkey"), children.filter(isLike))
+
+  // Split out zaps
+  $: zaps = children
+    .filter(e => e.kind === 9735)
+    .map(e => ($zapper ? zapFromEvent(e, $zapper) : null))
+    .filter(identity)
+  $: replies = sortEventsDesc(children.filter(e => replyKinds.includes(e.kind)))
+
   $: disableActions = !$signer || (muted && !showHidden)
-  $: like = likes.find(e => e.pubkey === $sessionWithMeta?.pubkey)
+  $: liked = likes.find(e => e.pubkey === $sessionWithMeta?.pubkey)
   $: $likesCount = likes.length
-  $: zap = zaps.find(e => e.request.pubkey === $sessionWithMeta?.pubkey)
+  $: zapped = zaps.find(e => e.request.pubkey === $sessionWithMeta?.pubkey)
   $: $zapsTotal = sum(pluck("invoiceAmount", zaps)) / 1000
-  $: canZap = zapper?.allowsNostr && note.pubkey !== $sessionWithMeta?.pubkey
-  $: reply = replies.find(e => e.pubkey === $sessionWithMeta?.pubkey)
+  $: canZap = $zapper?.allowsNostr && event.pubkey !== $sessionWithMeta?.pubkey
+  $: replied = replies.find(e => e.pubkey === $sessionWithMeta?.pubkey)
   $: $repliesCount = replies.length
   $: handlers =
-    note.kind != 1 &&
+    event.kind != 1 &&
     $kindHandlers.filter(
       h =>
         h.name.toLowerCase() !== "coracle" &&
@@ -188,19 +206,23 @@
       actions.push({label: "Tag", icon: "tag", onClick: createLabel})
 
       if (muted) {
-        actions.push({label: "Unmute", icon: "microphone", onClick: () => unmute(note.id)})
+        actions.push({label: "Unmute", icon: "microphone", onClick: () => unmute(event.id)})
       } else {
-        actions.push({label: "Mute", icon: "microphone-slash", onClick: () => mute(["e", note.id])})
+        actions.push({
+          label: "Mute",
+          icon: "microphone-slash",
+          onClick: () => mute(["e", event.id]),
+        })
       }
 
       actions.push({label: "Report", icon: "triangle-exclamation", onClick: report})
     }
 
-    if (env.PLATFORM_RELAYS.length === 0 && isSignedEvent(note)) {
+    if (env.PLATFORM_RELAYS.length === 0 && isSignedEvent(event)) {
       actions.push({label: "Broadcast", icon: "rss", onClick: broadcast})
     }
 
-    if (note.pubkey === $sessionWithMeta?.pubkey) {
+    if (event.pubkey === $sessionWithMeta?.pubkey) {
       actions.push({
         label: "Delete",
         icon: "trash",
@@ -216,181 +238,185 @@
   }
 
   onMount(() => {
-    loadPubkeys(note.tags.filter(nthEq(0, "zap")).map(nth(1)))
+    loadPubkeys(event.tags.filter(nthEq(0, "zap")).map(nth(1)))
   })
 </script>
 
-<button
-  tabindex="-1"
-  type="button"
-  class="flex justify-between text-neutral-100"
-  on:click|stopPropagation>
-  <div class="flex gap-8 text-sm">
-    <button
-      class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
-        "pointer-events-none opacity-50": disableActions,
-      })}
-      on:click={replyCtrl?.start}>
-      <Icon icon="message" color={reply ? "accent" : "neutral-100"} />
-      {#if $repliesCount > 0 && noteActions.includes("replies")}
-        <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$repliesCount}</span>
-      {/if}
-    </button>
-    {#if env.ENABLE_ZAPS && noteActions.includes("zaps")}
-      <button
-        class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
-          "pointer-events-none opacity-50": disableActions || !canZap,
-        })}
-        on:click={startZap}>
-        <Icon icon="bolt" color={zap ? "accent" : "neutral-100"} />
-        {#if $zapsTotal > 0}
-          <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px"
-            >{formatSats($zapsTotal)}</span>
-        {/if}
-      </button>
-    {/if}
-    {#if noteActions.includes("reactions")}
+{#if drafts.has(event.id) || event.created_at < $timestamp1 - 45}
+  <button
+    tabindex="-1"
+    type="button"
+    class="flex w-full justify-between text-neutral-100"
+    on:click|stopPropagation>
+    <div class="flex gap-8 text-sm">
       <button
         class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
-          "pointer-events-none opacity-50":
-            disableActions || note.pubkey === $sessionWithMeta?.pubkey,
+          "pointer-events-none opacity-50": disableActions,
         })}
-        on:click={() => (like ? deleteReaction(like) : react("+"))}>
-        <Icon
-          icon="heart"
-          color={like ? "accent" : "neutral-100"}
-          class={cx("cursor-pointer", {
-            "fa-beat fa-beat-custom": like,
-          })} />
-        {#if $likesCount > 0}
-          <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$likesCount}</span>
+        on:click={_ => console.log("replyCtrl?.start")}>
+        <Icon icon="message" color={replied ? "accent" : "neutral-100"} />
+        {#if $repliesCount > 0 && noteActions.includes("replies")}
+          <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$repliesCount}</span>
         {/if}
       </button>
-    {/if}
-    {#if handlers.length > 0 && noteActions.includes("recommended_apps")}
-      <Popover theme="transparent" opts={{hideOnClick: true}}>
+      {#if env.ENABLE_ZAPS && noteActions.includes("zaps")}
         <button
-          slot="trigger"
-          class="relative flex h-6 items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
-          <i class="fa-solid fa-list" />
+          class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
+            "pointer-events-none opacity-50": disableActions || !canZap,
+          })}
+          on:click={startZap}>
+          <Icon icon="bolt" color={zapped ? "accent" : "neutral-100"} />
+          {#if $zapsTotal > 0}
+            <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px"
+              >{formatSats($zapsTotal)}</span>
+          {/if}
         </button>
-        <div slot="tooltip" class="max-h-[300px] min-w-[180px] overflow-auto">
-          <Menu>
-            <MenuItem inert class="bg-neutral-900">Open with:</MenuItem>
-            {#each handlers as handler}
-              <MenuItem
-                class="flex h-12 items-center justify-between gap-2"
-                on:click={() => openWithHandler(handler)}>
-                <div class="flex gap-2">
-                  <ImageCircle class="h-5 w-5" src={handler.image} />
-                  {handler.name}
-                </div>
-                {#if handler.recommendations.length > 0}
-                  <WotScore accent score={handler.recommendations.length} />
-                {/if}
-              </MenuItem>
-            {/each}
-          </Menu>
-        </div>
-      </Popover>
-    {/if}
-  </div>
-  <div class="flex scale-90 items-center gap-2">
-    {#if note.wrap}
-      <div
-        class="staatliches flex h-6 items-center gap-1 rounded bg-neutral-800 px-2 text-neutral-100 transition-colors dark:bg-neutral-600 dark:hover:bg-neutral-500">
-        <i class="fa fa-lock text-xs sm:text-accent" />
-        <span class="hidden sm:inline">Encrypted</span>
-      </div>
-    {/if}
-    {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
-      <div
-        class="staatliches hidden cursor-pointer rounded bg-neutral-800 px-2 text-neutral-100 transition-colors hover:bg-neutral-700 dark:bg-neutral-600 dark:hover:bg-neutral-500 sm:block"
-        on:click={() => setView("info")}>
-        <span class="text-accent">{$seenOn.length}</span>
-        {pluralize($seenOn.length, "relay")}
-      </div>
-    {/if}
-    <OverflowMenu {actions} />
-  </div>
-</button>
-
-{#if view}
-  <Modal onEscape={() => setView(null)}>
-    {#if view === "info"}
-      {#if zaps.length > 0}
-        <h1 class="staatliches text-2xl">Zapped By</h1>
-        <div class="grid grid-cols-2 gap-2">
-          {#each zaps as zap}
-            <div class="flex flex-col gap-1">
-              <PersonBadge pubkey={zap.request.pubkey} />
-              <span class="ml-16 text-sm text-neutral-600"
-                >{formatSats(zap.invoiceAmount / 1000)} sats</span>
-            </div>
-          {/each}
-        </div>
       {/if}
-      {#if likes.length > 0}
-        <h1 class="staatliches text-2xl">Liked By</h1>
-        <div class="grid grid-cols-2 gap-2">
-          {#each likes as like}
-            <PersonBadge pubkey={like.pubkey} />
-          {/each}
-        </div>
+      {#if noteActions.includes("reactions")}
+        <button
+          class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
+            "pointer-events-none opacity-50":
+              disableActions || event.pubkey === $sessionWithMeta?.pubkey,
+          })}
+          on:click={() => (liked ? deleteReaction(liked) : react("+"))}>
+          <Icon
+            icon="heart"
+            color={liked ? "accent" : "neutral-100"}
+            class={cx("cursor-pointer", {
+              "fa-beat fa-beat-custom": liked,
+            })} />
+          {#if $likesCount > 0}
+            <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$likesCount}</span>
+          {/if}
+        </button>
       {/if}
-      {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
-        <h1 class="staatliches text-2xl">Relays</h1>
-        <p>This note was found on {quantify($seenOn.length, "relay")} below.</p>
-        <div class="flex flex-col gap-2">
-          {#each $seenOn as url}
-            <RelayCard {url} />
-          {/each}
+      {#if handlers.length > 0 && noteActions.includes("recommended_apps")}
+        <Popover theme="transparent" opts={{hideOnClick: true}}>
+          <button
+            slot="trigger"
+            class="relative flex h-6 items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
+            <i class="fa-solid fa-list" />
+          </button>
+          <div slot="tooltip" class="max-h-[300px] min-w-[180px] overflow-auto">
+            <Menu>
+              <MenuItem inert class="bg-neutral-900">Open with:</MenuItem>
+              {#each handlers as handler}
+                <MenuItem
+                  class="flex h-12 items-center justify-between gap-2"
+                  on:click={() => openWithHandler(handler)}>
+                  <div class="flex gap-2">
+                    <ImageCircle class="h-5 w-5" src={handler.image} />
+                    {handler.name}
+                  </div>
+                  {#if handler.recommendations.length > 0}
+                    <WotScore accent score={handler.recommendations.length} />
+                  {/if}
+                </MenuItem>
+              {/each}
+            </Menu>
+          </div>
+        </Popover>
+      {/if}
+    </div>
+    <div class="flex scale-90 items-center gap-2">
+      {#if event.wrap}
+        <div
+          class="staatliches flex h-6 items-center gap-1 rounded bg-neutral-800 px-2 text-neutral-100 transition-colors dark:bg-neutral-600 dark:hover:bg-neutral-500">
+          <i class="fa fa-lock text-xs sm:text-accent" />
+          <span class="hidden sm:inline">Encrypted</span>
         </div>
       {/if}
-      {#if mentions.length > 0}
-        <h1 class="staatliches text-2xl">In this conversation</h1>
-        <p>{quantify(mentions.length, "person is", "people are")} tagged in this note.</p>
-        <div class="grid grid-cols-2 gap-2">
-          {#each mentions as pubkey}
-            <PersonBadge {pubkey} />
-          {/each}
+      {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
+        <div
+          class="staatliches hidden cursor-pointer rounded bg-neutral-800 px-2 text-neutral-100 transition-colors hover:bg-neutral-700 dark:bg-neutral-600 dark:hover:bg-neutral-500 sm:block"
+          on:click={() => setView("info")}>
+          <span class="text-accent">{$seenOn.length}</span>
+          {pluralize($seenOn.length, "relay")}
         </div>
       {/if}
-      {#if handlers.length > 0 || handlerEvent}
-        <h1 class="staatliches text-2xl">Apps</h1>
-        {#if handlerEvent}
-          {@const [handler] = readHandlers(handlerEvent)}
-          {#if handler}
-            <p>This note was published using {displayHandler(handler)}.</p>
-            <HandlerCard {handler} />
-          {/if}
+      <OverflowMenu {actions} />
+    </div>
+  </button>
+
+  {#if view}
+    <Modal onEscape={() => setView(null)}>
+      {#if view === "info"}
+        {#if zaps.length > 0}
+          <h1 class="staatliches text-2xl">Zapped By</h1>
+          <div class="grid grid-cols-2 gap-2">
+            {#each zaps as zap}
+              <div class="flex flex-col gap-1">
+                <PersonBadge pubkey={zap.request.pubkey} />
+                <span class="ml-16 text-sm text-neutral-600"
+                  >{formatSats(zap.invoiceAmount / 1000)} sats</span>
+              </div>
+            {/each}
+          </div>
         {/if}
-        {#if handlers.length > 0}
-          <div class="flex justify-between">
-            <p>
-              This note can also be viewed using {quantify(handlers.length, "other nostr app")}.
-            </p>
-            {#if handlersShown}
-              <Anchor underline on:click={hideHandlers}>Hide apps</Anchor>
-            {:else}
-              <Anchor underline on:click={showHandlers}>Show apps</Anchor>
-            {/if}
+        {#if likes.length > 0}
+          <h1 class="staatliches text-2xl">Liked By</h1>
+          <div class="grid grid-cols-2 gap-2">
+            {#each likes as like}
+              <PersonBadge pubkey={like.pubkey} />
+            {/each}
           </div>
-          {#if handlersShown}
-            <div in:fly={{y: 20}}>
-              <FlexColumn>
-                {#each handlers as handler (getHandlerKey(handler))}
-                  <HandlerCard {handler} />
-                {/each}
-              </FlexColumn>
+        {/if}
+        {#if $seenOn?.length > 0 && (env.PLATFORM_RELAYS.length === 0 || env.PLATFORM_RELAYS.length > 1)}
+          <h1 class="staatliches text-2xl">Relays</h1>
+          <p>This note was found on {quantify($seenOn.length, "relay")} below.</p>
+          <div class="flex flex-col gap-2">
+            {#each $seenOn as url}
+              <RelayCard {url} />
+            {/each}
+          </div>
+        {/if}
+        {#if mentions.length > 0}
+          <h1 class="staatliches text-2xl">In this conversation</h1>
+          <p>{quantify(mentions.length, "person is", "people are")} tagged in this note.</p>
+          <div class="grid grid-cols-2 gap-2">
+            {#each mentions as pubkey}
+              <PersonBadge {pubkey} />
+            {/each}
+          </div>
+        {/if}
+        {#if handlers.length > 0 || handlerEvent}
+          <h1 class="staatliches text-2xl">Apps</h1>
+          {#if handlerEvent}
+            {@const [handler] = readHandlers(handlerEvent)}
+            {#if handler}
+              <p>This note was published using {displayHandler(handler)}.</p>
+              <HandlerCard {handler} />
+            {/if}
+          {/if}
+          {#if handlers.length > 0}
+            <div class="flex justify-between">
+              <p>
+                This note can also be viewed using {quantify(handlers.length, "other nostr app")}.
+              </p>
+              {#if handlersShown}
+                <Anchor underline on:click={hideHandlers}>Hide apps</Anchor>
+              {:else}
+                <Anchor underline on:click={showHandlers}>Show apps</Anchor>
+              {/if}
             </div>
+            {#if handlersShown}
+              <div in:fly={{y: 20}}>
+                <FlexColumn>
+                  {#each handlers as handler (getHandlerKey(handler))}
+                    <HandlerCard {handler} />
+                  {/each}
+                </FlexColumn>
+              </div>
+            {/if}
           {/if}
         {/if}
+        <h1 class="staatliches text-2xl">Details</h1>
+        <CopyValue label="Link" value={toNostrURI(nevent)} />
+        <CopyValue label="Event ID" encode={nip19.noteEncode} value={event.id} />
+        <CopyValue label="Event JSON" value={JSON.stringify(signedEvent)} />
       {/if}
-      <h1 class="staatliches text-2xl">Details</h1>
-      <CopyValue label="Link" value={toNostrURI(nevent)} />
-      <CopyValue label="Event ID" encode={nip19.noteEncode} value={note.id} />
-      <CopyValue label="Event JSON" value={JSON.stringify(signedEvent)} />
-    {/if}
-  </Modal>
+    </Modal>
+  {/if}
+{:else}
+  <NotePending {event} removeDraft={undefined} />
 {/if}
diff --git a/src/app/shared/NoteContent.svelte b/src/app/shared/NoteContent.svelte
index eea2a77e6..4899aeb01 100644
--- a/src/app/shared/NoteContent.svelte
+++ b/src/app/shared/NoteContent.svelte
@@ -27,7 +27,6 @@
   export let note
   export let depth = 0
   export let showEntire = false
-  export let expandable = true
   export let showMedia = getSetting("show_media")
 
   let warning = getSetting("hide_sensitive") ? getContentWarning(note) : null
@@ -85,7 +84,7 @@
   {:else if CUSTOM_LIST_KINDS.includes(note.kind)}
     <NoteContentKindList {note} />
   {:else}
-    <NoteContentKind1 {note} {showEntire} {showMedia} {expandable} {depth}>
+    <NoteContentKind1 {note} {showEntire} {showMedia} {depth} expandable>
       <div slot="note-content" let:quote>
         <svelte:self depth={depth + 1} note={quote} />
       </div>
diff --git a/src/app/shared/NoteHeader.svelte b/src/app/shared/NoteHeader.svelte
new file mode 100644
index 000000000..eb15ee0c7
--- /dev/null
+++ b/src/app/shared/NoteHeader.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import {ctx} from "@welshman/lib"
+  import {getAncestorTagValues, getIdOrAddress, type TrustedEvent} from "@welshman/util"
+  import Anchor from "src/partials/Anchor.svelte"
+  import {formatTimestamp} from "src/util/misc"
+  import PersonCircle from "src/app/shared/PersonCircle.svelte"
+  import PersonName from "src/app/shared/PersonName.svelte"
+  import {router} from "src/app/util"
+
+  export let event: TrustedEvent
+  export let showParent = true
+  export let anchor = null
+
+  $: ancestors = getAncestorTagValues(event.tags || [])
+  $: reply = ancestors.replies[0]
+  $: root = ancestors.roots[0]
+
+  const showReply = reply && !ancestors.replies.includes(anchor) && showParent
+  const showRoot = root && !ancestors.roots.includes(anchor) && root !== reply && showParent
+
+  const showPerson = () => router.at("people").of(event.pubkey).open()
+
+  const goToDetail = () =>
+    router
+      .at("notes")
+      .of(getIdOrAddress(event), {relays: ctx.app.router.Event(event).getUrls()})
+      .push()
+
+  const goToParent = () =>
+    router
+      .at("notes")
+      .of(reply, {relays: ctx.app.router.EventParents(event).getUrls()})
+      .open()
+
+  const goToThread = () =>
+    router
+      .at("notes")
+      .of(getIdOrAddress(event), {relays: ctx.app.router.EventRoots(event).getUrls()})
+      .at("thread")
+      .open()
+</script>
+
+<div class="flex gap-4">
+  <div>
+    <Anchor class="text-lg font-bold" on:click={showPerson}>
+      <PersonCircle class="h-10 w-10" pubkey={event.pubkey} />
+    </Anchor>
+  </div>
+  <div class="flex min-w-0 flex-grow flex-col gap-2">
+    <div class="flex min-w-0 flex-shrink flex-col items-start justify-between sm:flex-row">
+      <Anchor type="unstyled" class="mr-4 w-full min-w-0" on:click={showPerson}>
+        <PersonName pubkey={event.pubkey} />
+      </Anchor>
+      <div class="flex items-center gap-3 pt-1 text-xs sm:pt-0">
+        <Anchor
+          on:click={goToDetail}
+          class="whitespace-nowrap text-end text-neutral-100"
+          type="unstyled">
+          {formatTimestamp(event.created_at)}
+        </Anchor>
+      </div>
+    </div>
+    <div class="-ml-14 flex flex-col gap-2 sm:ml-0">
+      <div class="flex gap-2">
+        {#if showReply}
+          <small class="text-neutral-100">
+            <i class="fa fa-code-merge" />
+            <Anchor underline on:click={goToParent}>View Parent</Anchor>
+          </small>
+        {/if}
+        {#if showRoot}
+          <small class="text-neutral-100">
+            <i class="fa fa-code-pull-request" />
+            <Anchor underline on:click={goToThread}>View Thread</Anchor>
+          </small>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/NoteKind.svelte b/src/app/shared/NoteKind.svelte
new file mode 100644
index 000000000..6d29842eb
--- /dev/null
+++ b/src/app/shared/NoteKind.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+  import {ctx} from "@welshman/lib"
+  import {
+    getIdOrAddress,
+    getReplyFilters,
+    NOTE,
+    REACTION,
+    ZAP_RESPONSE,
+    type TrustedEvent,
+  } from "@welshman/util"
+  import NoteContentKind0 from "src/app/shared/NoteContentKind0.svelte"
+  import NoteContentKind1 from "src/app/shared/NoteContentKind1.svelte"
+  import NoteContentKind10002 from "src/app/shared/NoteContentKind10002.svelte"
+  import NoteContentKind1063 from "src/app/shared/NoteContentKind1063.svelte"
+  import NoteContentKind1808 from "src/app/shared/NoteContentKind1808.svelte"
+  import NoteContentKind1985 from "src/app/shared/NoteContentKind1985.svelte"
+  import NoteContentKind1986 from "src/app/shared/NoteContentKind1986.svelte"
+  import NoteContentKind3 from "src/app/shared/NoteContentKind3.svelte"
+  import NoteContentKind30009 from "src/app/shared/NoteContentKind30009.svelte"
+  import NoteContentKind30023 from "src/app/shared/NoteContentKind30023.svelte"
+  import NoteContentKind30311 from "src/app/shared/NoteContentKind30311.svelte"
+  import NoteContentKind30402 from "src/app/shared/NoteContentKind30402.svelte"
+  import NoteContentKind31337 from "src/app/shared/NoteContentKind31337.svelte"
+  import NoteContentKind31890 from "src/app/shared/NoteContentKind31890.svelte"
+  import NoteContentKind31923 from "src/app/shared/NoteContentKind31923.svelte"
+  import NoteContentKind32123 from "src/app/shared/NoteContentKind32123.svelte"
+  import NoteContentKind40 from "src/app/shared/NoteContentKind40.svelte"
+  import NoteContentKind9735 from "src/app/shared/NoteContentKind9735.svelte"
+  import NoteContentKind9802 from "src/app/shared/NoteContentKind9802.svelte"
+  import NoteContentKindList from "src/app/shared/NoteContentKindList.svelte"
+  import {CUSTOM_LIST_KINDS} from "src/domain"
+  import {env, getSetting, isEventMuted, load} from "src/engine"
+  import Anchor from "src/partials/Anchor.svelte"
+  import Card from "src/partials/Card.svelte"
+  import {getContentWarning} from "src/util/nostr"
+  import {onMount} from "svelte"
+  import {router} from "../util"
+  import NoteActions from "./NoteActions.svelte"
+  import NoteHeader from "./NoteHeader.svelte"
+
+  export let note: TrustedEvent
+  export let children: TrustedEvent[]
+  export let depth = 0
+  export let showEntire = false
+  export let showMedia = getSetting("show_media")
+  export let interactive = false
+
+  let showHidden = false
+
+  let warning = getSetting("hide_sensitive") ? getContentWarning(note) : null
+
+  const ignoreWarning = () => {
+    warning = null
+  }
+
+  const onClick = e => {
+    const target = (e.detail?.target || e.target) as HTMLElement
+
+    if (interactive && !["I"].includes(target.tagName) && !target.closest("a")) {
+      router
+        .at("notes")
+        .of(getIdOrAddress(note), {relays: ctx.app.router.Event(note).getUrls()})
+        .open()
+    }
+  }
+
+  onMount(() => {
+    const actions = getSetting("note_actions")
+    const kinds = []
+
+    if (actions.includes("replies")) {
+      kinds.push(NOTE)
+    }
+
+    if (actions.includes("reactions")) {
+      kinds.push(REACTION)
+    }
+
+    if (env.ENABLE_ZAPS && actions.includes("zaps")) {
+      kinds.push(ZAP_RESPONSE)
+    }
+
+    load({
+      relays: ctx.app.router.Replies(note).getUrls(),
+      filters: getReplyFilters([note], {kinds}),
+    })
+  })
+
+  $: hidden = $isEventMuted(note, true)
+
+  $: console.log("NoteKind", note)
+</script>
+
+<div class="group relative pt-4">
+  <Card stopPropagation class="relative" on:click={onClick} {interactive}>
+    <NoteHeader event={note} />
+    {#if hidden && !showHidden}
+      <p class="border-l-2 border-solid border-neutral-600 pl-4 text-neutral-100">
+        You have hidden this note.
+        <Anchor
+          underline
+          on:click={() => {
+            showHidden = true
+          }}>Show</Anchor>
+      </p>
+    {:else}
+      <div class:blur-sm={env.BLUR_CONTENT} class="ml-14 mt-2">
+        {#if warning}
+          <div class="flex gap-2 text-neutral-300">
+            <i class="fa fa-warning m-1" />
+            <p>
+              This note has been flagged by the author as "{warning}".<br />
+              <Anchor underline on:click={ignoreWarning}>Show anyway</Anchor>
+            </p>
+          </div>
+        {:else if note.kind === 0}
+          <NoteContentKind0 {note} />
+        {:else if note.kind === 3}
+          <NoteContentKind3 {note} {showEntire} />
+        {:else if [40, 41].includes(note.kind)}
+          <NoteContentKind40 {note} />
+        {:else if note.kind === 1808}
+          <NoteContentKind1808 {note} {showEntire} />
+        {:else if note.kind === 1985}
+          <NoteContentKind1985 {note} {showEntire} />
+        {:else if note.kind === 9735}
+          <NoteContentKind9735 {note} {showEntire} {showMedia} />
+        {:else if note.kind === 1986}
+          <NoteContentKind1986 {note} {showEntire} />
+        {:else if note.kind === 9802}
+          <NoteContentKind9802 {note} {showEntire} {showMedia} />
+        {:else if note.kind === 1063}
+          <NoteContentKind1063 {note} {showMedia} />
+        {:else if note.kind === 10002}
+          <NoteContentKind10002 {note} />
+        {:else if note.kind === 30009}
+          <NoteContentKind30009 {note} {showMedia} />
+        {:else if note.kind === 30023}
+          <NoteContentKind30023 {note} {showEntire} {showMedia} {...$$props} />
+        {:else if note.kind === 30311}
+          <NoteContentKind30311 {note} {showMedia} />
+        {:else if note.kind === 30402}
+          <NoteContentKind30402 {note} {showEntire} {showMedia} />
+        {:else if note.kind === 31337}
+          <NoteContentKind31337 {note} {showMedia} />
+        {:else if note.kind === 31890}
+          <NoteContentKind31890 {note} />
+        {:else if note.kind === 31923}
+          <NoteContentKind31923 {note} />
+        {:else if note.kind === 32123}
+          <NoteContentKind32123 {note} />
+        {:else if CUSTOM_LIST_KINDS.includes(note.kind)}
+          <NoteContentKindList {note} />
+        {:else}
+          <NoteContentKind1 {note} {showEntire} {showMedia} {depth} expandable>
+            <div slot="note-content" let:quote>
+              <svelte:self depth={depth + 1} note={quote} />
+            </div>
+          </NoteContentKind1>
+        {/if}
+      </div>
+      <div class="ml-14 pt-4">
+        <NoteActions event={note} {children} />
+      </div>
+    {/if}
+  </Card>
+</div>
diff --git a/src/app/shared/NotePending.svelte b/src/app/shared/NotePending.svelte
index 8b74a7ee6..2467d1f2e 100644
--- a/src/app/shared/NotePending.svelte
+++ b/src/app/shared/NotePending.svelte
@@ -18,7 +18,7 @@
   import {thunks, type Thunk} from "@welshman/app"
   import {PublishStatus} from "@welshman/net"
   import {now} from "@welshman/signer"
-  import {LOCAL_RELAY_URL, type SignedEvent} from "@welshman/util"
+  import {LOCAL_RELAY_URL, type TrustedEvent} from "@welshman/util"
   import {tweened} from "svelte/motion"
   import {userSettings} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
@@ -26,7 +26,7 @@
 
   const rendered = now()
 
-  export let event: SignedEvent
+  export let event: TrustedEvent
   export let removeDraft: () => void
 
   $: thunk = $thunks[event.id] as Thunk
@@ -42,7 +42,7 @@
   ).length
   $: timeout = statuses.filter(s => s.status === PublishStatus.Timeout).length
   $: success = statuses.filter(s => s.status === PublishStatus.Success).length
-  $: total = relays.length || 0
+  $: total = relays?.length || 0
 
   const completed = tweened(0)
 
diff --git a/src/app/shared/Thread.svelte b/src/app/shared/Thread.svelte
new file mode 100644
index 000000000..39c46c8dc
--- /dev/null
+++ b/src/app/shared/Thread.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+  import {repository} from "@welshman/app"
+  import {ctx} from "@welshman/lib"
+  import {deriveEvents} from "@welshman/store"
+  import {getIdOrAddress, getReplyFilters, isChildOf, matchFilters} from "@welshman/util"
+  import {quantify, sleep} from "hurdak"
+  import {onMount} from "svelte"
+  import NoteMeta from "src/app/shared/NoteMeta.svelte"
+  import NoteReply from "src/app/shared/NoteReply.svelte"
+  import NoteKind from "src/app/shared/NoteKind.svelte"
+  import {drafts} from "src/app/state"
+  import {ensureUnwrapped, isEventMuted, loadEvent, sortEventsDesc} from "src/engine"
+  import AltColor from "src/partials/AltColor.svelte"
+  import Popover from "src/partials/Popover.svelte"
+  import Spinner from "src/partials/Spinner.svelte"
+  import {replyKinds} from "src/util/nostr"
+  import {fly, slide} from "src/util/transition"
+
+  export let note
+  export let relays = []
+  export let filters = null
+  export let reposts = new Map()
+  export let depth = 0
+  export let anchor = null
+  export let topLevel = false
+  export let isLastReply = false
+  export let showParent = true
+  export let showLoading = false
+
+  let ready = false
+  let event = note
+  let replyCtrl = null
+  let replyIsActive = false
+  let showMutedReplies = false
+  let collapsed = depth === 0
+  let showHiddenReplies = anchor === getIdOrAddress(event)
+  let draftEventId: string
+  let removeDraft: () => void
+
+  const showEntire = showHiddenReplies
+
+  const addDraftToContext = (event, cb) => {
+    draftEventId = event.id
+    removeDraft = () => {
+      cb()
+      drafts.set(note.id, event.content)
+      sleep(10).then(() => {
+        replyCtrl?.start()
+      })
+    }
+  }
+
+  const context = deriveEvents(repository, {filters: getReplyFilters([event])})
+
+  $: children = $context.filter(e => isChildOf(e, event))
+  $: replies = sortEventsDesc(children.filter(e => replyKinds.includes(e.kind)))
+
+  let mutedReplies, hiddenReplies, visibleReplies
+
+  $: {
+    mutedReplies = []
+    hiddenReplies = []
+    visibleReplies = []
+
+    for (const e of replies) {
+      if ($isEventMuted(e)) {
+        mutedReplies.push(e)
+      } else if (collapsed) {
+        hiddenReplies.push(e)
+      } else if (
+        !showHiddenReplies &&
+        filters &&
+        !matchFilters(filters, e) &&
+        draftEventId !== e.id
+      ) {
+        hiddenReplies.push(e)
+      } else {
+        visibleReplies.push(e)
+      }
+    }
+
+    if (depth === 0) {
+      mutedReplies.splice(0)
+      hiddenReplies.splice(0)
+    }
+
+    if (!showHiddenReplies && visibleReplies.length === 0) {
+      mutedReplies.splice(0)
+      hiddenReplies.splice(0)
+    }
+
+    if (showMutedReplies) {
+      visibleReplies = visibleReplies.concat(mutedReplies.splice(0))
+    }
+
+    if (!showHiddenReplies) {
+      hiddenReplies = hiddenReplies.concat(visibleReplies.slice(3))
+      visibleReplies = visibleReplies.slice(0, 3)
+    }
+  }
+
+  onMount(async () => {
+    console.log("THREAD")
+    if (!event.pubkey) {
+      event = await loadEvent(event.id, {
+        relays: ctx.app.router.FromRelays(relays).getUrls(),
+      })
+    }
+
+    event = await ensureUnwrapped(event)
+
+    if (event.pubkey) {
+      ready = true
+    }
+  })
+
+  $: console.log(ready)
+</script>
+
+{#if ready}
+  <div>
+    <NoteMeta {reposts} note={event} />
+    <div class="note relative">
+      {#if !showParent && !topLevel}
+        <!-- {#if true} -->
+        <AltColor let:isAlt>
+          <svg height="36" width="36" class="absolute -left-[18px] top-1">
+            <circle
+              cx="18"
+              cy="18"
+              r="14"
+              fill="transparent"
+              stroke-width="4"
+              stroke-dashoffset="54"
+              stroke-dasharray="100 100"
+              transform-origin="center"
+              class={isAlt ? "stroke-tinted-700" : "stroke-neutral-800"} />
+          </svg>
+        </AltColor>
+        {#if isLastReply}
+          <AltColor background class="absolute -left-4 h-[20px] w-1" let:isAlt />
+        {:else}
+          <AltColor background class="absolute -bottom-2 -left-4 top-0 w-1" let:isAlt />
+        {/if}
+      {/if}
+      <NoteKind note={event} {children} {showEntire} />
+      {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
+        <div class="relative">
+          <AltColor
+            background
+            class="absolute left-0 top-0 -mr-2 -mt-6 flex h-8 w-8 cursor-pointer items-center
+                   justify-center rounded-full"
+            on:click={() => {
+              collapsed = !collapsed
+            }}>
+            <Popover triggerType="mouseenter">
+              <div slot="trigger">
+                <i
+                  class="fa fa-arrow-up transition-all"
+                  class:text-tinted-500={!collapsed}
+                  class:text-tinted-100={collapsed}
+                  class:rotate-180={collapsed} />
+              </div>
+              <div slot="tooltip">
+                {collapsed ? "Show replies" : "Hide replies"}
+              </div>
+            </Popover>
+          </AltColor>
+        </div>
+      {/if}
+
+      <NoteReply
+        {addDraftToContext}
+        parent={event}
+        showBorder={visibleReplies.length > 0}
+        bind:this={replyCtrl}
+        on:start={() => {
+          replyIsActive = true
+        }}
+        on:reset={() => {
+          replyIsActive = false
+        }} />
+
+      {#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
+        <div
+          class="note-children relative ml-4 flex flex-col"
+          in:fly|local={{y: 20}}
+          out:slide|local>
+          {#if hiddenReplies.length > 0}
+            <button
+              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
+              on:click={() => {
+                showHiddenReplies = true
+              }}>
+              <i class="fa fa-up-down pr-2 text-sm" />
+              Show {quantify(hiddenReplies.length, "other reply", "more replies")}
+            </button>
+            {#if visibleReplies.length > 0}
+              <AltColor background class="absolute -left-4 -top-10 h-28 w-1" />
+            {/if}
+          {:else if visibleReplies.length > 0}
+            <AltColor background class="absolute -left-4 -top-10 h-14 w-1" />
+          {/if}
+          {#if visibleReplies.length}
+            {#key showHiddenReplies}
+              <div in:fly={{y: 20}}>
+                {#each visibleReplies as r, i (r.id)}
+                  <svelte:self
+                    isLastReply={i === visibleReplies.length - 1}
+                    showParent={false}
+                    showHidden
+                    isDraft={r.id === draftEventId}
+                    removeDraftCb={removeDraft}
+                    note={r}
+                    depth={depth - 1}
+                    {filters}
+                    {anchor} />
+                {/each}
+              </div>
+            {/key}
+          {/if}
+          {#if showHiddenReplies && mutedReplies.length > 0}
+            <button
+              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
+              on:click={() => {
+                showMutedReplies = true
+              }}>
+              <i class="fa fa-up-down pr-2 text-sm" />
+              Show {quantify(mutedReplies.length, "hidden reply", "hidden replies")}
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else if showLoading}
+  <Spinner />
+{/if}
diff --git a/src/app/views/NoteDetail.svelte b/src/app/views/NoteDetail.svelte
index 044935d57..d91d23066 100644
--- a/src/app/views/NoteDetail.svelte
+++ b/src/app/views/NoteDetail.svelte
@@ -3,7 +3,7 @@
   import {fly} from "src/util/transition"
   import {getIdOrAddress} from "@welshman/util"
   import Spinner from "src/partials/Spinner.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import Thread from "src/app/shared/Thread.svelte"
   import {deriveEvent} from "src/engine"
 
   export let id = null
@@ -16,7 +16,7 @@
 
 {#if $event}
   <div in:fly={{y: 20}}>
-    <Note showLoading anchor={getIdOrAddress($event)} note={$event} {depth} {relays} />
+    <Thread showLoading anchor={getIdOrAddress($event)} note={$event} {depth} {relays} />
   </div>
 {:else}
   <Spinner />

From 9ce0223259ce45b4dd47cdd2940bd458935e8188 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Mon, 9 Dec 2024 18:03:13 +0100
Subject: [PATCH 3/9] - Rename Thread to FeedItem - Refactor reply state

---
 src/app/shared/Feed.svelte                    |   4 +-
 .../shared/{Thread.svelte => FeedItem.svelte} |  43 +-
 src/app/shared/Note.svelte                    | 381 ------------------
 src/app/shared/NoteActions.svelte             |  42 +-
 src/app/shared/NoteHeader.svelte              |   4 +-
 src/app/shared/NoteKind.svelte                | 141 +------
 src/app/shared/NotePending.svelte             |  11 +-
 src/app/shared/NoteReply.svelte               |  85 ++--
 src/app/shared/PersonCollections.svelte       |   4 +-
 src/app/state.ts                              |   2 +
 src/app/views/NoteDetail.svelte               |   2 +-
 src/app/views/NotificationMention.svelte      |   4 +-
 src/app/views/NotificationReplies.svelte      |   4 +-
 src/app/views/RelayList.svelte                |   4 +-
 src/app/views/ReportCreate.svelte             |   4 +-
 src/app/views/ThreadDetail.svelte             |  10 +-
 16 files changed, 118 insertions(+), 627 deletions(-)
 rename src/app/shared/{Thread.svelte => FeedItem.svelte} (86%)
 delete mode 100644 src/app/shared/Note.svelte

diff --git a/src/app/shared/Feed.svelte b/src/app/shared/Feed.svelte
index 4c364e0e8..670e7c29f 100644
--- a/src/app/shared/Feed.svelte
+++ b/src/app/shared/Feed.svelte
@@ -50,7 +50,7 @@
     isEventMuted,
     unwrapRepost,
   } from "src/engine"
-  import Thread from "src/app/shared/Thread.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
 
   export let feed: Feed
   export let anchor = null
@@ -244,7 +244,7 @@
 <FlexColumn bind:element>
   {#each events as note, i (note.id)}
     <div in:fly={{y: 20}}>
-      <Thread {filters} {reposts} {depth} {anchor} {note} />
+      <FeedItem {filters} {reposts} {depth} {anchor} {note} />
     </div>
     {#if i > 20 && parseInt(hash(note.id)) % 100 === 0 && $promptDismissed < ago(WEEK)}
       <Card class="group flex items-center justify-between">
diff --git a/src/app/shared/Thread.svelte b/src/app/shared/FeedItem.svelte
similarity index 86%
rename from src/app/shared/Thread.svelte
rename to src/app/shared/FeedItem.svelte
index 39c46c8dc..899f2587c 100644
--- a/src/app/shared/Thread.svelte
+++ b/src/app/shared/FeedItem.svelte
@@ -3,18 +3,17 @@
   import {ctx} from "@welshman/lib"
   import {deriveEvents} from "@welshman/store"
   import {getIdOrAddress, getReplyFilters, isChildOf, matchFilters} from "@welshman/util"
-  import {quantify, sleep} from "hurdak"
+  import {quantify} from "hurdak"
   import {onMount} from "svelte"
   import NoteMeta from "src/app/shared/NoteMeta.svelte"
-  import NoteReply from "src/app/shared/NoteReply.svelte"
   import NoteKind from "src/app/shared/NoteKind.svelte"
-  import {drafts} from "src/app/state"
-  import {ensureUnwrapped, isEventMuted, loadEvent, sortEventsDesc} from "src/engine"
+  import {ensureUnwrapped, getSetting, isEventMuted, loadEvent, sortEventsDesc} from "src/engine"
   import AltColor from "src/partials/AltColor.svelte"
   import Popover from "src/partials/Popover.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import {replyKinds} from "src/util/nostr"
   import {fly, slide} from "src/util/transition"
+  import {openReplies} from "src/app/state"
 
   export let note
   export let relays = []
@@ -26,34 +25,22 @@
   export let isLastReply = false
   export let showParent = true
   export let showLoading = false
+  export let showMedia = getSetting("show_media")
 
   let ready = false
   let event = note
-  let replyCtrl = null
-  let replyIsActive = false
   let showMutedReplies = false
   let collapsed = depth === 0
   let showHiddenReplies = anchor === getIdOrAddress(event)
   let draftEventId: string
-  let removeDraft: () => void
 
   const showEntire = showHiddenReplies
 
-  const addDraftToContext = (event, cb) => {
-    draftEventId = event.id
-    removeDraft = () => {
-      cb()
-      drafts.set(note.id, event.content)
-      sleep(10).then(() => {
-        replyCtrl?.start()
-      })
-    }
-  }
-
   const context = deriveEvents(repository, {filters: getReplyFilters([event])})
 
   $: children = $context.filter(e => isChildOf(e, event))
   $: replies = sortEventsDesc(children.filter(e => replyKinds.includes(e.kind)))
+  $: replyIsActive = $openReplies[event.id]
 
   let mutedReplies, hiddenReplies, visibleReplies
 
@@ -100,7 +87,6 @@
   }
 
   onMount(async () => {
-    console.log("THREAD")
     if (!event.pubkey) {
       event = await loadEvent(event.id, {
         relays: ctx.app.router.FromRelays(relays).getUrls(),
@@ -113,8 +99,6 @@
       ready = true
     }
   })
-
-  $: console.log(ready)
 </script>
 
 {#if ready}
@@ -122,7 +106,6 @@
     <NoteMeta {reposts} note={event} />
     <div class="note relative">
       {#if !showParent && !topLevel}
-        <!-- {#if true} -->
         <AltColor let:isAlt>
           <svg height="36" width="36" class="absolute -left-[18px] top-1">
             <circle
@@ -143,7 +126,7 @@
           <AltColor background class="absolute -bottom-2 -left-4 top-0 w-1" let:isAlt />
         {/if}
       {/if}
-      <NoteKind note={event} {children} {showEntire} />
+      <NoteKind note={event} {children} {showEntire} {showParent} {showMedia} />
       {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
         <div class="relative">
           <AltColor
@@ -169,18 +152,6 @@
         </div>
       {/if}
 
-      <NoteReply
-        {addDraftToContext}
-        parent={event}
-        showBorder={visibleReplies.length > 0}
-        bind:this={replyCtrl}
-        on:start={() => {
-          replyIsActive = true
-        }}
-        on:reset={() => {
-          replyIsActive = false
-        }} />
-
       {#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
         <div
           class="note-children relative ml-4 flex flex-col"
@@ -209,8 +180,6 @@
                     isLastReply={i === visibleReplies.length - 1}
                     showParent={false}
                     showHidden
-                    isDraft={r.id === draftEventId}
-                    removeDraftCb={removeDraft}
                     note={r}
                     depth={depth - 1}
                     {filters}
diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
deleted file mode 100644
index 587aa3ba9..000000000
--- a/src/app/shared/Note.svelte
+++ /dev/null
@@ -1,381 +0,0 @@
-<script lang="ts">
-  import {ctx} from "@welshman/lib"
-  import {
-    isChildOf,
-    getReplyFilters,
-    getIdOrAddress,
-    matchFilters,
-    NOTE,
-    REACTION,
-    ZAP_RESPONSE,
-    getAncestorTagValues,
-  } from "@welshman/util"
-  import {repository} from "@welshman/app"
-  import {deriveEvents} from "@welshman/store"
-  import {sleep} from "hurdak"
-  import {onMount} from "svelte"
-  import {quantify} from "hurdak"
-  import {fly, slide} from "src/util/transition"
-  import {replyKinds} from "src/util/nostr"
-  import {formatTimestamp, timestamp1} from "src/util/misc"
-  import Popover from "src/partials/Popover.svelte"
-  import AltColor from "src/partials/AltColor.svelte"
-  import Spinner from "src/partials/Spinner.svelte"
-  import Anchor from "src/partials/Anchor.svelte"
-  import Card from "src/partials/Card.svelte"
-  import NoteMeta from "src/app/shared/NoteMeta.svelte"
-  import PersonCircle from "src/app/shared/PersonCircle.svelte"
-  import PersonName from "src/app/shared/PersonName.svelte"
-  import NoteReply from "src/app/shared/NoteReply.svelte"
-  import NoteActions from "src/app/shared/NoteActions.svelte"
-  import NoteContent from "src/app/shared/NoteContent.svelte"
-  import NotePending from "src/app/shared/NotePending.svelte"
-  import {drafts} from "src/app/state"
-  import {router} from "src/app/util/router"
-  import {
-    env,
-    load,
-    loadEvent,
-    ensureUnwrapped,
-    isEventMuted,
-    getSetting,
-    sortEventsDesc,
-  } from "src/engine"
-
-  export let note
-  export let relays = []
-  export let filters = null
-  export let reposts = new Map()
-  export let depth = 0
-  export let anchor = null
-  export let topLevel = false
-  export let isLastReply = false
-  export let isDraft = false
-  export let removeDraftCb = null
-  export let showParent = true
-  export let showLoading = false
-  export let showHidden = false
-  export let showMedia = getSetting("show_media")
-
-  let ready = false
-  let event = note
-  let replyCtrl = null
-  let replyIsActive = false
-  let showMutedReplies = false
-  let collapsed = depth === 0
-  let showHiddenReplies = anchor === getIdOrAddress(event)
-  let draftEventId: string
-  let removeDraft: () => void
-
-  const showEntire = showHiddenReplies
-  const interactive = !anchor || !showEntire
-
-  const addDraftToContext = (event, cb) => {
-    draftEventId = event.id
-    removeDraft = () => {
-      cb()
-      drafts.set(note.id, event.content)
-      sleep(10).then(() => {
-        replyCtrl?.start()
-      })
-    }
-  }
-
-  const onClick = e => {
-    const target = (e.detail?.target || e.target) as HTMLElement
-
-    if (interactive && !["I"].includes(target.tagName) && !target.closest("a")) {
-      router
-        .at("notes")
-        .of(getIdOrAddress(event), {relays: ctx.app.router.Event(event).getUrls()})
-        .open()
-    }
-  }
-
-  const showPerson = () => router.at("people").of(event.pubkey).open()
-
-  const goToDetail = () =>
-    router
-      .at("notes")
-      .of(getIdOrAddress(event), {relays: ctx.app.router.Event(event).getUrls()})
-      .push()
-
-  const goToParent = () =>
-    router
-      .at("notes")
-      .of(reply, {relays: ctx.app.router.EventParents(event).getUrls()})
-      .open()
-
-  const goToThread = () =>
-    router
-      .at("notes")
-      .of(getIdOrAddress(event), {relays: ctx.app.router.EventRoots(event).getUrls()})
-      .at("thread")
-      .open()
-
-  const context = deriveEvents(repository, {filters: getReplyFilters([event])})
-
-  $: ancestors = getAncestorTagValues(event.tags || [])
-  $: reply = ancestors.replies[0]
-  $: root = ancestors.roots[0]
-  $: hidden = $isEventMuted(event, true)
-  $: children = $context.filter(e => isChildOf(e, event))
-  $: replies = sortEventsDesc(children.filter(e => e.kind === NOTE))
-
-  let mutedReplies, hiddenReplies, visibleReplies
-
-  $: {
-    mutedReplies = []
-    hiddenReplies = []
-    visibleReplies = []
-
-    for (const e of replies) {
-      if ($isEventMuted(e)) {
-        mutedReplies.push(e)
-      } else if (collapsed) {
-        hiddenReplies.push(e)
-      } else if (
-        !showHiddenReplies &&
-        filters &&
-        !matchFilters(filters, e) &&
-        draftEventId !== e.id
-      ) {
-        hiddenReplies.push(e)
-      } else {
-        visibleReplies.push(e)
-      }
-    }
-
-    if (depth === 0) {
-      mutedReplies.splice(0)
-      hiddenReplies.splice(0)
-    }
-
-    if (!showHiddenReplies && visibleReplies.length === 0) {
-      mutedReplies.splice(0)
-      hiddenReplies.splice(0)
-    }
-
-    if (showMutedReplies) {
-      visibleReplies = visibleReplies.concat(mutedReplies.splice(0))
-    }
-
-    if (!showHiddenReplies) {
-      hiddenReplies = hiddenReplies.concat(visibleReplies.slice(3))
-      visibleReplies = visibleReplies.slice(0, 3)
-    }
-  }
-
-  onMount(async () => {
-    if (!event.pubkey) {
-      event = await loadEvent(event.id, {
-        relays: ctx.app.router.FromRelays(relays).getUrls(),
-      })
-    }
-
-    event = await ensureUnwrapped(event)
-
-    if (event.pubkey) {
-      ready = true
-
-      const actions = getSetting("note_actions")
-      const kinds = []
-
-      if (actions.includes("replies")) {
-        kinds.push(NOTE)
-      }
-
-      if (actions.includes("reactions")) {
-        kinds.push(REACTION)
-      }
-
-      if (env.ENABLE_ZAPS && actions.includes("zaps")) {
-        kinds.push(ZAP_RESPONSE)
-      }
-
-      load({
-        relays: ctx.app.router.Replies(event).getUrls(),
-        filters: getReplyFilters([event], {kinds}),
-      })
-    }
-  })
-</script>
-
-{#if ready}
-  {@const showReply = reply && !ancestors.replies.includes(anchor) && showParent}
-  {@const showRoot = root && !ancestors.roots.includes(anchor) && root !== reply && showParent}
-  <div>
-    <NoteMeta {reposts} note={event} />
-    <div class="note relative">
-      {#if !showParent && !topLevel}
-        <AltColor let:isAlt>
-          <svg height="36" width="36" class="absolute -left-[18px] top-1">
-            <circle
-              cx="18"
-              cy="18"
-              r="14"
-              fill="transparent"
-              stroke-width="4"
-              stroke-dashoffset="54"
-              stroke-dasharray="100 100"
-              transform-origin="center"
-              class={isAlt ? "stroke-tinted-700" : "stroke-neutral-800"} />
-          </svg>
-        </AltColor>
-        {#if isLastReply}
-          <AltColor background class="absolute -left-4 h-[20px] w-1" let:isAlt />
-        {:else}
-          <AltColor background class="absolute -bottom-2 -left-4 top-0 w-1" let:isAlt />
-        {/if}
-      {/if}
-      <div class="group relative" class:pt-4={!showParent && !topLevel}>
-        <Card stopPropagation class="relative flex gap-4" on:click={onClick} {interactive}>
-          <div>
-            <Anchor class="text-lg font-bold" on:click={showPerson}>
-              <PersonCircle class="h-10 w-10" pubkey={event.pubkey} />
-            </Anchor>
-          </div>
-          <div class="flex min-w-0 flex-grow flex-col gap-2">
-            <div class="flex min-w-0 flex-shrink flex-col items-start justify-between sm:flex-row">
-              <Anchor type="unstyled" class="mr-4 w-full min-w-0" on:click={showPerson}>
-                <PersonName pubkey={event.pubkey} />
-              </Anchor>
-              <div class="flex items-center gap-3 pt-1 text-xs sm:pt-0">
-                <Anchor
-                  on:click={goToDetail}
-                  class="whitespace-nowrap text-end text-neutral-100"
-                  type="unstyled">
-                  {formatTimestamp(event.created_at)}
-                </Anchor>
-              </div>
-            </div>
-            <div class="-ml-14 flex flex-col gap-2 sm:ml-0">
-              <div class="flex gap-2">
-                {#if showReply}
-                  <small class="text-neutral-100">
-                    <i class="fa fa-code-merge" />
-                    <Anchor underline on:click={goToParent}>View Parent</Anchor>
-                  </small>
-                {/if}
-                {#if showRoot}
-                  <small class="text-neutral-100">
-                    <i class="fa fa-code-pull-request" />
-                    <Anchor underline on:click={goToThread}>View Thread</Anchor>
-                  </small>
-                {/if}
-              </div>
-              {#if hidden && !showHidden}
-                <p class="border-l-2 border-solid border-neutral-600 pl-4 text-neutral-100">
-                  You have hidden this note.
-                  <Anchor
-                    underline
-                    on:click={() => {
-                      showHidden = true
-                    }}>Show</Anchor>
-                </p>
-              {:else}
-                <NoteContent note={event} {showEntire} {showMedia} />
-              {/if}
-              <div class="cy-note-click-target h-[2px]" />
-              {#if !isDraft || event.created_at < $timestamp1 - 45}
-                <NoteActions {event} {children} />
-              {:else}
-                <NotePending {event} removeDraft={removeDraftCb} />
-              {/if}
-            </div>
-          </div>
-        </Card>
-      </div>
-
-      {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
-        <div class="relative">
-          <AltColor
-            background
-            class="absolute left-0 top-0 -mr-2 -mt-6 flex h-8 w-8 cursor-pointer items-center
-                   justify-center rounded-full"
-            on:click={() => {
-              collapsed = !collapsed
-            }}>
-            <Popover triggerType="mouseenter">
-              <div slot="trigger">
-                <i
-                  class="fa fa-arrow-up transition-all"
-                  class:text-tinted-500={!collapsed}
-                  class:text-tinted-100={collapsed}
-                  class:rotate-180={collapsed} />
-              </div>
-              <div slot="tooltip">
-                {collapsed ? "Show replies" : "Hide replies"}
-              </div>
-            </Popover>
-          </AltColor>
-        </div>
-      {/if}
-
-      <NoteReply
-        {addDraftToContext}
-        parent={event}
-        showBorder={visibleReplies.length > 0}
-        bind:this={replyCtrl}
-        on:start={() => {
-          replyIsActive = true
-        }}
-        on:reset={() => {
-          replyIsActive = false
-        }} />
-
-      {#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
-        <div
-          class="note-children relative ml-4 mt-1 flex flex-col"
-          in:fly|local={{y: 20}}
-          out:slide|local>
-          {#if hiddenReplies.length > 0}
-            <button
-              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
-              on:click={() => {
-                showHiddenReplies = true
-              }}>
-              <i class="fa fa-up-down pr-2 text-sm" />
-              Show {quantify(hiddenReplies.length, "other reply", "more replies")}
-            </button>
-            {#if visibleReplies.length > 0}
-              <AltColor background class="absolute -left-4 -top-10 h-28 w-1" />
-            {/if}
-          {:else if visibleReplies.length > 0}
-            <AltColor background class="absolute -left-4 -top-10 h-14 w-1" />
-          {/if}
-          {#if visibleReplies.length}
-            {#key showHiddenReplies}
-              <div in:fly={{y: 20}}>
-                {#each visibleReplies as r, i (r.id)}
-                  <svelte:self
-                    isLastReply={i === visibleReplies.length - 1}
-                    showParent={false}
-                    showHidden
-                    isDraft={r.id === draftEventId}
-                    removeDraftCb={removeDraft}
-                    note={r}
-                    depth={depth - 1}
-                    {filters}
-                    {anchor} />
-                {/each}
-              </div>
-            {/key}
-          {/if}
-          {#if showHiddenReplies && mutedReplies.length > 0}
-            <button
-              class="mt-4 cursor-pointer rounded-md bg-gradient-to-l from-transparent via-tinted-700 to-tinted-700 py-2 text-neutral-100 outline-0 transition-colors hover:bg-tinted-700"
-              on:click={() => {
-                showMutedReplies = true
-              }}>
-              <i class="fa fa-up-down pr-2 text-sm" />
-              Show {quantify(mutedReplies.length, "hidden reply", "hidden replies")}
-            </button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </div>
-{:else if showLoading}
-  <Spinner />
-{/if}
diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index 57bb06ff2..f7944a6dc 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -17,6 +17,11 @@
     getPubkeyTagValues,
     getLnUrl,
     zapFromEvent,
+    NOTE,
+    REACTION,
+    ZAP_RESPONSE,
+    getReplyFilters,
+    isChildOf,
   } from "@welshman/util"
   import {fly} from "src/util/transition"
   import {formatSats, timestamp1} from "src/util/misc"
@@ -54,11 +59,10 @@
     sortEventsDesc,
   } from "src/engine"
   import {getHandlerKey, readHandlers, displayHandler} from "src/domain"
-  import {drafts} from "src/app/state"
+  import {drafts, openReplies} from "src/app/state"
   import {isLike, replyKinds} from "src/util/nostr"
 
   export let event: TrustedEvent
-  export let children: TrustedEvent[] = []
   export let showHidden = false
 
   const signedEvent = asSignedEvent(event as any)
@@ -160,6 +164,10 @@
     window.open(templateTag[1].replace("<bech32>", entity))
   }
 
+  const context = deriveEvents(repository, {filters: getReplyFilters([event])})
+
+  $: children = $context.filter(e => isChildOf(e, event))
+
   let view
   let actions = []
   let handlersShown = false
@@ -239,10 +247,32 @@
 
   onMount(() => {
     loadPubkeys(event.tags.filter(nthEq(0, "zap")).map(nth(1)))
+
+    const actions = getSetting("note_actions")
+    const kinds = []
+
+    if (actions.includes("replies")) {
+      kinds.push(NOTE)
+    }
+
+    if (actions.includes("reactions")) {
+      kinds.push(REACTION)
+    }
+
+    if (env.ENABLE_ZAPS && actions.includes("zaps")) {
+      kinds.push(ZAP_RESPONSE)
+    }
+
+    load({
+      relays: ctx.app.router.Replies(event).getUrls(),
+      filters: getReplyFilters([event], {kinds}),
+    })
   })
 </script>
 
-{#if drafts.has(event.id) || event.created_at < $timestamp1 - 45}
+{#if event.created_at > $timestamp1 - 45 && event.pubkey === $session?.pubkey}
+  <NotePending {event} />
+{:else}
   <button
     tabindex="-1"
     type="button"
@@ -253,7 +283,9 @@
         class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
           "pointer-events-none opacity-50": disableActions,
         })}
-        on:click={_ => console.log("replyCtrl?.start")}>
+        on:click={_ => {
+          $openReplies[event.id] = true
+        }}>
         <Icon icon="message" color={replied ? "accent" : "neutral-100"} />
         {#if $repliesCount > 0 && noteActions.includes("replies")}
           <span transition:fly|local={{y: 5, duration: 100}} class="-mt-px">{$repliesCount}</span>
@@ -417,6 +449,4 @@
       {/if}
     </Modal>
   {/if}
-{:else}
-  <NotePending {event} removeDraft={undefined} />
 {/if}
diff --git a/src/app/shared/NoteHeader.svelte b/src/app/shared/NoteHeader.svelte
index eb15ee0c7..909502d33 100644
--- a/src/app/shared/NoteHeader.svelte
+++ b/src/app/shared/NoteHeader.svelte
@@ -15,8 +15,8 @@
   $: reply = ancestors.replies[0]
   $: root = ancestors.roots[0]
 
-  const showReply = reply && !ancestors.replies.includes(anchor) && showParent
-  const showRoot = root && !ancestors.roots.includes(anchor) && root !== reply && showParent
+  $: showReply = reply && !ancestors.replies.includes(anchor) && showParent
+  $: showRoot = root && !ancestors.roots.includes(anchor) && root !== reply && showParent
 
   const showPerson = () => router.at("people").of(event.pubkey).open()
 
diff --git a/src/app/shared/NoteKind.svelte b/src/app/shared/NoteKind.svelte
index 6d29842eb..0bab4ba5e 100644
--- a/src/app/shared/NoteKind.svelte
+++ b/src/app/shared/NoteKind.svelte
@@ -1,58 +1,24 @@
 <script lang="ts">
   import {ctx} from "@welshman/lib"
-  import {
-    getIdOrAddress,
-    getReplyFilters,
-    NOTE,
-    REACTION,
-    ZAP_RESPONSE,
-    type TrustedEvent,
-  } from "@welshman/util"
-  import NoteContentKind0 from "src/app/shared/NoteContentKind0.svelte"
-  import NoteContentKind1 from "src/app/shared/NoteContentKind1.svelte"
-  import NoteContentKind10002 from "src/app/shared/NoteContentKind10002.svelte"
-  import NoteContentKind1063 from "src/app/shared/NoteContentKind1063.svelte"
-  import NoteContentKind1808 from "src/app/shared/NoteContentKind1808.svelte"
-  import NoteContentKind1985 from "src/app/shared/NoteContentKind1985.svelte"
-  import NoteContentKind1986 from "src/app/shared/NoteContentKind1986.svelte"
-  import NoteContentKind3 from "src/app/shared/NoteContentKind3.svelte"
-  import NoteContentKind30009 from "src/app/shared/NoteContentKind30009.svelte"
-  import NoteContentKind30023 from "src/app/shared/NoteContentKind30023.svelte"
-  import NoteContentKind30311 from "src/app/shared/NoteContentKind30311.svelte"
-  import NoteContentKind30402 from "src/app/shared/NoteContentKind30402.svelte"
-  import NoteContentKind31337 from "src/app/shared/NoteContentKind31337.svelte"
-  import NoteContentKind31890 from "src/app/shared/NoteContentKind31890.svelte"
-  import NoteContentKind31923 from "src/app/shared/NoteContentKind31923.svelte"
-  import NoteContentKind32123 from "src/app/shared/NoteContentKind32123.svelte"
-  import NoteContentKind40 from "src/app/shared/NoteContentKind40.svelte"
-  import NoteContentKind9735 from "src/app/shared/NoteContentKind9735.svelte"
-  import NoteContentKind9802 from "src/app/shared/NoteContentKind9802.svelte"
-  import NoteContentKindList from "src/app/shared/NoteContentKindList.svelte"
-  import {CUSTOM_LIST_KINDS} from "src/domain"
-  import {env, getSetting, isEventMuted, load} from "src/engine"
+  import {getIdOrAddress, type TrustedEvent} from "@welshman/util"
+  import {getSetting, isEventMuted} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import Card from "src/partials/Card.svelte"
-  import {getContentWarning} from "src/util/nostr"
-  import {onMount} from "svelte"
-  import {router} from "../util"
-  import NoteActions from "./NoteActions.svelte"
-  import NoteHeader from "./NoteHeader.svelte"
+  import {router} from "src/app/util"
+  import NoteActions from "src/app/shared/NoteActions.svelte"
+  import NoteContent from "src/app/shared/NoteContent.svelte"
+  import NoteHeader from "src/app/shared/NoteHeader.svelte"
+  import NoteReply from "src/app/shared/NoteReply.svelte"
 
   export let note: TrustedEvent
-  export let children: TrustedEvent[]
   export let depth = 0
   export let showEntire = false
   export let showMedia = getSetting("show_media")
-  export let interactive = false
+  export let showParent = true
+  export let interactive = true
 
   let showHidden = false
 
-  let warning = getSetting("hide_sensitive") ? getContentWarning(note) : null
-
-  const ignoreWarning = () => {
-    warning = null
-  }
-
   const onClick = e => {
     const target = (e.detail?.target || e.target) as HTMLElement
 
@@ -64,36 +30,14 @@
     }
   }
 
-  onMount(() => {
-    const actions = getSetting("note_actions")
-    const kinds = []
-
-    if (actions.includes("replies")) {
-      kinds.push(NOTE)
-    }
-
-    if (actions.includes("reactions")) {
-      kinds.push(REACTION)
-    }
-
-    if (env.ENABLE_ZAPS && actions.includes("zaps")) {
-      kinds.push(ZAP_RESPONSE)
-    }
-
-    load({
-      relays: ctx.app.router.Replies(note).getUrls(),
-      filters: getReplyFilters([note], {kinds}),
-    })
-  })
-
   $: hidden = $isEventMuted(note, true)
-
-  $: console.log("NoteKind", note)
 </script>
 
 <div class="group relative pt-4">
   <Card stopPropagation class="relative" on:click={onClick} {interactive}>
-    <NoteHeader event={note} />
+    {#if note.kind !== 31890}
+      <NoteHeader event={note} {showParent} />
+    {/if}
     {#if hidden && !showHidden}
       <p class="border-l-2 border-solid border-neutral-600 pl-4 text-neutral-100">
         You have hidden this note.
@@ -104,64 +48,13 @@
           }}>Show</Anchor>
       </p>
     {:else}
-      <div class:blur-sm={env.BLUR_CONTENT} class="ml-14 mt-2">
-        {#if warning}
-          <div class="flex gap-2 text-neutral-300">
-            <i class="fa fa-warning m-1" />
-            <p>
-              This note has been flagged by the author as "{warning}".<br />
-              <Anchor underline on:click={ignoreWarning}>Show anyway</Anchor>
-            </p>
-          </div>
-        {:else if note.kind === 0}
-          <NoteContentKind0 {note} />
-        {:else if note.kind === 3}
-          <NoteContentKind3 {note} {showEntire} />
-        {:else if [40, 41].includes(note.kind)}
-          <NoteContentKind40 {note} />
-        {:else if note.kind === 1808}
-          <NoteContentKind1808 {note} {showEntire} />
-        {:else if note.kind === 1985}
-          <NoteContentKind1985 {note} {showEntire} />
-        {:else if note.kind === 9735}
-          <NoteContentKind9735 {note} {showEntire} {showMedia} />
-        {:else if note.kind === 1986}
-          <NoteContentKind1986 {note} {showEntire} />
-        {:else if note.kind === 9802}
-          <NoteContentKind9802 {note} {showEntire} {showMedia} />
-        {:else if note.kind === 1063}
-          <NoteContentKind1063 {note} {showMedia} />
-        {:else if note.kind === 10002}
-          <NoteContentKind10002 {note} />
-        {:else if note.kind === 30009}
-          <NoteContentKind30009 {note} {showMedia} />
-        {:else if note.kind === 30023}
-          <NoteContentKind30023 {note} {showEntire} {showMedia} {...$$props} />
-        {:else if note.kind === 30311}
-          <NoteContentKind30311 {note} {showMedia} />
-        {:else if note.kind === 30402}
-          <NoteContentKind30402 {note} {showEntire} {showMedia} />
-        {:else if note.kind === 31337}
-          <NoteContentKind31337 {note} {showMedia} />
-        {:else if note.kind === 31890}
-          <NoteContentKind31890 {note} />
-        {:else if note.kind === 31923}
-          <NoteContentKind31923 {note} />
-        {:else if note.kind === 32123}
-          <NoteContentKind32123 {note} />
-        {:else if CUSTOM_LIST_KINDS.includes(note.kind)}
-          <NoteContentKindList {note} />
-        {:else}
-          <NoteContentKind1 {note} {showEntire} {showMedia} {depth} expandable>
-            <div slot="note-content" let:quote>
-              <svelte:self depth={depth + 1} note={quote} />
-            </div>
-          </NoteContentKind1>
-        {/if}
+      <div class:pl-0={note.kind == 31890} class="mt-2 pl-14">
+        <NoteContent {note} {depth} {showEntire} {showMedia} />
       </div>
-      <div class="ml-14 pt-4">
-        <NoteActions event={note} {children} />
+      <div class:pl-0={note.kind == 31890} class="pl-14 pt-4">
+        <NoteActions event={note} />
       </div>
     {/if}
   </Card>
+  <NoteReply parent={note} />
 </div>
diff --git a/src/app/shared/NotePending.svelte b/src/app/shared/NotePending.svelte
index 2467d1f2e..b154cfeb9 100644
--- a/src/app/shared/NotePending.svelte
+++ b/src/app/shared/NotePending.svelte
@@ -18,17 +18,19 @@
   import {thunks, type Thunk} from "@welshman/app"
   import {PublishStatus} from "@welshman/net"
   import {now} from "@welshman/signer"
-  import {LOCAL_RELAY_URL, type TrustedEvent} from "@welshman/util"
+  import {getAncestorTagValues, LOCAL_RELAY_URL, type TrustedEvent} from "@welshman/util"
   import {tweened} from "svelte/motion"
   import {userSettings} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import {timestamp1} from "src/util/misc"
+  import {openReplies} from "../state"
 
   const rendered = now()
 
   export let event: TrustedEvent
-  export let removeDraft: () => void
 
+  $: ancestors = getAncestorTagValues(event.tags || [])
+  $: parent = ancestors.replies[0]
   $: thunk = $thunks[event.id] as Thunk
 
   $: status = thunk?.status
@@ -88,6 +90,9 @@
       >Sending reply in {rendered + Math.ceil($userSettings.send_delay / 1000) - $timestamp1} seconds</span>
     <button
       class="ml-2 cursor-pointer rounded-md bg-neutral-100-d px-4 py-1 text-tinted-700-d"
-      on:click={removeDraft}>Cancel</button>
+      on:click={() => {
+        thunk.controller.abort()
+        $openReplies[parent] = true
+      }}>Cancel</button>
   {/if}
 </div>
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index f28a514e6..4b604f0b8 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -1,45 +1,37 @@
 <script lang="ts">
-  import {session, displayProfileByPubkey, tagReplyTo, tagPubkey} from "@welshman/app"
+  import {displayProfileByPubkey, session, tagPubkey, tagReplyTo} from "@welshman/app"
   import {ctx} from "@welshman/lib"
-  import {getPubkeyTagValues, createEvent, uniqTags} from "@welshman/util"
-  import {writable, type Writable} from "svelte/store"
-  import {createEventDispatcher} from "svelte"
+  import {Tags, createEvent, uniqTags} from "@welshman/util"
+  import {uniq, without} from "ramda"
   import {Editor} from "svelte-tiptap"
-  import {without, uniq} from "ramda"
-  import {slide} from "src/util/transition"
-  import AltColor from "src/partials/AltColor.svelte"
-  import Chip from "src/partials/Chip.svelte"
+  import {writable, type Writable} from "svelte/store"
   import {getEditorOptions} from "src/app/editor"
   import Compose from "src/app/shared/Compose.svelte"
-  import NsecWarning from "src/app/shared/NsecWarning.svelte"
   import NoteOptions from "src/app/shared/NoteOptions.svelte"
-  import {drafts} from "src/app/state"
-  import {publish, tagsFromContent, getClientTags, sign, userSettings} from "src/engine"
+  import NsecWarning from "src/app/shared/NsecWarning.svelte"
+  import {drafts, openReplies} from "src/app/state"
+  import {getClientTags, publish, sign, tagsFromContent, userSettings} from "src/engine"
+  import AltColor from "src/partials/AltColor.svelte"
+  import Chip from "src/partials/Chip.svelte"
+  import {slide} from "src/util/transition"
 
   export let parent
-  export let addDraftToContext
   export let showBorder = false
   export let forceOpen = false
 
-  const dispatch = createEventDispatcher()
   const nsecWarning = writable(null)
 
-  let container, loading
-  let isOpen = false
-  let showOptions = false
-  let mentions = []
-  let options = {warning: "", anonymous: false}
+  $: mentions = without(
+    [$session.pubkey],
+    uniq(parentTags.values("p").valueOf().concat(parent?.pubkey)),
+  )
+
+  let loading
+  let opts = {warning: "", anonymous: false}
   let editorElement: HTMLElement
   let editor: Editor
   let editorLoading: Writable<boolean>
 
-  export const start = () => {
-    dispatch("start")
-
-    isOpen = true
-    mentions = without([$session.pubkey], uniq([parent.pubkey, ...getPubkeyTagValues(parent.tags)]))
-  }
-
   const bypassNsecWarning = () => {
     nsecWarning.set(null)
     send({skipNsecWarning: true})
@@ -68,20 +60,13 @@
     drafts.delete(parent.id)
   }
 
-  const reset = () => {
-    dispatch("reset")
-
-    isOpen = false
-    mentions = []
-  }
-
   const removeMention = pubkey => {
     mentions = without([pubkey], mentions)
   }
 
   const send = async ({skipNsecWarning = false} = {}) => {
     if ($editorLoading) return
-
+    saveDraft()
     const content = editor.getText({blockSeparator: "\n"}).trim()
 
     if (!content) return
@@ -115,23 +100,18 @@
       delay: $userSettings.send_delay,
     })
 
-    addDraftToContext(event, () => thunk.controller.abort())
-    isOpen = false
+    $openReplies[parent.id] = false
     loading = false
 
     thunk.result.then(() => {
       clearDraft()
-      reset()
     })
   }
 
   const onBodyClick = e => {
-    const target = e.target as HTMLElement
+    saveDraft()
 
-    if (isOpen && container && !container.contains(target)) {
-      saveDraft()
-      reset()
-    }
+    $openReplies = {}
   }
 
   const createEditor = () => {
@@ -149,11 +129,10 @@
     editorLoading = editor.storage.fileUpload.loading
   }
 
-  $: {
-    if (editorElement) {
-      createEditor()
-    }
-  }
+  // eslint-disable-next-line
+  $: editorElement && createEditor()
+
+  $: isOpen = $openReplies[parent?.id]
 </script>
 
 <svelte:body on:click={onBodyClick} />
@@ -163,14 +142,10 @@
     class="relative transition-colors"
     class:opacity-50={loading}
     class:pointer-events-none={loading}>
-    {#if showBorder}
+    <!-- {#if showBorder}
       <AltColor background class="absolute -top-4 z-none h-5 w-1" />
-    {/if}
-    <div
-      transition:slide|local
-      class="note-reply relative my-2 gap-1"
-      bind:this={container}
-      on:click|stopPropagation>
+    {/if} -->
+    <div transition:slide|local class="note-reply relative my-2 gap-1" on:click|stopPropagation>
       <AltColor background class="overflow-hidden rounded">
         <div class="p-3 text-neutral-100" class:rounded-b={mentions.length === 0}>
           <Compose bind:element={editorElement} {editor}>
@@ -213,9 +188,7 @@
   </div>
 {/if}
 
-{#if showOptions}
-  <NoteOptions onClose={closeOptions} onSubmit={setOptions} initialValues={options} />
-{/if}
+<NoteOptions on:change={setOpts} initialValues={opts} />
 
 {#if $nsecWarning}
   <NsecWarning onAbort={() => nsecWarning.set(null)} onBypass={bypassNsecWarning} />
diff --git a/src/app/shared/PersonCollections.svelte b/src/app/shared/PersonCollections.svelte
index 77fd76b8f..17b0ac9b6 100644
--- a/src/app/shared/PersonCollections.svelte
+++ b/src/app/shared/PersonCollections.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Chip from "src/partials/Chip.svelte"
   import Subheading from "src/partials/Subheading.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {loadLabels, deriveCollections} from "src/engine"
 
   export let pubkey
@@ -30,6 +30,6 @@
 {#if selection}
   <Subheading>#{selection.name}</Subheading>
   {#each selection.ids as id (id)}
-    <Note note={{id}} />
+    <FeedItem note={{id}} />
   {/each}
 {/if}
diff --git a/src/app/state.ts b/src/app/state.ts
index 21dad6943..25f5dcc9d 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -32,6 +32,8 @@ import {
 
 export const drafts = new Map<string, string>()
 
+export const openReplies = writable<{[key: string]: boolean}>({})
+
 export const menuIsOpen = writable(false)
 
 export const searchTerm = writable("")
diff --git a/src/app/views/NoteDetail.svelte b/src/app/views/NoteDetail.svelte
index d91d23066..628ce0c28 100644
--- a/src/app/views/NoteDetail.svelte
+++ b/src/app/views/NoteDetail.svelte
@@ -3,7 +3,7 @@
   import {fly} from "src/util/transition"
   import {getIdOrAddress} from "@welshman/util"
   import Spinner from "src/partials/Spinner.svelte"
-  import Thread from "src/app/shared/Thread.svelte"
+  import Thread from "src/app/shared/FeedItem.svelte"
   import {deriveEvent} from "src/engine"
 
   export let id = null
diff --git a/src/app/views/NotificationMention.svelte b/src/app/views/NotificationMention.svelte
index fc616b0d3..007f953a7 100644
--- a/src/app/views/NotificationMention.svelte
+++ b/src/app/views/NotificationMention.svelte
@@ -4,7 +4,7 @@
   import {getAncestorTagValues} from "@welshman/util"
   import {formatTimestamp} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import PeopleAction from "src/app/shared/PeopleAction.svelte"
   import type {Notification} from "src/engine"
   import {deriveEvent} from "src/engine"
@@ -22,7 +22,7 @@
     <small>{formatTimestamp(timestamp)}</small>
   </div>
   {#if $event}
-    <Note
+    <FeedItem
       topLevel
       showLoading
       depth={1}
diff --git a/src/app/views/NotificationReplies.svelte b/src/app/views/NotificationReplies.svelte
index 6528ecd77..1e160b7c5 100644
--- a/src/app/views/NotificationReplies.svelte
+++ b/src/app/views/NotificationReplies.svelte
@@ -6,7 +6,7 @@
   import {formatTimestamp} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
   import PeopleAction from "src/app/shared/PeopleAction.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import type {Notification} from "src/engine"
   import {deriveEvent} from "src/engine"
 
@@ -27,7 +27,7 @@
     <small>{formatTimestamp(timestamp)}</small>
   </div>
   {#if $event}
-    <Note topLevel depth={1} note={$event} filters={[{ids: pluck("id", interactions)}]} />
+    <FeedItem topLevel depth={1} note={$event} filters={[{ids: pluck("id", interactions)}]} />
   {:else}
     <Spinner />
   {/if}
diff --git a/src/app/views/RelayList.svelte b/src/app/views/RelayList.svelte
index 9e6588fd6..42960f76b 100644
--- a/src/app/views/RelayList.svelte
+++ b/src/app/views/RelayList.svelte
@@ -25,7 +25,7 @@
   import Subheading from "src/partials/Subheading.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {load, userFollows, sortEventsDesc, joinRelay} from "src/engine"
 
   const tabs = ["search", "reviews"]
@@ -172,7 +172,7 @@
   <Tabs {tabs} {activeTab} {setActiveTab} />
   {#if activeTab === "reviews"}
     {#each reviews.slice(0, limit) as review (review.id)}
-      <Note note={review} />
+      <FeedItem note={review} />
     {/each}
   {:else}
     <Input
diff --git a/src/app/views/ReportCreate.svelte b/src/app/views/ReportCreate.svelte
index 26d6b0373..eb080e3b0 100644
--- a/src/app/views/ReportCreate.svelte
+++ b/src/app/views/ReportCreate.svelte
@@ -11,7 +11,7 @@
   import Field from "src/partials/Field.svelte"
   import Textarea from "src/partials/Textarea.svelte"
   import PersonLink from "src/app/shared/PersonLink.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {router} from "src/app/util/router"
   import {publish} from "src/engine"
 
@@ -62,7 +62,7 @@
         with the report.
       </div>
     </Field>
-    <Note note={event} showMedia={false} />
+    <FeedItem note={event} showMedia={false} />
     <Anchor button tag="button" type="submit">Save</Anchor>
   </FlexColumn>
 </form>
diff --git a/src/app/views/ThreadDetail.svelte b/src/app/views/ThreadDetail.svelte
index 6100f9d76..e1acd43d0 100644
--- a/src/app/views/ThreadDetail.svelte
+++ b/src/app/views/ThreadDetail.svelte
@@ -4,7 +4,7 @@
   import {ThreadLoader} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import Spinner from "src/partials/Spinner.svelte"
-  import Note from "src/app/shared/Note.svelte"
+  import FeedItem from "src/app/shared/FeedItem.svelte"
   import {deriveEvent} from "src/engine"
 
   export let id = null
@@ -34,10 +34,10 @@
 {#if loading}
   <Spinner />
 {:else}
-  <Note note={$root} />
+  <FeedItem note={$root} />
   {#if showAncestors}
     {#each $ancestors as ancestor (ancestor.id)}
-      <Note topLevel showParent={false} note={ancestor} />
+      <FeedItem topLevel showParent={false} note={ancestor} />
     {/each}
   {:else if $ancestors.length > 0}
     <Anchor
@@ -49,6 +49,6 @@
       Show {quantify($ancestors.length, "other note")}
     </Anchor>
   {/if}
-  <Note topLevel showParent={false} note={$parent} />
-  <Note topLevel showParent={false} note={$event} depth={2} />
+  <FeedItem topLevel showParent={false} note={$parent} />
+  <FeedItem topLevel showParent={false} note={$event} depth={2} />
 {/if}

From 26e8db11a738191bf916e187edcc58f6a5942ce7 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 12 Dec 2024 14:04:51 +0100
Subject: [PATCH 4/9] - fix NoteActions when logged out - add openWith icon

---
 src/app/shared/NoteActions.svelte |  5 +++--
 src/app/shared/NoteReply.svelte   |  2 +-
 src/partials/Icon.svelte          | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index f7944a6dc..4f95c633a 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -8,6 +8,7 @@
   import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
   import {repository, signer, tagReactionTo, tagZapSplit, mute, unmute} from "@welshman/app"
   import type {TrustedEvent, SignedEvent} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
   import {
     LOCAL_RELAY_URL,
     toNostrURI,
@@ -326,8 +327,8 @@
         <Popover theme="transparent" opts={{hideOnClick: true}}>
           <button
             slot="trigger"
-            class="relative flex h-6 items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
-            <i class="fa-solid fa-list" />
+            class="relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0 sm:block">
+            <Icon icon="openwith" color="neutral-100" class="cursor-pointer" />
           </button>
           <div slot="tooltip" class="max-h-[300px] min-w-[180px] overflow-auto">
             <Menu>
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index 4b604f0b8..b4ee34de6 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -22,7 +22,7 @@
   const nsecWarning = writable(null)
 
   $: mentions = without(
-    [$session.pubkey],
+    [$session?.pubkey],
     uniq(parentTags.values("p").valueOf().concat(parent?.pubkey)),
   )
 
diff --git a/src/partials/Icon.svelte b/src/partials/Icon.svelte
index 1dd98bf43..3f89c4d55 100644
--- a/src/partials/Icon.svelte
+++ b/src/partials/Icon.svelte
@@ -8,7 +8,12 @@
   $: colorValue = $themeColors[color]
 </script>
 
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" class={cx("inline", $$props.class)}>
+<svg
+  width="17"
+  height="16"
+  viewBox={icon == "openwith" ? "0 0 25 27" : "0 0 17 16"}
+  fill="none"
+  class={cx("inline", $$props.class)}>
   {#if icon === "bolt"}
     <path
       stroke={colorValue}
@@ -109,5 +114,12 @@
     <path stroke={colorValue} stroke-width="0.777214" d="M5.73535 6.00244L8.27943 7.44029" />
     <path stroke={colorValue} stroke-width="0.777214" d="M10.5801 8.13977L12.8055 8.30817" />
     <path stroke={colorValue} stroke-width="0.777214" d="M9.36035 9.22266L9.36294 12.0103" />
+  {:else if icon == "openwith"}
+    <path
+      d="M13.3433 9.125L21 1.60668M21 1.60668V7.25M21 1.60668H14.75M2.77778 1H7C7.62228 1 7.93342 1 8.1711 1.1211C8.38017 1.22763 8.55015 1.39761 8.65667 1.60668C8.77778 1.84436 8.77778 2.1555 8.77778 2.77778V7C8.77778 7.62228 8.77778 7.93342 8.65667 8.1711C8.55015 8.38017 8.38017 8.55015 8.1711 8.65667C7.93342 8.77778 7.62228 8.77778 7 8.77778H2.77778C2.1555 8.77778 1.84436 8.77778 1.60668 8.65667C1.39761 8.55015 1.22763 8.38017 1.1211 8.1711C1 7.93342 1 7.62228 1 7V2.77778C1 2.1555 1 1.84436 1.1211 1.60668C1.22763 1.39761 1.39761 1.22763 1.60668 1.1211C1.84436 1 2.1555 1 2.77778 1ZM15 13.2222H19.2222C19.8445 13.2222 20.1556 13.2222 20.3933 13.3433C20.6024 13.4499 20.7724 13.6198 20.8789 13.8289C21 14.0666 21 14.3777 21 15V19.2222C21 19.8445 21 20.1556 20.8789 20.3933C20.7724 20.6024 20.6024 20.7724 20.3933 20.8789C20.1556 21 19.8445 21 19.2222 21H15C14.3777 21 14.0666 21 13.8289 20.8789C13.6198 20.7724 13.4499 20.6024 13.3433 20.3933C13.2222 20.1556 13.2222 19.8445 13.2222 19.2222V15C13.2222 14.3777 13.2222 14.0666 13.3433 13.8289C13.4499 13.6198 13.6198 13.4499 13.8289 13.3433C14.0666 13.2222 14.3777 13.2222 15 13.2222ZM2.77778 13.2222H7C7.62228 13.2222 7.93342 13.2222 8.1711 13.3433C8.38017 13.4499 8.55015 13.6198 8.65667 13.8289C8.77778 14.0666 8.77778 14.3777 8.77778 15V19.2222C8.77778 19.8445 8.77778 20.1556 8.65667 20.3933C8.55015 20.6024 8.38017 20.7724 8.1711 20.8789C7.93342 21 7.62228 21 7 21H2.77778C2.1555 21 1.84436 21 1.60668 20.8789C1.39761 20.7724 1.22763 20.6024 1.1211 20.3933C1 20.1556 1 19.8445 1 19.2222V15C1 14.3777 1 14.0666 1.1211 13.8289C1.22763 13.6198 1.39761 13.4499 1.60668 13.3433C1.84436 13.2222 2.1555 13.2222 2.77778 13.2222Z"
+      stroke={colorValue}
+      stroke-width="1.4"
+      stroke-linecap="round"
+      stroke-linejoin="round" />
   {/if}
 </svg>

From 289bae0c2ada18a142e4810fe213ca2e9125e54e Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 12 Dec 2024 14:13:46 +0100
Subject: [PATCH 5/9] rename NoteKind to Note

---
 src/app/shared/FeedItem.svelte                  | 2 +-
 src/app/shared/{NoteKind.svelte => Note.svelte} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/app/shared/{NoteKind.svelte => Note.svelte} (100%)

diff --git a/src/app/shared/FeedItem.svelte b/src/app/shared/FeedItem.svelte
index 899f2587c..13c7a06b3 100644
--- a/src/app/shared/FeedItem.svelte
+++ b/src/app/shared/FeedItem.svelte
@@ -6,7 +6,7 @@
   import {quantify} from "hurdak"
   import {onMount} from "svelte"
   import NoteMeta from "src/app/shared/NoteMeta.svelte"
-  import NoteKind from "src/app/shared/NoteKind.svelte"
+  import NoteKind from "src/app/shared/Note.svelte"
   import {ensureUnwrapped, getSetting, isEventMuted, loadEvent, sortEventsDesc} from "src/engine"
   import AltColor from "src/partials/AltColor.svelte"
   import Popover from "src/partials/Popover.svelte"
diff --git a/src/app/shared/NoteKind.svelte b/src/app/shared/Note.svelte
similarity index 100%
rename from src/app/shared/NoteKind.svelte
rename to src/app/shared/Note.svelte

From 3de0abac215cc69561c4c1d77cc10286b63dec91 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 12 Dec 2024 14:17:38 +0100
Subject: [PATCH 6/9] fine tune the padding for feed note

---
 src/app/shared/FeedItem.svelte    |  9 ++++-----
 src/app/shared/Note.svelte        |  4 ++--
 src/app/shared/NoteActions.svelte | 15 ++++++++++++---
 src/app/shared/NoteReply.svelte   | 29 ++++++++++++++++-------------
 src/partials/Modal.svelte         |  2 +-
 5 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/app/shared/FeedItem.svelte b/src/app/shared/FeedItem.svelte
index 13c7a06b3..0e0dfcdba 100644
--- a/src/app/shared/FeedItem.svelte
+++ b/src/app/shared/FeedItem.svelte
@@ -2,16 +2,15 @@
   import {repository} from "@welshman/app"
   import {ctx} from "@welshman/lib"
   import {deriveEvents} from "@welshman/store"
-  import {getIdOrAddress, getReplyFilters, isChildOf, matchFilters} from "@welshman/util"
+  import {getIdOrAddress, getReplyFilters, isChildOf, matchFilters, NOTE} from "@welshman/util"
   import {quantify} from "hurdak"
   import {onMount} from "svelte"
   import NoteMeta from "src/app/shared/NoteMeta.svelte"
-  import NoteKind from "src/app/shared/Note.svelte"
+  import Note from "src/app/shared/Note.svelte"
   import {ensureUnwrapped, getSetting, isEventMuted, loadEvent, sortEventsDesc} from "src/engine"
   import AltColor from "src/partials/AltColor.svelte"
   import Popover from "src/partials/Popover.svelte"
   import Spinner from "src/partials/Spinner.svelte"
-  import {replyKinds} from "src/util/nostr"
   import {fly, slide} from "src/util/transition"
   import {openReplies} from "src/app/state"
 
@@ -39,7 +38,7 @@
   const context = deriveEvents(repository, {filters: getReplyFilters([event])})
 
   $: children = $context.filter(e => isChildOf(e, event))
-  $: replies = sortEventsDesc(children.filter(e => replyKinds.includes(e.kind)))
+  $: replies = sortEventsDesc(children.filter(e => e.kind == NOTE))
   $: replyIsActive = $openReplies[event.id]
 
   let mutedReplies, hiddenReplies, visibleReplies
@@ -126,7 +125,7 @@
           <AltColor background class="absolute -bottom-2 -left-4 top-0 w-1" let:isAlt />
         {/if}
       {/if}
-      <NoteKind note={event} {children} {showEntire} {showParent} {showMedia} />
+      <Note note={event} {showEntire} {showParent} {showMedia} />
       {#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
         <div class="relative">
           <AltColor
diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
index 0bab4ba5e..bc3fab59d 100644
--- a/src/app/shared/Note.svelte
+++ b/src/app/shared/Note.svelte
@@ -48,10 +48,10 @@
           }}>Show</Anchor>
       </p>
     {:else}
-      <div class:pl-0={note.kind == 31890} class="mt-2 pl-14">
+      <div class:!pl-0={note.kind == 31890} class="mt-2 pl-14">
         <NoteContent {note} {depth} {showEntire} {showMedia} />
       </div>
-      <div class:pl-0={note.kind == 31890} class="pl-14 pt-4">
+      <div class:!pl-10={note.kind == 31890} class="pl-14 pt-4">
         <NoteActions event={note} />
       </div>
     {/if}
diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index 4f95c633a..f6e9bfd9d 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -6,7 +6,16 @@
   import {tweened} from "svelte/motion"
   import {derived} from "svelte/store"
   import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
-  import {repository, signer, tagReactionTo, tagZapSplit, mute, unmute} from "@welshman/app"
+  import {
+    deriveZapper,
+    deriveZapperForPubkey,
+    repository,
+    signer,
+    tagReactionTo,
+    tagZapSplit,
+    mute,
+    unmute,
+  } from "@welshman/app"
   import type {TrustedEvent, SignedEvent} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {
@@ -61,7 +70,7 @@
   } from "src/engine"
   import {getHandlerKey, readHandlers, displayHandler} from "src/domain"
   import {drafts, openReplies} from "src/app/state"
-  import {isLike, replyKinds} from "src/util/nostr"
+  import {isLike} from "src/util/nostr"
 
   export let event: TrustedEvent
   export let showHidden = false
@@ -184,7 +193,7 @@
     .filter(e => e.kind === 9735)
     .map(e => ($zapper ? zapFromEvent(e, $zapper) : null))
     .filter(identity)
-  $: replies = sortEventsDesc(children.filter(e => replyKinds.includes(e.kind)))
+  $: replies = sortEventsDesc(children.filter(e => e.kind == NOTE))
 
   $: disableActions = !$signer || (muted && !showHidden)
   $: liked = likes.find(e => e.pubkey === $sessionWithMeta?.pubkey)
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index b4ee34de6..c007f704d 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {displayProfileByPubkey, session, tagPubkey, tagReplyTo} from "@welshman/app"
   import {ctx} from "@welshman/lib"
-  import {Tags, createEvent, uniqTags} from "@welshman/util"
+  import {getPubkeyTagValues, createEvent, uniqTags} from "@welshman/util"
   import {uniq, without} from "ramda"
   import {Editor} from "svelte-tiptap"
   import {writable, type Writable} from "svelte/store"
@@ -19,11 +19,13 @@
   export let showBorder = false
   export let forceOpen = false
 
+  let showOptions = false
+
   const nsecWarning = writable(null)
 
   $: mentions = without(
     [$session?.pubkey],
-    uniq(parentTags.values("p").valueOf().concat(parent?.pubkey)),
+    uniq([parent.pubkey, ...getPubkeyTagValues(parent.tags)]),
   )
 
   let loading
@@ -37,17 +39,16 @@
     send({skipNsecWarning: true})
   }
 
-  const openOptions = () => {
-    showOptions = true
-  }
-
   const closeOptions = () => {
     showOptions = false
   }
 
-  const setOptions = values => {
-    options = {...options, ...values}
-    showOptions = false
+  const openOptions = () => {
+    showOptions = true
+  }
+
+  const setOpts = e => {
+    opts = {...opts, ...e.detail}
   }
 
   const saveDraft = () => {
@@ -81,8 +82,8 @@
       ...getClientTags(),
     ])
 
-    if (options.warning) {
-      tags.push(["content-warning", options.warning])
+    if (opts.warning) {
+      tags.push(["content-warning", opts.warning])
     }
 
     // Re-broadcast the note we're replying to
@@ -93,7 +94,7 @@
     loading = true
 
     const template = createEvent(1, {content, tags})
-    const event = await sign(template, options)
+    const event = await sign(template, opts)
     const thunk = publish({
       event,
       relays: ctx.app.router.PublishEvent(event).getUrls(),
@@ -188,7 +189,9 @@
   </div>
 {/if}
 
-<NoteOptions on:change={setOpts} initialValues={opts} />
+{#if showOptions}
+  <NoteOptions onClose={closeOptions} onSubmit={setOpts} initialValues={opts} />
+{/if}
 
 {#if $nsecWarning}
   <NsecWarning onAbort={() => nsecWarning.set(null)} onBypass={bypassNsecWarning} />
diff --git a/src/partials/Modal.svelte b/src/partials/Modal.svelte
index cf8ce3c40..aa4d586d2 100644
--- a/src/partials/Modal.svelte
+++ b/src/partials/Modal.svelte
@@ -100,7 +100,7 @@
               <div
                 class="pointer-events-auto flex h-10 w-10 cursor-pointer items-center justify-center rounded-full
                      border border-solid border-accent bg-accent text-white transition-colors hover:bg-accent"
-                on:click={tryClose}>
+                on:click|stopPropagation={tryClose}>
                 <i class="fa fa-times fa-lg cy-modal-close" />
               </div>
               <div

From dd0c430129b2593cb777484fbeb0771c3b45bd8d Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Mon, 16 Dec 2024 15:08:28 +0100
Subject: [PATCH 7/9] increase open-with icon stroke-width

---
 src/partials/Icon.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/partials/Icon.svelte b/src/partials/Icon.svelte
index 3f89c4d55..cd3f5d97d 100644
--- a/src/partials/Icon.svelte
+++ b/src/partials/Icon.svelte
@@ -118,7 +118,7 @@
     <path
       d="M13.3433 9.125L21 1.60668M21 1.60668V7.25M21 1.60668H14.75M2.77778 1H7C7.62228 1 7.93342 1 8.1711 1.1211C8.38017 1.22763 8.55015 1.39761 8.65667 1.60668C8.77778 1.84436 8.77778 2.1555 8.77778 2.77778V7C8.77778 7.62228 8.77778 7.93342 8.65667 8.1711C8.55015 8.38017 8.38017 8.55015 8.1711 8.65667C7.93342 8.77778 7.62228 8.77778 7 8.77778H2.77778C2.1555 8.77778 1.84436 8.77778 1.60668 8.65667C1.39761 8.55015 1.22763 8.38017 1.1211 8.1711C1 7.93342 1 7.62228 1 7V2.77778C1 2.1555 1 1.84436 1.1211 1.60668C1.22763 1.39761 1.39761 1.22763 1.60668 1.1211C1.84436 1 2.1555 1 2.77778 1ZM15 13.2222H19.2222C19.8445 13.2222 20.1556 13.2222 20.3933 13.3433C20.6024 13.4499 20.7724 13.6198 20.8789 13.8289C21 14.0666 21 14.3777 21 15V19.2222C21 19.8445 21 20.1556 20.8789 20.3933C20.7724 20.6024 20.6024 20.7724 20.3933 20.8789C20.1556 21 19.8445 21 19.2222 21H15C14.3777 21 14.0666 21 13.8289 20.8789C13.6198 20.7724 13.4499 20.6024 13.3433 20.3933C13.2222 20.1556 13.2222 19.8445 13.2222 19.2222V15C13.2222 14.3777 13.2222 14.0666 13.3433 13.8289C13.4499 13.6198 13.6198 13.4499 13.8289 13.3433C14.0666 13.2222 14.3777 13.2222 15 13.2222ZM2.77778 13.2222H7C7.62228 13.2222 7.93342 13.2222 8.1711 13.3433C8.38017 13.4499 8.55015 13.6198 8.65667 13.8289C8.77778 14.0666 8.77778 14.3777 8.77778 15V19.2222C8.77778 19.8445 8.77778 20.1556 8.65667 20.3933C8.55015 20.6024 8.38017 20.7724 8.1711 20.8789C7.93342 21 7.62228 21 7 21H2.77778C2.1555 21 1.84436 21 1.60668 20.8789C1.39761 20.7724 1.22763 20.6024 1.1211 20.3933C1 20.1556 1 19.8445 1 19.2222V15C1 14.3777 1 14.0666 1.1211 13.8289C1.22763 13.6198 1.39761 13.4499 1.60668 13.3433C1.84436 13.2222 2.1555 13.2222 2.77778 13.2222Z"
       stroke={colorValue}
-      stroke-width="1.4"
+      stroke-width="2.2"
       stroke-linecap="round"
       stroke-linejoin="round" />
   {/if}

From 7b89340b7426c72a04f718e8fd89640eedd58747 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 17 Dec 2024 14:30:40 +0100
Subject: [PATCH 8/9] fix rebase

---
 src/app/shared/NoteActions.svelte |  8 +++++---
 src/app/shared/NoteReply.svelte   | 17 +++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index f6e9bfd9d..a64914c2d 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -5,7 +5,7 @@
   import {onMount} from "svelte"
   import {tweened} from "svelte/motion"
   import {derived} from "svelte/store"
-  import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
+  import {ctx, nth, nthEq, remove, last, sortBy, uniqBy, prop, identity} from "@welshman/lib"
   import {
     deriveZapper,
     deriveZapperForPubkey,
@@ -14,6 +14,7 @@
     tagReactionTo,
     tagZapSplit,
     mute,
+    pubkey,
     unmute,
   } from "@welshman/app"
   import type {TrustedEvent, SignedEvent} from "@welshman/util"
@@ -67,9 +68,10 @@
     sessionWithMeta,
     userMutes,
     sortEventsDesc,
+    load,
   } from "src/engine"
   import {getHandlerKey, readHandlers, displayHandler} from "src/domain"
-  import {drafts, openReplies} from "src/app/state"
+  import {openReplies} from "src/app/state"
   import {isLike} from "src/util/nostr"
 
   export let event: TrustedEvent
@@ -280,7 +282,7 @@
   })
 </script>
 
-{#if event.created_at > $timestamp1 - 45 && event.pubkey === $session?.pubkey}
+{#if event.created_at > $timestamp1 - 45 && event.pubkey === $pubkey}
   <NotePending {event} />
 {:else}
   <button
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index c007f704d..c83873ed1 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -39,16 +39,17 @@
     send({skipNsecWarning: true})
   }
 
-  const closeOptions = () => {
-    showOptions = false
-  }
-
   const openOptions = () => {
     showOptions = true
   }
 
-  const setOpts = e => {
-    opts = {...opts, ...e.detail}
+  const closeOptions = () => {
+    showOptions = false
+  }
+
+  const setOpts = values => {
+    opts = {...opts, ...values}
+    showOptions = false
   }
 
   const saveDraft = () => {
@@ -143,9 +144,9 @@
     class="relative transition-colors"
     class:opacity-50={loading}
     class:pointer-events-none={loading}>
-    <!-- {#if showBorder}
+    {#if showBorder}
       <AltColor background class="absolute -top-4 z-none h-5 w-1" />
-    {/if} -->
+    {/if}
     <div transition:slide|local class="note-reply relative my-2 gap-1" on:click|stopPropagation>
       <AltColor background class="overflow-hidden rounded">
         <div class="p-3 text-neutral-100" class:rounded-b={mentions.length === 0}>

From 692e82b4567b9c9bbb16dbc10e57eafd9589ef6a Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Wed, 18 Dec 2024 14:11:10 +0100
Subject: [PATCH 9/9] merge fix

---
 src/app/shared/NoteReply.svelte | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index c83873ed1..f153ea5fd 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/src/app/shared/NoteReply.svelte
@@ -29,7 +29,7 @@
   )
 
   let loading
-  let opts = {warning: "", anonymous: false}
+  let options = {warning: "", anonymous: false}
   let editorElement: HTMLElement
   let editor: Editor
   let editorLoading: Writable<boolean>
@@ -47,8 +47,8 @@
     showOptions = false
   }
 
-  const setOpts = values => {
-    opts = {...opts, ...values}
+  const setOptions = values => {
+    options = {...options, ...values}
     showOptions = false
   }
 
@@ -83,8 +83,8 @@
       ...getClientTags(),
     ])
 
-    if (opts.warning) {
-      tags.push(["content-warning", opts.warning])
+    if (options.warning) {
+      tags.push(["content-warning", options.warning])
     }
 
     // Re-broadcast the note we're replying to
@@ -95,7 +95,7 @@
     loading = true
 
     const template = createEvent(1, {content, tags})
-    const event = await sign(template, opts)
+    const event = await sign(template, options)
     const thunk = publish({
       event,
       relays: ctx.app.router.PublishEvent(event).getUrls(),
@@ -131,8 +131,11 @@
     editorLoading = editor.storage.fileUpload.loading
   }
 
-  // eslint-disable-next-line
-  $: editorElement && createEditor()
+  $: {
+    if (editorElement) {
+      createEditor()
+    }
+  }
 
   $: isOpen = $openReplies[parent?.id]
 </script>
@@ -191,7 +194,7 @@
 {/if}
 
 {#if showOptions}
-  <NoteOptions onClose={closeOptions} onSubmit={setOpts} initialValues={opts} />
+  <NoteOptions onClose={closeOptions} onSubmit={setOptions} initialValues={options} />
 {/if}
 
 {#if $nsecWarning}