From 41e0242b40ddb86e9f0f630264925dbf82b49af0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 21 Aug 2025 19:04:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20direction=E3=82=92MkPagination=E3=81=AB?=
 =?UTF-8?q?=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkNotesTimeline.vue     |  5 ++++-
 packages/frontend/src/components/MkPagination.vue   | 13 +++++++++++--
 packages/frontend/src/pages/note.vue                |  4 +---
 packages/frontend/src/utility/paginator.ts          | 10 ----------
 4 files changed, 16 insertions(+), 16 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 14dd8e663e..4ea62f2812 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -25,14 +25,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 
 			<div v-else key="_root_" class="_gaps">
-				<div v-if="paginator.direction === 'up' || paginator.direction === 'both'" v-show="upButtonVisible">
+				<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>
 				<slot :items="unref(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
-				<div v-if="paginator.direction === 'down' || paginator.direction === 'both'" v-show="downButtonVisible">
+				<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>
@@ -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,
 });
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 51202ada7a..89ae3d2d83 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<Transition :name="prefer.s.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="note">
 				<div v-if="showNext" class="_margin">
-					<MkNotesTimeline :withControl="false" :pullToRefresh="false" class="" :paginator="showNext === 'channel' ? nextChannelPaginator : nextUserPaginator" :noGap="true"/>
+					<MkNotesTimeline direction="up" :withControl="false" :pullToRefresh="false" class="" :paginator="showNext === 'channel' ? nextChannelPaginator : nextUserPaginator" :noGap="true"/>
 				</div>
 
 				<div class="_margin">
@@ -90,7 +90,6 @@ const nextUserPaginator = markRaw(new Paginator('users/notes', {
 	limit: 10,
 	initialId: props.noteId,
 	initialDirection: 'newer',
-	direction: 'up',
 	computedParams: computed(() => note.value ? ({
 		userId: note.value.userId,
 	}) : undefined),
@@ -108,7 +107,6 @@ const nextChannelPaginator = markRaw(new Paginator('channels/timeline', {
 	limit: 10,
 	initialId: props.noteId,
 	initialDirection: 'newer',
-	direction: 'up',
 	computedParams: computed(() => note.value && note.value.channelId != null ? ({
 		channelId: note.value.channelId,
 	}) : undefined),
diff --git a/packages/frontend/src/utility/paginator.ts b/packages/frontend/src/utility/paginator.ts
index f05bca2c4a..0aed2ddb2c 100644
--- a/packages/frontend/src/utility/paginator.ts
+++ b/packages/frontend/src/utility/paginator.ts
@@ -46,7 +46,6 @@ export interface IPaginator<T = unknown, _T = T & MisskeyEntity> {
 	initialDirection: 'newer' | 'older';
 	noPaging: boolean;
 	searchQuery: Ref<null | string>;
-	direction: 'up' | 'down' | 'both';
 	order: Ref<'newest' | 'oldest'>;
 
 	init(): Promise<void>;
@@ -102,13 +101,6 @@ export class Paginator<
 	private aheadQueue: T[] = [];
 	private useShallowRef: SRef;
 
-	// ページネーションを進める方向
-	// up: 上方向
-	// down: 下方向 (default)
-	// both: 双方向
-	// NOTE: この方向はページネーションの方向であって、アイテムの並び順ではない
-	public direction: 'up' | 'down' | 'both' = 'down';
-
 	// 配列内の要素をどのような順序で並べるか
 	// newest: 新しいものが先頭 (default)
 	// oldest: 古いものが先頭
@@ -132,7 +124,6 @@ export class Paginator<
 		initialDate?: number | null;
 		initialDirection?: 'newer' | 'older';
 
-		direction?: 'up' | 'down' | 'both';
 		order?: 'newest' | 'oldest';
 
 		// 一部のAPIはさらに遡れる場合でもパフォーマンス上の理由でlimit以下の結果を返す場合があり、その場合はsafe、それ以外はlimitにすることを推奨
@@ -155,7 +146,6 @@ export class Paginator<
 		this.params = props.params ?? {};
 		this.computedParams = props.computedParams ?? null;
 		this.order = ref(props.order ?? 'newest');
-		this.direction = props.direction ?? 'down';
 		this.initialId = props.initialId ?? null;
 		this.initialDate = props.initialDate ?? null;
 		this.initialDirection = props.initialDirection ?? 'older';