Merge branch 'develop' into plugins_system

src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss

@@ -16,7 +16,12 @@
     position: absolute;
     left: 0;
     background-color: var(--dark_800_color);
-    padding: 1.2rem;
+    padding: 0 2rem 0 1.6rem;
+    height: 100%;
+    min-width: 8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     &:hover{
         background-color: var(--dark_750_color);

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -16,11 +16,12 @@ export const TranslatorSelectorOpenButton = () => {
         currentSelectedTranslationEngines,
     } = useLanguageSettings();
 
-    const new_labels = [
-        {id: "CTranslate2", label: t("main_page.translator_ctranslate2")}
-    ];
+    // const new_labels = [
+    //     {id: "CTranslate2", label: "AI\nCTranslate2"}
+    // ];
 
-    const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
+    const translation_engines = currentTranslationEngines.data;
+    // const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
 
     const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data];
 
@@ -74,7 +75,7 @@ export const TranslatorSelectorOpenButton = () => {
     return (
         <div className={styles.container}>
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
-                <p className={styles.label}>{t("main_page.translator")}: </p>
+                <p className={styles.label}>{t("main_page.translator")}:</p>
                 <p className={styles.label}>{selected_label}</p>
                 {is_selected_same_language
                     ? <WarningSvg className={styles.warning_svg}/>

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -15,12 +15,13 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
                 <div className={styles.wrapper}>
                     {columns.map((column, column_index) => (
                         <div className={styles.column_wrapper} key={`column_${column_index}`}>
-                            {column.map(({ id, label, is_available }) => (
+                            {column.map(({ id, label, is_available, is_default }) => (
                                 <TranslatorBox
                                     key={id}
                                     id={id}
                                     label={label}
                                     is_available={is_available}
+                                    is_default={is_default}
                                     is_selected={(id === selected_id)}
                                 />
                             ))}
@@ -33,7 +34,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
                             {t("main_page.translator_selector.is_selected_same_language", {
                                 your_language: t("main_page.your_language"),
                                 target_language: t("main_page.target_language"),
-                                translator_ctranslate2: t("main_page.translator_ctranslate2"),
+                                ctranslate2: "CTranslate2",
                             })}
                         </p>
                     </div>
@@ -45,6 +46,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
 };
 
 const TranslatorBox = (props) => {
+    const { t } = useTranslation();
     const { setSelectedTranslationEngines} = useLanguageSettings();
     const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
@@ -53,6 +55,10 @@ const TranslatorBox = (props) => {
         { [styles.is_selected]: props.is_selected },
         { [styles.is_available]: props.is_available }
     );
+    const label_default_class_name = clsx(
+        styles.label_default,
+        { [styles.is_selected]: props.is_selected },
+    );
 
     const selectTranslator = () => {
         if (props.is_selected === false) {
@@ -60,9 +66,11 @@ const TranslatorBox = (props) => {
         }
         updateIsOpenedTranslatorSelector(false);
     };
+
     return (
         <div className={box_class_name} onClick={selectTranslator}>
             <p className={styles.translator_name}>{props.label}</p>
+            {props.is_default && <p className={label_default_class_name}>{t("main_page.translator_label_default")}</p>}
         </div>
     );
 };

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss

@@ -17,26 +17,26 @@
 }
 
 .wrapper {
-    // padding: 1rem;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 1.4rem;
 }
 
 .column_wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 1.2rem;
 }
 
-$box_size: 6.8rem;
+$box_size: 6.2rem;
 .box {
-    width: $box_size;
+    position: relative;
+    width: 9.4rem;
     height: $box_size;
     background-color: var(--dark_875_color);
     display: flex;
@@ -44,17 +44,17 @@ $box_size: 6.8rem;
     align-items: center;
     white-space: pre-wrap;
     text-align: center;
-    border-radius: 0.6rem;
+    border-radius: 0.2rem;
     cursor: pointer;
     &:hover {
         background-color: var(--dark_825_color);
     }
     &:active {
         background-color: var(--dark_900_color);
-        border: 0.1rem solid var(--primary_300_color);
+        outline: 0.1rem solid var(--primary_300_color);
     }
     &.is_selected {
-        border: 0.2rem solid var(--primary_300_color);
+        outline: 0.2rem solid var(--primary_300_color);
     }
     &:not(.is_available) {
         pointer-events: none;
@@ -69,6 +69,22 @@ $box_size: 6.8rem;
     font-size: 1.4rem;
 }
 
+.label_default {
+    background-color: var(--dark_875_color);
+    outline: 0.1rem solid var(--dark_1000_color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.2rem;
+    font-size: 1.2rem;
+    position: absolute;
+    top: -0.8rem;
+    right: -0.8rem;
+    pointer-events: none;
+    &.is_selected {
+        outline: 0.1rem solid var(--primary_300_color);
+
+    }
+}
+
 .is_selected_same_language_wrapper {
     position: absolute;
     bottom: 0;

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss

@@ -78,7 +78,9 @@ $pending_label_color: var(--dark_500_color);
 }
 
 .toggle_control {
-    @include toggle_control_styles;
+    // @include toggle_control_styles;
+    @include toggle_control_styles($toggle_width: 3.6rem, $toggle_height: 1.4rem);
+
     display: flex;
     justify-content: end;
     align-items: center;