From b565df6882f647b241cfd841774a5371aa59e3cd Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 07:59:06 +0900
Subject: [PATCH 1/8] fix(backend): fix channels/owned

Fix #10791
---
 packages/backend/src/server/api/endpoints/channels/owned.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/backend/src/server/api/endpoints/channels/owned.ts b/packages/backend/src/server/api/endpoints/channels/owned.ts
index 6556e6e105..8fae972cb1 100644
--- a/packages/backend/src/server/api/endpoints/channels/owned.ts
+++ b/packages/backend/src/server/api/endpoints/channels/owned.ts
@@ -44,7 +44,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private queryService: QueryService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const query = this.queryService.makePaginationQuery(this.channelsRepository.createQueryBuilder(), ps.sinceId, ps.untilId)
+			const query = this.queryService.makePaginationQuery(this.channelsRepository.createQueryBuilder('channel'), ps.sinceId, ps.untilId)
 				.andWhere('channel.isArchived = FALSE')
 				.andWhere({ userId: me.id });
 

From 5c80d9093b926f1746475b4d8d57ef50ab78c10e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 08:13:41 +0900
Subject: [PATCH 2/8] fix(frontend): fix MkInput style

---
 packages/frontend/src/components/MkInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue
index da6c338123..e48032d599 100644
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div :class="$style.label" @click="focus"><slot name="label"></slot></div>
-	<div :class="[$style.input, { inline, disabled, focused }]">
+	<div :class="[$style.input, { [$style.inline]: inline, [$style.disabled]: disabled, [$style.focused]: focused }]">
 		<div ref="prefixEl" :class="$style.prefix"><slot name="prefix"></slot></div>
 		<input
 			ref="inputEl"

From 151586ab602794914be281aab6db5589d9c9c9d8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 08:52:01 +0900
Subject: [PATCH 3/8] refactor

---
 packages/frontend/src/components/MkSample.vue |   2 +-
 packages/frontend/src/os.ts                   |   5 +-
 .../page-editor/els/page-editor.el.image.vue  |   4 +-
 packages/frontend/src/scripts/select-file.ts  | 140 +++++++++---------
 4 files changed, 79 insertions(+), 72 deletions(-)

diff --git a/packages/frontend/src/components/MkSample.vue b/packages/frontend/src/components/MkSample.vue
index 7a3bc20888..922b862b47 100644
--- a/packages/frontend/src/components/MkSample.vue
+++ b/packages/frontend/src/components/MkSample.vue
@@ -87,7 +87,7 @@ export default defineComponent({
 		},
 
 		async openDrive() {
-			os.selectDriveFile();
+			os.selectDriveFile(false);
 		},
 
 		async selectUser() {
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 67acee5aca..c4f9d47d7d 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -19,6 +19,7 @@ import MkContextMenu from '@/components/MkContextMenu.vue';
 import { MenuItem } from '@/types/menu';
 import copyToClipboard from './scripts/copy-to-clipboard';
 import { showMovedDialog } from './scripts/show-moved-dialog';
+import { DriveFile } from 'misskey-js/built/entities';
 
 export const openingWindowsCount = ref(0);
 
@@ -420,7 +421,7 @@ export async function selectUser(opts: { includeSelf?: boolean } = {}) {
 	});
 }
 
