chore: record sessions while creating courses and lessons

frontend/src/App.vue

@@ -9,16 +9,19 @@
 <script setup>
 import { FrappeUIProvider } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useScreenSize } from './utils/composables'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
 import NoSidebarLayout from './components/NoSidebarLayout.vue'
 import { useRouter } from 'vue-router'
+import { usersStore } from '@/stores/user'
+import { posthogSettings } from '@/telemetry'
 
 const screenSize = useScreenSize()
 const router = useRouter()
 const noSidebar = ref(false)
+const { userResource } = usersStore()
 
 router.beforeEach((to, from, next) => {
 	if (to.query.fromLesson || to.path === '/persona') {
@@ -44,4 +47,10 @@ onUnmounted(() => {
 	noSidebar.value = false
 	stopSession()
 })
+
+watch(userResource, () => {
+	if (userResource.data) {
+		posthogSettings.reload()
+	}
+})
 </script>

frontend/src/pages/CourseForm.vue

@@ -284,7 +284,7 @@ import {
 } from 'vue'
 import { Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
-import { capture } from '@/telemetry'
+import { capture, startRecording, stopRecording } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { sessionStore } from '../stores/session'
 import { openSettings } from '@/utils'
@@ -337,6 +337,7 @@ onMounted(() => {
 		courseResource.reload()
 	} else {
 		capture('course_form_opened')
+		startRecording()
 	}
 	window.addEventListener('keydown', keyboardShortcut)
 })
@@ -354,6 +355,7 @@ const keyboardShortcut = (e) => {
 
 onBeforeUnmount(() => {
 	window.removeEventListener('keydown', keyboardShortcut)
+	stopRecording()
 })
 
 const courseCreationResource = createResource({

frontend/src/pages/LessonForm.vue

@@ -99,7 +99,7 @@ import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { getEditorTools, enablePlyr } from '@/utils'
-import { capture } from '@/telemetry'
+import { capture, startRecording, stopRecording } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 
 const { brand } = sessionStore()
@@ -131,6 +131,7 @@ onMounted(() => {
 		window.location.href = '/login'
 	}
 	capture('lesson_form_opened')
+	startRecording()
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
 	window.addEventListener('keydown', keyboardShortcut)
@@ -226,6 +227,7 @@ const keyboardShortcut = (e) => {
 onBeforeUnmount(() => {
 	clearInterval(autoSaveInterval)
 	window.removeEventListener('keydown', keyboardShortcut)
+	stopRecording()
 })
 
 const newLessonResource = createResource({