diff --git a/web/app.react.js b/web/app.react.js
index efab05d57..906ce3149 100644
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -1,402 +1,402 @@
 // @flow
 
 import 'basscss/css/basscss.min.css';
 import './theme.css';
 import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
 import classnames from 'classnames';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { WagmiConfig } from 'wagmi';
 
 import {
   fetchEntriesActionTypes,
   updateCalendarQueryActionTypes,
 } from 'lib/actions/entry-actions.js';
 import { ChatMentionContextProvider } from 'lib/components/chat-mention-provider.react.js';
 import { EditUserAvatarProvider } from 'lib/components/edit-user-avatar-provider.react.js';
 import {
   ModalProvider,
   useModalContext,
 } from 'lib/components/modal-provider.react.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { TunnelbrokerProvider } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { registerConfig } from 'lib/utils/config.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { infoFromURL } from 'lib/utils/url-utils.js';
 import { AlchemyENSCacheProvider, wagmiConfig } from 'lib/utils/wagmi-utils.js';
 
 import QrCodeLogin from './account/qr-code-login.react.js';
 import AppThemeWrapper from './app-theme-wrapper.react.js';
 import WebEditThreadAvatarProvider from './avatars/web-edit-thread-avatar-provider.react.js';
 import Calendar from './calendar/calendar.react.js';
 import Chat from './chat/chat.react.js';
 import { EditModalProvider } from './chat/edit-message-provider.js';
 import { TooltipProvider } from './chat/tooltip-provider.js';
 import NavigationArrows from './components/navigation-arrows.react.js';
 import { initOpaque } from './crypto/opaque-utils.js';
 import electron from './electron.js';
 import InputStateContainer from './input/input-state-container.react.js';
 import InviteLinkHandler from './invite-links/invite-link-handler.react.js';
 import InviteLinksRefresher from './invite-links/invite-links-refresher.react.js';
 import LoadingIndicator from './loading-indicator.react.js';
 import { MenuProvider } from './menu-provider.react.js';
 import UpdateModalHandler from './modals/update-modal.react.js';
 import SettingsSwitcher from './navigation-panels/settings-switcher.react.js';
 import Topbar from './navigation-panels/topbar.react.js';
 import useBadgeHandler from './push-notif/badge-handler.react.js';
 import { PushNotificationsHandler } from './push-notif/push-notifs-handler.js';
 import { updateNavInfoActionType } from './redux/action-types.js';
 import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler.js';
 import DisconnectedBar from './redux/disconnected-bar.js';
 import FocusHandler from './redux/focus-handler.react.js';
 import { persistConfig } from './redux/persist.js';
 import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js';
 import { useSelector } from './redux/redux-utils.js';
 import VisibilityHandler from './redux/visibility-handler.react.js';
 import history from './router-history.js';
 import { MessageSearchStateProvider } from './search/message-search-state-provider.react.js';
 import { createTunnelbrokerInitMessage } from './selectors/tunnelbroker-selectors.js';
 import AccountSettings from './settings/account-settings.react.js';
 import DangerZone from './settings/danger-zone.react.js';
 import KeyserverSelectionList from './settings/keyserver-selection-list.react.js';
 import CommunityPicker from './sidebar/community-picker.react.js';
 import Splash from './splash/splash.react.js';
 import './typography.css';
 import css from './style.css';
 import { type NavInfo } from './types/nav-types.js';
 import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js';
 
 initOpaque();
 
 // We want Webpack's css-loader and style-loader to handle the Fontawesome CSS,
 // so we disable the autoAddCss logic and import the CSS file. Otherwise every
 // icon flashes huge for a second before the CSS is loaded.
 import '@fortawesome/fontawesome-svg-core/styles.css';
 
 faConfig.autoAddCss = false;
 
 registerConfig({
   // We can't securely cache credentials on web, so we have no way to recover
   // from a cookie invalidation
   resolveInvalidatedCookie: null,
   setSessionIDOnRequest: true,
   // Never reset the calendar range
   calendarRangeInactivityLimit: null,
   platformDetails: {
     platform: electron?.platform ?? 'web',
     codeVersion: 43,
     stateVersion: persistConfig.version,
   },
 });
 
 type BaseProps = {
   +location: {
     +pathname: string,
     ...
   },
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +navInfo: NavInfo,
   +entriesLoadingStatus: LoadingStatus,
   +loggedIn: boolean,
   +activeThreadCurrentlyUnread: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +modals: $ReadOnlyArray<React.Node>,
 };
 
 class App extends React.PureComponent<Props> {
   componentDidMount() {
     const {
       navInfo,
       location: { pathname },
       loggedIn,
     } = this.props;
     const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
     if (pathname !== newURL) {
       history.replace(newURL);
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     const {
       navInfo,
       location: { pathname },
       loggedIn,
     } = this.props;
     if (!_isEqual(navInfo)(prevProps.navInfo)) {
       const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
       if (newURL !== pathname) {
         history.push(newURL);
       }
     } else if (pathname !== prevProps.location.pathname) {
       const urlInfo = infoFromURL(pathname);
       const newNavInfo = navInfoFromURL(urlInfo, { navInfo });
       if (!_isEqual(newNavInfo)(navInfo)) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: newNavInfo,
         });
       }
     } else if (loggedIn !== prevProps.loggedIn) {
       const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
       if (newURL !== pathname) {
         history.replace(newURL);
       }
     }
     if (loggedIn !== prevProps.loggedIn) {
       electron?.clearHistory();
     }
   }
 
   onWordmarkClicked = () => {
     this.props.dispatch({
       type: updateNavInfoActionType,
       payload: { tab: 'chat' },
     });
   };
 
   render(): React.Node {
     let content;
     if (this.props.loggedIn) {
       content = (
         <>
           <WebEditThreadAvatarProvider>
             <EditUserAvatarProvider>
               {this.renderMainContent()}
               {this.props.modals}
             </EditUserAvatarProvider>
           </WebEditThreadAvatarProvider>
         </>
       );
     } else {
       content = (
         <>
           {this.renderLoginPage()}
           {this.props.modals}
         </>
       );
     }
     return (
       <DndProvider backend={HTML5Backend}>
         <EditModalProvider>
           <TooltipProvider>
             <MenuProvider>
               <WagmiConfig config={wagmiConfig}>
                 <AlchemyENSCacheProvider>
                   <MessageSearchStateProvider>
                     <ChatMentionContextProvider>
                       <FocusHandler />
                       <VisibilityHandler />
                       <PolicyAcknowledgmentHandler />
                       <PushNotificationsHandler />
                       <InviteLinkHandler />
                       <InviteLinksRefresher />
                       {content}
                     </ChatMentionContextProvider>
                   </MessageSearchStateProvider>
                 </AlchemyENSCacheProvider>
               </WagmiConfig>
             </MenuProvider>
           </TooltipProvider>
         </EditModalProvider>
       </DndProvider>
     );
   }
 
   onHeaderDoubleClick = (): void => electron?.doubleClickTopBar();
   stopDoubleClickPropagation: ?(SyntheticEvent<HTMLAnchorElement>) => void =
     electron ? e => e.stopPropagation() : null;
 
   renderLoginPage(): React.Node {
     const { loginMethod } = this.props.navInfo;
 
     if (loginMethod === 'qr-code') {
       return <QrCodeLogin />;
     }
 
     return <Splash />;
   }
 
   renderMainContent(): React.Node {
     const mainContent = this.getMainContentWithSwitcher();
 
     let navigationArrows = null;
     if (electron) {
       navigationArrows = <NavigationArrows />;
     }
 
     const headerClasses = classnames({
       [css.header]: true,
       [css['electron-draggable']]: electron,
     });
 
     const wordmarkClasses = classnames({
       [css.wordmark]: true,
       [css['electron-non-draggable']]: electron,
       [css['wordmark-macos']]: electron?.platform === 'macos',
     });
 
     return (
       <div className={css.layout}>
         <DisconnectedBarVisibilityHandler />
         <DisconnectedBar />
         <UpdateModalHandler />
         <header
           className={headerClasses}
           onDoubleClick={this.onHeaderDoubleClick}
         >
           <div className={css['main-header']}>
             <h1 className={wordmarkClasses}>
               <a
                 title="Comm Home"
                 aria-label="Go to Comm Home"
                 onClick={this.onWordmarkClicked}
                 onDoubleClick={this.stopDoubleClickPropagation}
               >
                 Comm
               </a>
             </h1>
             {navigationArrows}
             <div className={css['upper-right']}>
               <LoadingIndicator
                 status={this.props.entriesLoadingStatus}
                 size="medium"
                 loadingClassName={css['page-loading']}
                 errorClassName={css['page-error']}
               />
             </div>
           </div>
         </header>
         <InputStateContainer>{mainContent}</InputStateContainer>
         <div className={css.sidebar}>
           <CommunityPicker />
         </div>
       </div>
     );
   }
 
   getMainContentWithSwitcher(): React.Node {
     const { tab, settingsSection } = this.props.navInfo;
-    let mainContent;
+    let mainContent: React.Node;
 
     if (tab === 'settings') {
       if (settingsSection === 'account') {
         mainContent = <AccountSettings />;
       } else if (settingsSection === 'keyservers') {
         mainContent = <KeyserverSelectionList />;
       } else if (settingsSection === 'danger-zone') {
         mainContent = <DangerZone />;
       }
       return (
         <div className={css['main-content-container']}>
           <div className={css.switcher}>
             <SettingsSwitcher />
           </div>
           <div className={css['main-content']}>{mainContent}</div>
         </div>
       );
     }
 
     if (tab === 'calendar') {
       mainContent = <Calendar url={this.props.location.pathname} />;
     } else if (tab === 'chat') {
       mainContent = <Chat />;
     }
 
     const mainContentClass = classnames(
       css['main-content-container'],
       css['main-content-container-column'],
     );
     return (
       <div className={mainContentClass}>
         <Topbar />
         <div className={css['main-content']}>{mainContent}</div>
       </div>
     );
   }
 }
 
 const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
   fetchEntriesActionTypes,
 );
 const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 
 const ConnectedApp: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedApp(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const navInfo = useSelector(state => state.navInfo);
 
     const fetchEntriesLoadingStatus = useSelector(
       fetchEntriesLoadingStatusSelector,
     );
     const updateCalendarQueryLoadingStatus = useSelector(
       updateCalendarQueryLoadingStatusSelector,
     );
     const entriesLoadingStatus = combineLoadingStatuses(
       fetchEntriesLoadingStatus,
       updateCalendarQueryLoadingStatus,
     );
 
     const loggedIn = useSelector(isLoggedIn);
     const activeThreadCurrentlyUnread = useSelector(
       state =>
         !activeChatThreadID ||
         !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
     );
 
     useBadgeHandler();
 
     const dispatch = useDispatch();
     const modalContext = useModalContext();
     const modals = React.useMemo(
       () =>
         modalContext.modals.map(([modal, key]) => (
           <React.Fragment key={key}>{modal}</React.Fragment>
         )),
       [modalContext.modals],
     );
 
     const tunnelbrokerInitMessage = useSelector(createTunnelbrokerInitMessage);
 
     return (
       <AppThemeWrapper>
         <TunnelbrokerProvider initMessage={tunnelbrokerInitMessage}>
           <App
             {...props}
             navInfo={navInfo}
             entriesLoadingStatus={entriesLoadingStatus}
             loggedIn={loggedIn}
             activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
             dispatch={dispatch}
             modals={modals}
           />
         </TunnelbrokerProvider>
       </AppThemeWrapper>
     );
   },
 );
 
 function AppWithProvider(props: BaseProps): React.Node {
   return (
     <ModalProvider>
       <ConnectedApp {...props} />
     </ModalProvider>
   );
 }
 
 export default AppWithProvider;
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
index 71ee4850d..dcf18cab6 100644
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -1,425 +1,425 @@
 // @flow
 
 import {
   faCog,
   faTimesCircle,
   faChevronUp,
   faChevronDown,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 import { ChevronsLeft } from 'react-feather';
 import Switch from 'react-switch';
 
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import {
   filteredThreadIDsSelector,
   includeDeletedSelector,
 } from 'lib/selectors/calendar-filter-selectors.js';
 import SearchIndex from 'lib/shared/search-index.js';
 import {
   calendarThreadFilterTypes,
   type FilterThreadInfo,
   updateCalendarThreadFilter,
   clearCalendarThreadFilter,
   setCalendarDeletedFilter,
 } from 'lib/types/filter-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import css from './filter-panel.css';
 import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   useFilterThreadInfos,
   useFilterThreadSearchIndex,
   filterThreadIDsBelongingToCommunitySelector,
 } from '../selectors/calendar-selectors.js';
 import { MagnifyingGlass } from '../vectors.react.js';
 
 type Props = {
   +filterThreadInfos: $ReadOnlyArray<FilterThreadInfo>,
   +filterThreadSearchIndex: SearchIndex,
   +filteredThreadIDs: ?$ReadOnlySet<string>,
   +filteredCommunityThreadIDs: ?$ReadOnlySet<string>,
   +includeDeleted: boolean,
   +dispatch: Dispatch,
   +pushModal: PushModal,
   +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
 };
 type State = {
   +query: string,
   +searchResults: $ReadOnlyArray<FilterThreadInfo>,
   +collapsed: boolean,
 };
 class FilterPanel extends React.PureComponent<Props, State> {
   state: State = {
     query: '',
     searchResults: [],
     collapsed: false,
   };
 
   currentlySelected(threadID: string): boolean {
     if (!this.props.filteredThreadIDs) {
       return true;
     }
     return this.props.filteredThreadIDs.has(threadID);
   }
 
   inCurrentCommunity(threadID: string): boolean {
     if (!this.props.filteredCommunityThreadIDs) {
       return true;
     }
     return this.props.filteredCommunityThreadIDs.has(threadID);
   }
 
   render(): React.Node {
     const filterThreadInfos = this.state.query
       ? this.state.searchResults
       : this.props.filterThreadInfos;
     const filterThreadInfosInCurrentCommunity = filterThreadInfos.filter(item =>
       this.inCurrentCommunity(item.threadInfo.id),
     );
 
-    let filters = [];
+    let filters: React.Node[] = [];
     if (!this.state.query || filterThreadInfosInCurrentCommunity.length > 0) {
       filters.push(
         <Category
           numThreads={filterThreadInfosInCurrentCommunity.length}
           onToggle={this.onToggleAll}
           collapsed={this.state.collapsed}
           onCollapse={this.onCollapse}
           selected={
             !this.props.filteredThreadIDs ||
             this.props.filteredThreadIDs.size ===
               this.props.filteredCommunityThreadIDs?.size
           }
           key="all"
         />,
       );
     } else {
       filters.push(
         <div className={css.noResults} key="noResults">
           No results
         </div>,
       );
     }
     if (!this.state.collapsed) {
       const options = filterThreadInfosInCurrentCommunity.map(
         filterThreadInfo => (
           <Item
             filterThreadInfo={filterThreadInfo}
             onToggle={this.onToggle}
             onClickOnly={this.onClickOnly}
             onClickSettings={this.onClickSettings}
             selected={this.currentlySelected(filterThreadInfo.threadInfo.id)}
             key={filterThreadInfo.threadInfo.id}
           />
         ),
       );
       filters = [...filters, ...options];
     }
 
     let clearQueryButton = null;
     if (this.state.query) {
       clearQueryButton = (
         <a href="#" onClick={this.clearQuery}>
           <FontAwesomeIcon icon={faTimesCircle} className={css.clearQuery} />
         </a>
       );
     }
 
     return (
       <div className={css.container}>
         <div className={css.searchContainer}>
           <div className={css.search}>
             <MagnifyingGlass className={css.searchVector} />
             <input
               type="text"
               placeholder="Search"
               value={this.state.query}
               onChange={this.onChangeQuery}
               size="10"
             />
             {clearQueryButton}
           </div>
           <a onClick={this.props.toggleFilters} className={css.collapseButton}>
             <ChevronsLeft size={30} />
           </a>
         </div>
         <div className={css.filters}>{filters}</div>
         <div className={css.extras}>
           <label htmlFor="include-deleted-switch">
             <Switch
               checked={this.props.includeDeleted}
               onChange={this.onChangeIncludeDeleted}
               checkedIcon={false}
               uncheckedIcon={false}
               height={20}
               width={40}
               id="include-deleted-switch"
             />
             <span>Include deleted entries</span>
           </label>
         </div>
       </div>
     );
   }
 
   onToggle = (threadID: string, value: boolean) => {
     let newThreadIDs;
     const selectedThreadIDs = this.props.filteredThreadIDs;
     if (!selectedThreadIDs && value) {
       // No thread filter exists and thread is being added
       return;
     } else if (!selectedThreadIDs) {
       // No thread filter exists and thread is being removed
       newThreadIDs = this.props.filterThreadInfos
         .map(filterThreadInfo => filterThreadInfo.threadInfo.id)
         .filter(id => id !== threadID);
     } else if (selectedThreadIDs.has(threadID) && value) {
       // Thread filter already includes thread being added
       return;
     } else if (selectedThreadIDs.has(threadID)) {
       // Thread being removed from current thread filter
       newThreadIDs = [...selectedThreadIDs].filter(id => id !== threadID);
     } else if (!value) {
       // Thread filter doesn't include thread being removed
       return;
     } else if (
       selectedThreadIDs.size + 1 ===
       this.props.filterThreadInfos.length
     ) {
       // Thread filter exists and thread being added is the only one missing
       newThreadIDs = null;
     } else {
       // Thread filter exists and thread is being added
       newThreadIDs = [...selectedThreadIDs, threadID];
     }
     this.setFilterThreads(newThreadIDs);
   };
 
   onToggleAll = (value: boolean) => {
     if (!value) {
       this.setFilterThreads([]);
       return;
     }
     const allChats = this.props.filteredCommunityThreadIDs
       ? Array.from(this.props.filteredCommunityThreadIDs)
       : null;
     this.setFilterThreads(allChats);
   };
 
   onClickOnly = (threadID: string) => {
     this.setFilterThreads([threadID]);
   };
 
   setFilterThreads(threadIDs: ?$ReadOnlyArray<string>) {
     if (!threadIDs) {
       this.props.dispatch({
         type: clearCalendarThreadFilter,
       });
     } else {
       this.props.dispatch({
         type: updateCalendarThreadFilter,
         payload: {
           type: calendarThreadFilterTypes.THREAD_LIST,
           threadIDs,
         },
       });
     }
   }
 
   onClickSettings = (threadID: string) => {
     this.props.pushModal(<ThreadSettingsModal threadID={threadID} />);
   };
 
   onChangeQuery = (event: SyntheticEvent<HTMLInputElement>) => {
     const query = event.currentTarget.value;
     const searchIndex = this.props.filterThreadSearchIndex;
     const resultIDs = new Set(searchIndex.getSearchResults(query));
     const results = this.props.filterThreadInfos.filter(filterThreadInfo =>
       resultIDs.has(filterThreadInfo.threadInfo.id),
     );
     this.setState({ query, searchResults: results, collapsed: false });
   };
 
   clearQuery = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ query: '', searchResults: [], collapsed: false });
   };
 
   onCollapse = (value: boolean) => {
     this.setState({ collapsed: value });
   };
 
   onChangeIncludeDeleted = (includeDeleted: boolean) => {
     this.props.dispatch({
       type: setCalendarDeletedFilter,
       payload: {
         includeDeleted,
       },
     });
   };
 }
 
 type ItemProps = {
   +filterThreadInfo: FilterThreadInfo,
   +onToggle: (threadID: string, value: boolean) => void,
   +onClickOnly: (threadID: string) => void,
   +onClickSettings: (threadID: string) => void,
   +selected: boolean,
 };
 class Item extends React.PureComponent<ItemProps> {
   render(): React.Node {
     const threadInfo = this.props.filterThreadInfo.threadInfo;
     const beforeCheckStyles = { borderColor: `#${threadInfo.color}` };
     let afterCheck = null;
     if (this.props.selected) {
       const afterCheckStyles = { backgroundColor: `#${threadInfo.color}` };
       afterCheck = (
         <div
           className={classNames(css.optionCheckbox, css.checkboxAfterOption)}
           style={afterCheckStyles}
         />
       );
     }
     const details =
       this.props.filterThreadInfo.numVisibleEntries === 1
         ? '1 entry'
         : `${this.props.filterThreadInfo.numVisibleEntries} entries`;
     return (
       <div className={css.option}>
         <div className={css.optionThread}>
           <input
             type="checkbox"
             checked={this.props.selected}
             onChange={this.onChange}
           />
           <label>
             <div className={css.optionCheckbox} style={beforeCheckStyles} />
             {threadInfo.uiName}
             {afterCheck}
           </label>
           <a onClick={this.onClickOnly} className={css.only}>
             only
           </a>
           <a onClick={this.onClickSettings} className={css.settingsCog}>
             <FontAwesomeIcon icon={faCog} />
           </a>
         </div>
         <div className={css.optionDetails}>{details}</div>
       </div>
     );
   }
 
   onChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onToggle(
       this.props.filterThreadInfo.threadInfo.id,
       event.currentTarget.checked,
     );
   };
 
   onClickOnly = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onClickOnly(this.props.filterThreadInfo.threadInfo.id);
   };
 
   onClickSettings = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onClickSettings(this.props.filterThreadInfo.threadInfo.id);
   };
 }
 
 type CategoryProps = {
   +numThreads: number,
   +onToggle: (value: boolean) => void,
   +collapsed: boolean,
   +onCollapse: (value: boolean) => void,
   +selected: boolean,
 };
 class Category extends React.PureComponent<CategoryProps> {
   render(): React.Node {
     const beforeCheckStyles = { borderColor: 'white' };
     let afterCheck = null;
     if (this.props.selected) {
       const afterCheckStyles = { backgroundColor: 'white' };
       afterCheck = (
         <div
           className={classNames(css.optionCheckbox, css.checkboxAfterOption)}
           style={afterCheckStyles}
         />
       );
     }
     const icon = this.props.collapsed ? faChevronUp : faChevronDown;
     const details =
       this.props.numThreads === 1 ? '1 chat' : `${this.props.numThreads} chats`;
     return (
       <div className={css.category}>
         <div className={css.optionThread}>
           <input
             type="checkbox"
             checked={this.props.selected}
             onChange={this.onChange}
           />
           <label>
             <div className={css.optionCheckbox} style={beforeCheckStyles} />
             Your chats
             {afterCheck}
           </label>
           <a onClick={this.onCollapse} className={css.collapse}>
             <FontAwesomeIcon icon={icon} />
           </a>
         </div>
         <div className={css.optionDetails}>{details}</div>
       </div>
     );
   }
 
   onChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onToggle(event.currentTarget.checked);
   };
 
   onCollapse = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onCollapse(!this.props.collapsed);
   };
 }
 
 type ConnectedFilterPanelProps = {
   +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
 };
 
 const ConnectedFilterPanel: React.ComponentType<ConnectedFilterPanelProps> =
   React.memo<ConnectedFilterPanelProps>(function ConnectedFilterPanel(
     props: ConnectedFilterPanelProps,
   ): React.Node {
     const filteredThreadIDs = useSelector(filteredThreadIDsSelector);
     const filteredCommunityThreadIDs = useSelector(
       filterThreadIDsBelongingToCommunitySelector,
     );
     const filterThreadInfos = useFilterThreadInfos();
     const filterThreadSearchIndex = useFilterThreadSearchIndex();
     const includeDeleted = useSelector(includeDeletedSelector);
     const dispatch = useDispatch();
     const modalContext = useModalContext();
 
     return (
       <FilterPanel
         filteredThreadIDs={filteredThreadIDs}
         filteredCommunityThreadIDs={filteredCommunityThreadIDs}
         filterThreadInfos={filterThreadInfos}
         filterThreadSearchIndex={filterThreadSearchIndex}
         includeDeleted={includeDeleted}
         dispatch={dispatch}
         pushModal={modalContext.pushModal}
         toggleFilters={props.toggleFilters}
       />
     );
   });
 
 export default ConnectedFilterPanel;
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
index b7283a5ab..d9c4b817c 100644
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -1,688 +1,691 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference.js';
 import * as React from 'react';
 
 import {
   joinThreadActionTypes,
   useJoinThread,
   newThreadActionTypes,
 } 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 { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
 import {
   getMentionTypeaheadUserSuggestions,
   getTypeaheadRegexMatches,
   getUserMentionsCandidates,
   getMentionTypeaheadChatSuggestions,
   type MentionTypeaheadSuggestionItem,
   type TypeaheadMatchedStrings,
 } from 'lib/shared/mention-utils.js';
 import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
 } 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 { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadInfo,
   type ClientThreadJoinRequest,
   type ThreadJoinPayload,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-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 {
   webMentionTypeaheadRegex,
   getMentionTypeaheadTooltipActions,
   getMentionTypeaheadTooltipButtons,
 } from '../utils/typeahead-utils.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +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: ?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,
     );
     if (
       this.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
       this.multimediaInput.value = '';
     } else if (
       this.textarea &&
       _difference(curUploadIDs)(prevUploadIDs).length > 0
     ) {
       // Whenever a pending upload is added, we focus the textarea
       this.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');
 
     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 = () => {
     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 userSearchIndex = useSelector(userStoreMentionSearchIndex);
     const { getChatMentionSearchIndex } = useChatMentionContext();
     const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
     const { parentThreadID } = props.threadInfo;
     const parentThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
 
     const userMentionsCandidates = getUserMentionsCandidates(
       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(
       () =>
         typeaheadRegexMatches !== null
           ? {
               textBeforeAtSymbol:
                 typeaheadRegexMatches.groups?.textPrefix ?? '',
               query: typeaheadRegexMatches.groups?.mentionText ?? '',
             }
           : null,
       [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 suggestions = React.useMemo(() => {
       if (!typeaheadMatchedStrings) {
-        return [];
+        return ([]: $ReadOnlyArray<MentionTypeaheadSuggestionItem>);
       }
       const suggestedUsers = getMentionTypeaheadUserSuggestions(
         userSearchIndex,
         props.inputState.typeaheadState.frozenUserMentionsCandidates,
         viewerID,
         typeaheadMatchedStrings.query,
       );
       const suggestedChats = getMentionTypeaheadChatSuggestions(
         chatMentionSearchIndex,
         props.inputState.typeaheadState.frozenChatMentionsCandidates,
         typeaheadMatchedStrings.query,
       );
-      return [...suggestedUsers, ...suggestedChats];
+      return ([
+        ...suggestedUsers,
+        ...suggestedChats,
+      ]: $ReadOnlyArray<MentionTypeaheadSuggestionItem>);
     }, [
       typeaheadMatchedStrings,
       userSearchIndex,
       props.inputState.typeaheadState.frozenUserMentionsCandidates,
       props.inputState.typeaheadState.frozenChatMentionsCandidates,
       viewerID,
       chatMentionSearchIndex,
     ]);
 
     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/text-message.react.js b/web/chat/text-message.react.js
index c7e34f373..f12f3cd3f 100644
--- a/web/chat/text-message.react.js
+++ b/web/chat/text-message.react.js
@@ -1,70 +1,70 @@
 // @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 { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } 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: ThreadInfo | MinimallyEncodedThreadInfo,
   +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 = {};
+  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/components/community-actions-menu.react.js b/web/components/community-actions-menu.react.js
index 319f155f6..fa67f1330 100644
--- a/web/components/community-actions-menu.react.js
+++ b/web/components/community-actions-menu.react.js
@@ -1,133 +1,134 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import type { InviteLink } from 'lib/types/link-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 
 import css from './community-actions-menu.css';
 import MenuItem from '../components/menu-item.react.js';
+import type { MenuItemProps } from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 import ManageInviteLinksModal from '../invite-links/manage-invite-links-modal.react.js';
 import ViewInviteLinkModal from '../invite-links/view-invite-link-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import CommunityRolesModal from '../roles/community-roles-modal.react.js';
 import { AddLink } from '../vectors.react.js';
 
 type Props = {
   +communityID: string,
 };
 
 function CommunityActionsMenu(props: Props): React.Node {
   const { communityID } = props;
   const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[
     communityID
   ];
   const { pushModal } = useModalContext();
 
   const community = useSelector(
     state => threadInfoSelector(state)[communityID],
   );
   const canManageLinks = threadHasPermission(
     community,
     threadPermissions.MANAGE_INVITE_LINKS,
   );
   const canChangeRoles = threadHasPermission(
     community,
     threadPermissions.CHANGE_ROLE,
   );
 
   const openViewInviteLinkModal = React.useCallback(() => {
     if (!inviteLink) {
       return;
     }
     pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />);
   }, [inviteLink, pushModal]);
 
   const openManageInviteLinksModal = React.useCallback(() => {
     pushModal(<ManageInviteLinksModal communityID={communityID} />);
   }, [communityID, pushModal]);
 
   const openCommunityRolesModal = React.useCallback(
     () => pushModal(<CommunityRolesModal community={community} />),
     [community, pushModal],
   );
 
   const items = React.useMemo(() => {
-    const itemSpecs = [];
+    const itemSpecs: MenuItemProps[] = [];
 
     if (canManageLinks) {
       itemSpecs.push({
         text: 'Manage invite links',
         iconComponent: <AddLink />,
         onClick: openManageInviteLinksModal,
       });
     }
 
     if (inviteLink) {
       itemSpecs.push({
         text: 'Invite link',
         icon: 'link',
         onClick: openViewInviteLinkModal,
       });
     }
 
     if (canChangeRoles) {
       itemSpecs.push({
         text: 'Roles',
         icon: 'user-info',
         onClick: openCommunityRolesModal,
       });
     }
 
     return itemSpecs;
   }, [
     canManageLinks,
     inviteLink,
     openManageInviteLinksModal,
     openViewInviteLinkModal,
     canChangeRoles,
     openCommunityRolesModal,
   ]);
 
   const menuItems = React.useMemo(
     () =>
       items.map(item => {
         if (item.icon) {
           return (
             <MenuItem
               key={item.text}
               text={item.text}
               icon={item.icon}
               onClick={item.onClick}
             />
           );
         }
         return (
           <MenuItem
             key={item.text}
             text={item.text}
             iconComponent={item.iconComponent}
             onClick={item.onClick}
           />
         );
       }),
     [items],
   );
 
   const icon = <SWMansionIcon icon="menu-vertical" size={24} />;
   return (
     <div className={css.container}>
       <Menu icon={icon} variant="community-actions">
         {menuItems}
       </Menu>
     </div>
   );
 }
 
 export default CommunityActionsMenu;
diff --git a/web/components/menu-item.react.js b/web/components/menu-item.react.js
index b6716ffb0..78b16f362 100644
--- a/web/components/menu-item.react.js
+++ b/web/components/menu-item.react.js
@@ -1,51 +1,51 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon, {
   type Icon,
 } from 'lib/components/SWMansionIcon.react.js';
 
 import Button from './button.react.js';
 import css from './menu.css';
 
 type MenuItemPropsBase = {
   +onClick?: () => mixed,
   +text: string,
   +dangerous?: boolean,
 };
-type MenuItemProps =
+export type MenuItemProps =
   | {
       ...MenuItemPropsBase,
       +icon: Icon,
     }
   | {
       ...MenuItemPropsBase,
       +iconComponent: React.Node,
     };
 
 function MenuItem(props: MenuItemProps): React.Node {
   const { onClick, icon, iconComponent, text, dangerous } = props;
 
   const itemClasses = classNames(css.menuAction, {
     [css.menuActionDangerous]: dangerous,
   });
 
   let menuItemIcon = iconComponent;
   if (icon) {
     menuItemIcon = <SWMansionIcon size="100%" icon={icon} />;
   }
 
   return (
     <Button className={itemClasses} onClick={onClick}>
       <div className={css.menuActionIcon}>{menuItemIcon}</div>
       <div>{text}</div>
     </Button>
   );
 }
 
 const MemoizedMenuItem: React.ComponentType<MenuItemProps> =
   React.memo(MenuItem);
 
 export default MemoizedMenuItem;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 9adec603f..c65e00400 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1697 +1,1701 @@
 // @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 {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useLegacySendMultimediaMessage,
   sendTextMessageActionTypes,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import type {
   LegacySendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   useDeleteUpload,
   useBlobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
   type DeleteUploadInput,
 } from 'lib/actions/upload-actions.js';
 import {
   useModalContext,
   type PushModal,
 } 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,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } 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 { MinimallyEncodedThreadInfo } 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 ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import {
   makeBlobServiceEndpointURL,
   isBlobServiceURI,
   blobHashFromBlobServiceURI,
 } from 'lib/utils/blob-service.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { generateReportID } from 'lib/utils/report-utils.js';
 
 import {
   type PendingMultimediaUpload,
   type TypeaheadState,
   InputStateContext,
   type BaseInputState,
   type TypeaheadInputState,
   type InputState,
 } from './input-state.js';
 import { encryptFile } from '../media/encryption-utils.js';
 import { generateThumbHash } from '../media/image-utils.js';
 import {
   preloadMediaResource,
   validateFile,
   preloadImage,
 } 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 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 State = {
-  +pendingUploads: {
+type WritableState = {
+  pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
-  +textCursorPositions: { [threadID: string]: number },
-  +typeaheadState: TypeaheadState,
+  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 = {};
+    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 = {};
+    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();
     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();
     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();
     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();
     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();
     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);
       }
       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: ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   async sendMultimediaMessage(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<void> {
     if (!threadIsPending(messageInfo.threadID)) {
       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(),
       };
     }
 
     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 = {};
+        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: ThreadInfo | MinimallyEncodedThreadInfo,
   ): 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 = [];
-          const assignedUploads = {};
+          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: ThreadInfo,
               files: $ReadOnlyArray<File>,
             ) => this.appendFiles(threadInfo, files),
             cancelPendingUpload: (localUploadID: string) =>
               this.cancelPendingUpload(threadID, localUploadID),
             sendTextMessage: (
               messageInfo: RawTextMessageInfo,
               threadInfo: ThreadInfo,
               parentThreadInfo: ?ThreadInfo,
             ) =>
               this.sendTextMessage(messageInfo, threadInfo, parentThreadInfo),
             createMultimediaMessage: (
               localID: number,
               threadInfo: 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: 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,
           };
         },
       ),
     );
 
   typeaheadStateSelector: PropsAndState => TypeaheadInputState = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector: ({
     +inputBaseState: BaseInputState,
     +typeaheadState: TypeaheadInputState,
   }) => InputState = createSelector(
     state => state.inputBaseState,
     state => state.typeaheadState,
     (inputBaseState, typeaheadState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadInfo: 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: ThreadInfo,
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
-    const steps = [
+    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, abortRequest;
+    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) {
           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);
             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: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) {
     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)) {
       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,
         };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ): 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: ThreadInfo) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const localMessageID = `${localIDPrefix}${localID}`;
     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 = {};
