fix: misc lesson fixes

frontend/src/components/CourseOutline.vue

@@ -25,7 +25,7 @@
 				:key="chapter.name"
 				:defaultOpen="openChapterDetail(chapter.idx)"
 			>
-				<DisclosureButton ref="" class="flex w-full px-2 py-3">
+				<DisclosureButton ref="" class="flex w-full p-2">
 					<ChevronRight
 						:class="{
 							'rotate-90 transform duration-200': open,
@@ -38,7 +38,7 @@
 						{{ chapter.title }}
 					</div>
 				</DisclosureButton>
-				<DisclosurePanel class="pb-2">
+				<DisclosurePanel>
 					<div v-for="lesson in chapter.lessons" :key="lesson.name">
 						<div class="outline-lesson pl-8 py-2">
 							<router-link

frontend/src/components/Discussions.vue

@@ -40,13 +40,16 @@
 	<div v-else-if="singleThread && topics.data">
 		<DiscussionReplies :topic="topics.data" :singleThread="singleThread" />
 	</div>
-	<div v-else class="flex justify-center border mt-5 p-5 rounded-md">
-		<MessageSquareIcon class="w-10 h-10 stroke-1.5 text-gray-800 mr-2" />
+	<div
+		v-else
+		class="flex items-center justify-center border mt-5 p-5 rounded-md"
+	>
+		<MessageSquareIcon class="w-5 h-5 stroke-1.5 mr-2" />
 		<div>
-			<div class="text-xl font-semibold mb-2">
+			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
 			</div>
-			<div>
+			<div class="">
 				{{ __(emptyStateText) }}
 			</div>
 		</div>
@@ -89,7 +92,7 @@ const props = defineProps({
 	},
 	emptyStateTitle: {
 		type: String,
-		default: 'No topics yet',
+		default: '',
 	},
 	emptyStateText: {
 		type: String,

frontend/src/components/LessonPlugins.vue

@@ -68,13 +68,34 @@
 				</div>
 			</div>
 		</div>
+		<div class="mt-4">
+			<div class="text-xs text-gray-600 mb-1">
+				{{
+					__(
+						'To add a YouTube video, paste the URL of the video in the editor.'
+					)
+				}}
+			</div>
+			<YouTubeExplanation>
+				<template v-slot="{ togglePopover }">
+					<div
+						@click="togglePopover()"
+						class="flex items-center text-sm underline cursor-pointer"
+					>
+						<Info class="w-3 h-3 stroke-1.5 text-gray-700 mr-1" />
+						{{ __('Learn More') }}
+					</div>
+				</template>
+			</YouTubeExplanation>
+		</div>
 	</div>
 </template>
 <script setup>
 import Link from '@/components/Controls/Link.vue'
 import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
-import { Plus, FileText } from 'lucide-vue-next'
+import { Plus, FileText, Info } from 'lucide-vue-next'
 import { ref, watch } from 'vue'
+import YouTubeExplanation from '@/components/Modals/YouTubeExplanation.vue'
 
 const quiz = ref(null)
 const file = ref(null)

frontend/src/components/Modals/YouTubeExplanation.vue

@@ -0,0 +1,30 @@
+<template>
+	<Popover transition="default">
+		<template #target="{ isOpen, togglePopover }" class="flex w-full">
+			<slot v-bind="{ isOpen, togglePopover }"></slot>
+		</template>
+		<template #body>
+			<div
+				class="absolute left-0 mt-3 w-[35rem] max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
+			>
+				<div
+					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
+				>
+					<video
+						controls
+						autoplay
+						muted
+						width="100%"
+						controlsList="nodownload"
+						class="rounded-sm"
+					>
+						<source src="/Youtube.mov" type="video/mp4" />
+					</video>
+				</div>
+			</div>
+		</template>
+	</Popover>
+</template>
+<script setup>
+import { Popover } from 'frappe-ui'
+</script>