mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-03-19 03:43:08 +00:00
refactor(ui): extract keyboard utilities and add padding constant
- Create shared `isSubmitEnter()` utility in `ui/src/lib/keyboard.ts` for IME-aware Enter key handling across all input components - Extract magic number 48 to named constant `COLLAPSED_DEBUG_PANEL_CLEARANCE` with explanatory comment (40px panel header + 8px margin) - Update 5 components to use the new utility: - AssistantChat.tsx - ExpandProjectChat.tsx - SpecCreationChat.tsx - FolderBrowser.tsx - TerminalTabs.tsx This follows up on PR #121 which added IME composition checks. The refactoring centralizes the logic for easier maintenance and documents the padding value that prevents Kanban cards from being cut off when the debug panel is collapsed. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -12,6 +12,7 @@ import { useAssistantChat } from '../hooks/useAssistantChat'
|
||||
import { ChatMessage as ChatMessageComponent } from './ChatMessage'
|
||||
import { ConversationHistory } from './ConversationHistory'
|
||||
import type { ChatMessage } from '../lib/types'
|
||||
import { isSubmitEnter } from '../lib/keyboard'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
|
||||
@@ -134,8 +135,7 @@ export function AssistantChat({
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
// Skip if composing (e.g., Japanese IME input)
|
||||
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
|
||||
if (isSubmitEnter(e)) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useExpandChat } from '../hooks/useExpandChat'
|
||||
import { ChatMessage } from './ChatMessage'
|
||||
import { TypingIndicator } from './TypingIndicator'
|
||||
import type { ImageAttachment } from '../lib/types'
|
||||
import { isSubmitEnter } from '../lib/keyboard'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
@@ -88,8 +89,7 @@ export function ExpandProjectChat({
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
// Skip if composing (e.g., Japanese IME input)
|
||||
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
|
||||
if (isSubmitEnter(e)) {
|
||||
e.preventDefault()
|
||||
handleSendMessage()
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
ArrowLeft,
|
||||
} from 'lucide-react'
|
||||
import * as api from '../lib/api'
|
||||
import { isSubmitEnter } from '../lib/keyboard'
|
||||
import type { DirectoryEntry, DriveInfo } from '../lib/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -269,8 +270,7 @@ export function FolderBrowser({ onSelect, onCancel, initialPath }: FolderBrowser
|
||||
className="flex-1"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
// Skip if composing (e.g., Japanese IME input)
|
||||
if (e.key === 'Enter' && !e.nativeEvent.isComposing) handleCreateFolder()
|
||||
if (isSubmitEnter(e, false)) handleCreateFolder()
|
||||
if (e.key === 'Escape') {
|
||||
setIsCreatingFolder(false)
|
||||
setNewFolderName('')
|
||||
|
||||
@@ -12,6 +12,7 @@ import { ChatMessage } from './ChatMessage'
|
||||
import { QuestionOptions } from './QuestionOptions'
|
||||
import { TypingIndicator } from './TypingIndicator'
|
||||
import type { ImageAttachment } from '../lib/types'
|
||||
import { isSubmitEnter } from '../lib/keyboard'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
@@ -127,8 +128,7 @@ export function SpecCreationChat({
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
// Skip if composing (e.g., Japanese IME input)
|
||||
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
|
||||
if (isSubmitEnter(e)) {
|
||||
e.preventDefault()
|
||||
handleSendMessage()
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { Plus, X } from 'lucide-react'
|
||||
import type { TerminalInfo } from '@/lib/types'
|
||||
import { isSubmitEnter } from '@/lib/keyboard'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
@@ -96,8 +97,7 @@ export function TerminalTabs({
|
||||
// Handle key events during editing
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
// Skip if composing (e.g., Japanese IME input)
|
||||
if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
|
||||
if (isSubmitEnter(e, false)) {
|
||||
e.preventDefault()
|
||||
submitEdit()
|
||||
} else if (e.key === 'Escape') {
|
||||
|
||||
Reference in New Issue
Block a user