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

Frontend-Learner/components/classroom/AnnouncementModal.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+/**
+ * @file AnnouncementModal.vue
+ * @description Modal component to display course announcements
+ */
+
+const props = defineProps<{
+  modelValue: boolean;
+  announcements: any[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+// Helper for localization
+const getLocalizedText = (text: any) => {
+  if (!text) return ''
+  if (typeof text === 'string') return text
+  return text.th || text.en || ''
+}
+</script>
+
+<template>
+    <q-dialog :model-value="modelValue" @update:model-value="(val) => emit('update:modelValue', val)" backdrop-filter="blur(4px)">
+       <q-card class="min-w-[320px] md:min-w-[600px] rounded-3xl overflow-hidden bg-white dark:bg-slate-900 shadow-2xl">
+          <q-card-section class="bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-white/5 p-5 flex items-center justify-between sticky top-0 z-10">
+             <div>
+                 <div class="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
+                    <div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/30 text-primary flex items-center justify-center">
+                        <q-icon name="campaign" size="22px" />
+                    </div>
+                    {{ $t('classroom.announcements', 'ประกาศในคอร์สเรียน') }}
+                 </div>
+                 <div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} รายการ</div>
+             </div>
+             <q-btn icon="close" flat round dense v-close-popup class="text-slate-400 hover:text-slate-700 dark:hover:text-white bg-slate-50 dark:bg-slate-800" />
+          </q-card-section>
+
+          <q-card-section class="p-0 scroll max-h-[70vh] bg-slate-50 dark:bg-[#0B0F1A]">
+              <div v-if="announcements.length > 0" class="p-4 space-y-4">
+                     <div 
+                        v-for="(ann, index) in announcements" 
+                        :key="index" 
+                        class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
+                        :class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 bg-orange-50/50 dark:bg-orange-900/10': ann.is_pinned}"
+                     >
+                        <!-- Pinned Banner -->
+                        <div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
+                            <q-icon name="push_pin" color="orange" size="18px" class="transform rotate-45" />
+                        </div>
+
+                        <div class="flex items-start gap-4 mb-3">
+                           <q-avatar 
+                                :color="ann.is_pinned ? 'orange-100' : 'blue-50'" 
+                                :text-color="ann.is_pinned ? 'orange-700' : 'blue-700'" 
+                                size="42px" 
+                                font-size="20px"
+                                class="shadow-sm"
+                            >
+                                <span class="font-bold">{{ (getLocalizedText(ann.title) || 'A').charAt(0) }}</span>
+                            </q-avatar>
+                           <div class="flex-1">
+                              <div class="font-bold text-lg text-slate-900 dark:text-white leading-tight pr-8 capitalize font-display">
+                                {{ getLocalizedText(ann.title) || 'ประกาศ' }}
+                              </div>
+                              <div class="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-2 mt-1.5">
+                                  <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
+                                    <q-icon name="today" size="12px" />
+                                    {{ new Date(ann.created_at || Date.now()).toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' }) }}
+                                  </span>
+                                  <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
+                                    <q-icon name="access_time" size="12px" />
+                                    {{ new Date(ann.created_at || Date.now()).toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' }) }}
+                                  </span>
+                              </div>
+                           </div>
+                        </div>
+                        
+                        <div class="pl-[58px]">
+                           <div class="text-slate-600 dark:text-slate-300 leading-relaxed text-sm whitespace-pre-wrap">
+                               {{ getLocalizedText(ann.content) }}
+                           </div>
+                        </div>
+                     </div>
+              </div>
+              <div v-else class="p-10 flex flex-col items-center justify-center text-slate-400">
+                  <q-icon name="campaign" size="40px" class="mb-2 opacity-50" />
+                  <p>{{ $t('classroom.noAnnouncements', 'ไม่มีประกาศในขณะนี้') }}</p>
+              </div>
+          </q-card-section>
+       </q-card>
+    </q-dialog>
+</template>

Frontend-Learner/components/classroom/CurriculumSidebar.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * @file CurriculumSidebar.vue
+ * @description Sidebar Component for displaying course curriculum (Chapters & Lessons)
+ * Handles lesson navigation, locked status display, and unread announcement badge.
+ */
+
+const props = defineProps<{
+  modelValue: boolean; // Sidebar open state (v-model)
+  courseData: any;
+  currentLessonId: number;
+  isLoading: boolean;
+  hasUnreadAnnouncements: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'select-lesson', lessonId: number): void;
+  (e: 'open-announcements'): void;
+}>();
+
+// Helper for localization
+const getLocalizedText = (text: any) => {
+  if (!text) return ''
+  if (typeof text === 'string') return text
+  return text.th || text.en || ''
+}
+</script>
+
+<template>
+    <q-drawer
+      :model-value="modelValue"
+      @update:model-value="(val) => emit('update:modelValue', val)"
+      show-if-above
+      bordered
+      side="left"
+      :width="320"
+      :breakpoint="1024"
+      class="bg-[var(--bg-surface)]"
+      content-class="bg-[var(--bg-surface)]"
+    >
+      <div v-if="courseData" class="h-full scroll">
+         <q-list class="pb-10">
+            <!-- Announcements Sidebar Item -->
+             <q-item 
+                clickable 
+                v-ripple 
+                @click="emit('open-announcements')" 
+                class="bg-blue-50 dark:bg-blue-900/10 border-b border-blue-100 dark:border-blue-900/20"
+             >
+                <q-item-section>
+                   <q-item-label class="font-bold text-slate-800 dark:text-blue-200 text-sm pl-2">
+                       {{ $t('classroom.announcements', 'ประกาศในคอร์ส') }}
+                   </q-item-label>
+                </q-item-section>
+                <q-item-section side v-if="hasUnreadAnnouncements">
+                    <q-badge color="red" rounded label="New" />
+                </q-item-section>
+             </q-item>
+
+            <template v-for="chapter in courseData.chapters" :key="chapter.id">
+              <q-item-label header class="bg-slate-100 dark:bg-slate-800 text-[var(--text-main)] font-bold sticky top-0 z-10 border-b dark:border-white/5 text-sm py-4">
+                 {{ getLocalizedText(chapter.title) }}
+              </q-item-label>
+
+              <q-item
+                v-for="lesson in chapter.lessons"
+                :key="lesson.id"
+                clickable
+                v-ripple
+                :active="currentLessonId === lesson.id"
+                active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium"
+                class="border-b border-gray-50 dark:border-white/5"
+                @click="!lesson.is_locked && emit('select-lesson', lesson.id)"
+                :disable="lesson.is_locked"
+              >
+                <q-item-section avatar v-if="lesson.is_locked">
+                  <q-icon name="lock" size="xs" color="grey" />
+                </q-item-section>
+                
+                <q-item-section>
+                  <q-item-label class="text-sm md:text-base line-clamp-2 text-[var(--text-main)]">
+                    {{ getLocalizedText(lesson.title) }}
+                  </q-item-label>
+                </q-item-section>
+
+                <q-item-section side>
+                   <q-icon v-if="lesson.is_completed" name="check_circle" color="positive" size="xs" />
+                   <q-icon v-else-if="currentLessonId === lesson.id" name="play_circle" color="primary" size="xs" />
+                   <q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
+                </q-item-section>
+              </q-item>
+            </template>
+         </q-list>
+      </div>
+      <div v-else-if="isLoading" class="p-6 text-center text-slate-500">
+         <q-spinner color="primary" size="2em" />
+         <div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div>
+      </div>
+    </q-drawer>
+</template>

Frontend-Learner/components/classroom/VideoPlayer.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * @file VideoPlayer.vue
+ * @description Video Player Component with custom controls provided by design
+ */
+
+const props = defineProps<{
+    src: string;
+    initialSeekTime?: number;
+}>();
+
+const emit = defineEmits<{
+    (e: 'timeupdate', currentTime: number, duration: number): void;
+    (e: 'ended'): void;
+    (e: 'loadedmetadata'): void;
+}>();
+
+const videoRef = ref<HTMLVideoElement | null>(null);
+const isPlaying = ref(false);
+const videoProgress = ref(0);
+const currentTime = ref(0);
+const duration = ref(0);
+
+// Media Prefs
+const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();
+
+const volumeIcon = computed(() => {
+    if (isMuted.value || volume.value === 0) return 'volume_off';
+    if (volume.value < 0.5) return 'volume_down';
+    return 'volume_up';
+});
+
+const formatTime = (time: number) => {
+    const m = Math.floor(time / 60);
+    const s = Math.floor(time % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
+const currentTimeDisplay = computed(() => formatTime(currentTime.value));
+const durationDisplay = computed(() => formatTime(duration.value || 0));
+
+const togglePlay = () => {
+    if (!videoRef.value) return;
+    if (isPlaying.value) videoRef.value.pause();
+    else videoRef.value.play();
+    isPlaying.value = !isPlaying.value;
+};
+
+const handleTimeUpdate = () => {
+    if (!videoRef.value) return;
+    currentTime.value = videoRef.value.currentTime;
+    duration.value = videoRef.value.duration;
+    videoProgress.value = (currentTime.value / duration.value) * 100;
+    
+    emit('timeupdate', currentTime.value, duration.value);
+};
+
+const handleLoadedMetadata = () => {
+    if (videoRef.value) {
+        applyTo(videoRef.value);
+        if (props.initialSeekTime && props.initialSeekTime > 0) {
+             const seekTo = Math.min(props.initialSeekTime, videoRef.value.duration || Infinity)
+             videoRef.value.currentTime = seekTo;
+        }
+    }
+    emit('loadedmetadata');
+};
+
+const handleEnded = () => {
+    isPlaying.value = false;
+    emit('ended');
+};
+
+const seek = (e: MouseEvent) => {
+    if (!videoRef.value) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    videoRef.value.currentTime = percent * videoRef.value.duration;
+};
+
+const handleToggleMute = () => {
+    setMuted(!isMuted.value);
+};
+
+const handleVolumeChange = (val: any) => {
+    const newVol = typeof val === 'number' ? val : Number(val.target.value);
+    setVolume(newVol);
+};
+
+// Expose video ref for parent to control if needed
+defineExpose({
+    videoRef,
+    pause: () => videoRef.value?.pause(),
+    currentTime: () => videoRef.value?.currentTime || 0
+});
+
+// Watch for volume/mute changes to apply to video element
+watch([volume, isMuted], () => {
+    if (videoRef.value) applyTo(videoRef.value);
+});
+</script>
+
+<template>
+    <div class="bg-black rounded-xl overflow-hidden shadow-2xl mb-6 aspect-video relative group ring-1 ring-white/10">
+        <video
+            ref="videoRef"
+            :src="src"
+            class="w-full h-full object-contain"
+            @click="togglePlay"
+            @timeupdate="handleTimeUpdate"
+            @loadedmetadata="handleLoadedMetadata"
+            @ended="handleEnded"
+        />
+       
+        <!-- Custom Controls Overlay -->
+        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity opacity-0 group-hover:opacity-100">
+            <div class="flex items-center gap-4 text-white">
+                <q-btn flat round dense :icon="isPlaying ? 'pause' : 'play_arrow'" @click.stop="togglePlay" />
+                <div class="relative flex-grow h-1.5 bg-white/20 rounded-full cursor-pointer group/progress overflow-hidden" @click="seek">
+                    <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover/progress:bg-blue-400 transition-all shadow-[0_0_10px_rgba(59,130,246,0.5)]" :style="{ width: videoProgress + '%' }"></div>
+                </div>
+                <span class="text-xs font-mono font-medium opacity-90">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
+                
+                <!-- Volume Control -->
+                <div class="flex items-center gap-2 group/volume">
+                    <q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" />
+                    <div class="w-0 group-hover/volume:w-20 overflow-hidden transition-all duration-300 flex items-center">
+                        <input 
+                            type="range" 
+                            min="0" 
+                            max="1" 
+                            step="0.1" 
+                            :value="volume" 
+                            @input="handleVolumeChange"
+                            class="w-20 h-1 bg-white/30 rounded-lg appearance-none cursor-pointer accent-blue-500"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

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>

Frontend-Learner/components/discovery/CourseDetailView.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/**
+ * @file CourseDetailView.vue
+ * @description Quick view of course details including video preview, curriculum, and enroll logic
+ */
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
+    course: any;
+    user: any;
+}>();
+
+const emit = defineEmits<{
+    (e: 'back'): void;
+    (e: 'enroll', courseId: number): void;
+}>();
+
+const getLocalizedText = (text: any) => {
+    if (!text) return ''
+    if (typeof text === 'string') return text
+    return text.th || text.en || ''
+}
+
+const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB' }).format(price);
+}
+
+const enrollmentLoading = ref(false);
+
+const handleEnroll = () => {
+    if(!props.course) return;
+    enrollmentLoading.value = true;
+    emit('enroll', props.course.id);
+    // Loading state reset depends on parent, but locally we can reset after emit or keep until prop changes
+    // In this pattern, we just emit.
+    setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
+};
+
+</script>
+
+<template>
+    <div class="animate-fade-in-up">
+        <q-btn 
+            flat 
+            icon="arrow_back" 
+            label="ย้อนกลับ" 
+            class="mb-6 font-bold text-slate-500 hover:text-slate-800 transition-colors"
+            @click="emit('back')"
+        />
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left: Content Detail -->
+            <div class="lg:col-span-2 space-y-8">
+                
+                <!-- Video Preview Section -->
+                <div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group bg-black">
+                     <template v-if="course.media?.video_url">
+                         <video 
+                             controls 
+                             class="w-full h-full object-cover" 
+                             :poster="course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
+                         >
+                             <source :src="course.media.video_url" type="video/mp4">
+                             Your browser does not support the video tag.
+                         </video>
+                     </template>
+                     <!-- Placeholder if no video -->
+                     <template v-else>
+                         <img 
+                            :src="course.cover_image || 'https://placehold.co/800x450?text=No+Preview'" 
+                            class="w-full h-full object-cover opacity-60"
+                        />
+                         <div class="absolute inset-0 flex items-center justify-center">
+                             <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center ring-1 ring-white/50">
+                                 <q-icon name="play_arrow" size="40px" class="text-white" />
+                             </div>
+                         </div>
+                     </template>
+                </div>
+
+                <!-- Course Title & Description -->
+                <div>
+                    <h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 leading-tight">
+                        {{ getLocalizedText(course.title) }}
+                    </h1>
+                    <div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 mb-6">
+                        <span class="flex items-center gap-1 bg-slate-100 px-3 py-1 rounded-full text-slate-700 font-medium">
+                            <q-icon name="category" size="16px" class="text-blue-500" />
+                            {{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
+                        </span>
+                         <span class="flex items-center gap-1">
+                            <q-icon name="schedule" size="16px" />
+                            {{ course.duration_minutes || 60 }} นาที
+                        </span>
+                         <span class="flex items-center gap-1">
+                            <q-icon name="person" size="16px" />
+                            {{ course.instructor?.first_name }} {{ course.instructor?.last_name }}
+                        </span>
+                    </div>
+
+                    <div class="prose max-w-none text-slate-600 leading-relaxed font-light">
+                        <p>{{ getLocalizedText(course.description) }}</p>
+                    </div>
+                </div>
+
+                <!-- Curriculum Preview -->
+                <div class="bg-slate-50 rounded-3xl p-6 md:p-8">
+                    <h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
+                         <q-icon name="list_alt" class="text-blue-600" />
+                         เนื้อหาบทเรียน
+                    </h3>
+                    
+                    <div class="space-y-4">
+                        <div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                             <div class="px-6 py-4 bg-slate-100 font-bold text-slate-800 flex justify-between items-center">
+                                 <span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
+                                 <span class="text-xs text-slate-500 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
+                             </div>
+                             <div class="divide-y divide-slate-100">
+                                 <div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 hover:bg-slate-50 transition-colors">
+                                     <q-icon 
+                                        :name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'" 
+                                        :class="lesson.type === 'VIDEO' ? 'text-blue-500' : 'text-orange-500'" 
+                                        size="18px"
+                                     />
+                                     <span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
+                                     <span v-if="lesson.duration_minutes" class="text-slate-400 text-xs">{{ lesson.duration_minutes }} นาที</span>
+                                     <q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300" />
+                                 </div>
+                             </div>
+                        </div>
+                         <div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 py-8">
+                             ยังไม่มีเนื้อหาในขณะนี้
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- Right: Enrollment Card -->
+            <div class="lg:col-span-1">
+                 <div class="sticky top-24">
+                     <div class="bg-white rounded-3xl shadow-xl shadow-slate-200/50 p-6 border border-slate-100 relative overflow-hidden">
+                          <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
+                          
+                          <div class="relative">
+                            <div class="text-3xl font-black text-slate-900 mb-2 font-display">
+                                {{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
+                            </div>
+                            <div v-if="course.price > 0" class="text-sm text-slate-500 mb-6 line-through">
+                                 {{ formatPrice(course.price * 2) }}
+                            </div>
+
+                            <q-btn
+                                unelevated
+                                rounded
+                                size="lg"
+                                color="primary"
+                                class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
+                                :label="user ? (course.enrolled ? 'เข้าสู่บทเรียน' : (course.price > 0 ? 'ซื้อคอร์สเรียนนี้' : 'ลงทะเบียนเรียนฟรี')) : 'เข้าสู่ระบบเพื่อลงทะเบียน'"
+                                :loading="enrollmentLoading"
+                                @click="handleEnroll"
+                            />
+                            
+                            <div class="text-xs text-center text-slate-400">
+                                รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
+                            </div>
+
+                            <hr class="my-6 border-slate-100">
+                             
+                            <div class="space-y-3 block">
+                                <div class="flex items-center gap-3 text-sm text-slate-600">
+                                    <q-icon name="check_circle" class="text-green-500" />
+                                    เข้าเรียนได้ตลอดชีพ
+                                </div>
+                                <div class="flex items-center gap-3 text-sm text-slate-600">
+                                    <q-icon name="check_circle" class="text-green-500" />
+                                    ทำแบบทดสอบไม่จำกัด
+                                </div>
+                                <div class="flex items-center gap-3 text-sm text-slate-600">
+                                    <q-icon name="check_circle" class="text-green-500" />
+                                    ใบประกาศนียบัตรเมื่อเรียนจบ
+                                </div>
+                            </div>
+                          </div>
+                     </div>
+                 </div>
+            </div>
+        </div>
+    </div>
+</template>

Frontend-Learner/components/profile/PasswordChangeForm.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/**
+ * @file PasswordChangeForm.vue
+ * @description From for changing user password
+ */
+
+const props = defineProps<{
+  modelValue: any; // passwordForm (currentPassword, newPassword, confirmPassword)
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+  (e: 'submit'): void;
+}>();
+
+const { t } = useI18n();
+
+const passwordRules = [
+  (val: string) => !!val || t('common.required'),
+  (val: string) => val.length >= 6 || t('common.passwordTooShort'),
+  (val: string) => val !== props.modelValue.currentPassword || 'รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านปัจจุบัน'
+];
+
+const confirmPasswordRules = [
+  (val: string) => !!val || t('common.required'),
+  (val: string) => val === props.modelValue.newPassword || t('common.passwordsDoNotMatch')
+];
+
+const showCurrentPassword = ref(false);
+const showNewPassword = ref(false);
+const showConfirmPassword = ref(false);
+</script>
+
+<template>
+    <div class="card-premium p-8 h-fit">
+        <h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
+        <q-icon name="lock" class="text-amber-500 text-2xl" />
+        {{ $t('profile.security') }}
+        </h2>
+        
+        <q-form @submit="emit('submit')" class="flex flex-col gap-6">
+            <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">
+            {{ $t('profile.securityDesc') }}
+            </div>
+
+            <div class="space-y-4">
+            <div>
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.currentPassword') }}</label>
+                <q-input
+                v-model="modelValue.currentPassword"
+                :type="showCurrentPassword ? 'text' : 'password'"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    placeholder=""
+                    :rules="[val => !!val || $t('common.required')]"
+                >
+                <template v-slot:append>
+                    <q-icon
+                    :name="showCurrentPassword ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer text-slate-400"
+                    @click="showCurrentPassword = !showCurrentPassword"
+                    />
+                </template>
+                </q-input>
+            </div>
+
+            <q-separator class="bg-slate-100 dark:bg-white/5 my-2" />
+
+            <div>
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.newPassword') }}</label>
+                <q-input
+                v-model="modelValue.newPassword"
+                :type="showNewPassword ? 'text' : 'password'"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    :placeholder="$t('profile.newPasswordHint')"
+                    :rules="passwordRules"
+                >
+                <template v-slot:append>
+                    <q-icon
+                    :name="showNewPassword ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer text-slate-400"
+                    @click="showNewPassword = !showNewPassword"
+                    />
+                </template>
+                </q-input>
+            </div>
+
+            <div>
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.confirmNewPassword') }}</label>
+                <q-input
+                v-model="modelValue.confirmPassword"
+                :type="showConfirmPassword ? 'text' : 'password'"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    :placeholder="$t('profile.confirmPasswordHint')"
+                    :rules="confirmPasswordRules"
+                >
+                <template v-slot:append>
+                    <q-icon
+                    :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer text-slate-400"
+                    @click="showConfirmPassword = !showConfirmPassword"
+                    />
+                </template>
+                </q-input>
+            </div>
+            </div>
+
+            <div class="pt-2">
+            <q-btn
+            type="submit"
+                unelevated
+                rounded
+                class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
+                style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
+                :label="$t('profile.changePasswordBtn')"
+                :loading="loading"
+            />
+        </div>
+        </q-form>
+    </div>
+</template>
+
+<style scoped>
+.card-premium {
+  @apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
+  border-radius: 1.5rem;
+  border-width: 1px;
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+.dark .card-premium {
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
+}
+
+.premium-q-input :deep(.q-field__control) {
+  border-radius: 12px;
+}
+.dark .premium-q-input :deep(.q-field__control) {
+  background: #0f172a;
+}
+.dark .premium-q-input :deep(.q-field__native) {
+  color: white;
+}
+.dark .premium-q-input :deep(.q-field__label) {
+  color: #94a3b8;
+}
+</style>

Frontend-Learner/components/profile/ProfileEditForm.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+/**
+ * @file ProfileEditForm.vue
+ * @description From for editing user personal information
+ */
+
+const props = defineProps<{
+    modelValue: any; // userData (firstName, lastName, phone, etc.)
+    loading: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: any): void;
+    (e: 'submit'): void;
+    (e: 'upload', file: File): void;
+}>();
+
+const { t } = useI18n();
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const nameRules = [(val: string) => !!val || t('common.required')];
+const emailRules = [
+  (val: string) => !!val || t('common.required'),
+  (val: string) => /.+@.+\..+/.test(val) || t('common.invalidEmail')
+];
+const phoneRules = [
+  (val: string) => !!val || t('common.required'),
+  (val: string) => /^0[0-9]{8,9}$/.test(val) || t('common.invalidPhone')
+];
+
+const triggerUpload = () => {
+  fileInput.value?.click();
+};
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (target.files && target.files[0]) {
+    emit('upload', target.files[0]);
+  }
+};
+</script>
+
+<template>
+    <div class="card-premium p-8 h-fit">
+        <h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
+            <q-icon name="person" class="text-blue-500 text-2xl" />
+            {{ $t('profile.editPersonalDesc') }}
+        </h2>
+
+        <div class="flex flex-col gap-6">
+        
+        <div class="flex items-center gap-6">
+            <div class="relative group cursor-pointer" @click="triggerUpload">
+                <UserAvatar 
+                :photo-u-r-l="modelValue.photoURL" 
+                :first-name="modelValue.firstName" 
+                :last-name="modelValue.lastName" 
+                size="80"
+                class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
+                />
+            
+                <div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                    <q-icon name="camera_alt" class="text-white text-xl" />
+                </div>
+                <!-- Hidden Input -->
+                <input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
+            </div>
+            
+            <div class="flex flex-col gap-2">
+            <div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
+            
+            <!-- Buttons Row -->
+                <div class="flex items-center gap-3">
+                <template v-if="modelValue.photoURL">
+                    <q-btn 
+                        unelevated
+                        rounded
+                        color="primary" 
+                        :label="$t('profile.changeAvatar')" 
+                        class="font-bold shadow-lg shadow-blue-500/30"
+                        @click="triggerUpload"
+                    />
+                </template>
+                <template v-else>
+                        <q-btn 
+                        unelevated
+                        rounded
+                        color="primary" 
+                        :label="$t('profile.uploadNew')" 
+                        class="font-bold shadow-lg shadow-blue-500/30"
+                        @click="triggerUpload"
+                    />
+                </template>
+                </div>
+
+            <!-- Add Limit Text -->
+            <div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                {{ $t('profile.uploadLimit') }}
+            </div>
+            </div>
+        </div>
+
+        <q-separator class="bg-slate-100 dark:bg-white/5" />
+
+        <q-form @submit="emit('submit')" class="flex flex-col gap-6">
+
+        <div class="grid grid-cols-1 gap-4">
+            <div class="space-y-1">
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
+                <q-select
+                v-model="modelValue.prefix"
+                :options="['นาย', 'นาง', 'นางสาว']"
+                outlined
+                dense
+                rounded
+                class="premium-q-input"
+                popup-content-class="text-slate-900"
+                />
+            </div>
+            
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.firstName') }}</label>
+                <q-input
+                    v-model="modelValue.firstName"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    :rules="nameRules"
+                    hide-bottom-space
+                />
+                </div>
+                <div>
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.lastName') }}</label>
+                <q-input
+                    v-model="modelValue.lastName"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    :rules="nameRules"
+                    hide-bottom-space
+                />
+                </div>
+            </div>
+
+            <div>
+                <div class="flex justify-between items-end mb-1">
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
+
+                </div>
+                <q-input
+                v-model="modelValue.email"
+                type="email"
+                outlined dense rounded
+                class="premium-q-input"
+                :rules="emailRules"
+                    hide-bottom-space
+                    disable
+                    :hint="$t('profile.emailHint')"
+                />
+            </div>
+
+            <div>
+                <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.phone') }}</label>
+                <q-input
+                v-model="modelValue.phone"
+                outlined dense rounded
+                class="premium-q-input"
+                :rules="phoneRules"
+                hide-bottom-space
+                />
+            </div>
+        </div>
+
+        <div class="pt-2">
+            <q-btn
+            type="submit"
+            unelevated
+            rounded
+            color="primary"
+            class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
+            :label="$t('common.save')"
+            :loading="loading"
+            />
+        </div>
+        </q-form>
+        
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.card-premium {
+  @apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
+  border-radius: 1.5rem;
+  border-width: 1px;
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+.dark .card-premium {
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
+}
+
+.premium-q-input :deep(.q-field__control) {
+  border-radius: 12px;
+}
+.dark .premium-q-input :deep(.q-field__control) {
+  background: #0f172a;
+}
+.dark .premium-q-input :deep(.q-field__native) {
+  color: white;
+}
+.dark .premium-q-input :deep(.q-field__label) {
+  color: #94a3b8;
+}
+</style>

Frontend-Learner/pages/browse/discovery.vue

@@ -27,9 +27,10 @@ const selectedCourse = ref<any>(null);
 const isLoading = ref(false);
 const isLoadingDetail = ref(false);
 const isEnrolling = ref(false);
-const showAllCategories = ref(false);
+
 
 const { t } = useI18n();
+const { currentUser } = useAuth();
 const { fetchCategories } = useCategory();
 const { fetchCourses, fetchCourseById, enrollCourse } = useCourse();
 
@@ -142,59 +143,10 @@ onMounted(() => {
           
           <!-- LEFT SIDEBAR: Category Filter -->
           <div class="w-full lg:w-64 flex-shrink-0 lg:sticky lg:top-24">
-             <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+             <CategorySidebar
-                <q-expansion-item
+                :categories="categories"
-                    expand-separator
-                    :label="`หมวดหมู่ (${selectedCategoryIds.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 
                 v-model="selectedCategoryIds"
-                            :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>
           </div>
 
           <!-- RIGHT CONTENT: Course Grid -->
@@ -248,96 +200,14 @@ onMounted(() => {
          <q-spinner size="3rem" color="primary" />
       </div>
 
-      <div v-else-if="selectedCourse" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
+      <CourseDetailView
-        <!-- Main Content (Left Column) -->
+        v-else-if="selectedCourse"
-        <div class="lg:col-span-8">
+        :course="selectedCourse"
-          <!-- Hero Video Placeholder -->
+        :user="currentUser"
-          <div
+        @back="showDetail = false"
-            class="w-full aspect-video bg-slate-900 rounded-3xl overflow-hidden relative shadow-lg mb-8 group"
+        @enroll="handleEnroll"
-          >
-             <img 
-               v-if="selectedCourse.thumbnail_url" 
-               :src="selectedCourse.thumbnail_url" 
-               class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"
       />
     </div>
-
-          <h1 class="text-3xl md:text-4xl font-bold mb-4 text-slate-900 dark:text-white tracking-tight">
-            {{ getLocalizedText(selectedCourse.title) }}
-          </h1>
-          <p class="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-8">
-            {{ getLocalizedText(selectedCourse.description) }}
-          </p>
-
-          <!-- Course Syllabus -->
-          <div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-700">
-            <h3 class="text-xl font-bold mb-6 text-slate-900 flex items-center gap-2">
-               <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
-               {{ $t('course.courseContent') }}
-            </h3>
-            <div class="space-y-4">
-                <div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
-                   <div class="bg-slate-50 dark:bg-slate-700/50 p-4 flex justify-between items-center cursor-pointer">
-                      <div class="font-bold text-slate-800 dark:text-slate-100">
-                          <span class="opacity-50 mr-2">Chapter {{ Number(index) + 1 }}</span>
-                          {{ getLocalizedText(chapter.title) }}
-                      </div>
-                      <span class="text-xs font-bold px-3 py-1 bg-white rounded-full border border-slate-200">
-                          {{ chapter.lessons ? chapter.lessons.length : 0 }} Lessons
-                      </span>
-                   </div>
-                   <!-- Lessons -->
-                   <div class="divide-y divide-slate-100 dark:divide-slate-700 bg-white dark:bg-slate-800">
-                       <div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
-                           <div class="flex items-center gap-3">
-                               <div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-slate-400">
-                                   {{ Number(lIndex) + 1 }}
-                               </div>
-                               <span class="text-slate-700 dark:text-slate-200 font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
-                           </div>
-                           <span class="text-xs text-slate-400">{{ lesson.duration_minutes || 0 }}:00</span>
-                       </div>
-                   </div>
-                </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Sidebar (Right Column) -->
-        <div class="lg:col-span-4">
-          <div class="bg-white rounded-3xl p-6 shadow-lg border border-slate-100 sticky top-24">
-            <q-btn
-              @click="handleEnroll(selectedCourse.id)"
-
-              unelevated
-              rounded
-              class="w-full py-3 text-lg font-bold bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg"
-              :loading="isEnrolling"
-              :label="$t('course.enrollNow')"
-            >
-              <template v-slot:loading>
-                <q-spinner-facebook />
-              </template>
-            </q-btn>
-
-            <div class="text-sm space-y-3 pt-4 border-t border-slate-100">
-               <div class="flex justify-between text-slate-600 dark:text-black">
-                   <span>{{ $t('course.certificate') }}</span>
-                   <span class="font-bold text-slate-900 dark:text-black">{{ selectedCourse.have_certificate ? 'มีใบประกาศฯ' : 'ไม่มี' }}</span>
-               </div>
-               <div v-if="selectedCourse.instructor_name" class="flex justify-between text-slate-600 dark:text-black">
-                   <span>ผู้สอน</span>
-                   <span class="font-bold text-slate-900 dark:text-black">{{ selectedCourse.instructor_name }}</span>
-               </div>
-               <div v-if="selectedCourse.level" class="flex justify-between text-slate-600 dark:text-black">
-                   <span>ระดับ</span>
-                   <span class="font-bold text-slate-900 dark:text-black">{{ selectedCourse.level }}</span>
-               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 

Frontend-Learner/pages/classroom/learning.vue

@@ -241,12 +241,16 @@ const loadLesson = async (lessonId: number) => {
   }
 }
 
+// Video Player Ref (Component)
+const videoPlayerComp = ref(null)
+
 // Video & Progress State
 const initialSeekTime = ref(0)
 const maxWatchedTime = ref(0) // Anti-rewind monotonic tracking
 const lastSavedTime = ref(-1)
 const lastSavedTimestamp = ref(0) // Server throttle timestamp
 const lastLocalSaveTimestamp = ref(0) // Local throttle timestamp
+const currentDuration = ref(0) // Track duration for save logic
 
 // Helper: Get Local Storage Key
 const getLocalProgressKey = (lessonId: number) => {
@@ -278,25 +282,33 @@ const saveLocalProgress = (lessonId: number, time: number) => {
     }
 }
 
+// Handler: Video Time Update (from Component)
+const handleVideoTimeUpdate = (cTime: number, dur: number) => {
+  currentDuration.value = dur || 0
+  
+  // Update Monotonic Progress
+  if (cTime > maxWatchedTime.value) {
+      maxWatchedTime.value = cTime
+  }
+  
+  // Logic: Periodic Save 
+  if (currentLesson.value?.id) {
+      const now = Date.now()
+      
+      // 1. Local Save Throttle (5 seconds)
+      if (now - lastLocalSaveTimestamp.value > 5000) {
+          saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
+          lastLocalSaveTimestamp.value = now
+      }
+      
+      // 2. Server Save Throttle (handled inside performSaveProgress)
+      // Note: We don't check isPlaying here because if time is updating, it IS playing.
+      performSaveProgress(false, false)
+  }
+}
+
 const onVideoMetadataLoaded = () => {
-   if (videoRef.value) {
+    // Component handles seek and volume
-       // Bind Media Preferences (Volume/Mute)
-       applyTo(videoRef.value)
-
-       // Resume playback if we have a saved position
-       if (initialSeekTime.value > 0) {
-           // Ensure we don't seek past duration
-           const seekTo = Math.min(initialSeekTime.value, videoRef.value.duration || Infinity)
-           videoRef.value.currentTime = seekTo
-       }
-   }
-}
-
-const togglePlay = () => {
-  if (!videoRef.value) return
-  if (isPlaying.value) videoRef.value.pause()
-  else videoRef.value.play()
-  isPlaying.value = !isPlaying.value
 }
 
 const isCompleting = ref(false) // Flag to prevent race conditions during completion
@@ -308,7 +320,7 @@ const isCompleting = ref(false) // Flag to prevent race conditions during comple
 // Main Server Save Function
 const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
     const lesson = currentLesson.value
-    if (!videoRef.value || !lesson || lesson.type !== 'VIDEO') return
+    if (!lesson || lesson.type !== 'VIDEO') return
     if (!lesson.progress) return
 
     // 1. Completed Guard: Stop everything if already completed
@@ -319,7 +331,7 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
 
     const now = Date.now()
     const maxSec = Math.floor(maxWatchedTime.value) // Use max watched time
-    const durationSec = Math.floor(videoRef.value.duration || 0)
+    const durationSec = Math.floor(currentDuration.value || 0)
 
     // 3. Monotonic Check: Don't save if progress hasn't increased (unless forced)
     if (!force && maxSec <= lastSavedTime.value) return
@@ -371,50 +383,6 @@ const markLessonAsCompletedLocally = (lessonId: number) => {
     }
 }
 
-const updateProgress = () => {
-  if (!videoRef.value) return
-  
-  // UI Update
-  currentTime.value = videoRef.value.currentTime
-  duration.value = videoRef.value.duration
-  videoProgress.value = (currentTime.value / duration.value) * 100
-  
-  // Update Monotonic Progress
-  if (currentTime.value > maxWatchedTime.value) {
-      maxWatchedTime.value = currentTime.value
-  }
-  
-  // Logic: Periodic Save 
-  if (isPlaying.value && currentLesson.value?.id) {
-      const now = Date.now()
-      
-      // 1. Local Save Throttle (5 seconds)
-      if (now - lastLocalSaveTimestamp.value > 5000) {
-          saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
-          lastLocalSaveTimestamp.value = now
-      }
-      
-      // 2. Server Save Throttle (handled inside performSaveProgress)
-      performSaveProgress(false, false)
-  }
-}
-
-// Volume Controls Logic replaced by useMediaPrefs
-const volumeIcon = computed(() => {
-    if (isMuted.value || volume.value === 0) return 'volume_off'
-    if (volume.value < 0.5) return 'volume_down'
-    return 'volume_up'
-})
-
-const handleToggleMute = () => {
-    setMuted(!isMuted.value)
-}
-
-const handleVolumeChange = (val: any) => {
-    const newVol = typeof val === 'number' ? val : Number(val.target.value)
-    setVolume(newVol)
-}
-
 const videoSrc = computed(() => {
   if (!currentLesson.value) return ''
   // Use explicit video_url from API first
@@ -428,70 +396,8 @@ const videoSrc = computed(() => {
   return ''
 })
 
-// ==========================================
-// 3. ระบบบันทึกความคืบหน้า (Progress Tracking)
-// ==========================================
-// บันทึกอัตโนมัติทุกๆ 10 วินาทีเมื่อเล่นวิดีโอ
-
-// Event Listeners for Robustness
-onMounted(() => {
-    // Page/Tab Visibility Logic
-    if (import.meta.client) {
-        document.addEventListener('visibilitychange', handleVisibilityChange)
-        window.addEventListener('pagehide', handlePageHide)
-    }
-})
-
-onBeforeUnmount(() => {
-    if (import.meta.client) {
-        document.removeEventListener('visibilitychange', handleVisibilityChange)
-        window.removeEventListener('pagehide', handlePageHide)
-    }
-    
-    // Final save attempt when component destroys
-    if (currentLesson.value?.id) {
-       saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
-    }
-    // Only save if not completed
-    if (currentLesson.value?.progress && !currentLesson.value.progress.is_completed) {
-        performSaveProgress(true, true) 
-    }
-})
-
-const handleVisibilityChange = () => {
-    if (document.hidden) {
-
-        if (currentLesson.value?.id) {
-           saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
-        }
-        performSaveProgress(true, true) // Force save with keepalive
-    }
-}
-
-const handlePageHide = () => {
-    // Triggered on page refresh, close tab, or navigation
-    if (currentLesson.value?.id) {
-       saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
-    }
-    performSaveProgress(true, true)
-}
-
-// Watch Video Events
-watch(isPlaying, (playing) => {
-    if (!playing) {
-        // Paused: Save immediately
-        if (currentLesson.value?.id) {
-           saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
-        }
-        performSaveProgress(true, false)
-    }
-})
-
 // เมื่อวิดีโอจบ ให้บันทึกว่าเรียนจบ (Complete)
-
 const onVideoEnded = async () => {
-    isPlaying.value = false
-    
     // Safety check BEFORE trying to save
     const lesson = currentLesson.value
     if (!lesson || !lesson.progress || lesson.progress.is_completed || isCompleting.value) return
@@ -505,22 +411,6 @@ const onVideoEnded = async () => {
     }
 }
 
-const formatTime = (time: number) => {
-  const m = Math.floor(time / 60)
-  const s = Math.floor(time % 60)
-  return `${m}:${s.toString().padStart(2, '0')}`
-}
-
-const currentTimeDisplay = computed(() => formatTime(currentTime.value))
-const durationDisplay = computed(() => formatTime(duration.value || 0))
-
-const seek = (e: MouseEvent) => {
-  if (!videoRef.value) return
-  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-  const percent = (e.clientX - rect.left) / rect.width
-  videoRef.value.currentTime = percent * videoRef.value.duration
-}
-
 onMounted(() => {
   loadCourseData()
 })
@@ -557,75 +447,16 @@ onBeforeUnmount(() => {
     </q-header>
 
     <!-- Sidebar (Curriculum) -->
-    <q-drawer
+    <!-- Sidebar (Curriculum) -->
+    <CurriculumSidebar
       v-model="sidebarOpen"
-      show-if-above
+      :courseData="courseData"
-      bordered
+      :currentLessonId="currentLesson?.id"
-      side="left"
+      :isLoading="isLoading"
-      :width="320"
+      :hasUnreadAnnouncements="hasUnreadAnnouncements"
-      :breakpoint="1024"
+      @select-lesson="handleLessonSelect"
-      class="bg-[var(--bg-surface)]"
+      @open-announcements="handleOpenAnnouncements"
-      content-class="bg-[var(--bg-surface)]"
+    />
-    >
-      <div v-if="courseData" class="h-full scroll">
-         <q-list class="pb-10">
-            <!-- Announcements Sidebar Item -->
-             <q-item 
-                clickable 
-                v-ripple 
-                @click="handleOpenAnnouncements" 
-                class="bg-blue-50 dark:bg-blue-900/10 border-b border-blue-100 dark:border-blue-900/20"
-             >
-                <q-item-section>
-                   <q-item-label class="font-bold text-slate-800 dark:text-blue-200 text-sm pl-2">
-                       {{ $t('classroom.announcements', 'ประกาศในคอร์ส') }}
-                   </q-item-label>
-                </q-item-section>
-                <q-item-section side v-if="hasUnreadAnnouncements">
-                    <q-badge color="red" rounded label="New" />
-                </q-item-section>
-             </q-item>
-
-            <template v-for="chapter in courseData.chapters" :key="chapter.id">
-              <q-item-label header class="bg-slate-100 dark:bg-slate-800 text-[var(--text-main)] font-bold sticky top-0 z-10 border-b dark:border-white/5 text-sm py-4">
-                 {{ getLocalizedText(chapter.title) }}
-              </q-item-label>
-
-              <q-item
-                v-for="lesson in chapter.lessons"
-                :key="lesson.id"
-                clickable
-                v-ripple
-                :active="currentLesson?.id === lesson.id"
-                active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium"
-                class="border-b border-gray-50 dark:border-white/5"
-                @click="!lesson.is_locked && handleLessonSelect(lesson.id)"
-                :disable="lesson.is_locked"
-              >
-                <q-item-section avatar v-if="lesson.is_locked">
-                  <q-icon name="lock" size="xs" color="grey" />
-                </q-item-section>
-                
-                <q-item-section>
-                  <q-item-label class="text-sm md:text-base line-clamp-2 text-[var(--text-main)]">
-                    {{ getLocalizedText(lesson.title) }}
-                  </q-item-label>
-                </q-item-section>
-
-                <q-item-section side>
-                   <q-icon v-if="lesson.is_completed" name="check_circle" color="positive" size="xs" />
-                   <q-icon v-else-if="currentLesson?.id === lesson.id" name="play_circle" color="primary" size="xs" />
-                   <q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
-                </q-item-section>
-              </q-item>
-            </template>
-         </q-list>
-      </div>
-      <div v-else-if="isLoading" class="p-6 text-center text-slate-500">
-         <q-spinner color="primary" size="2em" />
-         <div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div>
-      </div>
-    </q-drawer>
 
     <!-- Main Content -->
     <q-page-container class="bg-white dark:bg-slate-900">
@@ -633,45 +464,16 @@ onBeforeUnmount(() => {
          <!-- Video Player & Content Area -->
          <div class="w-full max-w-7xl mx-auto p-4 md:p-6 flex-grow">
             <!-- Video Player -->
-            <div v-if="currentLesson && videoSrc" class="bg-black rounded-xl overflow-hidden shadow-2xl mb-6 aspect-video relative group ring-1 ring-white/10">
+            <VideoPlayer
-               <video
+               v-if="currentLesson && videoSrc"
-                 ref="videoRef"
+               ref="videoPlayerComp"
                :src="videoSrc"
-                 class="w-full h-full object-contain"
+               :initialSeekTime="initialSeekTime"
-                 @click="togglePlay"
+               @timeupdate="handleVideoTimeUpdate"
-                 @timeupdate="updateProgress"
-                 @loadedmetadata="onVideoMetadataLoaded"
                @ended="onVideoEnded"
+               @loadedmetadata="onVideoMetadataLoaded"
             />
             
-               <!-- Custom Controls Overlay (Simplified) -->
-               <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity opacity-0 group-hover:opacity-100">
-                  <div class="flex items-center gap-4 text-white">
-                     <q-btn flat round dense :icon="isPlaying ? 'pause' : 'play_arrow'" @click.stop="togglePlay" />
-                     <div class="relative flex-grow h-1.5 bg-white/20 rounded-full cursor-pointer group/progress overflow-hidden" @click="seek">
-                        <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover/progress:bg-blue-400 transition-all shadow-[0_0_10px_rgba(59,130,246,0.5)]" :style="{ width: videoProgress + '%' }"></div>
-                     </div>
-                     <span class="text-xs font-mono font-medium opacity-90">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
-                     
-                     <!-- Volume Control -->
-                     <div class="flex items-center gap-2 group/volume">
-                        <q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" />
-                        <div class="w-0 group-hover/volume:w-20 overflow-hidden transition-all duration-300 flex items-center">
-                            <input 
-                                type="range" 
-                                min="0" 
-                                max="1" 
-                                step="0.1" 
-                                :value="volume" 
-                                @input="handleVolumeChange"
-                                class="w-20 h-1 bg-white/30 rounded-lg appearance-none cursor-pointer accent-blue-500"
-                            />
-                        </div>
-                     </div>
-                  </div>
-               </div>
-            </div>
-            
              <!-- Lesson Info -->
              <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
                 <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
@@ -746,98 +548,10 @@ onBeforeUnmount(() => {
     </q-page-container>
 
     <!-- Announcements Modal -->
-    <q-dialog v-model="showAnnouncementsModal" backdrop-filter="blur(4px)">
+    <AnnouncementModal
-       <q-card class="min-w-[320px] md:min-w-[600px] rounded-3xl overflow-hidden bg-white dark:bg-slate-900 shadow-2xl">
+      v-model="showAnnouncementsModal"
-          <q-card-section class="bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-white/5 p-5 flex items-center justify-between sticky top-0 z-10">
+      :announcements="announcements"
-             <div>
+    />
-                 <div class="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
-                    <div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/30 text-primary flex items-center justify-center">
-                        <q-icon name="campaign" size="22px" />
-                    </div>
-                    {{ $t('classroom.announcements', 'ประกาศในคอร์สเรียน') }}
-                 </div>
-                 <div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} รายการ</div>
-             </div>
-             <q-btn icon="close" flat round dense v-close-popup class="text-slate-400 hover:text-slate-700 dark:hover:text-white bg-slate-50 dark:bg-slate-800" />
-          </q-card-section>
-
-          <q-card-section class="p-0 scroll max-h-[70vh] bg-slate-50 dark:bg-[#0B0F1A]">
-              <div v-if="announcements.length > 0" class="p-4 space-y-4">
-                     <div 
-                        v-for="(ann, index) in announcements" 
-                        :key="index" 
-                        class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
-                        :class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 bg-orange-50/50 dark:bg-orange-900/10': ann.is_pinned}"
-                     >
-                        <!-- Pinned Banner -->
-                        <div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
-                            <q-icon name="push_pin" color="orange" size="18px" class="transform rotate-45" />
-                        </div>
-
-                        <div class="flex items-start gap-4 mb-3">
-                           <q-avatar 
-                                :color="ann.is_pinned ? 'orange-100' : 'blue-50'" 
-                                :text-color="ann.is_pinned ? 'orange-700' : 'blue-700'" 
-                                size="42px" 
-                                font-size="20px"
-                                class="shadow-sm"
-                            >
-                                <span class="font-bold">{{ (getLocalizedText(ann.title) || 'A').charAt(0) }}</span>
-                            </q-avatar>
-                           <div class="flex-1">
-                              <div class="font-bold text-lg text-slate-900 dark:text-white leading-tight pr-8 capitalize font-display">
-                                {{ getLocalizedText(ann.title) || 'ประกาศ' }}
-                              </div>
-                              <div class="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-2 mt-1.5">
-                                  <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
-                                    <q-icon name="today" size="12px" />
-                                    {{ new Date(ann.created_at || Date.now()).toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' }) }}
-                                  </span>
-                                  <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
-                                    <q-icon name="access_time" size="12px" />
-                                    {{ new Date(ann.created_at || Date.now()).toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' }) }}
-                                  </span>
-                              </div>
-                           </div>
-                        </div>
-                        
-                        <div class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed whitespace-pre-line pl-[58px] mb-4">
-                           {{ getLocalizedText(ann.content) }}
-                        </div>
-
-                        <!-- Attachments in Announcement -->
-                        <div v-if="ann.attachments && ann.attachments.length > 0" class="pl-[58px] mt-4 pt-4 border-t border-gray-100 dark:border-white/5">
-                            <div class="text-xs font-bold text-slate-500 dark:text-slate-400 mb-3 flex items-center gap-1.5 uppercase tracking-wider">
-                                <q-icon name="attach_file" /> {{ $t('classroom.attachments') || 'Attachments' }}
-                            </div>
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                                <a 
-                                    v-for="file in ann.attachments" 
-                                    :key="file.id"
-                                    :href="file.presigned_url"
-                                    target="_blank"
-                                    class="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-slate-700/50 hover:bg-blue-50 dark:hover:bg-blue-900/20 text-sm text-slate-700 dark:text-slate-200 border border-gray-200 dark:border-white/10 hover:border-blue-200 dark:hover:border-blue-700/50 transition-all group/file"
-                                >
-                                    <div class="w-8 h-8 rounded-lg bg-white dark:bg-slate-600 flex items-center justify-center shadow-sm text-red-500">
-                                        <q-icon name="description" size="18px" />
-                                    </div>
-                                    <span class="truncate flex-1 font-medium">{{ file.file_name }}</span>
-                                    <q-icon name="download" size="14px" class="text-slate-400 group-hover/file:text-blue-500" />
-                                </a>
-                            </div>
-                        </div>
-                     </div>
-              </div>
-              <div v-else class="flex flex-col items-center justify-center p-12 text-slate-400 min-h-[300px]">
-                 <div class="w-24 h-24 bg-slate-100 dark:bg-slate-800 rounded-full mb-6 flex items-center justify-center">
-                    <q-icon name="notifications_off" size="3rem" class="text-slate-300 dark:text-slate-600" />
-                 </div>
-                 <div class="text-base font-medium text-slate-600 dark:text-slate-400">{{ $t('classroom.noAnnouncements', 'ไม่มีประกาศในขณะนี้') }}</div>
-                 <div class="text-sm text-slate-400 mt-2">โพสต์ใหม่ๆ จากผู้สอนจะปรากฏที่นี่</div>
-              </div>
-          </q-card-section>
-       </q-card>
-    </q-dialog>
 
   </q-layout>
 </template>

Frontend-Learner/pages/dashboard/profile.vue

@@ -50,44 +50,29 @@ const passwordForm = reactive({
 })
 
 
-const nameRules = [(val: string) => !!val || t('common.required')]
+// Rules have been moved to components
-const emailRules = [
-  (val: string) => !!val || t('common.required'),
-  (val: string) => /.+@.+\..+/.test(val) || t('common.invalidEmail')
-]
-const phoneRules = [
-  (val: string) => !!val || t('common.required'),
-  (val: string) => /^0[0-9]{8,9}$/.test(val) || t('common.invalidPhone')
-]
-const passwordRules = [
-  (val: string) => !!val || t('common.required'),
-  (val: string) => val.length >= 6 || t('common.passwordTooShort'),
-  (val: string) => val !== passwordForm.currentPassword || 'รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านปัจจุบัน'
-]
-const confirmPasswordRules = [
-  (val: string) => !!val || t('common.required'),
-  (val: string) => val === passwordForm.newPassword || t('common.passwordsDoNotMatch')
-]
 
-const showCurrentPassword = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null) // Used in view mode (outside component)
-const showNewPassword = ref(false)
-const showConfirmPassword = ref(false)
-
-const fileInput = ref<HTMLInputElement | null>(null)
 
 const toggleEdit = (edit: boolean) => {
   isEditing.value = edit
 }
 
-const triggerUpload = () => {
+// Updated to accept File object directly (or Event for view mode compatibility if needed)
-  fileInput.value?.click()
+const handleFileUpload = async (fileOrEvent: File | Event) => {
+  let file: File | null = null
+
+  if (fileOrEvent instanceof File) {
+    file = fileOrEvent
+  } else {
+    // Fallback for native input change event
+    const target = (fileOrEvent as Event).target as HTMLInputElement
+    if (target.files && target.files[0]) {
+      file = target.files[0]
+    }
   }
 
-const handleFileUpload = async (event: Event) => {
+  if (file) {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files[0]) {
-    const file = target.files[0]
-
     // แสดงรูป Preview ก่อนอัปโหลด
     const reader = new FileReader()
     reader.onload = (e) => {
@@ -103,13 +88,17 @@ const handleFileUpload = async (event: Event) => {
     if (result.success && result.data?.avatar_url) {
        userData.value.photoURL = result.data.avatar_url
     } else {
-       // ถ้า error (เช่น 500) ก็ยังคงรูป preview ไว้ หรือจะ alert ก็ได้
        console.error('Upload failed:', result.error)
        alert(result.error || t('profile.updateError'))
     }
   }
 }
 
+// Trigger upload for VIEW mode avatar click
+const triggerUpload = () => {
+    fileInput.value?.click()
+}
+
 
 
 const handleUpdateProfile = async () => {
@@ -277,241 +266,19 @@ onMounted(() => {
 
       <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
         
-        <div class="card-premium p-8 h-fit">
+        <ProfileEditForm
-          <h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
+          v-model="userData"
-            <q-icon name="person" class="text-blue-500 text-2xl" />
-            {{ $t('profile.editPersonalDesc') }}
-          </h2>
-
-          <div class="flex flex-col gap-6">
-            
-            <div class="flex items-center gap-6">
-              <div class="relative group cursor-pointer" @click="triggerUpload">
-                 <UserAvatar 
-                  :photo-u-r-l="userData.photoURL" 
-                  :first-name="userData.firstName" 
-                  :last-name="userData.lastName" 
-                  size="80"
-                  class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
-                />
-                
-                <!-- Hover Overlay only if has photo (optional) or always? User didn't specify, keeping simple clickable -->
-                <div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                   <q-icon name="camera_alt" class="text-white text-xl" />
-                </div>
-                <!-- Hidden Input -->
-                <input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
-              </div>
-              
-              <div class="flex flex-col gap-2">
-                <div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
-                
-                <!-- Buttons Row -->
-                 <div class="flex items-center gap-3">
-                    <template v-if="userData.photoURL">
-                        <q-btn 
-                          unelevated
-                          rounded
-                          color="primary" 
-                          :label="$t('profile.changeAvatar')" 
-                          class="font-bold shadow-lg shadow-blue-500/30"
-                          @click="triggerUpload"
-                        />
-                    </template>
-                    <template v-else>
-                         <q-btn 
-                          unelevated
-                          rounded
-                          color="primary" 
-                          :label="$t('profile.uploadNew')" 
-                          class="font-bold shadow-lg shadow-blue-500/30"
-                          @click="triggerUpload"
-                        />
-                    </template>
-                 </div>
-
-                <!-- Add Limit Text -->
-                <div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                  {{ $t('profile.uploadLimit') }}
-                </div>
-              </div>
-            </div>
-
-            <q-separator class="bg-slate-100 dark:bg-white/5" />
-
-            <q-form @submit="handleUpdateProfile" class="flex flex-col gap-6">
-
-            <div class="grid grid-cols-1 gap-4">
-               <div class="space-y-1">
-                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
-                  <q-select
-                    v-model="userData.prefix"
-                    :options="['นาย', 'นาง', 'นางสาว']"
-                    outlined
-                    dense
-                    rounded
-                    class="premium-q-input"
-                    popup-content-class="text-slate-900"
-                  />
-               </div>
-               
-               <div class="grid grid-cols-2 gap-4">
-                 <div>
-                   <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.firstName') }}</label>
-                   <q-input
-                      v-model="userData.firstName"
-                      outlined dense rounded
-                      class="premium-q-input"
-                      :rules="nameRules"
-                      hide-bottom-space
-                   />
-                 </div>
-                 <div>
-                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.lastName') }}</label>
-                    <q-input
-                      v-model="userData.lastName"
-                      outlined dense rounded
-                      class="premium-q-input"
-                      :rules="nameRules"
-                      hide-bottom-space
-                    />
-                 </div>
-               </div>
-
-               <div>
-                  <div class="flex justify-between items-end mb-1">
-                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
-
-                  </div>
-                  <q-input
-                    v-model="userData.email"
-                    type="email"
-                    outlined dense rounded
-                    class="premium-q-input"
-                    :rules="emailRules"
-                     hide-bottom-space
-                     disable
-                     :hint="$t('profile.emailHint')"
-                   />
-               </div>
-
-               <div>
-                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.phone') }}</label>
-                  <q-input
-                    v-model="userData.phone"
-                    outlined dense rounded
-                    class="premium-q-input"
-                    :rules="phoneRules"
-                    hide-bottom-space
-                  />
-               </div>
-            </div>
-
-            <div class="pt-2">
-              <q-btn
-                type="submit"
-                unelevated
-                rounded
-                color="primary"
-                class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
-                :label="$t('common.save')"
           :loading="isProfileSaving"
+          @submit="handleUpdateProfile"
+          @upload="handleFileUpload"
         />
-            </div>
-          </q-form>
-          
-          </div> <!-- Close the wrapper div -->
-        </div>
 
 
-        <div class="card-premium p-8 h-fit">
+        <PasswordChangeForm
-          <h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
+          v-model="passwordForm"
-            <q-icon name="lock" class="text-amber-500 text-2xl" />
-            {{ $t('profile.security') }}
-          </h2>
-          
-           <q-form @submit="handleUpdatePassword" class="flex flex-col gap-6">
-              <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">
-                {{ $t('profile.securityDesc') }}
-              </div>
-
-             <div class="space-y-4">
-                <div>
-                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.currentPassword') }}</label>
-                  <q-input
-                    v-model="passwordForm.currentPassword"
-                    :type="showCurrentPassword ? 'text' : 'password'"
-                     outlined dense rounded
-                     class="premium-q-input"
-                     placeholder=""
-                     :rules="[val => !!val || $t('common.required')]"
-                   >
-                    <template v-slot:append>
-                      <q-icon
-                        :name="showCurrentPassword ? 'visibility_off' : 'visibility'"
-                        class="cursor-pointer text-slate-400"
-                        @click="showCurrentPassword = !showCurrentPassword"
-                      />
-                    </template>
-                  </q-input>
-                </div>
-
-                <q-separator class="bg-slate-100 dark:bg-white/5 my-2" />
-
-                <div>
-                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.newPassword') }}</label>
-                  <q-input
-                    v-model="passwordForm.newPassword"
-                    :type="showNewPassword ? 'text' : 'password'"
-                     outlined dense rounded
-                     class="premium-q-input"
-                     :placeholder="$t('profile.newPasswordHint')"
-                     :rules="passwordRules"
-                   >
-                    <template v-slot:append>
-                      <q-icon
-                        :name="showNewPassword ? 'visibility_off' : 'visibility'"
-                        class="cursor-pointer text-slate-400"
-                        @click="showNewPassword = !showNewPassword"
-                      />
-                    </template>
-                  </q-input>
-                </div>
-
-                <div>
-                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.confirmNewPassword') }}</label>
-                  <q-input
-                    v-model="passwordForm.confirmPassword"
-                    :type="showConfirmPassword ? 'text' : 'password'"
-                     outlined dense rounded
-                     class="premium-q-input"
-                     :placeholder="$t('profile.confirmPasswordHint')"
-                     :rules="confirmPasswordRules"
-                   >
-                    <template v-slot:append>
-                      <q-icon
-                        :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
-                        class="cursor-pointer text-slate-400"
-                        @click="showConfirmPassword = !showConfirmPassword"
-                      />
-                    </template>
-                  </q-input>
-                </div>
-             </div>
-
-             <div class="pt-2">
-              <q-btn
-                type="submit"
-                 unelevated
-                 rounded
-                 class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
-                 style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
-                 :label="$t('profile.changePasswordBtn')"
           :loading="isPasswordSaving"
+          @submit="handleUpdatePassword"
         />
-            </div>
-          </q-form>
-        </div>
 
       </div>
     </div>

Frontend-Learner/คู่มืออธิบาย/web-dev-details.md

@@ -59,8 +59,17 @@
   - `FormInput.vue`: Input field มาตรฐาน
 - **Course (`components/course/`):**
   - `CourseCard.vue`: การ์ดแสดงผลคอร์ส (ใช้ซ้ำหลายหน้า)
-- **User (`components/user/`):**
+- **Discovery (`components/discovery/`):**
+  - `CategorySidebar.vue`: Sidebar ตัวกรองหมวดหมู่แบบย่อ/ขยายได้
+  - `CourseDetailView.vue`: หน้ารายละเอียดคอร์สขนาดใหญ่ (Video Preview + Syllabus)
+- **Classroom (`components/classroom/`):**
+  - `CurriculumSidebar.vue`: Sidebar บทเรียนและสถานะการเรียน
+  - `AnnouncementModal.vue`: Modal แสดงประกาศของคอร์ส
+  - `VideoPlayer.vue`: Video Player พร้อม Custom Controls
+- **User / Profile (`components/user/`, `components/profile/`):**
   - `UserAvatar.vue`: แสดงรูปโปรไฟล์ (รองรับ Fallback)
+  - `ProfileEditForm.vue`: ฟอร์มแก้ไขข้อมูลส่วนตัว
+  - `PasswordChangeForm.vue`: ฟอร์มเปลี่ยนรหัสผ่าน
 
 ---
 
@@ -145,3 +154,9 @@
 5.  **Profile & Security:**
     - **Email Verification:** ปุ่มยืนยันอีเมลและสถานะในหน้าโปรไฟล์
     - **Avatar Upload:** อัปโหลดรูปภาพพร้อม Preview และ Validation (Size/Type)
+
+6.  **Component Refactoring & Organization:**
+    - **Classroom:** แยก `CurriculumSidebar`, `AnnouncementModal`, `VideoPlayer` เพื่อลดขนาดไฟล์ `learning.vue`
+    - **Discovery:** แยก `CategorySidebar` และ `CourseDetailView`
+    - **Profile:** แยกฟอร์มแก้ไขข้อมูลและเปลี่ยนรหัสผ่านเป็น Components ย่อย
+    - **Cleanup:** ลบตัวแปร, ฟังก์ชัน, และ Imports ที่ไม่ได้ใช้งานทั้งหมด