-export async function selectDriveFile(multiple: boolean) {
+export async function selectDriveFile(multiple: boolean): Promise<DriveFile[]> {
 	return new Promise((resolve, reject) => {
 		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'file',
@@ -428,7 +429,7 @@ export async function selectDriveFile(multiple: boolean) {
 		}, {
 			done: files => {
 				if (files) {
-					resolve(multiple ? files : files[0]);
+					resolve(files);
 				}
 			},
 		}, 'closed');
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index ffeb8ba285..e97a4b07f1 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -33,8 +33,8 @@ const emit = defineEmits<{
 let file: any = $ref(null);
 
 async function choose() {
-	os.selectDriveFile(false).then((fileResponse: any) => {
-		file = fileResponse;
+	os.selectDriveFile(false).then((fileResponse) => {
+		file = fileResponse[0];
 		emit('update:modelValue', {
 			...props.modelValue,
 			fileId: fileResponse.id,
diff --git a/packages/frontend/src/scripts/select-file.ts b/packages/frontend/src/scripts/select-file.ts
index ec5f8f65e9..fe9f0a2447 100644
--- a/packages/frontend/src/scripts/select-file.ts
+++ b/packages/frontend/src/scripts/select-file.ts
@@ -6,71 +6,77 @@ import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { uploadFile } from '@/scripts/upload';
 
-function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
+export function chooseFileFromPc(multiple: boolean, keepOriginal = false): Promise<DriveFile[]> {
+	return new Promise((res, rej) => {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.multiple = multiple;
+		input.onchange = () => {
+			const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal));
+
+			Promise.all(promises).then(driveFiles => {
+				res(driveFiles);
+			}).catch(err => {
+				// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
+			});
+
+			// 一応廃棄
+			(window as any).__misskey_input_ref__ = null;
+		};
+
+		// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+		// iOS Safari で正常に動かす為のおまじない
+		(window as any).__misskey_input_ref__ = input;
+
+		input.click();
+	});
+}
+
+export function chooseFileFromDrive(multiple: boolean): Promise<DriveFile[]> {
+	return new Promise((res, rej) => {
+		os.selectDriveFile(multiple).then(files => {
+			res(files);
+		});
+	});
+}
+
+export function chooseFileFromUrl(): Promise<DriveFile> {
+	return new Promise((res, rej) => {
+		os.inputText({
+			title: i18n.ts.uploadFromUrl,
+			type: 'url',
+			placeholder: i18n.ts.uploadFromUrlDescription,
+		}).then(({ canceled, result: url }) => {
+			if (canceled) return;
+
+			const marker = Math.random().toString(); // TODO: UUIDとか使う
+
+			const connection = stream.useChannel('main');
+			connection.on('urlUploadFinished', urlResponse => {
+				if (urlResponse.marker === marker) {
+					res(urlResponse.file);
+					connection.dispose();
+				}
+			});
+
+			os.api('drive/files/upload-from-url', {
+				url: url,
+				folderId: defaultStore.state.uploadFolder,
+				marker,
+			});
+
+			os.alert({
+				title: i18n.ts.uploadFromUrlRequested,
+				text: i18n.ts.uploadFromUrlMayTakeTime,
+			});
+		});
+	});
+}
+
+function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile[]> {
 	return new Promise((res, rej) => {
 		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
 
-		const chooseFileFromPc = () => {
-			const input = document.createElement('input');
-			input.type = 'file';
-			input.multiple = multiple;
-			input.onchange = () => {
-				const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
-
-				Promise.all(promises).then(driveFiles => {
-					res(multiple ? driveFiles : driveFiles[0]);
-				}).catch(err => {
-					// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
-				});
-
-				// 一応廃棄
-				(window as any).__misskey_input_ref__ = null;
-			};
-
-			// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
-			// iOS Safari で正常に動かす為のおまじない
-			(window as any).__misskey_input_ref__ = input;
-
-			input.click();
-		};
-
-		const chooseFileFromDrive = () => {
-			os.selectDriveFile(multiple).then(files => {
-				res(files);
-			});
-		};
-
-		const chooseFileFromUrl = () => {
-			os.inputText({
-				title: i18n.ts.uploadFromUrl,
-				type: 'url',
-				placeholder: i18n.ts.uploadFromUrlDescription,
-			}).then(({ canceled, result: url }) => {
-				if (canceled) return;
-
-				const marker = Math.random().toString(); // TODO: UUIDとか使う
-
-				const connection = stream.useChannel('main');
-				connection.on('urlUploadFinished', urlResponse => {
-					if (urlResponse.marker === marker) {
-						res(multiple ? [urlResponse.file] : urlResponse.file);
-						connection.dispose();
-					}
-				});
-
-				os.api('drive/files/upload-from-url', {
-					url: url,
-					folderId: defaultStore.state.uploadFolder,
-					marker,
-				});
-
-				os.alert({
-					title: i18n.ts.uploadFromUrlRequested,
-					text: i18n.ts.uploadFromUrlMayTakeTime,
-				});
-			});
-		};
-
 		os.popupMenu([label ? {
 			text: label,
 			type: 'label',
@@ -81,23 +87,23 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 		}, {
 			text: i18n.ts.upload,
 			icon: 'ti ti-upload',
-			action: chooseFileFromPc,
+			action: () => chooseFileFromPc(multiple, keepOriginal.value).then(files => res(files)),
 		}, {
 			text: i18n.ts.fromDrive,
 			icon: 'ti ti-cloud',
-			action: chooseFileFromDrive,
+			action: () => chooseFileFromDrive(multiple).then(files => res(files)),
 		}, {
 			text: i18n.ts.fromUrl,
 			icon: 'ti ti-link',
-			action: chooseFileFromUrl,
+			action: () => chooseFileFromUrl().then(file => res([file])),
 		}], src);
 	});
 }
 
 export function selectFile(src: any, label: string | null = null): Promise<DriveFile> {
-	return select(src, label, false) as Promise<DriveFile>;
+	return select(src, label, false).then(files => files[0]);
 }
 
 export function selectFiles(src: any, label: string | null = null): Promise<DriveFile[]> {
-	return select(src, label, true) as Promise<DriveFile[]>;
+	return select(src, label, true);
 }

From d5e92c3822b350b9d648a72aef7827ea9cf8c675 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 10:32:08 +0900
Subject: [PATCH 4/8] refactor(frontend): use css modules

---
 .../frontend/src/components/MkUserInfo.vue    | 196 +++++++++---------
 .../frontend/src/components/MkUserList.vue    |   6 +-
 2 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 5086c1b319..6349ada65a 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -1,30 +1,30 @@
 <template>
-<div class="_panel vjnjpkug">
-	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" indicator/>
-	<div class="title">
-		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-		<p class="username"><MkAcct :user="user"/></p>
+<div class="_panel" :class="$style.root">
+	<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+	<MkAvatar :class="$style.avatar" :user="user" indicator/>
+	<div :class="$style.title">
+		<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
+		<p :class="$style.username"><MkAcct :user="user"/></p>
 	</div>
-	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
-	<div class="description">
+	<span v-if="$i && $i.id !== user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
+	<div :class="$style.description">
 		<div v-if="user.description" class="mfm">
 			<Mfm :text="user.description" :author="user" :i="$i"/>
 		</div>
 		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
 	</div>
-	<div class="status">
-		<div>
-			<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
+	<div :class="$style.status">
+		<div :class="$style.statusItem">
+			<p :class="$style.statusItemLabel">{{ i18n.ts.notes }}</p><span :class="$style.statusItemValue">{{ user.notesCount }}</span>
 		</div>
-		<div>
-			<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
+		<div :class="$style.statusItem">
+			<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue">{{ user.followingCount }}</span>
 		</div>
-		<div>
-			<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
+		<div :class="$style.statusItem">
+			<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue">{{ user.followersCount }}</span>
 		</div>
 	</div>
-	<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
+	<MkFollowButton v-if="$i && user.id != $i.id" :class="$style.follow" :user="user" mini/>
 </div>
 </template>
 
@@ -40,99 +40,99 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.vjnjpkug {
+<style lang="scss" module>
+.root {
 	position: relative;
+}
 
-	> .banner {
-		height: 84px;
-		background-color: rgba(0, 0, 0, 0.1);
-		background-size: cover;
-		background-position: center;
-	}
+.banner {
+	height: 84px;
+	background-color: rgba(0, 0, 0, 0.1);
+	background-size: cover;
+	background-position: center;
+}
 
-	> .avatar {
-		display: block;
-		position: absolute;
-		top: 62px;
-		left: 13px;
-		z-index: 2;
-		width: 58px;
-		height: 58px;
-		border: solid 4px var(--panel);
-	}
+.avatar {
+	display: block;
+	position: absolute;
+	top: 62px;
+	left: 13px;
+	z-index: 2;
+	width: 58px;
+	height: 58px;
+	border: solid 4px var(--panel);
+}
 
-	> .title {
-		display: block;
-		padding: 10px 0 10px 88px;
+.title {
+	display: block;
+	padding: 10px 0 10px 88px;
+}
 
-		> .name {
-			display: inline-block;
-			margin: 0;
-			font-weight: bold;
-			line-height: 16px;
-			word-break: break-all;
-		}
+.name {
+	display: inline-block;
+	margin: 0;
+	font-weight: bold;
+	line-height: 16px;
+	word-break: break-all;
+}
 
-		> .username {
-			display: block;
-			margin: 0;
-			line-height: 16px;
-			font-size: 0.8em;
-			color: var(--fg);
-			opacity: 0.7;
-		}
-	}
-	
-	> .followed {
-		position: absolute;
-		top: 12px;
-		left: 12px;
-		padding: 4px 8px;
-		color: #fff;
-		background: rgba(0, 0, 0, 0.7);
-		font-size: 0.7em;
-		border-radius: 6px;
-	}
-	
-	> .description {
-		padding: 16px;
-		font-size: 0.8em;
-		border-top: solid 0.5px var(--divider);
+.username {
+	display: block;
+	margin: 0;
+	line-height: 16px;
+	font-size: 0.8em;
+	color: var(--fg);
+	opacity: 0.7;
+}
 
-		> .mfm {
-			display: -webkit-box;
-			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;  
-			overflow: hidden;
-		}
-	}
+.followed {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	padding: 4px 8px;
+	color: #fff;
+	background: rgba(0, 0, 0, 0.7);
+	font-size: 0.7em;
+	border-radius: 6px;
+}
 
-	> .status {
-		padding: 10px 16px;
-		border-top: solid 0.5px var(--divider);
+.description {
+	padding: 16px;
+	font-size: 0.8em;
+	border-top: solid 0.5px var(--divider);
+}
 
-		> div {
-			display: inline-block;
-			width: 33%;
+.mfm {
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;  
+	overflow: hidden;
+}
 
-			> p {
-				margin: 0;
-				font-size: 0.7em;
-				color: var(--fg);
-			}
+.status {
+	padding: 10px 16px;
+	border-top: solid 0.5px var(--divider);
+}
 
-			> span {
-				font-size: 1em;
-				color: var(--accent);
-			}
-		}
-	}
+.statusItem {
+	display: inline-block;
+	width: 33%;
+}
 
-	> .koudoku-button {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-	}
+.statusItemLabel {
+	margin: 0;
+	font-size: 0.7em;
+	color: var(--fg);
+}
+
+.statusItemValue {
+	font-size: 1em;
+	color: var(--accent);
+}
+
+.follow {
+	position: absolute;
+	top: 8px;
+	right: 8px;
 }
 </style>
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index 51eb426e97..3571ca84d9 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -8,7 +8,7 @@
 	</template>
 
 	<template #default="{ items }">
-		<div class="efvhhmdq">
+		<div :class="$style.root">
 			<MkUserInfo v-for="item in items" :key="item.id" class="user" :user="extractor(item)"/>
 		</div>
 	</template>
@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<{
 });
 </script>
 
-<style lang="scss" scoped>
-.efvhhmdq {
+<style lang="scss" module>
+.root {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 	grid-gap: var(--margin);

From 85a4c8dbb1cd455ac538d8004dafc47d4d6d400f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 17:29:19 +0900
Subject: [PATCH 5/8] =?UTF-8?q?feat(frontend):=20=E3=82=A2=E3=82=AB?=
 =?UTF-8?q?=E3=82=A6=E3=83=B3=E3=83=88=E5=88=9D=E6=9C=9F=E8=A8=AD=E5=AE=9A?=
 =?UTF-8?q?=E3=82=A6=E3=82=A3=E3=82=B6=E3=83=BC=E3=83=89=20(#10799)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 CHANGELOG.md                                  |   1 +
 locales/ja-JP.yml                             |  50 ++++---
 packages/frontend/.storybook/generate.tsx     |   2 +
 packages/frontend/.storybook/preview.ts       |  31 +++-
 .../frontend/src/components/MkModalWindow.vue |   2 +-
 .../MkSignupDialog.rules.stories.impl.ts      |   2 +-
 .../MkUserSetupDialog.Follow.stories.impl.ts  |  51 +++++++
 .../components/MkUserSetupDialog.Follow.vue   |  63 ++++++++
 .../MkUserSetupDialog.Profile.stories.impl.ts |  31 ++++
 .../components/MkUserSetupDialog.Profile.vue  | 101 +++++++++++++
 .../MkUserSetupDialog.User.stories.impl.ts    |  32 +++++
 .../src/components/MkUserSetupDialog.User.vue | 101 +++++++++++++
 .../MkUserSetupDialog.stories.impl.ts         |  51 +++++++
 .../src/components/MkUserSetupDialog.vue      | 135 ++++++++++++++++++
 packages/frontend/src/init.ts                 |   4 +
 .../frontend/src/pages/timeline.tutorial.vue  |  69 +++------
 packages/frontend/src/pages/timeline.vue      |   2 +-
 packages/frontend/src/store.ts                |   6 +-
 18 files changed, 651 insertions(+), 83 deletions(-)
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.Follow.stories.impl.ts
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.Follow.vue
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.Profile.stories.impl.ts
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.Profile.vue
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.User.stories.impl.ts
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.User.vue
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.stories.impl.ts
 create mode 100644 packages/frontend/src/components/MkUserSetupDialog.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 027c369817..97d5ec0347 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@
 - Fix: フォローリクエストの通知が残る問題を修正
 
 ### Client
+- アカウント作成時に初期設定ウィザードを表示するように
 - チャンネル内検索ができるように
 - チャンネル検索ですべてのチャンネルの取得/表示ができるように
 - 通知の表示をカスタマイズできるように
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b87f4d9cb4..c3dc2172c3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1036,6 +1036,20 @@ channelArchiveConfirmTitle: "{name}をアーカイブしますか？"
 channelArchiveConfirmDescription: "アーカイブすると、チャンネル一覧や検索結果に表示されなくなり、新たな書き込みもできなくなります。"
 thisChannelArchived: "このチャンネルはアーカイブされています。"
 displayOfNote: "ノートの表示"
+initialAccountSetting: "初期設定"
+youFollowing: "フォロー中"
+
+_initialAccountSetting:
+  accountCreated: "アカウントの作成が完了しました！"
+  letsFillYourProfile: "まずはあなたのプロフィールを設定しましょう。"
+  profileSetting: "プロフィール設定"
+  theseSettingsCanEditLater: "これらの設定は後から変更できます。"
+  youCanEditMoreSettingsInSettingsPageLater: "この他にも様々な設定を「設定」ページから行えます。ぜひ後で確認してみてください。"
+  followUsers: "タイムラインを構築するため、気になるユーザーをフォローしてみましょう。"
+  pushNotificationDescription: "プッシュ通知を有効にすると{name}の通知をお使いのデバイスで受け取ることができます。"
+  initialAccountSettingCompleted: "初期設定が完了しました！"
+  haveFun: "{name}をお楽しみください！"
+  ifYouNeedLearnMore: "{name}(Misskey)の使い方などを詳しく知るには{link}をご覧ください。"
 
 _serverRules:
   description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
@@ -1615,32 +1629,16 @@ _time:
   hour: "時間"
   day: "日"
 
-_tutorial:
+_timelineTutorial:
   title: "Misskeyの使い方"
-  step1_1: "ようこそ。"
-  step1_2: "この画面は「タイムライン」と呼ばれ、あなたや、あなたが「フォロー」する人の「ノート」が時系列で表示されます。"
-  step1_3: "あなたはまだ何もノートを投稿しておらず、誰もフォローしていないので、タイムラインには何も表示されていないはずです。"
-  step2_1: "ノートを作成したり誰かをフォローしたりする前に、まずあなたのプロフィールを完成させましょう。"
-  step2_2: "あなたがどんな人かわかると、多くの人にノートを見てもらえたり、フォローしてもらいやすくなります。"
-  step3_1: "プロフィール設定はうまくできましたか？"
-  step3_2: "では試しに、何かノートを投稿してみてください。画面上にある鉛筆マークのボタンを押すとフォームが開きます。"
-  step3_3: "内容を書いたら、フォーム右上のボタンを押すと投稿できます。"
-  step3_4: "内容が思いつかない？「Misskey始めました」というのはいかがでしょう。"
-  step4_1: "投稿できましたか？"
-  step4_2: "あなたのノートがタイムラインに表示されていれば成功です。"
-  step5_1: "次は、他の人をフォローしてタイムラインを賑やかにしたいところです。"
-  step5_2: "{featured}で人気のノートが見れるので、その中から気になった人を選んでフォローしたり、{explore}で人気のユーザーを探すこともできます。"
-  step5_3: "ユーザーをフォローするには、ユーザーのアイコンをクリックしてユーザーページを表示し、「フォロー」ボタンを押します。"
-  step5_4: "ユーザーによっては、フォローが承認されるまで時間がかかる場合があります。"
-  step6_1: "タイムラインに他のユーザーのノートが表示されていれば成功です。"
-  step6_2: "他の人のノートには、「リアクション」を付けることができ、簡単にあなたの反応を伝えられます。"
-  step6_3: "リアクションを付けるには、ノートの「+」マークをクリックして、好きなリアクションを選択します。"
-  step7_1: "これで、Misskeyの基本的な使い方の説明は終わりました。お疲れ様でした。"
-  step7_2: "もっとMisskeyについて知りたいときは、{help}を見てみてください。"
-  step7_3: "では、Misskeyをお楽しみください🚀"
-  step8_1: "最後に、プッシュ通知を有効化してみませんか？"
-  step8_2: "プッシュ通知を受け取ることで、Misskeyを開いていない時にもリアクションやフォロー、メンションなどに気づけます。"
-  step8_3: "通知の設定は後から変更できます。"
+  step1_1: "この画面は「タイムライン」です。{name}に投稿された「ノート」が時系列で表示されます。"
+  step1_2: "タイムラインにはいくつか種類があり、例えば「ホームタイムライン」にはあなたがフォローしている人のノートが流れ、「ローカルタイムライン」には{name}全体のノートが流れます。"
+  step2_1: "試しに、何かノートを投稿してみましょう。画面上にある鉛筆マークのボタンを押すとフォームが開きます。"
+  step2_2: "初めてのノートの内容は、あなたの自己紹介や「{name}始めました」などがおすすめです。"
+  step3_1: "投稿できましたか？"
+  step3_2: "あなたのノートがタイムラインに表示されていれば成功です。"
+  step4_1: "ノートには、「リアクション」を付けることができます。"
+  step4_2: "リアクションを付けるには、ノートの「+」マークをクリックして、好きな絵文字を選択します。"
 
 _2fa:
   alreadyRegistered: "既に設定は完了しています。"
@@ -1822,7 +1820,7 @@ _profile:
   metadataDescription: "プロフィールに表として追加情報を表示することができます。"
   metadataLabel: "ラベル"
   metadataContent: "内容"
-  changeAvatar: "アバター画像を変更"
+  changeAvatar: "アイコン画像を変更"
   changeBanner: "バナー画像を変更"
 
 _exportOrImport:
diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx
index dbe9729170..7c51d4c00c 100644
--- a/packages/frontend/.storybook/generate.tsx
+++ b/packages/frontend/.storybook/generate.tsx
@@ -399,6 +399,8 @@ Promise.all([
 	glob('src/components/Mk{A,B}*.vue'),
 	glob('src/components/MkGalleryPostPreview.vue'),
 	glob('src/components/MkSignupServerRules.vue'),
+	glob('src/components/MkUserSetupDialog.vue'),
+	glob('src/components/MkUserSetupDialog.*.vue'),
 	glob('src/pages/user/home.vue'),
 ])
 	.then((globs) => globs.flat())
diff --git a/packages/frontend/.storybook/preview.ts b/packages/frontend/.storybook/preview.ts
index 06aa7b6682..d91d76ff0f 100644
--- a/packages/frontend/.storybook/preview.ts
+++ b/packages/frontend/.storybook/preview.ts
@@ -3,6 +3,7 @@ import { FORCE_REMOUNT } from '@storybook/core-events';
 import { type Preview, setup } from '@storybook/vue3';
 import isChromatic from 'chromatic/isChromatic';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
+import { userDetailed } from './fakes';
 import locale from './locale';
 import { commonHandlers, onUnhandledRequest } from './mocks';
 import themes from './themes';
@@ -10,6 +11,7 @@ import '../src/style.scss';
 
 const appInitialized = Symbol();
 
+let lastStory = null;
 let moduleInitialized = false;
 let unobserve = () => {};
 let misskeyOS = null;
@@ -42,10 +44,16 @@ function loadTheme(applyTheme: typeof import('../src/scripts/theme')['applyTheme
 	unobserve = () => observer.disconnect();
 }
 
+function initLocalStorage() {
+	localStorage.clear();
+	localStorage.setItem('account', JSON.stringify(userDetailed()));
+	localStorage.setItem('locale', JSON.stringify(locale));
+}
+
 initialize({
 	onUnhandledRequest,
 });
-localStorage.setItem("locale", JSON.stringify(locale));
+initLocalStorage();
 queueMicrotask(() => {
 	Promise.all([
 		import('../src/components'),
@@ -76,6 +84,27 @@ queueMicrotask(() => {
 const preview = {
 	decorators: [
 		(Story, context) => {
+			if (lastStory === context.id) {
+				lastStory = null;
+			} else {
+				lastStory = context.id;
+				const channel = addons.getChannel();
+				const resetIndexedDBPromise = globalThis.indexedDB?.databases
+					? indexedDB.databases().then((r) => {
+							for (var i = 0; i < r.length; i++) {
+								indexedDB.deleteDatabase(r[i].name!);
+							}
+						}).catch(() => {})
+					: Promise.resolve();
+				const resetDefaultStorePromise = import('../src/store').then(({ defaultStore }) => {
+					// @ts-expect-error
+					defaultStore.init();
+				}).catch(() => {});
+				Promise.all([resetIndexedDBPromise, resetDefaultStorePromise]).then(() => {
+					initLocalStorage();
+					channel.emit(FORCE_REMOUNT, { storyId: context.id });
+				});
+			}
 			const story = Story();
 			if (!moduleInitialized) {
 				const channel = addons.getChannel();
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index 2d2f8411f1..f983f77750 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -89,7 +89,6 @@ defineExpose({
 	display: flex;
 	flex-direction: column;
 	contain: content;
-	container-type: inline-size;
 	border-radius: var(--radius);
 
 	--root-margin: 24px;
@@ -142,6 +141,7 @@ defineExpose({
 		flex: 1;
 		overflow: auto;
 		background: var(--panel);
+		container-type: size;
 	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts b/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts
index 1308dfff9a..2d95455730 100644
--- a/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts
+++ b/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts
@@ -3,7 +3,7 @@ import { expect } from '@storybook/jest';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
 import { onBeforeUnmount } from 'vue';
-import MkSignupServerRules from './MkSignupDialog,rules.vue';
+import MkSignupServerRules from './MkSignupDialog.rules.vue';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 export const Empty = {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Follow.stories.impl.ts b/packages/frontend/src/components/MkUserSetupDialog.Follow.stories.impl.ts
new file mode 100644
index 0000000000..7d5a65f41a
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.Follow.stories.impl.ts
@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { commonHandlers } from '../../.storybook/mocks';
+import { userDetailed } from '../../.storybook/fakes';
+import MkUserSetupDialog_Follow from './MkUserSetupDialog.Follow.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkUserSetupDialog_Follow,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkUserSetupDialog_Follow v-bind="props" />',
+		};
+	},
+	args: {
+		
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('44'),
+						userDetailed('49'),
+					]));
+				}),
+				rest.post('/api/pinned-users', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('44'),
+						userDetailed('49'),
+					]));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkUserSetupDialog_Follow>;
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
new file mode 100644
index 0000000000..b89e3e4c9d
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
@@ -0,0 +1,63 @@
+<template>
+<div class="_gaps">
+	<div style="text-align: center;">{{ i18n.ts._initialAccountSetting.followUsers }}</div>
+
+	<MkFolder :default-open="true">
+		<template #label>{{ i18n.ts.recommended }}</template>
+
+		<MkPagination :pagination="pinnedUsers">
+			<template #default="{ items }">
+				<div :class="$style.users">
+					<XUser v-for="item in items" :key="item.id" :user="item"/>
+				</div>
+			</template>
+		</MkPagination>
+	</MkFolder>
+
+	<MkFolder :default-open="true">
+		<template #label>{{ i18n.ts.popularUsers }}</template>
+
+		<MkPagination :pagination="popularUsers">
+			<template #default="{ items }">
+				<div :class="$style.users">
+					<XUser v-for="item in items" :key="item.id" :user="item"/>
+				</div>
+			</template>
+		</MkPagination>
+	</MkFolder>
+</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 MkFolder from '@/components/MkFolder.vue';
+import XUser from '@/components/MkUserSetupDialog.User.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import MkPagination from '@/components/MkPagination.vue';
+
+const emit = defineEmits<{
+	(ev: 'done'): void;
+}>();
+
+const pinnedUsers = { endpoint: 'pinned-users', noPaging: true };
+
+const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
+	state: 'alive',
+	origin: 'local',
+	sort: '+follower',
+} };
+</script>
+
+<style lang="scss" module>
+.users {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+	grid-gap: var(--margin);
+	justify-content: center;
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Profile.stories.impl.ts b/packages/frontend/src/components/MkUserSetupDialog.Profile.stories.impl.ts
new file mode 100644
index 0000000000..f4930aa26b
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.Profile.stories.impl.ts
@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import MkUserSetupDialog_Profile from './MkUserSetupDialog.Profile.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkUserSetupDialog_Profile,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkUserSetupDialog_Profile v-bind="props" />',
+		};
+	},
+	args: {
+		
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkUserSetupDialog_Profile>;
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>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.stories.impl.ts b/packages/frontend/src/components/MkUserSetupDialog.User.stories.impl.ts
new file mode 100644
index 0000000000..7413f4884b
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.User.stories.impl.ts
@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { userDetailed } from '../../.storybook/fakes';
+import MkUserSetupDialog_User from './MkUserSetupDialog.User.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkUserSetupDialog_User,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkUserSetupDialog_User v-bind="props" />',
+		};
+	},
+	args: {
+		user: userDetailed(),
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkUserSetupDialog_User>;
diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.vue b/packages/frontend/src/components/MkUserSetupDialog.User.vue
new file mode 100644
index 0000000000..d66f34f165
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.User.vue
@@ -0,0 +1,101 @@
+<template>
+<div v-adaptive-bg class="_panel" style="position: relative;">
+	<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+	<MkAvatar :class="$style.avatar" :user="user" indicator/>
+	<div :class="$style.title">
+		<div :class="$style.name"><MkUserName :user="user" :nowrap="false"/></div>
+		<p :class="$style.username"><MkAcct :user="user"/></p>
+	</div>
+	<div :class="$style.description">
+		<div v-if="user.description" :class="$style.mfm">
+			<Mfm :text="user.description" :author="user" :i="$i"/>
+		</div>
+		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
+	</div>
+	<div :class="$style.footer">
+		<MkButton v-if="!isFollowing" primary gradate rounded full @click="follow"><i class="ti ti-plus"></i> {{ i18n.ts.follow }}</MkButton>
+		<div v-else style="opacity: 0.7; text-align: center;">{{ i18n.ts.youFollowing }} <i class="ti ti-check"></i></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import { ref } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import * as os from '@/os';
+
+const props = defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
+
+const isFollowing = ref(false);
+
+async function follow() {
+	isFollowing.value = true;
+	os.api('following/create', {
+		userId: props.user.id,
+	});
+}
+</script>
+
+<style lang="scss" module>
+.banner {
+	height: 60px;
+	background-color: rgba(0, 0, 0, 0.1);
+	background-size: cover;
+	background-position: center;
+}
+
+.avatar {
+	display: block;
+	position: absolute;
+	top: 30px;
+	left: 13px;
+	z-index: 2;
+	width: 58px;
+	height: 58px;
+	border: solid 4px var(--panel);
+}
+
+.title {
+	display: block;
+	padding: 10px 0 10px 88px;
+}
+
+.name {
+	display: inline-block;
+	margin: 0;
+	font-weight: bold;
+	line-height: 16px;
+	word-break: break-all;
+}
+
+.username {
+	display: block;
+	margin: 0;
+	line-height: 16px;
+	font-size: 0.8em;
+	color: var(--fg);
+	opacity: 0.7;
+}
+
+.description {
+	padding: 0 16px 16px 88px;
+	font-size: 0.9em;
+}
+
+.mfm {
+	display: -webkit-box;
+	-webkit-line-clamp: 5;
+	-webkit-box-orient: vertical;  
+	overflow: hidden;
+}
+
+.footer {
+	border-top: solid 0.5px var(--divider);
+	padding: 16px;
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserSetupDialog.stories.impl.ts b/packages/frontend/src/components/MkUserSetupDialog.stories.impl.ts
new file mode 100644
index 0000000000..55790602d5
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.stories.impl.ts
@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { commonHandlers } from '../../.storybook/mocks';
+import { userDetailed } from '../../.storybook/fakes';
+import MkUserSetupDialog from './MkUserSetupDialog.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkUserSetupDialog,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkUserSetupDialog v-bind="props" />',
+		};
+	},
+	args: {
+		
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('44'),
+						userDetailed('49'),
+					]));
+				}),
+				rest.post('/api/pinned-users', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('44'),
+						userDetailed('49'),
+					]));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkUserSetupDialog>;
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue
new file mode 100644
index 0000000000..58afe09b61
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@@ -0,0 +1,135 @@
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="500"
+	:height="550"
+	@close="close"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.initialAccountSetting }}</template>
+
+	<div style="overflow-x: clip;">
+		<Transition
+			mode="out-in"
+			:enter-active-class="$style.transition_x_enterActive"
+			:leave-active-class="$style.transition_x_leaveActive"
+			:enter-from-class="$style.transition_x_enterFrom"
+			:leave-to-class="$style.transition_x_leaveTo"
+		>
+			<template v-if="page === 0">
+				<div :class="$style.centerPage">
+					<MkSpacer :margin-min="20" :margin-max="28">
+						<div class="_gaps" style="text-align: center;">
+							<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
+							<div>{{ i18n.ts._initialAccountSetting.letsFillYourProfile }}</div>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts._initialAccountSetting.profileSetting }} <i class="ti ti-arrow-right"></i></MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 1">
+				<div style="height: 100cqh; overflow: auto;">
+					<MkSpacer :margin-min="20" :margin-max="28">
+						<XProfile/>
+						<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 2">
+				<div style="height: 100cqh; overflow: auto;">
+					<MkSpacer :margin-min="20" :margin-max="28">
+						<XFollow/>
+						<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 3">
+				<div :class="$style.centerPage">
+					<MkSpacer :margin-min="20" :margin-max="28">
+						<div class="_gaps" style="text-align: center;">
+							<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+							<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
+							<div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div>
+							<MkPushNotificationAllowButton primary show-only-to-register style="margin: 0 auto;"/>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 4">
+				<div :class="$style.centerPage">
+					<MkSpacer :margin-min="20" :margin-max="28">
+						<div class="_gaps" style="text-align: center;">
+							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
+							<I18n :src="i18n.ts._initialAccountSetting.ifYouNeedLearnMore" tag="div" style="padding: 0 16px;">
+								<template #name>{{ instance.name ?? host }}</template>
+								<template #link>
+									<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
+								</template>
+							</I18n>
+							<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="close">{{ i18n.ts.close }}</MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+		</Transition>
+	</div>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref, shallowRef, watch } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
+import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
+import XFollow from '@/components/MkUserSetupDialog.Follow.vue';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { host } from '@/config';
+import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+import { defaultStore } from '@/store';
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+
+const page = ref(defaultStore.state.accountSetupWizard);
+
+watch(page, () => {
+	defaultStore.set('accountSetupWizard', page.value);
+});
+
+function close() {
+	dialog.value.close();
+	defaultStore.set('accountSetupWizard', -1);
+}
+</script>
+
+<style lang="scss" module>
+.transition_x_enterActive,
+.transition_x_leaveActive {
+	transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
+}
+.transition_x_enterFrom {
+	opacity: 0;
+	transform: translateX(50px);
+}
+.transition_x_leaveTo {
+	opacity: 0;
+	transform: translateX(-50px);
+}
+
+.centerPage {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100cqh;
+	padding-bottom: 30px;
+	box-sizing: border-box;
+}
+</style>
diff --git a/packages/frontend/src/init.ts b/packages/frontend/src/init.ts
index 91a009e8f8..13fbd08c56 100644
--- a/packages/frontend/src/init.ts
+++ b/packages/frontend/src/init.ts
@@ -343,6 +343,10 @@ if ($i) {
 	// only add post shortcuts if logged in
 	hotkeys['p|n'] = post;
 
+	if (defaultStore.state.accountSetupWizard !== -1) {
+		popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
+	}
+
 	if ($i.isDeleted) {
 		alert({
 			type: 'warning',
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>
 
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 9f13f7a1dd..1bf4cdc99a 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :display-my-avatar="true"/></template>
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap">
-			<XTutorial v-if="$i && defaultStore.reactiveState.tutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
+			<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
 			<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
 
 			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index c64d40edcc..245bcbefe1 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -38,7 +38,11 @@ export const pageViewInterruptors: PageViewInterruptor[] = [];
 // TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
 //       あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
 export const defaultStore = markRaw(new Storage('base', {
-	tutorial: {
+	accountSetupWizard: {
+		where: 'account',
+		default: 0,
+	},
+	timelineTutorial: {
 		where: 'account',
 		default: 0,
 	},

From b271d026606ae7aa9ade52a14be6a6dc6c614018 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 17:38:19 +0900
Subject: [PATCH 6/8] tweak of #10799

---
 packages/frontend/src/init.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/init.ts b/packages/frontend/src/init.ts
index 13fbd08c56..eb67803240 100644
--- a/packages/frontend/src/init.ts
+++ b/packages/frontend/src/init.ts
@@ -344,7 +344,10 @@ if ($i) {
 	hotkeys['p|n'] = post;
 
 	if (defaultStore.state.accountSetupWizard !== -1) {
-		popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
+		// このウィザードが実装される前に登録したユーザーには表示させないため
+		if (Date.now() - new Date($i.createdAt).getTime() < 1000 * 60 * 60 * 24) {
+			popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
+		}
 	}
 
 	if ($i.isDeleted) {

From 6fd63c1fb65432872455fc8b268edd7843fdb45e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 May 2023 17:49:19 +0900
Subject: [PATCH 7/8] tweak of #10799

---
 locales/ja-JP.yml                                 |  1 +
 .../frontend/src/components/MkUserSetupDialog.vue | 15 ++++++++++++---
 packages/frontend/src/init.ts                     |  3 +++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c3dc2172c3..b886cc7bfd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1050,6 +1050,7 @@ _initialAccountSetting:
   initialAccountSettingCompleted: "初期設定が完了しました！"
   haveFun: "{name}をお楽しみください！"
   ifYouNeedLearnMore: "{name}(Misskey)の使い方などを詳しく知るには{link}をご覧ください。"
+  skipAreYouSure: "初期設定をスキップしますか？"
 
 _serverRules:
   description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue
index 58afe09b61..a9d117e073 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@@ -3,7 +3,7 @@
 	ref="dialog"
 	:width="500"
 	:height="550"
-	@close="close"
+	@close="close(true)"
 	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.initialAccountSetting }}</template>
@@ -70,7 +70,7 @@
 								</template>
 							</I18n>
 							<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
-							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="close">{{ i18n.ts.close }}</MkButton>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="close(false)">{{ i18n.ts.close }}</MkButton>
 						</div>
 					</MkSpacer>
 				</div>
@@ -91,6 +91,7 @@ import { instance } from '@/instance';
 import { host } from '@/config';
 import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
 import { defaultStore } from '@/store';
+import * as os from '@/os';
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;
@@ -104,7 +105,15 @@ watch(page, () => {
 	defaultStore.set('accountSetupWizard', page.value);
 });
 
-function close() {
+async function close(skip: boolean) {
+	if (skip) {
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts._initialAccountSetting.skipAreYouSure,
+		});
+		if (canceled) return;
+	}
+
 	dialog.value.close();
 	defaultStore.set('accountSetupWizard', -1);
 }
diff --git a/packages/frontend/src/init.ts b/packages/frontend/src/init.ts
index eb67803240..49e7bb4008 100644
--- a/packages/frontend/src/init.ts
+++ b/packages/frontend/src/init.ts
@@ -345,8 +345,11 @@ if ($i) {
 
 	if (defaultStore.state.accountSetupWizard !== -1) {
 		// このウィザードが実装される前に登録したユーザーには表示させないため
+		// TODO: そのうち消す
 		if (Date.now() - new Date($i.createdAt).getTime() < 1000 * 60 * 60 * 24) {
 			popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed');
+		} else {
+			defaultStore.set('accountSetupWizard', -1);
 		}
 	}
 

From 1a96425768b743cf6a7f93b7813c082152497461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 8 May 2023 17:51:52 +0900
Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=E7=8C=AB=E8=80=B3=E3=81=AE?=
 =?UTF-8?q?=E5=85=88=E7=AB=AF=E3=81=A3=E3=81=A6=E6=9C=AC=E6=9D=A5=E5=B0=91?=
 =?UTF-8?q?=E3=81=97=E4=B8=B8=E3=81=BE=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B?=
 =?UTF-8?q?=E3=82=82=E3=81=AE=E3=81=AA=E3=81=AE=E3=81=A7=E3=81=AF=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E3=81=A0=E3=82=8D=E3=81=86=E3=81=8B=20(#10800)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/frontend/src/components/global/MkAvatar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 8497b8443b..ad36dcabe4 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -222,7 +222,7 @@ watch(() => props.user.avatarBlurhash, () => {
 			transform: rotate(37.5deg) skew(30deg);
 
 			&, &::after {
-				border-radius: 0 75% 75%;
+				border-radius: 25% 75% 75%;
 			}
 
 			> .layer {
@@ -251,7 +251,7 @@ watch(() => props.user.avatarBlurhash, () => {
 			transform: rotate(-37.5deg) skew(-30deg);
 
 			&, &::after {
-				border-radius: 75% 0 75% 75%;
+				border-radius: 75% 25% 75% 75%;
 			}
 
 			> .layer {