feat(vocab): implement SRS features and enhance vocabulary management

- Added new endpoints in vocabController for retrieving SRS due items and reviewing SRS items, improving spaced repetition support. - Updated vocabService to handle SRS item creation and scheduling, ensuring effective tracking of vocabulary exposure. - Enhanced vocabRouter with new routes for SRS functionalities, facilitating user interaction with spaced repetition features. - Modified VocabPracticeDialog and VocabCourseView to integrate SRS due items, providing users with timely review opportunities. - Updated translations and UI elements to reflect new SRS features, enhancing user experience and accessibility.
2026-04-17 09:14:30 +02:00
parent 54a77c2e08
commit e2c1147d75
14 changed files with 648 additions and 16 deletions
--- a/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
@@ -15,7 +15,7 @@
      <div class="left">
        <div class="opts">
          <label class="chk">
-            <input type="checkbox" v-model="allVocabs" @change="reloadPool" />
+            <input type="checkbox" v-model="allVocabs" :disabled="srsMode" @change="reloadPool" />
            {{ $t('socialnetwork.vocab.practice.allVocabs') }}
          </label>
          <label class="chk">
@@ -116,6 +116,8 @@ export default {
      onClose: null,
      loading: false,
      allVocabs: false,
+      srsMode: false,
+      initialPool: null,
      simpleMode: false,
      pool: [],

@@ -170,13 +172,15 @@ export default {
    },
  },
  methods: {
-    open({ languageId, chapterId, lessonId, courseId, onClose = null }) {
+    open({ languageId, chapterId, lessonId, courseId, initialPool = null, srsMode = false, onClose = null }) {
      if (this.autoAdvanceTimer) {
        clearTimeout(this.autoAdvanceTimer);
        this.autoAdvanceTimer = null;
      }
      this.openParams = { languageId, chapterId, lessonId, courseId };
      this.onClose = typeof onClose === 'function' ? onClose : null;
+      this.srsMode = Boolean(srsMode);
+      this.initialPool = Array.isArray(initialPool) ? initialPool : null;
      this.allVocabs = false;
      this.simpleMode = false;
      this.correctCount = 0;
@@ -251,7 +255,7 @@ export default {
          seen.add(key);
          return {
            ...item,
-            id: item?.id || item?.key || `${key}|${index}`,
+            id: item?.id || item?.itemKey || item?.key || `${key}|${index}`,
            learning,
            reference
          };
@@ -298,6 +302,12 @@ export default {
    },
    async reloadPool() {
      if (!this.openParams) return;
+      if (this.initialPool) {
+        this.loading = false;
+        this.pool = this.normalizePool(this.initialPool);
+        this.next();
+        return;
+      }
      this.loading = true;
      try {
        let res;
@@ -423,11 +433,28 @@ export default {
        // ignore autoplay issues
      }
    },
+    reportSrsReview(isCorrect) {
+      if (!this.current || !this.openParams?.courseId) {
+        return;
+      }
+      apiClient.post('/api/vocab/srs/review', {
+        courseId: this.openParams.courseId || this.current.courseId,
+        lessonId: this.openParams.lessonId || this.current.lessonId || null,
+        itemKey: this.current.itemKey || null,
+        learning: this.current.learning,
+        reference: this.current.reference,
+        direction: this.direction,
+        correct: Boolean(isCorrect)
+      }).catch((error) => {
+        console.warn('[VocabPracticeDialog] SRS review could not be saved:', error);
+      });
+    },
    markResult(isCorrect) {
      this.answered = true;
      this.lastCorrect = isCorrect;
      if (isCorrect) this.correctCount += 1;
      else this.wrongCount += 1;
+      this.reportSrsReview(isCorrect);

      const id = this.current?.id;
      if (!id) return;
--- a/frontend/src/i18n/locales/ceb/socialnetwork.json
+++ b/frontend/src/i18n/locales/ceb/socialnetwork.json
@@ -726,7 +726,12 @@
                "quickReviewPromptMeaning": "What does \"{term}\" mean?",
                "quickReviewPromptTarget": "Type sa target pinulongan: \"{term}\"",
                "quickReviewAcknowledge": "Read, continue",
-                "courseTodayPlanIntroNoDueReview": "Walay angay nga mubo nga balik-balik karon. Makita nimo ang sunod nga makatarunganon nga lakang sa block (limitado sa kabug-aton), unya ang intensive kung naay. Ang mubo nga balik-balik mobalik sa 1/3/7 ka adlaw."
+                "courseTodayPlanIntroNoDueReview": "Walay angay nga mubo nga balik-balik karon. Makita nimo ang sunod nga makatarunganon nga lakang sa block (limitado sa kabug-aton), unya ang intensive kung naay. Ang mubo nga balik-balik mobalik sa 1/3/7 ka adlaw.",
+                "srsDueStat": "SRS angay: {count}",
+                "srsEyebrow": "Dugay nga memorya",
+                "srsTitle": "{count} ka termino ang angay karon",
+                "srsIntro": "Kini nga balik-balik gikan sa SRS nga plano sa matag pulong. Una kini kaysa bag-ong materyal kay nagpalig-on kini sa mga pulong nga hapit malimtan.",
+                "srsStart": "Sugdi ang daily review"
            },
            "title": "Trainer sa bokabularyo",
            "description": "Paghimo og pinulongans (or subscribe aron them) ug share them uban sa friends.",
--- a/frontend/src/i18n/locales/de/socialnetwork.json
+++ b/frontend/src/i18n/locales/de/socialnetwork.json
@@ -424,8 +424,7 @@
            "subscribe": "Abonnieren",
            "subscribeSuccess": "Abo erfolgreich. Menü wird aktualisiert.",
            "subscribeError": "Abo fehlgeschlagen. Code ungültig oder kein Zugriff.",
-            "trainerPlaceholder": "Trainer-Funktionen (Vokabeln/Abfragen) kommen als nächster Schritt."
-            ,
+            "trainerPlaceholder": "Trainer-Funktionen (Vokabeln/Abfragen) kommen als nächster Schritt.",
            "chapters": "Kapitel",
            "newChapter": "Neues Kapitel",
            "createChapter": "Kapitel anlegen",
@@ -437,8 +436,7 @@
            "referenceWord": "Referenz",
            "add": "Hinzufügen",
            "addVocabError": "Konnte Vokabel nicht hinzufügen.",
-            "noVocabs": "In diesem Kapitel sind noch keine Vokabeln."
-            ,
+            "noVocabs": "In diesem Kapitel sind noch keine Vokabeln.",
            "practice": {
                "open": "Üben",
                "title": "Vokabeln üben",
@@ -810,7 +808,12 @@
                "lessonReviewHintNextDue": "Nächste Fälligkeit: {due}.",
                "reviewTimeNow": "jetzt",
                "reviewTimeTomorrow": "morgen",
-                "reviewTimeInDays": "in {count} Tagen"
+                "reviewTimeInDays": "in {count} Tagen",
+                "srsDueStat": "SRS fällig: {count}",
+                "srsEyebrow": "Langzeitgedächtnis",
+                "srsTitle": "{count} Begriffe sind heute fällig",
+                "srsIntro": "Diese Wiederholung kommt aus dem SRS-Plan einzelner Begriffe. Sie hat Vorrang vor neuem Stoff, weil sie kurz vor dem Vergessen stabilisiert.",
+                "srsStart": "Tageswiederholung starten"
            }
        }
    }
--- a/frontend/src/i18n/locales/en/socialnetwork.json
+++ b/frontend/src/i18n/locales/en/socialnetwork.json
@@ -424,8 +424,7 @@
            "subscribe": "Subscribe",
            "subscribeSuccess": "Subscribed. The menu will refresh.",
            "subscribeError": "Subscribe failed. Invalid code or no access.",
-            "trainerPlaceholder": "Trainer features (words/quizzes) will be the next step."
-            ,
+            "trainerPlaceholder": "Trainer features (words/quizzes) will be the next step.",
            "chapters": "Chapters",
            "newChapter": "New chapter",
            "createChapter": "Create chapter",
@@ -437,8 +436,7 @@
            "referenceWord": "Reference",
            "add": "Add",
            "addVocabError": "Could not add vocabulary.",
-            "noVocabs": "No vocabulary in this chapter yet."
-            ,
+            "noVocabs": "No vocabulary in this chapter yet.",
            "practice": {
                "open": "Practice",
                "title": "Practice vocabulary",
@@ -810,7 +808,12 @@
                "lessonReviewHintNextDue": "Next due date: {due}.",
                "reviewTimeNow": "now",
                "reviewTimeTomorrow": "tomorrow",
-                "reviewTimeInDays": "in {count} days"
+                "reviewTimeInDays": "in {count} days",
+                "srsDueStat": "SRS due: {count}",
+                "srsEyebrow": "Long-term memory",
+                "srsTitle": "{count} terms are due today",
+                "srsIntro": "This review comes from the SRS schedule of individual terms. It should come before new material because it stabilizes items close to forgetting.",
+                "srsStart": "Start daily review"
            }
        }
    }
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -49,11 +49,23 @@
            <p>{{ $t('socialnetwork.vocab.courses.courseFlowIntro') }}</p>
          </div>
          <div class="course-flow__stats">
+            <span class="course-flow__stat">{{ $t('socialnetwork.vocab.courses.srsDueStat', { count: srsDueCount }) }}</span>
            <span class="course-flow__stat">{{ $t('socialnetwork.vocab.courses.courseFlowReviewStat', { count: dueReviewLessons.length }) }}</span>
            <span class="course-flow__stat">{{ $t('socialnetwork.vocab.courses.courseFlowBlockStat', { block: currentBlockNumber || '—' }) }}</span>
          </div>
        </div>

+        <div v-if="srsDueCount > 0" class="course-srs-plan">
+          <div>
+            <span class="course-srs-plan__eyebrow">{{ $t('socialnetwork.vocab.courses.srsEyebrow') }}</span>
+            <h4>{{ $t('socialnetwork.vocab.courses.srsTitle', { count: srsDueCount }) }}</h4>
+            <p>{{ $t('socialnetwork.vocab.courses.srsIntro') }}</p>
+          </div>
+          <button type="button" class="course-today-plan__action" :disabled="srsLoading" @click="openSrsPractice">
+            {{ srsLoading ? $t('general.loading') : $t('socialnetwork.vocab.courses.srsStart') }}
+          </button>
+        </div>
+
        <div v-if="todayRecommendedSteps.length > 0" class="course-today-plan">
          <h4 class="course-today-plan__title">{{ $t('socialnetwork.vocab.courses.courseTodayPlanTitle') }}</h4>
          <p class="course-today-plan__intro">
@@ -325,6 +337,8 @@ export default {
      course: null,
      progress: [],
      chapters: [],
+      srsDueItems: [],
+      srsLoading: false,
      showAddLessonDialog: false,
      assistantSettings: null,
      lessonFormTouched: false,
@@ -366,6 +380,9 @@ export default {
    currentBlockNumber() {
      return this.currentLesson?.pedagogy?.blockNumber || null;
    },
+    srsDueCount() {
+      return Array.isArray(this.srsDueItems) ? this.srsDueItems.length : 0;
+    },
    dueReviewLessons() {
      return this.sortedLessons
        .filter((lesson) => {
@@ -504,6 +521,7 @@ export default {
        const res = await apiClient.get(`/api/vocab/courses/${this.courseId}`);
        this.course = res.data;
        await this.loadProgress();
+        await this.loadSrsDueItems();
        if (this.course.languageId) {
          await this.loadChapters();
        }
@@ -522,6 +540,20 @@ export default {
        this.progress = [];
      }
    },
+    async loadSrsDueItems() {
+      this.srsLoading = true;
+      try {
+        const { data } = await apiClient.get(`/api/vocab/courses/${this.courseId}/srs/due`, {
+          params: { limit: 40 }
+        });
+        this.srsDueItems = Array.isArray(data?.items) ? data.items : [];
+      } catch (e) {
+        console.warn('Konnte SRS-Fälligkeiten nicht laden:', e);
+        this.srsDueItems = [];
+      } finally {
+        this.srsLoading = false;
+      }
+    },
    async loadChapters() {
      try {
        const res = await apiClient.get(`/api/vocab/languages/${this.course.languageId}/chapters`);
@@ -814,6 +846,17 @@ export default {
        lessonId: lesson.id
      });
    },
+    openSrsPractice() {
+      if (!this.srsDueItems.length) {
+        return;
+      }
+      this.$refs.practiceDialog?.open?.({
+        courseId: this.courseId,
+        initialPool: this.srsDueItems,
+        srsMode: true,
+        onClose: () => this.loadSrsDueItems()
+      });
+    },
    openLessonReview(lessonId) {
      this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${lessonId}/review`);
    },
@@ -1010,6 +1053,40 @@ export default {
  gap: 14px;
 }

+.course-srs-plan {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding: 16px 18px;
+  border-radius: 14px;
+  border: 1px solid rgba(102, 153, 126, 0.38);
+  background: linear-gradient(135deg, rgba(232, 247, 238, 0.95), rgba(255, 251, 240, 0.8));
+}
+
+.course-srs-plan__eyebrow {
+  display: inline-flex;
+  margin-bottom: 4px;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #4f7b60;
+}
+
+.course-srs-plan h4,
+.course-srs-plan p {
+  margin: 0;
+}
+
+.course-srs-plan p {
+  margin-top: 6px;
+  color: var(--color-text-secondary, #5c534c);
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
 .course-flow-card {
  padding: 16px;
  border: 1px solid var(--color-border);
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -3602,6 +3602,23 @@ export default {
    normalizeVocab(s) {
      return this.normalizeComparableText(s);
    },
+    reportSrsReviewForCurrentQuestion(isCorrect) {
+      if (!this.currentVocabQuestion?.vocab || !this.courseId) {
+        return;
+      }
+      const vocab = this.currentVocabQuestion.vocab;
+      apiClient.post('/api/vocab/srs/review', {
+        courseId: this.courseId,
+        lessonId: vocab.lessonId || this.lessonId,
+        itemKey: vocab.itemKey || null,
+        learning: vocab.learning,
+        reference: vocab.reference,
+        direction: this.vocabTrainerDirection,
+        correct: Boolean(isCorrect)
+      }).catch((error) => {
+        console.warn('[VocabLessonView] SRS review could not be saved:', error);
+      });
+    },
    checkVocabAnswer() {
      if (!this.currentVocabQuestion) return;
      
@@ -3638,6 +3655,7 @@ export default {
        stats.wrong++;
        this.queueFailedVocab(this.currentVocabQuestion.vocab);
      }
+      this.reportSrsReviewForCurrentQuestion(this.vocabTrainerLastCorrect);
      
      this.vocabTrainerAnswered = true;