refactor: migrate RoomView to a function component

.maestro/tests/room/threads.yaml

@@ -294,6 +294,14 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'header-back'
+- extendedWaitUntil:
+    notVisible:
+      id: 'room-view-title-thread'
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: 'room-view-title-${output.room.name}'
+    timeout: 60000
 
 # should create thread delete the message and the thread show the correct number of messages
 - runFlow:

CONTEXT.md

@@ -2,18 +2,21 @@
 
 ## Rooms & Conversations
 
-| Term                | Definition                                                                                                                            | Aliases to avoid              |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
-| **Room**            | A server-side conversation container with shared state (name, type, settings)                                                         | Chat, conversation            |
-| **Subscription**    | A user's personal relationship to a Room, holding per-user state (unread count, favorite, muted, open) — never a **DDP Subscription** | Membership, room entry        |
-| **Channel**         | A public Room (type `'c'`) visible to all Workspace users                                                                             | Public room                   |
-| **Group**           | A private Room (type `'p'`) visible only to invited members                                                                           | Private room, private channel |
-| **Direct Message**  | A 1-on-1 private Room (type `'d'`) between two users                                                                                  | DM, PM, private message       |
-| **Thread**          | A branched conversation spawned from a single Message, identified by `tmid` (thread message id)                                       | Reply chain                   |
-| **Discussion**      | A separate Room spawned from a parent Room, identified by `prid` (parent room id) — unlike Threads, Discussions are full Rooms        | Sub-room, sub-channel         |
-| **Team**            | An organizational container that groups multiple Channels and users under a single entity                                             | Workspace (a different thing) |
-| **Broadcast Room**  | A Room where only authorized users can send Messages; other users can only Reply Broadcast to existing Messages                       | Broadcast channel             |
-| **Reply Broadcast** | The action of replying to a Message in a Broadcast Room when the current user cannot send regular Messages                            | Broadcast reply               |
+| Term                | Definition                                                                                                                                                                                               | Aliases to avoid              |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
+| **Room**            | A server-side conversation container with shared state (name, type, settings)                                                                                                                            | Chat, conversation            |
+| **Subscription**    | A user's personal relationship to a Room, holding per-user state (unread count, favorite, muted, open), never a **DDP Subscription**                                                                     | Membership, room entry        |
+| **Subscribed Room** | A Room the user has joined, backed by a persisted Subscription model. Detected by the presence of a Subscription record.                                                                                 | Joined room                   |
+| **Preview Mode**    | Viewing a Room without joining: no Subscription record exists and the Room data comes from navigation params or a REST lookup. Persists until the user joins. Detected by the absence of a Subscription. | —                             |
+| **Invited**         | A Room where a Subscription exists but its status is `invited` and not yet accepted. Detected by a Subscription whose status is `invited`.                                                               | —                             |
+| **Channel**         | A public Room (type `'c'`) visible to all Workspace users                                                                                                                                                | Public room                   |
+| **Group**           | A private Room (type `'p'`) visible only to invited members                                                                                                                                              | Private room, private channel |
+| **Direct Message**  | A 1-on-1 private Room (type `'d'`) between two users                                                                                                                                                     | DM, PM, private message       |
+| **Thread**          | A branched conversation spawned from a single Message, identified by `tmid` (thread message id)                                                                                                          | Reply chain                   |
+| **Discussion**      | A separate Room spawned from a parent Room, identified by `prid` (parent room id) — unlike Threads, Discussions are full Rooms                                                                           | Sub-room, sub-channel         |
+| **Team**            | An organizational container that groups multiple Channels and users under a single entity                                                                                                                | Workspace (a different thing) |
+| **Broadcast Room**  | A Room where only authorized users can send Messages; other users can only Reply Broadcast to existing Messages                                                                                          | Broadcast channel             |
+| **Reply Broadcast** | The action of replying to a Message in a Broadcast Room when the current user cannot send regular Messages                                                                                               | Broadcast reply               |
 
 ## Messages
 
