Refactor templates component to support custom icons labels and accent colors

- add missing translations to [Pasted text]
- edit/ask templates should not use translations, should say edit/ask for all languages
- templates should have <Templates rendered twice, provide label through templates object
- should use css for [Pasted text]
- a single <Templates component should render all various "templates for.."
- template should show appropriate icon to the left of label for each prompt type
- label in templates should use bangers mixin
- style the opened template like active `packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.tsx`
- `packages/ui/src/components/editor/settings/Templates/Templates.tsx` should receive details such like icons/colors from the outside (to be totally generic)
- remove green color

├── apps
│   └── editor
│       └── src
│           └── views
│               ├── prompt
│               │   └── frontend
│               │       ├── Prompt.module.scss
│               │       └── Prompt.tsx
│               └── settings
│                   ├── backend
│                   │   ├── message-handlers
│                   │   │   ├── handle-create-template.ts
│                   │   │   ├── handle-delete-template.ts
│                   │   │   ├── handle-get-templates.ts
│                   │   │   ├── handle-update-templates.ts
│                   │   │   └── index.ts
│                   │   └── settings-view-provider.ts
│                   ├── frontend
│                   │   ├── Home
│                   │   │   ├── Home.tsx
│                   │   │   └── sections
│                   │   │       └── GeneralSection.tsx
│                   │   ├── Settings.tsx
│                   │   ├── forms
│                   │   │   └── EditTemplateForm
│                   │   │       ├── EditTemplateForm.module.scss
│                   │   │       ├── EditTemplateForm.tsx
│                   │   │       └── index.ts
│                   │   ├── hooks
│                   │   │   └── use-settings.ts
│                   │   └── i18n
│                   │       └── translations
│                   │           ├── edit-template-form.ts
│                   │           └── general.ts
│                   └── types
│                       └── messages.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── prompt
                    │   └── IconAccentButton
                    │       ├── IconAccentButton.module.scss
                    │       ├── IconAccentButton.stories.tsx
                    │       ├── IconAccentButton.tsx
                    │       └── index.ts
                    └── settings
                        └── Templates
                            ├── Templates.module.scss
                            ├── Templates.tsx
                            └── index.ts

Author: robertpiosik

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

@@ -233,13 +233,24 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
             <UiItem
               title={t('general.prompt-field.templates.title')}
               description={t('general.prompt-field.templates.description')}
-              translations={{
-                expand: t('common.expand'),
-                collapse: t('common.collapse')
-              }}
             >
               <Templates
-                templates={props.templates}
+                templates={[
+                  {
+                    key: 'templatesForEditFiles',
+                    label: 'Edit',
+                    icon: 'edit-sparkle',
+                    accent_color: 'blue',
+                    items: props.templates.templatesForEditFiles || []
+                  },
+                  {
+                    key: 'templatesForAskAboutFiles',
+                    label: 'Ask',
+                    icon: 'chat-sparkle',
+                    accent_color: 'orange',
+                    items: props.templates.templatesForAskAboutFiles || []
+                  }
+                ]}
                 on_reorder={(key, templates) =>
                   props.on_update_templates(key, templates)
                 }
@@ -254,15 +265,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
                   ),
                   expand: t('common.expand'),
                   collapse: t('common.collapse'),
-                  add_new: t('action.add-new'),
-                  types: {
-                    templatesForEditFiles: t(
-                      'general.prompt-field.templates.types.templatesForEditFiles'
-                    ),
-                    templatesForAskAboutFiles: t(
-                      'general.prompt-field.templates.types.templatesForAskAboutFiles'
-                    )
-                  }
+                  add_new: t('action.add-new')
                 }}
               />
             </UiItem>

apps/editor/src/views/settings/frontend/i18n/translations/general.ts

