feat: add new pages for course discovery, course details, classroom activities, user dashboard, password reset, and internationalization support.

Frontend-Learner/pages/classroom/learning.vue

@@ -20,7 +20,7 @@ const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
 const { user } = useAuth()
-const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress } = useCourse()
+const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements } = useCourse()
 // Media Prefs (Global Volume)
 const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs()
 
@@ -33,6 +33,54 @@ const courseId = computed(() => Number(route.query.course_id))
 // ==========================================
 // courseData: เก็บข้อมูลโครงสร้างคอร์ส (บทเรียนต่างๆ)
 const courseData = ref<any>(null)
+const announcements = ref<any[]>([]) // Announcements state
+const showAnnouncementsModal = ref(false) // Modal state
+const hasUnreadAnnouncements = ref(false) // Unread state tracking
+
+// Helper for persistent read status
+const getAnnouncementStorageKey = () => {
+    if (!user.value?.id || !courseId.value) return ''
+    return `read_announcements:${user.value.id}:${courseId.value}`
+}
+
+const checkUnreadAnnouncements = () => {
+    if (!announcements.value || announcements.value.length === 0) {
+        hasUnreadAnnouncements.value = false
+        return
+    }
+    
+    if (typeof window === 'undefined') return 
+
+    const key = getAnnouncementStorageKey()
+    if (!key) return 
+
+    const lastRead = localStorage.getItem(key)
+    if (!lastRead) {
+        hasUnreadAnnouncements.value = true
+        return
+    }
+
+    const lastReadDate = new Date(lastRead).getTime()
+    const hasNew = announcements.value.some(a => {
+        const annDate = new Date(a.created_at || Date.now()).getTime()
+        // Check if announcement is strictly newer than last read
+        return annDate > lastReadDate
+    })
+    
+    hasUnreadAnnouncements.value = hasNew
+}
+
+// Handler for opening announcements
+const handleOpenAnnouncements = () => {
+    showAnnouncementsModal.value = true
+    hasUnreadAnnouncements.value = false // Clear unread badge on click
+    
+    const key = getAnnouncementStorageKey()
+    if (key) {
+        localStorage.setItem(key, new Date().toISOString())
+    }
+}
+
 // currentLesson: บทเรียนที่กำลังเรียนอยู่ปัจจุบัน
 const currentLesson = ref<any>(null)
 const isLoading = ref(true)        // โหลดข้อมูลคอร์ส
@@ -89,6 +137,13 @@ const loadCourseData = async () => {
             loadLesson(availableLesson.id)
         }
       }
+
+      // Fetch Announcements
+      const annRes = await fetchCourseAnnouncements(courseId.value)
+      if (annRes.success) {
+          announcements.value = annRes.data || []
+          checkUnreadAnnouncements()
+      }
     }
   } catch (error) {
     console.error('Error loading course:', error)
@@ -244,35 +299,59 @@ const togglePlay = () => {
   isPlaying.value = !isPlaying.value
 }
 
+const isCompleting = ref(false) // Flag to prevent race conditions during completion
+
 // -----------------------------------------------------
 // ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server)
 // -----------------------------------------------------
 
 // Main Server Save Function
 const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
-    if (!videoRef.value || !currentLesson.value || currentLesson.value.type !== 'VIDEO') return
+    const lesson = currentLesson.value
+    if (!videoRef.value || !lesson || lesson.type !== 'VIDEO') return
+    if (!lesson.progress) return
+
+    // 1. Completed Guard: Stop everything if already completed
+    if (lesson.progress.is_completed) return
+
+    // 2. Race Condition Guard: Stop if currently completing
+    if (isCompleting.value) return
 
     const now = Date.now()
     const maxSec = Math.floor(maxWatchedTime.value) // Use max watched time
     const durationSec = Math.floor(videoRef.value.duration || 0)
 
-    // 1. Validation: Don't save if progress hasn't increased (Monotonic Check)
+    // 3. Monotonic Check: Don't save if progress hasn't increased (unless forced)
     if (!force && maxSec <= lastSavedTime.value) return
     
-    // 2. Validation: Server Throttle (15 seconds)
+    // 4. Throttle Check: Server Throttle (15 seconds)
     if (!force && (now - lastSavedTimestamp.value < 15000)) return
 
-    // Save
+    // Prepare for Save
     lastSavedTime.value = maxSec 
     lastSavedTimestamp.value = now
 
+    // Check if this save might complete the lesson (e.g. > 90% or forced end)
+    const isFinishing = force || (durationSec > 0 && maxSec >= durationSec * 0.9)
+    
+    if (isFinishing) {
+        isCompleting.value = true
+    }
 
-    
-    const res = await saveVideoProgress(currentLesson.value.id, maxSec, durationSec, keepalive)
-    
-    // Check completion
-    if (res.success && res.data?.is_completed) {
-         markLessonAsCompletedLocally(currentLesson.value.id)
+    try {
+        const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
+        
+        // Handle Completion Response
+        if (res.success && res.data?.is_completed) {
+             markLessonAsCompletedLocally(lesson.id)
+             if (lesson.progress) lesson.progress.is_completed = true
+        }
+    } catch (err) {
+        console.error('Save progress failed', err)
+    } finally {
+        if (isFinishing) {
+            isCompleting.value = false
+        }
     }
 }
 
@@ -284,6 +363,8 @@ const markLessonAsCompletedLocally = (lessonId: number) => {
             if (lesson) {
                 // Compatible with API structure
                 lesson.is_completed = true
+                if (!lesson.progress) lesson.progress = {}
+                lesson.progress.is_completed = true
                 break
             }
         }
@@ -313,7 +394,7 @@ const updateProgress = () => {
           lastLocalSaveTimestamp.value = now
       }
       
-      // 2. Server Save Throttle (15 seconds) checked inside function
+      // 2. Server Save Throttle (handled inside performSaveProgress)
       performSaveProgress(false, false)
   }
 }
