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

Frontend-Learner/layouts/dashboard-index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 /**
  * @file dashboard-index.vue
- * @description Layout for the Dashboard Index page, without the sidebar.
- * Uses Quasar QLayout for responsive structure.
+ * @description เลย์เอาต์สำหรับหน้าแรกของ Dashboard (ไม่มีแผงเมนูด้านข้างเพื่อเน้นพื้นที่เนื้อหา)
+ * ใช้โครงสร้างจาก Quasar QLayout เพื่อให้รองรับ Responsive
  */
 
-// Initialize global theme management
+// เปิดใช้คอมโพสซิเบิลจัดการธีมแบบ Global
 useThemeMode()
 
 const { currentUser, logout } = useAuth()
@@ -18,7 +18,7 @@ const toggleRightDrawer = () => {
 
 <template>
   <q-layout view="hHh lpR fFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
-    <!-- Header -->
+    <!-- แถบด้านบนของโครงสร้าง (Header) -->
     <q-header
       class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white"
     >
@@ -29,7 +29,7 @@ const toggleRightDrawer = () => {
       />
     </q-header>
 
-    <!-- Master Mobile Drawer (The Everything Hub) -->
+    <!-- แถบลิ้นชักมือถือหลัก (เมนูรวมทุกอย่างเมื่อปัดหน้าจอ/กดไอคอนบนสัดส่วนเล็ก) -->
     <q-drawer
       v-model="rightDrawerOpen"
       side="right"
@@ -39,7 +39,7 @@ const toggleRightDrawer = () => {
       :width="300"
     >
       <div class="flex flex-col h-full bg-white dark:bg-[#0f172a]">
-        <!-- 1. Account Section (Premium Look) -->
+        <!-- 1. ส่วนบัญชีผู้ใช้ (Account Section) ดีไซน์พรีเมียม -->
         <div class="p-6 bg-slate-50/50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800">
           <div class="flex items-center justify-between mb-8">
              <div class="flex items-center gap-3">
@@ -62,10 +62,10 @@ const toggleRightDrawer = () => {
           </div>
         </div>
 
-        <!-- 2. Integrated Content Hub -->
+        <!-- 2. ศูนย์รวมเมนูและเนื้อหา (Integrated Content Hub) -->
         <div class="flex-grow overflow-y-auto pt-4">
           <q-list padding class="text-slate-600 dark:text-slate-300">
-            <!-- Navigation -->
+            <!-- การนำทาง (Navigation) -->
             <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เมนูหลัก</q-item-label>
             
             <q-item to="/dashboard" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
@@ -85,10 +85,10 @@ const toggleRightDrawer = () => {
 
             <q-separator class="my-4 mx-6 opacity-50" />
 
-            <!-- Tools & Settings -->
+            <!-- เครื่องมือทั่วไปและการตั้งค่าระบบ -->
             <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เครื่องมือและการตั้งค่า</q-item-label>
             
-            <!-- Language Selection -->
+            <!-- ปุ่มสลับภาษา -->
             <q-item class="px-6 py-2">
               <q-item-section avatar><q-icon name="language" size="22px" /></q-item-section>
               <q-item-section>
@@ -99,7 +99,7 @@ const toggleRightDrawer = () => {
               </q-item-section>
             </q-item>
 
-            <!-- Dark Mode Toggle -->
+            <!-- เปิดปิดโหมดมืด (Dark Mode Toggle) -->
             <q-item class="px-6 py-2">
               <q-item-section avatar><q-icon :name="isDark ? 'dark_mode' : 'light_mode'" size="22px" /></q-item-section>
               <q-item-section>
@@ -121,7 +121,7 @@ const toggleRightDrawer = () => {
           </q-list>
         </div>
 
-        <!-- 3. Bottom Actions -->
+        <!-- 3. ส่วนล่างสุด เช่น ล็อกเอาต์ หรือระบุเวอร์ชันระบบ -->
         <div class="p-6 mt-auto border-t border-slate-100 dark:border-slate-800">
           <q-btn
             unelevated
@@ -138,18 +138,16 @@ const toggleRightDrawer = () => {
       </div>
     </q-drawer>
 
-    <!-- Sidebar Removed for this layout -->
+    <!-- หมายเหตุ: สำหรับหน้านี้ จะไม่ได้มีการโชว์ Sidebar ที่เป็นลิ้นชักซ้าย -->
 
-    <!-- Main Content -->
+    <!-- พื้นที่แสดงเนื้อหาหลัก -->
     <q-page-container>
       <q-page class="relative">
         <slot />
       </q-page>
     </q-page-container>
 
-    <!-- Mobile Bottom Nav - Optional, keeping it consistent with default but maybe not needed if full width?
-         If we remove sidebar, we might still want mobile nav if it's main navigation.
-         Let's keep it for now as it doesn't hurt. -->
+    <!-- เมนูปุ่มกดล่างหน้าจอบนมือถือ (สำหรับช่วยให้เข้าถึงหน้าหลักได้ไวขึ้น) -->
     <q-footer
       v-if="$q.screen.lt.md"
       class="!bg-white dark:!bg-[#1e293b] text-primary"