pleroma-fe/src/components/thread_tree/thread_tree.vue

<template>
  <article class="thread-tree">
    <Status
      :key="statusId"
      ref="statusComponent"
      :status-id="statusId"
      :replies="getReplies(statusId)"
      :inline-expanded="collapsable && isExpanded"
      :expandable="!isExpanded"
      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
      :in-conversation="isExpanded"
      :focused="focused === statusId"
      :in-profile="inProfile"
      :profile-user-id="profileUserId"
      class="conversation-status conversation-status-treeview panel-body"

      :thread-display-state="threadDisplay.get(statusId)"
      :can-dive="canDive"

      @dive="$emit('dive', statusId)"
      @goto="$emit('goto', statusId)"
      @toggle-expanded="$emit('toggleExpanded', statusId)"
      @suspendable-state-change="$emit('suspendableStateChange', e)"
      @height-change="$emit('heightChange', e)"
    />
    <div
      v-if="currentReplies.length > 0 && threadShowing"
      class="thread-tree-replies"
    >
      <ThreadTree
        v-for="replyStatusId in currentReplies"
        :key="replyStatusId"
        ref="childComponent"
        :depth="depth + 1"
        :status-id="replyStatusId"

        :in-profile="inProfile"
        :conversation="conversation"
        :collapsable="collapsable"
        :is-expanded="isExpanded"
        :pinned-status-ids-object="pinnedStatusIdsObject"
        :profile-user-id="profileUserId"

        :replies="replies"
        :focused="focused"

        :thread-display="threadDisplay"
        :thread-display-default="threadDisplayDefault"

        :can-dive="canDive"
        @show-thread-recursively="(e) => $emit('showThreadRecursively', e)"
        @goto="(e) => $emit('goto', e)"
        @dive="(e) => $emit('dive', e)"
        @suspendable-state-change="e => $emit('suspendableStateChange', e)"
        @toggle-expanded="(e) => $emit('toggleExpanded', e)"
        @height-change="e => $emit('heightChange', e)"
      />
    </div>
    <div
      v-if="currentReplies.length && !threadShowing"
      class="thread-tree-replies thread-tree-replies-hidden"
    >
      <i18n-t
        v-if="simple"
        scope="global"
        tag="button"
        keypath="status.thread_follow_with_icon"
        class="button-unstyled -link thread-tree-show-replies-button"
        @click.prevent="$emit('dive', statusId)"
      >
        <template #icon>
          <FAIcon
            icon="angle-double-right"
          />
        </template>
        <template #text>
          <span>
            {{ $t('status.thread_follow', { numStatus: totalReplyCount[statusId] }, totalReplyCount[statusId]) }}
          </span>
        </template>
      </i18n-t>
      <i18n-t
        v-else
        scope="global"
        tag="button"
        keypath="status.thread_show_full_with_icon"
        class="button-unstyled -link thread-tree-show-replies-button"
        @click.prevent="$emit('showThreadRecursively', statusId)"
      >
        <template #icon>
          <FAIcon
            icon="angle-double-down"
          />
        </template>
        <template #text>
          <span>
            {{ $t('status.thread_show_full', { numStatus: totalReplyCount[statusId], depth: totalReplyDepth[statusId] }, totalReplyCount[statusId]) }}
          </span>
        </template>
      </i18n-t>
    </div>
  </article>
</template>

<script src="./thread_tree.js"></script>

<style lang="scss">
.thread-tree-replies {
  margin-left: var(--status-margin);
  border-left: 2px solid var(--border);
}

.thread-tree-replies-hidden {
  padding: var(--status-margin);

  /* Make the button stretch along the whole row */
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
</style>