pleroma-fe/src/components/conversation/conversation.js

import { storeToRefs } from 'pinia'
import {
  computed,
  nextTick,
  onUnmounted,
  provide,
  ref,
  toRefs,
  useTemplateRef,
  watch,
} from 'vue'

import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import ThreadTree from 'src/components/thread_tree/thread_tree.vue'

import { useInterfaceStore } from 'src/stores/interface.js'
import { useMergedConfigStore } from 'src/stores/merged_config.js'

import { useConversation } from 'src/composables/useConversation.js'
import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
import { useScrollPosition } from 'src/composables/useScrollPosition.js'
import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faAngleDoubleDown,
  faAngleDoubleLeft,
  faChevronLeft,
  faReply,
  faTimes,
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faAngleDoubleDown,
  faAngleDoubleLeft,
  faChevronLeft,
  faReply,
  faTimes,
)

export default {
  props: {
    statusId: {
      // Main thing
      type: String,
      required: true,
    },
    isPage: {
      // Whether conversation is rendered as a standalone page
      // as opposed to embedded into a timeline
      type: Boolean,
      default: false,
    },
  },
  components: {
    ThreadTree,
    QuickFilterSettings,
    QuickViewSettings,
    ChatMessageList,
    PostStatusForm,
    RichContent,
  },
  emits: ['heightChange', 'suspendableStateChange', 'expanded', 'collapsed'],
  setup(props, { emit }) {
    const scroller = useScrollPosition()
    const { statusId } = toRefs(props)

    // # Main Configuration / global state
    const { mergedConfig } = storeToRefs(useMergedConfigStore())
    const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
    const { layoutType } = storeToRefs(useInterfaceStore())
    const mobileLayout = computed(() => layoutType.value === 'mobile')

    // # Conversation Expansion
    const expanded = ref(false)
    const { isPage } = toRefs(props)
    const isExpanded = computed(() => !!(expanded.value || isPage.value))
    const toggleExpanded = async () => {
      const newVal = !expanded.value
      if (newVal) {
        virtualScrollingEnabled.value = newVal
        await nextTick()
        expanded.value = newVal
      } else {
        expanded.value = newVal
        await nextTick()
        virtualScrollingEnabled.value = newVal
      }
    }
    provide('isExpanded', isExpanded)
    provide('isPage', isPage)
    provide('expandable', true)
    watch(expanded, (val) => (val ? emit('expanded') : emit('collapsed')), {
      flush: 'post',
    })

    // # Main things
    const {
      focusedId,
      conversationId,
      setFocused,
      currentStatus,
      conversation,
      replies,
      getReplies,
      fetchConversation,
      loadError,
    } = useConversation(statusId, isExpanded)
    const conversationLite = computed(() =>
      conversation.value.map(({ id }) => ({ id })),
    )
    provide('focusedId', focusedId)
    provide('conversation', conversation)
    provide('replies', replies)

    // Component created
    if (isPage.value) {
      fetchConversation()
    }

    // # Misc UI things
    const firstStatus = computed(() => conversation.value[0])
    const lastStatus = computed(
      () => conversation.value[conversation.value.legnth - 1],
    )
    const getStatusClasses = (statusId, ancestor) => {
      const result = {
        '-first': statusId === firstStatus.value?.id,
        '-last': statusId === lastStatus.value?.id,
      }
      if (ancestor) {
        result['-ancestor'] = true
        result['-fade'] = mergedConfig.value.conversationTreeFadeAncestors
      }
      return result
    }

    // # External virtual scrolling
    const unsuspendableIds = ref(new Set())
    const suspendable = computed(
      () => !isExpanded.value && unsuspendableIds.value.size === 0,
    )
    const rootElement = useTemplateRef('root')
    const rootElementMargin = ref(null)
    const updateVirtualHeight = (e) => {
      const [entry] = e

      const rootCss = window.getComputedStyle(rootElement.value)
      const rootMarginString = rootCss.getPropertyValue('margin-top')
      const rootMargin = Number.parseInt(rootMarginString.slice(0, -2), 10)
      rootElementMargin.value = rootMargin

      emit('heightChange', {
        id: statusId.value,
        height: entry.contentRect.height,
        element: rootElement,
      })
    }
    const resizeObserver = ref(new ResizeObserver(updateVirtualHeight))
    watch(rootElement, () => resizeObserver.value.observe(rootElement.value))
    watch(suspendable, (value) =>
      emit('suspendableStateChange', { suspendable: value, id: statusId.value }),
    )
    onUnmounted(() => resizeObserver.value.disconnect())

    // # Internal virtual scrolling
    const virtualScrollingEnabled = ref(isExpanded.value)

    // Placeholder heights.
    const { fontSize, navbarSize, panelHeaderSize } = useInterfaceSizes()
    const normalStatusHeight = computed(() => fontSize.value * 10)
    const getPlaceholderHeight = (id) => normalStatusHeight
    const offset = computed(() => {
      // The fontsize after navbar is the little gap between navbar and content
      if (isPage.value) {
        return navbarSize.value + fontSize.value + panelHeaderSize.value
      } else if (expanded.value) {
        return (
          navbarSize.value +
          fontSize.value +
          panelHeaderSize.value * 2 +
          rootElementMargin.value
        )
      } else {
        return navbarSize.value + fontSize.value
      }
    })

    // # Linear style stuff
    const isLinearView = computed(() => displayStyle.value !== 'tree')
    const linearElement = useTemplateRef('linear')
    const linearScrollCompensation = computed(
      () => virtualScrollingEnabled.value && isLinearView.value,
    )
    const {
      heightChart: heightChartLinear,
      changeSuspendState: changeSuspendStateLinear,
      updateVirtualHeight: updateVirtualHeightLinear,
      reset: resetLinearScrollVirtualization,
      scrollTo: linearScrollTo,
    } = useVirtualScrolling({
      name: 'Linear',
      enabled: linearScrollCompensation,
      list: conversationLite,
      body: linearElement,
      offset,
      scrollPositionInstance: scroller,
      scrollCompensation: linearScrollCompensation,
      getPlaceholderHeight,
    })
    const changeSuspendStateLinearLocal = (e) => {
      changeSuspendStateLinear(e)
      const { id, suspendable } = e
      if (suspendable) {
        unsuspendableIds.value.delete(id)
      } else {
        unsuspendableIds.value.add(id)
      }
    }

    // # Tree style stuff
    const isTreeView = computed(() => displayStyle.value === 'tree')
    const {
      topLevel,
      currentAncestors,
      threadDisplay,
      showThreadRecursively,
      resetThreadDisplay,
    } = useTreeConversationTopology(conversation, replies, focusedId)
    provide('threadDisplay', threadDisplay)
    watch(
      isExpanded,
      (value) => {
        if (!value) resetThreadDisplay()
      },
      { flush: 'post' },
    )

    const currentAncestorsLite = computed(() =>
      currentAncestors.value.map(({ id }) => ({ id })),
    )
    const ancestorsElement = useTemplateRef('ancestors')
    const treeScrollCompensation = computed(
      () => virtualScrollingEnabled.value && isTreeView.value,
    )
    const {
      heightChart: heightChartAncestors,
      changeSuspendState: changeSuspendStateAncestors,
      updateVirtualHeight: updateVirtualHeightAncestors,
      reset: resetTreeScrollVirtualization,
    } = useVirtualScrolling({
      name: 'Ancestors',
      enabled: treeScrollCompensation,
      list: currentAncestorsLite,
      body: ancestorsElement,
      offset,
      scrollPositionInstance: scroller,
      scrollCompensation: treeScrollCompensation,
      collapseMode: 'height',
      getPlaceholderHeight,
    })
    const changeSuspendStateAncestorsLocal = (e) => {
      changeSuspendStateAncestors(e)
      const { id, suspendable } = e
      if (suspendable) {
        unsuspendableIds.value.delete(id)
      } else {
        unsuspendableIds.value.add(id)
      }
    }
    const changeSuspendStateCurrentLevelLocal = (e) => {
      const { id, suspendable } = e
      if (suspendable) {
        unsuspendableIds.value.delete(id)
      } else {
        unsuspendableIds.value.add(id)
      }
    }

    watch(conversationId, (neu, old) => {
      resetLinearScrollVirtualization()
      resetTreeScrollVirtualization()
    })

    const treeViewIsSimple = computed(
      () => !mergedConfig.value.conversationTreeAdvanced,
    )
    const shouldShowAllConversationButton = computed(
      () => currentAncestors.value.length > 0 && topLevel.value.length > 1,
    )
    const shouldShowAncestors = computed(
      () => isExpanded.value && heightChartAncestors.value.length > 0,
    )

    // # Scrolling
    const scrollTo = (ids) => {
      if (isLinearView.value) {
        return linearScrollTo(ids)
      }
    }
    const diveIntoStatus = (id) => setFocused(id)
    const diveToTopLevel = () => setFocused(currentAncestors.value[0].id)

    watch(focusedId, async (neu, old) => {
      // Ignoring initial update (null -> id) since that is handled by scroll compensation
      if (old && neu) scrollTo(new Set([neu]))
    })

    return {
      // # Misc
      loadError,
      mobileLayout,

      // # Conversation Expansion
      isPage,
      isExpanded,
      toggleExpanded,

      // # Focus
      focusedId,
      setFocused,

      // # Main things
      conversation,
      currentStatus,
      getReplies,

      // # Misc UI things
      getStatusClasses,

      // # Linear style stuff
      isLinearView,

      // ## Linear virtual scrolling
      heightChartLinear,
      changeSuspendStateLinearLocal,
      updateVirtualHeightLinear,

      // # Tree style stuff
      isTreeView,

      // ## Tree virtual scrolling
      heightChartAncestors,
      changeSuspendStateAncestorsLocal,
      updateVirtualHeightAncestors,

      changeSuspendStateCurrentLevelLocal,

      // ## Tree state
      // ### Topology
      topLevel,
      currentAncestors,

      // ### Thread Display
      showThreadRecursively,

      // ### Derived values and config
      treeViewIsSimple,
      shouldShowAllConversationButton,
      shouldShowAncestors,

      // # Scrolling
      diveToTopLevel,
      diveIntoStatus,
      unsuspendableIds,
    }
  },
}