feat: メディアタイムライン実装

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

@@ -30,7 +30,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
 			<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
 			<MkSwitch v-model="showTimelineReplies">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></MkSwitch>
-			<MkFolder>
+			<MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline}}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
+      <MkFolder>
 				<template #label>{{ i18n.ts.pinnedList }}</template>
 				<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
 				<MkButton v-if="defaultStore.reactiveState.pinnedUserLists.value.length === 0" @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
@@ -123,7 +124,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableUltimateDataSaverMode">{{ i18n.ts.UltimateDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableCellularWithUltimateDataSaver">{{ i18n.ts.cellularWithUltimateDataSaver }}</MkSwitch>
-				<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }}</MkSwitch>
+				<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }} <template #caption>{{ i18n.ts.gamingModeInfo }} </template></MkSwitch>
 			</div>
 			<div>
 				<MkRadios v-model="emojiStyle">
@@ -257,7 +258,7 @@ const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificati
 const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimelineReplies'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
-
+const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);

packages/frontend/src/pages/timeline.tutorial.vue

@@ -21,6 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-if="tutorial === 0" :class="$style.body">
 		<div>{{ i18n.t('_timelineTutorial.step1_1', { name: instance.name ?? host }) }}</div>
 		<div>{{ i18n.t('_timelineTutorial.step1_2', { name: instance.name ?? host }) }}</div>
+    <div>{{ i18n.t('_timelineTutorial.step1_3', { name: instance.name ?? host }) }}</div>
 	</div>
 	<div v-else-if="tutorial === 1" :class="$style.body">
 		<div>{{ i18n.ts._timelineTutorial.step2_1 }}</div>

packages/frontend/src/pages/timeline.vue

@@ -40,6 +40,9 @@ const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
 const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
 const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable);
+const isShowMediaTimeline = defaultStore.state.showMediaTimeline;
+console.log(isShowMediaTimeline)
+
 const keymap = {
 	't': focus,
 };
@@ -128,12 +131,12 @@ const headerTabs = $computed(() => [{
 	title: i18n.ts._timelines.local,
 	icon: 'ti ti-planet',
 	iconOnly: true,
-}, {
-	key: 'media',
-	title: i18n.ts._timelines.media,
-	icon: 'ti ti-photo',
-	iconOnly: true,
-}, {
+}, ...(isShowMediaTimeline ? [{
+  key: 'media',
+  title: i18n.ts._timelines.media,
+  icon: 'ti ti-photo',
+  iconOnly: true,
+}] : []), {
 	key: 'social',
 	title: i18n.ts._timelines.social,
 	icon: 'ti ti-rocket',

packages/frontend/src/store.ts

@@ -272,7 +272,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	gamingMode: {
 		where: 'device',
-		default: false,
+		default: true,
 	},
 	bannerUrl:{
 		where: 'device',
@@ -350,6 +350,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	showMediaTimeline:{
+		where: 'device',
+		default: true,
+	},
 	reactionsDisplaySize: {
 		where: 'device',
 		default: 'medium' as 'small' | 'medium' | 'large',