Merge remote-tracking branch 'misskey-original/develop' into develop

# Conflicts:
#	locales/en-US.yml
#	locales/index.d.ts
#	locales/ja-JP.yml
#	package.json
#	packages/backend/src/server/api/endpoints/notes/create.ts
#	packages/frontend/src/components/MkDrive.file.vue
#	packages/frontend/src/components/MkNote.vue
#	packages/frontend/src/components/MkNoteHeader.vue
#	packages/frontend/src/components/MkPostForm.vue
#	packages/frontend/src/components/MkReactionsViewer.reaction.vue
#	packages/frontend/src/components/MkUserSetupDialog.vue
#	packages/frontend/src/pages/timeline.tutorial.vue
#	packages/frontend/src/pages/timeline.vue
#	packages/misskey-js/etc/misskey-js.api.md

packages/backend/migration/1698840138000-add-allow-renote-to-external.js

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class AddAllowRenoteToExternal1698840138000 {
+    name = 'AddAllowRenoteToExternal1698840138000'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "channel" ADD "allowRenoteToExternal" boolean NOT NULL DEFAULT true`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "channel" DROP COLUMN "allowRenoteToExternal"`);
+    }
+}

packages/backend/package.json

@@ -72,9 +72,9 @@
 		"@fastify/multipart": "8.0.0",
 		"@fastify/static": "6.12.0",
 		"@fastify/view": "8.2.0",
-		"@nestjs/common": "10.2.7",
-		"@nestjs/core": "10.2.7",
-		"@nestjs/testing": "10.2.7",
+		"@nestjs/common": "10.2.8",
+		"@nestjs/core": "10.2.8",
+		"@nestjs/testing": "10.2.8",
 		"@peertube/http-signature": "1.7.0",
 		"@simplewebauthn/server": "8.3.5",
 		"@sinonjs/fake-timers": "11.2.2",
@@ -87,7 +87,7 @@
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.5",
 		"body-parser": "1.20.2",
-		"bullmq": "4.12.7",
+		"bullmq": "4.12.8",
 		"cacheable-lookup": "7.0.0",
 		"cbor": "9.0.1",
 		"chalk": "5.3.0",
@@ -100,7 +100,7 @@
 		"deep-email-validator": "0.1.21",
 		"fastify": "4.24.3",
 		"feed": "4.2.2",
-		"file-type": "18.5.0",
+		"file-type": "18.6.0",
 		"fluent-ffmpeg": "2.1.2",
 		"form-data": "4.0.0",
 		"got": "13.0.0",

packages/backend/src/core/AchievementService.ts

@@ -86,6 +86,7 @@ export const ACHIEVEMENT_TYPES = [
 	'cookieClicked',
 	'brainDiver',
 	'smashTestNotificationButton',
+	'tutorialCompleted',
 ] as const;
 
 @Injectable()

packages/backend/src/core/CoreModule.ts

@@ -64,6 +64,7 @@ import { ClipService } from './ClipService.js';
 import { FeaturedService } from './FeaturedService.js';
 import { FunoutTimelineService } from './FunoutTimelineService.js';
 import { ChannelFollowingService } from './ChannelFollowingService.js';
+import { RegistryApiService } from './RegistryApiService.js';
 import { ChartLoggerService } from './chart/ChartLoggerService.js';
 import FederationChart from './chart/charts/federation.js';
 import NotesChart from './chart/charts/notes.js';
@@ -195,6 +196,7 @@ const $ClipService: Provider = { provide: 'ClipService', useExisting: ClipServic
 const $FeaturedService: Provider = { provide: 'FeaturedService', useExisting: FeaturedService };
 const $FunoutTimelineService: Provider = { provide: 'FunoutTimelineService', useExisting: FunoutTimelineService };
 const $ChannelFollowingService: Provider = { provide: 'ChannelFollowingService', useExisting: ChannelFollowingService };
+const $RegistryApiService: Provider = { provide: 'RegistryApiService', useExisting: RegistryApiService };
 
 const $ChartLoggerService: Provider = { provide: 'ChartLoggerService', useExisting: ChartLoggerService };
 const $FederationChart: Provider = { provide: 'FederationChart', useExisting: FederationChart };
@@ -330,6 +332,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		FeaturedService,
 		FunoutTimelineService,
 		ChannelFollowingService,
+		RegistryApiService,
 		ChartLoggerService,
 		FederationChart,
 		NotesChart,
@@ -458,6 +461,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		$FeaturedService,
 		$FunoutTimelineService,
 		$ChannelFollowingService,
+		$RegistryApiService,
 		$ChartLoggerService,
 		$FederationChart,
 		$NotesChart,
@@ -587,6 +591,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		FeaturedService,
 		FunoutTimelineService,
 		ChannelFollowingService,
+		RegistryApiService,
 		FederationChart,
 		NotesChart,
 		UsersChart,
@@ -714,6 +719,7 @@ const $ApQuestionService: Provider = { provide: 'ApQuestionService', useExisting
 		$FeaturedService,
 		$FunoutTimelineService,
 		$ChannelFollowingService,
+		$RegistryApiService,
 		$FederationChart,
 		$NotesChart,
 		$UsersChart,

packages/backend/src/core/RegistryApiService.ts

@@ -0,0 +1,147 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import type { MiRegistryItem, RegistryItemsRepository } from '@/models/_.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import type { MiUser } from '@/models/User.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { bindThis } from '@/decorators.js';
+
+@Injectable()
+export class RegistryApiService {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+	}
+
+	@bindThis
+	public async set(userId: MiUser['id'], domain: string | null, scope: string[], key: string, value: any) {
+		// TODO: 作成できるキーの数を制限する
+
+		const query = this.registryItemsRepository.createQueryBuilder('item');
+		if (domain) {
+			query.where('item.domain = :domain', { domain: domain });
+		} else {
+			query.where('item.domain IS NULL');
+		}
+		query.andWhere('item.userId = :userId', { userId: userId });
+		query.andWhere('item.key = :key', { key: key });
+		query.andWhere('item.scope = :scope', { scope: scope });
+
+		const existingItem = await query.getOne();
+
+		if (existingItem) {
+			await this.registryItemsRepository.update(existingItem.id, {
+				updatedAt: new Date(),
+				value: value,
+			});
+		} else {
+			await this.registryItemsRepository.insert({
+				id: this.idService.gen(),
+				updatedAt: new Date(),
+				userId: userId,
+				domain: domain,
+				scope: scope,
+				key: key,
+				value: value,
+			});
+		}
+
+		if (domain == null) {
+			// TODO: サードパーティアプリが傍受出来てしまうのでどうにかする
+			this.globalEventService.publishMainStream(userId, 'registryUpdated', {
+				scope: scope,
+				key: key,
+				value: value,
+			});
+		}
+	}
+
+	@bindThis
+	public async getItem(userId: MiUser['id'], domain: string | null, scope: string[], key: string): Promise<MiRegistryItem | null> {
+		const query = this.registryItemsRepository.createQueryBuilder('item')
+			.where(domain == null ? 'item.domain IS NULL' : 'item.domain = :domain', { domain: domain })
+			.andWhere('item.userId = :userId', { userId: userId })
+			.andWhere('item.key = :key', { key: key })
+			.andWhere('item.scope = :scope', { scope: scope });
+
+		const item = await query.getOne();
+
+		return item;
+	}
+
+	@bindThis
+	public async getAllItemsOfScope(userId: MiUser['id'], domain: string | null, scope: string[]): Promise<MiRegistryItem[]> {
+		const query = this.registryItemsRepository.createQueryBuilder('item');
+		query.where(domain == null ? 'item.domain IS NULL' : 'item.domain = :domain', { domain: domain });
+		query.andWhere('item.userId = :userId', { userId: userId });
+		query.andWhere('item.scope = :scope', { scope: scope });
+
+		const items = await query.getMany();
+
+		return items;
+	}
+
+	@bindThis
+	public async getAllKeysOfScope(userId: MiUser['id'], domain: string | null, scope: string[]): Promise<string[]> {
+		const query = this.registryItemsRepository.createQueryBuilder('item');
+		query.select('item.key');
+		query.where(domain == null ? 'item.domain IS NULL' : 'item.domain = :domain', { domain: domain });
+		query.andWhere('item.userId = :userId', { userId: userId });
+		query.andWhere('item.scope = :scope', { scope: scope });
+
+		const items = await query.getMany();
+
+		return items.map(x => x.key);
+	}
+
+	@bindThis
+	public async getAllScopeAndDomains(userId: MiUser['id']): Promise<{ domain: string | null; scopes: string[][] }[]> {
+		const query = this.registryItemsRepository.createQueryBuilder('item')
+			.select(['item.scope', 'item.domain'])
+			.where('item.userId = :userId', { userId: userId });
+
+		const items = await query.getMany();
+
+		const res = [] as { domain: string | null; scopes: string[][] }[];
+
+		for (const item of items) {
+			const target = res.find(x => x.domain === item.domain);
+			if (target) {
+				if (target.scopes.some(scope => scope.join('.') === item.scope.join('.'))) continue;
+				target.scopes.push(item.scope);
+			} else {
+				res.push({
+					domain: item.domain,
+					scopes: [item.scope],
+				});
+			}
+		}
+
+		return res;
+	}
+
+	@bindThis
+	public async remove(userId: MiUser['id'], domain: string | null, scope: string[], key: string) {
+		const query = this.registryItemsRepository.createQueryBuilder().delete();
+		if (domain) {
+			query.where('domain = :domain', { domain: domain });
+		} else {
+			query.where('domain IS NULL');
+		}
+		query.andWhere('userId = :userId', { userId: userId });
+		query.andWhere('key = :key', { key: key });
+		query.andWhere('scope = :scope', { scope: scope });
+
+		await query.execute();
+	}
+}

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

@@ -85,6 +85,7 @@ export class ChannelEntityService {
 			usersCount: channel.usersCount,
 			notesCount: channel.notesCount,
 			isSensitive: channel.isSensitive,
+			allowRenoteToExternal: channel.allowRenoteToExternal,
 
 			...(me ? {
 				isFollowing,

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

@@ -351,6 +351,7 @@ export class NoteEntityService implements OnModuleInit {
 				name: channel.name,
 				color: channel.color,
 				isSensitive: channel.isSensitive,
+				allowRenoteToExternal: channel.allowRenoteToExternal,
 			} : undefined,
 			mentions: note.mentions.length > 0 ? note.mentions : undefined,
 			uri: note.uri ?? undefined,

packages/backend/src/models/Channel.ts

@@ -93,4 +93,9 @@ export class MiChannel {
 		default: false,
 	})
 	public isSensitive: boolean;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public allowRenoteToExternal: boolean;
 }

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

@@ -76,5 +76,9 @@ export const packedChannelSchema = {
 			type: 'boolean',
 			optional: false, nullable: false,
 		},
+		allowRenoteToExternal: {
+			type: 'boolean',
+			optional: false, nullable: false,
+		},
 	},
 } as const;

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

@@ -233,7 +233,7 @@ import * as ep___i_registry_get from './endpoints/i/registry/get.js';
 import * as ep___i_registry_keysWithType from './endpoints/i/registry/keys-with-type.js';
 import * as ep___i_registry_keys from './endpoints/i/registry/keys.js';
 import * as ep___i_registry_remove from './endpoints/i/registry/remove.js';
-import * as ep___i_registry_scopes from './endpoints/i/registry/scopes.js';
+import * as ep___i_registry_scopesWithDomain from './endpoints/i/registry/scopes-with-domain.js';
 import * as ep___i_registry_set from './endpoints/i/registry/set.js';
 import * as ep___i_revokeToken from './endpoints/i/revoke-token.js';
 import * as ep___i_signinHistory from './endpoints/i/signin-history.js';
