[Reader] Show custom lists directly if there are 2 or fewer items

WordPress/src/main/java/org/wordpress/android/ui/reader/utils/ReaderTopBarMenuHelper.kt

@@ -55,11 +55,30 @@ class ReaderTopBarMenuHelper @Inject constructor(
                 .takeIf { it.isNotEmpty() }
                 ?.let { customListsArray ->
                     add(MenuElementData.Divider)
-                    add(createCustomListsItem(customListsArray))
+                    createCustomListsItems(customListsArray)
                 }
         }
     }
 
+    private fun MutableList<MenuElementData>.createCustomListsItems(
+        customListsArray: SparseArrayCompat<ReaderTag>
+    ) {
+        if (customListsArray.size() > 2) {
+            // If custom lists has more than 2 items, we add a submenu called "Lists"
+            add(createCustomListsItem(customListsArray))
+        } else {
+            // If the custom lists has 2 or less items, we add the items directly without submenu
+            customListsArray.forEach { index, readerTag ->
+                add(
+                    MenuElementData.Item.Single(
+                        id = getMenuItemIdFromReaderTagIndex(index),
+                        text = UiString.UiStringText(readerTag.tagTitle),
+                    )
+                )
+            }
+        }
+    }
+
     private fun createDiscoverItem(id: String): MenuElementData.Item.Single {
         return MenuElementData.Item.Single(
             id = id,

WordPress/src/test/java/org/wordpress/android/ui/reader/utils/ReaderTopBarMenuHelperTest.kt

@@ -72,6 +72,27 @@ class ReaderTopBarMenuHelperTest {
         assertThat(customList3Item.text).isEqualTo(UiStringText("custom-list-3"))
     }
 
+    @Test
+    fun `GIVEN custom lists has 2 items or less WHEN createMenu THEN custom lists items are shown outside a submenu`() {
+        val tags = ReaderTagList().apply {
+            add(mockFollowingTag()) // item 0
+            add(mockDiscoverTag()) // item 1
+            add(mockSavedTag()) // item 2
+            add(mockLikedTag()) // item 3
+            add(mockA8CTag()) // item 4
+            add(mockFollowedP2sTag()) // item 5
+            add(createCustomListTag("custom-list-1")) // item 6
+            add(createCustomListTag("custom-list-2")) // item 7
+        }
+        val menu = helper.createMenu(tags)
+
+        val customListItem1 = menu.findSingleItem { it.id == "6" }!!
+        assertThat(customListItem1.text).isEqualTo(UiStringText("custom-list-1"))
+
+        val customListItem2 = menu.findSingleItem { it.id == "7" }!!
+        assertThat(customListItem2.text).isEqualTo(UiStringText("custom-list-2"))
+    }
+
     @Test
     fun `GIVEN all tags are available and tags FF enabled WHEN createMenu THEN all items are created correctly`() {
         whenever(readerTagsFeedFeatureConfig.isEnabled()).thenReturn(true)