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/dialogues/socialnetwork/UserProfileDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <DialogWidget ref="dialog" :title="$t('socialnetwork.profile.pretitle')" :isTitleTranslated="isTitleTranslated"
-        :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog" height="75%"
+        :show-close="true" :buttons="profileDialogButtons" :modal="false" @close="closeDialog" height="75%"
         name="UserProfileDialog" display="flex">
         <div class="activities">
             <span>{{ $t(`socialnetwork.friendship.state.${friendshipState}`) }}</span>
@@ -11,7 +11,7 @@
         <div class="profile-content">
             <div>
                 <ul class="tab-list">
-                    <li v-for="tab in tabs" :key="tab.name" :class="{ active: activeTab === tab.name }"
+                    <li v-for="tab in profileTabs" :key="tab.name" :class="{ active: activeTab === tab.name }"
                         @click="selectTab(tab.name)">
                         {{ tab.label }}
                     </li>
@@ -42,7 +42,7 @@
                     </ul>
                     <ul v-if="images.length > 0" class="image-list">
                         <li v-for="image in images" :key="image.id" @click="openImageDialog(image)">
-                            <img :src="image.url || image.placeholder" alt="Loading..." />
+                            <img :src="image.url || image.placeholder" :alt="$t('socialnetwork.gallery.imageLoadingAlt')" />
                             <p>{{ image.title }}</p>
                         </li>
                     </ul>
@@ -60,7 +60,7 @@
                                     }}</label>
                                 <input type="file" @change="onFileChange" accept="image/*" />
                                 <div v-if="imagePreview" class="image-preview">
-                                    <img :src="imagePreview" alt="Image Preview"
+                                    <img :src="imagePreview" :alt="$t('socialnetwork.gallery.imagePreviewAlt')"
                                         style="max-width: 100px; max-height: 100px;" />
                                 </div>
                                 <EditorContent :editor="editor" class="editor" />
@@ -73,7 +73,7 @@
                     </div>
                     <div v-else class="guestbook-entries">
                         <div v-for="entry in guestbookEntries" :key="entry.id" class="guestbook-entry">
-                            <img v-if="entry.image" :src="entry.image.url" alt="Entry Image"
+                            <img v-if="entry.image" :src="entry.image.url" :alt="$t('socialnetwork.profile.guestbook.entryImageAlt')"
                                 style="max-width: 400px; max-height: 400px;" />
                             <p v-html="sanitizedContent(entry)"></p>
                             <div class="entry-info">
@@ -117,13 +117,23 @@ export default {
     },
     computed: {
         ...mapGetters(['user']),
+        profileDialogButtons() {
+            return [{ text: this.$t('general.ok'), action: 'close' }];
+        },
         canOpenEroticPictures() {
             return Boolean(
                 this.userProfile?.username &&
                 this.user?.username &&
                 this.userProfile.username !== this.user.username
             );
-        }
+        },
+        profileTabs() {
+            return [
+                { name: 'general', label: this.$t('socialnetwork.profile.tab.general') },
+                { name: 'images', label: this.$t('socialnetwork.profile.tab.images') },
+                { name: 'guestbook', label: this.$t('socialnetwork.profile.tab.guestbook') },
+            ];
+        },
     },
     data() {
         return {
@@ -141,11 +151,6 @@ export default {
             selectedImage: null,
             currentPage: 1,
             totalPages: 1,
-            tabs: [
-                { name: 'general', label: this.$t('socialnetwork.profile.tab.general') },
-                { name: 'images', label: this.$t('socialnetwork.profile.tab.images') },
-                { name: 'guestbook', label: this.$t('socialnetwork.profile.tab.guestbook') }
-            ],
             apiKey: import.meta.env.VITE_TINYMCE_API_KEY,
             editor: null,
             hasSendFriendshipRequest: false,