feat(vscode): add sidebar view with comprehensive uii integration

craftslab · craftslab · commit dc804b35e344 · 2026-01-17T02:38:37.000Z
Add a dedicated Activity Bar sidebar for the VS Code extension with
enhanced UI features and improved user experience.

Features added:
- Activity Bar sidebar with tree view navigation
- Four main sections: Actions, Recent Files, Settings, Quick Links
- Quick action buttons for common operations (compare, refresh, etc.)
- Recent files tracking (up to 20 files, displays last 10)
- Interactive settings management from sidebar
- Direct links to GitHub repository, docs, and issue tracker
- 14 new commands for sidebar functionality
- Context menu integration in sidebar tree items
- Welcome view for first-time users

Commands added:
- diffmanifests.checkEnvironment
- diffmanifests.refreshSidebar
- diffmanifests.openGitHub/openDocs/reportIssue
- diffmanifests.configure* (PythonPath, ConfigFile, OutputFormat)
- diffmanifests.toggle* (AutoInstall, ShowOutput)
- diffmanifests.openSettings
- diffmanifests.clearRecentFiles

UI improvements:
- Icons for all commands and tree items
- Collapsible sections in sidebar
- Real-time settings display
- One-click access to all configurations
diff --git a/README.md b/README.md
@@ -88,6 +88,9 @@ A **Visual Studio Code extension** is available for seamless integration with yo
 ### Features
 
 - 🖱️ **GUI Integration**: Compare manifests directly from VS Code
+- 📋 **Sidebar View**: Dedicated sidebar with quick access to all features and settings
+- ⚡ **Quick Actions**: Compare manifests, check environment, and manage settings from sidebar
+- 📂 **Recent Files**: Track and quickly access recently compared files
 - 🎯 **Context Menu**: Right-click on XML files to compare
 - ⚙️ **Auto-Configuration**: Automatic Python environment detection
 - 📊 **Multiple Output Formats**: JSON and Excel support
diff --git a/README_cn.md b/README_cn.md
@@ -88,6 +88,9 @@ pip install -e .
 ### 功能特性
 
 - 🖱️ **GUI 集成**：直接在 VS Code 中比较清单
+- 📋 **侧边栏视图**：专用侧边栏，快速访问所有功能和设置
+- ⚡ **快速操作**：从侧边栏比较清单、检查环境和管理设置
+- 📂 **最近文件**：跟踪并快速访问最近比较的文件
 - 🎯 **右键菜单**：右键点击 XML 文件进行比较
 - ⚙️ **自动配置**：自动检测 Python 环境
 - 📊 **多种输出格式**：支持 JSON 和 Excel
diff --git a/vscode/README.md b/vscode/README.md
@@ -8,6 +8,9 @@ A Visual Studio Code extension for comparing Android manifest files using the `d
 
 - 🔍 **Deep Manifest Comparison**: Compare two manifest XML files directly from VS Code
 - 🎯 **Context Menu Integration**: Right-click on manifest files in the explorer to compare
+- 📋 **Sidebar View**: Dedicated sidebar with quick access to all features and settings
+- ⚡ **Quick Actions**: Compare manifests, check environment, and manage settings from sidebar
+- 📂 **Recent Files**: Track and quickly access recently compared files
 - ⚙️ **Configurable**: Customize Python path, config file, and output format
 - 📊 **Multiple Output Formats**: Support for JSON and Excel output formats
 - 🔄 **Auto-Installation**: Automatically offers to install the diffmanifests package
@@ -134,7 +137,20 @@ pip3 show diffmanifests  # Ubuntu/Linux
 
 ## Usage
 
-### Method 1: Command Palette
+### Method 1: Sidebar (Recommended)
+
+1. Click on the Diff Manifests icon in the Activity Bar (left sidebar)
+2. In the sidebar, you'll see:
+   - **Actions**: Quick access to compare manifests and other operations
+   - **Recent Files**: List of recently compared files for quick access
+   - **Settings**: View and modify extension settings
+   - **Quick Links**: Access documentation and GitHub repository
+
+3. Click "Compare Manifests" to start a new comparison
+4. Follow the prompts to select files
+5. View results in the output panel or open the result file
+
+### Method 2: Command Palette
 
 1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (macOS)
 2. Type "Diff Manifests: Compare Two Manifest Files"
@@ -144,15 +160,15 @@ pip3 show diffmanifests  # Ubuntu/Linux
 6. Choose the output file location
 7. View the results
 
-### Method 2: Context Menu
+### Method 3: Context Menu
 
 1. Right-click on a manifest XML file in the Explorer
 2. Select "Diff Manifests: Compare Selected Files"
 3. Follow the prompts to select the second manifest and config file
 4. Choose the output file location
 5. View the results
 
-### Method 3: Using Settings
+### Method 4: Using Settings
 
 Configure default settings for faster workflow:
 
@@ -191,6 +207,36 @@ Add to your `settings.json`:
 }
 ```
 
