Do not show headers in LeftPane without multiple Conversation types

ts/components/LeftPane.stories.tsx

@@ -89,7 +89,7 @@ story.add('Conversation States (Active, Selected, Archived)', () => {
   return <LeftPane {...props} />;
 });
 
-story.add('Pinned Conversations', () => {
+story.add('Pinned and Non-pinned Conversations', () => {
   const props = createProps({
     pinnedConversations,
   });
@@ -97,6 +97,16 @@ story.add('Pinned Conversations', () => {
   return <LeftPane {...props} />;
 });
 
+story.add('Only Pinned Conversations', () => {
+  const props = createProps({
+    archivedConversations: [],
+    conversations: [],
+    pinnedConversations,
+  });
+
+  return <LeftPane {...props} />;
+});
+
 story.add('Archived Conversations Shown', () => {
   const props = createProps({
     showArchived: true,

ts/components/LeftPane.tsx

@@ -52,7 +52,7 @@ type RowRendererParamsType = {
   style: CSSProperties;
 };
 
-enum RowType {
+export enum RowType {
   ArchiveButton,
   ArchivedConversation,
   Conversation,
@@ -61,7 +61,7 @@ enum RowType {
   Undefined,
 }
 
-enum HeaderType {
+export enum HeaderType {
   Pinned,
   Chats,
 }
@@ -127,28 +127,35 @@ export class LeftPane extends React.Component<PropsType> {
     let conversationIndex = index;
 
     if (pinnedConversations.length) {
-      if (index === 0) {
-        return {
-          headerType: HeaderType.Pinned,
-          type: RowType.Header,
-        };
-      }
+      if (conversations.length) {
+        if (index === 0) {
+          return {
+            headerType: HeaderType.Pinned,
+            type: RowType.Header,
+          };
+        }
 
-      if (index <= pinnedConversations.length) {
+        if (index <= pinnedConversations.length) {
+          return {
+            index: index - 1,
+            type: RowType.PinnedConversation,
+          };
+        }
+
+        if (index === pinnedConversations.length + 1) {
+          return {
+            headerType: HeaderType.Chats,
+            type: RowType.Header,
+          };
+        }
+
+        conversationIndex -= pinnedConversations.length + 2;
+      } else {
         return {
-          index: index - 1,
+          index,
           type: RowType.PinnedConversation,
         };
       }
-
-      if (index === pinnedConversations.length + 1) {
-        return {
-          headerType: HeaderType.Chats,
-          type: RowType.Header,
-        };
-      }
-
-      conversationIndex -= pinnedConversations.length + 2;
     }
 
     if (conversationIndex === conversations.length) {
@@ -453,9 +460,12 @@ export class LeftPane extends React.Component<PropsType> {
 
     let { length } = conversations;
 
-    // includes two additional rows for pinned/chats headers
     if (pinnedConversations.length) {
-      length += pinnedConversations.length + 2;
+      if (length) {
+        // includes two additional rows for pinned/chats headers
+        length += 2;
+      }
+      length += pinnedConversations.length;
     }
 
     // includes one additional row for 'archived conversations' button