Merge branch 'develop' into img-max

packages/backend/migration/1680702787050-UserMemo.js

@@ -0,0 +1,18 @@
+export class UserMemo1680702787050 {
+    name = 'UserMemo1680702787050'
+
+    async up(queryRunner) {
+        await queryRunner.query(`CREATE TABLE "user_memo" ("id" character varying(32) NOT NULL, "userId" character varying(32) NOT NULL, "targetUserId" character varying(32) NOT NULL, "memo" character varying(2048) NOT NULL, CONSTRAINT "PK_e9aaa58f7d3699a84d79078f4d9" PRIMARY KEY ("id")); COMMENT ON COLUMN "user_memo"."userId" IS 'The ID of author.'; COMMENT ON COLUMN "user_memo"."targetUserId" IS 'The ID of target user.'; COMMENT ON COLUMN "user_memo"."memo" IS 'Memo.'`);
+        await queryRunner.query(`CREATE INDEX "IDX_650b49c5639b5840ee6a2b8f83" ON "user_memo" ("userId") `);
+        await queryRunner.query(`CREATE INDEX "IDX_66ac4a82894297fd09ba61f3d3" ON "user_memo" ("targetUserId") `);
+        await queryRunner.query(`CREATE UNIQUE INDEX "IDX_faef300913c738265638ba3ebc" ON "user_memo" ("userId", "targetUserId") `);
+        await queryRunner.query(`ALTER TABLE "user_memo" ADD CONSTRAINT "FK_650b49c5639b5840ee6a2b8f83e" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+        await queryRunner.query(`ALTER TABLE "user_memo" ADD CONSTRAINT "FK_66ac4a82894297fd09ba61f3d35" FOREIGN KEY ("targetUserId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "user_memo" DROP CONSTRAINT "FK_66ac4a82894297fd09ba61f3d35"`);
+        await queryRunner.query(`ALTER TABLE "user_memo" DROP CONSTRAINT "FK_650b49c5639b5840ee6a2b8f83e"`);
+        await queryRunner.query(`DROP TABLE "user_memo"`);
+    }
+}

packages/backend/src/core/CustomEmojiService.ts

@@ -49,7 +49,7 @@ export class CustomEmojiService {
 				if (!Array.isArray(JSON.parse(value))) return undefined; // 古いバージョンの壊れたキャッシュが残っていることがある(そのうち消す)
 				return new Map(JSON.parse(value).map((x: Serialized<Emoji>) => [x.name, {
 					...x,
-					updatedAt: x.updatedAt && new Date(x.updatedAt),
+					updatedAt: x.updatedAt ? new Date(x.updatedAt) : null,
 				}]));
 			},
 		});

packages/backend/src/core/DriveService.ts

@@ -396,8 +396,9 @@ export class DriveService {
 			);
 	}
 
+	// Expire oldest file (without avatar or banner) of remote user
 	@bindThis
-	private async deleteOldFile(user: RemoteUser) {
+	private async expireOldFile(user: RemoteUser, driveCapacity: number) {
 		const q = this.driveFilesRepository.createQueryBuilder('file')
 			.where('file.userId = :userId', { userId: user.id })
 			.andWhere('file.isLink = FALSE');
@@ -410,12 +411,17 @@ export class DriveService {
 			q.andWhere('file.id != :bannerId', { bannerId: user.bannerId });
 		}
 
+		//This selete is hard coded, be careful if change database schema
+		q.addSelect('SUM("file"."size") OVER (ORDER BY "file"."id" DESC ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)', 'acc_usage');
 		q.orderBy('file.id', 'ASC');
 
-		const oldFile = await q.getOne();
+		const fileList = await q.getRawMany();
+		const exceedFileIds = fileList.filter((x: any) => x.acc_usage > driveCapacity).map((x: any) => x.file_id);
 
-		if (oldFile) {
-			this.deleteFile(oldFile, true);
+		for (const fileId of exceedFileIds) {
+			const file = await this.driveFilesRepository.findOneBy({ id: fileId });
+			if (file == null) continue;
+			this.deleteFile(file, true);
 		}
 	}
 
@@ -489,22 +495,19 @@ export class DriveService {
 		//#region Check drive usage
 		if (user && !isLink) {
 			const usage = await this.driveFileEntityService.calcDriveUsageOf(user);
+			const isLocalUser = this.userEntityService.isLocalUser(user);
 
 			const policies = await this.roleService.getUserPolicies(user.id);
 			const driveCapacity = 1024 * 1024 * policies.driveCapacityMb;
 			this.registerLogger.debug('drive capacity override applied');
 			this.registerLogger.debug(`overrideCap: ${driveCapacity}bytes, usage: ${usage}bytes, u+s: ${usage + info.size}bytes`);
 
-			this.registerLogger.debug(`drive usage is ${usage} (max: ${driveCapacity})`);
-
 			// If usage limit exceeded
-			if (usage + info.size > driveCapacity) {
-				if (this.userEntityService.isLocalUser(user)) {
+			if (driveCapacity < usage + info.size) {
+				if (isLocalUser) {
 					throw new IdentifiableError('c6244ed2-a39a-4e1c-bf93-f0fbd7764fa6', 'No free space.');
-				} else {
-				// (アバターまたはバナーを含まず)最も古いファイルを削除する
-					this.deleteOldFile(await this.usersRepository.findOneByOrFail({ id: user.id }) as RemoteUser);
 				}
+				await this.expireOldFile(await this.usersRepository.findOneByOrFail({ id: user.id }) as RemoteUser, driveCapacity - info.size);
 			}
 		}
 		//#endregion

packages/backend/src/core/entities/ChannelEntityService.ts

@@ -84,7 +84,7 @@ export class ChannelEntityService {
 			} : {}),
 
 			...(detailed ? {
-				pinnedNotes: await this.noteEntityService.packMany(pinnedNotes, me),
+				pinnedNotes: (await this.noteEntityService.packMany(pinnedNotes, me)).sort((a, b) => channel.pinnedNoteIds.indexOf(a.id) - channel.pinnedNoteIds.indexOf(b.id)),
 			} : {}),
 		};
 	}

packages/backend/src/core/entities/UserEntityService.ts

@@ -12,7 +12,7 @@ import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
 import type { Instance } from '@/models/entities/Instance.js';
 import type { LocalUser, RemoteUser, User } from '@/models/entities/User.js';
 import { birthdaySchema, descriptionSchema, localUsernameSchema, locationSchema, nameSchema, passwordSchema } from '@/models/entities/User.js';
-import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, ChannelFollowingsRepository, UserNotePiningsRepository, UserProfilesRepository, InstancesRepository, AnnouncementReadsRepository, AnnouncementsRepository, PagesRepository, UserProfile, RenoteMutingsRepository } from '@/models/index.js';
+import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, ChannelFollowingsRepository, UserNotePiningsRepository, UserProfilesRepository, InstancesRepository, AnnouncementReadsRepository, AnnouncementsRepository, PagesRepository, UserProfile, RenoteMutingsRepository, UserMemoRepository } from '@/models/index.js';
 import { bindThis } from '@/decorators.js';
 import { RoleService } from '@/core/RoleService.js';
 import { ApPersonService } from '@/core/activitypub/models/ApPersonService.js';
