refactor: the new-transaction highlight rail and the wide RHP width model by TaduJR · Pull Request #98744 · Expensify/App

TaduJR · 2026-08-17T05:59:43Z

Explanation of Change

Follow-up to #89585, which shipped the duplicate-expense highlight. The behaviour is the same duplicating an expense still highlights the new row and widens the panel but the code behind it is simpler and a few rough edges are fixed.

Marking a new expense. Each mark now records when it was written, so clearing an old mark can't wipe a newer one for the same expense. And only one place decides whether to write a mark, instead of two that could disagree about it.

The wide panel. Which screens show wide is now worked out from the navigation state as it renders, instead of being kept in a second copy that had to be updated by hand. That removes the two functions doing the syncing, plus an API nothing read. A panel that's closing also keeps its width until the animation finishes, rather than snapping narrow straight away.

The animation. The row appears as soon as it's added, and only the flash waits until the screen is in front so an expense added while you're looking at something else is still highlighted when you come back. A highlight now also survives the list re-sorting underneath it.

One thing worth knowing when reviewing: the stored shape of pendingNewTransactionIDs changed. Marks written by the current production build are ignored rather than read. Nothing needs migrating old entries are cleaned up the first time they're read.

Fixed Issues

$ #96327
PROPOSAL:

Tests

**Prerequisite: **

Report A: an expense report on a workspace with 2 or more expenses.
Report B: an expense report with exactly 1 expense.
Report C: an empty expense report — create one if you don't have it.
The workspace matters: on a personal report a duplicate may be moved to a new report, and no highlight is expected there.

⚠️ A known unrelated bug you will probably see
Re-opening a chat you already visited in the same session can make existing expenses flash in that chat's expense cards. That is issue #98308 — already live in production, neither caused nor fixed by this PR, and it reproduces identically without these changes. Please don't file it against this PR, but do mention it if you see it, because it can be mistaken for a failure of test 7.

1. A duplicated expense is highlighted

Open report A.
Click an expense row to open its details in the side panel.
Click More in that panel.
Click Duplicate expense.
Verify a copy appears in the report list.
Verify the list scrolls so the copy is centred on screen.
Verify the copy fades in and then flashes once.
Verify no other row flashes.

2. The first expense on a report is not highlighted

Open report C (the empty one).
Add one expense to it.
Verify the expense appears.
Verify it does not flash.

3. Editing an existing expense does not highlight it

Open report A.
Click an expense that is already on the report.
Change its amount or description and save.
Close the panel and return to the report list.
Verify the row shows the new value.
Verify the row does not flash.

4. Two additions in a row each get their own highlight

Open report A.
Duplicate an expense.
Verify the copy is scrolled to and flashes.
Wait about 3 seconds.
Duplicate a different expense.
Verify the second copy is also scrolled to.
Verify it also flashes.

5. A highlight survives the row moving

Open report A.
Duplicate an expense and watch the new row closely.
Verify it flashes.
Verify that if the row shifts position on its own moments later, the highlight continues rather than cutting out.
Duplicate another expense.
While it is still flashing, click a column header (Date, Merchant, Category or Amount) to re-sort.
Verify the row keeps its highlight through the re-sort.

6. Deleting and re-adding highlights again

Open report A.
Click an expense row, click More, then click Delete.
Verify the expense is removed.
Duplicate another expense.
Verify the newly added one flashes.

7. Switching between expense reports does not highlight

Open report A (the expense report itself, not the chat).
Switch directly to report B.
Verify no row on report B flashes — including right after the switch, while the list is still filling in.
Switch back to report A.
Verify no row flashes.
Repeat steps 2–5 quickly several times.
Verify nothing flashes on either report.
If you see flashing in a chat's expense cards rather than in the report table, that is the known bug above, not this test.

8. Bulk duplicate

Open report A.
Tick the checkbox on two or more expense rows.
Verify a button appears showing the count, e.g. "2 selected".
Click it.
Click Duplicate expense.
Verify a copy appears for each selected expense.
Verify every copy is highlighted, not only the first.

9. The panel opens at the right width (web/desktop, maximised)

Click the Spend tab in the top navigation. (Not the "Search" button inside a chat — that is a different feature.)
Select the Expenses tab.
Verify the results are grouped into expense reports. If not, use the grouping control and choose Expense reports.
Click a report row that has more than one expense.
Verify the side panel opens at its widest immediately.
Verify it does not open narrow then jump wider.
Go back and click a report row with exactly one expense.
Verify it opens at the medium width.

