Bảng điểm: learn /ielts/today (SRC-1303)

Màn: journey "Learn & Practice" của sân luyện IELTS. Mã nguồn: apps/learn/src/ielts/journeys/JourneyPages.tsx (TodayPage), cột phải apps/learn/src/IeltsPathway.tsx (LearnBaseLinks), shell apps/learn/src/components/JourneyShell.tsx. Chuẩn: focus-and-load.md. Skill: /ui-audit-25. Bản ngắn: chấm qua mã + Playwright 375 x 812 và 1440 x 900 với mockApi, chưa qua ảnh của chủ dự án.

Lượt	Ngày	Điểm	Ghi chú
0 (trước khi sửa)	09.10.2026	40/50	đo bằng Playwright
1 (sau lô 1)	09.10.2026	45/50	lô 1 dưới đây
2 (sau lô 2)	09.10.2026	50/50	lô 2 dưới đây; đo lại bằng Playwright 375/1440
3 (gọn 50%, SRC-1321)	10.10.2026	50/50	lô 3 dưới đây; đo lại bằng Playwright 375/1280

Hai câu bắt buộc

• Nhìn đâu trước? (lượt 0) ở 375px thẻ "Your status" đứng giữa header và h1: h1 "Learn & Practice" nằm ở y=384, tức là nửa trên của tầm nhìn đầu là Membership. Một nút tô đầy ("Luyện Reading", y=736). Lần đầu mở, tour tự bật và cuộn trang xuống bước 2.

• Bao nhiêu thứ? (lượt 0) 375px: thẻ trạng thái, khối tiêu đề, bước 1 (thẻ kỹ năng hôm nay) = 3 khối trong tầm nhìn đầu, trong ngân sách L1. Trang tràn ngang 15px (scrollWidth 390).

• Sau lô 1: h1 ngay dưới thanh bước (e2e: y(h1) < y(status-card)), rồi bước 1 với một nút tô đầy; thẻ trạng thái xuống cuối trang ở 375px (vẫn ở cột phải từ lg). scrollWidth = 375.

• Sau lô 2: lần đầu mở ở 375px tour không bật và trang không cuộn (scrollY = 0, h1 trong tầm nhìn); tour chỉ mở khi learner cuộn tới thẻ "Practise a skill". Số phút hôm nay nói một lần (thẻ trạng thái).

• Sau lô 3 (SRC-1321): tầm nhìn đầu ở 375px: h1 → thẻ kỹ năng → một nút tô đầy, rồi Status Card ba dòng, Build your base, Learning Setup. Vùng nội dung + cột phải ở 1280px: 26 phần tử, 51 từ (trước 67 và 169); nút/link 18 → 7. Bốn kỹ năng là hàng 2 của Learn; hàng 1 luôn mở, Learn luôn tô.

25 yếu tố

