From 1eeec4d22cab79810379fba4ae2c0c43960e2495 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Tue, 10 Feb 2026 10:21:17 +0700
Subject: [PATCH] feat: Add CategorySidebar component to filter courses by
 category with show more/less functionality.

---
 .../components/discovery/CategorySidebar.vue  | 181 ++++++++++++------
 1 file changed, 126 insertions(+), 55 deletions(-)

diff --git a/Frontend-Learner/components/discovery/CategorySidebar.vue b/Frontend-Learner/components/discovery/CategorySidebar.vue
index 3acdb932..c5a31f3b 100644
--- a/Frontend-Learner/components/discovery/CategorySidebar.vue
+++ b/Frontend-Learner/components/discovery/CategorySidebar.vue
@@ -10,69 +10,140 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: number[]): void;
+  (e: "update:modelValue", value: number[]): void;
 }>();
 
 const showAllCategories = ref(false);
 
 const getLocalizedText = (text: any) => {
-    if (!text) return ''
-    if (typeof text === 'string') return text
-    return text.th || text.en || ''
-}
+  if (!text) return "";
+  if (typeof text === "string") return text;
+  return text.th || text.en || "";
+};
 </script>
 
 <template>
-    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
-        <q-expansion-item
-            expand-separator
-            :label="`หมวดหมู่ (${modelValue.length})`"
-            class="font-bold text-slate-900 dark:text-white"
-            header-class="bg-white dark:bg-slate-900"
-            default-opened
+  <div class="category-sidebar-root border rounded-2xl overflow-hidden shadow-sm">
+    <q-expansion-item
+      expand-separator
+      :label="`หมวดหมู่ (${modelValue.length})`"
+      class="category-sidebar-expansion"
+      header-class="category-sidebar-header"
+      default-opened
+    >
+      <q-list class="category-sidebar-list border-t">
+        <q-item
+          v-for="cat in showAllCategories ? categories : categories.slice(0, 4)"
+          :key="cat.id"
+          tag="label"
+          clickable
+          v-ripple
+          dense
+          class="category-item"
         >
-            <q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
-                <q-item
-                v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
-                :key="cat.id"
-                tag="label"
-                clickable
-                v-ripple
-                dense
-                >
-                <q-item-section avatar>
-                    <q-checkbox 
-                    :model-value="modelValue"
-                    @update:model-value="(val) => emit('update:modelValue', val)"
-                    :val="cat.id" 
-                    color="primary" 
-                    dense
-                    class="checkbox-visible"
-                    />
-                </q-item-section>
-                <q-item-section>
-                    <q-item-label class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ getLocalizedText(cat.name) }}</q-item-label>
-                </q-item-section>
-                </q-item>
+          <q-item-section avatar>
+            <q-checkbox
+              :model-value="modelValue"
+              @update:model-value="(val) => emit('update:modelValue', val)"
+              :val="cat.id"
+              color="primary"
+              dense
+              class="checkbox-visible"
+            />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label class="category-item-label text-sm font-medium">
+              {{ getLocalizedText(cat.name) }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
 
-                <!-- Show More/Less Button -->
-                <q-item
-                v-if="categories.length > 4"
-                clickable
-                v-ripple
-                @click="showAllCategories = !showAllCategories"
-                class="text-blue-600 dark:text-blue-400 font-bold text-sm"
-                >
-                <q-item-section>
-                    <div class="flex items-center gap-1">
-                        {{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="showAllCategories ? 'rotate-180' : ''">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                        </svg>
-                    </div>
-                </q-item-section>
-                </q-item>
-            </q-list>
-        </q-expansion-item>
-    </div>
+        <!-- Show More/Less Button -->
+        <q-item
+          v-if="categories.length > 4"
+          clickable
+          v-ripple
+          @click="showAllCategories = !showAllCategories"
+          class="show-more-item font-bold text-sm"
+        >
+          <q-item-section>
+            <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
+              {{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                :class="showAllCategories ? 'rotate-180' : ''"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </div>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-expansion-item>
+  </div>
 </template>
+
+<style scoped>
+/* Base Styles - Rely on main.css variables */
+.category-sidebar-root {
+  background-color: var(--bg-surface);
+  border-color: var(--border-color);
+  transition: all 0.3s ease;
+}
+
+/* Internal Quasar components color management */
+:deep(.category-sidebar-header),
+.category-sidebar-list {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-main) !important;
+}
+
+/* Labels and Icons - use var(--text-main) but force opacity */
+:deep(.q-item__label),
+:deep(.q-icon) {
+  color: var(--text-main) !important;
+  opacity: 1 !important;
+}
+
+.category-item-label {
+  color: var(--text-main);
+}
+
+/* ✅ DARK MODE SPECIFIC OVERRIDES using :global(.dark) as recommended */
+:global(.dark) .category-item-label {
+  color: #f8fafc !important; /* Forces slate-50 in dark mode */
+}
+
+:global(.dark) :deep(.category-sidebar-header *) {
+  color: #f8fafc !important;
+  opacity: 1 !important;
+}
+
+/* Hover effects */
+.category-item:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+:global(.dark) .category-item:hover {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Checkbox Label handling */
+:deep(.q-checkbox__label) {
+  color: var(--text-secondary) !important;
+}
+
+/* Show More button fix */
+.show-more-item {
+  background-color: transparent !important;
+}
+</style>