Decompose ReportActionComposer

[rlinoz]

POC PR #86899 showing the perf improvements of decomposing the composer.

Issue Owner

Current Issue Owner: @DylanDylann

[cristipaval]

Thanks @adhorodyski for working on this!

[cristipaval]

Not overdue, Melv. @adhorodyski is ooo today.

[adhorodyski]

I will work on a split plan for this effort so I can ship it with 5-10 smaller PRs.

[adhorodyski]

Split Plan: ReportActionCompose Decomposition

Branch: callstack-internal:decompose/report-action-composer-v2
Diff vs exfy/main: 30 files, +2,036 / -1,644

Each PR incrementally chips away at the 834-line monolith. No additive-only dead code — every PR extracts AND wires, so it's manually testable.

---

Dependency Graph

PR 1 ── Context + Provider + useComposerFocus (additive, no consumers)
  │
  ├── PR 2 ── Activity wrappers (PopoverMenu + EmojiPicker)
  │
  ├── PR 3 ── Wrap in Provider + extract Box/Footer/LocalTime/SendButton → monolith shrinks to ~650 LOC
  │     │
  │     ├── PR 4 ── Input hooks + ComposerInputWrapper → monolith shrinks to ~400 LOC
  │     │
  │     └── PR 5 ── Attachment hooks + DropZone + ActionMenu + EmojiPicker → monolith becomes 65 LOC orchestrator
  │
  └── PR 6 ── Suggestions self-subscribe + remove manual memo

After PR 1: PRs 2, 3, 6 are independent. After PR 3: PRs 4, 5 are independent (touch different sections of monolith — review in parallel, merge sequentially to avoid conflicts).

---

PR 1: ComposerContext + ComposerProvider + useComposerFocus

Files (all NEW):

• src/pages/inbox/report/ReportActionCompose/ComposerContext.ts (+152)
• src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx (+195)
• src/pages/inbox/report/ReportActionCompose/useComposerFocus.ts (+63)

Summary:

• Create 6-context architecture split by change frequency: ComposerText (hot/keystroke), ComposerState (warm/interaction), ComposerSendState (warm/validation), ComposerActions (frozen), ComposerSendActions (infrequent), ComposerMeta (frozen refs)
• ComposerProvider owns all state, validation, and wraps children in nested providers
• useComposerFocus manages focus/blur/keyboard/modal interactions
• Purely additive — no existing code touched, no consumers wired up yet. This is the one exception: context infrastructure has no UI on its own. It gets wired + tested in PR 3.

---

PR 2: Activity wrappers for PopoverMenu + EmojiPicker

Files:

• src/components/EmojiPicker/EmojiPicker.tsx (+42, -40)
• src/pages/inbox/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx (+33, -31)

Summary:

• Wrap PopoverWithMeasuredContent in EmojiPicker with <Activity mode={isVisible ? 'visible' : 'hidden'}> to skip hidden subtree reconciliation
• Wrap PopoverMenu in AttachmentPickerWithMenuItems with same pattern
• React Compiler + Activity = hidden popovers/menus don't re-render when parent state changes
• Low risk — wrapper-only, no logic changes, just indentation

Depends on: PR 1

---

PR 3: Wrap in Provider + extract Box/Footer/LocalTime/SendButton

Files:

• src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx (modify — wrap in ComposerProvider, replace inline sections with Composer.X calls, remove migrated state/logic, ~650 LOC after)
• src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx (NEW, +49)
• src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx (NEW, +38)
• src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx (NEW, +39)
• src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx (NEW, +17)
• src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx (NEW, +13)
• src/pages/inbox/report/ReportActionCompose/SendButton.tsx (+2, -2)
• tests/ui/ReportActionComposeTest.tsx (+5, -5)

Summary:

• Wrap monolith's return in <ComposerProvider reportID={reportID}> so leaf components can read from context
• Migrate state ownership: value, isFocused, isMenuVisible, validation, refs, focus handlers → all now live in ComposerProvider. Remove duplicate state from monolith.
• Replace inline render sections with Composer.X component calls:
  • ParticipantLocalTime block (line 684) → <Composer.LocalTime reportID={reportID} />
  • OfflineWithFeedback + containerRef + box styling (lines 693-703) → <Composer.Box reportID={reportID}>
  • SendButton (line 814) → <Composer.SendButton />
  • Footer section: OfflineIndicator + TypingIndicator + ExceededCommentLength (lines 817-829) → <Composer.Footer reportID={reportID} />
• Monolith still has inline: AttachmentPickerWithMenuItems, ComposerWithSuggestions, DropZone, EmojiPickerButton — these move in PRs 4+5
• Remove memo() wrapper (React Compiler handles it), remove onSubmitAction export (dead code)
• Test: remove onSubmitAction import, use keyPress instead
• Test manually: open any chat → composer renders, type message, send, verify local time shows in DMs, verify character count at limit, verify typing indicator

Depends on: PR 1

Transitional state of monolith after PR 3: ~650 LOC. ComposerProvider wraps everything. Box/Footer/LocalTime/SendButton are Composer.X calls. AttachmentPicker, Input, DropZone, EmojiPicker still inline. State reads from context hooks instead of local state.

---

PR 4: Input hooks + ComposerInputWrapper + ComposerWithSuggestions update

Files:

• src/pages/inbox/report/ReportActionCompose/useComposerSubmit.ts (NEW, +171)
• src/pages/inbox/report/ReportActionCompose/useLastEditableAction.ts (NEW, +49)
• src/pages/inbox/report/ReportActionCompose/ComposerInputWrapper.tsx (NEW, +110)
• src/pages/inbox/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx (+11, -35)
• src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx (modify — replace inline ComposerWithSuggestions block with <Composer.Input reportID={reportID} />)