#	Yếu tố	Lượt 0	Lượt 1	Lượt 2	Bằng chứng / luật
1	Information Architecture	pass	pass	pass	lô 3: một thẻ kỹ năng; bốn kỹ năng ở hàng 2, Grammar/Full tests ở cột phải (không còn hai bước đánh số)
2	Navigation	pass	pass	pass	lô 3: hàng 1 luôn mở, Learn tô bg-accent-deep ở mọi trang, mục khác là tag; hàng 2 = READING, LISTENING, WRITING, SPEAKING, không pill nào sáng ở /ielts/today
3	Layout	fail	pass	pass	375px: aside thẻ trạng thái đứng trước nội dung trong DOM → nay nội dung trước, lg:order giữ cột phải (F7); e2e ieltsHubsLayout.spec.ts
4	Visual Hierarchy	partial	pass	pass	một nút tô đầy; lượt 0 h1 bị đẩy xuống y=384 bởi thẻ trạng thái (F3)
5	Responsive Design	fail	pass	pass	lưới grid lg:grid-cols-2 không khai cột nên track ngầm nở theo dòng "READING + Start here" → grid-cols-[minmax(0,1fr)], nhãn và "Start here" xuống dòng; e2e scrollWidth <= 375
6	Interaction Pattern	pass	pass	pass	bước gập/mở, mặc định mở
7	User Flow	pass	pass	pass	"Luyện Reading" dẫn thẳng vào kỹ năng Nemo chọn
8	Affordance	pass	pass	pass	dòng kỹ năng có mũi tên, cả dòng là link
9	Feedback	pass	pass	pass	hover đổi màu chữ
10	State	pass	pass	pass	Skeleton khi dữ liệu journey chưa về
11	Design System	pass	pass	pass	shadcn Card/Button, token
12	Components	pass	pass	pass	NumberedStep, CardHint dùng chung
13	UI Patterns	pass	pass	pass	journey có bước đánh số
14	Forms	pass	pass	pass	không có form
15	Data Display	partial	partial	pass	bước 1 không còn dòng phụ số phút; số phút hôm nay chỉ ở thẻ trạng thái (L5); e2e đếm [data-step-line] = 1 và không còn chữ "Hôm nay:" trong trang
16	Onboarding	partial	partial	pass	lô 3: tour ielts-hub bỏ cùng thẻ bốn kỹ năng nó trỏ vào. Trước đó: tour ielts-hub dùng whenInView: chỉ tự mở khi thẻ "Practise a skill" đã vào tầm nhìn, và không cuộn khi element đã ở trong tầm nhìn; e2e lần đầu ở 375px: scrollY = 0, h1 trong tầm nhìn
17	Empty State	pass	pass	pass	chưa có phút thì nói một dòng
18	Error Handling	partial	partial	pass	mọi nguồn dữ liệu learner hỏng thì loadHomeSignals báo lỗi thay vì vẽ trang rỗng như thật, và quá 15s không về cũng tính là hỏng: dòng role=alert + "Thử lại" thay Skeleton (dùng chung cho mọi trang journey); e2e chặn API
19	Accessibility	pass	pass	pass	số bước có nhãn "Step 1 of 4"; nút ? có vùng chạm mở rộng
20	Personalization	pass	pass	pass	kỹ năng hôm nay theo dữ liệu learner
21	Typography	pass	pass	pass	h1 text-2xl + một dòng phụ (L2)
22	Color	pass	pass	pass	một màu nhấn
23	Spacing	pass	pass	pass	thang mt-3/6
24	Iconography	partial	partial	pass	lô 3: còn hai icon lucide (Grammar, Full tests) ở cột phải, e2e đếm 2. Trước đó: icon kỹ năng, Grammar, Full tests sang lucide (BookOpen, Headphones, PenLine, Mic, BookText, ClipboardList); e2e: 4 svg.lucide, 0 SVG khác trong thẻ
25	Motion	partial	partial	pass	đèn rọi và thẻ tour trượt giữa các bước qua m.div (motion), lần đặt đầu tức thì, giảm chuyển động thì tức thì; bỏ transition CSS của .n12-tour-spot/.n12-tour-card

Lô đã sửa

Lô	Ngày	PR	Yếu tố	Thay đổi
1	09.10.2026	session/ui-audit-pass2	3, 4, 5	hết tràn ngang ở 375px; thẻ trạng thái xuống sau nội dung dưới lg (đổi ở JourneyShell, nên mọi trang journey có thẻ trạng thái cùng được)
3	10.10.2026	session/ielts-nav-tags	1, 2, 16, 24	SRC-1321: menu cấp 1 luôn mở, Learn luôn tô, mục khác thành tag; hàng 2 của Learn là bốn kỹ năng; trang Learn còn h1 + một thẻ; Grammar, Full tests sang cột phải; Status Card ba dòng
2	09.10.2026	session/ui-audit-pass3	15, 16, 18, 24, 25	bỏ dòng số phút ở bước 1; tour whenInView (Tour.tsx canonical, chép sang learn và marlins); dòng lỗi thay Skeleton đứng mãi ở mọi trang journey; icon lucide; tour trượt qua motion

Còn lại

Không còn yếu tố partial hay fail. Nói thẳng hai giới hạn:

1. "Dữ liệu không về" được nhận ra theo hai đường: mọi nguồn theo learner (effort, diag4, bốn trang kỹ năng) cùng hỏng, hoặc quá 15 giây. Một vài nguồn hỏng lẻ vẫn vẽ trang với phần còn lại, đúng thiết kế cũ của homeSignals.ts, nên trang không báo lỗi cho trường hợp ấy.
2. Hành vi whenInView chỉ bật cho hai tour ielts-hub và ielts-subskills; các tour khác của learn và marlins vẫn tự mở và tự cuộn như cũ.