From 76664b656575c8399eb9434031c7f857d5e78d78 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 7 Nov 2024 23:56:01 +0900
Subject: [PATCH] =?UTF-8?q?enhance(tms):=20settings/flags=E3=82=92?=
 =?UTF-8?q?=E7=B5=B1=E5=90=88=E3=81=97=E3=81=A6features=E3=81=AB=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enh: flagsページをsettingsページに統合する

* change: /tms/settings -> /tms/features

* enh: FormSection -> MkFolder + MkFormFooter
---
 locales/index.d.ts                            |  64 ++++------
 locales/ja-JP.yml                             |  24 ++--
 packages/frontend/src/pages/tms/about.vue     |   4 +-
 .../frontend/src/pages/tms/features.basic.vue |  95 +++++++++++++++
 .../src/pages/tms/features.experimental.vue   |  47 ++++++++
 packages/frontend/src/pages/tms/features.vue  |  75 ++++++++++++
 .../src/pages/tms/flags/index.main.vue        | 110 ------------------
 .../frontend/src/pages/tms/flags/index.vue    |  67 -----------
 .../src/pages/tms/settings/index.main.vue     | 108 -----------------
 .../frontend/src/pages/tms/settings/index.vue |  62 ----------
 packages/frontend/src/router/definition.ts    |  11 +-
 packages/frontend/src/ui/_common_/common.ts   |   4 +-
 12 files changed, 258 insertions(+), 413 deletions(-)
 create mode 100644 packages/frontend/src/pages/tms/features.basic.vue
 create mode 100644 packages/frontend/src/pages/tms/features.experimental.vue
 create mode 100644 packages/frontend/src/pages/tms/features.vue
 delete mode 100644 packages/frontend/src/pages/tms/flags/index.main.vue
 delete mode 100644 packages/frontend/src/pages/tms/flags/index.vue
 delete mode 100644 packages/frontend/src/pages/tms/settings/index.main.vue
 delete mode 100644 packages/frontend/src/pages/tms/settings/index.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e0e4a649bdf8..ed92df3c57f3 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -10485,29 +10485,37 @@ export interface Locale extends ILocale {
          */
         readonly "aboutTaiyme": string;
         /**
-         * taiyme拡張機能
+         * taiyme限定機能
          */
-        readonly "taiymeSettings": string;
+        readonly "taiymeFeatures": string;
         /**
-         * taiyme実験的機能
+         * これらの機能はtaiymeで独自実装したものです。
          */
-        readonly "taiymeFlags": string;
+        readonly "taiymeFeaturesDescription": string;
+        /**
+         * 基本機能
+         */
+        readonly "taiymeBasicFeatures": string;
+        /**
+         * 実験的機能
+         */
+        readonly "taiymeExperimentalFeatures": string;
+        /**
+         * これらの機能を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。
+         */
+        readonly "taiymeExperimentalFeaturesWarning": ParameterizedString<"name">;
         /**
          * {name}は、Misskeyの派生であるtaiymeを使用したサーバーのひとつです。
          */
         readonly "poweredByTaiyme": ParameterizedString<"name">;
         /**
-         * {name}を支援
+         * {name}を支援する
          */
         readonly "supportX": ParameterizedString<"name">;
         /**
          * コミットハッシュ
          */
         readonly "commitHash": string;
-        /**
-         * 問題の報告や要望はGitHubで受け付けています。
-         */
-        readonly "reportIssuesToGithub": string;
         /**
          * センシティブな画像
          */
@@ -10573,14 +10581,10 @@ export interface Locale extends ILocale {
          */
         readonly "updatedX": ParameterizedString<"x">;
         readonly "_about": {
-            /**
-             * taiymeについて
-             */
-            readonly "title": string;
             /**
              * taiymeは、Misskeyから派生したオープンソースのソフトウェアです。
              */
-            readonly "description": string;
+            readonly "taiymeIsOSS": string;
             /**
              * プロジェクトメンバー
              */
@@ -10594,15 +10598,7 @@ export interface Locale extends ILocale {
              */
             readonly "patrons": string;
         };
-        readonly "_settings": {
-            /**
-             * taiyme拡張機能
-             */
-            readonly "title": string;
-            /**
-             * これらの機能はtaiymeで独自実装したものです。
-             */
-            readonly "description": string;
+        readonly "_basicFeatures": {
             readonly "_tickerPosition": {
                 /**
                  * ノートのサーバー情報の表示位置
@@ -10684,27 +10680,7 @@ export interface Locale extends ILocale {
                 readonly "caption": string;
             };
         };
-        readonly "_flags": {
-            /**
-             * taiyme実験的機能
-             */
-            readonly "title": string;
-            /**
-             * これらの機能はtaiymeで独自実装したものです。
-             */
-            readonly "description": string;
-            /**
-             * これらの設定を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。
-             */
-            readonly "warning": ParameterizedString<"name">;
-            /**
-             * {x}を強制取得
-             */
-            readonly "forceFetchX": ParameterizedString<"x">;
-            /**
-             * {x}を開く
-             */
-            readonly "openX": ParameterizedString<"x">;
+        readonly "_experimentalFeatures": {
             readonly "_preventLongPressContextMenu": {
                 /**
                  * 長押しによるコンテキストメニューイベントの発行を防ぐ
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 26b7c5c742fc..8eec6bf1ebe8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2794,12 +2794,14 @@ _tms:
   taiy: "taiy"
   taiyme: "taiyme"
   aboutTaiyme: "taiymeについて"
-  taiymeSettings: "taiyme拡張機能"
-  taiymeFlags: "taiyme実験的機能"
+  taiymeFeatures: "taiyme限定機能"
+  taiymeFeaturesDescription: "これらの機能はtaiymeで独自実装したものです。"
+  taiymeBasicFeatures: "基本機能"
+  taiymeExperimentalFeatures: "実験的機能"
+  taiymeExperimentalFeaturesWarning: "これらの機能を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。"
   poweredByTaiyme: "{name}は、Misskeyの派生であるtaiymeを使用したサーバーのひとつです。"
-  supportX: "{name}を支援"
+  supportX: "{name}を支援する"
   commitHash: "コミットハッシュ"
-  reportIssuesToGithub: "問題の報告や要望はGitHubで受け付けています。"
   sensitiveImage: "センシティブな画像"
   sensitiveVideo: "センシティブな動画"
   sensitiveAudio: "センシティブな音声"
@@ -2817,14 +2819,11 @@ _tms:
   taiymeUpdated: "taiymeが更新されました！"
   updatedX: "{x}が更新されました！"
   _about:
-    title: "taiymeについて"
-    description: "taiymeは、Misskeyから派生したオープンソースのソフトウェアです。"
+    taiymeIsOSS: "taiymeは、Misskeyから派生したオープンソースのソフトウェアです。"
     projectMembers: "プロジェクトメンバー"
     contributors: "コントリビューター"
     patrons: "支援者"
-  _settings:
-    title: "taiyme拡張機能"
-    description: "これらの機能はtaiymeで独自実装したものです。"
+  _basicFeatures:
     _tickerPosition:
       label: "ノートのサーバー情報の表示位置"
       default: "デフォルト"
@@ -2847,12 +2846,7 @@ _tms:
     _pullToRefreshAllReload:
       label: "「引っ張ってリロード」でページ全体を再読み込みする"
       caption: "構成しているページ全体を再読み込みする動作に置き換えます。"
-  _flags:
-    title: "taiyme実験的機能"
-    description: "これらの機能はtaiymeで独自実装したものです。"
-    warning: "これらの設定を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。"
-    forceFetchX: "{x}を強制取得"
-    openX: "{x}を開く"
+  _experimentalFeatures:
     _preventLongPressContextMenu:
       label: "長押しによるコンテキストメニューイベントの発行を防ぐ"
       caption: "長押しを含む操作が中断される問題を解消します。"
diff --git a/packages/frontend/src/pages/tms/about.vue b/packages/frontend/src/pages/tms/about.vue
index bd6f3f809cf9..500342699fa2 100644
--- a/packages/frontend/src/pages/tms/about.vue
+++ b/packages/frontend/src/pages/tms/about.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :contentMax="600" :marginMin="20">
 			<div class="_gaps_m">
 				<TmsNoCache><TmsSoftwareBanner/></TmsNoCache>
-				<div style="text-align: center;">{{ i18n.ts._tms._about.description }}</div>
+				<div style="text-align: center;">{{ i18n.ts._tms._about.taiymeIsOSS }}</div>
 				<FormSection>
 					<div class="_gaps_s">
 						<TmsSoftwareRepository/>
@@ -61,7 +61,7 @@ import TmsSoftwareDonation from '@/components/TmsSoftwareDonation.vue';
 import TmsSoftwareRepository from '@/components/TmsSoftwareRepository.vue';
 
 definePageMetadata(() => ({
-	title: i18n.ts._tms._about.title,
+	title: i18n.ts._tms.aboutTaiyme,
 	icon: 'ti ti-info-circle',
 }));
 </script>
diff --git a/packages/frontend/src/pages/tms/features.basic.vue b/packages/frontend/src/pages/tms/features.basic.vue
new file mode 100644
index 000000000000..dcdb360938cb
--- /dev/null
+++ b/packages/frontend/src/pages/tms/features.basic.vue
@@ -0,0 +1,95 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div class="_gaps_s">
+		<MkInfo>{{ i18n.ts._tms.taiymeFeaturesDescription }} <MkA to="/tms/about" class="_link">{{ i18n.ts.learnMore }}</MkA></MkInfo>
+	</div>
+	<MkFolder defaultOpen>
+		<template #icon><i class="ti ti-palette"></i></template>
+		<template #label>{{ i18n.ts.appearance }}</template>
+		<template v-if="appearancesForm.modified.value" #footer>
+			<MkFormFooter :form="appearancesForm"/>
+		</template>
+		<div class="_gaps">
+			<MkSelect v-model="appearancesForm.state.tickerPosition">
+				<template #label>
+					<span>{{ i18n.ts._tms._basicFeatures._tickerPosition.label }}</span>
+					<span v-if="appearancesForm.modifiedStates.tickerPosition" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<option value="default">{{ i18n.ts._tms._basicFeatures._tickerPosition.default }}</option>
+				<option value="leftVerticalBar">{{ i18n.ts._tms._basicFeatures._tickerPosition.leftVerticalBar }}</option>
+				<option value="rightVerticalBar">{{ i18n.ts._tms._basicFeatures._tickerPosition.rightVerticalBar }}</option>
+				<option value="leftWatermark">{{ i18n.ts._tms._basicFeatures._tickerPosition.leftWatermark }}</option>
+				<option value="rightWatermark">{{ i18n.ts._tms._basicFeatures._tickerPosition.rightWatermark }}</option>
+			</MkSelect>
+			<MkSelect v-model="appearancesForm.state.superMenuDisplayMode">
+				<template #label>
+					<span>{{ i18n.ts._tms._basicFeatures._superMenuDisplayMode.label }}</span>
+					<span v-if="appearancesForm.modifiedStates.superMenuDisplayMode" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._basicFeatures._superMenuDisplayMode.caption }}</template>
+				<option value="default">{{ i18n.ts._tms._basicFeatures._superMenuDisplayMode.default }}</option>
+				<option value="classic">{{ i18n.ts._tms._basicFeatures._superMenuDisplayMode.classic }}</option>
+				<option value="forceList">{{ i18n.ts._tms._basicFeatures._superMenuDisplayMode.forceList }}</option>
+			</MkSelect>
+		</div>
+	</MkFolder>
+	<MkFolder defaultOpen>
+		<template #icon><i class="ti ti-hand-click"></i></template>
+		<template #label>{{ i18n.ts.operations }}</template>
+		<template v-if="operationsForm.modified.value" #footer>
+			<MkFormFooter :form="operationsForm"/>
+		</template>
+		<div class="_gaps">
+			<MkSelect v-model="operationsForm.state.pullToRefreshSensitivity">
+				<template #label>
+					<span>{{ i18n.ts._tms._basicFeatures._pullToRefreshSensitivity.label }}</span>
+					<span v-if="operationsForm.modifiedStates.pullToRefreshSensitivity" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._basicFeatures._pullToRefreshSensitivity.caption }}</template>
+				<option value="low">{{ i18n.ts._tms._basicFeatures._pullToRefreshSensitivity.low }}</option>
+				<option value="middle">{{ i18n.ts._tms._basicFeatures._pullToRefreshSensitivity.middle }}</option>
+				<option value="high">{{ i18n.ts._tms._basicFeatures._pullToRefreshSensitivity.high }}</option>
+			</MkSelect>
+			<MkSwitch v-model="operationsForm.state.pullToRefreshAllReload">
+				<template #label>
+					<span>{{ i18n.ts._tms._basicFeatures._pullToRefreshAllReload.label }}</span>
+					<span v-if="operationsForm.modifiedStates.pullToRefreshAllReload" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._basicFeatures._pullToRefreshAllReload.caption }}</template>
+			</MkSwitch>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { useForm } from '@/scripts/use-form.js';
+import { tmsStore } from '@/tms/store.js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkFormFooter from '@/components/MkFormFooter.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+const appearancesForm = useForm({
+	tickerPosition: tmsStore.state.tickerPosition,
+	superMenuDisplayMode: tmsStore.state.superMenuDisplayMode,
+}, async (state) => {
+	tmsStore.set('tickerPosition', state.tickerPosition);
+	tmsStore.set('superMenuDisplayMode', state.superMenuDisplayMode);
+});
+
+const operationsForm = useForm({
+	pullToRefreshSensitivity: tmsStore.state.pullToRefreshSensitivity,
+	pullToRefreshAllReload: tmsStore.state.pullToRefreshAllReload,
+}, async (state) => {
+	tmsStore.set('pullToRefreshSensitivity', state.pullToRefreshSensitivity);
+	tmsStore.set('pullToRefreshAllReload', state.pullToRefreshAllReload);
+});
+</script>
diff --git a/packages/frontend/src/pages/tms/features.experimental.vue b/packages/frontend/src/pages/tms/features.experimental.vue
new file mode 100644
index 000000000000..bf8bef219c96
--- /dev/null
+++ b/packages/frontend/src/pages/tms/features.experimental.vue
@@ -0,0 +1,47 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div class="_gaps_s">
+		<MkInfo>{{ i18n.ts._tms.taiymeFeaturesDescription }} <MkA to="/tms/about" class="_link">{{ i18n.ts.learnMore }}</MkA></MkInfo>
+		<MkInfo warn>{{ i18n.tsx._tms.taiymeExperimentalFeaturesWarning({ name: instance.name ?? host }) }}</MkInfo>
+	</div>
+	<MkFolder defaultOpen>
+		<template #icon><i class="ti ti-hand-click"></i></template>
+		<template #label>{{ i18n.ts.operations }}</template>
+		<template v-if="operationsForm.modified.value" #footer>
+			<MkFormFooter :form="operationsForm"/>
+		</template>
+		<div class="_gaps">
+			<MkSwitch v-model="operationsForm.state.preventLongPressContextMenu">
+				<template #label>
+					<span>{{ i18n.ts._tms._experimentalFeatures._preventLongPressContextMenu.label }}</span>
+					<span v-if="operationsForm.modifiedStates.preventLongPressContextMenu" class="_modified">{{ i18n.ts.modified }}</span>
+				</template>
+				<template #caption>{{ i18n.ts._tms._experimentalFeatures._preventLongPressContextMenu.caption }}</template>
+			</MkSwitch>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { host } from '@@/js/config.js';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { useForm } from '@/scripts/use-form.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkFormFooter from '@/components/MkFormFooter.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+const operationsForm = useForm({
+	preventLongPressContextMenu: tmsFlaskStore.state.preventLongPressContextMenu,
+}, async (state) => {
+	tmsFlaskStore.set('preventLongPressContextMenu', state.preventLongPressContextMenu);
+});
+</script>
diff --git a/packages/frontend/src/pages/tms/features.vue b/packages/frontend/src/pages/tms/features.vue
new file mode 100644
index 000000000000..7b84ce89dafc
--- /dev/null
+++ b/packages/frontend/src/pages/tms/features.vue
@@ -0,0 +1,75 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #default>
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<MkSpacer v-if="tab === 'basic'" :contentMax="700" :marginMin="16" :marginMax="32">
+				<FormSuspense :p="ready">
+					<XBasicFeatures/>
+				</FormSuspense>
+			</MkSpacer>
+			<MkSpacer v-else-if="tab === 'experimental'" :contentMax="700" :marginMin="16" :marginMax="32">
+				<FormSuspense :p="ready">
+					<XExperimentalFeatures/>
+				</FormSuspense>
+			</MkSpacer>
+		</MkHorizontalSwipe>
+	</template>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref } from 'vue';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { tmsStore } from '@/tms/store.js';
+import FormSuspense from '@/components/form/suspense.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
+
+const props = withDefaults(defineProps<{
+	initialTab?: string;
+}>(), {
+	initialTab: 'basic',
+});
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const tab = ref(props.initialTab);
+
+const ready = async () => {
+	await tmsStore.loaded;
+	await tmsFlaskStore.loaded;
+};
+
+const XBasicFeatures = defineAsyncComponent(() => import('@/pages/tms/features.basic.vue'));
+const XExperimentalFeatures = defineAsyncComponent(() => import('@/pages/tms/features.experimental.vue'));
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => [{
+	key: 'basic',
+	title: i18n.ts._tms.taiymeBasicFeatures,
+	icon: 'ti ti-settings',
+}, {
+	key: 'experimental',
+	title: i18n.ts._tms.taiymeExperimentalFeatures,
+	icon: 'ti ti-flask',
+}]);
+
+definePageMetadata(() => ({
+	title: i18n.ts._tms.taiymeFeatures,
+	icon: 'ti ti-settings',
+}));
+</script>
+
+<style lang="scss" module>
+.footer {
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+}
+</style>
diff --git a/packages/frontend/src/pages/tms/flags/index.main.vue b/packages/frontend/src/pages/tms/flags/index.main.vue
deleted file mode 100644
index a0778252c5b2..000000000000
--- a/packages/frontend/src/pages/tms/flags/index.main.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<FormSection>
-		<div class="_gaps">
-			<MkSwitch v-model="preventLongPressContextMenu">
-				<template #label>{{ i18n.ts._tms._flags._preventLongPressContextMenu.label }}</template>
-				<template #caption>{{ i18n.ts._tms._flags._preventLongPressContextMenu.caption }}</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-	<FormSection>
-		<template #label>For developer</template>
-		<div class="_gaps_s">
-			<MkFolder defaultOpen>
-				<template #label>ForceFetchX</template>
-				<div class="_buttons">
-					<MkButton @click="forceFetchLocale">{{ i18n.tsx._tms._flags.forceFetchX({ x: `${lang}.${version}.json` }) }}</MkButton>
-				</div>
-			</MkFolder>
-			<MkFolder defaultOpen>
-				<template #label>OpenX</template>
-				<div class="_buttons">
-					<MkButton @click="openMkUpdated">{{ i18n.tsx._tms._flags.openX({ x: 'MkUpdated' }) }}</MkButton>
-					<MkButton @click="openMkDonation">{{ i18n.tsx._tms._flags.openX({ x: 'MkDonation' }) }}</MkButton>
-				</div>
-			</MkFolder>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, readonly, ref, watch } from 'vue';
-import { commitHash, lang, version } from '@@/js/config.js';
-import { i18n } from '@/i18n.js';
-import { miLocalStorage } from '@/local-storage.js';
-import { confirm, popup, waiting } from '@/os.js';
-import { tmsFlaskStore } from '@/tms/flask-store.js';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-
-//#region 即時変更
-const preventLongPressContextMenu = computed(tmsFlaskStore.makeGetterSetter('preventLongPressContextMenu'));
-//#endregion
-
-const confirmDialog = async (): Promise<boolean> => {
-	const { canceled } = await confirm({
-		type: 'info',
-		text: 'Execute?',
-		okText: 'Yes',
-		cancelText: 'No',
-	});
-	return !canceled;
-};
-
-const forceFetchLocale = async (): Promise<void> => {
-	if (!(await confirmDialog())) return;
-	waiting();
-	const revision = commitHash ?? 'unknown';
-	const newLocaleVersion = `${version}+REV:${revision}`;
-	const res = await window.fetch(`/assets/locales/${lang}.${version}.json?date=${Date.now().toString()}`);
-	if (res.status === 200) {
-		const newLocale = await res.text();
-		miLocalStorage.setItem('locale', newLocale);
-		miLocalStorage.setItem('localeVersion', newLocaleVersion);
-	}
-	location.reload();
-};
-
-const openMkUpdated = async (): Promise<void> => {
-	if (!(await confirmDialog())) return;
-	const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {
-		closed: () => dispose(),
-	});
-};
-
-const openMkDonation = async (): Promise<void> => {
-	if (!(await confirmDialog())) return;
-	const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, {
-		closed: () => dispose(),
-	});
-};
-
-const edited = ref(false);
-const changed = ref(false);
-
-watch([
-], () => {
-	edited.value = true;
-	changed.value = true;
-}, { deep: true });
-
-const save = (): void => {
-	if (!changed.value) return;
-	changed.value = false;
-};
-
-defineExpose({
-	save,
-	edited: readonly(edited),
-	changed: readonly(changed),
-});
-</script>
diff --git a/packages/frontend/src/pages/tms/flags/index.vue b/packages/frontend/src/pages/tms/flags/index.vue
deleted file mode 100644
index a6dc29977647..000000000000
--- a/packages/frontend/src/pages/tms/flags/index.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<template #default>
-		<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
-			<div class="_gaps_m">
-				<TmsSoftwareVersions/>
-				<div class="_gaps_s">
-					<MkInfo>{{ i18n.ts._tms._flags.description }}</MkInfo>
-					<MkInfo warn>{{ i18n.tsx._tms._flags.warning({ name: instance.name ?? host }) }}</MkInfo>
-					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
-				</div>
-				<FormSuspense :p="ready">
-					<XMain ref="xMain"/>
-				</FormSuspense>
-				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/settings"><i class="ti ti-settings"></i> {{ i18n.ts._tms.taiymeSettings }}</MkButton></div>
-			</div>
-		</MkSpacer>
-	</template>
-	<template v-if="xMain" #footer>
-		<div v-show="xMain.edited" :class="$style.footer">
-			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
-				<MkButton primary rounded :disabled="!xMain.changed" @click="xMain.save()"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-			</MkSpacer>
-		</div>
-	</template>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, shallowRef } from 'vue';
-import { host } from '@@/js/config.js';
-import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { tmsFlaskStore } from '@/tms/flask-store.js';
-import { tmsStore } from '@/tms/store.js';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
-
-const ready = async (): Promise<void> => {
-	await tmsStore.loaded;
-	await tmsFlaskStore.loaded;
-};
-
-const XMain = defineAsyncComponent(() => import('@/pages/tms/flags/index.main.vue'));
-const xMain = shallowRef<InstanceType<typeof XMain> | null>(null);
-
-definePageMetadata(() => ({
-	title: i18n.ts._tms._flags.title,
-	icon: 'ti ti-flask',
-}));
-</script>
-
-<style lang="scss" module>
-.footer {
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
-}
-</style>
diff --git a/packages/frontend/src/pages/tms/settings/index.main.vue b/packages/frontend/src/pages/tms/settings/index.main.vue
deleted file mode 100644
index 4dd0b2d70537..000000000000
--- a/packages/frontend/src/pages/tms/settings/index.main.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<FormSection>
-		<template #label>{{ i18n.ts.appearance }}</template>
-		<div class="_gaps">
-			<MkSelect v-model="tickerPosition">
-				<template #label>{{ i18n.ts._tms._settings._tickerPosition.label }}</template>
-				<option value="default">{{ i18n.ts._tms._settings._tickerPosition.default }}</option>
-				<option value="leftVerticalBar">{{ i18n.ts._tms._settings._tickerPosition.leftVerticalBar }}</option>
-				<option value="rightVerticalBar">{{ i18n.ts._tms._settings._tickerPosition.rightVerticalBar }}</option>
-				<option value="leftWatermark">{{ i18n.ts._tms._settings._tickerPosition.leftWatermark }}</option>
-				<option value="rightWatermark">{{ i18n.ts._tms._settings._tickerPosition.rightWatermark }}</option>
-			</MkSelect>
-			<MkSelect v-model="superMenuDisplayMode">
-				<template #label>{{ i18n.ts._tms._settings._superMenuDisplayMode.label }}</template>
-				<template #caption>{{ i18n.ts._tms._settings._superMenuDisplayMode.caption }}</template>
-				<option value="default">{{ i18n.ts._tms._settings._superMenuDisplayMode.default }}</option>
-				<option value="classic">{{ i18n.ts._tms._settings._superMenuDisplayMode.classic }}</option>
-				<option value="forceList">{{ i18n.ts._tms._settings._superMenuDisplayMode.forceList }}</option>
-			</MkSelect>
-		</div>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.operations }}</template>
-		<div class="_gaps">
-			<MkSelect v-model="pullToRefreshSensitivity">
-				<template #label>{{ i18n.ts._tms._settings._pullToRefreshSensitivity.label }}</template>
-				<template #caption>{{ i18n.ts._tms._settings._pullToRefreshSensitivity.caption }}</template>
-				<option value="low">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.low }}</option>
-				<option value="middle">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.middle }}</option>
-				<option value="high">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.high }}</option>
-			</MkSelect>
-			<MkSwitch v-model="pullToRefreshAllReload">
-				<template #label>{{ i18n.ts._tms._settings._pullToRefreshAllReload.label }}</template>
-				<template #caption>{{ i18n.ts._tms._settings._pullToRefreshAllReload.caption }}</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, readonly, ref, watch } from 'vue';
-import { i18n } from '@/i18n.js';
-import { confirm } from '@/os.js';
-import { unisonReload } from '@/scripts/unison-reload.js';
-import { tmsStore } from '@/tms/store.js';
-import FormSection from '@/components/form/section.vue';
-import MkSelect from '@/components/MkSelect.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-
-//#region 即時変更
-const superMenuDisplayMode = computed(tmsStore.makeGetterSetter('superMenuDisplayMode'));
-const pullToRefreshAllReload = computed(tmsStore.makeGetterSetter('pullToRefreshAllReload'));
-//#endregion
-
-//#region 即時変更 (ダイアログ付き)
-const tickerPosition = computed({
-	get: () => tmsStore.reactiveState.tickerPosition.value,
-	set: (newValue) => {
-		tmsStore.set('tickerPosition', newValue);
-		reloadAsk();
-	},
-});
-const pullToRefreshSensitivity = computed({
-	get: () => tmsStore.reactiveState.pullToRefreshSensitivity.value,
-	set: (newValue) => {
-		tmsStore.set('pullToRefreshSensitivity', newValue);
-		reloadAsk();
-	},
-});
-//#endregion
-
-const reloadAsk = async (): Promise<void> => {
-	const { canceled } = await confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
-
-	unisonReload();
-};
-
-const edited = ref(false);
-const changed = ref(false);
-
-watch([
-], () => {
-	edited.value = true;
-	changed.value = true;
-}, { deep: true });
-
-const save = (): void => {
-	if (!changed.value) return;
-	changed.value = false;
-};
-
-defineExpose({
-	save,
-	edited: readonly(edited),
-	changed: readonly(changed),
-});
-</script>
diff --git a/packages/frontend/src/pages/tms/settings/index.vue b/packages/frontend/src/pages/tms/settings/index.vue
deleted file mode 100644
index 079d77050d23..000000000000
--- a/packages/frontend/src/pages/tms/settings/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<template #default>
-		<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
-			<div class="_gaps_m">
-				<div class="_gaps_s">
-					<MkInfo>{{ i18n.ts._tms._settings.description }}</MkInfo>
-					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
-				</div>
-				<FormSuspense :p="ready">
-					<XMain ref="xMain"/>
-				</FormSuspense>
-				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/flags"><i class="ti ti-flask"></i> {{ i18n.ts._tms.taiymeFlags }}</MkButton></div>
-			</div>
-		</MkSpacer>
-	</template>
-	<template v-if="xMain" #footer>
-		<div v-show="xMain.edited" :class="$style.footer">
-			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
-				<MkButton primary rounded :disabled="!xMain.changed" @click="xMain.save()"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-			</MkSpacer>
-		</div>
-	</template>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, shallowRef } from 'vue';
-import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { tmsFlaskStore } from '@/tms/flask-store.js';
-import { tmsStore } from '@/tms/store.js';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-
-const ready = async (): Promise<void> => {
-	await tmsStore.loaded;
-	await tmsFlaskStore.loaded;
-};
-
-const XMain = defineAsyncComponent(() => import('@/pages/tms/settings/index.main.vue'));
-const xMain = shallowRef<InstanceType<typeof XMain> | null>(null);
-
-definePageMetadata(() => ({
-	title: i18n.ts._tms._settings.title,
-	icon: 'ti ti-settings',
-}));
-</script>
-
-<style lang="scss" module>
-.footer {
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
-}
-</style>
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 31e9c6491910..d8d4392a408a 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -579,17 +579,22 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/tms/about',
 	component: page(() => import('@/pages/tms/about.vue')),
+}, {
+	path: '/tms/features',
+	component: page(() => import('@/pages/tms/features.vue')),
+	loginRequired: true,
+	hash: 'initialTab',
 }, {
 	path: '/tms/settings',
-	component: page(() => import('@/pages/tms/settings/index.vue')),
+	redirect: '/tms/features',
 	loginRequired: true,
 }, {
 	path: '/tms/flags',
-	component: page(() => import('@/pages/tms/flags/index.vue')),
+	redirect: '/tms/features#experimental',
 	loginRequired: true,
 }, {
 	path: '/settings/taiyme-services',
-	redirect: '/tms/settings',
+	redirect: '/tms/features',
 	loginRequired: true,
 }, {
 	name: 'index',
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 1b71027bf1cd..f589fcd6f914 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -157,9 +157,9 @@ export function openInstanceMenu(ev: MouseEvent) {
 		to: '/tms/about',
 	}, {
 		type: 'link',
-		text: i18n.ts._tms.taiymeSettings,
+		text: i18n.ts._tms.taiymeFeatures,
 		icon: 'ti ti-settings',
-		to: '/tms/settings',
+		to: '/tms/features',
 	});
 
 	os.popupMenu(menuItems, ev.currentTarget ?? ev.target, {