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/views/social/SearchView.vue

@@ -2,9 +2,9 @@
     <div class="search-view">
         <section class="search-hero surface-card">
             <div>
-                <span class="search-kicker">Community-Suche</span>
+                <span class="search-kicker">{{ $t('socialnetwork.usersearch.kicker') }}</span>
                 <h2>{{ $t('socialnetwork.usersearch.title') }}</h2>
-                <p>Mit Namen, Alter und Geschlecht gezielt passende Kontakte in der Community finden.</p>
+                <p>{{ $t('socialnetwork.usersearch.intro') }}</p>
             </div>
         </section>
 
@@ -22,7 +22,7 @@
                         <div class="age-range">
                             <input type="number" id="ageFrom" v-model="searchCriteria.ageFrom" :min="14" :max="150"
                                 :placeholder="$t('socialnetwork.usersearch.age_from')" class="age-input" />
-                            <span class="age-separator">bis</span>
+                            <span class="age-separator">{{ $t('socialnetwork.usersearch.ageSeparator') }}</span>
                             <input type="number" id="ageTo" v-model="searchCriteria.ageTo" :min="14" :max="150"
                                 :placeholder="$t('socialnetwork.usersearch.age_to')" class="age-input" />
                         </div>
@@ -45,7 +45,7 @@
         <section class="search-results surface-card" v-if="searchResults.length">
             <div class="results-header">
                 <h3>{{ $t('socialnetwork.usersearch.results_title') }}</h3>
-                <span class="results-count">{{ searchResults.length }} Treffer</span>
+                <span class="results-count">{{ $t('socialnetwork.usersearch.resultsCount', { count: searchResults.length }) }}</span>
             </div>
             <div class="result-cards">
                 <article v-for="result in searchResults" :key="result.id" class="result-card">
@@ -57,7 +57,7 @@
                         </div>
                     </div>
                     <button type="button" class="button-secondary" @click="openUserProfile(result.id)">
-                        Profil öffnen
+                        {{ $t('socialnetwork.usersearch.openProfile') }}
                     </button>
                 </article>
             </div>