Modernize VLA Manager frontend UI - #81
Open
MYRhouma wants to merge 2 commits into
Open
Conversation
Redesigned the vla-manager frontend with a full UI overhaul. Changes: - Updated App.vue layout and structure - Improved Header.vue navigation - Refactored CreateView.vue and ListView.vue - Updated ReqModal.vue and SampleModal.vue components - Global style improvements in style.css
There was a problem hiding this comment.
Pull request overview
This PR modernizes the vla-manager frontend UI by migrating key screens/modals to Naive UI components, improving layout structure, and applying updated global styling for a more consistent, app-like experience.
Changes:
- Replaced native dialog-based modals with Naive UI
n-modalimplementations (SampleModal/ReqModal) and updated associated interaction patterns. - Redesigned the Create and List views with Naive UI layout components, improved empty/loading states, and toast-based user feedback.
- Updated global styling (font stack, background, scrollbar styling) and introduced shared utility classes (e.g.,
.page-container).
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| vla-manager/src/style.css | Global baseline styling + utility classes + custom scrollbar styling. |
| vla-manager/src/components/SampleModal.vue | Reworked sample JSON modal using Naive UI with upload, sample picker, and preview split view. |
| vla-manager/src/components/ReqModal.vue | Reworked requirement modal using Naive UI form controls and improved state reset behavior. |
| vla-manager/src/components/ListView.vue | Modernized VLA list page with Naive UI cards/grid, empty/loading states, and toast feedback. |
| vla-manager/src/components/Header.vue | Updated header layout/typography using Naive UI heading and refreshed styling. |
| vla-manager/src/components/CreateView.vue | Modernized VLA builder layout with Naive UI panels/cards, improved UX and toast feedback. |
| vla-manager/src/App.vue | Wrapped app in Naive UI providers and added theme overrides + layout shell. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| for(const key in newChosenFragment.evaluationMethod?.variableSchema?.properties || {}) { | ||
| if(key === 'property') { | ||
| values[key] = props.element | ||
| } else if (newChosenFragment.evaluationMethod.variableSchema.properties[key].type === 'boolean') { |
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| background-color: #f3f4f6; | ||
| width: 100vw; |
- Use optional chaining consistently in ReqModal watcher to avoid potential runtime error when evaluationMethod or variableSchema is missing - Replace width: 100vw with width: 100% in style.css to prevent horizontal scrollbar caused by scrollbar width on desktop browsers
bzp99
changed the title
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.
This PR upgrades the vla-manager frontend with a full UI modernization pass.
Changes included:
CC @bzp99