Thiết Kế Lại Dashboard — Light/Dark Mode & Mật Độ Thông Tin Được Cải Thiện
- dashboard
Vào ngày 2026-06-05, chúng tôi đã triển khai thiết kế lại hoàn toàn dashboard HeatMapX (heatmapx.com/dashboard). Khả năng hiển thị và tính khả dụng đều được cải thiện đáng kể.
Những gì đã thay đổi
☀ Theme ba trạng thái: Light / Dark / System
Toggle ba trạng thái — "☀ Light", "💻 System", "🌙 Dark" — đã được thêm vào góc trên bên phải của header.
- System (mặc định): Tự động theo cài đặt giao diện của hệ điều hành. Trên macOS được đặt thành "Auto", nó chuyển sang tối vào ban đêm mà không cần thao tác thủ công.
- Override thủ công: Bạn có thể ghim light hoặc dark bất cứ lúc nào. Tùy chọn được lưu trong trình duyệt của bạn.
- Flash of unstyled content (FOUC) khi tải lần đầu đã được ngăn chặn, vì vậy theme đúng được render ngay lập tức khi tải lại.
▤ Site đã đăng ký được thiết kế lại thành danh sách dạng bảng
Lưới card hai cột trước đây đã được thay thế bằng layout bảng một hàng, cải thiện đáng kể khả năng quét khi bạn có nhiều site đã đăng ký.
- Các cột căn dọc qua tất cả các hàng, giúp dễ dàng so sánh trạng thái và số sự kiện trong nháy mắt
- Tên site, URL, API key, và tracker tag đều hiển thị gọn gàng trên một hàng
- Chi tiết cài đặt thu gọn dưới "▸ Setup info" (mở rộng để sao chép API key và tracker tag)
- Tên và URL dài được tự động cắt ngắn với "…" để layout không bao giờ bị vỡ
＋ Nút "Add site" bên cạnh tiêu đề section
Nút "＋ Add site" nhỏ gọn giờ xuất hiện bên cạnh tiêu đề "Registered Sites", cho phép bạn thêm site mới mà không cần cuộn (nút gốc ở cuối danh sách vẫn còn).
◐ Thiết kế phẳng thống nhất kiểu GitHub
Bảng màu đã được đơn giản hóa, giảm đáng kể nhiễu thị giác.
- Nền trang: xám trung tính (
#f5f5f5), phù hợp với tông của các sản phẩm SaaS hiện đại như Linear và Supabase - Card: nền trắng + viền mỏng, không bóng đổ, border radius 6px
- Cam là màu nhấn thương hiệu duy nhất (trước đây: xanh lam, xanh lá, tím, và hổ phách pha lẫn)
- Màu trạng thái ngữ nghĩa được giữ nguyên: xanh lá (active) / hổ phách (cảnh báo) / đỏ (lỗi)
Trước / Sau
| Khía cạnh | Trước | Sau |
|---|---|---|
| Theme màu | Dashboard tối cố định | Ba trạng thái: Light / Dark / System |
| Layout | Lưới card hai cột (mật độ thông tin thấp) | Danh sách dạng bảng một cột (cột căn dọc) |
| Hiển thị site | Xếp chồng dọc, chiếm nhiều không gian | Một site = một hàng + chi tiết có thể thu gọn |
| Nút thêm | Chỉ ở cuối trang | Cả bên cạnh tiêu đề và ở cuối |
| Màu thương hiệu | Xanh lam / xanh lá / tím / hổ phách pha lẫn | Cam thống nhất làm trục nhấn đơn |
Cải tiến bổ sung
- Giới hạn độ dài tên site và URL: 60 ký tự cho tên / 512 ký tự cho URL, ngăn layout bị vỡ.
- Cập nhật placeholder thêm site: Thay
e.g. in-gol/https://in-gol.combằnge.g. My site/https://example.comqua tất cả 15 ngôn ngữ được hỗ trợ. - Modal onboarding: Fade in sau 1 giây khi đến dashboard, làm mềm cảm giác "pop lên đột ngột".
- Đoạn code: Hiển thị tracker tag và lệnh CLI đã được cập nhật từ nền tối sang kiểu pill xám nhạt, hài hòa với light theme.
Phạm vi tác động
Phiên bản này chỉ là UI/UX — logic đo lường, cấu trúc dữ liệu, và API không thay đổi. Các tracker tag được nhúng hiện có tiếp tục hoạt động như cũ.