diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
index 18eca540d..3aa370a24 100644
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -1,681 +1,680 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference.js';
 import * as React from 'react';
 
 import {
   joinThreadActionTypes,
   newThreadActionTypes,
   useJoinThread,
 } from 'lib/actions/thread-actions.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import {
   getTypeaheadRegexMatches,
   type MentionTypeaheadSuggestionItem,
   type TypeaheadMatchedStrings,
   useMentionTypeaheadChatSuggestions,
   useMentionTypeaheadUserSuggestions,
   useUserMentionsCandidates,
 } from 'lib/shared/mention-utils.js';
 import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
 import {
   checkIfDefaultMembersAreVoiced,
   threadActualMembers,
   threadFrozenDueToViewerBlock,
   threadHasPermission,
   viewerIsMember,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ClientThreadJoinRequest,
   type ThreadJoinPayload,
-  type LegacyThreadInfo,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/redux-promise-utils.js';
 
 import css from './chat-input-bar.css';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import Button from '../components/button.react.js';
 import {
   type InputState,
   type PendingMultimediaUpload,
 } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { allowedMimeTypeString } from '../media/file-utils.js';
 import Multimedia from '../media/multimedia.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 import {
   getMentionTypeaheadTooltipActions,
   getMentionTypeaheadTooltipButtons,
   webMentionTypeaheadRegex,
 } from '../utils/typeahead-utils.js';
 
 type BaseProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +inputState: InputState,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: number,
   +isThreadActive: boolean,
   +userInfos: UserInfos,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +typeaheadMatchedStrings: ?TypeaheadMatchedStrings,
   +suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem>,