@@ -113,6 +113,9 @@ export class UserEntityService implements OnModuleInit {
 
 		@Inject(DI.pagesRepository)
 		private pagesRepository: PagesRepository,
+		
+		@Inject(DI.userMemosRepository)
+		private userMemosRepository: UserMemoRepository,
 
 		//private noteEntityService: NoteEntityService,
 		//private driveFileEntityService: DriveFileEntityService,
@@ -409,6 +412,10 @@ export class UserEntityService implements OnModuleInit {
 					isAdministrator: role.isAdministrator,
 					displayOrder: role.displayOrder,
 				}))),
+				memo: meId == null ? null : await this.userMemosRepository.findOneBy({
+					userId: meId,
+					targetUserId: user.id,
+				}).then(row => row?.memo ?? null),
 			} : {}),
 
 			...(opts.detail && isMe ? {

packages/backend/src/di-symbols.ts

@@ -70,5 +70,6 @@ export const DI = {
 	roleAssignmentsRepository: Symbol('roleAssignmentsRepository'),
 	flashsRepository: Symbol('flashsRepository'),
 	flashLikesRepository: Symbol('flashLikesRepository'),
+	userMemosRepository: Symbol('userMemosRepository'),
 	//#endregion
 };

packages/backend/src/models/RepositoryModule.ts

@@ -1,6 +1,6 @@
 import { Module } from '@nestjs/common';
 import { DI } from '@/di-symbols.js';
-import { User, Note, Announcement, AnnouncementRead, App, NoteFavorite, NoteThreadMuting, NoteReaction, NoteUnread, Poll, PollVote, UserProfile, UserKeypair, UserPending, AttestationChallenge, UserSecurityKey, UserPublickey, UserList, UserListJoining, UserNotePining, UserIp, UsedUsername, Following, FollowRequest, Instance, Emoji, DriveFile, DriveFolder, Meta, Muting, RenoteMuting, Blocking, SwSubscription, Hashtag, AbuseUserReport, RegistrationTicket, AuthSession, AccessToken, Signin, Page, PageLike, GalleryPost, GalleryLike, ModerationLog, Clip, ClipNote, Antenna, PromoNote, PromoRead, Relay, MutedNote, Channel, ChannelFollowing, ChannelFavorite, RegistryItem, Webhook, Ad, PasswordResetRequest, RetentionAggregation, FlashLike, Flash, Role, RoleAssignment, ClipFavorite } from './index.js';
+import { User, Note, Announcement, AnnouncementRead, App, NoteFavorite, NoteThreadMuting, NoteReaction, NoteUnread, Poll, PollVote, UserProfile, UserKeypair, UserPending, AttestationChallenge, UserSecurityKey, UserPublickey, UserList, UserListJoining, UserNotePining, UserIp, UsedUsername, Following, FollowRequest, Instance, Emoji, DriveFile, DriveFolder, Meta, Muting, RenoteMuting, Blocking, SwSubscription, Hashtag, AbuseUserReport, RegistrationTicket, AuthSession, AccessToken, Signin, Page, PageLike, GalleryPost, GalleryLike, ModerationLog, Clip, ClipNote, Antenna, PromoNote, PromoRead, Relay, MutedNote, Channel, ChannelFollowing, ChannelFavorite, RegistryItem, Webhook, Ad, PasswordResetRequest, RetentionAggregation, FlashLike, Flash, Role, RoleAssignment, ClipFavorite, UserMemo } from './index.js';
 import type { DataSource } from 'typeorm';
 import type { Provider } from '@nestjs/common';
 
@@ -388,6 +388,12 @@ const $roleAssignmentsRepository: Provider = {
 	inject: [DI.db],
 };
 
+const $userMemosRepository: Provider = {
+	provide: DI.userMemosRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserMemo),
+	inject: [DI.db],
+};
+
 @Module({
 	imports: [
 	],
@@ -456,6 +462,7 @@ const $roleAssignmentsRepository: Provider = {
 		$roleAssignmentsRepository,
 		$flashsRepository,
 		$flashLikesRepository,
+		$userMemosRepository,
 	],
 	exports: [
 		$usersRepository,
@@ -522,6 +529,7 @@ const $roleAssignmentsRepository: Provider = {
 		$roleAssignmentsRepository,
 		$flashsRepository,
 		$flashLikesRepository,
+		$userMemosRepository,
 	],
 })
 export class RepositoryModule {}

packages/backend/src/models/entities/UserMemo.ts

@@ -0,0 +1,42 @@
+import { Column, Entity, Index, JoinColumn, ManyToOne, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['userId', 'targetUserId'], { unique: true })
+export class UserMemo {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of author.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of target user.',
+	})
+	public targetUserId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public targetUser: User | null;
+
+	@Column('varchar', {
+		length: 2048,
+		comment: 'Memo.',
+	})
+	public memo: string;
+}

packages/backend/src/models/index.ts

@@ -55,6 +55,7 @@ import { UserPending } from '@/models/entities/UserPending.js';
 import { UserProfile } from '@/models/entities/UserProfile.js';
 import { UserPublickey } from '@/models/entities/UserPublickey.js';
 import { UserSecurityKey } from '@/models/entities/UserSecurityKey.js';
+import { UserMemo } from '@/models/entities/UserMemo.js';
 import { Webhook } from '@/models/entities/Webhook.js';
 import { Channel } from '@/models/entities/Channel.js';
 import { RetentionAggregation } from '@/models/entities/RetentionAggregation.js';
@@ -129,6 +130,7 @@ export {
 	RoleAssignment,
 	Flash,
 	FlashLike,
+	UserMemo,
 };
 
 export type AbuseUserReportsRepository = Repository<AbuseUserReport>;
@@ -195,3 +197,4 @@ export type RolesRepository = Repository<Role>;
 export type RoleAssignmentsRepository = Repository<RoleAssignment>;
 export type FlashsRepository = Repository<Flash>;
 export type FlashLikesRepository = Repository<FlashLike>;
+export type UserMemoRepository = Repository<UserMemo>;

packages/backend/src/models/json-schema/user.ts

@@ -250,6 +250,10 @@ export const packedUserDetailedNotMeOnlySchema = {
 			type: 'boolean',
 			nullable: false, optional: true,
 		},
+		memo: {
+			type: 'string',
+			nullable: false, optional: true,
+		},
 		//#endregion
 	},
 } as const;

