Add scrolling to theme dialog (#3895)

Co-authored-by: Jacob Richman <[email protected]>

1 files changed, 18 insertions, 10 deletions

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index ba49f8e3..e6c09225 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { Colors } from '../colors.js';
 import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
@@ -60,19 +60,25 @@ export function ThemeDialog({
     { label: 'System Settings', value: SettingScope.System },
   ];
 
-  const handleThemeSelect = (themeName: string) => {
-    onSelect(themeName, selectedScope);
-  };
+  const handleThemeSelect = useCallback(
+    (themeName: string) => {
+      onSelect(themeName, selectedScope);
+    },
+    [onSelect, selectedScope],
+  );
 
-  const handleScopeHighlight = (scope: SettingScope) => {
+  const handleScopeHighlight = useCallback((scope: SettingScope) => {
     setSelectedScope(scope);
     setSelectInputKey(Date.now());
-  };
+  }, []);
 
-  const handleScopeSelect = (scope: SettingScope) => {
-    handleScopeHighlight(scope);
-    setFocusedSection('theme'); // Reset focus to theme section
-  };
+  const handleScopeSelect = useCallback(
+    (scope: SettingScope) => {
+      handleScopeHighlight(scope);
+      setFocusedSection('theme'); // Reset focus to theme section
+    },
+    [handleScopeHighlight],
+  );
 
   const [focusedSection, setFocusedSection] = useState<'theme' | 'scope'>(
     'theme',
@@ -196,6 +202,7 @@ export function ThemeDialog({
             onSelect={handleThemeSelect}
             onHighlight={onHighlight}
             isFocused={currenFocusedSection === 'theme'}
+            maxItemsToShow={8}
           />
 
           {/* Scope Selection */}
@@ -210,6 +217,7 @@ export function ThemeDialog({
                 onSelect={handleScopeSelect}
                 onHighlight={handleScopeHighlight}
                 isFocused={currenFocusedSection === 'scope'}
+                showScrollArrows={false}
               />
             </Box>
           )}