-  +parentThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
+  +parentThreadInfo: ?ThreadInfo,
 };
 
 class ChatInputBar extends React.PureComponent<Props> {
   textarea: ?HTMLTextAreaElement;
   multimediaInput: ?HTMLInputElement;
 
   componentDidMount() {
     this.updateHeight();
     if (this.props.isThreadActive) {
       this.addReplyListener();
     }
   }
 
   componentWillUnmount() {
     if (this.props.isThreadActive) {
       this.removeReplyListener();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.isThreadActive && !prevProps.isThreadActive) {
       this.addReplyListener();
     } else if (!this.props.isThreadActive && prevProps.isThreadActive) {
       this.removeReplyListener();
     }
 
     const { inputState } = this.props;
     const prevInputState = prevProps.inputState;
     if (inputState.draft !== prevInputState.draft) {
       this.updateHeight();
     }
 
     if (
       inputState.draft !== prevInputState.draft ||
       inputState.textCursorPosition !== prevInputState.textCursorPosition
     ) {
       inputState.setTypeaheadState({
         canBeVisible: true,
       });
     }
 
     const curUploadIDs = ChatInputBar.unassignedUploadIDs(
       inputState.pendingUploads,
     );
     const prevUploadIDs = ChatInputBar.unassignedUploadIDs(
       prevInputState.pendingUploads,
     );
     const { multimediaInput, textarea } = this;
     if (
       multimediaInput &&
       _difference(prevUploadIDs)(curUploadIDs).length > 0
     ) {
       // Whenever a pending upload is removed, we reset the file
       // HTMLInputElement's value field, so that if the same upload occurs again
       // the onChange call doesn't get filtered
       multimediaInput.value = '';
     } else if (
       textarea &&
       _difference(curUploadIDs)(prevUploadIDs).length > 0
     ) {
       // Whenever a pending upload is added, we focus the textarea
       textarea.focus();
       return;
     }
 
     if (
       (this.props.threadInfo.id !== prevProps.threadInfo.id ||
         (inputState.textCursorPosition !== prevInputState.textCursorPosition &&
           this.textarea?.selectionStart === this.textarea?.selectionEnd)) &&
       this.textarea
     ) {
       this.textarea.focus();
 
       this.textarea?.setSelectionRange(
         inputState.textCursorPosition,
         inputState.textCursorPosition,
         'none',
       );
     }
   }
 
   static unassignedUploadIDs(
     pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ): Array<string> {
     return pendingUploads
       .filter(
         (pendingUpload: PendingMultimediaUpload) => !pendingUpload.messageID,
       )
       .map((pendingUpload: PendingMultimediaUpload) => pendingUpload.localID);
   }
 
   updateHeight() {
     const textarea = this.textarea;
     if (textarea) {
       textarea.style.height = 'auto';
       const newHeight = Math.min(textarea.scrollHeight, 150);
       textarea.style.height = `${newHeight}px`;
     }
   }
 
   addReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addReplyListener',
     );
     this.props.inputState.addReplyListener(this.focusAndUpdateText);
   }
 
   removeReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeReplyListener',
     );
     this.props.inputState.removeReplyListener(this.focusAndUpdateText);
   }
 
   render(): React.Node {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
 
     let joinButton = null;
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <LoadingIndicator
             status={this.props.joinThreadLoadingStatus}
             size="medium"
             color="white"
           />
         );
       } else {
         buttonContent = (
           <>
             <SWMansionIcon icon="plus" size={24} />
             <p className={css.joinButtonText}>Join Chat</p>
           </>
         );
       }
       joinButton = (
         <div className={css.joinButtonContainer}>
           <Button
             variant="filled"
             buttonColor={{ backgroundColor: `#${this.props.threadInfo.color}` }}
             onClick={this.onClickJoin}
           >
             {buttonContent}
           </Button>
         </div>
       );
     }
 
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
     const multimediaPreviews = pendingUploads.map(pendingUpload => {
       const { uri, mediaType, thumbHash, dimensions } = pendingUpload;
       let mediaSource = { thumbHash, dimensions };
       if (mediaType !== 'encrypted_photo' && mediaType !== 'encrypted_video') {
         mediaSource = {
           ...mediaSource,
           type: mediaType,
           uri,
           thumbnailURI: null,
         };
       } else {
         const { encryptionKey } = pendingUpload;
         invariant(
           encryptionKey,
           'encryptionKey should be set for encrypted media',
         );
         mediaSource = {
           ...mediaSource,
           type: mediaType,
           blobURI: uri,
           encryptionKey,
           thumbnailBlobURI: null,
           thumbnailEncryptionKey: null,
         };
       }
       return (
         <Multimedia
           mediaSource={mediaSource}
           pendingUpload={pendingUpload}
           remove={cancelPendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={pendingUpload.localID}
         />
       );
     });
     const previews =
       multimediaPreviews.length > 0 ? (
         <div className={css.previews}>{multimediaPreviews}</div>
       ) : null;
 
     let content;
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place and won't
     // list the viewer as a member, which will end up hiding the input. In
     // this case, we will assume that our creation action will get translated,
     // into a join and as long as members are voiced, we can show the input.
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
 
     let sendButton;
     if (this.props.inputState.draft.length) {
       sendButton = (
         <a onClick={this.onSend} className={css.sendButton}>
           <SWMansionIcon
             icon="send-2"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </a>
       );
     }
 
     if (
       threadHasPermission(this.props.threadInfo, threadPermissions.VOICED) ||
       (this.props.threadCreationInProgress && defaultMembersAreVoiced)
     ) {
       content = (
         <div className={css.inputBarWrapper}>
           <a className={css.multimediaUpload} onClick={this.onMultimediaClick}>
             <input
               type="file"
               onChange={this.onMultimediaFileChange}
               ref={this.multimediaInputRef}
               accept={allowedMimeTypeString}
               multiple
             />
             <SWMansionIcon
               icon="image-1"
               size={22}
               color={`#${this.props.threadInfo.color}`}
               disableFill
             />
           </a>
           <div className={css.inputBarTextInput}>
             <textarea
               rows="1"
               placeholder="Type your message"
               value={this.props.inputState.draft}
               onChange={this.onChangeMessageText}
               onKeyDown={this.onKeyDown}
               onClick={this.onClickTextarea}
               onSelect={this.onSelectTextarea}
               ref={this.textareaRef}
               autoFocus
             />
           </div>
           {sendButton}
         </div>
       );
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <span className={css.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </span>
       );
     } else if (isMember) {
       content = (
         <span className={css.explanation}>
           You don&rsquo;t have permission to send messages.
         </span>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <span className={css.explanation}>
           You don&rsquo;t have permission to send messages.
         </span>
       );
     }
 
     let typeaheadTooltip;
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       this.props.suggestions.length > 0 &&
       this.props.typeaheadMatchedStrings &&
       this.textarea
     ) {
       typeaheadTooltip = (
         <TypeaheadTooltip
           inputState={this.props.inputState}
           textarea={this.textarea}
           matchedStrings={this.props.typeaheadMatchedStrings}
           suggestions={this.props.suggestions}
           typeaheadTooltipActionsGetter={getMentionTypeaheadTooltipActions}
           typeaheadTooltipButtonsGetter={getMentionTypeaheadTooltipButtons}
         />
       );
     }
 
     return (
       <div className={css.inputBar}>
         {joinButton}
         {previews}
         {content}
         {typeaheadTooltip}
       </div>
     );
   }
 
   textareaRef = (textarea: ?HTMLTextAreaElement) => {
     this.textarea = textarea;
     if (textarea) {
       textarea.focus();
     }
   };
 
   onChangeMessageText = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setDraft(event.currentTarget.value);
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onClickTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onSelectTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   focusAndUpdateText = (text: string) => {
     // We need to call focus() first on Safari, otherwise the cursor
     // ends up at the start instead of the end for some reason
     const { textarea } = this;
     invariant(textarea, 'textarea should be set');
     textarea.focus();
 
     // We reset the textarea to an empty string at the start so that the cursor
     // always ends up at the end, even if the text doesn't actually change
     textarea.value = '';
     const currentText = this.props.inputState.draft;
     if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.props.inputState.setDraft(prependedText);
       textarea.value = prependedText;
     } else {
       textarea.value = currentText;
     }
 
     // The above strategies make sure the cursor is at the end,
     // but we also need to make sure that we're scrolled to the bottom
     textarea.scrollTop = textarea.scrollHeight;
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
     const { accept, close, moveChoiceUp, moveChoiceDown } =
       this.props.inputState.typeaheadState;
 
     const actions = {
       Enter: accept,
       Tab: accept,
       ArrowDown: moveChoiceDown,
       ArrowUp: moveChoiceUp,
       Escape: close,
     };
 
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       actions[event.key]
     ) {
       event.preventDefault();
       actions[event.key]();
     } else if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       this.send();
     }
   };
 
   onSend = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.send();
   };
 
   send() {
     let { nextLocalID } = this.props;
 
     const text = trimMessage(this.props.inputState.draft);
     if (text) {
       this.dispatchTextMessageAction(text, nextLocalID);
       nextLocalID++;
     }
     if (this.props.inputState.pendingUploads.length > 0) {
       this.props.inputState.createMultimediaMessage(
         nextLocalID,
         this.props.threadInfo,
       );
     }
   }
 
   dispatchTextMessageAction(text: string, nextLocalID: number) {
     this.props.inputState.setDraft('');
 
     const localID = `${localIDPrefix}${nextLocalID}`;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
 
     void this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   }
 
   multimediaInputRef = (multimediaInput: ?HTMLInputElement) => {
     this.multimediaInput = multimediaInput;
   };
 
   onMultimediaClick = () => {
     if (this.multimediaInput) {
       this.multimediaInput.click();
     }
   };
 
   onMultimediaFileChange = async (
     event: SyntheticInputEvent<HTMLInputElement>,
   ) => {
     const result = await this.props.inputState.appendFiles(
       this.props.threadInfo,
       [...event.target.files],
     );
     if (!result && this.multimediaInput) {
       this.multimediaInput.value = '';
     }
   };
 
   onClickJoin = () => {
     void this.props.dispatchActionPromise(
       joinThreadActionTypes,
       this.joinAction(),
     );
   };
 
   async joinAction(): Promise<ThreadJoinPayload> {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 const ConnectedChatInputBar: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatInputBar(props) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const isThreadActive = useSelector(
       state => props.threadInfo.id === state.navInfo.activeChatThreadID,
     );
     const userInfos = useSelector(state => state.userStore.userInfos);
     const joinThreadLoadingStatus = useSelector(
       joinThreadLoadingStatusSelector,
     );
     const createThreadLoadingStatus = useSelector(
       createThreadLoadingStatusSelector,
     );
     const threadCreationInProgress = createThreadLoadingStatus === 'loading';
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
     const callJoinThread = useJoinThread();
     const { getChatMentionSearchIndex } = useChatMentionContext();
     const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
     const { parentThreadID } = props.threadInfo;
     const parentThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
 
     const userMentionsCandidates = useUserMentionsCandidates(
       props.threadInfo,
       parentThreadInfo,
     );
 
     const chatMentionCandidates = useThreadChatMentionCandidates(
       props.threadInfo,
     );
 
     const typeaheadRegexMatches = React.useMemo(
       () =>
         getTypeaheadRegexMatches(
           props.inputState.draft,
           {
             start: props.inputState.textCursorPosition,
             end: props.inputState.textCursorPosition,
           },
           webMentionTypeaheadRegex,
         ),
       [props.inputState.textCursorPosition, props.inputState.draft],
     );
 
     const typeaheadMatchedStrings: ?TypeaheadMatchedStrings =
       React.useMemo(() => {
         if (typeaheadRegexMatches === null) {
           return null;
         }
         return {
           textBeforeAtSymbol: typeaheadRegexMatches.groups?.textPrefix ?? '',
           query: typeaheadRegexMatches.groups?.mentionText ?? '',
         };
       }, [typeaheadRegexMatches]);
 
     React.useEffect(() => {
       if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
         const setter = props.inputState.setTypeaheadState;
         setter({
           frozenUserMentionsCandidates: userMentionsCandidates,
           frozenChatMentionsCandidates: chatMentionCandidates,
         });
       }
     }, [
       userMentionsCandidates,
       props.inputState.setTypeaheadState,
       props.inputState.typeaheadState.keepUpdatingThreadMembers,
       chatMentionCandidates,
     ]);
 
     const suggestedUsers = useMentionTypeaheadUserSuggestions(
       props.inputState.typeaheadState.frozenUserMentionsCandidates,
       typeaheadMatchedStrings,
     );
 
     const suggestedChats = useMentionTypeaheadChatSuggestions(
       chatMentionSearchIndex,
       props.inputState.typeaheadState.frozenChatMentionsCandidates,
       typeaheadMatchedStrings,
     );
 
     const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
       React.useMemo(
         () => [...suggestedUsers, ...suggestedChats],
         [suggestedUsers, suggestedChats],
       );
 
     return (
       <ChatInputBar
         {...props}
         viewerID={viewerID}
         joinThreadLoadingStatus={joinThreadLoadingStatus}
         threadCreationInProgress={threadCreationInProgress}
         calendarQuery={calendarQuery}
         nextLocalID={nextLocalID}
         isThreadActive={isThreadActive}
         userInfos={userInfos}
         dispatchActionPromise={dispatchActionPromise}
         joinThread={callJoinThread}
         typeaheadMatchedStrings={typeaheadMatchedStrings}
         suggestions={suggestions}
         parentThreadInfo={parentThreadInfo}
       />
     );
   });
 
 export default ConnectedChatInputBar;
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index f818296d9..5a10707cd 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,487 +1,486 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import _debounce from 'lodash/debounce.js';
 import * as React from 'react';
 
 import type {
   FetchMessagesBeforeCursorInput,
   FetchMostRecentMessagesInput,
 } from 'lib/actions/message-actions.js';
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMostRecentMessagesActionTypes,
   useFetchMessagesBeforeCursor,
   useFetchMostRecentMessages,
 } from 'lib/actions/message-actions.js';
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
 import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors.js';
 import { messageKey } from 'lib/shared/message-utils.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/redux-promise-utils.js';
 
 import { defaultMaxTextAreaHeight, editBoxHeight } from './chat-constants.js';
 import css from './chat-message-list.css';
 import type { ScrollToMessageCallback } from './edit-message-provider.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import { MessageListContext } from './message-list-types.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipContext } from '../tooltips/tooltip-provider.js';
 
 const browser = detectBrowser();
 const supportsReverseFlex =
   !browser || browser.name !== 'firefox' || parseInt(browser.version) >= 81;
 
 // Margin between the top of the maximum height edit box
 // and the top of the container
 const editBoxTopMargin = 10;
 
 type BaseProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchMessagesBeforeCursor: (
     input: FetchMessagesBeforeCursorInput,
   ) => Promise<FetchMessageInfosPayload>,
   +fetchMostRecentMessages: (
     input: FetchMostRecentMessagesInput,
   ) => Promise<FetchMessageInfosPayload>,
   +inputState: ?InputState,
   +clearTooltip: () => mixed,
   +oldestMessageServerID: ?string,
   +isEditState: boolean,
   +addScrollToMessageListener: ScrollToMessageCallback => mixed,
   +removeScrollToMessageListener: ScrollToMessageCallback => mixed,
 };
 type Snapshot = {
   +scrollTop: number,
   +scrollHeight: number,
 };
 
 type State = {
   +scrollingEndCallback: ?() => mixed,
 };
 
 class ChatMessageList extends React.PureComponent<Props, State> {
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       scrollingEndCallback: null,
     };
   }
 
   componentDidMount() {
     this.scrollToBottom();
     this.props.addScrollToMessageListener(this.scrollToMessage);
   }
 
   componentWillUnmount() {
     this.props.removeScrollToMessageListener(this.scrollToMessage);
   }
 
   getSnapshotBeforeUpdate(prevProps: Props): ?Snapshot {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props): boolean {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
       ChatMessageList.keyExtractor(prevMessageListData[0]) !==
       ChatMessageList.keyExtractor(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     const { messageContainer } = this;
     if (messageContainer && prevMessageListData !== messageListData) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage &&
         snapshot &&
         Math.abs(snapshot.scrollTop) <= 1 &&
         !this.props.isEditState)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
   static keyExtractor(item: ChatMessageItem): string {
     if (item.itemType === 'loader') {
       return 'loader';
     }
     return messageKey(item.messageInfo);
   }
 
   renderItem = (item: ChatMessageItem): React.Node => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="white" />
         </div>
       );
     }
     const { threadInfo } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         shouldDisplayPinIndicator={true}
         key={ChatMessageList.keyExtractor(item)}
       />
     );
   };
 
   scrollingEndCallbackWrapper = (
     composedMessageID: string,
     callback: (maxHeight: number) => mixed,
   ): (() => mixed) => {
     return () => {
       const maxHeight = this.getMaxEditTextAreaHeight(composedMessageID);
       callback(maxHeight);
     };
   };
 
   scrollToMessage = (
     composedMessageID: string,
     callback: (maxHeight: number) => mixed,
   ) => {
     const element = document.getElementById(composedMessageID);
     if (!element) {
       return;
     }
     const scrollingEndCallback = this.scrollingEndCallbackWrapper(
       composedMessageID,
       callback,
     );
     if (!this.willMessageEditWindowOverflow(composedMessageID)) {
       scrollingEndCallback();
       return;
     }
     this.setState(
       {
         scrollingEndCallback,
       },
       () => {
         element.scrollIntoView({ behavior: 'smooth', block: 'center' });
         // It covers the case when browser decide not to scroll to the message
         // because it's already in the view.
         // In this case, the 'scroll' event won't be triggered,
         // so we need to call the callback manually.
         this.debounceEditModeAfterScrollToMessage();
       },
     );
   };
 
   getMaxEditTextAreaHeight = (composedMessageID: string): number => {
     const { messageContainer } = this;
     if (!messageContainer) {
       return defaultMaxTextAreaHeight;
     }
     const messageElement = document.getElementById(composedMessageID);
     if (!messageElement) {
       console.log(`couldn't find the message element`);
       return defaultMaxTextAreaHeight;
     }
 
     const msgPos = messageElement.getBoundingClientRect();
     const containerPos = messageContainer.getBoundingClientRect();
 
     const messageBottom = msgPos.bottom;
     const containerTop = containerPos.top;
 
     const maxHeight =
       messageBottom - containerTop - editBoxHeight - editBoxTopMargin;
 
     return maxHeight;
   };
 
   willMessageEditWindowOverflow(composedMessageID: string): boolean {
     const { messageContainer } = this;
     if (!messageContainer) {
       return false;
     }
     const messageElement = document.getElementById(composedMessageID);
     if (!messageElement) {
       console.log(`couldn't find the message element`);
       return false;
     }
 
     const msgPos = messageElement.getBoundingClientRect();
     const containerPos = messageContainer.getBoundingClientRect();
     const containerTop = containerPos.top;
     const containerBottom = containerPos.bottom;
 
     const availableTextAreaHeight =
       (containerBottom - containerTop) / 2 - editBoxHeight;
     const messageHeight = msgPos.height;
     const expectedMinimumHeight = Math.min(
       defaultMaxTextAreaHeight,
       availableTextAreaHeight,
     );
     const offset = Math.max(
       0,
       expectedMinimumHeight + editBoxHeight + editBoxTopMargin - messageHeight,
     );
 
     const messageTop = msgPos.top - offset;
     const messageBottom = msgPos.bottom;
 
     return messageBottom > containerBottom || messageTop < containerTop;
   }
 
   render(): React.Node {
     const { messageListData, threadInfo, inputState, isEditState } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
 
     let relationshipPrompt = null;
     if (threadInfo.type === threadTypes.PERSONAL) {
       relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
     }
 
     const messageContainerStyle = classNames({
       [css.disableAnchor]:
         this.state.scrollingEndCallback !== null || isEditState,
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !supportsReverseFlex,
     });
     return (
       <div className={css.outerMessageContainer}>
         {relationshipPrompt}
         <div className={messageContainerStyle} ref={this.messageContainerRef}>
           {messages}
         </div>
       </div>
     );
   }
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     void this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     this.props.clearTooltip();
     void this.possiblyLoadMoreMessages();
     this.debounceEditModeAfterScrollToMessage();
   };
 
   debounceEditModeAfterScrollToMessage: () => void = _debounce(() => {
     if (this.state.scrollingEndCallback) {
       this.state.scrollingEndCallback();
     }
     this.setState({ scrollingEndCallback: null });
   }, 100);
 
   async possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
 
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
 
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
 
     const threadID = this.props.activeChatThreadID;
     invariant(threadID, 'should be set');
 
     try {
       const { oldestMessageServerID } = this.props;
       if (oldestMessageServerID) {
         await this.props.dispatchActionPromise(
           fetchMessagesBeforeCursorActionTypes,
           this.props.fetchMessagesBeforeCursor({
             threadID,
             beforeMessageID: oldestMessageServerID,
           }),
         );
       } else {
         await this.props.dispatchActionPromise(
           fetchMostRecentMessagesActionTypes,
           this.props.fetchMostRecentMessages({ threadID }),
         );
       }
     } finally {
       this.loadingFromScroll = false;
     }
   }
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 const ConnectedChatMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatMessageList(
     props: BaseProps,
   ): React.Node {
     const { threadInfo } = props;
     const messageListData = useMessageListData({
       threadInfo,
       searching: false,
       userInfoInputArray: [],
     });
 
     const startReached = !!useSelector(state => {
       const activeID = threadInfo.id;
       if (!activeID) {
         return null;
       }
 
       if (threadIsPending(activeID)) {
         return true;
       }
 
       const threadMessageInfo = state.messageStore.threads[activeID];
       if (!threadMessageInfo) {
         return null;
       }
       return threadMessageInfo.startReached;
     });
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor();
     const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
     const inputState = React.useContext(InputStateContext);
 
     const { clearTooltip } = useTooltipContext();
 
     const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
     const getTextMessageMarkdownRules = useTextMessageRulesFunc(
       threadInfo,
       chatMentionCandidates,
     );
     const messageListContext = React.useMemo(() => {
       if (!getTextMessageMarkdownRules) {
         return undefined;
       }
       return { getTextMessageMarkdownRules };
     }, [getTextMessageMarkdownRules]);
 
     const oldestMessageServerID = useOldestMessageServerID(threadInfo.id);
 
     const {
       editState,
       addScrollToMessageListener,
       removeScrollToMessageListener,
     } = useEditModalContext();
     const isEditState = editState !== null;
 
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
           activeChatThreadID={threadInfo.id}
           threadInfo={threadInfo}
           messageListData={messageListData}
           startReached={startReached}
           inputState={inputState}
           dispatchActionPromise={dispatchActionPromise}
           fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
           fetchMostRecentMessages={callFetchMostRecentMessages}
           clearTooltip={clearTooltip}
           oldestMessageServerID={oldestMessageServerID}
           isEditState={isEditState}
           addScrollToMessageListener={addScrollToMessageListener}
           removeScrollToMessageListener={removeScrollToMessageListener}
         />
       </MessageListContext.Provider>
     );
   });
 
 export default ConnectedChatMessageList;
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
index 1cdd5fb09..fb88d2ede 100644
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -1,258 +1,257 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import {
   CheckCircle as CheckCircleIcon,
   Circle as CircleIcon,
   XCircle as XCircleIcon,
 } from 'react-feather';
 
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
 import { assertComposableMessageType } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import { getComposedMessageID } from './chat-constants.js';
 import css from './chat-message-list.css';
 import FailedSend from './failed-send.react.js';
 import InlineEngagement from './inline-engagement.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import CommIcon from '../CommIcon.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
 import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js';
 import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 export type ComposedMessageID = string;
 
 const availableTooltipPositionsForViewerMessage = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_BOTTOM,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.BOTTOM,
   tooltipPositions.TOP,
 ];
 const availableTooltipPositionsForNonViewerMessage = [
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_BOTTOM,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.BOTTOM,
   tooltipPositions.TOP,
 ];
 
 type BaseProps = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +shouldDisplayPinIndicator: boolean,
   +sendFailed: boolean,
   +children: React.Node,
   +fixedWidth?: boolean,
   +borderRadius: number,
 };
 type DefaultProps = { +borderRadius: number };
 type BaseConfig = React.Config<BaseProps, DefaultProps>;
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
   +onMouseLeave: ?() => mixed,
   +onMouseEnter: (event: SyntheticEvent<HTMLDivElement>) => mixed,
   +containsInlineEngagement: boolean,
   +stringForUser: ?string,
   +onClickUser: () => mixed,
 };
 class ComposedMessage extends React.PureComponent<Props> {
   static defaultProps: DefaultProps = { borderRadius: 8 };
 
   render(): React.Node {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const { borderRadius, item, threadInfo, shouldDisplayPinIndicator } =
       this.props;
     const { hasBeenEdited, isPinned } = item;
     const { id, creator } = item.messageInfo;
     const threadColor = threadInfo.color;
 
     const { isViewer } = creator;
     const contentClassName = classNames({
       [css.content]: true,
       [css.viewerContent]: isViewer,
       [css.nonViewerContent]: !isViewer,
     });
     const messageBoxContainerClassName = classNames({
       [css.messageBoxContainer]: true,
       [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth,
     });
     const messageBoxClassName = classNames({
       [css.messageBox]: true,
       [css.fixedWidthMessageBox]: this.props.fixedWidth,
     });
     const messageBoxStyle = {
       borderTopRightRadius: isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomRightRadius: isViewer && !item.endsCluster ? 0 : borderRadius,
       borderTopLeftRadius: !isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomLeftRadius: !isViewer && !item.endsCluster ? 0 : borderRadius,
     };
 
     let authorName = null;
     const { stringForUser } = this.props;
     if (stringForUser) {
       authorName = (
         <span className={css.authorName} onClick={this.props.onClickUser}>
           {stringForUser}
         </span>
       );
     }
 
     let deliveryIcon = null;
     let failedSendInfo = null;
     if (isViewer) {
       let deliveryIconSpan;
       let deliveryIconColor = threadColor;
       if (id !== null && id !== undefined) {
         deliveryIconSpan = <CheckCircleIcon />;
       } else if (this.props.sendFailed) {
         deliveryIconSpan = <XCircleIcon />;
         deliveryIconColor = 'FF0000';
         failedSendInfo = <FailedSend item={item} threadInfo={threadInfo} />;
       } else {
         deliveryIconSpan = <CircleIcon />;
       }
       deliveryIcon = (
         <div
           className={css.iconContainer}
           style={{ color: `#${deliveryIconColor}` }}
         >
           {deliveryIconSpan}
         </div>
       );
     }
 
     let inlineEngagement = null;
     const label = getMessageLabel(hasBeenEdited, threadInfo.id);
     if (
       (this.props.containsInlineEngagement && item.threadCreatedFromMessage) ||
       Object.keys(item.reactions).length > 0 ||
       label
     ) {
       const positioning = isViewer ? 'right' : 'left';
       inlineEngagement = (
         <div className={css.sidebarMarginBottom}>
           <InlineEngagement
             messageInfo={item.messageInfo}
             threadInfo={threadInfo}
             sidebarThreadInfo={item.threadCreatedFromMessage}
             reactions={item.reactions}
             positioning={positioning}
             label={label}
           />
         </div>
       );
     }
 
     let avatar;
     if (!isViewer && item.endsCluster) {
       avatar = (
         <div className={css.avatarContainer} onClick={this.props.onClickUser}>
           <UserAvatar size="S" userID={creator.id} />
         </div>
       );
     } else if (!isViewer) {
       avatar = <div className={css.avatarOffset} />;
     }
 
     const pinIconPositioning = isViewer ? 'left' : 'right';
     const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
     const pinIconContainerClassName = classNames({
       [css.pinIconContainer]: true,
       [css.pinIconLeft]: pinIconPositioning === 'left',
       [css.pinIconRight]: pinIconPositioning === 'right',
     });
     let pinIcon;
     if (isPinned && shouldDisplayPinIndicator) {
       pinIcon = (
         <div
           className={pinIconContainerClassName}
           style={{ color: `#${threadColor}` }}
         >
           <CommIcon icon={pinIconName} size={12} />
         </div>
       );
     }
 
     return (
       <React.Fragment>
         {authorName}
         <div className={contentClassName}>
           {avatar}
           <div
             className={messageBoxContainerClassName}
             onMouseEnter={this.props.onMouseEnter}
             onMouseLeave={this.props.onMouseLeave}
           >
             {pinIcon}
             <div
               className={messageBoxClassName}
               style={messageBoxStyle}
               id={getComposedMessageID(item.messageInfo)}
             >
               {this.props.children}
             </div>
           </div>
           {deliveryIcon}
         </div>
         {failedSendInfo}
         {inlineEngagement}
       </React.Fragment>
     );
   }
 }
 
 type ConnectedConfig = React.Config<
   BaseProps,
   typeof ComposedMessage.defaultProps,
 >;
 const ConnectedComposedMessage: React.ComponentType<ConnectedConfig> =
   React.memo<BaseConfig>(function ConnectedComposedMessage(props) {
     const { item, threadInfo } = props;
     const inputState = React.useContext(InputStateContext);
     const { creator } = props.item.messageInfo;
     const { isViewer } = creator;
     const availablePositions = isViewer
       ? availableTooltipPositionsForViewerMessage
       : availableTooltipPositionsForNonViewerMessage;
     const containsInlineEngagement = !!item.threadCreatedFromMessage;
 
     const { onMouseLeave, onMouseEnter } = useMessageTooltip({
       item,
       threadInfo,
       availablePositions,
     });
 
     const shouldShowUsername = !isViewer && item.startsCluster;
     const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
 
     const pushUserProfileModal = usePushUserProfileModal(creator.id);
 
     return (
       <ComposedMessage
         {...props}
         inputState={inputState}
         onMouseLeave={onMouseLeave}
         onMouseEnter={onMouseEnter}
         containsInlineEngagement={containsInlineEngagement}
         stringForUser={stringForUser}
         onClickUser={pushUserProfileModal}
       />
     );
   });
 
 export default ConnectedComposedMessage;
diff --git a/web/chat/edit-message-provider.js b/web/chat/edit-message-provider.js
index 0058d659a..78a9cbcb8 100644
--- a/web/chat/edit-message-provider.js
+++ b/web/chat/edit-message-provider.js
@@ -1,220 +1,219 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import ModalOverlay from 'lib/components/modal-overlay.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types';
 
 import { EditTextMessage } from './edit-text-message.react.js';
 
 export type ModalPosition = {
   +left: number,
   +top: number,
   +width: number,
   +height: number,
 };
 
 export type EditState = {
   +messageInfo: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +editedMessageDraft: ?string,
   +isError: boolean,
   +position?: ModalPosition,
   +maxHeight: number,
 };
 
 export type ScrollToMessageCallback = (
   composedMessageID: string,
   callback: (maxHeight: number) => void,
 ) => void;
 
 type EditModalContextType = {
   +renderEditModal: (params: EditState) => void,
   +clearEditModal: () => void,
   +editState: ?EditState,
   +setDraft: string => void,
   +setError: boolean => void,
   +updatePosition: ModalPosition => void,
   +scrollToMessage: ScrollToMessageCallback,
   +addScrollToMessageListener: ScrollToMessageCallback => void,
   +removeScrollToMessageListener: ScrollToMessageCallback => void,
 };
 
 const EditModalContext: React.Context<EditModalContextType> =
   React.createContext<EditModalContextType>({
     renderEditModal: () => {},
     clearEditModal: () => {},
     editState: null,
     setDraft: () => {},
     setError: () => {},
     updatePosition: () => {},
     scrollToMessage: () => {},
     addScrollToMessageListener: () => {},
     removeScrollToMessageListener: () => {},
   });
 
 type Props = {
   +children: React.Node,
 };
 function EditModalProvider(props: Props): React.Node {
   const { children } = props;
 
   const [editState, setEditState] = React.useState<?EditState>(null);
 
   const [scrollToMessageCallbacks, setScrollToMessageCallbacks] =
     React.useState<Array<ScrollToMessageCallback>>([]);
 
   const clearEditModal = React.useCallback(() => {
     setEditState(null);
   }, []);
 
   const renderEditModal = React.useCallback((newEditState: EditState): void => {
     setEditState(newEditState);
   }, []);
 
   const modal = React.useMemo(() => {
     if (!editState || !editState.position) {
       return null;
     }
 
     const tooltipNode = (
       <EditTextMessage
         item={editState.messageInfo}
         threadInfo={editState.threadInfo}
         background={false}
       />
     );
 
     const tooltipContainerStyle = {
       position: 'fixed',
       left: editState.position.left,
       top: editState.position.top,
       width: editState.position.width,
       height: editState.position.height,
     };
 
     return <div style={tooltipContainerStyle}>{tooltipNode}</div>;
   }, [editState]);
 
   const setDraft = React.useCallback(
     (draft: ?string) => {
       if (!editState) {
         return;
       }
       setEditState({
         ...editState,
         editedMessageDraft: draft,
       });
     },
     [editState, setEditState],
   );
 
   const setError = React.useCallback(
     (isError: boolean) => {
       invariant(editState, 'editState should be set in setError');
       setEditState({
         ...editState,
         isError,
       });
     },
     [editState, setEditState],
   );
 
   const updatePosition = React.useCallback(
     (position: ModalPosition) => {
       invariant(editState, 'editState should be set in updatePosition');
       setEditState({
         ...editState,
         position,
       });
     },
     [editState, setEditState],
   );
 
   const scrollToMessage: ScrollToMessageCallback = React.useCallback(
     (messageKey: string, callback: (maxHeight: number) => void) => {
       scrollToMessageCallbacks.forEach((callback2: ScrollToMessageCallback) =>
         callback2(messageKey, callback),
       );
     },
     [scrollToMessageCallbacks],
   );
 
   const addScrollToMessageListener = React.useCallback(
     (callback: ScrollToMessageCallback): void => {
       setScrollToMessageCallbacks(prevScrollToMessageCallbacks => [
         ...prevScrollToMessageCallbacks,
         callback,
       ]);
     },
     [],
   );
 
   const removeScrollToMessageListener = React.useCallback(
     (callback: ScrollToMessageCallback) => {
       setScrollToMessageCallbacks(prevScrollToMessageCallbacks =>
         prevScrollToMessageCallbacks.filter(
           candidate => candidate !== callback,
         ),
       );
     },
     [],
   );
 
   const value = React.useMemo(
     () => ({
       renderEditModal,
       clearEditModal: clearEditModal,
       editState,
       setDraft,
       setError,
       updatePosition,
       scrollToMessage,
       addScrollToMessageListener,
       removeScrollToMessageListener,
     }),
     [
       renderEditModal,
       clearEditModal,
       editState,
       setDraft,
       setError,
       updatePosition,
       scrollToMessage,
       addScrollToMessageListener,
       removeScrollToMessageListener,
     ],
   );
 
   const modalOverlay = React.useMemo(() => {
     if (!modal) {
       return null;
     }
     return (
       <ModalOverlay
         onClose={clearEditModal}
         backgroundColor="var(--modal-overlay-background-80)"
       >
         {modal}
       </ModalOverlay>
     );
   }, [clearEditModal, modal]);
 
   return (
     <EditModalContext.Provider value={value}>
       {children}
       {modalOverlay}
     </EditModalContext.Provider>
   );
 }
 
 function useEditModalContext(): EditModalContextType {
   const context = React.useContext(EditModalContext);
   invariant(context, 'EditModalContext not found');
   return context;
 }
 
 export { EditModalProvider, useEditModalContext };
diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js
index 76015f08b..43dcc772e 100644
--- a/web/chat/edit-text-message.react.js
+++ b/web/chat/edit-text-message.react.js
@@ -1,197 +1,196 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { XCircle as XCircleIcon } from 'react-feather';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import { trimMessage } from 'lib/shared/message-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import { editBoxBottomRowHeight } from './chat-constants.js';
 import ChatInputTextArea from './chat-input-text-area.react.js';
 import ComposedMessage from './composed-message.react.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import css from './edit-text-message.css';
 import type { ButtonColor } from '../components/button.react.js';
 import Button from '../components/button.react.js';
 
 type Props = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +background: boolean,
 };
 
 const cancelButtonColor: ButtonColor = {
   backgroundColor: 'transparent',
 };
 
 const bottomRowStyle = { height: editBoxBottomRowHeight };
 
 function EditTextMessage(props: Props): React.Node {
   const { background, threadInfo, item } = props;
   const { editState, clearEditModal, setDraft, setError, updatePosition } =
     useEditModalContext();
   const editMessage = useEditMessage();
 
   const myRef = React.useRef<?HTMLDivElement>(null);
 
   const editedMessageDraft = editState?.editedMessageDraft ?? '';
   const threadColor = threadInfo.color;
   const saveButtonColor: ButtonColor = React.useMemo(
     () => ({
       backgroundColor: `#${threadColor}`,
     }),
     [threadColor],
   );
 
   const isMessageEmpty = React.useMemo(
     () => trimMessage(editedMessageDraft) === '',
     [editedMessageDraft],
   );
 
   const isMessageEdited = React.useMemo(() => {
     const { messageInfo } = item;
     if (!messageInfo || !messageInfo.text || !editState) {
       return false;
     }
     if (!editedMessageDraft) {
       return false;
     }
     const trimmedDraft = trimMessage(editedMessageDraft);
     return trimmedDraft !== messageInfo.text;
   }, [editState, editedMessageDraft, item]);
 
   const checkAndEdit = async () => {
     const { id: messageInfoID } = item.messageInfo;
     if (isMessageEmpty) {
       return;
     }
     if (!isMessageEdited) {
       clearEditModal();
       return;
     }
     if (!messageInfoID || !editState?.editedMessageDraft) {
       return;
     }
     try {
       await editMessage(messageInfoID, editState.editedMessageDraft);
       clearEditModal();
     } catch (e) {
       setError(true);
     }
   };
 
   const updateDimensions = useCallback(() => {
     if (!myRef.current || !background) {
       return;
     }
     const { left, top, width, height } = myRef.current.getBoundingClientRect();
     updatePosition({
       left,
       top,
       width,
       height,
     });
   }, [background, updatePosition]);
 
   const preventCloseTab = React.useCallback(
     (event: BeforeUnloadEvent) => {
       if (!isMessageEdited) {
         return null;
       }
       event.preventDefault();
       return (event.returnValue = '');
     },
     [isMessageEdited],
   );
 
   React.useEffect(() => {
     if (!background) {
       return undefined;
     }
     window.addEventListener('resize', updateDimensions);
     window.addEventListener('beforeunload', preventCloseTab);
     return () => {
       window.removeEventListener('resize', updateDimensions);
       window.removeEventListener('beforeunload', preventCloseTab);
     };
   }, [background, preventCloseTab, updateDimensions]);
 
   React.useEffect(() => {
     updateDimensions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   let editFailed;
   if (editState?.isError) {
     editFailed = (
       <div className={css.failedText}>
         <XCircleIcon className={css.icon} />
         <div className={css.errorColor}>Edit failed.</div>
         <div className={css.whiteColor}>Please try again.</div>
       </div>
     );
   }
 
   const containerStyle = classNames(css.editMessage, {
     [css.backgroundEditMessage]: background,
   });
 
   const maxTextAreaHeight = editState?.maxHeight;
 
   return (
     <div className={containerStyle} ref={myRef}>
       <ChatInputTextArea
         focus={!background}
         currentText={editedMessageDraft}
         setCurrentText={setDraft}
         onChangePosition={updateDimensions}
         send={checkAndEdit}
         maxHeight={maxTextAreaHeight}
       />
       <div className={css.bottomRow} style={bottomRowStyle}>
         {editFailed}
         <div className={css.buttons}>
           <Button
             className={[css.saveButton, css.smallButton]}
             variant="filled"
             buttonColor={saveButtonColor}
             onClick={checkAndEdit}
             disabled={isMessageEmpty}
           >
             Save (enter)
           </Button>
           <Button
             className={css.smallButton}
             variant="filled"
             buttonColor={cancelButtonColor}
             onClick={clearEditModal}
           >
             Cancel (esc)
           </Button>
         </div>
       </div>
     </div>
   );
 }
 
 const ComposedEditTextMessage: React.ComponentType<Props> = React.memo<Props>(
   function ComposedEditTextMessage(props) {
     const { background, ...restProps } = props;
     return (
       <ComposedMessage
         {...restProps}
         sendFailed={false}
         shouldDisplayPinIndicator={false}
       >
         <EditTextMessage {...props} />
       </ComposedMessage>
     );
   },
 );
 
 export { EditTextMessage, ComposedEditTextMessage };
diff --git a/web/chat/failed-send.react.js b/web/chat/failed-send.react.js
index 7b6adba5e..17630977e 100644
--- a/web/chat/failed-send.react.js
+++ b/web/chat/failed-send.react.js
@@ -1,163 +1,162 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { messageID } from 'lib/shared/message-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   assertComposableMessageType,
   type RawComposableMessageInfo,
 } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './chat-message-list.css';
 import multimediaMessageSendFailed from './multimedia-message-send-failed.js';
 import textMessageSendFailed from './text-message-send-failed.js';
 import Button from '../components/button.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type BaseProps = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +rawMessageInfo: RawComposableMessageInfo,
   +inputState: ?InputState,
-  +parentThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
+  +parentThreadInfo: ?ThreadInfo,
 };
 class FailedSend extends React.PureComponent<Props> {
   retryingText = false;
   retryingMedia = false;
 
   componentDidUpdate(prevProps: Props) {
     if (
       (this.props.rawMessageInfo.type === messageTypes.IMAGES ||
         this.props.rawMessageInfo.type === messageTypes.MULTIMEDIA) &&
       (prevProps.rawMessageInfo.type === messageTypes.IMAGES ||
         prevProps.rawMessageInfo.type === messageTypes.MULTIMEDIA)
     ) {
       const { inputState } = this.props;
       const prevInputState = prevProps.inputState;
       invariant(
         inputState && prevInputState,
         'inputState should be set in FailedSend',
       );
       const isFailed = multimediaMessageSendFailed(this.props.item, inputState);
       const wasFailed = multimediaMessageSendFailed(
         prevProps.item,
         prevInputState,
       );
       const isDone =
         this.props.item.messageInfo.id !== null &&
         this.props.item.messageInfo.id !== undefined;
       const wasDone =
         prevProps.item.messageInfo.id !== null &&
         prevProps.item.messageInfo.id !== undefined;
       if ((isFailed && !wasFailed) || (isDone && !wasDone)) {
         this.retryingMedia = false;
       }
     } else if (
       this.props.rawMessageInfo.type === messageTypes.TEXT &&
       prevProps.rawMessageInfo.type === messageTypes.TEXT
     ) {
       const isFailed = textMessageSendFailed(this.props.item);
       const wasFailed = textMessageSendFailed(prevProps.item);
       const isDone =
         this.props.item.messageInfo.id !== null &&
         this.props.item.messageInfo.id !== undefined;
       const wasDone =
         prevProps.item.messageInfo.id !== null &&
         prevProps.item.messageInfo.id !== undefined;
       if ((isFailed && !wasFailed) || (isDone && !wasDone)) {
         this.retryingText = false;
       }
     }
   }
 
   render(): React.Node {
     return (
       <div className={css.failedSend}>
         <span className={css.deliveryFailed}>Delivery failed.</span>
         <Button
           variant="text"
           buttonColor={{
             color: `#${this.props.threadInfo.color}`,
           }}
           onClick={this.retrySend}
         >
           <span className={css.retryButtonText}>Retry?</span>
         </Button>
       </div>
     );
   }
 
   retrySend = () => {
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set in FailedSend');
 
     const { rawMessageInfo } = this.props;
     if (rawMessageInfo.type === messageTypes.TEXT) {
       if (this.retryingText) {
         return;
       }
       this.retryingText = true;
       void inputState.sendTextMessage(
         {
           ...rawMessageInfo,
           time: Date.now(),
         },
         this.props.threadInfo,
         this.props.parentThreadInfo,
       );
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       const { localID } = rawMessageInfo;
       invariant(localID, 'failed RawMessageInfo should have localID');
       if (this.retryingMedia) {
         return;
       }
       this.retryingMedia = true;
       inputState.retryMultimediaMessage(localID, this.props.threadInfo);
     }
   };
 }
 
 const ConnectedFailedSend: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedFailedSend(props) {
     const { messageInfo } = props.item;
     assertComposableMessageType(messageInfo.type);
     const id = messageID(messageInfo);
     const rawMessageInfo = useSelector(
       state => state.messageStore.messages[id],
     );
     assertComposableMessageType(rawMessageInfo.type);
     invariant(
       rawMessageInfo.type === messageTypes.TEXT ||
         rawMessageInfo.type === messageTypes.IMAGES ||
         rawMessageInfo.type === messageTypes.MULTIMEDIA,
       'FailedSend should only be used for composable message types',
     );
     const inputState = React.useContext(InputStateContext);
     const { parentThreadID } = props.threadInfo;
     const parentThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
     return (
       <FailedSend
         {...props}
         rawMessageInfo={rawMessageInfo}
         inputState={inputState}
         parentThreadInfo={parentThreadInfo}
       />
     );
   });
 
 export default ConnectedFailedSend;
