diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 65fbbbfd8..72fd45ba9 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -16,10 +16,10 @@ import { useStatusesStore } from 'src/stores/statuses.js' import { useStreamingStore } from 'src/stores/streaming.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 { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js' import { WSConnectionStatus } from 'src/api/websocket.js' @@ -201,15 +201,11 @@ export default { // # Linear style stuff const isLinearView = computed(() => displayStyle.value !== 'tree') const linearElement = useTemplateRef('linear') - const linearScrollCompensation = computed( - () => isLinearView.value, - ) + const linearScrollCompensation = computed(() => isLinearView.value) const { heightChart: heightChartLinear, changeSuspendState: changeSuspendStateLinear, updateVirtualHeight: updateVirtualHeightLinear, - pauseWatchers, - resumeWatchers, } = useVirtualScrolling({ list: conversation, body: linearElement, @@ -232,9 +228,7 @@ export default { provide('threadDisplay', threadDisplay) const ancestorsElement = useTemplateRef('ancestors') - const treeScrollCompensation = computed( - () => isTreeView.value, - ) + const treeScrollCompensation = computed(() => isTreeView.value) const { heightChart: heightChartAncestors, changeSuspendState: changeSuspendStateAncestors, diff --git a/src/composables/useConversation.js b/src/composables/useConversation.js index a0cc960cc..9bec1e160 100644 --- a/src/composables/useConversation.js +++ b/src/composables/useConversation.js @@ -22,7 +22,9 @@ export function useConversation(statusId, expanded) { const loadError = ref(null) const currentStatus = computed(() => getStatusObject(statusId.value)) - const mainStatus = computed(() => currentStatus.value?.retweeted_status ?? currentStatus.value) + const mainStatus = computed( + () => currentStatus.value?.retweeted_status ?? currentStatus.value, + ) const sortById = (a, b) => { const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id diff --git a/src/composables/useInterfaceSizes.js b/src/composables/useInterfaceSizes.js index 43bc79be1..7404d6cd5 100644 --- a/src/composables/useInterfaceSizes.js +++ b/src/composables/useInterfaceSizes.js @@ -1,5 +1,5 @@ -import { computed, ref, toValue, watch } from 'vue' import { storeToRefs } from 'pinia' +import { computed, ref, watch } from 'vue' import { useMergedConfigStore } from 'src/stores/merged_config.js' @@ -20,17 +20,19 @@ export function useInterfaceSizes() { watch(fontSizeSetting, updateFontSize, { immediate: true }) const navbarSize = computed(() => { - const string = fontSize.value * window - .getComputedStyle(document.body) - .getPropertyValue('--navbarSize') + const string = + fontSize.value * + window.getComputedStyle(document.body).getPropertyValue('--navbarSize') return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem' }) const panelHeaderSize = computed(() => { - const string = fontSize.value * window - .getComputedStyle(document.body) - .getPropertyValue('--panelHeaderSize') + const string = + fontSize.value * + window + .getComputedStyle(document.body) + .getPropertyValue('--panelHeaderSize') return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem' }) diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js index bb1f11903..07e0cae8c 100644 --- a/src/composables/useVirtualScrolling.js +++ b/src/composables/useVirtualScrolling.js @@ -1,4 +1,4 @@ -import { computed, ref, toValue, watch, nextTick } from 'vue' +import { computed, nextTick, ref, toValue, watch } from 'vue' import { useWindowSize } from 'src/composables/useWindowSize.js' @@ -63,11 +63,7 @@ export function useVirtualScrolling({ } // ## Scroll compensation - const { - y: scrollY, - inProgress: scrollInProgress, - scrollBy, - } = scrollPositionInstance + const { y: scrollY, scrollBy } = scrollPositionInstance watch(heightChart, async (newVal, oldVal) => { if (!toValue(scrollCompensation)) return if (newVal.length === 0 && oldVal.length === 0) return @@ -76,7 +72,10 @@ export function useVirtualScrolling({ // If we're not given an achor, treat last element as one const getAnchoredEl = (list) => toValue(anchorId) - ? list.find(({ id }) => id === toValue(anchorId) || id === toValue(anchorRepeatId)) + ? list.find( + ({ id }) => + id === toValue(anchorId) || id === toValue(anchorRepeatId), + ) : list[list.length - 1] const oldElement = getAnchoredEl(oldVal) @@ -85,8 +84,12 @@ export function useVirtualScrolling({ const diff = (() => { if (oldElement && newElement) { // Generic shifting - const oldOffset = toValue(anchorId) ? oldElement.top : (oldElement.top + oldElement.height) - const newOffset = toValue(anchorId) ? newElement.top : (newElement.top + newElement.height) + const oldOffset = toValue(anchorId) + ? oldElement.top + : oldElement.top + oldElement.height + const newOffset = toValue(anchorId) + ? newElement.top + : newElement.top + newElement.height return newOffset - oldOffset } else if (!oldElement && newElement) { // Expansion @@ -95,7 +98,9 @@ export function useVirtualScrolling({ // Collapsing return 0 - oldElement.top - oldElement.height } else { - throw new Error("Somehow both new and old elements are missing, this shouldn't happen") + throw new Error( + "Somehow both new and old elements are missing, this shouldn't happen", + ) } })()