feat(vocab): refine vocabulary label logic in VocabLessonView

- Introduced computed properties for current vocabulary preparation labels, enhancing clarity and localization.
- Updated label handling to dynamically adjust based on the context of target and gloss items, improving user experience.
- Enhanced the logic for determining when to swap labels, ensuring accurate representation of vocabulary items for better learning outcomes.

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">{{ prepTargetLabel }}</span>
+                  <span class="vocab-prep-card__label">{{ currentPrepTopLabel }}</span>
                   <div class="vocab-prep-card__target">{{ currentPrepItem.target }}</div>
                 </div>
                 <div class="vocab-prep-card__row">
-                  <span class="vocab-prep-card__label">{{ prepGlossLabel }}</span>
+                  <span class="vocab-prep-card__label">{{ currentPrepBottomLabel }}</span>
                   <div class="vocab-prep-card__gloss">{{ currentPrepItem.gloss || '—' }}</div>
                 </div>
               </div>
@@ -1309,6 +1309,12 @@ export default {
         || this.$t('socialnetwork.vocab.courses.vocabPrepGlossLabel')
       ).toUpperCase();
     },
+    currentPrepTopLabel() {
+      return this._prepRowLabelFor('target');
+    },
+    currentPrepBottomLabel() {
+      return this._prepRowLabelFor('gloss');
+    },
     prepItems() {
       // Vorbereitung nur mit echten Paaren (Zielsprache + Übersetzung),
       // damit weder leere Gloss-Zeilen noch übergroße Listen entstehen.
@@ -1812,6 +1818,33 @@ export default {
       }
       return { target: s, gloss: '' };
     },
+    _prepRowLabelFor(side = 'target') {
+      const item = this.currentPrepItem;
+      if (!item) {
+        return side === 'target' ? this.prepTargetLabel : this.prepGlossLabel;
+      }
+      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 targetNorm = this.normalizeLessonVocabTerm(item.target);
+      const glossNorm = this.normalizeLessonVocabTerm(item.gloss);
+      const targetLooksNative = nativeHints.has(targetNorm) && !targetHints.has(targetNorm);
+      const glossLooksTarget = targetHints.has(glossNorm) && !nativeHints.has(glossNorm);
+      const targetLooksTarget = targetHints.has(targetNorm) && !nativeHints.has(targetNorm);
+      const glossLooksNative = nativeHints.has(glossNorm) && !targetHints.has(glossNorm);
+      const shouldSwapLabels = targetLooksNative && glossLooksTarget && !(targetLooksTarget && glossLooksNative);
+      if (shouldSwapLabels) {
+        return side === 'target' ? this.prepGlossLabel : this.prepTargetLabel;
+      }
+      return side === 'target' ? this.prepTargetLabel : this.prepGlossLabel;
+    },
     corePatternToDisplayString(p) {
       const n = this.normalizeCorePatternEntry(p);
       if (!n) return '';