diff --git a/keyserver/src/deleters/thread-deleters.js b/keyserver/src/deleters/thread-deleters.js
index 08033baee..efe73d9d7 100644
--- a/keyserver/src/deleters/thread-deleters.js
+++ b/keyserver/src/deleters/thread-deleters.js
@@ -1,149 +1,149 @@
 // @flow
 
 import { permissionLookup } from 'lib/permissions/thread-permissions.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadDeletionRequest,
   type LeaveThreadResult,
 } from 'lib/types/thread-types.js';
 import { updateTypes } from 'lib/types/update-types-enum.js';
 import { ServerError } from 'lib/utils/errors.js';
 
 import { createUpdates } from '../creators/update-creator.js';
 import { dbQuery, SQL } from '../database/database.js';
 import {
   fetchServerThreadInfos,
   fetchContainedThreadIDs,
 } from '../fetchers/thread-fetchers.js';
 import { fetchThreadPermissionsBlob } from '../fetchers/thread-permission-fetchers.js';
 import { fetchUpdateInfoForThreadDeletion } from '../fetchers/update-fetchers.js';
 import { rescindPushNotifs } from '../push/rescind.js';
 import type { Viewer } from '../session/viewer.js';
 
-type DeleteThreadOptions = $Shape<{
+type DeleteThreadOptions = Partial<{
   +ignorePermissions: boolean,
 }>;
 async function deleteThread(
   viewer: Viewer,
   threadDeletionRequest: ThreadDeletionRequest,
   options?: DeleteThreadOptions,
 ): Promise<LeaveThreadResult> {
   if (!viewer.loggedIn) {
     throw new ServerError('not_logged_in');
   }
   const ignorePermissions =
     (options?.ignorePermissions && viewer.isScriptViewer) ?? false;
 
   const { threadID } = threadDeletionRequest;
 
   const permissionsBlob = await fetchThreadPermissionsBlob(viewer, threadID);
 
   if (!permissionsBlob && !ignorePermissions) {
     // This should only occur if the first request goes through but the client
     // never receives the response
     const { updateInfos } = await fetchUpdateInfoForThreadDeletion(
       viewer,
       threadID,
     );
     return { updatesResult: { newUpdates: updateInfos } };
   }
 
   const hasPermission = permissionLookup(
     permissionsBlob,
     threadPermissions.DELETE_THREAD,
   );
   if (!hasPermission && !ignorePermissions) {
     throw new ServerError('invalid_credentials');
   }
 
   // TODO: handle descendant thread permission update correctly.
   //       thread-permission-updaters should be used for descendant threads.
   const threadIDs = await fetchContainedThreadIDs(threadID);
 
   const [{ threadInfos: serverThreadInfos }] = await Promise.all([
     fetchServerThreadInfos({ threadIDs: new Set(threadIDs) }),
     rescindPushNotifs(
       SQL`n.thread IN (${threadIDs})`,
       SQL`IF(m.thread IN (${threadIDs}), NULL, m.thread)`,
     ),
   ]);
 
   const time = Date.now();
   const updateDatas = [];
   for (const containedThreadID of threadIDs) {
     for (const memberInfo of serverThreadInfos[containedThreadID].members) {
       updateDatas.push({
         type: updateTypes.DELETE_THREAD,
         userID: memberInfo.id,
         time,
         threadID: containedThreadID,
       });
     }
   }
 
   const [{ viewerUpdates }] = await Promise.all([
     createUpdates(updateDatas, { viewer, updatesForCurrentSession: 'return' }),
     deleteThreadsFromDB(threadIDs),
   ]);
 
   return { updatesResult: { newUpdates: viewerUpdates } };
 }
 
 function deleteThreadsFromDB(
   threadIDs: $ReadOnlyArray<string>,
 ): Promise<mixed> {
   const deletionQuery = SQL`
     START TRANSACTION;
     DELETE FROM threads WHERE id IN (${threadIDs});
     DELETE FROM ids WHERE id IN (${threadIDs});
     DELETE d, id, e, ie, r, ir
       FROM days d
       LEFT JOIN ids id ON id.id = d.id
       LEFT JOIN entries e ON e.day = d.id
       LEFT JOIN ids ie ON ie.id = e.id
       LEFT JOIN revisions r ON r.entry = e.id
       LEFT JOIN ids ir ON ir.id = r.id
       WHERE d.thread IN (${threadIDs});
     DELETE FROM memberships WHERE thread IN (${threadIDs});
     DELETE r, i
       FROM roles r
       LEFT JOIN ids i ON i.id = r.id
       WHERE r.thread IN (${threadIDs});
     DELETE m, im, u, iu
       FROM messages m
       LEFT JOIN ids im ON im.id = m.id
       LEFT JOIN uploads u ON u.container = m.id
       LEFT JOIN ids iu ON iu.id = u.id
       WHERE m.thread IN (${threadIDs});
     DELETE FROM uploads WHERE container IN (${threadIDs});
     DELETE FROM focused WHERE thread IN (${threadIDs});
     DELETE n, i
       FROM notifications n
       LEFT JOIN ids i ON i.id = n.id
       WHERE n.thread IN (${threadIDs});
     COMMIT;
   `;
   return dbQuery(deletionQuery, { multipleStatements: true });
 }
 
 async function deleteInaccessibleThreads(): Promise<void> {
   // A thread is considered "inaccessible" if it has no membership rows. Note
   // that membership rows exist whenever a user can see a thread, even if they
   // are not technically a member (in which case role=0). For now, we're also
   // excluding threads with children, since to properly delete those we would
   // need to update their parent_thread_id, and possibly change their type.
   const [fetchResult] = await dbQuery(SQL`
     SELECT t.id
     FROM threads t
     LEFT JOIN memberships m ON m.thread = t.id AND m.role > -1
     LEFT JOIN threads c ON c.parent_thread_id = t.id
     WHERE m.thread IS NULL AND c.id IS NULL
   `);
   const threadIDs = new Set(fetchResult.map(({ id }) => id));
   if (threadIDs.size === 0) {
     return;
   }
   await deleteThreadsFromDB([...threadIDs]);
 }
 
 export { deleteThread, deleteInaccessibleThreads };
diff --git a/keyserver/src/fetchers/thread-fetchers.js b/keyserver/src/fetchers/thread-fetchers.js
index 7d8c20571..e5097b264 100644
--- a/keyserver/src/fetchers/thread-fetchers.js
+++ b/keyserver/src/fetchers/thread-fetchers.js
@@ -1,415 +1,415 @@
 // @flow
 
 import invariant from 'invariant';
 
 import { specialRoles } from 'lib/permissions/special-roles.js';
 import { getAllThreadPermissions } from 'lib/permissions/thread-permissions.js';
 import {
   rawThreadInfoFromServerThreadInfo,
   getContainingThreadID,
   getCommunity,
 } from 'lib/shared/thread-utils.js';
 import { hasMinCodeVersion } from 'lib/shared/version-utils.js';
 import type { AvatarDBContent, ClientAvatar } from 'lib/types/avatar-types.js';
 import type { RawMessageInfo, MessageInfo } from 'lib/types/message-types.js';
 import { threadTypes, type ThreadType } from 'lib/types/thread-types-enum.js';
 import {
   type RawThreadInfos,
   type ServerThreadInfo,
   type RawThreadInfo,
 } from 'lib/types/thread-types.js';
 import { ServerError } from 'lib/utils/errors.js';
 
 import { getUploadURL, makeUploadURI } from './upload-fetchers.js';
 import { dbQuery, SQL, mergeAndConditions } from '../database/database.js';
 import type { SQLStatementType } from '../database/types.js';
 import type { Viewer } from '../session/viewer.js';
 
-type FetchThreadInfosFilter = $Shape<{
+type FetchThreadInfosFilter = Partial<{
   +accessibleToUserID: string,
   +threadID: string,
   +threadIDs: $ReadOnlySet<string>,
   +parentThreadID: string,
   +sourceMessageID: string,
 }>;
 function constructWhereClause(
   filter: FetchThreadInfosFilter,
 ): SQLStatementType {
   const fromTable = filter.accessibleToUserID ? 'memberships' : 'threads';
 
   const conditions = [];
 
   if (filter.accessibleToUserID) {
     conditions.push(
       SQL`mm.user = ${filter.accessibleToUserID} AND mm.role > -1`,
     );
   }
 
   if (filter.threadID && fromTable === 'memberships') {
     conditions.push(SQL`mm.thread = ${filter.threadID}`);
   } else if (filter.threadID) {
     conditions.push(SQL`t.id = ${filter.threadID}`);
   }
 
   if (filter.threadIDs && fromTable === 'memberships') {
     conditions.push(SQL`mm.thread IN (${[...filter.threadIDs]})`);
   } else if (filter.threadIDs) {
     conditions.push(SQL`t.id IN (${[...filter.threadIDs]})`);
   }
 
   if (filter.parentThreadID) {
     conditions.push(SQL`t.parent_thread_id = ${filter.parentThreadID}`);
   }
 
   if (filter.sourceMessageID) {
     conditions.push(SQL`t.source_message = ${filter.sourceMessageID}`);
   }
 
   if (conditions.length === 0) {
     return SQL``;
   }
 
   const clause = mergeAndConditions(conditions);
   return SQL`WHERE `.append(clause);
 }
 
 type FetchServerThreadInfosResult = {
   +threadInfos: { +[id: string]: ServerThreadInfo },
 };
 
 async function fetchServerThreadInfos(
   filter?: FetchThreadInfosFilter,
 ): Promise<FetchServerThreadInfosResult> {
   if (filter?.threadIDs?.size === 0) {
     return { threadInfos: {} };
   }
 
   let primaryFetchClause;
   if (filter?.accessibleToUserID) {
     primaryFetchClause = SQL`
       FROM memberships mm
       LEFT JOIN threads t ON t.id = mm.thread
     `;
   } else {
     primaryFetchClause = SQL`
       FROM threads t
     `;
   }
 
   const whereClause = filter ? constructWhereClause(filter) : '';
 
   const rolesQuery = SQL`
     SELECT t.id, r.id AS role, r.name, r.permissions,
       r.special_role = ${specialRoles.DEFAULT_ROLE} AS is_default
   `
     .append(primaryFetchClause)
     .append(
       SQL`
       LEFT JOIN roles r ON r.thread = t.id
     `,
     )
     .append(whereClause);
 
   const threadsQuery = SQL`
     SELECT t.id, t.name, t.parent_thread_id, t.containing_thread_id,
       t.community, t.depth, t.color, t.description, t.type, t.creation_time,
       t.source_message, t.replies_count, t.avatar, t.pinned_count, m.user,
       m.role, m.permissions, m.subscription,
       m.last_read_message < m.last_message AS unread, m.sender,
       up.id AS upload_id, up.secret AS upload_secret, up.extra AS upload_extra
   `
     .append(primaryFetchClause)
     .append(
       SQL`
       LEFT JOIN memberships m ON m.thread = t.id AND m.role >= 0
       LEFT JOIN uploads up ON up.container = t.id
     `,
     )
     .append(whereClause)
     .append(SQL` ORDER BY m.user ASC`);
   const [[threadsResult], [rolesResult]] = await Promise.all([
     dbQuery(threadsQuery),
     dbQuery(rolesQuery),
   ]);
 
   const threadInfos = {};
   for (const threadsRow of threadsResult) {
     const threadID = threadsRow.id.toString();
     if (!threadInfos[threadID]) {
       threadInfos[threadID] = {
         id: threadID,
         type: threadsRow.type,
         name: threadsRow.name ? threadsRow.name : '',
         description: threadsRow.description ? threadsRow.description : '',
         color: threadsRow.color,
         creationTime: threadsRow.creation_time,
         parentThreadID: threadsRow.parent_thread_id
           ? threadsRow.parent_thread_id.toString()
           : null,
         containingThreadID: threadsRow.containing_thread_id
           ? threadsRow.containing_thread_id.toString()
           : null,
         depth: threadsRow.depth,
         community: threadsRow.community
           ? threadsRow.community.toString()
           : null,
         members: [],
         roles: {},
         repliesCount: threadsRow.replies_count,
         pinnedCount: threadsRow.pinned_count,
       };
       if (threadsRow.avatar) {
         const avatar: AvatarDBContent = JSON.parse(threadsRow.avatar);
         let clientAvatar: ?ClientAvatar;
         if (
           avatar &&
           avatar.type !== 'image' &&
           avatar.type !== 'encrypted_image'
         ) {
           clientAvatar = avatar;
         } else if (
           avatar &&
           (avatar.type === 'image' || avatar.type === 'encrypted_image') &&
           threadsRow.upload_id &&
           threadsRow.upload_secret
         ) {
           const uploadID = threadsRow.upload_id.toString();
           invariant(
             uploadID === avatar.uploadID,
             `uploadID of upload should match uploadID of image avatar`,
           );
           if (avatar.type === 'encrypted_image' && threadsRow.upload_extra) {
             const uploadExtra = JSON.parse(threadsRow.upload_extra);
             clientAvatar = {
               type: 'encrypted_image',
               blobURI: makeUploadURI(
                 uploadExtra.blobHash,
                 uploadID,
                 threadsRow.upload_secret,
               ),
               encryptionKey: uploadExtra.encryptionKey,
               thumbHash: uploadExtra.thumbHash,
             };
           } else {
             clientAvatar = {
               type: 'image',
               uri: getUploadURL(uploadID, threadsRow.upload_secret),
             };
           }
         }
 
         threadInfos[threadID] = {
           ...threadInfos[threadID],
           avatar: clientAvatar,
         };
       }
     }
     const sourceMessageID = threadsRow.source_message?.toString();
     if (sourceMessageID) {
       threadInfos[threadID].sourceMessageID = sourceMessageID;
     }
     if (threadsRow.user) {
       const userID = threadsRow.user.toString();
       const allPermissions = getAllThreadPermissions(
         JSON.parse(threadsRow.permissions),
         threadID,
       );
       threadInfos[threadID].members.push({
         id: userID,
         permissions: allPermissions,
         role: threadsRow.role ? threadsRow.role.toString() : null,
         subscription: JSON.parse(threadsRow.subscription),
         unread: threadsRow.role ? !!threadsRow.unread : null,
         isSender: !!threadsRow.sender,
       });
     }
   }
 
   for (const rolesRow of rolesResult) {
     const threadID = rolesRow.id.toString();
     if (!rolesRow.role) {
       continue;
     }
     const role = rolesRow.role.toString();
     if (!threadInfos[threadID].roles[role]) {
       threadInfos[threadID].roles[role] = {
         id: role,
         name: rolesRow.name,
         permissions: JSON.parse(rolesRow.permissions),
         isDefault: Boolean(rolesRow.is_default),
       };
     }
   }
 
   return { threadInfos };
 }
 
 export type FetchThreadInfosResult = {
   +threadInfos: RawThreadInfos,
 };
 
 async function fetchThreadInfos(
   viewer: Viewer,
   inputFilter?: FetchThreadInfosFilter,
 ): Promise<FetchThreadInfosResult> {
   const filter = {
     accessibleToUserID: viewer.id,
     ...inputFilter,
   };
   const serverResult = await fetchServerThreadInfos(filter);
   return rawThreadInfosFromServerThreadInfos(viewer, serverResult);
 }
 
 function rawThreadInfosFromServerThreadInfos(
   viewer: Viewer,
   serverResult: FetchServerThreadInfosResult,
 ): FetchThreadInfosResult {
   const viewerID = viewer.id;
   const codeVersionBelow209 = !hasMinCodeVersion(viewer.platformDetails, {
     native: 209,
   });
   const codeVersionBelow213 = !hasMinCodeVersion(viewer.platformDetails, {
     native: 213,
   });
   const codeVersionBelow221 = !hasMinCodeVersion(viewer.platformDetails, {
     native: 221,
   });
   const codeVersionBelow283 = !hasMinCodeVersion(viewer.platformDetails, {
     native: 285,
   });
 
   const threadInfos: { [string]: RawThreadInfo } = {};
   for (const threadID in serverResult.threadInfos) {
     const serverThreadInfo = serverResult.threadInfos[threadID];
     const threadInfo = rawThreadInfoFromServerThreadInfo(
       serverThreadInfo,
       viewerID,
       {
         filterThreadEditAvatarPermission: codeVersionBelow213,
         excludePinInfo: codeVersionBelow209,
         filterManageInviteLinksPermission: codeVersionBelow221,
         filterVoicedInAnnouncementChannelsPermission: codeVersionBelow283,
       },
     );
     if (threadInfo) {
       threadInfos[threadID] = threadInfo;
     }
   }
   return { threadInfos };
 }
 
 async function verifyThreadIDs(
   threadIDs: $ReadOnlyArray<string>,
 ): Promise<$ReadOnlyArray<string>> {
   if (threadIDs.length === 0) {
     return [];
   }
 
   const query = SQL`SELECT id FROM threads WHERE id IN (${threadIDs})`;
   const [result] = await dbQuery(query);
 
   const verified = [];
   for (const row of result) {
     verified.push(row.id.toString());
   }
   return verified;
 }
 
 async function verifyThreadID(threadID: string): Promise<boolean> {
   const result = await verifyThreadIDs([threadID]);
   return result.length !== 0;
 }
 
 type ThreadAncestry = {
   +containingThreadID: ?string,
   +community: ?string,
   +depth: number,
 };
 async function determineThreadAncestry(
   parentThreadID: ?string,
   threadType: ThreadType,
 ): Promise<ThreadAncestry> {
   if (!parentThreadID) {
     return { containingThreadID: null, community: null, depth: 0 };
   }
   const parentThreadInfos = await fetchServerThreadInfos({
     threadID: parentThreadID,
   });
   const parentThreadInfo = parentThreadInfos.threadInfos[parentThreadID];
   if (!parentThreadInfo) {
     throw new ServerError('invalid_parameters');
   }
   const containingThreadID = getContainingThreadID(
     parentThreadInfo,
     threadType,
   );
   const community = getCommunity(parentThreadInfo);
   const depth = parentThreadInfo.depth + 1;
   return { containingThreadID, community, depth };
 }
 
 function personalThreadQuery(
   firstMemberID: string,
   secondMemberID: string,
 ): SQLStatementType {
   return SQL`
     SELECT t.id 
     FROM threads t
     INNER JOIN memberships m1 
       ON m1.thread = t.id AND m1.user = ${firstMemberID}
     INNER JOIN memberships m2
       ON m2.thread = t.id AND m2.user = ${secondMemberID}
     WHERE t.type = ${threadTypes.PERSONAL}
       AND m1.role > 0
       AND m2.role > 0
   `;
 }
 
 async function fetchPersonalThreadID(
   viewerID: string,
   otherMemberID: string,
 ): Promise<?string> {
   const query = personalThreadQuery(viewerID, otherMemberID);
   const [threads] = await dbQuery(query);
   return threads[0]?.id.toString();
 }
 
 async function serverThreadInfoFromMessageInfo(
   message: RawMessageInfo | MessageInfo,
 ): Promise<?ServerThreadInfo> {
   const threadID = message.threadID;
   const threads = await fetchServerThreadInfos({ threadID });
   return threads.threadInfos[threadID];
 }
 
 async function fetchContainedThreadIDs(
   parentThreadID: string,
 ): Promise<Array<string>> {
   const query = SQL`
     WITH RECURSIVE thread_tree AS (
       SELECT id, containing_thread_id
       FROM threads
       WHERE id = ${parentThreadID}
       UNION ALL
       SELECT t.id, t.containing_thread_id
       FROM threads t
       JOIN thread_tree tt ON t.containing_thread_id = tt.id
     )
     SELECT id FROM thread_tree
   `;
   const [result] = await dbQuery(query);
   return result.map(row => row.id.toString());
 }
 
 export {
   fetchServerThreadInfos,
   fetchThreadInfos,
   rawThreadInfosFromServerThreadInfos,
   verifyThreadIDs,
   verifyThreadID,
   determineThreadAncestry,
   personalThreadQuery,
   fetchPersonalThreadID,
   serverThreadInfoFromMessageInfo,
   fetchContainedThreadIDs,
 };
diff --git a/keyserver/src/updaters/thread-permission-updaters.js b/keyserver/src/updaters/thread-permission-updaters.js
index 929ffecf7..4fb475fd3 100644
--- a/keyserver/src/updaters/thread-permission-updaters.js
+++ b/keyserver/src/updaters/thread-permission-updaters.js
@@ -1,1410 +1,1410 @@
 // @flow
 
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 
 import bots from 'lib/facts/bots.js';
 import genesis from 'lib/facts/genesis.js';
 import { specialRoles } from 'lib/permissions/special-roles.js';
 import {
   makePermissionsBlob,
   makePermissionsForChildrenBlob,
   getRoleForPermissions,
 } from 'lib/permissions/thread-permissions.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type {
   ThreadPermissionsBlob,
   ThreadRolePermissionsBlob,
 } from 'lib/types/thread-permission-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadType,
   assertThreadType,
 } from 'lib/types/thread-types-enum.js';
 import { updateTypes } from 'lib/types/update-types-enum.js';
 import {
   type ServerUpdateInfo,
   type CreateUpdatesResult,
   type UpdateData,
 } from 'lib/types/update-types.js';
 import { pushAll } from 'lib/utils/array.js';
 import { ServerError } from 'lib/utils/errors.js';
 
 import { updateChangedUndirectedRelationships } from './relationship-updaters.js';
 import {
   createUpdates,
   type UpdatesForCurrentSession,
 } from '../creators/update-creator.js';
 import { dbQuery, SQL } from '../database/database.js';
 import {
   fetchServerThreadInfos,
   rawThreadInfosFromServerThreadInfos,
 } from '../fetchers/thread-fetchers.js';
 import { rescindPushNotifs } from '../push/rescind.js';
 import { createScriptViewer } from '../session/scripts.js';
 import type { Viewer } from '../session/viewer.js';
 import { updateRoles } from '../updaters/role-updaters.js';
 import DepthQueue from '../utils/depth-queue.js';
 import RelationshipChangeset from '../utils/relationship-changeset.js';
 
 export type MembershipRowToSave = {
   +operation: 'save',
   +intent: 'join' | 'leave' | 'none',
   +userID: string,
   +threadID: string,
   +userNeedsFullThreadDetails: boolean,
   +permissions: ?ThreadPermissionsBlob,
   +permissionsForChildren: ?ThreadPermissionsBlob,
   // null role represents by "0"
   +role: string,
   +oldRole: string,
   +unread?: boolean,
 };
 type MembershipRowToDelete = {
   +operation: 'delete',
   +intent: 'join' | 'leave' | 'none',
   +userID: string,
   +threadID: string,
   +oldRole: string,
 };
 export type MembershipRow = MembershipRowToSave | MembershipRowToDelete;
 export type MembershipChangeset = {
   +membershipRows: MembershipRow[],
   +relationshipChangeset: RelationshipChangeset,
 };
 
 // 0 role means to remove the user from the thread
 // null role means to set the user to the default role
 // string role means to set the user to the role with that ID
 // -1 role means to set the user as a "ghost" (former member)
 type ChangeRoleOptions = {
   +setNewMembersToUnread?: boolean,
   +forcePermissionRecalculation?: boolean,
 };
 type ChangeRoleMemberInfo = {
   permissionsFromParent?: ?ThreadPermissionsBlob,
   memberOfContainingThread?: boolean,
 };
 type ExistingMembership = {
   +oldRole: string,
   +oldPermissions: ?ThreadPermissionsBlob,
   +oldPermissionsForChildren: ?ThreadPermissionsBlob,
 };
 async function changeRole(
   threadID: string,
   userIDs: $ReadOnlyArray<string>,
   role: string | -1 | 0 | null,
   options?: ChangeRoleOptions,
 ): Promise<MembershipChangeset> {
   const intent = role === -1 || role === 0 ? 'leave' : 'join';
   const setNewMembersToUnread =
     options?.setNewMembersToUnread && intent === 'join';
   const forcePermissionRecalculation = options?.forcePermissionRecalculation;
 
   if (userIDs.length === 0) {
     return {
       membershipRows: [],
       relationshipChangeset: new RelationshipChangeset(),
     };
   }
 
   const membershipQuery = SQL`
     SELECT user, role, permissions, permissions_for_children
     FROM memberships
     WHERE thread = ${threadID}
   `;
   const parentMembershipQuery = SQL`
     SELECT pm.user, pm.permissions_for_children AS permissions_from_parent
     FROM threads t
     INNER JOIN memberships pm ON pm.thread = t.parent_thread_id
     WHERE t.id = ${threadID} AND
       (pm.user IN (${userIDs}) OR t.parent_thread_id != ${genesis.id})
   `;
   const containingMembershipQuery = SQL`
     SELECT cm.user, cm.role AS containing_role
     FROM threads t
     INNER JOIN memberships cm ON cm.thread = t.containing_thread_id
     WHERE t.id = ${threadID} AND cm.user IN (${userIDs})
   `;
   const containingMembershipPromise: Promise<
     $ReadOnlyArray<{
       +user: number,
       +containing_role: number,
     }>,
   > = (async () => {
     if (intent === 'leave') {
       // Membership in the container only needs to be checked for members
       return [];
     }
     const [result] = await dbQuery(containingMembershipQuery);
     return result;
   })();
   const [
     [membershipResults],
     [parentMembershipResults],
     containingMembershipResults,
     roleThreadResult,
   ] = await Promise.all([
     dbQuery(membershipQuery),
     dbQuery(parentMembershipQuery),
     containingMembershipPromise,
     changeRoleThreadQuery(threadID, role),
   ]);
 
   const {
     roleColumnValue: intendedRole,
     threadType,
     parentThreadID,
     hasContainingThreadID,
     rolePermissions: intendedRolePermissions,
     depth,
   } = roleThreadResult;
 
   const existingMembershipInfo = new Map<string, ExistingMembership>();
   for (const row of membershipResults) {
     const userID = row.user.toString();
     existingMembershipInfo.set(userID, {
       oldRole: row.role.toString(),
       oldPermissions: JSON.parse(row.permissions),
       oldPermissionsForChildren: JSON.parse(row.permissions_for_children),
     });
   }
 
   const ancestorMembershipInfo: Map<string, ChangeRoleMemberInfo> = new Map();
   for (const row of parentMembershipResults) {
     const userID = row.user.toString();
     if (!userIDs.includes(userID)) {
       continue;
     }
     ancestorMembershipInfo.set(userID, {
       permissionsFromParent: JSON.parse(row.permissions_from_parent),
     });
   }
   for (const row of containingMembershipResults) {
     const userID = row.user.toString();
     const ancestorMembership = ancestorMembershipInfo.get(userID);
     const memberOfContainingThread = row.containing_role > 0;
     if (ancestorMembership) {
       ancestorMembership.memberOfContainingThread = memberOfContainingThread;
     } else {
       ancestorMembershipInfo.set(userID, {
         memberOfContainingThread,
       });
     }
   }
 
   const relationshipChangeset = new RelationshipChangeset();
   const existingMemberIDs = [...existingMembershipInfo.keys()];
   if (threadID !== genesis.id) {
     relationshipChangeset.setAllRelationshipsExist(existingMemberIDs);
   }
   const parentMemberIDs = parentMembershipResults.map(row =>
     row.user.toString(),
   );
   if (parentThreadID && parentThreadID !== genesis.id) {
     relationshipChangeset.setAllRelationshipsExist(parentMemberIDs);
   }
 
   const membershipRows: Array<MembershipRow> = [];
   const toUpdateDescendants = new Map<string, AncestorChanges>();
   for (const userID of userIDs) {
     const existingMembership = existingMembershipInfo.get(userID);
     const oldRole = existingMembership?.oldRole ?? '-1';
     const oldPermissions = existingMembership?.oldPermissions ?? null;
     const oldPermissionsForChildren =
       existingMembership?.oldPermissionsForChildren ?? null;
 
     if (
       existingMembership &&
       oldRole === intendedRole &&
       !forcePermissionRecalculation
     ) {
       // If the old role is the same as the new one, we have nothing to update
       continue;
     } else if (Number(oldRole) > 0 && role === null) {
       // In the case where we're just trying to add somebody to a thread, if
       // they already have a role with a nonzero role then we don't need to do
       // anything
       continue;
     }
 
     let permissionsFromParent = null;
     let memberOfContainingThread = false;
     const ancestorMembership = ancestorMembershipInfo.get(userID);
     if (ancestorMembership) {
       permissionsFromParent = ancestorMembership.permissionsFromParent;
       memberOfContainingThread = !!ancestorMembership.memberOfContainingThread;
     }
     if (!hasContainingThreadID) {
       memberOfContainingThread = true;
     }
 
     const rolePermissions = memberOfContainingThread
       ? intendedRolePermissions
       : null;
     const targetRole = memberOfContainingThread ? intendedRole : '-1';
 
     const permissions = makePermissionsBlob(
       rolePermissions,
       permissionsFromParent,
       threadID,
       threadType,
     );
     const permissionsForChildren = makePermissionsForChildrenBlob(permissions);
     const newRole = getRoleForPermissions(targetRole, permissions);
     const userBecameMember = Number(oldRole) <= 0 && Number(newRole) > 0;
     const userLostMembership = Number(oldRole) > 0 && Number(newRole) <= 0;
 
     if (
       (intent === 'join' && Number(newRole) <= 0) ||
       (intent === 'leave' && Number(newRole) > 0)
     ) {
       throw new ServerError('invalid_parameters');
     } else if (intendedRole !== newRole) {
       console.warn(
         `changeRole called for role=${intendedRole}, but ended up setting ` +
           `role=${newRole} for userID ${userID} and threadID ${threadID}, ` +
           'probably because KNOW_OF permission was unexpectedly present or ' +
           'missing',
       );
     }
     if (
       existingMembership &&
       _isEqual(permissions)(oldPermissions) &&
       oldRole === newRole
     ) {
       // This thread and all of its descendants need no updates for this user,
       // since the corresponding memberships row is unchanged by this operation
       continue;
     }
 
     if (permissions) {
       membershipRows.push({
         operation: 'save',
         intent,
         userID,
         threadID,
         userNeedsFullThreadDetails: userBecameMember,
         permissions,
         permissionsForChildren,
         role: newRole,
         oldRole,
         unread: userBecameMember && setNewMembersToUnread,
       });
     } else {
       membershipRows.push({
         operation: 'delete',
         intent,
         userID,
         threadID,
         oldRole,
       });
     }
 
     if (permissions && !existingMembership && threadID !== genesis.id) {
       relationshipChangeset.setRelationshipsNeeded(userID, existingMemberIDs);
     }
 
     if (
       userLostMembership ||
       !_isEqual(permissionsForChildren)(oldPermissionsForChildren)
     ) {
       toUpdateDescendants.set(userID, {
         userIsMember: Number(newRole) > 0,
         permissionsForChildren,
       });
     }
   }
 
   if (toUpdateDescendants.size > 0) {
     const {
       membershipRows: descendantMembershipRows,
       relationshipChangeset: descendantRelationshipChangeset,
     } = await updateDescendantPermissions({
       threadID,
       depth,
       changesByUser: toUpdateDescendants,
     });
     pushAll(membershipRows, descendantMembershipRows);
     relationshipChangeset.addAll(descendantRelationshipChangeset);
   }
 
   return { membershipRows, relationshipChangeset };
 }
 
 type RoleThreadResult = {
   +roleColumnValue: string,
   +depth: number,
   +threadType: ThreadType,
   +parentThreadID: ?string,
   +hasContainingThreadID: boolean,
   +rolePermissions: ?ThreadRolePermissionsBlob,
 };
 async function changeRoleThreadQuery(
   threadID: string,
   role: string | -1 | 0 | null,
 ): Promise<RoleThreadResult> {
   if (role === 0 || role === -1) {
     const query = SQL`
       SELECT type, depth, parent_thread_id, containing_thread_id
       FROM threads
       WHERE id = ${threadID}
     `;
     const [result] = await dbQuery(query);
     if (result.length === 0) {
       throw new ServerError('internal_error');
     }
     const row = result[0];
     return {
       roleColumnValue: role.toString(),
       depth: row.depth,
       threadType: assertThreadType(row.type),
       parentThreadID: row.parent_thread_id
         ? row.parent_thread_id.toString()
         : null,
       hasContainingThreadID: row.containing_thread_id !== null,
       rolePermissions: null,
     };
   } else if (role !== null) {
     const query = SQL`
       SELECT t.type, t.depth, t.parent_thread_id, t.containing_thread_id,
         r.permissions
       FROM threads t
       INNER JOIN roles r ON r.thread = t.id AND r.id = ${role}
       WHERE t.id = ${threadID}
     `;
     const [result] = await dbQuery(query);
     if (result.length === 0) {
       throw new ServerError('internal_error');
     }
     const row = result[0];
     return {
       roleColumnValue: role,
       depth: row.depth,
       threadType: assertThreadType(row.type),
       parentThreadID: row.parent_thread_id
         ? row.parent_thread_id.toString()
         : null,
       hasContainingThreadID: row.containing_thread_id !== null,
       rolePermissions: JSON.parse(row.permissions),
     };
   } else {
     const query = SQL`
       SELECT t.type, t.depth, t.parent_thread_id, t.containing_thread_id,
         r.permissions, r.id
       FROM threads t
       INNER JOIN roles r ON r.thread = t.id 
         AND r.special_role = ${specialRoles.DEFAULT_ROLE}
       WHERE t.id = ${threadID}
     `;
     const [result] = await dbQuery(query);
     if (result.length === 0) {
       throw new ServerError('internal_error');
     }
     const row = result[0];
     return {
       roleColumnValue: row.id.toString(),
       depth: row.depth,
       threadType: assertThreadType(row.type),
       parentThreadID: row.parent_thread_id
         ? row.parent_thread_id.toString()
         : null,
       hasContainingThreadID: row.containing_thread_id !== null,
       rolePermissions: JSON.parse(row.permissions),
     };
   }
 }
 
 type ChangedAncestor = {
   +threadID: string,
   +depth: number,
   +changesByUser: Map<string, AncestorChanges>,
 };
 type AncestorChanges = {
   +userIsMember: boolean,
   +permissionsForChildren: ?ThreadPermissionsBlob,
 };
 async function updateDescendantPermissions(
   initialChangedAncestor: ChangedAncestor,
 ): Promise<MembershipChangeset> {
   const membershipRows: Array<MembershipRow> = [];
   const relationshipChangeset = new RelationshipChangeset();
 
   const initialDescendants = await fetchDescendantsForUpdate([
     initialChangedAncestor,
   ]);
 
   const depthQueue = new DepthQueue(
     getDescendantDepth,
     getDescendantKey,
     mergeDescendants,
   );
   depthQueue.addInfos(initialDescendants);
 
   let descendants;
   while ((descendants = depthQueue.getNextDepth())) {
     const descendantsAsAncestors = [];
     for (const descendant of descendants) {
       const { threadID, threadType, depth, users } = descendant;
 
       const existingMembers = [...users.entries()];
       const existingMemberIDs = existingMembers
         .filter(([, { curRole }]) => curRole)
         .map(([userID]) => userID);
       if (threadID !== genesis.id) {
         relationshipChangeset.setAllRelationshipsExist(existingMemberIDs);
       }
 
       const usersForNextLayer = new Map<string, AncestorChanges>();
       for (const [userID, user] of users) {
         const {
           curRolePermissions,
           curPermissionsFromParent,
           curMemberOfContainingThread,
           nextMemberOfContainingThread,
           nextPermissionsFromParent,
           potentiallyNeedsUpdate,
         } = user;
         const existingMembership = !!user.curRole;
         const curRole = user.curRole ?? '-1';
         const curPermissions = user.curPermissions ?? null;
         const curPermissionsForChildren =
           user.curPermissionsForChildren ?? null;
 
         if (!potentiallyNeedsUpdate) {
           continue;
         }
 
         const permissionsFromParent =
           nextPermissionsFromParent === undefined
             ? curPermissionsFromParent
             : nextPermissionsFromParent;
         const memberOfContainingThread =
           nextMemberOfContainingThread === undefined
             ? curMemberOfContainingThread
             : nextMemberOfContainingThread;
         const targetRole = memberOfContainingThread ? curRole : '-1';
         const rolePermissions = memberOfContainingThread
           ? curRolePermissions
           : null;
 
         const permissions = makePermissionsBlob(
           rolePermissions,
           permissionsFromParent,
           threadID,
           threadType,
         );
         const permissionsForChildren =
           makePermissionsForChildrenBlob(permissions);
         const newRole = getRoleForPermissions(targetRole, permissions);
         const userLostMembership = Number(curRole) > 0 && Number(newRole) <= 0;
 
         if (_isEqual(permissions)(curPermissions) && curRole === newRole) {
           // This thread and all of its descendants need no updates for this
           // user, since the corresponding memberships row is unchanged by this
           // operation
           continue;
         }
 
         if (permissions) {
           membershipRows.push({
             operation: 'save',
             intent: 'none',
             userID,
             threadID,
             userNeedsFullThreadDetails: false,
             permissions,
             permissionsForChildren,
             role: newRole,
             oldRole: curRole,
           });
         } else {
           membershipRows.push({
             operation: 'delete',
             intent: 'none',
             userID,
             threadID,
             oldRole: curRole,
           });
         }
 
         if (permissions && !existingMembership && threadID !== genesis.id) {
           // If there was no membership row before, and we are creating one,
           // we'll need to make sure the new member has a relationship row with
           // each existing member. We expect that whoever called us already
           // generated memberships row for the new members, will will lead
           // saveMemberships to generate relationships rows between those new
           // users.
           relationshipChangeset.setRelationshipsNeeded(
             userID,
             existingMemberIDs,
           );
         }
 
         if (
           userLostMembership ||
           !_isEqual(permissionsForChildren)(curPermissionsForChildren)
         ) {
           usersForNextLayer.set(userID, {
             userIsMember: Number(newRole) > 0,
             permissionsForChildren,
           });
         }
       }
       if (usersForNextLayer.size > 0) {
         descendantsAsAncestors.push({
           threadID,
           depth,
           changesByUser: usersForNextLayer,
         });
       }
     }
 
     const nextDescendants = await fetchDescendantsForUpdate(
       descendantsAsAncestors,
     );
     depthQueue.addInfos(nextDescendants);
   }
   return { membershipRows, relationshipChangeset };
 }
 
