various fixes, mainly for tree view

src/components/conversation/conversation.scss

@@ -40,24 +40,6 @@
     /* stylelint-enable declaration-no-important */
   }
 
-  .thread-ancestor-dive-box {
-    padding-left: var(--status-margin);
-    border-bottom: 1px solid var(--border);
-    border-radius: 0;
-
-    /* Make the button stretch along the whole row */
-    &,
-    &-inner {
-      display: flex;
-      align-items: stretch;
-      flex-direction: column;
-    }
-  }
-
-  .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin);
-  }
-
   .thread-ancestors + .thread-tree > .conversation-status {
     border-top: 1px solid var(--border);
   }

src/components/conversation/conversation.vue

@@ -105,7 +105,7 @@
               :replies="getReplies(element.status.id)"
 
               :focused="focused === element.status.id"
-              can-dive
+              conversation-rank="ancestor"
 
               @goto="setFocused"
               @dive="diveIntoStatus(element.status.id)"
@@ -117,33 +117,6 @@
               class="virtual-spacer"
               :style="{ height: element.height + 'px' }"
             />
-            <div
-              v-if="shouldShowOtherRepliesButton && getReplies(status.id).size > 1"
-              class="thread-ancestor-dive-box"
-            >
-              <div
-                class="thread-ancestor-dive-box-inner"
-              >
-                <i18n-t
-                  tag="button"
-                  scope="global"
-                  keypath="status.ancestor_follow_with_icon"
-                  class="button-unstyled -link thread-tree-show-replies-button"
-                  @click.prevent="diveIntoStatus(status.id)"
-                >
-                  <template #icon>
-                    <FAIcon
-                      icon="angle-double-right"
-                    />
-                  </template>
-                  <template #text>
-                    <span>
-                      {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id).size - 1 }) }}
-                    </span>
-                  </template>
-                </i18n-t>
-              </div>
-            </div>
           </article>
         </div>
         <div
@@ -186,9 +159,9 @@
           <Status
             v-if="element.type === 'status'"
             class="conversation-status"
-            :class="getStatusClasses(status)"
+            :class="getStatusClasses(element.status)"
             :status-id="element.status.id"
-            :replies="getReplies(status.id)"
+            :replies="getReplies(element.status.id)"
 
             :focused="focused === element.id || focused === element.status.retweeted_status?.id"
 

src/components/status/status.js

