CHANGELOG.md

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

locales/index.d.ts

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

locales/ja-JP.yml

@@ -1428,8 +1428,6 @@ _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 = 50;
+const MAX_ROOM_MEMBERS = 30;
 const MAX_REACTIONS_PER_MESSAGE = 100;
 const isCustomEmojiRegexp = /^:([\w+-]+)(?:@\.)?:$/;
 

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

@@ -326,15 +326,19 @@ export class ApiCallService implements OnApplicationShutdown {
 
 			if (factor > 0) {
 				// Rate limit
-				const rateLimit = await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor, factor);
+				await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor, factor).catch(err => {
-				if (rateLimit != null) {
+					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,
-					}, rateLimit.info);
+						}, err.info);
+					} else {
+						throw new TypeError('information must be a rate-limiter information.');
 					}
+				});
 			}
 		}
 

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

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

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

@@ -89,9 +89,10 @@ export class SigninApiService {
 			return { error };
 		}
 
+		try {
 		// not more than 1 attempt per second and not more than 10 attempts per hour
-		const rateLimit = await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(request.ip));
+			await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(request.ip));
-		if (rateLimit != null) {
+		} catch (err) {
 			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"
 	>
-		<EmImgWithBlurhash
+		<ImgWithBlurhash
 			: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 EmImgWithBlurhash from '@/components/EmImgWithBlurhash.vue';
+import ImgWithBlurhash 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 { setDragData } from '@/drag-and-drop.js';
+import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
 
 const router = useRouter();
 
@@ -91,7 +91,7 @@ function onContextmenu(ev: MouseEvent) {
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
 		ev.dataTransfer.effectAllowed = 'move';
-		setDragData(ev, 'driveFiles', [props.file]);
+		ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILE, JSON.stringify(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,7 +95,12 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
+	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) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -140,13 +145,27 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const droppedData = getDragData(ev, 'driveFiles');
+		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (droppedData != null) {
+		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);
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: droppedData.map(f => f.id),
+				fileIds: files.map(f => f.id),
 				folderId: props.folder.id,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', droppedData, props.folder);
+				globalEvents.emit('driveFilesMoved', files, props.folder);
 			});
 		}
 	}
