refactor(cli): fully remove React anti patterns, improve type safety and fix UX oversights in SettingsDialog.tsx (#18963)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

packages/cli/src/utils/dialogScopeUtils.ts

@@ -4,12 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {
-  LoadableSettingScope,
-  LoadedSettings,
-} from '../config/settings.js';
+import type { LoadableSettingScope, Settings } from '../config/settings.js';
 import { isLoadableSettingScope, SettingScope } from '../config/settings.js';
-import { settingExistsInScope } from './settingsUtils.js';
+import { isInSettingsScope } from './settingsUtils.js';
 
 /**
  * Shared scope labels for dialog components that need to display setting scopes
@@ -43,7 +40,9 @@ export function getScopeItems(): Array<{
 export function getScopeMessageForSetting(
   settingKey: string,
   selectedScope: LoadableSettingScope,
-  settings: LoadedSettings,
+  settings: {
+    forScope: (scope: LoadableSettingScope) => { settings: Settings };
+  },
 ): string {
   const otherScopes = Object.values(SettingScope)
     .filter(isLoadableSettingScope)
@@ -51,7 +50,7 @@ export function getScopeMessageForSetting(
 
   const modifiedInOtherScopes = otherScopes.filter((scope) => {
     const scopeSettings = settings.forScope(scope).settings;
-    return settingExistsInScope(settingKey, scopeSettings);
+    return isInSettingsScope(settingKey, scopeSettings);
   });
 
   if (modifiedInOtherScopes.length === 0) {
@@ -60,7 +59,7 @@ export function getScopeMessageForSetting(
 
   const modifiedScopesStr = modifiedInOtherScopes.join(', ');
   const currentScopeSettings = settings.forScope(selectedScope).settings;
-  const existsInCurrentScope = settingExistsInScope(
+  const existsInCurrentScope = isInSettingsScope(
     settingKey,
     currentScopeSettings,
   );