+      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: $Shape<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: 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);
     }
 
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const completed = InputStateContainer.completedMessageIDs(this.state);
     if (completed.has(localMessageID)) {
       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();
     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 = {};
+      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,
         },
       };
     });
 
     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 = useServerCall(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(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/loading-indicator.react.js b/web/loading-indicator.react.js
index 95e5ba0a2..9194744a9 100644
--- a/web/loading-indicator.react.js
+++ b/web/loading-indicator.react.js
@@ -1,52 +1,52 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import tinycolor from 'tinycolor2';
 
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 
 import css from './style.css';
 
 type Props = {
   +status: LoadingStatus,
   +size?: 'small' | 'medium' | 'large',
   +color?: 'black' | 'white',
   +loadingClassName?: string,
   +errorClassName?: string,
 };
 export default function LoadingIndicator(props: Props): React.Node {
   const [hasRendered, setHasRendered] = React.useState(false);
   React.useEffect(() => {
     setHasRendered(true);
   }, []);
 
   const size = props.size ? props.size : 'small';
   const color = props.color ? props.color : 'white';
   if (props.status === 'loading') {
-    const classNameInput = {
+    const classNameInput: { [string]: boolean } = {
       [css['loading-indicator-loading']]: true,
       [css['loading-indicator-loading-medium']]:
         hasRendered && size === 'medium',
       [css['loading-indicator-loading-small']]: hasRendered && size === 'small',
       [css['loading-indicator-loading-large']]: hasRendered && size === 'large',
       [css['loading-indicator-black']]:
         hasRendered && tinycolor.equals(color, 'black'),
     };
     if (props.loadingClassName) {
       classNameInput[props.loadingClassName] = true;
     }
     return <span className={classNames(classNameInput)} />;
   } else if (props.status === 'error') {
-    const classNameInput = {
+    const classNameInput: { [string]: boolean } = {
       [css['loading-indicator-error']]: true,
       [css['loading-indicator-error-black']]: tinycolor.equals(color, 'black'),
     };
     if (props.errorClassName) {
       classNameInput[props.errorClassName] = true;
     }
     return <span className={classNames(classNameInput)}>!</span>;
   } else {
     return null;
   }
 }
diff --git a/web/media/blob-utils.js b/web/media/blob-utils.js
index aeb213633..85f20cffb 100644
--- a/web/media/blob-utils.js
+++ b/web/media/blob-utils.js
@@ -1,85 +1,85 @@
 // @flow
 
 import invariant from 'invariant';
 
 import type {
   MediaType,
   MediaMissionStep,
   MediaMissionFailure,
 } from 'lib/types/media-types.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 
 import { determineFileType } from './file-utils.js';
 
 function blobToArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
   const fileReader = new FileReader();
   return new Promise((resolve, reject) => {
     fileReader.onerror = error => {
       fileReader.abort();
       reject(error);
     };
     fileReader.onload = () => {
       invariant(
         fileReader.result instanceof ArrayBuffer,
         'FileReader.readAsArrayBuffer should result in ArrayBuffer',
       );
       resolve(fileReader.result);
     };
     fileReader.readAsArrayBuffer(blob);
   });
 }
 
 type ProbeFileSuccess = {
   success: true,
   file: File,
   mediaType: MediaType,
 };
 async function probeFile(file: File): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: MediaMissionFailure | ProbeFileSuccess,
 }> {
-  const steps = [];
+  const steps: MediaMissionStep[] = [];
 
   let arrayBuffer, arrayBufferExceptionMessage;
   const arrayBufferStart = Date.now();
   try {
     arrayBuffer = await blobToArrayBuffer(file);
   } catch (e) {
     arrayBufferExceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'array_buffer_from_blob',
     success: !!arrayBuffer,
     exceptionMessage: arrayBufferExceptionMessage,
     time: Date.now() - arrayBufferStart,
   });
   if (!arrayBuffer) {
     return { steps, result: { success: false, reason: 'array_buffer_failed' } };
   }
 
   const determineFileTypeStep = determineFileType(arrayBuffer, file.name);
   steps.push(determineFileTypeStep);
   const {
     outputMIME: mime,
     outputMediaType: mediaType,
     outputFilename: name,
   } = determineFileTypeStep;
   if (!mime || !mediaType || !name) {
     return {
       steps,
       result: {
         success: false,
         reason: 'media_type_fetch_failed',
         detectedMIME: mime,
       },
     };
   }
 
   const fixedFile =
     name !== file.name || mime !== file.type
       ? new File([file], name, { type: mime })
       : file;
   return { steps, result: { success: true, file: fixedFile, mediaType } };
 }
 
 export { probeFile };
diff --git a/web/media/image-utils.js b/web/media/image-utils.js
index 906f06511..dcce57c0b 100644
--- a/web/media/image-utils.js
+++ b/web/media/image-utils.js
@@ -1,120 +1,120 @@
 // @flow
 
 import EXIF from 'exif-js';
 import { rgbaToThumbHash } from 'thumbhash';
 
 import * as AES from 'lib/media/aes-crypto-utils-common.js';
 import { hexToUintArray } from 'lib/media/data-utils.js';
 import type {
   GetOrientationMediaMissionStep,
   MediaMissionFailure,
   MediaMissionStep,
 } from 'lib/types/media-types.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 
 import { preloadImage } from './media-utils.js';
 import { base64EncodeBuffer } from '../utils/base64-utils.js';
 
 function getEXIFOrientation(file: File): Promise<?number> {
   return new Promise(resolve => {
     EXIF.getData(file, function () {
       resolve(EXIF.getTag(this, 'Orientation'));
     });
   });
 }
 
 async function getOrientation(
   file: File,
 ): Promise<GetOrientationMediaMissionStep> {
   let orientation,
     success = false,
     exceptionMessage;
   const start = Date.now();
   try {
     orientation = await getEXIFOrientation(file);
     success = true;
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   }
   return {
     step: 'exif_fetch',
     success,
     exceptionMessage,
     time: Date.now() - start,
     orientation,
   };
 }
 
 type GenerateThumbhashResult = {
   +success: true,
   +thumbHash: string,
 };
 
 /**
  * Generate a thumbhash for a given image file. If `encryptionKey` is provided,
  * the thumbhash string will be encrypted with it.
  */
 async function generateThumbHash(
   file: File,
   encryptionKey: ?string = null,
 ): Promise<{
   +steps: $ReadOnlyArray<MediaMissionStep>,
   +result: GenerateThumbhashResult | MediaMissionFailure,
 }> {
-  const steps = [];
+  const steps: MediaMissionStep[] = [];
   const initialURI = URL.createObjectURL(file);
   const { steps: preloadSteps, result: image } = await preloadImage(initialURI);
   steps.push(...preloadSteps);
   if (!image) {
     return {
       steps,
       result: { success: false, reason: 'preload_image_failed' },
     };
   }
 
   let binaryThumbHash, thumbHashString, exceptionMessage;
   try {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
 
     // rescale to 100px max as thumbhash doesn't need more
     const scale = 100 / Math.max(image.width, image.height);
     canvas.width = Math.round(image.width * scale);
     canvas.height = Math.round(image.height * scale);
 
     context.drawImage(image, 0, 0, canvas.width, canvas.height);
     const pixels = context.getImageData(0, 0, canvas.width, canvas.height);
     binaryThumbHash = rgbaToThumbHash(pixels.width, pixels.height, pixels.data);
     thumbHashString = base64EncodeBuffer(binaryThumbHash);
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   } finally {
     URL.revokeObjectURL(initialURI);
   }
   steps.push({
     step: 'generate_thumbhash',
     success: !!thumbHashString && !exceptionMessage,
     exceptionMessage,
     thumbHash: thumbHashString,
   });
   if (!binaryThumbHash || !thumbHashString || exceptionMessage) {
     return { steps, result: { success: false, reason: 'thumbhash_failed' } };
   }
 
   if (encryptionKey) {
     try {
       const encryptedThumbHash = await AES.encryptCommon(
         crypto,
         hexToUintArray(encryptionKey),
         binaryThumbHash,
       );
       thumbHashString = base64EncodeBuffer(encryptedThumbHash);
     } catch {
       return { steps, result: { success: false, reason: 'encryption_failed' } };
     }
   }
 
   return { steps, result: { success: true, thumbHash: thumbHashString } };
 }
 
 export { getOrientation, generateThumbHash };
diff --git a/web/media/media-utils.js b/web/media/media-utils.js
index bce694ff8..f1df17903 100644
--- a/web/media/media-utils.js
+++ b/web/media/media-utils.js
@@ -1,274 +1,274 @@
 // @flow
 
 import { detect as detectBrowser } from 'detect-browser';
 import * as React from 'react';
 import { thumbHashToDataURL } from 'thumbhash';
 
 import { fetchableMediaURI } from 'lib/media/media-utils.js';
 import type {
   MediaType,
   Dimensions,
   MediaMissionStep,
   MediaMissionFailure,
 } from 'lib/types/media-types.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 
 import { probeFile } from './blob-utils.js';
 import { decryptThumbhashToDataURL } from './encryption-utils.js';
 import { getOrientation } from './image-utils.js';
 import { base64DecodeBuffer } from '../utils/base64-utils.js';
 
 async function preloadImage(uri: string): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: ?Image,
 }> {
   let image, exceptionMessage;
   const start = Date.now();
   const imageURI = fetchableMediaURI(uri);
   try {
     image = await new Promise((resolve, reject) => {
       const img = new Image();
       img.src = imageURI;
       img.onload = () => {
         resolve(img);
       };
       img.onerror = e => {
         reject(e);
       };
     });
   } catch (e) {
     exceptionMessage = getMessageForException(e);
   }
   const dimensions = image
     ? { height: image.height, width: image.width }
     : null;
   const step = {
     step: 'preload_image',
     success: !!image,
     exceptionMessage,
     time: Date.now() - start,
     uri: imageURI,
     dimensions,
   };
   return { steps: [step], result: image };
 }
 
 /**
  * Preloads a media resource (image or video) from a URI. This sends a HTTP GET
  * request to the URI to let the browser download it and cache it,
  * so further requests will be loaded from the cache.
  *
  * For raw images, use {@link preloadImage} instead.
  *
  * @param uri The URI of the media resource.
  * @returns Steps and the result of the preload. The preload is successful
  * if the HTTP response is OK (20x).
  */
 async function preloadMediaResource(uri: string): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: { +success: boolean },
 }> {
   const start = Date.now();
   const mediaURI = fetchableMediaURI(uri);
   let success, exceptionMessage;
   try {
     const response = await fetch(mediaURI);
     // we need to read the blob to make sure the browser caches it
     await response.blob();
     success = response.ok;
   } catch (e) {
     success = false;
     exceptionMessage = getMessageForException(e);
   }
 
   const step = {
     step: 'preload_resource',
     success,
     exceptionMessage,
     time: Date.now() - start,
     uri: mediaURI,
   };
 
   return { steps: [step], result: { success } };
 }
 
 type ProcessFileSuccess = {
   success: true,
   uri: string,
   dimensions: ?Dimensions,
 };
 
 const browser = detectBrowser();
 const exifRotate =
   !browser || (browser.name !== 'safari' && browser.name !== 'chrome');
 
 async function processFile(file: File): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: MediaMissionFailure | ProcessFileSuccess,
 }> {
   const initialURI = URL.createObjectURL(file);
   if (!exifRotate) {
     const { steps, result } = await preloadImage(initialURI);
     let dimensions;
     if (result) {
       const { width, height } = result;
       dimensions = { width, height };
     }
     return { steps, result: { success: true, uri: initialURI, dimensions } };
   }
 
   const [preloadResponse, orientationStep] = await Promise.all([
     preloadImage(initialURI),
     getOrientation(file),
   ]);
   const { steps: preloadSteps, result: image } = preloadResponse;
 
-  const steps = [...preloadSteps, orientationStep];
+  const steps: MediaMissionStep[] = [...preloadSteps, orientationStep];
 
   if (!image) {
     return {
       steps,
       result: { success: true, uri: initialURI, dimensions: undefined },
     };
   }
 
   if (!orientationStep.success) {
     return { steps, result: { success: false, reason: 'exif_fetch_failed' } };
   }
   const { orientation } = orientationStep;
 
   const dimensions =
     !!orientation && orientation > 4
       ? { width: image.height, height: image.width }
       : { width: image.width, height: image.height };
   if (!orientation || orientation === 1) {
     return { steps, result: { success: true, uri: initialURI, dimensions } };
   }
 
   let reorientedBlob, reorientExceptionMessage;
   const reorientStart = Date.now();
   try {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
     canvas.height = dimensions.height;
     canvas.width = dimensions.width;
 
     if (orientation === 2) {
       context.transform(-1, 0, 0, 1, dimensions.width, 0);
     } else if (orientation === 3) {
       context.transform(-1, 0, 0, -1, dimensions.width, dimensions.height);
     } else if (orientation === 4) {
       context.transform(1, 0, 0, -1, 0, dimensions.height);
     } else if (orientation === 5) {
       context.transform(0, 1, 1, 0, 0, 0);
     } else if (orientation === 6) {
       context.transform(0, 1, -1, 0, dimensions.width, 0);
     } else if (orientation === 7) {
       context.transform(0, -1, -1, 0, dimensions.width, dimensions.height);
     } else if (orientation === 8) {
       context.transform(0, -1, 1, 0, 0, dimensions.height);
     } else {
       context.transform(1, 0, 0, 1, 0, 0);
     }
 
     context.drawImage(image, 0, 0);
     reorientedBlob = await new Promise(resolve =>
       canvas.toBlob(blobResult => resolve(blobResult)),
     );
   } catch (e) {
     reorientExceptionMessage = getMessageForException(e);
   }
   URL.revokeObjectURL(initialURI);
   const uri = reorientedBlob && URL.createObjectURL(reorientedBlob);
   steps.push({
     step: 'reorient_image',
     success: !!reorientedBlob,
     exceptionMessage: reorientExceptionMessage,
     time: Date.now() - reorientStart,
     uri,
   });
 
   if (!uri) {
     return {
       steps,
       result: { success: false, reason: 'reorient_image_failed' },
     };
   }
   return { steps, result: { success: true, uri, dimensions } };
 }
 
 type FileValidationSuccess = {
   success: true,
   file: File,
   mediaType: MediaType,
   uri: string,
   dimensions: ?Dimensions,
 };
 async function validateFile(file: File): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: MediaMissionFailure | FileValidationSuccess,
 }> {
   const [probeResponse, processResponse] = await Promise.all([
     probeFile(file),
     processFile(file),
   ]);
   const { steps: probeSteps, result: probeResult } = probeResponse;
   const { steps: processSteps, result: processResult } = processResponse;
 
   const steps = [...probeSteps, ...processSteps];
 
   if (!probeResult.success) {
     return { steps, result: probeResult };
   }
   const { file: fixedFile, mediaType } = probeResult;
 
   if (!processResult.success) {
     return { steps, result: processResult };
   }
   const { dimensions, uri } = processResult;
 
   return {
     steps,
     result: {
       success: true,
       file: fixedFile,
       mediaType,
       uri,
       dimensions,
     },
   };
 }
 
 function usePlaceholder(thumbHash: ?string, encryptionKey: ?string): ?string {
   const [placeholder, setPlaceholder] = React.useState<?string>(null);
 
   React.useEffect(() => {
     if (!thumbHash) {
       setPlaceholder(null);
       return;
     }
 
     if (!encryptionKey) {
       const binaryThumbHash = base64DecodeBuffer(thumbHash);
       const placeholderImage = thumbHashToDataURL(binaryThumbHash);
       setPlaceholder(placeholderImage);
       return;
     }
 
     (async () => {
       try {
         const decryptedThumbHash = await decryptThumbhashToDataURL(
           thumbHash,
           encryptionKey,
         );
         setPlaceholder(decryptedThumbHash);
       } catch {
         setPlaceholder(null);
       }
     })();
   }, [thumbHash, encryptionKey]);
 
   return placeholder;
 }
 
 export { preloadImage, preloadMediaResource, validateFile, usePlaceholder };
