From 4e7c25e29312e3a668de7a0ae68d9918b9a8bffd Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Mon, 9 Feb 2026 17:52:58 +0700
Subject: [PATCH] feat: implement course discovery page with category
 filtering, search, and pagination.

---
 .../components/discovery/CategorySidebar.vue   |  2 --
 Frontend-Learner/pages/browse/discovery.vue    | 18 +++++++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/Frontend-Learner/components/discovery/CategorySidebar.vue b/Frontend-Learner/components/discovery/CategorySidebar.vue
index fb67c7ef..3acdb932 100644
--- a/Frontend-Learner/components/discovery/CategorySidebar.vue
+++ b/Frontend-Learner/components/discovery/CategorySidebar.vue
@@ -29,8 +29,6 @@ const getLocalizedText = (text: any) => {
             :label="`หมวดหมู่ (${modelValue.length})`"
             class="font-bold text-slate-900 dark:text-white"
             header-class="bg-white dark:bg-slate-900"
-            text-color="slate-900"
-            :header-style="{ color: '#0f172a' }"
             default-opened
         >
             <q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index 8b69e78b..35351b9f 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -150,7 +150,7 @@ onMounted(() => {
             outlined
             rounded
             :placeholder="$t('discovery.searchPlaceholder')"
-            class="w-full md:w-72 bg-white dark:bg-slate-800 search-input"
+            class="w-full md:w-72 search-input"
             bg-color="transparent"
           >
             <template v-slot:prepend>
@@ -250,7 +250,23 @@ onMounted(() => {
 /* Standard overrides for Quasar inputs to match Tailwind theme */
 .search-input :deep(.q-field__control) {
   border-radius: 9999px; /* Full rounded pill */
+  background-color: white !important;
+  transition: all 0.3s ease;
 }
+
+.dark .search-input :deep(.q-field__control) {
+  background-color: #1e293b !important; /* slate-800: Inner card depth */
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.search-input :deep(.q-field__native) {
+  color: #0f172a !important; /* slate-900: Dark text for light mode */
+}
+
+.dark .search-input :deep(.q-field__native) {
+  color: white !important;
+}
+
 .search-input :deep(.q-field__shadow) {
   box-shadow: none !important;
 }