From cc89fd4bef221f64ca3eda592c3e5bb0656ad026 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 7 May 2026 13:52:49 +0200
Subject: [PATCH] feat(VocabPracticeDialog, VocabCourseView): implement event
 dispatch for hard vocabulary changes

- Added event dispatching for 'yourpart:hardvocab:changed' in both VocabPracticeDialog and VocabCourseView components to notify changes in hard vocabulary items.
- Implemented event handling in VocabCourseView to refresh the hard vocabulary list when the event is triggered, ensuring UI consistency across components.
- Included error handling for environments that do not support CustomEvent, enhancing robustness.
---
 .../socialnetwork/VocabPracticeDialog.vue        | 10 ++++++++++
 frontend/src/views/social/VocabCourseView.vue    | 16 ++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue b/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
index d229a60..f938ca3 100644
--- a/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
@@ -339,6 +339,16 @@ export default {
       } catch (_) {
         // ignore quota/private-mode issues
       }
+      try {
+        window.dispatchEvent(new CustomEvent('yourpart:hardvocab:changed', {
+          detail: {
+            courseId: this.openParams?.courseId || null,
+            storageKey: key
+          }
+        }));
+      } catch (_) {
+        // ignore environments without CustomEvent
+      }
     },
     getHardKey(item) {
       const learning = this.normalize(item?.learning || '');
diff --git a/frontend/src/views/social/VocabCourseView.vue b/frontend/src/views/social/VocabCourseView.vue
index 5e3dbc5..e39301d 100644
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -607,6 +607,13 @@ export default {
         delete next[entryKey];
         localStorage.setItem(key, JSON.stringify(next));
         this.refreshHardVocabList();
+        try {
+          window.dispatchEvent(new CustomEvent('yourpart:hardvocab:changed', {
+            detail: { courseId: this.courseId, storageKey: key }
+          }));
+        } catch (_) {
+          // ignore environments without CustomEvent
+        }
       } catch (_) {
         // ignore storage parse/write errors
       }
@@ -614,6 +621,13 @@ export default {
     handleWindowFocus() {
       this.refreshHardVocabList();
     },
+    handleHardVocabChanged(event) {
+      const detailCourseId = event?.detail?.courseId;
+      if (detailCourseId != null && String(detailCourseId) !== String(this.courseId)) {
+        return;
+      }
+      this.refreshHardVocabList();
+    },
     async loadCourse() {
       this.loading = true;
       try {
@@ -1021,9 +1035,11 @@ export default {
     ]);
     this.refreshHardVocabList();
     window.addEventListener('focus', this.handleWindowFocus);
+    window.addEventListener('yourpart:hardvocab:changed', this.handleHardVocabChanged);
   },
   beforeUnmount() {
     window.removeEventListener('focus', this.handleWindowFocus);
+    window.removeEventListener('yourpart:hardvocab:changed', this.handleHardVocabChanged);
   },
 };
 </script>