@@ -125,10 +128,12 @@ A **Last Open** and a **Last Seen** are not interchangeable — conflating them
 
 Two distinct kinds of transient per-Room state drive how the Room view renders Messages. Keep them apart.
 
-| Term                     | Definition                                                                                                        |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------- |
-| **Message Action State** | The active Message Action in the Room (Quote, Edit, or React) and its target Message(s); null when none is active |
-| **Positional State**     | Which Message is highlighted and the jump or scroll position                                                      |
+| Term                               | Definition                                                                                                        | Owner                         | Scope                                |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+| **Message Action State**           | The active Message Action in the Room (Quote, Edit, or React) and its target Message(s); null when none is active | A per-Room MessageActionStore | One Room's Message rows and composer |
+| **Positional State**               | Umbrella for which Message is highlighted and the jump or scroll position. Splits across two owners (below).      | —                             | —                                    |
+| **Jump orchestration**             | Deciding to jump to a Message, resolving its anchor, and requesting the jump                                      | RoomView (`useJumpToMessage`) | The Room screen                      |
+| **Scroll and highlight execution** | Performing the scroll onto the target Message and rendering its highlight                                         | The List component            | The rendered Message list            |
 
 ### Message Actions
 
@@ -162,17 +167,19 @@ A **Message Action** is the active mode on a Message in the Room view. The three
 
 ## Omnichannel / Livechat
 
-| Term                   | Definition                                                                                           | Aliases to avoid             |
-| ---------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------- |
-| **Omnichannel Room**   | A customer-service Room (type `'l'`) connecting a Visitor to an Agent                                | Livechat room, support chat  |
-| **Visitor**            | An external customer who initiates an Omnichannel conversation, identified by a unique token         | Client, customer, end-user   |
-| **Agent**              | A User designated to handle Omnichannel conversations, with `statusLivechat` (available/unavailable) | Support agent, operator, rep |
-| **Inquiry**            | A queued Omnichannel request waiting to be picked up or routed to an Agent                           | Queue item, ticket           |
-| **Department**         | An organizational unit that groups Agents for Omnichannel routing                                    | Team (ambiguous), group      |
-| **Omnichannel Source** | How an Omnichannel conversation was initiated (widget, email, sms, app, api)                         | Channel origin               |
-| **Served By**          | The Agent currently assigned to handle an Omnichannel Room                                           | Assigned agent, handler      |
-| **On Hold**            | An Omnichannel Room temporarily paused by the Agent                                                  | Paused, suspended            |
-| **Transfer**           | Moving an Omnichannel Room to a different Agent or Department                                        | Forward, reassign, handoff   |
+| Term                   | Definition                                                                                                    | Aliases to avoid                  |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| **Omnichannel Room**   | A customer-service Room (type `'l'`) connecting a Visitor to an Agent                                         | Livechat room, support chat       |
+| **Visitor**            | An external customer who initiates an Omnichannel conversation, identified by a unique token                  | Client, customer, end-user        |
+| **Agent**              | A User designated to handle Omnichannel conversations, with `statusLivechat` (available/unavailable)          | Support agent, operator, rep      |
+| **Inquiry**            | A queued Omnichannel request waiting to be picked up or routed to an Agent                                    | Queue item, ticket                |
+| **Department**         | An organizational unit that groups Agents for Omnichannel routing                                             | Team (ambiguous), group           |
+| **Omnichannel Source** | How an Omnichannel conversation was initiated (widget, email, sms, app, api)                                  | Channel origin                    |
+| **Served By**          | The Agent currently assigned to handle an Omnichannel Room                                                    | Assigned agent, handler           |
+| **On Hold**            | An Omnichannel Room temporarily paused by the Agent                                                           | Paused, suspended                 |
+| **Transfer**           | Moving an Omnichannel Room to a different Agent or Department                                                 | Forward, reassign, handoff        |
+| **Routing Config**     | Per-server Omnichannel routing settings that say whether Agents may Return to Queue and see the Inquiry queue | Livechat config, routing settings |
+| **Return to Queue**    | An Agent handing an Omnichannel Room back so it becomes an Inquiry again                                      | Return inquiry, release chat      |
 
 ## Encryption
 

