Chore/v2/translation fixes (#5011)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/core/components/shared/AppConfigModal.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
 import { useNavigate, useLocation } from 'react-router-dom';
 import LocalIcon from '@app/components/shared/LocalIcon';
-import { createConfigNavSections } from '@app/components/shared/config/configNavSections';
+import { useConfigNavSections } from '@app/components/shared/config/configNavSections';
 import { NavKey, VALID_NAV_KEYS } from '@app/components/shared/config/types';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
 import '@app/components/shared/AppConfigModal.css';
@@ -74,13 +74,10 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
   const loginEnabled = config?.enableLogin ?? false;
 
   // Left navigation structure and icons
-  const configNavSections = useMemo(() =>
-    createConfigNavSections(
-      isAdmin,
-      runningEE,
-      loginEnabled
-    ),
-    [isAdmin, runningEE, loginEnabled]
+  const configNavSections = useConfigNavSections(
+    isAdmin,
+    runningEE,
+    loginEnabled
   );
 
   const activeLabel = useMemo(() => {

frontend/src/core/components/shared/config/configNavSections.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { NavKey } from '@app/components/shared/config/types';
 import HotkeysSection from '@app/components/shared/config/configSections/HotkeysSection';
 import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
@@ -27,11 +28,43 @@ export interface ConfigColors {
   headerBorder: string;
 }
 
+export const useConfigNavSections = (
+  _isAdmin: boolean = false,
+  _runningEE: boolean = false,
+  _loginEnabled: boolean = false
+): ConfigNavSection[] => {
+  const { t } = useTranslation();
+
+  const sections: ConfigNavSection[] = [
+    {
+      title: t('settings.preferences.title', 'Preferences'),
+      items: [
+        {
+          key: 'general',
+          label: t('settings.general.title', 'General'),
+          icon: 'settings-rounded',
+          component: <GeneralSection />
+        },
+        {
+          key: 'hotkeys',
+          label: t('settings.hotkeys.title', 'Keyboard Shortcuts'),
+          icon: 'keyboard-rounded',
+          component: <HotkeysSection />
+        },
+      ],
+    },
+  ];
+
+  return sections;
+};
+
+// Deprecated: Use useConfigNavSections hook instead
 export const createConfigNavSections = (
   _isAdmin: boolean = false,
   _runningEE: boolean = false,
   _loginEnabled: boolean = false
 ): ConfigNavSection[] => {
+  console.warn('createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.');
   const sections: ConfigNavSection[] = [
     {
       title: 'Preferences',

frontend/src/core/components/shared/config/configSections/HotkeysSection.tsx

@@ -73,10 +73,7 @@ const HotkeysSection: React.FC = () => {
       const binding = eventToBinding(event as KeyboardEvent);
       if (!binding) {
         const osKey = isMac ? 'mac' : 'windows';
-        const fallbackText = isMac
-          ? 'Include ⌘ (Command), ⌥ (Option), or another modifier in your shortcut.'
-          : 'Include Ctrl, Alt, or another modifier in your shortcut.';
-        setError(t(`settings.hotkeys.errorModifier.${osKey}`, fallbackText));
+        setError(t(`settings.hotkeys.errorModifier.${osKey}`));
         return;
       }
 
@@ -112,9 +109,9 @@ const HotkeysSection: React.FC = () => {
   return (
     <Stack gap="lg">
       <div>
-        <Text fw={600} size="lg">Keyboard Shortcuts</Text>
+        <Text fw={600} size="lg">{t('settings.hotkeys.title', 'Keyboard Shortcuts')}</Text>
         <Text size="sm" c="dimmed">
-          Customize keyboard shortcuts for quick tool access. Click "Change shortcut" and press a new key combination. Press Esc to cancel.
+          {t('settings.hotkeys.description', 'Customize keyboard shortcuts for quick tool access. Click "Change shortcut" and press a new key combination. Press Esc to cancel.')}
         </Text>
       </div>
 

frontend/src/core/components/shared/config/configSections/Overview.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Stack, Text, Code, Group, Badge, Alert, Loader } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
 import { OverviewHeader } from '@app/components/shared/config/OverviewHeader';
 
 const Overview: React.FC = () => {
+  const { t } = useTranslation();
   const { config, loading, error } = useAppConfig();
 
   const renderConfigSection = (title: string, data: any) => {
@@ -58,14 +60,14 @@ const Overview: React.FC = () => {
     return (
       <Stack align="center" py="md">
         <Loader size="sm" />
-        <Text size="sm" c="dimmed">Loading configuration...</Text>
+        <Text size="sm" c="dimmed">{t('config.overview.loading', 'Loading configuration...')}</Text>
       </Stack>
     );
   }
 
   if (error) {
     return (
-      <Alert color="red" title="Error">
+      <Alert color="red" title={t('config.overview.error', 'Error')}>
         {error}
       </Alert>
     );
@@ -77,13 +79,13 @@ const Overview: React.FC = () => {
 
       {config && (
         <>
-          {renderConfigSection('Basic Configuration', basicConfig)}
-          {renderConfigSection('Security Configuration', securityConfig)}
-          {renderConfigSection('System Configuration', systemConfig)}
-          {renderConfigSection('Integration Configuration', integrationConfig)}
+          {renderConfigSection(t('config.overview.sections.basic', 'Basic Configuration'), basicConfig)}
+          {renderConfigSection(t('config.overview.sections.security', 'Security Configuration'), securityConfig)}
+          {renderConfigSection(t('config.overview.sections.system', 'System Configuration'), systemConfig)}
+          {renderConfigSection(t('config.overview.sections.integration', 'Integration Configuration'), integrationConfig)}
 
           {config.error && (
-            <Alert color="yellow" title="Configuration Warning">
+            <Alert color="yellow" title={t('config.overview.warning', 'Configuration Warning')}>
               {config.error}
             </Alert>
           )}