Migrate/ai analysis modal to sidebar

.gitignore

@@ -10,3 +10,4 @@ WARP.md
 # Chrome extensions cannot load directories beginning with underscore
 __tests__/
 dist/
+UI_DESIGN/

CHANGELOG.md

@@ -5,81 +5,107 @@ All notable changes to DualSub will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.0] - 2025-11-19
+
+### ✨ Added
+
+- **Unified AI Side Panel**: Migrated the AI Context Analysis modal into the new Side Panel interface. This provides a persistent, non-intrusive workspace for exploring cultural and linguistic context without obstructing the video playback.
+
+### 🐛 Fixed
+
+- **Side Panel Desync Edge Cases**:
+    - Fixed an issue where deselecting words in the side panel or switching videos caused synchronization errors.
+    - Implemented a "Single Source of Truth" architecture where the content script is the authoritative state holder.
+    - Eliminated race conditions by removing optimistic updates from the side panel to the background.
+- **Word Selection Order**:
+    - Ensured that selected words always maintain their original sentence order (DOM order) in the side panel, even after deselection and re-selection.
+- **Duplicate Event Listeners**:
+    - Fixed a bug where `dualsub-word-selected` listeners were accumulating, causing multiple events for a single click. Added proper cleanup logic.
+
 ## [2.4.0] - 2025-09-30
 
 ### 🎉 Major Changes
+
 - **Full React Migration**: Migrated popup and options pages to React
-  - Modern component-based architecture
-  - Improved maintainability and code organization
-  - Better state management with React hooks
-  - 100% functional parity with vanilla JavaScript version
-  - Identical UI/UX experience
+    - Modern component-based architecture
+    - Improved maintainability and code organization
+    - Better state management with React hooks
+    - 100% functional parity with vanilla JavaScript version
+    - Identical UI/UX experience
 
 ### ✨ Added
+
 - React-based popup interface with custom hooks:
-  - `useSettings` for settings management
-  - `useTranslation` for i18n support
-  - `useLogger` for error tracking
-  - `useChromeMessage` for Chrome API integration
+    - `useSettings` for settings management
+    - `useTranslation` for i18n support
+    - `useLogger` for error tracking
+    - `useChromeMessage` for Chrome API integration
 - React-based options page with modular sections:
-  - `GeneralSection` for general preferences
-  - `TranslationSection` for translation settings and batch configuration
-  - `ProvidersSection` for provider management
-  - `AIContextSection` for AI context configuration
-  - `AboutSection` for extension information
+    - `GeneralSection` for general preferences
+    - `TranslationSection` for translation settings and batch configuration
+    - `ProvidersSection` for provider management
+    - `AIContextSection` for AI context configuration
+    - `AboutSection` for extension information
 - Reusable React components:
-  - `SettingCard`, `ToggleSwitch`, `SettingToggle`
-  - `LanguageSelector`, `SliderSetting`, `StatusMessage`
-  - `TestResultDisplay`, `SparkleButton`
-  - Provider cards for all translation services
+    - `SettingCard`, `ToggleSwitch`, `SettingToggle`
+    - `LanguageSelector`, `SliderSetting`, `StatusMessage`
+    - `TestResultDisplay`, `SparkleButton`
+    - Provider cards for all translation services
 - Custom hooks for advanced features:
-  - `useDeepLTest` for DeepL API testing
-  - `useOpenAITest` for OpenAI API testing and model fetching
-  - `useBackgroundReady` for service worker status
+    - `useDeepLTest` for DeepL API testing
+    - `useOpenAITest` for OpenAI API testing and model fetching
+    - `useBackgroundReady` for service worker status
 - Vite build system for optimized production bundles
 
 ### 🔧 Changed
+
 - Build system upgraded from vanilla JavaScript to Vite + React
 - Popup and options pages now use React components
 - All UI interactions now use React state management
 - Settings updates use React hooks instead of direct DOM manipulation
 - Translation loading uses React effects and state
 
 ### 🗑️ Removed
+
 - Vanilla JavaScript popup.js and options.js files
 - Old HTML templates (replaced by React JSX)
 - Manual DOM manipulation code
 - jQuery-style event listeners
 
 ### 📦 Dependencies
+
 - Added `react` ^19.1.1
 - Added `react-dom` ^19.1.1
 - Added `vite` ^7.1.7
 - Added `@vitejs/plugin-react` ^5.0.4
 
 ### 🐛 Fixed
+
 - Container width consistency in options page across different tabs
 - AI Context section structure now matches original layout exactly
 - All i18n translation keys corrected to match message definitions
 - Proper collapsible Advanced Settings in AI Context section
 
 ### 📝 Documentation
+
 - Added comprehensive React migration documentation
 - Updated README with React-based development information
 - Added component architecture documentation
 - Updated build and development instructions
 
 ### 🔬 Technical Details
+
 - Bundle sizes (gzipped):
-  - Popup: 13.47 kB (4.58 kB gzipped)
-  - Options: 35.24 kB (8.41 kB gzipped)
-  - Shared translations: 218.89 kB (66.52 kB gzipped)
+    - Popup: 13.47 kB (4.58 kB gzipped)
+    - Options: 35.24 kB (8.41 kB gzipped)
+    - Shared translations: 218.89 kB (66.52 kB gzipped)
 - Build time: ~600ms
 - Total React components: 25+
 - Custom hooks: 7
 - Zero functional differences from vanilla JS version
 
 ## [2.3.2] - Previous Version
+
 - All previous features and functionality
 - Vanilla JavaScript implementation
 

README.md

@@ -273,7 +273,13 @@ For full license terms, see [LICENSE](LICENSE) file.
 
 ## 📋 Changelog
 
-### Version 2.4.0 (Current)
+### Version 2.5.0 (Current)
+
+- 🤖 **Unified AI Experience**: Integrated AI Context Analysis into the Side Panel for a seamless, persistent workspace.
+- 🐛 **Stability Improvements**: Fixed desync issues when switching videos or deselecting words in the side panel.
+- ✨ **Better UX**: Improved word selection ordering to always match sentence structure.
+
+### Version 2.4.0
 
 - 🎉 **Full React Migration**: Popup and options pages migrated to React with 100% functional parity
 - ✨ Modern component-based architecture with custom hooks

README_zh.md

@@ -84,7 +84,7 @@
     ```bash
     # 生产构建
     npm run build
-    
+
     # 开发模式（自动重新构建）
     npm run dev
     ```
@@ -259,7 +259,13 @@ npm test -- --coverage
 
 ## 📋 更新日志
 
-### 版本 2.4.0（当前）
+### 版本 2.5.0（当前）
+
+- 🤖 **统一 AI 体验**：将 AI 上下文分析集成到侧边栏中，提供无缝、持久的工作空间。
+- 🐛 **稳定性改进**：修复了切换视频或在侧边栏中取消选择单词时的不同步问题。
+- ✨ **体验优化**：改进了单词选择排序，使其始终与句子结构匹配。
+
+### 版本 2.4.0
 
 - ⚛️ **React 迁移**：将弹出窗口和选项页面完全迁移到 React
 - 🏗️ **现代化构建**：使用 Vite 进行快速开发和优化构建