wip

locales/index.d.ts

@@ -1103,6 +1103,7 @@ export interface Locale {
     "forYou": string;
     "currentAnnouncements": string;
     "pastAnnouncements": string;
+    "youHaveUnreadAnnouncements": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;

locales/ja-JP.yml

@@ -1100,6 +1100,7 @@ icon: "アイコン"
 forYou: "あなたへ"
 currentAnnouncements: "現在のお知らせ"
 pastAnnouncements: "過去のお知らせ"
+youHaveUnreadAnnouncements: "未読のお知らせがあります。"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"

packages/frontend/src/pages/announcements.vue

@@ -7,7 +7,9 @@ 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">
+		<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">
@@ -32,6 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</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';

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>