feat: presence sync

app/containers/RoomHeader/RoomHeader.stories.tsx

@@ -100,3 +100,61 @@ export const Themes = () => (
 		<ThemeStory theme='black' />
 	</>
 );
+
+export const DM_Status = () => {
+	const futureExpiry = '2030-06-15T19:00:00.000Z';
+	const now = new Date().getTime();
+	const hourLaterExpiry = new Date(now + 3600000).toISOString();
+	const expiredExpiry = new Date(now - 3600000).toISOString();
+	return (
+		<>
+			<HeaderExample
+				title={() => <RoomHeader title='John Doe' type='d' roomUserId='user1' subtitle='Online' status='online' />}
+			/>
+			<HeaderExample title={() => <RoomHeader title='John Doe' type='d' roomUserId='user2' subtitle='Away' status='away' />} />
+			<HeaderExample title={() => <RoomHeader title='John Doe' type='d' roomUserId='user3' subtitle='Busy' status='busy' />} />
+			<HeaderExample
+				title={() => <RoomHeader title='John Doe' type='d' roomUserId='user4' subtitle='Offline' status='offline' />}
+			/>
+			<HeaderExample
+				title={() => <RoomHeader title='John Doe' type='d' roomUserId='user5' subtitle='In a meeting' status='online' />}
+			/>
+			<HeaderExample
+				title={() => (
+					<RoomHeader
+						title='John Doe'
+						type='d'
+						roomUserId='user6'
+						subtitle='In a meeting'
+						status='online'
+						statusExpiresAt={futureExpiry}
+					/>
+				)}
+			/>
+			<HeaderExample
+				title={() => (
+					<RoomHeader
+						title='John Doe'
+						type='d'
+						roomUserId='user9'
+						subtitle='having lunch (clock icon should be visible)'
+						status='away'
+						statusExpiresAt={hourLaterExpiry}
+					/>
+				)}
+			/>
+			<HeaderExample
+				title={() => (
+					<RoomHeader
+						title='John Doe'
+						type='d'
+						roomUserId='user8'
+						subtitle='In a meeting (past expiry — clock icon should be hidden)'
+						status='online'
+						statusExpiresAt={expiredExpiry}
+					/>
+				)}
+			/>
+		</>
+	);
+};

app/containers/RoomHeader/RoomHeader.test.tsx

@@ -1,4 +1,7 @@
 import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
 import * as stories from './RoomHeader.stories';
 
+jest.useFakeTimers();
+jest.setSystemTime(new Date('2026-06-15T12:00:00.000Z'));
+
 generateSnapshots(stories);

app/containers/RoomHeader/RoomHeader.tsx

@@ -9,7 +9,9 @@ import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
 import { MarkdownPreview } from '../markdown';
 import RoomTypeIcon from '../RoomTypeIcon';
+import { CustomIcon } from '../CustomIcon';
 import { type TUserStatus, type IOmnichannelSource, type ISubscription } from '../../definitions';
+import { formatStatusExpiry } from '../../lib/methods/helpers/formatStatusExpiry';
 import { useTheme } from '../../theme';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import useStatusAccessibilityLabel from '../../lib/hooks/useStatusAccessibilityLabel';
@@ -45,12 +47,16 @@ const styles = StyleSheet.create({
 	},
 	typingUsers: {
 		...sharedStyles.textSemibold
+	},
+	clockIcon: {
+		marginRight: 4
 	}
 });
 
 type TRoomHeaderSubTitle = {
 	usersTyping: IUsersTyping;
 	subtitle?: string;
+	formattedStatusExpiry?: string;
 	renderFunc?: () => ReactElement;
 	scale: number;
 };