diff --git a/web/modals/chat/message-results-modal.react.js b/web/modals/chat/message-results-modal.react.js
index da09ff04b..dcd05d17e 100644
--- a/web/modals/chat/message-results-modal.react.js
+++ b/web/modals/chat/message-results-modal.react.js
@@ -1,153 +1,156 @@
 // @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 { messageListData } from 'lib/selectors/chat-selectors.js';
+import {
+  messageListData,
+  type ChatMessageInfoItem,
+} 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 { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import css from './message-results-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 MessageResultsModalProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +modalName: string,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   fetchPinnedMessageActionTypes,
 );
 
 function MessageResultsModal(props: MessageResultsModalProps): React.Node {
   const { threadInfo, modalName } = 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(() => {
     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 [];
+      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();
     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++) {
       sortedChatMessageInfoItems.push(
         uniqueChatMessageInfoItemsMap.get(rawMessageResults[i].id),
       );
     }
 
     return sortedChatMessageInfoItems;
   }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const modifiedItems = React.useMemo(
     () =>
       sortedUniqueChatMessageInfoItems
         .filter(Boolean)
         .map(item => modifyItemForResultScreen(item)),
     [sortedUniqueChatMessageInfoItems],
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
     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]);
 
   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 MessageResultsModal;
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
index 42d6415ef..738890c81 100644
--- a/web/modals/threads/settings/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -1,236 +1,237 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   deleteThreadActionTypes,
   changeThreadSettingsActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { getAvailableRelationshipButtons } from 'lib/shared/relationship-utils.js';
 import {
   threadHasPermission,
   getSingleOtherUser,
   threadUIName,
 } from 'lib/shared/thread-utils.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { RelationshipButton } from 'lib/types/relationship-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo, type ThreadChanges } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react.js';
 import ThreadSettingsGeneralTab from './thread-settings-general-tab.react.js';
 import css from './thread-settings-modal.css';
 import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react.js';
 import ThreadSettingsRelationshipTab from './thread-settings-relationship-tab.react.js';
 import Tabs from '../../../components/tabs.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import Modal from '../../modal.react.js';
 
 type TabType = 'general' | 'privacy' | 'delete' | 'relationship';
 type BaseProps = {
   +threadID: string,
 };
 
 const deleteThreadLoadingStatusSelector = createLoadingStatusSelector(
   deleteThreadActionTypes,
 );
 const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector(
   changeThreadSettingsActionTypes,
 );
 
 const ConnectedThreadSettingsModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsModal(props) {
     const changeInProgress = useSelector(
       state =>
         deleteThreadLoadingStatusSelector(state) === 'loading' ||
         changeThreadSettingsLoadingStatusSelector(state) === 'loading',
     );
     const threadInfo: ?ThreadInfo = useSelector(
       state => threadInfoSelector(state)[props.threadID],
     );
     const modalContext = useModalContext();
     const [errorMessage, setErrorMessage] = React.useState<?string>('');
     const [currentTabType, setCurrentTabType] =
       React.useState<TabType>('general');
     const [queuedChanges, setQueuedChanges] = React.useState<ThreadChanges>(
       Object.freeze({}),
     );
 
     const threadInfoWithNoName = React.useMemo(() => {
       invariant(threadInfo, 'threadInfo should exist in threadInfoWithNoName');
       if (threadInfo.name === null || threadInfo.name === undefined) {
         return threadInfo;
       }
       const withNoName = { ...threadInfo, name: undefined };
       return {
         ...withNoName,
         uiName: threadUIName(withNoName),
       };
     }, [threadInfo]);
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfoWithNoName);
     const namePlaceholder = resolvedThreadInfo.uiName;
 
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const userInfos = useSelector(state => state.userStore.userInfos);
     const otherMemberID = React.useMemo(() => {
       if (!threadInfo) {
         return null;
       }
       return getSingleOtherUser(threadInfo, viewerID);
     }, [threadInfo, viewerID]);
     const otherUserInfo = otherMemberID ? userInfos[otherMemberID] : null;
 
     const availableRelationshipActions = React.useMemo(() => {
       if (!otherUserInfo) {
-        return [];
+        return ([]: RelationshipButton[]);
       }
       return getAvailableRelationshipButtons(otherUserInfo);
     }, [otherUserInfo]);
 
     const hasPermissionForTab = React.useCallback(
       // ESLint doesn't recognize that invariant always throws
       // eslint-disable-next-line consistent-return
       (thread: ThreadInfo | MinimallyEncodedThreadInfo, tab: TabType) => {
         if (tab === 'general') {
           return (
             threadHasPermission(thread, threadPermissions.EDIT_THREAD_NAME) ||
             threadHasPermission(thread, threadPermissions.EDIT_THREAD_COLOR) ||
             threadHasPermission(
               thread,
               threadPermissions.EDIT_THREAD_DESCRIPTION,
             )
           );
         } else if (tab === 'privacy') {
           return threadHasPermission(
             thread,
             threadPermissions.EDIT_PERMISSIONS,
           );
         } else if (tab === 'delete') {
           return threadHasPermission(thread, threadPermissions.DELETE_THREAD);
         } else if (tab === 'relationship') {
           return true;
         }
         invariant(false, `invalid tab: ${tab}`);
       },
       [],
     );
 
     React.useEffect(() => {
       if (
         threadInfo &&
         currentTabType !== 'general' &&
         !hasPermissionForTab(threadInfo, currentTabType)
       ) {
         setCurrentTabType('general');
       }
     }, [currentTabType, hasPermissionForTab, threadInfo]);
 
     React.useEffect(() => () => setErrorMessage(''), [currentTabType]);
 
     if (!threadInfo) {
       return (
         <Modal onClose={modalContext.popModal} name="Invalid chat">
           <div className={css.modal_body}>
             <p>You no longer have permission to view this chat</p>
           </div>
         </Modal>
       );
     }
 
     const tabs = [
       <Tabs.Item id="general" header="General" key="general">
         <div className={css.tab_body}>
           <ThreadSettingsGeneralTab
             threadSettingsOperationInProgress={changeInProgress}
             threadInfo={threadInfo}
             threadNamePlaceholder={namePlaceholder}
             queuedChanges={queuedChanges}
             setQueuedChanges={setQueuedChanges}
             setErrorMessage={setErrorMessage}
             errorMessage={errorMessage}
           />
         </div>
       </Tabs.Item>,
     ];
 
     // This UI needs to be updated to handle sidebars but we haven't gotten
     // there yet. We'll probably end up ripping it out anyways, so for now we
     // are just hiding the privacy tab for any thread that was created as a
     // sidebar
     const canSeePrivacyTab =
       (queuedChanges['parentThreadID'] ?? threadInfo['parentThreadID']) &&
       !threadInfo.sourceMessageID &&
       (threadInfo.type === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
         threadInfo.type === threadTypes.COMMUNITY_SECRET_SUBTHREAD);
     if (canSeePrivacyTab) {
       tabs.push(
         <Tabs.Item id="privacy" header="Privacy" key="privacy">
           <div className={css.tab_body}>
             <ThreadSettingsPrivacyTab
               threadSettingsOperationInProgress={changeInProgress}
               threadInfo={threadInfo}
               queuedChanges={queuedChanges}
               setQueuedChanges={setQueuedChanges}
               setErrorMessage={setErrorMessage}
               errorMessage={errorMessage}
             />
           </div>
         </Tabs.Item>,
       );
     }
 
     if (availableRelationshipActions.length > 0 && otherUserInfo) {
       tabs.push(
         <Tabs.Item id="relationship" header="Relationship" key="relationship">
           <div className={css.tab_body}>
             <ThreadSettingsRelationshipTab
               setErrorMessage={setErrorMessage}
               relationshipButtons={availableRelationshipActions}
               otherUserInfo={otherUserInfo}
             />
             <div className={css.modal_form_error}>{errorMessage}</div>
           </div>
         </Tabs.Item>,
       );
     }
 
     const canDeleteThread = hasPermissionForTab(threadInfo, 'delete');
     if (canDeleteThread) {
       tabs.push(
         <Tabs.Item id="delete" header="Delete" key="delete">
           <div className={css.tab_body}>
             <ThreadSettingsDeleteTab
               threadSettingsOperationInProgress={changeInProgress}
               threadInfo={threadInfo}
               setErrorMessage={setErrorMessage}
               errorMessage={errorMessage}
             />
           </div>
         </Tabs.Item>,
       );
     }
 
     return (
       <Modal
         name="Chat settings"
         onClose={modalContext.popModal}
         icon="settings"
         size="fit-content"
       >
         <div className={css.modal_body}>
           <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
             {tabs}
           </Tabs.Container>
         </div>
       </Modal>
     );
   });
 
 export default ConnectedThreadSettingsModal;
