昨天有了情緒視覺化，但回顧特定主題（比如「考試」）還是得滑清單
今天把體驗做直覺一點：直接輸入關鍵字搜尋日記內容，再搭配日期範圍，就能精準找到要看的那幾篇

今日目標

1. 頁面上方新增關鍵字搜尋框（即時、大小寫不敏感、支援中英文）。
2. 支援日期篩選（全部／本月／上月／自訂）。
3. 清單與統計（若有）都依篩選後結果同步更新。
4. 標題會依條件動態顯示：

• 本月 → 本月歷史紀錄（含「考試」）
• 上月 → 2025/08 歷史紀錄（含「加班」）
• 全部 → 全部歷史紀錄（含「旅行」）

Prompt

幫我加入「全文關鍵字搜尋 + 日期篩選」。

=== 功能需求 ===
1) 狀態
   - query: string（關鍵字，去頭尾空白；大小寫不敏感）
   - quickPreset: 'all' | 'thisMonth' | 'lastMonth' | 'custom'
   - startDate?: Date
   - endDate?: Date

2) 篩選邏輯
   - 先用日期篩選，再對 content 做 includes（toLowerCase）
   - query 為空時不做文字過濾
   - 日期預設為「本月」

3) UI
   - 上方搜尋列：Input（placeholder: "搜尋內文，例如：考試、旅行、emo"）
   - 快速日期 SegmentedControl（全部/本月/上月/自訂）
   - 自訂時顯示 startDate / endDate 選擇器
   - 標題會根據條件組合顯示：「yyyy/MM 歷史紀錄（含『{query}』）」或「全部歷史紀錄」

4) 清單與合計
   - 使用 filteredDiaries 渲染列表（日期新→舊）
   - 顯示「篩選後共 N 篇」與（若已有圖表）採用 filteredDiaries 計算

5) 效能（先 TODO）
   - 量大時可把日期範圍丟 Firestore 查詢（where on date），回來後再前端做文字 includes
   - 真正要做全文檢索時，之後可接 Algolia / MeiliSearch，或在 Firestore 存 n-grams 索引欄位

今日驗收 ✅

1. 輸入「很熱」即可只看到內文含「很熱」的日記（即時反應）
   
2. 切到「上月」＋關鍵字「很熱」，清單只留下上月、內文含報告的篇章，也可以自訂日期
   
3. 清單筆數與（若有）統計圖表數據與篩選結果一致
4. 標題會加上提示詞（例如：本月歷史紀錄（含「考試」））

明日預告

Day 17 我們會做提醒與通知，可以自己設定時間，每天幾點時若還沒寫日記就寄一封email提醒你，讓你不會又忘記寫日記～

理論上 Day21 才會提部署，但我先嘗試把作品掛上去了
霓的情緒日記 歡迎點進去玩玩！
有什麼想法或建議都歡迎跟我說～（拜託不要攻擊我小小的網站 QQ）