Refine system instruction translations and add hover state styling for the target switch

- add translations to [Fragment]
- when hovering over target and moving onto dropdown, the target should stay in hovered state

Author: robertpiosik

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

@@ -454,40 +454,39 @@ export const translations = {
     bg: 'Системни инструкции'
   },
   'api.system-instructions.edit-files.title': {
-    en: 'Edit Files',
-    pl: 'Edytuj pliki',
+    en: 'Editing files',
+    pl: 'Edytowanie plików',
     'zh-cn': '编辑文件',
     ja: 'ファイルの編集',
     'zh-tw': '編輯檔案',
     de: 'Dateien bearbeiten',
-    es: 'Editar archivos',
-    fr: 'Modifier les fichiers',
-    'pt-br': 'Editar Arquivos',
-    ru: 'Редактировать файлы',
+    es: 'Edición de archivos',
+    fr: 'Modification de fichiers',
+    'pt-br': 'Edição de arquivos',
+    ru: 'Редактирование файлов',
     ko: '파일 편집',
     it: 'Modifica file',
-    tr: 'Dosyaları Düzenle',
-    cs: 'Upravit soubory',
+    tr: 'Dosyaları düzenleme',
+    cs: 'Úprava souborů',
     hu: 'Fájlok szerkesztése',
     bg: 'Редактиране на файлове'
   },
   'api.system-instructions.edit-files.description': {
-    en: "Tone and style instructions for the model when using the 'Edit Files' prompt type with API calls.",
-    pl: 'Instrukcje dotyczące tonu i stylu dla modelu przy użyciu typu promptu Edycji Plików z zapytaniami API.',
-    'zh-cn': '使用编辑上下文提示类型进行 API 调用时，模型的语气和样式说明。',
-    ja: 'API 呼び出しでコンテキスト編集プロンプトタイプを使用する際のモデルのトーンとスタイルの指示。',
-    'zh-tw': '使用編輯上下文提示類型進行 API 呼叫時，模型的語氣和樣式說明。',
-    de: 'Ton- und Stilanweisungen für das Modell bei Verwendung des Kontextbearbeitungs-Prompt-Typs mit API-Aufrufen.',
-    es: 'Instrucciones de tono y estilo para el modelo al usar el tipo de prompt de Edición de Contexto con llamadas a la API.',
-    fr: "Instructions de ton et de style pour le modèle lors de l'utilisation du type de prompt d'édition de contexte avec les appels API.",
-    'pt-br':
-      'Instruções de tom e estilo para o modelo ao usar o tipo de prompt de Edição de Contexto com chamadas de API.',
-    ru: 'Инструкции по тону и стилю для модели при использовании типа промпта редактирования контекста с вызовами API.',
-    ko: 'API 호출과 함께 컨텍스트 편집 프롬프트 유형을 사용할 때 모델의 어조 및 스타일 지침입니다.',
-    it: 'Istruzioni di tono e stile per il modello quando si usa il tipo di prompt di modifica del contesto con chiamate API.',
-    tr: 'API çağrılarıyla Bağlam Düzenleme prompt türünü kullanırken model için ton ve stil talimatları.',
-    cs: 'Instrukce tónu a stylu pro model při použití typu promptu úpravy kontextu s voláními API.',
-    hu: 'Hangvétel és stílus utasítások a modell számára a kontextus szerkesztés prompt típusának API-hívásokkal történő használatakor.',
-    bg: 'Инструкции за тон и стил към модела при използване на типа промпт за редактиране на контекст с API извиквания.'
+    en: "Tone and style instructions for the model.",
+    pl: 'Instrukcje dotyczące tonu i stylu dla modelu.',
+    'zh-cn': '模型的语气和风格指令。',
+    ja: 'モデルのトーンとスタイルの指示。',
+    'zh-tw': '模型的語氣和風格指令。',
+    de: 'Ton- und Stilanweisungen für das Modell.',
+    es: 'Instrucciones de tono y estilo para el modelo.',
+    fr: 'Instructions de ton et de style pour le modèle.',
+    'pt-br': 'Instruções de tom e estilo para o modelo.',
+    ru: 'Инструкции по тону и стилю для модели.',
+    ko: '모델의 어조 및 스타일 지침.',
+    it: 'Istruzioni di tono e stile per il modello.',
+    tr: 'Model için ton ve stil talimatları.',
+    cs: 'Pokyny pro tón a styl modelu.',
+    hu: 'Hangnem és stílus utasítások a modellhez.',
+    bg: 'Инструкции за тон и стил за модела.'
   }
 } as const

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.module.scss

@@ -223,25 +223,25 @@
       }
     }
 
-      &__target-switch {
-        position: relative;
+    &__target-switch {
+      position: relative;
 
-        &__dropdown-wrapper {
-          position: absolute;
-          bottom: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          padding-bottom: 4px;
-          z-index: 1;
-        }
+      &__dropdown-wrapper {
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        padding-bottom: 4px;
+        z-index: 1;
+      }
 
-        &__dropdown {
-          background-color: var(--cwc-bg-secondary);
-          border-radius: 8px;
-          display: flex;
-          overflow: hidden;
-          backdrop-filter: blur(12px);
-        }
+      &__dropdown {
+        background-color: var(--cwc-bg-secondary);
+        border-radius: 8px;
+        display: flex;
+        overflow: hidden;
+        backdrop-filter: blur(12px);
+      }
 
       &__dropdown-item {
         @include accent-font;
@@ -302,7 +302,8 @@
           font-size: 16px;
         }
 
-        &:hover:enabled {
+        &:hover:enabled,
+        &--hovered {
           background-color: var(--cwc-bg-secondary);
         }
 

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.tsx

@@ -706,7 +706,11 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
                   <button
                     className={cn(
                       styles['footer__right__submit__button'],
-                      styles['footer__right__target-switch__button']
+                      styles['footer__right__target-switch__button'],
+                      {
+                        [styles['footer__right__submit__button--hovered']]:
+                          is_target_dropdown_open
+                      }
                     )}
                   >
                     <span