+### Quick Configuration from Sidebar
+
+You can also configure settings directly from the sidebar:
+1. Open the Diff Manifests sidebar
+2. Expand the "Settings" section
+3. Click on any setting item to modify it:
+   - **Python Path**: Change Python executable path
+   - **Config File**: Select default config.json file
+   - **Output Format**: Switch between JSON and Excel
+   - **Auto Install**: Toggle automatic installation
+   - **Show Output**: Toggle output panel visibility
+   - **Open Settings**: Access full extension settings
+
+## Available Commands
+
+All commands are available via Command Palette (`Ctrl+Shift+P`):
+
+- **Diff Manifests: Compare Two Manifest Files** - Start a new comparison
+- **Diff Manifests: Compare Selected Files** - Compare from selected file
+- **Diff Manifests: Open Output File** - Open a result file
+- **Diff Manifests: Check Environment** - Verify Python and package installation
+- **Refresh** (Sidebar) - Refresh the sidebar view
+- **Open Settings** - Open extension settings
+- **Configure Python Path** - Set Python executable path
+- **Configure Config File** - Set default config file
+- **Configure Output Format** - Choose output format
+- **Toggle Auto Install** - Enable/disable auto-installation
+- **Toggle Show Output Panel** - Enable/disable auto-show output
+- **Clear Recent Files** - Clear recent files list
+
 ## Python Package Installation
 
 The extension requires the `diffmanifests` Python package. It will offer to install it automatically on first use, or you can install it manually:
diff --git a/vscode/README_cn.md b/vscode/README_cn.md
@@ -8,6 +8,9 @@
 
 - 🔍 **深度清单比较**：直接在 VS Code 中比较两个清单 XML 文件
 - 🎯 **右键菜单集成**：在资源管理器中右键点击清单文件进行比较
+- 📋 **侧边栏视图**：专用侧边栏，快速访问所有功能和设置
+- ⚡ **快速操作**：从侧边栏比较清单、检查环境和管理设置
+- 📂 **最近文件**：跟踪并快速访问最近比较的文件
 - ⚙️ **可配置**：自定义 Python 路径、配置文件和输出格式
 - 📊 **多种输出格式**：支持 JSON 和 Excel 输出格式
 - 🔄 **自动安装**：自动提供安装 diffmanifests 包
@@ -134,7 +137,20 @@ pip3 show diffmanifests  # Ubuntu/Linux
 
 ## 使用方法
 
-### 方法 1：命令面板
+### 方法 1：侧边栏（推荐）
+
+1. 点击活动栏（左侧边栏）中的 Diff Manifests 图标
+2. 在侧边栏中，您将看到：
+   - **操作**：快速访问比较清单和其他操作
+   - **最近文件**：最近比较的文件列表，便于快速访问
+   - **设置**：查看和修改扩展设置
+   - **快速链接**：访问文档和 GitHub 仓库
+
+3. 点击"比较清单"开始新的比较
+4. 按照提示选择文件
+5. 在输出面板中查看结果或打开结果文件
+
+### 方法 2：命令面板
 
 1. 按 `Ctrl+Shift+P` (Windows/Linux) 或 `Cmd+Shift+P` (macOS)
 2. 输入 "Diff Manifests: Compare Two Manifest Files"
@@ -144,15 +160,15 @@ pip3 show diffmanifests  # Ubuntu/Linux
 6. 选择输出文件位置
 7. 查看结果
 
-### 方法 2：右键菜单
+### 方法 3：右键菜单
 
 1. 在资源管理器中右键点击清单 XML 文件
 2. 选择 "Diff Manifests: Compare Selected Files"
 3. 按照提示选择第二个清单和配置文件
 4. 选择输出文件位置
 5. 查看结果
 
-### 方法 3：使用设置
+### 方法 4：使用设置
 
 配置默认设置以加快工作流程：
 