packages/backend/src/postgres.ts

@@ -70,6 +70,7 @@ import { Role } from '@/models/entities/Role.js';
 import { RoleAssignment } from '@/models/entities/RoleAssignment.js';
 import { Flash } from '@/models/entities/Flash.js';
 import { FlashLike } from '@/models/entities/FlashLike.js';
+import { UserMemo } from '@/models/entities/UserMemo.js';
 
 import { Config } from '@/config.js';
 import MisskeyLogger from '@/logger.js';
@@ -183,6 +184,7 @@ export const entities = [
 	RoleAssignment,
 	Flash,
 	FlashLike,
+	UserMemo,
 	...charts,
 ];
 

packages/backend/src/server/api/EndpointsModule.ts

@@ -330,6 +330,7 @@ import * as ep___users_search from './endpoints/users/search.js';
 import * as ep___users_show from './endpoints/users/show.js';
 import * as ep___users_stats from './endpoints/users/stats.js';
 import * as ep___users_achievements from './endpoints/users/achievements.js';
+import * as ep___users_updateMemo from './endpoints/users/update-memo.js';
 import * as ep___fetchRss from './endpoints/fetch-rss.js';
 import * as ep___retention from './endpoints/retention.js';
 import { GetterService } from './GetterService.js';
@@ -665,6 +666,7 @@ const $users_search: Provider = { provide: 'ep:users/search', useClass: ep___use
 const $users_show: Provider = { provide: 'ep:users/show', useClass: ep___users_show.default };
 const $users_stats: Provider = { provide: 'ep:users/stats', useClass: ep___users_stats.default };
 const $users_achievements: Provider = { provide: 'ep:users/achievements', useClass: ep___users_achievements.default };
+const $users_updateMemo: Provider = { provide: 'ep:users/update-memo', useClass: ep___users_updateMemo.default };
 const $fetchRss: Provider = { provide: 'ep:fetch-rss', useClass: ep___fetchRss.default };
 const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention.default };
 
@@ -1004,6 +1006,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$users_show,
 		$users_stats,
 		$users_achievements,
+		$users_updateMemo,
 		$fetchRss,
 		$retention,
 	],
@@ -1335,6 +1338,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$users_show,
 		$users_stats,
 		$users_achievements,
+		$users_updateMemo,
 		$fetchRss,
 		$retention,
 	],

packages/backend/src/server/api/endpoints.ts

@@ -330,6 +330,7 @@ import * as ep___users_search from './endpoints/users/search.js';
 import * as ep___users_show from './endpoints/users/show.js';
 import * as ep___users_stats from './endpoints/users/stats.js';
 import * as ep___users_achievements from './endpoints/users/achievements.js';
+import * as ep___users_updateMemo from './endpoints/users/update-memo.js';
 import * as ep___fetchRss from './endpoints/fetch-rss.js';
 import * as ep___retention from './endpoints/retention.js';
 
@@ -663,6 +664,7 @@ const eps = [
 	['users/show', ep___users_show],
 	['users/stats', ep___users_stats],
 	['users/achievements', ep___users_achievements],
+	['users/update-memo', ep___users_updateMemo],
 	['fetch-rss', ep___fetchRss],
 	['retention', ep___retention],
 ];

packages/backend/src/server/api/endpoints/antennas/notes.ts

@@ -76,18 +76,18 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				throw new ApiError(meta.errors.noSuchAntenna);
 			}
 
-			const limit = ps.limit + (ps.untilId ? 1 : 0); // untilIdに指定したものも含まれるため+1
+			const limit = ps.limit + (ps.untilId ? 1 : 0) + (ps.sinceId ? 1 : 0); // untilIdに指定したものも含まれるため+1
 			const noteIdsRes = await this.redisClient.xrevrange(
 				`antennaTimeline:${antenna.id}`,
-				ps.untilId ? this.idService.parse(ps.untilId).date.getTime() : '+',
-				'-',
+				ps.untilId ? this.idService.parse(ps.untilId).date.getTime() : ps.untilDate ?? '+',
+				ps.sinceId ? this.idService.parse(ps.sinceId).date.getTime() : ps.sinceDate ?? '-',
 				'COUNT', limit);
 
 			if (noteIdsRes.length === 0) {
 				return [];
 			}
 
-			const noteIds = noteIdsRes.map(x => x[1][1]).filter(x => x !== ps.untilId);
+			const noteIds = noteIdsRes.map(x => x[1][1]).filter(x => x !== ps.untilId && x !== ps.sinceId);
 
 			if (noteIds.length === 0) {
 				return [];

packages/backend/src/server/api/endpoints/roles/notes.ts

@@ -71,18 +71,18 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				throw new ApiError(meta.errors.noSuchRole);
 			}
 
-			const limit = ps.limit + (ps.untilId ? 1 : 0); // untilIdに指定したものも含まれるため+1
+			const limit = ps.limit + (ps.untilId ? 1 : 0) + (ps.sinceId ? 1 : 0); // untilIdに指定したものも含まれるため+1
 			const noteIdsRes = await this.redisClient.xrevrange(
 				`roleTimeline:${role.id}`,
-				ps.untilId ? this.idService.parse(ps.untilId).date.getTime() : '+',
-				'-',
+				ps.untilId ? this.idService.parse(ps.untilId).date.getTime() : ps.untilDate ?? '+',
+				ps.sinceId ? this.idService.parse(ps.sinceId).date.getTime() : ps.sinceDate ?? '-',
 				'COUNT', limit);
 
 			if (noteIdsRes.length === 0) {
 				return [];
 			}
 
-			const noteIds = noteIdsRes.map(x => x[1][1]).filter(x => x !== ps.untilId);
+			const noteIds = noteIdsRes.map(x => x[1][1]).filter(x => x !== ps.untilId && x !== ps.sinceId);
 
 			if (noteIds.length === 0) {
 				return [];

packages/backend/src/server/api/endpoints/users/search-by-username-and-host.ts

@@ -41,8 +41,6 @@ export const paramDef = {
 	],
 } as const;
 