diff --git a/web/olm/olm-utils.js b/web/olm/olm-utils.js
index 05ddbcee7..50d873227 100644
--- a/web/olm/olm-utils.js
+++ b/web/olm/olm-utils.js
@@ -1,29 +1,29 @@
 // @flow
 
 import type { Utility } from '@commapp/olm';
 import olm from '@commapp/olm';
 
 declare var olmFilename: string;
 
 async function initOlm(): Promise<void> {
   if (!olmFilename) {
     return await olm.init();
   }
   const locateFile = (wasmFilename: string, httpAssetsHost: string) =>
     httpAssetsHost + olmFilename;
   return await olm.init({ locateFile });
 }
 
-let olmUtilityInstance;
+let olmUtilityInstance: ?olm.Utility | Promise<olm.Utility>;
 function olmUtility(): Promise<Utility> {
   if (!olmUtilityInstance) {
     olmUtilityInstance = (async () => {
       await initOlm();
       olmUtilityInstance = new olm.Utility();
       return olmUtilityInstance;
     })();
   }
   return Promise.resolve(olmUtilityInstance);
 }
 
 export { initOlm, olmUtility };
diff --git a/web/redux/action-types.js b/web/redux/action-types.js
index a8df6590c..80a21beec 100644
--- a/web/redux/action-types.js
+++ b/web/redux/action-types.js
@@ -1,150 +1,150 @@
 // @flow
 
 import { defaultCalendarFilters } from 'lib/types/filter-types.js';
 import { extractKeyserverIDFromID } from 'lib/utils/action-utils.js';
 import { useKeyserverCall } from 'lib/utils/keyserver-call.js';
 import type { CallKeyserverEndpoint } from 'lib/utils/keyserver-call.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import type {
   InitialReduxState,
   InitialReduxStateResponse,
   InitialKeyserverInfo,
   InitialReduxStateRequest,
 } from '../types/redux-types.js';
 
 export const updateNavInfoActionType = 'UPDATE_NAV_INFO';
 export const updateWindowDimensionsActionType = 'UPDATE_WINDOW_DIMENSIONS';
 export const updateWindowActiveActionType = 'UPDATE_WINDOW_ACTIVE';
 export const setInitialReduxState = 'SET_INITIAL_REDUX_STATE';
 
 const getInitialReduxStateCallServerEndpointOptions = { timeout: 300000 };
 const getInitialReduxState =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
     allKeyserverIDs: $ReadOnlyArray<string>,
   ): ((input: InitialReduxStateRequest) => Promise<InitialReduxState>) =>
   async input => {
-    const requests = {};
+    const requests: { [string]: InitialReduxStateRequest } = {};
     const { urlInfo, excludedData } = input;
     const { thread, inviteSecret, ...rest } = urlInfo;
     const threadKeyserverID = thread ? extractKeyserverIDFromID(thread) : null;
 
     for (const keyserverID of allKeyserverIDs) {
       if (keyserverID === threadKeyserverID) {
         requests[keyserverID] = { urlInfo, excludedData };
       } else {
         requests[keyserverID] = { urlInfo: rest, excludedData };
       }
     }
 
     const responses: { +[string]: InitialReduxStateResponse } =
       await callKeyserverEndpoint(
         'get_initial_redux_state',
         requests,
         getInitialReduxStateCallServerEndpointOptions,
       );
 
     const {
       currentUserInfo,
       userInfos,
       pushApiPublicKey,
       commServicesAccessToken,
       navInfo,
     } = responses[ashoatKeyserverID];
 
     const dataLoaded = currentUserInfo && !currentUserInfo.anonymous;
     const actualizedCalendarQuery = {
       startDate: navInfo.startDate,
       endDate: navInfo.endDate,
       filters: defaultCalendarFilters,
     };
 
     const entryStore = {
       daysToEntries: {},
       entryInfos: {},
       lastUserInteractionCalendar: 0,
     };
     const threadStore = {
       threadInfos: {},
     };
     const messageStore = {
       currentAsOf: {},
       local: {},
       messages: {},
       threads: {},
     };
     const inviteLinksStore = {
       links: {},
     };
     let keyserverInfos: { [keyserverID: string]: InitialKeyserverInfo } = {};
 
     for (const keyserverID in responses) {
       entryStore.daysToEntries = {
         ...entryStore.daysToEntries,
         ...responses[keyserverID].entryStore.daysToEntries,
       };
       entryStore.entryInfos = {
         ...entryStore.entryInfos,
         ...responses[keyserverID].entryStore.entryInfos,
       };
       entryStore.lastUserInteractionCalendar = Math.max(
         entryStore.lastUserInteractionCalendar,
         responses[keyserverID].entryStore.lastUserInteractionCalendar,
       );
 
       threadStore.threadInfos = {
         ...threadStore.threadInfos,
         ...responses[keyserverID].threadStore.threadInfos,
       };
 
       messageStore.currentAsOf = {
         ...messageStore.currentAsOf,
         ...responses[keyserverID].messageStore.currentAsOf,
       };
       messageStore.messages = {
         ...messageStore.messages,
         ...responses[keyserverID].messageStore.messages,
       };
       messageStore.threads = {
         ...messageStore.threads,
         ...responses[keyserverID].messageStore.threads,
       };
 
       inviteLinksStore.links = {
         ...inviteLinksStore.links,
         ...responses[keyserverID].inviteLinksStore.links,
       };
 
       keyserverInfos = {
         ...keyserverInfos,
         [keyserverID]: responses[keyserverID].keyserverInfo,
       };
     }
 
     return {
       navInfo: {
         ...navInfo,
         inviteSecret,
       },
       currentUserInfo,
       entryStore,
       threadStore,
       userInfos,
       actualizedCalendarQuery,
       messageStore,
       dataLoaded,
       pushApiPublicKey,
       commServicesAccessToken,
       inviteLinksStore,
       keyserverInfos,
     };
   };
 
 function useGetInitialReduxState(): (
   input: InitialReduxStateRequest,
 ) => Promise<InitialReduxState> {
   return useKeyserverCall(getInitialReduxState);
 }
 
 export { useGetInitialReduxState };
