Refactor settings UI to simplify model provider management and move presets into general section

Author: robertpiosik

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.module.scss

@@ -6,7 +6,7 @@
 
 .toolbar {
   display: flex;
-  padding: 0 8px 8px 8px;
+  padding: 0 10px 8px 10px;
   align-items: center;
   gap: 8px;
 }
@@ -26,14 +26,6 @@
     background-color: var(--vscode-welcomePage-tileBackground);
   }
 
-  .col-actions {
-    visibility: hidden;
-  }
-
-  &:hover .col-actions {
-    visibility: visible;
-  }
-
   &__content {
     flex: 1;
     padding: 0 12px;
@@ -77,7 +69,7 @@
 }
 
 .col-drag {
-  width: 33px;
+  width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.tsx

@@ -79,6 +79,7 @@ export const ConfigurationsList: React.FC<ConfigurationsList.Props> = (
           on_click={props.on_add}
           title="New configuration"
         />
+        <div style={{ flex: 1 }} />
         {props.on_unset_default && has_default && (
           <TextButton on_click={props.on_unset_default}>
             Unset default

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.module.scss

@@ -6,7 +6,7 @@
 
 .toolbar {
   display: flex;
-  padding: 0 8px 8px 8px;
+  padding: 0 10px 8px 10px;
   align-items: center;
   gap: 8px;
 }
@@ -26,14 +26,6 @@
     background-color: var(--vscode-welcomePage-tileBackground);
   }
 
-  .col-actions {
-    visibility: hidden;
-  }
-
-  &:hover .col-actions {
-    visibility: visible;
-  }
-
   &__content {
     flex: 1;
     display: flex;
@@ -50,7 +42,7 @@
 }
 
 .col-drag {
-  width: 33px;
+  width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -60,7 +52,7 @@
   flex: 1 1 25%;
 }
 .col-api-key {
-  flex: 1 1 25%;
+  width: 50px;
 }
 .col-base-url {
   flex: 1 1 45%;
@@ -70,6 +62,8 @@
   justify-content: flex-end;
   gap: 8px;
   padding-right: 8px;
+  width: 60px;
+  flex-shrink: 0;
 }
 
 .empty-message {

packages/vscode/src/views/settings/backend/message-handlers/handle-add-model-provider.ts

@@ -136,6 +136,11 @@ export const handle_add_model_provider = async (
     quick_pick.title = 'Add New Model Provider'
     quick_pick.placeholder =
       'Choose a predefined provider or create a custom one'
+    const close_button: vscode.QuickInputButton = {
+      iconPath: new vscode.ThemeIcon('close'),
+      tooltip: 'Close'
+    }
+    quick_pick.buttons = [close_button]
 
     return new Promise<boolean>((resolve) => {
       let is_accepted = false
@@ -163,6 +168,12 @@ export const handle_add_model_provider = async (
         }
       })
 
+      quick_pick.onDidTriggerButton((button) => {
+        if (button === close_button) {
+          quick_pick.hide()
+        }
+      })
+
       quick_pick.onDidHide(() => {
         if (!is_accepted) {
           resolve(false)

packages/vscode/src/views/settings/backend/message-handlers/handle-edit-custom-model-provider.ts

@@ -60,6 +60,12 @@ export const handle_edit_custom_model_provider = async (
       quick_pick.title = `Edit "${provider_to_edit.name}" Model Provider`
       quick_pick.placeholder = 'Select a property to edit'
 
+      const close_button: vscode.QuickInputButton = {
+        iconPath: new vscode.ThemeIcon('close'),
+        tooltip: 'Close'
+      }
+      quick_pick.buttons = [close_button]
+
       let is_accepted = false
       const disposables: vscode.Disposable[] = []
 
@@ -77,6 +83,11 @@ export const handle_edit_custom_model_provider = async (
           resolve(selected?.id)
           quick_pick.hide()
         }),
+        quick_pick.onDidTriggerButton((button) => {
+          if (button === close_button) {
+            quick_pick.hide()
+          }
+        }),
         quick_pick.onDidHide(() => {
           if (!is_accepted) {
             resolve(undefined)

packages/vscode/src/views/settings/frontend/Home/Home.tsx

@@ -15,12 +15,10 @@ import {
   EditFormatInstructions
 } from '@/views/settings/types/messages'
 import { GeneralSection } from './sections/GeneralSection'
-import { PresetsSection } from './sections/PresetsSection'
 import { use_translation, TranslationKey } from '@/views/i18n/use-translation'
 
 type NavItem =
   | 'general'
-  | 'presets'
   | 'model-providers'
   | 'edit-context'
   | 'code-completions'
@@ -38,11 +36,6 @@ const NAV_ITEMS_CONFIG: NavConfigItem[] = [
     id: 'general',
     label: 'settings.sidebar.general'
   },
-  {
-    type: 'item',
-    id: 'presets',
-    label: 'settings.sidebar.presets'
-  },
   {
     type: 'item',
     id: 'model-providers',
@@ -142,7 +135,6 @@ export const Home: React.FC<Props> = (props) => {
   const scroll_container_ref = useRef<HTMLDivElement>(null)
   const section_refs = useRef<Record<NavItem, HTMLDivElement | null>>({
     general: null,
-    presets: null,
     'model-providers': null,
     'edit-context': null,
     'code-completions': null,
@@ -179,10 +171,6 @@ export const Home: React.FC<Props> = (props) => {
     (is_stuck: boolean) => handle_stuck_change('general', is_stuck),
     [handle_stuck_change]
   )
-  const presets_on_stuck_change = useCallback(
-    (is_stuck: boolean) => handle_stuck_change('presets', is_stuck),
-    [handle_stuck_change]
-  )
   const model_providers_on_stuck_change = useCallback(
     (is_stuck: boolean) => handle_stuck_change('model-providers', is_stuck),
     [handle_stuck_change]
@@ -338,20 +326,16 @@ export const Home: React.FC<Props> = (props) => {
           on_open_allow_patterns_settings={
             props.on_open_allow_patterns_settings
           }
-          on_stuck_change={general_on_stuck_change}
-        />
-        <PresetsSection
-          ref={(el) => (section_refs.current['presets'] = el)}
           gemini_user_id={props.gemini_user_id}
           ai_studio_user_id={props.ai_studio_user_id}
           on_gemini_user_id_change={props.on_gemini_user_id_change}
           on_ai_studio_user_id_change={props.on_ai_studio_user_id_change}
-          on_stuck_change={presets_on_stuck_change}
+          on_stuck_change={general_on_stuck_change}
         />
         <Section
           ref={(el) => (section_refs.current['model-providers'] = el)}
           title="Model Providers"
-          subtitle="Manage your model providers here. Add, edit, reorder, or delete providers as needed."
+          subtitle="Manage your API keys for use with API tools."
           on_stuck_change={model_providers_on_stuck_change}
         >
           <Group>
@@ -409,7 +393,7 @@ export const Home: React.FC<Props> = (props) => {
           ref={(el) => (section_refs.current['code-completions'] = el)}
           group="API Tool"
           title="Code Completions"
-          subtitle="Get accurate code-at-cursor from state-of-the-art reasoning models."
+          subtitle="Get accurate inline code snippets from state-of-the-art reasoning models."
           on_stuck_change={code_completions_on_stuck_change}
         >
           <Group>
@@ -437,7 +421,7 @@ export const Home: React.FC<Props> = (props) => {
           ref={(el) => (section_refs.current['intelligent-update'] = el)}
           group="API Tool"
           title="Intelligent Update"
-          subtitle={`Handle "truncated" edit format and malformed diffs.`}
+          subtitle={`Integrate changes from malformed markdown code blocks.`}
           on_stuck_change={intelligent_update_on_stuck_change}
         >
           <Group>

packages/vscode/src/views/settings/frontend/Home/sections/GeneralSection.tsx

@@ -22,6 +22,10 @@ type Props = {
   send_with_shift_enter: boolean
   check_new_files: boolean
   checkpoint_lifespan: number
+  gemini_user_id: number | null
+  ai_studio_user_id: number | null
+  on_gemini_user_id_change: (id: number | null) => void
+  on_ai_studio_user_id_change: (id: number | null) => void
   on_automatic_checkpoints_toggle: (disabled: boolean) => void
   on_send_with_shift_enter_change: (enabled: boolean) => void
   on_check_new_files_change: (enabled: boolean) => void
@@ -46,6 +50,8 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
     const [context_size_warning_threshold, set_context_size_warning_threshold] =
       useState('')
     const [checkpoint_lifespan_str, set_checkpoint_lifespan_str] = useState('')
+    const [gemini_user_id_str, set_gemini_user_id_str] = useState('')
+    const [ai_studio_user_id_str, set_ai_studio_user_id_str] = useState('')
     const [instructions, set_instructions] = useState<EditFormatInstructions>({
       whole: '',
       truncated: '',
@@ -69,6 +75,23 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
       set_checkpoint_lifespan_str(String(props.checkpoint_lifespan))
     }, [props.checkpoint_lifespan])
 
+    useEffect(() => {
+      set_gemini_user_id_str(
+        props.gemini_user_id === null || props.gemini_user_id === undefined
+          ? ''
+          : String(props.gemini_user_id)
+      )
+    }, [props.gemini_user_id])
+
+    useEffect(() => {
+      set_ai_studio_user_id_str(
+        props.ai_studio_user_id === null ||
+          props.ai_studio_user_id === undefined
+          ? ''
+          : String(props.ai_studio_user_id)
+      )
+    }, [props.ai_studio_user_id])
+
     useEffect(() => {
       if (props.edit_format_instructions) {
         set_instructions(props.edit_format_instructions)
@@ -89,6 +112,28 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
       }
     }
 
+    const handle_gemini_user_id_blur = () => {
+      if (gemini_user_id_str == '') {
+        props.on_gemini_user_id_change(null)
+        return
+      }
+      const num_id = parseInt(gemini_user_id_str, 10)
+      if (!isNaN(num_id) && num_id >= 0) {
+        props.on_gemini_user_id_change(num_id)
+      }
+    }
+
+    const handle_ai_studio_user_id_blur = () => {
+      if (ai_studio_user_id_str == '') {
+        props.on_ai_studio_user_id_change(null)
+        return
+      }
+      const num_id = parseInt(ai_studio_user_id_str, 10)
+      if (!isNaN(num_id) && num_id >= 0) {
+        props.on_ai_studio_user_id_change(num_id)
+      }
+    }
+
     const handle_instructions_blur = () => {
       props.on_edit_format_instructions_change(instructions)
     }
@@ -318,6 +363,34 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
             }
           />
         </Group>
+        <Group title="Presets">
+          <Item
+            title="Gemini User ID"
+            description="Run Gemini chatbot as non-default user. Check URL for the numeric ID."
+            slot_right={
+              <Input
+                type="number"
+                value={gemini_user_id_str}
+                on_change={set_gemini_user_id_str}
+                on_blur={handle_gemini_user_id_blur}
+                max_width={60}
+              />
+            }
+          />
+          <Item
+            title="AI Studio User ID"
+            description="Run AI Studio chatbot as non-default user. Check URL for the numeric ID."
+            slot_right={
+              <Input
+                type="number"
+                value={ai_studio_user_id_str}
+                on_change={set_ai_studio_user_id_str}
+                on_blur={handle_ai_studio_user_id_blur}
+                max_width={60}
+              />
+            }
+          />
+        </Group>
       </Section>
     )
   }