From 5b94162ce1935beabfaa7d58b028de9e50c6510e Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Wed, 25 Mar 2026 11:11:01 +0100
Subject: [PATCH] Auto-expanding textareas and proper article comment box

Add useAutoResize hook that grows textareas to fit content up to a max.
Applied to compose box, inline replies, thread replies, and article
comments. Article comment input changed from single-line input to a
multi-row textarea with Shift+Enter support.
---
 src/components/article/ArticleView.tsx | 31 +++++++++++++++-----------
 src/components/feed/ComposeBox.tsx     |  6 +++--
 src/components/feed/InlineReplyBox.tsx |  6 +++--
 src/components/thread/ThreadView.tsx   |  6 +++--
 src/hooks/useAutoResize.ts             | 24 ++++++++++++++++++++
 5 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 src/hooks/useAutoResize.ts

diff --git a/src/components/article/ArticleView.tsx b/src/components/article/ArticleView.tsx
index 7cc6e13..e1f38ec 100644
--- a/src/components/article/ArticleView.tsx
+++ b/src/components/article/ArticleView.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { renderMarkdown } from "../../lib/markdown";
+import { useAutoResize } from "../../hooks/useAutoResize";
 import { useUIStore } from "../../stores/ui";
 import { useUserStore } from "../../stores/user";
 import { useBookmarkStore } from "../../stores/bookmark";
@@ -77,6 +78,7 @@ export function ArticleView() {
   const [reposted, setReposted] = useState(false);
   const [showComment, setShowComment] = useState(false);
   const [commentText, setCommentText] = useState("");
+  const autoResize = useAutoResize(3, 10);
   const { isBookmarked, addBookmark, removeBookmark } = useBookmarkStore();
 
   const naddr = pendingArticleNaddr ?? "";
@@ -291,23 +293,26 @@ export function ArticleView() {
 
       {/* Comment box */}
       {showComment && event && (
-        <div className="border-b border-border px-4 py-3 flex gap-2 shrink-0">
-          <input
-            type="text"
+        <div className="border-b border-border px-4 py-3 shrink-0">
+          <textarea
             value={commentText}
-            onChange={(e) => setCommentText(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleComment()}
+            onChange={(e) => { setCommentText(e.target.value); autoResize(e); }}
+            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleComment(); } }}
             placeholder="Write a comment about this article..."
-            className="flex-1 bg-bg-raised border border-border rounded-sm px-3 py-1.5 text-[12px] text-text placeholder:text-text-dim focus:outline-none focus:border-accent"
+            rows={3}
+            className="w-full bg-bg-raised border border-border rounded-sm px-3 py-2 text-[12px] text-text placeholder:text-text-dim resize-none focus:outline-none focus:border-accent leading-relaxed"
             autoFocus
           />
-          <button
-            onClick={handleComment}
-            disabled={!commentText.trim()}
-            className="px-3 py-1.5 bg-accent/10 text-accent text-[12px] rounded-sm hover:bg-accent/20 transition-colors disabled:opacity-40"
-          >
-            post
-          </button>
+          <div className="flex justify-between items-center mt-2">
+            <span className="text-text-dim text-[10px]">Shift+Enter for new line</span>
+            <button
+              onClick={handleComment}
+              disabled={!commentText.trim()}
+              className="px-3 py-1.5 bg-accent/10 text-accent text-[12px] rounded-sm hover:bg-accent/20 transition-colors disabled:opacity-40"
+            >
+              post
+            </button>
+          </div>
         </div>
       )}
 
diff --git a/src/components/feed/ComposeBox.tsx b/src/components/feed/ComposeBox.tsx
index 70a4660..daff435 100644
--- a/src/components/feed/ComposeBox.tsx
+++ b/src/components/feed/ComposeBox.tsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { publishNote } from "../../lib/nostr";
 import { uploadImage, uploadBytes } from "../../lib/upload";
+import { useAutoResize } from "../../hooks/useAutoResize";
 import { useUserStore } from "../../stores/user";
 import { useFeedStore } from "../../stores/feed";
 import { shortenPubkey } from "../../lib/utils";
@@ -19,6 +20,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showEmoji, setShowEmoji] = useState(false);
+  const autoResize = useAutoResize(3, 12);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const { profile, npub } = useUserStore();
@@ -213,14 +215,14 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
             ref={textareaRef}
             data-compose
             value={text}