app/actions/actionsTypes.ts

@@ -34,6 +34,7 @@ export const INQUIRY = createRequestTypes('INQUIRY', [
 	'QUEUE_UPDATE',
 	'QUEUE_REMOVE'
 ]);
+export const ROUTING_CONFIG = createRequestTypes('ROUTING_CONFIG');
 export const APP = createRequestTypes('APP', [
 	'START',
 	'READY',

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -12,7 +12,8 @@ import { mockedStore } from '../../reducers/mockedStore';
 import { type IPermissionsState } from '../../reducers/permissions';
 import { type IMessage, type IShareAttachment, type TMessageActionState } from '../../definitions';
 import { colors } from '../../lib/constants/colors';
-import { type IRoomContext, RoomContext } from '../../views/RoomView/context';
+import { type ComposerState } from '../../views/RoomView/definitions';
+import { ComposerProvider } from '../../views/RoomView/stores/ComposerStore';
 import { MessageActionProvider } from '../message/stores/MessageActionStore';
 import * as EmojiKeyboardHook from './hooks/useEmojiKeyboard';
 import { initStore } from '../../lib/store/auxStore';
@@ -122,20 +123,20 @@ const Render = ({
 	action,
 	children
 }: {
-	context?: Partial<IRoomContext>;
+	context?: Partial<ComposerState>;
 	action?: TMessageActionState;
 	children?: ReactElement;
 }) => (
 	<Provider store={mockedStore}>
 		<MessageActionProvider initialAction={action}>
-			<RoomContext.Provider value={{ ...initialContext, ...context }}>
+			<ComposerProvider {...initialContext} {...context}>
 				<MessageComposerContainer>
 					<>
 						<ComposerAttachments />
 						{children}
 					</>
 				</MessageComposerContainer>
-			</RoomContext.Provider>
+			</ComposerProvider>
 		</MessageActionProvider>
 	</Provider>
 );

app/containers/MessageComposer/MessageComposer.tsx

@@ -4,8 +4,13 @@ import { useBackHandler } from '@react-native-community/hooks';
 import { Q } from '@nozbe/watermelondb';
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
-import { useRoomContext } from '../../views/RoomView/context';
-import { useMessageAction } from '../message/stores/MessageActionStore';
+import {
+	useComposerRid,
+	useComposerSharing,
+	useComposerStoreApi,
+	useComposerTmid
+} from '../../views/RoomView/stores/ComposerStore';
+import { useMessageActionKind, useMessageActionStoreApi } from '../message/stores/MessageActionStore';
 import { Autocomplete } from './components';
 import { MIN_HEIGHT } from './constants';
 import {
@@ -53,8 +58,12 @@ export const MessageComposer = ({
 	});
 	const contentHeight = useSharedValue(MIN_HEIGHT);
 	useCloseKeyboardWhenOrientationChanges();
-	const { rid, tmid, sharing, editRequest, onSendMessage, setQuotesAndText } = useRoomContext();
-	const action = useMessageAction();
+	const rid = useComposerRid();
+	const tmid = useComposerTmid();
+	const sharing = useComposerSharing();
+	const composerStore = useComposerStoreApi();
+	const messageActionStore = useMessageActionStoreApi();
+	const actionKind = useMessageActionKind();
 	const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
 	const { showEmojiKeyboard, showEmojiSearchbar, openEmojiSearchbar, resetKeyboard, keyboardHeight } = useEmojiKeyboard();
 	const { setAlsoSendThreadToChannel, setAutocompleteParams, clearAttachments } = useMessageComposerApi();
@@ -74,9 +83,9 @@ export const MessageComposer = ({
 		return false;
 	});
 
-	const closeEmojiKeyboardAndAction = (action?: Function, params?: any) => {
+	const closeEmojiKeyboardAndAction = (onClosed?: Function, params?: any) => {
 		resetKeyboard();
-		action && action(params);
+		onClosed?.(params);
 	};
 
 	useImperativeHandle(forwardedRef, () => ({
@@ -94,6 +103,11 @@ export const MessageComposer = ({
 	const handleSendMessage = async () => {
 		if (!rid) return;
 
+		const { editRequest, onSendMessage, setQuotesAndText } = composerStore.getState();
+		const { action } = messageActionStore.getState();
+		const editingMessageId = action?.kind === 'edit' ? action.messageId : undefined;
+		const quotedMessageIds = action?.kind === 'quote' ? action.messageIds : [];
+
 		if (alsoSendThreadToChannel) {
 			setAlsoSendThreadToChannel(false);
 		}
@@ -108,22 +122,22 @@ export const MessageComposer = ({
 
 		const textFromInput = composerInputComponentRef.current.getTextAndClear();
 
-		if (action?.kind === 'edit') {
+		if (editingMessageId) {
 			const updatedAttachments = attachments.length
 				? attachments.map(({ description, altText, fileId, filename }) =>
 						altTextSupported ? { description: altText || '', fileId, filename } : { description: description || '' }
 					)
 				: undefined;
-			editRequest?.({ id: action.messageId, msg: textFromInput, rid, attachments: updatedAttachments });
+			editRequest?.({ id: editingMessageId, msg: textFromInput, rid, attachments: updatedAttachments });
 			clearAttachments();
 			return;
 		}
 
 		if (attachments.length) {
 			let quotedMessage: string | undefined;
 
-			if (action?.kind === 'quote') {
-				quotedMessage = await prepareQuoteMessage(textFromInput, action.messageIds, tmid);
+			if (quotedMessageIds.length) {
+				quotedMessage = await prepareQuoteMessage(textFromInput, quotedMessageIds, tmid);
 			}
 
 			try {
@@ -146,8 +160,8 @@ export const MessageComposer = ({
 			}
 		}
 
-		if (action?.kind === 'quote') {
-			const quoteMessage = await prepareQuoteMessage(textFromInput, action.messageIds, tmid);
+		if (quotedMessageIds.length) {
+			const quoteMessage = await prepareQuoteMessage(textFromInput, quotedMessageIds, tmid);
 			onSendMessage?.(quoteMessage);
 			return;
 		}
@@ -245,7 +259,7 @@ export const MessageComposer = ({
 			}}>
 			<MessageComposerContent
 				recordingAudio={recordingAudio}
-				action={action?.kind ?? null}
+				action={actionKind}
 				showEmojiSearchbar={showEmojiSearchbar}
 				composerInputComponentRef={composerInputComponentRef}
 				composerInputRef={composerInputRef}

app/containers/MessageComposer/MessageComposerContainer.tsx

@@ -4,9 +4,12 @@ import { MessageComposerProvider } from './context';
 import { type IMessageComposerContainerProps, type IMessageComposerRef } from './interfaces';
 import { MessageComposer } from './MessageComposer';
 import { EmojiKeyboardProvider } from './hooks/useEmojiKeyboard';
+import { ComposerAttachments } from './components/Attachments/ComposerAttachments';
+
+const defaultChildren = <ComposerAttachments />;
 
 export const MessageComposerContainer = forwardRef<IMessageComposerRef, IMessageComposerContainerProps>(
-	({ children }, ref): ReactElement => {
+	({ children = defaultChildren }, ref): ReactElement => {
 		return (
 			<MessageComposerProvider>
 				<EmojiKeyboardProvider>

app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap

@@ -9599,7 +9599,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
         borderless={true}
         collapsable={false}
         delayLongPress={600}
-        handlerTag={11}
+        handlerTag={-1}
         handlerType="NativeViewGestureHandler"
         hitSlop={
           {