From a685597b70242eb4c6b38d30c5356ad79418176d Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguel.solorio07@gmail.com>
Date: Thu, 8 May 2025 16:00:55 -0700
Subject: UI Polish for theme selector (#294)

---
 .../cli/src/ui/components/SuggestionsDisplay.tsx   |   7 +-
 packages/cli/src/ui/components/ThemeDialog.tsx     |  86 ++++++++++--------
 .../ui/components/messages/ToolGroupMessage.tsx    |   2 +-
 .../src/ui/components/shared/RadioButtonSelect.tsx | 101 ++++++++++++++-------
 4 files changed, 123 insertions(+), 73 deletions(-)

(limited to 'packages/cli/src/ui/components')

diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
index f0626fa9..ba25f2b6 100644
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
@@ -5,6 +5,7 @@
  */
 
 import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
 export interface Suggestion {
   label: string;
   value: string;
@@ -48,7 +49,7 @@ export function SuggestionsDisplay({
 
   return (
     <Box borderStyle="round" flexDirection="column" paddingX={1} width={width}>
-      {scrollOffset > 0 && <Text color="gray">▲</Text>}
+      {scrollOffset > 0 && <Text color={Colors.Foreground}>▲</Text>}
 
       {visibleSuggestions.map((suggestion, index) => {
         const originalIndex = startIndex + index;
@@ -56,8 +57,8 @@ export function SuggestionsDisplay({
         return (
           <Text
             key={`${suggestion}-${originalIndex}`}
-            color={isActive ? 'black' : 'white'}
-            backgroundColor={isActive ? 'blue' : undefined}
+            color={isActive ? Colors.Background : Colors.Foreground}
+            backgroundColor={isActive ? Colors.AccentBlue : undefined}
           >
             {suggestion.label}
           </Text>
diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index 7e8c5afd..20686040 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -32,16 +32,22 @@ export function ThemeDialog({
     SettingScope.User,
   );
 
-  const themeItems = themeManager.getAvailableThemes().map((theme) => ({
-    label: theme.active ? `${theme.name} (Active)` : theme.name,
-    value: theme.name,
-  }));
+  // Generate theme items
+  const themeItems = themeManager.getAvailableThemes().map((theme) => {
+    const typeString = theme.type.charAt(0).toUpperCase() + theme.type.slice(1);
+    return {
+      label: theme.name,
+      value: theme.name,
+      themeNameDisplay: theme.name,
+      themeTypeDisplay: typeString,
+    };
+  });
   const [selectInputKey, setSelectInputKey] = useState(Date.now());
 
+  // Determine which radio button should be initially selected in the theme list
+  // This should reflect the theme *saved* for the selected scope, or the default
   const initialThemeIndex = themeItems.findIndex(
-    (item) =>
-      item.value ===
-      (settings.forScope(selectedScope).settings.theme || DEFAULT_THEME.name),
+    (item) => item.value === (settings.merged.theme || DEFAULT_THEME.name),
   );
 
   const scopeItems = [
@@ -88,45 +94,49 @@ export function ThemeDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.AccentCyan}
-      flexDirection="column"
+      borderColor={Colors.AccentPurple}
+      flexDirection="row"
       padding={1}
-      width="50%"
+      width="100%"
     >
-      <Text bold={focusedSection === 'theme'}>
-        {focusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
-        <Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
-      </Text>
-
-      <RadioButtonSelect
-        key={selectInputKey}
-        items={themeItems}
-        initialIndex={initialThemeIndex}
-        onSelect={handleThemeSelect} // Use the wrapper handler
-        onHighlight={onHighlight}
-        isFocused={focusedSection === 'theme'}
-      />
-      {/* Scope Selection */}
-      <Box marginTop={1} flexDirection="column">
-        <Text bold={focusedSection === 'scope'}>
-          {focusedSection === 'scope' ? '> ' : '  '}Apply To
+      {/* Left Column: Selection */}
+      <Box flexDirection="column" width="50%" paddingRight={2}>
+        <Text bold={focusedSection === 'theme'}>
+          {focusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
+          <Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
         </Text>
         <RadioButtonSelect
-          items={scopeItems}
-          initialIndex={0} // Default to User Settings
-          onSelect={handleScopeSelect}
-          onHighlight={handleScopeHighlight}
-          isFocused={focusedSection === 'scope'}
+          key={selectInputKey}
+          items={themeItems}
+          initialIndex={initialThemeIndex}
+          onSelect={handleThemeSelect}
+          onHighlight={onHighlight}
+          isFocused={focusedSection === 'theme'}
         />
-      </Box>
 
-      <Box marginTop={1}>
-        <Text color={Colors.SubtleComment}>
-          (Use ↑/↓ arrows and Enter to select, Tab to change focus)
-        </Text>
+        {/* Scope Selection */}
+        <Box marginTop={1} flexDirection="column">
+          <Text bold={focusedSection === 'scope'}>
+            {focusedSection === 'scope' ? '> ' : '  '}Apply To
+          </Text>
+          <RadioButtonSelect
+            items={scopeItems}
+            initialIndex={0} // Default to User Settings
+            onSelect={handleScopeSelect}
+            onHighlight={handleScopeHighlight}
+            isFocused={focusedSection === 'scope'}
+          />
+        </Box>
+
+        <Box marginTop={1}>
+          <Text color={Colors.SubtleComment}>
+            (Use ↑/↓ arrows and Enter to select, Tab to change focus)
+          </Text>
+        </Box>
       </Box>
 
-      <Box marginTop={1} flexDirection="column">
+      {/* Right Column: Preview */}
+      <Box flexDirection="column" width="50%" paddingLeft={3}>
         <Text bold>Preview</Text>
         <Box
           borderStyle="single"
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
index 401b8ee0..a9a51232 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
@@ -27,7 +27,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
   const hasPending = !toolCalls.every(
     (t) => t.status === ToolCallStatus.Success,
   );
-  const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentCyan;
+  const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentPurple;
 
   return (
     <Box
diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
index 3db8b678..377be3e3 100644
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -27,7 +27,12 @@ export interface RadioSelectItem<T> {
  */
 export interface RadioButtonSelectProps<T> {
   /** An array of items to display as radio options. */
-  items: Array<RadioSelectItem<T>>;
+  items: Array<
+    RadioSelectItem<T> & {
+      themeNameDisplay?: string;
+      themeTypeDisplay?: string;
+    }
+  >;
 
   /** The initial index selected */
   initialIndex?: number;
@@ -42,33 +47,6 @@ export interface RadioButtonSelectProps<T> {
   isFocused?: boolean;
 }
 
-/**
- * Custom indicator component displaying radio button style (◉/○).
- */
-function RadioIndicator({
-  isSelected = false,
-}: InkSelectIndicatorProps): React.JSX.Element {
-  return (
-    <Box marginRight={1}>
-      <Text color={isSelected ? Colors.AccentGreen : Colors.Gray}>
-        {isSelected ? '◉' : '○'}
-      </Text>
-    </Box>
-  );
-}
-
-/**
- * Custom item component for displaying the label with appropriate color.
- */
-function RadioItem({
-  isSelected = false,
-  label,
-}: InkSelectItemProps): React.JSX.Element {
-  return (
-    <Text color={isSelected ? Colors.AccentGreen : Colors.Gray}>{label}</Text>
-  );
-}
-
 /**
  * A specialized SelectInput component styled to look like radio buttons.
  * It uses '◉' for selected and '○' for unselected items.
@@ -80,7 +58,7 @@ export function RadioButtonSelect<T>({
   initialIndex,
   onSelect,
   onHighlight,
-  isFocused,
+  isFocused, // This prop indicates if the current RadioButtonSelect group is focused
 }: RadioButtonSelectProps<T>): React.JSX.Element {
   const handleSelect = (item: RadioSelectItem<T>) => {
     onSelect(item.value);
@@ -90,11 +68,72 @@ export function RadioButtonSelect<T>({
       onHighlight(item.value);
     }
   };
+
+  /**
+   * Custom indicator component displaying radio button style (◉/○).
+   * Color changes based on whether the item is selected and if its group is focused.
+   */
+  function DynamicRadioIndicator({
+    isSelected = false,
+  }: InkSelectIndicatorProps): React.JSX.Element {
+    let indicatorColor = Colors.Foreground; // Default for not selected
+    if (isSelected) {
+      if (isFocused) {
+        // Group is focused, selected item is AccentGreen
+        indicatorColor = Colors.AccentGreen;
+      } else {
+        // Group is NOT focused, selected item is Foreground
+        indicatorColor = Colors.Foreground;
+      }
+    }
+    return (
+      <Box marginRight={1}>
+        <Text color={indicatorColor}>{isSelected ? '●' : '○'}</Text>
+      </Box>
+    );
+  }
+
+  /**
+   * Custom item component for displaying the label.
+   * Color changes based on whether the item is selected and if its group is focused.
+   * Now also handles displaying theme type with custom color.
+   */
+  function CustomThemeItemComponent(
+    props: InkSelectItemProps,
+  ): React.JSX.Element {
+    const { isSelected = false, label } = props;
+    const itemWithThemeProps = props as typeof props & {
+      themeNameDisplay?: string;
+      themeTypeDisplay?: string;
+    };
+
+    let textColor = Colors.Foreground;
+    if (isSelected) {
+      textColor = isFocused ? Colors.AccentGreen : Colors.Foreground;
+    }
+
+    if (
+      itemWithThemeProps.themeNameDisplay &&
+      itemWithThemeProps.themeTypeDisplay
+    ) {
+      return (
+        <Text color={textColor}>
+          {itemWithThemeProps.themeNameDisplay}{' '}
+          <Text color={Colors.SubtleComment}>
+            {itemWithThemeProps.themeTypeDisplay}
+          </Text>
+        </Text>
+      );
+    }
+
+    return <Text color={textColor}>{label}</Text>;
+  }
+
   initialIndex = initialIndex ?? 0;
   return (
     <SelectInput
-      indicatorComponent={RadioIndicator}
-      itemComponent={RadioItem}
+      indicatorComponent={DynamicRadioIndicator}
+      itemComponent={CustomThemeItemComponent}
       items={items}
       initialIndex={initialIndex}
       onSelect={handleSelect}
-- 
cgit v1.2.3