feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.

Frontend-Learner/pages/classroom/learning.vue

@@ -219,14 +219,14 @@ const loadLesson = async (lessonId: number) => {
             msg = accessRes.data.lock_reason
         } else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
              const quizTitle = getLocalizedText(accessRes.data.required_quiz_pass.title)
-             msg = `กรุณาทำแบบทดสอบ "${quizTitle}" ให้ผ่านก่อน`
+             msg = t('classroom.quizRequired', { title: quizTitle })
         } else if (accessRes.data.required_lessons && accessRes.data.required_lessons.length > 0) {
              const reqLesson = accessRes.data.required_lessons.find((l: any) => !l.is_completed)
              if (reqLesson) {
-                msg = `กรุณาเรียนบทเรียน "${getLocalizedText(reqLesson.title)}" ให้จบก่อน`
+                msg = t('classroom.lessonRequired', { title: getLocalizedText(reqLesson.title) })
              }
         } else if (accessRes.data.is_enrolled === false) {
-             msg = 'คุณยังไม่ได้ลงทะเบียนในคอร์สนี้'
+             msg = t('classroom.notEnrolled')
         }
 
         alert(msg)
@@ -516,27 +516,31 @@ onBeforeUnmount(() => {
     <!-- Header -->
     <q-header bordered class="bg-[var(--bg-surface)] border-b border-gray-200 dark:border-white/5 text-[var(--text-main)] h-14">
       <q-toolbar>
-        <q-btn flat round dense icon="menu" class="mr-2 text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" @click="toggleSidebar" />
-        
-        <!-- Back Button & Branding -->
-        <div class="flex items-center gap-2 mr-6">
-          <q-btn 
-            flat 
-            round 
-            dense 
-            icon="arrow_back" 
-            class="mr-2 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 border border-blue-100 dark:border-blue-800/50 hover:bg-blue-100 dark:hover:bg-blue-800/50 transition-all"
-            @click="handleExit('/dashboard/my-courses')"
-          >
-            <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
-          </q-btn>
+        <!-- Exit/Back Button -->
+        <q-btn 
+          flat 
+          rounded
+          no-caps
+          color="primary"
+          class="mr-4 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white font-bold hover:bg-slate-200"
+          @click="handleExit('/dashboard/my-courses')"
+        >
+          <q-icon name="close" size="18px" class="mr-1.5" />
+          <span class="hidden sm:inline">{{ $t('common.close') }}</span>
+          <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
+        </q-btn>
 
-          <div class="hidden sm:flex items-center gap-2 cursor-pointer group" @click="handleExit('/dashboard')">
-            <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
-              E
-            </div>
-          </div>
-        </div>
+        <!-- Sidebar Toggle (Clearer for Course Content) -->
+        <q-btn 
+          flat 
+          rounded 
+          no-caps 
+          class="mr-2 text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors font-bold px-3" 
+          @click="toggleSidebar"
+        >
+           <q-icon name="format_list_bulleted" size="18px" class="mr-1.5" />
+           <span class="hidden md:inline">{{ $t('classroom.curriculum', 'เนื้อหาหลักสูตร') }}</span>
+        </q-btn>
         
         <q-toolbar-title class="text-base font-bold text-left truncate text-slate-900 dark:text-white">
            {{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }}
@@ -581,6 +585,7 @@ onBeforeUnmount(() => {
                v-if="currentLesson && videoSrc && !isLessonLoading"
                ref="videoPlayerComp"
                :src="videoSrc"
+               :poster="courseData?.course?.thumbnail_url"
                :initialSeekTime="initialSeekTime"
                @timeupdate="handleVideoTimeUpdate"
                @ended="onVideoEnded"
@@ -588,11 +593,21 @@ onBeforeUnmount(() => {
             />
             
             <!-- Skeleton Loader for Video/Content -->
-            <div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative">
-                <div class="absolute inset-0 bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 opacity-50"></div>
+            <div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative shadow-xl">
+                <!-- Course Thumbnail as a background during loading -->
+                <img 
+                    v-if="courseData?.course?.thumbnail_url"
+                    :src="courseData.course.thumbnail_url" 
+                    class="absolute inset-0 w-full h-full object-cover opacity-20 blur-md"
+                />
+                <div class="absolute inset-0 bg-gradient-to-br from-slate-200/50 to-slate-300/50 dark:from-slate-900/80 dark:to-slate-800/80"></div>
+                
                 <div class="z-10 flex flex-col items-center">
-                    <q-spinner size="4rem" color="primary" :thickness="4" />
-                    <p class="mt-4 text-slate-500 dark:text-slate-400 font-bold animate-bounce">{{ $t('common.loading') }}...</p>
+                    <div class="relative">
+                        <q-spinner size="4rem" color="primary" :thickness="4" />
+                        <q-icon name="play_circle" size="2rem" color="primary" class="absolute inset-0 m-auto opacity-50" />
+                    </div>
+                    <p class="mt-4 text-slate-600 dark:text-slate-300 font-black text-xs uppercase tracking-[0.2em] animate-pulse">{{ $t('common.loading') }}</p>
                 </div>
             </div>
             
@@ -600,7 +615,7 @@ onBeforeUnmount(() => {
              <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
                 <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
                 <div class="flex items-start justify-between gap-4 mb-4">
-                    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white leading-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
+                    <h1 class="text-3xl md:text-5xl font-black text-slate-900 dark:text-white leading-tight tracking-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
                 </div>
                 
                 <p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
@@ -615,10 +630,10 @@ onBeforeUnmount(() => {
                     
                     <div class="flex justify-center flex-wrap gap-3 text-sm mb-8">
                          <span v-if="currentLesson.quiz?.questions?.length" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold">
-                            <q-icon name="format_list_numbered" size="14px" class="text-blue-600" /> {{ currentLesson.quiz.questions.length }} ข้อ
+                            <q-icon name="format_list_numbered" size="14px" class="text-blue-600" /> {{ currentLesson.quiz.questions.length }} {{ $t('quiz.questions') }}
                          </span>
                          <span v-if="currentLesson.quiz?.time_limit" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold">
-                            <q-icon name="schedule" size="14px" class="text-orange-600" /> {{ currentLesson.quiz.time_limit }} นาที
+                            <q-icon name="schedule" size="14px" class="text-orange-600" /> {{ currentLesson.quiz.time_limit }} {{ $t('quiz.minutes') }}
                          </span>
                     </div>
 
@@ -627,7 +642,7 @@ onBeforeUnmount(() => {
                         size="lg" 
                         rounded 
                         no-caps
-                        :label="$t('quiz.startBtn', 'เริ่มทำแบบทดสอบ')" 
+                        :label="$t('quiz.startBtn')" 
                         icon="play_arrow"
                         @click="$router.push(`/classroom/quiz?course_id=${courseId}&lesson_id=${currentLesson.id}`)"
                     />
@@ -642,7 +657,7 @@ onBeforeUnmount(() => {
                         <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
                             <q-icon name="attach_file" size="18px" />
                         </div>
-                        {{ $t('classroom.attachments') || 'เอกสารประกอบการเรียน' }}
+                        {{ $t('classroom.attachments') }}
                     </h3>
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <a 

Frontend-Learner/pages/classroom/quiz.vue

@@ -11,7 +11,7 @@ definePageMeta({
   middleware: 'auth'
 })
 
-const { t } = useI18n()
+const { locale, t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const $q = useQuasar()
@@ -118,7 +118,8 @@ const timerDisplay = computed(() => {
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  const currentLocale = locale.value as 'th' | 'en'
+  return text[currentLocale] || text.th || text.en || ''
 }
 
 const lessonProgress = ref<any>(null)