yandere_fe/src/components/conversation/conversation.vue

<template>
  <div
    v-if="!hideStatus"
    :style="hiddenStyle"
    class="Conversation"
    :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
  >
    <div
      v-if="isExpanded"
      class="panel-heading conversation-heading -sticky"
    >
      <span class="title"> {{ $t('timeline.conversation') }} </span>
      <button
        v-if="collapsable"
        class="button-unstyled -link"
        @click.prevent="toggleExpanded"
      >
        {{ $t('timeline.collapse') }}
      </button>
      <QuickFilterSettings
        v-if="!collapsable"
        :conversation="true"
        class="rightside-button"
      />
      <QuickViewSettings
        v-if="!collapsable"
        :conversation="true"
        class="rightside-button"
      />
    </div>
    <div
      class="conversation-body"
      :class="{ 'panel-body': isExpanded }"
      >
      <div
        v-if="isTreeView"
        class="thread-body"
      >
        <div
          v-if="shouldShowAllConversationButton"
          class="conversation-dive-to-top-level-box"
        >
          <i18n-t
            keypath="status.show_all_conversation_with_icon"
            tag="button"
            class="button-unstyled -link"
            scope="global"
            @click.prevent="diveToTopLevel"
          >
            <template #icon>
              <FAIcon
                icon="angle-double-left"
              />
            </template>
            <template #text>
              <span>
                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
              </span>
            </template>
          </i18n-t>
        </div>
        <div
          v-if="shouldShowAncestors"
          class="thread-ancestors"
        >
          <article
            v-for="status in ancestorsOf(diveRoot)"
            :key="status.id"
            class="thread-ancestor"
            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
          >
            <status
              ref="statusComponent"
              :inline-expanded="collapsable && isExpanded"
              :statusoid="status"
              :expandable="!isExpanded"
              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
              :focused="focused(status.id)"
              :in-conversation="isExpanded"
              :highlight="getHighlight()"
              :replies="getReplies(status.id)"
              :in-profile="inProfile"
              :profile-user-id="profileUserId"
              class="conversation-status status-fadein"

              :simple-tree="treeViewIsSimple"
              :toggle-thread-display="toggleThreadDisplay"
              :thread-display-status="threadDisplayStatus"
              :show-thread-recursively="showThreadRecursively"
              :total-reply-count="totalReplyCount"
              :total-reply-depth="totalReplyDepth"
              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
              :dive="() => diveIntoStatus(status.id)"

              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
              :controlled-replying="statusContentProperties[status.id].replying"
              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"

              @goto="setHighlight"
              @toggleExpanded="toggleExpanded"
            />
            <div
              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 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>
                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
                    </span>
                  </template>
                </i18n-t>
              </div>
            </div>
          </article>
        </div>
        <thread-tree
          v-for="status in showingTopLevel"
          :key="status.id"
          ref="statusComponent"
          :depth="0"

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

          :focused="focused"
          :get-replies="getReplies"
          :highlight="maybeHighlight"
          :set-highlight="setHighlight"
          :toggle-expanded="toggleExpanded"

          :simple="treeViewIsSimple"
          :toggle-thread-display="toggleThreadDisplay"
          :thread-display-status="threadDisplayStatus"
          :show-thread-recursively="showThreadRecursively"
          :total-reply-count="totalReplyCount"
          :total-reply-depth="totalReplyDepth"
          :status-content-properties="statusContentProperties"
          :set-status-content-property="setStatusContentProperty"
          :toggle-status-content-property="toggleStatusContentProperty"
          :dive="canDive ? diveIntoStatus : undefined"
        />
      </div>
      <div
        v-if="isLinearView"
        class="thread-body"
      >
        <article>
          <status
            v-for="status in conversation"
            :key="status.id"
            ref="statusComponent"
            :inline-expanded="collapsable && isExpanded"
            :statusoid="status"
            :expandable="!isExpanded"
            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
            :focused="focused(status.id)"
            :in-conversation="isExpanded"
            :highlight="getHighlight()"
            :replies="getReplies(status.id)"
            :in-profile="inProfile"
            :profile-user-id="profileUserId"
            class="conversation-status status-fadein"

            :toggle-thread-display="toggleThreadDisplay"
            :thread-display-status="threadDisplayStatus"
            :show-thread-recursively="showThreadRecursively"
            :total-reply-count="totalReplyCount"
            :total-reply-depth="totalReplyDepth"
            :status-content-properties="statusContentProperties"
            :set-status-content-property="setStatusContentProperty"
            :toggle-status-content-property="toggleStatusContentProperty"

            @goto="setHighlight"
            @toggleExpanded="toggleExpanded"
          />
        </article>
      </div>
    </div>
  </div>
  <div
    v-else
    :style="hiddenStyle"
  />
</template>

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

<style lang="scss">
.Conversation {
  z-index: 1;

  .conversation-dive-to-top-level-box {
    padding: var(--status-margin);
    border-bottom: 1px solid var(--border);
    border-radius: 0;

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

  .thread-ancestors {
    margin-left: var(--status-margin);
    border-left: 2px solid var(--border);
  }

  .thread-ancestor.-faded .RichContent {
    /* stylelint-disable declaration-no-important */
    --text: var(--textFaint) !important;
    --link: var(--linkFaint) !important;
    --funtextGreentext: var(--funtextGreentextFaint) !important;
    --funtextCyantext: var(--funtextCyantextFaint) !important;
    /* 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);
  }

  .conversation-status {
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .thread-ancestor-has-other-replies .conversation-status,
  &:last-child:not(.-expanded) .conversation-status,
  &.-expanded .conversation-status:last-child,
  .thread-ancestor:last-child .conversation-status,
  .thread-ancestor:last-child .thread-ancestor-dive-box,
  &.-expanded .thread-tree .conversation-status {
    border-bottom: none;
  }

  .thread-ancestors + .thread-tree > .conversation-status {
    border-top: 1px solid var(--border);
  }

  /* expanded conversation in timeline */
  &.status-fadein.-expanded .thread-body {
    border-left: 4px solid var(--cRed);
    border-radius: var(--roundness);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 1px solid var(--border);
  }

  &.-expanded.status-fadein {
    background: var(--background);
    padding: calc(var(--status-margin) / 2);
  }
}
</style>