Merge branch 'develop' into vue3

src/client/components/deck/notifications-column.vue

@@ -2,7 +2,7 @@
 <x-column :column="column" :is-stacked="isStacked" :menu="menu">
 	<template #header><fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notifications/>
+	<x-notifications :include-types="column.includingTypes"/>
 </x-column>
 </template>
 
@@ -38,28 +38,14 @@ export default defineComponent({
 	},
 
 	created() {
-		if (this.column.notificationType == null) {
-			this.column.notificationType = 'all';
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		}
-
 		this.menu = [{
 			icon: faCog,
-			text: this.$t('notificationType'),
-			action: () => {
-				this.$root.dialog({
-					title: this.$t('notificationType'),
-					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;
+			text: this.$t('notificationSetting'),
+			action: async () => {
+				this.$root.new(await import('../notification-setting-window.vue').then(m => m.default), {
+					includingTypes: this.column.includingTypes,
+				}).$on('ok', async ({ includingTypes }) => {
+					this.$set(this.column, 'includingTypes', includingTypes);
 					this.$store.commit('deviceUser/updateDeckColumn', this.column);
 				});
 			}

src/client/components/notification-setting-window.vue

@@ -0,0 +1,98 @@
+<template>
+<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()">
+	<template #header>{{ $t('notificationSetting') }}</template>
+	<div class="vv94n3oa">
+		<div v-if="showGlobalToggle">
+			<mk-switch v-model="useGlobalSetting">
+				{{ $t('useGlobalSetting') }}
+				<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
+			</mk-switch>
+		</div>
+		<div v-if="!useGlobalSetting">
+			<mk-info>{{ $t('notificationSettingDesc') }}</mk-info>
+			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
+			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
+			<mk-switch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</mk-switch>
+		</div>
+	</div>
+</x-window>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import XWindow from './window.vue';
+import MkSwitch from './ui/switch.vue';
+import MkInfo from './ui/info.vue';
+import MkButton from './ui/button.vue';
+import { notificationTypes } from '../../types';
+
+export default Vue.extend({
+	components: {
+		XWindow,
+		MkSwitch,
+		MkInfo,
+		MkButton
+	},
+
+	props: {
+		includingTypes: {
+			// TODO: これで型に合わないものを弾いてくれるのかどうか要調査
+			type: Array as PropType<typeof notificationTypes[number][]>,
+			required: false,
+			default: null,
+		},
+		showGlobalToggle: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
+	},
+
+	data() {
+		return {
+			typesMap: {} as Record<typeof notificationTypes[number], boolean>,
+			useGlobalSetting: false,
+			notificationTypes,
+		};
+	},
+
+	created() {
+		this.useGlobalSetting = this.includingTypes === null && this.showGlobalToggle;
+
+		for (const type of this.notificationTypes) {
+			Vue.set(this.typesMap, type, this.includingTypes === null || this.includingTypes.includes(type));
+		}
+	},
+
+	methods: {
+		ok() {
+			const includingTypes = this.useGlobalSetting ? null : (Object.keys(this.typesMap) as typeof notificationTypes[number][])
+				.filter(type => this.typesMap[type]);
+
+			this.$emit('ok', { includingTypes });
+			this.$refs.window.close();
+		},
+
+		disableAll() {
+			for (const type in this.typesMap) {
+				this.typesMap[type as typeof notificationTypes[number]] = false;
+			}
+		},
+
+		enableAll() {
+			for (const type in this.typesMap) {
+				this.typesMap[type as typeof notificationTypes[number]] = true;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.vv94n3oa {
+	> div {
+		border-top: solid 1px var(--divider);
+		padding: 24px;
+	}
+}
+</style>

src/client/components/notifications.vue

@@ -17,11 +17,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import paging from '../scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
+import { notificationTypes } from '../../types';
 
 export default defineComponent({
 	components: {
@@ -35,9 +36,10 @@ export default defineComponent({
 	],
 
 	props: {
-		type: {
-			type: String,
-			required: false
+		includeTypes: {
+			type: Array as PropType<typeof notificationTypes[number][]>,
+			required: false,
+			default: null,
 		},
 	},
 
@@ -48,15 +50,26 @@ export default defineComponent({
 				endpoint: 'i/notifications',
 				limit: 10,
 				params: () => ({
-					includeTypes: this.type ? [this.type] : undefined
+					includeTypes: this.allIncludeTypes || undefined,
 				})
 			},
 		};
 	},
 
+	computed: {
+		allIncludeTypes() {
+			return this.includeTypes ?? this.$store.state.i.includingNotificationTypes;
+		}
+	},
+
 	watch: {
-		type() {
+		includeTypes() {
 			this.reload();
+		},
+		'$store.state.i.includingNotificationTypes'() {
+			if (this.includeTypes === null) {
+				this.reload();
+			}
 		}
 	},
 
@@ -71,16 +84,20 @@ export default defineComponent({
 
 	methods: {
 		onNotification(notification) {
-			if (document.visibilityState === 'visible') {
+			// 
+			const isMuted = !!this.allIncludeTypes && !this.allIncludeTypes.includes(notification.type);
+			if (isMuted || document.visibilityState === 'visible') {
 				this.$root.stream.send('readNotification', {
 					id: notification.id
 				});
 			}
 
-			this.prepend({
-				...notification,
-				isRead: document.visibilityState === 'visible'
-			});
+			if (!isMuted) {
+				this.prepend({
+					...notification,
+					isRead: document.visibilityState === 'visible'
+				});
+			}
 		},
 
 		noteUpdated(oldValue, newValue) {

src/client/components/ui/select.vue

@@ -13,7 +13,11 @@
 		>
 			<slot></slot>
 		</select>
-		<div class="suffix"><slot name="suffix"></slot></div>
+		<div class="suffix">
+			<slot name="suffix">
+				<fa :icon="faChevronDown"/>
+			</slot>
+		</div>
 	</div>
 	<div class="text"><slot name="text"></slot></div>
 </div>
@@ -21,6 +25,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -43,7 +48,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			focused: false
+			focused: false,
+			faChevronDown,
 		};
 	},
 	computed: {
@@ -157,6 +163,8 @@ export default defineComponent({
 			border-radius: 0;
 			outline: none;
 			box-shadow: none;
+			appearance: none;
+			-webkit-appearance: none;
 			color: var(--fg);
 
 			option,
@@ -172,7 +180,7 @@ export default defineComponent({
 			justify-self: center;
 			font-size: 1em;
 			line-height: 32px;
-			color: rgba(#000, 0.54);
+			color: var(--inputLabel);
 			pointer-events: none;
 
 			&:empty {