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

2 files changed, 47 insertions, 1 deletions

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index b3e4f063..62ede336 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/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>
   );
 }
diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
index 7fef19c6..bda56014 100644
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -34,6 +34,9 @@ export interface RadioButtonSelectProps<T> {
 
   /** Function called when an item is selected. Receives the `value` of the selected item. */
   onSelect: (value: T) => void;
+
+  /** Function called when an item is highlighted. Receives the `value` of the selected item. */
+  onHighlight?: (value: T) => void;
 }
 
 /**
@@ -73,10 +76,16 @@ export function RadioButtonSelect<T>({
   items,
   initialIndex,
   onSelect,
+  onHighlight,
 }: RadioButtonSelectProps<T>): React.JSX.Element {
   const handleSelect = (item: RadioSelectItem<T>) => {
     onSelect(item.value);
   };
+  const handleHighlight = (item: RadioSelectItem<T>) => {
+    if (onHighlight) {
+      onHighlight(item.value);
+    }
+  };
   initialIndex = initialIndex ?? 0;
   return (
     <SelectInput
@@ -85,6 +94,7 @@ export function RadioButtonSelect<T>({
       items={items}
       initialIndex={initialIndex}
       onSelect={handleSelect}
+      onHighlight={handleHighlight}
     />
   );
 }