feat(ui): standardize collapsible filters and date selection UI

.agent/skills/ui-consistency/SKILL.md

@@ -775,6 +775,38 @@ import { Input } from "@/Components/ui/input";
 />
 ```
 
+## 11.8 篩選列規範 (Filter Bar Norms)
+
+列表頁面的篩選區域（Filter Bar）應遵循以下規範以節省空間並保持層級清晰：
+
+1.  **標籤文字 (Labels)**: 使用 **`text-xs`** (`12px`) 大小，顏色建議使用 `text-gray-500` 或 `text-grey-2`。這與一般表單 (`text-sm`) 不同，目的是降低篩選列的視覺權重。
+2.  **輸入元件高度**: 統一使用 **`h-9`** (`36px`)。
+3.  **佈局**:
+    - **容器內距**: 統一使用 **`p-5`** (`20px`)。
+    - **Grid 間距**: 建議使用 **`gap-4`** (`16px`) 或 `gap-6` (`24px`)，但同一專案內需統一。本專案推薦 **`gap-4`**。
+    - **垂直間距**: Label 與 Input 之間使用 **`space-y-1`** (`4px`)。
+    - **排版**: 建議使用 Grid 系統 (`grid-cols-12`) 進行排版。
+
+```tsx
+<div className="space-y-1">
+  <Label className="text-xs font-medium text-grey-2">關鍵字搜尋</Label>
+  <Input className="h-9" placeholder="..." />
+</div>
+```
+
+4.  **操作按鈕區 (Action Bar)**:
+    - **位置**: 位於篩選列最下方。
+    - **樣式**: 統一使用 `flex items-center justify-end border-t border-grey-4 pt-5 gap-3`。
+    - **說明**: `border-grey-4` 為標準通用邊框色，`pt-5` 與容器 padding (`p-5`) 呼應，維持視覺平衡。
+
+5.  **收合模式 (Collapsible Mode)**:
+    - **目的**: 節省垂直空間，預設隱藏較佔空間與低頻使用的篩選器（如日期區間）。
+    - **實作**:
+        - 預設狀態：若無相關篩選值，則預設為 **收合 (Collapsed)**。
+        - 切換按鈕：位於 Action Bar 左側 (`mr-auto`)。
+        - 樣式：Ghost Button + `ChevronDown`/`ChevronUp` Icon + 提示圓點 (Indicator)。
+    - **邏輯**: 若載入頁面時已有被隱藏的篩選值 (e.g. `date_start`)，則強制 **展開 (Expanded)** 或顯示提示。
+
 ---
 
 ## 12. 檢查清單