From 1c6764031d15fbb101ca4c00e8961a3c85483c41 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Wed, 20 Dec 2023 18:48:30 +0900
Subject: [PATCH] feat: ability to adjust pull distance for reloading timelines

---
 locales/en-US.yml                             |  2 +
 locales/ja-JP.yml                             |  2 +
 .../client/src/components/MkNotifications.vue | 50 ++++++++++++++++++-
 .../client/src/components/MkPullToRefresh.vue | 16 +-----
 packages/client/src/components/MkTimeline.vue |  9 ++++
 .../client/src/pages/settings/general.vue     | 31 ++++++++++--
 packages/client/src/store.ts                  |  8 +++
 7 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index beaabfd6d..f1ca55800 100644
--- a/locales/en-US.yml
+++ b/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"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1d1717827..140d664e6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2038,3 +2038,5 @@ releaseToReload: "離して再読み込み"
 reloading: "読み込み中"
 pullDownToReload: "下に引っ張って再読み込み"
 enableTimelineStreaming: "タイムラインを自動で更新する"
+enablePullToRefresh: "「下に引っ張って再読み込み」を有効にする"
+pullToRefreshThreshold: "再読み込みするために引っ張る距離"
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index 7b05cc00a..33e78881a 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/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][];
diff --git a/packages/client/src/components/MkPullToRefresh.vue b/packages/client/src/components/MkPullToRefresh.vue
index 56bb97f93..9ff3e91a9 100644
--- a/packages/client/src/components/MkPullToRefresh.vue
+++ b/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;
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 96b85cf27..57a7600e4 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/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>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index a8fc7f1eb..1a235f93a 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/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 () => {
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 64939446a..fe280c8e4 100644
--- a/packages/client/src/store.ts
+++ b/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,
+		},
 	}),
 );