Streamline preset and configuration management UI by integrating action buttons into section headers and modifying preset creation order

Author: robertpiosik

packages/ui/src/components/editor/ChatInput/ChatInput.module.scss

@@ -251,7 +251,7 @@
       }
 
       &--secondary {
-        @media (max-width: 325px) {
+        @media (max-width: 330px) {
           > span {
             display: none;
           }

packages/ui/src/components/editor/ChatInput/ChatInput.tsx

@@ -28,7 +28,6 @@ type Props = {
     use_default: string
     last_selection: string
     select: string
-    select_config: string
     code_completions_mode_unavailable_with_text_selection: string
     code_completions_mode_unavailable_without_active_editor: string
     search: string
@@ -428,38 +427,20 @@ export const ChatInput: React.FC<Props> = (props) => {
               ])}
               onClick={(e) => handle_submit(e, true)}
               disabled={is_submit_disabled}
-              title={
-                is_submit_disabled
-                  ? get_disabled_title()
-                  : props.is_web_mode
-                  ? props.translations.select
-                  : props.translations.select_config
-              }
             >
               {navigator.userAgent.toUpperCase().indexOf('MAC') >= 0 ? (
                 <Icon variant="COMMAND" />
               ) : (
                 <div className={styles.footer__right__button__ctrl}>Ctrl</div>
               )}
               <Icon variant="ENTER" />
-              <span>
-                {props.is_web_mode
-                  ? props.translations.select
-                  : props.translations.select_config}
-              </span>
+              <span>{props.translations.select}</span>
             </button>
 
             <button
               className={styles.footer__right__button}
               onClick={handle_submit}
               disabled={is_submit_disabled}
-              title={
-                is_submit_disabled
-                  ? get_disabled_title()
-                  : props.is_web_mode
-                  ? props.translations.last_selection
-                  : props.translations.use_default
-              }
             >
               <Icon variant="ENTER" />
               <span>

packages/ui/src/components/editor/Configurations/Configurations.module.scss

@@ -6,8 +6,13 @@
 .my-configurations {
   padding: 0 var(--padding-12px);
   margin-bottom: var(--padding-4px);
-  opacity: 0.7;
-  color: var(--vscode-foreground);
+  display: flex;
+  align-items: center;
+  gap: var(--padding-8px);
+
+  &__left {
+    opacity: 0.7;
+  }
 }
 
 .configurations {
@@ -47,7 +52,7 @@
     &__left {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: var(--padding-5px);
       overflow: hidden;
       white-space: nowrap;
 
@@ -63,8 +68,4 @@
       }
     }
   }
-
-  &__create {
-    margin: var(--padding-8px) var(--padding-12px) 0 var(--padding-12px);
-  }
 }

packages/ui/src/components/editor/Configurations/Configurations.tsx

@@ -3,6 +3,8 @@ import { Button } from '../Button/Button'
 import { DEFAULT_TEMPERATURE } from '@shared/constants/api-tools'
 import cn from 'classnames'
 import { useState } from 'react'
+import { TextButton } from '../TextButton'
+import { IconButton } from '../IconButton/IconButton'
 
 export namespace Configurations {
   export type Configuration = {
@@ -39,7 +41,13 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
   return (
     <div className={styles.container}>
       <div className={styles['my-configurations']}>
-        {props.translations.my_configurations}
+        <div className={styles['my-configurations__left']}>
+          {props.translations.my_configurations}
+        </div>
+        <IconButton
+          codicon_icon="settings"
+          on_click={props.on_manage_configurations}
+        />
       </div>
 
       <div className={styles.configurations}>
@@ -96,12 +104,6 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
           )
         })}
       </div>
-
-      <div className={styles.configurations__create}>
-        <Button on_click={props.on_manage_configurations}>
-          {props.translations.manage_configurations}
-        </Button>
-      </div>
     </div>
   )
 }

packages/ui/src/components/editor/Presets/Presets.module.scss

@@ -6,13 +6,12 @@
 .my-presets {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 0 var(--padding-12px);
   margin-bottom: var(--padding-4px);
+  gap: var(--padding-8px);
 
   &__left {
     opacity: 0.7;
-    color: var(--vscode-foreground);
   }
 }
 
@@ -57,7 +56,7 @@
     &__left {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: var(--padding-5px);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -73,7 +72,7 @@
 
         &--disabled {
           opacity: 0.3;
-          cursor: auto
+          cursor: auto;
         }
       }
 
@@ -103,8 +102,4 @@
       padding-right: var(--padding-4px);
     }
   }
