# Tasks: Improve Chat UX v2

## Phase 1: Action Bar Redesign

### T-1.1: 前端 Action Bar 組件
- [x] 建立 `ActionBar.tsx` 組件（輸入框上方工具列）
- [x] 實作展開/收合按鈕群組
- [x] 整合上傳檔案按鈕
- [x] 整合生成報告按鈕
- [x] 整合添加人員按鈕

### T-1.2: RoomDetail 介面重構
- [x] 移除頁首的操作按鈕
- [x] 整合 ActionBar 到輸入區域
- [x] 調整 header 僅顯示房間資訊
- [x] 響應式佈局調整（mobile/desktop）

## Phase 2: Report Markdown Preview

### T-2.1: 後端 Markdown 輸出
- [x] 新增 `GET /api/rooms/{room_id}/reports/{report_id}/markdown` 端點
- [x] 實作 `DocxService.to_markdown()` 方法
- [x] 從 AI JSON 內容生成結構化 Markdown

### T-2.2: 前端預覽組件
- [x] 建立 `ReportPreview.tsx` 組件
- [x] 整合 Markdown 渲染（react-markdown）
- [x] 實作「複製 Markdown」按鈕
- [x] 實作「下載 Word」按鈕
- [x] 新增預覽 Modal/Drawer

## Phase 3: Message Actions

### T-3.1: 訊息複製功能
- [x] 在訊息 hover 時顯示操作按鈕
- [x] 實作複製訊息內容功能
- [x] 複製成功提示 (icon change feedback)

### T-3.2: @Mention 功能 - 前端
- [x] 建立 `MentionInput.tsx` 組件
- [x] 輸入 `@` 時觸發成員選單
- [x] 支援鍵盤選擇（上下鍵、Enter）
- [x] 顯示成員 display_name
- [x] 訊息中 @mention 高亮顯示

### T-3.3: @Mention 功能 - 後端
- [x] 修改 Message model 新增 `mentions` JSON 欄位
- [x] 訊息建立時解析 @mention (parse_mentions function)
- [x] 建立 Alembic migration

## Phase 4: Notification System

### T-4.1: 瀏覽器通知
- [x] 建立 `NotificationService.ts`
- [x] 請求通知權限 UI
- [x] 新訊息時發送 Push Notification
- [x] 點擊通知跳轉到對應房間

### T-4.2: 音效與震動
- [x] 新增訊息提示音效檔案 (base64 embedded)
- [x] 實作音效播放（可設定開關）
- [x] 實作移動端震動提示（Vibration API）
- [x] 新增通知設定介面

### T-4.3: @Mention 通知
- [x] 被 @mention 時強調通知 (special sound + notification)
- [x] 在房間列表顯示 mention 徽章 (client-side tracking with Zustand/localStorage)

## Phase 5: Testing & Polish

### T-5.1: 測試
- [x] Action Bar 功能測試 (build verified)
- [x] Report Preview 測試 (build verified)
- [x] @Mention 完整流程測試 (build verified)
- [x] 通知系統測試（權限、音效、震動）(build verified)

### T-5.2: UI 微調
- [x] 動畫過渡效果 (ActionBar expand/collapse, NotificationSettings modal)
- [ ] 深色模式相容性 (deferred - requires theme system)
- [x] 無障礙支援 (ARIA labels, roles, keyboard support)