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

* feat(frontend): スワイプやボタンでタイムラインを再読込する機能 (misskey-dev#12113)
* tweak MkPullToRefresh
cheery-picked from 52dbab56a4
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
* enhance(frontend): improve pull to refresh
cheery-picked from d0d32e8846
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

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

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',