@@ -154,15 +173,15 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	{
-		const droppedData = getDragData(ev, 'driveFolders');
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (droppedData != null) {
+		if (driveFolder != null && driveFolder !== '') {
-			const droppedFolder = droppedData[0];
+			const folder = JSON.parse(driveFolder);
 
 			// 移動先が自分自身ならreject
-			if (droppedFolder.id === props.folder.id) return;
+			if (folder.id === props.folder.id) return;
 
 			misskeyApi('drive/folders/update', {
-				folderId: droppedFolder.id,
+				folderId: folder.id,
 				parentId: props.folder.id,
 			}).then(() => {
 			// noop
@@ -192,7 +211,7 @@ function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	ev.dataTransfer.effectAllowed = 'move';
-	setDragData(ev, 'driveFolders', [props.folder]);
+	ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FOLDER, JSON.stringify(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,7 +44,12 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
+	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) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -91,13 +96,27 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const droppedData = getDragData(ev, 'driveFiles');
+		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (droppedData != null) {
+		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);
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: droppedData.map(f => f.id),
+				fileIds: files.map(f => f.id),
 				folderId: props.folder ? props.folder.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', droppedData, props.folder ?? null);
+				globalEvents.emit('driveFilesMoved', files, props.folder ?? null);
 			});
 		}
 	}
@@ -105,13 +124,13 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	{
-		const droppedData = getDragData(ev, 'driveFolders');
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (droppedData != null) {
+		if (driveFolder != null && driveFolder !== '') {
-			const droppedFolder = droppedData[0];
+			const folder = JSON.parse(driveFolder);
 			// 移動先が自分自身ならreject
-			if (props.folder && droppedFolder.id === props.folder.id) return;
+			if (props.folder && folder.id === props.folder.id) return;
 			misskeyApi('drive/folders/update', {
-				folderId: droppedFolder.id,
+				folderId: folder.id,
 				parentId: props.folder ? props.folder.id : null,
 			});
 		}

packages/frontend/src/components/MkDrive.vue

@@ -83,22 +83,14 @@ 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.getFullYear()}/${item.date.getMonth() + 1}`">
+				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
 					<template #header>
 						<div :class="$style.date">
 							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
 						</div>
 					</template>
 
-					<TransitionGroup
+					<div :class="$style.files">
-						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"
@@ -110,7 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							@dragstart="onFileDragstart(file, $event)"
 							@dragend="isDragSource = false"
 						/>
-					</TransitionGroup>
+					</div>
 				</MkStickyContainer>
 				<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 			</div>
@@ -134,7 +126,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed, TransitionGroup } from 'vue';
+import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
@@ -154,7 +146,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 { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
+import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER } from '@/consts.js';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@@ -261,7 +253,7 @@ function onFileDragstart(file: Misskey.entities.DriveFile, ev: DragEvent) {
 
 		if (ev.dataTransfer) {
 			ev.dataTransfer.effectAllowed = 'move';
-			setDragData(ev, 'driveFiles', selectedFiles.value);
+			ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify(selectedFiles.value));
 		}
 	}
 
@@ -279,7 +271,9 @@ function onDragover(ev: DragEvent) {
 	}
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	if (isFile || checkDragDataType(ev, ['driveFiles', 'driveFolders'])) {
+	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
+	if (isFile || isDriveFile || isDriveFolder) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
@@ -326,13 +320,28 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのファイル
 	{
-		const droppedData = getDragData(ev, 'driveFiles');
+		const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		if (droppedData != null) {
+		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);
 			misskeyApi('drive/files/move-bulk', {
-				fileIds: droppedData.map(f => f.id),
+				fileIds: files.map(f => f.id),
 				folderId: folder.value ? folder.value.id : null,
 			}).then(() => {
-				globalEvents.emit('driveFilesMoved', droppedData, folder.value);
+				globalEvents.emit('driveFilesMoved', files, folder.value);
 			});
 		}
 	}
@@ -340,9 +349,10 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	{
-		const droppedData = getDragData(ev, 'driveFolders');
+		const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
-		if (droppedData != null) {
+		if (driveFolder != null && driveFolder !== '') {
-			const droppedFolder = droppedData[0];
+			const droppedFolder = JSON.parse(driveFolder);
+
 			// 移動先が自分自身ならreject
 			if (folder.value && droppedFolder.id === folder.value.id) return false;
 			if (foldersPaginator.items.value.some(f => f.id === droppedFolder.id)) return false;
@@ -692,19 +702,6 @@ 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" @changeSelectedFiles="onChangeSelection"/>
+	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelection="onChangeSelection"/>
 </MkModalWindow>
 </template>
 

packages/frontend/src/components/MkDriveFileThumbnail.vue

@@ -11,24 +11,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.large]: large,
 	}]"
 >
-	<MkImgWithBlurhash
+	<ImgWithBlurhash
-		v-if="isThumbnailAvailable && prefer.s.enableHighQualityImagePlaceholders"
+		v-if="isThumbnailAvailable"
 		: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>
@@ -45,8 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -125,8 +115,4 @@ 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" @changeSelectedFolders="onChangeSelection"/>
+	<MkDrive :multiple="multiple" select="folder" :initialFolder="initialFolder" @changeSelection="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>
-			<MkImgWithBlurhash
+			<ImgWithBlurhash
 				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 MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { prefer } from '@/preferences.js';
 
 const props = defineProps<{

packages/frontend/src/components/MkMarquee.vue

@@ -0,0 +1,112 @@
+<!--
+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

@@ -1,89 +0,0 @@
-<!--
-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;'
 		}"
 	>
-		<MkImgWithBlurhash
+		<ImgWithBlurhash
 			: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 MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import ImgWithBlurhash 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,15 +410,12 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 	});
 });
 
-let subscribeManuallyToNoteCapture: () => void = () => { };
-
 if (!props.mock) {
-	const { subscribe } = useNoteCapture({
+	useNoteCapture({
 		note: appearNote,
 		parentNote: note,
 		$note: $appearNote,
 	});
-	subscribeManuallyToNoteCapture = subscribe;
 }
 
 if (!props.mock) {
@@ -475,8 +472,6 @@ function renote(viaKeyboard = false) {
 	os.popupMenu(menu, renoteButton.value, {
 		viaKeyboard,
 	});
-
-	subscribeManuallyToNoteCapture();
 }
 
 function reply(): void {
@@ -572,11 +567,6 @@ 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(() => ({
 	},
 }));
 
-const { subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
+useNoteCapture({
 	note: appearNote,
 	parentNote: note,
 	$note: $appearNote,
@@ -453,9 +453,6 @@ function renote() {
 
 	const { menu } = getRenoteMenu({ note: note, renoteButton });
 	os.popupMenu(menu, renoteButton.value);
-
-	// リノート後は反応が来る可能性があるので手動で購読する
-	subscribeManuallyToNoteCapture();
 }
 
 function reply(): void {
@@ -530,11 +527,6 @@ 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 { checkDragDataType, getDragData } from '@/drag-and-drop.js';
+import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
 
 const $i = ensureSignin();
 
@@ -702,7 +702,8 @@ async function onPaste(ev: ClipboardEvent) {
 function onDragover(ev) {
 	if (!ev.dataTransfer.items[0]) return;
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	if (isFile || checkDragDataType(ev, ['driveFiles'])) {
+	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	if (isFile || isDriveFile) {
 		ev.preventDefault();
 		draghover.value = true;
 		switch (ev.dataTransfer.effectAllowed) {
@@ -743,13 +744,12 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	{
+	const driveFile = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILE);
-		const droppedData = getDragData(ev, 'driveFiles');
+	if (driveFile != null && driveFile !== '') {
-		if (droppedData != null) {
+		const file = JSON.parse(driveFile);
-			files.value.push(...droppedData);
+		files.value.push(file);
 		ev.preventDefault();
 	}
-	}
 	//#endregion
 }
 

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

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

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

@@ -5,8 +5,7 @@ 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 v-if="prefer.s.enableHighQualityImagePlaceholders" :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/>
+	<MkImgWithBlurhash :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.animCircle]"/>
+	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircleSuccess]"/>
 </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,6 +87,14 @@ 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;
@@ -104,6 +112,19 @@ 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,9 +191,7 @@ 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);
@@ -256,14 +254,6 @@ 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);
@@ -275,29 +265,19 @@ 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();
-				},
-			};
 		}
 	}
 
-	subscribe();
+	if ($i && store.s.realtimeMode) {
-
+		realtimeSubscribe(props);
-	return {
+	} else {
-		subscribe: () => {
+		pollingSubscribe(props);
-			// すでに購読しているので何もしない
+	}
-		},
-	};
 }

packages/frontend/src/consts.ts

@@ -0,0 +1,10 @@
+/*
+ * 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

@@ -1,46 +0,0 @@
-/*
- * 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,7 +390,6 @@ 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 { checkDragDataType, getDragData } from '@/drag-and-drop.js';
+import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js';
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -102,7 +102,8 @@ function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
 	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	if (isFile || checkDragDataType(ev, ['driveFiles'])) {
+	const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
+	if (isFile || isDriveFile) {
 		ev.preventDefault();
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
@@ -141,13 +142,11 @@ function onDrop(ev: DragEvent): void {
 	}
 
 	//#region ドライブのファイル
-	{
+	const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
-		const droppedData = getDragData(ev, 'driveFiles');
+	if (driveFile != null && driveFile !== '') {
-		if (droppedData != null) {
+		file.value = JSON.parse(driveFile);
-			file.value = droppedData[0];
 		ev.preventDefault();
 	}
-	}
 	//#endregion
 }
 

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

@@ -557,15 +557,6 @@ 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">
@@ -584,15 +575,6 @@ 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">
@@ -826,7 +808,6 @@ 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');
@@ -885,7 +866,6 @@ watch([
 	enableSeasonalScreenEffect,
 	chatShowSenderName,
 	useStickyIcons,
-	enableHighQualityImagePlaceholders,
 	keepScreenOn,
 	contextMenu,
 	fontSize,
@@ -893,7 +873,6 @@ 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">
-		<MkMarqueeText :duration="40">
+		<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="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
 				<span class="_monospace">{{ instance.host }}</span>
 			</MkA>
-		</MkMarqueeText>
+		</MarqueeText>
 	</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 MkMarqueeText from '@/components/MkMarqueeText.vue';
+import MarqueeText from '@/components/MkMarquee.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,9 +202,6 @@ 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"
 		>
-			<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+			<MarqueeText :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>
-			</MkMarqueeText>
+			</MarqueeText>
 		</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 MkMarqueeText from '@/components/MkMarqueeText.vue';
+import MarqueeText from '@/components/MkMarquee.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"
 		>
-			<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+			<MarqueeText :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>
-			</MkMarqueeText>
+			</MarqueeText>
 		</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 MkMarqueeText from '@/components/MkMarqueeText.vue';
+import MarqueeText from '@/components/MkMarquee.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"
 		>
-			<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+			<MarqueeText :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>
-			</MkMarqueeText>
+			</MarqueeText>
 		</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 MkMarqueeText from '@/components/MkMarqueeText.vue';
+import MarqueeText from '@/components/MkMarquee.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 { checkDragDataType, getDragData, setDragData } from '@/drag-and-drop.js';
+import { DATA_TRANSFER_DECK_COLUMN } from '@/consts.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
@@ -263,7 +263,7 @@ function goTop() {
 
 function onDragstart(ev) {
 	ev.dataTransfer.effectAllowed = 'move';
-	setDragData(ev, 'deckColumn', props.column.id);
+	ev.dataTransfer.setData(DATA_TRANSFER_DECK_COLUMN, 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 = checkDragDataType(ev, ['deckColumn']);
+		const isDeckColumn = ev.dataTransfer.types[0] === DATA_TRANSFER_DECK_COLUMN;
 
 		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -298,8 +298,8 @@ function onDrop(ev) {
 	draghover.value = false;
 	os.deckGlobalEvents.emit('column.dragEnd');
 
-	const id = getDragData(ev, 'deckColumn');
+	const id = ev.dataTransfer.getData(DATA_TRANSFER_DECK_COLUMN);
-	if (id != null) {
+	if (id != null && id !== '') {
 		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>
-				<MkMarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
+				<MarqueeText :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>
-				</MkMarqueeText>
+				</MarqueeText>
 			</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/MkMarqueeText.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
 import type { GetFormResultType } from '@/utility/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { shuffle } from '@/utility/shuffle.js';