feat: Implement course discovery page with browsing, filtering, and detailed course views, supported by new course card and category sidebar components and a course composable.

Frontend-Learner/components/course/CourseCard.vue

@@ -39,10 +39,11 @@ const emit = defineEmits<{
   viewCertificate: []
 }>()
 
+const { locale } = useI18n()
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  return text[locale.value] || text.th || text.en || ''
 }
 
 const displayTitle = computed(() => getLocalizedText(props.title))

Frontend-Learner/components/discovery/CategorySidebar.vue

@@ -13,12 +13,13 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: number[]): void;
 }>();
 
+const { locale, t } = useI18n();
 const showAllCategories = ref(false);
 
 const getLocalizedText = (text: any) => {
   if (!text) return "";
   if (typeof text === "string") return text;
-  return text.th || text.en || "";
+  return text[locale.value] || text.th || text.en || "";
 };
 </script>
 
@@ -26,7 +27,7 @@ const getLocalizedText = (text: any) => {
   <div class="category-sidebar-root border rounded-2xl overflow-hidden shadow-sm">
     <q-expansion-item
       expand-separator
-      :label="`หมวดหมู่ (${modelValue.length})`"
+      :label="`${$t('discovery.categoryTitle')} (${modelValue.length})`"
       class="category-sidebar-expansion"
       header-class="category-sidebar-header"
       default-opened
@@ -67,7 +68,7 @@ const getLocalizedText = (text: any) => {
         >
           <q-item-section>
             <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
-              {{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
+              {{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="h-4 w-4"