✨ feat(settings-webview): migrate to Tailwind CSS and improve UI

- migrate from Fluent UI to Tailwind CSS for a lighter and more customizable UI
- add heroicons for settings categories
- implement a new SettingsSettings component for general app settings
- improve classname handling with tailwind-merge
- add vscode theme support
- add a header with title and buttons
- add a new dev command to start settings webview

📦 build(settings-webview): update dependencies and build process

- update dependencies in package.json
- add a new dev command to start settings webview
- update build command to include settings-webview
- updated copy script to include settings webview files

✅ test(settings-webview): update tests for Tailwind CSS

- update tests to reflect the new tailwind css implementation
- update tests to reflect the new heroicons implementation

🔧 chore(.vscode): add dev settings task and update watch task

- add a new task to watch settings webview changes
- update watch task to include settings webview
- set up background process to check settings webview server

📝 docs(settings-webview): update README.md with Tailwind CSS info

- update README.md to reflect changes to tailwind css

Author: bramburn

.vscode/tasks.json

@@ -5,7 +5,7 @@
 	"tasks": [
 		{
 			"label": "watch",
-			"dependsOn": ["npm: dev", "npm: watch:tsc", "npm: watch:esbuild"],
+			"dependsOn": ["npm: dev", "npm: dev:settings", "npm: watch:tsc", "npm: watch:esbuild"],
 			"presentation": {
 				"reveal": "never"
 			},
@@ -59,6 +59,28 @@
 				"group": "watch",
 				"reveal": "always"
 			}
+		},
+		{
+			"label": "npm: dev:settings",
+			"type": "npm",
+			"script": "dev:settings",
+			"group": "build",
+			"problemMatcher": {
+				"owner": "vite",
+				"pattern": {
+					"regexp": "^$"
+				},
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": ".*VITE.*",
+					"endsPattern": ".*Local:.*"
+				}
+			},
+			"isBackground": true,
+			"presentation": {
+				"group": "settings-webview",
+				"reveal": "always"
+			}
 		}
 	]
 }

esbuild.js

@@ -194,6 +194,23 @@ const copyWebviewFiles = {
 	},
 }
 
+const copySettingsWebviewFiles = {
+	name: "copy-settings-webview-files",
+	setup(build) {
+		build.onEnd(() => {
+			const settingsWebviewBuildFolder = path.join(__dirname, "settings-webview", "dist")
+			const settingsWebviewTargetFolder = path.join(__dirname, "dist", "settings-webview")
+			if (fs.existsSync(settingsWebviewBuildFolder)) {
+				fs.mkdirSync(settingsWebviewTargetFolder, { recursive: true })
+				fsExtra.copySync(settingsWebviewBuildFolder, settingsWebviewTargetFolder)
+				console.log("Copied settings-webview files to dist/settings-webview")
+			} else {
+				console.warn("settings-webview/dist folder does not exist. Skipping copy.")
+			}
+		})
+	},
+}
+
 const extensionConfig = {
 	bundle: true,
 	minify: production,
@@ -203,7 +220,7 @@ const extensionConfig = {
 		copyWasmFiles,
 		copyLocalesFiles,
 		copyWebviewFiles,
-		/* add to the end of plugins array */
+		copySettingsWebviewFiles,
 		esbuildProblemMatcherPlugin,
 		{
 			name: "alias-plugin",

package.json

@@ -359,7 +359,7 @@
 		"build:webview": "cd webview-ui && npm run build",
 		"build:settings-webview": "cd settings-webview && npm run build",
 		"build:esbuild": "node esbuild.js --production",
-		"compile": "tsc -p . --outDir out && node esbuild.js",
+		"compile": "npm run build:settings-webview && tsc -p . --outDir out && node esbuild.js",
 		"install:all": "npm install npm-run-all && npm-run-all -l -p install-*",
 		"install-extension": "npm install",
 		"install-webview": "cd webview-ui && npm install",

settings-webview/README.md

@@ -1,6 +1,6 @@
 # Settings Webview Migration
 
-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.
+This folder contains a new implementation of the Roo Code settings panel using React, TypeScript, Vite, Vitest, React Router, and TailwindCSS. The goal is to gradually migrate all settings from the current implementation in `@webview-ui/src/components/settings/SettingsView.tsx` to this new implementation.
 
 ## Architecture
 
@@ -9,7 +9,7 @@ This folder contains a new implementation of the Roo Code settings panel using R
 - **Vite**: Fast development and building
 - **Vitest**: Testing framework
 - **React Router**: Navigation
-- **Fluent UI**: UI component library
+- **TailwindCSS**: Utility-first CSS framework
 
 ## Development Process