Mobile view passage overview rework by jeehoh · Pull Request #738 · sillsdev/apm

jeehoh · 2026-10-06T15:57:59Z

Major passage overview rework to match the design

Screenshots:

[Before]

[After]

…layouts

…nts/CardSize/

… components too

josephmyers · 2026-10-12T20:31:04Z

Couple minor things:

Can we stack the Description directly under the Title. As it is, the Description appears to be at a set y-coord, accounting for two-line titles, which of course means for one-line titles there's an extra gap between them and the Description.
None of this was your change, but I think the "assignment" display is quite busy. Do we need to display both the avatar and the full username? I am interested to see the avatar only and also interested to see replacing the avatar with a grayscale person icon, as in the design. If you're okay experimenting...
Can we combine the Note's speech bubble icon into/as the graphic when there is no graphic chosen? I think showing both could be improved. It's just an idea; otherwise, I'd remove the speech bubble.
If there is no assignment, can we not show anything? Removing "Unassigned" will help with busyness.
As in the screenshot below, the card titles don't work well in Flat hierarchy. Should be an easy fix.

I'll start looking at the code itself now.

…itle

…utton regions

josephmyers

Looking even better now. The code is clean enough that I was able to dive a little deeper into things, so I apologize for commenting on changes I've reviewed before. Some of these may involve a bit of discussion between us, so feel free to hit me up about those. Thanks

josephmyers · 2026-10-20T21:58:45Z

-        minWidth: isMobileWidth ? '100%' : 275,
-        maxWidth: 400,
+        boxSizing: 'border-box',
+        minHeight: isMobileWidth ? minPassageCardHeight : cardHeight,


In my mind, this would be 1) height and not minHeight, 2) calculating the tallest card height. This would enforce uniform card height. I noticed differing card heights on mobile, and I was wondering if that was intentional.

josephmyers · 2026-10-20T22:39:20Z

+            {title}
+          </Typography>
+        )}
+        {mediaId && <PassagePlayButton mediaId={mediaId} />}


I think this solution is good, but when the title wraps to a second line, the audio button gets put into the top right corner. It looks a little odd when the word that the line actually wraps on is a long word, because it creates a large gap between the title and audio button.

I think a good solution to this would be to 1) make the audio button part of the title line wrapping, i.e. a span, and 2) make the audio button and the last word a single, non-wrapping element to prevent the audio button being on a line by itself. See below:

const tailIndex = [...new Intl.Segmenter().segment(title)].at(-1)?.index ?? 0; ... <Typography variant="h6" sx={{ minWidth: 0, lineHeight: (theme) => theme.spacing(3.5), overflowWrap: 'anywhere', }} > {title.slice(0, tailIndex)} <Box component="span" sx={{ whiteSpace: 'nowrap' }}> {title.slice(tailIndex)}{' '} {mediaId && <PassagePlayButton mediaId={mediaId} />} </Box> </Typography>

josephmyers · 2026-10-20T22:53:28Z

