Add support for user's native language in VocabCourseListView

- Introduced a new option for selecting the user's native language in the course selection dropdown.
- Implemented logic to load the user's native language based on the UI language and map it to the corresponding language ID.
- Updated internationalization files to include strings for the user's native language in both German and English, enhancing the user experience.

frontend/src/views/social/VocabCourseListView.vue

@@ -30,6 +30,7 @@
           <label>{{ $t('socialnetwork.vocab.courses.nativeLanguage') }}:</label>
           <select v-model="selectedNativeLanguageId" @change="loadAllCourses">
             <option value="">{{ $t('socialnetwork.vocab.courses.allNativeLanguages') }}</option>
+            <option v-if="myNativeLanguageId" value="my">{{ $t('socialnetwork.vocab.courses.myNativeLanguage') }}</option>
             <option value="null">{{ $t('socialnetwork.vocab.courses.forAllLanguages') }}</option>
             <option v-for="lang in languages" :key="lang.id" :value="lang.id">{{ lang.name }}</option>
           </select>
@@ -140,6 +141,7 @@ export default {
       loading: false,
       courses: [],
       languages: [],
+      myNativeLanguageId: null,
       showCreateDialog: false,
       showShareCodeDialog: false,
       searchTerm: '',
@@ -158,17 +160,44 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['user']),
+    ...mapGetters(['user', 'language']),
   },
   methods: {
     async loadLanguages() {
       try {
         const res = await apiClient.get('/api/vocab/languages');
         this.languages = res.data?.languages || [];
+        
+        // Lade die Muttersprache des Benutzers
+        await this.loadMyNativeLanguage();
       } catch (e) {
         console.error('Konnte Sprachen nicht laden:', e);
       }
     },
+    async loadMyNativeLanguage() {
+      try {
+        // Mappe UI-Sprache zu vocab_language Name
+        const languageMap = {
+          'de': 'Deutsch',
+          'en': 'Englisch',
+          'es': 'Spanisch',
+          'fr': 'Französisch',
+          'it': 'Italienisch',
+          'pt': 'Portugiesisch'
+        };
+        
+        const uiLanguage = this.language || 'de';
+        const nativeLanguageName = languageMap[uiLanguage] || 'Deutsch';
+        
+        // Finde die entsprechende vocab_language ID
+        const nativeLang = this.languages.find(lang => lang.name === nativeLanguageName);
+        if (nativeLang) {
+          this.myNativeLanguageId = nativeLang.id;
+        }
+      } catch (e) {
+        console.error('Konnte Muttersprache nicht laden:', e);
+      }
+    },
     async loadAllCourses() {
       this.loading = true;
       try {
@@ -182,11 +211,15 @@ export default {
         // Nur nativeLanguageId senden, wenn explizit eine Sprache ausgewählt wurde
         // Leer bedeutet: zeige alle Kurse
         // "null" bedeutet: zeige nur Kurse ohne Muttersprache
+        // "my" bedeutet: verwende die Muttersprache des Benutzers
         // Eine ID bedeutet: zeige nur Kurse für diese Muttersprache
         if (this.selectedNativeLanguageId !== '') {
           if (this.selectedNativeLanguageId === 'null') {
             // Explizit Kurse ohne Muttersprache anfordern
             params.nativeLanguageId = null;
+          } else if (this.selectedNativeLanguageId === 'my') {
+            // Verwende die Muttersprache des Benutzers
+            params.nativeLanguageId = this.myNativeLanguageId;
           } else {
             // Spezifische Muttersprache
             params.nativeLanguageId = this.selectedNativeLanguageId;