@@ -1144,41 +1144,5 @@ export const translations = {
     cs: 'šablon',
     hu: 'sablon',
     bg: 'шаблона'
-  },
-  'general.prompt-field.templates.types.templatesForAskAboutFiles': {
-    en: 'Ask About Files',
-    pl: 'Zapytaj o pliki',
-    'zh-cn': '询问关于文件',
-    ja: 'ファイルについて尋ねる',
-    'zh-tw': '詢問關於文件',
-    de: 'Nach Dateien fragen',
-    es: 'Preguntar sobre archivos',
-    fr: 'Demander à propos des fichiers',
-    'pt-br': 'Perguntar sobre arquivos',
-    ru: 'Спросить о файлах',
-    ko: '파일에 대해 물어보기',
-    it: 'Chiedi sui file',
-    tr: 'Dosyalar Hakkında Sor',
-    cs: 'Zeptat se na soubory',
-    hu: 'Kérdezz fájlokról',
-    bg: 'Попитай за файлове'
-  },
-  'general.prompt-field.templates.types.templatesForEditFiles': {
-    en: 'Edit Files',
-    pl: 'Edytuj pliki',
-    'zh-cn': '编辑文件',
-    ja: 'ファイルを編集',
-    'zh-tw': '編輯文件',
-    de: 'Dateien bearbeiten',
-    es: 'Editar archivos',
-    fr: 'Modifier des fichiers',
-    'pt-br': 'Editar arquivos',
-    ru: 'Редактировать файлы',
-    ko: '파일 편집',
-    it: 'Modifica file',
-    tr: 'Dosyaları Düzenle',
-    cs: 'Upravit soubory',
-    hu: 'Fájlok szerkesztése',
-    bg: 'Редактиране на файлове'
   }
 } as const

packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.module.scss

@@ -56,19 +56,6 @@
       }
     }
 
-    &.button--green {
-      background-color: var(--cwc-bg-green);
-
-      .button__icon,
-      .button__label {
-        color: var(--cwc-text-color-green);
-      }
-
-      &:hover {
-        background-color: var(--cwc-bg-green);
-      }
-    }
-
     &.button--red {
       background-color: var(--cwc-bg-red);
 

packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.stories.tsx

@@ -49,16 +49,6 @@ export const ActiveOrange = () => (
   />
 )
 
-export const ActiveGreen = () => (
-  <IconAccentButton
-    label="Active Green Button"
-    icon="check"
-    is_active
-    active_color="green"
-    on_click={() => console.log('Clicked')}
-  />
-)
-
 export const ActiveRed = () => (
   <IconAccentButton
     label="Active Red Button"

packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.tsx

@@ -8,7 +8,7 @@ export namespace IconAccentButton {
     icon: string
     is_compact?: boolean
     is_active?: boolean
-    active_color?: 'blue' | 'orange' | 'green' | 'red'
+    active_color?: 'blue' | 'orange' | 'red'
     on_click?: () => void
   }
 }
@@ -23,8 +23,6 @@ export const IconAccentButton: FC<IconAccentButton.Props> = (props) => {
           props.is_active && props.active_color == 'blue',
         [styles['button--orange']]:
           props.is_active && props.active_color == 'orange',
-        [styles['button--green']]:
-          props.is_active && props.active_color == 'green',
         [styles['button--red']]: props.is_active && props.active_color == 'red'
       })}
       onClick={props.on_click}

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

@@ -4,12 +4,9 @@
   justify-content: space-between;
   gap: 8px;
   padding: 0 8px;
-  border-radius: 4px;
   font-size: 18px;
   @include accent-font;
-  color: var(--vscode-textLink-foreground);
   height: 32px;
-  transition: background-color 0.1s;
 }
 
 .label {

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

@@ -56,11 +56,10 @@
   }
 
   &__title {
+    @include accent-font;
     margin: 0;
     font-size: 24px;
-    @include accent-font;
     white-space: nowrap;
-    color: var(--vscode-textLink-foreground);
     overflow: hidden;
     text-overflow: ellipsis;
   }

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

@@ -1,7 +1,8 @@
-.groups {
+.container {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
 }
 
 .group {
@@ -17,6 +18,48 @@
     }
   }
 
