Change header visibility in left pane

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/components/leftPane/LeftPaneInboxHelper.tsx

@@ -72,7 +72,14 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
   }
 
   getRowCount(): number {
-    const headerCount = this.#hasPinnedAndNonpinned() ? 2 : 0;
+    let headerCount = 0;
+    if (this.#hasPinned()) {
+      headerCount += 1;
+
+      if (this.#hasNotPinned()) {
+        headerCount += 1;
+      }
+    }
     const buttonCount = this.#archivedConversations.length ? 1 : 0;
     return (
       headerCount +
@@ -146,66 +153,51 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
 
     const archivedConversationsCount = archivedConversations.length;
 
-    if (this.#hasPinnedAndNonpinned()) {
+    let index = rowIndex;
-      switch (rowIndex) {
+
-        case 0:
+    if (this.#hasPinned()) {
-          return {
+      if (index === 0) {
-            type: RowType.Header,
+        return {
-            getHeaderText: i18n => i18n('icu:LeftPane--pinned'),
+          type: RowType.Header,
-          };
+          getHeaderText: i18n => i18n('icu:LeftPane--pinned'),
-        case pinnedConversations.length + 1:
+        };
+      }
+      index -= 1;
+
+      if (index < pinnedConversations.length) {
+        return {
+          type: RowType.Conversation,
+          conversation: pinnedConversations[index],
+        };
+      }
+      index -= pinnedConversations.length;
+
+      if (this.#hasNotPinned()) {
+        if (index === 0) {
           return {
             type: RowType.Header,
             getHeaderText: i18n => i18n('icu:LeftPane--chats'),
           };
-        case pinnedConversations.length + conversations.length + 2:
-          if (archivedConversationsCount) {
-            return {
-              type: RowType.ArchiveButton,
-              archivedConversationsCount,
-            };
-          }
-          return undefined;
-        default: {
-          const pinnedConversation = pinnedConversations[rowIndex - 1];
-          if (pinnedConversation) {
-            return {
-              type: RowType.Conversation,
-              conversation: pinnedConversation,
-            };
-          }
-          const conversation =
-            conversations[rowIndex - pinnedConversations.length - 2];
-          return conversation
-            ? {
-                type: RowType.Conversation,
-                conversation,
-              }
-            : undefined;
         }
+
+        index -= 1;
       }
     }
 
-    const onlyConversations = pinnedConversations.length
+    if (index < conversations.length) {
-      ? pinnedConversations
+      return {
-      : conversations;
+        type: RowType.Conversation,
-    if (rowIndex < onlyConversations.length) {
+        conversation: conversations[index],
-      const conversation = onlyConversations[rowIndex];
+      };
-      return conversation
-        ? {
-            type: RowType.Conversation,
-            conversation,
-          }
-        : undefined;
     }
+    index -= conversations.length;
 
-    if (rowIndex === onlyConversations.length && archivedConversationsCount) {
+    if (index === 0 && archivedConversationsCount) {
       return {
         type: RowType.ArchiveButton,
         archivedConversationsCount,
       };
     }
-
     return undefined;
   }
 
@@ -219,14 +211,12 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     const isConversationSelected = (
       conversation: Readonly<ConversationListItemPropsType>
     ) => conversation.id === selectedConversationId;
-    const hasHeaders = this.#hasPinnedAndNonpinned();
 
     const pinnedConversationIndex = this.#pinnedConversations.findIndex(
       isConversationSelected
     );
     if (pinnedConversationIndex !== -1) {
-      const headerOffset = hasHeaders ? 1 : 0;
+      return pinnedConversationIndex + 1;
-      return pinnedConversationIndex + headerOffset;
     }
 
     const conversationIndex = this.#conversations.findIndex(
@@ -234,7 +224,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     );
     if (conversationIndex !== -1) {
       const pinnedOffset = this.#pinnedConversations.length;
-      const headerOffset = hasHeaders ? 2 : 0;
+      const headerOffset = this.#hasPinned() ? 2 : 0;
       return conversationIndex + pinnedOffset + headerOffset;
     }
 
@@ -289,9 +279,11 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     handleKeydownForSearch(event, options);
   }
 
-  #hasPinnedAndNonpinned(): boolean {
+  #hasPinned(): boolean {
-    return Boolean(
+    return this.#pinnedConversations.length !== 0;
-      this.#pinnedConversations.length && this.#conversations.length
+  }
-    );
+
+  #hasNotPinned(): boolean {
+    return this.#conversations.length !== 0;
   }
 }

ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx

