From 853c141910d5993aa86d485388ccd182046be66d Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Fri, 6 Mar 2026 13:33:58 +0700
Subject: [PATCH] feat: Add i18n support with English and Thai locales and
 introduce new browse pages.

---
 Frontend-Learner/i18n/locales/en.json       |  6 +++++-
 Frontend-Learner/i18n/locales/th.json       |  6 +++++-
 Frontend-Learner/pages/browse/discovery.vue |  6 +++---
 Frontend-Learner/pages/browse/index.vue     | 23 +++++++++++----------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/Frontend-Learner/i18n/locales/en.json b/Frontend-Learner/i18n/locales/en.json
index b854b7c6..15c01013 100644
--- a/Frontend-Learner/i18n/locales/en.json
+++ b/Frontend-Learner/i18n/locales/en.json
@@ -117,7 +117,11 @@
     "foundTotal": "Found Total",
     "items": "items",
     "subtitle": "Choose to learn new skills from our curated quality courses",
-    "searchBtn": "Search"
+    "searchBtn": "Search",
+    "allCategory": "All",
+    "byInstructor": "by",
+    "students": "students",
+    "viewDetails": "View Details"
   },
   "myCourses": {
     "title": "My Courses",
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index d096b4ad..fd62257e 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -117,7 +117,11 @@
     "foundTotal": "พบทั้งหมด",
     "items": "รายการ",
     "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ",
-    "searchBtn": "ค้นหา"
+    "searchBtn": "ค้นหา",
+    "allCategory": "ทั้งหมด",
+    "byInstructor": "โดย",
+    "students": "นักเรียน",
+    "viewDetails": "ดูรายละเอียด"
   },
   "myCourses": {
     "title": "คอร์สของฉัน",
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index e44bb5ae..ee8c8035 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -184,7 +184,7 @@ onMounted(async () => {
             
             <!-- ส่วนหัวและการค้นหา -->
             <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">คอร์สเรียนทั้งหมด</h2>
+               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('discovery.title') }}</h2>
                <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
                   <div class="relative w-full sm:w-[260px] flex-1">
                      <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" />
@@ -205,7 +205,7 @@ onMounted(async () => {
                      @click="activeCategory = 'all'"
                      :class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
                      class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
-                     <q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> ทั้งหมด
+                     <q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> {{ $t('discovery.allCategory') }}
                    </button>
                    
                    <button 
@@ -276,7 +276,7 @@ onMounted(async () => {
                                 {{ course.formatted_price }}
                             </div>
                             <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
-                                <q-icon name="visibility" size="16px" /> ดูรายละเอียด
+                                <q-icon name="visibility" size="16px" /> {{ $t('discovery.viewDetails') }}
                             </button>
                         </div>
                      </div>
diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue
index c0e3f3c4..41500cb4 100644
--- a/Frontend-Learner/pages/browse/index.vue
+++ b/Frontend-Learner/pages/browse/index.vue
@@ -13,6 +13,7 @@ useHead({
   title: 'คอร์สทั้งหมด - E-Learning System'
 })
 
+const { t } = useI18n()
 const searchQuery = ref('')
 const { fetchCourses } = useCourse()
 const { fetchCategories, categories } = useCategory()
@@ -131,11 +132,11 @@ const viewMode = ref<'grid' | 'list'>('grid')
             
             <!-- ส่วนหัวและการค้นหา -->
             <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">คอร์สเรียนทั้งหมด</h2>
+               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('discovery.title') }}</h2>
                <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
                   <div class="relative w-full sm:w-[260px] flex-1">
                      <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
-                     <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" placeholder="ค้นหาคอร์ส..." />
+                     <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" :placeholder="$t('discovery.searchPlaceholder')" />
                   </div>
                   <div class="flex items-center gap-2 shrink-0">
                      <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
@@ -151,7 +152,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
                      @click="selectCategory('all')"
                      :class="selectedCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
                      class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
-                     <q-icon name="check_circle_outline" size="18px" :class="selectedCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> ทั้งหมด
+                     <q-icon name="check_circle_outline" size="18px" :class="selectedCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> {{ $t('discovery.allCategory') }}
                    </button>
                    
                    <button 
@@ -187,13 +188,13 @@ const viewMode = ref<'grid' | 'list'>('grid')
                         <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
                         
                         <div class="flex items-center gap-2 mb-4">
-                           <span class="text-[12px] text-slate-500 font-medium">โดย {{ course.instructor_name }}</span>
+                           <span class="text-[12px] text-slate-500 font-medium">{{ $t('discovery.byInstructor') }} {{ course.instructor_name }}</span>
                         </div>
 
                         <div class="flex items-center gap-1.5 mb-5">
                              <q-icon name="star" class="text-amber-400" size="16px" />
                              <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
-                             <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} นักเรียน)</span>
+                             <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} {{ $t('discovery.students') }})</span>
                         </div>
                         
                         <div class="mt-auto flex items-center justify-between">
@@ -222,12 +223,12 @@ const viewMode = ref<'grid' | 'list'>('grid')
                         <div class="flex-1">
                             <h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
                             <div class="flex items-center gap-2 mb-3">
-                               <span class="text-[13px] text-slate-500 font-medium">โดย {{ course.instructor_name }}</span>
+                               <span class="text-[13px] text-slate-500 font-medium">{{ $t('discovery.byInstructor') }} {{ course.instructor_name }}</span>
                             </div>
                             <div class="flex items-center gap-1.5 mb-2">
                                  <q-icon name="star" class="text-amber-400" size="16px" />
                                  <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
-                                 <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} นักเรียน)</span>
+                                 <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} {{ $t('discovery.students') }})</span>
                             </div>
                         </div>
                         <div class="mt-4 sm:mt-auto flex items-center justify-between">
@@ -235,7 +236,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
                                 {{ course.formatted_price }}
                             </div>
                             <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
-                                <q-icon name="visibility" size="16px" /> ดูรายละเอียด
+                                <q-icon name="visibility" size="16px" /> {{ $t('discovery.viewDetails') }}
                             </button>
                         </div>
                      </div>
@@ -246,10 +247,10 @@ const viewMode = ref<'grid' | 'list'>('grid')
             <!-- กรณีไม่พบข้อมูลคอร์ส (Empty State) -->
             <div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
                <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
-               <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ searchQuery ? 'ไม่พบคอร์สที่คุณค้นหา' : 'ไม่มีคอร์สในหมวดหมู่นี้' }}</h3>
-               <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">ลองใช้คำค้นหาอื่น หรือเลือกหมวดหมู่อื่นเพื่อดูคอร์สที่เรามีให้บริการ</p>
+               <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
+               <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('discovery.emptyDesc') }}</p>
                <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; selectedCategory = 'all';">
-                  แสดงคอร์สทั้งหมด
+                  {{ $t('discovery.showAll') }}
                </button>
             </div>
         </div>