sentence explainer for all sentence fmkey

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -40,7 +40,7 @@
         </span>
       </div>
 
-      <details v-if="example || v.notes" ref="sdetails">
+      <details v-if="sent_ko || v.notes" ref="sdetails">
         <summary>
           <SentenceAudio
             v-if="example"
@@ -66,18 +66,19 @@
           </div>
           <div v-else v-html="v.notes"></div>
         </blockquote>
-        <div v-if="example">
+        <div>
           <button
             type="button"
-            :disabled="exCurrentKo !== example.ko || !!exNotesLoading"
+            v-if="sent_ko"
+            :disabled="exCurrentKo !== sent_ko"
             @click="
               if (exNotes) {
                 exNotes = '';
               }
-              explainSentence(example.ko);
+              explainSentence(sent_ko);
             "
           >
-            <span v-if="exCurrentKo !== example.ko">
+            <span v-if="exCurrentKo !== sent_ko">
               {{ exNotesLoading || "..." }}
             </span>
             <span v-else-if="!!exNotesLoading"> {{ exNotesLoading }} </span>
@@ -179,13 +180,17 @@ const sentenceDetails = useTemplateRef("sdetails");
 const saud = useTemplateRef<InstanceType<typeof SentenceAudio>>("saud");
 const vaud = useTemplateRef<InstanceType<typeof SentenceAudio>>("vaud");
 
-const v = computed(() => vList.value[vIndex.value]);
+const v = computed<IVoc | null>(() => vList.value[vIndex.value] || null);
 const example = computed(() => {
   if (!v.value?.examples?.length) return null;
   const ex = v.value.examples;
-  return ex[exIndex.value];
+  return ex[exIndex.value] || null;
 });
 
+const sent_ko = computed(
+  () => (example.value?.ko || fmKey !== "vocabulary" ? v.value?.ko : "") || "",
+);
+
 const MAX_VOC = 5;
 
 const { frontmatter, page } = useData();
@@ -215,7 +220,7 @@ watch(quizState, () => {
 
 let timeoutSetExNotes = 0;
 
-watch(example, () => {
+watch(sent_ko, () => {
   if (timeoutSetExNotes) return;
 
   timeoutSetExNotes = window.setTimeout(() => {
@@ -225,13 +230,13 @@ watch(example, () => {
       exNotes.value = "";
     }
 
-    if (!example.value) return;
+    if (!sent_ko.value) return;
 
-    let { ko } = example.value;
+    let ko = sent_ko.value;
     ko = ko.replaceAll("**", "");
 
     if (!exNotesLoading.value) {
-      exCurrentKo.value = example.value.ko;
+      exCurrentKo.value = sent_ko.value;
     }
 
     if (supabase) {
@@ -279,6 +284,8 @@ watch(
 );
 
 watch(isEdit, () => {
+  if (!v.value) return;
+
   if (isEdit.value) {
     const { ko, ...vContent } = v.value;
     vEditContent.value = yaml.stringify(vContent);
@@ -317,11 +324,15 @@ function makeVList() {
     Math.random() * Math.min(MAX_VOC, vList.value.length),
   );
 
+  if (!v.value) return;
+
   const ex = v.value.examples;
   exIndex.value = ex ? Math.floor(Math.random() * ex.length) : 0;
 }
 
 function makeNewExIndex() {
+  if (!v.value) return;
+
   if (v.value.examples && v.value.examples.length > 1) {
     const newValue = Math.floor(Math.random() * (v.value.examples.length - 1));
     exIndex.value = newValue >= exIndex.value ? newValue + 1 : newValue;
@@ -373,6 +384,8 @@ function mark(isRight: boolean) {
     vIndex.value = i;
   }
 
+  if (!v.value) return;
+
   const ex = v.value.examples;
   exIndex.value = ex ? Math.floor(Math.random() * ex.length) : 0;
 }
@@ -393,6 +406,8 @@ function updateCats(cat: string) {
 }
 
 async function onVContentSave() {
+  if (!v.value) return;
+
   const oldV = v.value;
   const newV = Voc.parse({ ko: oldV.ko, ...yaml.parse(vEditContent.value) });