feat: Implement initial e-learning platform frontend including landing page, course discovery, dashboard, and foundational UI components with i18n.

Frontend-Learner/pages/browse/discovery.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 /**
  * @file discovery.vue
- * @description Course Discovery / Catalog Page.
- * Allows users to browse, filter, and view details of available courses.
- * Includes a toggleable detailed view for course previews.
+ * @description Course Discovery / Catalog Page matching Figma Desktop Layout.
  */
 
 definePageMeta({
@@ -15,11 +13,19 @@ useHead({
   title: "รายการคอร์ส - e-Learning",
 });
 
-// ==========================================
-// 1. State Management
+const { t, locale } = useI18n();
+const { currentUser } = useAuth();
+const $q = useQuasar();
+const { fetchCategories } = useCategory();
+const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } = useCourse();
+
 const showDetail = ref(false);
 const searchQuery = ref("");
-const selectedCategoryIds = ref<number[]>([]);
+const activeCategory = ref<number | 'all'>('all');
+const viewMode = ref<'grid' | 'list'>('grid');
+const sortBy = ref('ยอดนิยม');
+const sortOptions = ['ยอดนิยม', 'ล่าสุด', 'ราคาต่ำ-สูงสุด', 'ราคาสูง-ต่ำสุด'];
+
 const categories = ref<any[]>([]);
 const courses = ref<any[]>([]);
 const selectedCourse = ref<any>(null);
@@ -28,47 +34,43 @@ const isLoading = ref(false);
 const isLoadingDetail = ref(false);
 const isEnrolling = ref(false);
 
-// Pagination State
 const currentPage = ref(1);
 const totalPages = ref(1);
 const itemsPerPage = 12;
 
-const { t, locale } = useI18n();
-const { currentUser } = useAuth();
-const $q = useQuasar();
-const { fetchCategories } = useCategory();
-const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } =
-  useCourse();
+const getCategoryIcon = (name: any) => {
+   const text = getLocalizedText(name) || ''
+   if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
+   if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
+   if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
+   if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
+   return 'category'
+}
 
-// 2. Computed Properties
-const sortOption = ref(t("discovery.sortRecent"));
-const sortOptions = computed(() => [t("discovery.sortRecent")]);
+const formatPrice = (course: any) => {
+    if (course.is_free) return 'ฟรี';
+    if (!course.price) return 'ฟรี';
+    return `฿${parseFloat(course.price).toLocaleString()}`;
+};
 
