Sidebar ซ้ายถาวรและ Dashboard Layout แบบ Multi-Page
- dashboard
- navigation
เมื่อวันที่ 2026-06-05 เรา rebuild heatmapx.com/dashboard ด้วย persistent sidebar layout สไตล์ Supabase/Vercel เต็มรูปแบบ (ต่อจากการรีดีไซน์ dashboard เต็มรูปแบบ ที่ ship ในวันเดียวกัน)
Layout ใหม่
┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX [☀💻🌙] [JA/EN] │ ← sticky header
├──────────────┬───────────────────────────────────────┤
│ MENU │ │
│ ▸ ⌂ Home │ Home │
│ ▤ Heatmaps │ │
│ │ Sites / Today's Events / Plan │
│ ⌘ CLI&Skills│ │
│ $ Plan&Billing│ AI Analysis Usage [████░] │
│ ⚙ Settings │ PV Usage [██░░░] │
│ │ │
│ COMING SOON │ Quick Actions │
│ 🧪 A/B Tests │ [▤ View Heatmaps] [＋Add] │
│ ✨ Dynamic UI│ │
├──────────────┤ │
│ Log out │ │
└──────────────┴───────────────────────────────────────┘
ห้าหน้าเฉพาะ
| Route | หน้า | เนื้อหา |
|---|---|---|
/dashboard |
⌂ Home | Stats card (เว็บ / event วันนี้ / plan ปัจจุบัน), usage bar (AI analysis / PV), quick action |
/dashboard/sites |
▤ Heatmaps | Tabular list ของเว็บที่ลงทะเบียน เพิ่มเว็บใหม่จากที่นี่ |
/dashboard/cli |
⌘ CLI & Skills | คู่มือติดตั้งแบบ side-by-side สำหรับ terminal CLI และ Claude Code Skill |
/dashboard/billing |
$ Plan & Billing | สรุป usage ปัจจุบัน + ตารางเปรียบเทียบ plan เต็มรูปแบบ (Free / Pro / Team / Enterprise) |
/dashboard/settings |
⚙ Settings | ตัวเลือกภาษา (English / 日本語) — การตั้งค่าเพิ่มเติมจะมาเร็ว ๆ นี้ |
สิ่งที่เปลี่ยนแปลง
▤ Persistent left sidebar สไตล์ Supabase
รายการ navigation หลักทั้ง 5 รายการมองเห็นได้ตลอดเวลาใน left sidebar ติด scroll เพื่อให้คุณสลับหน้าได้จากทุกที่
- Active page highlight: หน้าปัจจุบันถูก emphasize ใน menu
- Icon: แต่ละรายการ menu มี visual identifier
- Log out: ติดอยู่ที่ด้านล่าง sidebar ลดความเสี่ยงจากการ click โดยไม่ตั้งใจ
⌂ Home เป็นภาพรวมในทันที
/dashboard — หน้าแรกหลัง login — ออกแบบให้แสดงภาพสมบูรณ์ของ account status ในมุมมองเดียว
- Stats card แสดงจำนวนเว็บ, รวม event วันนี้ และ plan ปัจจุบัน
- Progress bar สำหรับ AI analysis usage และ monthly PV (amber เมื่อเกิน 80%, red เมื่อเกิน 100%)
- Quick action: "View Heatmaps", "Add Site", "Upgrade" และ "CLI Setup"
⌘ CLI & Skills แบบ side by side
ทั้งสองวิธีในการใช้ HeatMapX — terminal CLI และ Claude Code Skill — ถูกอธิบายในหน้าเดียวด้วย two-column layout
- CLI: ทีละขั้นตอนตั้งแต่
npm install -g heatmapxจนถึงheatmapx analyze - Claude Code Skill: ติดตั้งด้วย
/plugin install heatmapx-skill@xtv-llc/heatmapx-cliและเรียกใช้ HeatMapX ตรงจาก conversation - คำสั่งตัวอย่างแสดงทั้งภาษาอังกฤษและญี่ปุ่น
$ ตารางเปรียบเทียบ plan เต็มรูปแบบใน dashboard
หน้า Plan & Billing รวมตารางเปรียบเทียบ Free / Pro / Team / Enterprise ครบถ้วน เพื่อให้คุณดูตัวเลือกและ upgrade ได้โดยไม่ต้องออกจาก dashboard
- toggle รายเดือน / รายปี (ค่าเริ่มต้นรายปี; การชำระรายปีให้ส่วนลดมากกว่ารายเดือน) สำหรับราคาปัจจุบัน ดูหน้าราคา
- Plan ปัจจุบันของคุณมีป้าย "Current" สีเขียว
- Pro ถูก highlight สีส้มเป็นตัวเลือกที่แนะนำ
- Enterprise ลิงก์ไปยัง
heatmapx@xtv.co.jpสำหรับติดต่อโดยตรง
⚙ เลือกภาษาใน Settings
การเปลี่ยนภาษาเคยมีเฉพาะ toggle สองสถานะใน header ตอนนี้ยังเปิดเผยเป็น radio selector ชัดเจนใน Settings ด้วย การเปลี่ยนแปลงมีผลทันทีและบันทึกไว้ในเบราว์เซอร์
Coming Soon
ส่วน "Coming Soon" ที่ด้านล่าง sidebar แสดงฟีเจอร์ที่จะมาใน release หน้า:
| ฟีเจอร์ | คำอธิบาย |
|---|---|
| 🧪 A/B Tests | A/B testing คลิกเดียวสำหรับการเปลี่ยน copy และ layout ตาม heatmap insight |
| ✨ Dynamic UI | Personalization engine ที่ปรับ UI ตาม user attribute และ behavior pattern |
การปรับปรุงอื่น ๆ
- Sticky header: logo, theme switcher และ language toggle ยังมองเห็นได้ขณะ scroll
- Sticky sidebar: navigation เข้าถึงได้ตลอดเวลาขณะ scroll เนื้อหาหน้า
- ย้าย Log out: จากมุมขวาบน header ไปยังด้านล่าง sidebar (action สำคัญแต่ใช้บ่อยต่ำถูกย้ายลงมา)
- Backward compatible: bookmark
/dashboardเดิมจะไปยัง Home screen ใหม่ — ไม่จำเป็นต้อง redirect
ขอบเขตผลกระทบ
release นี้เป็น UI/UX เท่านั้น — tracking logic, โครงสร้างข้อมูล และ API ไม่มีการเปลี่ยนแปลง tracker tag ที่ embed ไว้แล้วยังทำงานได้เช่นเดิม ไม่จำเป็นต้อง redirect สำหรับ bookmark /dashboard ที่มีอยู่