feat(announcement): お知らせの既読処理にチュートリアル受講を要求できるように (MisskeyIO#753)

packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts

@@ -46,6 +46,7 @@ export const Default = {
 			imageUrl: null,
 			display: 'dialog',
 			needConfirmationToRead: false,
+			needEnrollmentTutorialToRead: false,
 			silence: false,
 			forYou: true,
 		},

packages/frontend/src/components/MkAnnouncementDialog.vue

@@ -19,13 +19,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<Mfm :text="announcement.text"/>
 			<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 		</div>
-		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}<span v-if="secVisible"> ({{ sec }})</span></MkButton>
+		<MkButton :class="$style.gotIt" primary gradate full :disabled="gotItDisabled" @click="gotIt">
+			{{ !announcement.needEnrollmentTutorialToRead ? i18n.ts.gotIt : i18n.ts._initialAccountSetting.startTutorial }}
+			<span v-if="secVisible"> ({{ sec }})</span>
+		</MkButton>
 	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, shallowRef } from 'vue';
+import { defineAsyncComponent, onMounted, ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
@@ -46,6 +49,18 @@ const secVisible = ref(true);
 const sec = ref(props.announcement.closeDuration);
 
 async function gotIt(): Promise<void> {
+	if (props.announcement.needEnrollmentTutorialToRead) {
+		modal.value?.close();
+		const tutorialCompleted = await (new Promise<boolean>(resolve => {
+			os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {
+				done: () => {
+					resolve(true);
+				},
+			}, 'closed');
+		}));
+		if (!tutorialCompleted) return;
+	}
+
 	if (props.announcement.needConfirmationToRead) {
 		const confirm = await os.confirm({
 			type: 'question',

packages/frontend/src/components/MkTutorialDialog.vue

@@ -167,6 +167,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
+	(ev: 'done'): void;
 	(ev: 'closed'): void;
 }>();
 
@@ -179,6 +180,7 @@ watch(page, (to) => {
 	// チュートリアルの枚数を増やしたら必ず変更すること！！
 	if (to === 6) {
 		claimAchievement('tutorialCompleted');
+		emit('done');
 	}
 });
 

packages/frontend/src/components/MkUserAnnouncementEditDialog.vue

@@ -42,6 +42,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					{{ i18n.ts._announcement.needConfirmationToRead }}
 					<template #caption>{{ i18n.ts._announcement.needConfirmationToReadDescription }}</template>
 				</MkSwitch>
+				<MkSwitch v-model="needEnrollmentTutorialToRead">
+					{{ i18n.ts._announcement.needEnrollmentTutorialToRead }}
+					<template #caption>{{ i18n.ts._announcement.needEnrollmentTutorialToReadDescription }}</template>
+				</MkSwitch>
 				<MkInput v-model="closeDuration" type="number">
 					<template #label>{{ i18n.ts.dialogCloseDuration }}</template>
 					<template #suffix>{{ i18n.ts._time.second }}</template>
@@ -90,6 +94,7 @@ const text = ref<string>(props.announcement ? props.announcement.text : '');
 const icon = ref<string>(props.announcement ? props.announcement.icon : 'info');
 const display = ref<string>(props.announcement ? props.announcement.display : 'dialog');
 const needConfirmationToRead = ref(props.announcement ? props.announcement.needConfirmationToRead : false);
+const needEnrollmentTutorialToRead = ref(props.announcement ? props.announcement.needEnrollmentTutorialToRead : false);
 const closeDuration = ref<number>(props.announcement ? props.announcement.closeDuration : 0);
 const displayOrder = ref<number>(props.announcement ? props.announcement.displayOrder : 0);
 const silence = ref<boolean>(props.announcement ? props.announcement.silence : false);