[Update] Config Page: VR Tab. Add section show only translated messages.

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -7,12 +7,19 @@ import { Slider } from "../_components/";
 import {
     RadioButtonContainer,
     SwitchBoxContainer,
+    CheckboxContainer,
 } from "../_templates/Templates";
+
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 import {
     useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
 } from "@logics_configs";
 
 export const Vr = () => {
@@ -56,6 +63,7 @@ export const Vr = () => {
                     />
                 )}
             </div>
+            <CommonSettingsContainer />
         </div>
     );
 };
@@ -311,4 +319,21 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
             </div>
         </div>
     );
+};
+
+
+const CommonSettingsContainer = () => {
+    const { t } = useTranslation();
+    const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+
+    return (
+        <div className={styles.common_container}>
+            <SectionLabelComponent label="Common Settings" />
+            <CheckboxContainer
+                label={t("overlay_settings.overlay_show_only_translated_messages.label")}
+                variable={currentOverlayShowOnlyTranslatedMessages}
+                toggleFunction={toggleOverlayShowOnlyTranslatedMessages}
+            />
+        </div>
+    );
 };

src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss

@@ -6,6 +6,7 @@
     position: relative;
     padding: 2rem;
     width: 100%;
+    gap: 4rem;
 }
 
 .wrapper {
@@ -187,4 +188,12 @@
     position: absolute;
     font-size: 1.6rem;
     width: 100%;
+}
+
+.common_container {
+    width: 100%;
+}
+
+.common_label {
+    font-size: 1.4rem;
 }