Add thread mode button

app/javascript/flavours/glitch/features/compose/components/compose_form.jsx

@@ -34,6 +34,7 @@ import { NavigationBar } from './navigation_bar';
 import { PollForm } from "./poll_form";
 import { ReplyIndicator } from './reply_indicator';
 import { SecondaryPrivacyButton } from './secondary_privacy_button';
+import { ThreadModeButton } from './thread_mode_button';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -315,6 +316,7 @@ class ComposeForm extends ImmutablePureComponent {
                 <ContentTypeButton />
                 <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
                 <FederationButton />
+                <ThreadModeButton />
                 <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
               </div>
 

app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import QuickreplyIcon from '@/material-icons/400-24px/quickreply.svg?react';
+import { changeComposeAdvancedOption } from 'flavours/glitch/actions/compose';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  enable_threaded_mode: { id: 'compose.enable_threaded_mode', defaultMessage: 'Enable threaded more' },
+  disable_threaded_mode: { id: 'compose.disable_threaded_mode', defaultMessage: 'Disable threaded more' },
+});
+
+export const ThreadModeButton = () => {
+  const intl = useIntl();
+
+  const isEditing = useAppSelector((state) => state.getIn(['compose', 'id']) !== null);
+  const active = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'threaded_mode']));
+
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(changeComposeAdvancedOption('threaded_mode', !active));
+  }, [active, dispatch]);
+
+  const title = intl.formatMessage(active ? messages.disable_threaded_mode : messages.enable_threaded_mode);
+
+  return (
+    <IconButton
+      disabled={isEditing}
+      icon=''
+      onClick={handleClick}
+      iconComponent={QuickreplyIcon}
+      title={title}
+      active={active}
+      size={18}
+      inverted
+    />
+  );
+};