fix: minor changes with visibility and change

frontend/src/components/Notes/InlineLessonMenu.vue

@@ -31,7 +31,7 @@
 		</div>
 		<div class="border-t">
 			<div
-				@click="addToNotes"
+				@click="addToNotes()"
 				class="flex items-center space-x-2 hover:bg-surface-gray-2 cursor-pointer rounded-b-md py-2 px-3"
 			>
 				<NotepadText class="size-3 stroke-1.5" />
@@ -124,6 +124,7 @@ const saveHighLight = (color: string) => {
 			member: user?.data?.name,
 			highlighted_text: selectedText.value,
 			color: color,
+			name: '',
 		},
 		{
 			onSuccess(data: Note) {
@@ -148,8 +149,9 @@ const deleteHighlight = () => {
 		onSuccess() {
 			resetStates()
 			document.querySelectorAll('.highlighted-text').forEach((el) => {
-				if (el.dataset.name === notesToDelete.name) {
-					el.style.backgroundColor = 'transparent'
+				const element = el as HTMLElement
+				if (element.dataset.name === notesToDelete.name) {
+					element.style.backgroundColor = 'transparent'
 				}
 			})
 		},
@@ -179,16 +181,16 @@ const createNote = () => {
 			member: user?.data?.name,
 			note: `<blockquote><p>${selectedText.value}</p></blockquote><br>`,
 			color: 'Yellow',
+			name: '',
 		},
 		{
 			onSuccess(data: Note) {
-				selectedText.value = ''
-				resetStates()
+				emit('updateNotes')
 				setTimeout(() => {
 					scrollToText(selectedText.value)
 					blockQuotesClick()
-				}, 0)
-				emit('updateNotes')
+					resetStates()
+				}, 100)
 			},
 			onError(err: any) {
 				console.error('Error creating note:', err)
@@ -206,11 +208,12 @@ const updateNote = (noteToUpdate: Note) => {
 		},
 		{
 			onSuccess(data: Note) {
-				resetStates()
+				emit('updateNotes')
 				setTimeout(() => {
 					scrollToText(selectedText.value)
 					blockQuotesClick()
-				}, 0)
+					resetStates()
+				}, 100)
 			},
 			onError(err: any) {
 				console.error('Error updating note:', err)
@@ -222,9 +225,10 @@ const updateNote = (noteToUpdate: Note) => {
 
 const scrollToText = (text: string) => {
 	const elements = document.querySelectorAll('blockquote p')
-	Array.from(elements).forEach((el: HTMLElement) => {
-		if (el.textContent?.toLowerCase().includes(text.toLowerCase())) {
-			el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+	Array.from(elements).forEach((el) => {
+		const element = el as HTMLElement
+		if (element.textContent?.toLowerCase().includes(text.toLowerCase())) {
+			element.scrollIntoView({ behavior: 'smooth', block: 'center' })
 		}
 	})
 }
@@ -233,6 +237,5 @@ const resetStates = () => {
 	selectedText.value = ''
 	show.value = false
 	resetMenuPosition()
-	emit('updateNotes')
 }
 </script>

frontend/src/components/Notes/Notes.vue

@@ -5,7 +5,7 @@
 	<TextEditor
 		:content="note"
 		:placeholder="__('Make notes for quick revision. Press / for menu.')"
-		@change="(val) => updateNoteText(val)"
+		@change="(val: string) => updateNoteText(val)"
 		:editable="true"
 		editorClass="prose prose-sm min-h-[200px] max-w-none"
 	/>
@@ -33,10 +33,13 @@ onMounted(() => {
 	updateCurrentNote()
 })
 
-watch(notes.value, () => {
-	updateCurrentNote()
-	blockQuotesClick()
-})
+watch(
+	() => notes.value?.data,
+	() => {
+		updateCurrentNote()
+		blockQuotesClick()
+	}
+)
 
 const updateCurrentNote = () => {
 	const currentNote = notes.value?.data?.filter((row: Note) => {
@@ -46,9 +49,10 @@ const updateCurrentNote = () => {
 		note.value = null
 		currentNoteName.value = null
 		return
+	} else if (currentNote && currentNote.length > 0) {
+		currentNoteName.value = currentNote[0].name
+		note.value = currentNote[0].note || null
 	}
-	currentNoteName.value = currentNote[0].name
-	note.value = currentNote[0].note
 }
 
 const updateNoteText = (val: string) => {
@@ -75,6 +79,7 @@ const createNote = () => {
 			member: user?.data?.name,
 			note: note.value,
 			color: 'Yellow',
+			name: '',
 		},
 		{
 			onSuccess(data: Note) {
@@ -89,6 +94,7 @@ const createNote = () => {
 }
 
 const updateNote = () => {
+	if (!currentNoteName.value) return
 	notes.value?.setValue.submit(
 		{
 			name: currentNoteName.value,

frontend/src/components/Notes/types.ts

@@ -2,7 +2,7 @@
 export type Note = {
 	highlighted_text?: string
 	color?: string
-	name?: string
+	name: string
     note?: string | null
     lesson?: string
     member?: string

frontend/src/pages/Lesson.vue

@@ -232,6 +232,7 @@
 							v-if="currentTab === 'Notes'"
 							:lesson="lesson.data?.name"
 							v-model:notes="notes"
+							@updateNotes="updateNotes"
 						/>
 						<Discussions
 							v-else-if="allowDiscussions"
@@ -271,16 +272,17 @@
 			</div>
 		</div>
 	</div>
-	<InlineMenu
+	<InlineLessonMenu
+		v-if="lesson.data"
 		v-model="showInlineMenu"
 		:lesson="lesson.data?.name"
 		v-model:notes="notes"
+		@updateNotes="updateNotes"
 	/>
 	<VideoStatistics
 		v-model="showStatsDialog"
 		:lessonName="lesson.data?.name"
 		:lessonTitle="lesson.data?.title"
-		@updateNotes="updateNotes"
 	/>
 </template>
 <script setup>
@@ -327,8 +329,8 @@ import CertificationLinks from '@/components/CertificationLinks.vue'
 import VideoStatistics from '@/components/Modals/VideoStatistics.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import InlineMenu from '@/components/Notes/InlineLessonMenu.vue'
 import Notes from '@/components/Notes/Notes.vue'
+import InlineLessonMenu from '@/components/Notes/InlineLessonMenu.vue'
 
 const user = inject('$user')
 const socket = inject('$socket')
@@ -351,6 +353,13 @@ const showInlineMenu = ref(false)
 const currentTab = ref('Notes')
 let timerInterval
 
+const tabs = ref([
+	{
+		label: __('Notes'),
+		value: 'Notes',
+	},
+])
+
 const props = defineProps({
 	courseName: {
 		type: String,
@@ -428,11 +437,18 @@ const setupLesson = (data) => {
 	editor.value?.isReady.then(() => {
 		checkIfDiscussionsAllowed()
 	})
+	checkQuiz()
+}
 
-	if (!editor.value && data.body) {
+const checkQuiz = () => {
+	if (!editor.value && lesson.body) {
 		const quizRegex = /\{\{ Quiz\(".*"\) \}\}/
-		hasQuiz.value = quizRegex.test(data.body)
-		if (!hasQuiz.value && !zenModeEnabled) allowDiscussions.value = true
+		hasQuiz.value = quizRegex.test(lesson.body)
+		if (!hasQuiz.value && !zenModeEnabled) {
+			allowDiscussions.value = true
+		} else {
+			allowDiscussions.value = false
+		}
 	}
 }
 
@@ -533,6 +549,8 @@ watch(
 			resetLessonState(newChapterNumber, newLessonNumber)
 			startTimer()
 			updateNotes()
+			checkIfDiscussionsAllowed()
+			checkQuiz()
 		}
 	}
 )
@@ -672,8 +690,11 @@ onBeforeUnmount(() => {
 })
 
 const checkIfDiscussionsAllowed = () => {
+	hasQuiz.value = false
 	JSON.parse(lesson.data?.content)?.blocks?.forEach((block) => {
-		if (block.type === 'quiz') hasQuiz.value = true
+		if (block.type === 'quiz') {
+			hasQuiz.value = true
+		}
 	})
 
 	if (
@@ -682,8 +703,11 @@ const checkIfDiscussionsAllowed = () => {
 		(lesson.data?.membership ||
 			user.data?.is_moderator ||
 			user.data?.is_instructor)
-	)
+	) {
 		allowDiscussions.value = true
+	} else {
+		allowDiscussions.value = false
+	}
 }
 
 const allowEdit = () => {
@@ -793,11 +817,26 @@ const updateNotes = () => {
 	notes.reload()
 }
 
-const tabs = computed(() => {
-	return [
-		{ label: __('Notes'), value: 'Notes' },
-		{ label: __('Community'), value: 'Community' },
-	]
+watch(allowDiscussions, () => {
+	if (allowDiscussions.value) {
+		tabs.value = [
+			{
+				label: __('Notes'),
+				value: 'Notes',
+			},
+			{
+				label: __('Community'),
+				value: 'Community',
+			},
+		]
+	} else {
+		tabs.value = [
+			{
+				label: __('Notes'),
+				value: 'Notes',
+			},
+		]
+	}
 })
 
 const redirectToLogin = () => {