Add search functionality for vocabulary in VocabController and VocabService

- Implemented a new searchVocabs method in VocabService to allow users to search for vocabulary based on learning and mother tongue terms.
- Updated VocabController to include the searchVocabs method wrapped with user authentication.
- Added a new route in vocabRouter for searching vocabulary by language ID.
- Enhanced VocabChapterView and VocabLanguageView components to include a button for opening the search dialog.
- Added translations for search-related terms in both German and English locales, improving user accessibility.

frontend/src/views/social/VocabChapterView.vue

@@ -9,6 +9,7 @@
         <div class="row">
           <button @click="back">{{ $t('general.back') }}</button>
           <button v-if="vocabs.length" @click="openPractice">{{ $t('socialnetwork.vocab.practice.open') }}</button>
+          <button @click="openSearch">{{ $t('socialnetwork.vocab.search.open') }}</button>
         </div>
 
         <div class="row" v-if="chapter.isOwner">
@@ -50,21 +51,24 @@
   </div>
 
   <VocabPracticeDialog ref="practiceDialog" />
+  <VocabSearchDialog ref="searchDialog" />
 </template>
 
 <script>
 import apiClient from '@/utils/axios.js';
 import VocabPracticeDialog from '@/dialogues/socialnetwork/VocabPracticeDialog.vue';
+import VocabSearchDialog from '@/dialogues/socialnetwork/VocabSearchDialog.vue';
 
 export default {
   name: 'VocabChapterView',
-  components: { VocabPracticeDialog },
+  components: { VocabPracticeDialog, VocabSearchDialog },
   data() {
     return {
       loading: false,
       saving: false,
       practiceOpen: false,
       chapter: null,
+      languageName: '',
       vocabs: [],
       learning: '',
       reference: '',
@@ -89,12 +93,24 @@ export default {
         },
       });
     },
+    openSearch() {
+      this.$refs.searchDialog?.open?.({
+        languageId: this.$route.params.languageId,
+        languageName: this.languageName || '',
+      });
+    },
     async load() {
       this.loading = true;
       try {
         const res = await apiClient.get(`/api/vocab/chapters/${this.$route.params.chapterId}/vocabs`);
         this.chapter = res.data?.chapter || null;
         this.vocabs = res.data?.vocabs || [];
+        try {
+          const langRes = await apiClient.get(`/api/vocab/languages/${this.$route.params.languageId}`);
+          this.languageName = langRes.data?.name || '';
+        } catch (_) {
+          this.languageName = '';
+        }
       } catch (e) {
         console.error('Load chapter vocabs failed:', e);
         this.chapter = null;

frontend/src/views/social/VocabLanguageView.vue

@@ -17,6 +17,7 @@
 
       <div class="row">
         <button @click="goSubscribe">{{ $t('socialnetwork.vocab.subscribeByCode') }}</button>
+        <button @click="openSearch">{{ $t('socialnetwork.vocab.search.open') }}</button>
       </div>
 
       <hr />
@@ -48,13 +49,17 @@
       </div>
     </div>
   </div>
+
+  <VocabSearchDialog ref="searchDialog" />
 </template>
 
 <script>
 import apiClient from '@/utils/axios.js';
+import VocabSearchDialog from '@/dialogues/socialnetwork/VocabSearchDialog.vue';
 
 export default {
   name: 'VocabLanguageView',
+  components: { VocabSearchDialog },
   data() {
     return {
       loading: false,
@@ -69,6 +74,12 @@ export default {
     goSubscribe() {
       this.$router.push('/socialnetwork/vocab/subscribe');
     },
+    openSearch() {
+      this.$refs.searchDialog?.open?.({
+        languageId: this.$route.params.languageId,
+        languageName: this.language?.name || '',
+      });
+    },
     openChapter(chapterId) {
       this.$router.push(`/socialnetwork/vocab/${this.$route.params.languageId}/chapters/${chapterId}`);
     },