More ranks and version updates#183
Conversation
|
@Johnthesuper117 is attempting to deploy a commit to the Infinia Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis pull request adds support for a 9-row tier system. Changes include: adding a "9 Rows" dropdown option in the tier template selector, creating a new '9rows' tier template with nine tier levels (SSS through F), extending gradient definitions to accommodate the additional tiers, and updating tier gradient selection logic. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR updates frontend dependencies (to address vulnerability warnings) and adds a new “9 Rows” tier template option, including corresponding gradient handling for the additional tiers.
Changes:
- Bump
next-mdx-remoteto v6 and updatesharp(and associated lockfile dependency tree updates). - Add a
9rowstier template (SSS → F + Uncategorized) and expose it in the tier template selector UI. - Extend tier gradient selection logic to handle 10 total tiers (9 ranked + uncategorized) and expand OG tier gradients.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updates direct dependency versions (next-mdx-remote, sharp). |
| package-lock.json | Captures the resulting resolved dependency graph updates. |
| models/Tier.ts | Adds the new 9rows tier template definition. |
| lib/utils.ts | Adds a tiersLength === 10 gradient-mapping case for the new template. |
| lib/TierCortex.ts | Adds two additional OG tier gradients to support more ranked tiers. |
| components/TierTemplateSelector.tsx | Adds a “9 Rows” option to the template selector menu. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <DropdownMenuRadioItem value="3rows">3 Rows</DropdownMenuRadioItem> | ||
| <DropdownMenuRadioItem value="5rows">5 Rows</DropdownMenuRadioItem> | ||
| <DropdownMenuRadioItem value="7rows">7 Rows</DropdownMenuRadioItem> | ||
| <DropdownMenuRadioItem value="9rows">9 Rows</DropdownMenuRadioItem> | ||
| </DropdownMenuRadioGroup> |
There was a problem hiding this comment.
The new 9-row template option isn’t covered by the existing Playwright regression tests. Consider adding a UI test that selects "9 Rows" and asserts the tier list renders 9 ranked rows + uncategorized (and/or updates the snapshot) to prevent regressions in the selector wiring and template application.
| const tierGradientIndexMap = [0, 1, 2, 3, 4, 5, 6]; | ||
| switch (tiersLength) { | ||
| case 4: | ||
| return `var(--tier-gradient-${[0, 2, 4][index % 3]})`; | ||
| case 6: | ||
| return `var(--tier-gradient-${[0, 1, 3, 4, 6][index % 5]})`; | ||
| case 10: | ||
| return `var(--tier-gradient-${[0, 1, 2, 2, 3, 4, 5, 5, 6][index % 9]})`; | ||
| default: | ||
| return `var(--tier-gradient-${tierGradientIndexMap[index % 7]})`; |
There was a problem hiding this comment.
getTierGradient is accumulating hard-coded tiersLength cases with inline index maps (now including the new 10-tier case). This makes it easy to introduce mismatches as more templates are added. Consider refactoring to compute rankedRows = tiersLength - 1 and select a mapping from a single lookup (or derive it algorithmically) so new templates only require updating one data structure.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
models/Tier.ts (1)
40-50: Consider generating templates from label arrays.Adding
9rowsrepeats the sameid/name/placeholder/labelPositionpattern again. A small factory would keep future row-count additions and default-field changes in one place.♻️ Possible cleanup
+const createTierTemplate = (labels: string[]): Readonly<Tier>[] => [ + ...labels.map(label => ({ + id: `tier-${label.toLowerCase()}`, + name: label, + items: [], + labelPosition: 'left' as const, + placeholder: label, + })), + {id: 'uncategorized', name: '', items: [], labelPosition: 'left'}, +]; + export const tierTemplates: TierTemplate = { + '3rows': createTierTemplate(['S', 'A', 'B']), + '5rows': createTierTemplate(['S', 'A', 'B', 'C', 'F']), + '7rows': createTierTemplate(['SS', 'S', 'A', 'B', 'C', 'D', 'F']), - '9rows': [ - {id: 'tier-sss', name: 'SSS', items: [], labelPosition: 'left', placeholder: 'SSS'}, - {id: 'tier-ss', name: 'SS', items: [], labelPosition: 'left', placeholder: 'SS'}, - {id: 'tier-s', name: 'S', items: [], labelPosition: 'left', placeholder: 'S'}, - {id: 'tier-a', name: 'A', items: [], labelPosition: 'left', placeholder: 'A'}, - {id: 'tier-b', name: 'B', items: [], labelPosition: 'left', placeholder: 'B'}, - {id: 'tier-c', name: 'C', items: [], labelPosition: 'left', placeholder: 'C'}, - {id: 'tier-d', name: 'D', items: [], labelPosition: 'left', placeholder: 'D'}, - {id: 'tier-e', name: 'E', items: [], labelPosition: 'left', placeholder: 'E'}, - {id: 'tier-f', name: 'F', items: [], labelPosition: 'left', placeholder: 'F'}, - {id: 'uncategorized', name: '', items: [], labelPosition: 'left'}, - ], + '9rows': createTierTemplate(['SSS', 'SS', 'S', 'A', 'B', 'C', 'D', 'E', 'F']), };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@models/Tier.ts` around lines 40 - 50, The '9rows' array hardcodes repeated tier objects (ids like 'tier-sss', 'tier-ss', etc. and the 'uncategorized' entry); replace it with a small factory that generates the array from a labels list so defaults (id prefix, name, placeholder, labelPosition) are centralized. Implement a helper (e.g., generateTierRows or buildTierTemplate) that takes an ordered label array ['SSS','SS','S',...,'F'] and optional options (idPrefix, labelPosition) and returns the objects plus the 'uncategorized' entry so future row-count or default-field changes only require updating the labels array or options and not every object literal.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@lib/utils.ts`:
- Around line 28-29: The editor and OG functions diverge because
getTierGradient() uses an inline index map while getOgTierGradient() uses a
different map; fix by extracting the shared index-to-gradient-slot map into a
single exported constant or helper (e.g., TIER_INDEX_MAP or mapIndexToSlot) and
have both getTierGradient() and getOgTierGradient() reference that shared map to
compute the slot (use index % map.length) so both functions produce identical
palette selections for 9-row (and other) templates.
---
Nitpick comments:
In `@models/Tier.ts`:
- Around line 40-50: The '9rows' array hardcodes repeated tier objects (ids like
'tier-sss', 'tier-ss', etc. and the 'uncategorized' entry); replace it with a
small factory that generates the array from a labels list so defaults (id
prefix, name, placeholder, labelPosition) are centralized. Implement a helper
(e.g., generateTierRows or buildTierTemplate) that takes an ordered label array
['SSS','SS','S',...,'F'] and optional options (idPrefix, labelPosition) and
returns the objects plus the 'uncategorized' entry so future row-count or
default-field changes only require updating the labels array or options and not
every object literal.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e8776bb8-bf44-4411-bf9a-253cd380854b
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
components/TierTemplateSelector.tsxlib/TierCortex.tslib/utils.tsmodels/Tier.tspackage.json
| case 10: | ||
| return `var(--tier-gradient-${[0, 1, 2, 2, 3, 4, 5, 5, 6][index % 9]})`; |
There was a problem hiding this comment.
Editor and OG palettes diverge for 9-row templates.
Lines 28-29 still map 10-tier layouts onto gradient slots 0..6, but lib/TierCortex.ts Lines 41-50 now add slots 7 and 8 for OG rendering. That means the live tier list and the generated/shared image will not use the same palette for 9 rows.
Please drive both getTierGradient() and getOgTierGradient() from the same shared index map/palette so the editor and exported output stay visually identical.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@lib/utils.ts` around lines 28 - 29, The editor and OG functions diverge
because getTierGradient() uses an inline index map while getOgTierGradient()
uses a different map; fix by extracting the shared index-to-gradient-slot map
into a single exported constant or helper (e.g., TIER_INDEX_MAP or
mapIndexToSlot) and have both getTierGradient() and getOgTierGradient()
reference that shared map to compute the slot (use index % map.length) so both
functions produce identical palette selections for 9-row (and other) templates.
Fixes: #(issue number)
Description
I've updated some of the JavaScript Libraries, so as to prevent vulnerability errors. I've also added an option to have 9 ranks in a tier.
Screenshots
Checklist:
For image contributions, also check:
Summary by CodeRabbit
Release Notes