@@ -597,7 +597,7 @@ const $i_registry_get: Provider = { provide: 'ep:i/registry/get', useClass: ep__
 const $i_registry_keysWithType: Provider = { provide: 'ep:i/registry/keys-with-type', useClass: ep___i_registry_keysWithType.default };
 const $i_registry_keys: Provider = { provide: 'ep:i/registry/keys', useClass: ep___i_registry_keys.default };
 const $i_registry_remove: Provider = { provide: 'ep:i/registry/remove', useClass: ep___i_registry_remove.default };
-const $i_registry_scopes: Provider = { provide: 'ep:i/registry/scopes', useClass: ep___i_registry_scopes.default };
+const $i_registry_scopesWithDomain: Provider = { provide: 'ep:i/registry/scopes-with-domain', useClass: ep___i_registry_scopesWithDomain.default };
 const $i_registry_set: Provider = { provide: 'ep:i/registry/set', useClass: ep___i_registry_set.default };
 const $i_revokeToken: Provider = { provide: 'ep:i/revoke-token', useClass: ep___i_revokeToken.default };
 const $i_signinHistory: Provider = { provide: 'ep:i/signin-history', useClass: ep___i_signinHistory.default };
@@ -964,7 +964,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$i_registry_keysWithType,
 		$i_registry_keys,
 		$i_registry_remove,
-		$i_registry_scopes,
+		$i_registry_scopesWithDomain,
 		$i_registry_set,
 		$i_revokeToken,
 		$i_signinHistory,
@@ -1325,7 +1325,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$i_registry_keysWithType,
 		$i_registry_keys,
 		$i_registry_remove,
-		$i_registry_scopes,
+		$i_registry_scopesWithDomain,
 		$i_registry_set,
 		$i_revokeToken,
 		$i_signinHistory,

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

@@ -136,7 +136,20 @@ export class SignupApiService {
 				return;
 			}
 
-			if (ticket.usedAt) {
+			// メアド認証が有効の場合
+			if (instance.emailRequiredForSignup) {
+				// メアド認証済みならエラー
+				if (ticket.usedBy) {
+					reply.code(400);
+					return;
+				}
+
+				// 認証しておらず、メール送信から30分以内ならエラー
+				if (ticket.usedAt && ticket.usedAt.getTime() + (1000 * 60 * 30) > Date.now()) {
+					reply.code(400);
+					return;
+				}
+			} else if (ticket.usedAt) {
 				reply.code(400);
 				return;
 			}
@@ -224,6 +237,10 @@ export class SignupApiService {
 		try {
 			const pendingUser = await this.userPendingsRepository.findOneByOrFail({ code });
 
+			if (this.idService.parse(pendingUser.id).date.getTime() + (1000 * 60 * 30) < Date.now()) {
+				throw new FastifyReplyError(400, 'EXPIRED');
+			}
+
 			const { account, secret } = await this.signupService.signup({
 				username: pendingUser.username,
 				passwordHash: pendingUser.password,

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

@@ -232,7 +232,7 @@ import * as ep___i_registry_get from './endpoints/i/registry/get.js';
 import * as ep___i_registry_keysWithType from './endpoints/i/registry/keys-with-type.js';
 import * as ep___i_registry_keys from './endpoints/i/registry/keys.js';
 import * as ep___i_registry_remove from './endpoints/i/registry/remove.js';
-import * as ep___i_registry_scopes from './endpoints/i/registry/scopes.js';
+import * as ep___i_registry_scopesWithDomain from './endpoints/i/registry/scopes-with-domain.js';
 import * as ep___i_registry_set from './endpoints/i/registry/set.js';
 import * as ep___i_revokeToken from './endpoints/i/revoke-token.js';
 import * as ep___i_signinHistory from './endpoints/i/signin-history.js';
@@ -593,7 +593,7 @@ const eps = [
 	['i/registry/keys-with-type', ep___i_registry_keysWithType],
 	['i/registry/keys', ep___i_registry_keys],
 	['i/registry/remove', ep___i_registry_remove],
-	['i/registry/scopes', ep___i_registry_scopes],
+	['i/registry/scopes-with-domain', ep___i_registry_scopesWithDomain],
 	['i/registry/set', ep___i_registry_set],
 	['i/revoke-token', ep___i_revokeToken],
 	['i/signin-history', ep___i_signinHistory],

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

@@ -50,6 +50,7 @@ export const paramDef = {
 		bannerId: { type: 'string', format: 'misskey:id', nullable: true },
 		color: { type: 'string', minLength: 1, maxLength: 16 },
 		isSensitive: { type: 'boolean', nullable: true },
+		allowRenoteToExternal: { type: 'boolean', nullable: true },
 	},
 	required: ['name'],
 } as const;
@@ -87,6 +88,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				bannerId: banner ? banner.id : null,
 				isSensitive: ps.isSensitive ?? false,
 				...(ps.color !== undefined ? { color: ps.color } : {}),
+				allowRenoteToExternal: ps.allowRenoteToExternal ?? true,
 			} as MiChannel).then(x => this.channelsRepository.findOneByOrFail(x.identifiers[0]));
 
 			return await this.channelEntityService.pack(channel, me);

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

@@ -61,6 +61,7 @@ export const paramDef = {
 		},
 		color: { type: 'string', minLength: 1, maxLength: 16 },
 		isSensitive: { type: 'boolean', nullable: true },
+		allowRenoteToExternal: { type: 'boolean', nullable: true },
 	},
 	required: ['channelId'],
 } as const;
@@ -115,6 +116,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				...(typeof ps.isArchived === 'boolean' ? { isArchived: ps.isArchived } : {}),
 				...(banner ? { bannerId: banner.id } : {}),
 				...(typeof ps.isSensitive === 'boolean' ? { isSensitive: ps.isSensitive } : {}),
+				...(typeof ps.allowRenoteToExternal === 'boolean' ? { allowRenoteToExternal: ps.allowRenoteToExternal } : {}),
 			});
 
 			return await this.channelEntityService.pack(channel.id, me);

packages/backend/src/server/api/endpoints/i/registry/get-all.ts

