fix(frontend): 一部のページでもっと見るが自動で行われないバグの修正 (#16754)

* 一部のページでもっと見るが自動で行われないバグの修正

* fix(frontend): MkPagination で UI アニメーションオフ時に自動ロードが動作しない問題を修正

Transition コンポーネントの mode="out-in" が、アニメーション無効時でも
適用されており、IntersectionObserver の検出に干渉していた問題を修正。
アニメーション有効時のみ mode="out-in" を適用するように変更。

Co-authored-by: 果物リン <fruitriin@users.noreply.github.com>

* enhance: ユーザーの設定値にかかわらず無限スクロールをオフにできるオプションを追加

* Update Changelog

* MkNotesTimeline.vueにforceDisableInfiniteScrollを追加、 note.vueの前方向の読み込みでこれを有効

* fix lint

* refactor

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: 果物リン <fruitriin@users.noreply.github.com>
Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Enhance: ユーザーのノート、フォロー、フォロワーページへのリンクをユーザーポップアップに追加
 - Enhance: プッシュ通知を行うための権限確認をより確実に行うように
 - Enhance: 投稿フォームのチュートリアルを追加
+- Enhance: 「自動でもっと見る」をほとんどの箇所で利用可能に
 - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 - Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように
 - Fix: ページのタイトルが長いとき、はみ出る問題を修正

packages/frontend/src/components/MkNotesTimeline.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPagination :paginator="paginator" :direction="direction" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
+<MkPagination :paginator="paginator" :direction="direction" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl" :forceDisableInfiniteScroll="forceDisableInfiniteScroll">
 	<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template>
 
 	<template #default="{ items: notes }">
@@ -40,26 +40,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup generic="T extends IPaginator<Misskey.entities.Note>">
 import * as Misskey from 'misskey-js';
+import type { MkPaginationOptions } from '@/components/MkPagination.vue';
 import type { IPaginator } from '@/utility/paginator.js';
 import MkNote from '@/components/MkNote.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
-import { globalEvents, useGlobalEvent } from '@/events.js';
+import { useGlobalEvent } from '@/events.js';
 import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js';
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<MkPaginationOptions & {
 	paginator: T;
 	noGap?: boolean;
-
-	direction?: 'up' | 'down' | 'both';
-	autoLoad?: boolean;
-	pullToRefresh?: boolean;
-	withControl?: boolean;
 }>(), {
 	autoLoad: true,
 	direction: 'down',
 	pullToRefresh: true,
 	withControl: true,
+	forceDisableInfiniteScroll: false,
 });
 
 useGlobalEvent('noteDeleted', (noteId) => {

packages/frontend/src/components/MkPagination.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
 			:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
 			:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
-			mode="out-in"
+			:mode="prefer.s.animation ? 'out-in' : undefined"
 		>
 			<MkLoading v-if="paginator.fetching.value"/>
 
@@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<div v-else key="_root_" class="_gaps">
 				<div v-if="direction === 'up' || direction === 'both'" v-show="upButtonVisible">
-					<MkButton v-if="!upButtonLoading" :class="$style.more" primary rounded @click="upButtonClick">
+					<MkButton v-if="!upButtonLoading" v-appear="shouldEnableInfiniteScroll ? upButtonClick : null" :class="$style.more" primary rounded @click="upButtonClick">
 						{{ i18n.ts.loadMore }}
 					</MkButton>
 					<MkLoading v-else/>
 				</div>
 				<slot :items="getValue(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">
+					<MkButton v-if="!downButtonLoading" v-appear="shouldEnableInfiniteScroll ? downButtonClick : null" :class="$style.more" primary rounded @click="downButtonClick">
 						{{ i18n.ts.loadMore }}
 					</MkButton>
 					<MkLoading v-else/>
@@ -44,6 +44,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 </component>
 </template>
 
+<script lang="ts">
+export type MkPaginationOptions = {
+	autoLoad?: boolean;
+	/**
+	 * ページネーションを進める方向
+	 * - up: 上方向
+	 * - down: 下方向 (default)
+	 * - both: 双方向
+	 *
+	 * NOTE: この方向はページネーションの方向であって、アイテムの並び順ではない
+	 */
+	direction?: 'up' | 'down' | 'both';
+	pullToRefresh?: boolean;
+	withControl?: boolean;
+	forceDisableInfiniteScroll?: boolean;
+};
+</script>
+
 <script lang="ts" setup generic="T extends IPaginator">
 import { isLink } from '@@/js/is-link.js';
 import { onMounted, computed, watch, unref } from 'vue';
@@ -56,24 +74,18 @@ import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import MkPaginationControl from '@/components/MkPaginationControl.vue';
 import * as os from '@/os.js';
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(defineProps<MkPaginationOptions & {
 	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,
+	forceDisableInfiniteScroll: false,
+});
+
+const shouldEnableInfiniteScroll = computed(() => {
+	return prefer.r.enableInfiniteScroll.value && !props.forceDisableInfiniteScroll;
 });
 
 function onContextmenu(ev: MouseEvent) {

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 direction="up" :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" :forceDisableInfiniteScroll="true" />
 				</div>
 
 				<div class="_margin">