Redesign settings dialog with curated list and view-switching UI

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

@@ -14,6 +14,7 @@ import {
   type EditorDisplay,
 } from '../editors/editorSettingsManager.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { ScopeSelector } from './shared/ScopeSelector.js';
 import type { LoadedSettings } from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
 import type { EditorType } from '@qwen-code/qwen-code-core';
@@ -35,13 +36,12 @@ export function EditorSettingsDialog({
   const [selectedScope, setSelectedScope] = useState<SettingScope>(
     SettingScope.User,
   );
-  const [focusedSection, setFocusedSection] = useState<'editor' | 'scope'>(
-    'editor',
-  );
+  const [mode, setMode] = useState<'editor' | 'scope'>('editor');
+
   useKeypress(
     (key) => {
       if (key.name === 'tab') {
-        setFocusedSection((prev) => (prev === 'editor' ? 'scope' : 'editor'));
+        setMode((prev) => (prev === 'editor' ? 'scope' : 'editor'));
       }
       if (key.name === 'escape') {
         onExit();
@@ -65,23 +65,6 @@ export function EditorSettingsDialog({
     editorIndex = 0;
   }
 
-  const scopeItems = [
-    {
-      get label() {
-        return t('User Settings');
-      },
-      value: SettingScope.User,
-      key: SettingScope.User,
-    },
-    {
-      get label() {
-        return t('Workspace Settings');
-      },
-      value: SettingScope.Workspace,
-      key: SettingScope.Workspace,
-    },
-  ];
-
   const handleEditorSelect = (editorType: EditorType | 'not_set') => {
     if (editorType === 'not_set') {
       onSelect(undefined, selectedScope);
@@ -92,7 +75,11 @@ export function EditorSettingsDialog({
 
   const handleScopeSelect = (scope: SettingScope) => {
     setSelectedScope(scope);
-    setFocusedSection('editor');
+    setMode('editor');
+  };
+
+  const handleScopeHighlight = (scope: SettingScope) => {
+    setSelectedScope(scope);
   };
 
   let otherScopeModifiedMessage = '';
@@ -131,54 +118,59 @@ export function EditorSettingsDialog({
       width="100%"
     >
       <Box flexDirection="column" width="45%" paddingRight={2}>
-        <Text bold={focusedSection === 'editor'}>
-          {focusedSection === 'editor' ? '> ' : '  '}Select Editor{' '}
-          <Text color={theme.text.secondary}>{otherScopeModifiedMessage}</Text>
-        </Text>
-        <RadioButtonSelect
-          items={editorItems.map((item) => ({
-            label: item.name,
-            value: item.type,
-            disabled: item.disabled,
-            key: item.type,
-          }))}
-          initialIndex={editorIndex}
-          onSelect={handleEditorSelect}
-          isFocused={focusedSection === 'editor'}
-          key={selectedScope}
-        />
-
-        <Box marginTop={1} flexDirection="column">
-          <Text bold={focusedSection === 'scope'}>
-            {focusedSection === 'scope' ? '> ' : '  '}
-            {t('Apply To')}
-          </Text>
-          <RadioButtonSelect
-            items={scopeItems}
-            initialIndex={0}
+        {mode === 'editor' ? (
+          <Box flexDirection="column">
+            <Text bold={mode === 'editor'} wrap="truncate">
+              {mode === 'editor' ? '> ' : '  '}
+              {t('Select Editor')}{' '}
+              <Text color={theme.text.secondary}>
+                {otherScopeModifiedMessage}
+              </Text>
+            </Text>
+            <Box height={1} />
+            <RadioButtonSelect
+              items={editorItems.map((item) => ({
+                label: item.name,
+                value: item.type,
+                disabled: item.disabled,
+                key: item.type,
+              }))}
+              initialIndex={editorIndex}
+              onSelect={handleEditorSelect}
+              isFocused={mode === 'editor'}
+              key={selectedScope}
+            />
+          </Box>
+        ) : (
+          <ScopeSelector
             onSelect={handleScopeSelect}
-            isFocused={focusedSection === 'scope'}
+            onHighlight={handleScopeHighlight}
+            isFocused={mode === 'scope'}
+            initialScope={selectedScope}
           />
-        </Box>
+        )}
 
         <Box marginTop={1}>
-          <Text color={theme.text.secondary}>
-            (Use Enter to select, Tab to change focus)
+          <Text color={theme.text.secondary} wrap="truncate">
+            {mode === 'editor'
+              ? t('(Use Enter to select, Tab to configure scope)')
+              : t('(Use Enter to apply scope, Tab to go back)')}
           </Text>
         </Box>
       </Box>
 
       <Box flexDirection="column" width="55%" paddingLeft={2}>
         <Text bold color={theme.text.primary}>
-          Editor Preference
+          {t('Editor Preference')}
         </Text>
         <Box flexDirection="column" gap={1} marginTop={1}>
           <Text color={theme.text.secondary}>
-            These editors are currently supported. Please note that some editors
-            cannot be used in sandbox mode.
+            {t(
+              'These editors are currently supported. Please note that some editors cannot be used in sandbox mode.',
+            )}
           </Text>
           <Text color={theme.text.secondary}>
-            Your preferred editor is:{' '}
+            {t('Your preferred editor is:')}{' '}
             <Text
               color={
                 mergedEditorName === 'None'