From ac3c6f3df8cec47d9f823f0eebacc26f569b7fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Fri, 3 Nov 2023 14:10:47 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E3=82=B9=E3=83=AF=E3=82=A4?=
 =?UTF-8?q?=E3=83=97=E3=82=84=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A7=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4=E3=83=B3=E3=82=92=E5=86=8D?=
 =?UTF-8?q?=E8=AA=AD=E8=BE=BC=E3=81=99=E3=82=8B=E6=A9=9F=E8=83=BD=20(missk?=
 =?UTF-8?q?ey-dev#12113)=20(MisskeyIO#206)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(frontend): スワイプやボタンでタイムラインを再読込する機能 (misskey-dev#12113)
* tweak MkPullToRefresh
cheery-picked from 52dbab56a47f2242df08d95de8e0a58c5eb8ab9c
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
* enhance(frontend): improve pull to refresh
cheery-picked from d0d32e88466cef53a0d4429cce1ce4b9cb97d5b1
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 locales/en-US.yml                             |   4 +
 locales/index.d.ts                            |   4 +
 locales/ja-JP.yml                             |   4 +
 packages/frontend/src/boot/main-boot.ts       |   3 +-
 .../src/components/MkNotifications.vue        |  53 ++--
 .../frontend/src/components/MkPageWindow.vue  |   2 +
 .../frontend/src/components/MkPagination.vue  |   6 +
 .../src/components/MkPullToRefresh.vue        | 248 ++++++++++++++++++
 .../frontend/src/components/MkTimeline.vue    | 146 ++++++-----
 .../frontend/src/pages/settings/general.vue   |   3 +
 packages/frontend/src/pages/timeline.vue      |   9 +-
 packages/frontend/src/store.ts                |   4 +
 packages/frontend/src/stream.ts               |  20 +-
 .../src/ui/_common_/stream-indicator.vue      |   4 +-
 packages/frontend/src/ui/universal.vue        |   2 +-
 15 files changed, 429 insertions(+), 83 deletions(-)
 create mode 100644 packages/frontend/src/components/MkPullToRefresh.vue

diff --git a/locales/en-US.yml b/locales/en-US.yml
index d448686187..b1725a2fb8 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1098,6 +1098,10 @@ expired: "Expired"
 doYouAgree: "Agree?"
 beSureToReadThisAsItIsImportant: "Please read this important information."
 iHaveReadXCarefullyAndAgree: "I have read the text \"{x}\" and agree."
+releaseToRefresh: "Release to reload"
+refreshing: "Reloading"
+pullDownToRefresh: "Pull down to reload"
+disableStreamingTimeline: "Disable realtime update on timeline"
 _initialAccountSetting:
   accountCreated: "Your account was successfully created!"
   letsStartAccountSetup: "For starters, let's set up your profile."
diff --git a/locales/index.d.ts b/locales/index.d.ts
index b0b8a256f2..114247b437 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1109,6 +1109,10 @@ export interface Locale {
     "pastAnnouncements": string;
     "youHaveUnreadAnnouncements": string;
     "externalServices": string;
+    "releaseToRefresh": string;
+    "refreshing": string;
+    "pullDownToRefresh": string;
+    "disableStreamingTimeline": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 979022e33a..907cbf0f5f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1106,6 +1106,10 @@ currentAnnouncements: "現在のお知らせ"
 pastAnnouncements: "過去のお知らせ"
 youHaveUnreadAnnouncements: "未読のお知らせがあります。"
 externalServices: "外部サービス"
+releaseToRefresh: "離してリロード"
+refreshing: "リロード中"
+pullDownToRefresh: "引っ張ってリロード"
+disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"
diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts
index 2038ef3455..6f5ddcac14 100644
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@@ -8,7 +8,7 @@ import { common } from './common';
 import { version, ui, lang, updateLocale } from '@/config';
 import { i18n, updateI18n } from '@/i18n';
 import { confirm, alert, post, popup, toast } from '@/os';
-import { useStream } from '@/stream';
+import { useStream, isReloading } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
 import { defaultStore, ColdDeviceStorage } from '@/store';
@@ -39,6 +39,7 @@ export async function mainBoot() {
 
 	let reloadDialogShowing = false;
 	stream.on('_disconnected_', async () => {
+		if (isReloading) return;
 		if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
 			location.reload();
 		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index cc7657ba97..b7910d475a 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -4,26 +4,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img :src="infoImageUrl" class="_ghost"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
+<MkPullToRefresh :refresher="() => reload()">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" class="_ghost"/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
-			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
-		</MkDateSeparatedList>
-	</template>
-</MkPagination>
+		<template #default="{ items: notifications }">
+			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
+			</MkDateSeparatedList>
+		</template>
+	</MkPagination>
+</MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onActivated, onMounted, computed, shallowRef } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkNote from '@/components/MkNote.vue';
@@ -48,16 +51,24 @@ const pagination: Paging = {
 	})),
 };
 
-const onNotification = (notification) => {
+function onNotification(notification) {
 	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
 	if (isMuted || document.visibilityState === 'visible') {
 		useStream().send('readNotification');
 	}
 
 	if (!isMuted) {
-		pagingComponent.value.prepend(notification);
+		pagingComponent.value?.prepend(notification);
 	}
-};
+}
+
+function reload() {
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
+}
 
 let connection;
 
@@ -66,6 +77,12 @@ onMounted(() => {
 	connection.on('notification', onNotification);
 });
 
+onActivated(() => {
+	pagingComponent.value?.reload();
+	connection = useStream().useChannel('main');
+	connection.on('notification', onNotification);
+});
+
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index c090b4b691..64d6c4d2cc 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -166,6 +166,8 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
+	overscroll-behavior: none;
+
 	min-height: 100%;
 	background: var(--bg);
 
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index bd471a1b1f..819bb0e746 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -90,6 +90,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'queue', count: number): void;
+	(ev: 'status', error: boolean): void;
 }>();
 
 let rootEl = $shallowRef<HTMLElement>();
