ros/claude-task-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: css in sidebar and vscode css variables for vscode

Browse Source
This commit is contained in:
Ralph Khreish
2025-07-31 14:28:28 +03:00
parent e04a849c56
commit 8d9d779e0c
6 changed files with 60 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/extension/package.json
View File

@@ -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: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",
"build:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.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: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",
"watch:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --watch",
"test": "vscode-test",
"check-types": "tsc --noEmit"
},

8
apps/extension/package.mjs
View File

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

2
apps/extension/src/services/sidebar-webview-manager.ts
View File

@@ -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();

18
apps/extension/src/webview/components/SidebarView.tsx
View File

@@ -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>
);

38
apps/extension/src/webview/index.css
View File

@@ -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 */

22
apps/extension/src/webview/sidebar.tsx
View File

@@ -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 root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<SidebarView />
</React.StrictMode>
);
const rootElement = document.getElementById('root');
if (!rootElement) {
console.error('Sidebar: Root element not found');
} else {
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<SidebarView />
</React.StrictMode>
);
}