diff --git a/web/chat/message.react.js b/web/chat/message.react.js
index cc0cdf413..4b6b7ec34 100644
--- a/web/chat/message.react.js
+++ b/web/chat/message.react.js
@@ -1,81 +1,80 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { longAbsoluteDate } from 'lib/utils/date-utils.js';
 
 import css from './chat-message-list.css';
 import { useEditModalContext } from './edit-message-provider.js';
 import { ComposedEditTextMessage } from './edit-text-message.react.js';
 import MultimediaMessage from './multimedia-message.react.js';
 import RobotextMessage from './robotext-message.react.js';
 import TextMessage from './text-message.react.js';
 
 type Props = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +shouldDisplayPinIndicator: boolean,
 };
 function Message(props: Props): React.Node {
   const { item } = props;
 
   let conversationHeader = null;
   if (item.startsConversation) {
     conversationHeader = (
       <div className={css.conversationHeader}>
         {longAbsoluteDate(item.messageInfo.time)}
       </div>
     );
   }
 
   const { editState } = useEditModalContext();
 
   let message;
   if (
     item.messageInfo.id &&
     editState?.messageInfo.messageInfo?.id === item.messageInfo.id
   ) {
     message = (
       <ComposedEditTextMessage
         item={props.item}
         threadInfo={props.threadInfo}
         background={true}
       />
     );
   } else if (item.messageInfo.type === messageTypes.TEXT) {
     message = (
       <TextMessage
         item={item}
         threadInfo={props.threadInfo}
         shouldDisplayPinIndicator={props.shouldDisplayPinIndicator}
       />
     );
   } else if (
     item.messageInfo.type === messageTypes.IMAGES ||
     item.messageInfo.type === messageTypes.MULTIMEDIA
   ) {
     message = (
       <MultimediaMessage
         item={item}
         threadInfo={props.threadInfo}
         shouldDisplayPinIndicator={props.shouldDisplayPinIndicator}
       />
     );
   } else {
     invariant(item.robotext, "Flow can't handle our fancy types :(");
     message = <RobotextMessage item={item} threadInfo={props.threadInfo} />;
   }
   return (
     <div className={css.message}>
       {conversationHeader}
       {message}
     </div>
   );
 }
 
 export default Message;
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
index 316d60738..963b31458 100644
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -1,112 +1,111 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   encryptedMediaBlobURI,
   encryptedVideoThumbnailBlobURI,
 } from 'lib/media/media-utils.js';
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './chat-message-list.css';
 import ComposedMessage from './composed-message.react.js';
 import sendFailed from './multimedia-message-send-failed.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import Multimedia from '../media/multimedia.react.js';
 
 type BaseProps = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +shouldDisplayPinIndicator: boolean,
 };
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
 };
 class MultimediaMessage extends React.PureComponent<Props> {
   render(): React.Node {
     const { item, inputState } = this.props;
     invariant(
       item.messageInfo.type === messageTypes.IMAGES ||
         item.messageInfo.type === messageTypes.MULTIMEDIA,
       'MultimediaMessage should only be used for multimedia messages',
     );
     const { localID, media } = item.messageInfo;
 
     invariant(inputState, 'inputState should be set in MultimediaMessage');
     const pendingUploads = localID ? inputState.assignedUploads[localID] : null;
     const multimedia = [];
     for (const singleMedia of media) {
       const pendingUpload = pendingUploads
         ? pendingUploads.find(upload => upload.localID === singleMedia.id)
         : null;
       const thumbHash = singleMedia.thumbHash ?? singleMedia.thumbnailThumbHash;
       let mediaSource;
       if (singleMedia.type === 'photo' || singleMedia.type === 'video') {
         const { type, uri, thumbnailURI, dimensions } = singleMedia;
         mediaSource = { type, uri, thumbHash, thumbnailURI, dimensions };
       } else {
         const { type, encryptionKey, thumbnailEncryptionKey, dimensions } =
           singleMedia;
         const blobURI = encryptedMediaBlobURI(singleMedia);
         const thumbnailBlobURI =
           singleMedia.type === 'encrypted_video'
             ? encryptedVideoThumbnailBlobURI(singleMedia)
             : null;
         mediaSource = {
           type,
           blobURI,
           encryptionKey,
           thumbnailBlobURI,
           thumbnailEncryptionKey,
           dimensions,
           thumbHash,
         };
       }
 
       multimedia.push(
         <Multimedia
           mediaSource={mediaSource}
           pendingUpload={pendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={singleMedia.id}
         />,
       );
     }
 
     invariant(multimedia.length > 0, 'should be at least one multimedia...');
     const content =
       multimedia.length > 1 ? (
         <div className={css.imageGrid}>{multimedia}</div>
       ) : (
         multimedia
       );
 
     return (
       <ComposedMessage
         item={item}
         threadInfo={this.props.threadInfo}
         shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator}
         sendFailed={sendFailed(item, inputState)}
         fixedWidth={multimedia.length > 1}
         borderRadius={16}
       >
         {content}
       </ComposedMessage>
     );
   }
 }
 
 const ConnectedMultimediaMessage: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMultimediaMessage(props) {
     const inputState = React.useContext(InputStateContext);
     return <MultimediaMessage {...props} inputState={inputState} />;
   });
 
 export default ConnectedMultimediaMessage;
diff --git a/web/chat/pinned-messages-banner.react.js b/web/chat/pinned-messages-banner.react.js
index 0812bd64e..2cf4d30d4 100644
--- a/web/chat/pinned-messages-banner.react.js
+++ b/web/chat/pinned-messages-banner.react.js
@@ -1,56 +1,55 @@
 // @flow
 
 import * as React from 'react';
 import { ChevronRight } from 'react-feather';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
 
 import css from './pinned-messages-banner.css';
 import { InputStateContext } from '../input/input-state.js';
 import PinnedMessagesModal from '../modals/chat/pinned-messages-modal.react.js';
 
 type Props = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 function PinnedMessagesBanner(props: Props): React.Node {
   const { threadInfo } = props;
 
   const { pushModal } = useModalContext();
 
   const inputState = React.useContext(InputStateContext);
 
   const pushThreadPinsModal = React.useCallback(() => {
     pushModal(
       <InputStateContext.Provider value={inputState}>
         <PinnedMessagesModal threadInfo={threadInfo} />
       </InputStateContext.Provider>,
     );
   }, [pushModal, inputState, threadInfo]);
 
   const pinnedMessagesBanner = React.useMemo(() => {
     const bannerText =
       !!threadInfo.pinnedCount &&
       pinnedMessageCountText(threadInfo.pinnedCount);
 
     if (!bannerText) {
       return null;
     }
 
     return (
       <div className={css.container}>
         <a className={css.pinnedCountText} onClick={pushThreadPinsModal}>
           {bannerText}
           <ChevronRight size={14} className={css.chevronRight} />
         </a>
       </div>
     );
   }, [pushThreadPinsModal, threadInfo.pinnedCount]);
 
   return pinnedMessagesBanner;
 }
 
 export default PinnedMessagesBanner;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
