feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Frontend-Learner/components/common/FormInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file FormInput.vue
- * @description Reusable input component with label, error handling, and support for disabled/required states.
- * Now supports password visibility toggle.
+ * @description คอมโพเนนต์ช่องกรอกข้อมูล (Input) แบบนำกลับมาใช้ใหม่ได้ พร้อมรองรับข้อความป้ายกำกับ, จัดการข้อผิดพลาด และสถานะปิดใช้งาน/บังคับกรอก
+ * รองรับการสลับซ่อน/แสดงรหัสผ่าน
  */
 
 const props = defineProps<{
@@ -16,19 +16,19 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  /** Update v-model value */
+  /** อัปเดตค่า v-model (Update v-model value) */
   'update:modelValue': [value: string]
 }>()
 
-// Password visibility state
+// สถานะการซ่อน/แสดงรหัสผ่าน (Password visibility state)
 const showPassword = ref(false)
 
-// Toggle function
+// ฟังก์ชันสำหรับสลับสถานะ (Toggle function)
 const togglePassword = () => {
   showPassword.value = !showPassword.value
 }
 
-// Compute input type based on visibility state
+// คำนวณประเภทของช่องกรอกข้อมูล بناءً pada state (Compute input type based on visibility state)
 const inputType = computed(() => {
   if (props.type === 'password') {
     return showPassword.value ? 'text' : 'password'
@@ -59,7 +59,7 @@ const updateValue = (event: Event) => {
         @input="updateValue"
       >
       
-      <!-- Password Toggle Button -->
+      <!-- ปุ่มสลับซ่อน/แสดงรหัสผ่าน (Password Toggle Button) -->
       <button
         v-if="type === 'password'"
         type="button"
@@ -67,13 +67,13 @@ const updateValue = (event: Event) => {
         @click="togglePassword"
         tabindex="-1"
       >
-        <!-- Eye Icon (Show) -->
+        <!-- ไอคอนเปิดตา (แสดงรหัสผ่าน) (Eye Icon - Show) -->
         <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
           <circle cx="12" cy="12" r="3"/>
         </svg>
         
-        <!-- Eye Off Icon (Hide) -->
+        <!-- ไอคอนปิดตา (ซ่อนรหัสผ่าน) (Eye Off Icon - Hide) -->
         <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
           <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>

Frontend-Learner/components/common/GlobalLoader.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 /**
  * @file GlobalLoader.vue
- * @description Global full-screen loading overlay that triggers during page navigation.
- * Uses a premium pulsing logo animation.
+ * @description คอมโพเนนต์หน้าจอโหลดแบบเต็มจอ (Global full-screen loading) แสดงผลตอนเปลี่ยนหน้า
+ * พร้มแอนิเมชันโลโก้ขยับได้แบบพรีเมียม
  */
 
 const nuxtApp = useNuxtApp()
 const isLoading = ref(false)
 
-// Hook into Nuxt page transitions
+// ดักจับจังหวะการเปลี่ยนหน้าผ่าย Nuxt hook (Hook into Nuxt page transitions)
 nuxtApp.hook('page:start', () => {
   isLoading.value = true
 })
 
 nuxtApp.hook('page:finish', () => {
-  // Add a small delay for better UX (prevents flickering on fast loads)
+  // หน่วงเวลาเล็กน้อยเพื่อให้ไหลลื่น ไม่กระพริบเร็วไปหากหน้าโหลดเสร็จไว (Add a small delay for better UX)
   setTimeout(() => {
     isLoading.value = false
   }, 500)
@@ -25,14 +25,14 @@ nuxtApp.hook('page:finish', () => {
   <Transition name="fade">
     <div v-if="isLoading" class="fixed inset-0 z-[99999] flex flex-col items-center justify-center bg-white dark:bg-[#0f172a] transition-colors duration-300">
       <div class="relative flex flex-col items-center">
-        <!-- Main Logo Box -->
+        <!-- กล่องโลโก้หลัก (Main Logo Box) -->
         <div class="w-20 h-20 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6 animate-pulse-soft">
           <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-600/30 animate-bounce-subtle">
             <span class="text-2xl font-black text-white">E</span>
           </div>
         </div>
         
-        <!-- Loading Text -->
+        <!-- ข้อความระหว่างโหลด (Loading Text) -->
         <div class="flex flex-col items-center gap-2">
           <h3 class="text-lg font-bold text-slate-800 dark:text-white tracking-wide">e-Learning</h3>
           <div class="flex gap-1">

Frontend-Learner/components/common/LanguageSwitcher.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 /**
  * @file LanguageSwitcher.vue
- * @description Language switcher component using Quasar dropdown.
- * Allows switching between Thai (th) and English (en) locales.
+ * @description คอมโพเนนต์ตัวสลับภาษาใช้ปุ่ม Dropdown ของ Quasar
+ * ใช้สลับระหว่างภาษาไทย (th) และภาษาอังกฤษ (en)
  */
 
 const { locale, setLocale, locales } = useI18n()
 
-// Get available locales with their names
+// ดึงรายการภาษาที่มีอยู่พร้อมชื่อภาษา (Get available locales with their names)
 const availableLocales = computed(() => {
   return (locales.value as Array<{ code: string; name: string }>).map((loc) => ({
     code: loc.code,
@@ -15,13 +15,13 @@ const availableLocales = computed(() => {
   }))
 })
 
-// Get flag image path for a locale
+// ดึงพาธภาพธงชาติสำหรับภาษานั้นๆ (Get flag image path for a locale)
 const getFlagPath = (code: string) => `/flags/${code}.png`
 
-// Handle locale change
+// จัดการเมื่อเปลี่ยนภาษา (Handle locale change)
 const changeLocale = async (code: string) => {
   await setLocale(code as 'th' | 'en')
-  // Cookie is automatically handled by @nuxtjs/i18n with detectBrowserLanguage.useCookie
+  // คุกกี้ (Cookie) จะถูกจัดการอัตโนมัติโดย @nuxtjs/i18n จากออปชัน detectBrowserLanguage.useCookie
 }
 </script>
 
@@ -32,7 +32,7 @@ const changeLocale = async (code: string) => {
     class="language-btn"
     :aria-label="$t('language.label')"
   >
-    <!-- Show current locale flag -->
+    <!-- แสดงธงชาติตามภาษาที่ใช้อยู่ (Show current locale flag) -->
     <img 
       :src="getFlagPath(locale)" 
       :alt="locale.toUpperCase()" 
@@ -178,7 +178,7 @@ const changeLocale = async (code: string) => {
 </style>
 
 <style>
-/* Global styles for teleported menu */
+/* สไตล์ Global สำหรับเมนูที่ถูกข้ามไปแสดงผลที่อื่นด้วย Teleport (Global styles for teleported menu) */
 .language-menu {
   border-radius: 16px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

Frontend-Learner/components/common/LoadingSkeleton.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @file LoadingSkeleton.vue
+ * @description คอมโพเนนต์ Skeleton สำหรับแสดงโครงร่างหน้าจอระหว่างรอโหลดข้อมูล (Loading Skeleton Component)
+ */
 defineProps<{
   type?: 'text' | 'avatar' | 'card' | 'button'
   width?: string
@@ -9,6 +13,7 @@ defineProps<{
 
 <template>
   <div class="skeleton-wrapper">
+    <!-- กรณีเป็นโครงร่างประเภทการ์ด (Card type skeleton) -->
     <template v-if="type === 'card'">
       <div v-for="i in (count || 1)" :key="i" class="skeleton-card">
         <div class="skeleton skeleton-image"/>
@@ -20,14 +25,17 @@ defineProps<{
       </div>
     </template>
     
+    <!-- กรณีเป็นโครงร่างประเภทรูปโปรไฟล์ (Avatar type skeleton) -->
     <template v-else-if="type === 'avatar'">
       <div class="skeleton skeleton-avatar"/>
     </template>
     
+    <!-- กรณีเป็นโครงร่างประเภทปุ่มกด (Button type skeleton) -->
     <template v-else-if="type === 'button'">
       <div class="skeleton skeleton-button" :style="{ width: width || '120px' }"/>
     </template>
     
+    <!-- กรณีอื่นๆ จะแสดงเป็นบรรทัดข้อความ (Fallback/Text type skeleton) -->
     <template v-else>
       <div 
         v-for="i in (count || 1)" 

Frontend-Learner/components/common/LoadingSpinner.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @file LoadingSpinner.vue
+ * @description ไอคอนหมุนแสดงการโหลด (Loading Spinner Component) เหมาะสำหรับใช้ตรงจุดเล็กๆ หรือตอนโหลดหน้าเว็บ
+ */
 defineProps<{
   size?: 'sm' | 'md' | 'lg'
   text?: string