Merge branch 'develop' into drive-bulk

* fix(frontend): ノート購読の挙動改善

* fix

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

CHANGELOG.md

@@ -15,6 +15,7 @@
   - 従来のWebsocket接続を行うモードはリアルタイムモードとして再定義されました
 	- チャットなど、一部の機能は引き続き設定に関わらずWebsocket接続が行われます
 - Enhance: メモリ使用量を軽減しました
+- Enhance: 画像の高品質なプレースホルダを無効化してパフォーマンスを向上させるオプションを追加
 - Enhance: 招待されているが参加していないルームを開いたときに、招待を承認するかどうか尋ねるように
 - Enhance: リプライ元にアンケートがあることが表示されるように
 - Enhance: ノートのサーバー情報のデザインを改善・パフォーマンス向上  
@@ -22,8 +23,10 @@
 - Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
 
 ### Server
+- Enhance: チャットルームの最大メンバー数を30人から50人に調整
 - Enhance: ノートのレスポンスにアンケートが添付されているかどうかを示すフラグ`hasPoll`を追加
 - Enhance: チャットルームのレスポンスに招待されているかどうかを示すフラグ`invitationExists`を追加
+- Enhance: レートリミットの計算方法を調整 (#13997)
 - Fix: チャットルームが削除された場合・チャットルームから抜けた場合に、未読状態が残り続けることがあるのを修正
 - Fix: ユーザ除外アンテナをインポートできない問題を修正
 - Fix: アンテナのセンシティブなチャンネルのノートを含むかどうかの情報がエクスポートされない問題を修正

locales/index.d.ts

@@ -5713,6 +5713,14 @@ export interface Locale extends ILocale {
          * アイコンをスクロールに追従させる
          */
         "useStickyIcons": string;
+        /**
+         * 高品質な画像のプレースホルダを表示
+         */
+        "enableHighQualityImagePlaceholders": string;
+        /**
+         * UIのアニメーション
+         */
+        "uiAnimations": string;
         /**
          * ナビゲーションバーに副ボタンを表示
          */

locales/ja-JP.yml

@@ -1428,6 +1428,8 @@ _settings:
   makeEveryTextElementsSelectable: "全てのテキスト要素を選択可能にする"
   makeEveryTextElementsSelectable_description: "有効にすると、一部のシチュエーションでのユーザビリティが低下する場合があります。"
   useStickyIcons: "アイコンをスクロールに追従させる"
+  enableHighQualityImagePlaceholders: "高品質な画像のプレースホルダを表示"
+  uiAnimations: "UIのアニメーション"
   showNavbarSubButtons: "ナビゲーションバーに副ボタンを表示"
   ifOn: "オンのとき"
   ifOff: "オフのとき"

packages/backend/src/core/ChatService.ts

@@ -29,7 +29,7 @@ import { emojiRegex } from '@/misc/emoji-regex.js';
 import { NotificationService } from '@/core/NotificationService.js';
 import { ModerationLogService } from '@/core/ModerationLogService.js';
 
-const MAX_ROOM_MEMBERS = 30;
+const MAX_ROOM_MEMBERS = 50;
 const MAX_REACTIONS_PER_MESSAGE = 100;
 const isCustomEmojiRegexp = /^:([\w+-]+)(?:@\.)?:$/;
 

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

@@ -326,19 +326,15 @@ export class ApiCallService implements OnApplicationShutdown {
 
 			if (factor > 0) {
 				// Rate limit
-				await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor, factor).catch(err => {
-					if ('info' in err) {
-						// errはLimiter.LimiterInfoであることが期待される
-						throw new ApiError({
-							message: 'Rate limit exceeded. Please try again later.',
-							code: 'RATE_LIMIT_EXCEEDED',
-							id: 'd5826d14-3982-4d2e-8011-b9e9f02499ef',
-							httpStatusCode: 429,
-						}, err.info);
-					} else {
-						throw new TypeError('information must be a rate-limiter information.');
-					}
-				});
+				const rateLimit = await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor, factor);
+				if (rateLimit != null) {
+					throw new ApiError({
+						message: 'Rate limit exceeded. Please try again later.',
+						code: 'RATE_LIMIT_EXCEEDED',
+						id: 'd5826d14-3982-4d2e-8011-b9e9f02499ef',
+						httpStatusCode: 429,
+					}, rateLimit.info);
+				}
 			}
 		}
 

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

@@ -12,6 +12,14 @@ import { LoggerService } from '@/core/LoggerService.js';
 import { bindThis } from '@/decorators.js';
 import type { IEndpointMeta } from './endpoints.js';
 
