feat: Implement course discovery and catalog page with browsing, filtering, search, and detailed course views.

Frontend-Learner/assets/css/main.css

@@ -1134,45 +1134,35 @@ ul {
   border-width: 2px !important;
 }
 
-/* ===========================
+/* ✅ FORCE WHITE DROPDOWN เฉพาะ Light mode (กันทับ Dark mode) */
-   Dropdown Menu Visibility Enhancement
+html:not(.dark) .q-menu,
-   =========================== */
+html:not(.dark) .q-menu .q-list {
-/* Force white background for all dropdown menus */
-.q-menu,
-.q-menu .q-list {
   background-color: #ffffff !important;
 }
 
-/* Dropdown menu items - simple dark text */
+html:not(.dark) .q-menu .q-item {
-.q-menu .q-item {
+  color: #0f172a !important;
-  color: #0f172a !important; /* slate-900 - dark text */
   background-color: transparent !important;
 }
 
-.q-menu .q-item__label {
+html:not(.dark) .q-menu .q-item__label {
-  color: #0f172a !important; /* slate-900 - dark text */
+  color: #0f172a !important;
-  font-weight: 400 !important; /* normal weight */
+  font-weight: 400 !important;
 }
 
-/* Subtle hover state */
+html:not(.dark) .q-menu .q-item:hover {
-.q-menu .q-item:hover {
+  background-color: #f8fafc !important;
-  background-color: #f8fafc !important; /* slate-50 - very light hover */
 }
 
-/* Selected/Active item - keep simple, just slightly darker text */
+html:not(.dark) .q-menu .q-item--active,
-.q-menu .q-item--active {
+html:not(.dark) .q-menu .q-item--active .q-item__label {
-  background-color: transparent !important; /* no background color */
+  background-color: transparent !important;
-  color: #0f172a !important; /* same dark text */
+  color: #0f172a !important;
+  font-weight: 500 !important;
 }
 
-.q-menu .q-item--active .q-item__label {
+html:not(.dark) .q-item__label,
-  color: #0f172a !important; /* same dark text */
+html:not(.dark) .q-select__dropdown .q-item {
-  font-weight: 500 !important; /* slightly bolder */
-}
-
-/* Force option text to be dark */
-.q-item__label,
-.q-select__dropdown .q-item {
   color: #0f172a !important;
 }
 

Frontend-Learner/pages/browse/discovery.vue

@@ -131,10 +131,7 @@ onMounted(() => {
             outlined
             rounded
             :placeholder="$t('discovery.searchPlaceholder')"
-            class="bg-white dark:bg-slate-800 w-full md:w-64"
+            class="disc-search w-full md:w-64"
-            bg-color="white"
-            color="slate-900"
-            :input-style="{ color: '#0f172a' }"
           >
             <template v-slot:append>
               <q-icon name="search" class="text-slate-400" />
@@ -149,13 +146,9 @@ onMounted(() => {
             outlined
             rounded
             :dark="false"
-            class="bg-white w-40"
+            class="disc-sort w-40"
-            bg-color="white"
-            color="slate-900"
-            :input-style="{ color: '#0f172a' }"
             :options-dark="false"
             options-dense
-            :popup-content-style="{ backgroundColor: '#ffffff', color: '#0f172a' }"
             popup-content-class="text-slate-900"
             behavior="menu"
           />
@@ -384,3 +377,57 @@ onMounted(() => {
   </div>
 </template>
 
+<style scoped>
+/* =========================
+   Discovery: Quasar Field Fix
+   - จำกัดผลกระทบเฉพาะช่องค้นหา/เรียงตาม
+   - ตัด focus ring (กรอบขาว 4 เหลี่ยม)
+   ========================= */
+
+/* ให้หน้าตา input เป็น pill ขาวเหมือนรูป (ทั้ง Light/Dark) */
+.disc-search :deep(.q-field__control),
+.disc-sort :deep(.q-field__control) {
+  background: #ffffff !important;
+  border-radius: 9999px !important;
+}
+
+/* สีตัวอักษร/placeholder/icon ให้คมชัด */
+.disc-search :deep(.q-field__native),
+.disc-search :deep(.q-field__input),
+.disc-sort :deep(.q-field__native),
+.disc-sort :deep(.q-field__input) {
+  color: #0f172a !important;
+  -webkit-text-fill-color: #0f172a !important;
+}
+
+.disc-search :deep(.q-placeholder),
+.disc-sort :deep(.q-placeholder) {
+  color: #64748b !important; /* slate-500 */
+}
+
+.disc-search :deep(.q-icon),
+.disc-sort :deep(.q-icon),
+.disc-sort :deep(.q-select__dropdown-icon) {
+  color: #64748b !important;
+}
+
+/* ✅ ตัด “Focus outline / Focus ring” ที่เป็นกรอบสว่าง */
+.disc-search :deep(.q-field__control:after),
+.disc-sort :deep(.q-field__control:after) {
+  opacity: 0 !important; /* ตัวนี้มักเป็นเส้น/แสงตอน focus */
+}
+
+/* คุมเส้นขอบปกติให้บาง ๆ ไม่เด้งเป็นกรอบขาว */
+.disc-search :deep(.q-field__control:before),
+.disc-sort :deep(.q-field__control:before) {
+  border-color: rgba(203, 213, 225, 0.9) !important; /* slate-300 */
+}
+
+/* กัน browser outline ซ้อน */
+.disc-search :deep(input:focus),
+.disc-sort :deep(input:focus) {
+  outline: none !important;
+  box-shadow: none !important;
+}
+</style>
+