feat(VocabLessonView): enhance vocab trainer visibility for cross-chapter hard vocabulary

- Updated the VocabLessonView to display the vocab trainer section when there are cross-chapter hard vocabulary items, improving user engagement and accessibility to training options.
- Adjusted the button rendering logic to ensure that the hard vocabulary trainer is available when applicable, enhancing the overall learning experience.

frontend/src/views/social/VocabLessonView.vue

@@ -219,7 +219,7 @@
           </div>
 
           <!-- Vokabeltrainer -->
-          <div v-if="trainableLessonVocab.length > 0" class="vocab-trainer-section">
+          <div v-if="trainableLessonVocab.length > 0 || hasCrossChapterHardVocab" class="vocab-trainer-section">
             <h4>{{ $t('socialnetwork.vocab.courses.vocabTrainer') }}</h4>
             <div v-if="hasPreviousVocab" class="review-priority-note">
               <strong>{{ $t('socialnetwork.vocab.courses.reviewPriorityTitle') }}</strong>
@@ -235,15 +235,15 @@
                 <button @click="startVocabTrainer" class="btn-start-trainer">
                   {{ hasPreviousVocab ? $t('socialnetwork.vocab.courses.startLesson') : $t('socialnetwork.vocab.courses.startVocabTrainer') }}
                 </button>
-                <button
-                  v-if="hasCrossChapterHardVocab"
-                  @click="startHardVocabTrainer"
-                  class="btn-start-trainer button-secondary"
-                >
-                  {{ $t('socialnetwork.vocab.courses.startHardVocabTrainer', { count: crossChapterHardVocab.length }) }}
-                </button>
               </template>
               <p v-else class="vocab-trainer-locked-hint">{{ $t('socialnetwork.vocab.courses.vocabTrainerLockedHint') }}</p>
+              <button
+                v-if="hasCrossChapterHardVocab"
+                @click="startHardVocabTrainer"
+                class="btn-start-trainer button-secondary"
+              >
+                {{ $t('socialnetwork.vocab.courses.startHardVocabTrainer', { count: crossChapterHardVocab.length }) }}
+              </button>
             </div>
             <div v-else class="vocab-trainer-active">
               <div class="vocab-trainer-stats">