+type RateLimitInfo = {
+	code: 'BRIEF_REQUEST_INTERVAL',
+	info: Limiter.LimiterInfo,
+} | {
+	code: 'RATE_LIMIT_EXCEEDED',
+	info: Limiter.LimiterInfo,
+}
+
 @Injectable()
 export class RateLimiterService {
 	private logger: Logger;
@@ -31,77 +39,57 @@ export class RateLimiterService {
 	}
 
 	@bindThis
-	public limit(limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string, factor = 1) {
-		{
-			if (this.disabled) {
-				return Promise.resolve();
-			}
+	private checkLimiter(options: Limiter.LimiterOption): Promise<Limiter.LimiterInfo> {
+		return new Promise<Limiter.LimiterInfo>((resolve, reject) => {
+			new Limiter(options).get((err, info) => {
+				if (err) {
+					return reject(err);
+				}
+				resolve(info);
+			});
+		});
+	}
 
-			// Short-term limit
-			const min = new Promise<void>((ok, reject) => {
-				const minIntervalLimiter = new Limiter({
-					id: `${actor}:${limitation.key}:min`,
-					duration: limitation.minInterval! * factor,
-					max: 1,
-					db: this.redisClient,
-				});
+	@bindThis
+	public async limit(limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string, factor = 1): Promise<RateLimitInfo | null> {
+		if (this.disabled) {
+			return null;
+		}
 
-				minIntervalLimiter.get((err, info) => {
-					if (err) {
-						return reject({ code: 'ERR', info });
-					}
-
-					this.logger.debug(`${actor} ${limitation.key} min remaining: ${info.remaining}`);
-
-					if (info.remaining === 0) {
-						return reject({ code: 'BRIEF_REQUEST_INTERVAL', info });
-					} else {
-						if (hasLongTermLimit) {
-							return max.then(ok, reject);
-						} else {
-							return ok();
-						}
-					}
-				});
+		// Short-term limit
+		if (limitation.minInterval != null) {
+			const info = await this.checkLimiter({
+				id: `${actor}:${limitation.key}:min`,
+				duration: limitation.minInterval * factor,
+				max: 1,
+				db: this.redisClient,
 			});
 
-			// Long term limit
-			const max = new Promise<void>((ok, reject) => {
-				const limiter = new Limiter({
-					id: `${actor}:${limitation.key}`,
-					duration: limitation.duration! * factor,
-					max: limitation.max! / factor,
-					db: this.redisClient,
-				});
+			this.logger.debug(`${actor} ${limitation.key} min remaining: ${info.remaining}`);
 
-				limiter.get((err, info) => {
-					if (err) {
-						return reject({ code: 'ERR', info });
-					}
-
-					this.logger.debug(`${actor} ${limitation.key} max remaining: ${info.remaining}`);
-
-					if (info.remaining === 0) {
-						return reject({ code: 'RATE_LIMIT_EXCEEDED', info });
-					} else {
-						return ok();
-					}
-				});
-			});
-
-			const hasShortTermLimit = typeof limitation.minInterval === 'number';
-
-			const hasLongTermLimit =
-				typeof limitation.duration === 'number' &&
-				typeof limitation.max === 'number';
-
-			if (hasShortTermLimit) {
-				return min;
-			} else if (hasLongTermLimit) {
-				return max;
-			} else {
-				return Promise.resolve();
+			if (info.remaining === 0) {
+				// eslint-disable-next-line no-throw-literal
+				return { code: 'BRIEF_REQUEST_INTERVAL', info };
 			}
 		}
+
+		// Long term limit
+		if (limitation.duration != null && limitation.max != null) {
+			const info = await this.checkLimiter({
+				id: `${actor}:${limitation.key}`,
+				duration: limitation.duration,
+				max: limitation.max / factor,
+				db: this.redisClient,
+			});
+
+			this.logger.debug(`${actor} ${limitation.key} max remaining: ${info.remaining}`);
+
+			if (info.remaining === 0) {
+				// eslint-disable-next-line no-throw-literal
+				return { code: 'RATE_LIMIT_EXCEEDED', info };
+			}
+		}
+
+		return null;
 	}
 }

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

@@ -89,10 +89,9 @@ export class SigninApiService {
 			return { error };
 		}
 
-		try {
 		// not more than 1 attempt per second and not more than 10 attempts per hour
-			await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(request.ip));
-		} catch (err) {
+		const rateLimit = await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(request.ip));
+		if (rateLimit != null) {
 			reply.code(429);
 			return {
 				error: {

packages/frontend-embed/src/components/EmMediaImage.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		target="_blank"
 		rel="noopener"
 	>
-		<ImgWithBlurhash
+		<EmImgWithBlurhash
 			:hash="image.blurhash"
 			:src="hide ? null : url"
 			:forceBlurhash="hide"
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/EmImgWithBlurhash.vue';
+import EmImgWithBlurhash from '@/components/EmImgWithBlurhash.vue';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{

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

@@ -48,7 +48,7 @@ import { $i } from '@/i.js';
 import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import { useRouter } from '@/router.js';
-import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
+import { setDragData } from '@/drag-and-drop.js';
 
 const router = useRouter();
 
@@ -91,7 +91,7 @@ function onContextmenu(ev: MouseEvent) {
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
 		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILE, JSON.stringify(props.file));
+		setDragData(ev, 'driveFiles', [props.file]);
 	}
 	isDragging.value = true;
 

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

@@ -42,8 +42,8 @@ import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { prefer } from '@/preferences.js';
-import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 import { globalEvents } from '@/events.js';
+import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@@ -95,12 +95,7 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
-
-	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
+	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -145,27 +140,13 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (driveFile != null && driveFile !== '') {
-			const file = JSON.parse(driveFile);
-			misskeyApi('drive/files/update', {
-				fileId: file.id,
-				folderId: props.folder.id,
-			});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
-	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
+				fileIds: droppedData.map(f => f.id),
 				folderId: props.folder.id,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, props.folder);
+				globalEvents.emit('driveFilesMoved', droppedData, props.folder);
 			});
 		}
 	}
@@ -173,15 +154,15 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (driveFolder != null && driveFolder !== '') {
-			const folder = JSON.parse(driveFolder);
+		const droppedData = getDragData(ev, 'driveFolders');
+		if (droppedData != null) {
+			const droppedFolder = droppedData[0];
 
 			// 移動先が自分自身ならreject
-			if (folder.id === props.folder.id) return;
+			if (droppedFolder.id === props.folder.id) return;
 
 			misskeyApi('drive/folders/update', {
-				folderId: folder.id,
+				folderId: droppedFolder.id,
 				parentId: props.folder.id,
 			}).then(() => {
 			// noop
@@ -211,7 +192,7 @@ function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FOLDER, JSON.stringify(props.folder));
+	setDragData(ev, 'driveFolders', [props.folder]);
 	isDragging.value = true;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる

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

@@ -21,8 +21,8 @@ import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
 import { globalEvents } from '@/events.js';
+import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -44,12 +44,7 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
-	const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
-	const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
-
-	if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) {
+	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -96,27 +91,13 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (driveFile != null && driveFile !== '') {
-			const file = JSON.parse(driveFile);
-			misskeyApi('drive/files/update', {
-				fileId: file.id,
-				folderId: props.folder ? props.folder.id : null,
-			});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
-	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
+				fileIds: droppedData.map(f => f.id),
 				folderId: props.folder ? props.folder.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, props.folder ?? null);
+				globalEvents.emit('driveFilesMoved', droppedData, props.folder ?? null);
 			});
 		}
 	}
@@ -124,13 +105,13 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (driveFolder != null && driveFolder !== '') {
-			const folder = JSON.parse(driveFolder);
+		const droppedData = getDragData(ev, 'driveFolders');
+		if (droppedData != null) {
+			const droppedFolder = droppedData[0];
 			// 移動先が自分自身ならreject
-			if (props.folder && folder.id === props.folder.id) return;
+			if (props.folder && droppedFolder.id === props.folder.id) return;
 			misskeyApi('drive/folders/update', {
-				folderId: folder.id,
+				folderId: droppedFolder.id,
 				parentId: props.folder ? props.folder.id : null,
 			});
 		}

packages/frontend/src/components/MkDrive.vue

@@ -83,14 +83,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 
 			<div v-show="filesPaginator.items.value.length > 0">
-				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
+				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
 					<template #header>
 						<div :class="$style.date">
 							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
 						</div>
 					</template>
 
-					<div :class="$style.files">
+					<TransitionGroup
+						tag="div"
+						:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
+						:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
+						:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
+						:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
+						:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
+						:class="$style.files"
+					>
 						<XFile
 							v-for="file in item.items" :key="file.id"
 							:class="$style.file"
@@ -102,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							@dragstart="onFileDragstart(file, $event)"
 							@dragend="isDragSource = false"
 						/>
-					</div>
+					</TransitionGroup>
 				</MkStickyContainer>
 				<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
@@ -126,7 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed } from 'vue';
+import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed, TransitionGroup } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
@@ -146,7 +154,7 @@ import { store } from '@/store.js';
 import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
 import { usePagination } from '@/composables/use-pagination.js';
 import { globalEvents, useGlobalEvent } from '@/events.js';
-import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER } from '@/consts.js';
+import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -253,7 +261,7 @@ function onFileDragstart(file: Misskey.entities.DriveFile, ev: DragEvent) {
 
 		if (ev.dataTransfer) {
 			ev.dataTransfer.effectAllowed = 'move';
-			ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
+			setDragData(ev, 'driveFiles', selectedFiles.value);
 		}
 	}
 
