From ddb41bd0ba562e8c4ad1972b6a34e75691c5a1e3 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 11 Jul 2023 14:39:59 +0000
Subject: [PATCH] :v:

---
 .../frontend/src/components/MkPagination.vue  | 25 +++++++++++--------
 .../frontend/src/components/MkTimeline.vue    |  6 +++--
 .../frontend/src/pages/antenna-timeline.vue   |  8 +-----
 packages/frontend/src/pages/timeline.vue      |  9 +------
 .../frontend/src/pages/user-list-timeline.vue |  9 +------
 5 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 985b9a4973..52a2c3af37 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -102,10 +102,6 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-const emit = defineEmits<{
-	(ev: 'queue', count: number): void;
-}>();
-
 let rootEl = $shallowRef<HTMLElement>();
 
 /**
@@ -128,6 +124,7 @@ const items = ref<MisskeyEntityMap>(new Map());
  * 最新が最後（パフォーマンス上の理由でitemsと逆にした）
  */
 const queue = ref<MisskeyEntityMap>(new Map());
+const queueSize = computed(() => queue.value.size);
 
 const offset = ref(0);
 
@@ -231,11 +228,6 @@ watch([$$(weakBacked), $$(contentEl)], () => {
 });
 //#endregion
 
-watch(queue, (a, b) => {
-	if (a.size === 0 && b.size === 0) return;
-	emit('queue', queue.value.size);
-}, { deep: true });
-
 /**
  * 初期化
  * scrollAfterInitなどの後処理もあるので、reload関数を使うべき
@@ -283,7 +275,12 @@ function scrollAfterInit() {
 	if (props.pagination.reversed) {
 		nextTick(() => {
 			setTimeout(() => {
-				if (contentEl) scrollToBottom(contentEl);
+				if (contentEl) {
+					scrollToBottom(contentEl);
+					// scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある
+					weakBacked = false;
+					backed = false;
+				}
 			}, 200);
 
 			// scrollToBottomでmoreFetchingボタンが画面外まで出るまで
@@ -295,7 +292,11 @@ function scrollAfterInit() {
 	} else {
 		nextTick(() => {
 			setTimeout(() => {
-				if (contentEl) scrollToTop(contentEl);
+				scrollToTop(scrollableElement);
+				// scrollToしてもbacked周りがうまく動かないので手動で戻す必要がある
+				weakBacked = false;
+				backed = false;
+
 				moreFetching.value = false;
 			}, 200);
 		});
@@ -471,6 +472,7 @@ const prepend = (item: MisskeyEntity): void => {
 	}
 
 	if (
+		queueSize.value === 0 && // キューに残っている場合はキューに追加する
 		!backed && // 先頭に表示されていない時はキューに追加する
 		!isPausingUpdate && // タブがバックグラウンドの時はキューに追加する
 		active.value // keepAliveで隠されている間はキューに追加する
@@ -566,6 +568,7 @@ defineExpose({
 	queue,
 	more,
 	inited,
+	queueSize,
 	reload,
 	prepend,
 	append: appendItem,
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 13d5b9f88d..bc15ebfcaf 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -1,5 +1,5 @@
 <template>
-<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination"/>
 </template>
 
 <script lang="ts" setup>
@@ -21,7 +21,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'note'): void;
-	(ev: 'queue', count: number): void;
 }>();
 
 provide('inChannel', computed(() => props.src === 'channel'));
@@ -169,5 +168,8 @@ defineExpose({
 	reload: () => {
 		tlComponent.pagingComponent?.reload();
 	},
+	queueSize: computed(() => {
+		return tlComponent.pagingComponent?.queueSize ?? 0;
+	}),
 });
 </script>
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index b2bc889cfb..693259a0e5 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -3,14 +3,13 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div ref="rootEl" v-hotkey.global="keymap">
-			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+			<div v-if="tlEl?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
 			<div :class="$style.tl">
 				<MkTimeline
 					ref="tlEl" :key="antennaId"
 					src="antenna"
 					:antenna="antennaId"
 					:sound="true"
-					@queue="queueUpdated"
 				/>
 			</div>
 		</div>
@@ -34,17 +33,12 @@ const props = defineProps<{
 }>();
 
 let antenna = $ref(null);
-let queue = $ref(0);
 let rootEl = $shallowRef<HTMLElement>();
 let tlEl = $shallowRef<InstanceType<typeof MkTimeline>>();
 const keymap = $computed(() => ({
 	't': focus,
 }));
 
-function queueUpdated(q) {
-	queue = q;
-}
-
 function top() {
 	tlEl?.reload();
 }
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 20b35c9a25..f045d53a69 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -6,14 +6,13 @@
 			<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
 			<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
 
-			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+			<div v-if="tlComponent?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
 			<div :class="$style.tl">
 				<MkTimeline
 					ref="tlComponent"
 					:key="src"
 					:src="src"
 					:sound="true"
-					@queue="queueUpdated"
 				/>
 			</div>
 		</div>
@@ -26,7 +25,6 @@ import { defineAsyncComponent, computed, watch, provide } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
-import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
@@ -47,16 +45,11 @@ const keymap = {
 const tlComponent = $shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = $shallowRef<HTMLElement>();
 
-let queue = $ref(0);
 let srcWhenNotSignin = $ref(isLocalTimelineAvailable ? 'local' : 'global');
 const src = $computed({ get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin), set: (x) => saveSrc(x) });
 
 watch ($$(src), () => queue = 0);
 
-function queueUpdated(q: number): void {
-	queue = q;
-}
-
 function top(): void {
 	tlComponent?.reload();
 }
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index 67a576ce83..e297e1747e 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -3,14 +3,13 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div ref="rootEl">
-			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
+			<div v-if="tlEl?.queueSize ?? 0 > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.goToTheHeadOfTimeline }}</button></div>
 			<div :class="$style.tl">
 				<MkTimeline
 					ref="tlEl" :key="listId"
 					src="list"
 					:list="listId"
 					:sound="true"
-					@queue="queueUpdated"
 				/>
 			</div>
 		</div>
@@ -21,7 +20,6 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import MkTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
@@ -34,7 +32,6 @@ const props = defineProps<{
 }>();
 
 let list = $ref(null);
-let queue = $ref(0);
 let tlEl = $shallowRef<InstanceType<typeof MkTimeline>>();
 let rootEl = $shallowRef<HTMLElement>();
 
@@ -44,10 +41,6 @@ watch(() => props.listId, async () => {
 	});
 }, { immediate: true });
 
-function queueUpdated(q) {
-	queue = q;
-}
-
 function top() {
 	tlEl?.reload();
 }