@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/checklist/ChecklistView.tsx

@@ -4,8 +4,8 @@ import { Button, Callout, ProgressBar } from '../../ds';
 import { blockRadii, useDs } from '../../tokens';
 import { SurfaceProvider, useMeasuredSurface } from '../../widgets/useSurface';
 import {
-  defaultChecklistConfig, validateChecklistConfig,
-  type Checklist, type ChecklistCapabilities, type ChecklistChange, type ChecklistConfig,
+  checklistCopy, defaultChecklistConfig, fillChecklistCopy as fill, validateChecklistConfig,
+  type Checklist, type ChecklistCapabilities, type ChecklistChange, type ChecklistConfig, type ChecklistCopy,
   type ChecklistOperations, type ChecklistRule, type ChecklistSection, type ChecklistTask,
   type PeopleAdapter, type Person, type ShareRequest,
 } from './contract';
@@ -119,16 +119,16 @@ function MetaWord({ children }: { children: string }) {
 
 /** The one failure construction, identical to the one `DirectoryView` draws (§16): an apricot Callout with its recovery. */
 function FailureBlock({
-  title, message, onRetry, onDismiss, nativeID,
-}: { title: string; message: string; onRetry?: () => void; onDismiss?: () => void; nativeID?: string }) {
+  title, message, copy, onRetry, onDismiss, nativeID,
+}: { title: string; message: string; copy: ChecklistCopy; onRetry?: () => void; onDismiss?: () => void; nativeID?: string }) {
   return (
     <Box nativeID={nativeID} role="group" aria-label={title}>
       <Callout
         title={title}
         action={onRetry || onDismiss ? (
           <Box row wrap style={{ gap: 8 }}>
-            {onRetry ? <SmallButton label="Try again" onPress={onRetry} /> : null}
-            {onDismiss ? <SmallButton label="Dismiss" onPress={onDismiss} /> : null}
+            {onRetry ? <SmallButton label={copy.tryAgain} onPress={onRetry} /> : null}
+            {onDismiss ? <SmallButton label={copy.dismiss} onPress={onDismiss} /> : null}
           </Box>
         ) : undefined}>
         <Text accessibilityLiveRegion="polite" style={{ fontSize: 12, lineHeight: 17 }}>{message}</Text>
@@ -183,10 +183,10 @@ type RowActions = {
 };
 
 function TaskRow({
-  task, checklist, rules, config, people, peopleMap, pending, actions, blockedMessage, onBlockedPress,
+  task, checklist, rules, config, copy, people, peopleMap, pending, actions, blockedMessage, onBlockedPress,
   first, last, isEditing, onStartEdit, onStopEdit, onRetry, onDismiss,
 }: {
-  task: ChecklistTask; checklist: Checklist; rules: ChecklistRule[]; config: ChecklistConfig;
+  task: ChecklistTask; checklist: Checklist; rules: ChecklistRule[]; config: ChecklistConfig; copy: ChecklistCopy;
   people?: PeopleAdapter; peopleMap: Map<string, Person>;
   pending?: PendingChange; actions: RowActions;
   blockedMessage: string | null; onBlockedPress: () => void;
@@ -217,7 +217,7 @@ function TaskRow({
   const person = task.assigneeId ? peopleMap.get(task.assigneeId) : undefined;
   /* The difference the design insists on: nobody is on this, versus somebody is and we cannot
      say who. Silence would merge the two. */
-  const assigneeLabel = !task.assigneeId ? null : (person?.name ?? 'Unknown person');
+  const assigneeLabel = !task.assigneeId ? null : (person?.name ?? copy.unknownPerson);
 
   const commitEdit = () => {
     const nextTitle = title.trim();
@@ -252,18 +252,18 @@ function TaskRow({
           {isEditing ? (
             <Box style={{ gap: 6 }}>
               <Input
-                value={title} onChangeText={setTitle} autoFocus aria-label="Task title"
+                value={title} onChangeText={setTitle} autoFocus aria-label={copy.taskTitle}
                 onSubmit={commitEdit} onCancel={cancelEdit}
               />
               {config.taskDescriptions === 'shown' ? (
                 <Input
-                  value={description} onChangeText={setDescription} placeholder="Description"
-                  aria-label="Task description" onSubmit={commitEdit} onCancel={cancelEdit}
+                  value={description} onChangeText={setDescription} placeholder={copy.description}
+                  aria-label={copy.taskDescription} onSubmit={commitEdit} onCancel={cancelEdit}
                 />
               ) : null}
               <Box row wrap style={{ gap: 8 }}>
-                <SmallButton label="Save" onPress={commitEdit} tone="accent" />
-                <SmallButton label="Cancel" onPress={cancelEdit} />
+                <SmallButton label={copy.save} onPress={commitEdit} tone="accent" />
+                <SmallButton label={copy.cancel} onPress={cancelEdit} />
               </Box>
             </Box>
           ) : (
@@ -289,8 +289,8 @@ function TaskRow({
                     <Text color="textSecondary" style={{ fontSize: 12, lineHeight: 16 }}>{assigneeLabel}</Text>
                   </Box>
                 ) : null}
-                {task.required === false ? <MetaWord>Optional</MetaWord> : null}
-                {view === 'skipped' ? <MetaWord>Skipped</MetaWord> : null}
+                {task.required === false ? <MetaWord>{copy.optional}</MetaWord> : null}
+                {view === 'skipped' ? <MetaWord>{copy.skipped}</MetaWord> : null}
               </Box>
             </>
           )}
@@ -309,31 +309,31 @@ function TaskRow({
           <Box row align="center" style={{ gap: 2, marginLeft: 'auto' }}>
             {config.can.reorder ? (
               <>
-                <Pressable onPress={() => actions.onMove(-1)} disabled={first} width={32} height={32} radius="pill" aria-label={`Move “${task.title}” up`}>
+                <Pressable onPress={() => actions.onMove(-1)} disabled={first} width={32} height={32} radius="pill" aria-label={fill(copy.moveUp, { title: task.title })}>
                   <Icon name="chev-u" size={14} color={colors.textSecondary} />
                 </Pressable>
-                <Pressable onPress={() => actions.onMove(1)} disabled={last} width={32} height={32} radius="pill" aria-label={`Move “${task.title}” down`}>
+                <Pressable onPress={() => actions.onMove(1)} disabled={last} width={32} height={32} radius="pill" aria-label={fill(copy.moveDown, { title: task.title })}>
                   <Icon name="chev-d" size={14} color={colors.textSecondary} />
                 </Pressable>
               </>
             ) : null}
             {config.assignees === 'editable' && config.can.assign ? (
-              <Pressable onPress={() => setAssignOpen(v => !v)} width={32} height={32} radius="pill" aria-label={`Assign “${task.title}”`} aria-expanded={assignOpen}>
+              <Pressable onPress={() => setAssignOpen(v => !v)} width={32} height={32} radius="pill" aria-label={fill(copy.assign, { title: task.title })} aria-expanded={assignOpen}>
                 <Icon name="more" size={15} color={colors.textSecondary} />
               </Pressable>
             ) : null}
             {config.can.skip && view !== 'done' ? (
-              <Pressable onPress={actions.onSkip} width={32} height={32} radius="pill" aria-label={view === 'skipped' ? `Un-skip “${task.title}”` : `Skip “${task.title}”`}>
+              <Pressable onPress={actions.onSkip} width={32} height={32} radius="pill" aria-label={fill(view === 'skipped' ? copy.unskip : copy.skip, { title: task.title })}>
                 <Icon name="minus" size={15} color={colors.textSecondary} />
               </Pressable>
             ) : null}
             {config.can.editTask ? (
-              <Pressable onPress={onStartEdit} width={32} height={32} radius="pill" aria-label={`Edit “${task.title}”`}>
+              <Pressable onPress={onStartEdit} width={32} height={32} radius="pill" aria-label={fill(copy.edit, { title: task.title })}>
                 <Icon name="edit" size={15} color={colors.textSecondary} />
               </Pressable>
             ) : null}
             {config.can.deleteTask ? (
-              <Pressable onPress={actions.onDelete} width={32} height={32} radius="pill" aria-label={`Delete “${task.title}”`}>
+              <Pressable onPress={actions.onDelete} width={32} height={32} radius="pill" aria-label={fill(copy.delete, { title: task.title })}>
                 <Icon name="trash" size={15} color={colors.textSecondary} />
               </Pressable>
             ) : null}
@@ -345,19 +345,19 @@ function TaskRow({
         <Box row wrap align="center" style={{ gap: 6, paddingLeft: 28 }}>
           {candidates.map(p => (
             <ToggleChip
-              key={p.id} label={p.name} on={task.assigneeId === p.id} ariaLabel={`Assign to ${p.name}`}
+              key={p.id} label={p.name} on={task.assigneeId === p.id} ariaLabel={fill(copy.assignTo, { name: p.name })}
               onPress={() => { actions.onAssign(p.id); setAssignOpen(false); }}
             />
           ))}
           {task.assigneeId ? (
-            <SmallButton label="Unassign" onPress={() => { actions.onAssign(null); setAssignOpen(false); }} />
+            <SmallButton label={copy.unassign} onPress={() => { actions.onAssign(null); setAssignOpen(false); }} />
           ) : null}
         </Box>
       ) : null}
 
       {pending?.status === 'error' ? (
         <Box style={{ paddingLeft: 28 }}>
-          <FailureBlock title="Not saved" message="We could not save that." onRetry={onRetry} onDismiss={onDismiss} />
+          <FailureBlock title={copy.notSaved} message={copy.notSavedBody} copy={copy} onRetry={onRetry} onDismiss={onDismiss} />
         </Box>
       ) : null}
     </Box>
@@ -373,6 +373,7 @@ export function ChecklistView({
   const { colors, lift1 } = useDs();
   const { surface, onLayout } = useMeasuredSurface();
   const config = useMemo(() => configProp ?? defaultChecklistConfig(), [configProp]);
+  const copy = useMemo(() => checklistCopy(config.copy), [config.copy]);
 
   const runtime = useChecklistRuntime({
     checklist, config, rules: rulesProp, operations, capabilities, sharedWith, onChange,
@@ -438,10 +439,12 @@ export function ChecklistView({
   const attempt = useCallback((body: Parameters<typeof apply>[0]) => {
     const rejection = apply(body);
     if (rejection?.reason === 'blocked' && 'taskId' in body) {
-      setBlocked({ taskId: body.taskId as string, message: rejection.message });
+      /* The engine's reason is English; the reader sees the same gate in this checklist's words. */
+      const gates = unsatisfiedGates(body.taskId as string, state.doc, rules);
+      setBlocked({ taskId: body.taskId as string, message: gates.length ? gateMessage(gates[0]!, state.doc, copy) : rejection.message });
     }
     return rejection;
-  }, [apply]);
+  }, [apply, state.doc, rules, copy]);
 
   /* Metadata goes through the SAME pipeline as every other edit: a change, an inverse, the
      runtime. The builder never writes `title` into React state behind the engine's back. */
@@ -459,7 +462,7 @@ export function ChecklistView({
        checklist that quietly behaves differently than it was set up to. */
     return (
       <Box testID={testID} style={{ borderRadius: blockRadii.major, borderWidth: 1, borderColor: colors.hairline, backgroundColor: colors.surface1, padding: 20 }}>
-        <Callout title="Configuration">
+        <Callout title={copy.configTitle}>
           {configErrors.join('\n')}
         </Callout>
       </Box>
@@ -467,20 +470,20 @@ export function ChecklistView({
   }
 
   const countLabel = progress.total === 0
-    ? config.copy.emptyLabel
-    : progress.complete ? config.copy.allDoneLabel
-    : `${progress.requiredDone} of ${progress.required} done`;
+    ? copy.emptyLabel
+    : progress.complete ? copy.allDoneLabel
+    : fill(copy.progress, { done: progress.requiredDone, total: progress.required });
 
   const renderTasks = (section: ChecklistSection) => (
     <Box role="list">
       {section.tasks.map((task, i) => {
         const gates = unsatisfiedGates(task.id, doc, rules);
-        const gateNote = gates.length ? gateMessage(gates[0]!, doc) : null;
+        const gateNote = gates.length ? gateMessage(gates[0]!, doc, copy) : null;
         const shown = blocked?.taskId === task.id ? blocked.message : gateNote;
         return (
           <TaskRow
             key={task.id}
-            task={task} checklist={doc} rules={rules} config={config}
+            task={task} checklist={doc} rules={rules} config={config} copy={copy}
             people={people} peopleMap={peopleMap}
             pending={pendingFor(task.id)}
             blockedMessage={shown}
@@ -521,19 +524,19 @@ export function ChecklistView({
       <Box style={{ gap: 6, paddingTop: 8 }}>
         <Input
           value={taskDraft} onChangeText={setTaskDraft} autoFocus
-          placeholder={config.copy.addTaskLabel} aria-label={config.copy.addTaskLabel}
+          placeholder={copy.addTaskLabel} aria-label={copy.addTaskLabel}
           onSubmit={commit} onCancel={() => { setTaskDraft(''); setAddingIn(null); }}
         />
         <Box row wrap style={{ gap: 8 }}>
-          <SmallButton label="Add" onPress={commit} tone="accent" />
-          <SmallButton label="Cancel" onPress={() => { setTaskDraft(''); setAddingIn(null); }} />
+          <SmallButton label={copy.add} onPress={commit} tone="accent" />
+          <SmallButton label={copy.cancel} onPress={() => { setTaskDraft(''); setAddingIn(null); }} />
         </Box>
       </Box>
     ) : (
       <Box style={{ paddingTop: 8 }}>
         <SmallButton
-          label={`+ ${config.copy.addTaskLabel}`}
-          ariaLabel={section.title ? `${config.copy.addTaskLabel} in ${section.title}` : config.copy.addTaskLabel}
+          label={`+ ${copy.addTaskLabel}`}
+          ariaLabel={section.title ? fill(copy.addTaskIn, { label: copy.addTaskLabel, section: section.title }) : copy.addTaskLabel}
           onPress={() => { setTaskDraft(''); setAddingIn(section.id); }}
         />
       </Box>
@@ -542,7 +545,7 @@ export function ChecklistView({
 
   const shareButton = (
     <SmallButton
-      label={state.share.status === 'pending' ? 'Sharing…' : `Share with ${recipients.length}`}
+      label={state.share.status === 'pending' ? copy.sharing : fill(copy.shareWithCount, { count: recipients.length })}
       tone="accent"
       busy={state.share.status === 'pending'}
       onPress={() => {
@@ -578,18 +581,18 @@ export function ChecklistView({
                 {editingMeta ? (
                   <Box style={{ gap: 8 }}>
                     <Input
-                      value={titleDraft} onChangeText={setTitleDraft} autoFocus aria-label="Checklist title"
-                      placeholder="Checklist title" onSubmit={commitMeta} onCancel={cancelMeta}
+                      value={titleDraft} onChangeText={setTitleDraft} autoFocus aria-label={copy.checklistTitle}
+                      placeholder={copy.checklistTitle} onSubmit={commitMeta} onCancel={cancelMeta}
                     />
                     {config.showDescription ? (
                       <Input
-                        value={descDraft} onChangeText={setDescDraft} placeholder="Description"
-                        aria-label="Checklist description" onSubmit={commitMeta} onCancel={cancelMeta}
+                        value={descDraft} onChangeText={setDescDraft} placeholder={copy.description}
+                        aria-label={copy.checklistDescription} onSubmit={commitMeta} onCancel={cancelMeta}
                       />
                     ) : null}
                     <Box row wrap style={{ gap: 8 }}>
-                      <SmallButton label="Save" onPress={commitMeta} tone="accent" />
-                      <SmallButton label="Cancel" onPress={cancelMeta} />
+                      <SmallButton label={copy.save} onPress={commitMeta} tone="accent" />
+                      <SmallButton label={copy.cancel} onPress={cancelMeta} />
                     </Box>
                   </Box>
                 ) : (
@@ -599,7 +602,7 @@ export function ChecklistView({
                         as <h1> and the page's outline collapses — see `Text`'s `aria-level` note. */}
                     <Text role="heading" aria-level={2} numberOfLines={2}
                       style={{ fontSize: 14, lineHeight: 19, fontWeight: '600', letterSpacing: -0.21, color: doc.title ? colors.textPrimary : colors.textSecondary }}>
-                      {doc.title || 'Untitled checklist'}
+                      {doc.title || copy.untitled}
                     </Text>
                     {config.showDescription && doc.description ? (
                       <Text color="textSecondary" numberOfLines={3} style={{ fontSize: 12, lineHeight: 17 }}>
@@ -612,17 +615,17 @@ export function ChecklistView({
               {config.can.editChecklist && !editingMeta ? (
                 <Pressable
                   onPress={() => { setTitleDraft(doc.title); setDescDraft(doc.description ?? ''); setEditingMeta(true); }}
-                  width={32} height={32} radius="pill" aria-label="Edit checklist title and description">
+                  width={32} height={32} radius="pill" aria-label={copy.editChecklist}>
                   <Icon name="edit" size={15} color={colors.textSecondary} />
                 </Pressable>
               ) : null}
               {config.sharing.enabled ? (
                 <Button
                   variant="secondary" size="xsmall" leadingGlyph={state.share.status === 'ok' ? 'check' : 'share'}
-                  aria-label={state.share.status === 'ok' ? 'Shared' : 'Share'}
+                  aria-label={state.share.status === 'ok' ? copy.shared : copy.share}
                   aria-expanded={shareOpen}
                   onPress={() => setShareOpen(v => !v)}>
-                  {state.share.status === 'ok' ? 'Shared' : 'Share'}
+                  {state.share.status === 'ok' ? copy.shared : copy.share}
                 </Button>
               ) : null}
             </Box>
@@ -644,21 +647,21 @@ export function ChecklistView({
 
             {shareOpen && config.sharing.enabled ? (
               <Box style={{ gap: 10, paddingTop: 12, borderTopWidth: 1, borderTopColor: colors.hairline }}>
-                <Text style={{ fontSize: 12, fontWeight: '600' }} color="textPrimary">Share with</Text>
+                <Text style={{ fontSize: 12, fontWeight: '600' }} color="textPrimary">{copy.shareWith}</Text>
                 <Box row wrap style={{ gap: 6 }}>
                   {shareCandidates.map(p => {
                     const on = recipients.includes(p.id);
                     return (
                       <ToggleChip
-                        key={p.id} label={p.name} on={on} ariaLabel={`Share with ${p.name}`}
+                        key={p.id} label={p.name} on={on} ariaLabel={fill(copy.shareWithPerson, { name: p.name })}
                         onPress={() => setRecipients(prev => (on ? prev.filter(x => x !== p.id) : [...prev, p.id]))}
                       />
                     );
                   })}
                 </Box>
                 <Box row wrap align="center" style={{ gap: 6 }}>
-                  <Text color="textSecondary" style={{ fontSize: 12, lineHeight: 16 }}>Share</Text>
-                  {([['checklist', 'The whole checklist'], ['own', 'Each person’s own tasks']] as const).map(([id, label]) => (
+                  <Text color="textSecondary" style={{ fontSize: 12, lineHeight: 16 }}>{copy.shareScope}</Text>
+                  {([['checklist', copy.scopeChecklist], ['own', copy.scopeOwn]] as const).map(([id, label]) => (
                     <ToggleChip key={id} label={label} on={shareScope === id} onPress={() => setShareScope(id)} />
                   ))}
                 </Box>
@@ -672,8 +675,8 @@ export function ChecklistView({
                       return (
                         <Text key={id} color="textSecondary" style={{ fontSize: 12, lineHeight: 16 }}>
                           {theirs.length
-                            ? `${person?.name ?? 'Unknown person'} · ${theirs.map(t => t.title).join(', ')}`
-                            : `${person?.name ?? 'Unknown person'} · no tasks assigned`}
+                            ? fill(copy.shareOwnTasks, { name: person?.name ?? copy.unknownPerson, tasks: theirs.map(t => t.title).join(', ') })
+                            : fill(copy.shareOwnNone, { name: person?.name ?? copy.unknownPerson })}
                         </Text>
                       );
                     })}
@@ -686,15 +689,17 @@ export function ChecklistView({
                     <Box row align="center" style={{ gap: 4, flexShrink: 1 }}>
                       <Icon name="check" size={13} color={colors.status.executed} />
                       <Text accessibilityLiveRegion="polite" style={{ fontSize: 12, lineHeight: 16, color: colors.status.executed, flexShrink: 1 }}>
-                        {`Shared with ${state.share.result.sharedWith
-                          .map(id => shareCandidates.find(p => p.id === id)?.name ?? 'Unknown person').join(', ')}`}
+                        {fill(copy.sharedWithNames, {
+                          names: state.share.result.sharedWith
+                            .map(id => shareCandidates.find(p => p.id === id)?.name ?? copy.unknownPerson).join(', '),
+                        })}
                       </Text>
                     </Box>
                   ) : null}
                 </Box>
                 {state.share.status === 'error' ? (
                   <FailureBlock
-                    title="Not shared" message="We could not share this."
+                    title={copy.notShared} message={copy.notSharedBody} copy={copy}
                     onRetry={runtime.retryShare} onDismiss={runtime.dismissShare}
                   />
                 ) : null}
@@ -703,8 +708,9 @@ export function ChecklistView({
 
             {state.effects.some(e => e.status === 'error') ? (
               <FailureBlock
-                title="Not notified"
-                message="We could not let everyone know."
+                title={copy.notNotified}
+                message={copy.notNotifiedBody}
+                copy={copy}
                 onRetry={() => {
                   const failed = state.effects.find(e => e.status === 'error');
                   if (failed) runtime.retryEffect(failed.effect.id);
@@ -716,7 +722,7 @@ export function ChecklistView({
           {/* ── Body ── */}
           <Box style={{ paddingVertical: 16, paddingHorizontal: 20, gap: 16 }}>
             {progress.total === 0 && doc.sections.every(s => s.tasks.length === 0) && !addingIn ? (
-              <Text color="textSecondary" style={{ fontSize: 13, lineHeight: 18 }}>{config.copy.emptyLabel}</Text>
+              <Text color="textSecondary" style={{ fontSize: 13, lineHeight: 18 }}>{copy.emptyLabel}</Text>
             ) : null}
 
             {doc.sections.map((section, si) => {
@@ -735,7 +741,7 @@ export function ChecklistView({
                             if (next.has(section.id)) next.delete(section.id); else next.add(section.id);
                             return next;
                           })}
-                          width={32} height={32} radius="pill" aria-label={section.title ?? 'Section'}
+                          width={32} height={32} radius="pill" aria-label={section.title ?? copy.section}
                           aria-expanded={!isCollapsed} aria-controls={bodyId}>
                           <Icon name={isCollapsed ? 'chev-r' : 'chev-d'} size={14} color={colors.textSecondary} />
                         </Pressable>
@@ -743,7 +749,7 @@ export function ChecklistView({
                       <Box style={{ minWidth: 0, flexGrow: 1, flexShrink: 1, flexBasis: 80 }}>
                         {editingSectionId === section.id ? (
                           <Input
-                            value={sectionDraft} onChangeText={setSectionDraft} autoFocus aria-label="Section title"
+                            value={sectionDraft} onChangeText={setSectionDraft} autoFocus aria-label={copy.sectionTitle}
                             onSubmit={() => {
                               const t = sectionDraft.trim();
                               if (t) attempt({ kind: 'section.edit', sectionId: section.id, title: t });
@@ -763,21 +769,21 @@ export function ChecklistView({
                       {config.can.editSection && editingSectionId !== section.id ? (
                         <Pressable
                           onPress={() => { setSectionDraft(section.title ?? ''); setEditingSectionId(section.id); }}
-                          width={32} height={32} radius="pill" aria-label={`Edit section “${section.title}”`}>
+                          width={32} height={32} radius="pill" aria-label={fill(copy.editSection, { title: section.title ?? '' })}>
                           <Icon name="edit" size={14} color={colors.textSecondary} />
                         </Pressable>
                       ) : null}
                       {config.can.reorder ? (
                         <Pressable
                           onPress={() => attempt({ kind: 'section.move', sectionId: section.id, toIndex: si - 1 })}
-                          disabled={si === 0} width={32} height={32} radius="pill" aria-label={`Move section “${section.title}” up`}>
+                          disabled={si === 0} width={32} height={32} radius="pill" aria-label={fill(copy.moveSectionUp, { title: section.title ?? '' })}>
                           <Icon name="chev-u" size={14} color={colors.textSecondary} />
                         </Pressable>
                       ) : null}
                       {config.can.deleteSection ? (
                         <Pressable
                           onPress={() => attempt({ kind: 'section.delete', sectionId: section.id })}
-                          width={32} height={32} radius="pill" aria-label={`Delete section “${section.title}”`}>
+                          width={32} height={32} radius="pill" aria-label={fill(copy.deleteSection, { title: section.title ?? '' })}>
                           <Icon name="trash" size={14} color={colors.textSecondary} />
                         </Pressable>
                       ) : null}
@@ -799,7 +805,7 @@ export function ChecklistView({
                 <Box style={{ gap: 8 }}>
                   <Input
                     value={newSectionTitle} onChangeText={setNewSectionTitle} autoFocus
-                    placeholder={config.copy.addSectionLabel} aria-label={config.copy.addSectionLabel}
+                    placeholder={copy.addSectionLabel} aria-label={copy.addSectionLabel}
                     onSubmit={() => {
                       const t = newSectionTitle.trim();
                       if (t) attempt({ kind: 'section.add', index: doc.sections.length, section: { id: newId('section'), title: t, tasks: [] } });
@@ -809,18 +815,18 @@ export function ChecklistView({
                   />
                   <Box row wrap style={{ gap: 8 }}>
                     <SmallButton
-                      label="Add" tone="accent"
+                      label={copy.add} tone="accent"
                       onPress={() => {
                         const t = newSectionTitle.trim();
                         if (t) attempt({ kind: 'section.add', index: doc.sections.length, section: { id: newId('section'), title: t, tasks: [] } });
                         setNewSectionTitle(''); setAddingSection(false);
                       }}
                     />
-                    <SmallButton label="Cancel" onPress={() => { setNewSectionTitle(''); setAddingSection(false); }} />
+                    <SmallButton label={copy.cancel} onPress={() => { setNewSectionTitle(''); setAddingSection(false); }} />
                   </Box>
                 </Box>
               ) : (
-                <SmallButton label={`+ ${config.copy.addSectionLabel}`} onPress={() => setAddingSection(true)} />
+                <SmallButton label={`+ ${copy.addSectionLabel}`} onPress={() => setAddingSection(true)} />
               )
             ) : null}
           </Box>