From 8f3c0f480beb70af8051ed7bf36c17d1434d2936 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Sat, 8 Jul 2023 21:02:11 +0000
Subject: [PATCH] Navigate to /announcements if there are more than three
 unreads

---
 locales/en-US.yml                             |  1 +
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkManyAnnouncements.vue    | 67 +++++++++++++++++++
 packages/client/src/init.ts                   | 14 +++-
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/MkManyAnnouncements.vue

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 10a9fca3b..8844cf9be 100644
--- a/locales/en-US.yml
+++ b/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
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1d23fc8cf..873eed1cf 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -982,6 +982,7 @@ enableServerMachineStats: "サーバーのマシン情報を公開する"
 enableIdenticonGeneration: "ユーザーごとのIdenticon生成を有効にする"
 showPopup: "ポップアップを表示してユーザーに知らせる"
 isGoodNews: "これは良いニュースです"
+youHaveUnreadAnnouncements: "未読のお知らせがあります"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/components/MkManyAnnouncements.vue b/packages/client/src/components/MkManyAnnouncements.vue
new file mode 100644
index 000000000..30cdcf99e
--- /dev/null
+++ b/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>
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index ff4dee309..2b99dd4d5 100644
--- a/packages/client/src/init.ts
+++ b/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)