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)                         | Membership, room entry        |
-| **Channel**         | A public Room (type `'c'`) visible to all server 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 (ambiguous)         |
-| **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)                                                                                                   | 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 server 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 (ambiguous)         |
+| **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 | Migrated to the per-Room store as part of the Message row work |
+| **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`) | Owned by RoomView as part of the room-screen hooks migration   |
+| **Scroll and highlight execution** | Performing the scroll onto the target Message and rendering its highlight                                         | The List component            | Already shipped in the List component                          |
 
 ### Message Actions
 

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,15 @@ 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,
+	useComposerTmid,
+	useEditRequest,
+	useOnSendMessage,
+	useSetQuotesAndText
+} from '../../views/RoomView/stores/ComposerStore';
+import { useEditingMessageId, useMessageAction, useQuotedMessageIds } from '../message/stores/MessageActionStore';
 import { Autocomplete } from './components';
 import { MIN_HEIGHT } from './constants';
 import {
@@ -53,8 +60,15 @@ export const MessageComposer = ({
 	});
 	const contentHeight = useSharedValue(MIN_HEIGHT);
 	useCloseKeyboardWhenOrientationChanges();
-	const { rid, tmid, sharing, editRequest, onSendMessage, setQuotesAndText } = useRoomContext();
+	const rid = useComposerRid();
+	const tmid = useComposerTmid();
+	const sharing = useComposerSharing();
+	const editRequest = useEditRequest();
+	const onSendMessage = useOnSendMessage();
+	const setQuotesAndText = useSetQuotesAndText();
 	const action = useMessageAction();
+	const editingMessageId = useEditingMessageId();
+	const quotedMessageIds = useQuotedMessageIds();
 	const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
 	const { showEmojiKeyboard, showEmojiSearchbar, openEmojiSearchbar, resetKeyboard, keyboardHeight } = useEmojiKeyboard();
 	const { setAlsoSendThreadToChannel, setAutocompleteParams, clearAttachments } = useMessageComposerApi();
@@ -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);
+			if (quotedMessageIds.length) {
+				quotedMessage = await prepareQuoteMessage(textFromInput, quotedMessageIds);
 			}
 
 			try {
@@ -146,8 +160,8 @@ export const MessageComposer = ({
 			}
 		}
 
-		if (action?.kind === 'quote') {
-			const quoteMessage = await prepareQuoteMessage(textFromInput, action.messageIds);
+		if (quotedMessageIds.length) {
+			const quoteMessage = await prepareQuoteMessage(textFromInput, quotedMessageIds);
 			onSendMessage?.(quoteMessage);
 			return;
 		}

app/containers/MessageComposer/MessageComposerContainer.tsx

@@ -4,9 +4,10 @@ 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';
 
 export const MessageComposerContainer = forwardRef<IMessageComposerRef, IMessageComposerContainerProps>(
-	({ children }, ref): ReactElement => {
+	({ children = <ComposerAttachments /> }, ref): ReactElement => {
 		return (
 			<MessageComposerProvider>
 				<EmojiKeyboardProvider>

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

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

app/containers/MessageComposer/components/Autocomplete/Autocomplete.tsx

@@ -8,7 +8,8 @@ import { AutocompleteItem } from './AutocompleteItem';
 import { useAutocomplete } from '../../hooks';
 import { type IAutocompleteItemProps } from '../../interfaces';
 import { AutocompletePreview } from './AutocompletePreview';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useComposerRid, useUpdateAutocompleteVisible } from '../../../../views/RoomView/stores/ComposerStore';
+import { useAutocompleteA11yAnnounce } from './useAutocompleteA11yAnnounce';
 import { useStyle } from './styles';
 
 export const Autocomplete = ({
@@ -20,7 +21,10 @@ export const Autocomplete = ({
 	style: AnimatedStyle<ViewStyle>;
 	accessibilityFocusOnInput: () => void;
 }): ReactElement | null => {
-	const { rid, updateAutocompleteVisible } = useRoomContext();
+	useAutocompleteA11yAnnounce();
+
+	const rid = useComposerRid();
+	const updateAutocompleteVisible = useUpdateAutocompleteVisible();
 	const { text, type, params } = useAutocompleteParams();
 	const items = useAutocomplete({
 		rid,

app/containers/MessageComposer/components/Autocomplete/useAutocompleteA11yAnnounce.test.tsx

@@ -0,0 +1,75 @@
+import { act, renderHook } from '@testing-library/react-native';
+import { AccessibilityInfo } from 'react-native';
+import { type ReactNode } from 'react';
+
+import { useAutocompleteA11yAnnounce } from './useAutocompleteA11yAnnounce';
+import { createComposerStore, ComposerStoreContext } from '../../../../views/RoomView/stores/ComposerStore';
+import { type ComposerStore } from '../../../../views/RoomView/definitions';
+
+const externalState = {
+	rid: 'rid-1',
+	t: 'c',
+	tmid: undefined,
+	room: { rid: 'rid-1', t: 'c' },
+	sharing: false,
+	editCancel: jest.fn(),
+	editRequest: jest.fn(() => Promise.resolve()),
+	onRemoveQuoteMessage: jest.fn(),
+	onSendMessage: jest.fn(),
+	setQuotesAndText: jest.fn(),
+	getText: jest.fn(() => '')
+};
+
+const setup = () => {
+	const store: ComposerStore = createComposerStore(externalState);
+	const wrapper = ({ children }: { children: ReactNode }) => (
+		<ComposerStoreContext.Provider value={store}>{children}</ComposerStoreContext.Provider>
+	);
+	const view = renderHook(() => useAutocompleteA11yAnnounce(), { wrapper });
+	return { store, ...view };
+};
+
+describe('useAutocompleteA11yAnnounce', () => {
+	let announceSpy: jest.SpyInstance;
+
+	beforeEach(() => {
+		jest.useFakeTimers();
+		announceSpy = jest.spyOn(AccessibilityInfo, 'announceForAccessibility').mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		announceSpy.mockRestore();
+		jest.useRealTimers();
+	});
+
+	it('announces 800ms after a false→true transition', () => {
+		const { store } = setup();
+
+		act(() => store.getState().updateAutocompleteVisible(true));
+		expect(announceSpy).not.toHaveBeenCalled();
+
+		act(() => jest.advanceTimersByTime(800));
+		expect(announceSpy).toHaveBeenCalledTimes(1);
+	});
+
+	it('clears the pending timeout when visibility flips back before 800ms', () => {
+		const { store } = setup();
+
+		act(() => store.getState().updateAutocompleteVisible(true));
+		act(() => jest.advanceTimersByTime(400));
+		act(() => store.getState().updateAutocompleteVisible(false));
+
+		act(() => jest.advanceTimersByTime(800));
+		expect(announceSpy).not.toHaveBeenCalled();
+	});
+
+	it('clears the pending timeout on unmount', () => {
+		const { store, unmount } = setup();
+
+		act(() => store.getState().updateAutocompleteVisible(true));
+		unmount();
+
+		act(() => jest.advanceTimersByTime(800));
+		expect(announceSpy).not.toHaveBeenCalled();
+	});
+});

app/containers/MessageComposer/components/Autocomplete/useAutocompleteA11yAnnounce.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import I18n from '../../../../i18n';
+import { useIsAutocompleteVisible } from '../../../../views/RoomView/stores/ComposerStore';
+
+export const useAutocompleteA11yAnnounce = (): void => {
+	const isAutocompleteVisible = useIsAutocompleteVisible();
+
+	useEffect(() => {
+		if (!isAutocompleteVisible) {
+			return;
+		}
+
+		// timeout to prevent conflict with default keyboard announcement.
+		const timeout = setTimeout(() => {
+			AccessibilityInfo.announceForAccessibility(I18n.t('The_autocomplete_options_are_available_above_the_input_composer'));
+		}, 800);
+
+		return () => clearTimeout(timeout);
+	}, [isAutocompleteVisible]);
+};

app/containers/MessageComposer/components/Buttons/ActionsButton.tsx

@@ -9,10 +9,12 @@ import Navigation from '../../../../lib/navigation/appNavigation';
 import { useMasterDetail } from '../../../../lib/hooks/useMasterDetail';
 import { usePermissions } from '../../../../lib/hooks/usePermissions';
 import { useCanUploadFile, useChooseMedia } from '../../hooks';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useComposerRid, useComposerTmid, useComposerType } from '../../../../views/RoomView/stores/ComposerStore';
 
 export const ActionsButton = () => {
-	const { rid, tmid, t } = useRoomContext();
+	const rid = useComposerRid();
+	const tmid = useComposerTmid();
+	const t = useComposerType();
 	const { closeEmojiKeyboardAndAction } = useContext(MessageInnerContext);
 	const permissionToUpload = useCanUploadFile(rid);
 	const [permissionToViewCannedResponses] = usePermissions(['view-canned-responses'], rid);

app/containers/MessageComposer/components/Buttons/MicOrSendButton.tsx

@@ -7,13 +7,14 @@ import i18n from '../../../../i18n';
 import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
 import { openAppSettings } from '../../../../lib/methods/helpers/openAppSettings';
 import { useTheme } from '../../../../theme';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useComposerRid, useComposerSharing } from '../../../../views/RoomView/stores/ComposerStore';
 import { MessageInnerContext, useComposerAttachments, useMessageComposerApi, useMicOrSend } from '../../context';
 import { useCanUploadFile } from '../../hooks';
 import { BaseButton } from './BaseButton';
 
 export const MicOrSendButton = (): ReactElement | null => {
-	const { rid, sharing } = useRoomContext();
+	const rid = useComposerRid();
+	const sharing = useComposerSharing();
 	const micOrSend = useMicOrSend();
 	const attachments = useComposerAttachments();
 	const { sendMessage } = useContext(MessageInnerContext);