improve ux visibility for multiple outcomes

[InfinityBowman]

Summary by CodeRabbit

• UI Improvements
  • Enhanced visual styling for checklist type labels with badge formatting.
  • Reorganized study row layouts for clearer distinction between single and multi-outcome studies.
  • Streamlined interaction patterns—PDF sections now clearly expandable with simplified click handling.
  • Improved form validation messaging with dynamic checklist names.
  • Reorganized checklist and outcome presentations for better visual hierarchy.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5e68df4 and d8de55f.

📒 Files selected for processing (5)

• packages/web/src/components/project/completed-tab/CompletedOutcomeRow.jsx
• packages/web/src/components/project/completed-tab/CompletedStudyRow.jsx
• packages/web/src/components/project/reconcile-tab/ReconcileStudyRow.jsx
• packages/web/src/components/project/todo-tab/ChecklistForm.jsx
• packages/web/src/components/project/todo-tab/TodoStudyRow.jsx

---

📝 Walkthrough

Walkthrough

This PR restructures study row components across multiple tabs (completed, reconcile, todo) to unify presentation logic: single items now display inline within headers while multiple items render as always-visible stacked sub-rows, PDF sections remain expandable with narrowed click triggers, and checklist/outcome metadata is consistently referenced via helper functions.

Changes

Cohort / File(s)	Summary
Study Row UI Restructuring packages/web/src/components/project/completed-tab/CompletedStudyRow.jsx, packages/web/src/components/project/reconcile-tab/ReconcileStudyRow.jsx, packages/web/src/components/project/todo-tab/TodoStudyRow.jsx	Reworked header behavior and content rendering: single items (outcomes/checklists) display inline in headers with badges, multiple items render as stacked sub-rows (always visible), row clicks now toggle only PDF expansion (when PDFs exist), chevron indicator shown only for PDFs, and removed previous multi-outcome/multi-checklist header indicators. Added getChecklistMetadata import to ReconcileStudyRow.
Outcome Styling packages/web/src/components/project/completed-tab/CompletedOutcomeRow.jsx	Converted checklist type label from plain span to styled badge component with background, foreground, rounded, and padding classes.
Form Logic Update packages/web/src/components/project/todo-tab/ChecklistForm.jsx	Added getChecklistMetadata import; reworked outcome warning block to display two separate banners—a blocking "No outcomes defined" message when zero outcomes exist and a non-blocking "All outcomes covered" message when outcomes are present, with dynamic checklist name references.

Possibly related issues

• Outcomes - improve ux #365: Directly addresses the same study-row and checklist UI component restructuring across TodoStudyRow, ReconcileStudyRow, CompletedStudyRow, and ChecklistForm to improve multi-outcome/multi-checklist UX.

Possibly related PRs

• 76 minor adjustments to studies and checklists #77: Modifies the same UI components (ReconcileStudyRow, ChecklistForm) to use getChecklistMetadata imports and update checklist label rendering.
• 338 multiple appraisals per study per user #352: Introduces outcome-aware checklist/reconciliation changes across the same components with outcome-scoped rendering and reconciliation logic modifications.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 365-outcomes-improve-ux

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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