-// TODO: avatar,bannerをJOINしたいけどエラーになる
-
 // eslint-disable-next-line import/no-default-export
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> {

packages/backend/src/server/api/endpoints/users/update-memo.ts

@@ -0,0 +1,85 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import type { UserMemoRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { GetterService } from '@/server/api/GetterService.js';
+import { ApiError } from '../../error.js';
+
+export const meta = {
+	tags: ['account'],
+
+	requireCredential: true,
+
+	kind: 'write:account',
+
+	errors: {
+		noSuchUser: {
+			message: 'No such user.',
+			code: 'NO_SUCH_USER',
+			id: '6fef56f3-e765-4957-88e5-c6f65329b8a5',
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		userId: { type: 'string', format: 'misskey:id' },
+		memo: {
+			type: 'string',
+			nullable: true,
+			description: 'A personal memo for the target user. If null or empty, delete the memo.',
+		},
+	},
+	required: ['userId', 'memo'],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userMemosRepository)
+		private userMemosRepository: UserMemoRepository,
+		private getterService: GetterService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get target
+			const target = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// 引数がnullか空文字であれば、パーソナルメモを削除する
+			if (ps.memo === '' || ps.memo == null) {
+				await this.userMemosRepository.delete({
+					userId: me.id,
+					targetUserId: target.id,
+				});
+				return;
+			}
+
+			// 以前に作成されたパーソナルメモがあるかどうか確認
+			const previousMemo = await this.userMemosRepository.findOneBy({
+				userId: me.id,
+				targetUserId: target.id,
+			});
+
+			if (!previousMemo) {
+				await this.userMemosRepository.insert({
+					id: this.idService.genId(),
+					userId: me.id,
+					targetUserId: target.id,
+					memo: ps.memo,
+				});
+			} else {
+				await this.userMemosRepository.update(previousMemo.id, {
+					userId: me.id,
+					targetUserId: target.id,
+					memo: ps.memo,
+				});
+			}
+		});
+	}
+}

packages/backend/test/e2e/endpoints.ts

@@ -849,4 +849,84 @@ describe('Endpoints', () => {
 			assert.strictEqual(res.body.error.code, 'URL_PREVIEW_FAILED');
 		});
 	});
+
+	describe('パーソナルメモ機能のテスト', () => {
+		test('他者に関するメモを更新できる', async () => {
+			const memo = '10月まで低浮上とのこと。';
+
+			const res1 = await api('/users/update-memo', {
+				memo,
+				userId: bob.id,
+			}, alice);
+
+			const res2 = await api('/users/show', {
+				userId: bob.id,
+			}, alice);
+			assert.strictEqual(res1.status, 204);
+			assert.strictEqual(res2.body?.memo, memo);
+		});
+
+		test('自分に関するメモを更新できる', async () => {
+			const memo = 'チケットを月末までに買う。';
+
+			const res1 = await api('/users/update-memo', {
+				memo,
+				userId: alice.id,
+			}, alice);
+
+			const res2 = await api('/users/show', {
+				userId: alice.id,
+			}, alice);
+			assert.strictEqual(res1.status, 204);
+			assert.strictEqual(res2.body?.memo, memo);
+		});
+
+		test('メモを削除できる', async () => {
+			const memo = '10月まで低浮上とのこと。';
+
+			await api('/users/update-memo', {
+				memo,
+				userId: bob.id,
+			}, alice);
+
+			await api('/users/update-memo', {
+				memo: '',
+				userId: bob.id,
+			}, alice);
+
+			const res = await api('/users/show', {
+				userId: bob.id,
+			}, alice);
+
+			assert.strictEqual('memo' in res.body, false);
+		});
+
+		test('メモは個人ごとに独立して保存される', async () => {
+			const memoAliceToBob = '10月まで低浮上とのこと。';
+			const memoCarolToBob = '例の件について今度問いただす。';
+
+			await Promise.all([
+				api('/users/update-memo', {
+					memo: memoAliceToBob,
+					userId: bob.id,
+				}, alice),
+				api('/users/update-memo', {
+					memo: memoCarolToBob,
+					userId: bob.id,
+				}, carol),
+			]);
+
+			const [resAlice, resCarol] = await Promise.all([
+				api('/users/show', {
+					userId: bob.id,
+				}, alice),
+				api('/users/show', {
+					userId: bob.id,
+				}, carol),
+			]);
+
+			assert.strictEqual(resAlice.body.memo, memoAliceToBob);
+			assert.strictEqual(resCarol.body.memo, memoCarolToBob);
+		});
+	});
 });

packages/frontend/.storybook/generate.tsx

@@ -118,7 +118,7 @@ function toStories(component: string): string {
 				.replace(/[-.]|^(?=\d)/g, '_')
 				.replace(/(?<=^[^A-Z_]*$)/, '_')}
 		/> as estree.Identifier;
-	const parameters = (
+	const parameters =
 		<object-expression
 			properties={[
 				<property
@@ -137,9 +137,8 @@ function toStories(component: string): string {
 					  ]
 					: []),
 			]}
