From af32952fd8797ce8c7486001f15012d0cd49a7b7 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Sat, 21 Mar 2026 15:41:48 +0100
Subject: [PATCH] Fix thread reply UX: inline reply boxes below each note,
 scroll-to-parent

Reply boxes now open directly below the note you're replying to instead of
scrolling to a top-level composer. "Replying to" link scrolls to the parent
note when already visible in the thread instead of re-pushing the same thread.
---
 src/components/feed/NoteCard.tsx     |  10 ++-
 src/components/thread/ThreadNode.tsx | 117 +++++++++++++++++++++++++--
 src/components/thread/ThreadView.tsx |  92 +++++++--------------
 3 files changed, 149 insertions(+), 70 deletions(-)

diff --git a/src/components/feed/NoteCard.tsx b/src/components/feed/NoteCard.tsx
index 922d49f..2c969df 100644
--- a/src/components/feed/NoteCard.tsx
+++ b/src/components/feed/NoteCard.tsx
@@ -124,8 +124,16 @@ export function NoteCard({ event, focused, onReplyInThread }: NoteCardProps) {
               <button
                 onClick={async (e) => {
                   e.stopPropagation();
+                  // If already in thread view, try scrolling to parent first
+                  if (currentView === "thread") {
+                    const el = document.querySelector(`[data-note-id="${parentEventId}"]`);
+                    if (el) {
+                      el.scrollIntoView({ behavior: "smooth", block: "center" });
+                      return;
+                    }
+                  }
                   const parent = await fetchNoteById(parentEventId);
-                  if (parent) openThread(parent, currentView as "feed" | "profile");
+                  if (parent) openThread(parent);
                 }}
                 className="hover:text-accent transition-colors"
               >
diff --git a/src/components/thread/ThreadNode.tsx b/src/components/thread/ThreadNode.tsx
index 3db735f..1a3f814 100644
--- a/src/components/thread/ThreadNode.tsx
+++ b/src/components/thread/ThreadNode.tsx
@@ -1,11 +1,16 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import type { ThreadNode as ThreadNodeType } from "../../lib/threadTree";
 import { NoteCard } from "../feed/NoteCard";
+import { publishReply } from "../../lib/nostr";
+import { useProfile } from "../../hooks/useProfile";
+import { shortenPubkey } from "../../lib/utils";
+import { EmojiPicker } from "../shared/EmojiPicker";
 
 interface ThreadNodeProps {
   node: ThreadNodeType;
-  onReplyInThread: (event: NDKEvent) => void;
+  rootEvent: NDKEvent;
+  onReplyPublished: (reply: NDKEvent) => void;
   focusedId?: string;
   mutedPubkeys: string[];
   contentMatchesMutedKeyword: (content: string) => boolean;
@@ -14,8 +19,96 @@ interface ThreadNodeProps {
 const MAX_VISIBLE_CHILDREN = 3;
 const MAX_INDENT_DEPTH = 4;
 
-export function ThreadNodeComponent({ node, onReplyInThread, focusedId, mutedPubkeys, contentMatchesMutedKeyword }: ThreadNodeProps) {
+function InlineThreadReply({ replyTo, rootEvent, onPublished }: {
+  replyTo: NDKEvent;
+  rootEvent: NDKEvent;
+  onPublished: (reply: NDKEvent) => void;
+}) {
+  const profile = useProfile(replyTo.pubkey);
+  const name = profile?.displayName || profile?.name || shortenPubkey(replyTo.pubkey);
+  const [text, setText] = useState("");
+  const [replying, setReplying] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [showEmoji, setShowEmoji] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = async () => {
+    if (!text.trim() || replying) return;
+    setReplying(true);
+    try {
+      const rootArg = replyTo.id !== rootEvent.id
+        ? { id: rootEvent.id, pubkey: rootEvent.pubkey }
+        : undefined;
+      const reply = await publishReply(text.trim(), { id: replyTo.id, pubkey: replyTo.pubkey }, rootArg);
+      setText("");
+      setSent(true);
+      onPublished(reply);
+      setTimeout(() => setSent(false), 2000);
+    } finally {
+      setReplying(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleSubmit();
+    if (e.key === "Escape") ref.current?.blur();
+  };
+
+  return (
+    <div className="border-l-2 border-accent/40 ml-3 pl-3 py-2">
+      <div className="text-text-dim text-[10px] mb-1">replying to <span className="text-accent">@{name}</span></div>
+      <textarea
+        ref={ref}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Write a reply..."
+        rows={2}
+        className="w-full bg-transparent text-text text-[12px] placeholder:text-text-dim resize-none focus:outline-none"
+        autoFocus
+      />
+      <div className="flex items-center justify-end gap-2 mt-1">
+        <div className="relative">
+          <button
+            onClick={() => setShowEmoji((v) => !v)}
+            title="Insert emoji"
+            className="text-text-dim hover:text-text text-[12px] transition-colors"
+          >
+            ☺
+          </button>
+          {showEmoji && (
+            <EmojiPicker
+              onSelect={(emoji) => {
+                const ta = ref.current;
+                if (ta) {
+                  const start = ta.selectionStart ?? text.length;
+                  const end = ta.selectionEnd ?? text.length;
+                  setText(text.slice(0, start) + emoji + text.slice(end));
+                  setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + emoji.length; ta.focus(); }, 0);
+                } else {
+                  setText((t) => t + emoji);
+                }
+              }}
+              onClose={() => setShowEmoji(false)}
+            />
+          )}
+        </div>
+        <span className="text-text-dim text-[10px]">Ctrl+Enter</span>
+        <button
+          onClick={handleSubmit}
+          disabled={!text.trim() || replying}
+          className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+        >
+          {sent ? "replied ✓" : replying ? "posting..." : "reply"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function ThreadNodeComponent({ node, rootEvent, onReplyPublished, focusedId, mutedPubkeys, contentMatchesMutedKeyword }: ThreadNodeProps) {
   const [expanded, setExpanded] = useState(false);
+  const [showReplyBox, setShowReplyBox] = useState(false);
 
   // Filter out muted children
   const visibleChildren = node.children.filter(
@@ -38,14 +131,28 @@ export function ThreadNodeComponent({ node, onReplyInThread, focusedId, mutedPub
       <NoteCard
         event={node.event}
         focused={isFocused}
-        onReplyInThread={onReplyInThread}
+        onReplyInThread={() => setShowReplyBox((v) => !v)}
       />
 
+      {showReplyBox && (
+        <div style={indent > 0 ? { marginLeft: "16px" } : undefined}>
+          <InlineThreadReply
+            replyTo={node.event}
+            rootEvent={rootEvent}
+            onPublished={(reply) => {
+              setShowReplyBox(false);
+              onReplyPublished(reply);
+            }}
+          />
+        </div>
+      )}
+
       {shownChildren.map((child) => (
         <ThreadNodeComponent
           key={child.event.id}
           node={child}
-          onReplyInThread={onReplyInThread}
+          rootEvent={rootEvent}
+          onReplyPublished={onReplyPublished}
           focusedId={focusedId}
           mutedPubkeys={mutedPubkeys}
           contentMatchesMutedKeyword={contentMatchesMutedKeyword}
diff --git a/src/components/thread/ThreadView.tsx b/src/components/thread/ThreadView.tsx
index 5508091..329072d 100644
--- a/src/components/thread/ThreadView.tsx
+++ b/src/components/thread/ThreadView.tsx
@@ -6,25 +6,11 @@ import { useMuteStore } from "../../stores/mute";
 import { fetchNoteById, fetchThreadEvents, fetchAncestors, publishReply, getNDK } from "../../lib/nostr";
 import { buildThreadTree, getRootEventId } from "../../lib/threadTree";
 import type { ThreadNode } from "../../lib/threadTree";
-import { useProfile } from "../../hooks/useProfile";
-import { shortenPubkey } from "../../lib/utils";
 import { AncestorChain } from "./AncestorChain";
 import { ThreadNodeComponent } from "./ThreadNode";
 import { NoteCard } from "../feed/NoteCard";
 import { EmojiPicker } from "../shared/EmojiPicker";
 
-function ReplyTargetBadge({ event, onClear }: { event: NDKEvent; onClear: () => void }) {
-  const profile = useProfile(event.pubkey);
-  const name = profile?.displayName || profile?.name || shortenPubkey(event.pubkey);
-  return (
-    <div className="flex items-center gap-2 mb-1.5 text-[11px]">
-      <span className="text-text-dim">replying to</span>
-      <span className="text-accent font-medium">@{name}</span>
-      <button onClick={onClear} className="text-text-dim hover:text-text transition-colors">x</button>
-    </div>
-  );
-}
-
 export function ThreadView() {
   const { selectedNote, goBack } = useUIStore();
   const { loggedIn } = useUserStore();
@@ -36,7 +22,7 @@ export function ThreadView() {
   const [ancestors, setAncestors] = useState<NDKEvent[]>([]);
   const [tree, setTree] = useState<ThreadNode | null>(null);
   const [loading, setLoading] = useState(true);
-  const [replyTarget, setReplyTarget] = useState<NDKEvent | null>(null);
+  const [showRootReply, setShowRootReply] = useState(false);
   const [replyText, setReplyText] = useState("");
   const [replying, setReplying] = useState(false);
   const [replySent, setReplySent] = useState(false);
@@ -52,26 +38,21 @@ export function ThreadView() {
       setTree(null);
       setAncestors([]);
       setRootEvent(null);
-      setReplyTarget(null);
+      setShowRootReply(false);
 
       try {
-        // Determine root
         const rootId = getRootEventId(focusedEvent);
         let root: NDKEvent;
 
         if (!rootId || rootId === focusedEvent.id) {
-          // This IS the root
           root = focusedEvent;
         } else {
-          // Fetch the root event
           const fetched = await fetchNoteById(rootId);
           if (fetched) {
             root = fetched;
-            // Fetch ancestors between root and focused
             const anc = await fetchAncestors(focusedEvent);
             if (!cancelled) setAncestors(anc.filter((a) => a.id !== root.id));
           } else {
-            // Root not found, treat focused as root
             root = focusedEvent;
           }
         }
@@ -79,11 +60,9 @@ export function ThreadView() {
         if (cancelled) return;
         setRootEvent(root);
 
-        // Fetch all thread events and build tree
         const events = await fetchThreadEvents(root.id);
         if (cancelled) return;
 
-        // Include root in the event set
         const allEvents = [root, ...events.filter((e) => e.id !== root.id)];
         const built = buildThreadTree(root.id, allEvents);
         setTree(built);
@@ -101,7 +80,6 @@ export function ThreadView() {
   // Scroll to focused note after tree renders (if not root)
   useEffect(() => {
     if (!loading && rootEvent && focusedEvent.id !== rootEvent.id) {
-      // Small delay to allow DOM to render
       const timer = setTimeout(() => {
         const el = document.querySelector(`[data-note-id="${focusedEvent.id}"]`);
         el?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -110,39 +88,26 @@ export function ThreadView() {
     }
   }, [loading, rootEvent?.id, focusedEvent.id]);
 
-  const handleReplyInThread = (event: NDKEvent) => {
-    setReplyTarget(event);
-    setTimeout(() => replyRef.current?.focus(), 50);
+  // Called when any inline reply box publishes a reply
+  const handleReplyPublished = (reply: NDKEvent) => {
+    if (tree && rootEvent) {
+      const allEvents = collectEvents(tree);
+      allEvents.push(reply);
+      const rebuilt = buildThreadTree(rootEvent.id, allEvents);
+      setTree(rebuilt);
+    }
   };
 
-  const effectiveReplyTarget = replyTarget ?? rootEvent;
-
-  const handleReply = async () => {
+  // Root-level reply (reply to the root note)
+  const handleRootReply = async () => {
     if (!replyText.trim() || replying || !rootEvent) return;
     setReplying(true);
     try {
-      const target = effectiveReplyTarget ?? rootEvent;
-      const rootArg = target.id !== rootEvent.id
-        ? { id: rootEvent.id, pubkey: rootEvent.pubkey }
-        : undefined;
-
-      const replyEvent = await publishReply(
-        replyText.trim(),
-        { id: target.id, pubkey: target.pubkey },
-        rootArg,
-      );
+      const reply = await publishReply(replyText.trim(), { id: rootEvent.id, pubkey: rootEvent.pubkey });
       setReplyText("");
       setReplySent(true);
-      setReplyTarget(null);
-
-      // Optimistically insert into tree
-      if (tree) {
-        const allEvents = collectEvents(tree);
-        allEvents.push(replyEvent);
-        const rebuilt = buildThreadTree(rootEvent.id, allEvents);
-        setTree(rebuilt);
-      }
-
+      setShowRootReply(false);
+      handleReplyPublished(reply);
       setTimeout(() => setReplySent(false), 2000);
     } finally {
       setReplying(false);
@@ -150,7 +115,7 @@ export function ThreadView() {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleReply();
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleRootReply();
     if (e.key === "Escape") replyRef.current?.blur();
   };
 
@@ -185,21 +150,18 @@ export function ThreadView() {
             {/* Ancestors (when opening a deep reply) */}
             <AncestorChain ancestors={ancestors} />
 
-            {/* Root note rendered via tree */}
+            {/* Root note */}
             <div data-note-id={tree.event.id}>
               <NoteCard
                 event={tree.event}
                 focused={tree.event.id === focusedEvent.id}
-                onReplyInThread={handleReplyInThread}
+                onReplyInThread={() => setShowRootReply((v) => !v)}
               />
             </div>
 
-            {/* Reply composer */}
-            {loggedIn && !!getNDK().signer && (
-              <div className="border-b border-border px-4 py-3">
-                {replyTarget && replyTarget.id !== rootEvent.id && (
-                  <ReplyTargetBadge event={replyTarget} onClear={() => setReplyTarget(null)} />
-                )}
+            {/* Root reply box (inline, right below root) */}
+            {showRootReply && loggedIn && !!getNDK().signer && (
+              <div className="border-b border-border border-l-2 border-l-accent/40 ml-3 px-3 py-2">
                 <textarea
                   ref={replyRef}
                   value={replyText}
@@ -207,7 +169,8 @@ export function ThreadView() {
                   onKeyDown={handleKeyDown}
                   placeholder="Write a reply..."
                   rows={2}
-                  className="w-full bg-transparent text-text text-[13px] placeholder:text-text-dim resize-none focus:outline-none"
+                  className="w-full bg-transparent text-text text-[12px] placeholder:text-text-dim resize-none focus:outline-none"
+                  autoFocus
                 />
                 <div className="flex items-center justify-end gap-2 mt-1">
                   <div className="relative">
@@ -237,9 +200,9 @@ export function ThreadView() {
                   </div>
                   <span className="text-text-dim text-[10px]">Ctrl+Enter</span>
                   <button
-                    onClick={handleReply}
+                    onClick={handleRootReply}
                     disabled={!replyText.trim() || replying}
-                    className="px-3 py-1 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                    className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                   >
                     {replySent ? "replied ✓" : replying ? "posting..." : "reply"}
                   </button>
@@ -248,7 +211,7 @@ export function ThreadView() {
             )}
 
             {/* Thread tree (children of root) */}
-            {tree.children.length === 0 && (
+            {tree.children.length === 0 && !showRootReply && (
               <div className="px-4 py-6 text-text-dim text-[12px] text-center">
                 No replies yet.
               </div>
@@ -260,7 +223,8 @@ export function ThreadView() {
                 <ThreadNodeComponent
                   key={child.event.id}
                   node={child}
-                  onReplyInThread={handleReplyInThread}
+                  rootEvent={rootEvent}
+                  onReplyPublished={handleReplyPublished}
                   focusedId={focusedEvent.id}
                   mutedPubkeys={mutedPubkeys}
                   contentMatchesMutedKeyword={contentMatchesMutedKeyword}