@@ -271,9 +279,7 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
-	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
-	if (isFile || isDriveFile || isDriveFolder) {
+	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -320,28 +326,13 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (driveFile != null && driveFile !== '') {
-			const file = JSON.parse(driveFile);
-			if (filesPaginator.items.value.some(f => f.id === file.id)) return;
-			misskeyApi('drive/files/update', {
-				fileId: file.id,
-				folderId: folder.value ? folder.value.id : null,
-			});
-		}
-	}
-	//#endregion
-
-	//#region ドライブのファイル(複数)
-	{
-		const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
-		if (driveFiles != null && driveFiles !== '') {
-			const files = JSON.parse(driveFiles);
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: files.map(f => f.id),
+				fileIds: droppedData.map(f => f.id),
 				folderId: folder.value ? folder.value.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', files, folder.value);
+				globalEvents.emit('driveFilesMoved', droppedData, folder.value);
 			});
 		}
 	}
@@ -349,10 +340,9 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	{
-		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (driveFolder != null && driveFolder !== '') {
-			const droppedFolder = JSON.parse(driveFolder);
-
+		const droppedData = getDragData(ev, 'driveFolders');
+		if (droppedData != null) {
+			const droppedFolder = droppedData[0];
 			// 移動先が自分自身ならreject
 			if (folder.value && droppedFolder.id === folder.value.id) return false;
 			if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
@@ -702,6 +692,19 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" module>
+.transition_files_move,
+.transition_files_enterActive,
+.transition_files_leaveActive {
+	transition: all 0.2s ease;
+}
+.transition_files_enterFrom,
+.transition_files_leaveTo {
+	opacity: 0;
+}
+.transition_files_leaveActive {
+	position: absolute;
+}
+
 .nav {
 	display: flex;
 	width: 100%;

packages/frontend/src/components/MkDriveFileSelectDialog.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		{{ multiple ? i18n.ts.selectFiles : i18n.ts.selectFile }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
 	</template>
-	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
+	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelectedFiles="onChangeSelection"/>
 </MkModalWindow>
 </template>
 

packages/frontend/src/components/MkDriveFileThumbnail.vue

@@ -11,15 +11,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.large]: large,
 	}]"
 >
-	<ImgWithBlurhash
-		v-if="isThumbnailAvailable"
+	<MkImgWithBlurhash
+		v-if="isThumbnailAvailable && prefer.s.enableHighQualityImagePlaceholders"
 		:hash="file.blurhash"
 		:src="file.thumbnailUrl"
 		:alt="file.name"
 		:title="file.name"
+		:class="$style.thumbnail"
 		:cover="fit !== 'contain'"
 		:forceBlurhash="forceBlurhash"
 	/>
+	<img
+		v-else-if="isThumbnailAvailable"
+		:src="file.thumbnailUrl"
+		:alt="file.name"
+		:title="file.name"
+		:class="$style.thumbnail"
+		:style="{ objectFit: fit }"
+	/>
 	<i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i>
 	<i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i>
 	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music" :class="$style.icon"></i>
@@ -36,7 +45,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -115,4 +125,8 @@ const isThumbnailAvailable = computed(() => {
 .large .icon {
 	font-size: 40px;
 }
+
+.thumbnail {
+	width: 100%;
+}
 </style>

packages/frontend/src/components/MkDriveFolderSelectDialog.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		{{ multiple ? i18n.ts.selectFolders : i18n.ts.selectFolder }}
 		<span v-if="multiple && selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
 	</template>
-	<MkDrive :multiple="multiple" select="folder" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
+	<MkDrive :multiple="multiple" select="folder" :initialFolder="initialFolder" @changeSelectedFolders="onChangeSelection"/>
 </MkModalWindow>
 </template>
 

packages/frontend/src/components/MkGalleryPostPreview.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover">
 	<div class="thumbnail">
 		<Transition>
-			<ImgWithBlurhash
+			<MkImgWithBlurhash
 				class="img layered"
 				:transition="safe ? null : {
 					duration: 500,
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { computed, ref } from 'vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { prefer } from '@/preferences.js';
 
 const props = defineProps<{

packages/frontend/src/components/MkMarquee.vue

@@ -1,112 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<script lang="ts">
-import { h, onMounted, onUnmounted, ref, watch } from 'vue';
-
-export default {
-	name: 'MarqueeText',
-	props: {
-		duration: {
-			type: Number,
-			default: 15,
-		},
-		repeat: {
-			type: Number,
-			default: 2,
-		},
-		paused: {
-			type: Boolean,
-			default: false,
-		},
-		reverse: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const contentEl = ref<HTMLElement>();
-
-		function calc() {
-			if (contentEl.value == null) return;
-			const eachLength = contentEl.value.offsetWidth / props.repeat;
-			const factor = 3000;
-			const duration = props.duration / ((1 / eachLength) * factor);
-
-			contentEl.value.style.animationDuration = `${duration}s`;
-		}
-
-		watch(() => props.duration, calc);
-
-		onMounted(() => {
-			calc();
-		});
-
-		onUnmounted(() => {
-		});
-
-		return {
-			contentEl,
-		};
-	},
-	render({
-		$slots, $style, $props: {
-			duration, repeat, paused, reverse,
-		},
-	}) {
-		return h('div', { class: [$style.wrap] }, [
-			h('span', {
-				ref: 'contentEl',
-				class: [
-					paused
-						? $style.paused
-						: undefined,
-					$style.content,
-				],
-			}, Array(repeat).fill(
-				h('span', {
-					class: $style.text,
-					style: {
-						animationDirection: reverse
-							? 'reverse'
-							: undefined,
-					},
-				}, $slots.default()),
-			)),
-		]);
-	},
-};
-</script>
-
-<style lang="scss" module>
-.wrap {
-	overflow: clip;
-	animation-play-state: running;
-
-	&:hover {
-		animation-play-state: paused;
-	}
-}
-.content {
-	display: inline-block;
-	white-space: nowrap;
-	animation-play-state: inherit;
-}
-.text {
-	display: inline-block;
-	animation-name: marquee;
-	animation-timing-function: linear;
-	animation-iteration-count: infinite;
-	animation-duration: inherit;
-	animation-play-state: inherit;
-}
-.paused .text {
-	animation-play-state: paused;
-}
-@keyframes marquee {
-	0% { transform:translateX(0); }
-	100% { transform:translateX(-100%); }
-}
-</style>

packages/frontend/src/components/MkMarqueeText.vue

@@ -0,0 +1,89 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.wrap">
+	<span
+		ref="contentEl"
+		:class="[$style.content, {
+			[$style.paused]: paused,
+			[$style.reverse]: reverse,
+		}]"
+	>
+		<span v-for="key in repeat" :key="key" :class="$style.text">
+			<slot></slot>
+		</span>
+	</span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, useTemplateRef, watch } from 'vue';
+
+const props = withDefaults(defineProps<{
+	duration?: number;
+	repeat?: number;
+	paused?: boolean;
+	reverse?: boolean;
+}>(), {
+	duration: 15,
+	repeat: 2,
+	paused: false,
+	reverse: false,
+});
+
+const contentEl = useTemplateRef('contentEl');
+
+function calcDuration() {
+	if (contentEl.value == null) return;
+	const eachLength = contentEl.value.offsetWidth / props.repeat;
+	const factor = 3000;
+	const duration = props.duration / ((1 / eachLength) * factor);
+	contentEl.value.style.animationDuration = `${duration}s`;
+}
+
+watch(() => props.duration, calcDuration);
+
+onMounted(calcDuration);
+</script>
+
+<style lang="scss" module>
+.wrap {
+	overflow: clip;
+	animation-play-state: running;
+
+	&:hover {
+		animation-play-state: paused;
+	}
+}
+
+.content {
+	display: inline-block;
+	white-space: nowrap;
+	animation-play-state: inherit;
+}
+
+.text {
+	display: inline-block;
+	animation-name: marquee;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-duration: inherit;
+	animation-play-state: inherit;
+}
+
+.paused .text {
+	animation-play-state: paused;
+}
+
+.reverse .text {
+	animation-direction: reverse;
+}
+
+@keyframes marquee {
+	0% { transform: translateX(0); }
+	100% { transform: translateX(-100%); }
+}
+</style>

packages/frontend/src/components/MkMediaImage.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			style: 'cursor: zoom-in;'
 		}"
 	>
-		<ImgWithBlurhash
+		<MkImgWithBlurhash
 			:hash="image.blurhash"
 			:src="(prefer.s.dataSaver.media && hide) ? null : url"
 			:forceBlurhash="hide"
@@ -57,7 +57,7 @@ import type { MenuItem } from '@/types/menu.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import bytes from '@/filters/bytes.js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { $i, iAmModerator } from '@/i.js';

packages/frontend/src/components/MkNote.vue

@@ -410,12 +410,15 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 	});
 });
 
