feat(translation): implement reactive translation system with context and hooks

src/components/Elements/MainModal/backend/Tab.jsx

@@ -1,8 +1,10 @@
 import variables from 'config/variables';
 import { memo, useState, useEffect } from 'react';
+import { useTranslation } from 'contexts/TranslationContext';
 import { getIconComponent, DIVIDER_LABELS } from '../constants/tabConfig';
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
+  const { languagecode } = useTranslation();
   const [isExperimental, setIsExperimental] = useState(true);
 
   useEffect(() => {

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -1,5 +1,6 @@
 import variables from 'config/variables';
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'contexts/TranslationContext';
 import Tab from './Tab';
 import ReminderInfo from '../components/ReminderInfo';
 import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
@@ -15,6 +16,8 @@ const Tabs = ({
   navigationTrigger,
   sections,
 }) => {
+  const { languagecode } = useTranslation();
+
   // Find initial section from deep link if available
   const getInitialSection = () => {
     if (deepLinkData?.section && sections) {
@@ -58,6 +61,17 @@ const Tabs = ({
     }
   }, []);
 
+  // Update labels when language changes
+  useEffect(() => {
+    if (sections && currentName) {
+      const section = sections.find((s) => s.name === currentName);
+      if (section) {
+        const newLabel = variables.getMessage(section.label);
+        setCurrentTab(newLabel);
+      }
+    }
+  }, [languagecode]);
+
   // Handle navigation trigger for settings sections (popstate)
   useEffect(() => {
     if (navigationTrigger?.type === 'settings-section' && sections) {

src/components/Elements/MainModal/components/ModalTopBar.jsx

@@ -1,4 +1,5 @@
 import variables from 'config/variables';
+import { useTranslation } from 'contexts/TranslationContext';
 import { MdClose, MdChevronRight, MdArrowBack, MdArrowForward } from 'react-icons/md';
 import { Tooltip, Button } from 'components/Elements';
 import { NAVBAR_BUTTONS } from '../constants/tabConfig';
@@ -31,9 +32,11 @@ function ModalTopBar({
   canGoBack,
   canGoForward,
 }) {
-  // Get the current tab label
+  const { languagecode } = useTranslation();
+
+  // Get the current tab label (uses languagecode to re-evaluate on language change)
   const currentTabButton = NAVBAR_BUTTONS.find(({ tab }) => tab === currentTab);
-  const currentTabLabel = currentTabButton
+  const currentTabLabel = languagecode && currentTabButton
     ? variables.getMessage(currentTabButton.messageKey)
     : '';
 

src/components/Form/Settings/Radio/Radio.jsx

@@ -26,6 +26,20 @@ const Radio = memo((props) => {
       if (localStorage.getItem('tabName') === variables.getMessage('tabname')) {
         localStorage.setItem('tabName', translations[newValue.replace('-', '_')].tabname);
       }
+
+      // Emit language change event for instant update
+      localStorage.setItem(props.name, newValue);
+      EventBus.emit('languageChange', { language: newValue });
+      setValue(newValue);
+
+      variables.stats.postEvent('setting', `${props.name} from ${value} to ${newValue}`);
+
+      if (props.onChange) {
+        props.onChange(newValue);
+      }
+
+      EventBus.emit('refresh', props.category);
+      return;
     }
 
     localStorage.setItem(props.name, newValue);