feat: 未読の通知のみ表示する機能

3 files changed, 36 insertions, 6 deletions

diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index e91f18a693..8be1e191b9 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -48,6 +48,11 @@ export default defineComponent({
 			required: false,
 			default: null,
 		},
+		unreadOnly: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 
 	data() {
@@ -58,6 +63,7 @@ export default defineComponent({
 				limit: 10,
 				params: () => ({
 					includeTypes: this.allIncludeTypes || undefined,
+					unreadOnly: this.unreadOnly,
 				})
 			},
 		};
@@ -76,6 +82,11 @@ export default defineComponent({
 			},
 			deep: true
 		},
+		unreadOnly: {
+			handler() {
+				this.reload();
+			},
+		},
 		// TODO: vue/vuexのバグか仕様かは不明なものの、プロフィール更新するなどして $i が更新されると、
 		// mutingNotificationTypes に変化が無くてもこのハンドラーが呼び出され無駄なリロードが発生するのを直す
 		'$i.mutingNotificationTypes': {
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 6cbcc9b8e5..9728b87bf1 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -2,13 +2,13 @@
 <div>
 	<MkHeader :info="header"/>
 	<div class="clupoqwt" v-size="{ min: [800] }">
-		<XNotifications class="notifications" @before="before" @after="after" page/>
+		<XNotifications class="notifications" @before="before" @after="after" :unread-only="tab === 'unread'"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import Progress from '@client/scripts/loading';
 import XNotifications from '@client/components/notifications.vue';
 import * as os from '@client/os';
@@ -26,7 +26,8 @@ export default defineComponent({
 				icon: 'fas fa-bell',
 				bg: 'var(--bg)',
 			},
-			header: {
+			tab: 'all',
+			header: computed(() => ({
 				title: this.$ts.notifications,
 				icon: 'fas fa-bell',
 				bg: 'var(--bg)',
@@ -35,9 +36,18 @@ export default defineComponent({
 					icon: 'fas fa-check',
 					handler: () => {
 						os.apiWithDialog('notifications/mark-all-as-read');
-					}
-				}]
-			},
+					},
+				}],
+				tabs: [{
+					active: this.tab === 'all',
+					title: this.$ts.all,
+					onClick: () => { this.tab = 'all'; },
+				}, {
+					active: this.tab === 'unread',
+					title: this.$ts.unread,
+					onClick: () => { this.tab = 'unread'; },
+				},]
+			})),
 		};
 	},
 
diff --git a/src/server/api/endpoints/i/notifications.ts b/src/server/api/endpoints/i/notifications.ts
index 3c265a10c1..0c5586054f 100644
--- a/src/server/api/endpoints/i/notifications.ts
+++ b/src/server/api/endpoints/i/notifications.ts
@@ -33,6 +33,11 @@ export const meta = {
 			default: false
 		},
 
+		unreadOnly: {
+			validator: $.optional.bool,
+			default: false
+		},
+
 		markAsRead: {
 			validator: $.optional.bool,
 			default: true
@@ -105,6 +110,10 @@ export default define(meta, async (ps, user) => {
 		query.andWhere(`notification.type NOT IN (:...excludeTypes)`, { excludeTypes: ps.excludeTypes });
 	}
 
+	if (ps.unreadOnly) {
+		query.andWhere(`notification.isRead = false`);
+	}
+
 	const notifications = await query.take(ps.limit!).getMany();
 
 	// Mark all as read