feat: Add AppHeader component and implement the default application layout.

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

@@ -98,7 +98,43 @@
 
 ---
 
-## 📊 5. Project Status (สถานะการพัฒนา)
+##  6. Dependency Map & Relationships (แผนผังความสัมพันธ์ไฟล์)
+
+ส่วนนี้ใช้อ้างอิงเวลาแก้ไขโค้ด เพื่อดูว่าไฟล์ไหนเชื่อมโยงหรือถูกเรียกใช้โดยไฟล์ใดบ้าง (Impact Analysis)
+
+### 6.1 Page Dependencies (หน้าเว็บหลักใช้อะไรบ้าง)
+
+| Page (หน้าเว็บ)                    | Components used (ส่วนประกอบที่ใช้)          | Composables used (Logic & API ที่ใช้)                 |
+| :--------------------------------- | :------------------------------------------ | :---------------------------------------------------- |
+| **`pages/index.vue`** (Landing)    | `LandingHeader`, `CourseCard`               | `useAuth`, `useCourse` (fetchCourses)                 |
+| **`pages/browse/discovery.vue`**   | `CourseCard`, `FormInput`, `LoadingSpinner` | `useCategory` (Filter), `useCourse` (Search/List)     |
+| **`pages/course/[id].vue`**        | `LoadingSpinner`, `UserAvatar` (Instructor) | `useCourse` (Detail, Enroll), `useAuth` (User Status) |
+| **`pages/classroom/learning.vue`** | `AppSidebar` (Curriculum), `GlobalLoader`   | `useCourse` (Video, Progress), `useThemeMode`         |
+| **`pages/dashboard/index.vue`**    | `CourseCard` (Recommended), `UserAvatar`    | `useAuth` (Profile), `useCourse` (My Courses)         |
+| **`pages/auth/*.vue`** (Login/Reg) | `FormInput`, `LanguageSwitcher`             | `useAuth` (Login/Register), `useFormValidation`       |
+
+### 6.2 Key Components Dependencies (Component นี้ถูกใช้ที่ไหน)
+
+- **`CourseCard.vue`** ถูกใช้ใน:
+  - `pages/index.vue` (Recommended)
+  - `pages/browse/index.vue` (Catalog List)
+  - `pages/browse/discovery.vue` (Search Result)
+  - `pages/dashboard/index.vue` (Dashboard Recommend)
+  - `pages/dashboard/my-courses.vue` (My Course List)
+
+- **`FormInput.vue`** ถูกใช้ใน:
+  - `pages/auth/*` (Login, Register, Forgot Password)
+  - `pages/dashboard/profile.vue` (Edit Profile)
+
+### 6.3 Composable Usage (Logic นี้ใครเรียกใช้บ้าง)
+
+- **`useAuth.ts`** -> ถูกเรียกใช้เกือบทุกหน้าที่มีการเช็ค User, Logout, หรือแสดงชื่อ
+- **`useCourse.ts`** -> ถูกเรียกใช้ในหน้า Browse, Course Detail, Classroom, Dashboard
+- **`useThemeMode.ts`** -> ถูกเรียกใช้ใน `layouts/default.vue` เพื่อคุม Theme ทั้งเว็บ
+
+---
+
+## <20>📊 7. Project Status (สถานะการพัฒนา)
 
 ### ✅ Completed Updates (สิ่งที่ทำเสร็จแล้ว)