Mirror/vega
1
0
Fork 0
mirror of https://github.com/hoornet/vega.git synced 2026-05-06 20:29:12 -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

31
src/components/article/ArticleView.tsx
View File

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

6
src/components/feed/ComposeBox.tsx
View File

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

6
src/components/feed/InlineReplyBox.tsx
View File

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

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

24
src/hooks/useAutoResize.ts Normal file
View File

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