Navigate to /announcements if there are more than three unreads

locales/en-US.yml

@@ -1116,6 +1116,7 @@ enableServerMachineStats: "Enable server hardware statistics"
 enableIdenticonGeneration: "Enable Identicon generation"
 showPopup: "Notify users about this announcement with a popup"
 isGoodNews: "This is a good news"
+youHaveUnreadAnnouncements: "You have unread announcements"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -982,6 +982,7 @@ enableServerMachineStats: "サーバーのマシン情報を公開する"
 enableIdenticonGeneration: "ユーザーごとのIdenticon生成を有効にする"
 showPopup: "ポップアップを表示してユーザーに知らせる"
 isGoodNews: "これは良いニュースです"
+youHaveUnreadAnnouncements: "未読のお知らせがあります"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

packages/client/src/components/MkManyAnnouncements.vue

@@ -0,0 +1,67 @@
+<template>
+	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+		<div :class="$style.root">
+			<p :class="$style.title">
+				{{ i18n.ts.youHaveUnreadAnnouncements }}
+			</p>
+			<MkButton
+				:class="$style.gotIt"
+				primary
+				full
+				@click="checkAnnouncements()"
+				>{{ i18n.ts.gotIt }}</MkButton
+			>
+		</div>
+	</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import { version } from "@/config";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+const checkAnnouncements = () => {
+	modal.value.close();
+	location.href = "/announcements";
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+}
+
+.version {
+	margin: 1em 0;
+}
+
+.image {
+	max-width: 500px;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+
+.releaseNotes {
+	> img {
+		border-radius: 10px;
+	}
+}
+</style>

packages/client/src/init.ts

@@ -272,14 +272,24 @@ function checkForSplash() {
 		}
 	}
 
-	if ($i) {
+	if (
+		$i &&
+		!["/announcements", "/announcements/"].includes(window.location.pathname)
+	) {
 		api("announcements", { withUnreads: true, limit: 10 })
 			.then((announcements) => {
 				const unreadAnnouncements = announcements.filter((item) => {
 					return !item.isRead;
 				});
 				if (unreadAnnouncements.length > 3) {
-					// TODO: navigate to the announcements page when there are too many unreads
+					popup(
+						defineAsyncComponent(
+							() => import("@/components/MkManyAnnouncements.vue"),
+						),
+						{},
+						{},
+						"closed",
+					);
 				} else {
 					unreadAnnouncements.forEach((item) => {
 						if (item.showPopup)