From 8f6f06caf013b739eb1a322840d3f9da2bb33b3c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 7 Apr 2026 10:07:54 +0200
Subject: [PATCH] feat(vocab): enhance vocabulary label handling in
 VocabLessonView

- Refactored VocabLessonView to utilize computed properties for vocabulary preparation labels, improving localization and maintainability.
- Updated the logic for target and gloss labels to prioritize course-specific language names, enhancing user experience and clarity in vocabulary presentation.
- Improved the orientation logic for target-gloss pairs to ensure accurate representation of vocabulary items, contributing to better learning outcomes.
---
 frontend/src/views/social/VocabLessonView.vue | 46 +++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 33745c9..3c0f115 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -126,11 +126,11 @@
               </p>
               <div class="vocab-prep-card">
                 <div class="vocab-prep-card__row">
-                  <span class="vocab-prep-card__label">{{ $t('socialnetwork.vocab.courses.vocabPrepTargetLabel') }}</span>
+                  <span class="vocab-prep-card__label">{{ prepTargetLabel }}</span>
                   <div class="vocab-prep-card__target">{{ currentPrepItem.target }}</div>
                 </div>
                 <div class="vocab-prep-card__row">
-                  <span class="vocab-prep-card__label">{{ $t('socialnetwork.vocab.courses.vocabPrepGlossLabel') }}</span>
+                  <span class="vocab-prep-card__label">{{ prepGlossLabel }}</span>
                   <div class="vocab-prep-card__gloss">{{ currentPrepItem.gloss || '—' }}</div>
                 </div>
               </div>
@@ -1295,14 +1295,54 @@ export default {
         .map((p) => this.normalizeCorePatternEntry(p))
         .filter(Boolean);
     },
+    prepTargetLabel() {
+      return String(
+        this.lesson?.course?.languageName
+        || this.lesson?.languageName
+        || this.$t('socialnetwork.vocab.courses.vocabPrepTargetLabel')
+      ).toUpperCase();
+    },
+    prepGlossLabel() {
+      return String(
+        this.lesson?.course?.nativeLanguageName
+        || this.lesson?.nativeLanguageName
+        || this.$t('socialnetwork.vocab.courses.vocabPrepGlossLabel')
+      ).toUpperCase();
+    },
     prepItems() {
       // Vorbereitung nur mit echten Paaren (Zielsprache + Übersetzung),
       // damit weder leere Gloss-Zeilen noch übergroße Listen entstehen.
       const out = [];
       const seen = new Set();
-      const pushUnique = (target, gloss) => {
+      const nativeHints = new Set(
+        (this.importantVocab || [])
+          .map((x) => this.normalizeLessonVocabTerm(x?.learning))
+          .filter(Boolean)
+      );
+      const targetHints = new Set(
+        (this.importantVocab || [])
+          .map((x) => this.normalizeLessonVocabTerm(x?.reference))
+          .filter(Boolean)
+      );
+      const orientPair = (target, gloss) => {
         const t = String(target || '').trim();
         const g = String(gloss || '').trim();
+        if (!t || !g) return { target: t, gloss: g };
+        const nt = this.normalizeLessonVocabTerm(t);
+        const ng = this.normalizeLessonVocabTerm(g);
+        const tLooksNative = nativeHints.has(nt) && !targetHints.has(nt);
+        const gLooksTarget = targetHints.has(ng) && !nativeHints.has(ng);
+        const tLooksTarget = targetHints.has(nt) && !nativeHints.has(nt);
+        const gLooksNative = nativeHints.has(ng) && !targetHints.has(ng);
+        if (tLooksNative && gLooksTarget && !(tLooksTarget && gLooksNative)) {
+          return { target: g, gloss: t };
+        }
+        return { target: t, gloss: g };
+      };
+      const pushUnique = (target, gloss) => {
+        const oriented = orientPair(target, gloss);
+        const t = String(oriented.target || '').trim();
+        const g = String(oriented.gloss || '').trim();
         if (!t || !g) return;
         const key = `${this.normalizeLessonVocabTerm(t)}|${this.normalizeLessonVocabTerm(g)}`;
         if (seen.has(key)) return;