+let subscribeManuallyToNoteCapture: () => void = () => { };
+
 if (!props.mock) {
-	useNoteCapture({
+	const { subscribe } = useNoteCapture({
 		note: appearNote,
 		parentNote: note,
 		$note: $appearNote,
 	});
+	subscribeManuallyToNoteCapture = subscribe;
 }
 
 if (!props.mock) {
@@ -472,6 +475,8 @@ function renote(viaKeyboard = false) {
 	os.popupMenu(menu, renoteButton.value, {
 		viaKeyboard,
 	});
+
+	subscribeManuallyToNoteCapture();
 }
 
 function reply(): void {
@@ -567,6 +572,11 @@ function undoReact(): void {
 
 	misskeyApi('notes/reactions/delete', {
 		noteId: appearNote.id,
+	}).then(() => {
+		noteEvents.emit(`unreacted:${appearNote.id}`, {
+			userId: $i!.id,
+			reaction: oldReaction,
+		});
 	});
 }
 

packages/frontend/src/components/MkNoteDetailed.vue

@@ -397,7 +397,7 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
-useNoteCapture({
+const { subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
 	note: appearNote,
 	parentNote: note,
 	$note: $appearNote,
@@ -453,6 +453,9 @@ function renote() {
 
 	const { menu } = getRenoteMenu({ note: note, renoteButton });
 	os.popupMenu(menu, renoteButton.value);
+
+	// リノート後は反応が来る可能性があるので手動で購読する
+	subscribeManuallyToNoteCapture();
 }
 
 function reply(): void {
@@ -527,6 +530,11 @@ function undoReact(targetNote: Misskey.entities.Note): void {
 	if (!oldReaction) return;
 	misskeyApi('notes/reactions/delete', {
 		noteId: targetNote.id,
+	}).then(() => {
+		noteEvents.emit(`unreacted:${appearNote.id}`, {
+			userId: $i!.id,
+			reaction: oldReaction,
+		});
 	});
 }
 

packages/frontend/src/components/MkPostForm.vue

@@ -138,7 +138,7 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { globalEvents } from '@/events.js';
-import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
+import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
 
 const $i = ensureSignin();
 
@@ -702,8 +702,7 @@ async function onPaste(ev: ClipboardEvent) {
 function onDragover(ev) {
 	if (!ev.dataTransfer.items[0]) return;
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
-	if (isFile || isDriveFile) {
+	if (isFile || checkDragDataType(ev, ['driveFiles'])) {
 		ev.preventDefault();
 		draghover.value = true;
 		switch (ev.dataTransfer.effectAllowed) {
@@ -744,11 +743,12 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		files.value.push(file);
-		ev.preventDefault();
+	{
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
+			files.value.push(...droppedData);
+			ev.preventDefault();
+		}
 	}
 	//#endregion
 }

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

@@ -89,8 +89,7 @@ async function toggleReaction() {
 		}).then(() => {
 			noteEvents.emit(`unreacted:${props.noteId}`, {
 				userId: $i!.id,
-				reaction: props.reaction,
-				emoji: emoji.value,
+				reaction: oldReaction,
 			});
 			if (oldReaction !== props.reaction) {
 				misskeyApi('notes/reactions/create', {

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

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
-	<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
+	<MkImgWithBlurhash v-if="prefer.s.enableHighQualityImagePlaceholders" :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
+	<img v-else :class="$style.inner" :src="url" alt="" decoding="async" style="pointer-events: none;"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 	<div v-if="user.isCat" :class="[$style.ears]">
 		<div :class="$style.earLeft">

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

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </svg>
 <svg v-else-if="type === 'success'" :class="[$style.icon, $style.success]" viewBox="0 0 160 160">
 	<path d="M62,80L74,92L98,68" style="--l:50;" :class="[$style.line, $style.animLine]"/>
-	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircleSuccess]"/>
+	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircle]"/>
 </svg>
 <svg v-else-if="type === 'warn'" :class="[$style.icon, $style.warn]" viewBox="0 0 160 160">
 	<path d="M80,64L80,88" style="--l:27;" :class="[$style.line, $style.animLine]"/>
@@ -87,14 +87,6 @@ const props = defineProps<{
 	transform: rotate(-90deg);
 }
 
-.animCircleSuccess {
-	stroke-dasharray: var(--l);
-	stroke-dashoffset: var(--l);
-	animation: circleSuccess var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
-	animation-delay: var(--delay, 0s);
-	transform-origin: center;
-}
-
 .animFade {
 	opacity: 0;
 	animation: fade-in var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
@@ -112,19 +104,6 @@ const props = defineProps<{
 	}
 }
 
-@keyframes circleSuccess {
-	0% {
-		stroke-dashoffset: var(--l);
-		opacity: 0;
-		transform: rotate(-90deg);
-	}
-	100% {
-		stroke-dashoffset: 0;
-		opacity: 1;
-		transform: rotate(90deg);
-	}
-}
-
 @keyframes fade-in {
 	0% {
 		opacity: 0;

packages/frontend/src/composables/use-note-capture.ts

@@ -191,7 +191,9 @@ export function useNoteCapture(props: {
 	note: Pick<Misskey.entities.Note, 'id' | 'createdAt'>;
 	parentNote: Misskey.entities.Note | null;
 	$note: ReactiveNoteData;
-}) {
+}): {
+	subscribe: () => void;
+} {
 	const { note, parentNote, $note } = props;
 
 	noteEvents.on(`reacted:${note.id}`, onReacted);
@@ -254,6 +256,14 @@ export function useNoteCapture(props: {
 		$note.pollChoices = choices;
 	}
 
+	function subscribe() {
+		if ($i && store.s.realtimeMode) {
+			realtimeSubscribe(props);
+		} else {
+			pollingSubscribe(props);
+		}
+	}
+
 	onUnmounted(() => {
 		noteEvents.off(`reacted:${note.id}`, onReacted);
 		noteEvents.off(`unreacted:${note.id}`, onUnreacted);
@@ -265,19 +275,29 @@ export function useNoteCapture(props: {
 	// TODO: デバイスとサーバーの時計がズレていると不具合の元になるため、ズレを検知して警告を表示するなどのケアが必要かもしれない
 	if (parentNote == null) {
 		if ((Date.now() - new Date(note.createdAt).getTime()) > 1000 * 60 * 5) { // 5min
-			// リノートで表示されているノートでもないし、投稿からある程度経過しているので購読しない
-			return;
+			// リノートで表示されているノートでもないし、投稿からある程度経過しているので自動で購読しない
+			return {
+				subscribe: () => {
+					subscribe();
+				},
+			};
 		}
 	} else {
 		if ((Date.now() - new Date(parentNote.createdAt).getTime()) > 1000 * 60 * 5) { // 5min
-			// リノートで表示されているノートだが、リノートされてからある程度経過しているので購読しない
-			return;
+			// リノートで表示されているノートだが、リノートされてからある程度経過しているので自動で購読しない
+			return {
+				subscribe: () => {
+					subscribe();
+				},
+			};
 		}
 	}
 
-	if ($i && store.s.realtimeMode) {
-		realtimeSubscribe(props);
-	} else {
-		pollingSubscribe(props);
-	}
+	subscribe();
+
+	return {
+		subscribe: () => {
+			// すでに購読しているので何もしない
+		},
+	};
 }

packages/frontend/src/consts.ts

@@ -1,10 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export const DATA_TRANSFER_DRIVE_FILE = 'misskey-drive-file';
-export const DATA_TRANSFER_DRIVE_FILES = 'misskey-drive-files';
-export const DATA_TRANSFER_DRIVE_FOLDER = 'misskey-drive-folder';
-export const DATA_TRANSFER_DRIVE_FOLDERS = 'misskey-drive-folders';
-export const DATA_TRANSFER_DECK_COLUMN = 'misskey-deck-column';

packages/frontend/src/drag-and-drop.ts

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as Misskey from 'misskey-js';
+
+type DragDataMap = {
+	driveFiles: Misskey.entities.DriveFile[];
+	driveFolders: Misskey.entities.DriveFolder[];
+	deckColumn: string;
+};
+
+export function setDragData<T extends keyof DragDataMap>(
+	event: DragEvent,
+	type: T,
+	data: DragDataMap[T],
+) {
+	if (event.dataTransfer == null) return;
+
+	event.dataTransfer.setData(`misskey/${type}`, JSON.stringify(data));
+}
+
+export function getDragData<T extends keyof DragDataMap>(
+	event: DragEvent,
+	type: T,
+): DragDataMap[T] | null {
+	if (event.dataTransfer == null) return null;
+
+	const data = event.dataTransfer.getData(`misskey/${type}`);
+	if (data == null || data === '') return null;
+
+	return JSON.parse(data);
+}
+
+export function checkDragDataType(
+	event: DragEvent,
+	types: (keyof DragDataMap)[],
+): boolean {
+	if (event.dataTransfer == null) return false;
+
+	const dataType = event.dataTransfer.types[0];
+	if (dataType == null || dataType === '') return false;
+
+	return types.some((type) => dataType === `misskey/${type}`);
+}

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

@@ -390,6 +390,7 @@ const patrons = [
 	'まゆつな空高',
 	'asata',
 	'ruru',
+	'みりめい',
 ];
 
 const thereIsTreasure = ref($i && !claimedAchievements.includes('foundTreasure'));

packages/frontend/src/pages/chat/room.form.vue

@@ -47,7 +47,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { prefer } from '@/preferences.js';
 import { Autocomplete } from '@/utility/autocomplete.js';
 import { emojiPicker } from '@/utility/emoji-picker.js';
-import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
+import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -102,8 +102,7 @@ function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
-	if (isFile || isDriveFile) {
+	if (isFile || checkDragDataType(ev, ['driveFiles'])) {
 		ev.preventDefault();
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
@@ -142,10 +141,12 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-	if (driveFile != null && driveFile !== '') {
-		file.value = JSON.parse(driveFile);
-		ev.preventDefault();
+	{
+		const droppedData = getDragData(ev, 'driveFiles');
+		if (droppedData != null) {
+			file.value = droppedData[0];
+			ev.preventDefault();
+		}
 	}
 	//#endregion
 }

packages/frontend/src/pages/settings/preferences.vue

@@ -557,6 +557,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #icon><SearchIcon><i class="ti ti-battery-vertical-eco"></i></SearchIcon></template>
 
 					<div class="_gaps_s">
+						<SearchMarker :keywords="['animation', 'motion', 'reduce']">
+							<MkPreferenceContainer k="animation">
+								<MkSwitch :modelValue="!reduceAnimation" @update:modelValue="v => reduceAnimation = !v">
+									<template #label><SearchLabel>{{ i18n.ts._settings.uiAnimations }}</SearchLabel></template>
+									<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
+								</MkSwitch>
+							</MkPreferenceContainer>
+						</SearchMarker>
+
 						<SearchMarker :keywords="['blur']">
 							<MkPreferenceContainer k="useBlurEffect">
 								<MkSwitch v-model="useBlurEffect">
@@ -575,6 +584,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkPreferenceContainer>
 						</SearchMarker>
 
+						<SearchMarker :keywords="['blurhash', 'image', 'photo', 'picture', 'thumbnail', 'placeholder']">
+							<MkPreferenceContainer k="enableHighQualityImagePlaceholders">
+								<MkSwitch v-model="enableHighQualityImagePlaceholders">
+									<template #label><SearchLabel>{{ i18n.ts._settings.enableHighQualityImagePlaceholders }}</SearchLabel></template>
+									<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
+								</MkSwitch>
+							</MkPreferenceContainer>
+						</SearchMarker>
+
 						<SearchMarker :keywords="['sticky']">
 							<MkPreferenceContainer k="useStickyIcons">
 								<MkSwitch v-model="useStickyIcons">
@@ -808,6 +826,7 @@ const defaultFollowWithReplies = prefer.model('defaultFollowWithReplies');
 const chatShowSenderName = prefer.model('chat.showSenderName');
 const chatSendOnEnter = prefer.model('chat.sendOnEnter');
 const useStickyIcons = prefer.model('useStickyIcons');
+const enableHighQualityImagePlaceholders = prefer.model('enableHighQualityImagePlaceholders');
 const reduceAnimation = prefer.model('animation', v => !v, v => !v);
 const animatedMfm = prefer.model('animatedMfm');
 const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages');
@@ -866,6 +885,7 @@ watch([
 	enableSeasonalScreenEffect,
 	chatShowSenderName,
 	useStickyIcons,
+	enableHighQualityImagePlaceholders,
 	keepScreenOn,
 	contextMenu,
 	fontSize,
@@ -873,6 +893,7 @@ watch([
 	makeEveryTextElementsSelectable,
 	enableHorizontalSwipe,
 	enablePullToRefresh,
+	reduceAnimation,
 ], async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });

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

@@ -17,13 +17,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkVisitorDashboard/>
 	</div>
 	<div v-if="instances && instances.length > 0" :class="$style.federation">
-		<MarqueeText :duration="40">
+		<MkMarqueeText :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="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="_monospace">{{ instance.host }}</span>
 			</MkA>
-		</MarqueeText>
+		</MkMarqueeText>
 	</div>
 </div>
 </template>
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/MkMarquee.vue';
+import MkMarqueeText from '@/components/MkMarqueeText.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/misskey.svg';
 import { misskeyApiGet } from '@/utility/misskey-api.js';

packages/frontend/src/preferences/def.ts

@@ -202,6 +202,9 @@ export const PREF_DEF = {
 	useStickyIcons: {
 		default: true,
 	},
+	enableHighQualityImagePlaceholders: {
+		default: true,
+	},
 	showFixedPostForm: {
 		default: false,
 	},

packages/frontend/src/ui/_common_/statusbar-federation.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:leaveToClass="$style.transition_change_leaveTo"
 			mode="default"
 		>
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+			<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
 				<span v-for="instance in instances" :key="instance.id" :class="[$style.item, { [$style.colored]: colored }]" :style="{ background: colored ? instance.themeColor : null }">
 					<img :class="$style.icon" :src="getInstanceIcon(instance)" alt=""/>
 					<MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkA>
 					<span></span>
 				</span>
-			</MarqueeText>
+			</MkMarqueeText>
 		</Transition>
 	</template>
 	<template v-else-if="display === 'oneByOne'">
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
+import MkMarqueeText from '@/components/MkMarqueeText.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useInterval } from '@@/js/use-interval.js';
 import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';

packages/frontend/src/ui/_common_/statusbar-rss.vue

@@ -13,11 +13,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:leaveToClass="$style.transition_change_leaveTo"
 			mode="default"
 		>
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+			<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
 				<span v-for="item in items" :class="$style.item">
 					<a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
 				</span>
-			</MarqueeText>
+			</MkMarqueeText>
 		</Transition>
 	</template>
 	<template v-else-if="display === 'oneByOne'">
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
+import MkMarqueeText from '@/components/MkMarqueeText.vue';
 import { useInterval } from '@@/js/use-interval.js';
 import { shuffle } from '@/utility/shuffle.js';
 

packages/frontend/src/ui/_common_/statusbar-user-list.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:leaveToClass="$style.transition_change_leaveTo"
 			mode="default"
 		>
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+			<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
 				<span v-for="note in notes" :key="note.id" :class="$style.item">
 					<img :class="$style.avatar" :src="note.user.avatarUrl" decoding="async"/>
 					<MkA :class="$style.text" :to="notePage(note)">
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkA>
 					<span :class="$style.divider"></span>
 				</span>
-			</MarqueeText>
+			</MkMarqueeText>
 		</Transition>
 	</template>
 	<template v-else-if="display === 'oneByOne'">
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
+import MkMarqueeText from '@/components/MkMarqueeText.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useInterval } from '@@/js/use-interval.js';
 import { getNoteSummary } from '@/utility/get-note-summary.js';

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

@@ -51,7 +51,7 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
-import { DATA_TRANSFER_DECK_COLUMN } from '@/consts.js';
+import { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
@@ -263,7 +263,7 @@ function goTop() {
 
 function onDragstart(ev) {
 	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(DATA_TRANSFER_DECK_COLUMN, props.column.id);
+	setDragData(ev, 'deckColumn', props.column.id);
 
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
 	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
@@ -282,7 +282,7 @@ function onDragover(ev) {
 		// 自分自身にはドロップさせない
 		ev.dataTransfer.dropEffect = 'none';
 	} else {
-		const isDeckColumn = ev.dataTransfer.types[0] === DATA_TRANSFER_DECK_COLUMN;
+		const isDeckColumn = checkDragDataType(ev, ['deckColumn']);
 
 		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -298,8 +298,8 @@ function onDrop(ev) {
 	draghover.value = false;
 	os.deckGlobalEvents.emit('column.dragEnd');
 
-	const id = ev.dataTransfer.getData(DATA_TRANSFER_DECK_COLUMN);
-	if (id != null && id !== '') {
+	const id = getDragData(ev, 'deckColumn');
+	if (id != null) {
 		swapColumn(props.column.id, id);
 	}
 }

packages/frontend/src/widgets/WidgetRssTicker.vue

@@ -15,11 +15,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else>
 			<Transition :name="$style.change" mode="default" appear>
-				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
+				<MkMarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
 					<span v-for="item in items" :key="item.link" :class="$style.item">
 						<a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
 					</span>
-				</MarqueeText>
+				</MkMarqueeText>
 			</Transition>
 		</div>
 	</div>
@@ -31,7 +31,7 @@ import { ref, watch, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager } from './widget.js';
 import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
-import MarqueeText from '@/components/MkMarquee.vue';
+import MarqueeText from '@/components/MkMarqueeText.vue';
 import type { GetFormResultType } from '@/utility/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { shuffle } from '@/utility/shuffle.js';