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

src/app/features/forum/ForumNewPostModal.tsx

@@ -1,24 +1,8 @@
 import React, { FormEventHandler, KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
-import {
-  Box,
-  Button,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Line,
-  Scroll,
-  Text,
-  color,
-  config,
-  toRem,
-} from 'folds';
+import { Box, Button, Header, IconButton, Modal, Overlay, OverlayBackdrop, OverlayCenter, Line, Scroll, Text, color, config, toRem } from 'folds';
+import { Icon, Icons } from '../../components/icons';
 import {
   CustomEditor,
   Toolbar,
@@ -32,10 +16,11 @@ import {
 } from '../../components/editor';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
-import { sendForumPost } from './forumFeed';
+import { sendForumPost, sendForumMediaRoot, sendForumThreadAttachment } from './forumFeed';
 import { FORUM_EDITOR_OUTPUT_OPTS } from './forumRichText';
 import type { ForumPublishedPost, ForumSection } from './types';
 import { ForumTopicTargetFields } from './ForumTopicTargetFields';
+import { ForumPostUploadField, useForumPostUploads } from './ForumPostUploadField';
 import * as t from './forumTheme.css';
 
 type ForumNewPostModalProps = {
@@ -61,6 +46,14 @@ export function ForumNewPostModal({
   const [topicRoomId, setTopicRoomId] = useState(initialTopicRoomId);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const uploadRoomKey = topicRoomId || '__forum_new_post_draft__';
+  const {
+    selectedFiles,
+    uploadBoardHandlers,
+    handleUploadsReady,
+    collectUploadContents,
+    clearUploads,
+  } = useForumPostUploads(uploadRoomKey);
 
   const categoryTopics = useMemo(() => {
     if (category) {
@@ -80,8 +73,9 @@ export function ForumNewPostModal({
     if (sending) return;
     resetEditor(editor);
     resetEditorHistory(editor);
+    clearUploads();
     onClose();
-  }, [editor, onClose, sending]);
+  }, [clearUploads, editor, onClose, sending]);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     async (evt) => {
@@ -94,6 +88,9 @@ export function ForumNewPostModal({
         toMatrixCustomHTML(editor.children, FORUM_EDITOR_OUTPUT_OPTS)
       );
 
+      const hasText = !isEmptyEditor(editor);
+      const hasUploads = selectedFiles.length > 0;
+
       if (!topicRoomId) {
         setError('Select a topic for this post.');
         return;
@@ -102,27 +99,53 @@ export function ForumNewPostModal({
         setError('Post title is required.');
         return;
       }
-      if (isEmptyEditor(editor)) {
-        setError('Post body is required.');
+      if (!hasText && !hasUploads) {
+        setError('Post body or an attachment is required.');
         return;
       }
 
       setSending(true);
       setError(null);
       try {
-        const eventId = await sendForumPost(mx, topicRoomId, {
-          title: trimmedTitle,
-          plainText,
-          formattedHtml,
-        });
+        const attachmentContents = hasUploads ? await collectUploadContents() : [];
+        let eventId: string;
+        let publishedPlainText = plainText;
+        let publishedHtml = formattedHtml;
+
+        if (hasText) {
+          eventId = await sendForumPost(mx, topicRoomId, {
+            title: trimmedTitle,
+            plainText,
+            formattedHtml,
+          });
+        } else {
+          const [first, ...rest] = attachmentContents;
+          if (!first) {
+            throw new Error('Attachments failed to upload.');
+          }
+          eventId = await sendForumMediaRoot(mx, topicRoomId, trimmedTitle, first);
+          publishedPlainText = typeof first.body === 'string' ? first.body : trimmedTitle;
+          publishedHtml = '';
+          for (const content of rest) {
+            await sendForumThreadAttachment(mx, topicRoomId, eventId, content);
+          }
+        }
+
+        if (hasText) {
+          for (const content of attachmentContents) {
+            await sendForumThreadAttachment(mx, topicRoomId, eventId, content);
+          }
+        }
+
         resetEditor(editor);
         resetEditorHistory(editor);
+        clearUploads();
         onPublished?.({
           eventId,
           topicRoomId,
           title: trimmedTitle,
-          plainText,
-          formattedHtml,
+          plainText: publishedPlainText,
+          formattedHtml: publishedHtml,
         });
         onClose();
       } catch (err) {
@@ -131,7 +154,18 @@ export function ForumNewPostModal({
         setSending(false);
       }
     },
-    [editor, mx, onClose, onPublished, sending, title, topicRoomId]
+    [
+      clearUploads,
+      collectUploadContents,
+      editor,
+      mx,
+      onClose,
+      onPublished,
+      selectedFiles.length,
+      sending,
+      title,
+      topicRoomId,
+    ]
   );
 
   const handleEditorKeyDown: KeyboardEventHandler = useCallback(
@@ -230,7 +264,16 @@ export function ForumNewPostModal({
                       bottom={
                         <div>
                           <Line variant="SurfaceVariant" size="300" />
-                          <Toolbar />
+                          <Box alignItems="Center" gap="200" style={{ padding: `0 ${config.space.S200}` }}>
+                            <ForumPostUploadField
+                              roomId={uploadRoomKey}
+                              disabled={sending || !topicRoomId}
+                              uploadBoardHandlers={uploadBoardHandlers}
+                              onUploadsReady={handleUploadsReady}
+                            />
+                            <Box grow="Yes" />
+                            <Toolbar />
+                          </Box>
                         </div>
                       }
                     />