From 2c01e6f4b8021e3ede2e4b279a4ec2ac9623021f Mon Sep 17 00:00:00 2001 From: automated-signal <37887102+automated-signal@users.noreply.github.com> Date: Tue, 4 Feb 2025 20:02:48 -0600 Subject: [PATCH] Change header visibility in left pane Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com> --- .../leftPane/LeftPaneInboxHelper.tsx | 100 ++++++++---------- .../leftPane/LeftPaneInboxHelper_test.tsx | 36 ++++--- 2 files changed, 68 insertions(+), 68 deletions(-) diff --git a/ts/components/leftPane/LeftPaneInboxHelper.tsx b/ts/components/leftPane/LeftPaneInboxHelper.tsx index c24c02be6a..9708d20c4e 100644 --- a/ts/components/leftPane/LeftPaneInboxHelper.tsx +++ b/ts/components/leftPane/LeftPaneInboxHelper.tsx @@ -72,7 +72,14 @@ export class LeftPaneInboxHelper extends LeftPaneHelper } 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 const archivedConversationsCount = archivedConversations.length; - if (this.#hasPinnedAndNonpinned()) { - switch (rowIndex) { - case 0: - return { - type: RowType.Header, - getHeaderText: i18n => i18n('icu:LeftPane--pinned'), - }; - case pinnedConversations.length + 1: + let index = rowIndex; + + if (this.#hasPinned()) { + if (index === 0) { + return { + type: RowType.Header, + getHeaderText: i18n => i18n('icu:LeftPane--pinned'), + }; + } + 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 - ? pinnedConversations - : conversations; - if (rowIndex < onlyConversations.length) { - const conversation = onlyConversations[rowIndex]; - return conversation - ? { - type: RowType.Conversation, - conversation, - } - : undefined; + if (index < conversations.length) { + return { + type: RowType.Conversation, + conversation: conversations[index], + }; } + 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 const isConversationSelected = ( conversation: Readonly ) => conversation.id === selectedConversationId; - const hasHeaders = this.#hasPinnedAndNonpinned(); const pinnedConversationIndex = this.#pinnedConversations.findIndex( isConversationSelected ); if (pinnedConversationIndex !== -1) { - const headerOffset = hasHeaders ? 1 : 0; - return pinnedConversationIndex + headerOffset; + return pinnedConversationIndex + 1; } const conversationIndex = this.#conversations.findIndex( @@ -234,7 +224,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper ); 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 handleKeydownForSearch(event, options); } - #hasPinnedAndNonpinned(): boolean { - return Boolean( - this.#pinnedConversations.length && this.#conversations.length - ); + #hasPinned(): boolean { + return this.#pinnedConversations.length !== 0; + } + + #hasNotPinned(): boolean { + return this.#conversations.length !== 0; } } diff --git a/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx b/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx index 8e98048b20..e24e15e6e6 100644 --- a/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx +++ b/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", () => {