+  &--accent-blue {
+    border-color: var(--cwc-bg-blue);
+    .group__header {
+      background-color: var(--cwc-bg-blue);
+      .group__icon,
+      .group__label {
+        color: var(--cwc-text-color-blue);
+      }
+      &:hover {
+        background-color: var(--cwc-bg-blue);
+      }
+    }
+  }
+
+  &--accent-orange {
+    border-color: var(--cwc-bg-orange);
+    .group__header {
+      background-color: var(--cwc-bg-orange);
+      .group__icon,
+      .group__label {
+        color: var(--cwc-text-color-orange);
+      }
+      &:hover {
+        background-color: var(--cwc-bg-orange);
+      }
+    }
+  }
+
+  &--accent-red {
+    border-color: var(--cwc-bg-red);
+    .group__header {
+      background-color: var(--cwc-bg-red);
+      .group__icon,
+      .group__label {
+        color: var(--cwc-text-color-red);
+      }
+      &:hover {
+        background-color: var(--cwc-bg-red);
+      }
+    }
+  }
+
   &__header {
     position: relative;
     display: flex;
@@ -32,8 +75,21 @@
   }
 
   &__title {
-    font-size: 13px;
-    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__label {
+    @include accent-font;
+    font-size: 16px;
+    line-height: 1;
+    padding-top: 2px;
+    padding-right: 1px;
+  }
+
+  &__icon {
+    font-size: 14px;
   }
 
   &__content {

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

@@ -11,7 +11,13 @@ export namespace Templates {
   }
 
   export type Props = {
-    templates: Record<string, Template[]>
+    templates: {
+      key: string
+      label: string
+      icon?: string
+      accent_color?: 'blue' | 'orange' | 'red'
+      items: Template[]
+    }[]
     on_reorder: (key: string, templates: Template[]) => void
     on_delete: (key: string, index: number) => void
     on_edit: (key: string, index: number) => void
@@ -23,7 +29,6 @@ export namespace Templates {
       item_text: string
       items_text: string
       items_text_many: string
-      types: Record<string, string>
       expand: string
       collapse: string
       add_new: string
@@ -32,41 +37,49 @@ export namespace Templates {
 }
 
 export const Templates: React.FC<Templates.Props> = (props) => {
-  const [expanded_keys, set_expanded_keys] = useState<Record<string, boolean>>(
-    {}
-  )
+  const [expanded_keys, set_expanded_keys] = useState<string[]>([])
 
   const toggle_expanded = (key: string) => {
-    set_expanded_keys((prev) => ({
-      ...prev,
-      [key]: !prev[key]
-    }))
+    set_expanded_keys((prev) =>
+      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
+    )
   }
 
   return (
-    <div className={styles.groups}>
-      {Object.entries(props.templates).map(([key, templates]) => {
-        const sortable_items = templates.map((t, index) => ({
+    <div className={styles.container}>
+      {props.templates.map(({ key, label, icon, accent_color, items }) => {
+        const is_expanded = expanded_keys.includes(key)
+        const sortable_items = items.map((t, index) => ({
           id: `${index}-${t.name}-${t.template}`,
           original_index: index,
           ...t
         }))
-        const is_expanded = !!expanded_keys[key]
 
         return (
           <div
             key={key}
             className={cn(styles.group, {
               [styles['group--expanded']]: is_expanded,
-              [styles['group--hoverable']]: !is_expanded
+              [styles['group--hoverable']]: !is_expanded,
+              [styles[`group--accent-${accent_color}`]]:
+                accent_color && is_expanded
             })}
           >
             <div
               className={styles.group__header}
               onClick={() => toggle_expanded(key)}
             >
               <div className={styles.group__title}>
-                {props.translations.types[key] || key}
+                {icon && (
+                  <span
+                    className={cn(
+                      'codicon',
+                      `codicon-${icon}`,
+                      styles.group__icon
+                    )}
+                  />
+                )}
+                <span className={styles.group__label}>{label}</span>
               </div>
               <IconButton
                 codicon_icon={is_expanded ? 'chevron-up' : 'chevron-down'}

packages/ui/src/styles/foundation/_mixins.scss

@@ -1,5 +1,5 @@
 @mixin accent-font {
   font-family: 'Bangers', system-ui;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.08em;
 }