-type DescendantUserInfo = $Shape<{
+type DescendantUserInfo = Partial<{
   curRole?: string,
   curRolePermissions?: ?ThreadRolePermissionsBlob,
   curPermissions?: ?ThreadPermissionsBlob,
   curPermissionsForChildren?: ?ThreadPermissionsBlob,
   curPermissionsFromParent?: ?ThreadPermissionsBlob,
   curMemberOfContainingThread?: boolean,
   nextPermissionsFromParent?: ?ThreadPermissionsBlob,
   nextMemberOfContainingThread?: boolean,
   potentiallyNeedsUpdate?: boolean,
 }>;
 type DescendantInfo = {
   +threadID: string,
   +parentThreadID: string,
   +containingThreadID: string,
   +threadType: ThreadType,
   +depth: number,
   +users: Map<string, DescendantUserInfo>,
 };
 const fetchDescendantsBatchSize = 10;
 async function fetchDescendantsForUpdate(
   ancestors: $ReadOnlyArray<ChangedAncestor>,
 ): Promise<DescendantInfo[]> {
   const threadIDs = ancestors.map(ancestor => ancestor.threadID);
 
   const rows: Array<{
     +id: number,
     +user: number,
     +type: number,
     +depth: number,
     +parent_thread_id: number,
     +containing_thread_id: number,
     +role_permissions: string,
     +permissions: string,
     +permissions_for_children: string,
     +role: number,
     +permissions_from_parent: string | null,
     +containing_role: ?number,
   }> = [];
   while (threadIDs.length > 0) {
     const batch = threadIDs.splice(0, fetchDescendantsBatchSize);
     const query = SQL`
       SELECT t.id, m.user, t.type, t.depth, t.parent_thread_id,
         t.containing_thread_id, r.permissions AS role_permissions, m.permissions,
         m.permissions_for_children, m.role,
         pm.permissions_for_children AS permissions_from_parent,
         cm.role AS containing_role
       FROM threads t
       INNER JOIN memberships m ON m.thread = t.id
       LEFT JOIN memberships pm
         ON pm.thread = t.parent_thread_id AND pm.user = m.user
       LEFT JOIN memberships cm
         ON cm.thread = t.containing_thread_id AND cm.user = m.user
       LEFT JOIN roles r ON r.id = m.role
       WHERE t.parent_thread_id IN (${batch})
         OR t.containing_thread_id IN (${batch})
     `;
     const [results] = await dbQuery(query);
     pushAll(rows, results);
   }
 
   const descendantThreadInfos: Map<string, DescendantInfo> = new Map();
   for (const row of rows) {
     const descendantThreadID = row.id.toString();
     if (!descendantThreadInfos.has(descendantThreadID)) {
       descendantThreadInfos.set(descendantThreadID, {
         threadID: descendantThreadID,
         parentThreadID: row.parent_thread_id.toString(),
         containingThreadID: row.containing_thread_id.toString(),
         threadType: assertThreadType(row.type),
         depth: row.depth,
         users: new Map(),
       });
     }
     const descendantThreadInfo = descendantThreadInfos.get(descendantThreadID);
     invariant(
       descendantThreadInfo,
       `value should exist for key ${descendantThreadID}`,
     );
     const userID = row.user.toString();
     descendantThreadInfo.users.set(userID, {
       curRole: row.role.toString(),
       curRolePermissions: JSON.parse(row.role_permissions),
       curPermissions: JSON.parse(row.permissions),
       curPermissionsForChildren: JSON.parse(row.permissions_for_children),
       curPermissionsFromParent: row.permissions_from_parent
         ? JSON.parse(row.permissions_from_parent)
         : null,
       curMemberOfContainingThread:
         !!row.containing_role && row.containing_role > 0,
     });
   }
 
   for (const ancestor of ancestors) {
     const { threadID, changesByUser } = ancestor;
     for (const [userID, changes] of changesByUser) {
       for (const descendantThreadInfo of descendantThreadInfos.values()) {
         const { users, parentThreadID, containingThreadID } =
           descendantThreadInfo;
         if (threadID !== parentThreadID && threadID !== containingThreadID) {
           continue;
         }
         let user: ?DescendantUserInfo = users.get(userID);
         if (!user) {
           user = ({}: DescendantUserInfo);
           users.set(userID, user);
         }
         if (threadID === parentThreadID) {
           user.nextPermissionsFromParent = changes.permissionsForChildren;
           user.potentiallyNeedsUpdate = true;
         }
         if (threadID === containingThreadID) {
           user.nextMemberOfContainingThread = changes.userIsMember;
           if (!user.nextMemberOfContainingThread) {
             user.potentiallyNeedsUpdate = true;
           }
         }
       }
     }
   }
 
   return [...descendantThreadInfos.values()];
 }
 
 function getDescendantDepth(descendant: DescendantInfo): number {
   return descendant.depth;
 }
 function getDescendantKey(descendant: DescendantInfo): string {
   return descendant.threadID;
 }
 function mergeDescendants(
   a: DescendantInfo,
   b: DescendantInfo,
 ): DescendantInfo {
   const { users: usersA, ...restA } = a;
   const { users: usersB, ...restB } = b;
   if (!_isEqual(restA)(restB)) {
     console.warn(
       `inconsistent descendantInfos ${JSON.stringify(restA)}, ` +
         JSON.stringify(restB),
     );
     throw new ServerError('internal_error');
   }
 
   const newUsers = new Map(usersA);
   for (const [userID, userFromB] of usersB) {
     const userFromA = newUsers.get(userID);
     if (!userFromA) {
       newUsers.set(userID, userFromB);
     } else {
       newUsers.set(userID, { ...userFromA, ...userFromB });
     }
   }
 
   return { ...a, users: newUsers };
 }
 
 type RecalculatePermissionsMemberInfo = {
   role?: ?string,
   permissions?: ?ThreadPermissionsBlob,
   permissionsForChildren?: ?ThreadPermissionsBlob,
   rolePermissions?: ?ThreadRolePermissionsBlob,
   memberOfContainingThread?: boolean,
   permissionsFromParent?: ?ThreadPermissionsBlob,
 };
 async function recalculateThreadPermissions(
   threadID: string,
 ): Promise<MembershipChangeset> {
   const threadQuery = SQL`
     SELECT type, depth, parent_thread_id, containing_thread_id
     FROM threads
     WHERE id = ${threadID}
   `;
   const membershipQuery = SQL`
     SELECT m.user, m.role, m.permissions, m.permissions_for_children,
       r.permissions AS role_permissions, cm.role AS containing_role
     FROM threads t
     INNER JOIN memberships m ON m.thread = t.id
     LEFT JOIN roles r ON r.id = m.role
     LEFT JOIN memberships cm
       ON cm.user = m.user AND cm.thread = t.containing_thread_id
     WHERE t.id = ${threadID}
   `;
   const parentMembershipQuery = SQL`
     SELECT pm.user, pm.permissions_for_children AS permissions_from_parent
     FROM threads t
     INNER JOIN memberships pm ON pm.thread = t.parent_thread_id
     WHERE t.id = ${threadID}
   `;
   const [[threadResults], [membershipResults], [parentMembershipResults]] =
     await Promise.all([
       dbQuery(threadQuery),
       dbQuery(membershipQuery),
       dbQuery(parentMembershipQuery),
     ]);
 
   if (threadResults.length !== 1) {
     throw new ServerError('internal_error');
   }
   const [threadResult] = threadResults;
   const threadType = assertThreadType(threadResult.type);
   const depth = threadResult.depth;
   const hasContainingThreadID = threadResult.containing_thread_id !== null;
   const parentThreadID = threadResult.parent_thread_id?.toString();
 
   const membershipInfo: Map<string, RecalculatePermissionsMemberInfo> =
     new Map();
   for (const row of membershipResults) {
     const userID = row.user.toString();
     membershipInfo.set(userID, {
       role: row.role.toString(),
       permissions: JSON.parse(row.permissions),
       permissionsForChildren: JSON.parse(row.permissions_for_children),
       rolePermissions: JSON.parse(row.role_permissions),
       memberOfContainingThread: !!(
         row.containing_role && row.containing_role > 0
       ),
     });
   }
   for (const row of parentMembershipResults) {
     const userID = row.user.toString();
     const permissionsFromParent = JSON.parse(row.permissions_from_parent);
     const membership = membershipInfo.get(userID);
     if (membership) {
       membership.permissionsFromParent = permissionsFromParent;
     } else {
       membershipInfo.set(userID, {
         permissionsFromParent: permissionsFromParent,
       });
     }
   }
 
   const relationshipChangeset = new RelationshipChangeset();
   const existingMemberIDs = membershipResults.map(row => row.user.toString());
   if (threadID !== genesis.id) {
     relationshipChangeset.setAllRelationshipsExist(existingMemberIDs);
   }
   const parentMemberIDs = parentMembershipResults.map(row =>
     row.user.toString(),
   );
   if (parentThreadID && parentThreadID !== genesis.id) {
     relationshipChangeset.setAllRelationshipsExist(parentMemberIDs);
   }
 
   const membershipRows: Array<MembershipRow> = [];
   const toUpdateDescendants = new Map<string, AncestorChanges>();
   for (const [userID, membership] of membershipInfo) {
     const { rolePermissions: intendedRolePermissions, permissionsFromParent } =
       membership;
     const oldPermissions = membership?.permissions ?? null;
     const oldPermissionsForChildren =
       membership?.permissionsForChildren ?? null;
 
     const existingMembership = membership.role !== undefined;
     const oldRole = membership.role ?? '-1';
     const memberOfContainingThread = hasContainingThreadID
       ? !!membership.memberOfContainingThread
       : true;
     const targetRole = memberOfContainingThread ? oldRole : '-1';
     const rolePermissions = memberOfContainingThread
       ? intendedRolePermissions
       : null;
 
     const permissions = makePermissionsBlob(
       rolePermissions,
       permissionsFromParent,
       threadID,
       threadType,
     );
     const permissionsForChildren = makePermissionsForChildrenBlob(permissions);
     const newRole = getRoleForPermissions(targetRole, permissions);
     const userLostMembership = Number(oldRole) > 0 && Number(newRole) <= 0;
 
     if (_isEqual(permissions)(oldPermissions) && oldRole === newRole) {
       // This thread and all of its descendants need no updates for this user,
       // since the corresponding memberships row is unchanged by this operation
       continue;
     }
 
     if (permissions) {
       membershipRows.push({
         operation: 'save',
         intent: 'none',
         userID,
         threadID,
         userNeedsFullThreadDetails: false,
         permissions,
         permissionsForChildren,
         role: newRole,
         oldRole,
       });
     } else {
       membershipRows.push({
         operation: 'delete',
         intent: 'none',
         userID,
         threadID,
         oldRole,
       });
     }
 
     if (permissions && !existingMembership && threadID !== genesis.id) {
       // If there was no membership row before, and we are creating one,
       // we'll need to make sure the new member has a relationship row with
       // each existing member. We handle guaranteeing that new members have
       // relationship rows with each other in saveMemberships.
       relationshipChangeset.setRelationshipsNeeded(userID, existingMemberIDs);
     }
 
     if (
       userLostMembership ||
       !_isEqual(permissionsForChildren)(oldPermissionsForChildren)
     ) {
       toUpdateDescendants.set(userID, {
         userIsMember: Number(newRole) > 0,
         permissionsForChildren,
       });
     }
   }
 
   if (toUpdateDescendants.size > 0) {
     const {
       membershipRows: descendantMembershipRows,
       relationshipChangeset: descendantRelationshipChangeset,
     } = await updateDescendantPermissions({
       threadID,
       depth,
       changesByUser: toUpdateDescendants,
     });
     pushAll(membershipRows, descendantMembershipRows);
     relationshipChangeset.addAll(descendantRelationshipChangeset);
   }
 
   return { membershipRows, relationshipChangeset };
 }
 
 const defaultSubscriptionString = JSON.stringify({
   home: false,
   pushNotifs: false,
 });
 const joinSubscriptionString = JSON.stringify({ home: true, pushNotifs: true });
 
 const membershipInsertBatchSize = 50;
 
 const visibleExtractString = `$.${threadPermissions.VISIBLE}.value`;
 
 async function saveMemberships({
   toSave,
   updateMembershipsLastMessage,
 }: {
   toSave: $ReadOnlyArray<MembershipRowToSave>,
   updateMembershipsLastMessage: boolean,
 }) {
   if (toSave.length === 0) {
     return;
   }
 
   const time = Date.now();
   const insertRows = [];
   for (const rowToSave of toSave) {
     insertRows.push([
       rowToSave.userID,
       rowToSave.threadID,
       rowToSave.role,
       time,
       rowToSave.intent === 'join'
         ? joinSubscriptionString
         : defaultSubscriptionString,
       rowToSave.permissions ? JSON.stringify(rowToSave.permissions) : null,
       rowToSave.permissionsForChildren
         ? JSON.stringify(rowToSave.permissionsForChildren)
         : null,
       rowToSave.unread ? 1 : 0,
       0,
     ]);
   }
 
   // Logic below will only update an existing membership row's `subscription`
   // column if the user is either joining or leaving the thread. That means
   // there's no way to use this function to update a user's subscription without
   // also making them join or leave the thread. The reason we do this is because
   // we need to specify a value for `subscription` here, as it's a non-null
   // column and this is an INSERT, but we don't want to require people to have
   // to know the current `subscription` when they're just using this function to
   // update the permissions of an existing membership row.
   while (insertRows.length > 0) {
     const batch = insertRows.splice(0, membershipInsertBatchSize);
     const query = SQL`
       INSERT INTO memberships (user, thread, role, creation_time, subscription,
         permissions, permissions_for_children, last_message, last_read_message)
       VALUES ${batch}
       ON DUPLICATE KEY UPDATE
         subscription = IF(
           (role <= 0 AND VALUE(role) > 0)
             OR (role > 0 AND VALUE(role) <= 0),
           VALUE(subscription),
           subscription
         ),
         role = VALUE(role),
         permissions = VALUE(permissions),
         permissions_for_children = VALUE(permissions_for_children)
     `;
     await dbQuery(query);
   }
 
   if (!updateMembershipsLastMessage) {
     return;
   }
 
   const joinRows = toSave
     .filter(row => row.intent === 'join')
     .map(row => [row.userID, row.threadID, row.unread]);
 
   if (joinRows.length === 0) {
     return;
   }
 
   const joinedUserThreadPairs = joinRows.map(([user, thread]) => [
     user,
     thread,
   ]);
 
   const unreadUserThreadPairs = joinRows
     .filter(([, , unread]) => !!unread)
     .map(([user, thread]) => [user, thread]);
 
   let lastReadMessageExpression;
   if (unreadUserThreadPairs.length === 0) {
     lastReadMessageExpression = SQL`
       GREATEST(COALESCE(all_users_query.message, 0), 
         COALESCE(last_subthread_message_for_user_query.message, 0))
     `;
   } else {
     lastReadMessageExpression = SQL`
       (CASE 
         WHEN ((mm.user, mm.thread) in (${unreadUserThreadPairs})) THEN 0
         ELSE GREATEST(COALESCE(all_users_query.message, 0), 
           COALESCE(last_subthread_message_for_user_query.message, 0))
       END)
     `;
   }
 
   // We join two subqueries with the memberships table:
   // - the first subquery calculates the oldest non-CREATE_SUB_THREAD
   //   message, which is the same for all users
   // - the second subquery calculates the oldest CREATE_SUB_THREAD messages,
   //   which can be different for each user because of visibility permissions
   // Then we set the `last_message` column to the greater value of the two.
   // For `last_read_message` we do the same but only if the user should have
   // the "unread" status set for this thread.
   const query = SQL`
     UPDATE memberships mm
     LEFT JOIN (
       SELECT thread, MAX(id) AS message
       FROM messages
       WHERE type != ${messageTypes.CREATE_SUB_THREAD}
       GROUP BY thread 
     ) all_users_query ON mm.thread = all_users_query.thread
     LEFT JOIN (
       SELECT m.thread, stm.user, MAX(m.id) AS message 
       FROM messages m
       LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
         AND stm.thread = m.content
       WHERE JSON_EXTRACT(stm.permissions, ${visibleExtractString}) IS TRUE
       GROUP BY m.thread, stm.user
     ) last_subthread_message_for_user_query 
     ON mm.thread = last_subthread_message_for_user_query.thread 
       AND mm.user = last_subthread_message_for_user_query.user
     SET
       mm.last_message = GREATEST(COALESCE(all_users_query.message, 0), 
         COALESCE(last_subthread_message_for_user_query.message, 0)),
       mm.last_read_message =
   `;
   query.append(lastReadMessageExpression);
   query.append(SQL`WHERE (mm.user, mm.thread) IN (${joinedUserThreadPairs});`);
 
   await dbQuery(query);
 }
 
 async function deleteMemberships(
   toDelete: $ReadOnlyArray<MembershipRowToDelete>,
 ) {
   if (toDelete.length === 0) {
     return;
   }
 
   const time = Date.now();
   const insertRows = toDelete.map(rowToDelete => [
     rowToDelete.userID,
     rowToDelete.threadID,
     -1,
     time,
     defaultSubscriptionString,
     null,
     null,
     0,
     0,
   ]);
 
   while (insertRows.length > 0) {
     const batch = insertRows.splice(0, membershipInsertBatchSize);
     const query = SQL`
       INSERT INTO memberships (user, thread, role, creation_time, subscription,
         permissions, permissions_for_children, last_message, last_read_message)
       VALUES ${batch}
       ON DUPLICATE KEY UPDATE
         role = -1,
         permissions = NULL,
         permissions_for_children = NULL,
         subscription = ${defaultSubscriptionString},
         last_message = 0,
         last_read_message = 0
     `;
     await dbQuery(query);
   }
 }
 
 const emptyCommitMembershipChangesetConfig = Object.freeze({});
 
 // Specify non-empty changedThreadIDs to force updates to be generated for those
 // threads, presumably for reasons not covered in the changeset. calendarQuery
 // only needs to be specified if a JOIN_THREAD update will be generated for the
 // viewer, in which case it's necessary for knowing the set of entries to fetch.
 type ChangesetCommitResult = {
   ...CreateUpdatesResult,
 };
 async function commitMembershipChangeset(
   viewer: Viewer,
   changeset: MembershipChangeset,
   {
     changedThreadIDs = new Set(),
     calendarQuery,
     updatesForCurrentSession = 'return',
     updateMembershipsLastMessage = false,
   }: {
     +changedThreadIDs?: Set<string>,
     +calendarQuery?: ?CalendarQuery,
     +updatesForCurrentSession?: UpdatesForCurrentSession,
     +updateMembershipsLastMessage?: boolean,
   } = emptyCommitMembershipChangesetConfig,
 ): Promise<ChangesetCommitResult> {
   if (!viewer.loggedIn) {
     throw new ServerError('not_logged_in');
   }
   const { membershipRows, relationshipChangeset } = changeset;
 
   const membershipRowMap = new Map<string, MembershipRow>();
   for (const row of membershipRows) {
     const { userID, threadID } = row;
     changedThreadIDs.add(threadID);
 
     const pairString = `${userID}|${threadID}`;
     const existing = membershipRowMap.get(pairString);
     invariant(
       !existing || existing.intent === 'none' || row.intent === 'none',
       `multiple intents provided for ${pairString}`,
     );
     if (!existing || existing.intent === 'none') {
       membershipRowMap.set(pairString, row);
     }
   }
 
   const toSave = [],
     toDelete = [],
     toRescindPushNotifs = [];
   for (const row of membershipRowMap.values()) {
     if (
       row.operation === 'delete' ||
       (row.operation === 'save' && Number(row.role) <= 0)
     ) {
       const { userID, threadID } = row;
       toRescindPushNotifs.push({ userID, threadID });
     }
     if (row.operation === 'delete') {
       toDelete.push(row);
     } else {
       toSave.push(row);
     }
   }
 
   const threadsToSavedUsers = new Map<string, Array<string>>();
   for (const row of membershipRowMap.values()) {
     const { userID, threadID } = row;
     let savedUsers = threadsToSavedUsers.get(threadID);
     if (!savedUsers) {
       savedUsers = [];
       threadsToSavedUsers.set(threadID, savedUsers);
     }
     savedUsers.push(userID);
   }
   for (const [threadID, savedUsers] of threadsToSavedUsers) {
     if (threadID !== genesis.id) {
       relationshipChangeset.setAllRelationshipsNeeded(savedUsers);
     }
   }
   const relationshipRows = relationshipChangeset.getRows();
 
   const [updateDatas] = await Promise.all([
     updateChangedUndirectedRelationships(relationshipRows),
     saveMemberships({ toSave, updateMembershipsLastMessage }),
     deleteMemberships(toDelete),
     rescindPushNotifsForMemberDeletion(toRescindPushNotifs),
   ]);
 
   const serverThreadInfoFetchResult = await fetchServerThreadInfos({
     threadIDs: changedThreadIDs,
   });
   const { threadInfos: serverThreadInfos } = serverThreadInfoFetchResult;
 
   const time = Date.now();
   for (const changedThreadID of changedThreadIDs) {
     const serverThreadInfo = serverThreadInfos[changedThreadID];
     for (const memberInfo of serverThreadInfo.members) {
       const pairString = `${memberInfo.id}|${serverThreadInfo.id}`;
       const membershipRow = membershipRowMap.get(pairString);
       if (membershipRow) {
         continue;
       }
       updateDatas.push({
         type: updateTypes.UPDATE_THREAD,
         userID: memberInfo.id,
         time,
         threadID: changedThreadID,
       });
     }
   }
 
   for (const row of membershipRowMap.values()) {
     const { userID, threadID } = row;
     if (row.operation === 'delete' || row.role === '-1') {
       if (row.oldRole !== '-1') {
         updateDatas.push({
           type: updateTypes.DELETE_THREAD,
           userID,
           time,
           threadID,
         });
       }
     } else if (row.userNeedsFullThreadDetails) {
       updateDatas.push({
         type: updateTypes.JOIN_THREAD,
         userID,
         time,
         threadID,
       });
     } else {
       updateDatas.push({
         type: updateTypes.UPDATE_THREAD,
         userID,
         time,
         threadID,
       });
     }
   }
 
   const threadInfoFetchResult = rawThreadInfosFromServerThreadInfos(
     viewer,
     serverThreadInfoFetchResult,
   );
   const { viewerUpdates, userInfos } = await createUpdates(updateDatas, {
     viewer,
     calendarQuery,
     ...threadInfoFetchResult,
     updatesForCurrentSession,
   });
 
   return {
     userInfos,
     viewerUpdates,
   };
 }
 
 const emptyGetChangesetCommitResultConfig = Object.freeze({});
 
 // When the user tries to create a new thread, it's possible for the client to
 // fail the creation even if a row gets added to the threads table. This may
 // occur due to a timeout (on either the client or server side), or due to some
 // error in the server code following the INSERT operation. Handling the error
 // scenario is more challenging since it would require detecting which set of
 // operations failed so we could retry them. As a result, this code is geared at
 // only handling the timeout scenario.
 async function getChangesetCommitResultForExistingThread(
   viewer: Viewer,
   threadID: string,
   otherUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   {
     calendarQuery,
     updatesForCurrentSession = 'return',
   }: {
     +calendarQuery?: ?CalendarQuery,
     +updatesForCurrentSession?: UpdatesForCurrentSession,
   } = emptyGetChangesetCommitResultConfig,
 ): Promise<CreateUpdatesResult> {
   for (const update of otherUpdates) {
     if (
       update.type === updateTypes.JOIN_THREAD &&
       update.threadInfo.id === threadID
     ) {
       // If the JOIN_THREAD is already there we can expect
       // the appropriate UPDATE_USERs to be covered as well
       return { viewerUpdates: otherUpdates, userInfos: {} };
     }
   }
 
   const time = Date.now();
   const updateDatas: Array<UpdateData> = [
     {
       type: updateTypes.JOIN_THREAD,
       userID: viewer.userID,
       time,
       threadID,
       targetSession: viewer.session,
     },
   ];
 
   // To figure out what UserInfos might be missing, we consider the worst case:
   // the same client previously attempted to create a thread with a non-friend
   // they found via search results, but the request timed out. In this scenario
   // the viewer might never have received the UPDATE_USER that would add that
   // UserInfo to their UserStore, but the server assumed the client had gotten
   // it because createUpdates was called with UpdatesForCurrentSession=return.
   // For completeness here we query for the full list of memberships rows in the
   // thread. We can't use fetchServerThreadInfos because it skips role=-1 rows
   const membershipsQuery = SQL`
     SELECT user
     FROM memberships
     WHERE thread = ${threadID} AND user != ${viewer.userID}
   `;
   const [results] = await dbQuery(membershipsQuery);
   for (const row of results) {
     updateDatas.push({
       type: updateTypes.UPDATE_USER,
       userID: viewer.userID,
       time,
       updatedUserID: row.user.toString(),
       targetSession: viewer.session,
     });
   }
 
   const { viewerUpdates, userInfos } = await createUpdates(updateDatas, {
     viewer,
     calendarQuery,
     updatesForCurrentSession,
   });
   return { viewerUpdates: [...otherUpdates, ...viewerUpdates], userInfos };
 }
 
 const rescindPushNotifsBatchSize = 3;
 async function rescindPushNotifsForMemberDeletion(
   toRescindPushNotifs: $ReadOnlyArray<{ +userID: string, +threadID: string }>,
 ): Promise<void> {
   const queue = [...toRescindPushNotifs];
   while (queue.length > 0) {
     const batch = queue.splice(0, rescindPushNotifsBatchSize);
     await Promise.all(
       batch.map(({ userID, threadID }) =>
         rescindPushNotifs(
           SQL`n.thread = ${threadID} AND n.user = ${userID}`,
           SQL`IF(m.thread = ${threadID}, NULL, m.thread)`,
         ),
       ),
     );
   }
 }
 
 // Deprecated - use updateRolesAndPermissionsForAllThreads instead
 async function DEPRECATED_recalculateAllThreadPermissions() {
   const getAllThreads = SQL`SELECT id FROM threads`;
   const [result] = await dbQuery(getAllThreads);
 
   // We handle each thread one-by-one to avoid a situation where a permission
   // calculation for a child thread, done during a call to
   // recalculateThreadPermissions for the parent thread, can be incorrectly
   // overriden by a call to recalculateThreadPermissions for the child thread.
   // If the changeset resulting from the parent call isn't committed before the
   // calculation is done for the child, the calculation done for the child can
   // be incorrect.
   const viewer = createScriptViewer(bots.commbot.userID);
   for (const row of result) {
     const threadID = row.id.toString();
     const changeset = await recalculateThreadPermissions(threadID);
     await commitMembershipChangeset(viewer, changeset);
   }
 }
 
 async function updateRolesAndPermissionsForAllThreads() {
   const batchSize = 10;
   const fetchThreads = SQL`SELECT id, type, depth FROM threads`;
   const [result] = await dbQuery(fetchThreads);
   const allThreads = result.map(row => {
     return {
       id: row.id.toString(),
       type: assertThreadType(row.type),
       depth: row.depth,
     };
   });
 
   const viewer = createScriptViewer(bots.commbot.userID);
 
   const maxDepth = Math.max(...allThreads.map(row => row.depth));
 
   for (let depth = 0; depth <= maxDepth; depth++) {
     const threads = allThreads.filter(row => row.depth === depth);
     console.log(`recalculating permissions for threads with depth ${depth}`);
     while (threads.length > 0) {
       const batch = threads.splice(0, batchSize);
       const membershipRows: Array<MembershipRow> = [];
       const relationshipChangeset = new RelationshipChangeset();
       await Promise.all(
         batch.map(async thread => {
           console.log(`updating roles for ${thread.id}`);
           await updateRoles(viewer, thread.id, thread.type);
           console.log(`recalculating permissions for ${thread.id}`);
           const {
             membershipRows: threadMembershipRows,
             relationshipChangeset: threadRelationshipChangeset,
           } = await recalculateThreadPermissions(thread.id);
           membershipRows.push(...threadMembershipRows);
           relationshipChangeset.addAll(threadRelationshipChangeset);
         }),
       );
       console.log(`committing batch ${JSON.stringify(batch)}`);
       await commitMembershipChangeset(viewer, {
         membershipRows,
         relationshipChangeset,
       });
     }
   }
 }
 
 export {
   changeRole,
   recalculateThreadPermissions,
   getChangesetCommitResultForExistingThread,
   saveMemberships,
   commitMembershipChangeset,
   DEPRECATED_recalculateAllThreadPermissions,
   updateRolesAndPermissionsForAllThreads,
 };
diff --git a/lib/shared/version-utils.js b/lib/shared/version-utils.js
index e3fc8978e..c466c9233 100644
--- a/lib/shared/version-utils.js
+++ b/lib/shared/version-utils.js
@@ -1,66 +1,66 @@
 // @flow
 
 import { type PlatformDetails, isWebPlatform } from '../types/device-types.js';
 
 /**
  * A code version used for features that are waiting to be released
  * and we're not sure in which version they will be available.
  */
 const FUTURE_CODE_VERSION = 1000000;
 
 /**
  * A code version used for features that are waiting to be included
  * in the very next release
  */
 const NEXT_CODE_VERSION = 1000000;
 
 function hasMinCodeVersion(
   platformDetails: ?PlatformDetails,
-  minCodeVersion: $Shape<{ +native: number, +web: number }>,
+  minCodeVersion: Partial<{ +native: number, +web: number }>,
 ): boolean {
   if (!platformDetails) {
     return true;
   }
   const { codeVersion } = platformDetails;
   const minVersion = isWebPlatform(platformDetails.platform)
     ? minCodeVersion.web
     : minCodeVersion.native;
 
   if (!minVersion) {
     return true;
   }
   if (!codeVersion || codeVersion < minVersion) {
     return false;
   }
 
   return true;
 }
 
 function hasMinStateVersion(
   platformDetails: ?PlatformDetails,
-  minStateVersion: $Shape<{ +native: number, +web: number }>,
+  minStateVersion: Partial<{ +native: number, +web: number }>,
 ): boolean {
   if (!platformDetails) {
     return true;
   }
   const { stateVersion } = platformDetails;
   const minVersion = isWebPlatform(platformDetails.platform)
     ? minStateVersion.web
     : minStateVersion.native;
 
   if (!minVersion) {
     return true;
   }
   if (!stateVersion || stateVersion < minVersion) {
     return false;
   }
 
   return true;
 }
 
 export {
   FUTURE_CODE_VERSION,
   NEXT_CODE_VERSION,
   hasMinCodeVersion,
   hasMinStateVersion,
 };
diff --git a/lib/types/relationship-types.js b/lib/types/relationship-types.js
index cc0275701..5d757c45a 100644
--- a/lib/types/relationship-types.js
+++ b/lib/types/relationship-types.js
@@ -1,82 +1,82 @@
 // @flow
 
 import type { TRefinement } from 'tcomb';
 
 import type { AccountUserInfo } from './user-types.js';
 import { values } from '../utils/objects.js';
 import { tNumEnum } from '../utils/validation-utils.js';
 
 export const undirectedStatus = Object.freeze({
   KNOW_OF: 0,
   FRIEND: 2,
 });
 export type UndirectedStatus = $Values<typeof undirectedStatus>;
 
 export const directedStatus = Object.freeze({
   PENDING_FRIEND: 1,
   BLOCKED: 3,
 });
 export type DirectedStatus = $Values<typeof directedStatus>;
 
 export const userRelationshipStatus = Object.freeze({
   REQUEST_SENT: 1,
   REQUEST_RECEIVED: 2,
   FRIEND: 3,
   BLOCKED_BY_VIEWER: 4,
   BLOCKED_VIEWER: 5,
   BOTH_BLOCKED: 6,
 });
 export type UserRelationshipStatus = $Values<typeof userRelationshipStatus>;
 export const userRelationshipStatusValidator: TRefinement<number> = tNumEnum(
   values(userRelationshipStatus),
 );
 
 export const relationshipActions = Object.freeze({
   FRIEND: 'friend',
   UNFRIEND: 'unfriend',
   BLOCK: 'block',
   UNBLOCK: 'unblock',
 });
 export type RelationshipAction = $Values<typeof relationshipActions>;
 export const relationshipActionsList: $ReadOnlyArray<RelationshipAction> =
   values(relationshipActions);
 
 export const relationshipButtons = Object.freeze({
   FRIEND: 'friend',
   UNFRIEND: 'unfriend',
   BLOCK: 'block',
   UNBLOCK: 'unblock',
   ACCEPT: 'accept',
   WITHDRAW: 'withdraw',
   REJECT: 'reject',
 });
 export type RelationshipButton = $Values<typeof relationshipButtons>;
 
 export type RelationshipRequest = {
   action: RelationshipAction,
   userIDs: $ReadOnlyArray<string>,
 };
 
 type SharedRelationshipRow = {
   user1: string,
   user2: string,
 };
 export type DirectedRelationshipRow = {
   ...SharedRelationshipRow,
   status: DirectedStatus,
 };
 export type UndirectedRelationshipRow = {
   ...SharedRelationshipRow,
   status: UndirectedStatus,
 };
 
-export type RelationshipErrors = $Shape<{
+export type RelationshipErrors = Partial<{
   invalid_user: string[],
   already_friends: string[],
   user_blocked: string[],
 }>;
 
 export type UserRelationships = {
   +friends: $ReadOnlyArray<AccountUserInfo>,
   +blocked: $ReadOnlyArray<AccountUserInfo>,
 };
diff --git a/lib/utils/action-utils.js b/lib/utils/action-utils.js
index 882e5e076..6c70e07c5 100644
--- a/lib/utils/action-utils.js
+++ b/lib/utils/action-utils.js
@@ -1,608 +1,608 @@
 // @flow
 
 import invariant from 'invariant';
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import callServerEndpoint from './call-server-endpoint.js';
 import type {
   CallServerEndpoint,
   CallServerEndpointOptions,
 } from './call-server-endpoint.js';
 import { getConfig } from './config.js';
 import { promiseAll } from './promises.js';
 import { useSelector, useDispatch } from './redux-utils.js';
 import { ashoatKeyserverID } from './validation-utils.js';
 import { serverCallStateSelector } from '../selectors/server-calls.js';
 import {
   logInActionSources,
   type LogInActionSource,
   type LogInStartingPayload,
   type LogInResult,
 } from '../types/account-types.js';
 import type { PlatformDetails } from '../types/device-types.js';
 import type { Endpoint, SocketAPIHandler } from '../types/endpoints.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import type { NotDeletedFilter } from '../types/filter-types.js';
 import type { LoadingOptions, LoadingInfo } from '../types/loading-types.js';
 import type {
   ActionPayload,
   Dispatch,
   PromisedAction,
   BaseAction,
 } from '../types/redux-types.js';
 import type {
   ClientSessionChange,
   PreRequestUserState,
 } from '../types/session-types.js';
 import type { ConnectionStatus } from '../types/socket-types.js';
 import type { CurrentUserInfo } from '../types/user-types.js';
 
 function extractKeyserverIDFromID(id: string): string {
   return id.split('|')[0];
 }
 
 let nextPromiseIndex = 0;
 
 export type ActionTypes<
   STARTED_ACTION_TYPE: string,
   SUCCESS_ACTION_TYPE: string,
   FAILED_ACTION_TYPE: string,
 > = {
   started: STARTED_ACTION_TYPE,
   success: SUCCESS_ACTION_TYPE,
   failed: FAILED_ACTION_TYPE,
 };
 
 function wrapActionPromise<
   STARTED_ACTION_TYPE: string,
   STARTED_PAYLOAD: ActionPayload,
   SUCCESS_ACTION_TYPE: string,
   SUCCESS_PAYLOAD: ActionPayload,
   FAILED_ACTION_TYPE: string,
 >(
   actionTypes: ActionTypes<
     STARTED_ACTION_TYPE,
     SUCCESS_ACTION_TYPE,
     FAILED_ACTION_TYPE,
   >,
   promise: Promise<SUCCESS_PAYLOAD>,
   loadingOptions: ?LoadingOptions,
   startingPayload: ?STARTED_PAYLOAD,
 ): PromisedAction {
   const loadingInfo: LoadingInfo = {
     fetchIndex: nextPromiseIndex++,
     trackMultipleRequests: !!loadingOptions?.trackMultipleRequests,
     customKeyName: loadingOptions?.customKeyName || null,
   };
   return async (dispatch: Dispatch): Promise<void> => {
     const startAction = startingPayload
       ? {
           type: (actionTypes.started: STARTED_ACTION_TYPE),
           loadingInfo,
           payload: (startingPayload: STARTED_PAYLOAD),
         }
       : {
           type: (actionTypes.started: STARTED_ACTION_TYPE),
           loadingInfo,
         };
     dispatch(startAction);
     try {
       const result = await promise;
       dispatch({
         type: (actionTypes.success: SUCCESS_ACTION_TYPE),
         payload: (result: SUCCESS_PAYLOAD),
         loadingInfo,
       });
     } catch (e) {
       console.log(e);
       dispatch({
         type: (actionTypes.failed: FAILED_ACTION_TYPE),
         error: true,
         payload: (e: Error),
         loadingInfo,
       });
     }
   };
 }
 
 export type DispatchActionPromise = <
   STARTED: BaseAction,
   SUCCESS: BaseAction,
   FAILED: BaseAction,
 >(
   actionTypes: ActionTypes<
     $PropertyType<STARTED, 'type'>,
     $PropertyType<SUCCESS, 'type'>,
     $PropertyType<FAILED, 'type'>,
   >,
   promise: Promise<$PropertyType<SUCCESS, 'payload'>>,
   loadingOptions?: LoadingOptions,
   startingPayload?: $PropertyType<STARTED, 'payload'>,
 ) => Promise<void>;
 
 function useDispatchActionPromise(): DispatchActionPromise {
   const dispatch = useDispatch();
   return React.useMemo(() => createDispatchActionPromise(dispatch), [dispatch]);
 }
 
 function createDispatchActionPromise(dispatch: Dispatch) {
   const dispatchActionPromise = function <
     STARTED: BaseAction,
     SUCCESS: BaseAction,
     FAILED: BaseAction,
   >(
     actionTypes: ActionTypes<
       $PropertyType<STARTED, 'type'>,
       $PropertyType<SUCCESS, 'type'>,
       $PropertyType<FAILED, 'type'>,
     >,
     promise: Promise<$PropertyType<SUCCESS, 'payload'>>,
     loadingOptions?: LoadingOptions,
     startingPayload?: $PropertyType<STARTED, 'payload'>,
   ): Promise<void> {
     return dispatch(
       wrapActionPromise(actionTypes, promise, loadingOptions, startingPayload),
     );
   };
   return dispatchActionPromise;
 }
 
 export type DispatchFunctions = {
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
 };
 
 let currentlyWaitingForNewCookie = false;
 let serverEndpointCallsWaitingForNewCookie: ((
   callServerEndpoint: ?CallServerEndpoint,
 ) => void)[] = [];
 
 export type DispatchRecoveryAttempt = (
   actionTypes: ActionTypes<'LOG_IN_STARTED', 'LOG_IN_SUCCESS', 'LOG_IN_FAILED'>,
   promise: Promise<LogInResult>,
   startingPayload: LogInStartingPayload,
 ) => Promise<boolean>;
 
 const setNewSessionActionType = 'SET_NEW_SESSION';
 function setNewSession(
   dispatch: Dispatch,
   sessionChange: ClientSessionChange,
   preRequestUserState: ?PreRequestUserState,
   error: ?string,
   logInActionSource: ?LogInActionSource,
   keyserverID: string,
 ) {
   dispatch({
     type: setNewSessionActionType,
     payload: {
       sessionChange,
       preRequestUserState,
       error,
       logInActionSource,
       keyserverID,
     },
   });
 }
 
 // This function calls resolveInvalidatedCookie, which dispatchs a log in action
 // using the native credentials. Note that we never actually specify a sessionID
 // here, on the assumption that only native clients will call this. (Native
 // clients don't specify a sessionID, indicating to the server that it should
 // use the cookieID as the sessionID.)
 async function fetchNewCookieFromNativeCredentials(
   dispatch: Dispatch,
   cookie: ?string,
   urlPrefix: string,
   logInActionSource: LogInActionSource,
   keyserverID: string,
   getInitialNotificationsEncryptedMessage?: () => Promise<string>,
 ): Promise<?ClientSessionChange> {
   const resolveInvalidatedCookie = getConfig().resolveInvalidatedCookie;
   if (!resolveInvalidatedCookie) {
     return null;
   }
   let newSessionChange = null;
   let callServerEndpointCallback = null;
   const boundCallServerEndpoint = async (
     endpoint: Endpoint,
     data: { +[key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ) => {
     const innerBoundSetNewSession = (
       sessionChange: ClientSessionChange,
       error: ?string,
     ) => {
       newSessionChange = sessionChange;
       setNewSession(
         dispatch,
         sessionChange,
         null,
         error,
         logInActionSource,
         keyserverID,
       );
     };
     try {
       const result = await callServerEndpoint(
         cookie,
         innerBoundSetNewSession,
         () => new Promise(r => r(null)),
         () => new Promise(r => r(null)),
         urlPrefix,
         null,
         'disconnected',
         null,
         null,
         endpoint,
         data,
         dispatch,
         options,
         false,
         keyserverID,
       );
       if (callServerEndpointCallback) {
         callServerEndpointCallback(!!newSessionChange);
       }
       return result;
     } catch (e) {
       if (callServerEndpointCallback) {
         callServerEndpointCallback(!!newSessionChange);
       }
       throw e;
     }
   };
 
   const boundCallKeyserverEndpoint = (
     endpoint: Endpoint,
     requests: { +[keyserverID: string]: ?{ +[string]: mixed } },
     options?: ?CallServerEndpointOptions,
   ) => {
     if (requests[keyserverID]) {
       const promises = {
         [keyserverID]: boundCallServerEndpoint(
           endpoint,
           requests[keyserverID],
           options,
         ),
       };
       return promiseAll(promises);
     }
     return Promise.resolve({});
   };
 
   const dispatchRecoveryAttempt = (
     actionTypes: ActionTypes<
       'LOG_IN_STARTED',
       'LOG_IN_SUCCESS',
       'LOG_IN_FAILED',
     >,
     promise: Promise<LogInResult>,
     inputStartingPayload: LogInStartingPayload,
   ) => {
     const startingPayload = { ...inputStartingPayload, logInActionSource };
     dispatch(wrapActionPromise(actionTypes, promise, null, startingPayload));
     return new Promise<boolean>(r => (callServerEndpointCallback = r));
   };
   await resolveInvalidatedCookie(
     boundCallServerEndpoint,
     boundCallKeyserverEndpoint,
     dispatchRecoveryAttempt,
     logInActionSource,
     keyserverID,
     getInitialNotificationsEncryptedMessage,
   );
   return newSessionChange;
 }
 
 // Third param is optional and gets called with newCookie if we get a new cookie
 // Necessary to propagate cookie in cookieInvalidationRecovery below
 function bindCookieAndUtilsIntoCallServerEndpoint(
   params: BindServerCallsParams,
 ): CallServerEndpoint {
   const {
     dispatch,
     cookie,
     urlPrefix,
     sessionID,
     currentUserInfo,
     connectionStatus,
     lastCommunicatedPlatformDetails,
     keyserverID,
   } = params;
   const loggedIn = !!(currentUserInfo && !currentUserInfo.anonymous && true);
   const boundSetNewSession = (
     sessionChange: ClientSessionChange,
     error: ?string,
   ) =>
     setNewSession(
       dispatch,
       sessionChange,
       {
         currentUserInfo,
         cookiesAndSessions: { [keyserverID]: { cookie, sessionID } },
       },
       error,
       undefined,
       keyserverID,
     );
   // This function gets called before callServerEndpoint sends a request,
   // to make sure that we're not in the middle of trying to recover
   // an invalidated cookie
   const waitIfCookieInvalidated = () => {
     if (!getConfig().resolveInvalidatedCookie) {
       // If there is no resolveInvalidatedCookie function, just let the caller
       // callServerEndpoint instance continue
       return Promise.resolve(null);
     }
     if (!currentlyWaitingForNewCookie) {
       // Our cookie seems to be valid
       return Promise.resolve(null);
     }
     // Wait to run until we get our new cookie
     return new Promise<?CallServerEndpoint>(r =>
       serverEndpointCallsWaitingForNewCookie.push(r),
     );
   };
   // This function is a helper for the next function defined below
   const attemptToResolveInvalidation = async (
     sessionChange: ClientSessionChange,
   ) => {
     const newAnonymousCookie = sessionChange.cookie;
     const newSessionChange = await fetchNewCookieFromNativeCredentials(
       dispatch,
       newAnonymousCookie,
       urlPrefix,
       logInActionSources.cookieInvalidationResolutionAttempt,
       keyserverID,
     );
 
     currentlyWaitingForNewCookie = false;
     const currentWaitingCalls = serverEndpointCallsWaitingForNewCookie;
     serverEndpointCallsWaitingForNewCookie = [];
 
     const newCallServerEndpoint = newSessionChange
       ? bindCookieAndUtilsIntoCallServerEndpoint({
           ...params,
           cookie: newSessionChange.cookie,
           sessionID: newSessionChange.sessionID,
           currentUserInfo: newSessionChange.currentUserInfo,
         })
       : null;
     for (const func of currentWaitingCalls) {
       func(newCallServerEndpoint);
     }
     return newCallServerEndpoint;
   };
   // If this function is called, callServerEndpoint got a response invalidating
   // its cookie, and is wondering if it should just like... give up?
   // Or if there's a chance at redemption
   const cookieInvalidationRecovery = (sessionChange: ClientSessionChange) => {
     if (!getConfig().resolveInvalidatedCookie) {
       // If there is no resolveInvalidatedCookie function, just let the caller
       // callServerEndpoint instance continue
       return Promise.resolve(null);
     }
     if (!loggedIn) {
       // We don't want to attempt any use native credentials of a logged out
       // user to log-in after a cookieInvalidation while logged out
       return Promise.resolve(null);
     }
     if (currentlyWaitingForNewCookie) {
       return new Promise<?CallServerEndpoint>(r =>
         serverEndpointCallsWaitingForNewCookie.push(r),
       );
     }
     currentlyWaitingForNewCookie = true;
     return attemptToResolveInvalidation(sessionChange);
   };
 
   return (
     endpoint: Endpoint,
     data: Object,
     options?: ?CallServerEndpointOptions,
   ) =>
     callServerEndpoint(
       cookie,
       boundSetNewSession,
       waitIfCookieInvalidated,
       cookieInvalidationRecovery,
       urlPrefix,
       sessionID,
       connectionStatus,
       lastCommunicatedPlatformDetails,
       socketAPIHandler,
       endpoint,
       data,
       dispatch,
       options,
       loggedIn,
       keyserverID,
     );
 }
 
 export type ActionFunc<F> = (callServerEndpoint: CallServerEndpoint) => F;
 export type BindServerCall = <F>(serverCall: ActionFunc<F>) => F;
 export type BindServerCallsParams = {
   +dispatch: Dispatch,
   +cookie: ?string,
   +urlPrefix: string,
   +sessionID: ?string,
   +currentUserInfo: ?CurrentUserInfo,
   +connectionStatus: ConnectionStatus,
   +lastCommunicatedPlatformDetails: ?PlatformDetails,
   +keyserverID: string,
 };
 
 // All server calls needs to include some information from the Redux state
 // (namely, the cookie). This information is used deep in the server call,
 // at the point where callServerEndpoint is called. We don't want to bother
 // propagating the cookie (and any future config info that callServerEndpoint
 // needs) through to the server calls so they can pass it to callServerEndpoint.
 // Instead, we "curry" the cookie onto callServerEndpoint within react-redux's
 // connect's mapStateToProps function, and then pass that "bound"
 // callServerEndpoint that no longer needs the cookie as a parameter on to
 // the server call.
 const baseCreateBoundServerCallsSelector = <F>(
   actionFunc: ActionFunc<F>,
 ): (BindServerCallsParams => F) =>
   createSelector(
     (state: BindServerCallsParams) => state.dispatch,
     (state: BindServerCallsParams) => state.cookie,
     (state: BindServerCallsParams) => state.urlPrefix,
     (state: BindServerCallsParams) => state.sessionID,
     (state: BindServerCallsParams) => state.currentUserInfo,
     (state: BindServerCallsParams) => state.connectionStatus,
     (state: BindServerCallsParams) => state.lastCommunicatedPlatformDetails,
     (state: BindServerCallsParams) => state.keyserverID,
     (
       dispatch: Dispatch,
       cookie: ?string,
       urlPrefix: string,
       sessionID: ?string,
       currentUserInfo: ?CurrentUserInfo,
       connectionStatus: ConnectionStatus,
       lastCommunicatedPlatformDetails: ?PlatformDetails,
       keyserverID: string,
     ) => {
       const boundCallServerEndpoint = bindCookieAndUtilsIntoCallServerEndpoint({
         dispatch,
         cookie,
         urlPrefix,
         sessionID,
         currentUserInfo,
         connectionStatus,
         lastCommunicatedPlatformDetails,
         keyserverID,
       });
       return actionFunc(boundCallServerEndpoint);
     },
   );
 
 type CreateBoundServerCallsSelectorType = <F>(
   ActionFunc<F>,
 ) => BindServerCallsParams => F;
 const createBoundServerCallsSelector: CreateBoundServerCallsSelectorType =
   (_memoize(baseCreateBoundServerCallsSelector): any);
 
 function useServerCall<F>(
   serverCall: ActionFunc<F>,
-  paramOverride?: ?$Shape<BindServerCallsParams>,
+  paramOverride?: ?Partial<BindServerCallsParams>,
 ): F {
   const dispatch = useDispatch();
   const serverCallState = useSelector(
     serverCallStateSelector(ashoatKeyserverID),
   );
   return React.useMemo(() => {
     const { urlPrefix, connectionStatus } = serverCallState;
     invariant(
       !!urlPrefix && !!connectionStatus,
       'keyserver missing from keyserverStore',
     );
 
     return createBoundServerCallsSelector(serverCall)({
       ...serverCallState,
       urlPrefix,
       connectionStatus,
       dispatch,
       ...paramOverride,
       keyserverID: ashoatKeyserverID,
     });
   }, [serverCall, serverCallState, dispatch, paramOverride]);
 }
 
 let socketAPIHandler: ?SocketAPIHandler = null;
 function registerActiveSocket(passedSocketAPIHandler: ?SocketAPIHandler) {
   socketAPIHandler = passedSocketAPIHandler;
 }
 
 function sortThreadIDsPerKeyserver(threadIDs: $ReadOnlyArray<string>): {
   +[keyserverID: string]: $ReadOnlyArray<string>,
 } {
   const results: { [string]: string[] } = {};
   for (const threadID of threadIDs) {
     const keyserverID = extractKeyserverIDFromID(threadID);
     invariant(keyserverID, 'keyserver data missing from thread id');
     if (results[keyserverID] === undefined) {
       results[keyserverID] = [];
     }
     results[keyserverID].push(threadID);
   }
   return results;
 }
 
 type CalendarThreadFilterWithWritableThreadIDs = {
   +type: 'threads',
   +threadIDs: string[],
 };
 type CalendarFilterWithWritableThreadIDs =
   | NotDeletedFilter
   | CalendarThreadFilterWithWritableThreadIDs;
 type CalendarQueryWithWritableFilters = {
   +startDate: string,
   +endDate: string,
   +filters: CalendarFilterWithWritableThreadIDs[],
 };
 function sortCalendarQueryPerKeyserver(
   calendarQuery: CalendarQuery,
   keyserverIDs: $ReadOnlyArray<string>,
 ): {
   +[keyserverID: string]: CalendarQuery,
 } {
   const { startDate, endDate, filters } = calendarQuery;
   const results: { [string]: CalendarQueryWithWritableFilters } = {};
 
   for (const keyserverID of keyserverIDs) {
     results[keyserverID] = {
       startDate,
       endDate,
       filters: [],
     };
   }
 
   for (const filter of filters) {
     if (filter.type === 'not_deleted') {
       for (const keyserverID in results) {
         results[keyserverID].filters.push({ type: 'not_deleted' });
       }
     } else if (filter.type === 'threads') {
       for (const threadID of filter.threadIDs) {
         const keyserverID = extractKeyserverIDFromID(threadID);
         if (results[keyserverID] === undefined) {
           continue;
         }
         let threadFilter = results[keyserverID].filters.find(
           flt => flt.type === 'threads',
         );
         invariant(
           !threadFilter || threadFilter.type === 'threads',
           'should only match CalendarThreadFilter',
         );
         if (!threadFilter) {
           threadFilter = { type: 'threads', threadIDs: [] };
           results[keyserverID].filters.push(threadFilter);
         }
 
         threadFilter.threadIDs.push(threadID);
       }
     } else {
       console.warn('unhandled filter in sortCalendarQueryPerKeyserver');
     }
   }
 
   return results;
 }
 
 export {
   useDispatchActionPromise,
   setNewSessionActionType,
   fetchNewCookieFromNativeCredentials,
   createBoundServerCallsSelector,
   registerActiveSocket,
   useServerCall,
   bindCookieAndUtilsIntoCallServerEndpoint,
   extractKeyserverIDFromID,
   sortThreadIDsPerKeyserver,
   sortCalendarQueryPerKeyserver,
 };
diff --git a/lib/utils/keyserver-call.js b/lib/utils/keyserver-call.js
index ea63d29b0..0db7849f1 100644
--- a/lib/utils/keyserver-call.js
+++ b/lib/utils/keyserver-call.js
@@ -1,173 +1,173 @@
 // @flow
 
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import { bindCookieAndUtilsIntoCallServerEndpoint } from './action-utils.js';
 import type { BindServerCallsParams } from './action-utils.js';
 import type {
   CallServerEndpoint,
   CallServerEndpointOptions,
 } from './call-server-endpoint.js';
 import { promiseAll } from './promises.js';
 import { useSelector, useDispatch } from './redux-utils.js';
 import type { PlatformDetails } from '../types/device-types.js';
 import type { Endpoint } from '../types/endpoints.js';
 import type { KeyserverInfo } from '../types/keyserver-types.js';
 import type { Dispatch } from '../types/redux-types.js';
 import type { ConnectionStatus } from '../types/socket-types.js';
 import type { CurrentUserInfo } from '../types/user-types.js';
 
 export type CallKeyserverEndpoint = (
   endpoint: Endpoint,
   requests: { +[keyserverID: string]: ?{ +[string]: mixed } },
   options?: ?CallServerEndpointOptions,
 ) => Promise<{ +[keyserverID: string]: any }>;
 
 export type ActionFunc<Args: mixed, Return> = (
   callServerEndpoint: CallKeyserverEndpoint,
   // The second argument is only used in actions that call all keyservers,
   // and the request to all keyservers are exactly the same.
   // An example of such action is fetchEntries.
   allKeyserverIDs: $ReadOnlyArray<string>,
 ) => Args => Promise<Return>;
 
 // _memoize memoizes the function by caching the result.
 // The first argument of the memoized function is used as the map cache key.
 const baseCreateBoundServerCallsSelector = (
   // eslint-disable-next-line no-unused-vars
   keyserverID: string,
 ): (BindServerCallsParams => CallServerEndpoint) =>
   createSelector(
     (state: BindServerCallsParams) => state.dispatch,
     (state: BindServerCallsParams) => state.cookie,
     (state: BindServerCallsParams) => state.urlPrefix,
     (state: BindServerCallsParams) => state.sessionID,
     (state: BindServerCallsParams) => state.currentUserInfo,
     (state: BindServerCallsParams) => state.connectionStatus,
     (state: BindServerCallsParams) => state.lastCommunicatedPlatformDetails,
     (
       dispatch: Dispatch,
       cookie: ?string,
       urlPrefix: string,
       sessionID: ?string,
       currentUserInfo: ?CurrentUserInfo,
       connectionStatus: ConnectionStatus,
       lastCommunicatedPlatformDetails: ?PlatformDetails,
     ) =>
       bindCookieAndUtilsIntoCallServerEndpoint({
         dispatch,
         cookie,
         urlPrefix,
         sessionID,
         currentUserInfo,
         connectionStatus,
         lastCommunicatedPlatformDetails,
         keyserverID,
       }),
   );
 
 type CreateBoundServerCallsSelectorType = (
   keyserverID: string,
 ) => BindServerCallsParams => CallServerEndpoint;
 const createBoundServerCallsSelector: CreateBoundServerCallsSelectorType =
   (_memoize(baseCreateBoundServerCallsSelector): any);
 
 export type KeyserverInfoPartial = $Shape<KeyserverInfo>;
 
 export type BindKeyserverCallParams = {
   +dispatch: Dispatch,
   +currentUserInfo: ?CurrentUserInfo,
   +keyserverInfos: { +[keyserverID: string]: KeyserverInfoPartial },
 };
 
 const bindCallKeyserverEndpointSelector: BindKeyserverCallParams => <
   Args: mixed,
   Return,
 >(
   keyserverCall: ActionFunc<Args, Return>,
 ) => Args => Promise<Return> = createSelector(
   (state: BindKeyserverCallParams) => state.dispatch,
   (state: BindKeyserverCallParams) => state.currentUserInfo,
   (state: BindKeyserverCallParams) => state.keyserverInfos,
   (
     dispatch: Dispatch,
     currentUserInfo: ?CurrentUserInfo,
     keyserverInfos: { +[keyserverID: string]: KeyserverInfo },
   ) => {
     return _memoize(
       <Args: mixed, Return>(
         keyserverCall: ActionFunc<Args, Return>,
       ): (Args => Promise<Return>) => {
         const callKeyserverEndpoint = (
           endpoint: Endpoint,
           requests: { +[keyserverID: string]: ?{ +[string]: mixed } },
           options?: ?CallServerEndpointOptions,
         ) => {
           const bindCallKeyserverEndpoint = (keyserverID: string) => {
             const {
               cookie,
               urlPrefix,
               sessionID,
               connection,
               lastCommunicatedPlatformDetails,
             } = keyserverInfos[keyserverID];
 
             const boundCallServerEndpoint = createBoundServerCallsSelector(
               keyserverID,
             )({
               dispatch,
               currentUserInfo,
               cookie,
               urlPrefix,
               sessionID,
               connectionStatus: connection?.status,
               lastCommunicatedPlatformDetails,
               keyserverID,
             });
 
             return boundCallServerEndpoint(
               endpoint,
               requests[keyserverID],
               options,
             );
           };
 
           const promises: { [string]: Promise<CallServerEndpoint> } = {};
           for (const keyserverID in requests) {
             promises[keyserverID] = bindCallKeyserverEndpoint(keyserverID);
           }
           return promiseAll(promises);
         };
         const keyserverIDs = Object.keys(keyserverInfos);
         return keyserverCall(callKeyserverEndpoint, keyserverIDs);
       },
     );
   },
 );
 
-export type KeyserverCallParamOverride = $Shape<BindKeyserverCallParams>;
+export type KeyserverCallParamOverride = Partial<BindKeyserverCallParams>;
 
 function useKeyserverCall<Args: mixed, Return>(
   keyserverCall: ActionFunc<Args, Return>,
   paramOverride?: ?KeyserverCallParamOverride,
 ): Args => Promise<Return> {
   const dispatch = useDispatch();
   const keyserverInfos = useSelector(
     state => state.keyserverStore.keyserverInfos,
   );
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const bindCallKeyserverEndpointToAction = bindCallKeyserverEndpointSelector({
     dispatch,
     keyserverInfos,
     currentUserInfo,
     ...paramOverride,
   });
   return React.useMemo(
     () => bindCallKeyserverEndpointToAction(keyserverCall),
     [bindCallKeyserverEndpointToAction, keyserverCall],
   );
 }
 
 export { useKeyserverCall };
diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
index 8f4f9ab4a..eeb9a4419 100644
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -1,846 +1,846 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   Image,
   Keyboard,
   Platform,
   BackHandler,
   ActivityIndicator,
 } from 'react-native';
 import Animated, { EasingNode } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { resetUserStateActionType } from 'lib/actions/user-actions.js';
 import {
   cookieSelector,
   urlPrefixSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import { logInActionSources } from 'lib/types/account-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import { splashBackgroundURI } from './background-info.js';
 import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
 import LogInPanel from './log-in-panel.react.js';
 import type { LogInState } from './log-in-panel.react.js';
 import LoggedOutStaffInfo from './logged-out-staff-info.react.js';
 import RegisterPanel from './register-panel.react.js';
 import type { RegisterState } from './register-panel.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard.js';
 import { createIsForegroundSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import {
   type NavigationRoute,
   LoggedOutModalRouteName,
   RegistrationRouteName,
   QRCodeSignInNavigatorRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { usePersistedStateLoaded } from '../selectors/app-state-selectors.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import { splashStyleSelector } from '../splash.js';
 import { useStyles } from '../themes/colors.js';
 import type {
   EventSubscription,
   KeyboardEvent,
 } from '../types/react-native.js';
 import type { ImageStyle } from '../types/styles.js';
 import {
   runTiming,
   ratchetAlongWithKeyboardHeight,
 } from '../utils/animation-utils.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import {
   type StateContainer,
   type StateChange,
   setStateForContainer,
 } from '../utils/state-container.js';
 import EthereumLogo from '../vectors/ethereum-logo.react.js';
 
 let initialAppLoad = true;
 const safeAreaEdges = ['top', 'bottom'];
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   block,
   set,
   call,
   cond,
   not,
   and,
   eq,
   neq,
   lessThan,
   greaterOrEq,
   add,
   sub,
   divide,
   max,
   stopClock,
   clockRunning,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 export type LoggedOutMode =
   | 'loading'
   | 'prompt'
   | 'log-in'
   | 'register'
   | 'siwe';
 const modeNumbers: { [LoggedOutMode]: number } = {
   'loading': 0,
   'prompt': 1,
   'log-in': 2,
   'register': 3,
   'siwe': 4,
 };
 function isPastPrompt(modeValue: Node) {
   return and(
     neq(modeValue, modeNumbers['loading']),
     neq(modeValue, modeNumbers['prompt']),
   );
 }
 
 const unboundStyles = {
   animationContainer: {
     flex: 1,
   },
   backButton: {
     position: 'absolute',
     top: 13,
   },
   button: {
     borderRadius: 4,
     marginBottom: 4,
     marginTop: 4,
     marginLeft: 4,
     marginRight: 4,
     paddingBottom: 14,
     paddingLeft: 18,
     paddingRight: 18,
     paddingTop: 14,
     flex: 1,
   },
   buttonContainer: {
     bottom: 0,
     left: 0,
     marginLeft: 26,
     marginRight: 26,
     paddingBottom: 20,
     position: 'absolute',
     right: 0,
   },
   buttonText: {
     fontFamily: 'OpenSans-Semibold',
     fontSize: 17,
     textAlign: 'center',
   },
   classicAuthButton: {
     backgroundColor: 'purpleButton',
   },
   classicAuthButtonText: {
     color: 'whiteText',
   },
   registerButtons: {
     flexDirection: 'row',
   },
   signInButtons: {
     flexDirection: 'row',
   },
   container: {
     backgroundColor: 'transparent',
     flex: 1,
   },
   header: {
     color: 'white',
     fontFamily: Platform.OS === 'ios' ? 'IBMPlexSans' : 'IBMPlexSans-Medium',
     fontSize: 56,
     fontWeight: '500',
     lineHeight: 66,
     textAlign: 'center',
   },
   loadingIndicator: {
     paddingTop: 15,
   },
   modalBackground: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   siweButton: {
     backgroundColor: 'siweButton',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
   },
   siweButtonText: {
     color: 'siweButtonText',
   },
   siweOr: {
     flex: 1,
     flexDirection: 'row',
     marginBottom: 18,
     marginTop: 14,
   },
   siweOrLeftHR: {
     borderColor: 'logInSpacer',
     borderTopWidth: 1,
     flex: 1,
     marginRight: 18,
     marginTop: 10,
   },
   siweOrRightHR: {
     borderColor: 'logInSpacer',
     borderTopWidth: 1,
     flex: 1,
     marginLeft: 18,
     marginTop: 10,
   },
   siweOrText: {
     color: 'whiteText',
     fontSize: 17,
     textAlign: 'center',
   },
   siweIcon: {
     paddingRight: 10,
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'LoggedOutModal'>,
   +route: NavigationRoute<'LoggedOutModal'>,
 };
 
 type Props = {
   ...BaseProps,
   // Navigation state
   +isForeground: boolean,
   // Redux state
   +persistedStateLoaded: boolean,
   +rehydrateConcluded: boolean,
   +cookie: ?string,
   +urlPrefix: string,
   +loggedIn: boolean,
   +dimensions: DerivedDimensionsInfo,
   +splashStyle: ImageStyle,
   +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // Keyserver olm sessions functions
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 type State = {
   +mode: LoggedOutMode,
   +nextMode: LoggedOutMode,
   +logInState: StateContainer<LogInState>,
   +registerState: StateContainer<RegisterState>,
 };
 class LoggedOutModal extends React.PureComponent<Props, State> {
   keyboardShowListener: ?EventSubscription;
   keyboardHideListener: ?EventSubscription;
 
   mounted = false;
   nextMode: LoggedOutMode = 'loading';
   activeAlert = false;
 
   contentHeight: Value;
   keyboardHeightValue: Value = new Value(0);
   modeValue: Value;
 
   buttonOpacity: Value;
   panelPaddingTopValue: Node;
   panelOpacityValue: Node;
 
   constructor(props: Props) {
     super(props);
 
     // Man, this is a lot of boilerplate just to containerize some state.
     // Mostly due to Flow typing requirements...
     const setLogInState = setStateForContainer(
       this.guardedSetState,
-      (change: $Shape<LogInState>) => (fullState: State) => ({
+      (change: Partial<LogInState>) => (fullState: State) => ({
         logInState: {
           ...fullState.logInState,
           state: { ...fullState.logInState.state, ...change },
         },
       }),
     );
     const setRegisterState = setStateForContainer<State, RegisterState>(
       this.guardedSetState,
       (change: Partial<RegisterState>) => (fullState: State) => ({
         registerState: {
           ...fullState.registerState,
           state: { ...fullState.registerState.state, ...change },
         },
       }),
     );
 
     const initialMode = props.persistedStateLoaded ? 'prompt' : 'loading';
     this.state = {
       mode: initialMode,
       nextMode: initialMode,
       logInState: {
         state: {
           usernameInputText: null,
           passwordInputText: null,
         },
         setState: setLogInState,
       },
       registerState: {
         state: {
           usernameInputText: '',
           passwordInputText: '',
           confirmPasswordInputText: '',
         },
         setState: setRegisterState,
       },
     };
     this.nextMode = initialMode;
 
     this.contentHeight = new Value(props.dimensions.safeAreaHeight);
     this.modeValue = new Value(modeNumbers[this.nextMode]);
 
     this.buttonOpacity = new Value(props.persistedStateLoaded ? 1 : 0);
     this.panelPaddingTopValue = this.panelPaddingTop();
     this.panelOpacityValue = this.panelOpacity();
   }
 
   guardedSetState = (change: StateChange<State>, callback?: () => mixed) => {
     if (this.mounted) {
       this.setState(change, callback);
     }
   };
 
   setMode(newMode: LoggedOutMode) {
     this.nextMode = newMode;
     this.guardedSetState({ mode: newMode, nextMode: newMode });
     this.modeValue.setValue(modeNumbers[newMode]);
   }
 
   proceedToNextMode = () => {
     this.guardedSetState({ mode: this.nextMode });
   };
 
   componentDidMount() {
     this.mounted = true;
     if (this.props.rehydrateConcluded) {
       this.onInitialAppLoad();
     }
     if (this.props.isForeground) {
       this.onForeground();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
     if (this.props.isForeground) {
       this.onBackground();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!prevProps.persistedStateLoaded && this.props.persistedStateLoaded) {
       this.setMode('prompt');
     }
     if (!prevProps.rehydrateConcluded && this.props.rehydrateConcluded) {
       this.onInitialAppLoad();
     }
     if (!prevProps.isForeground && this.props.isForeground) {
       this.onForeground();
     } else if (prevProps.isForeground && !this.props.isForeground) {
       this.onBackground();
     }
 
     if (this.state.mode === 'prompt' && prevState.mode !== 'prompt') {
       this.buttonOpacity.setValue(0);
       Animated.timing(this.buttonOpacity, {
         easing: EasingNode.out(EasingNode.ease),
         duration: 250,
         toValue: 1.0,
       }).start();
     }
 
     const newContentHeight = this.props.dimensions.safeAreaHeight;
     const oldContentHeight = prevProps.dimensions.safeAreaHeight;
     if (newContentHeight !== oldContentHeight) {
       this.contentHeight.setValue(newContentHeight);
     }
   }
 
   onForeground() {
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardHideListener = addKeyboardDismissListener(this.keyboardHide);
     BackHandler.addEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   onBackground() {
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardHideListener) {
       removeKeyboardListener(this.keyboardHideListener);
       this.keyboardHideListener = null;
     }
     BackHandler.removeEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   // This gets triggered when an app is killed and restarted
   // Not when it is returned from being backgrounded
   async onInitialAppLoad() {
     if (!initialAppLoad) {
       return;
     }
     initialAppLoad = false;
 
     const { loggedIn, cookie, urlPrefix, dispatch } = this.props;
     const hasUserCookie = cookie && cookie.startsWith('user=');
     if (loggedIn === !!hasUserCookie) {
       return;
     }
     if (!__DEV__) {
       const actionSource = loggedIn
         ? logInActionSources.appStartReduxLoggedInButInvalidCookie
         : logInActionSources.appStartCookieLoggedInButInvalidRedux;
       const sessionChange = await fetchNewCookieFromNativeCredentials(
         dispatch,
         cookie,
         urlPrefix,
         actionSource,
         ashoatKeyserverID,
         this.props.getInitialNotificationsEncryptedMessage,
       );
       if (
         sessionChange &&
         sessionChange.cookie &&
         sessionChange.cookie.startsWith('user=')
       ) {
         // success! we can expect subsequent actions to fix up the state
         return;
       }
     }
     this.props.dispatch({ type: resetUserStateActionType });
   }
 
   hardwareBack: () => boolean = () => {
     if (this.nextMode !== 'prompt') {
       this.goBackToPrompt();
       return true;
     }
     return false;
   };
 
   panelPaddingTop(): Node {
     const headerHeight = Platform.OS === 'ios' ? 62.33 : 58.54;
     const promptButtonsSize = Platform.OS === 'ios' ? 40 : 61;
     const logInContainerSize = 140;
     const registerPanelSize = Platform.OS === 'ios' ? 181 : 180;
     const siwePanelSize = 250;
 
     const containerSize = add(
       headerHeight,
       cond(not(isPastPrompt(this.modeValue)), promptButtonsSize, 0),
       cond(eq(this.modeValue, modeNumbers['log-in']), logInContainerSize, 0),
       cond(eq(this.modeValue, modeNumbers['register']), registerPanelSize, 0),
       cond(eq(this.modeValue, modeNumbers['siwe']), siwePanelSize, 0),
     );
     const potentialPanelPaddingTop = divide(
       max(sub(this.contentHeight, this.keyboardHeightValue, containerSize), 0),
       2,
     );
 
     const panelPaddingTop = new Value(-1);
     const targetPanelPaddingTop = new Value(-1);
     const prevModeValue = new Value(modeNumbers[this.nextMode]);
     const clock = new Clock();
     const keyboardTimeoutClock = new Clock();
     return block([
       cond(lessThan(panelPaddingTop, 0), [
         set(panelPaddingTop, potentialPanelPaddingTop),
         set(targetPanelPaddingTop, potentialPanelPaddingTop),
       ]),
       cond(
         lessThan(this.keyboardHeightValue, 0),
         [
           runTiming(keyboardTimeoutClock, 0, 1, true, { duration: 500 }),
           cond(
             not(clockRunning(keyboardTimeoutClock)),
             set(this.keyboardHeightValue, 0),
           ),
         ],
         stopClock(keyboardTimeoutClock),
       ),
       cond(
         and(
           greaterOrEq(this.keyboardHeightValue, 0),
           neq(prevModeValue, this.modeValue),
         ),
         [
           stopClock(clock),
           cond(
             neq(isPastPrompt(prevModeValue), isPastPrompt(this.modeValue)),
             set(targetPanelPaddingTop, potentialPanelPaddingTop),
           ),
           set(prevModeValue, this.modeValue),
         ],
       ),
       ratchetAlongWithKeyboardHeight(this.keyboardHeightValue, [
         stopClock(clock),
         set(targetPanelPaddingTop, potentialPanelPaddingTop),
       ]),
       cond(
         neq(panelPaddingTop, targetPanelPaddingTop),
         set(
           panelPaddingTop,
           runTiming(clock, panelPaddingTop, targetPanelPaddingTop),
         ),
       ),
       panelPaddingTop,
     ]);
   }
 
   panelOpacity(): Node {
     const targetPanelOpacity = isPastPrompt(this.modeValue);
 
     const panelOpacity = new Value(-1);
     const prevPanelOpacity = new Value(-1);
     const prevTargetPanelOpacity = new Value(-1);
     const clock = new Clock();
     return block([
       cond(lessThan(panelOpacity, 0), [
         set(panelOpacity, targetPanelOpacity),
         set(prevPanelOpacity, targetPanelOpacity),
         set(prevTargetPanelOpacity, targetPanelOpacity),
       ]),
       cond(greaterOrEq(this.keyboardHeightValue, 0), [
         cond(neq(targetPanelOpacity, prevTargetPanelOpacity), [
           stopClock(clock),
           set(prevTargetPanelOpacity, targetPanelOpacity),
         ]),
         cond(
           neq(panelOpacity, targetPanelOpacity),
           set(panelOpacity, runTiming(clock, panelOpacity, targetPanelOpacity)),
         ),
       ]),
       cond(
         and(eq(panelOpacity, 0), neq(prevPanelOpacity, 0)),
         call([], this.proceedToNextMode),
       ),
       set(prevPanelOpacity, panelOpacity),
       panelOpacity,
     ]);
   }
 
   keyboardShow = (event: KeyboardEvent) => {
     if (
       event.startCoordinates &&
       _isEqual(event.startCoordinates)(event.endCoordinates)
     ) {
       return;
     }
     const keyboardHeight: number = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(
         event.endCoordinates.height - this.props.dimensions.bottomInset,
         0,
       ),
     });
     this.keyboardHeightValue.setValue(keyboardHeight);
   };
 
   keyboardHide = () => {
     if (!this.activeAlert) {
       this.keyboardHeightValue.setValue(0);
     }
   };
 
   setActiveAlert = (activeAlert: boolean) => {
     this.activeAlert = activeAlert;
   };
 
   goBackToPrompt = () => {
     this.nextMode = 'prompt';
     this.guardedSetState({ nextMode: 'prompt' });
     this.keyboardHeightValue.setValue(0);
     this.modeValue.setValue(modeNumbers['prompt']);
     Keyboard.dismiss();
   };
 
   render(): React.Node {
     const { styles } = this.props;
 
     const siweButton = (
       <>
         <TouchableOpacity
           onPress={this.onPressSIWE}
           style={[styles.button, styles.siweButton]}
           activeOpacity={0.6}
         >
           <View style={styles.siweIcon}>
             <EthereumLogo />
           </View>
           <Text style={[styles.buttonText, styles.siweButtonText]}>
             Sign in with Ethereum
           </Text>
         </TouchableOpacity>
         <View style={styles.siweOr}>
           <View style={styles.siweOrLeftHR} />
           <Text style={styles.siweOrText}>or</Text>
           <View style={styles.siweOrRightHR} />
         </View>
       </>
     );
 
     let panel = null;
     let buttons = null;
     if (this.state.mode === 'log-in') {
       panel = (
         <LogInPanel
           setActiveAlert={this.setActiveAlert}
           opacityValue={this.panelOpacityValue}
           logInState={this.state.logInState}
         />
       );
     } else if (this.state.mode === 'register') {
       panel = (
         <RegisterPanel
           setActiveAlert={this.setActiveAlert}
           opacityValue={this.panelOpacityValue}
           registerState={this.state.registerState}
         />
       );
     } else if (this.state.mode === 'prompt') {
       const opacityStyle = { opacity: this.buttonOpacity };
 
       const registerButtons = [];
       registerButtons.push(
         <TouchableOpacity
           onPress={this.onPressRegister}
           style={[styles.button, styles.classicAuthButton]}
           activeOpacity={0.6}
           key="old"
         >
           <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
             Register
           </Text>
         </TouchableOpacity>,
       );
       if (__DEV__) {
         registerButtons.push(
           <TouchableOpacity
             onPress={this.onPressNewRegister}
             style={[styles.button, styles.classicAuthButton]}
             activeOpacity={0.6}
             key="new"
           >
             <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
               Register (new)
             </Text>
           </TouchableOpacity>,
         );
       }
 
       const signInButtons = [];
       signInButtons.push(
         <TouchableOpacity
           onPress={this.onPressLogIn}
           style={[styles.button, styles.classicAuthButton]}
           activeOpacity={0.6}
           key="login-form"
         >
           <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
             Sign in
           </Text>
         </TouchableOpacity>,
       );
       if (__DEV__) {
         signInButtons.push(
           <TouchableOpacity
             onPress={this.onPressQRCodeSignIn}
             style={[styles.button, styles.classicAuthButton]}
             activeOpacity={0.6}
             key="qr-code-login"
           >
             <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
               Sign in (QR)
             </Text>
           </TouchableOpacity>,
         );
       }
 
       buttons = (
         <Animated.View style={[styles.buttonContainer, opacityStyle]}>
           <LoggedOutStaffInfo />
           {siweButton}
           <View style={styles.signInButtons}>{signInButtons}</View>
           <View style={styles.registerButtons}>{registerButtons}</View>
         </Animated.View>
       );
     } else if (this.state.mode === 'loading') {
       panel = (
         <ActivityIndicator
           color="white"
           size="large"
           style={styles.loadingIndicator}
         />
       );
     }
 
     const windowWidth = this.props.dimensions.width;
     const buttonStyle = {
       opacity: this.panelOpacityValue,
       left: windowWidth < 360 ? 28 : 40,
     };
     const padding = { paddingTop: this.panelPaddingTopValue };
 
     const animatedContent = (
       <Animated.View style={[styles.animationContainer, padding]}>
         <View>
           <Text style={styles.header}>Comm</Text>
           <Animated.View style={[styles.backButton, buttonStyle]}>
             <TouchableOpacity activeOpacity={0.6} onPress={this.hardwareBack}>
               <Icon name="arrow-circle-o-left" size={36} color="#FFFFFFAA" />
             </TouchableOpacity>
           </Animated.View>
         </View>
         {panel}
       </Animated.View>
     );
 
     let siwePanel;
     if (this.state.mode === 'siwe') {
       siwePanel = (
         <FullscreenSIWEPanel
           goBackToPrompt={this.goBackToPrompt}
           closing={this.state.nextMode === 'prompt'}
         />
       );
     }
 
     const backgroundSource = { uri: splashBackgroundURI };
     return (
       <React.Fragment>
         <ConnectedStatusBar barStyle="light-content" />
         <Image
           source={backgroundSource}
           style={[styles.modalBackground, this.props.splashStyle]}
         />
         <SafeAreaView style={styles.container} edges={safeAreaEdges}>
           <KeyboardAvoidingView behavior="padding" style={styles.container}>
             {animatedContent}
             {buttons}
           </KeyboardAvoidingView>
         </SafeAreaView>
         {siwePanel}
       </React.Fragment>
     );
   }
 
   onPressSIWE = () => {
     this.setMode('siwe');
   };
 
   onPressLogIn = () => {
     if (Platform.OS !== 'ios') {
       // For some strange reason, iOS's password management logic doesn't
       // realize that the username and password fields in LogInPanel are related
       // if the username field gets focused on mount. To avoid this issue we
       // need the username and password fields to both appear on-screen before
       // we focus the username field. However, when we set keyboardHeightValue
       // to -1 here, we are telling our Reanimated logic to wait until the
       // keyboard appears before showing LogInPanel. Since we need LogInPanel
       // to appear before the username field is focused, we need to avoid this
       // behavior on iOS.
       this.keyboardHeightValue.setValue(-1);
     }
     this.setMode('log-in');
   };
 
   onPressQRCodeSignIn = () => {
     this.props.navigation.navigate(QRCodeSignInNavigatorRouteName);
   };
 
   onPressRegister = () => {
     this.keyboardHeightValue.setValue(-1);
     this.setMode('register');
   };
 
   onPressNewRegister = () => {
     this.props.navigation.navigate(RegistrationRouteName);
   };
 }
 
 const isForegroundSelector = createIsForegroundSelector(
   LoggedOutModalRouteName,
 );
 
 const ConnectedLoggedOutModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedLoggedOutModal(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const isForeground = isForegroundSelector(navContext);
 
     const rehydrateConcluded = useSelector(
       state => !!(state._persist && state._persist.rehydrated && navContext),
     );
     const persistedStateLoaded = usePersistedStateLoaded();
     const cookie = useSelector(cookieSelector(ashoatKeyserverID));
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
     const loggedIn = useSelector(isLoggedIn);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const splashStyle = useSelector(splashStyleSelector);
     const styles = useStyles(unboundStyles);
 
     const dispatch = useDispatch();
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
     return (
       <LoggedOutModal
         {...props}
         isForeground={isForeground}
         persistedStateLoaded={persistedStateLoaded}
         rehydrateConcluded={rehydrateConcluded}
         cookie={cookie}
         urlPrefix={urlPrefix}
         loggedIn={loggedIn}
         dimensions={dimensions}
         splashStyle={splashStyle}
         styles={styles}
         dispatch={dispatch}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedLoggedOutModal;
diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js
index 8152e3bfd..a80b6af67 100644
--- a/native/account/siwe-panel.react.js
+++ b/native/account/siwe-panel.react.js
@@ -1,228 +1,228 @@
 // @flow
 
 import BottomSheet from '@gorhom/bottom-sheet';
 import * as React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import WebView from 'react-native-webview';
 
 import {
   getSIWENonce,
   getSIWENonceActionTypes,
   siweAuthActionTypes,
 } from 'lib/actions/siwe-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { SIWEWebViewMessage, SIWEResult } from 'lib/types/siwe-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
   type BindServerCallsParams,
 } from 'lib/utils/action-utils.js';
 
 import { useKeyboardHeight } from '../keyboard/keyboard-hooks.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { BottomSheetRef } from '../types/bottom-sheet.js';
 import Alert from '../utils/alert.js';
 import { getContentSigningKey } from '../utils/crypto-utils.js';
 import { defaultLandingURLPrefix } from '../utils/url-utils.js';
 
 const commSIWE = `${defaultLandingURLPrefix}/siwe`;
 
 const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
   getSIWENonceActionTypes,
 );
 const siweAuthLoadingStatusSelector =
   createLoadingStatusSelector(siweAuthActionTypes);
 
 type WebViewMessageEvent = {
   +nativeEvent: {
     +data: string,
     ...
   },
   ...
 };
 
 type Props = {
   +onClosed: () => mixed,
   +onClosing: () => mixed,
   +onSuccessfulWalletSignature: SIWEResult => mixed,
   +closing: boolean,
   +setLoading: boolean => mixed,
-  +keyserverCallParamOverride?: $Shape<BindServerCallsParams>,
+  +keyserverCallParamOverride?: Partial<BindServerCallsParams>,
 };
 function SIWEPanel(props: Props): React.Node {
   const dispatchActionPromise = useDispatchActionPromise();
   const getSIWENonceCall = useServerCall(
     getSIWENonce,
     props.keyserverCallParamOverride,
   );
 
   const getSIWENonceCallFailed = useSelector(
     state => getSIWENonceLoadingStatusSelector(state) === 'error',
   );
 
   const { onClosing } = props;
   React.useEffect(() => {
     if (getSIWENonceCallFailed) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onClosing }],
         { cancelable: false },
       );
     }
   }, [getSIWENonceCallFailed, onClosing]);
 
   const siweAuthCallLoading = useSelector(
     state => siweAuthLoadingStatusSelector(state) === 'loading',
   );
 
   const [nonce, setNonce] = React.useState<?string>(null);
   const [primaryIdentityPublicKey, setPrimaryIdentityPublicKey] =
     React.useState<?string>(null);
 
   React.useEffect(() => {
     (async () => {
       dispatchActionPromise(
         getSIWENonceActionTypes,
         (async () => {
           const response = await getSIWENonceCall();
           setNonce(response);
         })(),
       );
       const ed25519 = await getContentSigningKey();
       setPrimaryIdentityPublicKey(ed25519);
     })();
   }, [dispatchActionPromise, getSIWENonceCall]);
 
   const [isLoading, setLoading] = React.useState(true);
   const [walletConnectModalHeight, setWalletConnectModalHeight] =
     React.useState(0);
   const insets = useSafeAreaInsets();
   const keyboardHeight = useKeyboardHeight();
   const bottomInset = insets.bottom;
   const snapPoints = React.useMemo(() => {
     if (isLoading) {
       return [1];
     } else if (walletConnectModalHeight) {
       const baseHeight =
         bottomInset + walletConnectModalHeight + keyboardHeight;
       if (baseHeight < 400) {
         return [baseHeight - 10];
       } else {
         return [baseHeight + 5];
       }
     } else {
       const baseHeight = bottomInset + keyboardHeight;
       return [baseHeight + 435, baseHeight + 600];
     }
   }, [isLoading, walletConnectModalHeight, bottomInset, keyboardHeight]);
 
   const bottomSheetRef = React.useRef<?BottomSheetRef>();
   const snapToIndex = bottomSheetRef.current?.snapToIndex;
   React.useEffect(() => {
     // When the snapPoints change, always reset to the first one
     // Without this, when we close the WalletConnect modal we don't resize
     snapToIndex?.(0);
   }, [snapToIndex, snapPoints]);
 
   const closeBottomSheet = bottomSheetRef.current?.close;
   const { closing, onSuccessfulWalletSignature } = props;
   const handleMessage = React.useCallback(
     async (event: WebViewMessageEvent) => {
       const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data);
       if (data.type === 'siwe_success') {
         const { address, message, signature } = data;
         if (address && signature) {
           closeBottomSheet?.();
           await onSuccessfulWalletSignature({ address, message, signature });
         }
       } else if (data.type === 'siwe_closed') {
         onClosing();
         closeBottomSheet?.();
       } else if (data.type === 'walletconnect_modal_update') {
         const height = data.state === 'open' ? data.height : 0;
         setWalletConnectModalHeight(height);
       }
     },
     [onSuccessfulWalletSignature, onClosing, closeBottomSheet],
   );
   const prevClosingRef = React.useRef<?boolean>();
   React.useEffect(() => {
     if (closing && !prevClosingRef.current) {
       closeBottomSheet?.();
     }
     prevClosingRef.current = closing;
   }, [closing, closeBottomSheet]);
 
   const source = React.useMemo(
     () => ({
       uri: commSIWE,
       headers: {
         'siwe-nonce': nonce,
         'siwe-primary-identity-public-key': primaryIdentityPublicKey,
       },
     }),
     [nonce, primaryIdentityPublicKey],
   );
 
   const onWebViewLoaded = React.useCallback(() => {
     setLoading(false);
   }, []);
 
   const walletConnectModalOpen = walletConnectModalHeight !== 0;
   const backgroundStyle = React.useMemo(
     () => ({
       backgroundColor: walletConnectModalOpen ? '#3396ff' : '#242529',
     }),
     [walletConnectModalOpen],
   );
 
   const bottomSheetHandleIndicatorStyle = React.useMemo(
     () => ({
       backgroundColor: 'white',
     }),
     [],
   );
 
   const { onClosed } = props;
   const onBottomSheetChange = React.useCallback(
     (index: number) => {
       if (index === -1) {
         onClosed();
       }
     },
     [onClosed],
   );
 
   let bottomSheet;
   if (nonce && primaryIdentityPublicKey) {
     bottomSheet = (
       <BottomSheet
         snapPoints={snapPoints}
         backgroundStyle={backgroundStyle}
         handleIndicatorStyle={bottomSheetHandleIndicatorStyle}
         enablePanDownToClose={true}
         onChange={onBottomSheetChange}
         ref={bottomSheetRef}
       >
         <WebView
           source={source}
           onMessage={handleMessage}
           onLoad={onWebViewLoaded}
           style={backgroundStyle}
           incognito={true}
         />
       </BottomSheet>
     );
   }
 
   const setLoadingProp = props.setLoading;
   const loading = !getSIWENonceCallFailed && (isLoading || siweAuthCallLoading);
   React.useEffect(() => {
     setLoadingProp(loading);
   }, [setLoadingProp, loading]);
 
   return bottomSheet;
 }
 
 export default SIWEPanel;
diff --git a/native/chat/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js
index 7fc92bcd6..122011b29 100644
--- a/native/chat/chat-thread-list-search.react.js
+++ b/native/chat/chat-thread-list-search.react.js
@@ -1,179 +1,179 @@
 // @flow
 
 import * as React from 'react';
 import { TextInput as BaseTextInput } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { ReactRefSetter } from 'lib/types/react-types.js';
 
 import type { SearchStatus } from './chat-thread-list.react.js';
 import Button from '../components/button.react.js';
 import Search from '../components/search.react.js';
 import { useStyles } from '../themes/colors.js';
 import { AnimatedView, type AnimatedStyleObj } from '../types/styles.js';
 import { animateTowards } from '../utils/animation-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Node, Value, interpolateNode, useValue } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +searchText: string,
   +onChangeText: (updatedSearchText: string) => mixed,
   +onBlur: () => mixed,
-  +additionalProps?: $Shape<React.ElementConfig<typeof Search>>,
+  +additionalProps?: Partial<React.ElementConfig<typeof Search>>,
   +onSearchCancel: () => mixed,
   +searchStatus: SearchStatus,
   +innerSearchAutoFocus?: boolean,
   +innerSearchActive?: boolean,
 };
 function ForwardedChatThreadListSearch(
   props: Props,
   ref: ReactRefSetter<React.ElementRef<typeof BaseTextInput>>,
 ): React.Node {
   const {
     searchText,
     onChangeText,
     onBlur,
     onSearchCancel,
     searchStatus,
     innerSearchActive,
     innerSearchAutoFocus,
   } = props;
   const styles = useStyles(unboundStyles);
 
   const searchCancelButtonOpen: Value = useValue(0);
   const searchCancelButtonProgress: Node = React.useMemo(
     () => animateTowards(searchCancelButtonOpen, 100),
     [searchCancelButtonOpen],
   );
   const searchCancelButtonOffset: Node = React.useMemo(
     () =>
       interpolateNode(searchCancelButtonProgress, {
         inputRange: [0, 1],
         outputRange: [0, 56],
       }),
     [searchCancelButtonProgress],
   );
 
   const isActiveOrActivating =
     searchStatus === 'active' || searchStatus === 'activating';
   React.useEffect(() => {
     if (isActiveOrActivating) {
       searchCancelButtonOpen.setValue(1);
     } else {
       searchCancelButtonOpen.setValue(0);
     }
   }, [isActiveOrActivating, searchCancelButtonOpen]);
 
   const animatedSearchBoxStyle: AnimatedStyleObj = React.useMemo(
     () => ({
       marginRight: searchCancelButtonOffset,
     }),
     [searchCancelButtonOffset],
   );
 
   const searchBoxStyle = React.useMemo(
     () => [styles.searchBox, animatedSearchBoxStyle],
     [animatedSearchBoxStyle, styles.searchBox],
   );
 
   const buttonStyle = React.useMemo(
     () => [
       styles.cancelSearchButtonText,
       { opacity: searchCancelButtonProgress },
     ],
     [searchCancelButtonProgress, styles.cancelSearchButtonText],
   );
 
   const innerSearchNode = React.useMemo(
     () => (
       <Search
         searchText={searchText}
         onChangeText={onChangeText}
         containerStyle={styles.search}
         onBlur={onBlur}
         placeholder="Search chats"
         ref={ref}
         autoFocus={innerSearchAutoFocus}
         active={innerSearchActive}
       />
     ),
     [
       innerSearchActive,
       innerSearchAutoFocus,
       onBlur,
       onChangeText,
       ref,
       searchText,
       styles.search,
     ],
   );
 
   const searchContainer = React.useMemo(
     () => <AnimatedView style={searchBoxStyle}>{innerSearchNode}</AnimatedView>,
     [innerSearchNode, searchBoxStyle],
   );
 
   const cancelButton = React.useMemo(
     () => (
       <Button
         onPress={onSearchCancel}
         disabled={searchStatus !== 'active'}
         style={styles.cancelSearchButton}
       >
         {/* eslint-disable react-native/no-raw-text */}
         <Animated.Text style={buttonStyle}>Cancel</Animated.Text>
         {/* eslint-enable react-native/no-raw-text */}
       </Button>
     ),
     [buttonStyle, onSearchCancel, searchStatus, styles.cancelSearchButton],
   );
 
   const chatThreadListSearch = React.useMemo(
     () => (
       <>
         {cancelButton}
         {searchContainer}
       </>
     ),
     [cancelButton, searchContainer],
   );
 
   return chatThreadListSearch;
 }
 
 const unboundStyles = {
   searchBox: {
     flex: 1,
   },
   search: {
     marginBottom: 8,
     marginHorizontal: 18,
     marginTop: 16,
   },
   cancelSearchButton: {
     position: 'absolute',
     right: 0,
     top: 0,
     bottom: 0,
     display: 'flex',
     justifyContent: 'center',
   },
   cancelSearchButtonText: {
     color: 'link',
     fontSize: 16,
     paddingHorizontal: 16,
     paddingTop: 8,
   },
 };
 
 const ChatThreadListSearch: React.AbstractComponent<
   Props,
   React.ElementRef<typeof BaseTextInput>,
 > = React.forwardRef<Props, React.ElementRef<typeof BaseTextInput>>(
   ForwardedChatThreadListSearch,
 );
 ChatThreadListSearch.displayName = 'ChatThreadListSearch';
 
 export default ChatThreadListSearch;
diff --git a/native/utils/state-container.js b/native/utils/state-container.js
index d29c0df6d..6331fed63 100644
--- a/native/utils/state-container.js
+++ b/native/utils/state-container.js
@@ -1,27 +1,27 @@
 // @flow
 
 export type SimpleStateSetter<S: { ... }> = (
-  newState: $Shape<S>,
+  newState: Partial<S>,
   callback?: () => mixed,
 ) => void;
 
-export type StateChange<S: { ... }> = $Shape<S> | (S => $Shape<S>);
+export type StateChange<S: { ... }> = Partial<S> | (S => Partial<S>);
 type StateSetter<S: { ... }> = (
   newState: StateChange<S>,
   callback?: () => mixed,
 ) => void;
 
 export type StateContainer<S: { ... }> = {
   state: S,
   setState: SimpleStateSetter<S>,
 };
 
 function setStateForContainer<FullState: { ... }, OurContainer: { ... }>(
   setState: StateSetter<FullState>,
-  reverseSelector: (ourChange: $Shape<OurContainer>) => StateChange<FullState>,
+  reverseSelector: (ourChange: Partial<OurContainer>) => StateChange<FullState>,
 ): SimpleStateSetter<OurContainer> {
-  return (ourChange: $Shape<OurContainer>, callback?: () => mixed) =>
+  return (ourChange: Partial<OurContainer>, callback?: () => mixed) =>
     setState(reverseSelector(ourChange), callback);
 }
 
 export { setStateForContainer };
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index ed5b5ac02..928b186cf 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1710 +1,1710 @@
 // @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 CombinedInputState = {
   +inputBaseState: BaseInputState,
   +typeaheadState: TypeaheadInputState,
 };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +deleteUpload: (input: DeleteUploadInput) => Promise<void>,
   +sendMultimediaMessage: (
     input: LegacySendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type WritableState = {
   pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   textCursorPositions: { [threadID: string]: number },
   typeaheadState: TypeaheadState,
 };
 type State = $ReadOnly<WritableState>;
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
       keepUpdatingThreadMembers: true,
       frozenUserMentionsCandidates: [],
       frozenChatMentionsCandidates: {},
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations: Map<string, Promise<string>> = new Map<
     string,
     Promise<string>,
   >();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs: Set<string> = new Set<string>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState: { [string]: T } = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State): ?Partial<State> {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate: Partial<WritableState> = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State): Set<string> {
     const completed = new Map<string, boolean>();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set<string>();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set<string>();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map<
       string,
       {
         +threadID: string,
         +shouldEncrypt: boolean,
         +uploads: PendingMultimediaUpload[],
       },
     >();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         const { shouldEncrypt } = upload;
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, shouldEncrypt, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         if (shouldEncrypt !== assignedUploads.shouldEncrypt) {
           console.warn(
             `skipping upload ${localUploadID} ` +
               "because shouldEncrypt doesn't match",
           );
           continue;
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
     const newMessageInfos = new Map<string, RawMultimediaMessageInfo>();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID, shouldEncrypt } = assignedUploads;
       const creatorID = this.props.viewerID;
       invariant(creatorID, 'need viewer ID in order to send a message');
       const media = uploads.map(
         ({
           localID,
           serverID,
           uri,
           mediaType,
           dimensions,
           encryptionKey,
           thumbHash,
         }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo' || mediaType === 'encrypted_photo',
             "web InputStateContainer can't handle video",
           );
           if (
             mediaType !== 'encrypted_photo' &&
             mediaType !== 'encrypted_video'
           ) {
             return {
               id: serverID ? serverID : localID,
               uri,
               type: 'photo',
               dimensions: shimmedDimensions,
               thumbHash,
             };
           }
           invariant(
             encryptionKey,
             'encrypted media must have an encryption key',
           );
           return {
             id: serverID ? serverID : localID,
             blobURI: uri,
             type: 'encrypted_photo',
             encryptionKey,
             dimensions: shimmedDimensions,
             thumbHash,
           };
         },
       );
       const messageInfo = createMediaMessageInfo(
         {
           localID: messageID,
           threadID,
           creatorID,
           media,
         },
         { forceMultimediaMessageType: shouldEncrypt },
       );
       newMessageInfos.set(messageID, messageInfo);
     }
 
     const currentlyCompleted = InputStateContainer.completedMessageIDs(
       this.state,
     );
     const previouslyCompleted =
       InputStateContainer.completedMessageIDs(prevState);
     for (const messageID of currentlyCompleted) {
       if (previouslyCompleted.has(messageID)) {
         continue;
       }
       let rawMessageInfo = newMessageInfos.get(messageID);
       if (rawMessageInfo) {
         newMessageInfos.delete(messageID);
       } else {
         rawMessageInfo = this.getRawMultimediaMessageInfo(messageID);
       }
       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: { [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: $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: CombinedInputState => InputState = createSelector(
     (state: CombinedInputState) => state.inputBaseState,
     (state: CombinedInputState) => state.typeaheadState,
     (inputBaseState: BaseInputState, typeaheadState: TypeaheadInputState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadInfo: 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: MediaMissionStep[] = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
     const { uri, file: fixedFile, mediaType, dimensions } = result;
 
     const shouldEncrypt = this.shouldEncryptMedia(threadInfo);
 
     let encryptionResult;
     if (shouldEncrypt) {
       let encryptionResponse;
       const encryptionStart = Date.now();
       try {
         encryptionResponse = await encryptFile(fixedFile);
       } catch (e) {
         return {
           steps,
           result: {
             success: false,
             reason: 'encryption_exception',
             time: Date.now() - encryptionStart,
             exceptionMessage: getMessageForException(e),
           },
         };
       }
       steps.push(...encryptionResponse.steps);
       encryptionResult = encryptionResponse.result;
     }
     if (encryptionResult && !encryptionResult.success) {
       return { steps, result: encryptionResult };
     }
 
     const { steps: thumbHashSteps, result: thumbHashResult } =
       await generateThumbHash(fixedFile, encryptionResult?.encryptionKey);
     const thumbHash = thumbHashResult.success
       ? thumbHashResult.thumbHash
       : null;
     steps.push(...thumbHashSteps);
 
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: encryptionResult?.file ?? fixedFile,
           mediaType: encryptionResult ? 'encrypted_photo' : mediaType,
           dimensions,
           uri: encryptionResult?.uri ?? uri,
           loop: false,
           uriIsReal: false,
           blobHolder: null,
           blobHash: encryptionResult?.sha256Hash,
           encryptionKey: encryptionResult?.encryptionKey,
           thumbHash,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
           shouldEncrypt,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ): Promise<mixed> {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID, encryptionKey } = upload;
     const isEncrypted =
       !!encryptionKey &&
       (upload.mediaType === 'encrypted_photo' ||
         upload.mediaType === 'encrypted_video');
 
     const steps = [...upload.steps];
     let userTime;
 
     const sendReport = (missionResult: MediaMissionResult) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const latestUpload = this.state.pendingUploads[newThreadID][localID];
       invariant(
         latestUpload,
         `pendingUpload ${localID} for ${newThreadID} missing in sendReport`,
       );
       const { serverID, messageID } = latestUpload;
       const totalTime = Date.now() - selectTime;
       userTime = userTime ? userTime : totalTime;
       const mission = { steps, result: missionResult, totalTime, userTime };
       this.queueMediaMissionReports([
         {
           mediaMission: mission,
           uploadLocalID: localID,
           uploadServerID: serverID,
           messageLocalID: messageID,
         },
       ]);
     };
 
     let uploadResult, uploadExceptionMessage;
     const uploadStart = Date.now();
     try {
       const callbacks = {
         onProgress: (percent: number) =>
           this.setProgress(threadID, localID, percent),
         abortHandler: (abort: () => void) =>
           this.handleAbortCallback(threadID, localID, abort),
       };
       if (
         this.useBlobServiceUploads &&
         (upload.mediaType === 'encrypted_photo' ||
           upload.mediaType === 'encrypted_video')
       ) {
         const { blobHash, dimensions, thumbHash } = upload;
         invariant(
           encryptionKey && blobHash && dimensions,
           'incomplete encrypted upload',
         );
         uploadResult = await this.props.blobServiceUpload({
           uploadInput: {
             blobInput: {
               type: 'file',
               file: upload.file,
             },
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
             thumbHash,
           },
           keyserverOrThreadID: threadID,
           callbacks,
         });
       } else {
         let uploadExtras = {
           ...upload.dimensions,
           loop: false,
           thumbHash: upload.thumbHash,
         };
         if (encryptionKey) {
           uploadExtras = { ...uploadExtras, encryptionKey };
         }
         uploadResult = await this.props.uploadMultimedia(
           upload.file,
           uploadExtras,
           callbacks,
         );
       }
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
     const outputMediaType = isEncrypted ? 'encrypted_photo' : result.mediaType;
 
     const successThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterSuccess =
       this.state.pendingUploads[successThreadID][localID];
     invariant(
       uploadAfterSuccess,
       `pendingUpload ${localID}/${result.id} for ${successThreadID} missing ` +
         `after upload`,
     );
     if (uploadAfterSuccess.messageID) {
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterSuccess.messageID,
           currentMediaID: localID,
           mediaUpdate: {
             id: result.id,
           },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning serverID`,
       );
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               serverID: result.id,
               blobHolder: result.blobHolder,
               abort: null,
             },
           },
         },
       };
     });
 
     if (encryptionKey) {
       const { steps: preloadSteps } = await preloadMediaResource(result.uri);
       steps.push(...preloadSteps);
     } else {
       const { steps: preloadSteps } = await preloadImage(result.uri);
       steps.push(...preloadSteps);
     }
     sendReport({ success: true });
 
     const preloadThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterPreload =
       this.state.pendingUploads[preloadThreadID][localID];
     invariant(
       uploadAfterPreload,
       `pendingUpload ${localID}/${result.id} for ${preloadThreadID} missing ` +
         `after preload`,
     );
     if (uploadAfterPreload.messageID) {
       const { mediaType, uri, dimensions, loop } = result;
       const { thumbHash } = upload;
       let mediaUpdate = {
         loop,
         dimensions,
         ...(thumbHash ? { thumbHash } : undefined),
       };
       if (!isEncrypted) {
         mediaUpdate = {
           ...mediaUpdate,
           type: mediaType,
           uri,
         };
       } else {
         mediaUpdate = {
           ...mediaUpdate,
           type: outputMediaType,
           blobURI: uri,
           encryptionKey,
         };
       }
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: result.id ?? uploadAfterPreload.localID,
           mediaUpdate,
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: outputMediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
         id: generateReportID(),
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: ?string, localUploadID: string) {
     invariant(threadID, 'threadID should be set in cancelPendingUpload');
 
     let revokeURL: ?string, abortRequest: ?() => void;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           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: { [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>) => {
+  setTypeaheadState = (newState: Partial<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ): boolean {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: 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<string>();
     const uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads: { [string]: PendingMultimediaUpload } = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     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<RawTextMessageInfo>(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/web/input/input-state.js b/web/input/input-state.js
index f19c00457..4a2e762cd 100644
--- a/web/input/input-state.js
+++ b/web/input/input-state.js
@@ -1,113 +1,113 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   type MediaType,
   type EncryptedMediaType,
   type Dimensions,
   type MediaMissionStep,
 } from 'lib/types/media-types.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type {
   MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   ThreadInfo,
   RelativeMemberInfo,
   ChatMentionCandidates,
 } from 'lib/types/thread-types.js';
 
 export type PendingMultimediaUpload = {
   +localID: string,
   // Pending uploads are assigned a serverID once they are complete
   +serverID: ?string,
   // Pending uploads are assigned a messageID once they are sent
   +messageID: ?string,
   // This is set to true if the upload fails for whatever reason
   +failed: boolean,
   +file: File,
   +mediaType: MediaType | EncryptedMediaType,
   +dimensions: ?Dimensions,
   +uri: string,
   +blobHolder: ?string,
   +blobHash: ?string,
   +encryptionKey: ?string,
   +thumbHash: ?string,
   +loop: boolean,
   // URLs created with createObjectURL aren't considered "real". The distinction
   // is required because those "fake" URLs must be disposed properly
   +uriIsReal: boolean,
   +progressPercent: number,
   // This is set once the network request begins and used if the upload is
   // cancelled
   +abort: ?() => void,
   +steps: MediaMissionStep[],
   +selectTime: number,
   +shouldEncrypt: boolean,
 };
 
 export type TypeaheadState = {
   +canBeVisible: boolean,
   +keepUpdatingThreadMembers: boolean,
   +frozenUserMentionsCandidates: $ReadOnlyArray<
     RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
   >,
   +frozenChatMentionsCandidates: ChatMentionCandidates,
   +moveChoiceUp: ?() => void,
   +moveChoiceDown: ?() => void,
   +close: ?() => void,
   +accept: ?() => void,
 };
 
 export type BaseInputState = {
   +pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   +assignedUploads: {
     [messageID: string]: $ReadOnlyArray<PendingMultimediaUpload>,
   },
   +draft: string,
   +textCursorPosition: number,
   +appendFiles: (
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     files: $ReadOnlyArray<File>,
   ) => Promise<boolean>,
   +cancelPendingUpload: (localUploadID: string) => void,
   +sendTextMessage: (
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) => Promise<void>,
   +createMultimediaMessage: (
     localID: number,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) => void,
   +setDraft: (draft: string) => void,
   +setTextCursorPosition: (newPosition: number) => void,
   +messageHasUploadFailure: (localMessageID: string) => boolean,
   +retryMultimediaMessage: (
     localMessageID: string,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) => void,
   +addReply: (text: string) => void,
   +addReplyListener: ((message: string) => void) => void,
   +removeReplyListener: ((message: string) => void) => void,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
 };
 
 export type TypeaheadInputState = {
   +typeaheadState: TypeaheadState,
-  +setTypeaheadState: ($Shape<TypeaheadState>) => void,
+  +setTypeaheadState: (Partial<TypeaheadState>) => void,
 };
 
 // This type represents the input state for a particular thread
 export type InputState = {
   ...BaseInputState,
   ...TypeaheadInputState,
 };
 
 const InputStateContext: React.Context<?InputState> =
   React.createContext<?InputState>(null);
 
 export { InputStateContext };