diff --git a/keyserver/src/fetchers/user-fetchers.js b/keyserver/src/fetchers/user-fetchers.js
index 3d0e80806..3cd4fafcd 100644
--- a/keyserver/src/fetchers/user-fetchers.js
+++ b/keyserver/src/fetchers/user-fetchers.js
@@ -1,421 +1,421 @@
 // @flow
 
 import invariant from 'invariant';
 
 import { hasMinCodeVersion } from 'lib/shared/version-utils.js';
 import type { AvatarDBContent, ClientAvatar } from 'lib/types/avatar-types.js';
 import {
   undirectedStatus,
   directedStatus,
   userRelationshipStatus,
 } from 'lib/types/relationship-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { communityThreadTypes } from 'lib/types/thread-types-enum.js';
 import type {
   UserInfos,
   CurrentUserInfo,
   OldCurrentUserInfo,
   LoggedInUserInfo,
   OldLoggedInUserInfo,
   GlobalUserInfo,
 } from 'lib/types/user-types.js';
 import { ServerError } from 'lib/utils/errors.js';
 
 import { getUploadURL } from './upload-fetchers.js';
 import { dbQuery, SQL } from '../database/database.js';
 import type { Viewer } from '../session/viewer.js';
 
 async function fetchUserInfos(
-  userIDs: string[],
+  userIDs: $ReadOnlyArray<string>,
 ): Promise<{ [id: string]: GlobalUserInfo }> {
   if (userIDs.length <= 0) {
     return {};
   }
 
   const query = SQL`
     SELECT u.id, u.username, u.avatar,
       up.id AS upload_id, up.secret AS upload_secret
     FROM users u
     LEFT JOIN uploads up
       ON up.container = u.id
     WHERE u.id IN (${userIDs})
   `;
   const [result] = await dbQuery(query);
 
   const userInfos = {};
   for (const row of result) {
     const id = row.id.toString();
     const avatar: ?AvatarDBContent = row.avatar ? JSON.parse(row.avatar) : null;
 
     let clientAvatar: ?ClientAvatar;
     if (avatar && avatar.type !== 'image') {
       clientAvatar = avatar;
     } else if (
       avatar &&
       avatar.type === 'image' &&
       row.upload_id &&
       row.upload_secret
     ) {
       const uploadID = row.upload_id.toString();
       invariant(
         uploadID === avatar.uploadID,
         'uploadID of upload should match uploadID of image avatar',
       );
       clientAvatar = {
         type: 'image',
         uri: getUploadURL(uploadID, row.upload_secret),
       };
     }
 
     userInfos[id] = clientAvatar
       ? {
           id,
           username: row.username,
           avatar: clientAvatar,
         }
       : {
           id,
           username: row.username,
         };
   }
 
   for (const userID of userIDs) {
     if (!userInfos[userID]) {
       userInfos[userID] = {
         id: userID,
         username: null,
       };
     }
   }
 
   return userInfos;
 }
 
 async function fetchKnownUserInfos(
   viewer: Viewer,
   userIDs?: $ReadOnlyArray<string>,
 ): Promise<UserInfos> {
   if (!viewer.loggedIn) {
     return {};
   }
   if (userIDs && userIDs.length === 0) {
     return {};
   }
 
   const query = SQL`
     SELECT ru.user1, ru.user2, u.username, u.avatar, ru.status AS undirected_status,
       rd1.status AS user1_directed_status, rd2.status AS user2_directed_status,
       up.id AS upload_id, up.secret AS upload_secret
     FROM relationships_undirected ru
     LEFT JOIN relationships_directed rd1
       ON rd1.user1 = ru.user1 AND rd1.user2 = ru.user2
     LEFT JOIN relationships_directed rd2
       ON rd2.user1 = ru.user2 AND rd2.user2 = ru.user1
     LEFT JOIN users u
       ON u.id != ${viewer.userID} AND (u.id = ru.user1 OR u.id = ru.user2)
     LEFT JOIN uploads up
       ON up.container != ${viewer.userID}
         AND (up.container = ru.user1 OR up.container = ru.user2)
   `;
   if (userIDs) {
     query.append(SQL`
       WHERE (ru.user1 = ${viewer.userID} AND ru.user2 IN (${userIDs})) OR
         (ru.user1 IN (${userIDs}) AND ru.user2 = ${viewer.userID})
     `);
   } else {
     query.append(SQL`
       WHERE ru.user1 = ${viewer.userID} OR ru.user2 = ${viewer.userID}
     `);
   }
   query.append(SQL`
     UNION SELECT u.id AS user1, NULL AS user2, u.username, u.avatar,
       CAST(NULL AS UNSIGNED) AS undirected_status,
       CAST(NULL AS UNSIGNED) AS user1_directed_status,
       CAST(NULL AS UNSIGNED) AS user2_directed_status,
       up.id AS upload_id, up.secret AS upload_secret
     FROM users u
     LEFT JOIN uploads up
       ON up.container = u.id
     WHERE u.id = ${viewer.userID}
   `);
   const [result] = await dbQuery(query);
 
   const userInfos = {};
   for (const row of result) {
     const user1 = row.user1.toString();
     const user2 = row.user2 ? row.user2.toString() : null;
     const id = user1 === viewer.userID && user2 ? user2 : user1;
 
     const avatar: ?AvatarDBContent = row.avatar ? JSON.parse(row.avatar) : null;
 
     let clientAvatar: ?ClientAvatar;
     if (avatar && avatar.type !== 'image') {
       clientAvatar = avatar;
     } else if (
       avatar &&
       avatar.type === 'image' &&
       row.upload_id &&
       row.upload_secret
     ) {
       const uploadID = row.upload_id.toString();
       invariant(
         uploadID === avatar.uploadID,
         'uploadID of upload should match uploadID of image avatar',
       );
       clientAvatar = {
         type: 'image',
         uri: getUploadURL(uploadID, row.upload_secret),
       };
     }
 
     const userInfo = clientAvatar
       ? {
           id,
           username: row.username,
           avatar: clientAvatar,
         }
       : {
           id,
           username: row.username,
         };
 
     if (!user2) {
       userInfos[id] = userInfo;
       continue;
     }
 
     let viewerDirectedStatus;
     let targetDirectedStatus;
     if (user1 === viewer.userID) {
       viewerDirectedStatus = row.user1_directed_status;
       targetDirectedStatus = row.user2_directed_status;
     } else {
       viewerDirectedStatus = row.user2_directed_status;
       targetDirectedStatus = row.user1_directed_status;
     }
 
     const viewerBlockedTarget = viewerDirectedStatus === directedStatus.BLOCKED;
     const targetBlockedViewer = targetDirectedStatus === directedStatus.BLOCKED;
     const friendshipExists = row.undirected_status === undirectedStatus.FRIEND;
     const viewerRequestedTargetFriendship =
       viewerDirectedStatus === directedStatus.PENDING_FRIEND;
     const targetRequestedViewerFriendship =
       targetDirectedStatus === directedStatus.PENDING_FRIEND;
 
     let relationshipStatus;
     if (viewerBlockedTarget && targetBlockedViewer) {
       relationshipStatus = userRelationshipStatus.BOTH_BLOCKED;
     } else if (targetBlockedViewer) {
       relationshipStatus = userRelationshipStatus.BLOCKED_VIEWER;
     } else if (viewerBlockedTarget) {
       relationshipStatus = userRelationshipStatus.BLOCKED_BY_VIEWER;
     } else if (friendshipExists) {
       relationshipStatus = userRelationshipStatus.FRIEND;
     } else if (targetRequestedViewerFriendship) {
       relationshipStatus = userRelationshipStatus.REQUEST_RECEIVED;
     } else if (viewerRequestedTargetFriendship) {
       relationshipStatus = userRelationshipStatus.REQUEST_SENT;
     }
 
     userInfos[id] = userInfo;
     if (relationshipStatus) {
       userInfos[id].relationshipStatus = relationshipStatus;
     }
 
     if (relationshipStatus && !row.username) {
       console.warn(
         `user ${viewer.userID} has ${relationshipStatus} relationship with ` +
           `anonymous user ${id}`,
       );
     }
   }
 
   return userInfos;
 }
 
 async function verifyUserIDs(
   userIDs: $ReadOnlyArray<string>,
 ): Promise<string[]> {
   if (userIDs.length === 0) {
     return [];
   }
   const query = SQL`SELECT id FROM users WHERE id IN (${userIDs})`;
   const [result] = await dbQuery(query);
   return result.map(row => row.id.toString());
 }
 
 async function verifyUserOrCookieIDs(
   ids: $ReadOnlyArray<string>,
 ): Promise<string[]> {
   if (ids.length === 0) {
     return [];
   }
   const query = SQL`
     SELECT id FROM users WHERE id IN (${ids})
     UNION SELECT id FROM cookies WHERE id IN (${ids})
   `;
   const [result] = await dbQuery(query);
   return result.map(row => row.id.toString());
 }
 
 async function fetchCurrentUserInfo(
   viewer: Viewer,
 ): Promise<OldCurrentUserInfo | CurrentUserInfo> {
   if (!viewer.loggedIn) {
     return ({ id: viewer.cookieID, anonymous: true }: CurrentUserInfo);
   }
   const currentUserInfo = await fetchLoggedInUserInfo(viewer);
   return currentUserInfo;
 }
 
 async function fetchLoggedInUserInfo(
   viewer: Viewer,
 ): Promise<OldLoggedInUserInfo | LoggedInUserInfo> {
   const userQuery = SQL`
     SELECT u.id, u.username, u.avatar,
       up.id AS upload_id, up.secret AS upload_secret
     FROM users u
     LEFT JOIN uploads up
       ON up.container = u.id
     WHERE u.id = ${viewer.userID}
   `;
 
   const settingsQuery = SQL`
     SELECT name, data
     FROM settings
     WHERE user = ${viewer.userID}
   `;
 
   const [[userResult], [settingsResult]] = await Promise.all([
     dbQuery(userQuery),
     dbQuery(settingsQuery),
   ]);
 
   const [userRow] = userResult;
 
   const stillExpectsEmailFields = !hasMinCodeVersion(viewer.platformDetails, {
     native: 87,
   });
 
   if (!userRow) {
     throw new ServerError('unknown_error');
   }
 
   const id = userRow.id.toString();
   const { username, upload_id, upload_secret } = userRow;
 
   if (stillExpectsEmailFields) {
     return {
       id,
       username,
       email: 'removed from DB',
       emailVerified: true,
     };
   }
 
   let loggedInUserInfo: LoggedInUserInfo = {
     id,
     username,
   };
 
   const avatar: ?AvatarDBContent = userRow.avatar
     ? JSON.parse(userRow.avatar)
     : null;
 
   let clientAvatar: ?ClientAvatar;
   if (avatar && avatar.type !== 'image') {
     clientAvatar = avatar;
   } else if (avatar && avatar.type === 'image' && upload_id && upload_secret) {
     const uploadID = upload_id.toString();
     invariant(
       uploadID === avatar.uploadID,
       'uploadID of upload should match uploadID of image avatar',
     );
     clientAvatar = {
       type: 'image',
       uri: getUploadURL(uploadID, upload_secret),
     };
   }
 
   if (avatar) {
     loggedInUserInfo = { ...loggedInUserInfo, avatar: clientAvatar };
   }
 
   const featureGateSettings = !hasMinCodeVersion(viewer.platformDetails, {
     native: 1000,
   });
 
   if (featureGateSettings) {
     return loggedInUserInfo;
   }
 
   const settings = settingsResult.reduce((prev, curr) => {
     prev[curr.name] = curr.data;
     return prev;
   }, {});
   loggedInUserInfo = { ...loggedInUserInfo, settings };
 
   return loggedInUserInfo;
 }
 
 async function fetchAllUserIDs(): Promise<string[]> {
   const query = SQL`SELECT id FROM users`;
   const [result] = await dbQuery(query);
   return result.map(row => row.id.toString());
 }
 
 async function fetchUsername(id: string): Promise<?string> {
   const query = SQL`SELECT username FROM users WHERE id = ${id}`;
   const [result] = await dbQuery(query);
   if (result.length === 0) {
     return null;
   }
   const row = result[0];
   return row.username;
 }
 
 async function fetchKeyserverAdminID(): Promise<?string> {
   const changeRoleExtractString = `$.${threadPermissions.CHANGE_ROLE}`;
   const query = SQL`
     SELECT m.user FROM memberships m
     INNER JOIN roles r ON m.role = r.id
     INNER JOIN threads t ON r.thread = t.id
     WHERE r.name = "Admins" AND 
       t.type IN (${communityThreadTypes}) AND 
       JSON_EXTRACT(r.permissions, ${changeRoleExtractString}) IS TRUE
   `;
   const [result] = await dbQuery(query);
   if (result.length === 0) {
     return null;
   }
   if (result.length > 1) {
     console.warn('more than one community admin found');
   }
 
   return result[0].user;
 }
 
 async function fetchUserIDForEthereumAddress(
   address: string,
 ): Promise<?string> {
   const query = SQL`
     SELECT id
     FROM users
     WHERE LCASE(ethereum_address) = LCASE(${address})
   `;
   const [result] = await dbQuery(query);
   return result.length === 0 ? null : result[0].id.toString();
 }
 
 export {
   fetchUserInfos,
   fetchLoggedInUserInfo,
   verifyUserIDs,
   verifyUserOrCookieIDs,
   fetchCurrentUserInfo,
   fetchAllUserIDs,
   fetchUsername,
   fetchKnownUserInfos,
   fetchKeyserverAdminID,
   fetchUserIDForEthereumAddress,
 };
