enhance(frontend): ページネーションの並び順を逆にできるように

3 files changed, 67 insertions, 45 deletions

diff --git a/packages/frontend/src/components/MkNoteDraftsDialog.vue b/packages/frontend/src/components/MkNoteDraftsDialog.vue
index b4aff8d16f..eb103a8423 100644
--- a/packages/frontend/src/components/MkNoteDraftsDialog.vue
+++ b/packages/frontend/src/components/MkNoteDraftsDialog.vue
@@ -17,14 +17,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header>
 		{{ i18n.ts.drafts }} ({{ currentDraftsCount }}/{{ $i?.policies.noteDraftLimit }})
 	</template>
-	<div :class="$style.drafts" class="_gaps">
-		<MkPagination ref="pagingEl" :pagination="paging">
+	<div class="_spacer">
+		<MkPagination ref="pagingEl" :pagination="paging" withControl>
 			<template #empty>
 				<MkResult type="empty" :text="i18n.ts._drafts.noDrafts"/>
 			</template>
 
 			<template #default="{ items }">
-				<div class="_spacer _gaps_s">
+				<div class="_gaps_s">
 					<div
 						v-for="draft in (items as unknown as Misskey.entities.NoteDraft[])"
 						:key="draft.id"
@@ -157,12 +157,6 @@ async function deleteDraft(draft: Misskey.entities.NoteDraft) {
 </script>
 
 <style lang="scss" module>
-.drafts {
-	overflow-x: hidden;
-	overflow-x: clip;
-	overflow-y: auto;
-}
-
 .draft {
 	padding: 16px;
 	gap: 16px;
diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue
index a500bab8e6..401cef62bb 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 ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad" :pullToRefresh="pullToRefresh">
+<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
 	<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template>
 
 	<template #default="{ items: notes }">
@@ -45,8 +45,10 @@ const props = withDefaults(defineProps<{
 	noGap?: boolean;
 	disableAutoLoad?: boolean;
 	pullToRefresh?: boolean;
+	withControl?: boolean;
 }>(), {
 	pullToRefresh: true,
+	withControl: true,
 });
 
 const pagingComponent = useTemplateRef('pagingComponent');
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index aded18f220..d34646ba75 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -5,50 +5,60 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <component :is="prefer.s.enablePullToRefresh && pullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()" @contextmenu.prevent.stop="onContextmenu">
-	<!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 -->
-	<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 : ''"
-		mode="out-in"
-	>
-		<MkLoading v-if="paginator.fetching.value"/>
+	<div>
+		<div v-if="props.withControl" :class="$style.control">
+			<MkSelect v-model="order" :class="$style.order" :items="[{ label: i18n.ts._order.newest, value: 'newest' }, { label: i18n.ts._order.oldest, value: 'oldest' }]">
+			</MkSelect>
+			<MkButton iconOnly @click="paginator.reload()"><i class="ti ti-refresh"></i></MkButton>
+		</div>
 
-		<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
+		<!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 -->
+		<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 : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="paginator.fetching.value"/>
 
-		<div v-else-if="paginator.items.value.length === 0" key="_empty_">
-			<slot name="empty"><MkResult type="empty"/></slot>
-		</div>
+			<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
 
-		<div v-else ref="rootEl" class="_gaps">
-			<div v-show="pagination.reversed && paginator.canFetchOlder.value" key="_more_">
-				<MkButton v-if="!paginator.fetchingOlder.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchNewer">
-					{{ i18n.ts.loadMore }}
-				</MkButton>
-				<MkLoading v-else/>
+			<div v-else-if="paginator.items.value.length === 0" key="_empty_">
+				<slot name="empty"><MkResult type="empty"/></slot>
 			</div>
-			<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
-			<div v-show="!pagination.reversed && paginator.canFetchOlder.value" key="_more_">
-				<MkButton v-if="!paginator.fetchingOlder.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder">
-					{{ i18n.ts.loadMore }}
-				</MkButton>
-				<MkLoading v-else/>
+
+			<div v-else key="_root_" class="_gaps">
+				<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
+				<div v-if="order === 'oldest'">
+					<MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer">
+						{{ 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">
+						{{ i18n.ts.loadMore }}
+					</MkButton>
+					<MkLoading v-else/>
+				</div>
 			</div>
-		</div>
-	</Transition>
+		</Transition>
+	</div>
 </component>
 </template>
 
 <script lang="ts" setup generic="T extends PagingCtx">
 import { isLink } from '@@/js/is-link.js';
-import type { PagingCtx } from '@/composables/use-pagination.js';
+import { ref, watch } from 'vue';
 import type { UnwrapRef } from 'vue';
+import type { PagingCtx } from '@/composables/use-pagination.js';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { usePagination } from '@/composables/use-pagination.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+import MkSelect from '@/components/MkSelect.vue';
 import * as os from '@/os.js';
 
 type Paginator = ReturnType<typeof usePagination<T['endpoint']>>;
@@ -58,27 +68,32 @@ const props = withDefaults(defineProps<{
 	disableAutoLoad?: boolean;
 	displayLimit?: number;
 	pullToRefresh?: boolean;
+	withControl?: boolean;
 }>(), {
 	displayLimit: 20,
 	pullToRefresh: true,
+	withControl: false,
 });
 
+const order = ref<'newest' | 'oldest'>(props.pagination.order ?? 'newest');
+
 const paginator: Paginator = usePagination({
 	ctx: props.pagination,
 });
 
-function appearFetchMoreAhead() {
-	paginator.fetchNewer();
-}
-
-function appearFetchMore() {
-	paginator.fetchOlder();
-}
+watch(order, (newOrder) => {
+	paginator.updateCtx({
+		...props.pagination,
+		order: newOrder,
+		initialDirection: newOrder === 'oldest' ? 'newer' : 'older',
+	});
+}, { immediate: false });
 
 function onContextmenu(ev: MouseEvent) {
 	if (ev.target && isLink(ev.target as HTMLElement)) return;
 	if (window.getSelection()?.toString() !== '') return;
 
+	// TODO: 並び順設定
 	os.contextMenu([{
 		icon: 'ti ti-refresh',
 		text: i18n.ts.reload,
@@ -108,6 +123,17 @@ defineExpose({
 	opacity: 0;
 }
 
+.control {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+}
+
+.order {
+	flex: 1;
+	margin-right: 8px;
+}
+
 .more {
 	margin-left: auto;
 	margin-right: auto;