From dacf6cb7f8fc2bc7018cc9c26c551a8984e52c83 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 19 Jan 2026 19:43:59 +0100
Subject: [PATCH] Add vocabulary information text and improve conditional
 rendering in VocabLessonView

- Introduced a new translation key for vocabulary information text in both English and German, providing context for users on vocabulary usage in exercises.
- Enhanced conditional rendering in VocabLessonView to ensure lesson data is properly checked before displaying cultural notes and vocabulary lists, improving robustness and user experience.
---
 frontend/src/i18n/locales/de/socialnetwork.json | 1 +
 frontend/src/i18n/locales/en/socialnetwork.json | 1 +
 frontend/src/views/social/VocabLessonView.vue   | 9 +++++----
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/i18n/locales/de/socialnetwork.json b/frontend/src/i18n/locales/de/socialnetwork.json
index 0ac6476..d5b0949 100644
--- a/frontend/src/i18n/locales/de/socialnetwork.json
+++ b/frontend/src/i18n/locales/de/socialnetwork.json
@@ -372,6 +372,7 @@
                 "learnVocabulary": "Vokabeln lernen",
                 "culturalNotes": "Kulturelle Notizen",
                 "importantVocab": "Wichtige Begriffe",
+                "vocabInfoText": "Diese Begriffe werden in den Übungen verwendet. Lerne sie hier passiv, bevor du zu den interaktiven Übungen wechselst.",
                 "noVocabInfo": "Lies die Beschreibung oben und die Erklärungen in den Übungen, um die wichtigsten Begriffe zu lernen.",
                 "startExercises": "Zu den Übungen",
                 "correctAnswer": "Richtige Antwort",
diff --git a/frontend/src/i18n/locales/en/socialnetwork.json b/frontend/src/i18n/locales/en/socialnetwork.json
index f4d221b..72a2dcb 100644
--- a/frontend/src/i18n/locales/en/socialnetwork.json
+++ b/frontend/src/i18n/locales/en/socialnetwork.json
@@ -372,6 +372,7 @@
                 "learnVocabulary": "Learn Vocabulary",
                 "culturalNotes": "Cultural Notes",
                 "importantVocab": "Important Vocabulary",
+                "vocabInfoText": "These terms are used in the exercises. Learn them here passively before switching to the interactive exercises.",
                 "noVocabInfo": "Read the description above and the explanations in the exercises to learn the most important terms.",
                 "startExercises": "Start Exercises",
                 "correctAnswer": "Correct Answer",
diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 7b781c5..3af244e 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -33,14 +33,15 @@
         <h3>{{ $t('socialnetwork.vocab.courses.learnVocabulary') }}</h3>
         
         <!-- Kulturelle Notizen -->
-        <div v-if="lesson.culturalNotes" class="cultural-notes">
+        <div v-if="lesson && lesson.culturalNotes" class="cultural-notes">
           <h4>{{ $t('socialnetwork.vocab.courses.culturalNotes') }}</h4>
           <p>{{ lesson.culturalNotes }}</p>
         </div>
 
-        <!-- Wichtige Begriffe aus den Übungen -->
-        <div v-if="importantVocab && importantVocab.length > 0" class="vocab-list">
+        <!-- Wichtige Begriffe aus den Übungen (nur Anzeige, keine Interaktion) -->
+        <div v-if="lesson && importantVocab && importantVocab.length > 0" class="vocab-list">
           <h4>{{ $t('socialnetwork.vocab.courses.importantVocab') }}</h4>
+          <p class="vocab-info-text">{{ $t('socialnetwork.vocab.courses.vocabInfoText') }}</p>
           <div class="vocab-items">
             <div v-for="(vocab, index) in importantVocab" :key="index" class="vocab-item">
               <strong>{{ vocab.learning }}</strong>
@@ -51,7 +52,7 @@
         </div>
 
         <!-- Hinweis wenn keine Vokabeln vorhanden -->
-        <div v-else class="no-vocab-info">
+        <div v-else-if="lesson" class="no-vocab-info">
           <p>{{ $t('socialnetwork.vocab.courses.noVocabInfo') }}</p>
         </div>