Conversation
railway-app
bot
temporarily deployed
to
rivet-frontend / rivet-pr-4082
|
🚅 Deployed to the rivet-pr-4082 environment in rivet-frontend
|
How to use the Graphite Merge QueueAdd the label merge-queue to this PR to add it to the merge queue. You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Graphite Automations"Test" took an action on this PR • (01/31/26)1 assignee was added to this PR based on Kacper Wojciechowski's automation. |
PR Review: Usage Alerts and Billing UI EnhancementsOverviewThis PR adds valuable user-facing features to improve billing visibility and prevent service interruptions. The implementation is generally solid with good attention to UX details. Code Quality ✅Strengths
Issues Found1. Double Space in className (Minor)
"mx-0.5 mb-2 p-2 rounded-md border text-xs",
// ^^ extra space2. Potential Layout Issue (Minor)
<div className="flex-1 flex min-w-0 items-center justify-center">Using 3. Hardcoded Limit Change (Significant)
The change from
Recommendation: Either:
The PR description mentions "Fixed namespace list pagination by increasing the limit from the default to 100" but doesn't explain why this is needed. Was there a bug? A UX issue? This needs documentation. Performance ConsiderationsPotential Issues
const sortedProjects = useMemo(() => {
return data?.sort((a, b) => {
if (a.name === project) return -1;
if (b.name === project) return 1;
return 0;
}) ?? [];
}, [data, project]);Security Concerns ✅No security issues identified. The code properly:
UX & DesignStrengths
Questions
Test Coverage
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| import { faExclamationTriangle, Icon } from "@rivet-gg/icons"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { Link } from "@tanstack/react-router"; | ||
| import { Button, cn } from "@/components"; | ||
| import { useCloudProjectDataProvider } from "@/components/actors"; | ||
| import { useHighestUsagePercent } from "./hooks"; |
There was a problem hiding this comment.
Imports should be sorted alphabetically. Reorder to: imports from @/ paths first, then @rivet-gg, then @TanStack, then relative imports.
Spotted by Graphite Agent (based on CI logs)
Is this helpful? React 👍 or 👎 to let us know.
Merge activity
|
### TL;DR Enhanced billing UI with new plan badges, usage alerts, and improved context switcher integration. ### What changed? - Added a new `BillingLimitAlert` component that displays warnings when approaching or exceeding usage limits - Enhanced the `BillingPlanBadge` with new styling and support for a "Team" plan tier - Updated the usage gauge to show different visual indicators based on usage percentage - Improved the context switcher to display plan badges next to projects and sort current selections to the top - Updated billing plan card UI with clearer button text and styling - Added premium badge variants with gradient and animation effects - Fixed namespace list pagination by increasing the limit from the default to 100 ### How to test? 1. Check the billing UI with different usage percentages to see the alerts and gauge changes 2. Verify the new premium badge styling for Team, Pro, and Enterprise plans 3. Open the context switcher to see plan badges next to projects 4. Test the sorting behavior in project and namespace lists 5. Verify that the billing limit alert appears when usage is high on the free plan ### Why make this change? These changes improve the visibility of billing information throughout the application, making it easier for users to understand their current plan and usage status. The new alerts help prevent unexpected service interruptions by proactively notifying users when they're approaching usage limits. The premium badge styling creates visual distinction between different plan tiers, and the context switcher improvements help users quickly identify which projects are on which plans.
1 participant
TL;DR
Enhanced billing UI with new plan badges, usage alerts, and improved context switcher integration.
What changed?
BillingLimitAlertcomponent that displays warnings when approaching or exceeding usage limitsBillingPlanBadgewith new styling and support for a "Team" plan tierHow to test?
Why make this change?
These changes improve the visibility of billing information throughout the application, making it easier for users to understand their current plan and usage status. The new alerts help prevent unexpected service interruptions by proactively notifying users when they're approaching usage limits. The premium badge styling creates visual distinction between different plan tiers, and the context switcher improvements help users quickly identify which projects are on which plans.