Update VocabPracticeDialog and VocabChapterView components to manage practice dialog state

- Changed the close button visibility in VocabPracticeDialog to false for a cleaner UI.
- Enhanced VocabChapterView to manage the practice dialog state with a new `practiceOpen` flag.
- Updated the `openPractice` method to handle the dialog's open and close events, ensuring proper state management.

frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue

@@ -2,7 +2,7 @@
   <DialogWidget
     ref="dialog"
     :title="$t('socialnetwork.vocab.practice.title')"
-    :show-close="true"
+    :show-close="false"
     :buttons="buttons"
     :modal="true"
     :isTitleTranslated="false"
@@ -10,7 +10,6 @@
     height="32em"
     name="VocabPracticeDialog"
     display="flex"
-    @close="close"
   >
     <div class="layout">
       <div class="left">
@@ -112,6 +111,7 @@ export default {
   data() {
     return {
       openParams: null, // { languageId, chapterId }
+      onClose: null,
       loading: false,
       allVocabs: false,
       simpleMode: false,
@@ -168,12 +168,13 @@ export default {
     },
   },
   methods: {
-    open({ languageId, chapterId }) {
+    open({ languageId, chapterId, onClose = null }) {
       if (this.autoAdvanceTimer) {
         clearTimeout(this.autoAdvanceTimer);
         this.autoAdvanceTimer = null;
       }
       this.openParams = { languageId, chapterId };
+      this.onClose = typeof onClose === 'function' ? onClose : null;
       this.allVocabs = false;
       this.simpleMode = false;
       this.correctCount = 0;
@@ -191,7 +192,12 @@ export default {
         clearTimeout(this.autoAdvanceTimer);
         this.autoAdvanceTimer = null;
       }
+      const cb = this.onClose;
+      this.onClose = null;
       this.$refs.dialog.close();
+      try {
+        if (cb) cb();
+      } catch (_) {}
     },
     normalize(s) {
       return String(s || '')

frontend/src/views/social/VocabChapterView.vue

@@ -5,6 +5,7 @@
     <div v-if="loading">{{ $t('general.loading') }}</div>
     <div v-else-if="!chapter">{{ $t('socialnetwork.vocab.notFound') }}</div>
     <div v-else>
+      <div v-show="!practiceOpen">
         <div class="row">
           <button @click="back">{{ $t('general.back') }}</button>
           <button v-if="vocabs.length" @click="openPractice">{{ $t('socialnetwork.vocab.practice.open') }}</button>
@@ -46,6 +47,7 @@
         </table>
       </div>
     </div>
+  </div>
 
   <VocabPracticeDialog ref="practiceDialog" />
 </template>
@@ -61,6 +63,7 @@ export default {
     return {
       loading: false,
       saving: false,
+      practiceOpen: false,
       chapter: null,
       vocabs: [],
       learning: '',
@@ -77,9 +80,13 @@ export default {
       this.$router.push(`/socialnetwork/vocab/${this.$route.params.languageId}`);
     },
     openPractice() {
+      this.practiceOpen = true;
       this.$refs.practiceDialog?.open?.({
         languageId: this.$route.params.languageId,
         chapterId: this.$route.params.chapterId,
+        onClose: () => {
+          this.practiceOpen = false;
+        },
       });
     },
     async load() {