Modernize the UI and closely align it with VSCode#50
Merged
celonymire merged 53 commits intomainfrom Dec 13, 2025
Merged
Conversation
Closed
…wline from textarea on readonly fields Also remove redundant components.tsx
Contributor
There was a problem hiding this comment.
Pull request overview
This PR modernizes the UI to closely align with VSCode's design system through a comprehensive refactoring that touches the entire frontend stack and build configuration.
Key Changes:
- UI Framework Migration: Transitioned from Preact to React 19 with
@legendapp/statefor reactive state management - Styling Approach: Replaced Tailwind CSS with custom CSS using VSCode's injected CSS variables and integrated Codicons for consistent iconography
- Bug Fixes: Fixed Competitive Companion batched request handling and added persistence for Compile Error states
Reviewed changes
Copilot reviewed 32 out of 34 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated dependencies (React 19, @legendapp/state, @vscode/codicons), added view title menu items and toolbar commands, removed Tailwind/Preact packages |
| rspack.config.ts | Removed Tailwind CSS loader, added React alias resolution, removed jsxImportSource for Preact, added DefinePlugin for NODE_ENV |
| eslint.config.ts | Switched from eslint-plugin-preact to eslint-plugin-react-hooks |
| tsconfig.json & tsconfig.app.json | Removed unused path aliases (~external, ~styles), removed Preact-specific jsxImportSource |
| src/shared/judge-messages.ts | Added SETTINGS_TOGGLE message type for toggling settings view |
| src/shared/enums.ts | (New file) Centralized Status and Stdio enums previously in types.ts |
| src/extension/providers/BaseViewProvider.ts | Added Codicons to localResourceRoots, updated CSP for font-src, removed custom font configuration, added Codicons stylesheet link |
| src/extension/providers/JudgeViewProvider.ts | Added CE state persistence, fixed accepted stdout comparison, added toggleWebviewSettings method |
| src/extension/providers/StressViewProvider.ts | Improved compilation error handling to save state before early return |
| src/extension/utils/vscode.ts | Added buffering to ReadonlyTerminal, refactored TextHandler with better pending character logic |
| src/extension/utils/runtime.ts | Changed error handler from 'on' to 'once' to prevent duplicate error handling |
| src/extension/index.ts | Registered toggleJudgeSettings command |
| src/webview/utils.ts | (New file) Utility for mapping Status to VSCode color variables |
| src/webview/AutoresizeTextarea.tsx | (New file) Shared textarea component with auto-resize, expand button, and variant styling |
| src/webview/judge/App.tsx | Migrated to React + @legendapp/state, added settings view toggle, improved state management |
| src/webview/judge/Testcase.tsx | Complete UI rewrite using Codicons, @legendapp/state observables, and VSCode-aligned styling |
| src/webview/judge/index.tsx | Switched from Preact's render to React's createRoot, updated CSS import |
| src/webview/judge/index.css | (New file) Custom CSS replacing Tailwind with VSCode CSS variables |
| src/webview/stress/App.tsx | Migrated to @legendapp/state, simplified state management, added empty state UI |
| src/webview/stress/State.tsx | Complete UI rewrite with Codicons, observable props, and status-based rendering |
| src/webview/stress/index.tsx | Switched to React's createRoot, updated CSS import |
| src/webview/stress/index.css | (New file) Custom CSS for stress view using VSCode variables |
| .github/instructions/*.md | Updated documentation to reflect React migration, @legendapp/state usage, and Codicons integration |
| .vscodeignore | Added index.css files for each webview to the package whitelist |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…y message contracts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Major UI Overhaul! Following the VSCode's extension guidelines, this updates the general theme of the extension as follows:
Other changes: