Move scope settings to new dialog (#7836)

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

@@ -14,11 +14,9 @@ import { DiffRenderer } from './messages/DiffRenderer.js';
 import { colorizeCode } from '../utils/CodeColorizer.js';
 import type { LoadedSettings } from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
-import {
-  getScopeItems,
-  getScopeMessageForSetting,
-} from '../../utils/dialogScopeUtils.js';
+import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
 import { useKeypress } from '../hooks/useKeypress.js';
+import { ScopeSelector } from './shared/ScopeSelector.js';
 
 interface ThemeDialogProps {
   /** Callback function when a theme is selected */
@@ -73,18 +71,14 @@ export function ThemeDialog({
       themeTypeDisplay: 'Custom',
     })),
   ];
-  const [selectInputKey, setSelectInputKey] = useState(Date.now());
 
   // Find the index of the selected theme, but only if it exists in the list
-  const selectedThemeName = settings.merged.ui?.theme || DEFAULT_THEME.name;
   const initialThemeIndex = themeItems.findIndex(
-    (item) => item.value === selectedThemeName,
+    (item) => item.value === highlightedThemeName,
   );
   // If not found, fall back to the first theme
   const safeInitialThemeIndex = initialThemeIndex >= 0 ? initialThemeIndex : 0;
 
-  const scopeItems = getScopeItems();
-
   const handleThemeSelect = useCallback(
     (themeName: string) => {
       onSelect(themeName, selectedScope);
@@ -99,25 +93,21 @@ export function ThemeDialog({
 
   const handleScopeHighlight = useCallback((scope: SettingScope) => {
     setSelectedScope(scope);
-    setSelectInputKey(Date.now());
   }, []);
 
   const handleScopeSelect = useCallback(
     (scope: SettingScope) => {
-      handleScopeHighlight(scope);
-      setFocusedSection('theme'); // Reset focus to theme section
+      onSelect(highlightedThemeName, scope);
     },
-    [handleScopeHighlight],
+    [onSelect, highlightedThemeName],
   );
 
-  const [focusedSection, setFocusedSection] = useState<'theme' | 'scope'>(
-    'theme',
-  );
+  const [mode, setMode] = useState<'theme' | 'scope'>('theme');
 
   useKeypress(
     (key) => {
       if (key.name === 'tab') {
-        setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
+        setMode((prev) => (prev === 'theme' ? 'scope' : 'theme'));
       }
       if (key.name === 'escape') {
         onSelect(undefined, selectedScope);
@@ -152,20 +142,13 @@ export function ThemeDialog({
 
   const DIALOG_PADDING = 2;
   const selectThemeHeight = themeItems.length + 1;
-  const SCOPE_SELECTION_HEIGHT = 4; // Height for the scope selection section + margin.
-  const SPACE_BETWEEN_THEME_SELECTION_AND_APPLY_TO = 1;
   const TAB_TO_SELECT_HEIGHT = 2;
   availableTerminalHeight = availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
   availableTerminalHeight -= 2; // Top and bottom borders.
   availableTerminalHeight -= TAB_TO_SELECT_HEIGHT;
 
-  let totalLeftHandSideHeight =
-    DIALOG_PADDING +
-    selectThemeHeight +
-    SCOPE_SELECTION_HEIGHT +
-    SPACE_BETWEEN_THEME_SELECTION_AND_APPLY_TO;
+  let totalLeftHandSideHeight = DIALOG_PADDING + selectThemeHeight;
 
-  let showScopeSelection = true;
   let includePadding = true;
 
   // Remove content from the LHS that can be omitted if it exceeds the available height.
@@ -174,15 +157,6 @@ export function ThemeDialog({
     totalLeftHandSideHeight -= DIALOG_PADDING;
   }
 
-  if (totalLeftHandSideHeight > availableTerminalHeight) {
-    // First, try hiding the scope selection
-    totalLeftHandSideHeight -= SCOPE_SELECTION_HEIGHT;
-    showScopeSelection = false;
-  }
-
-  // Don't focus the scope selection if it is hidden due to height constraints.
-  const currentFocusedSection = !showScopeSelection ? 'theme' : focusedSection;
-
   // Vertical space taken by elements other than the two code blocks in the preview pane.
   // Includes "Preview" title, borders, and margin between blocks.
   const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
@@ -217,94 +191,85 @@ export function ThemeDialog({
       paddingRight={1}
       width="100%"
     >
-      <Box flexDirection="row">
-        {/* Left Column: Selection */}
-        <Box flexDirection="column" width="45%" paddingRight={2}>
-          <Text bold={currentFocusedSection === 'theme'} wrap="truncate">
-            {currentFocusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
-            <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
-          </Text>
-          <RadioButtonSelect
-            key={selectInputKey}
-            items={themeItems}
-            initialIndex={safeInitialThemeIndex}
-            onSelect={handleThemeSelect}
-            onHighlight={handleThemeHighlight}
-            isFocused={currentFocusedSection === 'theme'}
-            maxItemsToShow={8}
-            showScrollArrows={true}
-            showNumbers={currentFocusedSection === 'theme'}
-          />
+      {mode === 'theme' ? (
+        <Box flexDirection="row">
+          {/* Left Column: Selection */}
+          <Box flexDirection="column" width="45%" paddingRight={2}>
+            <Text bold={mode === 'theme'} wrap="truncate">
+              {mode === 'theme' ? '> ' : '  '}Select Theme{' '}
+              <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
+            </Text>
+            <RadioButtonSelect
+              items={themeItems}
+              initialIndex={safeInitialThemeIndex}
+              onSelect={handleThemeSelect}
+              onHighlight={handleThemeHighlight}
+              isFocused={mode === 'theme'}
+              maxItemsToShow={12}
+              showScrollArrows={true}
+              showNumbers={mode === 'theme'}
+            />
+          </Box>
 
-          {/* Scope Selection */}
-          {showScopeSelection && (
-            <Box marginTop={1} flexDirection="column">
-              <Text bold={currentFocusedSection === 'scope'} wrap="truncate">
-                {currentFocusedSection === 'scope' ? '> ' : '  '}Apply To
-              </Text>
-              <RadioButtonSelect
-                items={scopeItems}
-                initialIndex={0} // Default to User Settings
-                onSelect={handleScopeSelect}
-                onHighlight={handleScopeHighlight}
-                isFocused={currentFocusedSection === 'scope'}
-                showNumbers={currentFocusedSection === 'scope'}
-              />
-            </Box>
-          )}
-        </Box>
-
-        {/* Right Column: Preview */}
-        <Box flexDirection="column" width="55%" paddingLeft={2}>
-          <Text bold>Preview</Text>
-          {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
-          {(() => {
-            const previewTheme =
-              themeManager.getTheme(
-                highlightedThemeName || DEFAULT_THEME.name,
-              ) || DEFAULT_THEME;
-            return (
-              <Box
-                borderStyle="single"
-                borderColor={Colors.Gray}
-                paddingTop={includePadding ? 1 : 0}
-                paddingBottom={includePadding ? 1 : 0}
-                paddingLeft={1}
-                paddingRight={1}
-                flexDirection="column"
-              >
-                {colorizeCode(
-                  `# function
+          {/* Right Column: Preview */}
+          <Box flexDirection="column" width="55%" paddingLeft={2}>
+            <Text bold>Preview</Text>
+            {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
+            {(() => {
+              const previewTheme =
+                themeManager.getTheme(
+                  highlightedThemeName || DEFAULT_THEME.name,
+                ) || DEFAULT_THEME;
+              return (
+                <Box
+                  borderStyle="single"
+                  borderColor={Colors.Gray}
+                  paddingTop={includePadding ? 1 : 0}
+                  paddingBottom={includePadding ? 1 : 0}
+                  paddingLeft={1}
+                  paddingRight={1}
+                  flexDirection="column"
+                >
+                  {colorizeCode(
+                    `# function
 def fibonacci(n):
     a, b = 0, 1
     for _ in range(n):
         a, b = b, a + b
     return a`,
-                  'python',
-                  codeBlockHeight,
-                  colorizeCodeWidth,
-                )}
-                <Box marginTop={1} />
-                <DiffRenderer
-                  diffContent={`--- a/util.py
+                    'python',
+                    codeBlockHeight,
+                    colorizeCodeWidth,
+                  )}
+                  <Box marginTop={1} />
+                  <DiffRenderer
+                    diffContent={`--- a/util.py
 +++ b/util.py
 @@ -1,2 +1,2 @@
 - print("Hello, " + name)
 + print(f"Hello, {name}!")
 `}
-                  availableTerminalHeight={diffHeight}
-                  terminalWidth={colorizeCodeWidth}
-                  theme={previewTheme}
-                />
-              </Box>
-            );
-          })()}
+                    availableTerminalHeight={diffHeight}
+                    terminalWidth={colorizeCodeWidth}
+                    theme={previewTheme}
+                  />
+                </Box>
+              );
+            })()}
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <ScopeSelector
+          onSelect={handleScopeSelect}
+          onHighlight={handleScopeHighlight}
+          isFocused={mode === 'scope'}
+          initialScope={selectedScope}
+        />
+      )}
       <Box marginTop={1}>
         <Text color={Colors.Gray} wrap="truncate">
-          (Use Enter to select
-          {showScopeSelection ? ', Tab to change focus' : ''})
+          (Use Enter to {mode === 'theme' ? 'select' : 'apply scope'}, Tab to{' '}
+          {mode === 'theme' ? 'configure scope' : 'select theme'})
         </Text>
       </Box>
     </Box>