wip

packages/frontend/src/components/MkNotifications.vue

@@ -5,39 +5,44 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkPullToRefresh :refresher="() => reload()">
-	<MkPagination ref="pagingComponent" :pagination="pagination">
+	<MkLoading v-if="paginator.fetching.value"/>
-		<template #empty>
+
+	<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
+
+	<div v-else-if="paginator.items.value.size === 0" key="_empty_">
+		<slot name="empty">
 			<div class="_fullinfo">
 				<img :src="infoImageUrl" draggable="false"/>
 				<div>{{ i18n.ts.noNotifications }}</div>
 			</div>
-		</template>
+		</slot>
+	</div>
 
-		<template #default="{ items: notifications }">
+	<div v-else ref="rootEl">
-			<component
+		<component
-				:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
+			:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
-				:enterActiveClass="$style.transition_x_enterActive"
+			:enterActiveClass="$style.transition_x_enterActive"
-				:leaveActiveClass="$style.transition_x_leaveActive"
+			:leaveActiveClass="$style.transition_x_leaveActive"
-				:enterFromClass="$style.transition_x_enterFrom"
+			:enterFromClass="$style.transition_x_enterFrom"
-				:leaveToClass="$style.transition_x_leaveTo"
+			:leaveToClass="$style.transition_x_leaveTo"
-				:moveClass=" $style.transition_x_move"
+			:moveClass=" $style.transition_x_move"
-				tag="div"
+			tag="div"
-			>
+		>
-				<template v-for="(notification, i) in notifications" :key="notification.id">
+			<template v-for="(notification, i) in Array.from(paginator.items.value.values())" :key="notification.id">
-					<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
-					<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
+				<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
-				</template>
+			</template>
-			</component>
+		</component>
-		</template>
+	</div>
-	</MkPagination>
 </MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
 import { onUnmounted, onMounted, computed, useTemplateRef, TransitionGroup } from 'vue';
 import * as Misskey from 'misskey-js';
+import { useInterval } from '@@/js/use-interval.js';
+import { isHeadVisible } from '@@/js/scroll.js';
 import type { notificationTypes } from '@@/js/const.js';
-import MkPagination from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkNote from '@/components/MkNote.vue';
 import { useStream } from '@/stream.js';
@@ -46,27 +51,44 @@ import { infoImageUrl } from '@/instance.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { prefer } from '@/preferences.js';
 import { store } from '@/store.js';
+import { usePagination } from '@/use/use-pagination.js';
 
 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
 }>();
 
-const pagingComponent = useTemplateRef('pagingComponent');
+const rootEl = useTemplateRef('rootEl');
 
