From 89e4f28d06f8efe140601beb7c6d088051c6ded0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 4 Oct 2023 20:03:52 +0900
Subject: [PATCH] enhance(frontend): tweak ui

---
 packages/frontend/src/pages/settings/index.vue   | 10 ----------
 ...nce-mute.vue => mute-block.instance-mute.vue} | 10 ----------
 .../frontend/src/pages/settings/mute-block.vue   | 16 ++++++++++++++++
 .../{word-mute.vue => mute-block.word-mute.vue}  |  9 ---------
 packages/frontend/src/router.ts                  |  8 --------
 5 files changed, 16 insertions(+), 37 deletions(-)
 rename packages/frontend/src/pages/settings/{instance-mute.vue => mute-block.instance-mute.vue} (85%)
 rename packages/frontend/src/pages/settings/{word-mute.vue => mute-block.word-mute.vue} (94%)

diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index f1bd501150..cfabbbbf65 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -139,21 +139,11 @@ const menuDef = computed(() => [{
 		text: i18n.ts.roles,
 		to: '/settings/roles',
 		active: currentPage?.route.name === 'roles',
-	}, {
-		icon: 'ti ti-planet-off',
-		text: i18n.ts.instanceMute,
-		to: '/settings/instance-mute',
-		active: currentPage?.route.name === 'instance-mute',
 	}, {
 		icon: 'ti ti-ban',
 		text: i18n.ts.muteAndBlock,
 		to: '/settings/mute-block',
 		active: currentPage?.route.name === 'mute-block',
-	}, {
-		icon: 'ti ti-message-off',
-		text: i18n.ts.wordMute,
-		to: '/settings/word-mute',
-		active: currentPage?.route.name === 'word-mute',
 	}, {
 		icon: 'ti ti-api',
 		text: 'API',
diff --git a/packages/frontend/src/pages/settings/instance-mute.vue b/packages/frontend/src/pages/settings/mute-block.instance-mute.vue
similarity index 85%
rename from packages/frontend/src/pages/settings/instance-mute.vue
rename to packages/frontend/src/pages/settings/mute-block.instance-mute.vue
index b76fd2c906..4b5080ea8f 100644
--- a/packages/frontend/src/pages/settings/instance-mute.vue
+++ b/packages/frontend/src/pages/settings/mute-block.instance-mute.vue
@@ -22,7 +22,6 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const instanceMutes = ref($i!.mutedInstances.join('\n'));
 const changed = ref(false);
@@ -46,13 +45,4 @@ async function save() {
 watch(instanceMutes, () => {
 	changed.value = true;
 });
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.instanceMute,
-	icon: 'ti ti-planet-off',
-});
 </script>
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index 12a5ffec43..c6cbd424ec 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -5,6 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
+	<MkFolder>
+		<template #icon><i class="ti ti-message-off"></i></template>
+		<template #label>{{ i18n.ts.wordMute }}</template>
+
+		<XWordMute/>
+	</MkFolder>
+
+	<MkFolder>
+		<template #icon><i class="ti ti-planet-off"></i></template>
+		<template #label>{{ i18n.ts.instanceMute }}</template>
+
+		<XInstanceMute/>
+	</MkFolder>
+
 	<MkFolder>
 		<template #icon><i class="ti ti-repeat-off"></i></template>
 		<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
@@ -106,6 +120,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { } from 'vue';
+import XInstanceMute from './mute-block.instance-mute.vue';
+import XWordMute from './mute-block.word-mute.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
diff --git a/packages/frontend/src/pages/settings/word-mute.vue b/packages/frontend/src/pages/settings/mute-block.word-mute.vue
similarity index 94%
rename from packages/frontend/src/pages/settings/word-mute.vue
rename to packages/frontend/src/pages/settings/mute-block.word-mute.vue
index 4e698698fe..25a836ea55 100644
--- a/packages/frontend/src/pages/settings/word-mute.vue
+++ b/packages/frontend/src/pages/settings/mute-block.word-mute.vue
@@ -91,13 +91,4 @@ async function save() {
 
 	changed.value = false;
 }
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.wordMute,
-	icon: 'ti ti-message-off',
-});
 </script>
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 20314711a4..294f66aaaf 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -126,18 +126,10 @@ export const routes = [{
 		path: '/import-export',
 		name: 'import-export',
 		component: page(() => import('./pages/settings/import-export.vue')),
-	}, {
-		path: '/instance-mute',
-		name: 'instance-mute',
-		component: page(() => import('./pages/settings/instance-mute.vue')),
 	}, {
 		path: '/mute-block',
 		name: 'mute-block',
 		component: page(() => import('./pages/settings/mute-block.vue')),
-	}, {
-		path: '/word-mute',
-		name: 'word-mute',
-		component: page(() => import('./pages/settings/word-mute.vue')),
 	}, {
 		path: '/api',
 		name: 'api',