-          <>
-            <Typography variant="body2" color="grey">
-              {comment || '\u00A0'}
+          {!isChapter && (


This doesn't make a lot of sense to me, since chapters can't have descriptions. Why do we need to be explicit about that here? Maybe it would be a little more "closed for modification" if we said {description && (?

josephmyers · 2026-10-20T23:05:30Z

+  mediaId: string;
+}
+
+export function PassageSpeakerButton({ mediaId }: IProps) {


This looks great. I do notice that it's not being used for book titles, movements, sections, etc. (this looks like a miss from the beginning). Should that be a separate task?

We'll make this a separate task.

josephmyers · 2026-10-21T12:54:11Z

+  mediaId: string;
+}
+
+export function PassagePlayButton({ mediaId }: IProps) {


Although this component is certainly a step in the right direction, it would be more useful if it weren't tied/limited to loading the passage audio. It would be more reusable, e.g. by Discussions, if it were given the audio (URL, Blob, etc.).

We'll make this a separate task.

josephmyers · 2026-10-21T12:58:43Z

+  mediaId: string;
+}
+
+export function PassageSpeakerButton({ mediaId }: IProps) {


I'm also thinking that the name could be improved, so as to not be confused with the "speaker" concept. Something like TitleAudioButton?

josephmyers · 2026-10-21T13:01:21Z

+}
+
+export function PassageSpeakerButton({ mediaId }: IProps) {
+  const { playing, loading, play, audio } = usePassagePlayback(mediaId);


If we want to reuse this, we'll have to change this line. It's strange to me that the "passage playback" is what you have to use for the chapters, since that won't return the right thing for the other card types.

We'll make this a separate task.

josephmyers · 2026-10-21T13:10:52Z

+import { sharedSelector } from '../../selector';
+
+// Only one passage plays at a time: starting one stops whichever was playing.
+let stopActive: (() => void) | undefined;


Limiting the audio playing to one at a time in a central place is a good idea. My refactor will (and the prototype does) introduce the concept of an audio manager as the gateway for playing any audio, not just passages. This will be vital moving forward

I am a little concerned about the duplication of effort between this new file and PassageDetailContext, which contains some of this already. Was it an intentional decision of yours to not use that, e.g. are you wanting to move away from that file?

We will revisit this for future refactor (wrt the audio manager); in the meantime I can investigate how PassageDetailContext works.

jeehoh added 30 commits October 6, 2026 10:54

Justify the PassageCard contents in-between

004dcde

Split PassageCard into separate chapter-number card and passage card …

ef914b8

…layouts

Fix typo in the module name

e693599

Compartmentalize the PassageCard component

921343b

Move CardSize.tsx and useCardSize.ts from components/Team/ to compone…

da551d8

…nts/CardSize/

Update imports for CardSize-related utilities

b0d2bcf

Update to comment so that CardSize would be applicable for other card…

12f5039

… components too

Make the useCardSize to take the minimum height as an optional value

711de5d

Wrap CardSizeProvider around PlanView

4f0ff2d

Use the card size provider to determine consistent height

ef6e01a

Remove extraneous spacing around the assignee container

6b44ea9

Remove empty description

f27984c

Adjust min height

9a47a1f

Remove the PassageCard min-width tests

3eb393b

Render non-scripture references as clamped text with the type icon

a2e5a1c

Split passage card content into top and bottom groups

7daa7c1

Stop counting the passage card's padding twice in its height

cb9d831

Widen the gap between passage graphics and titles

99a11ca

Pad the plan view to match the projects screen

88e3ba0

Group plan view headings with their cards and name numbered sections

4c4d4b4

Create a new audio play/pause button for passage cards

e64b8cd

Let passage cards pause and resume their audio

4c76bab

Space passage card headers with a gap instead of graphic margin

71cfac1

Remove the vertical gap inside chapter cards

172c55d

Use the default icon color for the passage play button

13dfcb3

Use the primary button color for the unassigned icon

896634c

Show a no-account icon at avatar size for unassigned passages

e54cfb8

Render assignee's name on the passage card

338fc55

Share one flex row between assigned and unassigned passage assignees

adbedfb

Use the primary button color for the passage play icon

a087337

jeehoh marked this pull request as ready for review October 12, 2026 19:34

jeehoh requested a review from josephmyers October 12, 2026 19:35

jeehoh assigned josephmyers Oct 12, 2026

jeehoh added 2 commits October 12, 2026 14:57

Remove older circular audio player

4021794

Replace the PassageCard tests left over from the old play button

a6ed89b

josephmyers requested changes Oct 13, 2026

View reviewed changes

jeehoh added 21 commits October 14, 2026 17:28

Adjust the PassageCard header minHeight to the height of a two-line t…

fea57b3

…itle

Increase the gap between the description and avatar + workflow step b…

53cf1e2

…utton regions

Don't show anything at all if there's no assignee

63adff9

Hide assignee name as a tooltip

f06d3e6

Don't show the passage type icon in PassageRef

7bf5b05

Move playback state into PassagePlayButton

232d9bc

Update PassageCard tests for the updated play button

ecb0931

Extract passage playback into usePassagePlayback

7640b18

Use the new speaker button for playing chapter audio

ad2000e

Replace PassageRef with a usePassageRefText getter

ec12173

Truncate passage description on one line

18ec450

Rename comment to description

65e0c23

Move passage description into PassageCardHeader

7db0d8c

Replace PassageCardHeader children with a mediaId prop

0109980

Rename PassageCardHeader title variables

3a389ed

Inline PassageCardTitle into PassageCardHeader

64b694a

Make the subtitle smaller and position it closer to the title

aea4e05

Use Stack for flex layouts in PassageCard and its header

402ebf3

noWrap subtitle

24735e1

Render PassageCardHeader once and use Stack in PassageCard

42f65ac

Fix outdated PassageCard component tests

fe28859

jeehoh requested a review from josephmyers October 20, 2026 20:15

josephmyers requested changes Oct 21, 2026

View reviewed changes

Conversation

jeehoh commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

josephmyers commented Oct 12, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

josephmyers left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jeehoh commented Oct 6, 2026 •

edited

Loading