Vanilla-Js

Day19 定下的「每趟旅行是一個單一的 HTML」，用起來最困擾的是按上一頁就直接回總覽。這篇記錄把它翻掉的過程：為什麼光拆檔案沒用、要每個畫面都有網址；單一外殼加

指南升成主角之後，我拿手機實際用了一輪，丟給 Claude 一串體驗問題，第一條就是收回 Day21 做的「往下收、往上露」：「那個好卡，用一層就好了」。記錄這輪 UI 調整的取捨：固定哪一層（Claude 建議只固定頁首，我選頁首加日期列）、「← 總覽」收進選單還是整個拿掉、地區篩選要不要改下拉選單（地區要、類別不要），以及計畫被我退回六次、每次補了什麼。踩到的坑是為了壓低日期列把日期排成一行，最後一顆按鈕超出畫面 13px、整頁可以左右滑；之後「手機不能左右滑」寫成專案的硬規定，改版面前要在四種寬度量過。另外自動部署停住，改成手動部署。

旅行頁原本以「回來後的紀錄」為主，行前指南只是一個原樣保留的內嵌分頁；實際用下來我只看指南。這次的目標是四件事：少切頁面、打開就是當天的建議行程、旅途中記下去了哪就同步回指南（之後找店先列還沒去的，回來後的整理也直接在上面做）、頁首講清楚還剩幾天。記錄的取捨有：指南的分項攤平成頁首導覽、手機用漢堡選單（下拉選單被我否決），地點總表併進指南、新店只能加在清單尾端，頁首日期併進原本那一列、改成時間軸；另外用地址補座標的腳本把每家店畫進示意圖，太遠或沒座標的用虛線圈。踩到的坑有：合併時一刀切掉一個函式導致整頁空白、記住的舊分頁讓預設頁失效、平滑捲動讓切分項看起來沒反應、手機上一列塞不下日期、只靠店名幾乎查不到座標。

手機看行前指南時，頂部疊了三層固定列、約 190px。記錄為什麼選「往下滑收起」而不是壓縮高度、往上滑時再分兩段（滑一點只露出日期列，滑多才全部回來），為此破例改了說好原樣保留的指南樣式，以及讓收起不惱人的幾條規則：靠近頂端一定顯示、小於 8px 不判斷、捲到底的回彈不算往上滑、看不見的列鍵盤也碰不到。另一條線是地點總表的「吃」加上子分類與篩選按鈕：選項太少時 AI 可以上網補，但來源不明是隱憂，所以我改成自己丟資料給 Claude、由它查證與統整。

新專案 travel-storage：跟 Claude 一起排行程，每趟旅行做成一個自含式 HTML，放成一個私人網站。這篇記錄旅行頁怎麼設計成「一頁走完一趟旅行」：模板照行前指南還是回來後的全紀錄、行程項目用 done/plan/skip 等狀態從計畫走到實際、行前指南原樣內嵌而不是拆掉重寫、總覽頁對還沒結束的旅行只給出發日期（網址也不帶地名）、旅途中「先在對話回選項，挑了才寫進頁面」的更新流程，以及離線快取的代價。

店家頁的「常見風味」在線上永遠是空的，但負責統計的純函式有十幾條測試、全綠——問題不在算法，在查詢根本沒撈那兩個欄位。這篇記錄為什麼不直接把欄位加進去、假的 Supabase client 要假到什麼程度才抓得到這種 bug，順帶收掉草稿按「還原」就被清掉與全新安裝 SQL 缺欄位兩件，以及驗證修正時我怎麼用一行 git 把自己的修正刪掉。

coffee-review 原本的「杯測」其實是自己沖一支豆，真正的杯測是一次擺 N 杯、每杯用編號識別。這篇記錄舊名字讓位、編號預設手動、未評分當成一級狀態這些產品取捨，為什麼資料分成兩張表而不是一個 jsonb 陣列，以及一組評分元件怎麼輪流裝 N 杯。

Coffee Review 品鑑表單最上面的「店家」有兩個問題：店家筆記只能從店家頁填，所以沒人填；選店家又拆成「選擇」和「新增」兩套，猜錯就撞 unique constraint。記錄把筆記搬進表單、把搜尋合成一個輸入框時的取捨（筆記要不要自己的儲存鍵、dirty 跟誰比、什麼時候才問 Google），以及 code review 才抓出來的三個坑：listener 疊兩層讓 chip 點了沒用、失敗 toast 被成功訊息蓋掉、把 LatLng 的方法拆下來呼叫讓從 Google 新增店家整條壞掉。