feat(i18n): add French language support and enhance localization

- Introduced French as a supported language across the application, updating locale files and adding translations for various components.
- Enhanced language handling logic to accommodate French, ensuring proper detection and fallback mechanisms.
- Updated UI elements to include French language options, improving accessibility for French-speaking users.
- Refactored SEO handling to include French in hreflang links, enhancing search engine indexing for multilingual content.
- Added new scripts for managing French translations and ensuring consistency across language files.

frontend/src/components/AppHeader.vue

@@ -43,6 +43,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import apiClient from '@/utils/axios.js';
+import { SUPPORTED_UI_LOCALES } from '@/i18n/supportedLocales.js';
 
 export default {
   name: 'AppHeader',
@@ -54,6 +55,7 @@ export default {
         { value: 'en', nativeLabel: 'English' },
         { value: 'ceb', nativeLabel: 'Binisaya' },
         { value: 'es', nativeLabel: 'Español' },
+        { value: 'fr', nativeLabel: 'Français' },
       ],
     };
   },
@@ -78,8 +80,7 @@ export default {
   },
   methods: {
     async onUiLanguageChange(code) {
-      const supported = ['de', 'en', 'ceb', 'es'];
-      if (!supported.includes(code)) {
+      if (!SUPPORTED_UI_LOCALES.includes(code)) {
         return;
       }
       await this.$store.dispatch('setLanguage', code);

frontend/src/components/SettingsWidget.vue

@@ -86,6 +86,7 @@ import FloatInputWidget from '@/components/form/FloatInputWidget.vue';
 import CheckboxWidget from '@/components/form/CheckboxWidget.vue';
 import MultiselectWidget from '@/components/form/MultiselectWidget.vue';
 import { showApiError, showError } from '@/utils/feedback.js';
+import { SUPPORTED_UI_LOCALES } from '@/i18n/supportedLocales.js';
 
 export default {
     name: "SettingsWidget",
@@ -169,8 +170,7 @@ export default {
                 if (setting?.name === 'language' && Array.isArray(setting.options)) {
                     const opt = setting.options.find((o) => String(o.id) === String(value));
                     const code = opt?.value;
-                    const supported = ['de', 'en', 'ceb', 'es'];
-                    if (code && supported.includes(code)) {
+                    if (code && SUPPORTED_UI_LOCALES.includes(code)) {
                         this.$store.dispatch('setLanguage', code);
                     }
                 }
@@ -181,11 +181,10 @@ export default {
             }
         },
         languagesList() {
-            return [
-                { value: 'en', captionTr: 'settings.personal.language.en' },
-                { value: 'de', captionTr: 'settings.personal.language.de' },
-                { value: 'ceb', captionTr: 'settings.personal.language.ceb' },
-            ];
+            return SUPPORTED_UI_LOCALES.map((code) => ({
+                value: code,
+                captionTr: `settings.personal.language.${code}`,
+            }));
         },
         convertToInt(value) {
             const intValue = parseInt(value, 10);