10. The panel keeps its width while closing (web/desktop, maximised)

From Spend → Expenses, open a report with more than one expense (widest).
Close it with the back button.
Watch the very first moment of the closing animation.
Verify it slides out at full width.
Verify it does not snap narrow first.
Reopen it and close it with the Escape key; verify the same.
Repeat with a single-expense report at the medium width.

11. Closing one screen off a stack keeps the width (web/desktop, maximised)

From Spend → Expenses, open a report with several expenses.
From inside it, click one expense so a second screen stacks on top.
Close only that second screen.
Watch the report panel behind it during the animation.
Verify it stays at full width throughout.
Verify it does not flicker narrower as the top screen slides away.

12. The panel shrinks when the report loses expenses (web/desktop, maximised)

From Spend → Expenses, open a report with more than one expense (widest).
Leave the panel open.
Delete expenses one at a time (row → More → Delete) until one remains.
Verify the panel shrinks to the medium width.
Verify it does so without being closed and reopened.

13. Switching tabs while the panel is open (web/desktop, maximised)

From Spend → Expenses, open a report with several expenses.
Without closing it, switch to another tab (Inbox or Workspaces).
Verify the new tab lays out normally.
Verify there is no leftover wide panel and no stray dimmed area.
Return to Spend and verify the panel comes back at its proper width.

14. Moving between expenses with the arrows (web/desktop, maximised)

From Spend → Expenses, open a single expense in the side panel.
Click the next arrow.
Verify it opens at a sensible width with no flicker.
Step through several more using next and previous.
Verify each behaves the same.
Verify the position counter stays in step with the list you came from.

15. On a wide screen the highlight plays behind a stacked panel (web/desktop, maximised)

From Spend → Expenses, open a report with several expenses.
From inside it, click one expense so a second screen stacks on top.
Verify the report behind is still visible and dimmed to the left.
From the top screen, click More then Duplicate expense.
Verify the new row flashes in the dimmed report behind you, while you are still on the top screen.
Click the dimmed area.
Verify it returns you to the report.

16. On mobile the highlight waits for you (iOS, Android, or a narrow browser window)

Open report A.
Click one expense so it fully covers the report.
Click More then Duplicate expense.
Verify no flash is visible while the report is covered.
Go back to the report.
Verify the new row is fully visible — correct height, not blank or collapsed.
Verify it flashes on arrival.
Repeat once, but stay on the covering screen for two minutes before going back. Verify the row is still fully visible and still flashes — the wait has no time limit.

Offline tests

Same as tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Mac-Chrome.mp4

…ts legacy mechanisms

…ports-newTransactionHighlight-and-RHPLayout-followups # Conflicts: # src/selectors/ReportMetaData.ts

…ports-newTransactionHighlight-and-RHPLayout-followups

…tions

…n a flag clears

…duled

…ports-newTransactionHighlight-and-RHPLayout-followups

…ports-newTransactionHighlight-and-RHPLayout-followups # Conflicts: # src/selectors/ReportMetaData.ts

… not reach

…ports-newTransactionHighlight-and-RHPLayout-followups # Conflicts: # src/components/Search/index.tsx # src/libs/actions/IOU/MoneyRequestBuilder.ts # src/pages/iou/request/step/confirmation/useExpenseSubmission.ts # tests/actions/IOU/GetMoneyRequestInformationTest.ts

…nav event

melvin-bot · 2026-08-17T05:59:49Z

@abzokhattab Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

codecov · 2026-08-17T06:03:05Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/CONST/index.ts	`94.85% <ø> (ø)`
...equestReportView/MoneyRequestReportActionsList.tsx	`60.26% <100.00%> (ø)`
...portActionItem/MoneyRequestReportPreview/index.tsx	`92.72% <100.00%> (ø)`
...onents/ScreenWrapper/ScreenWrapperStatusContext.ts	`100.00% <ø> (ø)`
src/components/ScreenWrapper/index.tsx	`92.68% <100.00%> (ø)`
...archList/ListItem/TransactionGroupListExpanded.tsx	`67.69% <ø> (ø)`
src/components/WideRHPContextProvider/default.ts	`42.85% <ø> (+15.58%)`	⬆️
...s/WideRHPContextProvider/getIsRHPDisplayedBelow.ts	`100.00% <100.00%> (+100.00%)`	⬆️
...s/WideRHPContextProvider/getVisibleRHPRouteKeys.ts	`95.65% <100.00%> (+95.65%)`	⬆️
...onents/WideRHPContextProvider/useRHPWidth/index.ts	`95.65% <100.00%> (+95.65%)`	⬆️
... and 15 more
... and 19 files with indirect coverage changes

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 71b330f5f7

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

