From e066c3e0be81cd39f6a4b91e1d9891ee4b39dcca Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:26:52 -0500 Subject: [PATCH 01/12] TT-7355 Unify passage detail header layout across bold/desktop and default views --- .../PassageDetail/PassageDetailGrids.tsx | 66 +++++-------------- 1 file changed, 18 insertions(+), 48 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index 585032dd0..945c7f498 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -187,62 +187,32 @@ const PassageDetailGrids = () => { ); 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 && } - - - ) : ( + {headerToolLabel} + - - - - - {headerToolLabel} - - {!isBoldWorkflow && ( - - - - )} + - )} + From 4208675cee84ccdf415d5ff4ccbd8cc2c99483c8 Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:35:33 -0500 Subject: [PATCH 02/12] TT-7355 Inline passage title component --- .../PassageDetail/PassageDetailGrids.tsx | 57 ++++++++++++++++- .../PassageDetailSectionPassage.tsx | 18 ------ .../src/control/SectionPassageTitle.tsx | 61 ------------------- 3 files changed, 54 insertions(+), 82 deletions(-) delete mode 100644 src/renderer/src/components/PassageDetail/PassageDetailSectionPassage.tsx delete mode 100644 src/renderer/src/control/SectionPassageTitle.tsx diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index 945c7f498..ac2a77d77 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -1,11 +1,19 @@ import React, { useState, useContext, useMemo, Suspense } from 'react'; import { useGlobal } from '../../context/useGlobal'; -import { Paper, Box, SxProps, Stack } from '@mui/material'; +import { + Paper, + Box, + SxProps, + Stack, + Grid, + GridProps, + styled, + 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 +32,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'; @@ -60,6 +73,11 @@ function parseStepSettings(settings: unknown): Record | null { const clipProps = { overflow: 'hidden', textOverflow: 'ellipsis' } as SxProps; +const GridRoot = styled(Grid)(({ theme }) => ({ + display: 'flex', + margin: theme.spacing(1), +})); + // Tools whose step content renders inside the shared Paper alongside the // discussion panel. const paperTools = [ @@ -97,9 +115,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), @@ -193,7 +227,24 @@ const PassageDetailGrids = () => { sx={{ alignItems: 'center', minWidth: 0, width: '100%' }} > - + + + + {sectionDescription(section, sectionMap, passNum)} + {sectionPassageRefDelim} + + + + - ); -} diff --git a/src/renderer/src/control/SectionPassageTitle.tsx b/src/renderer/src/control/SectionPassageTitle.tsx deleted file mode 100644 index 594ce0b53..000000000 --- a/src/renderer/src/control/SectionPassageTitle.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useContext, useMemo } from 'react'; -import { useGlobal } from '../context/useGlobal'; -import { Grid, GridProps, styled, Typography } from '@mui/material'; -import { - passageRefText, - PassageReference, - sectionDescription, - usePlanType, -} from '../crud'; -import { BookName, Passage, Section, SharedResourceD } from '../model'; -import { PassageDetailContext } from '../context/PassageDetailContext'; - -const GridRoot = styled(Grid)(({ 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} - - - - - ); -}; From cf00a04b4239496b0d8ad1e57a3408ddd62cb3e5 Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:39:03 -0500 Subject: [PATCH 03/12] TT-7355 Remove extra grid boxes --- .../PassageDetail/PassageDetailGrids.tsx | 48 ++++++------------- 1 file changed, 15 insertions(+), 33 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index ac2a77d77..b9d4dda08 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -1,15 +1,6 @@ import React, { useState, useContext, useMemo, Suspense } from 'react'; import { useGlobal } from '../../context/useGlobal'; -import { - Paper, - Box, - SxProps, - Stack, - Grid, - GridProps, - styled, - Typography, -} from '@mui/material'; +import { Paper, Box, SxProps, Stack, Typography } from '@mui/material'; import { PassageDetailContext } from '../../context/PassageDetailContext'; import { WorkflowSteps } from './WorkflowSteps'; @@ -73,11 +64,6 @@ function parseStepSettings(settings: unknown): Record | null { const clipProps = { overflow: 'hidden', textOverflow: 'ellipsis' } as SxProps; -const GridRoot = styled(Grid)(({ theme }) => ({ - display: 'flex', - margin: theme.spacing(1), -})); - // Tools whose step content renders inside the shared Paper alongside the // discussion panel. const paperTools = [ @@ -227,24 +213,20 @@ const PassageDetailGrids = () => { sx={{ alignItems: 'center', minWidth: 0, width: '100%' }} > - - - - {sectionDescription(section, sectionMap, passNum)} - {sectionPassageRefDelim} - - - - + + {sectionDescription(section, sectionMap, passNum)} + {sectionPassageRefDelim} + + Date: Thu, 3 Sep 2026 12:43:01 -0500 Subject: [PATCH 04/12] TT-7355 Don't wrap the section title --- .../src/components/PassageDetail/PassageDetailGrids.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index b9d4dda08..74e7c69e8 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -213,11 +213,7 @@ const PassageDetailGrids = () => { sx={{ alignItems: 'center', minWidth: 0, width: '100%' }} > - + {sectionDescription(section, sectionMap, passNum)} {sectionPassageRefDelim} Date: Thu, 3 Sep 2026 12:47:09 -0500 Subject: [PATCH 05/12] TT-7355 Apply prettier style changes --- .../PassageDetailStepComplete.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx index aea721162..67df8f824 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.tsx @@ -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 = From 225aaf6b60916bd6e9554badad7a3c0005ff34f9 Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 12:51:16 -0500 Subject: [PATCH 06/12] TT-7355 Fallback to default font size and don't wrap the texts --- .../components/PassageDetail/PassageDetailGrids.tsx | 10 ++++------ .../PassageDetail/PassageDetailStepComplete.tsx | 12 +----------- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index 74e7c69e8..3d256fbda 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -213,7 +213,7 @@ const PassageDetailGrids = () => { sx={{ alignItems: 'center', minWidth: 0, width: '100%' }} > - + {sectionDescription(section, sectionMap, passNum)} {sectionPassageRefDelim} { bookData={allBookData} flat={isFlat} sharedResource={sharedResource} + fontSize="inherit" /> - - {headerToolLabel} + + {headerToolLabel} { - - {t.title} - + {t.title} Date: Thu, 3 Sep 2026 12:56:28 -0500 Subject: [PATCH 07/12] TT-7355 Remove redundant clipProps --- .../components/PassageDetail/PassageDetailGrids.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index 3d256fbda..ac060cf59 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -1,6 +1,6 @@ import React, { useState, useContext, useMemo, Suspense } from 'react'; import { useGlobal } from '../../context/useGlobal'; -import { Paper, Box, SxProps, Stack, Typography } from '@mui/material'; +import { Paper, Box, Stack, Typography } from '@mui/material'; import { PassageDetailContext } from '../../context/PassageDetailContext'; import { WorkflowSteps } from './WorkflowSteps'; @@ -62,8 +62,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 = [ @@ -212,7 +210,7 @@ const PassageDetailGrids = () => { spacing={1} sx={{ alignItems: 'center', minWidth: 0, width: '100%' }} > - + {sectionDescription(section, sectionMap, passNum)} {sectionPassageRefDelim} @@ -240,7 +238,7 @@ const PassageDetailGrids = () => { - + @@ -285,10 +283,10 @@ const PassageDetailGrids = () => { From 8d11d354bdfe2c0832a7aa8d516bc2dc696226da Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 13:00:09 -0500 Subject: [PATCH 08/12] TT-7355 Add padding to the passage title header --- .../src/components/PassageDetail/PassageDetailGrids.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index ac060cf59..509d6a4f9 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -208,7 +208,13 @@ const PassageDetailGrids = () => { ({ + alignItems: 'center', + minWidth: 0, + width: '100%', + p: theme.layout.gap, + pt: 0, + })} > From b72fc6a3ddcc452162387530329e2069d911a352 Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 14:08:22 -0500 Subject: [PATCH 09/12] TT-7355 Remove margins in favor of using padding in passage detail grids --- src/renderer/src/components/PassageDetail/WorkflowSteps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/components/PassageDetail/WorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/WorkflowSteps.tsx index ecabcd816..f5d33f2fc 100644 --- a/src/renderer/src/components/PassageDetail/WorkflowSteps.tsx +++ b/src/renderer/src/components/PassageDetail/WorkflowSteps.tsx @@ -106,7 +106,7 @@ export function WorkflowSteps() { else setFirstStepIndex(Math.max(0, firstStepIndex - 1)); }; return ( - + {shownWorkflow.map((w) => ( Date: Thu, 3 Sep 2026 14:21:00 -0500 Subject: [PATCH 10/12] TT-7355 Add gaps around the passage title header --- .../PassageDetail/PassageDetailGrids.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index 509d6a4f9..a69833f8c 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -204,17 +204,15 @@ const PassageDetailGrids = () => { boldClauseTranscription) ); const headerContent = ( - <> + ({ + sx={{ alignItems: 'center', minWidth: 0, width: '100%', - p: theme.layout.gap, - pt: 0, - })} + }} > @@ -244,10 +242,10 @@ const PassageDetailGrids = () => { - + - + ); return ( @@ -256,6 +254,8 @@ const PassageDetailGrids = () => { headerSx={ showHeader ? { + py: 1, + px: 1.5, backgroundColor: 'background.default', borderBottom: '1px solid', borderColor: 'divider', From 11213d001201691b6dc57b69575599afac1dc8af Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 14:28:50 -0500 Subject: [PATCH 11/12] TT-7355 Remove unused import and variables --- .../src/components/PassageDetail/PassageDetailGrids.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx index a69833f8c..cec00bab1 100644 --- a/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx +++ b/src/renderer/src/components/PassageDetail/PassageDetailGrids.tsx @@ -44,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')); @@ -155,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); @@ -170,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` From 9d3845fdf40018da420dd5f8eefc02342956806d Mon Sep 17 00:00:00 2001 From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com> Date: Thu, 3 Sep 2026 14:34:50 -0500 Subject: [PATCH 12/12] TT-7355 Use the MUI checkbox component instead --- .../PassageDetailStepComplete.test.tsx | 8 ++--- .../PassageDetailStepComplete.tsx | 30 +++++++++---------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.test.tsx b/src/renderer/src/components/PassageDetail/PassageDetailStepComplete.test.tsx index 0138bdbb5..f11d3de64 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 80f2eea93..ada29a8c3 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'; @@ -158,31 +158,29 @@ export const PassageDetailStepComplete = () => { } return ( - - {t.title} - + + {t.title} + + } + checkedIcon={} disabled={ !hasPermission || view !== '' || recording || boldRecordCheckboxDisabled } - > - {complete ? ( - - ) : ( - - )} - + />