From 869e126453ff2ed44add696a6dcb4ed04362018e Mon Sep 17 00:00:00 2001 From: Jinjing <6427696+AmethystLiang@users.noreply.github.com> Date: Sun, 16 Aug 2026 21:45:30 -0700 Subject: [PATCH] refactor(terminal): redesign quick command dialog with expanded layout a - Enlarge dialog to 52rem width and add scrollable content area for improved editing experience - Restructure textarea with header (label, status badge) and footer (hints, controls) - Compact action toggle to use shorter labels with grid layout - Move append enter switch to textarea footer (compact mode) for terminal commands - Add scope summary to Advanced toggle when collapsed for quick reference - Update dialog description and add contextual hints for user guidance --- .../TerminalQuickCommandActionToggle.tsx | 26 +++- .../TerminalQuickCommandAdvancedSection.tsx | 59 ++++++--- .../TerminalQuickCommandAppendEnterSwitch.tsx | 26 +++- .../TerminalQuickCommandContentSection.tsx | 113 +++++++++++------- .../TerminalQuickCommandDialog.test.tsx | 44 ++++++- .../TerminalQuickCommandDialog.tsx | 43 ++++--- .../TerminalQuickCommandDialogFooter.tsx | 2 +- src/renderer/src/i18n/locales/en.json | 17 ++- src/renderer/src/i18n/locales/es.json | 2 +- src/renderer/src/i18n/locales/ja.json | 2 +- src/renderer/src/i18n/locales/ko.json | 2 +- src/renderer/src/i18n/locales/zh.json | 2 +- 12 files changed, 238 insertions(+), 100 deletions(-) diff --git a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandActionToggle.tsx b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandActionToggle.tsx index 85a008cd5f7..0885812c5c6 100644 --- a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandActionToggle.tsx +++ b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandActionToggle.tsx @@ -1,4 +1,5 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' +import { cn } from '@/lib/utils' import type { TerminalQuickCommandDialogAction } from './terminal-quick-command-dialog-draft' import { QUICK_COMMAND_TOGGLE_ITEM_CLASS } from './terminal-quick-command-toggle-style' import { translate } from '@/i18n/i18n' @@ -21,20 +22,35 @@ export function TerminalQuickCommandActionToggle({ onActionChange(value) } }} - className="justify-start" + // Why: equal columns keep the control width stable when labels differ by locale. + className="grid w-[11.5rem] grid-cols-2" variant="outline" > - - {translate( + - + > {translate( + 'auto.components.terminal.quick.commands.TerminalQuickCommandActionToggle.terminal_short', + 'Terminal' + )} + + + {translate( + 'auto.components.terminal.quick.commands.TerminalQuickCommandActionToggle.agent_short', + 'Agent' + )} ) diff --git a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandAdvancedSection.tsx b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandAdvancedSection.tsx index d49be9c9616..54d835f0793 100644 --- a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandAdvancedSection.tsx +++ b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandAdvancedSection.tsx @@ -2,38 +2,58 @@ import type { Dispatch, MutableRefObject, SetStateAction } from 'react' import { ChevronDown } from 'lucide-react' import type { Repo, TerminalQuickCommand } from '../../../../shared/types' import type { getTerminalQuickCommandScope } from '../../../../shared/terminal-quick-commands' -import { isTerminalAgentQuickCommand } from '../../../../shared/terminal-quick-commands' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' import { translate } from '@/i18n/i18n' -import { TerminalQuickCommandAppendEnterSwitch } from './TerminalQuickCommandAppendEnterSwitch' import { TerminalQuickCommandScopeField } from './TerminalQuickCommandScopeField' type TerminalQuickCommandAdvancedSectionProps = { - draft: TerminalQuickCommand repos: readonly Pick[] advancedOpen: boolean selectedScope: ReturnType + selectedRepo: Pick | null selectedRepoId: string selectedRepoMissing: boolean lastRepoScopeIdRef: MutableRefObject setAdvancedOpen: Dispatch> setDraft: Dispatch> - toggleAppendEnter: () => void +} + +function getScopeSummaryLabel({ + selectedScope, + selectedRepo +}: { + selectedScope: ReturnType + selectedRepo: Pick | null +}): string { + if (selectedScope.type === 'global') { + return translate( + 'auto.components.terminal.quick.commands.TerminalQuickCommandScopeField.b83efc79e2', + 'Global' + ) + } + if (selectedRepo) { + return selectedRepo.displayName || selectedRepo.path + } + return translate( + 'auto.components.terminal.quick.commands.TerminalQuickCommandScopeField.3834d24243', + 'Project' + ) } export function TerminalQuickCommandAdvancedSection({ - draft, repos, advancedOpen, selectedScope, + selectedRepo, selectedRepoId, selectedRepoMissing, lastRepoScopeIdRef, setAdvancedOpen, - setDraft, - toggleAppendEnter + setDraft }: TerminalQuickCommandAdvancedSectionProps): React.JSX.Element { + const scopeSummary = getScopeSummaryLabel({ selectedScope, selectedRepo }) + return (
@@ -66,12 +95,6 @@ export function TerminalQuickCommandAdvancedSection({ : '-translate-y-1 opacity-0 delay-0' )} > - {!isTerminalAgentQuickCommand(draft) ? ( - - ) : null} void + compact?: boolean } export function TerminalQuickCommandAppendEnterSwitch({ appendEnter, - onToggle + onToggle, + compact = false }: TerminalQuickCommandAppendEnterSwitchProps): React.JSX.Element { + if (compact) { + return ( + + ) + } + return (
diff --git a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandContentSection.tsx b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandContentSection.tsx index 34035a6233f..a3249dfb812 100644 --- a/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandContentSection.tsx +++ b/src/renderer/src/components/terminal-quick-commands/TerminalQuickCommandContentSection.tsx @@ -17,6 +17,7 @@ import { cn } from '@/lib/utils' import { translate } from '@/i18n/i18n' import { getTerminalQuickCommandAgentOptions } from './terminal-quick-command-agent-options' import type { TerminalQuickCommandDialogDraftMemory } from './terminal-quick-command-dialog-draft' +import { TerminalQuickCommandAppendEnterSwitch } from './TerminalQuickCommandAppendEnterSwitch' const QUICK_COMMAND_AGENT_OPTIONS = getTerminalQuickCommandAgentOptions() @@ -26,6 +27,7 @@ type TerminalQuickCommandContentSectionProps = { selectedAgent: TuiAgent draftMemoryRef: MutableRefObject setDraft: Dispatch> + toggleAppendEnter: () => void } export function TerminalQuickCommandContentSection({ @@ -33,10 +35,13 @@ export function TerminalQuickCommandContentSection({ isAgentAction, selectedAgent, draftMemoryRef, - setDraft + setDraft, + toggleAppendEnter }: TerminalQuickCommandContentSectionProps): React.JSX.Element { + const commandText = isTerminalAgentQuickCommand(draft) ? draft.prompt : draft.command + return ( -
+
{/* Why: action changes add/remove agent-only fields; animating rows here keeps the fixed dialog from snapping between content heights. */}
-
-