Dashboard Redesign — Light/Dark Mode और बेहतर Information Density
- dashboard
2026-06-05 को, हमने HeatMapX dashboard (heatmapx.com/dashboard) का पूरा redesign ship किया। Visibility और usability दोनों में काफी सुधार हुआ है।
क्या बदला
☀ Three-way theme: Light / Dark / System
Header के top-right में एक three-way toggle — "☀ Light", "💻 System", "🌙 Dark" — जोड़ा गया है।
- System (default): आपकी OS appearance setting को automatically follow करता है। macOS पर "Auto" set होने पर, रात में बिना किसी manual action के dark में switch हो जाता है।
- Manual override: आप किसी भी समय light या dark pin कर सकते हैं। Preference आपके browser में save होती है।
- Initial load पर flash of unstyled content (FOUC) रोका जाता है, इसलिए reload पर सही theme तुरंत render होती है।
▤ Registered sites को tabular list के रूप में redesign किया
पुराने two-column card grid को single-row table layout से replace किया गया है, जिससे multiple sites register होने पर scannability काफी बेहतर हो जाती है।
- Columns सभी rows में vertically align हैं, जिससे एक नज़र में status और event counts compare करना आसान है
- Site name, URL, API key, और tracker tag सभी एक single row पर compactly दिखते हैं
- Setup details "▸ Setup info" के नीचे collapse होती हैं (API key और tracker tag copy करने के लिए expand करें)
- लंबे names और URLs "…" से automatically truncate होते हैं ताकि layout कभी न टूटे
＋ Section heading के बगल में "Add site" button
"Registered Sites" heading के बगल में अब एक compact "＋ Add site" button दिखता है, जिससे बिना scroll किए नई site add की जा सकती है (list के bottom पर original button भी बना रहता है)।
◐ Unified GitHub-style flat design
Color scheme को simplify किया गया है, जिससे visual noise काफी कम हुआ है।
- Page background: neutral gray (
#f5f5f5), Linear और Supabase जैसे modern SaaS products के tone से matching - Cards: white base + thin border, कोई shadow नहीं, 6px border radius
- Orange को single brand accent के रूप में (पहले: blue, green, purple, और amber का mix)
- Semantic status colors preserved: green (active) / amber (warning) / red (error)
पहले / बाद
| पहलू | पहले | बाद |
|---|---|---|
| Color theme | Fixed dark dashboard | Three-way: Light / Dark / System |
| Layout | Two-column card grid (कम information density) | Single-column tabular list (columns vertically aligned) |
| Site display | Vertically stacked, बहुत जगह लेता था | एक site = एक row + collapsible details |
| Add button | केवल page के bottom पर | Heading के बगल और bottom दोनों पर |
| Brand color | Blue / green / purple / amber का mix | Unified orange single-accent axis |
अतिरिक्त सुधार
- Site name और URL length limits: Names के लिए 60 characters / URLs के लिए 512 characters, layout breakage रोकने के लिए।
- Add-site placeholders updated: सभी 15 supported languages में
e.g. in-gol/https://in-gol.comकोe.g. My site/https://example.comसे replace किया। - Onboarding modal: Dashboard पर पहुँचने के 1 second बाद fade in होता है, "अचानक pop" का एहसास कम करता है।
- Code snippets: Tracker tag और CLI command displays को dark backgrounds से light gray pill style में update किया गया है, light theme के साथ harmony में।
Impact का दायरा
यह release केवल UI/UX है — measurement logic, data structures, और API unchanged हैं। Existing embedded tracker tags पहले की तरह काम करते रहते हैं।