From 8a6101059fa51e468463849a735048dbfefe3631 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Fri, 24 Nov 2023 18:27:21 +0100
Subject: [PATCH] [client] Revert pull-to-refresh changes for now

---
 packages/client/src/components/MkNotes.vue    |   6 +-
 .../client/src/components/MkPagination.vue    |  85 +++----
 .../client/src/components/MkPullToRefresh.vue | 229 ------------------
 packages/client/src/style.scss                |   2 +-
 4 files changed, 38 insertions(+), 284 deletions(-)
 delete mode 100644 packages/client/src/components/MkPullToRefresh.vue

diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
index fb452d6de..76d82bd94 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -1,5 +1,5 @@
 <template>
-	<MkPagination ref="pagingComponent" :pagination="pagination" @reload="onReload">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
 				<img
@@ -61,10 +61,6 @@ function scrollTop() {
 	scroll(tlEl.value, { top: 0, behavior: "smooth" });
 }
 
-function onReload() {
-	lastFetchScrollTop.value = document.documentElement.clientHeight * -0.5;
-}
-
 function setTimer() {
 	if (interval.value || !defaultStore.state.enableInfiniteScroll) return;
 	interval.value = setInterval(() => {
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 080660d62..977e1fb02 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -18,48 +18,44 @@
 		</div>
 
 		<div v-else ref="rootEl" class="list">
-			<MkPullToRefresh
-					:on-refresh="reloadAsync"
+			<div
+				v-show="pagination.reversed && more"
+				key="_more_"
+				class="cxiknjgy _gap"
+			>
+				<MkButton
+					v-if="!moreFetching"
+					class="button"
+					:disabled="moreFetching"
+					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
+					primary
+					@click="fetchMoreAhead"
+				>
+					{{ i18n.ts.loadMore }}
+				</MkButton>
+				<MkLoading v-else class="loading" />
+			</div>
+			<slot :items="items"></slot>
+			<div
+				v-show="!pagination.reversed && more"
+				key="_more_"
+				class="cxiknjgy _gap"
 			>
 				<div
-					v-show="pagination.reversed && more"
-					key="_more_"
-					class="cxiknjgy _gap"
+					v-appear="$store.state.enableInfiniteScroll && !disableAutoLoad ? fetchMore : null"
+				/>
+				<MkButton
+					v-if="!moreFetching && !$store.state.enableInfiniteScroll && !disableAutoLoad"
+					class="button"
+					:disabled="moreFetching"
+					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
+					primary
+					@click="fetchMore"
 				>
-					<MkButton
-						v-if="!moreFetching"
-						class="button"
-						:disabled="moreFetching"
-						:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
-						primary
-						@click="fetchMoreAhead"
-					>
-						{{ i18n.ts.loadMore }}
-					</MkButton>
-					<MkLoading v-else class="loading" />
-				</div>
-				<slot :items="items"></slot>
-				<div
-					v-show="!pagination.reversed && more"
-					key="_more_"
-					class="cxiknjgy _gap"
-				>
-					<div
-						v-appear="$store.state.enableInfiniteScroll && !disableAutoLoad ? fetchMore : null"
-					/>
-					<MkButton
-						v-if="!moreFetching && !$store.state.enableInfiniteScroll && !disableAutoLoad"
-						class="button"
-						:disabled="moreFetching"
-						:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
-						primary
-						@click="fetchMore"
-					>
-						{{ i18n.ts.loadMore }}
-					</MkButton>
-					<MkLoading v-else class="loading" />
-				</div>
-			</MkPullToRefresh>
+					{{ i18n.ts.loadMore }}
+				</MkButton>
+				<MkLoading v-else class="loading" />
+			</div>
 		</div>
 	</transition>
 </template>
@@ -88,7 +84,6 @@ import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 import {instance} from "@/instance";
 import { defaultStore } from "@/store.js";
-import MkPullToRefresh from "@/components/MkPullToRefresh.vue";
 
 export type Paging<
 	E extends keyof misskey.Endpoints = keyof misskey.Endpoints,
@@ -127,7 +122,6 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(ev: "reload"): void;
 	(ev: "queue", count: number): void;
 }>();
 
@@ -207,13 +201,7 @@ const reload = (): void => {
 	init();
 };
 
-const reloadAsync = async (): Promise<void> => {
-	items.value = [];
-	await init();
-	emit("reload");
-};
-
-const refresh = async (): Promise<void> => {
+const refresh = async (): void => {
 	const params = props.pagination.params
 		? isRef(props.pagination.params)
 			? props.pagination.params.value
@@ -515,7 +503,6 @@ defineExpose({
 	removeItem,
 	updateItem,
 	prefetchMore,
-	reloadAsync,
 });
 </script>
 
diff --git a/packages/client/src/components/MkPullToRefresh.vue b/packages/client/src/components/MkPullToRefresh.vue
deleted file mode 100644
index 27f72fc19..000000000
--- a/packages/client/src/components/MkPullToRefresh.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<!-- Code adapted under MIT from https://github.com/liberu-ui/pull-to-refresh - Copyright (c) 2016 LinBin -->
-
-<template>
-	<div class="pull-down-container">
-		<div class="pull-down-header" :style="{'height': pullDown.height + 'px'}">
-			<div class="pull-down-content" :style="pullDownContentStyle">
-				<i class="pull-down-icon ph-bold ph-seal-warning" v-if="pullDown.status === -1"/>
-				<i class="pull-down-icon ph-bold ph-arrow-down" v-else-if="pullDown.status !== 2"/>
-			</div>
-		</div>
-		<slot/>
-	</div>
-</template>
-
-<script>
-// status of pull down
-const STATUS_ERROR = -1;
-const STATUS_START = 0;
-const STATUS_READY = 1;
-const STATUS_REFRESH = 2;
-// labels of pull down
-const ANIMATION = 'height .2s ease';
-
-export default {
-	props: {
-		onRefresh: {
-			type: Function,
-			required: true,
-		},
-		config: {
-			type: Object,
-			default() {
-				return {
-					pullDownHeight: 60,
-				};
-			},
-		},
-	},
-	data() {
-		return {
-			pullDown: {
-				status: 0,
-				height: 0,
-				msg: '',
-			},
-			canPull: false,
-		};
-	},
-	computed: {
-		pullDownContentStyle() {
-			return {
-				bottom: `${(this.config.pullDownHeight - 40) / 2}px`,
-			};
-		},
-	},
-	mounted() {
-		this.$nextTick(() => {
-			const el = this.$el;
-			const pullDownHeader = el.querySelector('.pull-down-header');
-			const icon = pullDownHeader.querySelector('.pull-down-icon');
-			// set default pullDownHeight
-			this.config.pullDownHeight = this.config.pullDownHeight || 60;
-			/**
-			 * reset the status of pull down
-			 * @param {Object} pullDown the pull down
-			 * @param {Boolean} withAnimation whether add animation when pull up
-			 */
-			const resetPullDown = (pullDown, withAnimation = false) => {
-				if (withAnimation) {
-					pullDownHeader.style.transition = ANIMATION;
-				}
-				pullDown.height = 0;
-				pullDown.status = STATUS_START;
-			};
-			// store of touch position, include start position and distance
-			const touchPosition = {
-				start: 0,
-				distance: 0,
-			};
-
-			// @see https://www.chromestatus.com/feature/5745543795965952
-			// Test via a getter in the options object to see if the passive property is accessed
-			let supportsPassive = false;
-			try {
-				const opts = Object.defineProperty({}, 'passive', {
-					get() {
-						supportsPassive = true;
-					},
-				});
-				/* global window */
-				window.addEventListener('test', null, opts);
-			} catch (e) {
-				// do nothing
-			}
-
-			// bind touchstart event to store start position of touch
-			el.addEventListener('touchstart', e => {
-				this.canPull = el.scrollTop === 0;
-				touchPosition.start = e.touches.item(0).pageY;
-			}, supportsPassive ? {passive: true} : false);
-
-			/**
-			 * bind touchmove event, do the following:
-			 * first, update the height of pull down
-			 * finally, update the status of pull down based on the distance
-			 */
-			el.addEventListener('touchmove', e => {
-				if (!this.canPull) {
-					return;
-				}
-
-				let distance = e.touches.item(0).pageY - touchPosition.start;
-				// limit the height of pull down to pullDownHeight
-				distance = Math.min(distance, this.config.pullDownHeight);
-				// prevent native scroll
-				if (distance > 0) {
-					el.style.overflow = 'hidden';
-				}
-				// update touchPosition and the height of pull down
-				touchPosition.distance = distance;
-				this.pullDown.height = distance;
-				/**
-				 * if distance is bigger than the height of pull down
-				 * set the status of pull down to STATUS_READY
-				 */
-				if (distance >= this.config.pullDownHeight) {
-					this.pullDown.status = STATUS_READY;
-					icon.style.transform = 'rotate(180deg)';
-				} else {
-					/**
-					 * else set the status of pull down to STATUS_START
-					 */
-					this.pullDown.status = STATUS_START;
-					icon.style.transform = `rotate(0deg)`;
-				}
-			}, supportsPassive ? {passive: true} : false);
-
-			// bind touchend event
-			el.addEventListener('touchend', () => {
-				this.canPull = false;
-				el.style.overflowY = 'auto';
-				pullDownHeader.style.transition = ANIMATION;
-				// reset icon rotate
-				icon.style.transform = '';
-				// if distance is at threshold
-				if (touchPosition.distance - el.scrollTop >= this.config.pullDownHeight) {
-					el.scrollTop = 0;
-					this.pullDown.height = this.config.pullDownHeight;
-					this.pullDown.status = STATUS_REFRESH;
-					// trigger refresh callback
-					if (this.onRefresh && typeof this.onRefresh === 'function') {
-						const res = this.onRefresh();
-						// if onRefresh return promise
-						if (res && res.then && typeof res.then === 'function') {
-							res.then(() => {
-								resetPullDown(this.pullDown, true);
-							}, () => {
-								// hide the pull down after 1 second
-								this.pullDown.status = STATUS_ERROR;
-								setTimeout(() => {
-									resetPullDown(this.pullDown, true);
-								}, 1000);
-							});
-						} else {
-							resetPullDown(this.pullDown);
-						}
-					} else {
-						resetPullDown(this.pullDown);
-						console.warn('please use :on-refresh to pass onRefresh callback');
-					}
-				} else {
-					resetPullDown(this.pullDown);
-				}
-				// reset touchPosition
-				touchPosition.distance = 0;
-				touchPosition.start = 0;
-			});
-			// remove transition when transitionend
-			pullDownHeader.addEventListener('transitionend', () => {
-				pullDownHeader.style.transition = '';
-			});
-			pullDownHeader.addEventListener('webkitTransitionEnd', () => {
-				pullDownHeader.style.transition = '';
-			});
-		});
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-.pull-down-container {
-	height: 100%;
-	max-height: 100%;
-	overflow-y: auto;
-}
-
-.pull-down-header {
-	width: 100%;
-	height: 0;
-	overflow: hidden;
-	position: relative;
-}
-
-.pull-down-content {
-	position: absolute;
-	margin-bottom: 12.5px;
-	left: 50%;
-	transform: translateX(-50%);
-	color: #d5d5d5;
-}
-
-.pull-down-icon {
-	float: left;
-	height: 25px;
-	width: 25px;
-	font-size: 25px;
-	transition: transform 0.3s ease;
-}
-
-@keyframes rotate {
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 19d6c040c..3ffef9cca 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -46,7 +46,7 @@ html {
 	tab-size: 2;
 	scroll-padding: 60px;
 	overflow-x: clip;
-	overscroll-behavior: none;
+	overscroll-behavior-y: none;
 
 	&.useCJKFont {
 		font-family: "Hiragino Maru Gothic Pro", "BIZ UDGothic", Roboto,