blob: 62ede3362dd593469760a9010d24dcc696ae3a2a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { themeManager } from '../themes/theme-manager.js';
import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
import { DiffRenderer } from './messages/DiffRenderer.js';
import { colorizeCode } from '../utils/CodeColorizer.js';
interface ThemeDialogProps {
/** Callback function when a theme is selected */
onSelect: (themeName: string) => void;
/** Callback function when a theme is highlighted */
onHighlight: (themeName: string) => void;
}
export function ThemeDialog({
onSelect,
onHighlight,
}: ThemeDialogProps): React.JSX.Element {
const themeItems = themeManager.getAvailableThemes().map((theme) => ({
label: theme.active ? `${theme.name} (Active)` : theme.name,
value: theme.name,
}));
const initialIndex = themeItems.findIndex(
(item) => item.value === themeManager.getActiveTheme().name,
);
return (
<Box
borderStyle="round"
borderColor={Colors.AccentCyan}
flexDirection="column"
padding={1}
width="50%"
>
<Box marginBottom={1}>
<Text bold>Select Theme</Text>
</Box>
<RadioButtonSelect
items={themeItems}
initialIndex={initialIndex}
onSelect={onSelect}
onHighlight={onHighlight}
/>
<Box marginTop={1}>
<Text color={Colors.SubtleComment}>
(Use ↑/↓ arrows and Enter to select)
</Text>
</Box>
<Box marginTop={1} flexDirection="column">
<Text bold>Preview</Text>
<Box
borderStyle="single"
borderColor={Colors.SubtleComment}
padding={1}
flexDirection="column"
>
{colorizeCode(
`# Source code
print("Hello, World!")
`,
'python',
)}
<Box marginTop={1} />
<DiffRenderer
diffContent={`--- a/old_file.txt
+++ b/new_file.txt
@@ -1,4 +1,5 @@
This is a context line.
-This line was deleted.
+This line was added.
`}
/>
</Box>
</Box>
</Box>
);
}
|
