157 improve reconcile and completed tabs#158
Conversation
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
corates | 61eb370 | Commit Preview URL | Dec 26 2025, 01:49 AM |
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughReplaces card-based study UIs with compact, collapsible row components in Completed and Reconcile tabs; adds a SlidingPanel and a PreviousReviewersView modal to inspect original reviewer checklists; introduces checklist-domain helpers for dual-reviewer workflows; expands Dialog size options to include '2xl'. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant CompletedTab
participant CompletedStudyRow
participant Dialog
participant PreviousReviewersView
participant ProjectStore
User->>CompletedTab: Open Completed tab
CompletedTab->>CompletedStudyRow: Render rows (props: handlers, progress, assignee)
User->>CompletedStudyRow: Click "View Previous"
CompletedStudyRow->>Dialog: Open dialog (showPreviousReviewers = true)
Dialog->>PreviousReviewersView: Mount
PreviousReviewersView->>ProjectStore: getOriginalReviewerChecklists(study, progress)
ProjectStore-->>PreviousReviewersView: checklist IDs
PreviousReviewersView->>ProjectStore: getChecklistData(id) (for each reviewer)
ProjectStore-->>PreviousReviewersView: checklist data
PreviousReviewersView->>User: Render read-only checklists (tabs)
User->>Dialog: Close
Dialog->>CompletedStudyRow: onClose
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related issues
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 (3)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
packages/web/src/lib/checklist-domain.js (1)
222-237: Minor redundancy:study.checklistsis already validated.Line 228 re-checks
study.checklists || []but line 223 already returns early if!study.checklists. The fallback is harmless but unnecessary.Proposed simplification
export function getOriginalReviewerChecklists(study, reconciliationProgress) { if (!study || !study.checklists || !reconciliationProgress) return []; const { checklist1Id, checklist2Id } = reconciliationProgress; if (!checklist1Id || !checklist2Id) return []; - const checklists = study.checklists || []; + const checklists = study.checklists; const checklist1 = checklists.find(c => c.id === checklist1Id); const checklist2 = checklists.find(c => c.id === checklist2Id); const result = []; if (checklist1) result.push(checklist1); if (checklist2) result.push(checklist2); return result; }packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx (1)
29-52: Consider extracting shared PDF sorting and citation logic.The
sortedPdfsandcitationLinelogic is duplicated inCompletedStudyRow.jsx. Consider extracting these to a shared utility or hook to maintain DRY principles.packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx (2)
87-88: Remove redundantchecklistshelper function.
checklists()at line 87 is just a wrapper aroundoriginalChecklists()with no additional logic. UseoriginalChecklists()directly for clarity.Proposed simplification
- const checklists = () => originalChecklists(); const hasData = () => !loading() && (checklist1Data() || checklist2Data()); // Build tabs for reviewers const reviewerTabs = createMemo(() => { const tabs = []; - const lists = checklists(); + const lists = originalChecklists(); if (lists[0] && checklist1Data()) {Apply the same change to
currentChecklistTypeandcurrentChecklistIdmemos.
133-138: Potential timing issue with tab defaulting effect.This effect sets the default tab when data loads, but the condition
!currentChecklistData()depends onactiveTab(), which this effect modifies. This could cause unnecessary re-runs. Consider initializingactiveTabbased on available data directly in the first effect or using a flag to track initialization.Alternative approach
+ const [initialized, setInitialized] = createSignal(false); + // Set default tab when data loads createEffect(() => { - if (!loading() && reviewerTabs().length > 0 && !currentChecklistData()) { + if (!loading() && reviewerTabs().length > 0 && !initialized()) { setActiveTab(reviewerTabs()[0].value); + setInitialized(true); } });packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx (1)
31-43: Code duplication: PDF sorting and helpers are identical to ReconcileStudyRow.
sortedPdfs,hasPdfs, andpdfCountlogic is duplicated verbatim betweenCompletedStudyRowandReconcileStudyRow. Consider extracting to a shared utility or primitive (e.g.,useSortedPdfs(study)) to maintain DRY principles and simplify future maintenance.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/ui/src/components/Dialog.tsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyCard.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.jsxpackages/web/src/lib/checklist-domain.js
💤 Files with no reviewable changes (1)
- packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyCard.jsx
🧰 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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/ui/src/components/Dialog.tsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/ui/src/components/Dialog.tsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/ui/src/components/Dialog.tsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/lib/checklist-domain.jspackages/web/src/components/project-ui/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/completed-tab/index.jspackages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileStudyRow.jsxpackages/ui/src/components/Dialog.tsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileStudyRow.jsxpackages/ui/src/components/Dialog.tsxpackages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsxpackages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsxpackages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.jsx
🧠 Learnings (9)
📚 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,ui}/src/**/*.{jsx,tsx} : Group related components in subdirectories with barrel exports
Applied to files:
packages/web/src/components/project-ui/completed-tab/index.js
📚 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} : Group related components in subdirectories with an index.js barrel export
Applied to files:
packages/web/src/components/project-ui/completed-tab/index.js
📚 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 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()`).
Applied to files:
packages/web/src/components/project-ui/completed-tab/CompletedTab.jsxpackages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileTab.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 `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/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileTab.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/stores/**/*.{js,ts} : Use Solid's `createStore` for complex state or state objects for better performance and reactivity
Applied to files:
packages/web/src/components/project-ui/reconcile-tab/ReconcileTab.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/reconcile-tab/ReconcileTab.jsx
🧬 Code graph analysis (4)
packages/web/src/lib/checklist-domain.js (1)
packages/web/src/primitives/useProject/sync.js (1)
study(59-88)
packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx (4)
packages/web/src/components/project-ui/all-studies-tab/study-card/StudyCardHeader.jsx (1)
primaryPdf(31-34)packages/web/src/lib/checklist-domain.js (1)
isReconciledChecklist(16-20)packages/web/src/components/project-ui/reconcile-tab/ReconcileStatusTag.jsx (1)
ReconcileStatusTag(12-48)packages/web/src/components/checklist-ui/pdf/PdfListItem.jsx (1)
PdfListItem(18-198)
packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx (5)
packages/web/src/components/project-ui/all-studies-tab/study-card/StudyCardHeader.jsx (1)
primaryPdf(31-34)packages/web/src/lib/checklist-domain.js (1)
getCompletedChecklists(44-48)packages/web/src/checklist-registry/types.js (1)
getChecklistMetadata(67-69)packages/web/src/constants/checklist-status.js (2)
getStatusStyle(49-61)getStatusLabel(29-42)packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx (1)
PreviousReviewersView(16-200)
packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx (6)
packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx (2)
useProjectContext(16-16)useProject(18-18)packages/web/src/lib/checklist-domain.js (8)
getOriginalReviewerChecklists(222-237)checklists(30-30)checklists(46-46)checklists(57-57)checklists(77-77)checklists(94-94)checklists(107-107)checklists(228-228)packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx (1)
getChecklistData(144-146)packages/ui/src/components/index.ts (2)
Dialog(11-11)Tabs(27-27)packages/web/src/checklist-registry/types.js (1)
getChecklistMetadata(67-69)packages/web/src/components/checklist-ui/GenericChecklist.jsx (1)
GenericChecklist(29-62)
⏰ 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/reconcile-tab/ReconcileTab.jsx (1)
1-72: LGTM!The component follows SolidJS best practices correctly: uses
createMemofor derived values,Show/Forfor conditional/list rendering, and avoids prop destructuring. The newhandleDownloadPdfhandler follows the established pattern and the component is lean and focused. Based on learnings, this aligns with the store read/write separation pattern.packages/web/src/lib/checklist-domain.js (1)
206-214: LGTM!Clean utility function with proper null guards and clear documentation.
packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx (1)
76-173: LGTM on the component structure and UI logic.The Collapsible usage, conditional rendering with
Show/For, event handling withstopPropagation, and disabled state management are all implemented correctly.packages/ui/src/components/Dialog.tsx (1)
42-55: Size mapping note: '2xl' jumps to 'max-w-6xl'.The naming convention
'2xl'maps tomax-w-6xl(1152px) rather thanmax-w-2xl(672px). This is a significant jump from'xl'(576px). If intentional for the large dialog use case, this is fine; otherwise, consider whether'2xl'→max-w-2xland a new'6xl'option would be more intuitive.packages/web/src/components/project-ui/completed-tab/index.js (1)
1-5: LGTM!Barrel exports follow the coding guidelines for grouping related components with index.js exports. Based on learnings, this aligns with the project's component organization pattern.
packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx (1)
15-44: LGTM!The component correctly follows SolidJS patterns: uses
createMemofor derived state, no prop destructuring, and proper store separation (reads fromprojectStore, writes viaprojectActionsStore). ThegetReconciliationProgressForStudyhelper appropriately gates reconciliation progress to dual-reviewer studies only.packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx (1)
140-198: LGTM on the dialog UI structure.The component correctly renders a tabbed interface with proper conditional rendering, loading states, and read-only checklist display. The Dialog integration with
size='2xl'and proper close handling is well implemented.packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx (1)
66-176: LGTM on the component structure and interaction handling.The Collapsible pattern, conditional rendering, event handling with
stopPropagation, and badge displays are well implemented. ThePreviousReviewersViewintegration is clean.
| const citationLine = () => { | ||
| const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0]; | ||
| const author = primaryPdf?.firstAuthor || study().firstAuthor; | ||
| const year = primaryPdf?.publicationYear || study().publicationYear; | ||
| if (!author && !year) return null; | ||
| return `${author || 'Unknown'}${year ? ` (${year})` : ''}`; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Convert citationLine to createMemo for proper reactivity.
Same issue as in ReconcileStudyRow.jsx - citationLine is called multiple times in JSX but is a plain function. Per coding guidelines, use createMemo for derived values that depend on reactive state.
Proposed fix
- // Citation line from study or primary PDF
- const citationLine = () => {
+ // Citation line from study or primary PDF
+ const citationLine = createMemo(() => {
const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0];
const author = primaryPdf?.firstAuthor || study().firstAuthor;
const year = primaryPdf?.publicationYear || study().publicationYear;
if (!author && !year) return null;
return `${author || 'Unknown'}${year ? ` (${year})` : ''}`;
- };
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const citationLine = () => { | |
| const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0]; | |
| const author = primaryPdf?.firstAuthor || study().firstAuthor; | |
| const year = primaryPdf?.publicationYear || study().publicationYear; | |
| if (!author && !year) return null; | |
| return `${author || 'Unknown'}${year ? ` (${year})` : ''}`; | |
| }; | |
| const citationLine = createMemo(() => { | |
| const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0]; | |
| const author = primaryPdf?.firstAuthor || study().firstAuthor; | |
| const year = primaryPdf?.publicationYear || study().publicationYear; | |
| if (!author && !year) return null; | |
| return `${author || 'Unknown'}${year ? ` (${year})` : ''}`; | |
| }); |
🤖 Prompt for AI Agents
In packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
around lines 46 to 52, convert the plain function citationLine to a Solid
createMemo so the derived citation value is memoized and reacts to changes in
sortedPdfs() and study(). Replace the function declaration with a
createMemo-based memo (ensure createMemo is imported from 'solid-js' at the top
if not already) and keep using citationLine() in JSX as before; inside the memo
copy the same logic (select primaryPdf, derive author/year, return null or
formatted string).
| const citationLine = () => { | ||
| const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0]; | ||
| const author = primaryPdf?.firstAuthor || study().firstAuthor; | ||
| const year = primaryPdf?.publicationYear || study().publicationYear; | ||
| if (!author && !year) return null; | ||
| return `${author || 'Unknown'}${year ? ` (${year})` : ''}`; | ||
| }; | ||
|
|
||
| // Get the individual reviewer checklists awaiting reconciliation | ||
| const awaitingReconcileChecklists = () => { | ||
| return (study().checklists || []).filter( | ||
| c => !isReconciledChecklist(c) && c.status === CHECKLIST_STATUS.AWAITING_RECONCILE, | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Convert citationLine and awaitingReconcileChecklists to createMemo for reactivity.
Both functions are called multiple times in JSX but are plain functions. In SolidJS, derived values that depend on reactive state should use createMemo to ensure they update correctly and avoid redundant recomputation.
Proposed fix
- // Citation line from study or primary PDF
- const citationLine = () => {
+ // Citation line from study or primary PDF
+ const citationLine = createMemo(() => {
const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0];
const author = primaryPdf?.firstAuthor || study().firstAuthor;
const year = primaryPdf?.publicationYear || study().publicationYear;
if (!author && !year) return null;
return `${author || 'Unknown'}${year ? ` (${year})` : ''}`;
- };
+ });
- // Get the individual reviewer checklists awaiting reconciliation
- const awaitingReconcileChecklists = () => {
- return (study().checklists || []).filter(
+ // Get the individual reviewer checklists awaiting reconciliation
+ const awaitingReconcileChecklists = createMemo(() => {
+ return (study().checklists || []).filter(
c => !isReconciledChecklist(c) && c.status === CHECKLIST_STATUS.AWAITING_RECONCILE,
);
- };
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const citationLine = () => { | |
| const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0]; | |
| const author = primaryPdf?.firstAuthor || study().firstAuthor; | |
| const year = primaryPdf?.publicationYear || study().publicationYear; | |
| if (!author && !year) return null; | |
| return `${author || 'Unknown'}${year ? ` (${year})` : ''}`; | |
| }; | |
| // Get the individual reviewer checklists awaiting reconciliation | |
| const awaitingReconcileChecklists = () => { | |
| return (study().checklists || []).filter( | |
| c => !isReconciledChecklist(c) && c.status === CHECKLIST_STATUS.AWAITING_RECONCILE, | |
| ); | |
| }; | |
| const citationLine = createMemo(() => { | |
| const primaryPdf = sortedPdfs().find(p => p.tag === 'primary') || sortedPdfs()[0]; | |
| const author = primaryPdf?.firstAuthor || study().firstAuthor; | |
| const year = primaryPdf?.publicationYear || study().publicationYear; | |
| if (!author && !year) return null; | |
| return `${author || 'Unknown'}${year ? ` (${year})` : ''}`; | |
| }); | |
| // Get the individual reviewer checklists awaiting reconciliation | |
| const awaitingReconcileChecklists = createMemo(() => { | |
| return (study().checklists || []).filter( | |
| c => !isReconciledChecklist(c) && c.status === CHECKLIST_STATUS.AWAITING_RECONCILE, | |
| ); | |
| }); |
🤖 Prompt for AI Agents
In packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
around lines 44 to 57, the functions citationLine and
awaitingReconcileChecklists are plain functions but derive values from reactive
state; convert them to SolidJS memos using createMemo so they track dependencies
and avoid unnecessary recomputation. Replace citationLine = () => { ... } with
citationLine = createMemo(() => { ... }) and awaitingReconcileChecklists = () =>
{ ... } with awaitingReconcileChecklists = createMemo(() => { ... }), ensure
createMemo is imported from "solid-js" if not already, and keep callers the same
(they can still call citationLine() and awaitingReconcileChecklists()) while
preserving existing logic and dependency calls to study(), sortedPdfs(),
isReconciledChecklist, and CHECKLIST_STATUS.
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.