feat: Implement initial core features including course browsing, authentication, user dashboard, and internationalization.

Frontend-Learner/app.vue

@@ -1,20 +1,27 @@
-<script setup>
-// ดึงฟังก์ชันจัดการ Authentication
-const { fetchUserProfile, isAuthenticated } = useAuth()
+<script setup lang="ts">
+/**
+ * @file app.vue
+ * @description Root application component.
+ * Handles initialization of authentication and theme settings.
+ */
 
-// เมื่อ App เริ่มทำงาน (Mounted)
+// Initialize composables
+const { fetchUserProfile, isAuthenticated } = useAuth()
+const { isDark, set: setTheme } = useThemeMode()
+
+// App initialization logic
 onMounted(() => {
-  // 1. หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
+  // 1. Fetch user profile if tokens exist
   if (isAuthenticated.value) {
     fetchUserProfile()
   }
 
-  // 2. ตรวจสอบและคืนค่า Theme (Dark/Light) จาก LocalStorage
+  // 2. Initialize theme from persistent storage or system preference
   const savedTheme = localStorage.getItem('theme')
-  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
+  if (savedTheme) {
+    setTheme(savedTheme === 'dark')
+  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    setTheme(true)
   }
 })
 </script>