🆙 Stage 1

src/components/groups/views/forums/GroupForumNewThreadView.tsx

@@ -78,6 +78,7 @@ export const GroupForumNewThreadView: FC<GroupForumNewThreadViewProps> = props =
                 <textarea
                     className="form-control form-control-sm flex-1"
                     placeholder={ LocalizeText('messageboard.forum.compose.message.header') }
+                    maxLength={ 4000 }
                     value={ message }
                     onChange={ e => setMessage(e.target.value) }
                 />

src/components/groups/views/forums/GroupForumThreadListView.tsx

@@ -1,9 +1,8 @@
-import { GetThreadsMessageComposer, GuildForumThreadsEvent, PostThreadMessageEvent } from '@nitrots/nitro-renderer';
+import { ExtendedForumData, GetThreadsMessageComposer, GuildForumThread, GuildForumThreadsEvent, ModerateThreadMessageComposer, PostThreadMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer, GetUserProfile } from '../../../../api';
 import { Button, Column, Flex, LayoutBadgeImageView, Text } from '../../../../common';
 import { useMessageEvent } from '../../../../hooks';
-import { ExtendedForumData, GuildForumThread } from '@nitrots/nitro-renderer';
 
 const THREADS_PER_PAGE = 20;
 
@@ -11,7 +10,7 @@ interface GroupForumThreadListViewProps
 {
     groupId: number;
     forumData: ExtendedForumData;
-    onOpenThread: (groupId: number, threadId: number) => void;
+    onOpenThread: (groupId: number, threadId: number, thread?: GuildForumThread) => void;
     onNewThread: () => void;
     onOpenSettings: () => void;
     onBack: () => void;
@@ -78,10 +77,17 @@ export const GroupForumThreadListView: FC<GroupForumThreadListViewProps> = props
         return null;
     };
 
+    const canModerate = forumData && forumData.hasModeratePermissionError;
+
     const pinnedThreads = threads.filter(t => t.isPinned);
     const normalThreads = threads.filter(t => !t.isPinned);
     const sortedThreads = [ ...pinnedThreads, ...normalThreads ];
 
