feat(frontend): アカウント初期設定ウィザード (#10799)

* wip

* :art:

* :art:

* wip

* wip

* :art:

* Update CHANGELOG.md

* wip

* Update MkUserSetupDialog.vue

* add stories

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* update stories

* Update MkUserSetupDialog.Follow.stories.impl.ts

* test: load mock user account

* :v:

* :v:

* test: reset on each render

* test: use id to identify

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

1 files changed, 17 insertions, 52 deletions

diff --git a/packages/frontend/src/pages/timeline.tutorial.vue b/packages/frontend/src/pages/timeline.tutorial.vue
index 0d0c932a5c..32228d28f4 100644
--- a/packages/frontend/src/pages/timeline.tutorial.vue
+++ b/packages/frontend/src/pages/timeline.tutorial.vue
@@ -1,7 +1,7 @@
 <template>
 <div :class="$style.container">
 	<div :class="$style.title">
-		<div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
+		<div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._timelineTutorial.title }}</div>
 		<div :class="$style.step">
 			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--">
 				<i class="ti ti-chevron-left"></i>
@@ -12,66 +12,30 @@
 			</button>
 		</div>
 	</div>
+
 	<div v-if="tutorial === 0" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step1_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step1_2 }}</div>
-		<div>{{ i18n.ts._tutorial.step1_3 }}</div>
+		<div>{{ i18n.t('_timelineTutorial.step1_1', { name: instance.name ?? host }) }}</div>
+		<div>{{ i18n.t('_timelineTutorial.step1_2', { name: instance.name ?? host }) }}</div>
 	</div>
 	<div v-else-if="tutorial === 1" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step2_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step2_2 }}</div>
-		<MkA class="_link" to="/settings/profile">{{ i18n.ts.editProfile }}</MkA>
+		<div>{{ i18n.ts._timelineTutorial.step2_1 }}</div>
+		<div>{{ i18n.t('_timelineTutorial.step2_2', { name: instance.name ?? host }) }}</div>
 	</div>
 	<div v-else-if="tutorial === 2" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step3_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step3_2 }}</div>
-		<div>{{ i18n.ts._tutorial.step3_3 }}</div>
-		<small :class="$style.small">{{ i18n.ts._tutorial.step3_4 }}</small>
+		<div>{{ i18n.ts._timelineTutorial.step3_1 }}</div>
+		<div>{{ i18n.ts._timelineTutorial.step3_2 }}</div>
 	</div>
 	<div v-else-if="tutorial === 3" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step4_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step4_2 }}</div>
-	</div>
-	<div v-else-if="tutorial === 4" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step5_1 }}</div>
-		<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
-			<template #featured>
-				<MkA class="_link" to="/explore">{{ i18n.ts.featured }}</MkA>
-			</template>
-			<template #explore>
-				<MkA class="_link" to="/explore#users">{{ i18n.ts.explore }}</MkA>
-			</template>
-		</I18n>
-		<div>{{ i18n.ts._tutorial.step5_3 }}</div>
-		<small :class="$style.small">{{ i18n.ts._tutorial.step5_4 }}</small>
-	</div>
-	<div v-else-if="tutorial === 5" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step6_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step6_2 }}</div>
-		<div>{{ i18n.ts._tutorial.step6_3 }}</div>
-	</div>
-	<div v-else-if="tutorial === 6" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step7_1 }}</div>
-		<I18n :src="i18n.ts._tutorial.step7_2" tag="div">
-			<template #help>
-				<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
-			</template>
-		</I18n>
-		<div>{{ i18n.ts._tutorial.step7_3 }}</div>
-	</div>
-	<div v-else-if="tutorial === 7" :class="$style.body">
-		<div>{{ i18n.ts._tutorial.step8_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step8_2 }}</div>
-		<small :class="$style.small">{{ i18n.ts._tutorial.step8_3 }}</small>
+		<div>{{ i18n.ts._timelineTutorial.step4_1 }}</div>
+		<div>{{ i18n.ts._timelineTutorial.step4_2 }}</div>
 	</div>
 
 	<div :class="$style.footer">
 		<template v-if="tutorial === tutorialsNumber - 1">
-			<MkPushNotificationAllowButton :class="$style.footerItem" primary show-only-to-register @click="tutorial = -1"/>
-			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
+			<MkButton :class="$style.footerItem" primary rounded gradate @click="tutorial = -1">{{ i18n.ts.done }} <i class="ti ti-check"></i></MkButton>
 		</template>
 		<template v-else>
-			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="ti ti-check"></i> {{ i18n.ts.next }}</MkButton>
+			<MkButton :class="$style.footerItem" primary rounded gradate @click="tutorial++">{{ i18n.ts.next }} <i class="ti ti-arrow-right"></i></MkButton>
 		</template>
 	</div>
 </div>
@@ -80,15 +44,16 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import MkButton from '@/components/MkButton.vue';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { host } from '@/config';
 
-const tutorialsNumber = 8;
+const tutorialsNumber = 4;
 
 const tutorial = computed({
-	get() { return defaultStore.reactiveState.tutorial.value || 0; },
-	set(value) { defaultStore.set('tutorial', value); },
+	get() { return defaultStore.reactiveState.timelineTutorial.value || 0; },
+	set(value) { defaultStore.set('timelineTutorial', value); },
 });
 </script>