enhance(frontend): improve pull to refresh

packages/frontend/src/components/MkNotifications.vue

@@ -4,25 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
+<MkPullToRefresh :refresher="() => reload()">
-	<template #empty>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
-		<div class="_fullinfo">
+		<template #empty>
-			<img :src="infoImageUrl" class="_ghost"/>
+			<div class="_fullinfo">
-			<div>{{ i18n.ts.noNotifications }}</div>
+				<img :src="infoImageUrl" class="_ghost"/>
-		</div>
+				<div>{{ i18n.ts.noNotifications }}</div>
-	</template>
+			</div>
+		</template>
 
-	<template #default="{ items: notifications }">
+		<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
-			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
+				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
-		</MkDateSeparatedList>
+			</MkDateSeparatedList>
-	</template>
+		</template>
-</MkPagination>
+	</MkPagination>
+</MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onDeactivated, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@@ -33,6 +35,7 @@ import { i18n } from '@/i18n.js';
 import { notificationTypes } from '@/const.js';
 import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 
 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
@@ -54,7 +57,7 @@ const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
 	})),
 };
 
-const onNotification = (notification) => {
+function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || document.visibilityState === 'visible') {
 		useStream().send('readNotification');
@@ -63,7 +66,15 @@ const onNotification = (notification) => {
 	if (!isMuted) {
 		pagingComponent.value.prepend(notification);
 	}
-};
+}
+
+function reload() {
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
+}
 
 let connection;
 
@@ -72,6 +83,12 @@ onMounted(() => {
 	connection.on('notification', onNotification);
 });
 
+onActivated(() => {
+	pagingComponent.value?.reload();
+	connection = useStream().useChannel('main');
+	connection.on('notification', onNotification);
+});
+
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });

packages/frontend/src/components/MkPullToRefresh.vue

@@ -47,7 +47,13 @@ let scrollEl: HTMLElement | null = null;
 
 let disabled = false;
 
-const emits = defineEmits<{
+const props = withDefaults(defineProps<{
+	refresher: () => Promise<void>;
+}>(), {
+	refresher: () => Promise.resolve(),
+});
+
+const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();
 
@@ -120,7 +126,12 @@ function moveEnd() {
 		if (isPullEnd) {
 			isPullEnd = false;
 			isRefreshing = true;
-			fixOverContent().then(() => emits('refresh'));
+			fixOverContent().then(() => {
+				emit('refresh');
+				props.refresher().then(() => {
+					refreshFinished();
+				});
+			});
 		} else {
 			closeContent().then(() => isPullStart = false);
 		}
@@ -188,7 +199,6 @@ onUnmounted(() => {
 });
 
 defineExpose({
-	refreshFinished,
 	setDisabled,
 });
 </script>

packages/frontend/src/components/MkTimeline.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPullToRefresh ref="prComponent" @refresh="() => reloadTimeline(true)">
+<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
 	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
 </MkPullToRefresh>
 </template>
@@ -196,25 +196,18 @@ const pagination = {
 	params: query,
 };
 
-const reloadTimeline = (fromPR = false) => {
+function reloadTimeline() {
-	tlNotesCount = 0;
+	return new Promise<void>((res) => {
+		tlNotesCount = 0;
 
-	tlComponent.pagingComponent?.reload().then(() => {
+		tlComponent.pagingComponent?.reload().then(() => {
-		reloadStream();
+			reloadStream();
-		if (fromPR) prComponent.refreshFinished();
+			res();
+		});
 	});
-};
+}
-
-//const pullRefresh = () => reloadTimeline(true);
 
 defineExpose({
 	reloadTimeline,
 });
-
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
 </script>