diff --git a/web/redux/persist.js b/web/redux/persist.js
index f5c0111fc..e03dba15a 100644
--- a/web/redux/persist.js
+++ b/web/redux/persist.js
@@ -1,318 +1,318 @@
 // @flow
 
 import invariant from 'invariant';
 import {
   getStoredState,
   purgeStoredState,
   createTransform,
 } from 'redux-persist';
 import storage from 'redux-persist/es/storage/index.js';
 import type { Transform } from 'redux-persist/es/types.js';
 import type { PersistConfig } from 'redux-persist/src/types.js';
 
 import {
   createAsyncMigrate,
   type StorageMigrationFunction,
 } from 'lib/shared/create-async-migrate.js';
 import type {
   KeyserverInfo,
   KeyserverStore,
 } from 'lib/types/keyserver-types.js';
 import { cookieTypes } from 'lib/types/session-types.js';
 import {
   defaultConnectionInfo,
   type ConnectionInfo,
 } from 'lib/types/socket-types.js';
 import { defaultGlobalThemeInfo } from 'lib/types/theme-types.js';
 import { parseCookies } from 'lib/utils/cookie-utils.js';
 import { isDev } from 'lib/utils/dev-utils.js';
 import {
   generateIDSchemaMigrationOpsForDrafts,
   convertDraftStoreToNewIDSchema,
 } from 'lib/utils/migration-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import commReduxStorageEngine from './comm-redux-storage-engine.js';
 import type { AppState } from './redux-setup.js';
 import { getDatabaseModule } from '../database/database-module-provider.js';
 import { isSQLiteSupported } from '../database/utils/db-utils.js';
 import { workerRequestMessageTypes } from '../types/worker-types.js';
 
 declare var keyserverURL: string;
 
 const migrations = {
   [1]: async (state: any) => {
     const {
       primaryIdentityPublicKey,
       ...stateWithoutPrimaryIdentityPublicKey
     } = state;
     return {
       ...stateWithoutPrimaryIdentityPublicKey,
       cryptoStore: {
         primaryAccount: null,
         primaryIdentityKeys: null,
         notificationAccount: null,
         notificationIdentityKeys: null,
       },
     };
   },
   [2]: async (state: AppState) => {
     return state;
   },
   [3]: async (state: AppState) => {
     let newState = state;
     if (state.draftStore) {
       newState = {
         ...newState,
         draftStore: convertDraftStoreToNewIDSchema(state.draftStore),
       };
     }
 
     const databaseModule = await getDatabaseModule();
     const isDatabaseSupported = await databaseModule.isDatabaseSupported();
 
     if (!isDatabaseSupported) {
       return newState;
     }
 
     const stores = await databaseModule.schedule({
       type: workerRequestMessageTypes.GET_CLIENT_STORE,
     });
     invariant(stores?.store, 'Stores should exist');
     await databaseModule.schedule({
       type: workerRequestMessageTypes.PROCESS_STORE_OPERATIONS,
       storeOperations: {
         draftStoreOperations: generateIDSchemaMigrationOpsForDrafts(
           stores.store.drafts,
         ),
       },
     });
 
     return newState;
   },
   [4]: async (state: any) => {
     const { lastCommunicatedPlatformDetails, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             lastCommunicatedPlatformDetails,
           },
         },
       },
     };
   },
   [5]: async (state: any) => {
     const databaseModule = await getDatabaseModule();
     const isDatabaseSupported = await databaseModule.isDatabaseSupported();
     if (!isDatabaseSupported) {
       return state;
     }
 
     if (!state.draftStore) {
       return state;
     }
 
     const { drafts } = state.draftStore;
     const draftStoreOperations = [];
     for (const key in drafts) {
       const text = drafts[key];
       draftStoreOperations.push({
         type: 'update',
         payload: { key, text },
       });
     }
 
     await databaseModule.schedule({
       type: workerRequestMessageTypes.PROCESS_STORE_OPERATIONS,
       storeOperations: { draftStoreOperations },
     });
 
     return state;
   },
   [6]: async (state: AppState) => ({
     ...state,
     integrityStore: { threadHashes: {}, threadHashingStatus: 'starting' },
   }),
   [7]: async (state: AppState): Promise<AppState> => {
     if (!document.cookie) {
       return state;
     }
 
     const params = parseCookies(document.cookie);
     let cookie = null;
     if (params[cookieTypes.USER]) {
       cookie = `${cookieTypes.USER}=${params[cookieTypes.USER]}`;
     } else if (params[cookieTypes.ANONYMOUS]) {
       cookie = `${cookieTypes.ANONYMOUS}=${params[cookieTypes.ANONYMOUS]}`;
     }
 
     return {
       ...state,
       keyserverStore: {
         ...state.keyserverStore,
         keyserverInfos: {
           ...state.keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...state.keyserverStore.keyserverInfos[ashoatKeyserverID],
             cookie,
           },
         },
       },
     };
   },
   [8]: async (state: AppState) => ({
     ...state,
     globalThemeInfo: defaultGlobalThemeInfo,
   }),
   [9]: async (state: AppState) => ({
     ...state,
     keyserverStore: {
       ...state.keyserverStore,
       keyserverInfos: {
         ...state.keyserverStore.keyserverInfos,
         [ashoatKeyserverID]: {
           ...state.keyserverStore.keyserverInfos[ashoatKeyserverID],
           urlPrefix: keyserverURL,
         },
       },
     },
   }),
   [10]: async (state: AppState) => {
     const { keyserverInfos } = state.keyserverStore;
-    const newKeyserverInfos = {};
+    const newKeyserverInfos: { [string]: KeyserverInfo } = {};
     for (const key in keyserverInfos) {
       newKeyserverInfos[key] = {
         ...keyserverInfos[key],
         connection: { ...defaultConnectionInfo },
         updatesCurrentAsOf: 0,
         sessionID: null,
       };
     }
     return {
       ...state,
       keyserverStore: {
         ...state.keyserverStore,
         keyserverInfos: newKeyserverInfos,
       },
     };
   },
 };
 
 const persistWhitelist = [
   'enabledApps',
   'cryptoStore',
   'notifPermissionAlertInfo',
   'commServicesAccessToken',
   'keyserverStore',
   'globalThemeInfo',
 ];
 
 const rootKey = 'root';
 
 const migrateStorageToSQLite: StorageMigrationFunction = async debug => {
   const databaseModule = await getDatabaseModule();
   const isSupported = await databaseModule.isDatabaseSupported();
   if (!isSupported) {
     return undefined;
   }
 
   const oldStorage = await getStoredState({ storage, key: rootKey });
   if (!oldStorage) {
     return undefined;
   }
 
   purgeStoredState({ storage, key: rootKey });
   if (debug) {
     console.log('redux-persist: migrating state to SQLite storage');
   }
 
   // We need to simulate the keyserverStoreTransform for data stored in the
   // old local storage (because redux persist will only run it for the
   // sqlite storage which is empty in this case).
   // We don't just use keyserverStoreTransform.out(oldStorage) because
   // the transform might change in the future, but we need to treat
   // this code like migration code (it shouldn't change).
   if (oldStorage?._persist?.version === 4) {
     const defaultConnection = defaultConnectionInfo;
     return {
       ...oldStorage,
       keyserverStore: {
         ...oldStorage.keyserverStore,
         keyserverInfos: {
           ...oldStorage.keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...oldStorage.keyserverStore.keyserverInfos[ashoatKeyserverID],
             connection: { ...defaultConnection },
             updatesCurrentAsOf: 0,
             sessionID: null,
           },
         },
       },
     };
   }
 
   return oldStorage;
 };
 
 type PersistedKeyserverInfo = $Diff<
   KeyserverInfo,
   {
     +connection: ConnectionInfo,
     +updatesCurrentAsOf: number,
     +sessionID?: ?string,
   },
 >;
 type PersistedKeyserverStore = {
   +keyserverInfos: { +[key: string]: PersistedKeyserverInfo },
 };
 const keyserverStoreTransform: Transform = createTransform(
   (state: KeyserverStore): PersistedKeyserverStore => {
-    const keyserverInfos = {};
+    const keyserverInfos: { [string]: PersistedKeyserverInfo } = {};
     for (const key in state.keyserverInfos) {
       const { connection, sessionID, ...rest } = state.keyserverInfos[key];
       keyserverInfos[key] = rest;
     }
     return {
       ...state,
       keyserverInfos,
     };
   },
   (state: PersistedKeyserverStore): KeyserverStore => {
-    const keyserverInfos = {};
+    const keyserverInfos: { [string]: KeyserverInfo } = {};
     for (const key in state.keyserverInfos) {
       keyserverInfos[key] = {
         ...state.keyserverInfos[key],
         connection: { ...defaultConnectionInfo },
         sessionID: null,
       };
     }
     return {
       ...state,
       keyserverInfos,
     };
   },
   { whitelist: ['keyserverStore'] },
 );
 
 const persistConfig: PersistConfig = {
   key: rootKey,
   storage: commReduxStorageEngine,
   whitelist: isSQLiteSupported()
     ? persistWhitelist
     : [...persistWhitelist, 'draftStore'],
   migrate: (createAsyncMigrate(
     migrations,
     { debug: isDev },
     migrateStorageToSQLite,
   ): any),
   version: 10,
   transforms: [keyserverStoreTransform],
 };
 
 export { persistConfig };
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
index 5af4717ac..51bc8779e 100644
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -1,259 +1,263 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateRelationships,
   updateRelationshipsActionTypes,
 } from 'lib/actions/relationship-actions.js';
 import { searchUsers } from 'lib/actions/user-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js';
 import type {
   UserRelationshipStatus,
   RelationshipAction,
 } from 'lib/types/relationship-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+import type {