TaduJR · 2026-08-17T06:16:26Z

@codex review

chatgpt-codex-connector · 2026-08-17T06:22:20Z

Codex Review: Didn't find any major issues. Nice work!

Reviewed commit: 1d40ac7687

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

abzokhattab · 2026-08-17T10:50:42Z

@MelvinBot @codex review the PR and check for regressions, breaking changes or bugs

chatgpt-codex-connector · 2026-08-17T10:57:20Z

Codex Review: Didn't find any major issues. Bravo.

Reviewed commit: 1d40ac7687

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

MelvinBot · 2026-08-17T11:05:17Z

PR Review — regressions, breaking changes & bugs

Verdict: Solid, well-tested refactor. No High-severity defects, no crashes, and no data-correctness issues. The Onyx shape change is backward-safe, all changed signatures are fully propagated, and the wide-RHP width derivation reproduces the old hand-synced behavior. Everything I flag below is highlight/flash cosmetics or a deliberate behavior change — nothing blocks correctness. I reviewed the three subsystems (marking, wide-RHP width, animation) against 1d40ac7.

Worth a look before merge

1. A deferred flash can be dropped after 4s when a wide RHP covers the report preview (low–med, cosmetic; please verify manually)
The rail sweep + diff-latch window now start a 4s timer as soon as isReportVisible is true (useNewTransactions.ts:98-124), but the pulse defers until focus arrives (useAnimatedHighlightStyle/index.ts:142-148). In MoneyRequestReportPreview, isReportVisible is computed from the physical width (MoneyRequestReportPreview/index.tsx:146), so on a wide screen it's true even while a wide RHP covers the pane and the pulse is still awaitingFocus. If focus takes >4s, the sweep empties the add-set → shouldHighlight flips false → the focus listener returns without playing. The row stays revealed (so the PR's "still highlighted when you come back" mostly holds), but the one-shot pulse never fires. MoneyRequestReportActionsList is not affected — there isReportVisible tracks the wide-RHP-adjusted narrow value, which aligns with the pulse's deferral.
Repro to confirm: on a wide viewport, add a 2nd expense to a report whose preview is covered by a wide RHP, wait >4s, then focus it — is the flash lost?

2. 60s freshness window silently drops a legitimately-delayed highlight (behavior change vs main, intended tradeoff)
Marks are stamped optimistically at expense-creation time; the selector expires any mark older than PENDING_TRANSACTION_FRESHNESS_WINDOW (60s) (ReportMetaData.ts:64-67). If a user creates a 2nd expense and doesn't open the target report within 60s (locks phone, gets distracted), the highlight is dropped — on main there was no window, so it showed whenever the report was eventually opened. Slow API does not trigger this (the optimistic mark persists regardless of latency); only wall-clock-before-view matters. Flagging as a deliberate design choice, not a bug.

Minor / suggestions

Cold-cache 1→2 marking depends on callers pre-incrementing transactionCount. When the report's transactions aren't cached, the "does this add make the report multi-transaction" check falls back to the server count that callers pre-increment (MoneyRequestBuilder.ts:698-704). A caller passing a stale count on a cold cache would miss the mark. Worth a unit test for the cold-cache path.
Asymmetric timer cleanup. The rail-sweep effect schedules a setTimeout with no cleanup (useNewTransactions.ts:117-123) while the sibling latch-window effect returns clearTimeout. The scheduledSweeps ref prevents double-deletes, so it's safe, but clearing it on cleanup would keep the two 4s windows in sync and reduce the surface for finding Some initial fixes and code style updates #1.
Deferred unmark on RHP unmount uses Promise.resolve().then(unmark) (microtask) in useRHPWidth; on a same-report re-navigation the microtask could theoretically clear the width hint before the replacing screen consumes it. Worst case is a one-frame narrower render, never a stuck-wide panel — noting for completeness.

