Staff fixes#18
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![recurseml[bot]](https://avatars.githubusercontent.com/in/1054195?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by RecurseML
🔍 Review performed on b6e2344..5b715a2
| Severity | Location | Issue | Delete |
|---|---|---|---|
 |
junction-app/app/reports/[id]/page.tsx:347 | Dynamic Tailwind class construction fails |  |
✅ Files analyzed, no issues (1)
• junction-app/app/layout.tsx
| <span className="size-1.5 rounded-full bg-emerald-300" /> | ||
| High confidence • 18 sources | ||
| <div | ||
| className={`mt-3 inline-flex items-center gap-2 rounded-full border border-${riskLevel.color}-400/40 bg-${riskLevel.color}-500/10 px-3 py-1 text-xs uppercase tracking-wide text-${riskLevel.color}-300`} |
There was a problem hiding this comment.
Dynamic Tailwind CSS class name construction using string interpolation will NOT work. The code uses border-${riskLevel.color}-400/40, bg-${riskLevel.color}-500/10, and text-${riskLevel.color}-300 where riskLevel.color can be 'emerald', 'blue', 'yellow', or 'red'. Tailwind's JIT compiler requires complete class names to be statically present in the source code at build time. String interpolation prevents Tailwind from detecting these classes, so the CSS for classes like 'border-emerald-400/40', 'bg-blue-500/10', etc. will NOT be generated in the final CSS bundle. This will result in the trust score badge rendering WITHOUT any styling (no colors, borders, or backgrounds). The same issue exists on line 350 with bg-${riskLevel.color}-300. The correct approach is to use a function that returns complete class strings (similar to the existing severityBadge function) or use conditional logic with complete class names.
React with 👍 to tell me that this comment was useful, or 👎 if not (and I'll stop posting more comments like this in the future)
1 participant
High-level PR Summary
This PR refactors the report detail page to replace hardcoded mock data with dynamic data fetched from an API. The main change transforms the page from displaying static placeholder content (Slack example data) to rendering real report data based on the report ID. The implementation includes loading states, error handling, conditional rendering based on actual data availability, and better organization of helper functions. A minor formatting fix was also applied to the app metadata description.
⏱️ Estimated Review Time: 30-90 minutes
💡 Review Order Suggestion
junction-app/app/layout.tsxjunction-app/app/reports/[id]/page.tsx