fix(frontend): ページネーションの進行方向を指定できるように (#16433)

* fix(frontend): ページネーションの進行方向を指定できるように

* Update Changelog

* fix lint

* fix: directionをMkPaginationに移動

* fix

* fix

* fix

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

2 files changed, 49 insertions, 7 deletions

diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue
index 42d44dffdb..d94cf3924c 100644
--- a/packages/frontend/src/components/MkNotesTimeline.vue
+++ b/packages/frontend/src/components/MkNotesTimeline.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPagination :paginator="paginator" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
+<MkPagination :paginator="paginator" :direction="direction" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
 	<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template>
 
 	<template #default="{ items: notes }">
@@ -50,11 +50,14 @@ import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-sep
 const props = withDefaults(defineProps<{
 	paginator: T;
 	noGap?: boolean;
+
+	direction?: 'up' | 'down' | 'both';
 	autoLoad?: boolean;
 	pullToRefresh?: boolean;
 	withControl?: boolean;
 }>(), {
 	autoLoad: true,
+	direction: 'down',
 	pullToRefresh: true,
 	withControl: true,
 });
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 8ca1c80e84..4ea62f2812 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -25,15 +25,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 
 			<div v-else key="_root_" class="_gaps">
-				<slot :items="unref(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
-				<div v-if="paginator.order.value === 'oldest'">
-					<MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer()">
+				<div v-if="direction === 'up' || direction === 'both'" v-show="upButtonVisible">
+					<MkButton v-if="!upButtonLoading" :class="$style.more" primary rounded @click="upButtonClick">
 						{{ i18n.ts.loadMore }}
 					</MkButton>
 					<MkLoading v-else/>
 				</div>
-				<div v-else v-show="paginator.canFetchOlder.value">
-					<MkButton v-if="!paginator.fetchingOlder.value" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder()">
+				<slot :items="unref(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
+				<div v-if="direction === 'down' || direction === 'both'" v-show="downButtonVisible">
+					<MkButton v-if="!downButtonLoading" :class="$style.more" primary rounded @click="downButtonClick">
 						{{ i18n.ts.loadMore }}
 					</MkButton>
 					<MkLoading v-else/>
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup generic="T extends IPaginator">
 import { isLink } from '@@/js/is-link.js';
-import { onMounted, watch, unref } from 'vue';
+import { onMounted, computed, watch, unref } from 'vue';
 import type { UnwrapRef } from 'vue';
 import type { IPaginator } from '@/utility/paginator.js';
 import MkButton from '@/components/MkButton.vue';
@@ -58,11 +58,20 @@ import * as os from '@/os.js';
 
 const props = withDefaults(defineProps<{
 	paginator: T;
+
+	// ページネーションを進める方向
+	// up: 上方向
+	// down: 下方向 (default)
+	// both: 双方向
+	// NOTE: この方向はページネーションの方向であって、アイテムの並び順ではない
+	direction?: 'up' | 'down' | 'both';
+
 	autoLoad?: boolean;
 	pullToRefresh?: boolean;
 	withControl?: boolean;
 }>(), {
 	autoLoad: true,
+	direction: 'down',
 	pullToRefresh: true,
 	withControl: false,
 });
@@ -93,6 +102,36 @@ if (props.paginator.computedParams) {
 	}, { immediate: false, deep: true });
 }
 
+const upButtonVisible = computed(() => {
+	return props.paginator.order.value === 'oldest' ? props.paginator.canFetchOlder.value : props.paginator.canFetchNewer.value;
+});
+const upButtonLoading = computed(() => {
+	return props.paginator.order.value === 'oldest' ? props.paginator.fetchingOlder.value : props.paginator.fetchingNewer.value;
+});
+
+function upButtonClick() {
+	if (props.paginator.order.value === 'oldest') {
+		props.paginator.fetchOlder();
+	} else {
+		props.paginator.fetchNewer();
+	}
+}
+
+const downButtonVisible = computed(() => {
+	return props.paginator.order.value === 'oldest' ? props.paginator.canFetchNewer.value : props.paginator.canFetchOlder.value;
+});
+const downButtonLoading = computed(() => {
+	return props.paginator.order.value === 'oldest' ? props.paginator.fetchingNewer.value : props.paginator.fetchingOlder.value;
+});
+
+function downButtonClick() {
+	if (props.paginator.order.value === 'oldest') {
+		props.paginator.fetchNewer();
+	} else {
+		props.paginator.fetchOlder();
+	}
+}
+
 defineSlots<{
 	empty: () => void;
 	default: (props: { items: UnwrapRef<T['items']> }) => void;