@@ -371,7 +452,10 @@ onBeforeUnmount(() => {
     if (currentLesson.value?.id) {
        saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
     }
-    performSaveProgress(true, true) 
+    // Only save if not completed
+    if (currentLesson.value?.progress && !currentLesson.value.progress.is_completed) {
+        performSaveProgress(true, true) 
+    }
 })
 
 const handleVisibilityChange = () => {
@@ -407,15 +491,16 @@ watch(isPlaying, (playing) => {
 
 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
 
     // Force save progress at 100%
     await performSaveProgress(true, false)
     
-    // Call explicit complete endpoint if exists
-    // REMOVED: User requested to remove explicit complete call
-    
-    // Just refresh local state assuming server handles completion via progress
-    if (currentLesson.value) {
+    // Double check completion state
+    if (currentLesson.value && !currentLesson.value.progress?.is_completed) {
          markLessonAsCompletedLocally(currentLesson.value.id)
     }
 }
@@ -484,6 +569,23 @@ onBeforeUnmount(() => {
     >
       <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) }}
@@ -531,7 +633,7 @@ 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-lg mb-6 aspect-video relative group">
+            <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">
                <video
                  ref="videoRef"
                  :src="videoSrc"
@@ -543,13 +645,13 @@ onBeforeUnmount(() => {
                />
                
                <!-- Custom Controls Overlay (Simplified) -->
-               <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent transition-opacity opacity-0 group-hover:opacity-100">
+               <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 bg-white/30 rounded cursor-pointer group/progress" @click="seek">
-                        <div class="absolute top-0 left-0 h-full bg-blue-500 rounded group-hover/progress:h-1.5 transition-all" :style="{ width: videoProgress + '%' }"></div>
+                     <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">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
+                     <span class="text-xs font-mono font-medium opacity-90">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
                      
                      <!-- Volume Control -->
                      <div class="flex items-center gap-2 group/volume">
@@ -571,41 +673,48 @@ onBeforeUnmount(() => {
             </div>
             
              <!-- Lesson Info -->
-             <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 rounded-2xl shadow-sm border border-[var(--border-color)] mt-6">
+             <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
                 <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
-                <h1 class="text-2xl md:text-3xl font-bold mb-3 text-slate-900 dark:text-white">{{ getLocalizedText(currentLesson.title) }}</h1>
+                <div class="flex items-start justify-between gap-4 mb-4">
+                    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white leading-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
+                </div>
                 
-                <p class="text-slate-700 dark:text-slate-300 text-base md:text-lg" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
+                <p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
                 
                 <!-- Lesson Content Area (Text/HTML) -->
-                <div v-if="currentLesson.type === 'QUIZ'" class="mt-6 p-8 bg-[var(--bg-elevated)] rounded-xl border border-[var(--border-color)] text-center">
-                    <q-icon name="quiz" size="4rem" color="primary" class="mb-4" />
-                    <h2 class="text-xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('quiz.startTitle', 'แบบทดสอบ') }}</h2>
-                    <p class="text-slate-500 dark:text-slate-400 mb-6">{{ getLocalizedText(currentLesson.quiz?.description || currentLesson.description) }}</p>
+                <div v-if="currentLesson.type === 'QUIZ'" class="p-8 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-800/50 rounded-2xl border border-blue-100 dark:border-white/5 text-center">
+                    <div class="bg-white dark:bg-slate-700 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm text-blue-500 dark:text-blue-300">
+                        <q-icon name="quiz" size="40px" />
+                    </div>
+                    <h2 class="text-xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('quiz.startTitle', 'แบบทดสอบท้ายบทเรียน') }}</h2>
+                    <p class="text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto">{{ getLocalizedText(currentLesson.quiz?.description || currentLesson.description) }}</p>
                     
-                    <div class="flex justify-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-8">
-                         <span v-if="currentLesson.quiz?.questions?.length"><q-icon name="format_list_numbered" /> {{ currentLesson.quiz.questions.length }} ข้อ</span>
-                         <span v-if="currentLesson.quiz?.time_limit"><q-icon name="schedule" /> {{ currentLesson.quiz.time_limit }} นาที</span>
+                    <div class="flex justify-center flex-wrap gap-3 text-sm text-slate-600 dark:text-slate-300 mb-8">
+                         <span v-if="currentLesson.quiz?.questions?.length" class="px-3 py-1 bg-white dark:bg-slate-900 rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5"><q-icon name="format_list_numbered" size="14px" class="text-blue-500" /> {{ currentLesson.quiz.questions.length }} ข้อ</span>
+                         <span v-if="currentLesson.quiz?.time_limit" class="px-3 py-1 bg-white dark:bg-slate-900 rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5"><q-icon name="schedule" size="14px" class="text-orange-500" /> {{ currentLesson.quiz.time_limit }} นาที</span>
                     </div>
 
                     <q-btn 
-                        color="primary" 
+                        class="bg-blue-600 text-white shadow-lg shadow-blue-600/30 hover:shadow-blue-600/50 transition-all font-bold px-8"
                         size="lg" 
                         rounded 
+                        no-caps
                         :label="$t('quiz.startBtn', 'เริ่มทำแบบทดสอบ')" 
                         icon="play_arrow"
                         @click="$router.push(`/classroom/quiz?course_id=${courseId}&lesson_id=${currentLesson.id}`)"
                     />
                 </div>
-                <div v-else-if="currentLesson.content" class="mt-6 prose dark:prose-invert max-w-none p-6 bg-[var(--bg-elevated)] rounded-xl border border-[var(--border-color)]">
-                    <div v-html="getLocalizedText(currentLesson.content)" class="text-base md:text-lg leading-relaxed text-slate-900 dark:text-slate-200"></div>
+                <div v-else-if="currentLesson.content" class="prose prose-lg dark:prose-invert max-w-none p-6 md:p-8 bg-gray-50 dark:bg-slate-800/50 rounded-2xl border border-gray-100 dark:border-white/5">
+                    <div v-html="getLocalizedText(currentLesson.content)" class="leading-relaxed text-slate-800 dark:text-slate-200"></div>
                 </div>
 
                 <!-- Attachments Section -->
-                <div v-if="currentLesson.attachments && currentLesson.attachments.length > 0" class="mt-8">
+                <div v-if="currentLesson.attachments && currentLesson.attachments.length > 0" class="mt-8 pt-6 border-t border-gray-100 dark:border-white/5">
                     <h3 class="text-lg font-bold mb-4 text-slate-900 dark:text-white flex items-center gap-2">
-                        <q-icon name="attach_file" />
-                        {{ $t('classroom.attachments') || 'เอกสารประกอบ' }}
+                        <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
+                            <q-icon name="attach_file" size="18px" />
+                        </div>
+                        {{ $t('classroom.attachments') || 'เอกสารประกอบการเรียน' }}
                     </h3>
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <a 
@@ -613,20 +722,21 @@ onBeforeUnmount(() => {
                             :key="file.file_name"
                             :href="file.presigned_url"
                             target="_blank"
-                            class="flex items-center gap-4 p-4 rounded-xl border border-slate-200 dark:!border-white/10 bg-white dark:!bg-slate-800 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors group"
+                            class="flex items-center gap-4 p-4 rounded-xl border border-slate-200 dark:!border-white/10 bg-white dark:!bg-slate-800 hover:border-blue-300 dark:hover:border-blue-700 hover:shadow-md transition-all group relative overflow-hidden"
                         >
-                            <div class="w-10 h-10 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 flex items-center justify-center">
+                            <div class="w-12 h-12 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-500 flex items-center justify-center flex-shrink-0">
                                 <q-icon name="picture_as_pdf" size="24px" />
                             </div>
-                            <div class="flex-1 min-w-0">
-                                <div class="font-bold text-slate-900 dark:text-slate-200 truncate group-hover:text-blue-600 transition-colors">
+                            <div class="flex-1 min-w-0 z-10">
+                                <div class="font-bold text-slate-900 dark:text-slate-200 truncate group-hover:text-blue-600 transition-colors text-sm md:text-base">
                                     {{ file.file_name }}
                                 </div>
-                                <div class="text-xs text-slate-500 dark:text-slate-400">
+                                <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                                     {{ (file.file_size / 1024 / 1024).toFixed(2) }} MB
                                 </div>
                             </div>
-                            <q-icon name="download" class="text-slate-400 group-hover:text-blue-600" />
+                            <div class="absolute inset-0 bg-blue-50/50 dark:bg-blue-900/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                            <q-icon name="download" class="text-slate-300 group-hover:text-blue-500 z-10" />
                         </a>
                     </div>
                 </div>
@@ -635,6 +745,100 @@ onBeforeUnmount(() => {
       </q-page>
     </q-page-container>
 
+    <!-- Announcements Modal -->
+    <q-dialog v-model="showAnnouncementsModal" 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="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>