From 41447b6837584a7c8bc51730a9f731e169c88693 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 3 May 2025 13:33:30 +0900
Subject: [PATCH] wip

---
 .../src/components/MkNotesTimeline.vue        | 44 ++++++------
 .../frontend/src/components/MkPagination.vue  | 69 ++++++++++---------
 2 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue
index 763664765e..7d1fe56779 100644
--- a/packages/frontend/src/components/MkNotesTimeline.vue
+++ b/packages/frontend/src/components/MkNotesTimeline.vue
@@ -4,30 +4,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => reload()">
-	<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad">
-		<template #empty>
-			<div class="_fullinfo">
-				<img :src="infoImageUrl" draggable="false"/>
-				<div>{{ i18n.ts.noNotes }}</div>
-			</div>
-		</template>
+<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad">
+	<template #empty>
+		<div class="_fullinfo">
+			<img :src="infoImageUrl" draggable="false"/>
+			<div>{{ i18n.ts.noNotes }}</div>
+		</div>
+	</template>
 
-		<template #default="{ items: notes }">
-			<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]">
-				<template v-for="(note, i) in notes" :key="note.id">
-					<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
-						<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
-						<div :class="$style.ad">
-							<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
-						</div>
+	<template #default="{ items: notes }">
+		<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]">
+			<template v-for="(note, i) in notes" :key="note.id">
+				<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
+					<MkNote :class="$style.note" :note="note" :withHardMute="true"/>
+					<div :class="$style.ad">
+						<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
 					</div>
-					<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
-				</template>
-			</div>
-		</template>
-	</MkPagination>
-</component>
+				</div>
+				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
+			</template>
+		</div>
+	</template>
+</MkPagination>
 </template>
 
 <script lang="ts" setup>
@@ -36,8 +34,6 @@ import MkNote from '@/components/MkNote.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
-import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
-import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	pagination: Paging;
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 4d40fe89ac..6a14214224 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -4,43 +4,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<Transition
-	:enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
-	:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
-	:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
-	:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
-	:css="prefer.s.animation"
-	mode="out-in"
->
-	<MkLoading v-if="paginator.fetching.value"/>
+<component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()">
+	<Transition
+		:enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
+		:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
+		:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
+		:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
+		:css="prefer.s.animation"
+		mode="out-in"
+	>
+		<MkLoading v-if="paginator.fetching.value"/>
 
-	<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
+		<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
 
-	<div v-else-if="paginator.items.value.length === 0" key="_empty_">
-		<slot name="empty">
-			<div class="_fullinfo">
-				<img :src="infoImageUrl" draggable="false"/>
-				<div>{{ i18n.ts.nothing }}</div>
+		<div v-else-if="paginator.items.value.length === 0" key="_empty_">
+			<slot name="empty">
+				<div class="_fullinfo">
+					<img :src="infoImageUrl" draggable="false"/>
+					<div>{{ i18n.ts.nothing }}</div>
+				</div>
+			</slot>
+		</div>
+
+		<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.fetchNewer">
+					{{ i18n.ts.loadMore }}
+				</MkButton>
+				<MkLoading v-else/>
+			</div>
+			<slot :items="paginator.items.value" :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.fetchOlder">
+					{{ i18n.ts.loadMore }}
+				</MkButton>
+				<MkLoading v-else/>
 			</div>
-		</slot>
-	</div>
-
-	<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.fetchNewer">
-				{{ i18n.ts.loadMore }}
-			</MkButton>
-			<MkLoading v-else/>
 		</div>
-		<slot :items="paginator.items.value" :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.fetchOlder">
-				{{ i18n.ts.loadMore }}
-			</MkButton>
-			<MkLoading v-else/>
-		</div>
-	</div>
-</Transition>
+	</Transition>
+</component>
 </template>
 
 <script lang="ts" setup>
@@ -51,6 +53,7 @@ import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { usePagination } from '@/use/use-pagination.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 
 const props = withDefaults(defineProps<{
 	pagination: PagingCtx;