通知のフィルタ (#5224)

* ✌️

* Deck

src/client/app/common/views/deck/deck.notifications-column.vue

@@ -1,8 +1,8 @@
 <template>
-<x-column :name="name" :column="column" :is-stacked="isStacked">
+<x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
 	<template #header><fa :icon="['far', 'bell']"/>{{ name }}</template>
 
-	<x-notifications/>
+	<x-notifications :type="column.notificationType === 'all' ? null : column.notificationType"/>
 </x-column>
 </template>
 
@@ -30,11 +30,46 @@ export default Vue.extend({
 		}
 	},
 
+	data() {
+		return {
+			menu: null,
+		}
+	},
+
 	computed: {
 		name(): string {
 			if (this.column.name) return this.column.name;
 			return this.$t('@deck.notifications');
 		}
 	},
+
+	created() {
+		if (this.column.notificationType == null) {
+			this.column.notificationType = 'all';
+			this.$store.commit('updateDeckColumn', this.column);
+		}
+
+		this.menu = [{
+			icon: 'cog',
+			text: this.$t('@.notification-type'),
+			action: () => {
+				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.column.notificationType,
+					},
+					showCancelButton: true
+				}).then(({ canceled, result: type }) => {
+					if (canceled) return;
+					this.column.notificationType = type;
+					this.$store.commit('updateDeckColumn', this.column);
+				});
+			}
+		}];
+	},
 });
 </script>