Skip to content

Commit 59f519d

Browse files
bramburnbramburn
committed
✨ feat(settings): introduce settings webview with Fluent UI
- add a new settings webview using React, TypeScript, Vite, and Fluent UI - implement basic two-column layout for settings navigation and content - set up communication between the extension and settings webview 🔧 chore(build): integrate settings webview build process - add new build script for settings webview - update package script to build webview before package - configure knip to include settings webview 🐛 fix(commands): add command to open settings webview - add new command `roo-cline.openSettingsWebview` to open the new settings webview - update menu to include new command
1 parent b8bf634 commit 59f519d

File tree

21 files changed

+8536
-3
lines changed

21 files changed

+8536
-3
lines changed

‎knip.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://unpkg.com/knip@latest/schema.json",
3-
"entry": ["src/extension.ts", "src/activate/index.ts", "webview-ui/src/index.tsx"],
4-
"project": ["src/**/*.ts", "webview-ui/src/**/*.{ts,tsx}"],
3+
"entry": ["src/extension.ts", "src/activate/index.ts", "webview-ui/src/index.tsx", "settings-webview/src/main.tsx"],
4+
"project": ["src/**/*.ts", "webview-ui/src/**/*.{ts,tsx}", "settings-webview/src/**/*.{ts,tsx}"],
55
"ignore": [
66
"**/__mocks__/**",
77
"**/__tests__/**",
@@ -25,6 +25,10 @@
2525
"webview-ui": {
2626
"entry": ["src/index.tsx"],
2727
"project": ["src/**/*.{ts,tsx}"]
28+
},
29+
"settings-webview": {
30+
"entry": ["src/main.tsx"],
31+
"project": ["src/**/*.{ts,tsx}"]
2832
}
2933
}
3034
}

‎package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,11 @@
110110
"title": "Settings",
111111
"icon": "$(settings-gear)"
112112
},
113+
{
114+
"command": "roo-cline.openSettingsWebview",
115+
"title": "Open Settings Webview",
116+
"category": "Roo Code"
117+
},
113118
{
114119
"command": "roo-cline.helpButtonClicked",
115120
"title": "Documentation",
@@ -352,6 +357,7 @@
352357
"scripts": {
353358
"build": "npm run vsix",
354359
"build:webview": "cd webview-ui && npm run build",
360+
"build:settings-webview": "cd settings-webview && npm run build",
355361
"build:esbuild": "node esbuild.js --production",
356362
"compile": "tsc -p . --outDir out && node esbuild.js",
357363
"install:all": "npm install npm-run-all && npm-run-all -l -p install-*",
@@ -366,9 +372,10 @@
366372
"check-types:extension": "tsc --noEmit",
367373
"check-types:webview": "cd webview-ui && npm run check-types",
368374
"check-types:e2e": "cd e2e && npm run check-types",
369-
"package": "npm-run-all -l -p build:webview build:esbuild check-types lint",
375+
"package": "npm-run-all -l -p build:webview build:settings-webview build:esbuild check-types lint",
370376
"pretest": "npm run compile",
371377
"dev": "cd webview-ui && npm run dev",
378+
"dev:settings": "cd settings-webview && npm run dev",
372379
"test": "node scripts/run-tests.js",
373380
"test:extension": "jest",
374381
"test:webview": "cd webview-ui && npm run test",

‎settings-webview/.eslintrc.cjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎settings-webview/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Settings Webview Migration
2+
3+
This folder contains a new implementation of the Roo Code settings panel using React, TypeScript, Vite, Vitest, React Router, and Fluent UI. The goal is to gradually migrate all settings from the current implementation in `@webview-ui/src/components/settings/SettingsView.tsx` to this new implementation.
4+
5+
## Architecture
6+
7+
- **React**: UI library
8+
- **TypeScript**: Type safety
9+
- **Vite**: Fast development and building
10+
- **Vitest**: Testing framework
11+
- **React Router**: Navigation
12+
- **Fluent UI**: UI component library
13+
14+
## Development Process
15+
16+
1. Set up the project structure ✅
17+
2. Create a basic UI with a two-column layout (1/3 for navigation, 2/3 for content)
18+
3. Implement communication with the extension
19+
4. Migrate settings sections one by one
20+
5. Run both implementations in parallel until migration is complete
21+
6. Switch over to the new implementation
22+
23+
## Settings Migration Checklist
24+
25+
### General Settings
26+
27+
- [ ] API Configuration Manager
28+
- [ ] API Options
29+
- [ ] Language Settings
30+
31+
### Permission Settings
32+
33+
- [ ] Auto Approve Settings
34+
- [ ] Read Operations
35+
- [ ] Write Operations
36+
- [ ] Execute Operations
37+
- [ ] Browser Operations
38+
- [ ] MCP Operations
39+
- [ ] Mode Switch Operations
40+
- [ ] Subtask Operations
41+
- [ ] Allowed Commands
42+
43+
### Feature Settings
44+
45+
- [ ] Browser Settings
46+
- [ ] Browser Tool
47+
- [ ] Viewport Size
48+
- [ ] Screenshot Quality
49+
- [ ] Remote Browser
50+
- [ ] Checkpoint Settings
51+
- [ ] Enable Checkpoints
52+
- [ ] Checkpoint Storage
53+
- [ ] Notification Settings
54+
- [ ] Text-to-Speech
55+
- [ ] Sound Effects
56+
- [ ] Context Management Settings
57+
- [ ] Max Open Tabs Context
58+
- [ ] Max Workspace Files
59+
- [ ] Show .rooignore Files
60+
- [ ] Max Read File Line
61+
- [ ] Terminal Settings
62+
- [ ] Terminal Output Line Limit
63+
- [ ] Terminal Shell Integration Timeout
64+
65+
### Advanced Settings
66+
67+
- [ ] Advanced Settings
68+
- [ ] Diff Enabled
69+
- [ ] Fuzzy Match Threshold
70+
- [ ] Experimental Settings
71+
- [ ] Various Experimental Features
72+
73+
### About
74+
75+
- [ ] Version Information
76+
- [ ] Telemetry Settings
77+
78+
## How to Run
79+
80+
Development mode:
81+
82+
```
83+
npm run dev
84+
```
85+
86+
Build:
87+
88+
```
89+
npm run build
90+
```
91+
92+
Test:
93+
94+
```
95+
npm run test
96+
```

‎settings-webview/build.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { execSync } = require("child_process")
2+
const fs = require("fs")
3+
const path = require("path")
4+
5+
// Build the settings webview
6+
console.log("Building settings webview...")
7+
execSync("npm run build", { stdio: "inherit" })
8+
9+
// Create the dist directory if it doesn't exist
10+
const distDir = path.join(__dirname, "dist")
11+
if (!fs.existsSync(distDir)) {
12+
fs.mkdirSync(distDir, { recursive: true })
13+
}
14+
15+
console.log("Settings webview build complete!")

‎settings-webview/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Roo Code Settings</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)