-		/>
-	) as estree.ObjectExpression;
-	const program = (
+		/> as estree.ObjectExpression;
+	const program =
 		<program
 			body={[
 				<import-declaration
@@ -379,11 +378,11 @@ function toStories(component: string): string {
 					declaration={(<identifier name='meta' />) as estree.Identifier}
 				/> as estree.ExportDefaultDeclaration,
 			]}
-		/>
-	) as estree.Program;
+		/> as estree.Program;
 	return format(
 		'/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' +
 			'/* eslint-disable import/no-default-export */\n' +
+			'/* eslint-disable import/no-duplicates */\n' +
 			generate(program, { generator }) +
 			(hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
 		{
@@ -397,6 +396,7 @@ function toStories(component: string): string {
 // glob('src/{components,pages,ui,widgets}/**/*.vue')
 Promise.all([
 	glob('src/components/global/*.vue'),
+	glob('src/components/Mk{A,B}*.vue'),
 	glob('src/components/MkGalleryPostPreview.vue'),
 	glob('src/pages/user/home.vue'),
 ])

packages/frontend/.storybook/mocks.ts

@@ -8,6 +8,16 @@ export const onUnhandledRequest = ((req, print) => {
 }) satisfies SharedOptions['onUnhandledRequest'];
 
 export const commonHandlers = [
+	rest.get('/fluent-emoji/:codepoints.png', async (req, res, ctx) => {
+		const { codepoints } = req.params;
+		const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
+		return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
+	}),
+	rest.get('/fluent-emojis/:codepoints.png', async (req, res, ctx) => {
+		const { codepoints } = req.params;
+		const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
+		return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
+	}),
 	rest.get('/twemoji/:codepoints.svg', async (req, res, ctx) => {
 		const { codepoints } = req.params;
 		const value = await fetch(`https://unpkg.com/@discordapp/twemoji@14.1.2/dist/svg/${codepoints}.svg`).then((response) => response.blob());

packages/frontend/.storybook/preview-head.html

@@ -1,3 +1,5 @@
+<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true" as="image" type="image/png" crossorigin="anonymous">
+<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true" as="image" type="image/jpeg" crossorigin="anonymous">
 <link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@2.12.0/tabler-icons.min.css">
 <link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
 <style>

packages/frontend/.vscode/storybook.code-snippets

@@ -0,0 +1,84 @@
+{
+	"Storybook Story Impl File": {
+		"scope": "typescript",
+		"prefix": "storyimpl",
+		"body": [
+			"/* eslint-disable @typescript-eslint/explicit-function-return-type */",
+			"import { StoryObj } from '@storybook/vue3';",
+			"import $1 from './$1.vue';",
+			"export const Default = {",
+			"\trender(args) {",
+			"\t\treturn {",
+			"\t\t\tcomponents: {",
+			"\t\t\t\t$1,",
+			"\t\t\t},",
+			"\t\t\tsetup() {",
+			"\t\t\t\treturn {",
+			"\t\t\t\t\targs,",
+			"\t\t\t\t};",
+			"\t\t\t},",
+			"\t\t\tcomputed: {",
+			"\t\t\t\tprops() {",
+			"\t\t\t\t\treturn {",
+			"\t\t\t\t\t\t...this.args,",
+			"\t\t\t\t\t};",
+			"\t\t\t\t},",
+			"\t\t\t},",
+			"\t\t\ttemplate: '<$1 v-bind=\"props\" />',",
+			"\t\t};",
+			"\t},",
+			"\targs: {",
+			"\t\t$2",
+			"\t},",
+			"\tparameters: {",
+			"\t\tlayout: 'centered',",
+			"\t},",
+			"} satisfies StoryObj<typeof $1>;",
+			""
+		]
+	},
+	"Storybook Story Impl File (w/ events)": {
+		"scope": "typescript",
+		"prefix": "storyimplevent",
+		"body": [
+			"/* eslint-disable @typescript-eslint/explicit-function-return-type */",
+			"import { action } from '@storybook/addon-actions';",
+			"import { StoryObj } from '@storybook/vue3';",
+			"import $1 from './$1.vue';",
+			"export const Default = {",
+			"\trender(args) {",
+			"\t\treturn {",
+			"\t\t\tcomponents: {",
+			"\t\t\t\t$1,",
+			"\t\t\t},",
+			"\t\t\tsetup() {",
+			"\t\t\t\treturn {",
+			"\t\t\t\t\targs,",
+			"\t\t\t\t};",
+			"\t\t\t},",
+			"\t\t\tcomputed: {",
+			"\t\t\t\tprops() {",
+			"\t\t\t\t\treturn {",
+			"\t\t\t\t\t\t...this.args,",
+			"\t\t\t\t\t};",
+			"\t\t\t\t},",
+			"\t\t\t\tevents() {",
+			"\t\t\t\t\treturn {",
+			"\t\t\t\t\t\t$3",
+			"\t\t\t\t\t};",
+			"\t\t\t\t},",
+			"\t\t\t},",
+			"\t\t\ttemplate: '<$1 v-bind=\"props\" v-on=\"events\" />',",
+			"\t\t};",
+			"\t},",
+			"\targs: {",
+			"\t\t$2",
+			"\t},",
+			"\tparameters: {",
+			"\t\tlayout: 'centered',",
+			"\t},",
+			"} satisfies StoryObj<typeof $1>;",
+			""
+		]
+	}
+}

packages/frontend/package.json

@@ -74,6 +74,7 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
+		"@storybook/addon-actions": "7.0.2",
 		"@storybook/addon-essentials": "7.0.2",
 		"@storybook/addon-interactions": "7.0.2",
 		"@storybook/addon-links": "7.0.2",

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

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { abuseUserReport } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAbuseReport from './MkAbuseReport.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAbuseReport,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						resolved: action('resolved'),
+					};
+				},
+			},
+			template: '<MkAbuseReport v-bind="props" v-on="events" />',
+		};
+	},
+	args: {
+		report: abuseUserReport(),
+	},
+	parameters: {
+		layout: 'fullscreen',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/admin/resolve-abuse-user-report', async (req, res, ctx) => {
+					action('POST /api/admin/resolve-abuse-user-report')(await req.json());
+					return res(ctx.json({}));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAbuseReport>;

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

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAbuseReportWindow from './MkAbuseReportWindow.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAbuseReportWindow,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						'closed': action('closed'),
+					};
+				},
+			},
+			template: '<MkAbuseReportWindow v-bind="props" v-on="events" />',
+		};
+	},
+	args: {
+		user: userDetailed(),
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/report-abuse', async (req, res, ctx) => {
+					action('POST /api/users/report-abuse')(await req.json());
+					return res(ctx.json({}));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAbuseReportWindow>;

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

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { userDetailed } from '../../.storybook/fakes';
+import MkAccountMoved from './MkAccountMoved.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAccountMoved,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkAccountMoved v-bind="props" />',
+		};
+	},
+	args: {
+		username: userDetailed().username,
+		host: userDetailed().host,
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAccountMoved>;

packages/frontend/src/components/MkAccountMoved.vue

@@ -2,7 +2,7 @@
 <div :class="$style.root">
 	<i class="ti ti-plane-departure" style="margin-right: 8px;"></i>
 	{{ i18n.ts.accountMoved }}
-	<MkMention :class="$style.link" :username="acct" :host="host ?? localHost"/>
+	<MkMention :class="$style.link" :username="username" :host="host ?? localHost"/>
 </div>
 </template>
 
@@ -12,7 +12,7 @@ import { i18n } from '@/i18n';
 import { host as localHost } from '@/config';
 
 defineProps<{
-	acct: string;
+	username: string;
 	host: string;
 }>();
 </script>

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

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAchievements from './MkAchievements.vue';
+import { ACHIEVEMENT_TYPES } from '@/scripts/achievements';
+export const Empty = {
+	render(args) {
+		return {
+			components: {
+				MkAchievements,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkAchievements v-bind="props" />',
+		};
+	},
+	args: {
+		user: userDetailed(),
+	},
+	parameters: {
+		layout: 'fullscreen',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/achievements', (req, res, ctx) => {
+					return res(ctx.json([]));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAchievements>;
+export const All = {
+	...Empty,
+	parameters: {
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/achievements', (req, res, ctx) => {
+					return res(ctx.json(ACHIEVEMENT_TYPES.map((name) => ({ name, unlockedAt: 0 }))));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAchievements>;

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { StoryObj } from '@storybook/vue3';
 import MkAnalogClock from './MkAnalogClock.vue';
+import isChromatic from 'chromatic';
 export const Default = {
 	render(args) {
 		return {
@@ -22,6 +23,14 @@ export const Default = {
 			template: '<MkAnalogClock v-bind="props" />',
 		};
 	},
+	args: {
+		now: isChromatic() ? () => new Date('2023-01-01T10:10:30') : undefined,
+	},
+	decorators: [
+		() => ({
+			template: '<div style="container-type:inline-size;height:100%"><div style="height:100cqmin;margin:auto;width:100cqmin"><story/></div></div>',
+		}),
+	],
 	parameters: {
 		layout: 'fullscreen',
 	},

packages/frontend/src/components/MkAnalogClock.vue

@@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
 	graduations?: 'none' | 'dots' | 'numbers';
 	fadeGraduations?: boolean;
 	sAnimation?: 'none' | 'elastic' | 'easeOut';
+	now?: () => Date;
 }>(), {
 	numbers: false,
 	thickness: 0.1,
@@ -107,6 +108,7 @@ const props = withDefaults(defineProps<{
 	graduations: 'dots',
 	fadeGraduations: true,
 	sAnimation: 'elastic',
+	now: () => new Date(),
 });
 
 const graduationsMajor = computed(() => {
@@ -145,11 +147,17 @@ let disableSAnimate = $ref(false);
 let sOneRound = false;
 
 function tick() {
-	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	const now = props.now();
+	now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + props.offset);
+	const previousS = s;
+	const previousM = m;
+	const previousH = h;
 	s = now.getSeconds();
 	m = now.getMinutes();
 	h = now.getHours();
+	if (previousS === s && previousM === m && previousH === h) {
+		return;
+	}
 	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
 	mAngle = Math.PI * (m + s / 60) / 30;
 	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)

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

@@ -0,0 +1,2 @@
+import MkAsUi from './MkAsUi.vue';
+void MkAsUi;

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

@@ -0,0 +1,176 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { expect } from '@storybook/jest';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAutocomplete from './MkAutocomplete.vue';
+import MkInput from './MkInput.vue';
+import { tick } from '@/scripts/test-utils';
+const common = {
+	render(args) {
+		return {
+			components: {
+				MkAutocomplete,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						open: action('open'),
+						closed: action('closed'),
+					};
+				},
+			},
+			template: '<MkAutocomplete v-bind="props" v-on="events" :textarea="textarea" />',
+		};
+	},
+	args: {
+		close: action('close'),
+		x: 0,
+		y: 0,
+	},
+	decorators: [
+		(_, context) => ({
+			components: {
+				MkInput,
+			},
+			data() {
+				return {
+					q: context.args.q,
+					textarea: null,
+				};
+			},
+			methods: {
+				inputMounted() {
+					this.textarea = this.$refs.input.$refs.inputEl;
+				},
+			},
+			template: '<MkInput v-model="q" ref="input" @vue:mounted="inputMounted"/><story v-if="textarea" :q="q" :textarea="textarea"/>',
+		}),
+	],
+	parameters: {
+		controls: {
+			exclude: ['textarea'],
+		},
+		layout: 'centered',
+		chromatic: {
+			// FIXME: flaky
+			disableSnapshot: true,
+		},
+	},
+} satisfies StoryObj<typeof MkAutocomplete>;
+export const User = {
+	...common,
+	args: {
+		...common.args,
+		type: 'user',
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const input = canvas.getByRole('combobox');
+		await waitFor(() => userEvent.hover(input));
+		await waitFor(() => userEvent.click(input));
+		await waitFor(() => userEvent.type(input, 'm'));
+		await waitFor(async () => {
+			await userEvent.type(input, ' ', { delay: 256 });
+			await tick();
+			return await expect(canvas.getByRole('list')).toBeInTheDocument();
+		}, { timeout: 16384 });
+	},
+	parameters: {
+		...common.parameters,
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/search-by-username-and-host', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('44', 'mizuki', 'misskey-hub.net', 'Mizuki'),
+						userDetailed('49', 'momoko', 'misskey-hub.net', 'Momoko'),
+					]));
+				}),
+			],
+		},
+	},
+};
+export const Hashtag = {
+	...common,
+	args: {
+		...common.args,
+		type: 'hashtag',
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const input = canvas.getByRole('combobox');
+		await waitFor(() => userEvent.hover(input));
+		await waitFor(() => userEvent.click(input));
+		await waitFor(() => userEvent.type(input, '気象'));
+		await waitFor(async () => {
+			await userEvent.type(input, ' ', { delay: 256 });
+			await tick();
+			return await expect(canvas.getByRole('list')).toBeInTheDocument();
+		}, { interval: 256, timeout: 16384 });
+	},
+	parameters: {
+		...common.parameters,
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/hashtags/search', (req, res, ctx) => {
+					return res(ctx.json([
+						'気象警報注意報',
+						'気象警報',
+						'気象情報',
+					]));
+				}),
+			],
+		},
+	},
+};
+export const Emoji = {
+	...common,
+	args: {
+		...common.args,
+		type: 'emoji',
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const input = canvas.getByRole('combobox');
+		await waitFor(() => userEvent.hover(input));
+		await waitFor(() => userEvent.click(input));
+		await waitFor(() => userEvent.type(input, 'smile'));
+		await waitFor(async () => {
+			await userEvent.type(input, ' ', { delay: 256 });
+			await tick();
+			return await expect(canvas.getByRole('list')).toBeInTheDocument();
+		}, { interval: 256, timeout: 16384 });
+	},
+} satisfies StoryObj<typeof MkAutocomplete>;
+export const MfmTag = {
+	...common,
+	args: {
+		...common.args,
+		type: 'mfmTag',
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const input = canvas.getByRole('combobox');
+		await waitFor(() => userEvent.hover(input));
+		await waitFor(() => userEvent.click(input));
+		await waitFor(async () => {
+			await tick();
+			return await expect(canvas.getByRole('list')).toBeInTheDocument();
+		}, { interval: 256, timeout: 16384 });
+	},
+} satisfies StoryObj<typeof MkAutocomplete>;

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

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { userDetailed } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkAvatars from './MkAvatars.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAvatars,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkAvatars v-bind="props" />',
+		};
+	},
+	args: {
+		userIds: ['17', '20', '18'],
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/users/show', (req, res, ctx) => {
+					return res(ctx.json([
+						userDetailed('17'),
+						userDetailed('20'),
+						userDetailed('18'),
+					]));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkAvatars>;

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-/* eslint-disable import/no-duplicates */
+import { action } from '@storybook/addon-actions';
 import { StoryObj } from '@storybook/vue3';
 import MkButton from './MkButton.vue';
 export const Default = {
@@ -20,11 +20,60 @@ export const Default = {
 						...this.args,
 					};
 				},
+				events() {
+					return {
+						click: action('click'),
+					};
+				},
 			},