+  GlobalAccountUserInfo,
+  AccountUserInfo,
+} from 'lib/types/user-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils.js';
 
 import AddUsersListItem from './add-users-list-item.react.js';
 import css from './add-users-list.css';
 import Button from '../../components/button.react.js';
 import type { ButtonColor } from '../../components/button.react.js';
 import Label from '../../components/label.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateRelationshipsActionTypes,
 );
 
 type Props = {
   +searchText: string,
   +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
   +closeModal: () => void,
   +confirmButtonContent: React.Node,
   +confirmButtonColor?: ButtonColor,
   +relationshipAction: RelationshipAction,
 };
 
 function AddUsersList(props: Props): React.Node {
   const {
     searchText,
     excludedStatuses = new Set(),
     closeModal,
     confirmButtonContent,
     confirmButtonColor,
     relationshipAction,
   } = props;
 
   const viewerID = useSelector(state => state.currentUserInfo?.id);
   const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
   const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
     $ReadOnlySet<string>,
   >(new Set(userStoreSearchIndex.getSearchResults(searchText)));
   React.useEffect(() => {
     setUserStoreSearchResults(
       new Set(userStoreSearchIndex.getSearchResults(searchText)),
     );
   }, [searchText, userStoreSearchIndex]);
 
   const [serverSearchResults, setServerSearchResults] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const callSearchUsers = useServerCall(searchUsers);
   React.useEffect(() => {
     (async () => {
       if (searchText.length === 0) {
         setServerSearchResults([]);
       } else {
         const { userInfos } = await callSearchUsers(searchText);
         setServerSearchResults(userInfos);
       }
     })();
   }, [callSearchUsers, searchText]);
 
   const searchTextPresent = searchText.length > 0;
   const userInfos = useSelector(state => state.userStore.userInfos);
   const mergedUserInfos = React.useMemo(() => {
-    const mergedInfos = {};
+    const mergedInfos: { [string]: GlobalAccountUserInfo | AccountUserInfo } =
+      {};
 
     for (const userInfo of serverSearchResults) {
       mergedInfos[userInfo.id] = userInfo;
     }
 
     const userStoreUserIDs = searchTextPresent
       ? userStoreSearchResults
       : Object.keys(userInfos);
     for (const id of userStoreUserIDs) {
       const { username, relationshipStatus } = userInfos[id];
       if (username) {
         mergedInfos[id] = { id, username, relationshipStatus };
       }
     }
 
     return mergedInfos;
   }, [
     searchTextPresent,
     serverSearchResults,
     userInfos,
     userStoreSearchResults,
   ]);
 
   const sortedUsers = React.useMemo(
     () =>
       Object.keys(mergedUserInfos)
         .map(userID => mergedUserInfos[userID])
         .filter(
           user =>
             user.id !== viewerID &&
             !excludedStatuses.has(user.relationshipStatus),
         )
         .sort((user1, user2) => user1.username.localeCompare(user2.username)),
     [excludedStatuses, mergedUserInfos, viewerID],
   );
 
   const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const selectUser = React.useCallback(
     (userID: string) => {
       setPendingUsersToAdd(pendingUsers => {
         const username = mergedUserInfos[userID]?.username;
         if (!username || pendingUsers.some(user => user.id === userID)) {
           return pendingUsers;
         }
 
         const newPendingUser = {
           id: userID,
           username,
         };
         let targetIndex = 0;
         while (
           targetIndex < pendingUsers.length &&
           newPendingUser.username.localeCompare(
             pendingUsers[targetIndex].username,
           ) > 0
         ) {
           targetIndex++;
         }
         return [
           ...pendingUsers.slice(0, targetIndex),
           newPendingUser,
           ...pendingUsers.slice(targetIndex),
         ];
       });
     },
     [mergedUserInfos],
   );
   const deselectUser = React.useCallback(
     (userID: string) =>
       setPendingUsersToAdd(pendingUsers =>
         pendingUsers.filter(userInfo => userInfo.id !== userID),
       ),
     [],
   );
   const pendingUserIDs = React.useMemo(
     () => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)),
     [pendingUsersToAdd],
   );
 
   const pendingUsersWithENSNames = useENSNames(pendingUsersToAdd);
   const userTags = React.useMemo(() => {
     if (pendingUsersWithENSNames.length === 0) {
       return null;
     }
     const tags = pendingUsersWithENSNames.map(userInfo => (
       <Label key={userInfo.id} onClose={() => deselectUser(userInfo.id)}>
         {userInfo.username}
       </Label>
     ));
     return <div className={css.userTagsContainer}>{tags}</div>;
   }, [deselectUser, pendingUsersWithENSNames]);
 
   const filteredUsers = React.useMemo(
     () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)),
     [pendingUserIDs, sortedUsers],
   );
   const filteredUsersWithENSNames = useENSNames(filteredUsers);
 
   const userRows = React.useMemo(
     () =>
       filteredUsersWithENSNames.map(userInfo => (
         <AddUsersListItem
           userInfo={userInfo}
           key={userInfo.id}
           selectUser={selectUser}
         />
       )),
     [filteredUsersWithENSNames, selectUser],
   );
 
   const [errorMessage, setErrorMessage] = React.useState('');
   const callUpdateRelationships = useServerCall(updateRelationships);
   const dispatchActionPromise = useDispatchActionPromise();
   const updateRelationshipsPromiseCreator = React.useCallback(async () => {
     try {
       setErrorMessage('');
       const result = await callUpdateRelationships({
         action: relationshipAction,
         userIDs: Array.from(pendingUserIDs),
       });
       closeModal();
       return result;
     } catch (e) {
       setErrorMessage('unknown error');
       throw e;
     }
   }, [callUpdateRelationships, closeModal, pendingUserIDs, relationshipAction]);
   const confirmSelection = React.useCallback(
     () =>
       dispatchActionPromise(
         updateRelationshipsActionTypes,
         updateRelationshipsPromiseCreator(),
       ),
     [dispatchActionPromise, updateRelationshipsPromiseCreator],
   );
   const loadingStatus = useSelector(loadingStatusSelector);
   let buttonContent = confirmButtonContent;
   if (loadingStatus === 'loading') {
     buttonContent = (
       <>
         <div className={css.hidden}>{confirmButtonContent}</div>
         <LoadingIndicator status="loading" />
       </>
     );
   }
 
   let errors;
   if (errorMessage) {
     errors = <div className={css.error}>{errorMessage}</div>;
   }
 
   return (
     <div className={css.container}>
       {userTags}
       <div className={css.userRowsContainer}>{userRows}</div>
       {errors}
       <div className={css.buttons}>
         <Button variant="outline" onClick={closeModal}>
           Cancel
         </Button>
         <Button
           onClick={confirmSelection}
           disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
           variant="filled"
           buttonColor={confirmButtonColor}
         >
           <div className={css.confirmButtonContainer}>{buttonContent}</div>
         </Button>
       </div>
     </div>
   );
 }
 
 export default AddUsersList;
