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