feat(VocabPracticeDialog, VocabCourseView): enhance hard vocabulary management and UI

- Refactored methods in VocabPracticeDialog to improve the handling of hard vocabulary items, including the addition of `findMatchingHardKey` and `removeHardEntriesForItem` for better management of hard vocabulary entries.
- Updated the VocabCourseView to display a new section for hard vocabulary items, allowing users to view and remove difficult words easily.
- Enhanced the UI with new styles for the hard vocabulary list, improving user engagement and accessibility to challenging vocabulary practice.

frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue

@@ -297,11 +297,11 @@ export default {
     },
     isCurrentMarkedHard() {
       if (!this.current) return false;
-      return Boolean(this.hardVocabMap[this.getHardKey(this.current)]);
+      return this.isItemMarkedHard(this.current);
     },
     hardPoolItems() {
       if (!Array.isArray(this.pool) || this.pool.length === 0) return [];
-      return this.pool.filter((item) => Boolean(this.hardVocabMap[this.getHardKey(item)]));
+      return this.pool.filter((item) => this.isItemMarkedHard(item));
     },
     hardRemainingCount() {
       return this.hardPoolItems.filter((item) => {
@@ -344,8 +344,63 @@ export default {
       const reference = this.normalize(item?.reference || '');
       return `${learning}|${reference}`;
     },
+    findMatchingHardKey(item) {
+      const exactKey = this.getHardKey(item);
+      if (this.hardVocabMap[exactKey]) return exactKey;
+
+      const itemLearning = this.normalize(item?.learning || '');
+      const itemReference = this.normalize(item?.reference || '');
+      if (!itemLearning || !itemReference) return null;
+
+      const entries = Object.entries(this.hardVocabMap || {});
+      for (const [key, value] of entries) {
+        const learningAlts = this.splitPhraseAlternatives(value?.learning || '')
+          .map((part) => this.normalize(part))
+          .filter(Boolean);
+        const referenceAlts = this.splitPhraseAlternatives(value?.reference || '')
+          .map((part) => this.normalize(part))
+          .filter(Boolean);
+        if (!learningAlts.length || !referenceAlts.length) continue;
+        if (learningAlts.includes(itemLearning) && referenceAlts.includes(itemReference)) {
+          return key;
+        }
+      }
+      return null;
+    },
+    isItemMarkedHard(item) {
+      return Boolean(this.findMatchingHardKey(item));
+    },
+    removeHardEntriesForItem(item) {
+      const itemLearning = this.normalize(item?.learning || '');
+      const itemReference = this.normalize(item?.reference || '');
+      if (!itemLearning || !itemReference) return;
+
+      const toDelete = [];
+      Object.entries(this.hardVocabMap || {}).forEach(([key, value]) => {
+        const learningAlts = this.splitPhraseAlternatives(value?.learning || '')
+          .map((part) => this.normalize(part))
+          .filter(Boolean);
+        const referenceAlts = this.splitPhraseAlternatives(value?.reference || '')
+          .map((part) => this.normalize(part))
+          .filter(Boolean);
+        if (learningAlts.includes(itemLearning) && referenceAlts.includes(itemReference)) {
+          toDelete.push(key);
+        }
+      });
+      if (!toDelete.length) return;
+
+      const next = { ...this.hardVocabMap };
+      const nextMastery = { ...this.hardMasteryByKey };
+      toDelete.forEach((key) => {
+        delete next[key];
+        delete nextMastery[key];
+      });
+      this.hardVocabMap = next;
+      this.hardMasteryByKey = nextMastery;
+    },
     markCurrentAsHard() {
       if (!this.current) return;
+      this.removeHardEntriesForItem(this.current);
       const key = this.getHardKey(this.current);
       this.hardVocabMap = {
         ...this.hardVocabMap,
@@ -362,16 +417,9 @@ export default {
     },
     unmarkCurrentAsHard() {
       if (!this.current) return;
-      const key = this.getHardKey(this.current);
+      const matchingKey = this.findMatchingHardKey(this.current);
-      if (!this.hardVocabMap[key]) return;
+      if (!matchingKey) return;
-      const next = { ...this.hardVocabMap };
+      this.removeHardEntriesForItem(this.current);
-      delete next[key];
-      this.hardVocabMap = next;
-      if (this.hardMasteryByKey[key] != null) {
-        const nextMastery = { ...this.hardMasteryByKey };
-        delete nextMastery[key];
-        this.hardMasteryByKey = nextMastery;
-      }
       if (this.hardPhaseActive && this.hardRemainingCount <= 0) {
         this.hardPhaseActive = false;
       }
@@ -986,9 +1034,10 @@ export default {
         if (this.hardPhaseActive && this.current) {
           const key = this.getHardKey(this.current);
           this.hardMasteryByKey[key] = Math.max(0, Number(this.hardMasteryByKey[key]) || 0) + 1;
-          if ((Number(this.hardMasteryByKey[key]) || 0) >= HARD_REQUIRED_CONSECUTIVE_CORRECT && this.hardVocabMap[key]) {
+          const mapKey = this.findMatchingHardKey(this.current);
+          if ((Number(this.hardMasteryByKey[key]) || 0) >= HARD_REQUIRED_CONSECUTIVE_CORRECT && mapKey) {
             const next = { ...this.hardVocabMap };
-            delete next[key];
+            delete next[mapKey];
             this.hardVocabMap = next;
             this.saveHardVocabMap();
           }

frontend/src/views/social/VocabCourseView.vue

@@ -29,6 +29,34 @@
         </button>
       </div>
 
+      <section v-if="hardVocabCount > 0" class="surface-card course-hard-list">
+        <div class="course-hard-list__header">
+          <h3>{{ $t('socialnetwork.vocab.courses.startHardVocabTrainer', { count: hardVocabCount }) }}</h3>
+          <button
+            type="button"
+            class="button-secondary"
+            @click="openHardPractice"
+          >
+            {{ $t('socialnetwork.vocab.courses.practiceInTrainer') }}
+          </button>
+        </div>
+        <div class="course-hard-list__items">
+          <div v-for="entry in hardVocabList" :key="entry.key" class="course-hard-list__item">
+            <div class="course-hard-list__texts">
+              <strong>{{ entry.learning }}</strong>
+              <span>{{ entry.reference }}</span>
+            </div>
+            <button
+              type="button"
+              class="btn-delete"
+              @click="removeHardVocabEntry(entry.key)"
+            >
+              {{ $t('socialnetwork.vocab.courses.unmarkVocabHard') }}
+            </button>
+          </div>
+        </div>
+      </section>
+
       <section class="surface-card course-assistant">
         <div>
           <span class="course-assistant__eyebrow">{{ $t('socialnetwork.vocab.courses.languageAssistantEyebrow') }}</span>
@@ -550,14 +578,15 @@ export default {
       try {
         const raw = localStorage.getItem(key);
         const parsed = raw ? JSON.parse(raw) : {};
-        const values = parsed && typeof parsed === 'object' ? Object.values(parsed) : [];
+        const values = parsed && typeof parsed === 'object' ? Object.entries(parsed) : [];
         this.hardVocabList = values
-          .map((entry, idx) => {
+          .map(([entryKey, entry], idx) => {
             const learning = String(entry?.learning || '').trim();
             const reference = String(entry?.reference || '').trim();
             if (!learning || !reference) return null;
             return {
               id: `hard-${idx}-${learning}-${reference}`,
+              key: String(entryKey || ''),
               learning,
               reference
             };
@@ -567,6 +596,21 @@ export default {
         this.hardVocabList = [];
       }
     },
+    removeHardVocabEntry(entryKey) {
+      const key = this.hardStorageKey();
+      if (!key || !entryKey) return;
+      try {
+        const raw = localStorage.getItem(key);
+        const parsed = raw ? JSON.parse(raw) : {};
+        if (!parsed || typeof parsed !== 'object' || !parsed[entryKey]) return;
+        const next = { ...parsed };
+        delete next[entryKey];
+        localStorage.setItem(key, JSON.stringify(next));
+        this.refreshHardVocabList();
+      } catch (_) {
+        // ignore storage parse/write errors
+      }
+    },
     handleWindowFocus() {
       this.refreshHardVocabList();
     },
@@ -1040,6 +1084,48 @@ export default {
   flex-shrink: 0;
 }
 
+.course-hard-list {
+  padding: 16px 18px;
+}
+
+.course-hard-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.course-hard-list__header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.course-hard-list__items {
+  display: grid;
+  gap: 8px;
+}
+
+.course-hard-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border, #e1dbd4);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.course-hard-list__texts {
+  display: grid;
+  gap: 2px;
+}
+
+.course-hard-list__texts span {
+  color: var(--color-text-secondary, #6b625b);
+}
+
 .course-assistant {
   display: flex;
   align-items: flex-start;