From 8ba12396850e920e7c89cc5f600890fb5fc7f2c7 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Tue, 10 Feb 2026 11:08:10 +0700
Subject: [PATCH] feat: Implement course discovery page with category sidebar
 filtering.

---
 .../components/discovery/CategorySidebar.vue           |  1 -
 Frontend-Learner/pages/browse/discovery.vue            | 10 ++++++----
 Frontend-Learner/pages/classroom/learning.vue          |  6 ++++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/Frontend-Learner/components/discovery/CategorySidebar.vue b/Frontend-Learner/components/discovery/CategorySidebar.vue
index c5a31f3b..e5b8c1d6 100644
--- a/Frontend-Learner/components/discovery/CategorySidebar.vue
+++ b/Frontend-Learner/components/discovery/CategorySidebar.vue
@@ -35,7 +35,6 @@ const getLocalizedText = (text: any) => {
         <q-item
           v-for="cat in showAllCategories ? categories : categories.slice(0, 4)"
           :key="cat.id"
-          tag="label"
           clickable
           v-ripple
           dense
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index 35351b9f..9fb57233 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -165,10 +165,12 @@ onMounted(() => {
           
           <!-- LEFT SIDEBAR: Category Filter -->
           <div class="w-full lg:w-64 flex-shrink-0 lg:sticky lg:top-24 z-10">
-             <CategorySidebar
-                :categories="categories"
-                v-model="selectedCategoryIds"
-             />
+             <ClientOnly>
+               <CategorySidebar
+                  :categories="categories"
+                  v-model="selectedCategoryIds"
+               />
+             </ClientOnly>
           </div>
 
           <!-- RIGHT CONTENT: Course Grid -->
diff --git a/Frontend-Learner/pages/classroom/learning.vue b/Frontend-Learner/pages/classroom/learning.vue
index 975e5454..baeda65c 100644
--- a/Frontend-Learner/pages/classroom/learning.vue
+++ b/Frontend-Learner/pages/classroom/learning.vue
@@ -411,8 +411,14 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
         const isCompletedNow = res.success && (res.data?.is_completed || progressPercentage >= 0.95)
 
         if (isCompletedNow) {
+             const wasAlreadyCompleted = lesson.progress?.is_completed
              markLessonAsCompletedLocally(lesson.id)
              if (lesson.progress) lesson.progress.is_completed = true
+             
+             // If newly completed, reload course data to unlock next lesson in sidebar
+             if (!wasAlreadyCompleted) {
+                 await loadCourseData()
+             }
         }
     } catch (err) {
         console.error('Save progress failed', err)