Add a theme preview and update the theme when highlight changes. (#151)

packages/cli/src/ui/components/ThemeDialog.tsx

@@ -9,13 +9,21 @@ 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 }: ThemeDialogProps): React.JSX.Element {
+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,
@@ -38,12 +46,40 @@ export function ThemeDialog({ onSelect }: ThemeDialogProps): React.JSX.Element {
         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>
   );
 }