Refactor Limits page#296
Merged
sarimrmalik merged 30 commits intomainfrom Apr 24, 2026
Merged
Conversation
… typing, classes and accessibility
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…VGs, improving accessibility and layout. Adjusted font size and line height for better visual consistency.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 151d6883d8
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
…onent and replacing it with UsageLimitForm and UsageAlertForm components. Introduce a new RemoveUsageLimitDialog for handling limit removals. Update the limit-section to utilize the new forms and adjust the UsageLimits component accordingly. Enhance currency formatting utilities for better input handling.
…n component and replacing it with separate UsageLimitSection and UsageAlertSection components. Update imports in UsageLimits to reflect the new structure. Enhance currency formatting in UsageLimitForm and UsageAlertForm for improved consistency.
…lity. Introduce shouldShowCancel logic to determine when the cancel button should be displayed, ensuring a clearer user experience when editing alert and limit values.
Introduce a new SetUsageLimitDialog component to facilitate setting usage limits within the dashboard. This dialog includes confirmation and cancellation options, enhancing user interaction when managing API limits. Update UsageLimitForm to integrate the new dialog and streamline the limit-setting process, replacing the previous confirmation dialog implementation.
…r displaying currency values. Update setDraftValue to format currency correctly when editing values, enhancing user experience and consistency in currency formatting.
…teraction. Introduce controlled dialog state management and update button icons for consistency. Improve editing experience by focusing input fields when editing, and streamline the handling of alert and limit removals.
…solidate loading and limits rendering logic into a single conditional block, and adjust layout for better responsiveness by changing max-width. This enhances user experience during data fetching.
Introduce a ref to track component mount status, ensuring that the effect for focusing the input field only runs after the component has mounted. This improves the user experience by preventing unintended focus behavior during the initial render.
… layout consistency. Update spacing in RemoveUsageLimitDialog and SetUsageLimitDialog for better alignment. Enhance UsageAlertForm and UsageLimitForm to manage input editability and focus behavior more intuitively, ensuring a smoother interaction when setting and removing usage limits.
Collaborator
|
Feedback:
Arc.-.2026-04-19.at.08.29.21.mp4
|
…improved user interaction. Update border styles to include hover states, ensuring a more responsive design when users interact with the forms.
Introduce a new utility function to focus the first editable input on mouse down events, enhancing user interaction. Integrate this functionality into both forms to improve the editing experience by ensuring the correct input field is focused when users click outside of interactive elements.
…nd user experience. Adjust the top position of the dialog content and set a maximum height with overflow handling to enhance visibility and interaction.
…w AsciiIcon component for rendering ASCII art. Update active and inactive line definitions for improved visual representation based on state. Enhance UsageAlertSection and UsageLimitSection to conditionally render icons based on value presence, improving user feedback.
…roved layout consistency.
…oved clarity. Change messages to reflect successful actions more directly, enhancing user feedback when limits and alerts are set or removed.
ben-fornefeld
approved these changes
Apr 23, 2026
Member
ben-fornefeld
left a comment
ben-fornefeld
left a comment
There was a problem hiding this comment.
few nits, lgtm otherwise!
…d alert dialogs
- Changed button variants from 'outline' and 'default' to 'secondary' and 'primary' respectively for consistency.
- Updated loading states to display descriptive messages ('Removing...' and 'Setting...') for better user feedback.
- Adjusted button classes to remove unnecessary size specifications, aligning with design system updates.
- Moved `CurrencyInputSchema` and `sanitizeCurrencyInput` to a new file for better structure. - Removed the `formatCurrencyValue` function from tests and updated usages in `UsageAlertForm` and `UsageLimitForm` to use `formatNumber` instead. - Adjusted related tests to reflect these changes, ensuring consistent currency formatting across the application.
- Updated the width class in the DialogContent component to ensure it adapts correctly across different screen sizes, enhancing the overall user experience.
ben-fornefeld
added a commit
that referenced
this pull request
Apr 29, 2026
## Summary - Coerces missing `limit_amount_gte` / `alert_amount_gte` fields from the billing API to `null` at the repository boundary so the rest of the limits page can rely on the typed `number | null` contract. - Fixes a client-side `Cannot read properties of undefined (reading 'toLocaleString')` crash on `/dashboard/[teamSlug]/limits` for any team that has never set a usage limit or alert. ## Why this happened The billing API's `BillingLimit` struct uses `*int64` with `json:",omitempty"`, so unset limits are **omitted from the JSON response entirely**, not serialized as explicit `null`. The recent limits page refactor (#296) replaced the previous `originalValue?.toLocaleString()` / `?? ''` pattern with strict `value !== null` checks followed by `formatNumber(value)` — which lets `undefined` slip through and throws inside `toLocaleString`. I verified two weeks of `e2b-dev/belt` history (#654 sqlc migration, #690 SupabaseDB cleanup, #693 oapi-codegen upgrade); none of them changed the `BillingLimit` JSON shape. The API has always omitted unset fields — the dashboard refactor is what removed the tolerance for `undefined`. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
3 participants
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.
Ticket