Key ConversationList by mode in left pane

ts/components/ConversationList.tsx

@@ -318,14 +318,15 @@ export function ConversationList({
   );
 
   const renderRow: ListRowRenderer = useCallback(
-    ({ key, index, style }) => {
+    ({ key: providedKey, index, style }) => {
       const row = getRow(index);
       if (!row) {
         assertDev(false, `Expected a row at index ${index}`);
-        return <div key={key} style={style} />;
+        return <div key={providedKey} style={style} />;
       }
 
       let result: ReactNode;
+      let key: string;
       switch (row.type) {
         case RowType.ArchiveButton:
           result = (
@@ -344,9 +345,11 @@ export function ConversationList({
               </span>
             </button>
           );
+          key = 'archive';
           break;
         case RowType.Blank:
           result = undefined;
+          key = `blank:${providedKey}`;
           break;
         case RowType.Contact: {
           const { isClickable = true, hasContextMenu = false } = row;
@@ -368,6 +371,7 @@ export function ConversationList({
               onRemove={isClickable ? removeConversation : undefined}
             />
           );
+          key = `contact:${row.contact.id}`;
           break;
         }
         case RowType.ContactCheckbox:
@@ -382,6 +386,7 @@ export function ConversationList({
               theme={theme}
             />
           );
+          key = `contact-checkbox:${row.contact.id}`;
           break;
         case RowType.ClearFilterButton:
           result = (
@@ -400,6 +405,7 @@ export function ConversationList({
               </Button>
             </div>
           );
+          key = 'clear-filter';
           break;
         case RowType.PhoneNumberCheckbox:
           result = (
@@ -419,6 +425,7 @@ export function ConversationList({
               theme={theme}
             />
           );
+          key = `phone-number-checkbox:${row.phoneNumber.e164}`;
           break;
         case RowType.UsernameCheckbox:
           result = (
@@ -438,6 +445,7 @@ export function ConversationList({
               theme={theme}
             />
           );
+          key = `username-checkbox:${row.username}`;
           break;
         case RowType.GenericCheckbox:
           result = (
@@ -453,6 +461,7 @@ export function ConversationList({
               clickable
             />
           );
+          key = `generic-checkbox:${providedKey}`;
           break;
         case RowType.Conversation: {
           const itemProps = pick(row.conversation, [
@@ -486,6 +495,7 @@ export function ConversationList({
             'serviceId',
           ]);
           const { badges, title, unreadCount, lastMessage } = itemProps;
+          key = `conversation:${itemProps.id}`;
           result = (
             <ConversationListItem
               {...itemProps}
@@ -514,6 +524,7 @@ export function ConversationList({
               onClick={showChooseGroupMembers}
             />
           );
+          key = 'create-new-group';
           break;
         case RowType.FindByUsername:
           result = (
@@ -523,6 +534,7 @@ export function ConversationList({
               onClick={showFindByUsername}
             />
           );
+          key = 'find-by-username';
           break;
         case RowType.FindByPhoneNumber:
           result = (
@@ -532,6 +544,7 @@ export function ConversationList({
               onClick={showFindByPhoneNumber}
             />
           );
+          key = 'find-by-phonenumber';
           break;
         case RowType.Header: {
           const headerText = row.getHeaderText(i18n);
@@ -543,16 +556,20 @@ export function ConversationList({
               {headerText}
             </div>
           );
+          key = `header:${providedKey}`;
           break;
         }
         case RowType.MessageSearchResult:
           result = <>{renderMessageSearchResult?.(row.messageId)}</>;
+          key = `message-search-result:${row.messageId}`;
           break;
         case RowType.SearchResultsLoadingFakeHeader:
           result = <SearchResultsLoadingFakeHeaderComponent />;
+          key = `loading-header:${providedKey}`;
           break;
         case RowType.SearchResultsLoadingFakeRow:
           result = <SearchResultsLoadingFakeRowComponent />;
+          key = `loading-row:${providedKey}`;
           break;
         case RowType.SelectSingleGroup:
           result = (
@@ -562,6 +579,7 @@ export function ConversationList({
               onSelectGroup={onSelectConversation}
             />
           );
+          key = 'select-single-group';
           break;
         case RowType.StartNewConversation:
           result = (
@@ -577,6 +595,7 @@ export function ConversationList({
               showConversation={showConversation}
             />
           );
+          key = 'start-new-conversation';
           break;
         case RowType.UsernameSearchResult:
           result = (
@@ -592,6 +611,7 @@ export function ConversationList({
               showConversation={showConversation}
             />
           );
+          key = `username-search-result:${row.username}`;
           break;
         case RowType.EmptyResults:
           result = (
@@ -599,6 +619,7 @@ export function ConversationList({
               {row.message}
             </div>
           );
+          key = 'empty-results';
           break;
         default:
           throw missingCaseError(row);

ts/components/LeftPane.tsx

@@ -842,6 +842,7 @@ export function LeftPane({
               tabIndex={-1}
             >
               <ConversationList
+                key={modeSpecificProps.mode}
                 dimensions={measureSize ?? undefined}
                 getPreferredBadge={getPreferredBadge}
                 getRow={getRow}