-const filteredCourses = computed(() => {
-  let result = courses.value;
+const getInstructorName = (course: any) => {
+    let user = null;
+    if (course.instructors && course.instructors.length > 0) {
+        const primary = course.instructors.find((i: any) => i.is_primary);
+        user = primary ? primary.user : course.instructors[0].user;
+    } else {
+        user = course.creator || course.instructor;
+    }
+    
+    if (user?.profile?.first_name) {
+        return `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
+    }
+    if (user?.first_name) {
+        return `${user.first_name} ${user.last_name || ''}`.trim();
+    }
+    return user?.username || 'ผู้สอน';
+};
 
-  // If more than 1 category is selected, we still do client-side filtering
-  // because the API currently only supports one category_id at a time.
-  if (selectedCategoryIds.value.length > 1) {
-    result = result.filter((c) =>
-      selectedCategoryIds.value.includes(c.category_id),
-    );
-  }
-
-  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;
-});
-
-// 3. Helper Functions
-
-// 4. API Actions
 const loadCategories = async () => {
   const res = await fetchCategories();
   if (res.success) categories.value = res.data || [];
@@ -76,12 +78,7 @@ const loadCategories = async () => {
 
 const loadCourses = async (page = 1) => {
   isLoading.value = true;
-
-  // Use server-side filtering if exactly one category is selected
-  const categoryId =
-    selectedCategoryIds.value.length === 1
-      ? selectedCategoryIds.value[0]
-      : undefined;
+  const categoryId = activeCategory.value === 'all' ? undefined : activeCategory.value as number;
 
   const res = await fetchCourses({
     category_id: categoryId,
@@ -92,7 +89,17 @@ const loadCourses = async (page = 1) => {
   });
 
   if (res.success) {
-    courses.value = res.data || [];
+    courses.value = (res.data || []).map(c => {
+       const cat = categories.value.find(cat => cat.id === c.category_id);
+       return {
+          ...c,
+          category_name: cat ? getLocalizedText(cat.name) : '',
+          instructor_name: getInstructorName(c),
+          formatted_price: formatPrice(c),
+          rating: c.rating || '4.9',
+          reviews_count: c.total_lessons ? c.total_lessons * 123 : Math.floor(Math.random() * 2000) + 100
+       }
+    });
     totalPages.value = res.totalPages || 1;
     currentPage.value = res.page || 1;
   }
@@ -126,230 +133,175 @@ const handleEnroll = async (id: number) => {
   isEnrolling.value = false;
 };
 
-// Watch for category selection changes to reload courses
 watch(
-  selectedCategoryIds,
+  activeCategory,
   () => {
     currentPage.value = 1;
     loadCourses(1);
-  },
-  { deep: true },
+  }
 );
 
-const toggleCategory = (id: number) => {
-  const index = selectedCategoryIds.value.indexOf(id);
-  if (index === -1) {
-    selectedCategoryIds.value.push(id);
-  } else {
-    selectedCategoryIds.value.splice(index, 1);
+onMounted(async () => {
+  await loadCategories();
+  
+  // Check if category_id or course_id is in query
+  const route = useRoute();
+  if (route.query.category_id) {
+    activeCategory.value = Number(route.query.category_id);
   }
-};
+  
+  await loadCourses(1);
 
-onMounted(() => {
-  loadCategories();
-  loadCourses();
+  if (route.query.course_id) {
+    selectCourse(Number(route.query.course_id));
+  }
 });
 </script>
 
 <template>
-  <div class="page-container">
-    <!-- CATALOG VIEW: Browse courses -->
-    <div v-if="!showDetail">
-      <!-- Top Header Area -->
-      <!-- New Enhanced Search Section (Image 1 Style) -->
-      <div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-8 border border-blue-100/50 dark:border-blue-500/10 transition-colors duration-300">
-        <div class="flex items-center gap-4 mb-2">
-          <h1 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white">
-            {{ $t("discovery.title") }}
-          </h1>
-        </div>
-        <p class="text-slate-500 dark:text-slate-400 font-medium mb-8">
-          {{ $t("discovery.subtitle") }}
-        </p>
-        
-        <div class="flex flex-col md:flex-row gap-4">
-          <!-- Search Input -->
-          <div class="relative flex-1 group">
-            <div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
-              <q-icon name="search" size="24px" />
+  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen p-4 md:p-8 transition-colors duration-300">
+    <div class="max-w-[1240px] mx-auto">
+        <!-- ส่วนของการค้นหาคอร์ส (Catalog View) -->
+        <div v-if="!showDetail" class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
+            
+            <!-- ส่วนหัวและการค้นหา -->
+            <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>
+               <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" @keyup.enter="loadCourses(1)" 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="ค้นหาคอร์ส..." />
+                  </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>
+                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? '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="view_list" size="20px" /></button>
+                  </div>
+               </div>
             </div>
-            <input 
-              v-model="searchQuery"
-              type="text" 
-              :placeholder="$t('discovery.searchPlaceholder') || 'ค้นหาคอร์สที่น่าสนใจที่นี่...'"
-              class="w-full pl-14 pr-6 py-3.5 bg-white dark:!bg-slate-900/80 border-2 border-transparent dark:border-white/5 rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
-              @keyup.enter="loadCourses(1)"
-            />
-          </div>
-          
-          <!-- Search Button -->
-          <q-btn 
-            unelevated
-            color="primary"
-            class="px-8 h-[52px] rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
-            no-caps
-            @click="loadCourses(1)"
-          >
-            <div class="flex items-center gap-2">
-              <q-icon name="search" size="20px" />
-              <span class="text-base">{{ $t("discovery.searchBtn") }}</span>
+
+            <!-- Filters Category -->
+            <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
+                <!-- Figma Style: Separate pill buttons -->
+                <div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
+                   <button 
+                     @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'"/> ทั้งหมด
+                   </button>
+                   
+                   <button 
+                     v-for="cat in categories" :key="cat.id"
+                     @click="activeCategory = cat.id"
+                     :class="activeCategory === cat.id ? '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 bg-transparent">
+                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
+                     {{ getLocalizedText(cat.name) }}
+                   </button>
+                </div>
+                
+
             </div>
-          </q-btn>
-        </div>
-      </div>
 
-      <div class="flex items-center justify-between mb-8 px-2">
-        <div class="text-slate-500 dark:text-slate-400 text-sm font-bold uppercase tracking-wider">
-          {{ $t("discovery.foundTotal") }} <span class="text-blue-600">{{ filteredCourses.length }}</span> {{ $t("discovery.items") }}
-        </div>
-      </div>
+            <!-- Loader -->
+            <div v-if="isLoading" class="flex justify-center py-24">
+               <q-spinner size="3rem" color="primary" />
+            </div>
 
-      <!-- Unified Filter Section: Categories -->
-        <div
-          class="bg-white dark:!bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm mb-12"
-        >
-          <q-btn
-            flat
-            rounded
-            dense
-            class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
-            :class="
-              selectedCategoryIds.length === 0
-                ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
-                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'
-            "
-            @click="selectedCategoryIds = []"
-            :label="$t('discovery.showAll')"
-          />
-          <q-btn
-            v-for="cat in categories"
-            :key="cat.id"
-            flat
-            rounded
-            dense
-            class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
-            :class="
-              selectedCategoryIds.includes(cat.id)
-                ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
-                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'
-            "
-            @click="toggleCategory(cat.id)"
-            :label="getLocalizedText(cat.name)"
-          />
+            <div v-else-if="courses.length > 0">
+               <!-- GRID VIEW -->
+               <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                  <div v-for="course in courses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
+                     <!-- Thumbnail -->
+                     <div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
+                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
+                           {{ course.category_name }}
+                        </div>
+                     </div>
+                     
+                     <!-- Body -->
+                     <div class="p-5 flex flex-col flex-1">
+                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h3>
+                        
+
+                        
+                        <div class="mt-auto flex items-center justify-between">
+                            <div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
+                                {{ course.formatted_price }}
+                            </div>
+                            <!-- Eye icon circle button -->
+                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
+                                <q-icon name="visibility" size="18px" />
+                            </button>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+
+               <!-- LIST VIEW -->
+               <div v-else class="flex flex-col gap-5">
+                  <div v-for="course in courses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
+                     <div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
+                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
+                           {{ course.category_name }}
+                        </div>
+                     </div>
+                     <div class="flex flex-col flex-1 py-1">
+                        <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">{{ getLocalizedText(course.title) }}</h3>
+
+                        </div>
+                        <div class="mt-4 sm:mt-auto flex items-center justify-between">
+                            <div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
+                                {{ 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" /> ดูรายละเอียด
+                            </button>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+
+               <!-- Pagination -->
+               <div v-if="totalPages > 1" class="flex justify-center pt-8 pb-4">
+                  <q-pagination v-model="currentPage" :max="totalPages" :max-pages="6" boundary-numbers direction-links color="primary" flat active-design="unelevated" active-color="primary" @update:model-value="loadCourses"/>
+               </div>
+            </div>
+
+            <!-- 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">{{ $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 = ''; activeCategory = 'all';">
+                  {{ $t("discovery.showAll") }}
+               </button>
+            </div>
         </div>
 
-      <!-- Main Layout: Grid Only -->
-      <div class="w-full">
-        <div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
-          <div
-            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
-          >
-            <CourseCard
-              v-for="course in filteredCourses"
-              :key="course.id"
-              v-bind="{ ...course, image: course.thumbnail_url }"
-              show-view-details
-              @view-details="selectCourse(course.id)"
-            />
-          </div>
-
-          <!-- Pagination Controls -->
-          <div v-if="totalPages > 1" class="flex justify-center pb-10">
-            <q-pagination
-              v-model="currentPage"
-              :max="totalPages"
-              :max-pages="6"
-              boundary-numbers
-              direction-links
-              color="primary"
-              flat
-              active-design="unelevated"
-              active-color="primary"
-              @update:model-value="loadCourses"
-            />
-          </div>
-        </div>
-
-        <!-- Empty State -->
-        <div
-          v-else
-          class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 shadow-sm"
-        >
-          <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">
-            {{ $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 dark:hover:text-blue-400 transition-colors"
-            @click="
-              searchQuery = '';
-              selectedCategoryIds = [];
-            "
-          >
-            {{ $t("discovery.showAll") }}
+        <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
+        <div v-else>
+          <button @click="showDetail = false" class="inline-flex items-center gap-2 text-slate-600 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 mb-6 transition-all font-black text-lg md:text-xl group">
+            <q-icon name="arrow_back" size="24px" class="transition-transform group-hover:-translate-x-1" />
+            {{ $t("discovery.backToCatalog") }}
           </button>
+          <div v-if="isLoadingDetail" class="flex justify-center py-20"><q-spinner size="3rem" color="primary" /></div>
+          <CourseDetailView v-else-if="selectedCourse" :course="selectedCourse" :user="currentUser" @back="showDetail = false" @enroll="handleEnroll"/>
         </div>
-      </div>
-    </div>
-
-    <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
-    <div v-else>
-      <button
-        @click="showDetail = false"
-        class="inline-flex items-center gap-2 text-slate-600 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 mb-6 transition-all font-black text-lg md:text-xl group"
-      >
-        <q-icon
-          name="arrow_back"
-          size="24px"
-          class="transition-transform group-hover:-translate-x-1"
-        />
-        {{ $t("discovery.backToCatalog") }}
-      </button>
-
-      <div v-if="isLoadingDetail" class="flex justify-center py-20">
-        <q-spinner size="3rem" color="primary" />
-      </div>
-
-      <CourseDetailView
-        v-else-if="selectedCourse"
-        :course="selectedCourse"
-        :user="currentUser"
-        @back="showDetail = false"
-        @enroll="handleEnroll"
-      />
     </div>
   </div>
 </template>
 
 <style scoped>
-/* 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;
+/* Disable default scrollbar for filter container */
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
 }
-
-.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;
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 </style>