-			template: '<MkButton v-bind="props">Text</MkButton>',
+			template: '<MkButton v-bind="props" v-on="events">Text</MkButton>',
 		};
 	},
+	args: {
+	},
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkButton>;
+export const Primary = {
+	...Default,
+	args: {
+		...Default.args,
+		primary: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Gradate = {
+	...Default,
+	args: {
+		...Default.args,
+		gradate: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Rounded = {
+	...Default,
+	args: {
+		...Default.args,
+		rounded: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Danger = {
+	...Default,
+	args: {
+		...Default.args,
+		danger: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Small = {
+	...Default,
+	args: {
+		...Default.args,
+		small: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Large = {
+	...Default,
+	args: {
+		...Default.args,
+		large: true,
+	},
+} satisfies StoryObj<typeof MkButton>;

packages/frontend/src/components/MkNote.vue

@@ -484,6 +484,11 @@ function showReactions(): void {
 		}
 	}
 
+	.footer {
+		position: relative;
+		z-index: 1;
+	}
+
 	&:hover > .article > .main > .footer > .footerButton {
 		opacity: 1;
 	}

packages/frontend/src/components/MkPostForm.vue

@@ -900,27 +900,28 @@ defineExpose({
 }
 
 .headerLeft {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(36px, 50px));
-	grid-template-rows: minmax(40px, 100%);
+	display: flex;
+	flex: 0 1 100px;
 }
 
 .cancel {
 	padding: 0;
 	font-size: 1em;
 	height: 100%;
+	flex: 0 1 50px;
 }
 
 .account {
 	height: 100%;
 	display: inline-flex;
 	vertical-align: bottom;
+	flex: 0 1 50px;
 }
 
 .avatar {
 	width: 28px;
 	height: 28px;
-	margin: auto 0;
+	margin: auto;
 }
 
 .headerRight {

packages/frontend/src/components/global/MkError.stories.impl.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
 import { expect } from '@storybook/jest';
 import { waitFor } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
@@ -20,14 +21,21 @@ export const Default = {
 						...this.args,
 					};
 				},
+				events() {
+					return {
+						retry: action('retry'),
+					};
+				},
 			},
-			template: '<MkError v-bind="props" />',
+			template: '<MkError v-bind="props" v-on="events" />',
 		};
 	},
 	async play({ canvasElement }) {
 		await expect(canvasElement.firstElementChild).not.toBeNull();
 		await waitFor(async () => expect(canvasElement.firstElementChild?.classList).not.toContain('_transition_zoom-enter-active'));
 	},
+	args: {
+	},
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/config.ts

@@ -1,21 +1,22 @@
-import { miLocalStorage } from "./local-storage";
+import { miLocalStorage } from './local-storage';
 
 const address = new URL(location.href);
-const siteName = (document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement)?.content;
+const siteName = document.querySelector<HTMLMetaElement>('meta[property="og:site_name"]')?.content;
 
 export const host = address.host;
 export const hostname = address.hostname;
 export const url = address.origin;
 export const apiUrl = url + '/api';
 export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
-export const lang = miLocalStorage.getItem('lang');
+export const lang = miLocalStorage.getItem('lang') ?? 'en-US';
 export const langs = _LANGS_;
-export let locale = JSON.parse(miLocalStorage.getItem('locale'));
+const preParseLocale = miLocalStorage.getItem('locale');
+export let locale = preParseLocale ? JSON.parse(preParseLocale) : null;
 export const version = _VERSION_;
 export const instanceName = siteName === 'Misskey' ? host : siteName;
 export const ui = miLocalStorage.getItem('ui');
 export const debug = miLocalStorage.getItem('debug') === 'true';
 
-export function updateLocale(newLocale) {
+export function updateLocale(newLocale): void {
 	locale = newLocale;
 }

packages/frontend/src/init.ts

@@ -6,18 +6,6 @@ import 'vite/modulepreload-polyfill';
 
 import '@/style.scss';
 
-//#region account indexedDB migration
-import { set } from '@/scripts/idb-proxy';
-
-{
-	const accounts = miLocalStorage.getItem('accounts');
-	if (accounts) {
-		set('accounts', JSON.parse(accounts));
-		miLocalStorage.removeItem('accounts');
-	}
-}
-//#endregion
-
 import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
 import { compareVersions } from 'compare-versions';
 import JSON5 from 'json5';
@@ -42,11 +30,11 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
-import { deckStore } from './ui/deck/deck-store';
-import { miLocalStorage } from './local-storage';
-import { claimAchievement, claimedAchievements } from './scripts/achievements';
-import { fetchCustomEmojis } from './custom-emojis';
-import { mainRouter } from './router';
+import { deckStore } from '@/ui/deck/deck-store';
+import { miLocalStorage } from '@/local-storage';
+import { claimAchievement, claimedAchievements } from '@/scripts/achievements';
+import { fetchCustomEmojis } from '@/custom-emojis';
+import { mainRouter } from '@/router';
 
 console.info(`Misskey v${version}`);
 
@@ -55,7 +43,9 @@ if (_DEV_) {
 
 	console.info(`vue ${vueVersion}`);
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	(window as any).$i = $i;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	(window as any).$store = defaultStore;
 
 	window.addEventListener('error', event => {
@@ -184,7 +174,7 @@ fetchInstanceMetaPromise.then(() => {
 
 try {
 	await fetchCustomEmojis();
-} catch (err) {}
+} catch (err) { /* empty */ }
 
 const app = createApp(
 	new URLSearchParams(window.location.search).has('zen') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
@@ -212,20 +202,20 @@ await deckStore.ready;
 
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
-const rootEl = (() => {
+const rootEl = ((): HTMLElement => {
 	const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
 
-	const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+	const currentRoot = document.getElementById(MISSKEY_MOUNT_DIV_ID);
 
-	if (currentEl) {
+	if (currentRoot) {
 		console.warn('multiple import detected');
-		return currentEl;
+		return currentRoot;
 	}
 
-	const rootEl = document.createElement('div');
-	rootEl.id = MISSKEY_MOUNT_DIV_ID;
-	document.body.appendChild(rootEl);
-	return rootEl;
+	const root = document.createElement('div');
+	root.id = MISSKEY_MOUNT_DIV_ID;
+	document.body.appendChild(root);
+	return root;
 })();
 
 app.mount(rootEl);
@@ -256,8 +246,7 @@ if (lastVersion !== version) {
 				popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
 			}
 		}
-	} catch (err) {
-	}
+	} catch (err) { /* empty */ }
 }
 
 await defaultStore.ready;

packages/frontend/src/local-storage.ts

@@ -24,6 +24,7 @@ type Keys =
 	'customCss' |
 	'message_drafts' |
 	'scratchpad' |
+	'debug' |
 	`miux:${string}` |
 	`ui:folder:${string}` |
 	`themes:${string}` |
@@ -32,7 +33,7 @@ type Keys =
 	'emojis' // DEPRECATED, stored in indexeddb (13.9.0~);
 
 export const miLocalStorage = {
-	getItem: (key: Keys) => window.localStorage.getItem(key),
-	setItem: (key: Keys, value: string) => window.localStorage.setItem(key, value),
-	removeItem: (key: Keys) => window.localStorage.removeItem(key),
+	getItem: (key: Keys): string | null => window.localStorage.getItem(key),
+	setItem: (key: Keys, value: string): void => window.localStorage.setItem(key, value),
+	removeItem: (key: Keys): void => window.localStorage.removeItem(key),
 };

packages/frontend/src/pages/about-misskey.vue

@@ -218,6 +218,7 @@ const patrons = [
 	'Ebise Lutica',
 	'巣黒るい@リスケモ男の娘VTuber!',
 	'ふぇいぽむ',
+	'依古田イコ',
 ];
 
 let thereIsTreasure = $ref($i && !claimedAchievements.includes('foundTreasure'));

packages/frontend/src/pages/channels.vue

@@ -65,7 +65,7 @@ const props = defineProps<{
 }>();
 
 let key = $ref('');
-let tab = $ref('search');
+let tab = $ref('featured');
 let searchQuery = $ref('');
 let searchType = $ref('nameAndDescription');
 let channelPagination = $ref();

packages/frontend/src/pages/user/home.vue

@@ -7,7 +7,7 @@
 			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
 			<div class="profile _gaps">
-				<MkAccountMoved v-if="user.movedToUri" :host="user.movedToUri.host" :acct="user.movedToUri.username"/>
+				<MkAccountMoved v-if="user.movedToUri" :host="user.movedToUri.host" :username="user.movedToUri.username"/>
 				<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>
 
 				<div :key="user.id" class="main _panel">
@@ -21,6 +21,9 @@
 								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
 								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
 								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
+								<button v-if="!isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
+									<i class="ti ti-edit"/> {{ i18n.ts.addMemo }}
+								</button>
 							</div>
 						</div>
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
@@ -39,6 +42,17 @@
 							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
 						</div>
 					</div>
+					<div v-if="isEditingMemo || memoDraft" class="memo" :class="{'no-memo': !memoDraft}">
+						<div class="heading" v-text="i18n.ts.memo"/>
+						<textarea
+							ref="memoTextareaEl"
+							v-model="memoDraft"
+							rows="1"
+							@focus="isEditingMemo = true"
+							@blur="updateMemo"
+							@input="adjustMemoTextarea"
+						/>
+					</div>
 					<div v-if="user.roles.length > 0" class="roles">
 						<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">
 							<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
@@ -113,7 +127,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, onMounted, onUnmounted } from 'vue';
+import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import calcAge from 's-age';
 import * as misskey from 'misskey-js';
 import MkNote from '@/components/MkNote.vue';
@@ -133,6 +147,7 @@ import { $i } from '@/account';
 import { dateString } from '@/filters/date';
 import { confetti } from '@/scripts/confetti';
 import MkNotes from '@/components/MkNotes.vue';
+import { api } from '@/os';
 
 const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
@@ -151,6 +166,10 @@ let parallaxAnimationId = $ref<null | number>(null);
 let narrow = $ref<null | boolean>(null);
 let rootEl = $ref<null | HTMLElement>(null);
 let bannerEl = $ref<null | HTMLElement>(null);
+let memoTextareaEl = $ref<null | HTMLElement>(null);
+let memoDraft = $ref(props.user.memo);
+
+let isEditingMemo = $ref(false);
 
 const pagination = {
 	endpoint: 'users/notes' as const,
@@ -193,6 +212,31 @@ function parallax() {
 	banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
 }
 
+function showMemoTextarea() {
+	isEditingMemo = true;
+	nextTick(() => {
+		memoTextareaEl?.focus();
+	});
+}
+
+function adjustMemoTextarea() {
+	if (!memoTextareaEl) return;
+	memoTextareaEl.style.height = '0px';
+	memoTextareaEl.style.height = `${memoTextareaEl.scrollHeight}px`;
+}
+
+async function updateMemo() {
+	await api('users/update-memo', {
+		memo: memoDraft,
+		userId: props.user.id,
+	});
+	isEditingMemo = false;
+}
+
+watch([props.user], () => {
+	memoDraft = props.user.memo;
+});
+
 onMounted(() => {
 	window.requestAnimationFrame(parallaxLoop);
 	narrow = rootEl!.clientWidth < 1000;
@@ -208,6 +252,9 @@ onMounted(() => {
 			});
 		}
 	}
+	nextTick(() => {
+		adjustMemoTextarea();
+	});
 });
 
 onUnmounted(() => {
@@ -323,6 +370,16 @@ onUnmounted(() => {
 									font-weight: bold;
 								}
 							}
+
+							> .add-note-button {
+								background: rgba(0, 0, 0, 0.2);
+								color: #fff;
+								-webkit-backdrop-filter: var(--blur, blur(8px));
+								backdrop-filter: var(--blur, blur(8px));
+								border-radius: 24px;
+								padding: 4px 8px;
+								font-size: 80%;
+							}
 						}
 					}
 				}
@@ -369,6 +426,38 @@ onUnmounted(() => {
 					}
 				}
 
+				> .memo {
+					margin: 12px 24px 0 154px;
+					background: transparent;
+					color: var(--fg);
+					border: 1px solid var(--divider);
+					border-radius: 8px;
+					padding: 8px;
+					line-height: 0;
+
+					> .heading {
+						text-align: left;
+						color: var(--fgTransparent);
+						line-height: 1.5;
+					}
+
+					textarea {
+						margin: 0;
+						padding: 0;
+						resize: none;
+						border: none;
+						outline: none;
+						width: 100%;
+						height: auto;
+						min-height: 0;
+						line-height: 1.5;
+						color: var(--fg);
+						overflow: hidden;
+						background: transparent;
+						font-family: inherit;
+					}
+				}
+
 				> .description {
 					padding: 24px 24px 24px 154px;
 					font-size: 0.95em;
@@ -504,6 +593,10 @@ onUnmounted(() => {
 					justify-content: center;
 				}
 
+				> .memo {
+					margin: 16px 16px 0 16px;
+				}
+
 				> .description {
 					padding: 16px;
 					text-align: center;

packages/frontend/src/scripts/get-user-menu.ts

@@ -98,6 +98,27 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		});
 	}
 
+	async function editMemo(): Promise<void> {
+		const userDetailed = await os.api('users/show', {
+			userId: user.id,
+		});
+		const { canceled, result } = await os.form(i18n.ts.editMemo, {
+			memo: {
+				type: 'string',
+				required: true,
+				multiline: true,
+				label: i18n.ts.memo,
+				default: userDetailed.memo,
+			},
+		});
+		if (canceled) return;
+
+		os.apiWithDialog('users/update-memo', {
+			memo: result.memo,
+			userId: user.id,
+		});
+	}
+
 	let menu = [{
 		icon: 'ti ti-at',
 		text: i18n.ts.copyUsername,
@@ -123,6 +144,12 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 			os.post({ specified: user, initialText: `@${user.username} ` });
 		},
 	}, null, {
+		icon: 'ti ti-pencil',
+		text: i18n.ts.editMemo,
+		action: () => {
+			editMemo();
+		},
+	}, {
 		type: 'parent',
 		icon: 'ti ti-list',
 		text: i18n.ts.addToList,