+    const restoreThread = (thread: GuildForumThread) =>
+    {
+        SendMessageComposer(new ModerateThreadMessageComposer(effectiveGroupId, thread.threadId, 1));
+    };
+
     return (
         <Column className="h-full" gap={ 0 }>
             <Flex className="bg-muted p-2 border-b" gap={ 2 } alignItems="center" justifyContent="between">
@@ -121,8 +127,16 @@ export const GroupForumThreadListView: FC<GroupForumThreadListViewProps> = props
                     if(stateText)
                     {
                         return (
-                            <Flex key={ thread.threadId } className="p-2 border-b bg-danger bg-opacity-10" alignItems="center">
+                            <Flex key={ thread.threadId } className="p-2 border-b bg-danger bg-opacity-10" alignItems="center" justifyContent="between">
-                                <Text small variant="muted">{ stateText }</Text>
+                                <Column gap={ 0 }>
+                                    <Text small variant="muted">{ stateText }</Text>
+                                    { canModerate &&
+                                        <Text small variant="muted">{ thread.header }</Text> }
+                                </Column>
+                                { canModerate &&
+                                    <Button variant="outline-success" className="btn-sm" onClick={ () => restoreThread(thread) }>
+                                        { LocalizeText('groupforum.thread.restore') }
+                                    </Button> }
                             </Flex>
                         );
                     }
@@ -132,7 +146,7 @@ export const GroupForumThreadListView: FC<GroupForumThreadListViewProps> = props
                             className={ `p-2 border-b hover:bg-muted cursor-pointer ${ thread.isPinned ? 'bg-warning bg-opacity-10' : '' } ${ thread.unreadMessagesCount > 0 ? 'fw-bold' : '' }` }
                             gap={ 2 }
                             alignItems="center"
-                            onClick={ () => onOpenThread(effectiveGroupId, thread.threadId) }>
+                            onClick={ () => onOpenThread(effectiveGroupId, thread.threadId, thread) }>
                             <Column className="flex-1 overflow-hidden" gap={ 0 }>
                                 <Flex gap={ 1 } alignItems="center">
                                     { thread.isPinned && <i className="fas fa-thumbtack text-warning" /> }

src/components/groups/views/forums/GroupForumThreadView.tsx

@@ -9,6 +9,7 @@ const MESSAGES_PER_PAGE = 20;
 
 // Message states
 const STATE_NORMAL = 0;
+const STATE_VISIBLE = 1;
 const STATE_HIDDEN_BY_ADMIN = 10;
 const STATE_DELETED_BY_MODERATOR = 20;
 
@@ -16,18 +17,20 @@ interface GroupForumThreadViewProps
 {
     groupId: number;
     threadId: number;
+    initialThread?: GuildForumThread;
     forumData: ExtendedForumData;
     onBack: () => void;
 }
 
 export const GroupForumThreadView: FC<GroupForumThreadViewProps> = props =>
 {
-    const { groupId = 0, threadId = 0, forumData = null, onBack = null } = props;
+    const { groupId = 0, threadId = 0, initialThread = null, forumData = null, onBack = null } = props;
     const effectiveGroupId = forumData?.groupId || groupId;
     const [ messages, setMessages ] = useState<MessageData[]>([]);
     const [ totalMessages, setTotalMessages ] = useState<number>(0);
     const [ replyText, setReplyText ] = useState<string>('');
-    const [ threadInfo, setThreadInfo ] = useState<GuildForumThread>(null);
+    const [ threadInfo, setThreadInfo ] = useState<GuildForumThread>(initialThread);
+    const [ isSubmitting, setIsSubmitting ] = useState<boolean>(false);
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
     useMessageEvent<ThreadMessagesMessageEvent>(ThreadMessagesMessageEvent, event =>
@@ -109,24 +112,29 @@ export const GroupForumThreadView: FC<GroupForumThreadViewProps> = props =>
 
     const sendReply = useCallback(() =>
     {
-        if(!replyText.trim().length) return;
+        if(replyText.trim().length < 10 || isSubmitting) return;
 
+        setIsSubmitting(true);
         SendMessageComposer(new PostMessageMessageComposer(effectiveGroupId, threadId, '', replyText.trim()));
         setReplyText('');
-    }, [ effectiveGroupId, threadId, replyText ]);
+
+        setTimeout(() => setIsSubmitting(false), 1000);
+    }, [ effectiveGroupId, threadId, replyText, isSubmitting ]);
 
     const togglePinThread = useCallback(() =>
     {
         if(!threadInfo) return;
 
-        SendMessageComposer(new UpdateThreadMessageComposer(effectiveGroupId, threadId, !threadInfo.isPinned, threadInfo.isLocked));
+        // UpdateThreadMessageComposer swaps 3rd/4th params internally: (groupId, threadId, isLocked, isPinned)
+        SendMessageComposer(new UpdateThreadMessageComposer(effectiveGroupId, threadId, threadInfo.isLocked, !threadInfo.isPinned));
     }, [ effectiveGroupId, threadId, threadInfo ]);
 
     const toggleLockThread = useCallback(() =>
     {
         if(!threadInfo) return;
 
-        SendMessageComposer(new UpdateThreadMessageComposer(effectiveGroupId, threadId, threadInfo.isPinned, !threadInfo.isLocked));
+        // UpdateThreadMessageComposer swaps 3rd/4th params internally: (groupId, threadId, isLocked, isPinned)
+        SendMessageComposer(new UpdateThreadMessageComposer(effectiveGroupId, threadId, !threadInfo.isLocked, threadInfo.isPinned));
     }, [ effectiveGroupId, threadId, threadInfo ]);
 
     const hideMessage = useCallback((messageId: number) =>
@@ -136,7 +144,7 @@ export const GroupForumThreadView: FC<GroupForumThreadViewProps> = props =>
 
     const restoreMessage = useCallback((messageId: number) =>
     {
-        SendMessageComposer(new ModerateMessageMessageComposer(effectiveGroupId, threadId, messageId, STATE_NORMAL));
+        SendMessageComposer(new ModerateMessageMessageComposer(effectiveGroupId, threadId, messageId, STATE_VISIBLE));
     }, [ effectiveGroupId, threadId ]);
 
     const hideThread = useCallback(() =>
@@ -215,9 +223,11 @@ export const GroupForumThreadView: FC<GroupForumThreadViewProps> = props =>
                         <Flex key={ message.messageId }
                             className={ `p-3 border-b ${ (message.state !== STATE_NORMAL) ? 'bg-danger bg-opacity-10' : '' }` }
                             gap={ 3 }>
-                            <Column className="flex-shrink-0 text-center" gap={ 1 } style={ { width: '80px' } }>
+                            <Column className="flex-shrink-0 items-center w-[50px]" gap={ 1 }>
-                                <div className="mx-auto" style={ { height: '80px', width: '50px', overflow: 'hidden' } }>
+                                <div className="w-[40px] h-[40px] rounded-full mx-auto overflow-hidden bg-[rgba(255,255,255,0.1)] flex justify-center">
-                                    <LayoutAvatarImageView figure={ message.authorFigure } direction={ 2 } />
+                                    <div className="mt-[-25px]">
+                                        <LayoutAvatarImageView figure={ message.authorFigure } headOnly={ true } direction={ 2 } />
+                                    </div>
                                 </div>
                                 <Text small bold pointer underline onClick={ () => GetUserProfile(message.authorId) }>
                                     { message.authorName }
@@ -262,6 +272,7 @@ export const GroupForumThreadView: FC<GroupForumThreadViewProps> = props =>
                         className="form-control form-control-sm flex-1"
                         placeholder={ LocalizeText('messageboard.message.replying.to') }
                         rows={ 2 }
+                        maxLength={ 4000 }
                         value={ replyText }
                         onChange={ e => setReplyText(e.target.value) }
                         onKeyDown={ e =>
@@ -273,7 +284,7 @@ export const GroupForumThreadView: FC<GroupForumThreadViewProps> = props =>
                             }
                         } }
                     />
-                    <Button variant="primary" className="btn-sm align-self-end" onClick={ sendReply } disabled={ !replyText.trim().length }>
+                    <Button variant="primary" className="btn-sm align-self-end" onClick={ sendReply } disabled={ replyText.trim().length < 10 || isSubmitting }>
                         { LocalizeText('messageboard.reply.button') }
                     </Button>
                 </Flex> }

