feat(frontend): スワイプやボタンでタイムラインを再読込する機能 (#12113)

* pc reloading

* add: disable TL websocket option

* fix: stream disconnect when reload

* add: pull to refresh

* fix: pull to refresh

* add changelog

* fact: change to disableStreamingTimeline

* lint

* remove: en-US text

* refactor

* refactor

* add license identifier

* tweak

* Update MkPullToRefresh.vue

* Update MkPullToRefresh.vue

* change name timeoutHeartBeat

* tweak

* 🎨

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

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

@@ -151,6 +151,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 }}</template>
@@ -253,6 +254,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'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -289,6 +291,7 @@ watch([
 	reactionsDisplaySize,
 	highlightSensitiveMedia,
 	keepScreenOn,
+	disableStreamingTimeline,
 ], async () => {
 	await reloadAsk();
 });

packages/frontend/src/pages/timeline.vue

@@ -44,6 +44,7 @@ import { $i } from '@/account.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { antennasCache, userListsCache } from '@/cache.js';
+import { deviceKind } from '@/scripts/device-kind.js';
 
 provide('shouldOmitHeaderTitle', true);
 
@@ -139,27 +140,36 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ti ti-dots',
-	text: i18n.ts.options,
-	handler: (ev) => {
-		os.popupMenu([{
-			type: 'switch',
-			text: i18n.ts.showRenotes,
-			icon: 'ti ti-repeat',
-			ref: $$(withRenotes),
-		}, src === 'local' || src === 'social' ? {
-			type: 'switch',
-			text: i18n.ts.showRepliesToOthersInTimeline,
-			ref: $$(withReplies),
-		} : undefined, {
-			type: 'switch',
-			text: i18n.ts.fileAttachedOnly,
-			icon: 'ti ti-photo',
-			ref: $$(onlyFiles),
-		}], ev.currentTarget ?? ev.target);
-	},
-}]);
+const headerActions = $computed(() => [
+	...[deviceKind === 'desktop' ? {
+		icon: 'ti ti-refresh',
+		text: i18n.ts.reload,
+		handler: (ev) => {
+			console.log('called');
+			tlComponent.reloadTimeline();
+		},
+	} : {}], {
+		icon: 'ti ti-dots',
+		text: i18n.ts.options,
+		handler: (ev) => {
+			os.popupMenu([{
+				type: 'switch',
+				text: i18n.ts.showRenotes,
+				icon: 'ti ti-repeat',
+				ref: $$(withRenotes),
+			}, src === 'local' || src === 'social' ? {
+				type: 'switch',
+				text: i18n.ts.showRepliesToOthersInTimeline,
+				ref: $$(withReplies),
+			} : undefined, {
+				type: 'switch',
+				text: i18n.ts.fileAttachedOnly,
+				icon: 'ti ti-photo',
+				ref: $$(onlyFiles),
+			}], ev.currentTarget ?? ev.target);
+		},
+	}
+]);
 
 const headerTabs = $computed(() => [...(defaultStore.reactiveState.pinnedUserLists.value.map(l => ({
 	key: 'list:' + l.id,