@@ -107,6 +107,10 @@ const Status = {
     ignoreMute: Boolean,
 
     threadDisplayState: String,
+    conversationRank: {
+      type: String,
+      default: 'linear',
+    },
   },
   emits: [
     'goto',
@@ -116,9 +120,22 @@ const Status = {
     'heightChange',
   ],
   inject: {
-    profileUserId: { default: null },
-    isPage: { default: false },
-    isExpanded: { default: false },
+    profileUserId: {
+      type: String,
+      default: null,
+    },
+    isPage: {
+      type: Boolean,
+      default: false,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    expandable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -134,6 +151,12 @@ const Status = {
     useScrobblesStore().getLatestScrobble(this.status.user.id)
   },
   computed: {
+    rootClasses() {
+      return [
+        {'-focused': this.focused, '-conversation': !this.isPage && this.isExpanded },
+        `-conversation-rank-${this.conversationRank}`,
+      ]
+    },
     // Whatever we're given to work with
     status() {
       return this.statusoid ?? useStatusesStore().allStatuses.get(this.statusId)
@@ -173,9 +196,12 @@ const Status = {
     simpleTree() {
       return !this.mergedConfig.conversationTreeAdvanced
     },
-    showOtherRepliesAsButton() {
+    showOtherRepliesInside() {
       return this.mergedConfig.conversationOtherRepliesButton === 'inside'
     },
+    showOtherRepliesBelow() {
+      return this.mergedConfig.conversationOtherRepliesButton === 'below'
+    },
     showReasonMutedThread() {
       return (
         (this.mainStatus.thread_muted || this.repeatStatus?.thread_muted) &&

src/components/status/status.scss

@@ -3,6 +3,8 @@
   white-space: normal;
   overflow-wrap: break-word;
   text-wrap: pretty;
+  display: flex;
+  flex-direction: column;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -281,6 +283,10 @@
     margin-top: var(--status-margin);
   }
 
+  .status-action-buttons {
+    margin-top: var(--status-margin);
+  }
+
   .muted {
     padding: 0.25em 0.6em;
     height: 1.2em;
@@ -372,7 +378,9 @@
     }
   }
 
-  .status-action-buttons {
-    margin-top: var(--status-margin);
+  .thread-tree-show-replies-button {
+    display: block;
+    padding: var(--status-margin);
+    padding-left: var(--status-margin);
   }
 }

src/components/status/status.vue

@@ -3,7 +3,7 @@
     v-if="!hideStatus"
     ref="root"
     class="Status"
-    :class="[{ '-focused': focused }, { '-conversation': !isPage && isExpanded }]"
+    :class="rootClasses"
   >
     <div
       v-if="error"
@@ -427,7 +427,7 @@
             class="replies"
           >
             <button
-              v-if="showOtherRepliesAsButton && replies.size > 1"
+              v-if="showOtherRepliesInside && replies.size > 1"
               class="button-unstyled -link"
               :title="$t('status.ancestor_follow', { numReplies: replies.size - 1 }, replies.size - 1)"
               @click.prevent="$emit('dive')"
@@ -548,6 +548,25 @@
           @close-accepted="closeReplyForm"
         />
       </div>
+      <i18n-t
+        v-if="inConversation && conversationRank === 'ancestor' && !isPreview && showOtherRepliesBelow && replies?.size > 1"
+        tag="button"
+        scope="global"
+        keypath="status.ancestor_follow_with_icon"
+        class="button-unstyled -link thread-tree-show-replies-button"
+        @click.prevent="$emit('dive')"
+      >
+        <template #icon>
+          <FAIcon
+            icon="angle-double-right"
+          />
+        </template>
+        <template #text>
+          <span>
+            {{ $t('status.ancestor_follow', { numReplies: replies.size - 1 }) }}
+          </span>
+        </template>
+      </i18n-t>
     </template>
   </div>
 </template>

src/components/thread_tree/thread_tree.js

@@ -1,4 +1,5 @@
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useStatusesStore } from 'src/stores/statuses.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -43,14 +44,21 @@ const ThreadTree = {
     'isPage',
   ],
   computed: {
+    status() {
+      const status = useStatusesStore().allStatuses.get(this.statusId)
+      if (status.retweeted_status) {
+        return useStatusesStore().allStatuses.get(status.retweeted_status.id)
+      }
+      return status
+    },
     currentReplies() {
-      return [...this.getReplies(this.statusId)].map(({ id }) => id)
+      return [...this.getReplies(this.status.id)].map(({ id }) => id)
     },
     simple() {
       return !useMergedConfigStore().mergedConfig.conversationTreeAdvanced
     },
     threadShowing() {
-      return this.threadDisplay.get(this.statusId) === 'showing'
+      return this.threadDisplay.get(this.status.id) === 'showing'
     },
     canDive() {
       return this.isExpanded

src/components/thread_tree/thread_tree.vue

@@ -10,6 +10,7 @@
       :replies="getReplies(statusId)"
       :focused="focused === statusId"
 
+      :conversation-rank="depth === 0 ? 'current' : 'child'"
       :thread-display-state="threadDisplay.get(statusId)"
 
       @dive="$emit('dive', statusId)"
@@ -53,7 +54,7 @@
         </template>
         <template #text>
           <span>
-            {{ $t('status.thread_follow', { numStatus: totalReplyCount[statusId] }, totalReplyCount[statusId]) }}
+            {{ $t('status.thread_follow', { numStatus: totalReplyCount[status.id] }, totalReplyCount[status.id]) }}
           </span>
         </template>
       </i18n-t>
@@ -72,7 +73,7 @@
         </template>
         <template #text>
           <span>
-            {{ $t('status.thread_show_full', { numStatus: totalReplyCount[statusId], depth: totalReplyDepth[statusId] }, totalReplyCount[statusId]) }}
+            {{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }, totalReplyCount[status.id]) }}
           </span>
         </template>
       </i18n-t>