Please provide the file changes to generate a commit message.

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

@@ -4,7 +4,7 @@
 
 ---
 
-##                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       z️ 1. Technical Foundation (รากฐานทางเทคนิค)
+## z️ 1. Technical Foundation (รากฐานทางเทคนิค)
 
 รวมข้อมูลเครื่องมือ, ระบบความปลอดภัย และประสิทธิภาพการทำงานไว้ด้วยกัน
 
@@ -76,6 +76,14 @@
   - `ProfileEditForm.vue`: ฟอร์มแก้ไขข้อมูลส่วนตัว
   - `PasswordChangeForm.vue`: ฟอร์มเปลี่ยนรหัสผ่าน
 
+### 2.3 Shared Infrastructure (`types/`, `constants/`)
+
+- **Types (`types/`):** หัวใจของ Type Safety ทั่วทั้งแอป
+  - `auth.ts`, `course.ts`: จัดเก็บ Interface หลักที่ใช้ร่วมกันระหว่าง Composable และ Components
+  - `index.ts`: Central export สำหรับรวบรวมทุก Type ให้เรียกใช้ได้ง่ายผ่าน `@/types`
+- **Constants (`constants/`):** แหล่งเก็บข้อมูล Static
+  - `landing.ts`: จัดเก็บข้อมูลการตลาดและเนื้อหาคงที่ของหน้าแรก (Landing Page) เพื่อลดขนาดไฟล์ `.vue`
+
 ---
 
 ## 🧠 3. Logic & Data Layer (Composables)
@@ -107,6 +115,7 @@
 
 - **Logic:** ควบคุมการเปลี่ยนข้อ, การส่งคำตอบ, และการรับผลลัพธ์จาก API
 - **Cleanup:** ลบ Mock delays และ Simulation logic ออกทั้งหมดเพื่อให้ทำงานร่วมกับ API จริงได้ทันที
+- **Type Safety:** ทุก Composable เรียกใช้ Interface จาก `@/types` เพื่อความสอดคล้องของข้อมูล
 
 ---
 
@@ -133,6 +142,12 @@
 | **Classroom (Learning)** | Video Player, Sidebar        | `useCourse` (Progress, Announcements), `useMediaPrefs` |
 | **Quiz**                 | `QuizHeader`, `QuizContent`  | `useQuizRunner` (Real API Integration)                 |
 | **Profile**              | `UserAvatar`, `FormInput`    | `useAuth` (Upload Avatar, Verify Email)                |
+| **Global Context**       | `GlobalLoader`               | `useThemeMode` (Theme Standard), `useAuth` (Root Init) |
+
+### 5.1 Shared Resource Architecture
+
+- **Data Flow:** `API` -> `Composable` (**with Types**) -> `Page/Component` (**with Constants**)
+- **State Persistence:** `useCookie` (Auth) + `localStorage` (Theme, Forget Me, Unread Badges)
 
 ---
 
@@ -185,3 +200,11 @@
 10. **Profile & Certificates:**
     - **Verification Badge:** เพิ่มการแสดงผลสถานะการยืนยันอีเมลในหน้าโปรไฟล์ พร้อมปุ่มส่งอีเมลยืนยันหากยังไม่ได้ทำ
     - **Certificate Flow:** ปรับปรุงระบบดาวน์โหลดใบประกาศนียบัตรให้รองรับทั้งการดึงไฟล์เดิมและสั่ง Generate ใหม่หากยังไม่มี
+
+11. **Refactoring & UI System Overhaul (Late February 2026):**
+    - **Centralized Types System:** ย้าย Interface และ Type definitions ทั้งหมดออกจากไฟล์ Composable (เช่น `useAuth`, `useCourse`) ไปไว้ในโฟลเดอร์ `@/types/` เพื่อลดขนาดไฟล์ Logic และเพิ่มความสามารถในการนำมาใช้ซ้ำ (Reusability)
+    - **Constants Extraction:** แยกข้อมูล Static (เช่น รายชื่อหมวดหมู่, ข้อความหน้า Landing) ไปไว้ใน `@/constants/landing.ts` เพื่อให้โค้ดส่วน UI สะอาดและจัดการข้อมูลได้จากจุดเดียว
+    - **Mobile Master Drawer:** รวบรวมเมนู Navigation, Profile, Tools (เปลี่ยนภาษา/Dark Mode) และ Logout เข้ามาไว้ใน Drawer เดียวกันบนมือถือ เพื่อความสะดวกในการใช้งานแบบ Single-Hand
+    - **Landing Page Redesign:** ปรับโฉมส่วน "หมวดหมู่ที่น่าสนใจ" (Image 2 Style) เป็นแบบการ์ดแนวนอน (Horizontal) ที่เรียบง่าย ตัดลูกศรและคำอธิบายที่ไม่จำเป็นออกเพื่อให้ดู Minimal และ Premium มากขึ้น
+    - **Theming Standardization:** ปรับปรุง `app.vue` ให้ใช้ Composable `useThemeMode` ในการควบคุมธีมทั้งหมดแทนการเขียน Logic แยกต่างหาก ทำให้การสลับโหมดเสถียรและแม่นยำขึ้น
+    - **Authentication UI Polish:** เพิ่มกล่อง "Test Credentials" ในหน้า Login เพื่ออำนวยความสะดวกในการทดสอบระบบ และปรับเปลี่ยนหน้ายืนยันอีเมลให้เป็นแบบ Standalone UI (auth layout)