通知のフィルタ (#5224)

* ✌️

* Deck

src/client/app/desktop/views/components/notifications.vue

@@ -153,6 +153,13 @@ export default Vue.extend({
 		paging({}),
 	],
 
+	props: {
+		type: {
+			type: String,
+			required: false
+		}
+	},
+
 	data() {
 		return {
 			connection: null,
@@ -160,6 +167,9 @@ export default Vue.extend({
 			pagination: {
 				endpoint: 'i/notifications',
 				limit: 10,
+				params: () => ({
+					includeTypes: this.type ? [this.type] : undefined
+				})
 			}
 		};
 	},
@@ -176,6 +186,12 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		type() {
+			this.reload();
+		}
+	},
+
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);

src/client/app/desktop/views/widgets/notifications.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="mkw-notifications">
 	<ui-container :show-header="!props.compact">
-		<template #header><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template>
-		<!-- <button #func :title="$t('title')" @click="settings"><fa icon="cog"/></button> -->
+		<template #header><fa :icon="['far', 'bell']"/>{{ props.type === 'all' ? $t('title') : $t('@.notification-types.' + props.type) }}</template>
+		<template #func><button :title="$t('@.notification-type')" @click="settings"><fa icon="cog"/></button></template>
 
-		<mk-notifications :class="$style.notifications"/>
+		<mk-notifications :class="$style.notifications" :type="props.type === 'all' ? null : props.type"/>
 	</ui-container>
 </div>
 </template>
@@ -16,13 +16,28 @@ import i18n from '../../../i18n';
 export default define({
 	name: 'notifications',
 	props: () => ({
-		compact: false
+		compact: false,
+		type: 'all'
 	})
 }).extend({
 	i18n: i18n('desktop/views/widgets/notifications.vue'),
 	methods: {
 		settings() {
-			alert('not implemented yet');
+			this.$root.dialog({
+				title: this.$t('@.notification-type'),
+				type: null,
+				select: {
+					items: ['all', 'follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest'].map(x => ({
+						value: x, text: this.$t('@.notification-types.' + x)
+					}))
+					default: this.props.type,
+				},
+				showCancelButton: true
+			}).then(({ canceled, result: type }) => {
+				if (canceled) return;
+				this.props.type = type;
+				this.save();
+			});
 		},
 		func() {
 			this.props.compact = !this.props.compact;