-const pagination = computed(() => prefer.r.useGroupedNotifications.value ? {
+const paginator = usePagination({
-	endpoint: 'i/notifications-grouped' as const,
+	ctx: prefer.s.useGroupedNotifications ? {
-	limit: 20,
+		endpoint: 'i/notifications-grouped' as const,
-	params: computed(() => ({
+		limit: 20,
-		excludeTypes: props.excludeTypes ?? undefined,
+		params: computed(() => ({
-	})),
+			excludeTypes: props.excludeTypes ?? undefined,
-} : {
+		})),
-	endpoint: 'i/notifications' as const,
+	} : {
-	limit: 20,
+		endpoint: 'i/notifications' as const,
-	params: computed(() => ({
+		limit: 20,
-		excludeTypes: props.excludeTypes ?? undefined,
+		params: computed(() => ({
-	})),
+			excludeTypes: props.excludeTypes ?? undefined,
+		})),
+	},
 });
 
+const POLLING_INTERVAL = 1000 * 15;
+
+if (!store.s.realtimeMode) {
+	useInterval(async () => {
+		const isTop = isHeadVisible(rootEl.value, 16);
+		paginator.fetchNewer({
+			toQueue: !isTop,
+		});
+	}, POLLING_INTERVAL, {
+		immediate: false,
+		afterMounted: true,
+	});
+}
+
 function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || window.document.visibilityState === 'visible') {
@@ -76,13 +98,13 @@ function onNotification(notification) {
 	}
 
 	if (!isMuted) {
-		pagingComponent.value?.prepend(notification);
+		paginator.prepend(notification);
 	}
 }
 
 function reload() {
 	return new Promise<void>((res) => {
-		pagingComponent.value?.reload().then(() => {
+		paginator.reload().then(() => {
 			res();
 		});
 	});

packages/frontend/src/components/MkPagination.vue

@@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div v-else ref="rootEl" class="_gaps">
 		<div v-show="pagination.reversed && paginator.canFetchMore.value" key="_more_">
-			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchMoreAhead">
+			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchNewer">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else/>
 		</div>
 		<slot :items="Array.from(paginator.items.value.values())" :fetching="paginator.fetching.value || paginator.moreFetching.value"></slot>
 		<div v-show="!pagination.reversed && paginator.canFetchMore.value" key="_more_">
-			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchMore">
+			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchOlder">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else/>
@@ -64,11 +64,11 @@ const paginator = usePagination({
 });
 
 function appearFetchMoreAhead() {
-	paginator.fetchMoreAhead();
+	paginator.fetchNewer();
 }
 
 function appearFetchMore() {
-	paginator.fetchMore();
+	paginator.fetchOlder();
 }
 
 onMounted(() => {

packages/frontend/src/components/MkTimeline.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 
 	<div v-else ref="rootEl">
-		<div v-if="notesQueue.length > 0" :class="$style.new" @click="releaseQueue()"><button class="_button" :class="$style.newButton">{{ i18n.ts.newNoteRecived }}</button></div>
+		<div v-if="paginator.queue.value.length > 0" :class="$style.new" @click="releaseQueue()"><button class="_button" :class="$style.newButton">{{ i18n.ts.newNoteRecived }}</button></div>
 		<component
 			:is="prefer.s.animation ? TransitionGroup : 'div'"
 			:class="[$style.notes, { [$style.noGap]: noGap, '_gaps': !noGap }]"
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
 			</template>
 		</component>
-		<button v-show="paginator.canFetchMore.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchMore : null" :disabled="paginator.moreFetching.value" class="_button" :class="$style.more" @click="paginator.fetchMore">
+		<button v-show="paginator.canFetchMore.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.moreFetching.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
 			<div v-if="!paginator.moreFetching.value">{{ i18n.ts.loadMore }}</div>
 			<MkLoading v-else/>
 		</button>
@@ -67,7 +67,6 @@ import MkNote from '@/components/MkNote.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
 
 const props = withDefaults(defineProps<{
 	src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';
@@ -113,31 +112,18 @@ const POLLING_INTERVAL = 1000 * 15;
 
 if (!store.s.realtimeMode) {
 	useInterval(async () => {
-		const notes = await misskeyApi(paginationQuery.endpoint, {
-			...paginationQuery.params,
-			limit: 10,
-			sinceId: Array.from(paginator.items.value.keys()).at(0),
-		});
-		console.log(notes);
-
 		const isTop = isHeadVisible(rootEl.value, 16);
-		if (isTop) {
+		paginator.fetchNewer({
-			paginator.unshiftItems(notes.toReversed());
+			toQueue: !isTop,
-		} else {
+		});
-			notesQueue.value.unshift(...notes.toReversed());
-		}
 	}, POLLING_INTERVAL, {
 		immediate: false,
 		afterMounted: true,
 	});
 }
 
-const notesQueue = ref<Misskey.entities.Note[]>([]);
-
 function releaseQueue() {
-	paginator.unshiftItems(notesQueue.value);
+	paginator.releaseQueue();
-	notesQueue.value = [];
-
 	scrollToTop(rootEl.value);
 }
 
@@ -152,7 +138,7 @@ function prepend(note: Misskey.entities.Note) {
 	if (isTop) {
 		paginator.prepend(note);
 	} else {
-		notesQueue.value.unshift(note);
+		paginator.enqueue(note);
 	}
 
 	if (props.sound) {

packages/frontend/src/use/use-pagination.ts

@@ -38,24 +38,20 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 	offsetMode?: boolean;
 };
 
-type MisskeyEntityMap = Map<string, MisskeyEntity>;
-
 function arrayToEntries(entities: MisskeyEntity[]): [string, MisskeyEntity][] {
 	return entities.map(en => [en.id, en]);
 }
 
-function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): MisskeyEntityMap {
+export function usePagination<T = MisskeyEntity>(props: {
-	return new Map([...map, ...arrayToEntries(entities)]);
-}
-
-export function usePagination<T>(props: {
 	ctx: PagingCtx;
 }) {
 	/**
 	 * 表示するアイテムのソース
 	 * 最新が0番目
 	 */
-	const items = ref<MisskeyEntityMap>(new Map());
+	const items = ref<Map<string, T>>(new Map());
+
+	const queue = ref<T[]>([]);
 
 	/**
 	 * 初期化中かどうか（trueならMkLoadingで全て隠す）
@@ -100,11 +96,11 @@ export function usePagination<T>(props: {
 		});
 	}
 
-	const reload = (): Promise<void> => {
+	function reload(): Promise<void> {
 		return init();
-	};
+	}
 
-	const fetchMore = async (): Promise<void> => {
+	async function fetchOlder(): Promise<void> {
 		if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.size === 0) return;
 		moreFetching.value = true;
 		const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
@@ -123,22 +119,21 @@ export function usePagination<T>(props: {
 			}
 
 			if (res.length === 0) {
-				items.value = concatMapWithArray(items.value, res);
 				canFetchMore.value = false;
 				moreFetching.value = false;
 			} else {
-				items.value = concatMapWithArray(items.value, res);
+				items.value = new Map([...items.value, ...arrayToEntries(res)]);
 				canFetchMore.value = true;
 				moreFetching.value = false;
 			}
 		}, err => {
 			moreFetching.value = false;
 		});
-	};
+	}
 
-	const fetchMoreAhead = async (): Promise<void> => {
+	async function fetchNewer(options: {
-		if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.size === 0) return;
+		toQueue?: boolean;
-		moreFetching.value = true;
+	} = {}): Promise<void> {
 		const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
 		await misskeyApi<MisskeyEntity[]>(props.ctx.endpoint, {
 			...params,
@@ -146,64 +141,58 @@ export function usePagination<T>(props: {
 			...(props.ctx.offsetMode ? {
 				offset: items.value.size,
 			} : {
-				sinceId: Array.from(items.value.keys()).at(-1),
+				sinceId: Array.from(items.value.keys()).at(0),
 			}),
 		}).then(res => {
-			if (res.length === 0) {
+			if (options.toQueue) {
-				items.value = concatMapWithArray(items.value, res);
+				queue.value.unshift(...res.toReversed());
-				canFetchMore.value = false;
 			} else {
-				items.value = concatMapWithArray(items.value, res);
+				items.value = new Map([...arrayToEntries(res), ...items.value]);
-				canFetchMore.value = true;
 			}
-			moreFetching.value = false;
-		}, err => {
-			moreFetching.value = false;
 		});
-	};
+	}
 
 	function trim() {
 		if (items.value.size >= MAX_ITEMS) canFetchMore.value = true;
 		items.value = new Map([...items.value].slice(0, MAX_ITEMS));
 	}
 
-	function unshiftItems(newItems: MisskeyEntity[]) {
+	function unshiftItems(newItems: T[]) {
 		items.value = new Map([...arrayToEntries(newItems), ...items.value]);
 	}
 
-	function concatItems(oldItems: MisskeyEntity[]) {
+	function concatItems(oldItems: T[]) {
 		items.value = new Map([...items.value, ...arrayToEntries(oldItems)]);
 	}
 
-	function prepend(item: MisskeyEntity) {
+	function prepend(item: T) {
 		unshiftItems([item]);
 	}
 
-	const appendItem = (item: MisskeyEntity): void => {
+	function enqueue(item: T) {
-		items.value.set(item.id, item);
+		queue.value.unshift(item);
-	};
+	}
 
-	const removeItem = (id: string) => {
+	function releaseQueue() {
-		items.value.delete(id);
+		unshiftItems(queue.value);
-	};
+		queue.value = [];
-
+	}
-	const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
-		const item = items.value.get(id);
-		if (item) items.value.set(id, replacer(item));
-	};
 
 	return {
 		items,
+		queue,
 		fetching,
 		moreFetching,
 		canFetchMore,
 		init,
 		reload,
-		fetchMore,
+		fetchOlder,
-		fetchMoreAhead,
+		fetchNewer,
 		unshiftItems,
 		prepend,
 		trim,
+		enqueue,
+		releaseQueue,
 		error,
 	};
 }