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

src/app/features/room/MembersDrawer.tsx

@@ -6,26 +6,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Avatar,
-  Badge,
-  Box,
-  Chip,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Scroll,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  config,
-} from 'folds';
+import { Avatar, Badge, Box, Chip, Header, IconButton, Input, MenuItem, PopOut, RectCords, Scroll, Spinner, Text, Tooltip, TooltipProvider, config } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';

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={

src/app/features/room/RoomTimeline.tsx

@@ -30,22 +30,8 @@ import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
-import {
-  Badge,
-  Box,
-  Chip,
-  ContainerColor,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Scroll,
-  Text,
-  as,
-  color,
-  config,
-  toRem,
-} from 'folds';
+import { Badge, Box, Chip, ContainerColor, IconButton, Line, Scroll, Text, as, color, config, toRem } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { isKeyHotkey } from 'is-hotkey';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useTranslation } from 'react-i18next';

src/app/features/room/RoomViewFollowing.tsx

@@ -1,16 +1,6 @@
 import React, { useState } from 'react';
-import {
-  Box,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  as,
-  config,
-} from 'folds';
+import { Box, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, as, config } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { Room } from 'matrix-js-sdk';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';

src/app/features/room/RoomViewHeader.tsx

@@ -1,28 +1,7 @@
 import React, { MouseEventHandler, forwardRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
-  Box,
-  Avatar,
-  Text,
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  IconButton,
-  Icon,
-  Icons,
-  Tooltip,
-  TooltipProvider,
-  Menu,
-  MenuItem,
-  toRem,
-  config,
-  Line,
-  PopOut,
-  RectCords,
-  Badge,
-  Spinner,
-  color,
-} from 'folds';
+import { Box, Avatar, Text, Overlay, OverlayCenter, OverlayBackdrop, IconButton, Tooltip, TooltipProvider, Menu, MenuItem, toRem, config, Line, PopOut, RectCords, Badge, Spinner, color } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtom, useAtomValue } from 'jotai';

src/app/features/room/RoomViewTyping.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Icon, IconButton, Icons, Text, as } from 'folds';
+import { Box, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { Room } from 'matrix-js-sdk';
 import classNames from 'classnames';
 import { useSetAtom } from 'jotai';

src/app/features/room/ThreadView.tsx

@@ -15,19 +15,8 @@ import {
   ThreadEvent,
 } from 'matrix-js-sdk';
 import { useAtomValue, useSetAtom } from 'jotai';
-import {
-  Badge,
-  Box,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Scroll,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  config,
-} from 'folds';
+import { Badge, Box, IconButton, Line, Scroll, Text, Tooltip, TooltipProvider, config } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { ReactEditor } from 'slate-react';

src/app/features/room/jump-to-time/JumpToTime.tsx

@@ -1,24 +1,7 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
-  Dialog,
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-  Chip,
-  PopOut,
-  RectCords,
-} from 'folds';
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner, Chip, PopOut, RectCords } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Direction, MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';

src/app/features/room/message/Message.tsx

@@ -1,28 +1,5 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Line,
-  Menu,
-  MenuItem,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-  as,
-  color,
-  config,
-} from 'folds';
+import { Avatar, Box, Button, Dialog, Header, IconButton, Input, Line, Menu, MenuItem, Modal, Overlay, OverlayBackdrop, OverlayCenter, PopOut, RectCords, Spinner, Text, as, color, config } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import React, {
   FormEventHandler,
   MouseEventHandler,

src/app/features/room/message/MessageEditor.tsx

@@ -5,20 +5,8 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import {
-  Box,
-  Chip,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-  as,
-  config,
-} from 'folds';
+import { Box, Chip, IconButton, Line, PopOut, RectCords, Spinner, Text, as, config } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Editor, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { IContent, IMentions, MatrixEvent, RelationType, Room } from 'matrix-js-sdk';

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -1,19 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import {
-  Avatar,
-  Box,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  MenuItem,
-  Scroll,
-  Text,
-  as,
-  config,
-} from 'folds';
+import { Avatar, Box, Header, IconButton, Line, MenuItem, Scroll, Text, as, config } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { MatrixEvent, Room, RoomMember } from 'matrix-js-sdk';
 import { Relations } from 'matrix-js-sdk/lib/models/relations';
 import { getMemberDisplayName } from '../../../utils/room';

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -2,22 +2,8 @@
 import React, { forwardRef, MouseEventHandler, useCallback, useMemo, useRef } from 'react';
 import { MatrixEvent, Room } from 'matrix-js-sdk';
 import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
-import {
-  Avatar,
-  Box,
-  Chip,
-  color,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  Scroll,
-  Spinner,
-  Text,
-  toRem,
-} from 'folds';
+import { Avatar, Box, Chip, color, config, Header, IconButton, Menu, Scroll, Spinner, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { useVirtualizer } from '@tanstack/react-virtual';