Merge pull request #12113 from misskey-dev/misskey

CHANGELOG_CHERRYPICK.md

@@ -30,6 +30,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 
 ### Client
 - Feat: 본문 미리보기의 프로필을 표시하지 않도록 설정할 수 있음
+- Feat: 스와이프하여 타임라인을 다시 불러오도록 (misskey-dev/misskey#12113)
+  - PC의 경우 오른쪽 상단의 버튼을 통해서도 다시 불러올 수 있습니다
+- Feat: 타임라인 자동 업데이트를 비활성화할 수 있도록 (misskey-dev/misskey#12113)
 - Enhance: 노트 작성 폼에서 노트를 게시한 뒤에 textarea의 높이를 원래대로 되돌리도록
 - Enhance: 노트 상세 페이지의 답글 목록 개선
 - Enhance: 유저 페이지 개선

locales/en-US.yml

@@ -1226,6 +1226,10 @@ impressumDescription: "In some countries, like germany, the inclusion of operato
 privacyPolicy: "Privacy Policy"
 privacyPolicyUrl: "Privacy Policy URL"
 tosAndPrivacyPolicy: "Terms of Service and Privacy Policy"
+releaseToRefresh: "Release to refresh"
+refreshing: "Loading..."
+pullDownToRefresh: "Pull down to refresh"
+disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"
 showUnreadNotificationCount: "Show the number of unread notifications"
 showCatOnly: "Show only cats"
 additionalPermissionsForFlash: "Allow to add permission to Play"

locales/index.d.ts

@@ -1239,6 +1239,10 @@ export interface Locale {
     "angle": string;
     "flip": string;
     "showAvatarDecorations": string;
+    "releaseToRefresh": string;
+    "refreshing": string;
+    "pullDownToRefresh": string;
+    "disableStreamingTimeline": string;
     "showUnreadNotificationCount": string;
     "showCatOnly": string;
     "additionalPermissionsForFlash": string;

locales/ja-JP.yml

@@ -1236,6 +1236,10 @@ detach: "外す"
 angle: "角度"
 flip: "反転"
 showAvatarDecorations: "アイコンのデコレーションを表示"
+releaseToRefresh: "離してリロード"
+refreshing: "リロード中"
+pullDownToRefresh: "引っ張ってリロード"
+disableStreamingTimeline: "タイムラインのリアルタイム更新を無効にする"
 showUnreadNotificationCount: "未読の通知の数を表示する"
 showCatOnly: "キャット付きのみ"
 additionalPermissionsForFlash: "Playへの追加許可"

locales/ko-KR.yml

@@ -1211,6 +1211,10 @@ edited: "수정됨"
 notificationRecieveConfig: "알림 설정"
 mutualFollow: "맞팔로우"
 fileAttachedOnly: "파일이 포함된 노트만"
+releaseToRefresh: "놓아서 새로 고침"
+refreshing: "새로 고침 중"
+pullDownToRefresh: "당겨서 새로 고침"
+disableStreamingTimeline: "타임라인 실시간 업데이트 비활성화"
 showUnreadNotificationCount: "읽지 않은 알림 수 표시"
 showCatOnly: "고양이만 보기"
 additionalPermissionsForFlash: "Play에 대한 추가 권한"

packages/frontend/src/boot/main-boot.ts

@@ -8,7 +8,7 @@ import { common } from './common.js';
 import { version, ui, lang, updateLocale } from '@/config.js';
 import { i18n, updateI18n } from '@/i18n.js';
 import { confirm, alert, post, popup, welcomeToast } from '@/os.js';
-import { useStream } from '@/stream.js';
+import { useStream, isReloading } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
 import { $i, refreshAccount, login, updateAccount, signout } from '@/account.js';
 import { defaultStore, ColdDeviceStorage } from '@/store.js';
@@ -42,6 +42,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') {

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);
 

packages/frontend/src/components/MkPagination.vue

@@ -101,6 +101,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'queue', count: number): void;
+	(ev: 'status', error: boolean): void;
 }>();
 
 let rootEl = $shallowRef<HTMLElement>();
