From 2cac0cfe1a46c789eea5761aa9e5f202a3f0b0c8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 13 Aug 2023 12:06:52 +0900
Subject: [PATCH] wip

---
 locales/index.d.ts                            |  1 +
 locales/ja-JP.yml                             |  1 +
 packages/frontend/src/pages/announcements.vue | 52 ++++++++++---------
 .../src/ui/_common_/announcements.vue         |  5 +-
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index ad380c0ce7..b7d670836f 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1103,6 +1103,7 @@ export interface Locale {
     "forYou": string;
     "currentAnnouncements": string;
     "pastAnnouncements": string;
+    "youHaveUnreadAnnouncements": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1a7731e483..dba4b4247a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1100,6 +1100,7 @@ icon: "アイコン"
 forYou: "あなたへ"
 currentAnnouncements: "現在のお知らせ"
 pastAnnouncements: "過去のお知らせ"
+youHaveUnreadAnnouncements: "未読のお知らせがあります。"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 1f7c28d2bf..7b61e66ddd 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -7,31 +7,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps_m">
-			<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
-				<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
-				<div :class="$style.header">
-					<span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
-					<span style="margin-right: 0.5em;">
-						<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
-						<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
-						<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
-						<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
-					</span>
-					<span>{{ announcement.title }}</span>
-				</div>
-				<div :class="$style.content">
-					<Mfm :text="announcement.text"/>
-					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-					<div style="opacity: 0.7; font-size: 85%;">
-						<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
+		<div class="_gaps">
+			<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
+			<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
+				<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
+					<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
+					<div :class="$style.header">
+						<span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
+						<span style="margin-right: 0.5em;">
+							<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+							<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+							<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
+							<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
+						</span>
+						<span>{{ announcement.title }}</span>
 					</div>
-				</div>
-				<div v-if="tab !== 'past' && $i && !announcement.isRead" :class="$style.footer">
-					<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
-				</div>
-			</section>
-		</MkPagination>
+					<div :class="$style.content">
+						<Mfm :text="announcement.text"/>
+						<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+						<div style="opacity: 0.7; font-size: 85%;">
+							<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
+						</div>
+					</div>
+					<div v-if="tab !== 'past' && $i && !announcement.isRead" :class="$style.footer">
+						<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+					</div>
+				</section>
+			</MkPagination>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -40,6 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/frontend/src/ui/_common_/announcements.vue b/packages/frontend/src/ui/_common_/announcements.vue
index 61e5f48029..cd8b4e5275 100644
--- a/packages/frontend/src/ui/_common_/announcements.vue
+++ b/packages/frontend/src/ui/_common_/announcements.vue
@@ -6,7 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<MkA
-		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item" to="/announcements"
+		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')"
+		:key="announcement.id"
+		:class="$style.item"
+		to="/announcements"
 	>
 		<span :class="$style.icon">
 			<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>