starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-10-12 16:03:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make comment textarea auto-expandable in WorktreeMetaDialog

Browse Source 
Auto-resize the textarea as the user types, capped at max-h-60 with overflow scroll.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jinjing
2026-03-22 23:47:30 -07:00
co-authored by Claude Opus 4.6
parent c2e4ae77d6
commit 77d16f87ce
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/sidebar/WorktreeMetaDialog.tsx
+15 -2
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useMemo, useRef, useState } from 'react'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useAppStore } from '@/store'
import {
Dialog,
@@ -32,6 +32,7 @@ const WorktreeMetaDialog = React.memo(function WorktreeMetaDialog() {
const [commentInput, setCommentInput] = useState('')
const [saving, setSaving] = useState(false)
const textareaRef = useRef<HTMLTextAreaElement>(null)
const prevIsOpenRef = useRef(false)
if (isOpen && !prevIsOpenRef.current) {
setIssueInput(currentIssue)
@@ -39,6 +40,17 @@ const WorktreeMetaDialog = React.memo(function WorktreeMetaDialog() {
}
prevIsOpenRef.current = isOpen
const autoResize = useCallback(() => {
const ta = textareaRef.current
if (!ta) return
ta.style.height = 'auto'
ta.style.height = `${ta.scrollHeight}px`
}, [])
useEffect(() => {
if (isEditComment) autoResize()
}, [isEditComment, commentInput, autoResize])
const canSave = useMemo(() => {
if (!worktreeId) return false
if (isLinkIssue)
@@ -112,12 +124,13 @@ const WorktreeMetaDialog = React.memo(function WorktreeMetaDialog() {
<div className="space-y-1">
<label className="text-[11px] font-medium text-muted-foreground">Comment</label>
<textarea
ref={textareaRef}
value={commentInput}
onChange={(e) => setCommentInput(e.target.value)}
placeholder="Notes about this worktree..."
rows={3}
autoFocus
className="w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 resize-none"
className="w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 resize-none max-h-60 overflow-y-auto"
/>
</div>
)}