Summary:

• useComposerSubmit: handles submit (text comment, attachment, task creation), self-subscribes to report/chatReport/transactions/ancestors/quickAction
• useLastEditableAction: resolves last editable action for arrow-up-to-edit shortcut
• ComposerInputWrapper: bridges context → ComposerWithSuggestions, computes inputPlaceholder (AI placeholders), calls useComposerSubmit + useAttachmentPicker
• ComposerWithSuggestions: drop props (setIsCommentEmpty, lastReportAction, didHideComposerInput), read text from useComposerText, use useLastEditableAction directly
• Replace inline ComposerWithSuggestions block (lines 733-770) in monolith with <Composer.Input />, remove submit/placeholder/lastReportAction logic from monolith
• Test manually: type message → send → verify it posts, press arrow-up → verify edit mode, verify AI placeholder in concierge-adjacent chats

Depends on: PR 3

Transitional state of monolith after PR 4: ~400 LOC. Only AttachmentPicker, DropZone, and EmojiPicker remain inline.

---

PR 5: Attachment hooks + DropZone + ActionMenu + EmojiPicker → completes rewrite

Files:

• src/pages/inbox/report/ReportActionCompose/useAttachmentPicker.ts (NEW, +100)
• src/pages/inbox/report/ReportActionCompose/useReceiptDrop.ts (NEW, +120)
• src/pages/inbox/report/ReportActionCompose/useShouldAddOrReplaceReceipt.ts (NEW, +49)
• src/pages/inbox/report/ReportActionCompose/useAttachmentUploadValidation.ts (DELETE, -220)
• src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx (NEW, +179)
• src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx (NEW, +72)
• src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx (NEW, +70)
• src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx (modify — replace remaining inline sections, monolith becomes ~65 LOC orchestrator)

Summary:

• Split monolithic useAttachmentUploadValidation (220 LOC) into 3 focused hooks
• useShouldAddOrReplaceReceipt: determines if receipt add/replace is valid
• useAttachmentPicker: file picking, cleaning, validation, preview lifecycle
• useReceiptDrop: receipt drop handling, replace vs create, money request creation
• ComposerDropZone: two-level guard (rooms/groups/invoices → SimpleDropZone, others → RichDropZone)
• ComposerActionMenu: wraps AttachmentPickerWithMenuItems, connects to context
• ComposerEmojiPicker: self-contained with cleanup on unmount/report switch
• Replace remaining inline sections in monolith:
  • AttachmentPickerWithMenuItems block → <Composer.ActionMenu reportID={reportID} />
  • DropZone blocks → <Composer.DropZone reportID={reportID}>
  • EmojiPickerButton block → <Composer.EmojiPicker reportID={reportID} />
• Delete useAttachmentUploadValidation, delete remaining attachment/dropzone/emoji logic from monolith
• After this PR, the monolith IS the 65-line orchestrator — no separate cleanup PR needed
• Test manually: drag file onto chat → verify drop zone, use + menu → attach file, open emoji picker → select emoji, verify receipt replace works on expense threads

Depends on: PR 3 (can be reviewed in parallel with PR 4, merge sequentially)

---

PR 6: SuggestionMention + SuggestionEmoji self-subscribe, remove manual memo + prop drilling

Files:

• src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx (~+300, -320)
• src/pages/inbox/report/ReportActionCompose/SuggestionEmoji.tsx (~+100, -115)
• src/pages/inbox/report/ReportActionCompose/Suggestions.tsx (~+25, -40)
• src/pages/inbox/report/ReportActionItemMessageEdit.tsx (+0, -5)
• src/pages/inbox/report/PureReportActionItem.tsx (+0, -1)
• tests/unit/SuggestionMentionTest.tsx (+0, -2)

Summary:

• SuggestionMention: self-subscribe to currentReport via useOnyx, derive policyID/isGroupPolicyReport locally instead of receiving as props; replace all useCallback/useMemo with plain functions (React Compiler handles memoization)
• SuggestionEmoji: same manual memo removal — useCallback → plain functions
• Suggestions: drop isGroupPolicyReport/policyID from props type, stop forwarding to children
• PureReportActionItem: stop passing policyID to ReportActionItemMessageEdit
• ReportActionItemMessageEdit: remove policyID prop, stop passing to Suggestions
• Risk: MEDIUM — SuggestionMention is 622 lines of churn due to unwrapping useCallback/useMemo
• Test manually: type @ in composer → verify mention suggestions appear and filter correctly, type : → verify emoji suggestions, do the same in edit mode (click pencil on a sent message)

Depends on: PR 1 (for SuggestionsRef type import from ComposerContext)

---

Summary

PR	Title	Files	+/-	Risk	Depends	Monolith after
1	Context + Provider + useComposerFocus	3	+410	Low (additive)	—	834 LOC (unchanged)
2	Activity wrappers	2	+75, -70	Low	PR 1	834 LOC (unchanged)
3	Provider wrap + Box/Footer/LocalTime/SendButton	8	+205, -815	Medium	PR 1	~650 LOC
4	Input hooks + ComposerInputWrapper + CWS update	5	+340, -35	Medium	PR 3	~400 LOC
5	Attachment hooks + DropZone + ActionMenu + EmojiPicker	8	+590, -220	Medium	PR 3	65 LOC (done)
6	Suggestions self-subscribe + remove memo	6	+425, -475	Medium	PR 1	—

Total: 6 PRs, 30 files, +2,036 / -1,644

After PR 1: PRs 2, 3, 6 are independent. After PR 3: PRs 4, 5 are independent (review in parallel, merge sequentially).