Skip to content

Modernize the UI and closely align it with VSCode#50

Merged
celonymire merged 53 commits intomainfrom
ui-revamp
Dec 13, 2025
Merged

Modernize the UI and closely align it with VSCode#50
celonymire merged 53 commits intomainfrom
ui-revamp

Conversation

@celonymire
Copy link
Copy Markdown
Owner

@celonymire celonymire commented Dec 10, 2025

Major UI Overhaul! Following the VSCode's extension guidelines, this updates the general theme of the extension as follows:

  • Cleaner layout with modernized UI to match VSCode theme
  • Adaptive theme by using VSCode's injected CSS variables
  • Utilize icons whenever possible

Other changes:

  • Fixed Competitive Companion batched problem requests to be invalid when some problems are dropped
  • Save "Compile Error" state

@celonymire celonymire linked an issue Dec 10, 2025 that may be closed by this pull request
…wline from textarea on readonly fields

Also remove redundant components.tsx
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/state for 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

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 32 out of 34 changed files in this pull request and generated 5 comments.

celonymire and others added 4 commits December 13, 2025 12:06
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>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 32 out of 34 changed files in this pull request and generated 4 comments.

celonymire and others added 4 commits December 13, 2025 12:22
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@celonymire celonymire merged commit 4d35710 into main Dec 13, 2025
1 check passed
@celonymire celonymire deleted the ui-revamp branch December 13, 2025 20:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI Revamp

2 participants