Refactor UI panels to replace header action buttons with full-width footer buttons and standardize padding in input components

Author: robertpiosik

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

@@ -1,5 +1,5 @@
 .container {
-  --padding: var(--padding-5px) var(--padding-7px);
+  --padding: var(--padding-5px) 15px var(--padding-5px) var(--padding-7px);
   position: relative;
 
   &__inner {

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

@@ -3,19 +3,6 @@
   flex-direction: column;
 }
 
-.heading {
-  padding: 0 var(--padding-12px);
-  margin-bottom: var(--padding-2px);
-  display: flex;
-  align-items: center;
-  gap: var(--padding-8px);
-
-  &__title {
-    color: var(--vscode-descriptionForeground);
-    white-space: nowrap;
-  }
-}
-
 .missing-config {
   padding: var(--padding-2px) var(--padding-12px) 0 var(--padding-12px);
   font-weight: 500;
@@ -105,3 +92,13 @@
     transform: translateX(0);
   }
 }
+
+.footer {
+  display: flex;
+  padding: var(--padding-8px) var(--padding-12px);
+
+  > button {
+    width: 100%;
+    flex: 1;
+  }
+}

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

@@ -1,8 +1,8 @@
 import styles from './Configurations.module.scss'
 import { DEFAULT_TEMPERATURE } from '@shared/constants/api-tools'
 import cn from 'classnames'
-import { IconButton } from '../IconButton'
 import { ReactSortable } from 'react-sortablejs'
+import { Button } from '../Button/Button'
 
 export namespace Configurations {
   export type Configuration = {
@@ -27,15 +27,6 @@ export namespace Configurations {
 export const Configurations: React.FC<Configurations.Props> = (props) => {
   return (
     <div className={styles.container}>
-      <div className={styles.heading}>
-        <div className={styles['heading__title']}>MY CONFIGURATIONS</div>
-
-        <IconButton
-          codicon_icon="edit"
-          on_click={props.on_manage_configurations}
-        />
-      </div>
-
       <div className={styles.configurations}>
         <ReactSortable
           list={props.configurations}
@@ -101,6 +92,11 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
           })}
         </ReactSortable>
       </div>
+      <div className={styles.footer}>
+        <Button on_click={props.on_manage_configurations}>
+          Edit Configurations
+        </Button>
+      </div>
     </div>
   )
 }

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

@@ -3,18 +3,6 @@
   flex-direction: column;
 }
 
-.my-presets {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--padding-12px);
-  margin-bottom: var(--padding-2px);
-  gap: var(--padding-8px);
-
-  &__left {
-    color: var(--vscode-descriptionForeground);
-  }
-}
-
 .presets {
   display: flex;
   flex-direction: column;
@@ -128,3 +116,12 @@
     }
   }
 }
+
+.footer {
+  display: flex;
+  padding: var(--padding-8px) var(--padding-12px);
+
+  > button {
+    flex: 1;
+  }
+}

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

@@ -5,6 +5,7 @@ import cn from 'classnames'
 import { ReactSortable } from 'react-sortablejs'
 import { Icon } from '../../common/Icon'
 import { CHATBOTS } from '@shared/constants/chatbots'
+import { Button } from '../Button/Button'
 import { use_context_menu } from '../../../../hooks/use-context-menu'
 
 export const chatbot_to_icon: Record<keyof typeof CHATBOTS, Icon.Variant> = {
@@ -102,11 +103,6 @@ export const Presets: React.FC<Presets.Props> = (props) => {
 
   return (
     <div className={styles.container}>
-      <div className={styles['my-presets']}>
-        <div className={styles['my-presets__left']}>MY PRESETS</div>
-        <IconButton codicon_icon="add" on_click={props.on_create_preset} />
-      </div>
-
       <div className={styles.presets}>
         {props.presets[0]?.chatbot !== undefined && (
           <div
@@ -369,6 +365,9 @@ export const Presets: React.FC<Presets.Props> = (props) => {
           </div>
         </div>
       )}
+      <div className={styles.footer}>
+        <Button on_click={props.on_create_preset}>Add New Preset</Button>
+      </div>
     </div>
   )
 }

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.module.scss

@@ -22,7 +22,7 @@
 
 .instructions {
   position: relative;
-  padding: var(--padding-5px) var(--padding-7px);
+  padding: var(--padding-5px) 15px var(--padding-5px) var(--padding-7px);
   border: 1px solid var(--vscode-sideBarSectionHeader-border);
   margin: 0 var(--padding-12px);
   border-radius: var(--border-radius-10px);