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, 101 insertions, 0 deletions

diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.vue b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
new file mode 100644
index 0000000000..373e2cf8dc
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.vue
@@ -0,0 +1,101 @@
+<template>
+<div class="_gaps">
+	<MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo>
+
+	<FormSlot>
+		<template #label>{{ i18n.ts.avatar }}</template>
+		<div v-adaptive-bg :class="$style.avatarSection" class="_panel">
+			<MkAvatar :class="$style.avatar" :user="$i" @click="setAvatar"/>
+			<div style="margin-top: 16px;">
+				<MkButton primary rounded inline @click="setAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+			</div>
+		</div>
+	</FormSlot>
+
+	<MkInput v-model="name" :max="30" manual-save>
+		<template #label>{{ i18n.ts._profile.name }}</template>
+	</MkInput>
+
+	<MkTextarea v-model="description" :max="500" tall manual-save>
+		<template #label>{{ i18n.ts._profile.description }}</template>
+	</MkTextarea>
+
+	<MkInfo>{{ i18n.ts._initialAccountSetting.youCanEditMoreSettingsInSettingsPageLater }}</MkInfo>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import FormSlot from '@/components/form/slot.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import { chooseFileFromPc } from '@/scripts/select-file';
+import * as os from '@/os';
+import { $i } from '@/account';
+
+const emit = defineEmits<{
+	(ev: 'done'): void;
+}>();
+
+const name = ref('');
+const description = ref('');
+
+watch(name, () => {
+	os.apiWithDialog('i/update', {
+		// 空文字列をnullにしたいので??は使うな
+		// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+		name: name.value || null,
+	});
+});
+
+watch(description, () => {
+	os.apiWithDialog('i/update', {
+		// 空文字列をnullにしたいので??は使うな
+		// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+		description: description.value || null,
+	});
+});
+
+function setAvatar(ev) {
+	chooseFileFromPc(false).then(async (files) => {
+		const file = files[0];
+
+		let originalOrCropped = file;
+
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.t('cropImageAsk'),
+			okText: i18n.ts.cropYes,
+			cancelText: i18n.ts.cropNo,
+		});
+
+		if (!canceled) {
+			originalOrCropped = await os.cropImage(file, {
+				aspectRatio: 1,
+			});
+		}
+
+		const i = await os.apiWithDialog('i/update', {
+			avatarId: originalOrCropped.id,
+		});
+		$i.avatarId = i.avatarId;
+		$i.avatarUrl = i.avatarUrl;
+	});
+}
+</script>
+
+<style lang="scss" module>
+.avatarSection {
+	text-align: center;
+	padding: 20px;
+}
+
+.avatar {
+	width: 100px;
+	height: 100px;
+}
+</style>