From 10ae0b329add2930ad12d1aca36c3a357606f531 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 3 Oct 2023 18:33:22 +0900
Subject: [PATCH] enhance(frontend): tweak ui

---
 .../src/pages/settings/mute-block.vue         | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index 37d3d1773..12a5ffec4 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -5,13 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<MkTab v-model="tab">
-		<option value="renoteMute">{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</option>
-		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
-		<option value="block">{{ i18n.ts.blockedUsers }}</option>
-	</MkTab>
+	<MkFolder>
+		<template #icon><i class="ti ti-repeat-off"></i></template>
+		<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
 
-	<div v-if="tab === 'renoteMute'">
 		<MkPagination :pagination="renoteMutingPagination">
 			<template #empty>
 				<div class="_fullinfo">
@@ -37,9 +34,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</template>
 		</MkPagination>
-	</div>
+	</MkFolder>
+
+	<MkFolder>
+		<template #icon><i class="ti ti-eye-off"></i></template>
+		<template #label>{{ i18n.ts.mutedUsers }}</template>
 
-	<div v-else-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination">
 			<template #empty>
 				<div class="_fullinfo">
@@ -67,9 +67,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</template>
 		</MkPagination>
-	</div>
+	</MkFolder>
+
+	<MkFolder>
+		<template #icon><i class="ti ti-ban"></i></template>
+		<template #label>{{ i18n.ts.blockedUsers }}</template>
 
-	<div v-else-if="tab === 'block'">
 		<MkPagination :pagination="blockingPagination">
 			<template #empty>
 				<div class="_fullinfo">
@@ -97,24 +100,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</template>
 		</MkPagination>
-	</div>
+	</MkFolder>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormLink from '@/components/form/link.vue';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import * as os from '@/os.js';
 import { infoImageUrl } from '@/instance.js';
-
-let tab = $ref('renoteMute');
+import MkFolder from '@/components/MkFolder.vue';
 
 const renoteMutingPagination = {
 	endpoint: 'renote-mute/list' as const,