diff --git a/src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx b/src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx
new file mode 100644
index 000000000000..09bfb20b7b04
--- /dev/null
+++ b/src/components/LHNOptionsList/OptionRowLHN/OptionRow/Status.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Text from '@components/Text';
+import Tooltip from '@components/Tooltip';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import type {OptionData} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+
+type StatusProps = {
+ /** The option data for the report row. Status is only shown for 1:1 chats whose participant has set a status emoji. */
+ optionItem: OptionData;
+};
+
+function Status({optionItem}: StatusProps) {
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+ const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+
+ const emojiCode = optionItem.status?.emojiCode ?? '';
+ if (!emojiCode || !optionItem.isOneOnOneChat) {
+ return null;
+ }
+
+ const statusText = optionItem.status?.text ?? '';
+ const statusClearAfterDate = optionItem.status?.clearAfter ?? '';
+ const currentSelectedTimezone = currentUserPersonalDetails?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected;
+ const formattedDate = DateUtils.getStatusUntilDate(translate, statusClearAfterDate, optionItem?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, currentSelectedTimezone);
+ const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
+
+ return (
+
+ {emojiCode}
+
+ );
+}
+
+Status.displayName = 'OptionRow.Status';
+
+export default Status;
diff --git a/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx b/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx
index 8482d91f3435..802f88e603c0 100644
--- a/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx
@@ -4,18 +4,14 @@ import {StyleSheet, View} from 'react-native';
import Icon from '@components/Icon';
import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext';
import type {OptionRowLHNProps} from '@components/LHNOptionsList/types';
-import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
import getContextMenuAccessibilityHint from '@components/utils/getContextMenuAccessibilityHint';
import getContextMenuAccessibilityProps from '@components/utils/getContextMenuAccessibilityProps';
-import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useEnvironment from '@hooks/useEnvironment';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
-import DateUtils from '@libs/DateUtils';
import {shouldUseBoldText} from '@libs/OptionsListUtils';
import variables from '@styles/variables';
import CONST from '@src/CONST';
@@ -23,6 +19,7 @@ import DescriptiveText from './OptionRow/DescriptiveText';
import DraftIndicator from './OptionRow/DraftIndicator';
import ErrorBadge from './OptionRow/ErrorBadge';
import OnboardingBadge from './OptionRow/OnboardingBadge';
+import Status from './OptionRow/Status';
import Subtitle from './OptionRow/Subtitle';
import Title from './OptionRow/Title';
import OptionRowAvatar from './OptionRowAvatar';
@@ -41,7 +38,6 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
const {isScreenFocused} = useLHNTooltipContext();
const {translate} = useLocalize();
- const currentUserPersonalDetails = useCurrentUserPersonalDetails();
const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
const sidebarInnerRowStyle = StyleSheet.flatten(
isInFocusMode
@@ -67,14 +63,6 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
- const emojiCode = optionItem.status?.emojiCode ?? '';
- const statusText = optionItem.status?.text ?? '';
- const statusClearAfterDate = optionItem.status?.clearAfter ?? '';
- const currentSelectedTimezone = currentUserPersonalDetails?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected;
- const formattedDate = DateUtils.getStatusUntilDate(translate, statusClearAfterDate, optionItem?.timezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected, currentSelectedTimezone);
- const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
- const isStatusVisible = !!emojiCode && !!optionItem.isOneOnOneChat;
-
const subscriptAvatarBorderColor = isOptionFocused ? focusedBackgroundColor : theme.sidebar;
const accessibilityLabel = [
@@ -131,14 +119,7 @@ function OptionRowLHN({isOptionFocused = false, onSelectRow = () => {}, optionIt
testID={testID}
/>
- {isStatusVisible && (
-
- {emojiCode}
-
- )}
+