@@ -192,6 +193,11 @@ watch(queue, (a, b) => {
 	emit('queue', queue.value.size);
 }, { deep: true });
 
+watch(error, (n, o) => {
+	if (n === o) return;
+	emit('status', n);
+});
+
 async function init(): Promise<void> {
 	items.value = new Map();
 	queue.value = new Map();

packages/frontend/src/components/MkPullToRefresh.vue

@@ -0,0 +1,238 @@
+<!--
+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: ${currentHeight / 3}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 { onMounted, onUnmounted } from 'vue';
+import { deviceKind } from '@/scripts/device-kind.js';
+import { i18n } from '@/i18n.js';
+
+const SCROLL_STOP = 10;
+const MAX_PULL_DISTANCE = Infinity;
+const FIRE_THRESHOLD = 200;
+const RELEASE_TRANSITION_DURATION = 200;
+
+let isPullStart = $ref(false);
+let isPullEnd = $ref(false);
+let isRefreshing = $ref(false);
+let currentHeight = $ref(0);
+
+let supportPointerDesktop = false;
+let startScreenY: number | null = null;
+
+const rootEl = $shallowRef<HTMLDivElement>();
+let scrollEl: HTMLElement | null = null;
+
+let disabled = false;
+
+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);
+		currentHeight = 0;
+	}
+}
+
+function moveBySystem(to: number): Promise<void> {
+	return new Promise(r => {
+		const startHeight = currentHeight;
+		const overHeight = currentHeight - to;
+		if (overHeight < 1) {
+			r();
+			return;
+		}
+		const startTime = Date.now();
+		let intervalId = setInterval(() => {
+			const time = Date.now() - startTime;
+			if (time > RELEASE_TRANSITION_DURATION) {
+				currentHeight = to;
+				clearInterval(intervalId);
+				r();
+				return;
+			}
+			const nextHeight = startHeight - (overHeight / RELEASE_TRANSITION_DURATION) * time;
+			if (currentHeight < nextHeight) return;
+			currentHeight = nextHeight;
+		}, 1);
+	});
+}
+
+async function fixOverContent() {
+	if (currentHeight > FIRE_THRESHOLD) {
+		await moveBySystem(FIRE_THRESHOLD);
+	}
+}
+
+async function closeContent() {
+	if (currentHeight > 0) {
+		await moveBySystem(0);
+	}
+}
+
+function moveEnd() {
+	if (isPullStart && !isRefreshing) {
+		startScreenY = null;
+		if (isPullEnd) {
+			isPullEnd = false;
+			isRefreshing = true;
+			fixOverContent().then(() => emits('refresh'));
+		} 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 + currentHeight)) {
+		currentHeight = 0;
+		isPullEnd = false;
+		moveEnd();
+		return;
+	}
+
+	if (startScreenY === null) {
+		startScreenY = getScreenY(event);
+	}
+	const moveScreenY = getScreenY(event);
+
+	const moveHeight = moveScreenY - startScreenY!;
+	currentHeight = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
+
+	isPullEnd = currentHeight >= FIRE_THRESHOLD;
+}
+
+/**
+ * emit(refresh)が完了したことを知らせる関数
+ *
+ * タイムアウトがないのでこれを最終的に実行しないと出たままになる
+ */
+function refreshFinished() {
+	closeContent().then(() => {
+		isPullStart = false;
+		isRefreshing = false;
+	});
+}
+
+function setDisabled(value) {
+	disabled = value;
+}
+
+onMounted(() => {
+	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({
+	refreshFinished,
+	setDisabled,
+});
+</script>
+
+<style lang="scss" module>
+.frame {
+	position: relative;
+	overflow: clip;
+
+	width: 100%;
+	min-height: var(--frame-min-height, 0px);
+
+	box-shadow: inset 0px -7px 10px -10px rgba(0,0,0,.1);
+	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>

packages/frontend/src/components/MkTimeline.vue

@@ -4,17 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkInfo v-if="$i && tlHint && !tlHintClosed" :closeable="true" style="margin-bottom: 16px;" @closed="closeHint">
-	<I18n :src="tlHint"><template #icon><i :class="tlIcon"></i></template></I18n>
-</MkInfo>
-<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+	<MkInfo v-if="$i && tlHint && !tlHintClosed" :closeable="true" style="margin-bottom: 16px;" @closed="closeHint">
+		<I18n :src="tlHint"><template #icon><i :class="tlIcon"></i></template></I18n>
+	</MkInfo>
+	<MkPullToRefresh ref="prComponent" @refresh="() => reloadTimeline(true)">
+		<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 MkInfo from '@/components/MkInfo.vue';
-import { useStream } from '@/stream.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+import { useStream, reloadStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
@@ -47,6 +50,7 @@ const emit = defineEmits<{
 
 provide('inChannel', computed(() => props.src === 'channel'));
 
+const prComponent: InstanceType<typeof MkPullToRefresh> = $ref();
 const tlComponent: InstanceType<typeof MkNotes> = $ref();
 
 let tlNotesCount = 0;
@@ -91,16 +95,84 @@ let tlHint;
 let tlHintClosed;
 
 const stream = useStream();
+const connectChannel = () => {
+	if (props.src === 'antenna') {
+		connection = stream.useChannel('antenna', {
+			antennaId: props.antenna,
+		});
+	} else if (props.src === 'home') {
+		connection = stream.useChannel('homeTimeline', {
+			withRenotes: props.withRenotes,
+			withFiles: props.onlyFiles ? true : undefined,
+			withCats: props.onlyCats,
+		});
+		connection2 = stream.useChannel('main');
+		tlIcon = 'ti ti-home';
+		tlHint = i18n.ts._tlTutorial.step1_1;
+		tlHintClosed = defaultStore.state.tlHomeHintClosed;
+	} else if (props.src === 'local') {
+		connection = stream.useChannel('localTimeline', {
+			withRenotes: props.withRenotes,
+			withReplies: props.withReplies,
+			withFiles: props.onlyFiles ? true : undefined,
+			withCats: props.onlyCats,
+		});
+		tlIcon = 'ti ti-planet';
+		tlHint = i18n.ts._tlTutorial.step1_2;
+		tlHintClosed = defaultStore.state.tlLocalHintClosed;
+	} else if (props.src === 'social') {
+		connection = stream.useChannel('hybridTimeline', {
+			withRenotes: props.withRenotes,
+			withReplies: props.withReplies,
+			withFiles: props.onlyFiles ? true : undefined,
+			withCats: props.onlyCats,
+		});
+		tlIcon = 'ti ti-universe';
+		tlHint = i18n.ts._tlTutorial.step1_3;
+		tlHintClosed = defaultStore.state.tlSocialHintClosed;
+	} else if (props.src === 'global') {
+		connection = stream.useChannel('globalTimeline', {
+			withRenotes: props.withRenotes,
+			withFiles: props.onlyFiles ? true : undefined,
+			withCats: props.onlyCats,
+		});
+		tlIcon = 'ti ti-world';
+		tlHint = i18n.ts._tlTutorial.step1_4;
+		tlHintClosed = defaultStore.state.tlGlobalHintClosed;
+	} 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', {
+			withFiles: props.onlyFiles ? true : undefined,
+			withCats: props.onlyCats,
+			listId: props.list,
+		});
+	} else if (props.src === 'channel') {
+		connection = stream.useChannel('channel', {
+			channelId: props.channel,
+		});
+	} else if (props.src === 'role') {
+		connection = stream.useChannel('roleTimeline', {
+			roleId: props.role,
+		});
+	}
+	if (props.src !== 'directs' || props.src !== 'mentions') 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 = {
@@ -108,15 +180,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	connection = stream.useChannel('homeTimeline', {
-		withRenotes: props.withRenotes,
-		withFiles: props.onlyFiles ? true : undefined,
-		withCats: props.onlyCats,
-	});
-	connection.on('note', prepend);
-
-	connection2 = stream.useChannel('main');
-
 	tlIcon = 'ti ti-home';
 	tlHint = i18n.ts._tlTutorial.step1_1;
 	tlHintClosed = defaultStore.state.tlHomeHintClosed;
@@ -128,14 +191,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	connection = stream.useChannel('localTimeline', {
-		withRenotes: props.withRenotes,
-		withReplies: props.withReplies,
-		withFiles: props.onlyFiles ? true : undefined,
-		withCats: props.onlyCats,
-	});
-	connection.on('note', prepend);
-
 	tlIcon = 'ti ti-planet';
 	tlHint = i18n.ts._tlTutorial.step1_2;
 	tlHintClosed = defaultStore.state.tlLocalHintClosed;
@@ -147,14 +202,6 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	connection = stream.useChannel('hybridTimeline', {
-		withRenotes: props.withRenotes,
-		withReplies: props.withReplies,
-		withFiles: props.onlyFiles ? true : undefined,
-		withCats: props.onlyCats,
-	});
-	connection.on('note', prepend);
-
 	tlIcon = 'ti ti-universe';
 	tlHint = i18n.ts._tlTutorial.step1_3;
 	tlHintClosed = defaultStore.state.tlSocialHintClosed;
@@ -165,32 +212,16 @@ if (props.src === 'antenna') {
 		withFiles: props.onlyFiles ? true : undefined,
 		withCats: props.onlyCats,
 	};
-	connection = stream.useChannel('globalTimeline', {
-		withRenotes: props.withRenotes,
-		withFiles: props.onlyFiles ? true : undefined,
-		withCats: props.onlyCats,
-	});
-	connection.on('note', prepend);
-
 	tlIcon = 'ti ti-world';
 	tlHint = i18n.ts._tlTutorial.step1_4;
 	tlHintClosed = defaultStore.state.tlGlobalHintClosed;
 } 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 = {
@@ -198,30 +229,25 @@ if (props.src === 'antenna') {
 		withCats: props.onlyCats,
 		listId: props.list,
 	};
-	connection = stream.useChannel('userList', {
-		withFiles: props.onlyFiles ? true : undefined,
-		withCats: props.onlyCats,
-		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);
 }
 
 function closeHint() {
@@ -247,9 +273,19 @@ const pagination = {
 	params: query,
 };
 
-onUnmounted(() => {
-	connection.dispose();
-	if (connection2) connection2.dispose();
+const reloadTimeline = (fromPR = false) => {
+	tlNotesCount = 0;
+
+	tlComponent.pagingComponent?.reload().then(() => {
+		reloadStream();
+		if (fromPR) prComponent.refreshFinished();
+	});
+};
+
+//const pullRefresh = () => reloadTimeline(true);
+
+defineExpose({
+	reloadTimeline
 });
 
 /* TODO

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

@@ -239,6 +239,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</MkSwitch>
 				<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
 				<MkSwitch v-model="keepScreenOn">{{ i18n.ts.keepScreenOn }}</MkSwitch>
+				<MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }} <span class="_beta">CherryPick</span></template>
@@ -360,6 +361,7 @@ const notificationPosition = computed(defaultStore.makeGetterSetter('notificatio
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
+const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 const showUnreadNotificationCount = computed(defaultStore.makeGetterSetter('showUnreadNotificationCount'));
 const newNoteReceivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteReceivedNotificationBehavior'));
 const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
@@ -425,6 +427,7 @@ watch([
 	reactionsDisplaySize,
 	highlightSensitiveMedia,
 	keepScreenOn,
+	disableStreamingTimeline,
 	showUnreadNotificationCount,
 	enableDataSaverMode,
 	enableAbsoluteTime,

packages/frontend/src/pages/timeline.vue

@@ -224,37 +224,45 @@ async function reloadAsk() {
 	} else globalEvents.emit('hasRequireRefresh', true);
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ti ti-dots',
-	text: i18n.ts.options,
-	handler: (ev) => {
-		os.popupMenu([{
-			type: 'switch',
-			text: i18n.ts.friendlyEnableNotifications,
-			ref: $$(friendlyEnableNotifications),
-		}, {
-			type: 'switch',
-			text: i18n.ts.friendlyEnableWidgets,
-			ref: $$(friendlyEnableWidgets),
-		}, {
-			type: 'switch',
-			text: i18n.ts.showRenotes,
-			ref: $$(withRenotes),
-		}, src === 'local' || src === 'social' ? {
-			type: 'switch',
-			text: i18n.ts.showRepliesToOthersInTimeline,
-			ref: $$(withReplies),
-		} : undefined, {
-			type: 'switch',
-			text: i18n.ts.fileAttachedOnly,
-			ref: $$(onlyFiles),
-		}, {
-			type: 'switch',
-			text: i18n.ts.showCatOnly,
-			ref: $$(onlyCats),
-		}], ev.currentTarget ?? ev.target);
+const headerActions = $computed(() => [
+	...[deviceKind === 'desktop' ? {
+		icon: 'ti ti-refresh',
+		text: i18n.ts.reload,
+		handler: () => {
+			tlComponent.reloadTimeline();
+		},
+	} : {}], {
+		icon: 'ti ti-dots',
+		text: i18n.ts.options,
+		handler: (ev) => {
+			os.popupMenu([{
+				type: 'switch',
+				text: i18n.ts.friendlyEnableNotifications,
+				ref: $$(friendlyEnableNotifications),
+			}, {
+				type: 'switch',
+				text: i18n.ts.friendlyEnableWidgets,
+				ref: $$(friendlyEnableWidgets),
+			}, {
+				type: 'switch',
+				text: i18n.ts.showRenotes,
+				ref: $$(withRenotes),
+			}, src === 'local' || src === 'social' ? {
+				type: 'switch',
+				text: i18n.ts.showRepliesToOthersInTimeline,
+				ref: $$(withReplies),
+			} : undefined, {
+				type: 'switch',
+				text: i18n.ts.fileAttachedOnly,
+				ref: $$(onlyFiles),
+			}, {
+				type: 'switch',
+				text: i18n.ts.showCatOnly,
+				ref: $$(onlyCats),
+			}], ev.currentTarget ?? ev.target);
+		},
 	},
-}]);
+]);
 
 const headerTabs = $computed(() => [...(defaultStore.reactiveState.pinnedUserLists.value.map(l => ({
 	key: 'list:' + l.id,

packages/frontend/src/store.ts

@@ -402,6 +402,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: true,
 	},
+	disableStreamingTimeline: {
+		where: 'device',
+		default: false,
+	},
 	showUnreadNotificationCount: {
 		where: 'deviceAccount',
 		default: false,

packages/frontend/src/stream.ts

@@ -9,6 +9,9 @@ import { $i } from '@/account.js';
 import { url } from '@/config.js';
 
 let stream: Misskey.Stream | null = null;
+let timeoutHeadBeat: 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);
+	timeoutHeadBeat = window.setTimeout(heartbeat, 1000 * 60);
+
+	return stream;
+}
+
+export function reloadStream() {
+	if (!stream) return useStream();
+	if (timeoutHeadBeat) window.clearTimeout(timeoutHeadBeat);
+	isReloading = true;
+
+	stream.close();
+	stream.once('_connected_', () => isReloading = false);
+	stream.stream.reconnect();
+	timeoutHeadBeat = 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);
+	timeoutHeadBeat = window.setTimeout(heartbeat, 1000 * 60);
 }

packages/frontend/src/ui/_common_/stream-indicator.vue

@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
-import { useStream } from '@/stream.js';
+import { useStream, isReloading } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -36,6 +36,7 @@ let hasDisconnected = $ref(false);
 let timeoutId = $ref<number>();
 
 function onDisconnected() {
+	if (isReloading) return;
 	window.clearTimeout(timeoutId);
 	timeoutId = window.setTimeout(() => {
 		hasDisconnected = true;

packages/frontend/src/ui/universal.vue

@@ -351,7 +351,7 @@ $widgets-hide-threshold: 1090px;
 	min-width: 0;
 	overflow: auto;
 	overflow-y: scroll;
-	overscroll-behavior: contain;
+	overscroll-behavior: none;
 	background: var(--bg);
 }