-            onChange={(e) => setText(e.target.value)}
+            onChange={(e) => { setText(e.target.value); autoResize(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}
             onDragOver={handleDragOver}
             placeholder="What's on your mind?"
             rows={3}
-            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-[13px] placeholder:text-text-dim resize-none focus:outline-none leading-relaxed"
           />
 
           {error && (
diff --git a/src/components/feed/InlineReplyBox.tsx b/src/components/feed/InlineReplyBox.tsx
index ff509f9..315bffa 100644
--- a/src/components/feed/InlineReplyBox.tsx
+++ b/src/components/feed/InlineReplyBox.tsx
@@ -2,6 +2,7 @@ import { useState, useRef } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { publishReply } from "../../lib/nostr";
 import { uploadImage, uploadBytes } from "../../lib/upload";
+import { useAutoResize } from "../../hooks/useAutoResize";
 import { useReplyCount } from "../../hooks/useReplyCount";
 import { EmojiPicker } from "../shared/EmojiPicker";
 import { open } from "@tauri-apps/plugin-dialog";
@@ -21,6 +22,7 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
   const [showReplyEmoji, setShowReplyEmoji] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
+  const autoResize = useAutoResize(2, 8);
   const replyRef = useRef<HTMLTextAreaElement>(null);
   const [, adjustReplyCount] = useReplyCount(event.id);
 
@@ -138,12 +140,12 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
       <textarea
         ref={replyRef}
         value={replyText}
-        onChange={(e) => setReplyText(e.target.value)}
+        onChange={(e) => { setReplyText(e.target.value); autoResize(e); }}
         onKeyDown={handleReplyKeyDown}
         onPaste={handlePaste}
         placeholder={`Reply to ${name}…`}
         rows={2}
-        className="w-full bg-transparent text-text text-[12px] 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 leading-relaxed"
         autoFocus
       />
       {replyError && <p className="text-danger text-[10px] mb-1">{replyError}</p>}
diff --git a/src/components/thread/ThreadView.tsx b/src/components/thread/ThreadView.tsx
index 2f5f371..ec5443f 100644
--- a/src/components/thread/ThreadView.tsx
+++ b/src/components/thread/ThreadView.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useAutoResize } from "../../hooks/useAutoResize";
 import { useUIStore } from "../../stores/ui";
 import { useUserStore } from "../../stores/user";
 import { useMuteStore } from "../../stores/mute";
@@ -28,6 +29,7 @@ export function ThreadView() {
   const [replying, setReplying] = useState(false);
   const [replySent, setReplySent] = useState(false);
   const [showReplyEmoji, setShowReplyEmoji] = useState(false);
+  const autoResize = useAutoResize(2, 8);
   const replyRef = useRef<HTMLTextAreaElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -195,11 +197,11 @@ export function ThreadView() {
                 <textarea
                   ref={replyRef}
                   value={replyText}
-                  onChange={(e) => setReplyText(e.target.value)}
+                  onChange={(e) => { setReplyText(e.target.value); autoResize(e); }}
                   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"
+                  className="w-full bg-transparent text-text text-[12px] placeholder:text-text-dim resize-none focus:outline-none leading-relaxed"
                   autoFocus
                 />
                 <div className="flex items-center justify-end gap-2 mt-1">
diff --git a/src/hooks/useAutoResize.ts b/src/hooks/useAutoResize.ts
new file mode 100644
index 0000000..e8e108d
--- /dev/null
+++ b/src/hooks/useAutoResize.ts
@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+
+/**
+ * Auto-resize a textarea to fit its content, up to maxRows.
+ * Returns an onChange handler that should be spread onto the textarea.
+ * Usage: <textarea onChange={autoResize} ... />
+ */
+export function useAutoResize(minRows = 2, maxRows = 10) {
+  const autoResize = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const ta = e.target;
+      // Reset to min height to measure scrollHeight accurately
+      ta.style.height = "auto";
+      const lineHeight = parseInt(getComputedStyle(ta).lineHeight) || 18;
+      const minHeight = lineHeight * minRows;
+      const maxHeight = lineHeight * maxRows;
+      const newHeight = Math.min(Math.max(ta.scrollHeight, minHeight), maxHeight);
+      ta.style.height = `${newHeight}px`;
+    },
+    [minRows, maxRows],
+  );
+
+  return autoResize;
+}