feat: implement classroom learning interface for video lessons and progress tracking

Frontend-Learner/pages/classroom/learning.vue

@@ -99,13 +99,51 @@ const toggleSidebar = () => {
   sidebarOpen.value = !sidebarOpen.value
 }
 
+// Helper สำหรับรีเซ็ตข้อมูลและย้ายหน้า (Hard Reload)
+const resetAndNavigate = (path: string) => {
+  if (import.meta.client) {
+    // 1. เก็บข้อมูลที่ต้องการรักษาไว้ (Whitelist)
+    const whitelist: Record<string, string> = {}
+    const keepKeys = ['remembered_email', 'theme', 'auth_token'] // เพิ่ม auth_token เพื่อไม่ให้หลุด login
+    
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+        if (!key) continue
+        
+        // เก็บเฉพาะ key ที่อยู่ใน whitelist หรือเป็นข้อมูลประกาศ/แจ้งเตือน
+        if (keepKeys.includes(key) || key.startsWith('read_announcements:')) {
+            const value = localStorage.getItem(key)
+            if (value !== null) whitelist[key] = value
+        }
+    }
+    
+    // 2. ล้างข้อมูลใน localStorage ทั้งหมด
+    localStorage.clear()
+    
+    // 3. นำข้อมูลที่ยกเว้นกลับมาใส่คืน
+    Object.entries(whitelist).forEach(([key, value]) => {
+        localStorage.setItem(key, value)
+    })
+    
+    // 4. บังคับโหลดหน้าใหม่ทั้งหมด (Hard Reload) ไปที่ path ใหม่
+    window.location.href = path
+  } else {
+    // Fallback สำหรับ SSR
+    router.push(path)
+  }
+}
+
 // Logic loadLesson แยกออกมา
 const handleLessonSelect = (lessonId: number) => {
-  loadLesson(lessonId)
+  if (currentLesson.value?.id === lessonId) return
-  // Close sidebar on mobile when selecting a lesson
+  const url = new URL(window.location.href)
-  if (import.meta.client && window.innerWidth <= 1024) {
+  url.searchParams.set('lesson_id', lessonId.toString())
-    sidebarOpen.value = false
+  resetAndNavigate(url.toString())
-  }
+}
+
+// Logic สำหรับการกดย้อนกลับหรืออกจากหน้าเรียน
+const handleExit = (path: string) => {
+  resetAndNavigate(path)
 }
 
 // Data Fetching
@@ -472,13 +510,13 @@ onBeforeUnmount(() => {
             round 
             dense 
             icon="arrow_back" 
-            class="text-slate-600 dark:text-slate-300 hover:text-blue-600 transition-colors"
+            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="$router.push('/dashboard/my-courses')"
+            @click="handleExit('/dashboard/my-courses')"
           >
             <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
           </q-btn>
 
-          <div class="hidden sm:flex items-center gap-2 cursor-pointer group" @click="$router.push('/dashboard')">
+          <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>