feat: Add course discovery page for browsing, filtering, and viewing course details.

Frontend-Learner/pages/browse/discovery.vue

@@ -99,16 +99,30 @@ onMounted(() => {
 });
 
 // Filter Logic based on search query
+// Filter Logic based on search query and category
+const selectedCategoryIds = ref<number[]>([]);
+
 const filteredCourses = computed(() => {
-  if (!searchQuery.value) return courses.value;
+  let result = courses.value;
-  const query = searchQuery.value.toLowerCase();
+
-  return courses.value.filter(
+  // Filter by Category
-    (c) => {
+  if (selectedCategoryIds.value.length > 0) {
-      const title = getLocalizedText(c.title).toLowerCase();
+    result = result.filter(c => selectedCategoryIds.value.includes(c.category_id));
-      const desc = getLocalizedText(c.description).toLowerCase();
+  }
-      return title.includes(query) || (desc && desc.includes(query));
+
-    }
+  // Filter by Search Query
-  );
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    result = result.filter(
+      (c) => {
+        const title = getLocalizedText(c.title).toLowerCase();
+        const desc = getLocalizedText(c.description).toLowerCase();
+        return title.includes(query) || (desc && desc.includes(query));
+      }
+    );
+  }
+
+  return result;
 });
 </script>
 
@@ -187,6 +201,8 @@ const filteredCourses = computed(() => {
                   >
                     <input
                       type="checkbox"
+                      :value="cat.id"
+                      v-model="selectedCategoryIds"
                       class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary"
                     />
                     {{ getLocalizedText(cat.name) }}