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/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 && (

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>}