diff --git a/web/settings/tunnelbroker-message-list.react.js b/web/settings/tunnelbroker-message-list.react.js
index 916f98d4f..3d3dbc2b9 100644
--- a/web/settings/tunnelbroker-message-list.react.js
+++ b/web/settings/tunnelbroker-message-list.react.js
@@ -1,50 +1,50 @@
 // @flow
 
 import * as React from 'react';
 
 import type { TunnelbrokerSocketListener } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import type { TunnelbrokerMessage } from 'lib/types/tunnelbroker/messages.js';
 
 import css from './tunnelbroker-message-list.css';
 import Modal from '../modals/modal.react.js';
 
 type Props = {
   +addListener: (listener: TunnelbrokerSocketListener) => void,
   +removeListener: (listener: TunnelbrokerSocketListener) => void,
   +onClose: () => void,
 };
 
 function TunnelbrokerMessagesScreen(props: Props): React.Node {
   const { addListener, onClose, removeListener } = props;
   const [messages, setMessages] = React.useState<TunnelbrokerMessage[]>([]);
 
   const listener = React.useCallback((msg: TunnelbrokerMessage) => {
     setMessages(prev => [...prev, msg]);
   }, []);
 
   React.useEffect(() => {
     addListener(listener);
     return () => removeListener(listener);
   }, [addListener, listener, removeListener]);
 
-  let messageList = (
+  let messageList: React.Node = (
     <div className={css.messageRow}>
       <div className={css.messageCol}>No messages</div>
     </div>
   );
   if (messages.length) {
     messageList = messages.map(message => (
       <div key={message.messageID} className={css.messageRow}>
         <div className={css.messageCol}>{JSON.stringify(message)}</div>
       </div>
     ));
   }
 
   return (
     <Modal name="Tunnelbroker Messages" onClose={onClose} size="large">
       <div className={css.messageList}>{messageList}</div>
     </Modal>
   );
 }
 
 export default TunnelbrokerMessagesScreen;
diff --git a/web/url-utils.js b/web/url-utils.js
index e6630b5fc..7829dacac 100644
--- a/web/url-utils.js
+++ b/web/url-utils.js
@@ -1,161 +1,161 @@
 // @flow
 
 import invariant from 'invariant';
 import _keyBy from 'lodash/fp/keyBy.js';
 
 import type { AccountUserInfo } from 'lib/types/user-types.js';
 import {
   startDateForYearAndMonth,
   endDateForYearAndMonth,
 } from 'lib/utils/date-utils.js';
 import { infoFromURL, type URLInfo } from 'lib/utils/url-utils.js';
 
 import { yearExtractor, monthExtractor } from './selectors/nav-selectors.js';
 import type { NavInfo } from './types/nav-types.js';
 
 function canonicalURLFromReduxState(
   navInfo: NavInfo,
   currentURL: string,
   loggedIn: boolean,
 ): string {
   const urlInfo = infoFromURL(currentURL);
   const today = new Date();
   let newURL = `/`;
 
   if (loggedIn) {
     newURL += `${navInfo.tab}/`;
     if (navInfo.tab === 'calendar') {
       const { startDate, endDate } = navInfo;
       const year = yearExtractor(startDate, endDate);
       if (urlInfo.year !== undefined) {
         invariant(
           year !== null && year !== undefined,
           `${startDate} and ${endDate} aren't in the same year`,
         );
         newURL += `year/${year}/`;
       } else if (
         year !== null &&
         year !== undefined &&
         year !== today.getFullYear()
       ) {
         newURL += `year/${year}/`;
       }
 
       const month = monthExtractor(startDate, endDate);
       if (urlInfo.month !== undefined) {
         invariant(
           month !== null && month !== undefined,
           `${startDate} and ${endDate} aren't in the same month`,
         );
         newURL += `month/${month}/`;
       } else if (
         month !== null &&
         month !== undefined &&
         month !== today.getMonth() + 1
       ) {
         newURL += `month/${month}/`;
       }
     } else if (navInfo.tab === 'chat') {
       if (navInfo.chatMode === 'create') {
         const users =
           navInfo.selectedUserList?.map(({ id }) => id)?.join('+') ?? '';
         const potentiallyTrailingSlash = users.length > 0 ? '/' : '';
         newURL += `thread/new/${users}${potentiallyTrailingSlash}`;
       } else {
         const activeChatThreadID = navInfo.activeChatThreadID;
         if (activeChatThreadID) {
           newURL += `thread/${activeChatThreadID}/`;
         }
       }
     } else if (navInfo.tab === 'settings' && navInfo.settingsSection) {
       newURL += `${navInfo.settingsSection}/`;
     }
   } else if (navInfo.loginMethod === 'qr-code') {
     newURL += 'qr-code/';
   }
 
   return newURL;
 }
 
 // Given a URL, this function parses out a navInfo object, leaving values as
 // default if they are unspecified.
 function navInfoFromURL(
   urlInfo: URLInfo,
   backupInfo: {
     +now?: Date,
     +userInfos?: { +[id: string]: AccountUserInfo },
     +navInfo?: NavInfo,
   },
 ): NavInfo {
   const { navInfo } = backupInfo;
   const now = backupInfo.now ? backupInfo.now : new Date();
 
-  let year = urlInfo.year;
+  let year: ?number = urlInfo.year;
   if (!year && navInfo) {
     year = yearExtractor(navInfo.startDate, navInfo.endDate);
   }
   if (!year) {
     year = now.getFullYear();
   }
 
-  let month = urlInfo.month;
+  let month: ?number = urlInfo.month;
   if (!month && navInfo) {
     month = monthExtractor(navInfo.startDate, navInfo.endDate);
   }
   if (!month) {
     month = now.getMonth() + 1;
   }
 
   let activeChatThreadID = null;
   if (urlInfo.thread) {
     activeChatThreadID = urlInfo.thread.toString();
   } else if (navInfo) {
     activeChatThreadID = navInfo.activeChatThreadID;
   }
 
   let tab = 'chat';
   if (urlInfo.calendar) {
     tab = 'calendar';
   } else if (urlInfo.settings) {
     tab = 'settings';
   }
 
   const chatMode =
     urlInfo.threadCreation || navInfo?.chatMode === 'create'
       ? 'create'
       : 'view';
 
   const newNavInfo: NavInfo = {
     tab,
     startDate: startDateForYearAndMonth(year, month),
     endDate: endDateForYearAndMonth(year, month),
     activeChatThreadID,
     chatMode,
   };
 
   if (urlInfo.selectedUserList) {
     const selectedUsers = _keyBy('id')(navInfo?.selectedUserList ?? []);
     const userInfos = backupInfo.userInfos ?? {};
     newNavInfo.selectedUserList = urlInfo.selectedUserList
       ?.map(id => selectedUsers[id] ?? userInfos[id])
       ?.filter(Boolean);
   }
 
   if (urlInfo.settings) {
     newNavInfo.settingsSection = urlInfo.settings;
   }
 
   if (urlInfo.inviteSecret) {
     newNavInfo.inviteSecret = urlInfo.inviteSecret;
   }
 
   if (urlInfo.qrCode) {
     newNavInfo.loginMethod = 'qr-code';
   } else {
     newNavInfo.loginMethod = 'form';
   }
 
   return newNavInfo;
 }
 
 export { canonicalURLFromReduxState, navInfoFromURL };