# ภาษา ธีม และการนำทาง · Language, theme & navigation

DevStack เริ่มจากชุมชนนักพัฒนาไทย เราจึงทำให้ NVX Stack Builder รองรับภาษาไทยและอังกฤษเต็มรูปแบบตั้งแต่วันแรก มีธีมดำ (ค่าเริ่มต้น) และธีมสว่าง มี command palette สำหรับคนที่ชอบใช้คีย์บอร์ด และมีหน้าเอกสารที่คุณกำลังอ่านอยู่นี้ หน้านี้เล่าวิธีใช้และเหตุผลของการออกแบบ

## ภาษา (TH / EN)

- ปุ่ม **ภาษาไทย / English** (ไอคอน Languages) บนแถบด้านบน สลับภาษาของทั้งแอปทันที ค่าถูกจำใน `localStorage` คีย์ `nvx-lang` ถ้ายังไม่เคยเลือก แอปจะใช้ภาษาไทยเมื่อภาษาของเบราว์เซอร์ (`navigator.language`) ขึ้นต้นด้วย `th` และใช้อังกฤษในกรณีอื่น
- ข้อความ UI ทั้งหมดอยู่ใน [`src/lib/i18n.ts`](../../src/lib/i18n.ts) ส่วนเนื้อหาของเทมเพลตเป็นชนิด `L10n` (`{ en, th }`) ที่ต้องมีทั้งสองภาษาเสมอ
- ภาษาที่เลือกมีผลกับ: คำอธิบายขั้นตอน, หัวข้อใน `setup.sh`/`setup.ps1`, `README.md` ที่ดาวน์โหลด และภาษาของคำตอบจาก AI agent (ส่ง `lang` ไปกับคำขอ)
- คำสั่งและโค้ดเป็นภาษาอังกฤษเสมอ เพราะต้องรันได้จริง
- ฟอนต์ไทยคือ **IBM Plex Sans Thai** (ตั้งแต่ v0.2.0) หัวข้อภาษาไทยใช้ letter-spacing ปกติและ line-height สูงขึ้น เพื่อไม่ให้สระและวรรณยุกต์ชนกัน

## ธีม (Dark / Light)

- **ธีมดำเป็นค่าเริ่มต้นสำหรับทุกคน** ไม่ขึ้นกับการตั้งค่า OS (v0.1–v0.3 ใช้ `prefers-color-scheme` ของ OS; เปลี่ยนใน v0.4, commit `2210920`, ตามความต้องการของเจ้าของที่อยากได้ลุคเครื่องมือนักพัฒนา) ปุ่มพระอาทิตย์/พระจันทร์สลับเป็นธีมสว่าง ค่าถูกจำใน `localStorage` คีย์ `nvx-theme`
- เซิร์ฟเวอร์เรนเดอร์ `<html class="dark">` ไว้ก่อน และสคริปต์ pre-paint เล็ก ๆ ใน `layout.tsx` ถอดคลาสออกเฉพาะเมื่อผู้ใช้เลือก light จึงไม่มีการกะพริบสี (flash) ตอนโหลด
- ดีไซน์ v0.5 อ้างอิง developer.apple.com: พื้นดำ ตัวหนังสือใหญ่ ปุ่มทรงแคปซูล สีฟ้าใช้อย่างจำกัด และโลโก้เครื่องมือจริงเป็นไทล์ (ดู [concepts/design-system.md](../concepts/design-system.md))
- ผู้ใช้ที่ตั้ง **prefers-reduced-motion** จะได้แอนิเมชันเกือบเป็นศูนย์ และเคอร์เซอร์ในหน้าต่างโค้ดหยุดกะพริบ

## Command palette

- กด **Ctrl + K** (Windows/Linux) หรือ **⌘ + K** (macOS) หรือคลิกช่อง "Search or jump to…"
- พิมพ์เพื่อค้นหา: หน้าต่าง ๆ (Home, Templates, Builder, Docs, Design system), เทมเพลตทุกตัว (เปิดหน้ารายละเอียดหรือเปิดในตัวสร้าง), ทุกหน้าในเอกสาร (กลุ่ม "Docs / เอกสาร") และ action สลับธีม/ภาษา
- ↑↓ เลื่อน, Enter เปิด, Esc ปิด

## การนำทางบนมือถือ

บนจอเล็ก เมนูจะยุบเป็นปุ่ม hamburger ที่เปิด sheet ด้านข้าง ในนั้นมีลิงก์ **เอกสาร (Docs)** ด้วย เราทดสอบทุกหน้าที่ความกว้าง 390px ว่าไม่มี horizontal scroll ทั้งภาษาไทยและอังกฤษ

## หน้าเอกสาร (`/docs`)

- เปิดได้จากเมนูด้านบน (**เอกสาร / Docs**), เมนู hamburger บนมือถือ หรือ command palette
- เดสก์ท็อปมี navigation drawer ด้านซ้ายแบ่งตามหมวด และ "ในหน้านี้" ด้านขวา บนมือถือกดปุ่มเมนูในแถบเอกสารเพื่อเปิด drawer
- กด `/` เพื่อไปที่ช่องค้นหาในเอกสาร ค้นได้ทั้งไทยและอังกฤษ
- ทุกหน้ามี **คัดลอก Markdown**, **ดูไฟล์ดิบ** (`.md`) และปุ่มคัดลอกบนทุกบล็อกโค้ด รายละเอียดเบื้องหลังอยู่ที่ [docs-site.md](../architecture/docs-site.md)

## อ้างอิง

[`src/components/prefs.tsx`](../../src/components/prefs.tsx), [`src/app/layout.tsx`](../../src/app/layout.tsx), [`src/components/header.tsx`](../../src/components/header.tsx), [`src/components/command-palette.tsx`](../../src/components/command-palette.tsx), [`src/components/docs/docs-shell.tsx`](../../src/components/docs/docs-shell.tsx)