Refactor section translation keys and update settings UI styles for consistent grouping and visual layout

- move 'context size warning threshold' into 'prompt field' sub group
- add missing translations to [Fragment]
- rename 'configurations' to 'api configurations' (translations and translation key)
- rename sidebar to sections
- add missing translations to [Fragment]
- don't use 'wywołań', prefer 'zapytań'

Author: robertpiosik

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

@@ -43,7 +43,7 @@ type NavConfigItem = { id: NavItem; label: TranslationKey; is_nested?: boolean }
 const NAV_ITEMS_CONFIG: NavConfigItem[] = [
   {
     id: 'general',
-    label: 'sidebar.general'
+    label: 'sections.general'
   },
   {
     id: 'prompt-field',
@@ -67,11 +67,11 @@ const NAV_ITEMS_CONFIG: NavConfigItem[] = [
   },
   {
     id: 'model-providers',
-    label: 'sidebar.model-providers'
+    label: 'sections.model-providers'
   },
   {
     id: 'configurations',
-    label: 'sidebar.configurations'
+    label: 'sections.api-configurations'
   },
   {
     id: 'defaults',
@@ -281,7 +281,7 @@ export const Home: React.FC<Props> = (props) => {
     <div style={{ height: '100vh' }}>
       <UiLayout
         ref={scroll_container_ref}
-        title={t('sidebar.settings')}
+        title={t('sections.settings')}
         sidebar={NAV_ITEMS_CONFIG.map((item, i) => {
 
           return (

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

@@ -49,7 +49,7 @@ export const ConfigurationsSection = forwardRef<HTMLDivElement, Props>(
     return (
       <UiSection
         ref={ref}
-        title={t('sidebar.configurations')}
+        title={t('sections.api-configurations')}
         subtitle={t('configurations.subtitle')}
         actions={
           <UiButton on_click={() => props.on_add_api_configuration()}>

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

@@ -198,7 +198,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
     return (
       <UiSection
         ref={ref}
-        title={t('sidebar.general')}
+        title={t('sections.general')}
         subtitle={t('general.subtitle')}
       >
         <UiGroup>
@@ -240,25 +240,6 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
               </UiTextButton>
             }
           />
-          <UiItem
-            title={t('general.context-size-warning-threshold.title')}
-            description={t(
-              'general.context-size-warning-threshold.description'
-            )}
-            slot_right={
-              <UiInput
-                type="number"
-                value={context_size_warning_threshold?.toString() ?? ''}
-                on_change={(val) =>
-                  set_context_size_warning_threshold(
-                    val == '' ? undefined : parseInt(val, 10)
-                  )
-                }
-                on_blur={handle_context_size_warning_threshold_blur}
-                max_width={100}
-              />
-            }
-          />
           <UiItem
             title={t('general.check-new-files.title')}
             description={t('general.check-new-files.description')}
@@ -317,6 +298,25 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
 
         <div ref={(el) => props.set_section_ref('prompt-field', el)}>
           <UiGroup title={t('general.prompt-field.title')}>
+            <UiItem
+              title={t('general.context-size-warning-threshold.title')}
+              description={t(
+                'general.context-size-warning-threshold.description'
+              )}
+              slot_right={
+                <UiInput
+                  type="number"
+                  value={context_size_warning_threshold?.toString() ?? ''}
+                  on_change={(val) =>
+                    set_context_size_warning_threshold(
+                      val == '' ? undefined : parseInt(val, 10)
+                    )
+                  }
+                  on_blur={handle_context_size_warning_threshold_blur}
+                  max_width={100}
+                />
+              }
+            />
             <UiItem
               title={t('general.send-with-shift-enter.title')}
               description={t('general.send-with-shift-enter.description')}

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

@@ -1,25 +1,25 @@
 export const configurations = {
   'configurations.subtitle': {
-    en: 'Manage your API configurations.',
-    pl: 'Zarządzaj swoimi konfiguracjami API.',
-    'zh-cn': '管理您的 API 配置。',
-    ja: 'API 設定を管理します。',
-    'zh-tw': '管理您的 API 設定。',
-    de: 'Ihre API-Konfigurationen verwalten.',
-    es: 'Gestionar sus configuraciones de API.',
-    fr: 'Gérer vos configurations API.',
-    'pt-br': 'Gerenciar suas configurações de API.',
-    ru: 'Управление вашими конфигурациями API.',
-    ko: 'API 구성을 관리합니다.',
-    it: 'Gestisci le tue configurazioni API.',
-    tr: 'API yapılandırmalarınızı yönetin.',
-    cs: 'Správa vašich konfigurací API.',
-    hu: 'API konfigurációk kezelése.',
-    bg: 'Управление на вашите API конфигурации.'
+    en: 'Manage configurations used for API calls.',
+    pl: 'Zarządzaj konfiguracjami używanymi do zapytań API.',
+    'zh-cn': '管理用于 API 调用的配置。',
+    ja: 'API 呼び出しに使用する設定を管理します。',
+    'zh-tw': '管理用於 API 呼叫的設定。',
+    de: 'Verwalten Sie die für API-Aufrufe verwendeten Konfigurationen.',
+    es: 'Gestionar las configuraciones utilizadas para las llamadas a la API.',
+    fr: 'Gérer les configurations utilisées pour les appels API.',
+    'pt-br': 'Gerenciar as configurações usadas para chamadas de API.',
+    ru: 'Управление конфигурациями, используемыми для вызовов API.',
+    ko: 'API 호출에 사용되는 구성을 관리합니다.',
+    it: 'Gestisci le configurazioni utilizzate per le chiamate API.',
+    tr: 'API çağrıları için kullanılan yapılandırmaları yönetin.',
+    cs: 'Správa konfigurací používaných pro volání API.',
+    hu: 'Az API hívásokhoz használt konfigurációk kezelése.',
+    bg: 'Управление на конфигурациите, използвани за API извиквания.'
   },
   'configurations.notice': {
     en: 'Configurations define the provider, model and parameters for API calls.',
-    pl: 'Konfiguracje określają dostawcę, model i parametry dla wywołań API.',
+    pl: 'Konfiguracje określają dostawcę, model i parametry dla zapytań API.',
     'zh-cn': '配置定义了 API 调用的提供商、模型和参数。',
     ja: '設定では、API 呼び出しのプロバイダー、モデル、パラメーターを定義します。',
     'zh-tw': '設定定義了 API 呼叫的供應商、模型和參數。',
@@ -344,7 +344,7 @@ export const configurations = {
   },
   'configurations.edit-context-system-instructions.description': {
     en: 'Tone and style instructions for the model when using the Edit Context prompt type with API calls.',
-    pl: 'Instrukcje dotyczące tonu i stylu dla modelu przy użyciu typu promptu Edycji Kontekstu z wywołaniami API.',
+    pl: 'Instrukcje dotyczące tonu i stylu dla modelu przy użyciu typu promptu Edycji Kontekstu z zapytaniami API.',
     'zh-cn': '使用编辑上下文提示类型进行 API 调用时，模型的语气和样式说明。',
     ja: 'API 呼び出しでコンテキスト編集プロンプトタイプを使用する際のモデルのトーンとスタイルの指示。',
     'zh-tw': '使用編輯上下文提示類型進行 API 呼叫時，模型的語氣和樣式說明。',
@@ -436,4 +436,4 @@ export const configurations = {
     hu: 'Hogyan dolgozza fel a modell a hangfelvételt.',
     bg: 'Как моделът трябва да обработва аудио записа.'
   }
-} as const
+} as const

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

@@ -937,21 +937,21 @@ export const general = {
     bg: 'Натисни за говорене'
   },
   'general.voice-input.push-to-talk.description': {
-    en: 'Hold spacebar to talk when using voice input.',
-    pl: 'Przytrzymaj spację, aby mówić podczas wprowadzania głosowego.',
-    'zh-cn': '使用语音输入时按住空格键说话。',
-    ja: '音声入力を使用する際にスペースキーを押し続けて話します。',
-    'zh-tw': '使用語音輸入時按住空白鍵說話。',
-    de: 'Halten Sie die Leertaste gedrückt, um bei der Spracheingabe zu sprechen.',
-    es: 'Mantén presionada la barra espaciadora para hablar al usar la entrada de voz.',
-    fr: "Maintenez la barre d'espace pour parler lors de l'utilisation de la saisie vocale.",
-    'pt-br': 'Segure a barra de espaço para falar ao usar a entrada de voz.',
-    ru: 'Удерживайте пробел, чтобы говорить при использовании голосового ввода.',
-    ko: '음성 입력을 사용할 때 스페이스바를 길게 눌러 말하세요.',
-    it: "Tieni premuta la barra spaziatrice per parlare quando usi l'input vocale.",
-    tr: 'Ses girişini kullanırken konuşmak için boşluk tuşunu basılı tutun.',
-    cs: 'Při používání hlasového vstupu podržte mezerník pro mluvení.',
-    hu: 'Hangbemenet használatakor beszédhez tartsa lenyomva a szóközt.',
-    bg: 'Задръжте интервал, за да говорите при гласово въвеждане.'
+    en: 'Hold spacebar to activate voice input.',
+    pl: 'Przytrzymaj spację, aby aktywować wprowadzanie głosowe.',
+    'zh-cn': '按住空格键激活语音输入。',
+    ja: 'スペースキーを押し続けて音声入力を有効にします。',
+    'zh-tw': '按住空白鍵啟用語音輸入。',
+    de: 'Halten Sie die Leertaste gedrückt, um die Spracheingabe zu aktivieren.',
+    es: 'Mantén presionada la barra espaciadora para activar la entrada de voz.',
+    fr: "Maintenez la barre d'espace pour activer la saisie vocale.",
+    'pt-br': 'Mantenha a barra de espaço pressionada para ativar a entrada de voz.',
+    ru: 'Удерживайте пробел, чтобы активировать голосовой ввод.',
+    ko: '스페이스바를 길게 눌러 음성 입력을 활성화하세요.',
+    it: "Tieni premuta la barra spaziatrice per attivare l'inserimento vocale.",
+    tr: 'Sesle girişi etkinleştirmek için boşluk tuşuna basılı tutun.',
+    cs: 'Podržením mezerníku aktivujete hlasový vstup.',
+    hu: 'Tartsa lenyomva a szóköz billentyűt a hangbemenet aktiválásához.',
+    bg: 'Задръжте интервала, за да активирате гласовото въвеждане.'
   }
 } as const

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

@@ -1,11 +1,11 @@
 import { actions } from './actions'
 import { general } from './general'
 import { model_providers } from './model-providers'
-import { sidebar } from './sidebar'
+import { sections } from './sections'
 import { configurations } from './configurations'
 
 export const translations = {
-  ...sidebar,
+  ...sections,
   ...actions,
   ...general,
   ...model_providers,

…gs/frontend/i18n/translations/sidebar.ts …s/frontend/i18n/translations/sections.tsapps/editor/src/views/settings/frontend/i18n/translations/sidebar.ts renamed to apps/editor/src/views/settings/frontend/i18n/translations/sections.ts apps/editor/src/views/settings/frontend/i18n/translations/sidebar.ts renamed to apps/editor/src/views/settings/frontend/i18n/translations/sections.ts

@@ -1,5 +1,5 @@
-export const sidebar = {
-  'sidebar.settings': {
+export const sections = {
+  'sections.settings': {
     en: 'Settings',
     pl: 'Ustawienia',
     'zh-cn': '设置',
@@ -17,7 +17,7 @@ export const sidebar = {
     hu: 'Beállítások',
     bg: 'Настройки'
   },
-  'sidebar.general': {
+  'sections.general': {
     en: 'General',
     pl: 'Ogólne',
     'zh-cn': '常规',
@@ -35,7 +35,7 @@ export const sidebar = {
     hu: 'Általános',
     bg: 'Общи'
   },
-  'sidebar.model-providers': {
+  'sections.model-providers': {
     en: 'Model Providers',
     pl: 'Dostawcy modeli',
     'zh-cn': '模型提供商',
@@ -53,22 +53,22 @@ export const sidebar = {
     hu: 'Modell Szolgáltatók',
     bg: 'Доставчици на модели'
   },
-  'sidebar.configurations': {
-    en: 'Configurations',
-    pl: 'Konfiguracje',
-    'zh-cn': '配置',
+  'sections.api-configurations': {
+    en: 'API Configurations',
+    pl: 'Konfiguracje API',
+    'zh-cn': 'API 配置',
     ja: '設定',
     'zh-tw': '設定',
-    de: 'Konfigurationen',
-    es: 'Configuraciones',
-    fr: 'Configurations',
-    'pt-br': 'Configurações',
-    ru: 'Конфигурации',
-    ko: '구성',
-    it: 'Configurazioni',
-    tr: 'Yapılandırmalar',
-    cs: 'Konfigurace',
-    hu: 'Konfigurációk',
-    bg: 'Конфигурации'
+    de: 'API-Konfigurationen',
+    es: 'Configuraciones de API',
+    fr: 'Configurations API',
+    'pt-br': 'Configurações de API',
+    ru: 'Конфигурации API',
+    ko: 'API 구성',
+    it: 'Configurazioni API',
+    tr: 'API Yapılandırmaları',
+    cs: 'Konfigurace API',
+    hu: 'API Konfigurációk',
+    bg: 'API Конфигурации'
   }
 } as const

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

@@ -12,13 +12,19 @@
 
 .container {
   color: var(--vscode-sideBarTitle-foreground);
-  
 
   > div {
     border-top: 1px solid var(--cwc-border-color-dimmed);
   }
 
   > div:first-child {
     border-top-width: 0;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  > div:last-child {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
   }
 }

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

@@ -7,16 +7,6 @@
   &--hoverable:hover:not(:has(button:hover, a:hover)) {
     background-color: var(--vscode-toolbar-hoverBackground);
   }
-
-  &:first-child {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-  }
-
-  &:last-child {
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-  }
 }
 
 .main {

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   --row-height: 40px;
+  background-color: var(--cwc-bg-tertiary);
 }
 
 .header {