diff --git a/keyserver/src/responders/website-responders.js b/keyserver/src/responders/website-responders.js
index 80434d648..aaa7053d0 100644
--- a/keyserver/src/responders/website-responders.js
+++ b/keyserver/src/responders/website-responders.js
@@ -1,750 +1,782 @@
 // @flow
 
 import html from 'common-tags/lib/html/index.js';
 import { detect as detectBrowser } from 'detect-browser';
 import type { $Response, $Request } from 'express';
 import fs from 'fs';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import * as React from 'react';
 // eslint-disable-next-line import/extensions
 import ReactDOMServer from 'react-dom/server';
 import t from 'tcomb';
 import { promisify } from 'util';
 
 import { baseLegalPolicies } from 'lib/facts/policies.js';
 import stores from 'lib/facts/stores.js';
 import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js';
 import { freshMessageStore } from 'lib/reducers/message-reducer.js';
 import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js';
 import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js';
 import {
   threadHasPermission,
   threadIsPending,
   parsePendingThreadID,
   createPendingThread,
 } from 'lib/shared/thread-utils.js';
 import { defaultWebEnabledApps } from 'lib/types/enabled-apps.js';
 import { entryStoreValidator } from 'lib/types/entry-types.js';
 import { defaultCalendarFilters } from 'lib/types/filter-types.js';
 import {
   defaultNumberPerThread,
   messageStoreValidator,
 } from 'lib/types/message-types.js';
 import { defaultEnabledReports } from 'lib/types/report-types.js';
 import { defaultConnectionInfo } from 'lib/types/socket-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { threadStoreValidator } from 'lib/types/thread-types.js';
 import {
   currentUserInfoValidator,
   userInfosValidator,
 } from 'lib/types/user-types.js';
 import { currentDateInTimeZone } from 'lib/utils/date-utils.js';
 import { ServerError } from 'lib/utils/errors.js';
 import { promiseAll } from 'lib/utils/promises.js';
 import { defaultNotifPermissionAlertInfo } from 'lib/utils/push-alerts.js';
