add multi-language for hooks ui

This commit is contained in:
DennisYu07 2026-03-24 14:49:16 +08:00
parent b08154dbee
commit 7a53185dbf
11 changed files with 844 additions and 171 deletions

View file

@ -9,7 +9,8 @@ import { Box, Text } from 'ink';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
import type { HookEventDisplayInfo } from './types.js';
import { SOURCE_DISPLAY_MAP } from './constants.js';
import { getTranslatedSourceDisplayMap } from './constants.js';
import { t } from '../../../i18n/index.js';
interface HookDetailStepProps {
hook: HookEventDisplayInfo;
@ -23,6 +24,9 @@ export function HookDetailStep({
const hasConfigs = hook.configs.length > 0;
const [selectedIndex, setSelectedIndex] = useState(0);
// Get translated source display map
const sourceDisplayMap = getTranslatedSourceDisplayMap();
// Handle keyboard navigation
useKeypress(
(key) => {
@ -61,7 +65,7 @@ export function HookDetailStep({
{hook.exitCodes.length > 0 && (
<Box flexDirection="column" marginBottom={1}>
<Text bold color={theme.text.primary}>
Exit codes:
{t('Exit codes:')}
</Text>
{hook.exitCodes.map((ec, index) => (
<Box key={index}>
@ -79,12 +83,12 @@ export function HookDetailStep({
{hasConfigs ? (
<>
<Text bold color={theme.text.primary}>
Configured hooks:
{t('Configured hooks:')}
</Text>
{hook.configs.map((config, index) => {
const isSelected = index === selectedIndex;
const sourceDisplay =
SOURCE_DISPLAY_MAP[config.source] || config.source;
sourceDisplayMap[config.source] || config.source;
return (
<Box key={index}>
@ -107,23 +111,23 @@ export function HookDetailStep({
);
})}
<Box marginTop={1}>
<Text color={theme.text.secondary}>Esc to go back</Text>
<Text color={theme.text.secondary}>{t('Esc to go back')}</Text>
</Box>
</>
) : (
<>
<Box>
<Text color={theme.text.secondary}>
No hooks configured for this event.
{t('No hooks configured for this event.')}
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.secondary}>
To add hooks, edit settings.json directly or ask Qwen.
{t('To add hooks, edit settings.json directly or ask Qwen.')}
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.secondary}>Esc to go back</Text>
<Text color={theme.text.secondary}>{t('Esc to go back')}</Text>
</Box>
</>
)}