index 800a0822e..ce5b75e48 100644
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -1,160 +1,160 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type RobotextChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import {
   entityTextToReact,
   useENSNamesForEntityText,
 } from 'lib/utils/entity-text.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import InlineEngagement from './inline-engagement.react.js';
 import css from './robotext-message.css';
 import Markdown from '../markdown/markdown.react.js';
 import { linkRules } from '../markdown/rules.react.js';
 import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js';
 import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 const availableTooltipPositionsForRobotext = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.RIGHT_BOTTOM,
 ];
 
 type Props = {
   +item: RobotextChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 function RobotextMessage(props: Props): React.Node {
   let inlineEngagement;
   const { item, threadInfo } = props;
   const { threadCreatedFromMessage, reactions } = item;
   if (threadCreatedFromMessage || Object.keys(reactions).length > 0) {
     inlineEngagement = (
       <div className={css.sidebarMarginTop}>
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={threadInfo}
           sidebarThreadInfo={threadCreatedFromMessage}
           reactions={reactions}
           positioning="center"
         />
       </div>
     );
   }
 
   const { messageInfo, robotext } = item;
   const { threadID } = messageInfo;
   const robotextWithENSNames = useENSNamesForEntityText(robotext);
   invariant(
     robotextWithENSNames,
     'useENSNamesForEntityText only returns falsey when passed falsey',
   );
   const textParts = React.useMemo(() => {
     return entityTextToReact(robotextWithENSNames, threadID, {
       renderText: ({ text }) => (
         <Markdown rules={linkRules(false)}>{text}</Markdown>
       ),
       renderThread: ({ id, name }) => <ThreadEntity id={id} name={name} />,
       renderUser: ({ userID, usernameText }) => (
         <UserEntity userID={userID} usernameText={usernameText} />
       ),
       renderColor: ({ hex }) => <ColorEntity color={hex} />,
     });
   }, [robotextWithENSNames, threadID]);
 
   const { onMouseEnter, onMouseLeave } = useMessageTooltip({
     item,
     threadInfo,
     availablePositions: availableTooltipPositionsForRobotext,
   });
 
   return (
     <div className={css.robotextContainer}>
       <div
         className={css.innerRobotextContainer}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
         <span>{textParts}</span>
       </div>
       {inlineEngagement}
     </div>
   );
 }
 
 type BaseInnerThreadEntityProps = {
   +id: string,
   +name: string,
 };
 type InnerThreadEntityProps = {
   ...BaseInnerThreadEntityProps,
   +threadInfo: LegacyThreadInfo | ThreadInfo,
   +dispatch: Dispatch,
 };
 class InnerThreadEntity extends React.PureComponent<InnerThreadEntityProps> {
   render(): React.Node {
     return <a onClick={this.onClickThread}>{this.props.name}</a>;
   }
 
   onClickThread = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const id = this.props.id;
     this.props.dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: id,
       },
     });
   };
 }
 const ThreadEntity = React.memo<BaseInnerThreadEntityProps>(
   function ConnectedInnerThreadEntity(props: BaseInnerThreadEntityProps) {
     const { id } = props;
     const threadInfo = useSelector(state => threadInfoSelector(state)[id]);
     const dispatch = useDispatch();
 
     return (
       <InnerThreadEntity
         {...props}
         threadInfo={threadInfo}
         dispatch={dispatch}
       />
     );
   },
 );
 
 type UserEntityProps = {
   +userID: string,
   +usernameText: string,
 };
 
 function UserEntity(props: UserEntityProps) {
   const { userID, usernameText } = props;
 
   const pushUserProfileModal = usePushUserProfileModal(userID);
 
   return <a onClick={pushUserProfileModal}>{usernameText}</a>;
 }
 
 function ColorEntity(props: { color: string }) {
   const colorStyle = { color: props.color };
   return <span style={colorStyle}>{props.color}</span>;
 }
 
 const MemoizedRobotextMessage: React.ComponentType<Props> =
   React.memo<Props>(RobotextMessage);
 
 export default MemoizedRobotextMessage;
diff --git a/web/chat/text-message.react.js b/web/chat/text-message.react.js
index d6b6a31b6..a25210569 100644
--- a/web/chat/text-message.react.js
+++ b/web/chat/text-message.react.js
@@ -1,70 +1,69 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { onlyEmojiRegex } from 'lib/shared/emojis.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './chat-message-list.css';
 import ComposedMessage from './composed-message.react.js';
 import { MessageListContext } from './message-list-types.js';
 import textMessageSendFailed from './text-message-send-failed.js';
 import Markdown from '../markdown/markdown.react.js';
 
 type Props = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +shouldDisplayPinIndicator: boolean,
 };
 function TextMessage(props: Props): React.Node {
   invariant(
     props.item.messageInfo.type === messageTypes.TEXT,
     'TextMessage should only be used for messageTypes.TEXT',
   );
   const {
     text,
     creator: { isViewer },
   } = props.item.messageInfo;
 
   const messageStyle: { backgroundColor?: string } = {};
   let darkColor = true;
   if (isViewer) {
     const threadColor = props.threadInfo.color;
     darkColor = colorIsDark(threadColor);
     messageStyle.backgroundColor = `#${threadColor}`;
   }
 
   const onlyEmoji = onlyEmojiRegex.test(text);
   const messageClassName = classNames({
     [css.textMessage]: true,
     [css.textMessageDefaultBackground]: !isViewer,
     [css.normalTextMessage]: !onlyEmoji,
     [css.emojiOnlyTextMessage]: onlyEmoji,
     [css.darkTextMessage]: darkColor,
     [css.lightTextMessage]: !darkColor,
   });
 
   const messageListContext = React.useContext(MessageListContext);
   invariant(messageListContext, 'DummyTextNode should have MessageListContext');
   const rules = messageListContext.getTextMessageMarkdownRules(darkColor);
   return (
     <ComposedMessage
       item={props.item}
       threadInfo={props.threadInfo}
       shouldDisplayPinIndicator={props.shouldDisplayPinIndicator}
       sendFailed={textMessageSendFailed(props.item)}
     >
       <div className={messageClassName} style={messageStyle}>
         <Markdown rules={rules}>{text}</Markdown>
       </div>
     </ComposedMessage>
   );
 }
 
 export default TextMessage;
diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
index fe4fd7420..137005bcb 100644
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -1,315 +1,314 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   leaveThreadActionTypes,
   useLeaveThread,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import { childThreadInfos } from 'lib/selectors/thread-selectors.js';
 import {
   threadHasPermission,
   threadIsChannel,
   viewerIsMember,
 } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './thread-menu.css';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react.js';
 import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react.js';
 import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react.js';
 import ThreadSettingsMediaGalleryModal from '../modals/threads/gallery/thread-settings-media-gallery.react.js';
 import ThreadMembersModal from '../modals/threads/members/members-modal.react.js';
 import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react.js';
 import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react.js';
 import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type ThreadMenuProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 function ThreadMenu(props: ThreadMenuProps): React.Node {
   const { pushModal, popModal } = useModalContext();
   const { threadInfo } = props;
   const { onPromoteSidebar, canPromoteSidebar } = usePromoteSidebar(threadInfo);
 
   const onClickSettings = React.useCallback(
     () => pushModal(<ThreadSettingsModal threadID={threadInfo.id} />),
     [pushModal, threadInfo.id],
   );
 
   const settingsItem = React.useMemo(() => {
     return (
       <MenuItem
         key="settings"
         text="Settings"
         icon="settings"
         onClick={onClickSettings}
       />
     );
   }, [onClickSettings]);
 
   const onClickMembers = React.useCallback(
     () =>
       pushModal(
         <ThreadMembersModal threadID={threadInfo.id} onClose={popModal} />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
   const membersItem = React.useMemo(() => {
     if (threadInfo.type === threadTypes.PERSONAL) {
       return null;
     }
     return (
       <MenuItem
         key="members"
         text="Members"
         icon="users"
         onClick={onClickMembers}
       />
     );
   }, [onClickMembers, threadInfo.type]);
 
   const onClickThreadMediaGallery = React.useCallback(
     () =>
       pushModal(
         <ThreadSettingsMediaGalleryModal
           onClose={popModal}
           parentThreadInfo={threadInfo}
           limit={36}
           activeTab="All"
         />,
       ),
     [popModal, pushModal, threadInfo],
   );
 
   const threadMediaGalleryItem = React.useMemo(
     () => (
       <MenuItem
         key="threadMediaGallery"
         text="Media"
         icon="image-1"
         onClick={onClickThreadMediaGallery}
       />
     ),
     [onClickThreadMediaGallery],
   );
 
   const childThreads = useSelector(
     state => childThreadInfos(state)[threadInfo.id],
   );
 
   const hasSidebars = React.useMemo(() => {
     return childThreads?.some(
       childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
     );
   }, [childThreads]);
 
   const onClickSidebars = React.useCallback(
     () =>
       pushModal(<SidebarsModal threadID={threadInfo.id} onClose={popModal} />),
     [popModal, pushModal, threadInfo.id],
   );
 
   const sidebarItem = React.useMemo(() => {
     if (!hasSidebars) {
       return null;
     }
     return (
       <MenuItem
         key="sidebars"
         text="Threads"
         icon="arrow-right"
         onClick={onClickSidebars}
       />
     );
   }, [hasSidebars, onClickSidebars]);
 
   const canCreateSubchannels = React.useMemo(
     () => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS),
     [threadInfo],
   );
 
   const hasSubchannels = React.useMemo(() => {
     return !!childThreads?.some(threadIsChannel);
   }, [childThreads]);
 
   const onClickViewSubchannels = React.useCallback(
     () =>
       pushModal(
         <SubchannelsModal threadID={threadInfo.id} onClose={popModal} />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
 
   const viewSubchannelsItem = React.useMemo(() => {
     if (!hasSubchannels) {
       return null;
     }
     return (
       <MenuItem
         key="subchannels"
         text="Subchannels"
         icon="message-square"
         onClick={onClickViewSubchannels}
       />
     );
   }, [hasSubchannels, onClickViewSubchannels]);
 
   const onClickCreateSubchannel = React.useCallback(
     () =>
       pushModal(
         <ComposeSubchannelModal
           parentThreadInfo={threadInfo}
           onClose={popModal}
         />,
       ),
     [popModal, pushModal, threadInfo],
   );
 
   const createSubchannelsItem = React.useMemo(() => {
     if (!canCreateSubchannels) {
       return null;
     }
     return (
       <MenuItem
         key="newSubchannel"
         text="Create new subchannel"
         icon="plus-circle"
         onClick={onClickCreateSubchannel}
       />
     );
   }, [canCreateSubchannels, onClickCreateSubchannel]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callLeaveThread = useLeaveThread();
 
   const onConfirmLeaveThread = React.useCallback(() => {
     void dispatchActionPromise(
       leaveThreadActionTypes,
       callLeaveThread({ threadID: threadInfo.id }),
     );
     popModal();
   }, [callLeaveThread, popModal, dispatchActionPromise, threadInfo.id]);
 
   const onClickLeaveThread = React.useCallback(
     () =>
       pushModal(
         <ConfirmLeaveThreadModal
           threadInfo={threadInfo}
           onClose={popModal}
           onConfirm={onConfirmLeaveThread}
         />,
       ),
     [popModal, onConfirmLeaveThread, pushModal, threadInfo],
   );
 
   const leaveThreadItem = React.useMemo(() => {
     const canLeaveThread = threadHasPermission(
       threadInfo,
       threadPermissions.LEAVE_THREAD,
     );
     if (!viewerIsMember(threadInfo) || !canLeaveThread) {
       return null;
     }
     return (
       <MenuItem
         key="leave"
         text="Leave chat"
         icon="logout"
         dangerous
         onClick={onClickLeaveThread}
       />
     );
   }, [onClickLeaveThread, threadInfo]);
 
   const onClickPromoteSidebarToThread = React.useCallback(
     () =>
       pushModal(
         <SidebarPromoteModal
           threadInfo={threadInfo}
           onClose={popModal}
           onConfirm={onPromoteSidebar}
         />,
       ),
     [pushModal, threadInfo, popModal, onPromoteSidebar],
   );
 
   const promoteSidebar = React.useMemo(() => {
     return (
       <MenuItem
         key="promote"
         text="Promote to channel"
         icon="message-square-lines"
         onClick={onClickPromoteSidebarToThread}
       />
     );
   }, [onClickPromoteSidebarToThread]);
 
   const onClickNotifications = React.useCallback(() => {
     pushModal(
       <ThreadNotificationsModal threadID={threadInfo.id} onClose={popModal} />,
     );
   }, [popModal, pushModal, threadInfo.id]);
 
   const notificationsItem = React.useMemo(() => {
     if (!viewerIsMember(threadInfo)) {
       return null;
     }
     return (
       <MenuItem
         key="notifications"
         text="Notifications"
         icon="bell"
         onClick={onClickNotifications}
       />
     );
   }, [onClickNotifications, threadInfo]);
 
   const menuItems = React.useMemo(() => {
     const separator = <hr key="separator" className={css.separator} />;
 
     const items = [
       settingsItem,
       notificationsItem,
       membersItem,
       threadMediaGalleryItem,
       sidebarItem,
       viewSubchannelsItem,
       createSubchannelsItem,
       leaveThreadItem && separator,
       canPromoteSidebar && promoteSidebar,
       leaveThreadItem,
     ];
     return items.filter(Boolean);
   }, [
     settingsItem,
     notificationsItem,
     membersItem,
     threadMediaGalleryItem,
     sidebarItem,
     viewSubchannelsItem,
     promoteSidebar,
     createSubchannelsItem,
     leaveThreadItem,
     canPromoteSidebar,
   ]);
   const icon = React.useMemo(
     () => <SWMansionIcon icon="menu-vertical" size={20} />,
     [],
   );
   return <Menu icon={icon}>{menuItems}</Menu>;
 }
 
 export default ThreadMenu;
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
index 81350e2b4..9bdfe5bb1 100644
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -1,69 +1,68 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import PinnedMessagesBanner from './pinned-messages-banner.react.js';
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import Button from '../components/button.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import MessageSearchModal from '../modals/search/message-search-modal.react.js';
 
 type ThreadTopBarProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 function ThreadTopBar(props: ThreadTopBarProps): React.Node {
   const { threadInfo } = props;
   const { pushModal } = useModalContext();
 
   let threadMenu = null;
   if (!threadIsPending(threadInfo.id)) {
     threadMenu = <ThreadMenu threadInfo={threadInfo} />;
   }
 
   const inputState = React.useContext(InputStateContext);
 
   const onClickSearch = React.useCallback(
     () =>
       pushModal(
         <InputStateContext.Provider value={inputState}>
           <MessageSearchModal threadInfo={threadInfo} />
         </InputStateContext.Provider>,
       ),
     [inputState, pushModal, threadInfo],
   );
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   return (
     <>
       <div className={css.topBarContainer}>
         <div className={css.topBarThreadInfo}>
           <ThreadAvatar size="S" threadInfo={threadInfo} />
           <div className={css.threadTitle}>{uiName}</div>
         </div>
         <div className={css.buttons}>
           <Button className={css.button} onClick={onClickSearch}>
             <SWMansionIcon
               size={24}
               icon="search"
               className={css.searchButtonIcon}
             />
           </Button>
           {threadMenu}
         </div>
       </div>
       <PinnedMessagesBanner threadInfo={threadInfo} />
     </>
   );
 }
 
 export default ThreadTopBar;
diff --git a/web/components/message-result.react.js b/web/components/message-result.react.js
index 0240282db..dc674e712 100644
--- a/web/components/message-result.react.js
+++ b/web/components/message-result.react.js
@@ -1,71 +1,70 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { longAbsoluteDate } from 'lib/utils/date-utils.js';
 
 import css from './message-result.css';
 import { MessageListContext } from '../chat/message-list-types.js';
 import Message from '../chat/message.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 
 type MessageResultProps = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +scrollable: boolean,
 };
 
 function MessageResult(props: MessageResultProps): React.Node {
   const { item, threadInfo, scrollable } = props;
 
   const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
   const getTextMessageMarkdownRules = useTextMessageRulesFunc(
     threadInfo,
     chatMentionCandidates,
   );
   const messageListContext = React.useMemo(() => {
     if (!getTextMessageMarkdownRules) {
       return undefined;
     }
     return { getTextMessageMarkdownRules };
   }, [getTextMessageMarkdownRules]);
 
   const shouldShowUsername = !item.startsConversation && !item.startsCluster;
   const username = useStringForUser(
     shouldShowUsername ? item.messageInfo.creator : null,
   );
 
   const messageContainerClassNames = classNames({
     [css.messageContainer]: true,
     [css.messageContainerOverflow]: scrollable,
   });
 
   return (
     <div className={messageContainerClassNames}>
       <div>
         <div className={css.creator}>{username}</div>
         <div className={css.messageContent}>
           <MessageListContext.Provider value={messageListContext}>
             <Message
               item={item}
               threadInfo={threadInfo}
               shouldDisplayPinIndicator={false}
               key={item.messageInfo.id}
             />
           </MessageListContext.Provider>
         </div>
         <div className={css.messageDate}>
           {longAbsoluteDate(item.messageInfo.time)}
         </div>
       </div>
     </div>
   );
 }
 
 export default MessageResult;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 83d2799f9..3386b6335 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1713 +1,1713 @@
 // @flow
 
 import invariant from 'invariant';
 import _groupBy from 'lodash/fp/groupBy.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import _omit from 'lodash/fp/omit.js';
 import _partition from 'lodash/fp/partition.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import type {
   LegacySendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   sendTextMessageActionTypes,
   useLegacySendMultimediaMessage,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   type BlobServiceUploadAction,
   type DeleteUploadInput,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   updateMultimediaMessageMediaActionType,
   uploadMultimedia,
   useBlobServiceUpload,
   useDeleteUpload,
 } from 'lib/actions/upload-actions.js';
 import {
   type PushModal,
   useModalContext,
 } from 'lib/components/modal-provider.react.js';
 import blobService from 'lib/facts/blob-service.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { getNextLocalUploadID } from 'lib/media/media-utils.js';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
   threadIsPending,
   threadIsPendingSidebar,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   MediaMission,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMissionStep,
   UploadMultimediaResult,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessagePayload,
   type SendMessageResult,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { reportTypes } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type LegacyThreadInfo,
 } from 'lib/types/thread-types.js';
 import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
 import {
   blobHashFromBlobServiceURI,
   isBlobServiceURI,
   makeBlobServiceEndpointURL,
 } from 'lib/utils/blob-service.js';
 import { getConfig } from 'lib/utils/config.js';
 import { cloneError, getMessageForException } from 'lib/utils/errors.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { generateReportID } from 'lib/utils/report-utils.js';
 
 import {
   type BaseInputState,
   type InputState,
   InputStateContext,
   type PendingMultimediaUpload,
   type TypeaheadInputState,
   type TypeaheadState,
 } from './input-state.js';
 import { encryptFile } from '../media/encryption-utils.js';
 import { generateThumbHash } from '../media/image-utils.js';
 import {
   preloadImage,
   preloadMediaResource,
   validateFile,
 } from '../media/media-utils.js';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 
 type CombinedInputState = {
   +inputBaseState: BaseInputState,
   +typeaheadState: TypeaheadInputState,
 };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +deleteUpload: (input: DeleteUploadInput) => Promise<void>,
   +sendMultimediaMessage: (
     input: LegacySendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type WritableState = {
   pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   textCursorPositions: { [threadID: string]: number },
   typeaheadState: TypeaheadState,
 };
 type State = $ReadOnly<WritableState>;
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
       keepUpdatingThreadMembers: true,
       frozenUserMentionsCandidates: [],
       frozenChatMentionsCandidates: {},
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations: Map<string, Promise<string>> = new Map<
     string,
     Promise<string>,
   >();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs: Set<string> = new Set<string>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState: { [string]: T } = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State): ?Partial<State> {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate: Partial<WritableState> = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State): Set<string> {
     const completed = new Map<string, boolean>();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set<string>();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set<string>();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map<
       string,
       {
         +threadID: string,
         +shouldEncrypt: boolean,
         +uploads: PendingMultimediaUpload[],
       },
     >();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         const { shouldEncrypt } = upload;
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, shouldEncrypt, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         if (shouldEncrypt !== assignedUploads.shouldEncrypt) {
           console.warn(
             `skipping upload ${localUploadID} ` +
               "because shouldEncrypt doesn't match",
           );
           continue;
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
     const newMessageInfos = new Map<string, RawMultimediaMessageInfo>();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID, shouldEncrypt } = assignedUploads;
       const creatorID = this.props.viewerID;
       invariant(creatorID, 'need viewer ID in order to send a message');
       const media = uploads.map(
         ({
           localID,
           serverID,
           uri,
           mediaType,
           dimensions,
           encryptionKey,
           thumbHash,
         }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo' || mediaType === 'encrypted_photo',
             "web InputStateContainer can't handle video",
           );
           if (
             mediaType !== 'encrypted_photo' &&
             mediaType !== 'encrypted_video'
           ) {
             return {
               id: serverID ? serverID : localID,
               uri,
               type: 'photo',
               dimensions: shimmedDimensions,
               thumbHash,
             };
           }
           invariant(
             encryptionKey,
             'encrypted media must have an encryption key',
           );
           return {
             id: serverID ? serverID : localID,
             blobURI: uri,
             type: 'encrypted_photo',
             encryptionKey,
             dimensions: shimmedDimensions,
             thumbHash,
           };
         },
       );
       const messageInfo = createMediaMessageInfo(
         {
           localID: messageID,
           threadID,
           creatorID,
           media,
         },
         { forceMultimediaMessageType: shouldEncrypt },
       );
       newMessageInfos.set(messageID, messageInfo);
     }
 
     const currentlyCompleted = InputStateContainer.completedMessageIDs(
       this.state,
     );
     const previouslyCompleted =
       InputStateContainer.completedMessageIDs(prevState);
     for (const messageID of currentlyCompleted) {
       if (previouslyCompleted.has(messageID)) {
         continue;
       }
       let rawMessageInfo = newMessageInfos.get(messageID);
       if (rawMessageInfo) {
         newMessageInfos.delete(messageID);
       } else {
         rawMessageInfo = this.getRawMultimediaMessageInfo(messageID);
       }
       void this.sendMultimediaMessage(rawMessageInfo);
     }
 
     for (const [, messageInfo] of newMessageInfos) {
       this.props.dispatch({
         type: createLocalMessageActionType,
         payload: messageInfo,
       });
     }
   }
 
   getRawMultimediaMessageInfo(
     localMessageID: string,
   ): RawMultimediaMessageInfo {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
     invariant(
       rawMessageInfo.type === messageTypes.IMAGES ||
         rawMessageInfo.type === messageTypes.MULTIMEDIA,
       `rawMessageInfo ${localMessageID} should be multimedia`,
     );
     return rawMessageInfo;
   }
 
   shouldEncryptMedia(threadInfo: LegacyThreadInfo | ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   async sendMultimediaMessage(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<void> {
     if (!threadIsPending(messageInfo.threadID)) {
       void this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     // While the thread was being created, the image preload may have completed,
     // and we might have a finalized URI now. So we fetch from Redux again
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should exist for locally-created RawMessageInfo',
     );
     const latestMessageInfo = this.getRawMultimediaMessageInfo(localID);
 
     // Conditional is necessary for Flow
     let newMessageInfo;
     if (latestMessageInfo.type === messageTypes.MULTIMEDIA) {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     } else {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     }
 
     void this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaIDs = [];
     for (const { id } of messageInfo.media) {
       mediaIDs.push(id);
     }
     try {
       const result = await this.props.sendMultimediaMessage({
         threadID,
         localID,
         mediaIDs,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       this.setState(prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const newUploads: { [string]: PendingMultimediaUpload } = {};
         for (const localUploadID in prevUploads) {
           const upload = prevUploads[localUploadID];
           if (upload.messageID !== localID) {
             newUploads[localUploadID] = upload;
           } else if (!upload.uriIsReal) {
             newUploads[localUploadID] = {
               ...upload,
               messageID: result.id,
             };
           }
         }
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newUploads,
           },
         };
       });
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   startThreadCreation(
     threadInfo: LegacyThreadInfo | ThreadInfo,
   ): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(threadInfo.id);
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   inputBaseStateSelector: (?string) => PropsAndState => BaseInputState =
     _memoize((threadID: ?string) =>
       createSelector(
         (propsAndState: PropsAndState) =>
           threadID ? propsAndState.pendingUploads[threadID] : null,
         (propsAndState: PropsAndState) =>
           threadID
             ? propsAndState.drafts[draftKeyFromThreadID(threadID)]
             : null,
         (propsAndState: PropsAndState) =>
           threadID ? propsAndState.textCursorPositions[threadID] : null,
         (
           pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
           draft: ?string,
           textCursorPosition: ?number,
         ) => {
           let threadPendingUploads: $ReadOnlyArray<PendingMultimediaUpload> =
             [];
           const assignedUploads: {
             [string]: $ReadOnlyArray<PendingMultimediaUpload>,
           } = {};
           if (pendingUploads) {
             const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] =
               _partition('messageID')(pendingUploads);
             threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
             const threadAssignedUploads = _groupBy('messageID')(
               uploadsWithMessageIDs,
             );
             for (const messageID in threadAssignedUploads) {
               // lodash libdefs don't return $ReadOnlyArray
               assignedUploads[messageID] = [
                 ...threadAssignedUploads[messageID],
               ];
             }
           }
           return ({
             pendingUploads: threadPendingUploads,
             assignedUploads,
             draft: draft ?? '',
             textCursorPosition: textCursorPosition ?? 0,
             appendFiles: (
               threadInfo: LegacyThreadInfo | ThreadInfo,
               files: $ReadOnlyArray<File>,
             ) => this.appendFiles(threadInfo, files),
             cancelPendingUpload: (localUploadID: string) =>
               this.cancelPendingUpload(threadID, localUploadID),
             sendTextMessage: (
               messageInfo: RawTextMessageInfo,
-              threadInfo: LegacyThreadInfo | ThreadInfo,
-              parentThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
+              threadInfo: ThreadInfo,
+              parentThreadInfo: ?ThreadInfo,
             ) =>
               this.sendTextMessage(messageInfo, threadInfo, parentThreadInfo),
             createMultimediaMessage: (
               localID: number,
               threadInfo: LegacyThreadInfo | ThreadInfo,
             ) => this.createMultimediaMessage(localID, threadInfo),
             setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
             setTextCursorPosition: (newPosition: number) =>
               this.setTextCursorPosition(threadID, newPosition),
             messageHasUploadFailure: (localMessageID: string) =>
               this.messageHasUploadFailure(assignedUploads[localMessageID]),
             retryMultimediaMessage: (
               localMessageID: string,
               threadInfo: LegacyThreadInfo | ThreadInfo,
             ) =>
               this.retryMultimediaMessage(
                 localMessageID,
                 threadInfo,
                 assignedUploads[localMessageID],
               ),
             addReply: (message: string) => this.addReply(message),
             addReplyListener: this.addReplyListener,
             removeReplyListener: this.removeReplyListener,
             registerSendCallback: this.props.registerSendCallback,
             unregisterSendCallback: this.props.unregisterSendCallback,
           }: BaseInputState);
         },
       ),
     );
 
   typeaheadStateSelector: PropsAndState => TypeaheadInputState = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector: CombinedInputState => InputState = createSelector(
     (state: CombinedInputState) => state.inputBaseState,
     (state: CombinedInputState) => state.typeaheadState,
     (inputBaseState: BaseInputState, typeaheadState: TypeaheadInputState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadInfo: LegacyThreadInfo | ThreadInfo,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(threadInfo, file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadInfo.id, newUploads),
     );
     return true;
   }
 
   async appendFile(
     threadInfo: LegacyThreadInfo | ThreadInfo,
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps: MediaMissionStep[] = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
     const { uri, file: fixedFile, mediaType, dimensions } = result;
 
     const shouldEncrypt = this.shouldEncryptMedia(threadInfo);
 
     let encryptionResult;
     if (shouldEncrypt) {
       let encryptionResponse;
       const encryptionStart = Date.now();
       try {
         encryptionResponse = await encryptFile(fixedFile);
       } catch (e) {
         return {
           steps,
           result: {
             success: false,
             reason: 'encryption_exception',
             time: Date.now() - encryptionStart,
             exceptionMessage: getMessageForException(e),
           },
         };
       }
       steps.push(...encryptionResponse.steps);
       encryptionResult = encryptionResponse.result;
     }
     if (encryptionResult && !encryptionResult.success) {
       return { steps, result: encryptionResult };
     }
 
     const { steps: thumbHashSteps, result: thumbHashResult } =
       await generateThumbHash(fixedFile, encryptionResult?.encryptionKey);
     const thumbHash = thumbHashResult.success
       ? thumbHashResult.thumbHash
       : null;
     steps.push(...thumbHashSteps);
 
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: encryptionResult?.file ?? fixedFile,
           mediaType: encryptionResult ? 'encrypted_photo' : mediaType,
           dimensions,
           uri: encryptionResult?.uri ?? uri,
           loop: false,
           uriIsReal: false,
           blobHolder: null,
           blobHash: encryptionResult?.sha256Hash,
           encryptionKey: encryptionResult?.encryptionKey,
           thumbHash,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
           shouldEncrypt,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ): Promise<mixed> {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID, encryptionKey } = upload;
     const isEncrypted =
       !!encryptionKey &&
       (upload.mediaType === 'encrypted_photo' ||
         upload.mediaType === 'encrypted_video');
 
     const steps = [...upload.steps];
     let userTime;
 
     const sendReport = (missionResult: MediaMissionResult) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const latestUpload = this.state.pendingUploads[newThreadID][localID];
       invariant(
         latestUpload,
         `pendingUpload ${localID} for ${newThreadID} missing in sendReport`,
       );
       const { serverID, messageID } = latestUpload;
       const totalTime = Date.now() - selectTime;
       userTime = userTime ? userTime : totalTime;
       const mission = { steps, result: missionResult, totalTime, userTime };
       this.queueMediaMissionReports([
         {
           mediaMission: mission,
           uploadLocalID: localID,
           uploadServerID: serverID,
           messageLocalID: messageID,
         },
       ]);
     };
 
     let uploadResult, uploadExceptionMessage;
     const uploadStart = Date.now();
     try {
       const callbacks = {
         onProgress: (percent: number) =>
           this.setProgress(threadID, localID, percent),
         abortHandler: (abort: () => void) =>
           this.handleAbortCallback(threadID, localID, abort),
       };
       if (
         this.useBlobServiceUploads &&
         (upload.mediaType === 'encrypted_photo' ||
           upload.mediaType === 'encrypted_video')
       ) {
         const { blobHash, dimensions, thumbHash } = upload;
         invariant(
           encryptionKey && blobHash && dimensions,
           'incomplete encrypted upload',
         );
         uploadResult = await this.props.blobServiceUpload({
           uploadInput: {
             blobInput: {
               type: 'file',
               file: upload.file,
             },
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
             thumbHash,
           },
           keyserverOrThreadID: threadID,
           callbacks,
         });
       } else {
         let uploadExtras = {
           ...upload.dimensions,
           loop: false,
           thumbHash: upload.thumbHash,
         };
         if (encryptionKey) {
           uploadExtras = { ...uploadExtras, encryptionKey };
         }
         uploadResult = await this.props.uploadMultimedia(
           upload.file,
           uploadExtras,
           callbacks,
         );
       }
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
     const outputMediaType = isEncrypted ? 'encrypted_photo' : result.mediaType;
 
     const successThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterSuccess =
       this.state.pendingUploads[successThreadID][localID];
     invariant(
       uploadAfterSuccess,
       `pendingUpload ${localID}/${result.id} for ${successThreadID} missing ` +
         `after upload`,
     );
     if (uploadAfterSuccess.messageID) {
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterSuccess.messageID,
           currentMediaID: localID,
           mediaUpdate: {
             id: result.id,
           },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning serverID`,
       );
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               serverID: result.id,
               blobHolder: result.blobHolder,
               abort: null,
             },
           },
         },
       };
     });
 
     if (encryptionKey) {
       const { steps: preloadSteps } = await preloadMediaResource(result.uri);
       steps.push(...preloadSteps);
     } else {
       const { steps: preloadSteps } = await preloadImage(result.uri);
       steps.push(...preloadSteps);
     }
     sendReport({ success: true });
 
     const preloadThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterPreload =
       this.state.pendingUploads[preloadThreadID][localID];
     invariant(
       uploadAfterPreload,
       `pendingUpload ${localID}/${result.id} for ${preloadThreadID} missing ` +
         `after preload`,
     );
     if (uploadAfterPreload.messageID) {
       const { mediaType, uri, dimensions, loop } = result;
       const { thumbHash } = upload;
       let mediaUpdate = {
         loop,
         dimensions,
         ...(thumbHash ? { thumbHash } : undefined),
       };
       if (!isEncrypted) {
         mediaUpdate = {
           ...mediaUpdate,
           type: mediaType,
           uri,
         };
       } else {
         mediaUpdate = {
           ...mediaUpdate,
           type: outputMediaType,
           blobURI: uri,
           encryptionKey,
         };
       }
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: result.id ?? uploadAfterPreload.localID,
           mediaUpdate,
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: outputMediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
         id: generateReportID(),
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: ?string, localUploadID: string) {
     invariant(threadID, 'threadID should be set in cancelPendingUpload');
 
     let revokeURL: ?string, abortRequest: ?() => void;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           void this.props.deleteUpload({
             id: pendingUpload.serverID,
             keyserverOrThreadID: threadID,
           });
           if (isBlobServiceURI(pendingUpload.uri)) {
             invariant(
               pendingUpload.blobHolder,
               'blob service upload has no holder',
             );
             const endpoint = blobService.httpEndpoints.DELETE_BLOB;
             const holder = pendingUpload.blobHolder;
             const blobHash = blobHashFromBlobServiceURI(pendingUpload.uri);
             void fetch(makeBlobServiceEndpointURL(endpoint), {
               method: endpoint.method,
               body: JSON.stringify({
                 holder,
                 blob_hash: blobHash,
               }),
               headers: {
                 'content-type': 'application/json',
               },
             });
           }
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
-    inputThreadInfo: LegacyThreadInfo | ThreadInfo,
-    parentThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
+    inputThreadInfo: ThreadInfo,
+    parentThreadInfo: ?ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       void this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: { pendingThread: threadInfo },
         });
       }
     }
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
 
     // Branching to appease `flow`.
     const newThreadInfo = threadInfo.minimallyEncoded
       ? {
           ...threadInfo,
           id: newThreadID,
         }
       : {
           ...threadInfo,
           id: newThreadID,
         };
     void this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: LegacyThreadInfo | ThreadInfo,
     parentThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage({
         threadID: messageInfo.threadID,
         localID,
         text: messageInfo.text,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   // Creates a MultimediaMessage from the unassigned pending uploads,
   // if there are any
   createMultimediaMessage(
     localID: number,
     threadInfo: LegacyThreadInfo | ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const localMessageID = `${localIDPrefix}${localID}`;
     void this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const currentPendingUploads = prevState.pendingUploads[newThreadID];
       if (!currentPendingUploads) {
         return {};
       }
       const newPendingUploads: { [string]: PendingMultimediaUpload } = {};
       let uploadAssigned = false;
       for (const localUploadID in currentPendingUploads) {
         const upload = currentPendingUploads[localUploadID];
         if (upload.messageID) {
           newPendingUploads[localUploadID] = upload;
         } else {
           const newUpload = {
             ...upload,
             messageID: localMessageID,
           };
           uploadAssigned = true;
           newPendingUploads[localUploadID] = newUpload;
         }
       }
       if (!uploadAssigned) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   setDraft(threadID: ?string, draft: string) {
     invariant(threadID, 'threadID should be set in setDraft');
 
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: ?string, newPosition: number) {
     invariant(threadID, 'threadID should be set in setTextCursorPosition');
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setTypeaheadState = (newState: Partial<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ): boolean {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: LegacyThreadInfo | ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const rawMessageInfo = this.getRawMultimediaMessageInfo(localMessageID);
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawMediaMessageInfo);
     } else {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawImagesMessageInfo);
     }
 
     void this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const completed = InputStateContainer.completedMessageIDs(this.state);
     if (completed.has(localMessageID)) {
       void this.sendMultimediaMessage(newRawMessageInfo);
       return;
     }
 
     if (!pendingUploads) {
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message's timestamp in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     const uploadIDsToRetry = new Set<string>();
     const uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads: { [string]: PendingMultimediaUpload } = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     void this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render(): React.Node {
     const { activeChatThreadID } = this.props;
 
     // we're going with two selectors as we want to avoid
     // recreation of chat state setter functions on typeahead state updates
     const inputBaseState = this.inputBaseStateSelector(activeChatThreadID)({
       ...this.state,
       ...this.props,
     });
 
     const typeaheadState = this.typeaheadStateSelector({
       ...this.state,
       ...this.props,
     });
 
     const inputState = this.inputStateSelector({
       inputBaseState,
       typeaheadState,
     });
 
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useLegacyAshoatKeyserverCall(uploadMultimedia);
     const callBlobServiceUpload = useBlobServiceUpload();
     const callDeleteUpload = useDeleteUpload();
     const callSendMultimediaMessage = useLegacySendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
     const callNewThread = useNewThread();
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc<RawTextMessageInfo>(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/web/input/input-state.js b/web/input/input-state.js
index 22cf71f74..52b361c52 100644
--- a/web/input/input-state.js
+++ b/web/input/input-state.js
@@ -1,108 +1,108 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   type Dimensions,
   type EncryptedMediaType,
   type MediaMissionStep,
   type MediaType,
 } from 'lib/types/media-types.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   ChatMentionCandidates,
   LegacyThreadInfo,
   RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 
 export type PendingMultimediaUpload = {
   +localID: string,
   // Pending uploads are assigned a serverID once they are complete
   +serverID: ?string,
   // Pending uploads are assigned a messageID once they are sent
   +messageID: ?string,
   // This is set to true if the upload fails for whatever reason
   +failed: boolean,
   +file: File,
   +mediaType: MediaType | EncryptedMediaType,
   +dimensions: ?Dimensions,
   +uri: string,
   +blobHolder: ?string,
   +blobHash: ?string,
   +encryptionKey: ?string,
   +thumbHash: ?string,
   +loop: boolean,
   // URLs created with createObjectURL aren't considered "real". The distinction
   // is required because those "fake" URLs must be disposed properly
   +uriIsReal: boolean,
   +progressPercent: number,
   // This is set once the network request begins and used if the upload is
   // cancelled
   +abort: ?() => void,
   +steps: MediaMissionStep[],
   +selectTime: number,
   +shouldEncrypt: boolean,
 };
 
 export type TypeaheadState = {
   +canBeVisible: boolean,
   +keepUpdatingThreadMembers: boolean,
   +frozenUserMentionsCandidates: $ReadOnlyArray<RelativeMemberInfo>,
   +frozenChatMentionsCandidates: ChatMentionCandidates,
   +moveChoiceUp: ?() => void,
   +moveChoiceDown: ?() => void,
   +close: ?() => void,
   +accept: ?() => void,
 };
 
 export type BaseInputState = {
   +pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   +assignedUploads: {
     [messageID: string]: $ReadOnlyArray<PendingMultimediaUpload>,
   },
   +draft: string,
   +textCursorPosition: number,
   +appendFiles: (
     threadInfo: LegacyThreadInfo | ThreadInfo,
     files: $ReadOnlyArray<File>,
   ) => Promise<boolean>,
   +cancelPendingUpload: (localUploadID: string) => void,
   +sendTextMessage: (
     messageInfo: RawTextMessageInfo,
-    threadInfo: LegacyThreadInfo | ThreadInfo,
-    parentThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
+    threadInfo: ThreadInfo,
+    parentThreadInfo: ?ThreadInfo,
   ) => mixed,
   +createMultimediaMessage: (
     localID: number,
     threadInfo: LegacyThreadInfo | ThreadInfo,
   ) => void,
   +setDraft: (draft: string) => void,
   +setTextCursorPosition: (newPosition: number) => void,
   +messageHasUploadFailure: (localMessageID: string) => boolean,
   +retryMultimediaMessage: (
     localMessageID: string,
     threadInfo: LegacyThreadInfo | ThreadInfo,
   ) => void,
   +addReply: (text: string) => void,
   +addReplyListener: ((message: string) => void) => void,
   +removeReplyListener: ((message: string) => void) => void,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
 };
 
 export type TypeaheadInputState = {
   +typeaheadState: TypeaheadState,
   +setTypeaheadState: (Partial<TypeaheadState>) => void,
 };
 
 // This type represents the input state for a particular thread
 export type InputState = {
   ...BaseInputState,
   ...TypeaheadInputState,
 };
 
 const InputStateContext: React.Context<?InputState> =
   React.createContext<?InputState>(null);
 
 export { InputStateContext };
diff --git a/web/modals/chat/pinned-messages-modal.react.js b/web/modals/chat/pinned-messages-modal.react.js
index aff9b924c..a354308f5 100644
--- a/web/modals/chat/pinned-messages-modal.react.js
+++ b/web/modals/chat/pinned-messages-modal.react.js
@@ -1,173 +1,172 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   fetchPinnedMessageActionTypes,
   useFetchPinnedMessages,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import {
   type ChatMessageInfoItem,
   messageListData,
 } from 'lib/selectors/chat-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   createMessageInfo,
   isInvalidPinSourceForThread,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './pinned-messages-modal.css';
 import MessageResult from '../../components/message-result.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal from '../modal.react.js';
 
 type Props = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   fetchPinnedMessageActionTypes,
 );
 
 function PinnedMessagesModal(props: Props): React.Node {
   const { threadInfo } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
   const [rawMessageResults, setRawMessageResults] = React.useState<
     $ReadOnlyArray<RawMessageInfo>,
   >([]);
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const loadingStatus = useSelector(loadingStatusSelector);
 
   React.useEffect(() => {
     void dispatchActionPromise(
       fetchPinnedMessageActionTypes,
       (async () => {
         const result = await callFetchPinnedMessages({ threadID });
         setRawMessageResults(result.pinnedMessages);
       })(),
     );
   }, [dispatchActionPromise, callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
     if (!chatMessageInfos) {
       return ([]: ChatMessageInfoItem[]);
     }
 
     const chatMessageInfoItems = chatMessageInfos.filter(
       item =>
         item.itemType === 'message' &&
         item.isPinned &&
         !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
     );
 
     // By the nature of using messageListData and passing in
     // the desired translatedMessageResults as additional
     // messages, we will have duplicate ChatMessageInfoItems.
     const uniqueChatMessageInfoItemsMap = new Map<
       string,
       ChatMessageInfoItem,
     >();
     chatMessageInfoItems.forEach(
       item =>
         item.messageInfo &&
         item.messageInfo.id &&
         uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
     );
 
     // Push the items in the order they appear in the rawMessageResults
     // since the messages fetched from the server are already sorted
     // in the order of pin_time (newest first).
     const sortedChatMessageInfoItems = [];
     for (let i = 0; i < rawMessageResults.length; i++) {
       const rawMessageID = rawMessageResults[i].id;
       if (!rawMessageID) {
         continue;
       }
       sortedChatMessageInfoItems.push(
         uniqueChatMessageInfoItemsMap.get(rawMessageID),
       );
     }
 
     return sortedChatMessageInfoItems;
   }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const modifiedItems = React.useMemo(
     () =>
       sortedUniqueChatMessageInfoItems
         .filter(Boolean)
         .map(item => modifyItemForResultScreen(item)),
     [sortedUniqueChatMessageInfoItems],
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
     if (modifiedItems.length === 0) {
       return (
         <div className={css.noPinnedMessages}>
           No pinned messages in this thread.
         </div>
       );
     }
 
     const items = modifiedItems.map(item => (
       <MessageResult
         key={item.messageInfo.id}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ));
     return <>{items}</>;
   }, [modifiedItems, threadInfo]);
 
   const loadingIndicator = React.useMemo(() => {
     if (loadingStatus === 'loading') {
       return (
         <div className={css.loadingIndicator}>
           <LoadingIndicator status="loading" size="medium" />
         </div>
       );
     }
     return null;
   }, [loadingStatus]);
 
   const modalName = pinnedMessageCountText(modifiedItems.length);
 
   return (
     <Modal name={modalName} onClose={popModal} size="large">
       <hr className={css.separator} />
       <div className={css.topSpace}>{loadingIndicator}</div>
       <div className={css.messageResultsContainer}>
         {messageResultsToDisplay}
       </div>
     </Modal>
   );
 }
 
 export default PinnedMessagesModal;
diff --git a/web/modals/chat/sidebar-promote-modal.react.js b/web/modals/chat/sidebar-promote-modal.react.js
index 8003eaacc..e875a74ca 100644
--- a/web/modals/chat/sidebar-promote-modal.react.js
+++ b/web/modals/chat/sidebar-promote-modal.react.js
@@ -1,53 +1,52 @@
 // @flow
 
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './sidebar-promote-modal.css';
 import Button from '../../components/button.react.js';
 import Modal from '../modal.react.js';
 
 type Props = {
   +onClose: () => void,
   +onConfirm: () => void,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 function SidebarPromoteModal(props: Props): React.Node {
   const { threadInfo, onClose, onConfirm } = props;
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   const handleConfirm = React.useCallback(() => {
     onConfirm();
     onClose();
   }, [onClose, onConfirm]);
 
   return (
     <Modal
       size="large"
       name="Promote to channel"
       icon="warning-circle"
       onClose={onClose}
     >
       <div className={css.modal_body}>
         <p>
           {`Are you sure you want to promote "${uiName}"? 
           Promoting a thread to a channel cannot be undone.`}
         </p>
         <div className={css.buttonContainer}>
           <Button onClick={onClose} type="submit" variant="outline">
             Cancel
           </Button>
           <Button onClick={handleConfirm} type="submit" variant="filled">
             Promote to channel
           </Button>
         </div>
       </div>
     </Modal>
   );
 }
 
 export default SidebarPromoteModal;
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
index 14e8f049c..66835b5d5 100644
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -1,131 +1,130 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   toggleMessagePinActionTypes,
   useToggleMessagePin,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { modifyItemForResultScreen } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './toggle-pin-modal.css';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Modal from '../modal.react.js';
 
 type TogglePinModalProps = {
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 function TogglePinModal(props: TogglePinModalProps): React.Node {
   const { item, threadInfo } = props;
   const { messageInfo, isPinned } = item;
   const { popModal } = useModalContext();
 
   const callToggleMessagePin = useToggleMessagePin();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const modalInfo = React.useMemo(() => {
     if (isPinned) {
       return {
         name: 'Remove Pinned Message',
         action: 'unpin',
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
         buttonColor: buttonThemes.danger,
       };
     }
 
     return {
       name: 'Pin Message',
       action: 'pin',
       confirmationText: `You may pin this message to the channel 
         you are currently viewing. To unpin a message, select the pinned 
         messages icon in the channel.`,
       buttonText: 'Pin Message',
       buttonColor: buttonThemes.standard,
     };
   }, [isPinned]);
 
   // We want to remove inline engagement (threadCreatedFromMessage / reactions)
   // and the message header (startsConversation). We also want to set isViewer
   // to false so that the message is left-aligned and uncolored.
   const modifiedItem = React.useMemo(() => {
     if (item.messageInfoType !== 'composable') {
       return item;
     }
 
     const strippedItem = {
       ...item,
       threadCreatedFromMessage: undefined,
       reactions: {},
     };
     return modifyItemForResultScreen(strippedItem);
   }, [item]);
 
   const onClick = React.useCallback(() => {
     const createToggleMessagePinPromise = async () => {
       invariant(messageInfo.id, 'messageInfo.id should be defined');
       const result = await callToggleMessagePin({
         messageID: messageInfo.id,
         action: modalInfo.action,
       });
       return ({
         newMessageInfos: result.newMessageInfos,
         threadID: result.threadID,
       }: {
         +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
         +threadID: string,
       });
     };
 
     void dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
     popModal();
   }, [
     modalInfo,
     callToggleMessagePin,
     dispatchActionPromise,
     messageInfo.id,
     popModal,
   ]);
 
   return (
     <Modal name={modalInfo.name} onClose={popModal} size="large">
       <div className={css.confirmationText}>{modalInfo.confirmationText}</div>
       <div className={css.messageContainer}>
         <MessageResult
           item={modifiedItem}
           threadInfo={threadInfo}
           scrollable={true}
         />
       </div>
       <div className={css.buttonContainer}>
         <Button
           variant="filled"
           className={css.togglePinButton}
           buttonColor={modalInfo.buttonColor}
           onClick={onClick}
         >
           {modalInfo.buttonText}
         </Button>
         <div className={css.cancelButton} onClick={popModal}>
           Cancel
         </div>
       </div>
     </Modal>
   );
 }
 
 export default TogglePinModal;
diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js
index 0777a339c..7de301111 100644
--- a/web/modals/search/message-search-modal.react.js
+++ b/web/modals/search/message-search-modal.react.js
@@ -1,160 +1,159 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './message-search-modal.css';
 import { useParseSearchResults } from './message-search-utils.react.js';
 import Button from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Search from '../../components/search.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js';
 import { useTooltipContext } from '../../tooltips/tooltip-provider.js';
 import Modal from '../modal.react.js';
 
 type ContentProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 function MessageSearchModal(props: ContentProps): React.Node {
   const { threadInfo } = props;
 
   const {
     getQuery,
     setQuery,
     clearQuery,
     searchMessages,
     getSearchResults,
     getEndReached,
   } = useMessageSearchContext();
 
   const [input, setInput] = React.useState(getQuery(threadInfo.id));
 
   const onPressSearch = React.useCallback(() => {
     setQuery(input, threadInfo.id);
     searchMessages(threadInfo.id);
   }, [setQuery, input, searchMessages, threadInfo.id]);
 
   const onKeyDown = React.useCallback(
     (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter') {
         onPressSearch();
       }
     },
     [onPressSearch],
   );
 
   const modifiedItems = useParseSearchResults(
     threadInfo,
     getSearchResults(threadInfo.id),
   );
 
   const { clearTooltip } = useTooltipContext();
 
   const messageContainer = React.useRef<?HTMLDivElement>(null);
 
   const possiblyLoadMoreMessages = React.useCallback(() => {
     if (!messageContainer.current) {
       return;
     }
 
     const loaderTopOffset = 32;
     const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
     if (Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight) {
       return;
     }
     searchMessages(threadInfo.id);
   }, [searchMessages, threadInfo.id]);
 
   const onScroll = React.useCallback(() => {
     clearTooltip();
     possiblyLoadMoreMessages();
   }, [clearTooltip, possiblyLoadMoreMessages]);
 
   const renderItem = React.useCallback(
     (item: ChatMessageInfoItem) => (
       <MessageResult
         key={item.messageInfo.id}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ),
     [threadInfo],
   );
 
   const messages = React.useMemo(
     () => modifiedItems.map(item => renderItem(item)),
     [modifiedItems, renderItem],
   );
 
   const endReached = getEndReached(threadInfo.id);
   const query = getQuery(threadInfo.id);
 
   const footer = React.useMemo(() => {
     if (query === '') {
       return (
         <div className={css.footer}>Your search results will appear here</div>
       );
     }
     if (!endReached) {
       return (
         <div key="search-loader" className={css.loading}>
           <LoadingIndicator status="loading" size="medium" color="white" />
         </div>
       );
     }
     if (modifiedItems.length > 0) {
       return <div className={css.footer}>End of results</div>;
     }
     return (
       <div className={css.footer}>
         No results. Please try using different keywords to refine your search
       </div>
     );
   }, [query, endReached, modifiedItems.length]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   const searchPlaceholder = `Searching in ${uiName}`;
   const { popModal } = useModalContext();
 
   const clearQueryWrapper = React.useCallback(
     () => clearQuery(threadInfo.id),
     [clearQuery, threadInfo.id],
   );
 
   return (
     <Modal name="Search messages" onClose={popModal} size="large">
       <div className={css.container}>
         <div className={css.header}>
           <Search
             onChangeText={setInput}
             searchText={input}
             placeholder={searchPlaceholder}
             onClearText={clearQueryWrapper}
             onKeyDown={onKeyDown}
           />
           <Button
             onClick={onPressSearch}
             variant="filled"
             className={css.button}
           >
             Search
           </Button>
         </div>
         <div className={css.content} ref={messageContainer} onScroll={onScroll}>
           {messages}
           {footer}
         </div>
       </div>
     </Modal>
   );
 }
 
 export default MessageSearchModal;
diff --git a/web/modals/threads/confirm-leave-thread-modal.react.js b/web/modals/threads/confirm-leave-thread-modal.react.js
index 2c3541d84..7a20d105e 100644
--- a/web/modals/threads/confirm-leave-thread-modal.react.js
+++ b/web/modals/threads/confirm-leave-thread-modal.react.js
@@ -1,54 +1,53 @@
 // @flow
 
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './confirm-leave-thread-modal.css';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import Modal from '../modal.react.js';
 
 type Props = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +onClose: () => void,
   +onConfirm: () => void,
 };
 function ConfirmLeaveThreadModal(props: Props): React.Node {
   const { threadInfo, onClose, onConfirm } = props;
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   return (
     <Modal
       size="fit-content"
       name="Leaving channel"
       icon="warning-circle"
       withCloseButton={false}
       onClose={onClose}
     >
       <div className={css.container}>
         <p>
           {'Are you sure you want to leave "'}
           <span className={css['thread-name']}>{uiName}</span>
           {'"?'}
         </p>
         <div className={css.buttonContainer}>
           <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
             variant="filled"
             buttonColor={buttonThemes.danger}
             onClick={onConfirm}
             type="submit"
           >
             Yes, leave chat
           </Button>
         </div>
       </div>
     </Modal>
   );
 }
 
 export default ConfirmLeaveThreadModal;
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
index 13facb9d8..e8a335564 100644
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -1,277 +1,276 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   newThreadActionTypes,
   useNewThread,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { trimText } from 'lib/utils/text-utils.js';
 
 import css from './compose-subchannel-modal.css';
 import SubchannelMembers from './steps/subchannel-members.react.js';
 import type { VisibilityType } from './steps/subchannel-settings.react.js';
 import SubchannelSettings from './steps/subchannel-settings.react.js';
 import Stepper from '../../../components/stepper.react.js';
 import { updateNavInfoActionType } from '../../../redux/action-types.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../../selectors/nav-selectors.js';
 import Modal from '../../modal.react.js';
 
 type Props = {
   +onClose: () => void,
-  +parentThreadInfo: LegacyThreadInfo | ThreadInfo,
+  +parentThreadInfo: ThreadInfo,
 };
 
 const getThreadType = (visibility: VisibilityType, announcement: boolean) => {
   if (visibility === 'open') {
     return announcement
       ? threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_OPEN_SUBTHREAD;
   } else {
     return announcement
       ? threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_SECRET_SUBTHREAD;
   }
 };
 
 type Steps = 'settings' | 'members';
 
 type HeaderProps = {
   +parentThreadName: string,
 };
 
 function ComposeSubchannelHeader(props: HeaderProps): React.Node {
   const { parentThreadName } = props;
   return (
     <div className={css.modalHeader}>
       <div>{'within '}</div>
       <div className={css.modalHeaderParentName}>{parentThreadName}</div>
     </div>
   );
 }
 
 const createSubchannelLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function ComposeSubchannelModal(props: Props): React.Node {
   const { parentThreadInfo, onClose } = props;
   const { uiName: parentThreadName } = useResolvedThreadInfo(parentThreadInfo);
 
   const [activeStep, setActiveStep] = React.useState<Steps>('settings');
 
   const [channelName, setChannelName] = React.useState<string>('');
   const [visibilityType, setVisibilityType] =
     React.useState<VisibilityType>('open');
   const [announcement, setAnnouncement] = React.useState<boolean>(false);
   const [selectedUsers, setSelectedUsers] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
   const [searchUserText, setSearchUserText] = React.useState<string>('');
 
   const loadingState = useSelector(createSubchannelLoadingStatusSelector);
 
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
   const calendarQuery = useSelector(nonThreadCalendarQuery);
   const callNewThread = useNewThread();
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatch = useDispatch();
 
   const createSubchannel = React.useCallback(async () => {
     try {
       const threadType = getThreadType(visibilityType, announcement);
 
       const query = calendarQuery();
       const result = await callNewThread({
         name: channelName,
         type: threadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: Array.from(selectedUsers),
         calendarQuery: query,
         color: parentThreadInfo.color,
       });
 
       return result;
     } catch (e) {
       await setErrorMessage('unknown error');
       return null;
     }
   }, [
     parentThreadInfo,
     selectedUsers,
     visibilityType,
     announcement,
     callNewThread,
     calendarQuery,
     channelName,
   ]);
 
   const dispatchCreateSubchannel = React.useCallback(async () => {
     await setErrorMessage('');
 
     const response = createSubchannel();
     await dispatchActionPromise(newThreadActionTypes, response);
     const result = await response;
 
     if (result) {
       const { newThreadID } = result;
       await dispatch({
         type: updateNavInfoActionType,
         payload: {
           activeChatThreadID: newThreadID,
         },
       });
 
       props.onClose();
     }
   }, [dispatchActionPromise, createSubchannel, props, dispatch]);
 
   const onChangeChannelName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const target = event.currentTarget;
       setChannelName(target.value);
     },
     [],
   );
 
   const onOpenVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('open'),
     [],
   );
 
   const onSecretVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('secret'),
     [],
   );
 
   const onAnnouncementSelected = React.useCallback(
     () => setAnnouncement(!announcement),
     [announcement],
   );
 
   const toggleUserSelection = React.useCallback((userID: string) => {
     setSelectedUsers((users: $ReadOnlySet<string>) => {
       const newUsers = new Set(users);
       if (newUsers.has(userID)) {
         newUsers.delete(userID);
       } else {
         newUsers.add(userID);
       }
       return newUsers;
     });
   }, []);
 
   const subchannelSettings = React.useMemo(
     () => (
       <SubchannelSettings
         channelName={channelName}
         visibilityType={visibilityType}
         announcement={announcement}
         onChangeChannelName={onChangeChannelName}
         onOpenTypeSelect={onOpenVisibilityTypeSelected}
         onSecretTypeSelect={onSecretVisibilityTypeSelected}
         onAnnouncementSelected={onAnnouncementSelected}
       />
     ),
     [
       channelName,
       visibilityType,
       announcement,
       onChangeChannelName,
       onOpenVisibilityTypeSelected,
       onSecretVisibilityTypeSelected,
       onAnnouncementSelected,
     ],
   );
 
   const stepperButtons = React.useMemo(
     () => ({
       settings: {
         nextProps: {
           content: 'Next',
           disabled: !channelName.trim(),
           onClick: () => {
             setErrorMessage('');
             setChannelName(channelName.trim());
             setActiveStep('members');
           },
         },
       },
       members: {
         prevProps: {
           content: 'Back',
           onClick: () => setActiveStep('settings'),
         },
         nextProps: {
           content: 'Create',
           loading: loadingState === 'loading',
           disabled: selectedUsers.size === 0,
           onClick: dispatchCreateSubchannel,
         },
       },
     }),
     [channelName, dispatchCreateSubchannel, loadingState, selectedUsers],
   );
 
   const subchannelMembers = React.useMemo(
     () => (
       <SubchannelMembers
         parentThreadInfo={parentThreadInfo}
         selectedUsers={selectedUsers}
         searchText={searchUserText}
         setSearchText={setSearchUserText}
         toggleUserSelection={toggleUserSelection}
       />
     ),
     [
       selectedUsers,
       toggleUserSelection,
       parentThreadInfo,
       searchUserText,
       setSearchUserText,
     ],
   );
 
   const modalName =
     activeStep === 'members'
       ? `Create channel - ${trimText(channelName, 11)}`
       : 'Create channel';
 
   return (
     <Modal name={modalName} onClose={onClose} size="fit-content">
       <div className={css.container}>
         <ComposeSubchannelHeader parentThreadName={parentThreadName} />
         <div className={css.stepItem}>
           <Stepper.Container
             className={css.stepContainer}
             activeStep={activeStep}
           >
             <Stepper.Item
               content={subchannelSettings}
               name="settings"
               nextProps={stepperButtons.settings.nextProps}
             />
             <Stepper.Item
               content={subchannelMembers}
               name="members"
               prevProps={stepperButtons.members.prevProps}
               nextProps={stepperButtons.members.nextProps}
               errorMessage={errorMessage}
             />
           </Stepper.Container>
         </div>
       </div>
     </Modal>
   );
 }
 
 export default ComposeSubchannelModal;
diff --git a/web/modals/threads/create/steps/subchannel-members.react.js b/web/modals/threads/create/steps/subchannel-members.react.js
index b0c2d3b1e..a65940884 100644
--- a/web/modals/threads/create/steps/subchannel-members.react.js
+++ b/web/modals/threads/create/steps/subchannel-members.react.js
@@ -1,64 +1,63 @@
 // @flow
 
 import * as React from 'react';
 
 import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import MembersList from './subchannel-members-list.react.js';
 import css from './subchannel-members.css';
 import Search from '../../../../components/search.react.js';
 
 type SubchannelMembersProps = {
-  +parentThreadInfo: LegacyThreadInfo | ThreadInfo,
+  +parentThreadInfo: ThreadInfo,
   +selectedUsers: $ReadOnlySet<string>,
   +searchText: string,
   +setSearchText: string => void,
   +toggleUserSelection: (userID: string) => void,
 };
 
 function SubchannelMembers(props: SubchannelMembersProps): React.Node {
   const {
     toggleUserSelection,
     searchText,
     setSearchText,
     parentThreadInfo,
     selectedUsers,
   } = props;
 
   const ancestorThreads = useAncestorThreads(parentThreadInfo);
 
   const communityThread = ancestorThreads[0] ?? parentThreadInfo;
 
   const userSearchIndex = useUserSearchIndex(communityThread.members);
   const searchResult = React.useMemo(
     () => new Set(userSearchIndex.getSearchResults(searchText)),
     [userSearchIndex, searchText],
   );
 
   return (
     <>
       <div className={css.searchBar}>
         <Search
           searchText={searchText}
           onChangeText={setSearchText}
           placeholder="Search"
         />
       </div>
       <div className={css.members}>
         <MembersList
           communityThreadInfo={communityThread}
           parentThreadInfo={parentThreadInfo}
           selectedUsers={selectedUsers}
           searchResult={searchResult}
           searchText={searchText}
           toggleUserSelection={toggleUserSelection}
         />
       </div>
     </>
   );
 }
 
 export default SubchannelMembers;
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
index a1c25b8f5..02c991c25 100644
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -1,126 +1,125 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { useGlobalThreadSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { onScreenEntryEditableThreadInfos } from 'lib/selectors/thread-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './thread-picker-modal.css';
 import ThreadAvatar from '../../avatars/thread-avatar.react.js';
 import Button from '../../components/button.react.js';
 import Search from '../../components/search.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal, { type ModalOverridableProps } from '../modal.react.js';
 
 type OptionProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
   +createNewEntry: (threadID: string) => void,
   +onCloseModal: () => void,
 };
 
 function ThreadPickerOption(props: OptionProps) {
   const { threadInfo, createNewEntry, onCloseModal } = props;
 
   const onClickThreadOption = React.useCallback(() => {
     createNewEntry(threadInfo.id);
     onCloseModal();
   }, [threadInfo.id, createNewEntry, onCloseModal]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   return (
     <div key={threadInfo.id} className={css.threadPickerOptionContainer}>
       <Button
         className={css.threadPickerOptionButton}
         onClick={onClickThreadOption}
       >
         <ThreadAvatar size="M" threadInfo={threadInfo} />
         <div className={css.threadNameText}>{uiName}</div>
       </Button>
     </div>
   );
 }
 
 type Props = {
   ...ModalOverridableProps,
   +createNewEntry: (threadID: string) => void,
 };
 
 function ThreadPickerModal(props: Props): React.Node {
   const { createNewEntry, ...modalProps } = props;
 
   const onScreenThreadInfos = useSelector(onScreenEntryEditableThreadInfos);
   const searchIndex = useGlobalThreadSearchIndex();
 
   invariant(
     onScreenThreadInfos.length > 0,
     "ThreadPicker can't be open when onScreenThreadInfos is empty",
   );
 
   const [searchText, setSearchText] = React.useState<string>('');
   const [searchResults, setSearchResults] = React.useState<Set<string>>(
     new Set(),
   );
 
   const searchRef = React.useRef<?HTMLInputElement>();
 
   React.useEffect(() => {
     searchRef.current?.focus();
   }, []);
 
   const onChangeSearchText = React.useCallback(
     (text: string) => {
       const results = searchIndex.getSearchResults(text);
       setSearchText(text);
       setSearchResults(new Set(results));
     },
     [searchIndex],
   );
 
   const threads = React.useMemo(
     () =>
       searchText
         ? onScreenThreadInfos.filter(thread => searchResults.has(thread.id))
         : onScreenThreadInfos,
     [searchText, onScreenThreadInfos, searchResults],
   );
 
   const threadPickerContent = React.useMemo(() => {
     const options = threads.map(threadInfo => (
       <ThreadPickerOption
         threadInfo={threadInfo}
         createNewEntry={createNewEntry}
         key={threadInfo.id}
         onCloseModal={modalProps.onClose}
       />
     ));
 
     if (options.length === 0 && searchText.length > 0) {
       return (
         <div className={css.noResultsText}>No results for {searchText}</div>
       );
     } else {
       return options;
     }
   }, [threads, createNewEntry, modalProps.onClose, searchText]);
 
   return (
     <Modal {...modalProps} size="large">
       <div className={css.container}>
         <Search
           onChangeText={onChangeSearchText}
           searchText={searchText}
           placeholder="Search chats"
           ref={searchRef}
         />
         <div className={css.contentContainer}>{threadPickerContent}</div>
       </div>
     </Modal>
   );
 }
 
 export default ThreadPickerModal;
diff --git a/web/navigation-panels/chat-thread-ancestors.react.js b/web/navigation-panels/chat-thread-ancestors.react.js
index 8c9cfbbf5..7668fec1f 100644
--- a/web/navigation-panels/chat-thread-ancestors.react.js
+++ b/web/navigation-panels/chat-thread-ancestors.react.js
@@ -1,74 +1,73 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 import { ChevronRight } from 'react-feather';
 
 import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './chat-thread-ancestors.css';
 
 type ThreadAncestorsProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 function ThreadAncestors(props: ThreadAncestorsProps): React.Node {
   const { threadInfo } = props;
 
   const ancestorThreadsWithCommunity = useAncestorThreads(threadInfo);
 
   const community = ancestorThreadsWithCommunity[0] ?? threadInfo;
   const resolvedCommunity = useResolvedThreadInfo(community);
 
   const threadHasNoAncestors = community === threadInfo;
 
   const ancestorThreads = ancestorThreadsWithCommunity.slice(1);
 
   const chevronRight = React.useMemo(() => {
     if (threadHasNoAncestors) {
       return null;
     }
     return <ChevronRight size={20} className={css.chevronRight} />;
   }, [threadHasNoAncestors]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   const path = React.useMemo(() => {
     if (threadHasNoAncestors) {
       return null;
     }
     const ancestors = ancestorThreads.map(ancestor => (
       <ThreadAncestor threadInfo={ancestor} key={ancestor.id} />
     ));
     const chatNameClasses = classnames(css.ancestorName, css.chatName);
     return (
       <div className={css.ancestorThreadsContainer}>
         {ancestors}
         <div className={chatNameClasses}>{uiName}</div>
       </div>
     );
   }, [ancestorThreads, threadHasNoAncestors, uiName]);
 
   return (
     <div className={css.container}>
       <div className={css.communityName}>{resolvedCommunity.uiName}</div>
       {chevronRight}
       {path}
     </div>
   );
 }
 
 function ThreadAncestor(props: ThreadAncestorsProps): React.Node {
   const { uiName } = useResolvedThreadInfo(props.threadInfo);
   const chevronClasses = classnames(css.ancestorSeparator, css.chevronRight);
   return (
     <>
       <div className={css.ancestorName}>{uiName}</div>
       <ChevronRight size={12} className={chevronClasses} />
     </>
   );
 }
 
 export default ThreadAncestors;
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
index df8822f7a..e1de284d5 100644
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -1,68 +1,67 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 
 import ThreadAncestors from './chat-thread-ancestors.react.js';
 import css from './nav-state-info-bar.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 
 type NavStateInfoBarProps = {
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
 
   return (
     <>
       <div className={css.avatarContainer}>
         <ThreadAvatar size="S" threadInfo={threadInfo} />
       </div>
       <ThreadAncestors threadInfo={threadInfo} />
     </>
   );
 }
 
 type PossiblyEmptyNavStateInfoBarProps = {
-  +threadInfoInput: ?LegacyThreadInfo | ?ThreadInfo,
+  +threadInfoInput: ?ThreadInfo,
 };
 function PossiblyEmptyNavStateInfoBar(
   props: PossiblyEmptyNavStateInfoBarProps,
 ): React.Node {
   const { threadInfoInput } = props;
 
   const [threadInfo, setThreadInfo] = React.useState(threadInfoInput);
 
   React.useEffect(() => {
     if (threadInfoInput !== threadInfo) {
       if (threadInfoInput) {
         setThreadInfo(threadInfoInput);
       } else {
         const timeout = setTimeout(() => {
           setThreadInfo(null);
         }, 200);
         return () => clearTimeout(timeout);
       }
     }
     return undefined;
   }, [threadInfoInput, threadInfo]);
 
   const content = React.useMemo(() => {
     if (threadInfo) {
       return <NavStateInfoBar threadInfo={threadInfo} />;
     } else {
       return null;
     }
   }, [threadInfo]);
 
   const classes = classnames(css.topBarContainer, {
     [css.hide]: !threadInfoInput,
     [css.show]: threadInfoInput,
   });
   return <div className={classes}>{content}</div>;
 }
 
 export default PossiblyEmptyNavStateInfoBar;
diff --git a/web/selectors/chat-selectors.js b/web/selectors/chat-selectors.js
index f5ccdb083..ae7954cd3 100644
--- a/web/selectors/chat-selectors.js
+++ b/web/selectors/chat-selectors.js
@@ -1,81 +1,79 @@
 // @flow
 
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import {
   type ChatThreadItem,
   createChatThreadItem,
   messageInfoSelector,
 } from 'lib/selectors/chat-selectors.js';
 import {
   sidebarInfoSelector,
   threadInfoSelector,
 } from 'lib/selectors/thread-selectors.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { MessageInfo, MessageStore } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type { LegacyThreadInfo, SidebarInfo } from 'lib/types/thread-types.js';
+import type { SidebarInfo } from 'lib/types/thread-types.js';
 
 import type { AppState } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const activeChatThreadItem: (state: AppState) => ?ChatThreadItem =
   createSelector(
     threadInfoSelector,
     (state: AppState) => state.messageStore,
     messageInfoSelector,
     (state: AppState) => state.navInfo.activeChatThreadID,
     (state: AppState) => state.navInfo.pendingThread,
     sidebarInfoSelector,
     (
       threadInfos: {
-        +[id: string]: LegacyThreadInfo | ThreadInfo,
+        +[id: string]: ThreadInfo,
       },
       messageStore: MessageStore,
       messageInfos: { +[id: string]: ?MessageInfo },
       activeChatThreadID: ?string,
-      pendingThreadInfo: ?LegacyThreadInfo | ?ThreadInfo,
+      pendingThreadInfo: ?ThreadInfo,
       sidebarInfos: { +[id: string]: $ReadOnlyArray<SidebarInfo> },
     ): ?ChatThreadItem => {
       if (!activeChatThreadID) {
         return null;
       }
       const isPending = threadIsPending(activeChatThreadID);
       const threadInfo = isPending
         ? pendingThreadInfo
         : threadInfos[activeChatThreadID];
 
       if (!threadInfo) {
         return null;
       }
       return createChatThreadItem(
         threadInfo,
         messageStore,
         messageInfos,
         sidebarInfos[threadInfo.id],
       );
     },
   );
 
-function useChatThreadItem(
-  threadInfo: ?LegacyThreadInfo | ?ThreadInfo,
-): ?ChatThreadItem {
+function useChatThreadItem(threadInfo: ?ThreadInfo): ?ChatThreadItem {
   const messageInfos = useSelector(messageInfoSelector);
   const sidebarInfos = useSelector(sidebarInfoSelector);
   const messageStore = useSelector(state => state.messageStore);
 
   return React.useMemo(() => {
     if (!threadInfo) {
       return null;
     }
 
     return createChatThreadItem(
       threadInfo,
       messageStore,
       messageInfos,
       sidebarInfos[threadInfo.id],
     );
   }, [messageInfos, messageStore, sidebarInfos, threadInfo]);
 }
 export { useChatThreadItem, activeChatThreadItem };
diff --git a/web/tooltips/tooltip-action-utils.js b/web/tooltips/tooltip-action-utils.js
index 69330c927..23c41d677 100644
--- a/web/tooltips/tooltip-action-utils.js
+++ b/web/tooltips/tooltip-action-utils.js
@@ -1,536 +1,535 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { useResettingState } from 'lib/hooks/use-resetting-state.js';
 import type {
   ChatMessageInfoItem,
   ReactionInfo,
 } from 'lib/selectors/chat-selectors.js';
 import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
 import { createMessageReply } from 'lib/shared/message-utils.js';
 import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
 import {
   threadHasPermission,
   useSidebarExistsOrCanBeCreated,
 } from 'lib/shared/thread-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { longAbsoluteDate } from 'lib/utils/date-utils.js';
 import { canToggleMessagePin } from 'lib/utils/message-pinning-utils.js';
 
 import LabelTooltip from './label-toolitp.react.js';
 import MessageTooltip from './message-tooltip.react.js';
 import ReactionTooltip from './reaction-tooltip.react.js';
 import { useTooltipContext } from './tooltip-provider.js';
 import {
   calculateLabelTooltipSize,
   calculateMessageTooltipSize,
   calculateReactionTooltipSize,
   getTooltipPositionStyle,
   type MessageTooltipAction,
   type TooltipPosition,
   type TooltipPositionStyle,
   type TooltipSize,
 } from './tooltip-utils.js';
 import { getComposedMessageID } from '../chat/chat-constants.js';
 import { useEditModalContext } from '../chat/edit-message-provider.js';
 import type { PositionInfo } from '../chat/position-types.js';
 import CommIcon from '../CommIcon.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import TogglePinModal from '../modals/chat/toggle-pin-modal.react.js';
 import {
   useOnClickPendingSidebar,
   useOnClickThread,
 } from '../selectors/thread-selectors.js';
 
 type UseTooltipArgs = {
   +createTooltip: (tooltipPositionStyle: TooltipPositionStyle) => React.Node,
   +tooltipSize: TooltipSize,
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
 };
 type UseTooltipResult = {
   +onMouseEnter: (event: SyntheticEvent<HTMLElement>) => mixed,
   +onMouseLeave: ?() => mixed,
 };
 
 function useTooltip({
   createTooltip,
   tooltipSize,
   availablePositions,
 }: UseTooltipArgs): UseTooltipResult {
   const [onMouseLeave, setOnMouseLeave] = React.useState<?() => mixed>(null);
   const [tooltipSourcePosition, setTooltipSourcePosition] =
     React.useState<?PositionInfo>();
 
   const { renderTooltip } = useTooltipContext();
   const updateTooltip = React.useRef<?(React.Node) => mixed>();
 
   const onMouseEnter = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       if (!renderTooltip) {
         return;
       }
       const rect = event.currentTarget.getBoundingClientRect();
       const { top, bottom, left, right, height, width } = rect;
       const sourcePosition = { top, bottom, left, right, height, width };
       setTooltipSourcePosition(sourcePosition);
 
       const tooltipPositionStyle = getTooltipPositionStyle({
         tooltipSourcePosition: sourcePosition,
         tooltipSize,
         availablePositions,
       });
       if (!tooltipPositionStyle) {
         return;
       }
 
       const tooltip = createTooltip(tooltipPositionStyle);
 
       const renderTooltipResult = renderTooltip({
         newNode: tooltip,
         tooltipPositionStyle,
       });
       if (renderTooltipResult) {
         const { onMouseLeaveCallback: callback } = renderTooltipResult;
         setOnMouseLeave((() => callback: () => () => mixed));
         updateTooltip.current = renderTooltipResult.updateTooltip;
       }
     },
     [availablePositions, createTooltip, renderTooltip, tooltipSize],
   );
 
   React.useEffect(() => {
     if (!updateTooltip.current) {
       return;
     }
 
     const tooltipPositionStyle = getTooltipPositionStyle({
       tooltipSourcePosition,
       tooltipSize,
       availablePositions,
     });
     if (!tooltipPositionStyle) {
       return;
     }
 
     const tooltip = createTooltip(tooltipPositionStyle);
     updateTooltip.current?.(tooltip);
   }, [availablePositions, createTooltip, tooltipSize, tooltipSourcePosition]);
 
   return {
     onMouseEnter,
     onMouseLeave,
   };
 }
 
 function useMessageTooltipSidebarAction(
   item: ChatMessageInfoItem,
-  threadInfo: LegacyThreadInfo | ThreadInfo,
+  threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { threadCreatedFromMessage, messageInfo } = item;
   const { popModal } = useModalContext();
   const sidebarExists = !!threadCreatedFromMessage;
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     threadInfo,
     item,
   );
   const openThread = useOnClickThread(threadCreatedFromMessage);
   const openPendingSidebar = useOnClickPendingSidebar(messageInfo, threadInfo);
   return React.useMemo(() => {
     if (!sidebarExistsOrCanBeCreated) {
       return null;
     }
     const buttonContent = <CommIcon icon="sidebar-filled" size={16} />;
     const onClick = (event: SyntheticEvent<HTMLElement>) => {
       popModal();
 
       if (threadCreatedFromMessage) {
         openThread(event);
       } else {
         openPendingSidebar(event);
       }
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: sidebarExists ? 'Go to thread' : 'Create thread',
     };
   }, [
     popModal,
     openPendingSidebar,
     openThread,
     sidebarExists,
     sidebarExistsOrCanBeCreated,
     threadCreatedFromMessage,
   ]);
 }
 
 function useMessageTooltipReplyAction(
   item: ChatMessageInfoItem,
-  threadInfo: LegacyThreadInfo | ThreadInfo,
+  threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
   const { popModal } = useModalContext();
   const inputState = React.useContext(InputStateContext);
   invariant(inputState, 'inputState is required');
   const { addReply } = inputState;
   return React.useMemo(() => {
     if (
       item.messageInfo.type !== messageTypes.TEXT ||
       !threadHasPermission(threadInfo, threadPermissions.VOICED)
     ) {
       return null;
     }
     const buttonContent = <CommIcon icon="reply-filled" size={18} />;
     const onClick = () => {
       popModal();
 
       if (!messageInfo.text) {
         return;
       }
       addReply(createMessageReply(messageInfo.text));
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: 'Reply',
     };
   }, [popModal, addReply, item.messageInfo.type, messageInfo, threadInfo]);
 }
 
 const copiedMessageDurationMs = 2000;
 function useMessageCopyAction(
   item: ChatMessageInfoItem,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const [successful, setSuccessful] = useResettingState(
     false,
     copiedMessageDurationMs,
   );
 
   return React.useMemo(() => {
     if (messageInfo.type !== messageTypes.TEXT) {
       return null;
     }
     const buttonContent = <CommIcon icon="copy-filled" size={18} />;
     const onClick = async () => {
       try {
         await navigator.clipboard.writeText(messageInfo.text);
         setSuccessful(true);
       } catch (e) {
         setSuccessful(false);
       }
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: successful ? 'Copied!' : 'Copy',
     };
   }, [messageInfo.text, messageInfo.type, setSuccessful, successful]);
 }
 
 function useMessageReactAction(
   item: ChatMessageInfoItem,
-  threadInfo: LegacyThreadInfo | ThreadInfo,
+  threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const { setShouldRenderEmojiKeyboard } = useTooltipContext();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   return React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     const buttonContent = <CommIcon icon="emote-smile-filled" size={18} />;
 
     const onClickReact = () => {
       if (!setShouldRenderEmojiKeyboard) {
         return;
       }
       setShouldRenderEmojiKeyboard(true);
     };
 
     return {
       actionButtonContent: buttonContent,
       onClick: onClickReact,
       label: 'React',
     };
   }, [canCreateReactionFromMessage, setShouldRenderEmojiKeyboard]);
 }
 
 function useMessageTogglePinAction(
   item: ChatMessageInfoItem,
-  threadInfo: LegacyThreadInfo | ThreadInfo,
+  threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { pushModal } = useModalContext();
   const { messageInfo, isPinned } = item;
 
   const canTogglePin = canToggleMessagePin(messageInfo, threadInfo);
 
   const inputState = React.useContext(InputStateContext);
 
   return React.useMemo(() => {
     if (!canTogglePin) {
       return null;
     }
 
     const iconName = isPinned ? 'unpin' : 'pin';
 
     const buttonContent = <CommIcon icon={iconName} size={18} />;
 
     const onClickTogglePin = () => {
       pushModal(
         <InputStateContext.Provider value={inputState}>
           <TogglePinModal item={item} threadInfo={threadInfo} />
         </InputStateContext.Provider>,
       );
     };
 
     return {
       actionButtonContent: buttonContent,
       onClick: onClickTogglePin,
       label: isPinned ? 'Unpin' : 'Pin',
     };
   }, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]);
 }
 
 function useMessageEditAction(
   item: ChatMessageInfoItem,
-  threadInfo: LegacyThreadInfo | ThreadInfo,
+  threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const canEditMessage = useCanEditMessage(threadInfo, messageInfo);
   const { renderEditModal, scrollToMessage } = useEditModalContext();
   const { clearTooltip } = useTooltipContext();
 
   return React.useMemo(() => {
     if (!canEditMessage) {
       return null;
     }
     const buttonContent = <CommIcon icon="edit-filled" size={18} />;
     const onClickEdit = () => {
       const callback = (maxHeight: number) =>
         renderEditModal({
           messageInfo: item,
           threadInfo,
           isError: false,
           editedMessageDraft: messageInfo.text,
           maxHeight: maxHeight,
         });
       clearTooltip();
       scrollToMessage(getComposedMessageID(messageInfo), callback);
     };
     return {
       actionButtonContent: buttonContent,
       onClick: onClickEdit,
       label: 'Edit',
     };
   }, [
     canEditMessage,
     clearTooltip,
     item,
     messageInfo,
     renderEditModal,
     scrollToMessage,
     threadInfo,
   ]);
 }
 
 function useMessageTooltipActions(
   item: ChatMessageInfoItem,
-  threadInfo: LegacyThreadInfo | ThreadInfo,
+  threadInfo: ThreadInfo,
 ): $ReadOnlyArray<MessageTooltipAction> {
   const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
   const replyAction = useMessageTooltipReplyAction(item, threadInfo);
   const copyAction = useMessageCopyAction(item);
   const reactAction = useMessageReactAction(item, threadInfo);
   const togglePinAction = useMessageTogglePinAction(item, threadInfo);
   const editAction = useMessageEditAction(item, threadInfo);
   return React.useMemo(
     () =>
       [
         replyAction,
         sidebarAction,
         copyAction,
         reactAction,
         togglePinAction,
         editAction,
       ].filter(Boolean),
     [
       replyAction,
       sidebarAction,
       copyAction,
       reactAction,
       togglePinAction,
       editAction,
     ],
   );
 }
 
 const undefinedTooltipSize = {
   width: 0,
   height: 0,
 };
 
 type UseMessageTooltipArgs = {
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
   +item: ChatMessageInfoItem,
-  +threadInfo: LegacyThreadInfo | ThreadInfo,
+  +threadInfo: ThreadInfo,
 };
 
 function useMessageTooltip({
   availablePositions,
   item,
   threadInfo,
 }: UseMessageTooltipArgs): UseTooltipResult {
   const tooltipActions = useMessageTooltipActions(item, threadInfo);
 
   const messageTimestamp = React.useMemo(() => {
     const time = item.messageInfo.time;
     return longAbsoluteDate(time);
   }, [item.messageInfo.time]);
 
   const tooltipSize = React.useMemo(() => {
     if (typeof document === 'undefined') {
       return undefinedTooltipSize;
     }
     const tooltipLabels = tooltipActions.map(action => action.label);
     return calculateMessageTooltipSize({
       tooltipLabels,
       timestamp: messageTimestamp,
     });
   }, [messageTimestamp, tooltipActions]);
 
   const createMessageTooltip = React.useCallback(
     (tooltipPositionStyle: TooltipPositionStyle) => (
       <MessageTooltip
         actions={tooltipActions}
         messageTimestamp={messageTimestamp}
         tooltipPositionStyle={tooltipPositionStyle}
         tooltipSize={tooltipSize}
         item={item}
         threadInfo={threadInfo}
       />
     ),
     [item, messageTimestamp, threadInfo, tooltipActions, tooltipSize],
   );
 
   const { onMouseEnter, onMouseLeave } = useTooltip({
     createTooltip: createMessageTooltip,
     tooltipSize,
     availablePositions,
   });
 
   return {
     onMouseEnter,
     onMouseLeave,
   };
 }
 
 type UseReactionTooltipArgs = {
   +reaction: string,
   +reactions: ReactionInfo,
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
 };
 
 function useReactionTooltip({
   reaction,
   reactions,
   availablePositions,
 }: UseReactionTooltipArgs): UseTooltipResult {
   const { users } = reactions[reaction];
 
   const tooltipSize = React.useMemo(() => {
     if (typeof document === 'undefined') {
       return undefinedTooltipSize;
     }
 
     const usernames = users.map(user => user.username).filter(Boolean);
 
     return calculateReactionTooltipSize(usernames);
   }, [users]);
 
   const createReactionTooltip = React.useCallback(
     () => <ReactionTooltip reactions={reactions} reaction={reaction} />,
     [reaction, reactions],
   );
 
   const { onMouseEnter, onMouseLeave } = useTooltip({
     createTooltip: createReactionTooltip,
     tooltipSize,
     availablePositions,
   });
 
   return {
     onMouseEnter,
     onMouseLeave,
   };
 }
 
 type UseLabelTooltipArgs = {
   +tooltipLabel: string,
   +position: TooltipPosition,
   // The margin size should be between the point of origin and
   // the base of the tooltip. The arrow is a "decoration" and
   // should not be considered when measuring the margin size.
   +tooltipMargin: number,
 };
 
 function useLabelTooltip({
   tooltipLabel,
   position,
   tooltipMargin,
 }: UseLabelTooltipArgs): UseTooltipResult {
   const tooltipSize = React.useMemo(() => {
     if (typeof document === 'undefined') {
       return undefinedTooltipSize;
     }
 
     return calculateLabelTooltipSize(tooltipLabel, position, tooltipMargin);
   }, [position, tooltipLabel, tooltipMargin]);
 
   const createLabelTooltip = React.useCallback(
     () => (
       <LabelTooltip
         tooltipLabel={tooltipLabel}
         position={position}
         tooltipMargin={tooltipMargin}
       />
     ),
     [position, tooltipLabel, tooltipMargin],
   );
 
   const { onMouseEnter, onMouseLeave } = useTooltip({
     createTooltip: createLabelTooltip,
     tooltipSize,
     availablePositions: [position],
   });
 
   return {
     onMouseEnter,
     onMouseLeave,
   };
 }
 
 export {
   useMessageTooltipSidebarAction,
   useMessageTooltipReplyAction,
   useMessageReactAction,
   useMessageTooltipActions,
   useMessageTooltip,
   useReactionTooltip,
   useLabelTooltip,
 };
diff --git a/web/types/nav-types.js b/web/types/nav-types.js
index ed67011f0..2dc8e19ea 100644
--- a/web/types/nav-types.js
+++ b/web/types/nav-types.js
@@ -1,61 +1,60 @@
 // @flow
 
 import type { TInterface } from 'tcomb';
 import t from 'tcomb';
 
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type BaseNavInfo } from 'lib/types/nav-types.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import { legacyThreadInfoValidator } from 'lib/types/thread-types.js';
 import {
   type AccountUserInfo,
   accountUserInfoValidator,
 } from 'lib/types/user-types.js';
 import { tID, tShape } from 'lib/utils/validation-utils.js';
 
 export type NavigationTab = 'calendar' | 'chat' | 'settings';
 const navigationTabValidator = t.enums.of(['calendar', 'chat', 'settings']);
 export type LoginMethod = 'form' | 'qr-code';
 const loginMethodValidator = t.enums.of(['form', 'qr-code']);
 
 export type NavigationSettingsSection =
   | 'account'
   | 'friend-list'
   | 'block-list'
   | 'keyservers'
   | 'danger-zone';
 const navigationSettingsSectionValidator = t.enums.of([
   'account',
   'friend-list',
   'block-list',
   'keyservers',
   'danger-zone',
 ]);
 
 export type NavigationChatMode = 'view' | 'create';
 const navigationChatModeValidator = t.enums.of(['view', 'create']);
 
 export type NavInfo = {
   ...$Exact<BaseNavInfo>,
   +tab: NavigationTab,
   +activeChatThreadID: ?string,
-  +pendingThread?: LegacyThreadInfo | ThreadInfo,
+  +pendingThread?: ThreadInfo,
   +settingsSection?: NavigationSettingsSection,
   +selectedUserList?: $ReadOnlyArray<AccountUserInfo>,
   +chatMode?: NavigationChatMode,
   +inviteSecret?: ?string,
   +loginMethod?: LoginMethod,
 };
 
 export const navInfoValidator: TInterface<NavInfo> = tShape<$Exact<NavInfo>>({
   startDate: t.String,
   endDate: t.String,
   tab: navigationTabValidator,
   activeChatThreadID: t.maybe(tID),
   pendingThread: t.maybe(legacyThreadInfoValidator),
   settingsSection: t.maybe(navigationSettingsSectionValidator),
   selectedUserList: t.maybe(t.list(accountUserInfoValidator)),
   chatMode: t.maybe(navigationChatModeValidator),
   inviteSecret: t.maybe(t.String),
   loginMethod: t.maybe(loginMethodValidator),
 });
diff --git a/web/utils/thread-utils.js b/web/utils/thread-utils.js
index 9f21a4173..394769a19 100644
--- a/web/utils/thread-utils.js
+++ b/web/utils/thread-utils.js
@@ -1,111 +1,110 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import {
   createPendingThread,
   useExistingThreadInfoFinder,
 } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
-import type { LegacyThreadInfo } from 'lib/types/thread-types.js';
 import type { AccountUserInfo } from 'lib/types/user-types.js';
 
 import { useSelector } from '../redux/redux-utils.js';
 
 type InfosForPendingThread = {
   +isChatCreation: boolean,
   +selectedUserInfos: $ReadOnlyArray<AccountUserInfo>,
   +otherUserInfos: { [id: string]: AccountUserInfo },
 };
 
 function useInfosForPendingThread(): InfosForPendingThread {
   const isChatCreation = useSelector(
     state => state.navInfo.chatMode === 'create',
   );
   const selectedUserInfos = useSelector(
     state => state.navInfo.selectedUserList ?? [],
   );
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   return {
     isChatCreation,
     selectedUserInfos,
     otherUserInfos,
   };
 }
 
 function useThreadInfoForPossiblyPendingThread(
   activeChatThreadID: ?string,
-): ?LegacyThreadInfo | ?ThreadInfo {
+): ?ThreadInfo {
   const { isChatCreation, selectedUserInfos } = useInfosForPendingThread();
 
   const loggedInUserInfo = useLoggedInUserInfo();
   invariant(loggedInUserInfo, 'loggedInUserInfo should be set');
 
   const pendingPrivateThread = React.useRef(
     createPendingThread({
       viewerID: loggedInUserInfo.id,
       threadType: threadTypes.PRIVATE,
       members: [loggedInUserInfo],
     }),
   );
 
   const newThreadID = 'pending/new_thread';
   const pendingNewThread = React.useMemo(
     () => ({
       ...createPendingThread({
         viewerID: loggedInUserInfo.id,
         threadType: threadTypes.PRIVATE,
         members: [loggedInUserInfo],
         name: 'New thread',
       }),
       id: newThreadID,
     }),
     [loggedInUserInfo],
   );
   const existingThreadInfoFinderForCreatingThread = useExistingThreadInfoFinder(
     pendingPrivateThread.current,
   );
 
   const baseThreadInfo = useSelector(state => {
     if (activeChatThreadID) {
       const activeThreadInfo = threadInfoSelector(state)[activeChatThreadID];
       if (activeThreadInfo) {
         return activeThreadInfo;
       }
     }
     return state.navInfo.pendingThread;
   });
   const existingThreadInfoFinder = useExistingThreadInfoFinder(baseThreadInfo);
   const threadInfo = React.useMemo(() => {
     if (isChatCreation) {
       if (selectedUserInfos.length === 0) {
         return pendingNewThread;
       }
 
       return existingThreadInfoFinderForCreatingThread({
         searching: true,
         userInfoInputArray: selectedUserInfos,
       });
     }
 
     return existingThreadInfoFinder({
       searching: false,
       userInfoInputArray: [],
     });
   }, [
     existingThreadInfoFinder,
     existingThreadInfoFinderForCreatingThread,
     isChatCreation,
     pendingNewThread,
     selectedUserInfos,
   ]);
 
   return threadInfo;
 }
 
 export { useThreadInfoForPossiblyPendingThread, useInfosForPendingThread };