diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index 585032dd..cec00bab 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -1,11 +1,10 @@ import React, { useState, useContext, useMemo, Suspense } from 'react'; import { useGlobal } from '../../context/useGlobal'; -import { Paper, Box, SxProps, Stack } from '@mui/material'; +import { Paper, Box, Stack, Typography } from '@mui/material'; import { PassageDetailContext } from '../../context/PassageDetailContext'; import { WorkflowSteps } from './WorkflowSteps'; import PassageDetailLayout from './PassageDetailLayout'; -import PassageDetailSectionPassage from './PassageDetailSectionPassage'; import PassageDetailStepComplete from './PassageDetailStepComplete'; import PassageDetailArtifacts from './Internalization/PassageDetailArtifacts'; import PassageDetailPrompt from './Prompt/PassageDetailPrompt'; @@ -24,9 +23,14 @@ import ConsultantCheck from './ConsultantCheck'; import TranscriptionTab from '../TranscriptionTab'; import { ArtifactTypeSlug, + passageRefText, + PassageReference, remoteIdGuid, + sectionDescription, ToolSlug, useArtifactType, + usePlanType, + useSharedResRead, useStepTool, } from '../../crud'; import { Plan, IToolStrings } from '../../model'; @@ -40,7 +44,6 @@ import { PassageDetailDiscuss } from './PassageDetailDiscuss'; import { addPt } from '../../utils/addPt'; import DiscussionPanel from '../Discussions/DiscussionPanel'; import { usePaneWidth } from '../usePaneWidth'; -import { showsBoldDesktopStepComplete } from './boldDesktopStepComplete'; import { isBoldClauseTranscriptionStep } from './boldClauseTranscription'; const KeyTerms = React.lazy(() => import('./Keyterms/KeyTerms')); @@ -58,8 +61,6 @@ function parseStepSettings(settings: unknown): Record | null { return null; } -const clipProps = { overflow: 'hidden', textOverflow: 'ellipsis' } as SxProps; - // Tools whose step content renders inside the shared Paper alongside the // discussion panel. const paperTools = [ @@ -97,9 +98,25 @@ const PassageDetailGrids = () => { sectionArr, isBoldWorkflow, discussOpen, + section, + passage, + allBookData, } = ctx.state; const { tool, settings } = useStepTool(currentstep); + const { getSharedResource } = useSharedResRead(); + const sharedResource = getSharedResource(passage); + const sectionMap = new Map(sectionArr); + const planType = usePlanType(); + const isFlat = useMemo( + () => planType(plan)?.flat, + // eslint-disable-next-line react-hooks/exhaustive-deps + [plan] + ); + const passNum = !isFlat ? passage : undefined; + const sectionPassageRef = passageRefText(passage, allBookData); + const sectionPassageRefDelim = + sectionPassageRef !== '' ? `\u00A0-\u00A0` : ''; const { slugFromId } = useArtifactType(); const stepSettingsParsed = useMemo( () => parseStepSettings(settings), @@ -137,12 +154,6 @@ const PassageDetailGrids = () => { artifactSlug ); - const showBoldDesktopStepComplete = showsBoldDesktopStepComplete( - tool ?? '', - isBoldWorkflow, - artifactSlug - ); - const plans = useMemo(() => { const plans = memory.cache.query((q) => q.findRecords('plan')) as Plan[]; return plans.filter((p) => p.id === plan); @@ -152,7 +163,6 @@ const PassageDetailGrids = () => { tool && Object.prototype.hasOwnProperty.call(t, tool) ? addPt(t.getString(tool)) : tool; - const boldDesktopCenteredHeader = isBoldWorkflow && !isMobile; // The step content sits in a Paper of `calc(100% - 32px)`; a player sized to // the full pane would spill past that Paper (the outer Box clips it, cutting // off the waveform's right edge and the controls below). Match the `- 40` @@ -186,67 +196,48 @@ const PassageDetailGrids = () => { boldClauseTranscription) ); const headerContent = ( - <> - {boldDesktopCenteredHeader ? ( - // Equal-basis side items keep the tool label centered on the pane - // regardless of how wide the passage reference or step-complete get. - - - - - - {headerToolLabel} - - - {showBoldDesktopStepComplete && } - - - ) : ( + + + + + {sectionDescription(section, sectionMap, passNum)} + {sectionPassageRefDelim} + + + + + {headerToolLabel} + - - - - - {headerToolLabel} - - {!isBoldWorkflow && ( - - - - )} + - )} - + + - + ); return ( @@ -255,6 +246,8 @@ const PassageDetailGrids = () => { headerSx={ showHeader ? { + py: 1, + px: 1.5, backgroundColor: 'background.default', borderBottom: '1px solid', borderColor: 'divider', @@ -288,10 +281,10 @@ const PassageDetailGrids = () => { diff --git a/src/renderer/src/components/PassageDetail/PassageDetailSectionPassage.tsx b/src/renderer/src/components/PassageDetail/PassageDetailSectionPassage.tsx deleted file mode 100644 index 615089ed..00000000 --- a/src/renderer/src/components/PassageDetail/PassageDetailSectionPassage.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import usePassageDetailContext from '../../context/usePassageDetailContext'; -import { SectionPassageTitle } from '../../control/SectionPassageTitle'; -import { useSharedResRead } from '../../crud'; - -export default function PassageDetailSectionPassage() { - const { section, passage, allBookData } = usePassageDetailContext(); - const { getSharedResource } = useSharedResRead(); - const sr = getSharedResource(passage); - - return ( - - ); -} diff --git a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.test.tsx b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.test.tsx index 0138bdbb..f11d3de6 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.test.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.test.tsx @@ -101,13 +101,13 @@ describe('PassageDetailStepComplete BOLD Record', () => { it('renders on BOLD desktop Record step', () => { render(); expect( - screen.getByRole('button', { name: 'Complete' }) + screen.getByRole('checkbox', { name: 'Complete' }) ).toBeInTheDocument(); }); it('disables complete checkbox when no saved mediafileId', () => { render(); - expect(screen.getByRole('button', { name: 'Complete' })).toBeDisabled(); + expect(screen.getByRole('checkbox', { name: 'Complete' })).toBeDisabled(); }); }); @@ -121,7 +121,7 @@ describe('PassageDetailStepComplete BOLD Careful Speech', () => { it('renders step complete and bulk-complete controls on BOLD desktop', () => { render(); expect( - screen.getByRole('button', { name: 'Complete' }) + screen.getByRole('checkbox', { name: 'Complete' }) ).toBeInTheDocument(); expect( screen.getByRole('button', { name: 'Set next' }) @@ -137,6 +137,6 @@ describe('PassageDetailStepComplete BOLD Careful Speech', () => { }, }; render(); - expect(screen.getByRole('button', { name: 'Complete' })).toBeDisabled(); + expect(screen.getByRole('checkbox', { name: 'Complete' })).toBeDisabled(); }); }); diff --git a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx index aea72116..ada29a8c 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx @@ -1,6 +1,6 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { useGlobal } from '../../context/useGlobal'; -import { IconButton, Box, Typography } from '@mui/material'; +import { Checkbox, IconButton, Box, Typography } from '@mui/material'; import CompleteIcon from '@mui/icons-material/CheckBoxOutlined'; import NotCompleteIcon from '@mui/icons-material/CheckBoxOutlineBlank'; import ChecklistIcon from '@mui/icons-material/Checklist'; @@ -124,17 +124,19 @@ export const PassageDetailStepComplete = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [pathname]); -const artifactSlug = useMemo(() => { - const parsed = - typeof settings === 'string' - ? (() => { - try { - return JSON.parse(settings || '{}') as { artifactTypeId?: string }; - } catch { - return {} as { artifactTypeId?: string }; - } - })() - : ((settings as { artifactTypeId?: string }) ?? {}); + const artifactSlug = useMemo(() => { + const parsed = + typeof settings === 'string' + ? (() => { + try { + return JSON.parse(settings || '{}') as { + artifactTypeId?: string; + }; + } catch { + return {} as { artifactTypeId?: string }; + } + })() + : ((settings as { artifactTypeId?: string }) ?? {}); const id = parsed?.artifactTypeId; if (!id) return null; const resolved = @@ -156,41 +158,29 @@ const artifactSlug = useMemo(() => { } return ( - - + + {t.title} - } + checkedIcon={} disabled={ !hasPermission || view !== '' || recording || boldRecordCheckboxDisabled } - > - {complete ? ( - - ) : ( - - )} - + /> + {shownWorkflow.map((w) => ( (({ theme }) => ({ - display: 'flex', - margin: theme.spacing(1), -})); - -interface IProps { - section: Section; - passage: Passage; - allBookData: BookName[]; - sharedResource: SharedResourceD | undefined; -} -export const SectionPassageTitle = (props: IProps) => { - const { section, passage, allBookData, sharedResource } = props; - const [plan] = useGlobal('plan'); //will be constant here - const { sectionArr } = useContext(PassageDetailContext).state; - const sectionMap = new Map(sectionArr); - const planType = usePlanType(); - - const isFlat = useMemo( - () => planType(plan)?.flat, - // eslint-disable-next-line react-hooks/exhaustive-deps - [plan] - ); - - const passNum = !isFlat ? passage : undefined; - const ref = passageRefText(passage, allBookData); - const refDelim = ref !== '' ? `\u00A0-\u00A0` : ''; - - return ( - - - - {sectionDescription(section, sectionMap, passNum)} - {refDelim} - - - - - ); -};