UI 架構
路由、Sidebar、URL 狀態管理
路由形態
經文頁採 path-based 路由（/scripture/[book]），章節狀態走 query string。
text
/scripture/Gen?chapter=1
/scripture/Ps?chapter=119
/scripture/Gen ← 預設：顯示書卷提示，尚未選章
/scripture/Gen?chapter=all ← 全卷模式URL 即唯一狀態源。沒有任何 client-side state 來表達「我現在在第幾章」。Back/Forward 永遠正常，URL 可書籤。
整體版面
text
┌─────────┬─────────┬──────────────────┬─────────────────┐
│ 書卷 │ 章節 │ 經文內容 │ [地圖] [角色] │
│ │ │ │─────────────────│
│ 創世記 ▶ │ 1 │ 創世記 第 1 章 │ ┌────────────┐ │
│ 出埃及記 │ 2 │ 起初，神創造天地 │ │ Leaflet 地圖│ │
│ ... │ ... │ ... │ │（地點標示） │ │
│ │ │ │ └────────────┘ │
│ │ │ │ （切角色 tab 顯示│
│ │ │ │ 人物清單） │
└─────────┴─────────┴──────────────────┴─────────────────┘三欄 Sidebar（全 Server Component）
- 書卷欄：選書卷後進入 /scripture/[book]，顯示 66 卷平面列表（w-44）
- 章節欄：有書卷時顯示，列出該卷所有章（含「全部」選項），grid 兩欄（w-20）
不做樹狀展開。每欄都是獨立平面列表，由路由條件決定渲染哪幾欄。不寫 'use client'，每次 URL 改變 → Next.js Server Component re-render → sidebar HTML 重出。
右側 Context 欄（Client Component）
顯示當前章節相關的人事時地物，選了書卷且選了章節（或全卷模式）時才顯示。
| Tab | 內容 |
|---|---|
| 地圖 | 本章地點標示在 mini-map（Leaflet + MapTiler） |
| 角色 | 本章出現的 Person 列表，點擊展開詳情（性別、年代、出現節數、摘要） |
Tab 狀態用 React useState 管理（不寫入 URL），展開狀態同上。寬度固定 45vw。
頁面（?page=）擴充規劃
| 路徑 | 狀態 | 內容 |
|---|---|---|
| /scripture | 已完成 | 經文檢索 + 右側 Context 欄 |
| /references | 已完成 | 資料集 / 驗證 / 架構參考頁 |
| timeline（未來） | 待做 | 時間軸視覺化 |
| graph（未來） | 待做 | 圖譜探索 |
| search（未來） | 待做 | 全文搜尋 |
人物、地點不做頂層頁面入口——它們從 scripture 章節的右側 Context 欄進入。
響應式
僅支援桌面，不支援手機。版面固定為書卷欄 + 章節欄 + 經文區 + 右側 Context 欄並排。