From 5dd475f47233d5c11e0064e2a050f791a60db5c3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 13 Aug 2023 15:06:32 +0900
Subject: [PATCH] wip

---
 locales/index.d.ts                            |  2 ++
 locales/ja-JP.yml                             |  2 ++
 .../src/components/MkAnnouncementDialog.vue   | 11 ++++++++-
 packages/frontend/src/pages/announcements.vue | 23 +++++++++++++------
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index e97f1aa286..4984dd18ec 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1111,6 +1111,8 @@ export interface Locale {
         "needConfirmationToReadDescription": string;
         "end": string;
         "tooManyActiveAnnouncementDescription": string;
+        "readConfirmTitle": string;
+        "readConfirmText": string;
     };
     "_initialAccountSetting": {
         "accountCreated": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index dba8ceedb3..9089cb1d3b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1109,6 +1109,8 @@ _announcement:
   needConfirmationToReadDescription: "有効にすると、このお知らせを既読にする際に確認ダイアログが表示されます。また、一括既読操作の対象になりません。"
   end: "お知らせを終了"
   tooManyActiveAnnouncementDescription: "アクティブなお知らせが多いため、UXが低下する可能性があります。終了したお知らせはアーカイブすることを検討してください。"
+  readConfirmTitle: "既読にしますか？"
+  readConfirmText: "「{title}」の内容を読み、既読にします。"
 
 _initialAccountSetting:
   accountCreated: "アカウントの作成が完了しました！"
diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue
index cd5a1a537f..8e11053813 100644
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/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({
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 7b61e66ddd..9937eb4cbf 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/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 (announcement.needConfirmationToRead) {
+		const confirm = await os.confirm({
+			type: 'question',
+			title: i18n.ts._announcement.readConfirmTitle,
+			text: i18n.t('_announcement.readConfirmText', { title: announcement.title }),
+		});
+		if (confirm.canceled) return;
+	}
+
 	if (!paginationEl.value) return;
-	paginationEl.value.updateItem(id, announcement => {
-		announcement.isRead = true;
-		return announcement;
+	paginationEl.value.updateItem(announcement.id, a => {
+		a.isRead = true;
+		return a;
 	});
-	os.api('i/read-announcement', { announcementId: id });
+	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),
 	});
 }