Unify checklist text refs behind discriminated union (#483)

packages/web/src/components/checklist/AMSTAR2Checklist/AMSTAR2Checklist.tsx

@@ -10,11 +10,13 @@
  */
 
 import { useState, useCallback, useMemo } from 'react';
+import type * as Y from 'yjs';
 import { InfoIcon } from 'lucide-react';
 import { AMSTAR_CHECKLIST } from './checklist-map';
 import { createChecklist as createAMSTAR2Checklist } from './checklist.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { NoteEditor } from '@/components/checklist/common/NoteEditor';
+import type { TextRef } from '@/primitives/useProject/checklists';
 
 // -- Shared internal components --
 
@@ -130,28 +132,27 @@ function StandardQuestion({
   question,
   handleChange,
   onUpdate,
-  getQuestionNote,
+  getTextRef,
   readOnly,
   width,
 }: {
   state: any;
   question: any;
   handleChange: (_colIdx: number, _optIdx: number) => void;
   onUpdate: (_newState: any) => void;
-  getQuestionNote?: (_questionKey: string) => any;
+  getTextRef: (_ref: TextRef) => Y.Text | null;
   readOnly?: boolean;
   width?: string;
 }) {
   const questionKey = useMemo(() => {
-    const text = question?.text || '';
-    const match = text.match(/^(\d+[a-z]?)\./);
-    return match ? `q${match[1]}` : null;
+    const match = question.text.match(/^(\d+[a-z]?)\./);
+    return `q${match[1]}`;
   }, [question]);
 
-  const noteYText = useMemo(() => {
-    if (!questionKey || !getQuestionNote) return null;
-    return getQuestionNote(questionKey);
-  }, [questionKey, getQuestionNote]);
+  const noteYText = useMemo(
+    () => getTextRef({ type: 'AMSTAR2', questionKey }),
+    [questionKey, getTextRef],
+  );
 
   return (
     <div className='bg-card relative rounded-lg p-7 pb-3 shadow-md'>
@@ -167,7 +168,7 @@ function StandardQuestion({
         handleChange={handleChange}
         width={width}
       />
-      {getQuestionNote && <NoteEditor yText={noteYText} readOnly={readOnly} collapsed={true} />}
+      <NoteEditor yText={noteYText} readOnly={readOnly} collapsed={true} />
     </div>
   );
 }
@@ -344,12 +345,12 @@ const QUESTION_CONFIGS: QuestionConfig[] = [
 function Question9({
   checklist,
   onUpdate,
-  getQuestionNote,
+  getTextRef,
   readOnly,
 }: {
   checklist: any;
   onUpdate: (_patch: Record<string, any>) => void;
-  getQuestionNote?: (_key: string) => any;
+  getTextRef: (_ref: TextRef) => Y.Text | null;
   readOnly?: boolean;
 }) {
   const stateA = checklist.q9a;
@@ -416,10 +417,7 @@ function Question9({
     [stateA, stateB, onUpdate],
   );
 
-  const noteYText = useMemo(
-    () => (getQuestionNote ? getQuestionNote('q9') : null),
-    [getQuestionNote],
-  );
+  const noteYText = useMemo(() => getTextRef({ type: 'AMSTAR2', questionKey: 'q9' }), [getTextRef]);
 
   return (
     <div className='bg-card relative rounded-lg p-7 pb-3 text-sm shadow-md'>
@@ -442,7 +440,7 @@ function Question9({
         columns={question.columns2}
         handleChange={handleChangeB}
       />
-      {getQuestionNote && <NoteEditor yText={noteYText} readOnly={readOnly} collapsed={true} />}
+      <NoteEditor yText={noteYText} readOnly={readOnly} collapsed={true} />
     </div>
   );
 }
@@ -451,12 +449,12 @@ function Question9({
 function Question11({
   checklist,
   onUpdate,
-  getQuestionNote,
+  getTextRef,
   readOnly,
 }: {
   checklist: any;
   onUpdate: (_patch: Record<string, any>) => void;
-  getQuestionNote?: (_key: string) => any;
+  getTextRef: (_ref: TextRef) => Y.Text | null;
   readOnly?: boolean;
 }) {
   const stateA = checklist.q11a;
@@ -519,8 +517,8 @@ function Question11({
   );
 
   const noteYText = useMemo(
-    () => (getQuestionNote ? getQuestionNote('q11') : null),
-    [getQuestionNote],
+    () => getTextRef({ type: 'AMSTAR2', questionKey: 'q11' }),
+    [getTextRef],
   );
 
   return (
@@ -546,7 +544,7 @@ function Question11({
         handleChange={handleChangeB}
         width='w-48'
       />
-      {getQuestionNote && <NoteEditor yText={noteYText} readOnly={readOnly} collapsed={true} />}
+      <NoteEditor yText={noteYText} readOnly={readOnly} collapsed={true} />
     </div>
   );
 }
@@ -557,14 +555,14 @@ interface AMSTAR2ChecklistProps {
   externalChecklist?: any;
   onExternalUpdate?: (_patch: Record<string, any>) => void;
   readOnly?: boolean;
-  getQuestionNote?: (_questionKey: string) => any;
+  getTextRef: (_ref: TextRef) => Y.Text | null;
 }
 
 export function AMSTAR2Checklist({
   externalChecklist,
   onExternalUpdate,
   readOnly,
-  getQuestionNote,
+  getTextRef,
 }: AMSTAR2ChecklistProps) {
   // Local fallback state for standalone mode (no Yjs)
   const [localChecklist, setLocalChecklist] = useState<any>(() => {
@@ -621,7 +619,7 @@ export function AMSTAR2Checklist({
                 handleChecklistChange({ q1: { ...state, answers: newAnswers } });
               }}
               onUpdate={(newQ: any) => handleChecklistChange({ q1: newQ })}
-              getQuestionNote={getQuestionNote}
+              getTextRef={getTextRef}
               readOnly={readOnly}
             />
 
@@ -636,7 +634,7 @@ export function AMSTAR2Checklist({
                   handleChecklistChange({ [cfg.qKey]: newQ });
                 }}
                 onUpdate={(newQ: any) => handleChecklistChange({ [cfg.qKey]: newQ })}
-                getQuestionNote={getQuestionNote}
+                getTextRef={getTextRef}
                 readOnly={readOnly}
                 width={cfg.width}
               />
@@ -646,7 +644,7 @@ export function AMSTAR2Checklist({
             <Question9
               checklist={checklist}
               onUpdate={handleChecklistChange}
-              getQuestionNote={getQuestionNote}
+              getTextRef={getTextRef}
               readOnly={readOnly}
             />
 
@@ -659,15 +657,15 @@ export function AMSTAR2Checklist({
                 handleChecklistChange({ q10: newQ });
               }}
               onUpdate={(newQ: any) => handleChecklistChange({ q10: newQ })}
-              getQuestionNote={getQuestionNote}
+              getTextRef={getTextRef}
               readOnly={readOnly}
             />
 
             {/* Q11: split question */}
             <Question11
               checklist={checklist}
               onUpdate={handleChecklistChange}
-              getQuestionNote={getQuestionNote}
+              getTextRef={getTextRef}
               readOnly={readOnly}
             />
 
@@ -682,7 +680,7 @@ export function AMSTAR2Checklist({
                   handleChecklistChange({ [cfg.qKey]: newQ });
                 }}
                 onUpdate={(newQ: any) => handleChecklistChange({ [cfg.qKey]: newQ })}
-                getQuestionNote={getQuestionNote}
+                getTextRef={getTextRef}
                 readOnly={readOnly}
                 width={cfg.width}
               />

packages/web/src/components/checklist/ChecklistWithPdf.tsx

@@ -6,8 +6,10 @@
  */
 
 import { lazy, Suspense } from 'react';
+import type * as Y from 'yjs';
 import { GenericChecklist } from '@/components/checklist/GenericChecklist';
 import { SplitScreenLayout } from '@/components/checklist/SplitScreenLayout';
+import type { TextRef } from '@/primitives/useProject/checklists';
 
 const EmbedPdfViewer = lazy(() => import('@/components/pdf/EmbedPdfViewer'));
 
@@ -22,9 +24,7 @@ interface ChecklistWithPdfProps {
   pdfs?: any[];
   selectedPdfId?: string | null;
   onPdfSelect?: (_pdfId: string) => void;
-  getQuestionNote?: (_questionKey: string) => any;
-  getRobinsText?: (_sectionKey: string, _fieldKey: string, _questionKey?: string) => any;
-  getRob2Text?: (_sectionKey: string, _fieldKey: string, _questionKey?: string) => any;
+  getTextRef: (_ref: TextRef) => Y.Text | null;
   pdfUrl?: string | null;
   onAnnotationAdd?: (_annotation: any) => void;
   onAnnotationUpdate?: (_annotation: any) => void;
@@ -46,9 +46,7 @@ export function ChecklistWithPdf({
   pdfs,
   selectedPdfId,
   onPdfSelect,
-  getQuestionNote,
-  getRobinsText,
-  getRob2Text,
+  getTextRef,
   pdfUrl,
   onAnnotationAdd,
   onAnnotationUpdate,
@@ -68,15 +66,13 @@ export function ChecklistWithPdf({
         pdfUrl={pdfUrl}
         pdfData={pdfData}
       >
-        {/* First panel: Checklist (type-aware) */}
+        {/* First panel: Checklist */}
         <GenericChecklist
           checklistType={checklistType}
           checklist={checklist}
           onUpdate={onUpdate}
           readOnly={readOnly}
-          getQuestionNote={getQuestionNote}
-          getRobinsText={getRobinsText}
-          getRob2Text={getRob2Text}
+          getTextRef={getTextRef}
         />
 
         {/* Second panel: PDF Viewer */}

packages/web/src/components/checklist/ChecklistYjsWrapper.tsx

@@ -83,8 +83,7 @@ export function ChecklistYjsWrapper({ projectId, studyId, checklistId }: Checkli
 
   const ops = connectionPool.getOps(projectId);
   if (!ops) throw new Error(`No connection for project ${projectId}`);
-  const { updateChecklistAnswer, updateChecklist, getQuestionNote, getRobinsText, getRob2Text } =
-    ops.checklist;
+  const { updateChecklistAnswer, updateChecklist, getTextRef } = ops.checklist;
   const { addPdfToStudy } = ops.pdf;
   const { addAnnotation, updateAnnotation, deleteAnnotation } = ops.annotation;
 
@@ -439,13 +438,7 @@ export function ChecklistYjsWrapper({ projectId, studyId, checklistId }: Checkli
       pdfs={studyPdfs}
       selectedPdfId={selectedPdfId}
       onPdfSelect={handlePdfSelect}
-      getQuestionNote={(questionKey: string) => getQuestionNote(studyId, checklistId, questionKey)}
-      getRobinsText={(sectionKey: string, fieldKey: string, questionKey?: string) =>
-        getRobinsText(studyId, checklistId, sectionKey, fieldKey, questionKey)
-      }
-      getRob2Text={(sectionKey: string, fieldKey: string, questionKey?: string) =>
-        getRob2Text(studyId, checklistId, sectionKey, fieldKey, questionKey)
-      }
+      getTextRef={ref => getTextRef(studyId, checklistId, ref)}
       onAnnotationAdd={handleAnnotationAdd}
       onAnnotationUpdate={handleAnnotationUpdate}
       onAnnotationDelete={handleAnnotationDelete}

packages/web/src/components/checklist/GenericChecklist.tsx

@@ -6,6 +6,7 @@
  */
 
 import { useMemo } from 'react';
+import type * as Y from 'yjs';
 import {
   getChecklistTypeFromState,
   DEFAULT_CHECKLIST_TYPE,
@@ -14,25 +15,22 @@ import {
 import { AMSTAR2Checklist } from '@/components/checklist/AMSTAR2Checklist/AMSTAR2Checklist';
 import { ROBINSIChecklist } from '@/components/checklist/ROBINSIChecklist/ROBINSIChecklist';
 import { ROB2Checklist } from '@/components/checklist/ROB2Checklist/ROB2Checklist';
+import type { TextRef } from '@/primitives/useProject/checklists';
 
 interface GenericChecklistProps {
   checklistType?: string;
   checklist: any;
   onUpdate: (_patch: Record<string, any>) => void;
   readOnly?: boolean;
-  getQuestionNote?: (_questionKey: string) => any;
-  getRobinsText?: (_sectionKey: string, _fieldKey: string, _questionKey?: string) => any;
-  getRob2Text?: (_sectionKey: string, _fieldKey: string, _questionKey?: string) => any;
+  getTextRef: (_ref: TextRef) => Y.Text | null;
 }
 
 export function GenericChecklist({
   checklistType: checklistTypeProp,
   checklist,
   onUpdate,
   readOnly,
-  getQuestionNote,
-  getRobinsText,
-  getRob2Text,
+  getTextRef,
 }: GenericChecklistProps) {
   const checklistType = useMemo(() => {
     if (checklistTypeProp) return checklistTypeProp;
@@ -47,7 +45,7 @@ export function GenericChecklist({
           externalChecklist={checklist}
           onExternalUpdate={onUpdate}
           readOnly={readOnly}
-          getQuestionNote={getQuestionNote}
+          getTextRef={getTextRef}
         />
       )}
       {checklistType === CHECKLIST_TYPES.ROBINS_I && (
@@ -57,7 +55,7 @@ export function GenericChecklist({
           showComments={true}
           showLegend={true}
           readOnly={readOnly}
-          getRobinsText={getRobinsText}
+          getTextRef={getTextRef}
         />
       )}
       {checklistType === CHECKLIST_TYPES.ROB2 && (
@@ -67,7 +65,7 @@ export function GenericChecklist({
           showComments={true}
           showLegend={true}
           readOnly={readOnly}
-          getRob2Text={getRob2Text}
+          getTextRef={getTextRef}
         />
       )}
     </div>