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) {
-					throw new ApiError({
+						// errはLimiter.LimiterInfoであることが期待される
-						message: 'Rate limit exceeded. Please try again later.',
+						throw new ApiError({
-						code: 'RATE_LIMIT_EXCEEDED',
+							message: 'Rate limit exceeded. Please try again later.',
-						id: 'd5826d14-3982-4d2e-8011-b9e9f02499ef',
+							code: 'RATE_LIMIT_EXCEEDED',
-						httpStatusCode: 429,
+							id: 'd5826d14-3982-4d2e-8011-b9e9f02499ef',
-					}, rateLimit.info);
+							httpStatusCode: 429,
-				}
+						}, 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,55 +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 (this.disabled) {
-				if (err) {
+				return Promise.resolve();
-					return reject(err);
+			}
-				}
-				resolve(info);
-			});
-		});
-	}
 
-	@bindThis
+			// Short-term limit
-	public async limit(limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string, factor = 1): Promise<RateLimitInfo | null> {
+			const min = new Promise<void>((ok, reject) => {
-		if (this.disabled) {
+				const minIntervalLimiter = new Limiter({
-			return null;
+					id: `${actor}:${limitation.key}:min`,
-		}
+					duration: limitation.minInterval! * factor,
+					max: 1,
+					db: this.redisClient,
+				});
 
-		// Short-term limit
+				minIntervalLimiter.get((err, info) => {
-		if (limitation.minInterval != null) {
+					if (err) {
-			const info = await this.checkLimiter({
+						return reject({ code: 'ERR', info });
-				id: `${actor}:${limitation.key}:min`,
+					}
-				duration: limitation.minInterval * factor,
+
-				max: 1,
+					this.logger.debug(`${actor} ${limitation.key} min remaining: ${info.remaining}`);
-				db: this.redisClient,
+
+					if (info.remaining === 0) {
+						return reject({ code: 'BRIEF_REQUEST_INTERVAL', info });
+					} else {
+						if (hasLongTermLimit) {
+							return max.then(ok, reject);
+						} else {
+							return ok();
+						}
+					}
+				});
 			});
 
-			this.logger.debug(`${actor} ${limitation.key} min remaining: ${info.remaining}`);
+			// 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,
+				});
 
-			if (info.remaining === 0) {
+				limiter.get((err, info) => {
-				return { code: 'BRIEF_REQUEST_INTERVAL', 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();
 			}
 		}
-
-		// 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) {
-				return { code: 'RATE_LIMIT_EXCEEDED', info };
-			}
-		}
-
-		return null;
 	}
 }

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/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/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,8 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			style: 'cursor: zoom-in;'
 		}"
 	>
-		<MkImgWithBlurhash
+		<ImgWithBlurhash
-			v-if="prefer.s.enableHighQualityImagePlaceholders"
 			:hash="image.blurhash"
 			:src="(prefer.s.dataSaver.media && hide) ? null : url"
 			:forceBlurhash="hide"
@@ -28,20 +27,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:width="image.properties.width"
 			:height="image.properties.height"
 			:style="hide ? 'filter: brightness(0.7);' : null"
-			:class="$style.image"
-		/>
-		<div
-			v-else-if="prefer.s.dataSaver.media || hide"
-			:title="image.comment || image.name"
-			:style="hide ? 'background: #888;' : null"
-			:class="$style.image"
-		></div>
-		<img
-			v-else
-			:src="url"
-			:alt="image.comment || image.name"
-			:title="image.comment || image.name"
-			:class="$style.image"
 		/>
 	</component>
 	<template v-if="hide">
@@ -72,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';
@@ -315,12 +300,4 @@ html[data-color-scheme=light] .visible {
 	font-size: 0.8em;
 	padding: 2px 5px;
 }
-
-.image {
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
-	object-position: center;
-}
 </style>

packages/frontend/src/components/MkNote.vue

@@ -83,7 +83,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</div>
 						</div>
 					</div>
-					<div v-if="appearNote.files && appearNote.files.length > 0" style="margin-top: 8px;">
+					<div v-if="appearNote.files && appearNote.files.length > 0">
 						<MkMediaList ref="galleryEl" :mediaList="appearNote.files"/>
 					</div>
 					<MkPoll
@@ -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/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/pages/about-misskey.vue

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

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/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';