良い感じに

6 files changed, 64 insertions, 81 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 33216e459d..2f2217f8d2 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import muteAndBlock from './mute-and-block.vue';
 import error from './error.vue';
 import apiSettings from './api-settings.vue';
 import driveSettings from './drive-settings.vue';
@@ -50,6 +51,7 @@ import uiInfo from './ui/info.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-mute-and-block', muteAndBlock);
 Vue.component('mk-error', error);
 Vue.component('mk-api-settings', apiSettings);
 Vue.component('mk-drive-settings', driveSettings);
diff --git a/src/client/app/common/views/components/mute-and-block.vue b/src/client/app/common/views/components/mute-and-block.vue
new file mode 100644
index 0000000000..b244f975bb
--- /dev/null
+++ b/src/client/app/common/views/components/mute-and-block.vue
@@ -0,0 +1,56 @@
+<template>
+<ui-card>
+	<div slot="title">%fa:ban% %i18n:@mute-and-block%</div>
+
+	<section>
+		<header>%i18n:@mute%</header>
+		<ui-info v-if="!muteFetching && mute.length == 0">
+			<p>%i18n:@no-muted-users%</p>
+		</ui-info>
+		<div class="users" v-if="mute.length != 0">
+			<div v-for="user in mute" :key="user.id">
+				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
+			</div>
+		</div>
+	</section>
+
+	<section>
+		<header>%i18n:@block%</header>
+		<ui-info v-if="!blockFetching && block.length == 0">
+			<p>%i18n:@no-blocked-users%</p>
+		</ui-info>
+		<div class="users" v-if="block.length != 0">
+			<div v-for="user in block" :key="user.id">
+				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
+			</div>
+		</div>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			muteFetching: true,
+			blockFetching: true,
+			mute: [],
+			block: []
+		};
+	},
+
+	mounted() {
+		(this as any).api('mute/list').then(mute => {
+			this.mute = mute.map(x => x.mutee);
+			this.muteFetching = false;
+		});
+
+		(this as any).api('blocking/list').then(blocking => {
+			this.block = blocking.map(x => x.blockee);
+			this.blockFetching = false;
+		});
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/settings.blocking.vue b/src/client/app/desktop/views/components/settings.blocking.vue
deleted file mode 100644
index 43e4bf9209..0000000000
--- a/src/client/app/desktop/views/components/settings.blocking.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<div>
-	<div class="none ui info" v-if="!fetching && users.length == 0">
-		<p>%fa:info-circle%%i18n:@no-users%</p>
-	</div>
-	<div class="users" v-if="users.length != 0">
-		<div v-for="user in users" :key="user.id">
-			<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			users: []
-		};
-	},
-	mounted() {
-		(this as any).api('blocking/list').then(x => {
-			this.users = x.users;
-			this.fetching = false;
-		});
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
deleted file mode 100644
index 792afa923f..0000000000
--- a/src/client/app/desktop/views/components/settings.mute.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<div>
-	<div class="none ui info" v-if="!fetching && users.length == 0">
-		<p>%fa:info-circle%%i18n:@no-users%</p>
-	</div>
-	<div class="users" v-if="users.length != 0">
-		<div v-for="user in users" :key="user.id">
-			<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			users: []
-		};
-	},
-	mounted() {
-		(this as any).api('mute/list').then(x => {
-			this.users = x.users;
-			this.fetching = false;
-		});
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index e77320bef3..74cedf9ecc 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -7,8 +7,7 @@
 		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
 		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:common.drive%</p>
 		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
-		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
-		<p :class="{ active: page == 'blocking' }" @mousedown="page = 'blocking'">%fa:ban .fw%%i18n:@blocking%</p>
+		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'">%fa:ban .fw%%i18n:@mute-and-block%</p>
 		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
 		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:@security%</p>
 		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
@@ -201,19 +200,9 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="mute" v-show="page == 'mute'">
-			<div slot="title">%fa:ban% %i18n:@mute%</div>
-			<section>
-				<x-mute/>
-			</section>
-		</ui-card>
-
-		<ui-card class="blocking" v-show="page == 'blocking'">
-			<div slot="title">%fa:ban% %i18n:@blocking%</div>
-			<section>
-				<x-blocking/>
-			</section>
-		</ui-card>
+		<div class="muteAndBlock" v-show="page == 'muteAndBlock'">
+			<mk-mute-and-block/>
+		</div>
 
 		<ui-card class="apps" v-show="page == 'apps'">
 			<div slot="title">%fa:puzzle-piece% %i18n:@apps%</div>
@@ -297,8 +286,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XMute from './settings.mute.vue';
-import XBlocking from './settings.blocking.vue';
 import XPassword from './settings.password.vue';
 import X2fa from './settings.2fa.vue';
 import XApps from './settings.apps.vue';
@@ -309,8 +296,6 @@ import checkForUpdate from '../../../common/scripts/check-for-update';
 
 export default Vue.extend({
 	components: {
-		XMute,
-		XBlocking,
 		XPassword,
 		X2fa,
 		XApps,
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index b96ed59311..a77f5d4c3a 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -85,6 +85,8 @@
 
 			<mk-drive-settings/>
 
+			<mk-mute-and-block/>
+
 			<ui-card>
 				<div slot="title">%fa:volume-up% %i18n:@sound%</div>