-
-  &__create {
-    margin: var(--padding-8px) var(--padding-12px) 0 var(--padding-12px);
-  }
 }

packages/ui/src/components/editor/Presets/Presets.stories.tsx

@@ -41,7 +41,7 @@ export const Multiple = () => {
       has_context={true}
       web_mode="edit-context"
       translations={{
-        my_chat_presets: 'My Chat Presets',
+        my_presets: 'My Chat Presets',
         set_presets_opening_by_default: 'Set presets opening by default',
         set_as_default: 'Set as Default',
         unset_as_default: 'Unset as Default',
@@ -89,7 +89,7 @@ export const CodeCompletionsMode = () => {
       has_context={true}
       web_mode="edit-context"
       translations={{
-        my_chat_presets: 'My Chat Presets',
+        my_presets: 'My Chat Presets',
         set_presets_opening_by_default: 'Set presets opening by default',
         set_as_default: 'Set as Default',
         unset_as_default: 'Unset as Default',

packages/ui/src/components/editor/Presets/Presets.tsx

@@ -1,12 +1,12 @@
 import styles from './Presets.module.scss'
 import { IconButton } from '../IconButton/IconButton'
-import { Button } from '../Button/Button'
 import { Checkbox } from '../Checkbox'
 import cn from 'classnames'
 import { ReactSortable } from 'react-sortablejs'
 import { Icon } from '../Icon'
 import { useState } from 'react'
 import { CHATBOTS } from '@shared/constants/chatbots'
+import { TextButton } from '../TextButton'
 
 export const chatbot_to_icon: Record<keyof typeof CHATBOTS, Icon.Variant> = {
   'AI Studio': 'AI_STUDIO',
@@ -56,7 +56,7 @@ export namespace Presets {
     on_preset_delete: (name: string) => void
     on_toggle_default_preset: (name: string) => void
     translations: {
-      my_chat_presets: string
+      my_presets: string
       set_presets_opening_by_default: string
       not_connected: string
       preset_requires_active_editor: string
@@ -134,10 +134,9 @@ export const Presets: React.FC<Presets.Props> = (props) => {
     <div className={styles.container}>
       <div className={styles['my-presets']}>
         <div className={styles['my-presets__left']}>
-          {props.translations.my_chat_presets}
+          {props.translations.my_presets}
         </div>
-
-        <span></span>
+        <IconButton codicon_icon="add" on_click={props.on_create_preset} />
       </div>
 
       <div className={styles.presets}>
@@ -352,12 +351,6 @@ export const Presets: React.FC<Presets.Props> = (props) => {
           })}
         </ReactSortable>
       </div>
-
-      <div className={styles.presets__create}>
-        <Button on_click={props.on_create_preset}>
-          {props.translations.create}
-        </Button>
-      </div>
     </div>
   )
 }

packages/vscode/src/view/backend/message-handlers/handle-create-preset.ts

@@ -14,11 +14,13 @@ export const handle_create_preset = async (
     [
       {
         label: 'Preset',
-        description: 'Your favorite chatbot, preconfigured'
+        description: 'Added at the top',
+        detail: 'Your favorite chatbot, preconfigured.'
       },
       {
         label: 'Group',
-        description: 'Simultaneous initializations of selected presets'
+        description: 'Added at the bottom',
+        detail: 'Simultaneous initializations of selected presets.'
       }
     ],
     {
@@ -55,7 +57,10 @@ export const handle_create_preset = async (
     } as ConfigPresetFormat
   }
 
-  const updated_presets = [...current_presets, new_preset]
+  const updated_presets =
+    create_option.label == 'Preset'
+      ? [new_preset, ...current_presets]
+      : [...current_presets, new_preset]
 
   try {
     provider.send_message({

packages/vscode/src/view/frontend/EditPresetForm/EditPresetForm.module.scss

@@ -13,7 +13,7 @@
   &__item {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: var(--padding-5px);
     cursor: pointer;
 
     input {

packages/vscode/src/view/frontend/home/HomeView/HomeView.module.scss

@@ -8,7 +8,7 @@
 .inner {
   display: flex;
   flex-direction: column;
-  padding: var(--padding-3px) 0 var(--padding-12px) 0;
+  padding: var(--padding-3px) 0 var(--padding-10px) 0;
 }
 
 .commands {
@@ -55,7 +55,7 @@
     align-items: center;
     gap: var(--padding-4px);
     height: 24px;
-    padding: 0 5px;
+    padding: 0 var(--padding-5px);
     border-radius: var(--border-radius-4px);
     text-decoration: none;
     color: var(--vscode-foreground);