refactor: Consolidate icon imports across components and streamline import statements for improved readability

src/app/features/room/RoomInput.tsx

@@ -12,24 +12,9 @@ import { isKeyHotkey } from 'is-hotkey';
 import { EventType, IContent, MsgType, RelationType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { Transforms, Editor } from 'slate';
-import {
-  Box,
-  Dialog,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  PopOut,
-  Scroll,
-  Text,
-  color,
-  config,
-  toRem,
-} from 'folds';
+import { Box, Dialog, IconButton, Line, Overlay, OverlayBackdrop, OverlayCenter, PopOut, Scroll, Text, color, config, toRem } from 'folds';
 
+import { Icon, Icons } from '../../components/icons';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import {
   CustomEditor,
@@ -131,10 +116,32 @@ interface RoomInputProps {
   room: Room;
   /** When provided, all messages are sent as replies in this thread. */
   threadRootId?: string;
+  /** Thread parent for nested replies (no reply preview). */
+  threadReplyToEventId?: string;
+  /** Hide the "replying to" banner (forum thread composers). */
+  hideReplyPreview?: boolean;
+  /** Hide the thread badge in the reply preview (forum thread composers). */
+  hideReplyThreadIndicator?: boolean;
+  /** Optional highlight style for the reply preview (e.g. left border). */
+  replyPreviewHighlightClassName?: string;
   onMessageSent?: () => void;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
-  ({ editor, fileDropContainerRef, roomId, room, threadRootId, onMessageSent }, ref) => {
+  (
+    {
+      editor,
+      fileDropContainerRef,
+      roomId,
+      room,
+      threadRootId,
+      threadReplyToEventId,
+      hideReplyPreview,
+      hideReplyThreadIndicator,
+      replyPreviewHighlightClassName,
+      onMessageSent,
+    },
+    ref
+  ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
@@ -440,11 +447,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           content['m.relates_to'].is_falling_back = false;
         }
       } else if (threadRootId) {
+        const inReplyToEventId = threadReplyToEventId ?? threadRootId;
         content['m.relates_to'] = {
           rel_type: RelationType.Thread,
           event_id: threadRootId,
-          is_falling_back: true,
-          'm.in_reply_to': { event_id: threadRootId },
+          is_falling_back: inReplyToEventId === threadRootId,
+          'm.in_reply_to': { event_id: inReplyToEventId },
         };
       }
       
@@ -475,7 +483,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       setCommandHint(undefined);
       sendTypingStatus(false);
       onMessageSent?.();
-    }, [mx, roomId, threadRootId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands, autoConvertEmoticons, onMessageSent]);
+    }, [mx, roomId, threadRootId, threadReplyToEventId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands, autoConvertEmoticons, onMessageSent]);
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
@@ -702,7 +710,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   )}
                 </Box>
               )}
-              {replyDraft && (
+              {replyDraft && !hideReplyPreview && (
                 <div>
                   <Box
                     alignItems="Center"
@@ -717,8 +725,15 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     >
                       <Icon src={Icons.Cross} size="50" />
                     </IconButton>
-                    <Box direction="Row" gap="200" alignItems="Center">
-                      {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
+                    <Box
+                      direction="Row"
+                      gap="200"
+                      alignItems="Center"
+                      grow="Yes"
+                      className={replyPreviewHighlightClassName}
+                    >
+                      {!hideReplyThreadIndicator &&
+                        replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                       <ReplyLayout
                         userColor={replyUsernameColor}
                         username={