feat: ability to adjust pull distance for reloading timelines

locales/en-US.yml

@@ -2196,3 +2196,5 @@ _iconSets:
   duotone: "Duotone"
 moreUrls: "Pinned pages"
 moreUrlsDescription: "Enter the pages you want to pin to the help menu in the lower left corner using this notation:\n\"Display name\": https://example.com/"
+enablePullToRefresh: "Enable \"Pull down to refresh\""
+pullToRefreshThreshold: "Pull distance for reloading"

locales/ja-JP.yml

@@ -2038,3 +2038,5 @@ releaseToReload: "離して再読み込み"
 reloading: "読み込み中"
 pullDownToReload: "下に引っ張って再読み込み"
 enableTimelineStreaming: "タイムラインを自動で更新する"
+enablePullToRefresh: "「下に引っ張って再読み込み」を有効にする"
+pullToRefreshThreshold: "再読み込みするために引っ張る距離"

packages/client/src/components/MkNotifications.vue

@@ -1,5 +1,8 @@
 <template>
-	<MkPullToRefresh :refresher="() => reload()">
+	<MkPullToRefresh
+		v-if="defaultStore.state.enablePullToRefresh"
+		:refresher="() => reload()"
+	>
 		<MkPagination ref="pagingComponent" :pagination="pagination">
 			<template #empty>
 				<div class="_fullinfo">
@@ -45,6 +48,50 @@
 			</template>
 		</MkPagination>
 	</MkPullToRefresh>
+	<MkPagination v-else ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.webp"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>
+
+		<template #default="{ items: notifications }">
+			<XList
+				v-slot="{ item: notification }"
+				class="elsfgstc"
+				:items="notifications"
+				:no-gap="true"
+			>
+				<XNote
+					v-if="
+						['reply', 'quote', 'mention'].includes(
+							notification.type,
+						)
+					"
+					:key="notification.id"
+					:note="notification.note"
+					:collapsed-reply="
+						notification.type === 'reply' ||
+						(notification.type === 'mention' &&
+							notification.note.replyId != null)
+					"
+				/>
+				<XNotification
+					v-else
+					:key="notification.id"
+					:notification="notification"
+					:with-time="true"
+					:full="true"
+					class="_panel notification"
+				/>
+			</XList>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
@@ -59,6 +106,7 @@ import XNote from "@/components/MkNote.vue";
 import { useStream } from "@/stream";
 import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	includeTypes?: (typeof notificationTypes)[number][];

packages/client/src/components/MkPullToRefresh.vue

@@ -9,19 +9,6 @@
 			}px;`"
 		>
 			<div :class="$style.frameContent">
-				<MkLoading
-					v-if="isRefreshing"
-					:class="$style.loader"
-					:em="true"
-				/>
-				<i
-					v-else
-					:class="[
-						icon('ph-arrow-down'),
-						$style.icon,
-						{ [$style.refresh]: pullEnded },
-					]"
-				></i>
 				<div :class="$style.text">
 					<template v-if="pullEnded">{{
 						i18n.ts.releaseToReload
@@ -43,11 +30,10 @@
 import { onMounted, onUnmounted, ref, shallowRef } from "vue";
 // import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
-import icon from "@/scripts/icon";
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
-const FIRE_THRESHOLD = 140;
+const FIRE_THRESHOLD = defaultStore.state.pullToRefreshThreshold;
 const RELEASE_TRANSITION_DURATION = 120;
 const PULL_BRAKE_BASE = 1.5;
 const PULL_BRAKE_FACTOR = 100;

packages/client/src/components/MkTimeline.vue

@@ -20,6 +20,7 @@
 		</button>
 	</div>
 	<MkPullToRefresh
+		v-if="defaultStore.state.enablePullToRefresh"
 		ref="pullToRefreshComponent"
 		:refresher="() => reloadTimeline()"
 	>
@@ -31,6 +32,14 @@
 			@status="pullToRefreshComponent?.setDisabled($event)"
 		/>
 	</MkPullToRefresh>
+	<XNotes
+		v-else
+		ref="tlComponent"
+		:no-gap="!defaultStore.state.showGapBetweenNotesInTimeline"
+		:pagination="pagination"
+		@queue="(x) => (queue = x)"
+		@status="pullToRefreshComponent?.setDisabled($event)"
+	/>
 </template>
 
 <script lang="ts" setup>

packages/client/src/pages/settings/general.vue

@@ -93,9 +93,6 @@
 				class="_formBlock"
 				>{{ i18n.ts.swipeOnDesktop }}</FormSwitch
 			>
-			<FormSwitch v-model="enableTimelineStreaming" class="_formBlock">{{
-				i18n.ts.enableTimelineStreaming
-			}}</FormSwitch>
 			<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
 				i18n.ts.enterSendsMessage
 			}}</FormSwitch>
@@ -166,6 +163,26 @@
 					{{ i18n.ts.postSearch }}
 				</option>
 			</FormSelect>
+			<FormSwitch v-model="enableTimelineStreaming" class="_formBlock">{{
+				i18n.ts.enableTimelineStreaming
+			}}</FormSwitch>
+			<FormSwitch v-model="enablePullToRefresh" class="_formBlock">{{
+				i18n.ts.enablePullToRefresh
+			}}</FormSwitch>
+			<FormRange
+				v-if="enablePullToRefresh"
+				v-model="pullToRefreshThreshold"
+				:min="100"
+				:max="300"
+				:step="10"
+				easing
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.pullToRefreshThreshold }}</template>
+				<template #caption>{{
+					i18n.ts.pullToRefreshThreshold
+				}}</template>
+			</FormRange>
 		</FormSection>
 
 		<FormSection>
@@ -551,6 +568,12 @@ const iconSet = computed(defaultStore.makeGetterSetter("iconSet"));
 const enableTimelineStreaming = computed(
 	defaultStore.makeGetterSetter("enableTimelineStreaming"),
 );
+const enablePullToRefresh = computed(
+	defaultStore.makeGetterSetter("enablePullToRefresh"),
+);
+const pullToRefreshThreshold = computed(
+	defaultStore.makeGetterSetter("pullToRefreshThreshold"),
+);
 const useEmojiCdn = computed(defaultStore.makeGetterSetter("useEmojiCdn"));
 
 // This feature (along with injectPromo) is currently disabled
@@ -617,6 +640,8 @@ watch(
 		expandOnNoteClick,
 		iconSet,
 		enableTimelineStreaming,
+		enablePullToRefresh,
+		pullToRefreshThreshold,
 		useEmojiCdn,
 	],
 	async () => {

packages/client/src/store.ts

@@ -422,6 +422,14 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		enablePullToRefresh: {
+			where: "deviceAccount",
+			default: true,
+		},
+		pullToRefreshThreshold: {
+			where: "device",
+			default: 140,
+		},
 	}),
 );