@@ -66,6 +72,7 @@ type TRoomHeaderHeaderTitle = {
 interface IRoomHeader {
 	title?: string;
 	subtitle?: string;
+	statusExpiresAt?: string;
 	type: string;
 	width: number;
 	height: number;
@@ -87,7 +94,7 @@ interface IRoomHeader {
 
 type IRoomHeaderProps = IRoomHeader;
 
-const SubTitle = memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
+const SubTitle = memo(({ usersTyping, subtitle, formattedStatusExpiry, renderFunc, scale }: TRoomHeaderSubTitle) => {
 	const { colors } = useTheme();
 	const fontSize = getSubTitleSize(scale);
 	// typing
@@ -113,6 +120,14 @@ const SubTitle = memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeader
 
 	// subtitle
 	if (subtitle) {
+		if (formattedStatusExpiry) {
+			return (
+				<View style={styles.titleContainer}>
+					<CustomIcon name='clock' size={fontSize} color={colors.fontSecondaryInfo} style={styles.clockIcon} />
+					<MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />
+				</View>
+			);
+		}
 		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;
 	}
 
@@ -138,6 +153,7 @@ const HeaderTitle = memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeade
 const Header = ({
 	title,
 	subtitle,
+	statusExpiresAt,
 	parentTitle,
 	type,
 	status,
@@ -173,8 +189,15 @@ const Header = ({
 	// Only move focus to the header for accessibility navigation (screen reader or physical
 	// keyboard); regular touch users shouldn't have focus yanked onto the header on room open.
 	const autoFocusHeader = useIsAccessibilityNavigationEnabled();
+	const formattedStatusExpiry = formatStatusExpiry(statusExpiresAt);
 	const subtitleAccessibilityLabel = tmid ? parentTitle : subtitle;
-	const accessibilityLabel = `${statusAccessibilityLabel} ${title} ${subtitleAccessibilityLabel || ''}.`;
+	const fullSubtitleAccessibilityLabel = formattedStatusExpiry
+		? `${subtitleAccessibilityLabel || ''}, ${formattedStatusExpiry}`
+		: subtitleAccessibilityLabel || '';
+	const accessibilityLabel =
+		type === 'd' && subtitleAccessibilityLabel === statusAccessibilityLabel
+			? `${title}. ${fullSubtitleAccessibilityLabel}.`
+			: `${statusAccessibilityLabel} ${title} ${fullSubtitleAccessibilityLabel}.`;
 
 	if (!portrait && !tmid && !isMasterDetail) {
 		if (usersTyping.length > 0 || subtitle) {
@@ -231,7 +254,13 @@ const Header = ({
 					)}
 					<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} testID={testID} />
 				</View>
-				<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} renderFunc={renderFunc} scale={scale} />
+				<SubTitle
+					usersTyping={tmid ? [] : usersTyping}
+					subtitle={subtitle}
+					formattedStatusExpiry={formattedStatusExpiry}
+					renderFunc={renderFunc}
+					scale={scale}
+				/>
 			</TouchableOpacity>
 		</KeyboardFocusView>
 	);

app/containers/RoomHeader/RoomHeaderContainer.test.tsx

@@ -0,0 +1,167 @@
+import { type ReactNode } from 'react';
+import { render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import { mockedStore } from '../../reducers/mockedStore';
+import { setActiveUsers } from '../../actions/activeUsers';
+import { connectSuccess, connectRequest, disconnect } from '../../actions/connect';
+import { initStore } from '../../lib/store/auxStore';
+import { selectServerSuccess } from '../../actions/server';
+import RoomHeaderContainer from './index';
+
+const mockChild = jest.fn<any, [Record<string, unknown>]>(() => null);
+jest.mock('./RoomHeader', () => ({
+	__esModule: true,
+	default: (props: Record<string, unknown>) => {
+		mockChild(props);
+		return null;
+	}
+}));
+
+const Wrapper = ({ children }: { children: ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
+
+const defaultProps = {
+	title: 'John Doe',
+	type: 'd',
+	roomUserId: 'user-123',
+	onPress: jest.fn()
+};
+
+const renderContainer = (props: Record<string, unknown> = {}) =>
+	render(<RoomHeaderContainer {...defaultProps} {...props} />, { wrapper: Wrapper });
+
+describe('RoomHeaderContainer', () => {
+	beforeAll(() => {
+		initStore(mockedStore);
+	});
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockedStore.dispatch(disconnect());
+	});
+
+	const connect = () => {
+		mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '6.0.0', name: 'Test' }));
+		mockedStore.dispatch(connectSuccess());
+	};
+
+	it('should pass subtitle as Connecting when meteor is connecting for non-DM room', () => {
+		mockedStore.dispatch(connectRequest());
+		mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '6.0.0', name: 'Test' }));
+
+		renderContainer({ type: 'c', roomUserId: undefined });
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Connecting...');
+	});
+
+	it('should pass subtitle as Waiting for network... when not connected for non-DM room', () => {
+		mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '6.0.0', name: 'Test' }));
+
+		renderContainer({ type: 'c', roomUserId: undefined });
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Waiting for network...');
+	});
+
+	it('should pass presence status for DM room when connected and activeUser exists', () => {
+		connect();
+		mockedStore.dispatch(
+			setActiveUsers({ 'user-123': { status: 'online', statusText: 'Working from home', statusExpiresAt: undefined } })
+		);
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Working from home');
+		expect(props.type).toBe('d');
+	});
+
+	it('should pass statusExpiresAt for DM room when activeUser has it', () => {
+		connect();
+		mockedStore.dispatch(
+			setActiveUsers({
+				'user-123': { status: 'away', statusText: 'In a meeting', statusExpiresAt: '2026-06-20T13:00:00.000Z' }
+			})
+		);
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('In a meeting');
+		expect(props.statusExpiresAt).toBe('2026-06-20T13:00:00.000Z');
+	});
+
+	it('should use presence label when statusText is empty', () => {
+		connect();
+		mockedStore.dispatch(setActiveUsers({ 'user-123': { status: 'busy', statusText: '', statusExpiresAt: undefined } }));
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Busy');
+	});
+
+	it('should not pass statusExpiresAt for non-DM room', () => {
+		connect();
+		mockedStore.dispatch(
+			setActiveUsers({ 'user-123': { status: 'away', statusText: 'Away', statusExpiresAt: '2026-06-20T13:00:00.000Z' } })
+		);
+
+		renderContainer({ type: 'c', roomUserId: undefined });
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.statusExpiresAt).toBeUndefined();
+	});
+
+	it('should pass subtitleProp when connected and no activeUser', () => {
+		connect();
+
+		renderContainer({ subtitle: 'Custom subtitle', roomUserId: undefined, type: 'c' });
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Custom subtitle');
+	});
+
+	it('should pass roomUserId to RoomHeader', () => {
+		connect();
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.roomUserId).toBe('user-123');
+	});
+
+	it('should handle activeUser with offline status', () => {
+		connect();
+		mockedStore.dispatch(setActiveUsers({ 'user-123': { status: 'offline', statusText: '', statusExpiresAt: undefined } }));
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Offline');
+	});
+
+	it('should use statusText even when status is undefined', () => {
+		connect();
+		mockedStore.dispatch(
+			setActiveUsers({
+				'user-123': { status: undefined, statusText: 'Custom text', statusExpiresAt: undefined } as any
+			})
+		);
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.subtitle).toBe('Custom text');
+	});
+
+	it('should pass onPress to RoomHeader', () => {
+		connect();
+
+		renderContainer();
+
+		const props = mockChild.mock.calls[0][0];
+		expect(props.onPress).toBe(defaultProps.onPress);
+	});
+});