fix: css in sidebar and vscode css variables for vscode

apps/extension/package.json

@@ -227,18 +227,14 @@
 		"vscode:prepublish": "npm run build",
 		"build": "npm run build:js && npm run build:css",
 		"build:js": "node ./esbuild.js --production",
-		"build:css": "npm run build:css:main && npm run build:css:sidebar",
+		"build:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --minify",
-		"build:css:main": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --minify",
-		"build:css:sidebar": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/sidebar.css --minify",
 		"package": "npm exec node ./package.mjs",
 		"package:direct": "node ./package.mjs",
 		"debug:env": "node ./debug-env.mjs",
 		"compile": "node ./esbuild.js",
 		"watch": "npm run watch:js & npm run watch:css",
 		"watch:js": "node ./esbuild.js --watch",
-		"watch:css": "npm run watch:css:main & npm run watch:css:sidebar",
+		"watch:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --watch",
-		"watch:css:main": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --watch",
-		"watch:css:sidebar": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/sidebar.css --watch",
 		"test": "vscode-test",
 		"check-types": "tsc --noEmit"
 	},

apps/extension/package.mjs

@@ -30,13 +30,7 @@ try {
 	fs.ensureDirSync(targetDistDir);
 
 	// Only copy the files we need (exclude .map files)
-	const filesToCopy = [
+	const filesToCopy = ['extension.js', 'index.js', 'index.css', 'sidebar.js'];
-		'extension.js',
-		'index.js',
-		'index.css',
-		'sidebar.js',
-		'sidebar.css'
-	];
 	for (const file of filesToCopy) {
 		const srcFile = path.resolve(distDir, file);
 		const destFile = path.resolve(targetDistDir, file);

apps/extension/src/services/sidebar-webview-manager.ts

@@ -58,7 +58,7 @@ export class SidebarWebviewManager implements vscode.WebviewViewProvider {
 			vscode.Uri.joinPath(this.extensionUri, 'dist', 'sidebar.js')
 		);
 		const styleUri = webview.asWebviewUri(
-			vscode.Uri.joinPath(this.extensionUri, 'dist', 'sidebar.css')
+			vscode.Uri.joinPath(this.extensionUri, 'dist', 'index.css')
 		);
 		const nonce = this.getNonce();
 

apps/extension/src/webview/components/SidebarView.tsx

@@ -5,11 +5,13 @@ interface SidebarViewProps {
 	initialConnectionStatus?: boolean;
 }
 
+// Acquire VS Code API only once globally to avoid "already acquired" error
+const vscode = window.acquireVsCodeApi ? window.acquireVsCodeApi() : null;
+
 export const SidebarView: React.FC<SidebarViewProps> = ({
 	initialConnectionStatus = false
 }) => {
 	const [isConnected, setIsConnected] = useState(initialConnectionStatus);
-	const vscode = window.acquireVsCodeApi ? window.acquireVsCodeApi() : null;
 
 	useEffect(() => {
 		const handleMessage = (event: MessageEvent) => {
@@ -20,7 +22,9 @@ export const SidebarView: React.FC<SidebarViewProps> = ({
 		};
 
 		window.addEventListener('message', handleMessage);
-		return () => window.removeEventListener('message', handleMessage);
+		return () => {
+			window.removeEventListener('message', handleMessage);
+		};
 	}, []);
 
 	const handleOpenBoard = () => {
@@ -42,16 +46,6 @@ export const SidebarView: React.FC<SidebarViewProps> = ({
 				>
 					Open Kanban Board
 				</button>
-
-				<div
-					className={`mt-5 p-2.5 bg-vscode-editor-background rounded text-xs ${
-						isConnected
-							? 'border-l-[3px] border-vscode-testing-iconPassed'
-							: 'border-l-[3px] border-vscode-testing-iconFailed'
-					}`}
-				>
-					Status: {isConnected ? 'Connected' : 'Disconnected'}
-				</div>
 			</div>
 		</div>
 	);

apps/extension/src/webview/index.css

@@ -35,6 +35,44 @@
 	--color-link-hover: var(--vscode-editorLink-activeForeground);
 	--color-textSeparator-foreground: var(--vscode-textSeparator-foreground);
 	--radius: 0.5rem;
+
+	/* VS Code specific color mappings for Tailwind utilities */
+	--color-vscode-foreground: var(--vscode-foreground);
+	--color-vscode-button-background: var(--vscode-button-background);
+	--color-vscode-button-foreground: var(--vscode-button-foreground);
+	--color-vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
+	--color-vscode-editor-background: var(--vscode-editor-background);
+	--color-vscode-input-background: var(--vscode-input-background);
+	--color-vscode-input-foreground: var(--vscode-input-foreground);
+	--color-vscode-dropdown-background: var(--vscode-dropdown-background);
+	--color-vscode-dropdown-foreground: var(--vscode-dropdown-foreground);
+	--color-vscode-dropdown-border: var(--vscode-dropdown-border);
+	--color-vscode-focusBorder: var(--vscode-focusBorder);
+	--color-vscode-panel-border: var(--vscode-panel-border);
+	--color-vscode-sideBar-background: var(--vscode-sideBar-background);
+	--color-vscode-sideBar-foreground: var(--vscode-sideBar-foreground);
+	--color-vscode-sideBarTitle-foreground: var(--vscode-sideBarTitle-foreground);
+	--color-vscode-testing-iconPassed: var(--vscode-testing-iconPassed);
+	--color-vscode-testing-iconFailed: var(--vscode-testing-iconFailed);
+	--color-vscode-errorForeground: var(--vscode-errorForeground);
+	--color-vscode-editorWidget-background: var(--vscode-editorWidget-background);
+	--color-vscode-editorWidget-border: var(--vscode-editorWidget-border);
+	--color-vscode-list-hoverBackground: var(--vscode-list-hoverBackground);
+	--color-vscode-list-activeSelectionBackground: var(
+		--vscode-list-activeSelectionBackground
+	);
+	--color-vscode-list-activeSelectionForeground: var(
+		--vscode-list-activeSelectionForeground
+	);
+	--color-vscode-badge-background: var(--vscode-badge-background);
+	--color-vscode-badge-foreground: var(--vscode-badge-foreground);
+	--color-vscode-textLink-foreground: var(--vscode-textLink-foreground);
+	--color-vscode-textLink-activeForeground: var(
+		--vscode-textLink-activeForeground
+	);
+	--color-vscode-icon-foreground: var(--vscode-icon-foreground);
+	--color-vscode-descriptionForeground: var(--vscode-descriptionForeground);
+	--color-vscode-disabledForeground: var(--vscode-disabledForeground);
 }
 
 /* Reset body to match VS Code styles instead of Tailwind defaults */

apps/extension/src/webview/sidebar.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { SidebarView } from './components/SidebarView';
-import './index.css';
 
-// Mount the React app
+const rootElement = document.getElementById('root');
-const root = ReactDOM.createRoot(
+
-	document.getElementById('root') as HTMLElement
+if (!rootElement) {
-);
+	console.error('Sidebar: Root element not found');
-root.render(
+} else {
-	<React.StrictMode>
+	const root = ReactDOM.createRoot(rootElement);
-		<SidebarView />
+	root.render(
-	</React.StrictMode>
+		<React.StrictMode>
-);
+			<SidebarView />
+		</React.StrictMode>
+	);
+}