@@ -191,6 +207,36 @@ pip3 show diffmanifests  # Ubuntu/Linux
 }
 ```
 
+### 从侧边栏快速配置
+
+您也可以直接从侧边栏配置设置：
+1. 打开 Diff Manifests 侧边栏
+2. 展开"设置"部分
+3. 点击任何设置项来修改它：
+   - **Python 路径**：更改 Python 可执行文件路径
+   - **配置文件**：选择默认 config.json 文件
+   - **输出格式**：在 JSON 和 Excel 之间切换
+   - **自动安装**：切换自动安装功能
+   - **显示输出**：切换输出面板可见性
+   - **打开设置**：访问完整的扩展设置
+
+## 可用命令
+
+所有命令都可以通过命令面板 (`Ctrl+Shift+P`) 访问：
+
+- **Diff Manifests: Compare Two Manifest Files** - 开始新的比较
+- **Diff Manifests: Compare Selected Files** - 从选定文件比较
+- **Diff Manifests: Open Output File** - 打开结果文件
+- **Diff Manifests: Check Environment** - 验证 Python 和包安装
+- **Refresh**（侧边栏）- 刷新侧边栏视图
+- **Open Settings** - 打开扩展设置
+- **Configure Python Path** - 设置 Python 可执行文件路径
+- **Configure Config File** - 设置默认配置文件
+- **Configure Output Format** - 选择输出格式
+- **Toggle Auto Install** - 启用/禁用自动安装
+- **Toggle Show Output Panel** - 启用/禁用自动显示输出
+- **Clear Recent Files** - 清除最近文件列表
+
 ## Python 包安装
 
 扩展需要 `diffmanifests` Python 包。它会在首次使用时自动提供安装，或者您可以手动安装：
diff --git a/vscode/package.json b/vscode/package.json
@@ -19,18 +19,112 @@
   ],
   "main": "./out/extension.js",
   "contributes": {
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "diffmanifests-sidebar",
+          "title": "Diff Manifests",
+          "icon": "$(diff)"
+        }
+      ]
+    },
+    "views": {
+      "diffmanifests-sidebar": [
+        {
+          "id": "diffmanifests-explorer",
+          "name": "Explorer",
+          "icon": "$(diff)",
+          "contextualTitle": "Diff Manifests"
+        },
+        {
+          "id": "diffmanifests-welcome",
+          "name": "Getting Started",
+          "when": "diffmanifests.showWelcome"
+        }
+      ]
+    },
     "commands": [
       {
         "command": "diffmanifests.compare",
-        "title": "Diff Manifests: Compare Two Manifest Files"
+        "title": "Diff Manifests: Compare Two Manifest Files",
+        "icon": "$(diff)"
       },
       {
         "command": "diffmanifests.compareSelection",
-        "title": "Diff Manifests: Compare Selected Files"
+        "title": "Diff Manifests: Compare Selected Files",
+        "icon": "$(files)"
       },
       {
         "command": "diffmanifests.openOutput",
-        "title": "Diff Manifests: Open Output File"
+        "title": "Diff Manifests: Open Output File",
+        "icon": "$(go-to-file)"
+      },
+      {
+        "command": "diffmanifests.checkEnvironment",
+        "title": "Diff Manifests: Check Environment",
+        "icon": "$(refresh)"
+      },
+      {
+        "command": "diffmanifests.refreshSidebar",
+        "title": "Refresh",
+        "icon": "$(refresh)"
+      },
+      {
+        "command": "diffmanifests.openGitHub",
+        "title": "Open GitHub Repository",
+        "icon": "$(github)"
+      },
+      {
+        "command": "diffmanifests.openDocs",
+        "title": "Open Documentation",
+        "icon": "$(book)"
+      },
+      {
+        "command": "diffmanifests.reportIssue",
+        "title": "Report Issue",
+        "icon": "$(bug)"
+      },
+      {
+        "command": "diffmanifests.configurePythonPath",
+        "title": "Configure Python Path",
+        "icon": "$(settings-gear)"
+      },
+      {
+        "command": "diffmanifests.configureConfigFile",
+        "title": "Configure Config File",
+        "icon": "$(settings-gear)"
+      },
+      {
+        "command": "diffmanifests.configureOutputFormat",
+        "title": "Configure Output Format",
+        "icon": "$(settings-gear)"
+      },
+      {
+        "command": "diffmanifests.toggleAutoInstall",
+        "title": "Toggle Auto Install",
+        "icon": "$(symbol-boolean)"
+      },
+      {
+        "command": "diffmanifests.toggleShowOutput",
+        "title": "Toggle Show Output Panel",
+        "icon": "$(output)"
+      },
+      {
+        "command": "diffmanifests.openSettings",
+        "title": "Open Extension Settings",
+        "icon": "$(settings)"
+      },
+      {
+        "command": "diffmanifests.clearRecentFiles",
+        "title": "Clear Recent Files",
+        "icon": "$(clear-all)"
+      }
+    ],
+    "viewsWelcome": [
+      {
+        "view": "diffmanifests-explorer",
+        "contents": "Welcome to Diff Manifests!\n\nCompare Android manifest files using Gerrit & Gitiles API.\n\n[Compare Manifests](command:diffmanifests.compare)\n\n[Open Settings](command:diffmanifests.openSettings)\n\n[View Documentation](command:diffmanifests.openDocs)",
+        "when": "workspaceFolderCount == 0"
       }
     ],
     "configuration": {
@@ -68,6 +162,25 @@
       }
     },
     "menus": {
+      "view/title": [
+        {
+          "command": "diffmanifests.refreshSidebar",
+          "when": "view == diffmanifests-explorer",
+          "group": "navigation"
+        },
+        {
+          "command": "diffmanifests.compare",
+          "when": "view == diffmanifests-explorer",
+          "group": "navigation"
+        }
+      ],
+      "view/item/context": [
+        {
+          "command": "diffmanifests.clearRecentFiles",
+          "when": "view == diffmanifests-explorer && viewItem == recent",
+          "group": "inline"
+        }
+      ],
       "explorer/context": [
         {
           "when": "resourceExtname == .xml",
diff --git a/vscode/src/extension.ts b/vscode/src/extension.ts
diff --git a/vscode/src/sidebarProvider.ts b/vscode/src/sidebarProvider.ts
