From a0259f2fcd62cb7e3b7b588bbe4a44e5fcf533af Mon Sep 17 00:00:00 2001
From: DylanDylann <dylandylan9112@gmail.com>
Date: Tue, 28 Apr 2026 10:45:33 +0700
Subject: [PATCH 1/2] move Offline block to outside

---
 .../ReportActionCompose/ComposerBox.tsx       | 31 ++++++----------
 .../ReportActionCompose.tsx                   | 36 ++++++++++++-------
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
index f4bc3fc4d2c6..a0b5da13bc30 100644
--- a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
+++ b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
@@ -19,30 +19,21 @@ function ComposerBox({reportID, children}: ComposerBoxProps) {
     const {containerRef} = useComposerMeta();
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
-
-    const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report);
     const shouldUseFocusedColor = !isBlockedFromConcierge && isFocused;
 
     return (
-        <OfflineWithFeedback
-            shouldDisableOpacity
-            pendingAction={pendingAction}
-            style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}
-            contentContainerStyle={isComposerFullSize ? styles.flex1 : {}}
+        <View
+            ref={containerRef}
+            style={[
+                shouldUseFocusedColor ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
+                styles.flexRow,
+                styles.chatItemComposeBox,
+                isComposerFullSize && styles.chatItemFullComposeBox,
+                !!exceededMaxLength && styles.borderColorDanger,
+            ]}
         >
-            <View
-                ref={containerRef}
-                style={[
-                    shouldUseFocusedColor ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
-                    styles.flexRow,
-                    styles.chatItemComposeBox,
-                    isComposerFullSize && styles.chatItemFullComposeBox,
-                    !!exceededMaxLength && styles.borderColorDanger,
-                ]}
-            >
-                {children}
-            </View>
-        </OfflineWithFeedback>
+            {children}
+        </View>
     );
 }
 
diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
index e0765041dedb..706901cf2e12 100644
--- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
 import OfflineIndicator from '@components/OfflineIndicator';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AgentZeroAwareTypingIndicator from './AgentZeroAwareTypingIndicator';
 import ComposerActionMenu from './ComposerActionMenu';
@@ -29,6 +31,7 @@ function ReportActionComposeInner({reportID}: ReportActionComposeProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
+    const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report);
 
     if (!report) {
         return null;
@@ -38,19 +41,26 @@ function ReportActionComposeInner({reportID}: ReportActionComposeProps) {
         <View style={[isComposerFullSize && styles.chatItemFullComposeRow]}>
             <ComposerLocalTime reportID={reportID} />
             <View style={isComposerFullSize ? styles.flex1 : {}}>
-                <ComposerDropZone reportID={reportID}>
-                    <ComposerBox reportID={reportID}>
-                        <ComposerActionMenu reportID={reportID} />
-                        <ComposerInput reportID={reportID} />
-                        <ComposerEmojiPicker reportID={reportID} />
-                        <ComposerSendButton />
-                    </ComposerBox>
-                </ComposerDropZone>
-                <ComposerFooter>
-                    {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
-                    <AgentZeroAwareTypingIndicator reportID={reportID} />
-                    <ComposerExceededLength />
-                </ComposerFooter>
+                <OfflineWithFeedback
+                    shouldDisableOpacity
+                    pendingAction={pendingAction}
+                    style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}
+                    contentContainerStyle={isComposerFullSize ? styles.flex1 : {}}
+                >
+                    <ComposerDropZone reportID={reportID}>
+                        <ComposerBox reportID={reportID}>
+                            <ComposerActionMenu reportID={reportID} />
+                            <ComposerInput reportID={reportID} />
+                            <ComposerEmojiPicker reportID={reportID} />
+                            <ComposerSendButton />
+                        </ComposerBox>
+                    </ComposerDropZone>
+                    <ComposerFooter>
+                        {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
+                        <AgentZeroAwareTypingIndicator reportID={reportID} />
+                        <ComposerExceededLength />
+                    </ComposerFooter>
+                </OfflineWithFeedback>
                 <ComposerImportedState />
             </View>
         </View>

From 1b553f3a3dd3fb3e492831077bf767f75824031c Mon Sep 17 00:00:00 2001
From: DylanDylann <dylandylan9112@gmail.com>
Date: Tue, 28 Apr 2026 10:54:42 +0700
Subject: [PATCH 2/2] remove redundant

---
 src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
index a0b5da13bc30..f374b233d08d 100644
--- a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
+++ b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext';
 
@@ -18,7 +16,6 @@ function ComposerBox({reportID, children}: ComposerBoxProps) {
     const {exceededMaxLength, isBlockedFromConcierge} = useComposerSendState();
     const {containerRef} = useComposerMeta();
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const shouldUseFocusedColor = !isBlockedFromConcierge && isFocused;
 
     return (