enhance(client): ミュートされたノート数を表示するようにしたり

5 files changed, 16 insertions, 11 deletions

diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index d5317db7f9..f9c2d9a43a 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -64,7 +64,7 @@
 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
-	<div class="desc"><slot name="desc"></slot></div>
+	<div class="desc _caption"><slot name="desc"></slot></div>
 </div>
 </template>
 
@@ -401,13 +401,11 @@ export default Vue.extend({
 
 	> .save {
 		margin: 6px 0 0 0;
-		font-size: 13px;
+		font-size: 0.8em;
 	}
 
 	> .desc {
 		margin: 6px 0 0 0;
-		font-size: 13px;
-		opacity: 0.7;
 
 		&:empty {
 			display: none;
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index 55f76553a7..d42560e13a 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -196,7 +196,7 @@ export default Vue.extend({
 
 	> .text {
 		margin: 6px 0;
-		font-size: 13px;
+		font-size: 0.8em;
 
 		&:empty {
 			display: none;
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index a42813ee64..fba9fc9d78 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -14,7 +14,7 @@
 		></textarea>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
-	<div class="desc"><slot name="desc"></slot></div>
+	<div class="desc _caption"><slot name="desc"></slot></div>
 </div>
 </template>
 
@@ -163,13 +163,11 @@ export default Vue.extend({
 
 	> .save {
 		margin: 6px 0 0 0;
-		font-size: 13px;
+		font-size: 0.8em;
 	}
 
 	> .desc {
 		margin: 6px 0 0 0;
-		font-size: 13px;
-		opacity: 0.7;
 
 		&:empty {
 			display: none;
diff --git a/src/client/pages/my-settings/word-mute.vue b/src/client/pages/my-settings/word-mute.vue
index 6b2a372f0b..540a819bc0 100644
--- a/src/client/pages/my-settings/word-mute.vue
+++ b/src/client/pages/my-settings/word-mute.vue
@@ -13,10 +13,11 @@
 	</div>
 	<div class="_content" v-show="tab === 'hard'">
 		<mk-info>{{ $t('_wordMute.hardDescription') }}</mk-info>
-		<mk-textarea v-model="hardMutedWords">
+		<mk-textarea v-model="hardMutedWords" style="margin-bottom: 16px;">
 			<span>{{ $t('_wordMute.muteWords') }}</span>
 			<template #desc>{{ $t('_wordMute.muteWordsDescription') }}<br>{{ $t('_wordMute.muteWordsDescription2') }}</template>
 		</mk-textarea>
+		<div v-if="hardWordMutedNotesCount != null" class="_caption">{{ $t('_wordMute.mutedNotesCount', { count: hardWordMutedNotesCount }) }}</div>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save()" primary inline :disabled="!changed"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -45,6 +46,7 @@ export default Vue.extend({
 			tab: 'soft',
 			softMutedWords: '',
 			hardMutedWords: '',
+			hardWordMutedNotesCount: null,
 			changed: false,
 			faCommentSlash, faSave,
 		}
@@ -59,9 +61,11 @@ export default Vue.extend({
 		},
 	},
 
-	created() {
+	async created() {
 		this.softMutedWords = this.$store.state.settings.mutedWords.map(x => x.join(' ')).join('\n');
 		this.hardMutedWords = this.$store.state.i.mutedWords.map(x => x.join(' ')).join('\n');
+
+		this.hardWordMutedNotesCount = (await this.$root.api('i/get-word-muted-notes-count', {})).count;
 	},
 
 	methods: {
diff --git a/src/client/style.scss b/src/client/style.scss
index ab0dcf6220..430e056516 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -413,6 +413,11 @@ hr {
 	color: var(--link);
 }
 
+._caption {
+	font-size: 0.8em;
+	opacity: 0.7;
+}
+
 .zoom-enter-active, .zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }