Day24 [travel-storage] 按上一頁就回總覽：捨棄「一趟旅行一個 HTML」，改成外殼＋JSON＋#網址

public/trips/<slug>/
  index.html  app.js  app.css      外殼與程式，不用改
  trip.json   頁首、日期、設定（路線顏色、子分類、住宿、機場）
  plan.json   建議行程
  areas.json  地區與店家（每家店有穩定 id）
  notes.json  備註（每段有 id）
  log.json    紀錄（實際每日行程）

const FILES = ['trip', 'plan', 'areas', 'notes', 'log'];
let TRIP, PLAN, AREAS, NOTES, LOG;
try {
  [TRIP, PLAN, AREAS, NOTES, LOG] = await Promise.all(FILES.map(async f => {
    const res = await fetch(f + '.json');
    if (!res.ok) throw new Error(f + '.json ' + res.status);
    return res.json();
  }));
} catch (err) {
  $('#main').innerHTML = `<p class="loading">資料載入失敗（${esc(err.message)}）。連上網路後重新整理。</p>`;
  return;
}
// 先把這趟的檔案都存進離線快取（Service Worker 只收同網域、最多 20 個）
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.ready.then(reg => reg.active && reg.active.postMessage({
    type: 'precache', urls: ['./', 'app.css', 'app.js', ...FILES.map(f => f + '.json')].map(u => new URL(u, location.href).pathname),
  })).catch(() => {});
}

/* 網址決定畫面，每個畫面都有自己的 #：
     #plan/10-29                 建議行程某一天
     #areas  #areas/<地區>        地區（只顯示某一區）
     #areas/<地區>/<店 id>        捲到某家店
     #areas/<地區>/<店 id>/map    「回地區」：該區示意圖，亮起這家店
     #notes  #notes/<段落 id>     備註某一段（#notes/<段落>/<列 id> 捲到表格的某一列）
     #log  #log/10-29             紀錄某一天
   「跳轉」（換分頁、從行程點到地區或店、目錄、Pass 連結）會多一筆上一頁；
   同一分頁裡換日期、換地區篩選只改網址，不多一筆。 */

// 跳轉：先記下目前這一筆捲到哪，再新增一筆；replace：只改網址
function go(hash, opt = {}){
  if (opt.replace) {
    history.replaceState({ y: 0 }, '', hash);
    apply('replace', opt.top);
    return;
  }
  history.replaceState({ ...(history.state || {}), y: scrollY }, '');
  if (location.hash !== hash) history.pushState({ y: 0 }, '', hash);
  apply('push', opt.top);
}

$('#areasel').addEventListener('change', e => go(e.target.value === 'all' ? '#areas' : '#areas/' + e.target.value, { replace: true }));
// ...
  if (b) go('#notes/' + b.dataset.note);
// ...
  if (it) { go(itemHash(it.dataset.item || it.dataset.spot)); return; }
  if (ar && AREA[ar.dataset.area]) { go('#areas/' + ar.dataset.area); return; }

// how：push（跳轉）／replace（同分頁換日期、換地區）／pop（上一頁、下一頁）／init（打開或重新整理）
function apply(how, toTop){
  const { tab, p } = parse();
  const moved = tab !== curTab;
  show(tab);
  closeMenu();
  const pop = how === 'pop';
  scrollMode = how === 'init' ? 'instant' : 'smooth';
  lastInto = null;
  if (tab === 'plan') {
    let i = p[0] ? PLAN.findIndex(d => dkey(d.d) === p[0]) : -1;
    if (i < 0) i = defaultDay();
    selectDay(i);
    if (PLAN[i]) canon('#plan/' + dkey(PLAN[i].d));
    if (!pop) top0();
  } else if (tab === 'areas') {
    // ...
  }
  if (pop) {
    // 回到這一筆離開時捲到的位置
    const y = history.state && Number.isFinite(history.state.y) ? history.state.y : 0;
    scrollTo({ top: y, behavior: 'instant' });
    if (tab === 'notes') updateNoteMark();
  } else if (moved && how === 'push' && toTop) top0();
}

if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
// ...
addEventListener('popstate', () => apply('pop'));

history.replaceState({ y: 0 }, '');
apply('init');

