Refactor SortableList component to remove header extra support and restore top insertion index handling

- adding template by using the 'add' icon in upper header, creates it at the bottom but should at the top.
- make 'on add' on `packages/ui/src/components/editor/settings/SortableList/SortableList.tsx` a required prop
- remove 'header extra'
- these items should not touch each other [Image]

├── apps
│   └── editor
│       └── src
│           └── views
│               ├── prompt
│               │   └── frontend
│               │       └── Home
│               │           └── Home.tsx
│               └── settings
│                   ├── backend
│                   │   └── message-handlers
│                   │       ├── handle-create-template.ts
│                   │       ├── handle-delete-template.ts
│                   │       ├── handle-get-templates.ts
│                   │       └── handle-update-templates.ts
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.tsx
│                       │   └── sections
│                       │       ├── ApiConfigurationsSection.tsx
│                       │       ├── GeneralSection.tsx
│                       │       ├── ModelProvidersSection.tsx
│                       │       └── WebConfigurationsSection.tsx
│                       ├── Settings.tsx
│                       ├── forms
│                       │   └── EditTemplateForm
│                       │       ├── EditTemplateForm.module.scss
│                       │       ├── EditTemplateForm.tsx
│                       │       └── index.ts
│                       └── i18n
│                           └── translations
│                               └── edit-template-form.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── prompt
                    │   └── Tasks
                    │       ├── Tasks.stories.tsx
                    │       ├── Tasks.tsx
                    │       └── components
                    │           └── TaskGroup.tsx
                    └── settings
                        ├── Notice
                        │   ├── Notice.module.scss
                        │   └── Notice.tsx
                        ├── SortableList
                        │   ├── SortableList.module.scss
                        │   ├── SortableList.stories.tsx
                        │   ├── SortableList.tsx
                        │   └── index.ts
                        └── Templates
                            ├── Templates.module.scss
                            ├── Templates.tsx
                            └── index.ts

Author: robertpiosik

apps/editor/src/views/settings/frontend/Home/sections/WebConfigurationsSection.tsx

@@ -108,10 +108,12 @@ export const WebConfigurationsSection = forwardRef<HTMLDivElement, Props>(
         title={t('chatbots.title')}
         subtitle={t('chatbots.subtitle')}
       >
-        <UiNotice type="info">{t('chatbots.notice')}</UiNotice>
-        {props.web_configurations.length == 0 && (
-          <UiNotice type="warning">{t('chatbots.notice.missing')}</UiNotice>
-        )}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <UiNotice type="info">{t('chatbots.notice')}</UiNotice>
+          {props.web_configurations.length == 0 && (
+            <UiNotice type="warning">{t('chatbots.notice.missing')}</UiNotice>
+          )}
+        </div>
         <div
           ref={(el) =>
             props.set_section_ref(

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

@@ -11,14 +11,14 @@ export const Notice: React.FC<Props> = ({ children, type }) => {
   return (
     <div
       className={cn(styles.container, {
-        [styles['container--info']]: type === 'info',
-        [styles['container--warning']]: type === 'warning'
+        [styles['container--info']]: type == 'info',
+        [styles['container--warning']]: type == 'warning'
       })}
     >
       <span
         className={cn(
           'codicon',
-          type === 'info' ? 'codicon-info' : 'codicon-warning'
+          type == 'info' ? 'codicon-info' : 'codicon-warning'
         )}
       />
       <span>{children}</span>

packages/ui/src/components/editor/settings/SortableList/SortableList.stories.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react'
 import { SortableList } from './SortableList'
 import { Radio } from '../../common/Radio'
 import { IconButton } from '../../common/IconButton'
-import { TextButton } from '../../common/TextButton'
 
 export default {
   component: SortableList
@@ -43,18 +42,13 @@ const initial_configurations: Configuration[] = [
 
 export const Configurations = () => {
   const [configurations, set_configurations] = useState(initial_configurations)
-  const has_default = configurations.some((c) => c.is_default)
 
   const handle_set_default = (id: string) => {
     set_configurations(
       configurations.map((c) => ({ ...c, is_default: c.id == id }))
     )
   }
 
-  const handle_unset_default = () => {
-    set_configurations(configurations.map((c) => ({ ...c, is_default: false })))
-  }
-
   return (
     <div
       style={{
@@ -74,14 +68,6 @@ export const Configurations = () => {
           item_text: 'config',
           items_text: 'configs'
         }}
-        header_extra={
-          has_default ? (
-            <>
-              <span>·</span>
-              <TextButton on_click={handle_unset_default}>Unset</TextButton>
-            </>
-          ) : undefined
-        }
         render_content={(config) => (
           <>
             <Radio

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

@@ -18,11 +18,10 @@ export namespace SortableList {
   export type Props<T extends Item> = {
     items: T[]
     on_reorder: (items: T[]) => void
-    on_add?: (params?: { insertion_index?: number }) => void
+    on_add: (params?: { insertion_index?: number }) => void
     hide_add_button?: boolean
     render_content: (item: T, index: number) => React.ReactNode
     render_actions?: (item: T, index: number) => React.ReactNode
-    header_extra?: React.ReactNode
     translations: Translations
   }
 }
@@ -67,13 +66,14 @@ export function SortableList<T extends SortableList.Item>(
             return props.translations.items_text
           })()}
         </div>
-        {props.header_extra}
       </div>
-      {!props.hide_add_button && props.on_add && (
+      {!props.hide_add_button && (
         <IconButton
           codicon_icon="add"
           title={props.translations.add_title}
-          on_click={() => props.on_add?.()}
+          on_click={() =>
+            props.on_add(is_top ? { insertion_index: 0 } : undefined)
+          }
         />
       )}
     </div>