154 overview progress indicators#155
Conversation
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughThis PR removes the Zag documentation tooling from the MCP package and deletes its server registration and docs, while adding new web UI pieces: a ContactPrompt component, a CircularProgress component, and a substantial OverviewTab UI refactor including per-user progress and collaboration sections. Changes
Sequence Diagram(s)Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (7)
Comment |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
corates | eff2fc1 | Commit Preview URL | Dec 26 2025, 12:52 AM |
![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 (7)
packages/web/src/components/project-ui/overview-tab/ChartSection.jsx (1)
244-261: Consider adding responsive layout for mobile devices.The horizontal layout with
justify-betweenmight not work well on small screens where the description text and button compete for space. Stack them vertically on mobile to improve readability and usability.Proposed responsive layout adjustment
- <div class='flex items-start justify-between gap-4'> + <div class='flex flex-col items-start justify-between gap-4 sm:flex-row'> <div class='flex-1'> <p class='text-sm text-gray-600'> Visual representation of AMSTAR-2 quality assessment ratings across completed checklists. Use the settings to customize chart appearance, labels, and export options. </p> </div> <button onClick={() => setShowSettingsModal(true)} class='inline-flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900' title='Chart Settings' > <BiRegularCog class='h-4 w-4' /> Settings </button> </div>Based on learnings: responsive design principles should be applied to UI components.
packages/web/src/components/project-ui/ContactPrompt.jsx (1)
16-30: Consider usingcreateMemofor derived title and message.The
getTitle()andgetMessage()functions derive values from reactive props. Per the coding guidelines, "UsecreateMemofor derived values that depend on reactive state, ensuring computed values update only when their dependencies change."While the current pattern works, using
createMemowould align with the guidelines and make the reactive dependencies explicit.Refactor to use createMemo
+import { createMemo } from 'solid-js'; import { FiMail } from 'solid-icons/fi'; import { LANDING_URL } from '@config/api.js'; export default function ContactPrompt(props) { const restrictionType = () => props.restrictionType ?? 'entitlement'; const projectCount = () => props.projectCount ?? 0; const quotaLimit = () => props.quotaLimit ?? null; const contactUrl = () => `${LANDING_URL}/contact`; - const getTitle = () => { + const getTitle = createMemo(() => { if (restrictionType() === 'entitlement') { return 'Project Creation Not Available'; } return 'Project Limit Reached'; - }; + }); - const getMessage = () => { + const getMessage = createMemo(() => { if (restrictionType() === 'entitlement') { return 'CoRATES is in early access. Request access to create projects by contacting us.'; } const limit = quotaLimit(); const limitText = limit === null || limit === -1 ? '∞' : limit; return `You've reached your project limit (${projectCount()}/${limitText}). Request early access for more projects.`; - }; + });packages/web/src/components/project-ui/ProjectDashboard.jsx (1)
45-53: UsecreateMemofor derived helper functions.The
restrictionType()andquotaLimit()functions derive values from reactive sources (hasEntitlementandquotas). Per the coding guidelines: "UsecreateMemofor derived values that depend on reactive state, ensuring computed values update only when their dependencies change."Using
createMemoensures these values are cached and only recomputed when their dependencies change, rather than on every access.Refactor to use createMemo
+import { createEffect, createSignal, onCleanup, For, Show, createMemo } from 'solid-js'; // ... existing code ... - // Determine restriction type and quota limit for ContactPrompt - const restrictionType = () => { + const restrictionType = createMemo(() => { return !hasEntitlement('project.create') ? 'entitlement' : 'quota'; - }; + }); - const quotaLimit = () => { + const quotaLimit = createMemo(() => { const limit = quotas()['projects.max']; return isUnlimitedQuota(limit) ? -1 : limit; - }; + });packages/web/src/components/project-ui/overview-tab/CircularProgress.jsx (3)
30-30: Consider usingcreateMemofor derived values.Per coding guidelines,
createMemoshould be used for derived values. While functional accessors work,createMemoprovides caching and prevents unnecessary recalculations.Suggested change
- const clampedValue = () => Math.max(0, Math.min(100, value())); + const clampedValue = createMemo(() => Math.max(0, Math.min(100, value())));Same applies to
getVariantColoron line 17:- const getVariantColor = () => { + const variantColor = createMemo(() => { switch (variant()) { // ... } - }; + });Then use
variantColor()on line 77.
32-137: Add cleanup to interrupt D3 transitions on unmount.If the component unmounts while a D3 transition is in progress, it may attempt to update the removed DOM nodes. Add
onCleanupto interrupt any running transitions.Suggested fix
+import { createEffect, onCleanup } from 'solid-js'; import * as d3 from 'd3'; // Inside the component: createEffect(() => { if (!svgRef) return; + + // Interrupt any running transitions before clearing + d3.select(svgRef).selectAll('*').interrupt(); const radius = size() / 2 - 8; // ... rest of effect + + onCleanup(() => { + d3.select(svgRef).selectAll('*').interrupt(); + }); });
100-100: Font sizes don't scale with thesizeprop.The hardcoded
24pxfont size won't look proportional for differentsizevalues. Consider scaling relative to the size.Suggested approach
+ // Scale font sizes based on component size + const valueFontSize = () => Math.round(size() * 0.15); // ~24px at 160 + const labelFontSize = () => Math.round(size() * 0.07); // ~11px at 160 // Then in the effect: - .attr('font-size', '24px') + .attr('font-size', `${valueFontSize()}px`) // And for label: - .attr('font-size', '11px') + .attr('font-size', `${labelFontSize()}px`)packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx (1)
24-354: Consider extracting sub-components for maintainability.At 354 lines, this file is approaching the threshold where refactoring would improve maintainability. Consider extracting focused sub-components such as:
ProgressHero(lines 157-212)MemberList(lines 232-308)StatsGrid(lines 181-210)These could live in the same directory with a barrel export from
index.js.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/mcp/README.mdpackages/mcp/src/server.tspackages/mcp/src/tools/zag.tspackages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
💤 Files with no reviewable changes (3)
- packages/mcp/src/server.ts
- packages/mcp/src/tools/zag.ts
- packages/mcp/README.md
🧰 Additional context used
📓 Path-based instructions (14)
**/*
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use emojis in code, comments, documentation, or commit messages
NEVER use emojis anywhere in code, comments, documentation, plan files, or commit messages. This includes unicode symbols. For UI icons, use solid-icons library or SVGs only.
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/web/src/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
packages/web/src/**/*.{js,jsx,ts,tsx}: For UI icons, use thesolid-iconslibrary or SVGs only. Do not use emojis
Ensure browser compatibility for all frontend code (Safari is usually problematic)
Keep files small, focused, and modular. If a file exceeds a high number of lines, consider refactoring by extracting sub-modules into a folder with index.jsx and helper components, moving complex logic into separate utility files or primitives, or splitting large forms into section components
Do NOT prop-drill application state. Shared or cross-feature state must live in external stores under packages/web/src/stores/ or relative to the component file
UsecreateMemofor derived values to ensure they update reactivelyUse import aliases from jsconfig.json instead of relative paths
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,ts,tsx}: Prefer modern ES6+ syntax and features
Use aliases for imports when appropriate to improve readability
**/*.{js,jsx,ts,tsx}: Prefer modern ES6+ syntax and features in JavaScript/TypeScript code
Comments should explain why something is being done, not narrate what the code does. Avoid comments that repeat variable names or describe obvious code behavior.
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/web/src/components/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
packages/web/src/components/**/*.{js,jsx,ts,tsx}: Use responsive design principles for UI components
Group related components in subdirectories with an index.js barrel export
Use Zag.js for UI components and design system
Zag component exist inpackages/web/src/components/zag/*and should be reused. Check the README.md in that folder for a list of existing components before adding new components and when debugging
Components should receive at most 1–5 props, and only for local configuration, not shared state. If a component would need more than 5 props, move the shared data into an external store, a primitive, or Solid context
Do not destructure props in SolidJS components as it breaks reactivity. Instead, access props directly from the props object or wrap them in a function to ensure they are always up-to-date
Components should be lean and focused. They should not implement business logic; move that into stores, utilities, or primitives
Never have a component act as a God component coordinating multiple large concerns
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/{web,ui}/src/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/corates.mdc)
Group related components in subdirectories with barrel exports
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/{web,landing}/src/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/corates.mdc)
packages/{web,landing}/src/**/*.{jsx,tsx}: Use Ark UI components from @corates/ui package, not local component implementations
Use solid-icons library (e.g., solid-icons/bi, solid-icons/fi) for icon imports
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/web/src/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/corates.mdc)
packages/web/src/**/*.{jsx,tsx}: In SolidJS, do NOT prop-drill application state. Import stores directly where needed instead.
In SolidJS, do NOT destructure props. Access props.field directly or wrap in a function: () => props.field
In SolidJS components, components should receive at most 1-5 props (local config only, not shared state)
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/web/src/**/*.{jsx,tsx,js,ts}
📄 CodeRabbit inference engine (.cursor/rules/corates.mdc)
In SolidJS, use createMemo for derived values
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/web/src/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
packages/web/src/**/*.{js,ts,jsx,tsx}: Always usehandleFetchErrorfrom@/lib/error-utils.jsfor fetch calls in frontend code with options like{ showToast: true }for error handling
UsecreateFormErrorSignalsfrom@/lib/form-errors.jsfor form validation error handling with field-level and global error management
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/{web,workers}/src/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
packages/{web,workers}/src/**/*.{js,ts,jsx,tsx}: Never throw string literals; always throw Error objects or return domain errors from API routes
Use error utility functions likeisErrorCodefrom@corates/sharedor@/lib/error-utils.jsto check specific error types instead of manual string comparisons
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
{packages/web/**,packages/landing/**}/**/*.{jsx,tsx,js,ts}
📄 CodeRabbit inference engine (.cursor/rules/solidjs.mdc)
{packages/web/**,packages/landing/**}/**/*.{jsx,tsx,js,ts}: Never destructure props in SolidJS components - destructuring breaks reactivity. Access props directly (e.g.,props.name) or wrap in a function (e.g.,const name = () => props.name) to maintain reactivity.
Import stores directly in components rather than prop-drilling store data through component hierarchies.
Use separate read and write patterns for stores: import the store directly for reading data (e.g.,projectStore.getProjectList()) and import action stores separately for writing (e.g.,projectActionsStore.createProject()).
UsecreateSignalfrom solid-js for managing simple reactive values. Prefer derived state with signals or memo over effects when possible.
UsecreateStorefrom solid-js/store for managing complex objects and arrays that require granular reactivity, enabling fine-grained updates where only affected parts re-render.
UsecreateMemofrom solid-js for derived values that depend on reactive state, ensuring computed values update only when their dependencies change.
Always clean up effects that create subscriptions or timers using theonCleanupfunction from solid-js. Use effects sparingly, only when derived values won't work well.
Keep components lean and focused on rendering. Move business logic to stores (for shared state and operations), primitives (for reusable hooks/logic), or utilities (for pure functions).
Use theShowcomponent from solid-js for conditional rendering instead of JavaScript ternary operators or logical AND operators.
Use theForcomponent from solid-js for rendering lists. It provides better performance and keying compared to JavaScript's map function in JSX.
When manipulating children in wrapper components, use thechildrenhelper from solid-js to ensure proper reactivity and handling of child elements.
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/{web,ui}/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
packages/{web,ui}/**/*.{js,jsx,ts,tsx}: Import UI components from '@corates/ui' package instead of local component files. Do not import Ark UI components from local paths like '@/components/zag/' or 'packages/web/src/components/zag/'
Always use 'solid-icons' library for icons. Never use emoji characters or text as icon replacements. Import from specific icon sets like 'solid-icons/bi', 'solid-icons/fi', 'solid-icons/ai', etc.
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/web/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
Use import aliases from 'packages/web/jsconfig.json' instead of relative paths. Aliases include: '@/' (src/), '@components/' (src/components/), '@auth-ui/' (src/components/auth-ui/), '@checklist-ui/' (src/components/checklist-ui/), '@project-ui/' (src/components/project-ui/), '@routes/' (src/routes/), '@primitives/' (src/primitives/), '@api/' (src/api/), '@config/' (src/config/), and '@lib/' (src/lib/)
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
packages/{web,ui}/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)
Use Tailwind CSS classes for styling components
Files:
packages/web/src/components/project-ui/ContactPrompt.jsxpackages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsxpackages/web/src/components/project-ui/overview-tab/ChartSection.jsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-19T14:49:49.730Z
Learning: Applies to packages/web/src/components/**/*.{js,jsx,ts,tsx} : Use Zag.js for UI components and design system
📚 Learning: 2025-12-24T17:23:10.082Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/solidjs.mdc:0-0
Timestamp: 2025-12-24T17:23:10.082Z
Learning: Applies to {packages/web/**,packages/landing/**}/**/*.{jsx,tsx,js,ts} : Use `createMemo` from solid-js for derived values that depend on reactive state, ensuring computed values update only when their dependencies change.
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
📚 Learning: 2025-12-24T17:23:10.082Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/solidjs.mdc:0-0
Timestamp: 2025-12-24T17:23:10.082Z
Learning: Applies to {packages/web/**,packages/landing/**}/**/*.{jsx,tsx,js,ts} : Use `createSignal` from solid-js for managing simple reactive values. Prefer derived state with signals or memo over effects when possible.
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsx
📚 Learning: 2025-12-24T17:23:10.082Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/solidjs.mdc:0-0
Timestamp: 2025-12-24T17:23:10.082Z
Learning: Applies to {packages/web/**,packages/landing/**}/**/*.{jsx,tsx,js,ts} : Use the `Show` component from solid-js for conditional rendering instead of JavaScript ternary operators or logical AND operators.
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/ProjectDashboard.jsx
📚 Learning: 2025-12-24T17:23:10.082Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/solidjs.mdc:0-0
Timestamp: 2025-12-24T17:23:10.082Z
Learning: Applies to {packages/web/**,packages/landing/**}/**/*.{jsx,tsx,js,ts} : Use `createStore` from solid-js/store for managing complex objects and arrays that require granular reactivity, enabling fine-grained updates where only affected parts re-render.
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
📚 Learning: 2025-12-24T17:22:48.927Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/corates.mdc:0-0
Timestamp: 2025-12-24T17:22:48.927Z
Learning: Applies to packages/{web,landing}/src/**/*.{jsx,tsx} : Use Ark UI components from corates/ui package, not local component implementations
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsxpackages/web/src/components/project-ui/overview-tab/CircularProgress.jsx
📚 Learning: 2025-12-24T17:22:48.927Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/corates.mdc:0-0
Timestamp: 2025-12-24T17:22:48.927Z
Learning: Applies to packages/web/src/**/*.{jsx,tsx,js,ts} : In SolidJS, use createMemo for derived values
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
📚 Learning: 2025-12-24T17:22:48.927Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .cursor/rules/corates.mdc:0-0
Timestamp: 2025-12-24T17:22:48.927Z
Learning: Applies to packages/{web,landing}/src/**/*.{jsx,tsx} : Use solid-icons library (e.g., solid-icons/bi, solid-icons/fi) for icon imports
Applied to files:
packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
📚 Learning: 2025-12-19T14:49:49.730Z
Learnt from: CR
Repo: InfinityBowman/corates PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-19T14:49:49.730Z
Learning: Applies to packages/web/src/components/**/*.{js,jsx,ts,tsx} : Use responsive design principles for UI components
Applied to files:
packages/web/src/components/project-ui/overview-tab/ChartSection.jsx
🧬 Code graph analysis (1)
packages/web/src/components/project-ui/ProjectDashboard.jsx (4)
packages/web/src/components/project-ui/ContactPrompt.jsx (4)
restrictionType(10-10)quotaLimit(12-12)ContactPrompt(9-56)projectCount(11-11)packages/web/src/primitives/useSubscription.js (2)
hasEntitlement(105-105)quotas(98-98)packages/web/src/lib/entitlements.js (3)
hasEntitlement(60-63)limit(76-76)quotas(75-75)packages/shared/src/plans/plans.ts (1)
isUnlimitedQuota(79-81)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Workers Builds: corates
🔇 Additional comments (8)
packages/web/src/components/project-ui/ContactPrompt.jsx (1)
32-55: LGTM - Clean component structure.The component structure is clean and follows SolidJS best practices:
- Props are not destructured, maintaining reactivity
- Uses
solid-iconslibrary for icons as required- Tailwind CSS classes are used appropriately
- Import aliases are used correctly
- Component remains focused and lean (3 props, within guidelines)
packages/web/src/components/project-ui/ProjectDashboard.jsx (2)
149-176: Good responsive layout improvement and ContactPrompt integration.The addition of
flex-wrapandgap-4improves responsiveness, and the ContactPrompt component is properly integrated in the header fallback with correct props passed through.
203-224: ContactPrompt properly integrated in empty state.The ContactPrompt component is correctly used in the empty projects fallback, maintaining the same restriction logic and user guidance flow.
packages/web/src/components/project-ui/overview-tab/CircularProgress.jsx (1)
128-135: Text truncation uses approximate character width.The calculation
(size() * 0.75) / 6assumes ~6px per character, which varies by font. This is acceptable for a simple truncation but may occasionally overflow or truncate too aggressively.packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx (4)
55-100: Well-structured progress calculations usingcreateMemo.The memoized progress calculations follow SolidJS best practices. The logic correctly identifies completed appraisals (including
AWAITING_RECONCILEstatus) and computes per-user statistics efficiently.
164-178: Good use of CircularProgress with dynamic variant.The variant selection logic provides meaningful visual feedback based on completion percentage. The implementation correctly passes reactive values to the component.
234-306: Member list with per-user progress follows SolidJS patterns.The
Forcomponent is used correctly for list rendering, and theShowcomponent handles conditional progress display. TheuserProgressaccessor defined within the callback maintains proper reactivity.
321-345: Quality Assessment section with collapsible behavior.Good use of the
Collapsiblecomponent from@corates/ui. The state management withchartsExpandedsignal is appropriate, and the trigger provides clear UX feedback.
| // Determine if Reviewer Assignment should be shown | ||
| const shouldShowReviewerAssignment = () => | ||
| isOwner() && studies().length > 0 && unassignedStudies().length > 0; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use createMemo for derived value.
shouldShowReviewerAssignment is a derived value depending on reactive state (isOwner(), studies(), unassignedStudies()). Per coding guidelines, derived values should use createMemo for proper caching and reactive updates.
Suggested fix
- // Determine if Reviewer Assignment should be shown
- const shouldShowReviewerAssignment = () =>
- isOwner() && studies().length > 0 && unassignedStudies().length > 0;
+ // Determine if Reviewer Assignment should be shown
+ const shouldShowReviewerAssignment = createMemo(() =>
+ isOwner() && studies().length > 0 && unassignedStudies().length > 0
+ );🤖 Prompt for AI Agents
In packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx around
lines 151 to 153, the derived boolean shouldShowReviewerAssignment is created as
a plain function but depends on reactive signals; replace it with a createMemo
so the value is cached and updates reactively: import createMemo from 'solid-js'
if needed and change the declaration to use createMemo(() => isOwner() &&
studies().length > 0 && unassignedStudies().length > 0); keep using
shouldShowReviewerAssignment() where it's referenced.
2 participants
Summary by CodeRabbit
New Features
UI/UX Improvements
Improvements
Removals
✏️ Tip: You can customize this high-level summary in your review settings.