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

locales/en-US.yml

@@ -166,6 +166,8 @@ flagAsCat: "Mark this account as a cat"
 flagAsCatDescription: "Enable this option to mark this account as a cat."
 flagShowTimelineReplies: "Show replies in timeline"
 flagShowTimelineRepliesDescription: "Shows replies of users to notes of other users in the timeline if turned on."
+showMediaTimeline: "Show Media timeline"
+showMediaTimelineInfo: "When on, the media timeline is displayed on the top bar. When turned off, it will not be displayed."
 autoAcceptFollowed: "Automatically approve follow requests from users you're following"
 addAccount: "Add account"
 reloadAccountsList: "Reload account list"
@@ -293,6 +295,7 @@ theme: "Themes"
 themeForLightMode: "Theme to use in Light Mode"
 themeForDarkMode: "Theme to use in Dark Mode"
 gamingMode: "Gaming Mode"
+gamingModeInfo: "It makes a nice gradation of buttons and other decorations. There is no intense blinking, etc."
 light: "Light"
 dark: "Dark"
 lightThemes: "Light themes"
@@ -1708,6 +1711,7 @@ _timelineTutorial:
   title: "How to use Misskey"
   step1_1: "This is the \"timeline\". All \"notes\" submitted on {name} will be chronologically displayed here."
   step1_2: "There are a few different timelines. For example, the \"Home timeline\" will contain notes of users you follow, and the \"Local timeline\" will contain notes from all users of {name}."
+  step1_3: 'Besides these two, "Social Timeline" is like Home TL + Local TL, and "Media Timeline" is a stream of notes posted with some file at {name}.'
   step2_1: "Let's try posting a note next. You can do so by pressing the button with a pencil icon."
   step2_2: "How about writing a self-introduction, or just \"Hello {name}!\" if you don't feel like it?"
   step3_1: "Finished posting your first note?"

locales/index.d.ts

@@ -168,6 +168,8 @@ export interface Locale {
     "flagAsCat": string;
     "flagAsCatDescription": string;
     "flagShowTimelineReplies": string;
+    "showMediaTimeline": string;
+    "showMediaTimelineInfo": string;
     "flagShowTimelineRepliesDescription": string;
     "autoAcceptFollowed": string;
     "addAccount": string;
@@ -296,6 +298,7 @@ export interface Locale {
     "themeForLightMode": string;
     "themeForDarkMode": string;
     "gamingMode": string;
+    "gamingModeInfo": string;
     "light": string;
     "dark": string;
     "lightThemes": string;
@@ -1825,6 +1828,7 @@ export interface Locale {
         "title": string;
         "step1_1": string;
         "step1_2": string;
+        "step1_3": string;
         "step2_1": string;
         "step2_2": string;
         "step3_1": string;

locales/ja-JP.yml

@@ -165,6 +165,8 @@ flagAsBotDescription: "このアカウントがプログラムによって運用
 flagAsCat: "にゃああああああああああああああ！！！！！！！！！！！！"
 flagAsCatDescription: "にゃにゃにゃ？？"
 flagShowTimelineReplies: "タイムラインにノートへの返信を表示する"
+showMediaTimeline: "メディアタイムラインを表示する"
+showMediaTimelineInfo: "オンにするとメディアタイムラインを上のバーに表示します。 オフにすると表示しなくなります。"
 flagShowTimelineRepliesDescription: "オンにすると、タイムラインにユーザーのノート以外にもそのユーザーの他のノートへの返信を表示します。"
 autoAcceptFollowed: "フォロー中ユーザーからのフォロリクを自動承認"
 addAccount: "アカウントを追加"
@@ -293,6 +295,7 @@ theme: "テーマ"
 themeForLightMode: "ライトモードで使うテーマ"
 themeForDarkMode: "ダークモードで使うテーマ"
 gamingMode: 'ゲーミングモード'
+gamingModeInfo: "ボタンなどの装飾をいい感じのグラデーションにします。 激しい点滅などはございません。"
 light: "ライト"
 dark: "ダーク"
 lightThemes: "明るいテーマ"
@@ -1742,6 +1745,7 @@ _timelineTutorial:
   title: "Misskeyの使い方"
   step1_1: "この画面は「タイムライン」です。{name}に投稿された「ノート」が時系列で表示されます。"
   step1_2: "タイムラインにはいくつか種類があり、例えば「ホームタイムライン」にはあなたがフォローしている人のノートが流れ、「ローカルタイムライン」には{name}全体のノートが流れます。"
+  step1_3: "この2つ以外にも、「ソーシャルタイムライン」は ホームTL + ローカルTL のようなもので、 「メディアタイムライン」 には{name}で何かしらのファイル付きで投稿されたノートが流れます。"
   step2_1: "試しに、何かノートを投稿してみましょう。画面上にある鉛筆マークのボタンを押すとフォームが開きます。"
   step2_2: "初めてのノートの内容は、あなたの自己紹介や「{name}始めました」などがおすすめです。"
   step3_1: "投稿できましたか？"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2023.9.0-beta.9-prismisskey.1",
+	"version": "2023.9.0-beta.9-prismisskey.3",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

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,
-}, {
+}, ...(isShowMediaTimeline ? [{
-	key: 'media',
+  key: 'media',
-	title: i18n.ts._timelines.media,
+  title: i18n.ts._timelines.media,
-	icon: 'ti ti-photo',
+  icon: 'ti ti-photo',
-	iconOnly: true,
+  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',