Claims I verified as SOLID (no defect)

Marking / storage shape

Old-shape Onyx entries ({"123": true}) are parsed to undefined and swept, never crashed on — "ignored rather than read" is accurate and safe; no migration needed.
Cleanup is a real write in a useEffect/setTimeout, not inside the selector (selector is pure).
Timestamps use Date.now() (ms) on both write and read; clock-skew (age < 0) is explicitly swept.
Per-write keying (transactionID:flaggedAt) means a late sweep of an old instance can't wipe a newer mark; the selector keeps the newest instance per transaction.
Marking consolidation preserved every flow: the removed imperative marks in Split/TrackExpense/useExpenseSubmission (per-diem) are all covered by the builder's broadened transactionCountAfterAdd >= 2 condition. isOneToTwoTransactionTransition is fully removed with zero remaining references.

Wide-RHP width model

getVisibleRHPKeys(state, allWideRHPKeys, allSuperWideRHPKeys) and getIsRHPDisplayedBelow(focusedRouteKey, visibleSuperWide, visibleWide) argument orders are correct at every caller — no wide/super-wide swap.
The "closing panel keeps its width" fallback (visibleRHPKeys.has(key) || !keysInState.has(key)) is self-healing: a still-mounted-but-covered screen stays in keysInState (full recursive traversal) → correctly narrow; only a screen that left the tree entirely (dismiss in flight) holds width, and removeRHPRouteKey drops it on unmount. No "pin wide forever" and no unbounded registration growth.
Tab-change clearing is now automatic via render-time derivation (a fullscreen navigator covering the RHP yields undefined last-key → empty), reproducing the removed manual syncRHPKeys/clearWideRHPKeys. The four removed API functions have zero stragglers.
useSyncExternalStore returns a primitive width → stable snapshot, no tearing/loops; useLayoutEffect flips width before paint (no flash).
shouldUseNarrowLayoutIgnoringWideRHP web/native parity is correct; ScreenWrapper's aliasing is behavior-preserving and additive; removing the eslint-disable is safe (the rule only fires on a literal useResponsiveLayout callee).

Animation

Highlight is keyed by transactionID end-to-end (not list index), and useNewTransactions reuses the same latched-add-set reference across a reorder, so a re-sort doesn't misfire or restart the window.
No repeated-flash-on-every-refocus (the focus listener unsubscribes and resets phase on first fire); no "target computed before row exists" race; reanimated shared-value lifecycle is clean; render-phase setState guards converge.

_{Automated review — three focused passes over the marking, wide-RHP, and animation subsystems, with adversarial verification. Findings #1 and #3 are worth a quick manual/unit check; the rest is FYI.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1d40ac7687

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-08-17T11:40:57Z

        selector: pendingNewTransactionIDsSelector,
    });
-    const newTransactions = useNewTransactions(reportLoadingState?.hasOnceLoadedReportActions, reportTransactions, pendingNewTransactionIDs, reportIDFromRoute, isFocused);
+    const newTransactions = useNewTransactions(reportLoadingState?.hasOnceLoadedReportActions, reportTransactions, pendingNewTransactionIDs, reportIDFromRoute, isReportVisible);


Avoid consuming highlights in covered desktop reports

When a desktop report remains mounted after the user switches to another fullscreen tab, shouldUseNarrowLayout is false, so isReportVisible remains true even though isFocused is false. Passing that value here starts the four-second sweep and the highlight animation while the report is completely covered; returning after the timer therefore shows no highlight. The same regression exists in MoneyRequestReportPreview, so visibility should distinguish a report exposed behind an RHP from one covered by a fullscreen navigator.

Useful? React with 👍 / 👎.

TaduJR added 20 commits July 15, 2026 23:15

refactor: harden the new-transaction highlight rail and consolidate i…

57a0673

…ts legacy mechanisms

Merge branch 'main' of https://github.com/TaduJR/App into refactor-Re…

5b2d4f9

…ports-newTransactionHighlight-and-RHPLayout-followups # Conflicts: # src/selectors/ReportMetaData.ts

Merge branch 'main' of https://github.com/TaduJR/App into refactor-Re…

6333557

…ports-newTransactionHighlight-and-RHPLayout-followups

fix: new-transaction highlight edge cases and narrow WideRHP subscrip…

a2522ea

…tions

