wip

locales/index.d.ts

@@ -1111,6 +1111,8 @@ export interface Locale {
         "needConfirmationToReadDescription": string;
         "end": string;
         "tooManyActiveAnnouncementDescription": string;
+        "readConfirmTitle": string;
+        "readConfirmText": string;
     };
     "_initialAccountSetting": {
         "accountCreated": string;

locales/ja-JP.yml

@@ -1109,6 +1109,8 @@ _announcement:
   needConfirmationToReadDescription: "有効にすると、このお知らせを既読にする際に確認ダイアログが表示されます。また、一括既読操作の対象になりません。"
   end: "お知らせを終了"
   tooManyActiveAnnouncementDescription: "アクティブなお知らせが多いため、UXが低下する可能性があります。終了したお知らせはアーカイブすることを検討してください。"
+  readConfirmTitle: "既読にしますか？"
+  readConfirmText: "「{title}」の内容を読み、既読にします。"
 
 _initialAccountSetting:
   accountCreated: "アカウントの作成が完了しました！"

packages/frontend/src/components/MkAnnouncementDialog.vue

@@ -38,7 +38,16 @@ const props = withDefaults(defineProps<{
 const rootEl = shallowRef<HTMLDivElement>();
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
-function ok() {
+async function ok() {
+	if (props.announcement.needConfirmationToRead) {
+		const confirm = await os.confirm({
+			type: 'question',
+			title: i18n.ts._announcement.readConfirmTitle,
+			text: i18n.t('_announcement.readConfirmText', { title: props.announcement.title }),
+		});
+		if (confirm.canceled) return;
+	}
+
 	modal.value.close();
 	os.api('i/read-announcement', { announcementId: props.announcement.id });
 	updateAccount({

packages/frontend/src/pages/announcements.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</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>
+						<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
 					</div>
 				</section>
 			</MkPagination>
@@ -69,15 +69,24 @@ const paginationEl = ref<InstanceType<typeof MkPagination>>();
 
 const tab = ref('current');
 
-function read(id: string) {
+async function read(announcement) {
-	if (!paginationEl.value) return;
+	if (announcement.needConfirmationToRead) {
-	paginationEl.value.updateItem(id, announcement => {
+		const confirm = await os.confirm({
-		announcement.isRead = true;
+			type: 'question',
-		return announcement;
+			title: i18n.ts._announcement.readConfirmTitle,
+			text: i18n.t('_announcement.readConfirmText', { title: announcement.title }),
 		});
-	os.api('i/read-announcement', { announcementId: id });
+		if (confirm.canceled) return;
+	}
+
+	if (!paginationEl.value) return;
+	paginationEl.value.updateItem(announcement.id, a => {
+		a.isRead = true;
+		return a;
+	});
+	os.api('i/read-announcement', { announcementId: announcement.id });
 	updateAccount({
-		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== id),
+		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
 	});
 }