/* ===== 舊版（單檔頁面）存的紀錄搬過來：★ 從「地區序-店序」換成店 id，選到的日期從序號換成日期 ===== */
(function migrateOld(){
  const raw = store.get('doc-guide');
  if (raw == null) return;
  let old = {};
  try { old = JSON.parse(raw) || {}; } catch(e){}
  const pick = suffix => { const k = Object.keys(old).find(x => x.endsWith('-' + suffix)); return k ? old[k] : null; };
  try {
    const star = JSON.parse(pick('star') || '{}');
    const out = readObj('star');
    Object.keys(star).forEach(k => {
      const m = /^it-(\d+)-(\d+)$/.exec(k);
      const it = m && AREAS[+m[1]] && AREAS[+m[1]].items[+m[2]];
      if (it) out[it.id] = 1;
    });
    if (Object.keys(out).length) store.set('star', JSON.stringify(out));
  } catch(e){}
  // ...
  store.del('doc-guide');
})();

      if (!ID_RE.test(it?.id || '')) fail(at, 'id 必須是小寫英數字與 -（新店用「地區 id-下一個序號」，例如 seomyeon-24）');
      else if (itemIds.has(it.id)) fail(at, `店家 id 重複：${it.id}（★ 標記與網址靠它，不能重複，建立後也不要改）`);
      else itemIds.add(it.id);

// 這些欄位底下的陣列：每個元素一行
const LINE_KEYS = new Set(['items', 'ev', 'blocks', 'st', 'rows', 'slots']);

export function fmt(v, ind = '', key = null) {
  const c = JSON.stringify(v);
  if (v === null || typeof v !== 'object') return c;
  if (key !== null && !LINE_KEYS.has(key) && c.length <= 80) return c;
  const ni = ind + '  ';
  if (Array.isArray(v)) {
    if (!v.length) return '[]';
    const parts = LINE_KEYS.has(key) ? v.map((x) => ni + JSON.stringify(x)) : v.map((x) => ni + fmt(x, ni, ''));
    return '[\n' + parts.join(',\n') + '\n' + ind + ']';
  }
  // ...
}

/* 電腦：頁首是左側固定 sidebar；日期、地區、備註目錄改放在 sidebar 目前分頁底下 */
@media (min-width:1024px){
  .nav{position:fixed;top:0;bottom:0;left:0;width:var(--side);border-bottom:0;border-right:1px solid var(--rule);overflow-y:auto;overscroll-behavior:contain}
  .nav .in{flex-direction:column;align-items:stretch;gap:0;max-width:none;padding:24px 14px 32px 18px}
  /* ... */
  main{margin-left:var(--side)}
  .wrap{max-width:860px;padding:0 32px}
  /* ... */
}

  // 把還沒結束的旅行先存到這台裝置，旅途中沒網路也能開。
  // 旅行頁是外殼＋程式＋資料檔，全部都要存；Service Worker 一次最多收 20 個，所以一趟送一次
  const TRIP_FILES = ['', 'app.js', 'app.css', 'trip.json', 'plan.json', 'areas.json', 'notes.json', 'log.json'];
  if ('serviceWorker' in navigator && open.length && navigator.onLine) {
    navigator.serviceWorker.ready.then(reg => {
      open.forEach(t => reg.active?.postMessage({ type: 'precache', urls: TRIP_FILES.map(f => '/trips/' + t.slug + '/' + f) }));
    }).catch(() => {});
  }

function parse(){
  // 網址被截斷或手打錯（例如多一個 %）時解碼會丟錯，當成沒有指定，回到預設分頁
  let raw = location.hash.replace(/^#\/?/, '');
  try { raw = decodeURIComponent(raw); } catch(e) { raw = ''; }
  const p = raw.split('/').filter(Boolean);
  return TABS.includes(p[0]) ? { tab: p[0], p: p.slice(1) } : { tab: TABS[0], p: [] };
}

// 捲動前先重算 --stick：目錄或篩選剛收起時，ResizeObserver 還沒更新，會用到展開時的高度而捲過頭
const into = (el, block = 'start') => { setStick(); lastInto = [el, block]; el.scrollIntoView({ block, behavior: scrollMode }); };

  const io = new IntersectionObserver(es => {
    es.forEach(x => x.isIntersecting ? seen.add(x.target) : seen.delete(x.target));
    const first = [...seen].sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top)[0];
    if (first) markNote(first.dataset.noteId);
  }, { rootMargin: '-120px 0px -55% 0px' });

  const update = () => {
    queued = false;
    if (curTab !== 'notes' || notePin) return;
    const line = (parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--stick')) || 0) + 24;
    let cur = secs[0];
    for (const s of secs) { if (s.getBoundingClientRect().top <= line) cur = s; else break; }
    markNote(cur.dataset.noteId);
  };

  const release = () => { if (notePin) { notePin = ''; update(); } };
  ['wheel', 'touchstart', 'keydown', 'mousedown'].forEach(t => addEventListener(t, e => {
    if (e.type === 'mousedown' && e.target.closest && e.target.closest('[data-note],.subnav')) return;
    release();
  }, { passive: true }));