feat(localization): expand language support and enhance UI for user settings

- Added support for additional UI locales including Cebuano and Spanish, improving accessibility for a broader user base.
- Updated language selection components in the AppHeader and SettingsWidget to reflect new language options, enhancing user experience.
- Enhanced localization of various UI elements across components, ensuring consistent language representation and improved user engagement.
- Implemented logic to synchronize user language preferences with backend settings, providing a seamless experience when changing languages.

frontend/src/components/SettingsWidget.vue

@@ -103,10 +103,6 @@ export default {
             type: String,
             required: true
         } 
-    }, 
-    data: {
-        settings: [],
-        possibleVisibilities: [],
     },
     computed: {
         ...mapGetters(['user']),
@@ -170,6 +166,14 @@ export default {
                     settingId: settingId,
                     value: value
                 });
+                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)) {
+                        this.$store.dispatch('setLanguage', code);
+                    }
+                }
                 this.fetchSettings();
             } catch (err) {
                 console.error('Error updating setting:', err);
@@ -238,6 +242,7 @@ export default {
     data() {
         return {
             settings: [],
+            possibleVisibilities: [],
             userEmail: "",
             userUsername: "",
         };