+import { infoFromURL } from 'lib/utils/url-utils.js';
 import { tBool, tNumber, tShape, tString } from 'lib/utils/validation-utils.js';
 import getTitle from 'web/title/getTitle.js';
 import { navInfoValidator } from 'web/types/nav-types.js';
 import { navInfoFromURL } from 'web/url-utils.js';
 
 import { fetchEntryInfos } from '../fetchers/entry-fetchers.js';
 import { fetchMessageInfos } from '../fetchers/message-fetchers.js';
 import { hasAnyNotAcknowledgedPolicies } from '../fetchers/policy-acknowledgment-fetchers.js';
 import { fetchThreadInfos } from '../fetchers/thread-fetchers.js';
 import {
   fetchCurrentUserInfo,
   fetchKnownUserInfos,
+  fetchUserInfos,
 } from '../fetchers/user-fetchers.js';
 import { getWebPushConfig } from '../push/providers.js';
 import { setNewSession } from '../session/cookies.js';
 import { Viewer } from '../session/viewer.js';
 import { streamJSON, waitForStream } from '../utils/json-stream.js';
 import {
   getAppURLFactsFromRequestURL,
   getCommAppURLFacts,
 } from '../utils/urls.js';
 import { validateOutput } from '../utils/validation-utils.js';
 
 const { renderToNodeStream } = ReactDOMServer;
 
 const access = promisify(fs.access);
 const readFile = promisify(fs.readFile);
 
 const googleFontsURL =
   'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Inter:wght@400;500;600&display=swap';
 const localFontsURL = 'fonts/local-fonts.css';
 async function getFontsURL() {
   try {
     await access(localFontsURL);
     return localFontsURL;
   } catch {
     return googleFontsURL;
   }
 }
 
 type AssetInfo = {
   +jsURL: string,
   +fontsURL: string,
   +cssInclude: string,
   +olmFilename: string,
   +sqljsFilename: string,
   +opaqueURL: string,
 };
 let assetInfo: ?AssetInfo = null;
 async function getAssetInfo() {
   if (assetInfo) {
     return assetInfo;
   }
   if (process.env.NODE_ENV === 'development') {
     const fontsURL = await getFontsURL();
     assetInfo = {
       jsURL: 'http://localhost:8080/dev.build.js',
       fontsURL,
       cssInclude: '',
       olmFilename: '',
       sqljsFilename: '',
       opaqueURL: 'http://localhost:8080/opaque-ke.wasm',
     };
     return assetInfo;
   }
   try {
     const manifestString = await readFile('../web/dist/manifest.json', 'utf8');
     const manifest = JSON.parse(manifestString);
     const webworkersManifestString = await readFile(
       '../web/dist/webworkers/manifest.json',
       'utf8',
     );
     const webworkersManifest = JSON.parse(webworkersManifestString);
     assetInfo = {
       jsURL: `compiled/${manifest['browser.js']}`,
       fontsURL: googleFontsURL,
       cssInclude: html`
         <link
           rel="stylesheet"
           type="text/css"
           href="compiled/${manifest['browser.css']}"
         />
       `,
       olmFilename: manifest['olm.wasm'],
       sqljsFilename: webworkersManifest['sql-wasm.wasm'],
       opaqueURL: `compiled/${manifest['comm_opaque2_wasm_bg.wasm']}`,
     };
     return assetInfo;
   } catch {
     throw new Error(
       'Could not load manifest.json for web build. ' +
         'Did you forget to run `yarn dev` in the web folder?',
     );
   }
 }
 
 let webpackCompiledRootComponent: ?React.ComponentType<{}> = null;
 async function getWebpackCompiledRootComponentForSSR() {
   if (webpackCompiledRootComponent) {
     return webpackCompiledRootComponent;
   }
   try {
     // $FlowFixMe web/dist doesn't always exist
     const webpackBuild = await import('web/dist/app.build.cjs');
     webpackCompiledRootComponent = webpackBuild.app.default;
     return webpackCompiledRootComponent;
   } catch {
     throw new Error(
       'Could not load app.build.cjs. ' +
         'Did you forget to run `yarn dev` in the web folder?',
     );
   }
 }
 
 const initialReduxStateValidator = tShape({
   navInfo: navInfoValidator,
   deviceID: t.Nil,
   currentUserInfo: currentUserInfoValidator,
   draftStore: t.irreducible('default draftStore', _isEqual({ drafts: {} })),
   sessionID: t.maybe(t.String),
   entryStore: entryStoreValidator,
   threadStore: threadStoreValidator,
   userStore: tShape({
     userInfos: userInfosValidator,
     inconsistencyReports: t.irreducible(
       'default inconsistencyReports',
       _isEqual([]),
     ),
   }),
   messageStore: messageStoreValidator,
   updatesCurrentAsOf: t.Number,
   loadingStatuses: t.irreducible('default loadingStatuses', _isEqual({})),
   calendarFilters: t.irreducible(
     'defaultCalendarFilters',
     _isEqual(defaultCalendarFilters),
   ),
   communityPickerStore: t.irreducible(
     'default communityPickerStore',
     _isEqual({ chat: null, calendar: null }),
   ),
   urlPrefix: tString(''),
   windowDimensions: t.irreducible(
     'default windowDimensions',
     _isEqual({ width: 0, height: 0 }),
   ),
   baseHref: t.String,
   notifPermissionAlertInfo: t.irreducible(
     'default notifPermissionAlertInfo',
     _isEqual(defaultNotifPermissionAlertInfo),
   ),
   connection: tShape({
     status: tString('connecting'),
     queuedActivityUpdates: t.irreducible(
       'default queuedActivityUpdates',
       _isEqual([]),
     ),
     actualizedCalendarQuery: tShape({
       startDate: t.String,
       endDate: t.String,
       filters: t.irreducible(
         'default filters',
         _isEqual(defaultCalendarFilters),
       ),
     }),
     lateResponses: t.irreducible('default lateResponses', _isEqual([])),
     showDisconnectedBar: tBool(false),
   }),
   watchedThreadIDs: t.irreducible('default watchedThreadIDs', _isEqual([])),
   lifecycleState: tString('active'),
   enabledApps: t.irreducible(
     'defaultWebEnabledApps',
     _isEqual(defaultWebEnabledApps),
   ),
   reportStore: t.irreducible(
     'default reportStore',
     _isEqual({
       enabledReports: defaultEnabledReports,
       queuedReports: [],
     }),
   ),
   nextLocalID: tNumber(0),
   cookie: t.Nil,
   deviceToken: t.Nil,
   dataLoaded: t.Boolean,
   windowActive: tBool(true),
   userPolicies: t.irreducible('default userPolicies', _isEqual({})),
   cryptoStore: t.irreducible(
     'default cryptoStore',
     _isEqual({
       primaryIdentityKeys: null,
       notificationIdentityKeys: null,
     }),
   ),
   pushApiPublicKey: t.maybe(t.String),
   _persist: t.Nil,
   commServicesAccessToken: t.Nil,
 });
 
 async function websiteResponder(
   viewer: Viewer,
   req: $Request,
   res: $Response,
 ): Promise<void> {
   const appURLFacts = getAppURLFactsFromRequestURL(req.originalUrl);
   const { basePath, baseDomain } = appURLFacts;
   const baseURL = basePath.replace(/\/$/, '');
   const baseHref = baseDomain + baseURL;
 
   const loadingPromise = getWebpackCompiledRootComponentForSSR();
   const hasNotAcknowledgedPoliciesPromise = hasAnyNotAcknowledgedPolicies(
     viewer.id,
     baseLegalPolicies,
   );
 
-  let initialNavInfo;
-  try {
-    initialNavInfo = navInfoFromURL(req.url, {
-      now: currentDateInTimeZone(viewer.timeZone),
-    });
-  } catch (e) {
-    throw new ServerError(e.message);
-  }
+  const initialNavInfoPromise = (async () => {
+    try {
+      const urlInfo = infoFromURL(req.url);
+
+      let backupInfo = {
+        now: currentDateInTimeZone(viewer.timeZone),
+      };
+      // Some user ids in selectedUserList might not exist in the userStore
+      // (e.g. they were included in the results of the user search endpoint)
+      // Because of that we keep their userInfos inside the navInfo.
+      if (urlInfo.selectedUserList) {
+        const fetchedUserInfos = await fetchUserInfos(urlInfo.selectedUserList);
+        const userInfos = {};
+        for (const userID in fetchedUserInfos) {
+          const userInfo = fetchedUserInfos[userID];
+          if (userInfo.username) {
+            userInfos[userID] = userInfo;
+          }
+        }
+        backupInfo = { userInfos, ...backupInfo };
+      }
+      return navInfoFromURL(urlInfo, backupInfo);
+    } catch (e) {
+      throw new ServerError(e.message);
+    }
+  })();
 
-  const calendarQuery = {
-    startDate: initialNavInfo.startDate,
-    endDate: initialNavInfo.endDate,
-    filters: defaultCalendarFilters,
-  };
+  const calendarQueryPromise = (async () => {
+    const initialNavInfo = await initialNavInfoPromise;
+    return {
+      startDate: initialNavInfo.startDate,
+      endDate: initialNavInfo.endDate,
+      filters: defaultCalendarFilters,
+    };
+  })();
   const messageSelectionCriteria = { joinedThreads: true };
   const initialTime = Date.now();
 
   const assetInfoPromise = getAssetInfo();
   const threadInfoPromise = fetchThreadInfos(viewer);
   const messageInfoPromise = fetchMessageInfos(
     viewer,
     messageSelectionCriteria,
     defaultNumberPerThread,
   );
-  const entryInfoPromise = fetchEntryInfos(viewer, [calendarQuery]);
+  const entryInfoPromise = (async () => {
+    const calendarQuery = await calendarQueryPromise;
+    return await fetchEntryInfos(viewer, [calendarQuery]);
+  })();
   const currentUserInfoPromise = fetchCurrentUserInfo(viewer);
   const userInfoPromise = fetchKnownUserInfos(viewer);
 
   const sessionIDPromise = (async () => {
+    const calendarQuery = await calendarQueryPromise;
     if (viewer.loggedIn) {
       await setNewSession(viewer, calendarQuery, initialTime);
     }
     return viewer.sessionID;
   })();
 
   const threadStorePromise = (async () => {
     const [{ threadInfos }, hasNotAcknowledgedPolicies] = await Promise.all([
       threadInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     return { threadInfos: hasNotAcknowledgedPolicies ? {} : threadInfos };
   })();
   const messageStorePromise = (async () => {
     const [
       { threadInfos },
       { rawMessageInfos, truncationStatuses },
       hasNotAcknowledgedPolicies,
     ] = await Promise.all([
       threadInfoPromise,
       messageInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     if (hasNotAcknowledgedPolicies) {
       return {
         messages: {},
         threads: {},
         local: {},
         currentAsOf: 0,
       };
     }
     const { messageStore: freshStore } = freshMessageStore(
       rawMessageInfos,
       truncationStatuses,
       mostRecentMessageTimestamp(rawMessageInfos, initialTime),
       threadInfos,
     );
     return freshStore;
   })();
   const entryStorePromise = (async () => {
     const [{ rawEntryInfos }, hasNotAcknowledgedPolicies] = await Promise.all([
       entryInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     if (hasNotAcknowledgedPolicies) {
       return {
         entryInfos: {},
         daysToEntries: {},
         lastUserInteractionCalendar: 0,
       };
     }
     return {
       entryInfos: _keyBy('id')(rawEntryInfos),
       daysToEntries: daysToEntriesFromEntryInfos(rawEntryInfos),
       lastUserInteractionCalendar: initialTime,
     };
   })();
   const userStorePromise = (async () => {
     const [userInfos, hasNotAcknowledgedPolicies] = await Promise.all([
       userInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     return {
       userInfos: hasNotAcknowledgedPolicies ? {} : userInfos,
       inconsistencyReports: [],
     };
   })();
 
   const navInfoPromise = (async () => {
-    const [{ threadInfos }, messageStore, currentUserInfo, userStore] =
-      await Promise.all([
-        threadInfoPromise,
-        messageStorePromise,
-        currentUserInfoPromise,
-        userStorePromise,
-      ]);
-    const finalNavInfo = initialNavInfo;
+    const [
+      { threadInfos },
+      messageStore,
+      currentUserInfo,
+      userStore,
+      finalNavInfo,
+    ] = await Promise.all([
+      threadInfoPromise,
+      messageStorePromise,
+      currentUserInfoPromise,
+      userStorePromise,
+      initialNavInfoPromise,
+    ]);
 
     const requestedActiveChatThreadID = finalNavInfo.activeChatThreadID;
     if (
       requestedActiveChatThreadID &&
       !threadIsPending(requestedActiveChatThreadID) &&
       !threadHasPermission(
         threadInfos[requestedActiveChatThreadID],
         threadPermissions.VISIBLE,
       )
     ) {
       finalNavInfo.activeChatThreadID = null;
     }
 
     if (!finalNavInfo.activeChatThreadID) {
       const mostRecentThread = mostRecentlyReadThread(
         messageStore,
         threadInfos,
       );
       if (mostRecentThread) {
         finalNavInfo.activeChatThreadID = mostRecentThread;
       }
     }
 
     if (
       finalNavInfo.activeChatThreadID &&
       threadIsPending(finalNavInfo.activeChatThreadID) &&
       finalNavInfo.pendingThread?.id !== finalNavInfo.activeChatThreadID
     ) {
       const pendingThreadData = parsePendingThreadID(
         finalNavInfo.activeChatThreadID,
       );
       if (
         pendingThreadData &&
         pendingThreadData.threadType !== threadTypes.SIDEBAR &&
         currentUserInfo.id
       ) {
         const { userInfos } = userStore;
         const members = [...pendingThreadData.memberIDs, currentUserInfo.id]
           .map(id => {
             const userInfo = userInfos[id];
             if (!userInfo || !userInfo.username) {
               return undefined;
             }
             const { username } = userInfo;
             return { id, username };
           })
           .filter(Boolean);
         const newPendingThread = createPendingThread({
           viewerID: currentUserInfo.id,
           threadType: pendingThreadData.threadType,
           members,
         });
         finalNavInfo.activeChatThreadID = newPendingThread.id;
         finalNavInfo.pendingThread = newPendingThread;
       }
     }
 
     return finalNavInfo;
   })();
   const currentAsOfPromise = (async () => {
     const hasNotAcknowledgedPolicies = await hasNotAcknowledgedPoliciesPromise;
     return hasNotAcknowledgedPolicies ? 0 : initialTime;
   })();
 
   const pushApiPublicKeyPromise = (async () => {
     const pushConfig = await getWebPushConfig();
     if (!pushConfig) {
       if (process.env.NODE_ENV !== 'development') {
         console.warn('keyserver/secrets/web_push_config.json should exist');
       }
       return null;
     }
     return pushConfig.publicKey;
   })();
 
   const { jsURL, fontsURL, cssInclude, olmFilename, sqljsFilename, opaqueURL } =
     await assetInfoPromise;
 
   // prettier-ignore
   res.write(html`
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="utf-8" />
         <title>${getTitle(0)}</title>
         <base href="${basePath}" />
         <link rel="stylesheet" type="text/css" href="${fontsURL}" />
         ${cssInclude}
         <link
           rel="apple-touch-icon"
           sizes="180x180"
           href="apple-touch-icon.png"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="32x32"
           href="favicon-32x32.png"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="16x16"
           href="favicon-16x16.png"
         />
         <link rel="manifest" href="site.webmanifest" />
         <meta name="apple-mobile-web-app-title" content="Comm" />
         <meta name="application-name" content="Comm" />
         <meta name="msapplication-TileColor" content="#b91d47" />
         <meta name="theme-color" content="#b91d47" />
       </head>
       <body>
         <div id="react-root">
   `);
 
   const Loading = await loadingPromise;
   const reactStream = renderToNodeStream(<Loading />);
   reactStream.pipe(res, { end: false });
 
   await waitForStream(reactStream);
   res.write(html`
     </div>
     <script>
       var preloadedState =
   `);
 
   const initialReduxState = await promiseAll({
     navInfo: navInfoPromise,
     deviceID: null,
     currentUserInfo: currentUserInfoPromise,
     draftStore: { drafts: {} },
     sessionID: sessionIDPromise,
     entryStore: entryStorePromise,
     threadStore: threadStorePromise,
     userStore: userStorePromise,
     messageStore: messageStorePromise,
     updatesCurrentAsOf: currentAsOfPromise,
     loadingStatuses: {},
     calendarFilters: defaultCalendarFilters,
     communityPickerStore: { chat: null, calendar: null },
     // We can use paths local to the <base href> on web
     urlPrefix: '',
     windowDimensions: { width: 0, height: 0 },
     baseHref,
     notifPermissionAlertInfo: defaultNotifPermissionAlertInfo,
-    connection: {
+    connection: (async () => ({
       ...defaultConnectionInfo(viewer.platform ?? 'web', viewer.timeZone),
-      actualizedCalendarQuery: calendarQuery,
-    },
+      actualizedCalendarQuery: await calendarQueryPromise,
+    }))(),
     watchedThreadIDs: [],
     lifecycleState: 'active',
     enabledApps: defaultWebEnabledApps,
     reportStore: {
       enabledReports: defaultEnabledReports,
       queuedReports: [],
     },
     nextLocalID: 0,
     cookie: undefined,
     deviceToken: null,
     dataLoaded: viewer.loggedIn,
     windowActive: true,
     userPolicies: {},
     cryptoStore: {
       primaryIdentityKeys: null,
       notificationIdentityKeys: null,
     },
     pushApiPublicKey: pushApiPublicKeyPromise,
     _persist: null,
     commServicesAccessToken: null,
   });
   const validatedInitialReduxState = validateOutput(
     viewer.platformDetails,
     initialReduxStateValidator,
     initialReduxState,
   );
   const jsonStream = streamJSON(res, validatedInitialReduxState);
 
   await waitForStream(jsonStream);
   res.end(html`
     ;
           var baseURL = "${baseURL}";
           var olmFilename = "${olmFilename}";
           var sqljsFilename = "${sqljsFilename}";
           var opaqueURL = "${opaqueURL}";
         </script>
         <script src="${jsURL}"></script>
       </body>
     </html>
   `);
 }
 
 const inviteSecretRegex = /^[a-z0-9]+$/i;
 
 async function inviteResponder(req: $Request, res: $Response): Promise<void> {
   const { secret } = req.params;
   const userAgent = req.get('User-Agent');
   const detectionResult = detectBrowser(userAgent);
   if (detectionResult.os === 'Android OS') {
     const isSecretValid = inviteSecretRegex.test(secret);
     const referrer = isSecretValid
       ? `&referrer=${encodeURIComponent(`utm_source=invite/${secret}`)}`
       : '';
     const redirectUrl = `${stores.googlePlayUrl}${referrer}`;
     res.writeHead(301, {
       Location: redirectUrl,
     });
     res.end();
     return;
   } else if (detectionResult.os !== 'iOS') {
     const baseRoutePath = getCommAppURLFacts()?.baseRoutePath;
     const redirectUrl = `${baseRoutePath ?? '/'}handle/invite/${secret}`;
     res.writeHead(301, {
       Location: redirectUrl,
     });
     res.end();
     return;
   }
   const fontsURL = await getFontsURL();
   res.end(html`
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="utf-8" />
         <title>Comm</title>
         <link rel="stylesheet" type="text/css" href="/${fontsURL}" />
         <style>
           * {
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             box-sizing: border-box;
             padding: 0;
             margin: 0;
           }
 
           html {
             height: 100%;
             font-size: 112.5%;
           }
 
           body {
             font-family: 'Inter', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen',
               'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
               ui-sans-serif;
             background: #0a0a0a url('/images/invite_link_background.png')
               no-repeat;
             background-size: cover;
             color: #ffffff;
             display: flex;
             flex-direction: column;
             justify-content: space-around;
             align-items: center;
             height: 100%;
             padding: 1.6rem;
             font-size: 1.8rem;
             line-height: 2.4rem;
             font-weight: 500;
           }
 
           section {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: space-between;
             width: 100%;
           }
 
           .card {
             width: 100%;
             padding: 3.2rem 1.6rem;
             gap: 4rem;
             background-color: #1f1f1f;
             border-radius: 1.6rem;
           }
 
           .buttons {
             gap: 1.2rem;
           }
 
           h1 {
             font-size: 3.6rem;
             line-height: 1.5;
             font-weight: 500;
             font-family: 'IBM Plex Sans', sans-serif;
           }
 
           p {
             text-align: center;
           }
 
           .separator {
             border: 1px solid #404040;
             width: 100%;
           }
 
           .button {
             all: unset;
             box-sizing: border-box;
             display: flex;
             justify-content: center;
             align-items: center;
             width: 100%;
             padding: 1.7rem;
             border-radius: 0.4rem;
             border: 1px solid transparent;
             background-color: #6d49ab;
             font-size: 1.6rem;
             line-height: 1.5;
           }
 
           .button.secondary {
             background-color: #1f1f1f;
             border-color: #ffffff;
           }
 
           .link {
             all: unset;
             box-sizing: border-box;
             display: flex;
             align-items: center;
           }
 
           .link-text {
             text-decoration-line: underline;
           }
 
           .logo-container {
             background-color: #0a0a0a;
             width: 4.2rem;
             height: 4.2rem;
             display: flex;
             justify-content: center;
             align-items: center;
             border-radius: 50%;
           }
 
           .logo {
             height: 2.6rem;
           }
 
           .arrow {
             width: 1.8rem;
             height: 1.8rem;
           }
         </style>
       </head>
       <body>
         <div></div>
         <section class="card">
           <section>
             <div class="logo-container">
               <img
                 src="/images/loading_logo.svg"
                 alt="Comm logo"
                 class="logo"
               />
             </div>
             <h1>Comm</h1>
           </section>
           <p>
             To join this community, download the Comm app and reopen this invite
             link
           </p>
           <div class="separator"></div>
           <section class="buttons">
             <a class="button" href="${stores.appStoreUrl}">Download Comm</a>
             <a class="button secondary" href="/invite/${secret}">
               Invite Link
             </a>
           </section>
         </section>
         <a class="link" href="https://comm.app/">
           <span class="link-text">Visit Comm’s website</span>
           <img
             src="/images/arrow_up_right.svg"
             alt="arrow up right"
             class="arrow"
           />
         </a>
       </body>
     </html>
   `);
 }
 
 export { websiteResponder, inviteResponder };
diff --git a/web/app.react.js b/web/app.react.js
index b3412c919..463882723 100644
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -1,357 +1,359 @@
 // @flow
 
 import 'basscss/css/basscss.min.css';
 import './theme.css';
 import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
 import classnames from 'classnames';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useDispatch } from 'react-redux';
 import { WagmiConfig } from 'wagmi';
 
 import {
   fetchEntriesActionTypes,
   updateCalendarQueryActionTypes,
 } from 'lib/actions/entry-actions.js';
 import {
   ModalProvider,
   useModalContext,
 } from 'lib/components/modal-provider.react.js';
 import { webAndKeyserverCodeVersion } from 'lib/facts/version.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { registerConfig } from 'lib/utils/config.js';
+import { infoFromURL } from 'lib/utils/url-utils.js';
 import { WagmiENSCacheProvider, wagmiClient } from 'lib/utils/wagmi-utils.js';
 
 import Calendar from './calendar/calendar.react.js';
 import Chat from './chat/chat.react.js';
 import { EditModalProvider } from './chat/edit-message-provider.js';
 import { TooltipProvider } from './chat/tooltip-provider.js';
 import NavigationArrows from './components/navigation-arrows.react.js';
 import { initOpaque } from './crypto/opaque-utils.js';
 import electron from './electron.js';
 import InputStateContainer from './input/input-state-container.react.js';
 import InviteLinkHandler from './invite-links/invite-link-handler.react.js';
 import LoadingIndicator from './loading-indicator.react.js';
 import { MenuProvider } from './menu-provider.react.js';
 import UpdateModalHandler from './modals/update-modal.react.js';
 import SettingsSwitcher from './navigation-panels/settings-switcher.react.js';
 import Topbar from './navigation-panels/topbar.react.js';
 import useBadgeHandler from './push-notif/badge-handler.react.js';
 import { PushNotificationsHandler } from './push-notif/push-notifs-handler.js';
 import { updateNavInfoActionType } from './redux/action-types.js';
 import DeviceIDUpdater from './redux/device-id-updater.js';
 import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler.js';
 import DisconnectedBar from './redux/disconnected-bar.js';
 import FocusHandler from './redux/focus-handler.react.js';
 import { persistConfig } from './redux/persist.js';
 import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js';
 import { useSelector } from './redux/redux-utils.js';
 import VisibilityHandler from './redux/visibility-handler.react.js';
 import history from './router-history.js';
 import AccountSettings from './settings/account-settings.react.js';
 import DangerZone from './settings/danger-zone.react.js';
 import CommunityPicker from './sidebar/community-picker.react.js';
 import Splash from './splash/splash.react.js';
 import './typography.css';
 import css from './style.css';
 import { type NavInfo } from './types/nav-types.js';
 import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js';
 
 initOpaque();
 
 // We want Webpack's css-loader and style-loader to handle the Fontawesome CSS,
 // so we disable the autoAddCss logic and import the CSS file. Otherwise every
 // icon flashes huge for a second before the CSS is loaded.
 import '@fortawesome/fontawesome-svg-core/styles.css';
 faConfig.autoAddCss = false;
 
 registerConfig({
   // We can't securely cache credentials on web, so we have no way to recover
   // from a cookie invalidation
   resolveInvalidatedCookie: null,
   // We use httponly cookies on web to protect against XSS attacks, so we have
   // no access to the cookies from JavaScript
   setCookieOnRequest: false,
   setSessionIDOnRequest: true,
   // Never reset the calendar range
   calendarRangeInactivityLimit: null,
   platformDetails: {
     platform: electron?.platform ?? 'web',
     codeVersion: webAndKeyserverCodeVersion,
     stateVersion: persistConfig.version,
   },
 });
 
 type BaseProps = {
   +location: {
     +pathname: string,
     ...
   },
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +navInfo: NavInfo,
   +entriesLoadingStatus: LoadingStatus,
   +loggedIn: boolean,
   +activeThreadCurrentlyUnread: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +modals: $ReadOnlyArray<React.Node>,
 };
 class App extends React.PureComponent<Props> {
   componentDidMount() {
     const {
       navInfo,
       location: { pathname },
       loggedIn,
     } = this.props;
     const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
     if (pathname !== newURL) {
       history.replace(newURL);
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     const {
       navInfo,
       location: { pathname },
       loggedIn,
     } = this.props;
     if (!_isEqual(navInfo)(prevProps.navInfo)) {
       const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
       if (newURL !== pathname) {
         history.push(newURL);
       }
     } else if (pathname !== prevProps.location.pathname) {
-      const newNavInfo = navInfoFromURL(pathname, { navInfo });
+      const urlInfo = infoFromURL(pathname);
+      const newNavInfo = navInfoFromURL(urlInfo, { navInfo });
       if (!_isEqual(newNavInfo)(navInfo)) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: newNavInfo,
         });
       }
     } else if (loggedIn !== prevProps.loggedIn) {
       const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
       if (newURL !== pathname) {
         history.replace(newURL);
       }
     }
     if (loggedIn !== prevProps.loggedIn) {
       electron?.clearHistory();
     }
   }
 
   onWordmarkClicked = () => {
     this.props.dispatch({
       type: updateNavInfoActionType,
       payload: { tab: 'chat' },
     });
   };
 
   render() {
     let content;
     if (this.props.loggedIn) {
       content = this.renderMainContent();
     } else {
       content = <Splash />;
     }
     return (
       <DndProvider backend={HTML5Backend}>
         <EditModalProvider>
           <TooltipProvider>
             <MenuProvider>
               <WagmiConfig client={wagmiClient}>
                 <WagmiENSCacheProvider>
                   <FocusHandler />
                   <VisibilityHandler />
                   <DeviceIDUpdater />
                   <PolicyAcknowledgmentHandler />
                   <PushNotificationsHandler />
                   <InviteLinkHandler />
                   {content}
                   {this.props.modals}
                 </WagmiENSCacheProvider>
               </WagmiConfig>
             </MenuProvider>
           </TooltipProvider>
         </EditModalProvider>
       </DndProvider>
     );
   }
 
   onHeaderDoubleClick = () => electron?.doubleClickTopBar();
   stopDoubleClickPropagation = electron ? e => e.stopPropagation() : null;
 
   renderMainContent() {
     const mainContent = this.getMainContentWithSwitcher();
 
     let navigationArrows = null;
     if (electron) {
       navigationArrows = <NavigationArrows />;
     }
 
     const headerClasses = classnames({
       [css.header]: true,
       [css['electron-draggable']]: electron,
     });
 
     const wordmarkClasses = classnames({
       [css.wordmark]: true,
       [css['electron-non-draggable']]: electron,
       [css['wordmark-macos']]: electron?.platform === 'macos',
     });
 
     return (
       <div className={css.layout}>
         <DisconnectedBarVisibilityHandler />
         <DisconnectedBar />
         <UpdateModalHandler />
         <header
           className={headerClasses}
           onDoubleClick={this.onHeaderDoubleClick}
         >
           <div className={css['main-header']}>
             <h1 className={wordmarkClasses}>
               <a
                 title="Comm Home"
                 aria-label="Go to Comm Home"
                 onClick={this.onWordmarkClicked}
                 onDoubleClick={this.stopDoubleClickPropagation}
               >
                 Comm
               </a>
             </h1>
             {navigationArrows}
             <div className={css['upper-right']}>
               <LoadingIndicator
                 status={this.props.entriesLoadingStatus}
                 size="medium"
                 loadingClassName={css['page-loading']}
                 errorClassName={css['page-error']}
               />
             </div>
           </div>
         </header>
         <InputStateContainer>{mainContent}</InputStateContainer>
         <div className={css.sidebar}>
           <CommunityPicker />
         </div>
       </div>
     );
   }
 
   getMainContentWithSwitcher() {
     const { tab, settingsSection } = this.props.navInfo;
     let mainContent;
 
     if (tab === 'settings') {
       if (settingsSection === 'account') {
         mainContent = <AccountSettings />;
       } else if (settingsSection === 'danger-zone') {
         mainContent = <DangerZone />;
       }
       return (
         <div className={css['main-content-container']}>
           <div className={css.switcher}>
             <SettingsSwitcher />
           </div>
           <div className={css['main-content']}>{mainContent}</div>
         </div>
       );
     }
 
     if (tab === 'calendar') {
       mainContent = <Calendar url={this.props.location.pathname} />;
     } else if (tab === 'chat') {
       mainContent = <Chat />;
     }
 
     const mainContentClass = classnames(
       css['main-content-container'],
       css['main-content-container-column'],
     );
     return (
       <div className={mainContentClass}>
         <Topbar />
         <div className={css['main-content']}>{mainContent}</div>
       </div>
     );
   }
 }
 
 const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
   fetchEntriesActionTypes,
 );
 const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 
 const ConnectedApp: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedApp(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const navInfo = useSelector(state => state.navInfo);
 
     const fetchEntriesLoadingStatus = useSelector(
       fetchEntriesLoadingStatusSelector,
     );
     const updateCalendarQueryLoadingStatus = useSelector(
       updateCalendarQueryLoadingStatusSelector,
     );
     const entriesLoadingStatus = combineLoadingStatuses(
       fetchEntriesLoadingStatus,
       updateCalendarQueryLoadingStatus,
     );
 
     const loggedIn = useSelector(isLoggedIn);
     const activeThreadCurrentlyUnread = useSelector(
       state =>
         !activeChatThreadID ||
         !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
     );
 
     useBadgeHandler();
 
     const dispatch = useDispatch();
     const modalContext = useModalContext();
     const modals = React.useMemo(
       () =>
         modalContext.modals.map(([modal, key]) => (
           <React.Fragment key={key}>{modal}</React.Fragment>
         )),
       [modalContext.modals],
     );
 
     return (
       <App
         {...props}
         navInfo={navInfo}
         entriesLoadingStatus={entriesLoadingStatus}
         loggedIn={loggedIn}
         activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
         dispatch={dispatch}
         modals={modals}
       />
     );
   },
 );
 
 function AppWithProvider(props: BaseProps): React.Node {
   return (
     <ModalProvider>
       <ConnectedApp {...props} />
     </ModalProvider>
   );
 }
 
 export default AppWithProvider;
diff --git a/web/url-utils.js b/web/url-utils.js
index 258603d60..205b8ca63 100644
--- a/web/url-utils.js
+++ b/web/url-utils.js
@@ -1,148 +1,153 @@
 // @flow
 
 import invariant from 'invariant';
 import _keyBy from 'lodash/fp/keyBy.js';
 
+import type { AccountUserInfo } from 'lib/types/user-types.js';
 import {
   startDateForYearAndMonth,
   endDateForYearAndMonth,
 } from 'lib/utils/date-utils.js';
-import { infoFromURL } from 'lib/utils/url-utils.js';
+import { infoFromURL, type URLInfo } from 'lib/utils/url-utils.js';
 
 import { yearExtractor, monthExtractor } from './selectors/nav-selectors.js';
 import type { NavInfo } from './types/nav-types.js';
 
 function canonicalURLFromReduxState(
   navInfo: NavInfo,
   currentURL: string,
   loggedIn: boolean,
 ): string {
   const urlInfo = infoFromURL(currentURL);
   const today = new Date();
   let newURL = `/`;
 
   if (loggedIn) {
     newURL += `${navInfo.tab}/`;
     if (navInfo.tab === 'calendar') {
       const { startDate, endDate } = navInfo;
       const year = yearExtractor(startDate, endDate);
       if (urlInfo.year !== undefined) {
         invariant(
           year !== null && year !== undefined,
           `${startDate} and ${endDate} aren't in the same year`,
         );
         newURL += `year/${year}/`;
       } else if (
         year !== null &&
         year !== undefined &&
         year !== today.getFullYear()
       ) {
         newURL += `year/${year}/`;
       }
 
       const month = monthExtractor(startDate, endDate);
       if (urlInfo.month !== undefined) {
         invariant(
           month !== null && month !== undefined,
           `${startDate} and ${endDate} aren't in the same month`,
         );
         newURL += `month/${month}/`;
       } else if (
         month !== null &&
         month !== undefined &&
         month !== today.getMonth() + 1
       ) {
         newURL += `month/${month}/`;
       }
     } else if (navInfo.tab === 'chat') {
       if (navInfo.chatMode === 'create') {
         const users =
           navInfo.selectedUserList?.map(({ id }) => id)?.join('+') ?? '';
         const potentiallyTrailingSlash = users.length > 0 ? '/' : '';
         newURL += `thread/new/${users}${potentiallyTrailingSlash}`;
       } else {
         const activeChatThreadID = navInfo.activeChatThreadID;
         if (activeChatThreadID) {
           newURL += `thread/${activeChatThreadID}/`;
         }
       }
     } else if (navInfo.tab === 'settings' && navInfo.settingsSection) {
       newURL += `${navInfo.settingsSection}/`;
     }
   }
 
   return newURL;
 }
 
 // Given a URL, this function parses out a navInfo object, leaving values as
 // default if they are unspecified.
 function navInfoFromURL(
-  url: string,
-  backupInfo: { now?: Date, navInfo?: NavInfo },
+  urlInfo: URLInfo,
+  backupInfo: {
+    +now?: Date,
+    +userInfos?: { +[id: string]: AccountUserInfo },
+    +navInfo?: NavInfo,
+  },
 ): NavInfo {
-  const urlInfo = infoFromURL(url);
   const { navInfo } = backupInfo;
   const now = backupInfo.now ? backupInfo.now : new Date();
 
   let year = urlInfo.year;
   if (!year && navInfo) {
     year = yearExtractor(navInfo.startDate, navInfo.endDate);
   }
   if (!year) {
     year = now.getFullYear();
   }
 
   let month = urlInfo.month;
   if (!month && navInfo) {
     month = monthExtractor(navInfo.startDate, navInfo.endDate);
   }
   if (!month) {
     month = now.getMonth() + 1;
   }
 
   let activeChatThreadID = null;
   if (urlInfo.thread) {
     activeChatThreadID = urlInfo.thread.toString();
   } else if (navInfo) {
     activeChatThreadID = navInfo.activeChatThreadID;
   }
 
   let tab = 'chat';
   if (urlInfo.calendar) {
     tab = 'calendar';
   } else if (urlInfo.settings) {
     tab = 'settings';
   }
 
   const chatMode =
     urlInfo.threadCreation || navInfo?.chatMode === 'create'
       ? 'create'
       : 'view';
 
   const newNavInfo: NavInfo = {
     tab,
     startDate: startDateForYearAndMonth(year, month),
     endDate: endDateForYearAndMonth(year, month),
     activeChatThreadID,
     chatMode,
   };
 
   if (urlInfo.selectedUserList) {
     const selectedUsers = _keyBy('id')(navInfo?.selectedUserList ?? []);
+    const userInfos = backupInfo.userInfos ?? {};
     newNavInfo.selectedUserList = urlInfo.selectedUserList
-      ?.map(id => selectedUsers[id])
+      ?.map(id => selectedUsers[id] ?? userInfos[id])
       ?.filter(Boolean);
   }
 
   if (urlInfo.settings) {
     newNavInfo.settingsSection = urlInfo.settings;
   }
 
   if (urlInfo.inviteSecret) {
     newNavInfo.inviteSecret = urlInfo.inviteSecret;
   }
 
   return newNavInfo;
 }
 
 export { canonicalURLFromReduxState, navInfoFromURL };