feat: Implement core e-learning features including video playback, user profile management, and course discovery.

Frontend-Learner/components/discovery/CategorySidebar.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * @file CategorySidebar.vue
+ * @description Sidebar for filtering courses by category
+ */
+
+const props = defineProps<{
+  categories: any[];
+  modelValue: number[]; // selectedCategoryIds
+}>();
+
+const emit = defineEmits<{
+  (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 || ''
+}
+</script>
+
+<template>
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+        <q-expansion-item
+            expand-separator
+            :label="`หมวดหมู่ (${modelValue.length})`"
+            class="font-bold text-slate-900"
+            header-class="bg-white"
+            text-color="slate-900"
+            :header-style="{ color: '#0f172a' }"
+            default-opened
+        >
+            <q-list class="bg-white border-t border-slate-200">
+                <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">{{ 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 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>
+</template>