Mirror/vega
1
0
Fork 0
mirror of https://github.com/hoornet/vega.git synced 2026-05-08 21:29:11 -07:00
Code Issues Packages Projects Releases Wiki Activity

Auto-expanding textareas and proper article comment box

Browse Source 
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.
This commit is contained in:
Jure
2026-03-25 11:11:01 +01:00
parent 0604b5b452
commit 5b94162ce1
5 changed files with 54 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/thread/ThreadView.tsx
View File

@@ -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">