@@ -5,13 +5,10 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 
 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;
 
 export const paramDef = {
@@ -20,23 +17,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: [],
+	required: ['scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const items = await query.getMany();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const items = await this.registryApiService.getAllItemsOfScope(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope);
 
 			const res = {} as Record<string, any>;
 

packages/backend/src/server/api/endpoints/i/registry/get-detail.ts

@@ -5,15 +5,12 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
 	requireCredential: true,
 
-	secure: true,
-
 	errors: {
 		noSuchKey: {
 			message: 'No such key.',
@@ -30,24 +27,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key'],
+	required: ['key', 'scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const item = await query.getOne();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const item = await this.registryApiService.getItem(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key);
 
 			if (item == null) {
 				throw new ApiError(meta.errors.noSuchKey);

packages/backend/src/server/api/endpoints/i/registry/get.ts

@@ -5,15 +5,12 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
 	requireCredential: true,
 
-	secure: true,
-
 	errors: {
 		noSuchKey: {
 			message: 'No such key.',
@@ -30,24 +27,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key'],
+	required: ['key', 'scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const item = await query.getOne();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const item = await this.registryApiService.getItem(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key);
 
 			if (item == null) {
 				throw new ApiError(meta.errors.noSuchKey);

packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts

@@ -5,13 +5,10 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 
 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;
 
 export const paramDef = {
@@ -20,36 +17,31 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: [],
+	required: ['scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const items = await query.getMany();
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			const items = await this.registryApiService.getAllItemsOfScope(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope);
 
 			const res = {} as Record<string, string>;
 
 			for (const item of items) {
 				const type = typeof item.value;
 				res[item.key] =
-			item.value === null ? 'null' :
-			Array.isArray(item.value) ? 'array' :
-			type === 'number' ? 'number' :
-			type === 'string' ? 'string' :
-			type === 'boolean' ? 'boolean' :
-			type === 'object' ? 'object' :
-			null as never;
+					item.value === null ? 'null' :
+					Array.isArray(item.value) ? 'array' :
+					type === 'number' ? 'number' :
+					type === 'string' ? 'string' :
+					type === 'boolean' ? 'boolean' :
+					type === 'object' ? 'object' :
+					null as never;
 			}
 
 			return res;

packages/backend/src/server/api/endpoints/i/registry/keys.ts

@@ -5,13 +5,10 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 
 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;
 
 export const paramDef = {
@@ -20,26 +17,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: [],
+	required: ['scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.select('item.key')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const items = await query.getMany();
-
-			return items.map(x => x.key);
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			return await this.registryApiService.getAllKeysOfScope(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/i/registry/remove.ts

@@ -7,13 +7,12 @@ import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { RegistryItemsRepository } from '@/models/_.js';
 import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
 	requireCredential: true,
 
-	secure: true,
-
 	errors: {
 		noSuchKey: {
 			message: 'No such key.',
@@ -30,30 +29,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key'],
+	required: ['key', 'scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const item = await query.getOne();
-
-			if (item == null) {
-				throw new ApiError(meta.errors.noSuchKey);
-			}
-
-			await this.registryItemsRepository.remove(item);
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			await this.registryApiService.remove(me.id, accessToken != null ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/i/registry/scopes-with-domain.ts

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
+
+export const meta = {
+	requireCredential: true,
+	secure: true,
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {},
+	required: [],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		private registryApiService: RegistryApiService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.registryApiService.getAllScopeAndDomains(me.id);
+		});
+	}
+}

packages/backend/src/server/api/endpoints/i/registry/scopes.ts

@@ -1,47 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and other misskey contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { Inject, Injectable } from '@nestjs/common';
-import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { DI } from '@/di-symbols.js';
-
-export const meta = {
-	requireCredential: true,
-
-	secure: true,
-} as const;
-
-export const paramDef = {
-	type: 'object',
-	properties: {},
-	required: [],
-} as const;
-
-@Injectable()
-export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
-	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
-	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.select('item.scope')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id });
-
-			const items = await query.getMany();
-
-			const res = [] as string[][];
-
-			for (const item of items) {
-				if (res.some(scope => scope.join('.') === item.scope.join('.'))) continue;
-				res.push(item.scope);
-			}
-
-			return res;
-		});
-	}
-}

packages/backend/src/server/api/endpoints/i/registry/set.ts

@@ -5,15 +5,10 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { RegistryItemsRepository } from '@/models/_.js';
-import { IdService } from '@/core/IdService.js';
-import { GlobalEventService } from '@/core/GlobalEventService.js';
-import { DI } from '@/di-symbols.js';
+import { RegistryApiService } from '@/core/RegistryApiService.js';
 
 export const meta = {
 	requireCredential: true,
-
-	secure: true,
 } as const;
 
 export const paramDef = {
@@ -24,51 +19,18 @@ export const paramDef = {
 		scope: { type: 'array', default: [], items: {
 			type: 'string', pattern: /^[a-zA-Z0-9_]+$/.toString().slice(1, -1),
 		} },
+		domain: { type: 'string', nullable: true },
 	},
-	required: ['key', 'value'],
+	required: ['key', 'value', 'scope'],
 } as const;
 
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.registryItemsRepository)
-		private registryItemsRepository: RegistryItemsRepository,
-
-		private idService: IdService,
-		private globalEventService: GlobalEventService,
+		private registryApiService: RegistryApiService,
 	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.registryItemsRepository.createQueryBuilder('item')
-				.where('item.domain IS NULL')
-				.andWhere('item.userId = :userId', { userId: me.id })
-				.andWhere('item.key = :key', { key: ps.key })
-				.andWhere('item.scope = :scope', { scope: ps.scope });
-
-			const existingItem = await query.getOne();
-
-			if (existingItem) {
-				await this.registryItemsRepository.update(existingItem.id, {
-					updatedAt: new Date(),
-					value: ps.value,
-				});
-			} else {
-				await this.registryItemsRepository.insert({
-					id: this.idService.gen(),
-					updatedAt: new Date(),
-					userId: me.id,
-					domain: null,
-					scope: ps.scope,
-					key: ps.key,
-					value: ps.value,
-				});
-			}
-
-			// TODO: サードパーティアプリが傍受出来てしまうのでどうにかする
-			this.globalEventService.publishMainStream(me.id, 'registryUpdated', {
-				scope: ps.scope,
-				key: ps.key,
-				value: ps.value,
-			});
+		super(meta, paramDef, async (ps, me, accessToken) => {
+			await this.registryApiService.set(me.id, accessToken ? accessToken.id : (ps.domain ?? null), ps.scope, ps.key, ps.value);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/notes/create.test.ts

@@ -64,7 +64,7 @@ describe('api:notes/create', () => {
 
 			test('0 characters cw', () => {
 				expect(v({ text: 'Body', cw: '' }))
-					.toBe(VALID);
+					.toBe(INVALID);
 			});
 
 			test('reject only cw', () => {

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

@@ -19,6 +19,7 @@ import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 import {noteVisibilities} from "@/types.js";
 import { isPureRenote } from '@/misc/is-pure-renote.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -100,6 +101,12 @@ export const meta = {
 			code: 'NO_SUCH_FILE',
 			id: 'b6992544-63e7-67f0-fa7f-32444b1b5306',
 		},
+
+		cannotRenoteOutsideOfChannel: {
+			message: 'Cannot renote outside of channel.',
+			code: 'CANNOT_RENOTE_OUTSIDE_OF_CHANNEL',
+			id: '33510210-8452-094c-6227-4a6c05d99f00',
+		},
 	},
 } as const;
 
@@ -110,7 +117,7 @@ export const paramDef = {
 		visibleUserIds: { type: 'array', uniqueItems: true, items: {
 			type: 'string', format: 'misskey:id',
 		} },
-		cw: { type: 'string', nullable: true, maxLength: 100 },
+		cw: { type: 'string', nullable: true, minLength: 1, maxLength: 100 },
 		localOnly: { type: 'boolean', default: false },
 		reactionAcceptance: { type: 'string', nullable: true, enum: [null, 'likeOnly', 'likeOnlyForRemote', 'nonSensitiveOnly', 'nonSensitiveOnlyForLocalLikeOnlyForRemote'], default: null },
 		noExtractMentions: { type: 'boolean', default: false },
@@ -247,6 +254,19 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 					// specified / direct noteはreject
 					throw new ApiError(meta.errors.cannotRenoteDueToVisibility);
 				}
+
+				if (renote.channelId && renote.channelId !== ps.channelId) {
+					// チャンネルのノートに対しリノート要求がきたとき、チャンネル外へのリノート可否をチェック
+					// リノートのユースケースのうち、チャンネル内→チャンネル外は少数だと考えられるため、JOINはせず必要な時に都度取得する
+					const renoteChannel = await this.channelsRepository.findOneById(renote.channelId);
+					if (renoteChannel == null) {
+						// リノートしたいノートが書き込まれているチャンネルが無い
+						throw new ApiError(meta.errors.noSuchChannel);
+					} else if (!renoteChannel.allowRenoteToExternal) {
+						// リノート作成のリクエストだが、対象チャンネルがリノート禁止だった場合
+						throw new ApiError(meta.errors.cannotRenoteOutsideOfChannel);
+					}
+				}
 			}
 			let visibility = ps.visibility;
 			let reply: MiNote | null = null;

packages/backend/src/server/web/ClientServerService.ts

@@ -253,8 +253,9 @@ export class ClientServerService {
 				decorateReply: false,
 			});
 		} else {
+			const port = (process.env.VITE_PORT ?? '5173');
 			fastify.register(fastifyProxy, {
-				upstream: 'http://localhost:5173', // TODO: port configuration
+				upstream: 'http://localhost:' + port,
 				prefix: '/vite',
 				rewritePrefix: '/vite',
 			});

packages/frontend/package.json

@@ -71,7 +71,7 @@
 		"twemoji-parser": "14.0.0",
 		"typescript": "5.2.2",
 		"uuid": "9.0.1",
-		"v-code-diff": "1.7.1",
+		"v-code-diff": "1.7.2",
 		"vanilla-tilt": "1.8.1",
 		"vite": "4.5.0",
 		"vue": "3.3.7",

packages/frontend/src/components/MkDrive.file.vue

@@ -48,6 +48,7 @@ import { $i } from '@/account.js';
 import { useRouter } from '@/router.js';
 import { getDriveFileMenu, getDriveMultiFileMenu } from '@/scripts/get-drive-file-menu.js';
 import { isTouchUsing } from '@/scripts/touch.js';
+import { deviceKind } from '@/scripts/device-kind.js';
 
 const router = useRouter();
 
@@ -88,7 +89,11 @@ function onClick(ev: MouseEvent) {
 	} else if (isTouchUsing && !isSelectedFile.value && props.SelectFiles.length === 0) {
     os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 	}else {
-		router.push(`/my/drive/file/${props.file.id}`);
+		if (deviceKind === 'desktop') {
+			router.push(`/my/drive/file/${props.file.id}`);
+		} else {
+			os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		}
 	}
 }
 

packages/frontend/src/components/MkInfo.vue

@@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="[$style.root, { [$style.warn]: warn }]">
 	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
 	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
-	<slot></slot>
+	<div><slot></slot></div>
+	<button v-if="closable" :class="$style.button" class="_button" @click="close()"><i class="ti ti-x"></i></button>
 </div>
 </template>
 
@@ -16,11 +17,23 @@ import { } from 'vue';
 
 const props = defineProps<{
 	warn?: boolean;
+	closable?: boolean;
 }>();
+
+const emit = defineEmits<{
+	(ev: 'close'): void;
+}>();
+
+function close() {
+	// こいつの中では非表示動作は行わない
+	emit('close');
+}
 </script>
 
 <style lang="scss" module>
 .root {
+	display: flex;
+  align-items: center;
 	padding: 12px 14px;
 	font-size: 90%;
 	background: var(--infoBg);
@@ -37,4 +50,9 @@ const props = defineProps<{
 .i {
 	margin-right: 4px;
 }
+
+.button {
+	margin-left: auto;
+	padding: 4px;
+}
 </style>

packages/frontend/src/components/MkNote.vue

@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-		<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
@@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-			<MkReactionsViewer :note="appearNote" :maxNumber="16">
+			<MkReactionsViewer :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
 					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
 				</template>
@@ -146,7 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import {computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent} from 'vue';
+import {computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent, watch, provide } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -169,7 +169,7 @@ import {reactionPicker} from '@/scripts/reaction-picker.js';
 import {extractUrlFromMfm} from '@/scripts/extract-url-from-mfm.js';
 import {$i} from '@/account.js';
 import {i18n} from '@/i18n.js';
-import {getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu} from '@/scripts/get-note-menu.js';
+import {getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu} from '@/scripts/get-note-menu.js';
 import {useNoteCapture} from '@/scripts/use-note-capture.js';
 import {deepClone} from '@/scripts/clone.js';
 import {useTooltip} from '@/scripts/use-tooltip.js';
@@ -180,9 +180,19 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import {showMovedDialog} from '@/scripts/show-moved-dialog.js';
 import {shouldCollapsed} from '@/scripts/collapsed.js';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
 	pinned?: boolean;
+	mock?: boolean;
+}>(), {
+	mock: false,
+});
+
+provide('mock', props.mock);
+
+const emit = defineEmits<{
+	(ev: 'reaction', emoji: string): void;
+	(ev: 'removeReaction', emoji: string): void;
 }>();
 
 const inChannel = inject('inChannel', null);
@@ -242,126 +252,54 @@ const keymap = {
 	's': () => showContent.value !== showContent.value,
 };
 
-useNoteCapture({
-	rootEl: el,
-	note: $$(appearNote),
-	pureNote: $$(note),
-	isDeletedRef: isDeleted,
-});
-
-useTooltip(renoteButton, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
-		noteId: appearNote.id,
-		limit: 11,
+if (props.mock) {
+	watch(() => props.note, (to) => {
+		note = deepClone(to);
+	}, { deep: true });
+} else {
+	useNoteCapture({
+		rootEl: el,
+		note: $$(appearNote),
+		pureNote: $$(note),
+		isDeletedRef: isDeleted,
 	});
+}
 
-	const users = renotes.map(x => x.user);
+if (!props.mock) {
+	useTooltip(renoteButton, async (showing) => {
+		const renotes = await os.api('notes/renotes', {
+			noteId: appearNote.id,
+			limit: 11,
+		});
 
-	if (users.length < 1) return;
+		const users = renotes.map(x => x.user);
 
-	os.popup(MkUsersTooltip, {
-		showing,
-		users,
-		count: appearNote.renoteCount,
-		targetElement: renoteButton.value,
-	}, {}, 'closed');
-});
+		if (users.length < 1) return;
 
-type Visibility = 'public' | 'home' | 'followers' | 'specified';
-
-// defaultStore.state.visibilityがstringなためstringも受け付けている
-function smallerVisibility(a: Visibility | string, b: Visibility | string): Visibility {
-	if (a === 'specified' || b === 'specified') return 'specified';
-	if (a === 'followers' || b === 'followers') return 'followers';
-	if (a === 'home' || b === 'home') return 'home';
-	// if (a === 'public' || b === 'public')
-	return 'public';
+		os.popup(MkUsersTooltip, {
+			showing,
+			users,
+			count: appearNote.renoteCount,
+			targetElement: renoteButton.value,
+		}, {}, 'closed');
+	});
 }
 
 function renote(viaKeyboard = false) {
 	pleaseLogin();
 	showMovedDialog();
 
-	let items = [] as MenuItem[];
-
-	if (appearNote.channel) {
-		items = items.concat([{
-			text: i18n.ts.inChannelRenote,
-			icon: 'ti ti-repeat',
-			action: () => {
-				const el = renoteButton.value as HTMLElement | null | undefined;
-				if (el) {
-					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(MkRippleEffect, {x, y}, {}, 'end');
-				}
-
-				os.api('notes/create', {
-					renoteId: appearNote.id,
-					channelId: appearNote.channelId,
-				}).then(() => {
-					os.toast(i18n.ts.renoted);
-				});
-			},
-		}, {
-			text: i18n.ts.inChannelQuote,
-			icon: 'ti ti-quote',
-			action: () => {
-				os.post({
-					renote: appearNote,
-					channel: appearNote.channel,
-				});
-			},
-		}, null]);
-	}
-
-	items = items.concat([{
-		text: i18n.ts.renote,
-		icon: 'ti ti-repeat',
-		action: () => {
-			const el = renoteButton.value as HTMLElement | null | undefined;
-			if (el) {
-				const rect = el.getBoundingClientRect();
-				const x = rect.left + (el.offsetWidth / 2);
-				const y = rect.top + (el.offsetHeight / 2);
-				os.popup(MkRippleEffect, {x, y}, {}, 'end');
-			}
-
-			const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
-			const localOnly = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
-
-			let visibility = appearNote.visibility;
-			visibility = smallerVisibility(visibility, configuredVisibility);
-			if (appearNote.channel?.isSensitive) {
-				visibility = smallerVisibility(visibility, 'home');
-			}
-
-			os.api('notes/create', {
-				localOnly,
-				visibility,
-				renoteId: appearNote.id,
-			}).then(() => {
-				os.toast(i18n.ts.renoted);
-			});
-		},
-	}, {
-		text: i18n.ts.quote,
-		icon: 'ti ti-quote',
-		action: () => {
-			os.post({
-				renote: appearNote,
-			});
-		},
-	}]);
-
-	os.popupMenu(items, renoteButton.value, {
+	const { menu } = getRenoteMenu({ note: note, renoteButton, mock: props.mock });
+	os.popupMenu(menu, renoteButton.value, {
 		viaKeyboard,
-	});
+	}).then(focus);
 }
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
+	if (props.mock) {
+		return;
+	}
 	os.post({
 		reply: appearNote,
 		channel: appearNote.channel,
@@ -375,6 +313,10 @@ function react(viaKeyboard = false): void {
 	pleaseLogin();
 	showMovedDialog();
 	if (appearNote.reactionAcceptance === 'likeOnly') {
+		if (props.mock) {
+			return;
+		}
+
 		os.api('notes/reactions/create', {
 			noteId: appearNote.id,
 			reaction: '❤️',
@@ -389,6 +331,11 @@ function react(viaKeyboard = false): void {
 	} else {
 		blur();
 		reactionPicker.show(reactButton.value, reaction => {
+			if (props.mock) {
+				emit('reaction', reaction);
+				return;
+			}
+
 			os.api('notes/reactions/create', {
 				noteId: appearNote.id,
 				reaction: reaction,
@@ -405,12 +352,22 @@ function react(viaKeyboard = false): void {
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
+
+	if (props.mock) {
+		emit('removeReaction', oldReaction);
+		return;
+	}
+
 	os.api('notes/reactions/delete', {
 		noteId: note.id,
 	});
 }
 
 function onContextmenu(ev: MouseEvent): void {
+	if (props.mock) {
+		return;
+	}
+
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
 		// 再生速度の選択などのために、Audio要素のコンテキストメニューはブラウザデフォルトとする。
@@ -439,6 +396,10 @@ function onContextmenu(ev: MouseEvent): void {
 }
 
 function menu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
 	const {menu, cleanup} = getNoteMenu({
 		note: note,
 		translating,
@@ -453,6 +414,10 @@ function menu(viaKeyboard = false): void {
 }
 
 async function clip() {
+	if (props.mock) {
+		return;
+	}
+
 	os.popupMenu(await getNoteClipMenu({
 		note: note,
 		isDeleted,
@@ -461,6 +426,10 @@ async function clip() {
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
 	function getUnrenote(): MenuItem {
 		return {
 			text: i18n.ts.unrenote,
@@ -518,6 +487,14 @@ function readPromo() {
 	});
 	isDeleted.value = true;
 }
+
+function emitUpdReaction(emoji: string, delta: number) {
+	if (delta < 0) {
+		emit('removeReaction', emoji);
+	} else if (delta > 0) {
+		emit('reaction', emoji);
+	}
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -200,7 +200,7 @@ import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js';
+import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/scripts/get-note-menu.js';
 import { useNoteCapture } from '@/scripts/use-note-capture.js';
 import { deepClone } from '@/scripts/clone.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
@@ -352,71 +352,10 @@ function renote(viaKeyboard = false) {
 	pleaseLogin();
 	showMovedDialog();
 
-	let items = [] as MenuItem[];
-
-	if (appearNote.channel) {
-		items = items.concat([{
-			text: i18n.ts.inChannelRenote,
-			icon: 'ti ti-repeat',
-			action: () => {
-				const el = renoteButton.value as HTMLElement | null | undefined;
-				if (el) {
-					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(MkRippleEffect, { x, y }, {}, 'end');
-				}
-
-				os.api('notes/create', {
-					renoteId: appearNote.id,
-					channelId: appearNote.channelId,
-				}).then(() => {
-					os.toast(i18n.ts.renoted);
-				});
-			},
-		}, {
-			text: i18n.ts.inChannelQuote,
-			icon: 'ti ti-quote',
-			action: () => {
-				os.post({
-					renote: appearNote,
-					channel: appearNote.channel,
-				});
-			},
-		}, null]);
-	}
-
-	items = items.concat([{
-		text: i18n.ts.renote,
-		icon: 'ti ti-repeat',
-		action: () => {
-			const el = renoteButton.value as HTMLElement | null | undefined;
-			if (el) {
-				const rect = el.getBoundingClientRect();
-				const x = rect.left + (el.offsetWidth / 2);
-				const y = rect.top + (el.offsetHeight / 2);
-				os.popup(MkRippleEffect, { x, y }, {}, 'end');
-			}
-
-			os.api('notes/create', {
-				renoteId: appearNote.id,
-			}).then(() => {
-				os.toast(i18n.ts.renoted);
-			});
-		},
-	}, {
-		text: i18n.ts.quote,
-		icon: 'ti ti-quote',
-		action: () => {
-			os.post({
-				renote: appearNote,
-			});
-		},
-	}]);
-
-	os.popupMenu(items, renoteButton.value, {
+	const { menu } = getRenoteMenu({ note: note, renoteButton });
+	os.popupMenu(menu, renoteButton.value, {
 		viaKeyboard,
-	});
+	}).then(focus);
 }
 
 function reply(viaKeyboard = false): void {

packages/frontend/src/components/MkNoteHeader.vue

@@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <header :class="$style.root">
-	<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
+	<div v-if="mock" :class="$style.name">
+		<MkUserName :user="note.user"/>
+	</div>
+	<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
 		<MkUserName :user="note.user"/>
 	</MkA>
 	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
@@ -16,6 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.info">
 		<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
 		<MkA :to="notePage(note)">
+		<div v-if="mock">
+			<MkTime :time="note.createdAt" colored/>
+		</div>
+		<MkA v-else :to="notePage(note)">
 			<MkTime :time="note.createdAt" colored/>
 		</MkA>
 		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
@@ -30,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
@@ -39,6 +46,8 @@ import { userPage } from '@/filters/user.js';
 defineProps<{
 	note: Misskey.entities.Note;
 }>();
+
+const mock = inject<boolean>('mock', false);
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkNotification.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="elRef" :class="$style.root">
+<div :class="$style.root">
 	<div :class="$style.head">
 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
 		<MkAvatar v-else-if="notification.type === 'note'" :class="$style.icon" :user="notification.note.user" link preview/>
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
+				:withTooltip="true"
 				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
 				:noStyle="true"
 				style="width: 100%; height: 100%;"
@@ -111,6 +111,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkAvatar :class="$style.reactionsItemAvatar" :user="reaction.user" link preview/>
 					<div :class="$style.reactionsItemReaction">
 						<MkReactionIcon
+							:withTooltip="true"
 							:reaction="reaction.reaction ? reaction.reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction.reaction"
 							:noStyle="true"
 							style="width: 100%; height: 100%;"
@@ -133,14 +134,12 @@ import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
-import { useTooltip } from '@/scripts/use-tooltip.js';
 import { $i } from '@/account.js';
 import { infoImageUrl } from '@/instance.js';
 
@@ -153,9 +152,6 @@ const props = withDefaults(defineProps<{
 	full: false,
 });
 
-const elRef = shallowRef<HTMLElement>(null);
-const reactionRef = ref(null);
-
 const followRequestDone = ref(false);
 
 const acceptFollowRequest = () => {
@@ -167,15 +163,6 @@ const rejectFollowRequest = () => {
 	followRequestDone.value = true;
 	os.api('following/requests/reject', { userId: props.notification.user.id });
 };
-
-useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
-});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkNotifications.vue

@@ -4,25 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img :src="infoImageUrl" class="_ghost"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
+<MkPullToRefresh :refresher="() => reload()">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" class="_ghost"/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
-			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
-		</MkDateSeparatedList>
-	</template>
-</MkPagination>
+		<template #default="{ items: notifications }">
+			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
+			</MkDateSeparatedList>
+		</template>
+	</MkPagination>
+</MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onDeactivated, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@@ -33,6 +35,7 @@ import { i18n } from '@/i18n.js';
 import { notificationTypes } from '@/const.js';
 import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 
 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
@@ -54,7 +57,7 @@ const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
 	})),
 };
 
-const onNotification = (notification) => {
+function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || document.visibilityState === 'visible') {
 		useStream().send('readNotification');
@@ -63,7 +66,15 @@ const onNotification = (notification) => {
 	if (!isMuted) {
 		pagingComponent.value.prepend(notification);
 	}
-};
+}
+
+function reload() {
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
+}
 
 let connection;
 
@@ -72,6 +83,12 @@ onMounted(() => {
 	connection.on('notification', onNotification);
 });
 
+onActivated(() => {
+	pagingComponent.value?.reload();
+	connection = useStream().useChannel('main');
+	connection.on('notification', onNotification);
+});
+
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });

packages/frontend/src/components/MkPostForm.vue

@@ -100,7 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import {inject, watch, nextTick, onMounted, defineAsyncComponent, computed, ref} from 'vue';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent , computed, ref , provide } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -139,31 +139,38 @@ let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
 
 
 const props = withDefaults(defineProps<{
-  reply?: Misskey.entities.Note;
-  renote?: Misskey.entities.Note;
-  channel?: Misskey.entities.Channel; // TODO
-  mention?: Misskey.entities.User;
-  specified?: Misskey.entities.User;
-  initialText?: string;
-  initialVisibility?: (typeof Misskey.noteVisibilities)[number];
-  initialFiles?: Misskey.entities.DriveFile[];
-  initialLocalOnly?: boolean;
-  initialVisibleUsers?: Misskey.entities.User[];
-  initialNote?: Misskey.entities.Note;
-  instant?: boolean;
-  fixed?: boolean;
-  autofocus?: boolean;
-  freezeAfterPosted?: boolean;
-updateMode?: boolean;
+	reply?: Misskey.entities.Note;
+	renote?: Misskey.entities.Note;
+	channel?: Misskey.entities.Channel; // TODO
+	mention?: Misskey.entities.User;
+	specified?: Misskey.entities.User;
+	initialText?: string;
+	initialVisibility?: (typeof Misskey.noteVisibilities)[number];
+	initialFiles?: Misskey.entities.DriveFile[];
+	initialLocalOnly?: boolean;
+	initialVisibleUsers?: Misskey.entities.User[];
+	initialNote?: Misskey.entities.Note;
+	instant?: boolean;
+	fixed?: boolean;
+	autofocus?: boolean;
+	freezeAfterPosted?: boolean;
+	mock?: boolean;
+	updateMode?: boolean;
 }>(), {
   initialVisibleUsers: () => [],
   autofocus: true,
+	mock: false,
 });
 
+provide('mock', props.mock);
+
 const emit = defineEmits<{
   (ev: 'posted'): void;
   (ev: 'cancel'): void;
   (ev: 'esc'): void;
+
+	// Mock用
+	(ev: 'fileChangeSensitive', fileId: string, to: boolean): void;
 }>();
 
 const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
@@ -251,7 +258,7 @@ const maxTextLength = $computed((): number => {
 });
 
 const canPost = $computed((): boolean => {
-  return !posting && !posted &&
+  return !props.mock && !posting && !posted &&
       (1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
       (textLength <= maxTextLength) &&
       (!poll || poll.choices.length >= 2);
@@ -304,6 +311,10 @@ if (props.reply && props.reply.text != null) {
   }
 }
 
+if ($i?.isSilenced && visibility === 'public') {
+	visibility = 'home';
+}
+
 if (props.channel) {
   visibility = 'public';
   localOnly = true; // TODO: チャンネルが連合するようになった折には消す
@@ -408,7 +419,7 @@ function focus() {
 }
 
 function chooseFileFrom(ev) {
-  selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
+  if (props.mock) return;selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
     for (const file of files_) {
       files.push(file);
     }
@@ -420,7 +431,10 @@ function detachFile(id) {
 }
 
 function updateFileSensitive(file, sensitive) {
-  files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+  if (props.mock) {
+		emit('fileChangeSensitive', file.id, sensitive);
+	}
+	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 }
 
 function updateFileName(file, name) {
@@ -432,7 +446,7 @@ function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities
 }
 
 function upload(file: File, name?: string): void {
-  uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+  if (props.mock) return;uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
     files.push(res);
   });
 }
@@ -446,7 +460,7 @@ function setVisibility() {
 
   os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
     currentVisibility: visibility,
-    localOnly: localOnly,
+    isSilenced: $i?.isSilenced,localOnly: localOnly,
     src: visibilityButton,
   }, {
     changeVisibility: v => {
@@ -557,7 +571,7 @@ function onCompositionEnd(ev: CompositionEvent) {
 }
 
 async function onPaste(ev: ClipboardEvent) {
-  for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
+  if (props.mock) return;for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
     if (item.kind === 'file') {
       const file = item.getAsFile();
       const lio = file.name.lastIndexOf('.');
@@ -641,7 +655,7 @@ function onDrop(ev): void {
 }
 
 function saveDraft() {
-  if (props.instant) return;
+  if (props.instant || props.mock) return;
 
   const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
 
@@ -670,7 +684,13 @@ function deleteDraft() {
 }
 
 async function post(ev?: MouseEvent) {
-  if (ev) {
+  if (useCw && (cw == null || cw.trim() === '')) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.cwNotationRequired,
+		});
+		return;
+	}if (ev) {
     const el = ev.currentTarget ?? ev.target;
     const rect = el.getBoundingClientRect();
     const x = rect.left + (el.offsetWidth / 2);
@@ -678,7 +698,7 @@ async function post(ev?: MouseEvent) {
     os.popup(MkRippleEffect, { x, y }, {}, 'end');
   }
 
-  const annoying =
+  if (props.mock) return;const annoying =
       text.includes('$[x2') ||
       text.includes('$[x3') ||
       text.includes('$[x4') ||
@@ -850,7 +870,7 @@ function showActions(ev) {
 let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {
-  openAccountMenu_({
+  if (props.mock) return;openAccountMenu_({
     withExtraOperation: false,
     includeCurrentAccount: true,
     active: postAccount != null ? postAccount.id : $i.id,
@@ -880,7 +900,7 @@ onMounted(() => {
 
   nextTick(() => {
     // 書きかけの投稿を復元
-    if (!props.instant && !props.mention && !props.specified) {
+    if (!props.instant && !props.mention && !props.specified && !props.mock) {
       const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
       if (draft) {
         text = draft.data.text;

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
@@ -33,6 +33,8 @@ const props = defineProps<{
 	detachMediaFn?: (id: string) => void;
 }>();
 
+const mock = inject<boolean>('mock', false);
+
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any[]): void;
 	(ev: 'detach', id: string): void;
@@ -44,6 +46,8 @@ const emit = defineEmits<{
 let menuShowing = false;
 
 function detachMedia(id: string) {
+	if (mock) return;
+
 	if (props.detachMediaFn) {
 		props.detachMediaFn(id);
 	} else {
@@ -52,6 +56,11 @@ function detachMedia(id: string) {
 }
 
 function toggleSensitive(file) {
+	if (mock) {
+		emit('changeSensitive', file, !file.isSensitive);
+		return;
+	}
+
 	os.api('drive/files/update', {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,
@@ -61,6 +70,8 @@ function toggleSensitive(file) {
 }
 
 async function rename(file) {
+	if (mock) return;
+
 	const { canceled, result } = await os.inputText({
 		title: i18n.ts.enterFileName,
 		default: file.name,
@@ -77,6 +88,8 @@ async function rename(file) {
 }
 
 async function describe(file) {
+	if (mock) return;
+
 	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
 		default: file.comment !== null ? file.comment : '',
 		file: file,
@@ -94,6 +107,8 @@ async function describe(file) {
 }
 
 async function crop(file: Misskey.entities.DriveFile): Promise<void> {
+	if (mock) return;
+
 	const newFile = await os.cropImage(file, { aspectRatio: NaN });
 	emit('replaceFile', file, newFile);
 }

packages/frontend/src/components/MkPullToRefresh.vue

@@ -47,7 +47,13 @@ let scrollEl: HTMLElement | null = null;
 
 let disabled = false;
 
-const emits = defineEmits<{
+const props = withDefaults(defineProps<{
+	refresher: () => Promise<void>;
+}>(), {
+	refresher: () => Promise.resolve(),
+});
+
+const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();
 
@@ -120,7 +126,12 @@ function moveEnd() {
 		if (isPullEnd) {
 			isPullEnd = false;
 			isRefreshing = true;
-			fixOverContent().then(() => emits('refresh'));
+			fixOverContent().then(() => {
+				emit('refresh');
+				props.refresher().then(() => {
+					refreshFinished();
+				});
+			});
 		} else {
 			closeContent().then(() => isPullStart = false);
 		}
@@ -188,7 +199,6 @@ onUnmounted(() => {
 });
 
 defineExpose({
-	refreshFinished,
 	setDisabled,
 });
 </script>

packages/frontend/src/components/MkReactionIcon.vue

@@ -4,16 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
-<MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" ref="elRef" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else ref="elRef" :emoji="reaction" :normal="true" :noStyle="noStyle"/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent, shallowRef } from 'vue';
+import { useTooltip } from '@/scripts/use-tooltip.js';
+import * as os from '@/os.js';
 
 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
 	emojiUrl?: string;
+	withTooltip?: boolean;
 }>();
+
+const elRef = shallowRef();
+
+if (props.withTooltip) {
+	useTooltip(elRef, (showing) => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
+			showing,
+			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
+			targetElement: elRef.value.$el,
+		}, {}, 'closed');
+	});
+}
 </script>

packages/frontend/src/components/MkReactionsViewer.details.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkAvatar :class="$style.avatar" :user="u"/>
 				<MkUserName :user="u" :nowrap="true"/>
 			</div>
-			<div v-if="users.length > 10" :class="$style.more">+{{ count - 10 }}</div>
+			<div v-if="count > 10" :class="$style.more">+{{ count - 10 }}</div>
 		</div>
 	</div>
 </MkTooltip>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import {computed, onMounted, ref, shallowRef, watch} from 'vue';
+import {computed, inject, onMounted, ref, shallowRef, watch} from 'vue';
 import * as Misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
@@ -38,6 +38,12 @@ const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
+const mock = inject<boolean>('mock', false);
+
+const emit = defineEmits<{
+	(ev: 'reactionToggled', emoji: string, newCount: number): void;
+}>();
+
 const buttonEl = shallowRef<HTMLElement>();
 
 const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
@@ -55,6 +61,11 @@ async function toggleReaction() {
 		});
 		if (confirm.canceled) return;
 
+		if (mock) {
+			emit('reactionToggled', props.reaction, (props.count - 1));
+			return;
+		}
+
 		os.api('notes/reactions/delete', {
 			noteId: props.note.id,
 		}).then(() => {
@@ -66,6 +77,11 @@ async function toggleReaction() {
 			}
 		});
 	} else {
+		if (mock) {
+			emit('reactionToggled', props.reaction, (props.count + 1));
+			return;
+		}
+
 		os.api('notes/reactions/create', {
 			noteId: props.note.id,
 			reaction: props.reaction,
@@ -94,24 +110,26 @@ onMounted(() => {
 	if (!props.isInitial) anime();
 });
 
-useTooltip(buttonEl, async (showing) => {
-	const reactions = await os.apiGet('notes/reactions', {
-		noteId: props.note.id,
-		type: props.reaction,
-		limit: 11,
-		_cacheKey_: props.count,
-	});
+if (!mock) {
+	useTooltip(buttonEl, async (showing) => {
+		const reactions = await os.apiGet('notes/reactions', {
+			noteId: props.note.id,
+			type: props.reaction,
+			limit: 10,
+			_cacheKey_: props.count,
+		});
 
-	const users = reactions.map(x => x.user);
+		const users = reactions.map(x => x.user);
 
-	os.popup(XDetails, {
-		showing,
-		reaction: props.reaction,
-		users,
-		count: props.count,
-		targetElement: buttonEl.value,
-	}, {}, 'closed');
-}, 100);
+		os.popup(XDetails, {
+			showing,
+			reaction: props.reaction,
+			users,
+			count: props.count,
+			targetElement: buttonEl.value,
+		}, {}, 'closed');
+	}, 100);
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkReactionsViewer.vue

@@ -12,14 +12,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:moveClass="defaultStore.state.animation ? $style.transition_x_move : ''"
 	tag="div" :class="$style.root"
 >
-	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note"/>
+	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/>
 	<slot v-if="hasMoreReactions" name="more"/>
 </TransitionGroup>
 </template>
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { watch } from 'vue';
+import { inject, watch } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { defaultStore } from '@/store.js';
 
@@ -30,6 +30,12 @@ const props = withDefaults(defineProps<{
 	maxNumber: Infinity,
 });
 
+const mock = inject<boolean>('mock', false);
+
+const emit = defineEmits<{
+	(ev: 'mockUpdateMyReaction', emoji: string, delta: number): void;
+}>();
+
 const initialReactions = new Set(Object.keys(props.note.reactions));
 
 let reactions = $ref<[string, number][]>([]);
@@ -39,6 +45,15 @@ if (props.note.myReaction && !Object.keys(reactions).includes(props.note.myReact
 	reactions[props.note.myReaction] = props.note.reactions[props.note.myReaction];
 }
 
+function onMockToggleReaction(emoji: string, count: number) {
+	if (!mock) return;
+
+	const i = reactions.findIndex((item) => item[0] === emoji);
+	if (i < 0) return;
+
+	emit('mockUpdateMyReaction', emoji, (count - reactions[i][1]));
+}
+
 watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {
 	let newReactions: [string, number][] = [];
 	hasMoreReactions = Object.keys(newSource).length > maxNumber;

packages/frontend/src/components/MkTimeline.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPullToRefresh ref="prComponent" @refresh="() => reloadTimeline(true)">
+<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
 	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
 </MkPullToRefresh>
 </template>
@@ -209,25 +209,18 @@ const pagination = {
 	params: query,
 };
 
-const reloadTimeline = (fromPR = false) => {
-	tlNotesCount = 0;
+function reloadTimeline() {
+	return new Promise<void>((res) => {
+		tlNotesCount = 0;
 
-	tlComponent.pagingComponent?.reload().then(() => {
-		reloadStream();
-		if (fromPR) prComponent.refreshFinished();
+		tlComponent.pagingComponent?.reload().then(() => {
+			reloadStream();
+			res();
+		});
 	});
-};
-
-//const pullRefresh = () => reloadTimeline(true);
+}
 
 defineExpose({
 	reloadTimeline,
 });
-
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
 </script>

packages/frontend/src/components/MkTutorialDialog.Note.vue

@@ -0,0 +1,117 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="phase === 'aboutNote'" class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._note.description }}</div>
+	<MkNote :class="$style.exampleNoteRoot" style="pointer-events: none;" :note="exampleNote" :mock="true"/>
+	<div class="_gaps_s">
+		<div><i class="ti ti-arrow-back-up"></i> <b>{{ i18n.ts.reply }}</b> … {{ i18n.ts._initialTutorial._note.reply }}</div>
+		<div><i class="ti ti-repeat"></i> <b>{{ i18n.ts.renote }}</b> … {{ i18n.ts._initialTutorial._note.renote }}</div>
+		<div><i class="ti ti-plus"></i> <b>{{ i18n.ts.reaction }}</b> … {{ i18n.ts._initialTutorial._note.reaction }}</div>
+		<div><i class="ti ti-dots"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div>
+	</div>
+</div>
+<div v-else-if="phase === 'howToReact'" class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._reaction.description }}</div>
+	<div>{{ i18n.ts._initialTutorial._reaction.letsTryReacting }}</div>
+	<MkNote :class="$style.exampleNoteRoot" :note="exampleNote" :mock="true" @reaction="addReaction" @removeReaction="removeReaction" @updateReaction="updateReaction"/>
+	<div v-if="onceReacted"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._reaction.reactNotification }}<br>{{ i18n.ts._initialTutorial._reaction.reactDone }}</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { ref, reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import { globalEvents } from '@/events.js';
+import { $i } from '@/account.js';
+import MkNote from '@/components/MkNote.vue';
+
+const props = defineProps<{
+	phase: 'aboutNote' | 'howToReact';
+}>();
+
+const emit = defineEmits<{
+	(ev: 'reacted'): void;
+}>();
+
+const exampleNote = reactive<Misskey.entities.Note>({
+	id: '0000000000',
+	createdAt: '2019-04-14T17:30:49.181Z',
+	userId: '0000000001',
+	user: {
+		id: '0000000001',
+		name: '藍',
+		username: 'ai',
+		host: null,
+		avatarDecorations: [],
+		avatarUrl: '/client-assets/tutorial/ai.webp',
+		avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
+		isBot: false,
+		isCat: true,
+		emojis: {},
+		onlineStatus: null,
+		badgeRoles: [],
+	},
+	text: 'just setting up my msky',
+	cw: null,
+	visibility: 'public',
+	localOnly: false,
+	reactionAcceptance: null,
+	renoteCount: 0,
+	repliesCount: 1,
+	reactions: {},
+	reactionEmojis: {},
+	fileIds: [],
+	files: [],
+	replyId: null,
+	renoteId: null,
+});
+const onceReacted = ref<boolean>(false);
+
+function addReaction(emoji) {
+	onceReacted.value = true;
+	emit('reacted');
+	exampleNote.reactions[emoji] = 1;
+	exampleNote.myReaction = emoji;
+	doNotification(emoji);
+}
+
+function doNotification(emoji: string): void {
+	if (!$i || !emoji) return;
+
+	const notification: Misskey.entities.Notification = {
+		id: Math.random().toString(),
+		createdAt: new Date().toUTCString(),
+		isRead: false,
+		type: 'reaction',
+		reaction: emoji,
+		user: $i,
+		userId: $i.id,
+		note: exampleNote,
+	};
+
+	globalEvents.emit('clientNotification', notification);
+}
+
+function removeReaction(emoji) {
+	delete exampleNote.reactions[emoji];
+	exampleNote.myReaction = undefined;
+}
+</script>
+
+<style lang="scss" module>
+.exampleNoteRoot {
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+</style>

packages/frontend/src/components/MkTutorialDialog.PostNote.vue

@@ -0,0 +1,135 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._postNote.description1 }}</div>
+	<MkPostForm :class="$style.exampleRoot" :mock="true"/>
+	<MkFormSection>
+		<template #label>{{ i18n.ts.visibility }}</template>
+		<div class="_gaps">
+			<div>{{ i18n.ts._initialTutorial._postNote._visibility.description }}</div>
+			<div><i class="ti ti-world"></i> <b>{{ i18n.ts._visibility.public }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.public }}</div>
+			<div><i class="ti ti-home"></i> <b>{{ i18n.ts._visibility.home }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.home }}</div>
+			<div><i class="ti ti-lock"></i> <b>{{ i18n.ts._visibility.followers }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.followers }}</div>
+			<div class="_gaps_s">
+				<div><i class="ti ti-mail"></i> <b>{{ i18n.ts._visibility.specified }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.direct }}</div>
+				<MkInfo :warn="true">
+					<b>{{ i18n.ts._initialTutorial._postNote._visibility.doNotSendConfidencialOnDirect1 }}</b> {{ i18n.ts._initialTutorial._postNote._visibility.doNotSendConfidencialOnDirect2 }}
+				</MkInfo>
+			</div>
+			<div><i class="ti ti-rocket-off"></i> <b>{{ i18n.ts._visibility.disableFederation }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.localOnly }}</div>
+		</div>
+	</MkFormSection>
+	<MkFormSection>
+		<template #label>{{ i18n.ts._initialTutorial._postNote._cw.title }}</template>
+		<div class="_gaps">
+			<div>{{ i18n.ts._initialTutorial._postNote._cw.description }}</div>
+			<MkNote :class="$style.exampleRoot" :note="exampleCWNote" :mock="true"/>
+			<div>{{ i18n.ts._initialTutorial._postNote._cw.useCases }}</div>
+		</div>
+	</MkFormSection>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkNote from '@/components/MkNote.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
+import MkFormSection from '@/components/form/section.vue';
+import MkInfo from '@/components/MkInfo.vue';
+
+const exampleCWNote = reactive<Misskey.entities.Note>({
+	id: '0000000000',
+	createdAt: '2019-04-14T17:30:49.181Z',
+	userId: '0000000001',
+	user: {
+		id: '0000000001',
+		name: '藍',
+		username: 'ai',
+		host: null,
+		avatarDecorations: [],
+		avatarUrl: '/client-assets/tutorial/ai.webp',
+		avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
+		isBot: false,
+		isCat: true,
+		emojis: {},
+		onlineStatus: null,
+		badgeRoles: [],
+	},
+	text: i18n.ts._initialTutorial._postNote._cw._exampleNote.note,
+	cw: i18n.ts._initialTutorial._postNote._cw._exampleNote.cw,
+	visibility: 'public',
+	localOnly: false,
+	reactionAcceptance: null,
+	renoteCount: 0,
+	repliesCount: 1,
+	reactions: {},
+	reactionEmojis: {},
+	fileIds: [],
+	files: [],
+	replyId: null,
+	renoteId: null,
+});
+</script>
+
+<style lang="scss" module>
+.exampleRoot {
+	max-width: none!important;
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+
+.image {
+	max-width: 300px;
+	margin: 0 auto;
+}
+
+.post {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 40px;
+	color: var(--fgOnAccent);
+	font-weight: bold;
+	text-align: left;
+
+	&:before {
+		content: "";
+		display: block;
+		width: calc(100% - 38px);
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+
+}
+
+.postIcon {
+	position: relative;
+	margin-left: 30px;
+	margin-right: 8px;
+	width: 32px;
+}
+
+.postText {
+	position: relative;
+	line-height: 40px;
+}
+</style>

packages/frontend/src/components/MkTutorialDialog.Sensitive.vue

@@ -0,0 +1,144 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.description }}</div>
+	<div>{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.tryThisFile }}</div>
+	<MkInfo>{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.method }}</MkInfo>
+	<MkPostForm
+		:class="$style.exampleRoot"
+		:mock="true"
+		:initialNote="exampleNote"
+		@fileChangeSensitive="doSucceeded"
+	></MkPostForm>
+	<div v-if="onceSucceeded"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.sensitiveSucceeded }}</div>
+	<MkFolder>
+		<template #label>{{ i18n.ts.previewNoteText }}</template>
+		<MkNote :mock="true" :note="exampleNote" :class="$style.exampleRoot"></MkNote>
+	</MkFolder>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { ref, reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkPostForm from '@/components/MkPostForm.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkNote from '@/components/MkNote.vue';
+import { $i } from '@/account.js';
+
+const emit = defineEmits<{
+	(ev: 'succeeded'): void;
+}>();
+
+const onceSucceeded = ref<boolean>(false);
+
+function doSucceeded(fileId: string, to: boolean) {
+	if (fileId === exampleNote.fileIds[0] && to) {
+		onceSucceeded.value = true;
+		emit('succeeded');
+	}
+}
+
+const exampleNote = reactive<Misskey.entities.Note>({
+	id: '0000000000',
+	createdAt: '2019-04-14T17:30:49.181Z',
+	userId: '0000000001',
+	user: $i!,
+	text: i18n.ts._initialTutorial._howToMakeAttachmentsSensitive._exampleNote.note,
+	cw: null,
+	visibility: 'public',
+	localOnly: false,
+	reactionAcceptance: null,
+	renoteCount: 0,
+	repliesCount: 1,
+	reactions: {},
+	reactionEmojis: {},
+	fileIds: ['0000000002'],
+	files: [{
+		id: '0000000002',
+		createdAt: '2019-04-14T17:30:49.181Z',
+		name: 'natto_failed.webp',
+		type: 'image/webp',
+		md5: 'c44286cf152d0740be0ce5ad45ea85c3',
+		size: 827532,
+		isSensitive: false,
+		blurhash: 'LXNA3TD*XAIA%1%M%gt7.TofRioz',
+		properties: {
+			width: 256,
+			height: 256,
+		},
+		url: '/client-assets/tutorial/natto_failed.webp',
+		thumbnailUrl: '/client-assets/tutorial/natto_failed.webp',
+		comment: null,
+		folderId: null,
+		folder: null,
+		userId: null,
+		user: null,
+	}],
+	replyId: null,
+	renoteId: null,
+});
+
+</script>
+
+<style lang="scss" module>
+.exampleRoot {
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+
+.image {
+	max-width: 300px;
+	margin: 0 auto;
+}
+
+.post {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 40px;
+	color: var(--fgOnAccent);
+	font-weight: bold;
+	text-align: left;
+
+	&:before {
+		content: "";
+		display: block;
+		width: calc(100% - 38px);
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+
+}
+
+.postIcon {
+	position: relative;
+	margin-left: 30px;
+	margin-right: 8px;
+	width: 32px;
+}
+
+.postText {
+	position: relative;
+	line-height: 40px;
+}
+</style>

packages/frontend/src/components/MkTutorialDialog.Timeline.vue

@@ -0,0 +1,87 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._timeline.description1 }}</div>
+	<div class="_gaps_s">
+		<div><i class="ti ti-home"></i> <b>{{ i18n.ts._timelines.home }}</b> … {{ i18n.ts._initialTutorial._timeline.home }}</div>
+		<div><i class="ti ti-planet"></i> <b>{{ i18n.ts._timelines.local }}</b> … {{ i18n.ts._initialTutorial._timeline.local }}</div>
+		<div><i class="ti ti-universe"></i> <b>{{ i18n.ts._timelines.social }}</b> … {{ i18n.ts._initialTutorial._timeline.social }}</div>
+		<div><i class="ti ti-whirl"></i> <b>{{ i18n.ts._timelines.global }}</b> … {{ i18n.ts._initialTutorial._timeline.global }}</div>
+	</div>
+	<div class="_gaps_s">
+		<div>{{ i18n.ts._initialTutorial._timeline.description2 }}</div>
+		<img :class="$style.image" src="/client-assets/tutorial/timeline_tab.png"/>
+	</div>
+	<div :class="$style.divider"></div>
+	<I18n :src="i18n.ts._initialTutorial._timeline.description3" tag="div" style="padding: 0 16px;">
+		<template #link>
+			<a href="https://misskey-hub.net/docs/features/timeline.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
+		</template>
+	</I18n>
+
+</div>
+</template>
+
+<script setup lang="ts">
+import { i18n } from '@/i18n.js';
+</script>
+
+<style lang="scss" module>
+.exampleNoteRoot {
+	border-radius: var(--radius);
+	border: var(--panelBorder);
+	background: var(--panel);
+}
+
+.divider {
+	height: 1px;
+	background: var(--divider);
+}
+
+.image {
+	max-width: 300px;
+	margin: 0 auto;
+}
+
+.post {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 40px;
+	color: var(--fgOnAccent);
+	font-weight: bold;
+	text-align: left;
+
+	&:before {
+		content: "";
+		display: block;
+		width: calc(100% - 38px);
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 999px;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+
+}
+
+.postIcon {
+	position: relative;
+	margin-left: 30px;
+	margin-right: 8px;
+	width: 32px;
+}
+
+.postText {
+	position: relative;
+	line-height: 40px;
+}
+</style>

packages/frontend/src/components/MkTutorialDialog.vue

@@ -0,0 +1,260 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="600"
+	:height="650"
+	@close="close(true)"
+	@closed="emit('closed')"
+>
+	<template v-if="page === 1" #header><i class="ti ti-pencil"></i> {{ i18n.ts._initialTutorial._note.title }}</template>
+	<template v-else-if="page === 2" #header><i class="ti ti-mood-smile"></i> {{ i18n.ts._initialTutorial._reaction.title }}</template>
+	<template v-else-if="page === 3" #header><i class="ti ti-home"></i> {{ i18n.ts._initialTutorial._timeline.title }}</template>
+	<template v-else-if="page === 4" #header><i class="ti ti-pencil-plus"></i> {{ i18n.ts._initialTutorial._postNote.title }}</template>
+	<template v-else-if="page === 5" #header><i class="ti ti-eye-exclamation"></i> {{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.title }}</template>
+	<template v-else #header>{{ i18n.ts._initialTutorial.title }}</template>
+
+	<div style="overflow-x: clip;">
+		<Transition
+			mode="out-in"
+			:enterActiveClass="$style.transition_x_enterActive"
+			:leaveActiveClass="$style.transition_x_leaveActive"
+			:enterFromClass="$style.transition_x_enterFrom"
+			:leaveToClass="$style.transition_x_leaveTo"
+		>
+			<template v-if="page === 0">
+				<div :class="$style.centerPage">
+					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
+					<MkSpacer :marginMin="20" :marginMax="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._initialTutorial._landing.title }}</div>
+							<div>{{ i18n.ts._initialTutorial._landing.description }}</div>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts._initialTutorial.launchTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
+							<MkButton style="margin: 0 auto;" transparent rounded @click="close(true)">{{ i18n.ts.close }}</MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+			<template v-else-if="page === 1">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XNote phase="aboutNote"/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 1" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 2">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<div class="_gaps">
+								<XNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/>
+								<div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div>
+							</div>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate :disabled="!isReactionTutorialPushed" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 3">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XTimeline/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 4">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XPostNote/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 5">
+				<div style="height: 100cqh; overflow: auto;">
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<div class="_gaps">
+								<XSensitive @succeeded="isSensitiveTutorialSucceeded = true"/>
+								<div v-if="!isSensitiveTutorialSucceeded">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.doItToContinue }}</div>
+							</div>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate :disabled="!isSensitiveTutorialSucceeded" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="page === 6">
+				<div :class="$style.centerPage">
+					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
+					<MkSpacer :marginMin="20" :marginMax="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._initialTutorial._done.title }}</div>
+							<I18n :src="i18n.ts._initialTutorial._done.description" tag="div" style="padding: 0 16px;">
+								<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>
+							<div class="_buttonsCenter" style="margin-top: 16px;">
+								<MkButton v-if="initialPage !== 4" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton rounded primary gradate @click="close(false)">{{ i18n.ts.close }}</MkButton>
+							</div>
+						</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 XNote from '@/components/MkTutorialDialog.Note.vue';
+import XTimeline from '@/components/MkTutorialDialog.Timeline.vue';
+import XPostNote from '@/components/MkTutorialDialog.PostNote.vue';
+import XSensitive from '@/components/MkTutorialDialog.Sensitive.vue';
+import MkAnimBg from '@/components/MkAnimBg.vue';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { host } from '@/config.js';
+import { claimAchievement } from '@/scripts/achievements.js';
+import * as os from '@/os.js';
+
+const props = defineProps<{
+	initialPage?: number;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const page = ref(props.initialPage ?? 0);
+
+watch(page, (to) => {
+	// チュートリアルの枚数を増やしたら必ず変更すること！！
+	if (to === 6) {
+		claimAchievement('tutorialCompleted');
+	}
+});
+
+const isReactionTutorialPushed = ref<boolean>(false);
+const isSensitiveTutorialSucceeded = ref<boolean>(false);
+
+async function close(skip: boolean) {
+	if (skip) {
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts._initialTutorial.skipAreYouSure,
+		});
+		if (canceled) return;
+	}
+
+	dialog.value?.close();
+}
+</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);
+}
+
+.progressBar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	height: 4px;
+}
+
+.progressBarValue {
+	height: 100%;
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	transition: all 0.5s cubic-bezier(0,.5,.5,1);
+}
+
+.centerPage {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100cqh;
+	padding-bottom: 30px;
+	box-sizing: border-box;
+}
+
+.pageRoot {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+}
+
+.pageMain {
+	flex-grow: 1;
+	line-height: 1.5;
+}
+
+.pageFooter {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	flex-shrink: 0;
+	padding: 12px;
+	border-top: solid 0.5px var(--divider);
+	-webkit-backdrop-filter: blur(15px);
+	backdrop-filter: blur(15px);
+}
+</style>

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -46,24 +46,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 			<template v-else-if="page === 1">
 				<div style="height: 100cqh; overflow: auto;">
-					<MkSpacer :marginMin="20" :marginMax="28">
-						<XProfile/>
-						<div class="_buttonsCenter" style="margin-top: 16px;">
-							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XProfile/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
 						</div>
-					</MkSpacer>
+					</div>
 				</div>
 			</template>
 			<template v-else-if="page === 2">
 				<div style="height: 100cqh; overflow: auto;">
-					<MkSpacer :marginMin="20" :marginMax="28">
-						<XPrivacy/>
-						<div class="_buttonsCenter" style="margin-top: 16px;">
-							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-							<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+					<div :class="$style.pageRoot">
+						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
+							<XPrivacy/>
+						</MkSpacer>
+						<div :class="$style.pageFooter">
+							<div class="_buttonsCenter">
+								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
 						</div>
-					</MkSpacer>
+					</div>
 				</div>
 			</template>
 			<template v-else-if="page === 3">
@@ -102,16 +110,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<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>
+							<div>{{ i18n.t('_initialAccountSetting.youCanContinueTutorial', { name: instance.name ?? host }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
+								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
+							</div>
+							<div class="_buttonsCenter">
 								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton primary rounded gradate data-cy-user-setup-continue @click="close(false)">{{ i18n.ts.close }}</MkButton>
+								<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
 							</div>
 						</div>
 					</MkSpacer>
@@ -123,7 +128,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import {computed, ref, shallowRef, watch} from 'vue';
+import {computed, ref, shallowRef, watch, nextTick, defineAsyncComponent } from 'vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
@@ -144,6 +149,7 @@ const emit = defineEmits<{
 
 const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 
+// eslint-disable-next-line vue/no-setup-props-destructure
 const page = ref(defaultStore.state.accountSetupWizard);
 
 watch(page, () => {
@@ -159,10 +165,24 @@ async function close(skip: boolean) {
 		if (canceled) return;
 	}
 
-	dialog.value.close();
+	dialog.value?.close();
 	defaultStore.set('accountSetupWizard', -1);
 }
 
+function setupComplete() {
+	defaultStore.set('accountSetupWizard', -1);
+	dialog.value?.close();
+}
+
+function launchTutorial() {
+	setupComplete();
+	nextTick(() => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
+			initialPage: 1,
+		}, {}, 'closed');
+	});
+}
+
 async function later(later: boolean) {
 	if (later) {
 		const { canceled } = await os.confirm({
@@ -172,7 +192,7 @@ async function later(later: boolean) {
 		if (canceled) return;
 	}
 
-	dialog.value.close();
+	dialog.value?.close();
 	defaultStore.set('accountSetupWizard', 0);
 }
 </script>
@@ -229,10 +249,21 @@ async function later(later: boolean) {
 	box-sizing: border-box;
 }
 
+.pageRoot {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+}
+
+.pageMain {
+	flex-grow: 1;
+}
+
 .pageFooter {
 	position: sticky;
 	bottom: 0;
 	left: 0;
+	flex-shrink: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--divider);
 	-webkit-backdrop-filter: blur(15px);

packages/frontend/src/components/MkVisibilityPicker.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="[$style.label, $style.item]">
 			{{ i18n.ts.visibility }}
 		</div>
-		<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
+		<button key="public" :disabled="isSilenced" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
 			<div :class="$style.icon"><i class="ti ti-world"></i></div>
 			<div :class="$style.body">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
@@ -51,6 +51,7 @@ const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
 const props = withDefaults(defineProps<{
 	currentVisibility: typeof Misskey.noteVisibilities[number];
+	isSilenced: boolean;
 	localOnly: boolean;
 	src?: HTMLElement;
 }>(), {

packages/frontend/src/components/global/MkAcct.vue

@@ -17,7 +17,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { toUnicode } from 'punycode/';
-import MkCondensedLine from './MkCondensedLine.vue';
 import { host as hostRaw } from '@/config.js';
 import { defaultStore } from '@/store.js';
 

packages/frontend/src/emojilist.json

@@ -1045,7 +1045,7 @@
 	["⌛", "hourglass", 6],
 	["📡", "satellite", 6],
 	["🔋", "battery", 6],
-	["🪫", "battery", 6],
+	["🪫", "low_battery", 6],
 	["🔌", "electric_plug", 6],
 	["💡", "bulb", 6],
 	["🔦", "flashlight", 6],

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

@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton primary rounded inline @click="iLoveMisskey">I <Mfm text="$[jelly ❤]"/> #Misskey</MkButton>
 				</div>
 				<FormSection>
-					<div class="_formLinks">
+					<div class="_gaps_s">
 						<FormLink to="https://github.com/misskey-dev/misskey" external>
 							<template #icon><i class="ti ti-code"></i></template>
 							{{ i18n.ts._aboutMisskey.source }}

packages/frontend/src/pages/about.vue

@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkKeyValue>
 					</FormSplit>
 					<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>{{ i18n.ts.impressum }}</FormLink>
-					<div class="_formLinks">
+					<div class="_gaps_s">
 						<MkFolder v-if="instance.serverRules.length > 0">
 							<template #label>{{ i18n.ts.serverRules }}</template>
 
@@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<FormSection>
 				<template #label>Well-known resources</template>
-				<div class="_formLinks">
+				<div class="_gaps_s">
 					<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
 					<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
 					<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>

packages/frontend/src/pages/admin/announcements.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
 		<div class="_gaps">
+			<MkInfo>{{ i18n.ts._announcement.shouldNotBeUsedToPresentPermanentInfo }}</MkInfo>
 			<MkInfo v-if="announcements.length > 5" warn>{{ i18n.ts._announcement.tooManyActiveAnnouncementDescription }}</MkInfo>
 
 			<MkFolder v-for="announcement in announcements" :key="announcement.id ?? announcement._id" :defaultOpen="announcement.id == null">
@@ -43,6 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<option value="banner">{{ i18n.ts.banner }}</option>
 						<option value="dialog">{{ i18n.ts.dialog }}</option>
 					</MkRadios>
+					<MkInfo v-if="announcement.display === 'dialog'" warn>{{ i18n.ts._announcement.dialogAnnouncementUxWarn }}</MkInfo>
 					<MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription">
 						{{ i18n.ts._announcement.forExistingUsers }}
 					</MkSwitch>

packages/frontend/src/pages/channel-editor.vue

@@ -24,6 +24,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.sensitive }}</template>
 			</MkSwitch>
 
+			<MkSwitch v-model="allowRenoteToExternal">
+				<template #label>{{ i18n.ts._channel.allowRenoteToExternal }}</template>
+			</MkSwitch>
+
 			<div>
 				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
 				<div v-else-if="bannerUrl">
@@ -76,7 +80,7 @@ import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
-import MkSwitch from "@/components/MkSwitch.vue";
+import MkSwitch from '@/components/MkSwitch.vue';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
@@ -93,6 +97,7 @@ let bannerUrl = $ref<string | null>(null);
 let bannerId = $ref<string | null>(null);
 let color = $ref('#000');
 let isSensitive = $ref(false);
+let allowRenoteToExternal = $ref(true);
 const pinnedNotes = ref([]);
 
 watch(() => bannerId, async () => {
@@ -121,6 +126,7 @@ async function fetchChannel() {
 		id,
 	}));
 	color = channel.color;
+	allowRenoteToExternal = channel.allowRenoteToExternal;
 }
 
 fetchChannel();
@@ -150,6 +156,7 @@ function save() {
 		pinnedNoteIds: pinnedNotes.value.map(x => x.id),
 		color: color,
 		isSensitive: isSensitive,
+		allowRenoteToExternal: allowRenoteToExternal,
 	};
 
 	if (props.channelId) {

packages/frontend/src/pages/drive.file.info.vue

@@ -56,6 +56,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>{{ i18n.ts._fileViewer.size }}</template>
 				<template #value>{{ bytes(file.size) }}</template>
 			</MkKeyValue>
+			<MkKeyValue :class="$style.fileMetaDataChildren" :copy="file.url">
+				<template #key>URL</template>
+				<template #value>{{ file.url }}</template>
+			</MkKeyValue>
 		</div>
 	</div>
 	<div v-else class="_fullinfo">

packages/frontend/src/pages/registry.keys.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<FormSplit>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts._registry.domain }}</template>
-					<template #value>{{ i18n.ts.system }}</template>
+					<template #value>{{ props.domain === '@' ? i18n.ts.system : props.domain.toUpperCase() }}</template>
 				</MkKeyValue>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts._registry.scope }}</template>
@@ -23,8 +23,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<FormSection v-if="keys">
 				<template #label>{{ i18n.ts.keys }}</template>
-				<div class="_formLinks">
-					<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
+				<div class="_gaps_s">
+					<FormLink v-for="key in keys" :to="`/registry/value/${props.domain}/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
 				</div>
 			</FormSection>
 		</div>
@@ -46,15 +46,17 @@ import FormSplit from '@/components/form/split.vue';
 
 const props = defineProps<{
 	path: string;
+	domain: string;
 }>();
 
-const scope = $computed(() => props.path.split('/'));
+const scope = $computed(() => props.path ? props.path.split('/') : []);
 
 let keys = $ref(null);
 
 function fetchKeys() {
 	os.api('i/registry/keys-with-type', {
 		scope: scope,
+		domain: props.domain === '@' ? null : props.domain,
 	}).then(res => {
 		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
 	});

packages/frontend/src/pages/registry.value.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<FormSplit>
 					<MkKeyValue>
 						<template #key>{{ i18n.ts._registry.domain }}</template>
-						<template #value>{{ i18n.ts.system }}</template>
+						<template #value>{{ props.domain === '@' ? i18n.ts.system : props.domain.toUpperCase() }}</template>
 					</MkKeyValue>
 					<MkKeyValue>
 						<template #key>{{ i18n.ts._registry.scope }}</template>
@@ -58,6 +58,7 @@ import FormInfo from '@/components/MkInfo.vue';
 
 const props = defineProps<{
 	path: string;
+	domain: string;
 }>();
 
 const scope = $computed(() => props.path.split('/').slice(0, -1));
@@ -70,6 +71,7 @@ function fetchValue() {
 	os.api('i/registry/get-detail', {
 		scope,
 		key,
+		domain: props.domain === '@' ? null : props.domain,
 	}).then(res => {
 		value = res;
 		valueForEditor = JSON5.stringify(res.value, null, '\t');
@@ -95,6 +97,7 @@ async function save() {
 			scope,
 			key,
 			value: JSON5.parse(valueForEditor),
+			domain: props.domain === '@' ? null : props.domain,
 		});
 	});
 }
@@ -108,6 +111,7 @@ function del() {
 		os.apiWithDialog('i/registry/remove', {
 			scope,
 			key,
+			domain: props.domain === '@' ? null : props.domain,
 		});
 	});
 }

packages/frontend/src/pages/registry.vue

@@ -9,12 +9,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="600" :marginMin="16">
 		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
 
-		<FormSection v-if="scopes">
-			<template #label>{{ i18n.ts.system }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
-			</div>
-		</FormSection>
+		<div v-if="scopesWithDomain" class="_gaps_m">
+			<FormSection v-for="domain in scopesWithDomain" :key="domain.domain">
+				<template #label>{{ domain.domain ? domain.domain.toUpperCase() : i18n.ts.system }}</template>
+				<div class="_gaps_s">
+					<FormLink v-for="scope in domain.scopes" :to="`/registry/keys/${domain.domain ?? '@'}/${scope.join('/')}`" class="_monospace">{{ scope.length === 0 ? '(root)' : scope.join('/') }}</FormLink>
+				</div>
+			</FormSection>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -28,11 +30,11 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
 
-let scopes = $ref(null);
+let scopesWithDomain = $ref(null);
 
 function fetchScopes() {
-	os.api('i/registry/scopes').then(res => {
-		scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
+	os.api('i/registry/scopes-with-domain').then(res => {
+		scopesWithDomain = res;
 	});
 }
 

packages/frontend/src/pages/signup-complete.vue

@@ -51,7 +51,8 @@ function submit() {
 
 		os.alert({
 			type: 'error',
-			text: i18n.ts.somethingHappened,
+			title: i18n.ts.somethingHappened,
+			text: i18n.ts.signupPendingError,
 		});
 	});
 }

packages/frontend/src/pages/timeline.tutorial.vue

@@ -1,124 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and other misskey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div :class="$style.container">
-	<div :class="$style.title">
-		<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>
-			</button>
-			<span :class="$style.stepNumber">{{ tutorial + 1 }} / {{ tutorialsNumber }}</span>
-			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === tutorialsNumber - 1" @click="tutorial++">
-				<i class="ti ti-chevron-right"></i>
-			</button>
-		</div>
-	</div>
-
-	<div v-if="tutorial === 0" :class="$style.body">
-		<div>{{ i18n.t('_timelineTutorial.step1_1', { name: instance.name ?? host }) }}</div>
-		<div>{{ i18n.t('_timelineTutorial.step1_2', { name: instance.name ?? host }) }}</div>
-    <div>{{ i18n.t('_timelineTutorial.step1_3', { name: instance.name ?? host }) }}</div>
-	</div>
-	<div v-else-if="tutorial === 1" :class="$style.body">
-		<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._timelineTutorial.step3_1 }}</div>
-		<div>{{ i18n.ts._timelineTutorial.step3_2 }}</div>
-	</div>
-	<div v-else-if="tutorial === 3" :class="$style.body">
-		<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">
-			<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 rounded gradate @click="tutorial++">{{ i18n.ts.next }} <i class="ti ti-arrow-right"></i></MkButton>
-		</template>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import { defaultStore } from '@/store.js';
-import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
-import { host } from '@/config.js';
-
-const tutorialsNumber = 4;
-
-const tutorial = computed({
-	get() { return defaultStore.reactiveState.timelineTutorial.value || 0; },
-	set(value) { defaultStore.set('timelineTutorial', value); },
-});
-</script>
-
-<style lang="scss" module>
-.small {
-	opacity: 0.7;
-}
-
-.container {
-	border: solid 2px var(--accent);
-}
-
-.title {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 22px 32px;
-	font-weight: bold;
-
-	&Text {
-		margin: 4px 0;
-		padding-right: 4px;
-	}
-}
-
-.step {
-	margin-left: auto;
-
-	&Arrow {
-		padding: 4px;
-		&:disabled {
-			opacity: 0.5;
-		}
-		&:first-child {
-			padding-right: 8px;
-		}
-		&:last-child {
-			padding-left: 8px;
-		}
-	}
-
-	&Number {
-		font-weight: normal;
-		margin: 4px;
-	}
-}
-
-.body {
-	padding: 0 32px;
-}
-
-.footer {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: right;
-	padding: 22px 32px;
-
-	&Item {
-		margin: 4px;
-	}
-}
-</style>

packages/frontend/src/pages/timeline.vue

@@ -8,7 +8,9 @@ SPDX-License-Identifier: AGPL-3.0-only
         <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
         <MkSpacer :contentMax="800">
             <div ref="rootEl" v-hotkey.global="keymap">
-                <XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
+                <MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
+				{{ i18n.ts._timelineDescription[src] }}
+			</MkInfo>
                 <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" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
@@ -31,9 +33,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch, provide } from 'vue';
+import { computed, watch, provide } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
+import MkInfo from '@/components/MkInfo.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
@@ -48,8 +51,6 @@ import { deviceKind } from '@/scripts/device-kind.js';
 
 provide('shouldOmitHeaderTitle', true);
 
-const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
-
 const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
 const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable && defaultStore.state.showGlobalTimeline) || ($i != null && $i.policies.gtlAvailable && defaultStore.state.showGlobalTimeline);
 const keymap = {
@@ -141,6 +142,13 @@ function focus(): void {
     tlComponent.focus();
 }
 
+function closeTutorial(): void {
+	if (!['home', 'local', 'social', 'global'].includes(src)) return;
+	const before = defaultStore.state.timelineTutorials;
+	before[src] = true;
+	defaultStore.set('timelineTutorials', before);
+}
+
 const headerActions = $computed(() => {
     const tmp = [
 		 {icon: 'ti ti-dots',

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
 				<!--<MkInstanceCardMini :instance="instance"/>-->
-				<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
+				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="name _monospace">{{ instance.host }}</span>
 			</MkA>
 		</MarqueeText>
@@ -46,10 +46,15 @@ import { instance } from '@/instance.js';
 import number from '@/filters/number.js';
 import MkNumber from '@/components/MkNumber.vue';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
+import { getProxiedImageUrl } from '@/scripts/media-proxy.js';
 
 let meta = $ref<Misskey.entities.Instance>();
 let instances = $ref<any[]>();
 
+function getInstanceIcon(instance): string {
+  return getProxiedImageUrl(instance.iconUrl, 'preview');
+}
+
 os.api('meta', { detail: true }).then(_meta => {
 	meta = _meta;
 });

packages/frontend/src/router.ts

@@ -4,7 +4,7 @@
  */
 
 import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
-import { Router } from '@/nirax';
+import { Router } from '@/nirax.js';
 import { $i, iAmModerator } from '@/account.js';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
@@ -322,10 +322,10 @@ export const routes = [{
 	name: 'avatarDecorations',
 	component: page(() => import('./pages/avatar-decorations.vue')),
 }, {
-	path: '/registry/keys/system/:path(*)?',
+	path: '/registry/keys/:domain/:path(*)?',
 	component: page(() => import('./pages/registry.keys.vue')),
 }, {
-	path: '/registry/value/system/:path(*)?',
+	path: '/registry/value/:domain/:path(*)?',
 	component: page(() => import('./pages/registry.value.vue')),
 }, {
 	path: '/registry',

packages/frontend/src/scripts/achievements.ts

@@ -82,6 +82,7 @@ export const ACHIEVEMENT_TYPES = [
 	'cookieClicked',
 	'brainDiver',
 	'smashTestNotificationButton',
+	'tutorialCompleted',
 ] as const;
 
 export const ACHIEVEMENT_BADGES = {
@@ -465,6 +466,11 @@ export const ACHIEVEMENT_BADGES = {
 		bg: 'linear-gradient(0deg, rgb(187 183 59), rgb(255 143 77))',
 		frame: 'bronze',
 	},
+	'tutorialCompleted': {
+		img: '/fluent-emoji/1f393.png',
+		bg: 'linear-gradient(0deg, rgb(220 223 225), rgb(172 192 207))',
+		frame: 'bronze',
+	},
 /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
 } as const satisfies Record<typeof ACHIEVEMENT_TYPES[number], {
 	img: string;

packages/frontend/src/scripts/get-drive-file-menu.ts

@@ -105,6 +105,11 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 	const isImage = file.type.startsWith('image/');
 	let menu;
 	menu = [{
+		type: 'link',
+		to: `/my/drive/file/${file.id}`,
+		text: i18n.ts._fileViewer.title,
+		icon: 'ti ti-info-circle',
+	}, null, {
 		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
 		action: () => rename(file),
@@ -140,11 +145,6 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 		text: i18n.ts.download,
 		icon: 'ti ti-download',
 		download: file.name,
-	}, null, {
-		type: 'link',
-		to: `/my/drive/file/${file.id}`,
-		text: i18n.ts._fileViewer.title,
-		icon: 'ti ti-file',
 	}, null, {
 		text: i18n.ts.delete,
 		icon: 'ti ti-trash',

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

@@ -17,6 +17,7 @@ import { miLocalStorage } from '@/local-storage.js';
 import { getUserMenu } from '@/scripts/get-user-menu.js';
 import { clipsCache } from '@/cache.js';
 import { MenuItem } from '@/types/menu.js';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
 
 export async function getNoteClipMenu(props: {
 	note: Misskey.entities.Note;
@@ -427,3 +428,122 @@ export function getNoteMenu(props: {
 		cleanup,
 	};
 }
+
+type Visibility = 'public' | 'home' | 'followers' | 'specified';
+
+// defaultStore.state.visibilityがstringなためstringも受け付けている
+function smallerVisibility(a: Visibility | string, b: Visibility | string): Visibility {
+	if (a === 'specified' || b === 'specified') return 'specified';
+	if (a === 'followers' || b === 'followers') return 'followers';
+	if (a === 'home' || b === 'home') return 'home';
+	// if (a === 'public' || b === 'public')
+	return 'public';
+}
+
+export function getRenoteMenu(props: {
+	note: Misskey.entities.Note;
+	renoteButton: Ref<HTMLElement>;
+	mock?: boolean;
+}) {
+	const isRenote = (
+		props.note.renote != null &&
+		props.note.text == null &&
+		props.note.fileIds.length === 0 &&
+		props.note.poll == null
+	);
+
+	const appearNote = isRenote ? props.note.renote as Misskey.entities.Note : props.note;
+
+	const channelRenoteItems: MenuItem[] = [];
+	const normalRenoteItems: MenuItem[] = [];
+
+	if (appearNote.channel) {
+		channelRenoteItems.push(...[{
+			text: i18n.ts.inChannelRenote,
+			icon: 'ti ti-repeat',
+			action: () => {
+				const el = props.renoteButton.value as HTMLElement | null | undefined;
+				if (el) {
+					const rect = el.getBoundingClientRect();
+					const x = rect.left + (el.offsetWidth / 2);
+					const y = rect.top + (el.offsetHeight / 2);
+					os.popup(MkRippleEffect, { x, y }, {}, 'end');
+				}
+
+				if (!props.mock) {
+					os.api('notes/create', {
+						renoteId: appearNote.id,
+						channelId: appearNote.channelId,
+					}).then(() => {
+						os.toast(i18n.ts.renoted);
+					});
+				}
+			},
+		}, {
+			text: i18n.ts.inChannelQuote,
+			icon: 'ti ti-quote',
+			action: () => {
+				if (!props.mock) {
+					os.post({
+						renote: appearNote,
+						channel: appearNote.channel,
+					});
+				}
+			},
+		}]);
+	}
+
+	if (!appearNote.channel || appearNote.channel?.allowRenoteToExternal) {
+		normalRenoteItems.push(...[{
+			text: i18n.ts.renote,
+			icon: 'ti ti-repeat',
+			action: () => {
+				const el = props.renoteButton.value as HTMLElement | null | undefined;
+				if (el) {
+					const rect = el.getBoundingClientRect();
+					const x = rect.left + (el.offsetWidth / 2);
+					const y = rect.top + (el.offsetHeight / 2);
+					os.popup(MkRippleEffect, { x, y }, {}, 'end');
+				}
+
+				const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
+				const localOnly = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
+
+				let visibility = appearNote.visibility;
+				visibility = smallerVisibility(visibility, configuredVisibility);
+				if (appearNote.channel?.isSensitive) {
+					visibility = smallerVisibility(visibility, 'home');
+				}
+
+				if (!props.mock) {
+					os.api('notes/create', {
+						localOnly,
+						visibility,
+						renoteId: appearNote.id,
+					}).then(() => {
+						os.toast(i18n.ts.renoted);
+					});
+				}
+			},
+		}, (props.mock) ? undefined : {
+			text: i18n.ts.quote,
+			icon: 'ti ti-quote',
+			action: () => {
+				os.post({
+					renote: appearNote,
+				});
+			},
+		}]);
+	}
+
+	// nullを挟むことで区切り線を出せる
+	const renoteItems = [
+		...normalRenoteItems,
+		...(channelRenoteItems.length > 0 && normalRenoteItems.length > 0) ? [null] : [],
+		...channelRenoteItems,
+	];
+
+	return {
+		menu: renoteItems,
+	};
+}

packages/frontend/src/scripts/use-tooltip.ts

@@ -37,7 +37,7 @@ export function useTooltip(
 		};
 
 		autoHidingTimer = window.setInterval(() => {
-			if (!document.body.contains(elRef.value)) {
+			if (elRef.value == null || !document.body.contains(elRef.value instanceof Element ? elRef.value : elRef.value.$el)) {
 				if (!isHovering) return;
 				isHovering = false;
 				window.clearTimeout(timeoutId);

packages/frontend/src/store.ts

@@ -54,9 +54,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: 0,
 	},
-	timelineTutorial: {
+	timelineTutorials: {
 		where: 'account',
-		default: 0,
+		default: {
+			home: false,
+			local: false,
+			social: false,
+			global: false,
+		},
 	},
 	keepCw: {
 		where: 'account',

packages/frontend/src/style.scss

@@ -352,12 +352,6 @@ hr {
 	grid-gap: 12px;
 }
 
-._formLinks {
-	> *:not(:last-child) {
-		margin-bottom: 8px;
-	}
-}
-
 ._beta {
 	margin-left: 0.7em;
 	font-size: 65%;

packages/frontend/src/ui/_common_/common.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { defineAsyncComponent } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
@@ -102,7 +103,13 @@ export function openInstanceMenu(ev: MouseEvent) {
 		action: () => {
 			window.open('https://misskey-hub.net/help.html', '_blank');
 		},
-	}, {
+	}, ($i) ? {
+		text: i18n.ts._initialTutorial.launchTutorial,
+		icon: 'ti ti-presentation',
+		action: () => {
+			os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed');
+		},
+	} : undefined, {
 		type: 'link',
 		text: i18n.ts.aboutMisskey,
 		to: '/about-misskey',

packages/frontend/src/ui/deck/tl-column.vue

@@ -62,6 +62,12 @@ watch($$(withRenotes), v => {
 	});
 });
 
+watch($$(withReplies), v => {
+	updateColumn(props.column.id, {
+		withReplies: v,
+	});
+});
+
 watch($$(onlyFiles), v => {
 	updateColumn(props.column.id, {
 		onlyFiles: v,

packages/misskey-js/CONTRIBUTING.md

@@ -15,7 +15,7 @@ Issueを作成する前に、以下をご確認ください:
 - 重複を防ぐため、既に同様の内容のIssueが作成されていないか検索してから新しいIssueを作ってください。
 - Issueを質問に使わないでください。
 	- Issueは、要望、提案、問題の報告にのみ使用してください。
-	- 質問は、[Misskey Forum](https://forum.misskey.io/)や[Discord](https://discord.gg/Wp8gVStHW3)でお願いします。
+	- 質問は、[GitHub Discussions](https://github.com/misskey-dev/misskey/discussions)や[Discord](https://discord.gg/Wp8gVStHW3)でお願いします。
 
 ## PRの作成
 PRを作成する前に、以下をご確認ください:

packages/misskey-js/docs/CONTRIBUTING.en.md

@@ -11,7 +11,7 @@ Before creating an issue, please check the following:
 - To avoid duplication, please search for similar issues before creating a new issue.
 - Do not use Issues as a question.
 	- Issues should only be used to feature requests, suggestions, and report problems.
-	- Please ask questions in the [Misskey Forum](https://forum.misskey.io/) or [Discord](https://discord.gg/Wp8gVStHW3).
+	- Please ask questions in [GitHub Discussions](https://github.com/misskey-dev/misskey/discussions) or [Discord](https://discord.gg/Wp8gVStHW3).
 
 ## Creating a PR
 Thank you for your PR! Before creating a PR, please check the following:

packages/misskey-js/etc/misskey-js.api.md

@@ -134,6 +134,20 @@ type Blocking = {
 // @public (undocumented)
 type Channel = {
     id: ID;
+    lastNotedAt: Date | null;
+    userId: User['id'] | null;
+    user: User | null;
+    name: string;
+    description: string | null;
+    bannerId: DriveFile['id'] | null;
+    banner: DriveFile | null;
+    pinnedNoteIds: string[];
+    color: string;
+    isArchived: boolean;
+    notesCount: number;
+    usersCount: number;
+    isSensitive: boolean;
+    allowRenoteToExternal: boolean;
 };
 
 // Warning: (ae-forgotten-export) The symbol "AnyOf" needs to be exported by the entry point index.d.ts
@@ -1483,10 +1497,6 @@ export type Endpoints = {
         };
         res: null;
     };
-    'i/registry/scopes': {
-        req: NoParams;
-        res: string[][];
-    };
     'i/registry/set': {
         req: {
             key: string;
@@ -2689,6 +2699,8 @@ type Note = {
     fileIds: DriveFile['id'][];
     visibility: 'public' | 'home' | 'followers' | 'specified';
     visibleUserIds?: User['id'][];
+    channel?: Channel;
+    channelId?: Channel['id'];
     localOnly?: boolean;
     myReaction?: string;
     reactions: Record<string, number>;

packages/misskey-js/package.json

@@ -20,7 +20,7 @@
 		"url": "git+https://github.com/misskey-dev/misskey.js.git"
 	},
 	"devDependencies": {
-		"@microsoft/api-extractor": "7.38.1",
+		"@microsoft/api-extractor": "7.38.2",
 		"@swc/jest": "0.2.29",
 		"@types/jest": "29.5.7",
 		"@types/node": "20.8.10",

packages/misskey-js/src/api.types.ts

@@ -399,7 +399,6 @@ export type Endpoints = {
 	'i/registry/keys-with-type': { req: { scope?: string[]; }; res: Record<string, 'null' | 'array' | 'number' | 'string' | 'boolean' | 'object'>; };
 	'i/registry/keys': { req: { scope?: string[]; }; res: string[]; };
 	'i/registry/remove': { req: { key: string; scope?: string[]; }; res: null; };
-	'i/registry/scopes': { req: NoParams; res: string[][]; };
 	'i/registry/set': { req: { key: string; value: any; scope?: string[]; }; res: null; };
 	'i/revoke-token': { req: TODO; res: TODO; };
 	'i/signin-history': { req: { limit?: number; sinceId?: Signin['id']; untilId?: Signin['id']; }; res: Signin[]; };

packages/misskey-js/src/entities.ts

@@ -201,6 +201,8 @@ export type Note = {
 	fileIds: DriveFile['id'][];
 	visibility: 'public' | 'home' | 'followers' | 'specified';
 	visibleUserIds?: User['id'][];
+	channel?: Channel;
+	channelId?: Channel['id'];
 	localOnly?: boolean;
 	myReaction?: string;
 	reactions: Record<string, number>;
@@ -518,7 +520,20 @@ export type FollowRequest = {
 
 export type Channel = {
 	id: ID;
-	// TODO
+	lastNotedAt: Date | null;
+	userId: User['id'] | null;
+	user: User | null;
+	name: string;
+	description: string | null;
+	bannerId: DriveFile['id'] | null;
+	banner: DriveFile | null;
+	pinnedNoteIds: string[];
+	color: string;
+	isArchived: boolean;
+	notesCount: number;
+	usersCount: number;
+	isSensitive: boolean;
+	allowRenoteToExternal: boolean;
 };
 
 export type Following = {