@@ -164,6 +165,11 @@ watch(queue, (a, b) => {
 	emit('queue', queue.value.length);
 }, { deep: true });
 
+watch(error, (n, o) => {
+	if (n === o) return;
+	emit('status', n);
+});
+
 async function init(): Promise<void> {
 	queue.value = [];
 	fetching.value = true;
diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue
new file mode 100644
index 0000000000..2092faa209
--- /dev/null
+++ b/packages/frontend/src/components/MkPullToRefresh.vue
@@ -0,0 +1,248 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<div ref="rootEl">
+		<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${pullDistance / (PULL_BRAKE_BASE + (pullDistance / PULL_BRAKE_FACTOR))}px;`">
+			<div :class="$style.frameContent">
+				<MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/>
+				<i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPullEnd }]"></i>
+				<div :class="$style.text">
+					<template v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</template>
+					<template v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</template>
+					<template v-else>{{ i18n.ts.pullDownToRefresh }}</template>
+				</div>
+			</div>
+		</div>
+		<div :class="{ [$style.slotClip]: isPullStart }">
+			<slot/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import MkLoading from '@/components/global/MkLoading.vue';
+import { onMounted, onUnmounted } from 'vue';
+import { i18n } from '@/i18n.js';
+
+const SCROLL_STOP = 10;
+const MAX_PULL_DISTANCE = Infinity;
+const FIRE_THRESHOLD = 230;
+const RELEASE_TRANSITION_DURATION = 200;
+const PULL_BRAKE_BASE = 2;
+const PULL_BRAKE_FACTOR = 200;
+
+let isPullStart = $ref(false);
+let isPullEnd = $ref(false);
+let isRefreshing = $ref(false);
+let pullDistance = $ref(0);
+
+let supportPointerDesktop = false;
+let startScreenY: number | null = null;
+
+const rootEl = $shallowRef<HTMLDivElement>();
+let scrollEl: HTMLElement | null = null;
+
+let disabled = false;
+
+const props = withDefaults(defineProps<{
+	refresher: () => Promise<void>;
+}>(), {
+	refresher: () => Promise.resolve(),
+});
+
+const emits = defineEmits<(ev: "refresh") => void>();
+
+function getScrollableParentElement(node) {
+	if (node == null) {
+		return null;
+	}
+
+	if (node.scrollHeight > node.clientHeight) {
+		return node;
+	} else {
+		return getScrollableParentElement(node.parentNode);
+	}
+}
+
+function getScreenY(event) {
+	if (supportPointerDesktop) {
+		return event.screenY;
+	}
+	return event.touches[0].screenY;
+}
+
+function moveStart(event) {
+	if (!isPullStart && !isRefreshing && !disabled) {
+		isPullStart = true;
+		startScreenY = getScreenY(event);
+		pullDistance = 0;
+	}
+}
+
+function moveBySystem(to: number): Promise<void> {
+	return new Promise(r => {
+		const startHeight = pullDistance;
+		const overHeight = pullDistance - to;
+		if (overHeight < 1) {
+			r();
+			return;
+		}
+		const startTime = Date.now();
+		let intervalId = setInterval(() => {
+			const time = Date.now() - startTime;
+			if (time > RELEASE_TRANSITION_DURATION) {
+				pullDistance = to;
+				clearInterval(intervalId);
+				r();
+				return;
+			}
+			const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time;
+			if (pullDistance < nextHeight) return;
+			pullDistance = nextHeight;
+		}, 1);
+	});
+}
+
+async function fixOverContent() {
+	if (pullDistance > FIRE_THRESHOLD) {
+		await moveBySystem(FIRE_THRESHOLD);
+	}
+}
+
+async function closeContent() {
+	if (pullDistance > 0) {
+		await moveBySystem(0);
+	}
+}
+
+function moveEnd() {
+	if (isPullStart && !isRefreshing) {
+		startScreenY = null;
+		if (isPullEnd) {
+			isPullEnd = false;
+			isRefreshing = true;
+			fixOverContent().then(() => {
+				emits('refresh');
+				props.refresher().then(() => {
+					refreshFinished();
+				});
+			});
+		} else {
+			closeContent().then(() => isPullStart = false);
+		}
+	}
+}
+
+function moving(event) {
+	if (!isPullStart || isRefreshing || disabled) return;
+
+	if (!scrollEl) {
+		scrollEl = getScrollableParentElement(rootEl);
+	}
+	if ((scrollEl?.scrollTop ?? 0) > (supportPointerDesktop ? SCROLL_STOP : SCROLL_STOP + pullDistance)) {
+		pullDistance = 0;
+		isPullEnd = false;
+		moveEnd();
+		return;
+	}
+
+	if (startScreenY === null) {
+		startScreenY = getScreenY(event);
+	}
+	const moveScreenY = getScreenY(event);
+
+	const moveHeight = moveScreenY - startScreenY!;
+	pullDistance = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
+
+	isPullEnd = pullDistance >= FIRE_THRESHOLD;
+}
+
+/**
+ * emit(refresh)が完了したことを知らせる関数
+ *
+ * タイムアウトがないのでこれを最終的に実行しないと出たままになる
+ */
+function refreshFinished() {
+	closeContent().then(() => {
+		isPullStart = false;
+		isRefreshing = false;
+	});
+}
+
+function setDisabled(value) {
+	disabled = value;
+}
+
+onMounted(() => {
+	// マウス操作でpull to refreshするのは不便そう
+	//supportPointerDesktop = !!window.PointerEvent && deviceKind === 'desktop';
+
+	if (supportPointerDesktop) {
+		rootEl.addEventListener('pointerdown', moveStart);
+		// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
+		window.addEventListener('pointerup', moveEnd);
+		rootEl.addEventListener('pointermove', moving, { passive: true });
+	} else {
+		rootEl.addEventListener('touchstart', moveStart);
+		rootEl.addEventListener('touchend', moveEnd);
+		rootEl.addEventListener('touchmove', moving, { passive: true });
+	}
+});
+
+onUnmounted(() => {
+	if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
+});
+
+defineExpose({
+	setDisabled,
+});
+</script>
+
+<style lang="scss" module>
+.frame {
+	position: relative;
+	overflow: clip;
+
+	width: 100%;
+	min-height: var(--frame-min-height, 0px);
+
+	mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent);
+	-webkit-mask-image: -webkit-linear-gradient(90deg, #000 0%, #000 80%, transparent);
+
+	pointer-events: none;
+}
+
+.frameContent {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	margin: 5px 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-size: 14px;
+
+	> .icon, > .loader {
+		margin: 6px 0;
+	}
+
+	> .icon {
+		transition: transform .25s;
+
+		&.refresh {
+			transform: rotate(180deg);
+		}
+	}
+
+	> .text {
+		margin: 5px 0;
+	}
+}
+
+.slotClip {
+	overflow-y: clip;
+}
+</style>
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 714bc17e7b..0320d8df96 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -4,13 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
+	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
+</MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
 import { computed, provide, onUnmounted } from 'vue';
 import MkNotes from '@/components/MkNotes.vue';
-import { useStream } from '@/stream';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+import { useStream, reloadStream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
@@ -31,6 +34,7 @@ const emit = defineEmits<{
 
 provide('inChannel', computed(() => props.src === 'channel'));
 
+const prComponent: InstanceType<typeof MkPullToRefresh> = $ref();
 const tlComponent: InstanceType<typeof MkNotes> = $ref();
 
 const prepend = note => {
@@ -49,108 +53,131 @@ let connection;
 let connection2;
 
 const stream = useStream();
+const connectChannel = () => {
+	if (props.src === 'antenna') {
+		connection = stream.useChannel('antenna', {
+			antennaId: props.antenna,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'home') {
+		connection = stream.useChannel('homeTimeline', {
+			withReplies: defaultStore.state.showTimelineReplies,
+		});
+		connection.on('note', prepend);
+
+		connection2 = stream.useChannel('main');
+	} else if (props.src === 'local') {
+		connection = stream.useChannel('localTimeline', {
+			withReplies: defaultStore.state.showTimelineReplies,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'media') {
+		connection = stream.useChannel('hybridTimeline', {
+			withFiles: true,
+			withReplies: defaultStore.state.showTimelineReplies,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'social') {
+		connection = stream.useChannel('hybridTimeline', {
+			withReplies: defaultStore.state.showTimelineReplies,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'global') {
+		connection = stream.useChannel('globalTimeline', {
+			withReplies: defaultStore.state.showTimelineReplies,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'mentions') {
+		connection = stream.useChannel('main');
+		connection.on('mention', prepend);
+	} else if (props.src === 'directs') {
+		const onNote = note => {
+			if (note.visibility === 'specified') {
+				prepend(note);
+			}
+		};
+		connection = stream.useChannel('main');
+		connection.on('mention', onNote);
+	} else if (props.src === 'list') {
+		connection = stream.useChannel('userList', {
+			listId: props.list,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'channel') {
+		connection = stream.useChannel('channel', {
+			channelId: props.channel,
+		});
+		connection.on('note', prepend);
+	} else if (props.src === 'role') {
+		connection = stream.useChannel('roleTimeline', {
+			roleId: props.role,
+		});
+		connection.on('note', prepend);
+	}
+};
 
 if (props.src === 'antenna') {
 	endpoint = 'antennas/notes';
 	query = {
 		antennaId: props.antenna,
 	};
-	connection = stream.useChannel('antenna', {
-		antennaId: props.antenna,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'home') {
 	endpoint = 'notes/timeline';
 	query = {
 		withReplies: defaultStore.state.showTimelineReplies,
 	};
-	connection = stream.useChannel('homeTimeline', {
-		withReplies: defaultStore.state.showTimelineReplies,
-	});
-	connection.on('note', prepend);
-
-	connection2 = stream.useChannel('main');
 } else if (props.src === 'local') {
 	endpoint = 'notes/local-timeline';
 	query = {
 		withReplies: defaultStore.state.showTimelineReplies,
 	};
-	connection = stream.useChannel('localTimeline', {
-		withReplies: defaultStore.state.showTimelineReplies,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'media') {
 	endpoint = 'notes/hybrid-timeline';
 	query = {
 		withFiles: true,
 		withReplies: defaultStore.state.showTimelineReplies,
 	};
-	connection = stream.useChannel('hybridTimeline', {
-		withFiles: true,
-		withReplies: defaultStore.state.showTimelineReplies,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'social') {
 	endpoint = 'notes/hybrid-timeline';
 	query = {
 		withReplies: defaultStore.state.showTimelineReplies,
 	};
-	connection = stream.useChannel('hybridTimeline', {
-		withReplies: defaultStore.state.showTimelineReplies,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'global') {
 	endpoint = 'notes/global-timeline';
 	query = {
 		withReplies: defaultStore.state.showTimelineReplies,
 	};
-	connection = stream.useChannel('globalTimeline', {
-		withReplies: defaultStore.state.showTimelineReplies,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'mentions') {
 	endpoint = 'notes/mentions';
-	connection = stream.useChannel('main');
-	connection.on('mention', prepend);
 } else if (props.src === 'directs') {
 	endpoint = 'notes/mentions';
 	query = {
 		visibility: 'specified',
 	};
-	const onNote = note => {
-		if (note.visibility === 'specified') {
-			prepend(note);
-		}
-	};
-	connection = stream.useChannel('main');
-	connection.on('mention', onNote);
 } else if (props.src === 'list') {
 	endpoint = 'notes/user-list-timeline';
 	query = {
 		listId: props.list,
 	};
-	connection = stream.useChannel('userList', {
-		listId: props.list,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'channel') {
 	endpoint = 'channels/timeline';
 	query = {
 		channelId: props.channel,
 	};
-	connection = stream.useChannel('channel', {
-		channelId: props.channel,
-	});
-	connection.on('note', prepend);
 } else if (props.src === 'role') {
 	endpoint = 'roles/notes';
 	query = {
 		roleId: props.role,
 	};
-	connection = stream.useChannel('roleTimeline', {
-		roleId: props.role,
+}
+
+if (!defaultStore.state.disableStreamingTimeline) {
+	connectChannel();
+
+	onUnmounted(() => {
+		connection.dispose();
+		if (connection2) connection2.dispose();
 	});
-	connection.on('note', prepend);
 }
 
 const pagination = {
@@ -159,15 +186,16 @@ const pagination = {
 	params: query,
 };
 
-onUnmounted(() => {
-	connection.dispose();
-	if (connection2) connection2.dispose();
-});
+function reloadTimeline() {
+	return new Promise<void>((res) => {
+		tlComponent.pagingComponent?.reload().then(() => {
+			reloadStream();
+			res();
+		});
+	});
+}
 
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
+defineExpose({
+	reloadTimeline,
+});
 </script>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 3b39a5c00a..1a62bfb343 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -135,6 +135,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_gaps_s">
 				<MkSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</MkSwitch>
 				<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
+				<MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@@ -231,6 +232,7 @@ const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('
 const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimelineReplies'));
+const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -264,6 +266,7 @@ watch([
 	instanceTicker,
 	overridedDeviceKind,
 	mediaListWithOneImageAppearance,
+	disableStreamingTimeline,
 ], async () => {
 	await reloadAsk();
 });
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index d7bccc8000..f16dcd66ed 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -38,6 +38,7 @@ import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind.js';
 
 provide('shouldOmitHeaderTitle', true);
 
@@ -121,7 +122,13 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [
+	...[deviceKind === 'desktop' ? {
+		icon: 'ti ti-refresh',
+		text: i18n.ts.reload,
+		handler: () => { tlComponent.reloadTimeline(); },
+	} : {}],
+]);
 
 const headerTabs = $computed(() => [{
 	key: 'home',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 9aba8017ff..7a708917e0 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -351,6 +351,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: {} as Record<string, Record<string, string[]>>,
 	},
+	disableStreamingTimeline: {
+		where: 'device',
+		default: false,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期
diff --git a/packages/frontend/src/stream.ts b/packages/frontend/src/stream.ts
index b241316648..ce07d39556 100644
--- a/packages/frontend/src/stream.ts
+++ b/packages/frontend/src/stream.ts
@@ -9,6 +9,9 @@ import { $i } from '@/account';
 import { url } from '@/config';
 
 let stream: Misskey.Stream | null = null;
+let timeoutHeartBeat: number | null = null;
+
+export let isReloading: boolean = false;
 
 export function useStream(): Misskey.Stream {
 	if (stream) return stream;
@@ -17,7 +20,20 @@ export function useStream(): Misskey.Stream {
 		token: $i.token,
 	} : null));
 
-	window.setTimeout(heartbeat, 1000 * 60);
+	timeoutHeartBeat = window.setTimeout(heartbeat, 1000 * 60);
+
+	return stream;
+}
+
+export function reloadStream() {
+	if (!stream) return useStream();
+	if (timeoutHeartBeat) window.clearTimeout(timeoutHeartBeat);
+	isReloading = true;
+
+	stream.close();
+	stream.once('_connected_', () => isReloading = false);
+	stream.stream.reconnect();
+	timeoutHeartBeat = window.setTimeout(heartbeat, 1000 * 60);
 
 	return stream;
 }
@@ -26,5 +42,5 @@ function heartbeat(): void {
 	if (stream != null && document.visibilityState === 'visible') {
 		stream.heartbeat();
 	}
-	window.setTimeout(heartbeat, 1000 * 60);
+	timeoutHeartBeat = window.setTimeout(heartbeat, 1000 * 60);
 }
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
index d252496829..a5af019582 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted } from 'vue';
-import { useStream } from '@/stream';
+import { useStream, isReloading } from '@/stream';
 import { i18n } from '@/i18n';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
@@ -27,6 +27,8 @@ let hasDisconnected = $ref(false);
 let timeoutId = $ref<number>();
 
 function onDisconnected() {
+	if (isReloading) return;
+
 	window.clearTimeout(timeoutId);
 	timeoutId = window.setTimeout(() => {
 		hasDisconnected = true;
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index d9cb81b5ef..288587a4e0 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -319,7 +319,7 @@ $widgets-hide-threshold: 1090px;
 	min-width: 0;
 	overflow: auto;
 	overflow-y: scroll;
-	overscroll-behavior: contain;
+	overscroll-behavior: none;
 	background: var(--bg);
 }