Improve "show full conversation" interaction

Now we only show that button when there are other statuses out of sight
(other toplevel statuses exist outside of the current thread tree).

2 files changed, 17 insertions, 3 deletions

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 4c429161..423930af 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -224,6 +224,9 @@ const conversation = {
       debug('toplevel =', topLevel)
       return topLevel
     },
+    otherTopLevelCount () {
+      return this.topLevel.length - 1
+    },
     showingTopLevel () {
       if (this.canDive && this.diveRoot) {
         return [this.statusMap[this.diveRoot]]
@@ -242,6 +245,11 @@ const conversation = {
     diveMode () {
       return this.canDive && !!this.diveRoot
     },
+    shouldShowAllConversationButton () {
+      // The "show all conversation" button tells the user that there exist
+      // other toplevel statuses, so do not show it if there is only a single root
+      return this.diveMode && this.topLevel.length > 1
+    },
     replies () {
       let i = 1
       // eslint-disable-next-line camelcase
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 6c8c6ef0..f0eb88c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -20,16 +20,22 @@
     </div>
     <div class="conversation-body panel-body">
       <div
-        v-if="diveMode"
+        v-if="shouldShowAllConversationButton"
         class="conversation-dive-to-top-level-box"
       >
         <i18n
-          path="status.show_all_conversation"
+          path="status.show_all_conversation_with_icon"
           tag="button"
           class="button-unstyled -link"
           @click.prevent="diveToTopLevel"
         >
-          <FAIcon icon="angle-double-left" />
+          <FAIcon
+            place="icon"
+            icon="angle-double-left"
+          />
+          <span place="text">
+            {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+          </span>
         </i18n>
       </div>
       <div