Skip to content

157 improve reconcile and completed tabs#158

Merged
InfinityBowman merged 5 commits into
mainfrom
157-improve-reconcile-and-completed-tabs
Dec 26, 2025
Merged

157 improve reconcile and completed tabs#158
InfinityBowman merged 5 commits into
mainfrom
157-improve-reconcile-and-completed-tabs

Conversation

@InfinityBowman
Copy link
Copy Markdown
Owner

@InfinityBowman InfinityBowman commented Dec 26, 2025

Summary by CodeRabbit

  • New Features

    • Larger dialog size option (2xl) for expanded modals
    • Compact, collapsible rows for completed and reconcile studies with PDF lists and download/view actions
    • Read‑only previous-reviewers modal to inspect original reviewer checklists
    • New sliding panel component and panel-based PDF preview for smoother animations and consistent sizing
    • Helpers to detect dual-reviewer studies and obtain original reviewer checklists
  • Chores

    • Removed legacy reconcile card UI and tightened list spacing for consistency

✏️ Tip: You can customize this high-level summary in your review settings.

@InfinityBowman InfinityBowman linked an issue Dec 26, 2025 that may be closed by this pull request
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Dec 26, 2025

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
corates 61eb370 Commit Preview URL Dec 26 2025, 01:49 AM

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Dec 26, 2025

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Replaces 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

Cohort / File(s) Summary
Dialog size expansion
packages/ui/src/components/Dialog.tsx
Add '2xl' to DialogProps.size and map it to the max-w-6xl CSS class.
Completed tab components
packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx, packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx, packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx, packages/web/src/components/project-ui/completed-tab/index.js
New CompletedStudyRow collapsible row; PreviousReviewersView modal to show original reviewer checklists; CompletedTab updated to render rows, pass PDF download and reconciliation progress; exports added to index.
Reconcile tab components
packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx, packages/web/src/components/project-ui/reconcile-tab/ReconcileTab.jsx
New ReconcileStudyRow collapsible row replaces ReconcileStudyCard usage; ReconcileTab wired to new row and PDF download handler; spacing/layout adjusted.
Removed UI
packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyCard.jsx
Deleted the card-based ReconcileStudyCard component.
Sliding panel & PDF preview
packages/web/src/components/project-ui/SlidingPanel.jsx, packages/web/src/components/project-ui/PdfPreviewPanel.jsx
Add SlidingPanel component (new controlled sliding panel with animations, close behavior). PdfPreviewPanel switched from Drawer to SlidingPanel, using 2xl size and updated close handler.
Checklist domain utilities
packages/web/src/lib/checklist-domain.js
Add isDualReviewerStudy(study) and getOriginalReviewerChecklists(study, reconciliationProgress) helpers.
Editor config
.vscode/mcp.json
Add new "ark-ui" server entry using npx -y @ark-ui/mcp``.

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
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

Possibly related PRs

Poem

🐰 I hop through rows both neat and small,
Cards fold away — collapse, stand tall.
Two reviewers’ tales in tabs I hide,
PDFs parade and glide inside.
A tiny rabbit cheers the UI tide! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 62.50% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'improve reconcile and completed tabs' is directly related to the main changes, which introduce new row components for both the reconcile and completed tabs, replacing card components and enhancing UI/UX.

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ced2f3b and 61eb370.

📒 Files selected for processing (3)
  • .vscode/mcp.json
  • packages/web/src/components/project-ui/PdfPreviewPanel.jsx
  • packages/web/src/components/project-ui/SlidingPanel.jsx

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (5)
packages/web/src/lib/checklist-domain.js (1)

222-237: Minor redundancy: study.checklists is 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 sortedPdfs and citationLine logic is duplicated in CompletedStudyRow.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 redundant checklists helper function.

checklists() at line 87 is just a wrapper around originalChecklists() with no additional logic. Use originalChecklists() 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 currentChecklistType and currentChecklistId memos.


133-138: Potential timing issue with tab defaulting effect.

This effect sets the default tab when data loads, but the condition !currentChecklistData() depends on activeTab(), which this effect modifies. This could cause unnecessary re-runs. Consider initializing activeTab based 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, and pdfCount logic is duplicated verbatim between CompletedStudyRow and ReconcileStudyRow. 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

📥 Commits

Reviewing files that changed from the base of the PR and between 8ff05f0 and ced2f3b.

📒 Files selected for processing (9)
  • packages/ui/src/components/Dialog.tsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyCard.jsx
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileTab.jsx
  • packages/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.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/ui/src/components/Dialog.tsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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 the solid-icons library 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
Use createMemo for derived values to ensure they update reactively

Use import aliases from jsconfig.json instead of relative paths

Files:

  • packages/web/src/lib/checklist-domain.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/ui/src/components/Dialog.tsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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 use handleFetchError from @/lib/error-utils.js for fetch calls in frontend code with options like { showToast: true } for error handling
Use createFormErrorSignals from @/lib/form-errors.js for form validation error handling with field-level and global error management

Files:

  • packages/web/src/lib/checklist-domain.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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 like isErrorCode from @corates/shared or @/lib/error-utils.js to check specific error types instead of manual string comparisons

Files:

  • packages/web/src/lib/checklist-domain.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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()).
Use createSignal from solid-js for managing simple reactive values. Prefer derived state with signals or memo over effects when possible.
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.
Use createMemo from 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 the onCleanup function 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 the Show component from solid-js for conditional rendering instead of JavaScript ternary operators or logical AND operators.
Use the For component 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 the children helper from solid-js to ensure proper reactivity and handling of child elements.

Files:

  • packages/web/src/lib/checklist-domain.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/ui/src/components/Dialog.tsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.js
  • packages/web/src/components/project-ui/completed-tab/index.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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 in packages/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.js
  • packages/web/src/components/project-ui/reconcile-tab/ReconcileStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.jsx
  • packages/ui/src/components/Dialog.tsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.jsx
  • packages/ui/src/components/Dialog.tsx
  • packages/web/src/components/project-ui/completed-tab/CompletedStudyRow.jsx
  • packages/web/src/components/project-ui/completed-tab/PreviousReviewersView.jsx
  • packages/web/src/components/project-ui/completed-tab/CompletedTab.jsx
  • packages/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.jsx
  • 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 `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 createMemo for derived values, Show/For for conditional/list rendering, and avoids prop destructuring. The new handleDownloadPdf handler 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 with stopPropagation, 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 to max-w-6xl (1152px) rather than max-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-2xl and 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 createMemo for derived state, no prop destructuring, and proper store separation (reads from projectStore, writes via projectActionsStore). The getReconciliationProgressForStudy helper 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. The PreviousReviewersView integration is clean.

Comment on lines +46 to +52
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})` : ''}`;
};
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
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).

Comment on lines +44 to +57
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,
);
};
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
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.

@InfinityBowman InfinityBowman merged commit 602c728 into main Dec 26, 2025
2 of 3 checks passed
@InfinityBowman InfinityBowman deleted the 157-improve-reconcile-and-completed-tabs branch December 26, 2025 01:49
This was referenced Dec 26, 2025
@coderabbitai coderabbitai Bot mentioned this pull request Jan 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve reconcile and completed tabs

2 participants