src/components/groups/views/forums/GroupForumView.tsx

@@ -1,4 +1,4 @@
-import { AddLinkEventTracker, ForumDataMessageEvent, GetForumStatsMessageComposer, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { AddLinkEventTracker, ForumDataMessageEvent, GetForumStatsMessageComposer, GuildForumThread, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
@@ -22,6 +22,7 @@ export const GroupForumView: FC<{}> = props =>
     const [ currentView, setCurrentView ] = useState<number>(VIEW_FORUM_LIST);
     const [ groupId, setGroupId ] = useState<number>(0);
     const [ threadId, setThreadId ] = useState<number>(0);
+    const [ currentThread, setCurrentThread ] = useState<GuildForumThread>(null);
     const [ forumData, setForumData ] = useState<ExtendedForumData>(null);
 
     useMessageEvent<ForumDataMessageEvent>(ForumDataMessageEvent, event =>
@@ -39,10 +40,11 @@ export const GroupForumView: FC<{}> = props =>
         SendMessageComposer(new GetForumStatsMessageComposer(id));
     }, []);
 
-    const openThread = useCallback((gId: number, tId: number) =>
+    const openThread = useCallback((gId: number, tId: number, thread: GuildForumThread = null) =>
     {
         setGroupId(gId);
         setThreadId(tId);
+        setCurrentThread(thread);
         setCurrentView(VIEW_THREAD);
     }, []);
 
@@ -148,6 +150,7 @@ export const GroupForumView: FC<{}> = props =>
                     <GroupForumThreadView
                         groupId={ groupId }
                         threadId={ threadId }
+                        initialThread={ currentThread }
                         forumData={ forumData }
                         onBack={ backToThreadList } /> }
                 { (currentView === VIEW_NEW_THREAD) &&