昨天已經讓番茄鐘在完整完成或中途放棄時，把實際專注時間存進 timeRecords。
不過資料雖然存下來了，「時間紀錄」頁面目前還是空的。
所以今天要做的事情就是：

把昨天存下來的時間資料，真正帶進時間紀錄頁。

時間紀錄要放什麼？

在開始把資料放進頁面之前，先決定這個頁面到底要顯示哪些資訊。
目前先以「每天的專注狀況」為主，所以建立了一個 DAILY FOCUS 區塊。

每一筆紀錄目前只顯示三個資訊：

任務名稱
實際專注時間
完成／中途結束

把 timeRecords 讀回來

D26 建立的每筆時間紀錄原本就包含：

{
    taskName: "...",
    focusedSeconds: 0,
    recordedAt: "...",
    completed: false
}

所以今天不需要重新修改原本的儲存格式，而是直接讀取 localStorage 裡的 timeRecords，再利用這些資料產生時間紀錄頁的內容。
其中 taskName 和 focusedSeconds 可以用來顯示任務名稱與專注時間，completed 則用來判斷這一次是完整完成還是中途結束。
至於 recordedAt，則剛好可以拿來處理今天另一個需要的功能：日期分類。

讓每天的紀錄分開顯示

因為這次希望以「每天的專注狀況」來查看紀錄，所以不直接把所有資料全部顯示在一起，而是根據 recordedAt 判斷每筆紀錄屬於哪一天，再篩選出目前選擇日期的資料。

function getLocalDateString(date) {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

這裡沒有直接使用 ISO 字串中的日期，而是透過 Date 取得本地的年、月、日，再組成日期字串。
再判斷這筆紀錄屬於哪一天，避免接近跨日時被分到錯誤的日期。

今天到底專注了多久？

有了當天的紀錄之後，接下來就可以計算 DAILY FOCUS 要顯示的總專注時間。
例如昨天測試留下了兩筆資料：

10 秒 → 0 MIN
114 秒 → 1 MIN

如果先各自轉換：
0 + 1 = 1 MIN

但實際先加總：
10 + 114 = 124 秒
124 秒 → 2 MIN

function calculateDailyTotal(records) {
    return records.reduce((sum, record) => sum + record.focusedSeconds, 0);
}

function secondsToMinutes(seconds) {
    return Math.floor(seconds / 60);
}

這裡是先把所有秒數加總，再統一換算成分鐘，而不是先把每一筆紀錄各自轉成整數分鐘後再相加。
不然像測試資料中的 10 秒，如果先變成 0 MIN 再拿去計算，就會讓最後的總專注時間出現誤差。

再把每一筆紀錄列出來

除了當天累積的總時間之外，下方也會把當天每一筆專注紀錄分別顯示出來。
其中會根據 completed 判斷顯示的狀態：

completed: true
→ ✓ 完成

completed: false
→ 中途結束

這樣除了可以看到今天總共專注了多久，也能知道這些時間分別花在哪些任務上。

不只看今天，也可以往前看

最後再加入日期切換：

‹   10 / 10   ›

點擊左右箭頭後，可以查看不同日期的專注紀錄。
每次切換日期，頁面都會重新：

取得該日期的紀錄
↓
計算當日累積專注時間
↓
更新下方紀錄列表

如果選擇的日期沒有任何紀錄，就顯示：

這天還沒有專注紀錄

把記下來的時間放進頁面

D26 先解決了「一段專注時間怎麼被記下來」，今天則是把這些已經存在 timeRecords 裡的資料真正帶進頁面。
現在整個流程也變成：

進行番茄鐘
↓
完整完成／中途放棄
↓
儲存實際專注時間
↓
timeRecords
↓
時間紀錄頁讀取資料
↓
依日期分類
↓
顯示 DAILY FOCUS

昨天解決「時間怎麼被記下來」，今天則解決「記下來的時間要怎麼被看見」。