refactor: scope the rail deletion guard per report and release it whe…

61a3e95

…n a flag clears

fix: identify rail flags by stamp so a sweep clears only what it sche…

9b3e869

…duled

Merge branch 'main' of https://github.com/TaduJR/App into refactor-Re…

79d7f6a

…ports-newTransactionHighlight-and-RHPLayout-followups

fix: key rail flags by instance so clearing one cannot race a re-flag

9576399

refactor: derive the visible RHP keys instead of syncing them by hand

dc3da32

fix: slice the RHP stack by route order, not by extracted key order

a5fdb3c

Merge branch 'main' of https://github.com/TaduJR/App into refactor-Re…

ed70220

…ports-newTransactionHighlight-and-RHPLayout-followups

fix: identify what a window latched, and hold a dismissing RHP's width

58a2bfe

Merge branch 'main' of https://github.com/TaduJR/App into refactor-Re…

513945a

…ports-newTransactionHighlight-and-RHPLayout-followups

Merge branch 'main' of https://github.com/TaduJR/App into refactor-Re…

fda9ced

…ports-newTransactionHighlight-and-RHPLayout-followups # Conflicts: # src/selectors/ReportMetaData.ts

fix: hold a dismissing screen's width, and cover the hooks jest could…

8d40cbc

… not reach

fix: bound a width hint's life again, and stop the pulse hopping twice

7b780ff

fix: keep a highlight through a re-sort, and stop notifying on every …

a51d871

…nav event

fix: make the settled latch follow the loaded flag, not snapshot it

11d01fc

test: give the 1→2 rail test a report the expense can be added to

71b330f

TaduJR requested review from a team as code owners August 17, 2026 05:59

melvin-bot Bot assigned TaduJR Aug 17, 2026

melvin-bot Bot requested a review from abzokhattab August 17, 2026 05:59

melvin-bot Bot requested review from garrettmknight and removed request for a team August 17, 2026 05:59

TaduJR marked this pull request as draft August 17, 2026 06:00

chatgpt-codex-connector Bot reviewed Aug 17, 2026

View reviewed changes

Comment thread src/selectors/ReportMetaData.ts

Comment thread src/components/WideRHPContextProvider/useRHPWidth/index.ts

github-actions Bot reviewed Aug 17, 2026

View reviewed changes

Comment thread src/components/WideRHPContextProvider/useRHPWidth/index.ts Outdated

github-actions Bot reviewed Aug 17, 2026

View reviewed changes

Comment thread src/libs/PendingNewTransactionFlags.ts

fix: release the width floor once the caller reaches it

1d40ac7

TaduJR marked this pull request as ready for review August 17, 2026 11:36

chatgpt-codex-connector Bot reviewed Aug 17, 2026

View reviewed changes

Navigation Menu

Uh oh!

refactor: the new-transaction highlight rail and the wide RHP width model - #98744

refactor: the new-transaction highlight rail and the wide RHP width model#98744
TaduJR wants to merge 21 commits into
Expensify:mainfrom
TaduJR:refactor-Reports-newTransactionHighlight-and-RHPLayout-followups

TaduJR commented Aug 17, 2026 •

edited

Loading

Uh oh!

melvin-bot Bot commented Aug 17, 2026

Uh oh!

codecov Bot commented Aug 17, 2026 •

edited by github-actions Bot

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TaduJR commented Aug 17, 2026

Uh oh!

chatgpt-codex-connector Bot commented Aug 17, 2026

Uh oh!

abzokhattab commented Aug 17, 2026

Uh oh!

chatgpt-codex-connector Bot commented Aug 17, 2026

Uh oh!

MelvinBot commented Aug 17, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Aug 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

TaduJR commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Aug 17, 2026

Uh oh!

codecov Bot commented Aug 17, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TaduJR commented Aug 17, 2026

Uh oh!

chatgpt-codex-connector Bot commented Aug 17, 2026

Uh oh!

abzokhattab commented Aug 17, 2026

Uh oh!

chatgpt-codex-connector Bot commented Aug 17, 2026

Uh oh!

MelvinBot commented Aug 17, 2026

PR Review — regressions, breaking changes & bugs

Worth a look before merge

Minor / suggestions

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Aug 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

TaduJR commented Aug 17, 2026 •

edited

Loading

codecov Bot commented Aug 17, 2026 •

edited by github-actions Bot

Loading