Repository navigation
feat(admin): custom plan dropdown in the users table - #31
Merged
Merged
Conversation
The admin users table used a native <select> to change a workspace's plan, which looked out of place against the rest of the dark UI and couldn't show any detail about each plan. PlanDropdown replaces it. - Trigger: a compact pill with a status dot (grey for free, amber for paid), the plan name and a chevron. It shows a spinner and is disabled while a change is saving. - Menu: lists Free, Pro, Team and Business with each plan's price and monthly run limit (taken from the plan catalog) and a check on the current plan, styled like the profile menu. - The menu is rendered in a portal with fixed positioning. The users table scrolls inside an overflow container that would clip an absolutely positioned menu on the bottom rows. The menu opens below the trigger, flips above it near the viewport bottom, and is clamped inside the viewport horizontally. - Closes on outside click, Escape, Tab, and on page scroll or resize so the fixed menu never drifts away from its trigger. - Keyboard: ArrowUp/ArrowDown on the trigger open it; inside the menu arrows, Home and End move, and Enter or Space pick. Uses listbox and option roles with aria-activedescendant for screen readers. - Picking the current plan again is a no-op; any other plan is passed to onChange.
Replace the native <select> in PlanSelect with PlanDropdown. The save logic is unchanged: choosing a different plan posts to /api/admin/set-plan, shows the busy state while it runs, and refreshes the table on success. The plan catalog imports move into the dropdown, which now owns the list of plans.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
Summary
Replaces the default browser dropdown for changing a workspace's plan in the admin users table with a custom dropdown that matches the app's dark UI.
What's new
listbox)Saving is unchanged: picking a different plan calls
/api/admin/set-planand refreshes the table.