@@ -67,7 +67,7 @@ describe('LeftPaneInboxHelper', () => {
       assert.strictEqual(helper.getRowCount(), 3);
     });
 
-    it("returns the number of pinned conversations if that's all there is", () => {
+    it("returns the number of pinned conversations + 1 (for the header) if that's all there is", () => {
       const helper = new LeftPaneInboxHelper({
         ...defaultProps,
         pinnedConversations: [
@@ -77,7 +77,7 @@ describe('LeftPaneInboxHelper', () => {
         ],
       });
 
-      assert.strictEqual(helper.getRowCount(), 3);
+      assert.strictEqual(helper.getRowCount(), 3 + 1);
     });
 
     it('adds 2 rows for each header if there are pinned and non-pinned conversations,', () => {
@@ -134,7 +134,7 @@ describe('LeftPaneInboxHelper', () => {
       );
     });
 
-    it("returns the pinned conversation's index if there are only pinned conversations", () => {
+    it("returns the pinned conversation's index + 1 (for the header) if there are only pinned conversations", () => {
       const pinnedConversations = [
         getDefaultConversation(),
         getDefaultConversation(),
@@ -146,11 +146,11 @@ describe('LeftPaneInboxHelper', () => {
 
       assert.strictEqual(
         helper.getRowIndexToScrollTo(pinnedConversations[0].id),
-        0
+        1
       );
       assert.strictEqual(
         helper.getRowIndexToScrollTo(pinnedConversations[1].id),
-        1
+        2
       );
     });
 
@@ -226,7 +226,7 @@ describe('LeftPaneInboxHelper', () => {
       assert.isUndefined(helper.getRow(1));
     });
 
-    it("returns pinned conversations if that's all there are", () => {
+    it("returns header and pinned conversations if that's all there are", () => {
       const pinnedConversations = [
         getDefaultConversation(),
         getDefaultConversation(),
@@ -237,18 +237,22 @@ describe('LeftPaneInboxHelper', () => {
         pinnedConversations,
       });
 
-      assert.deepEqual(helper.getRow(0), {
+      assert.deepEqual(
+        _testHeaderText(helper.getRow(0)),
+        'icu:LeftPane--pinned'
+      );
+      assert.deepEqual(helper.getRow(1), {
         type: RowType.Conversation,
         conversation: pinnedConversations[0],
       });
-      assert.deepEqual(helper.getRow(1), {
+      assert.deepEqual(helper.getRow(2), {
         type: RowType.Conversation,
         conversation: pinnedConversations[1],
       });
-      assert.isUndefined(helper.getRow(2));
+      assert.isUndefined(helper.getRow(3));
     });
 
-    it('returns pinned conversations and an archive button if there are no non-pinned conversations', () => {
+    it('returns header, pinned conversations and an archive button if there are no non-pinned conversations', () => {
       const pinnedConversations = [
         getDefaultConversation(),
         getDefaultConversation(),
@@ -260,19 +264,23 @@ describe('LeftPaneInboxHelper', () => {
         archivedConversations: [getDefaultConversation()],
       });
 
-      assert.deepEqual(helper.getRow(0), {
+      assert.deepEqual(
+        _testHeaderText(helper.getRow(0)),
+        'icu:LeftPane--pinned'
+      );
+      assert.deepEqual(helper.getRow(1), {
         type: RowType.Conversation,
         conversation: pinnedConversations[0],
       });
-      assert.deepEqual(helper.getRow(1), {
+      assert.deepEqual(helper.getRow(2), {
         type: RowType.Conversation,
         conversation: pinnedConversations[1],
       });
-      assert.deepEqual(helper.getRow(2), {
+      assert.deepEqual(helper.getRow(3), {
         type: RowType.ArchiveButton,
         archivedConversationsCount: 1,
       });
-      assert.isUndefined(helper.getRow(3));
+      assert.isUndefined(helper.getRow(4));
     });
 
     it("returns non-pinned conversations if that's all there are", () => {