feat: Add Chat UX improvements with notifications and @mention support

- Add ActionBar component with expandable toolbar for mobile
- Add @mention functionality with autocomplete dropdown
- Add browser notification system (push, sound, vibration)
- Add NotificationSettings modal for user preferences
- Add mention badges on room list cards
- Add ReportPreview with Markdown rendering and copy/download
- Add message copy functionality with hover actions
- Add backend mentions field to messages with Alembic migration
- Add lots field to rooms, remove templates
- Optimize WebSocket database session handling
- Various UX polish (animations, accessibility)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

openspec/changes/archive/2025-12-08-improve-chat-ux-v2/tasks.md

@@ -0,0 +1,80 @@
+# 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)