Merge branch 'develop' into fetch

CHANGELOG.md

@@ -20,6 +20,9 @@ You should also include the user name that made the change.
 	- You may have to `yarn run clean-all`, `sudo corepack enable` and `yarn set version berry` before running `yarn install` if you're still on yarn classic
 - 新たに動的なPagesを作ることはできなくなりました
 	- 代わりに今後AiScriptを用いてより柔軟に動的なコンテンツを作成できるMisskey Play機能の実装を予定しています。
+- AiScriptが0.12.0にアップデートされました
+	- 0.12.0の変更点についてはこちら https://github.com/syuilo/aiscript/blob/master/CHANGELOG.md#0120
+	- 0.12.0未満のプラグインは読み込むことはできません
 - iOS15以下のデバイスはサポートされなくなりました
 - API: カスタム絵文字エンティティに`url`プロパティが含まれなくなりました
 	- 絵文字画像を表示するには、`<instance host>/emoji/<emoji name>.webp`にリクエストすると画像が返ります。
@@ -27,6 +30,7 @@ You should also include the user name that made the change.
 	- remote: `https://p1.a9z.dev/emoji/syuilo_birth_present@mk.f72u.net.webp`
 - API: `user`および`note`エンティティに`emojis`プロパティが含まれなくなりました
 - API: `user`エンティティに`avatarColor`および`bannerColor`プロパティが含まれなくなりました
+- API: `instance`エンティティに`latestStatus`、`lastCommunicatedAt`、`latestRequestSentAt`プロパティが含まれなくなりました
 
 ### Improvements
 - Push notification of Antenna note @tamaina
@@ -41,6 +45,7 @@ You should also include the user name that made the change.
 - Server: delete outdated notifications regularly to improve db performance @syuilo
 - Server: delete outdated hard-mutes regularly to improve db performance @syuilo
 - Server: delete outdated notes of antenna regularly to improve db performance @syuilo
+- Server: improve activitypub deliver performance @syuilo
 - Client: use tabler-icons instead of fontawesome to better design @syuilo
 - Client: Add new gabber kick sounds (thanks for noizenecio)
 - Client: Add link to user RSS feed in profile menu @ssmucny

locales/ja-JP.yml

@@ -167,7 +167,6 @@ annotation: "注釈"
 federation: "連合"
 instances: "インスタンス"
 registeredAt: "初観測"
-latestRequestSentAt: "直近のリクエスト送信"
 latestRequestReceivedAt: "直近のリクエスト受信"
 latestStatus: "直近のステータス"
 storageUsage: "ストレージ使用量"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.0.0-beta.17",
+	"version": "13.0.0-beta.20",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

packages/backend/migration/1672703171386-remove-latestRequestSentAt.js

@@ -0,0 +1,11 @@
+export class removeLatestRequestSentAt1672703171386 {
+    name = 'removeLatestRequestSentAt1672703171386'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "instance" DROP COLUMN "latestRequestSentAt"`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "instance" ADD "latestRequestSentAt" TIMESTAMP WITH TIME ZONE`);
+    }
+}

packages/backend/migration/1672704017999-remove-lastCommunicatedAt.js

@@ -0,0 +1,11 @@
+export class removeLastCommunicatedAt1672704017999 {
+    name = 'removeLastCommunicatedAt1672704017999'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "instance" DROP COLUMN "lastCommunicatedAt"`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "instance" ADD "lastCommunicatedAt" TIMESTAMP WITH TIME ZONE NOT NULL`);
+    }
+}

packages/backend/migration/1672704136584-remove-latestStatus.js

@@ -0,0 +1,11 @@
+export class removeLatestStatus1672704136584 {
+    name = 'removeLatestStatus1672704136584'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "instance" DROP COLUMN "latestStatus"`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "instance" ADD "latestStatus" integer`);
+    }
+}

packages/backend/package.json

@@ -37,7 +37,6 @@
 		"@nestjs/testing": "9.2.1",
 		"@peertube/http-signature": "1.7.0",
 		"@sinonjs/fake-timers": "10.0.2",
-		"@syuilo/aiscript": "0.11.1",
 		"accepts": "^1.3.8",
 		"ajv": "8.11.2",
 		"archiver": "5.3.1",

packages/backend/src/core/FederatedInstanceService.ts

@@ -22,7 +22,7 @@ export class FederatedInstanceService {
 	}
 
 	@bindThis
-	public async registerOrFetchInstanceDoc(host: string): Promise<Instance> {
+	public async fetch(host: string): Promise<Instance> {
 		host = this.utilityService.toPuny(host);
 	
 		const cached = this.cache.get(host);
@@ -35,7 +35,6 @@ export class FederatedInstanceService {
 				id: this.idService.genId(),
 				host,
 				caughtAt: new Date(),
-				lastCommunicatedAt: new Date(),
 			}).then(x => this.instancesRepository.findOneByOrFail(x.identifiers[0]));
 	
 			this.cache.set(host, i);
@@ -45,4 +44,17 @@ export class FederatedInstanceService {
 			return index;
 		}
 	}
+
+	@bindThis
+	public async updateCachePartial(host: string, data: Partial<Instance>): Promise<void> {
+		host = this.utilityService.toPuny(host);
+	
+		const cached = this.cache.get(host);
+		if (cached == null) return;
+	
+		this.cache.set(host, {
+			...cached,
+			...data,
+		});
+	}
 }

packages/backend/src/core/NoteCreateService.ts

@@ -428,7 +428,7 @@ export class NoteCreateService {
 
 		// Register host
 		if (this.userEntityService.isRemoteUser(user)) {
-			this.federatedInstanceService.registerOrFetchInstanceDoc(user.host).then(i => {
+			this.federatedInstanceService.fetch(user.host).then(i => {
 				this.instancesRepository.increment({ id: i.id }, 'notesCount', 1);
 				this.instanceChart.updateNote(i.host, note, true);
 			});

packages/backend/src/core/NoteDeleteService.ts

@@ -100,7 +100,7 @@ export class NoteDeleteService {
 			this.perUserNotesChart.update(user, note, false);
 
 			if (this.userEntityService.isRemoteUser(user)) {
-				this.federatedInstanceService.registerOrFetchInstanceDoc(user.host).then(i => {
+				this.federatedInstanceService.fetch(user.host).then(i => {
 					this.instancesRepository.decrement({ id: i.id }, 'notesCount', 1);
 					this.instanceChart.updateNote(i.host, note, false);
 				});

packages/backend/src/core/UserFollowingService.ts

@@ -205,12 +205,12 @@ export class UserFollowingService {
 	
 		//#region Update instance stats
 		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
-			this.federatedInstanceService.registerOrFetchInstanceDoc(follower.host).then(i => {
+			this.federatedInstanceService.fetch(follower.host).then(i => {
 				this.instancesRepository.increment({ id: i.id }, 'followingCount', 1);
 				this.instanceChart.updateFollowing(i.host, true);
 			});
 		} else if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
-			this.federatedInstanceService.registerOrFetchInstanceDoc(followee.host).then(i => {
+			this.federatedInstanceService.fetch(followee.host).then(i => {
 				this.instancesRepository.increment({ id: i.id }, 'followersCount', 1);
 				this.instanceChart.updateFollowers(i.host, true);
 			});
@@ -323,12 +323,12 @@ export class UserFollowingService {
 	
 		//#region Update instance stats
 		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
-			this.federatedInstanceService.registerOrFetchInstanceDoc(follower.host).then(i => {
+			this.federatedInstanceService.fetch(follower.host).then(i => {
 				this.instancesRepository.decrement({ id: i.id }, 'followingCount', 1);
 				this.instanceChart.updateFollowing(i.host, false);
 			});
 		} else if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
-			this.federatedInstanceService.registerOrFetchInstanceDoc(followee.host).then(i => {
+			this.federatedInstanceService.fetch(followee.host).then(i => {
 				this.instancesRepository.decrement({ id: i.id }, 'followersCount', 1);
 				this.instanceChart.updateFollowers(i.host, false);
 			});

packages/backend/src/core/activitypub/models/ApPersonService.ts

@@ -348,7 +348,7 @@ export class ApPersonService implements OnModuleInit {
 		}
 
 		// Register host
-		this.federatedInstanceService.registerOrFetchInstanceDoc(host).then(i => {
+		this.federatedInstanceService.fetch(host).then(i => {
 			this.instancesRepository.increment({ id: i.id }, 'usersCount', 1);
 			this.instanceChart.newUser(i.host);
 			this.fetchInstanceMetadataService.fetchInstanceMetadata(i);

packages/backend/src/core/chart/charts/federation.ts

@@ -86,7 +86,7 @@ export default class FederationChart extends Chart<typeof schema> {
 				.where(`instance.host IN (${ subInstancesQuery.getQuery() })`)
 				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT IN (:...blocked)', { blocked: meta.blockedHosts })
 				.andWhere('instance.isSuspended = false')
-				.andWhere('instance.lastCommunicatedAt > :gt', { gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)) })
+				.andWhere('instance.isNotResponding = false')
 				.getRawOne()
 				.then(x => parseInt(x.count, 10)),
 			this.instancesRepository.createQueryBuilder('instance')
@@ -94,7 +94,7 @@ export default class FederationChart extends Chart<typeof schema> {
 				.where(`instance.host IN (${ pubInstancesQuery.getQuery() })`)
 				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT IN (:...blocked)', { blocked: meta.blockedHosts })
 				.andWhere('instance.isSuspended = false')
-				.andWhere('instance.lastCommunicatedAt > :gt', { gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)) })
+				.andWhere('instance.isNotResponding = false')
 				.getRawOne()
 				.then(x => parseInt(x.count, 10)),
 		]);

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

@@ -7,8 +7,8 @@ import type { } from '@/models/entities/Blocking.js';
 import type { User } from '@/models/entities/User.js';
 import type { Instance } from '@/models/entities/Instance.js';
 import { MetaService } from '@/core/MetaService.js';
-import { UserEntityService } from './UserEntityService.js';
 import { bindThis } from '@/decorators.js';
+import { UserEntityService } from './UserEntityService.js';
 
 @Injectable()
 export class InstanceEntityService {
@@ -33,8 +33,6 @@ export class InstanceEntityService {
 			notesCount: instance.notesCount,
 			followingCount: instance.followingCount,
 			followersCount: instance.followersCount,
-			latestRequestSentAt: instance.latestRequestSentAt ? instance.latestRequestSentAt.toISOString() : null,
-			lastCommunicatedAt: instance.lastCommunicatedAt.toISOString(),
 			isNotResponding: instance.isNotResponding,
 			isSuspended: instance.isSuspended,
 			isBlocked: meta.blockedHosts.includes(instance.host),

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

@@ -59,22 +59,6 @@ export class Instance {
 	})
 	public followersCount: number;
 
-	/**
-	 * 直近のリクエスト送信日時
-	 */
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public latestRequestSentAt: Date | null;
-
-	/**
-	 * 直近のリクエスト送信時のHTTPステータスコード
-	 */
-	@Column('integer', {
-		nullable: true,
-	})
-	public latestStatus: number | null;
-
 	/**
 	 * 直近のリクエスト受信日時
 	 */
@@ -83,12 +67,6 @@ export class Instance {
 	})
 	public latestRequestReceivedAt: Date | null;
 
-	/**
-	 * このインスタンスと最後にやり取りした日時
-	 */
-	@Column('timestamp with time zone')
-	public lastCommunicatedAt: Date;
-
 	/**
 	 * このインスタンスと不通かどうか
 	 */

packages/backend/src/models/schema/federation-instance.ts

@@ -32,16 +32,6 @@ export const packedFederationInstanceSchema = {
 			type: 'number',
 			optional: false, nullable: false,
 		},
-		latestRequestSentAt: {
-			type: 'string',
-			optional: false, nullable: true,
-			format: 'date-time',
-		},
-		lastCommunicatedAt: {
-			type: 'string',
-			optional: false, nullable: false,
-			format: 'date-time',
-		},
 		isNotResponding: {
 			type: 'boolean',
 			optional: false, nullable: false,

packages/backend/src/queue/processors/DeliverProcessorService.ts

@@ -15,10 +15,10 @@ import ApRequestChart from '@/core/chart/charts/ap-request.js';
 import FederationChart from '@/core/chart/charts/federation.js';
 import { StatusError } from '@/misc/status-error.js';
 import { UtilityService } from '@/core/UtilityService.js';
+import { bindThis } from '@/decorators.js';
 import { QueueLoggerService } from '../QueueLoggerService.js';
 import type Bull from 'bull';
 import type { DeliverJobData } from '../types.js';
-import { bindThis } from '@/decorators.js';
 
 @Injectable()
 export class DeliverProcessorService {
@@ -48,7 +48,6 @@ export class DeliverProcessorService {
 	) {
 		this.logger = this.queueLoggerService.logger.createSubLogger('deliver');
 		this.suspendedHostsCache = new Cache<Instance[]>(1000 * 60 * 60);
-		this.latest = null;
 	}
 
 	@bindThis
@@ -76,20 +75,18 @@ export class DeliverProcessorService {
 		}
 
 		try {
-			if (this.latest !== (this.latest = JSON.stringify(job.data.content, null, 2))) {
-				this.logger.debug(`delivering ${this.latest}`);
-			}
-
 			await this.apRequestService.signedPost(job.data.user, job.data.to, job.data.content);
 
 			// Update stats
-			this.federatedInstanceService.registerOrFetchInstanceDoc(host).then(i => {
+			this.federatedInstanceService.fetch(host).then(i => {
+				if (i.isNotResponding) {
 					this.instancesRepository.update(i.id, {
-					latestRequestSentAt: new Date(),
-					latestStatus: 200,
-					lastCommunicatedAt: new Date(),
 						isNotResponding: false,
 					});
+					this.federatedInstanceService.updateCachePartial(host, {
+						isNotResponding: false,
+					});
+				}
 
 				this.fetchInstanceMetadataService.fetchInstanceMetadata(i);
 
@@ -101,12 +98,15 @@ export class DeliverProcessorService {
 			return 'Success';
 		} catch (res) {
 			// Update stats
-			this.federatedInstanceService.registerOrFetchInstanceDoc(host).then(i => {
+			this.federatedInstanceService.fetch(host).then(i => {
+				if (!i.isNotResponding) {
 					this.instancesRepository.update(i.id, {
-					latestRequestSentAt: new Date(),
-					latestStatus: res instanceof StatusError ? res.statusCode : null,
 						isNotResponding: true,
 					});
+					this.federatedInstanceService.updateCachePartial(host, {
+						isNotResponding: true,
+					});
+				}
 
 				this.instanceChart.requestSent(i.host, false);
 				this.apRequestChart.deliverFail();

packages/backend/src/queue/processors/InboxProcessorService.ts

@@ -176,10 +176,12 @@ export class InboxProcessorService {
 		}
 
 		// Update stats
-		this.federatedInstanceService.registerOrFetchInstanceDoc(authUser.user.host).then(i => {
+		this.federatedInstanceService.fetch(authUser.user.host).then(i => {
 			this.instancesRepository.update(i.id, {
 				latestRequestReceivedAt: new Date(),
-				lastCommunicatedAt: new Date(),
+				isNotResponding: false,
+			});
+			this.federatedInstanceService.updateCachePartial(host, {
 				isNotResponding: false,
 			});
 

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

@@ -64,8 +64,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				case '-followers': query.orderBy('instance.followersCount', 'ASC'); break;
 				case '+caughtAt': query.orderBy('instance.caughtAt', 'DESC'); break;
 				case '-caughtAt': query.orderBy('instance.caughtAt', 'ASC'); break;
-				case '+lastCommunicatedAt': query.orderBy('instance.lastCommunicatedAt', 'DESC'); break;
+				case '+latestRequestReceivedAt': query.orderBy('instance.latestRequestReceivedAt', 'DESC'); break;
-				case '-lastCommunicatedAt': query.orderBy('instance.lastCommunicatedAt', 'ASC'); break;
+				case '-latestRequestReceivedAt': query.orderBy('instance.latestRequestReceivedAt', 'ASC'); break;
 
 				default: query.orderBy('instance.id', 'DESC'); break;
 			}

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

@@ -139,11 +139,13 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 					throw new ApiError(meta.errors.noSuchUser);
 				}
 
+				if (user.host == null) {
 					if (me == null && ip != null) {
 						this.perUserPvChart.commitByVisitor(user, ip);
 					} else if (me && me.id !== user.id) {
 						this.perUserPvChart.commitByUser(user, me.id);
 					}
+				}
 
 				return await this.userEntityService.pack(user, me, {
 					detail: true,

packages/frontend/package.json

@@ -11,7 +11,7 @@
 		"@rollup/plugin-alias": "4.0.2",
 		"@rollup/plugin-json": "6.0.0",
 		"@rollup/pluginutils": "5.0.2",
-		"@syuilo/aiscript": "0.11.1",
+		"@syuilo/aiscript": "0.12.0",
 		"@tabler/icons": "^1.118.0",
 		"@vitejs/plugin-vue": "4.0.0",
 		"@vue/compiler-sfc": "3.2.45",

packages/frontend/src/components/MkAbuseReportWindow.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import XWindow from '@/components/MkWindow.vue';
 import MkTextarea from '@/components/form/textarea.vue';
@@ -40,7 +40,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const uiWindow = ref<InstanceType<typeof XWindow>>();
+const uiWindow = shallowRef<InstanceType<typeof XWindow>>();
 const comment = ref(props.initialComment || '');
 
 function send() {

packages/frontend/src/components/MkAutocomplete.vue

@@ -16,7 +16,7 @@
 		</li>
 	</ol>
 	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
-		<li v-for="emoji in emojis" tabindex="-1" :key="emoji.emoji" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
+		<li v-for="emoji in emojis" :key="emoji.emoji" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
 			<div class="emoji">
 				<MkEmoji :emoji="emoji.emoji"/>
 			</div>
@@ -35,7 +35,8 @@
 </template>
 
 <script lang="ts">
-import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { markRaw, ref, shallowRef, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import sanitizeHtml from 'sanitize-html';
 import contains from '@/scripts/contains';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { acct } from '@/filters/user';
@@ -45,7 +46,6 @@ import { defaultStore } from '@/store';
 import { emojilist } from '@/scripts/emojilist';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
-import sanitizeHtml from 'sanitize-html';
 
 type EmojiDef = {
 	emoji: string;
@@ -136,7 +136,7 @@ const emit = defineEmits<{
 }>();
 
 const suggests = ref<Element>();
-const rootEl = ref<HTMLDivElement>();
+const rootEl = shallowRef<HTMLDivElement>();
 
 const fetching = ref(true);
 const users = ref<any[]>([]);

packages/frontend/src/components/MkButton.vue

@@ -47,8 +47,8 @@ const emit = defineEmits<{
 	(ev: 'click', payload: MouseEvent): void;
 }>();
 
-let el = $ref<HTMLElement | null>(null);
+let el = $shallowRef<HTMLElement | null>(null);
-let ripples = $ref<HTMLElement | null>(null);
+let ripples = $shallowRef<HTMLElement | null>(null);
 
 onMounted(() => {
 	if (props.autofocus) {

packages/frontend/src/components/MkCaptcha.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch } from 'vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
@@ -42,7 +42,7 @@ const emit = defineEmits<{
 
 const available = ref(false);
 
-const captchaEl = ref<HTMLDivElement | undefined>();
+const captchaEl = shallowRef<HTMLDivElement | undefined>();
 
 const variable = computed(() => {
 	switch (props.provider) {
@@ -62,7 +62,7 @@ const src = computed(() => {
 	}
 });
 
-const scriptId = computed(() => `script-${props.provider}`)
+const scriptId = computed(() => `script-${props.provider}`);
 
 const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
 

packages/frontend/src/components/MkChart.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="cbbedffa">
 	<canvas ref="chartEl"></canvas>
+	<MkChartLegend ref="legendEl" style="margin-top: 8px;"/>
 	<div v-if="fetching" class="fetching">
 		<MkLoading/>
 	</div>
@@ -13,9 +14,8 @@
   id-denylist violation when setting it. This is causing about 60+ lint issues.
   As this is part of Chart.js's API it makes sense to disable the check here.
 */
-import { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
+import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
 import { Chart } from 'chart.js';
-import 'chartjs-adapter-date-fns';
 import { enUS } from 'date-fns/locale';
 import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
@@ -25,6 +25,8 @@ import { chartVLine } from '@/scripts/chart-vline';
 import { alpha } from '@/scripts/color';
 import date from '@/filters/date';
 import { initChart } from '@/scripts/init-chart';
+import { chartLegend } from '@/scripts/chart-legend';
+import MkChartLegend from '@/components/MkChartLegend.vue';
 
 initChart();
 
@@ -68,6 +70,8 @@ const props = defineProps({
 	},
 });
 
+let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
+
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
 
@@ -102,7 +106,7 @@ let chartData: {
 	}[];
 } = null;
 
-const chartEl = ref<HTMLCanvasElement>(null);
+const chartEl = shallowRef<HTMLCanvasElement>(null);
 const fetching = ref(true);
 
 const getDate = (ago: number) => {
@@ -221,11 +225,7 @@ const render = () => {
 			},
 			plugins: {
 				legend: {
-					display: props.detailed,
+					display: false,
-					position: 'bottom',
-					labels: {
-						boxWidth: 16,
-					},
 				},
 				tooltip: {
 					enabled: false,
@@ -265,7 +265,7 @@ const render = () => {
 				gradient,
 			},
 		},
-		plugins: [chartVLine(vLineColor)],
+		plugins: [chartVLine(vLineColor), ...(props.detailed ? [chartLegend(legendEl)] : [])],
 	});
 };
 

packages/frontend/src/components/MkChartLegend.vue

@@ -0,0 +1,75 @@
+<template>
+<div :class="$style.root">
+	<button v-for="item in items" class="_button item" :class="{ disabled: item.hidden }" @click="onClick(item)">
+		<span class="box" :style="{ background: chart.config.type === 'line' ? item.strokeStyle?.toString() : item.fillStyle?.toString() }"></span>
+		{{ item.text }}
+	</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
+import { Chart, LegendItem } from 'chart.js';
+
+const props = defineProps({
+});
+
+let chart = $shallowRef<Chart>();
+let items = $shallowRef<LegendItem[]>([]);
+
+function update(_chart: Chart, _items: LegendItem[]) {
+	chart = _chart,
+	items = _items;
+}
+
+function onClick(item: LegendItem) {
+	if (chart == null) return;
+	const { type } = chart.config;
+	if (type === 'pie' || type === 'doughnut') {
+		// Pie and doughnut charts only have a single dataset and visibility is per item
+		chart.toggleDataVisibility(item.index);
+	} else {
+		chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+	}
+	chart.update();
+}
+
+defineExpose({
+	update,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 8px;
+
+	&:global {
+		> .item {
+			font-size: 85%;
+			padding: 4px 12px 4px 8px;
+			border: solid 1px var(--divider);
+			border-radius: 999px;
+
+			&:hover {
+				border-color: var(--inputBorderHover);
+			}
+
+			&.disabled {
+				text-decoration: line-through;
+				opacity: 0.6;
+			}
+
+			> .box {
+				display: inline-block;
+				width: 12px;
+				height: 12px;
+				border-radius: 100%;
+				vertical-align: -10%;
+			}
+		}
+	}
+}
+</style>

packages/frontend/src/components/MkContextMenu.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-let rootEl = $ref<HTMLDivElement>();
+let rootEl = $shallowRef<HTMLDivElement>();
 
 let zIndex = $ref<number>(os.claimZIndex('high'));
 

packages/frontend/src/components/MkCropperDialog.vue

@@ -50,8 +50,8 @@ const props = defineProps<{
 }>();
 
 const imgUrl = getProxiedImageUrl(props.file.url);
-let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
+let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>();
-let imgEl = $ref<HTMLImageElement>();
+let imgEl = $shallowRef<HTMLImageElement>();
 let cropper: Cropper | null = null;
 let loading = $ref(true);
 

packages/frontend/src/components/MkDialog.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
@@ -94,7 +94,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const inputValue = ref(props.input?.default || null);
 const selectedValue = ref(props.select?.default || null);

packages/frontend/src/components/MkDrive.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import XNavFolder from '@/components/MkDrive.navFolder.vue';
@@ -118,8 +118,8 @@ const emit = defineEmits<{
 	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
 }>();
 
-const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
+const loadMoreFiles = shallowRef<InstanceType<typeof MkButton>>();
-const fileInput = ref<HTMLInputElement>();
+const fileInput = shallowRef<HTMLInputElement>();
 
 const folder = ref<Misskey.entities.DriveFolder | null>(null);
 const files = ref<Misskey.entities.DriveFile[]>([]);

packages/frontend/src/components/MkDriveSelectDialog.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import XDrive from '@/components/MkDrive.vue';
 import XModalWindow from '@/components/MkModalWindow.vue';
@@ -38,7 +38,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = ref<InstanceType<typeof XModalWindow>>();
+const dialog = shallowRef<InstanceType<typeof XModalWindow>>();
 
 const selected = ref<Misskey.entities.DriveFile[]>([]);
 

packages/frontend/src/components/MkEmojiPicker.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, shallowRef, computed, watch, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import XSection from '@/components/MkEmojiPicker.section.vue';
 import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
@@ -102,8 +102,8 @@ const emit = defineEmits<{
 	(ev: 'chosen', v: string): void;
 }>();
 
-const search = ref<HTMLInputElement>();
+const search = shallowRef<HTMLInputElement>();
-const emojis = ref<HTMLDivElement>();
+const emojis = shallowRef<HTMLDivElement>();
 
 const {
 	reactions: pinned,

packages/frontend/src/components/MkEmojiPickerDialog.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store';
@@ -48,8 +48,8 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
-const picker = ref<InstanceType<typeof MkEmojiPicker>>();
+const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
 	emit('done', emoji);

packages/frontend/src/components/MkFileCaptionEditWindow.vue

@@ -37,7 +37,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
 
 let caption = $ref(props.default);
 

packages/frontend/src/components/MkHeatmap.vue

@@ -12,11 +12,10 @@ import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, w
 import { Chart } from 'chart.js';
 import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import * as os from '@/os';
-import 'chartjs-adapter-date-fns';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import { chartVLine } from '@/scripts/chart-vline';
 import { alpha } from '@/scripts/color';
 import { initChart } from '@/scripts/init-chart';
@@ -27,8 +26,8 @@ const props = defineProps<{
 	src: string;
 }>();
 
-const rootEl = $ref<HTMLDivElement>(null);
+const rootEl = $shallowRef<HTMLDivElement>(null);
-const chartEl = $ref<HTMLCanvasElement>(null);
+const chartEl = $shallowRef<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
 let fetching = $ref(true);

packages/frontend/src/components/MkImageViewer.vue

@@ -28,7 +28,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const modal = $ref<InstanceType<typeof MkModal>>();
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
 	cover: true,
 });
 
-const canvas = $ref<HTMLCanvasElement>();
+const canvas = $shallowRef<HTMLCanvasElement>();
 let loaded = $ref(false);
 
 function draw() {

packages/frontend/src/components/MkInstanceStats.vue

@@ -94,8 +94,8 @@ const chartLimit = 500;
 let chartSpan = $ref<'hour' | 'day'>('hour');
 let chartSrc = $ref('active-users');
 let heatmapSrc = $ref('active-users');
-let subDoughnutEl = $ref<HTMLCanvasElement>();
+let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
-let pubDoughnutEl = $ref<HTMLCanvasElement>();
+let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
 	position: 'middle',

packages/frontend/src/components/MkLaunchPad.vue

@@ -44,7 +44,7 @@ const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'pop
 	deviceKind === 'smartphone' ? 'drawer' :
 	'dialog';
 
-const modal = $ref<InstanceType<typeof MkModal>>();
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 

packages/frontend/src/components/MkMediaBanner.vue

@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-const audioEl = $ref<HTMLAudioElement | null>();
+const audioEl = $shallowRef<HTMLAudioElement | null>();
 let hide = $ref(true);
 
 function volumechange() {

packages/frontend/src/components/MkMenu.child.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { on } from 'events';
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 import * as os from '@/os';
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 	(ev: 'actioned'): void;
 }>();
 
-const el = ref<HTMLElement>();
+const el = shallowRef<HTMLElement>();
 const align = 'left';
 
 function setPosition() {

packages/frontend/src/components/MkMenu.vue

@@ -78,11 +78,11 @@ const emit = defineEmits<{
 	(ev: 'close', actioned?: boolean): void;
 }>();
 
-let itemsEl = $ref<HTMLDivElement>();
+let itemsEl = $shallowRef<HTMLDivElement>();
 
 let items2: InnerMenuItem[] = $ref([]);
 
-let child = $ref<InstanceType<typeof XChild>>();
+let child = $shallowRef<InstanceType<typeof XChild>>();
 
 let keymap = $computed(() => ({
 	'up|k|shift+tab': focusUp,
@@ -112,7 +112,7 @@ watch(() => props.items, () => {
 });
 
 let childMenu = $ref<MenuItem[] | null>();
-let childTarget = $ref<HTMLElement | null>();
+let childTarget = $shallowRef<HTMLElement | null>();
 
 function closeChild() {
 	childMenu = null;
@@ -203,7 +203,7 @@ onBeforeUnmount(() => {
 	> .item {
 		display: block;
 		position: relative;
-		padding: 6px 16px;
+		padding: 5px 16px;
 		width: 100%;
 		box-sizing: border-box;
 		white-space: nowrap;
@@ -226,10 +226,6 @@ onBeforeUnmount(() => {
 			border-radius: 6px;
 		}
 
-		> * {
-			position: relative;
-		}
-
 		&:not(:disabled):hover {
 			color: var(--accent);
 			text-decoration: none;

packages/frontend/src/components/MkModal.vue

@@ -61,7 +61,7 @@ let maxHeight = $ref<number>();
 let fixed = $ref(false);
 let transformOrigin = $ref('center');
 let showing = $ref(true);
-let content = $ref<HTMLElement>();
+let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 const type = $computed<ModalTypes>(() => {
 	if (props.preferType === 'auto') {

packages/frontend/src/components/MkModalPageWindow.vue

@@ -49,7 +49,7 @@ router.addListener('push', ctx => {
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let rootEl = $ref();
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = $shallowRef<InstanceType<typeof MkModal>>();
 let path = $ref(props.initialPath);
 let width = $ref(860);
 let height = $ref(660);

packages/frontend/src/components/MkModalWindow.vue

@@ -41,9 +41,9 @@ const emit = defineEmits<{
 	(event: 'ok'): void;
 }>();
 
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = $shallowRef<InstanceType<typeof MkModal>>();
-let rootEl = $ref<HTMLElement>();
+let rootEl = $shallowRef<HTMLElement>();
-let headerEl = $ref<HTMLElement>();
+let headerEl = $shallowRef<HTMLElement>();
 let bodyWidth = $ref(0);
 let bodyHeight = $ref(0);
 

packages/frontend/src/components/MkNote.vue

@@ -59,7 +59,7 @@
 					</div>
 					<MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote" class="note"/></div>
 					<button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
 						<span>{{ i18n.ts.showMore }}</span>
 					</button>
@@ -101,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue';
+import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef, Ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -156,11 +156,11 @@ const isRenote = (
 	note.poll == null
 );
 
-const el = ref<HTMLElement>();
+const el = shallowRef<HTMLElement>();
-const menuButton = ref<HTMLElement>();
+const menuButton = shallowRef<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
+const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>();
-const renoteTime = ref<HTMLElement>();
+const renoteTime = shallowRef<HTMLElement>();
-const reactButton = ref<HTMLElement>();
+const reactButton = shallowRef<HTMLElement>();
 let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
@@ -529,7 +529,7 @@ function readPromo() {
 					> .renote {
 						padding: 8px 0;
 
-						> * {
+						> .note {
 							padding: 16px;
 							border: dashed 1px var(--renote);
 							border-radius: 8px;

packages/frontend/src/components/MkNoteDetailed.vue

@@ -70,7 +70,7 @@
 					</div>
 					<MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote" class="note"/></div>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
@@ -112,7 +112,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { computed, inject, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -166,11 +166,11 @@ const isRenote = (
 	note.poll == null
 );
 
-const el = ref<HTMLElement>();
+const el = shallowRef<HTMLElement>();
-const menuButton = ref<HTMLElement>();
+const menuButton = shallowRef<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
+const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>();
-const renoteTime = ref<HTMLElement>();
+const renoteTime = shallowRef<HTMLElement>();
-const reactButton = ref<HTMLElement>();
+const reactButton = shallowRef<HTMLElement>();
 let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
@@ -491,7 +491,7 @@ if (appearNote.replyId) {
 					> .renote {
 						padding: 8px 0;
 
-						> * {
+						> .note {
 							padding: 16px;
 							border: dashed 1px var(--renote);
 							border-radius: 8px;

packages/frontend/src/components/MkNotes.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 import XNote from '@/components/MkNote.vue';
 import XList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
@@ -29,7 +29,7 @@ const props = defineProps<{
 	noGap?: boolean;
 }>();
 
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
 defineExpose({
 	pagingComponent,

packages/frontend/src/components/MkNotification.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, shallowRef, onMounted, onUnmounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -95,7 +95,7 @@ const props = withDefaults(defineProps<{
 	full: false,
 });
 
-const elRef = ref<HTMLElement>(null);
+const elRef = shallowRef<HTMLElement>(null);
 const reactionRef = ref(null);
 
 let readObserver: IntersectionObserver | undefined;

packages/frontend/src/components/MkNotificationSettingWindow.vue

@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
 
 let includingTypes = $computed(() => props.includingTypes || []);
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
 
 let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
 let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);

packages/frontend/src/components/MkNotifications.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
+import { defineComponent, markRaw, onUnmounted, onMounted, computed, shallowRef } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
@@ -33,7 +33,7 @@ const props = defineProps<{
 	unreadOnly?: boolean;
 }>();
 
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
 const pagination: Paging = {
 	endpoint: 'i/notifications' as const,

packages/frontend/src/components/MkPageWindow.vue

@@ -47,7 +47,7 @@ defineEmits<{
 const router = new Router(routes, props.initialPath);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let windowEl = $ref<InstanceType<typeof XWindow>>();
+let windowEl = $shallowRef<InstanceType<typeof XWindow>>();
 const history = $ref<{ path: string; key: any; }[]>([{
 	path: router.getCurrentPath(),
 	key: router.getCurrentKey(),

packages/frontend/src/components/MkPagination.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, shallowRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
 import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
@@ -65,7 +65,7 @@ const props = withDefaults(defineProps<{
 	disableAutoLoad?: boolean;
 	displayLimit?: number;
 }>(), {
-	displayLimit: 30,
+	displayLimit: 20,
 });
 
 const emit = defineEmits<{
@@ -74,7 +74,7 @@ const emit = defineEmits<{
 
 type Item = { id: string; [another: string]: unknown; };
 
-const rootEl = ref<HTMLElement>();
+const rootEl = shallowRef<HTMLElement>();
 const items = ref<Item[]>([]);
 const queue = ref<Item[]>([]);
 const offset = ref(0);

packages/frontend/src/components/MkPopupMenu.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = $shallowRef<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>

packages/frontend/src/components/MkPostForm.vue

@@ -128,10 +128,10 @@ const emit = defineEmits<{
 	(ev: 'esc'): void;
 }>();
 
-const textareaEl = $ref<HTMLTextAreaElement | null>(null);
+const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
-const cwInputEl = $ref<HTMLInputElement | null>(null);
+const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
-const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
+const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
-const visibilityButton = $ref<HTMLElement | null>(null);
+const visibilityButton = $shallowRef<HTMLElement | null>(null);
 
 let posting = $ref(false);
 let posted = $ref(false);

packages/frontend/src/components/MkPostFormDialog.vue

@@ -31,8 +31,8 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = $shallowRef<InstanceType<typeof MkModal>>();
-let form = $ref<InstanceType<typeof MkPostForm>>();
+let form = $shallowRef<InstanceType<typeof MkPostForm>>();
 
 function onPosted() {
 	modal.close({

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

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
@@ -28,7 +28,7 @@ const props = defineProps<{
 	note: misskey.entities.Note;
 }>();
 
-const buttonRef = ref<HTMLElement>();
+const buttonRef = shallowRef<HTMLElement>();
 
 const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
 

packages/frontend/src/components/MkRenoteButton.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkUsersTooltip.vue';
 import { pleaseLogin } from '@/scripts/please-login';
@@ -28,7 +28,7 @@ const props = defineProps<{
 	count: number;
 }>();
 
-const buttonRef = ref<HTMLElement>();
+const buttonRef = shallowRef<HTMLElement>();
 
 const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
 

packages/frontend/src/components/MkRetentionHeatmap.vue

@@ -12,19 +12,18 @@ import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick }
 import { Chart } from 'chart.js';
 import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import * as os from '@/os';
-import 'chartjs-adapter-date-fns';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import { chartVLine } from '@/scripts/chart-vline';
 import { alpha } from '@/scripts/color';
 import { initChart } from '@/scripts/init-chart';
 
 initChart();
 
-const rootEl = $ref<HTMLDivElement>(null);
+const rootEl = $shallowRef<HTMLDivElement>(null);
-const chartEl = $ref<HTMLCanvasElement>(null);
+const chartEl = $shallowRef<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
 let fetching = $ref(true);

packages/frontend/src/components/MkSigninDialog.vue

@@ -32,7 +32,7 @@ const emit = defineEmits<{
 	(ev: 'cancelled'): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
 
 function onClose() {
 	emit('cancelled');

packages/frontend/src/components/MkSignupDialog.vue

@@ -33,7 +33,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
 
 function onSignup(res) {
 	emit('done', res);

packages/frontend/src/components/MkSparkle.vue

@@ -64,10 +64,10 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
 
 const particles = ref([]);
-const el = ref<HTMLElement>();
+const el = shallowRef<HTMLElement>();
 const width = ref(0);
 const height = ref(0);
 const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];

packages/frontend/src/components/MkTagCloud.vue

@@ -19,9 +19,9 @@ const computedStyle = getComputedStyle(document.documentElement);
 const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
 const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
 let available = $ref(false);
-let rootEl = $ref<HTMLElement | null>(null);
+let rootEl = $shallowRef<HTMLElement | null>(null);
-let canvasEl = $ref<HTMLCanvasElement | null>(null);
+let canvasEl = $shallowRef<HTMLCanvasElement | null>(null);
-let tagsEl = $ref<HTMLElement | null>(null);
+let tagsEl = $shallowRef<HTMLElement | null>(null);
 let width = $ref(300);
 
 watch($$(available), () => {

packages/frontend/src/components/MkTokenGenerateWindow.vue

@@ -54,7 +54,7 @@ const emit = defineEmits<{
 	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
 let name = $ref(props.initialName);
 let permissions = $ref({});
 

packages/frontend/src/components/MkTooltip.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import * as os from '@/os';
 import { calcPopupPosition } from '@/scripts/popup-position';
 
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const el = ref<HTMLElement>();
+const el = shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex('high');
 
 function setPosition() {

packages/frontend/src/components/MkUpdated.vue

@@ -10,14 +10,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
 import { version } from '@/config';
 import { i18n } from '@/i18n';
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const whatIsNew = () => {
 	modal.value.close();

packages/frontend/src/components/MkUserList.vue

@@ -1,5 +1,5 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
+<MkPagination :pagination="pagination">
 	<template #empty>
 		<div class="_fullinfo">
 			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { userPage } from '@/filters/user';
@@ -26,8 +26,6 @@ const props = defineProps<{
 	pagination: Paging;
 	noGap?: boolean;
 }>();
-
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 </script>
 
 <style lang="scss" scoped>

packages/frontend/src/components/MkVisibility.vue

@@ -22,7 +22,7 @@ const props = defineProps<{
 	},
 }>();
 
-const specified = $ref<HTMLElement>();
+const specified = $shallowRef<HTMLElement>();
 
 if (props.note.visibility === 'specified') {
 	useTooltip($$(specified), async (showing) => {

packages/frontend/src/components/MkVisibilityPicker.vue

@@ -1,42 +1,42 @@
 <template>
 <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="gqyayizv _popup">
-		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
+		<button key="public" class="_button item" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div><i class="ti ti-world"></i></div>
+			<div class="icon"><i class="ti ti-world"></i></div>
-			<div>
+			<div class="body">
 				<span>{{ i18n.ts._visibility.public }}</span>
 				<span>{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
-		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
+		<button key="home" class="_button item" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div><i class="ti ti-home"></i></div>
+			<div class="icon"><i class="ti ti-home"></i></div>
-			<div>
+			<div class="body">
 				<span>{{ i18n.ts._visibility.home }}</span>
 				<span>{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
-		<button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
+		<button key="followers" class="_button item" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
-			<div><i class="ti ti-lock-open"></i></div>
+			<div class="icon"><i class="ti ti-lock-open"></i></div>
-			<div>
+			<div class="body">
 				<span>{{ i18n.ts._visibility.followers }}</span>
 				<span>{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
-		<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
+		<button key="specified" :disabled="localOnly" class="_button item" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
-			<div><i class="ti ti-mail"></i></div>
+			<div class="icon"><i class="ti ti-mail"></i></div>
-			<div>
+			<div class="body">
 				<span>{{ i18n.ts._visibility.specified }}</span>
 				<span>{{ i18n.ts._visibility.specifiedDescription }}</span>
 			</div>
 		</button>
 		<div class="divider"></div>
-		<button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
+		<button key="localOnly" class="_button item localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
-			<div><i class="ti ti-world-off"></i></div>
+			<div class="icon"><i class="ti ti-world-off"></i></div>
-			<div>
+			<div class="body">
 				<span>{{ i18n.ts._visibility.localOnly }}</span>
 				<span>{{ i18n.ts._visibility.localOnlyDescription }}</span>
 			</div>
-			<div><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
+			<div class="toggle"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
 		</button>
 	</div>
 </MkModal>
@@ -48,7 +48,7 @@ import * as misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import { i18n } from '@/i18n';
 
-const modal = $ref<InstanceType<typeof MkModal>>();
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
 const props = withDefaults(defineProps<{
 	currentVisibility: typeof misskey.noteVisibilities[number];
@@ -89,7 +89,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 		border-top: solid 0.5px var(--divider);
 	}
 
-	> button {
+	> .item {
 		display: flex;
 		padding: 8px 14px;
 		font-size: 12px;
@@ -115,7 +115,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 			background: inherit;
 		}
 
-		> *:nth-child(1) {
+		> .icon {
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -127,7 +127,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 			margin-bottom: auto;
 		}
 
-		> *:nth-child(2) {
+		> .body {
 			flex: 1 1 auto;
 			white-space: nowrap;
 			overflow: hidden;
@@ -143,7 +143,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 			}
 		}
 
-		> *:nth-child(3) {
+		> .toggle {
 			display: flex;
 			justify-content: center;
 			align-items: center;

packages/frontend/src/components/MkWaitingDialog.vue

@@ -9,10 +9,10 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, ref } from 'vue';
+import { watch, shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
 	success: boolean;

packages/frontend/src/components/MkWindow.vue

@@ -88,7 +88,7 @@ const emit = defineEmits<{
 
 provide('inWindow', true);
 
-let rootEl = $ref<HTMLElement | null>();
+let rootEl = $shallowRef<HTMLElement | null>();
 let showing = $ref(true);
 let beforeClickedAt = 0;
 let maximized = $ref(false);

packages/frontend/src/components/form/checkbox.vue

@@ -35,7 +35,7 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', v: boolean): void;
 }>();
 
-let button = $ref<HTMLElement>();
+let button = $shallowRef<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;

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

@@ -1,5 +1,5 @@
 <template>
-<div class="dwzlatin" :class="{ opened }" ref="root">
+<div class="dwzlatin" :class="{ opened }">
 	<div class="header _button" @click="toggle">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot name="label"></slot></span>
@@ -19,7 +19,7 @@
 		>
 			<KeepAlive>
 				<div v-show="opened">
-					<MkSpacer :margin-min="14" :margin-max="22" :container="root">
+					<MkSpacer :margin-min="14" :margin-max="22">
 						<slot></slot>
 					</MkSpacer>
 				</div>
@@ -40,7 +40,6 @@ const props = withDefaults(defineProps<{
 
 let opened = $ref(props.defaultOpen);
 let openedAtLeastOnce = $ref(props.defaultOpen);
-let root = $ref<HTMLElement>();
 
 function enter(el) {
 	const elementHeight = el.getBoundingClientRect().height;
@@ -142,6 +141,7 @@ function toggle() {
 	> .body {
 		background: var(--panel);
 		border-radius: 0 0 6px 6px;
+		container-type: inline-size;
 	}
 
 	&.opened {

packages/frontend/src/components/form/input.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/MkButton.vue';
 import { useInterval } from '@/scripts/use-interval';
@@ -74,9 +74,9 @@ const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
 const filled = computed(() => v.value !== '' && v.value != null);
-const inputEl = ref<HTMLElement>();
+const inputEl = shallowRef<HTMLElement>();
-const prefixEl = ref<HTMLElement>();
+const prefixEl = shallowRef<HTMLElement>();
-const suffixEl = ref<HTMLElement>();
+const suffixEl = shallowRef<HTMLElement>();
 const height =
 	props.small ? 35 :
 	props.large ? 39 :

packages/frontend/src/components/form/switch.vue

@@ -34,7 +34,7 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', v: boolean): void;
 }>();
 
-let button = $ref<HTMLElement>();
+let button = $shallowRef<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;

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

@@ -77,9 +77,9 @@ const metadata = injectPageMetadata();
 const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
-const el = $ref<HTMLElement | undefined>(undefined);
+const el = $shallowRef<HTMLElement | undefined>(undefined);
 const tabRefs: Record<string, HTMLElement | null> = {};
-const tabHighlightEl = $ref<HTMLElement | null>(null);
+const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
 const bg = ref<string | undefined>(undefined);
 let narrow = $ref(false);
 const hasTabs = $computed(() => props.tabs.length > 0);

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

@@ -1,6 +1,6 @@
 <template>
-<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
+<div :class="[$style.root, { [$style.rootMin]: forceSpacerMin }]">
-	<div ref="content" :class="$style.content">
+	<div :class="$style.content">
 		<slot></slot>
 	</div>
 </div>
@@ -14,85 +14,13 @@ const props = withDefaults(defineProps<{
 	contentMax?: number | null;
 	marginMin?: number;
 	marginMax?: number;
-
-	// MkFolderとかで開閉アニメーションの際にheightを正しく伝えるため
-	container?: HTMLElement,
 }>(), {
 	contentMax: null,
 	marginMin: 12,
 	marginMax: 24,
 });
 
-let ro: ResizeObserver;
+const forceSpacerMin = inject('forceSpacerMin', false) || deviceKind === 'smartphone';
-let root = $ref<HTMLElement>();
-let content = $ref<HTMLElement>();
-let margin = $ref(props.marginMin);
-const widthHistory = [null, null] as [number | null, number | null];
-const heightHistory = [null, null] as [number | null, number | null];
-const shouldSpacerMin = inject('shouldSpacerMin', false);
-
-const adjust = (rect: { width: number; height: number; }) => {
-	if (shouldSpacerMin || deviceKind === 'smartphone') {
-		margin = props.marginMin;
-		return;
-	}
-
-	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
-		margin = props.marginMax;
-	} else {
-		margin = props.marginMin;
-	}
-};
-
-if (props.container) {
-	const width = props.container.offsetWidth;
-	const height = props.container.offsetHeight;
-	adjust({
-		width,
-		height,
-	});
-}
-
-onMounted(() => {
-	ro = new ResizeObserver((entries) => {
-		/* iOSが対応していない
-		adjust({
-			width: entries[0].borderBoxSize[0].inlineSize,
-			height: entries[0].borderBoxSize[0].blockSize,
-		});
-		*/
-
-		const width = props.container ? props.container.offsetWidth : root!.offsetWidth;
-		const height = props.container ? props.container.offsetHeight : root!.offsetHeight;
-
-		//#region Prevent infinite resizing
-		// https://github.com/misskey-dev/misskey/issues/9076
-		const pastWidth = widthHistory.pop();
-		widthHistory.unshift(width);
-		const pastHeight = heightHistory.pop();
-		heightHistory.unshift(height);
-
-
-		if (pastWidth === width && pastHeight === height) {
-			return;
-		}
-		//#endregion
-
-		adjust({
-			width,
-			height,
-		});
-	});
-	ro.observe(root!);
-
-	if (props.contentMax) {
-		content!.style.maxWidth = `${props.contentMax}px`;
-	}
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
 </script>
 
 <style lang="scss" module>
@@ -100,9 +28,25 @@ onUnmounted(() => {
 	box-sizing: border-box;
 	width: 100%;
 }
+.rootMin {
+	padding: v-bind('props.marginMin + "px"') !important;
+}
 
 .content {
 	margin: 0 auto;
+	max-width: v-bind('props.contentMax + "px"');
 	container-type: inline-size;
 }
+
+@container (max-width: 360px) {
+	.root {
+		padding: v-bind('props.marginMin + "px"');
+	}
+}
+
+@container (min-width: 361px) {
+	.root {
+		padding: v-bind('props.marginMax + "px"');
+	}
+}
 </style>

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

@@ -18,9 +18,9 @@ const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
 <script lang="ts" setup>
 import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
 
-const rootEl = $ref<HTMLElement>();
+const rootEl = $shallowRef<HTMLElement>();
-const headerEl = $ref<HTMLElement>();
+const headerEl = $shallowRef<HTMLElement>();
-const bodyEl = $ref<HTMLElement>();
+const bodyEl = $shallowRef<HTMLElement>();
 
 let headerHeight = $ref<string | undefined>();
 let childStickyTop = $ref(0);

packages/frontend/src/components/page/page.vue

@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
-import { parse } from '@syuilo/aiscript';
 import XBlock from './page.block.vue';
 import { Hpml } from '@/scripts/hpml/evaluator';
 import { url } from '@/config';
@@ -28,38 +27,11 @@ export default defineComponent({
 			randomSeed: Math.random(),
 			visitor: $i,
 			url: url,
-			enableAiScript: !defaultStore.state.disablePagesScript,
 		});
 
 		onMounted(() => {
 			nextTick(() => {
-				if (props.page.script && hpml.aiscript) {
-					let ast;
-					try {
-						ast = parse(props.page.script);
-					} catch (err) {
-						console.error(err);
-						/*os.alert({
-							type: 'error',
-							text: 'Syntax error :('
-						});*/
-						return;
-					}
-					hpml.aiscript.exec(ast).then(() => {
 				hpml.eval();
-					}).catch(err => {
-						console.error(err);
-						/*os.alert({
-							type: 'error',
-							text: err
-						});*/
-					});
-				} else {
-					hpml.eval();
-				}
-			});
-			onUnmounted(() => {
-				if (hpml.aiscript) hpml.aiscript.abort();
 			});
 		});
 

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

@@ -156,7 +156,7 @@ const patrons = [
 let easterEggReady = false;
 let easterEggEmojis = $ref([]);
 let easterEggEngine = $ref(null);
-const containerEl = $ref<HTMLElement>();
+const containerEl = $shallowRef<HTMLElement>();
 
 function iconLoaded() {
 	const emojis = defaultStore.state.reactions;

packages/frontend/src/pages/about.federation.vue

@@ -30,15 +30,13 @@
 				<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
 				<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
 				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
 			</MkSelect>
 		</FormSplit>
 	</div>
 
 	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
 		<div class="dqokceoi">
-			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${dateString(instance.lastCommunicatedAt)}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
+			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
 				<MkInstanceCardMini :instance="instance"/>
 			</MkA>
 		</div>

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

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
+import { computed, onMounted, onUnmounted, ref, shallowRef, inject, watch, nextTick } from 'vue';
 import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { url } from '@/config';
@@ -64,9 +64,9 @@ const emit = defineEmits<{
 
 const metadata = injectPageMetadata();
 
-const el = ref<HTMLElement>(null);
+const el = shallowRef<HTMLElement>(null);
 const tabRefs = {};
-const tabHighlightEl = $ref<HTMLElement | null>(null);
+const tabHighlightEl = $shallowRef<HTMLElement | null>(null);
 const bg = ref(null);
 const height = ref(0);
 const hasTabs = computed(() => {

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

@@ -58,7 +58,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-let reports = $ref<InstanceType<typeof MkPagination>>();
+let reports = $shallowRef<InstanceType<typeof MkPagination>>();
 
 let state = $ref('unresolved');
 let reporterOrigin = $ref('combined');

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

@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
+import { computed, defineAsyncComponent, defineComponent, ref, shallowRef } from 'vue';
 import XHeader from './_header_.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
@@ -81,7 +81,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
+const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
 const tab = ref('local');
 const query = ref(null);

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

@@ -16,7 +16,7 @@
 			</div>
 		</MkSpacer>
 	</div>
-	<div v-if="!(narrow && currentPage?.route.name == null)" class="main" style="container-type: inline-size;">
+	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
 		<RouterView/>
 	</div>
 </div>

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

@@ -1,439 +0,0 @@
-<template>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="cpumem"></canvas>
-		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
-					<div class="_cell"><div class="_label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="disk"></canvas>
-		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
-					<div class="_cell"><div class="_label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="net"></canvas>
-		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Interface</div>{{ serverInfo.net.interface }}</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, markRaw } from 'vue';
-import { Chart } from 'chart.js';
-import MkwFederation from '../../widgets/federation.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { version, url } from '@/config';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
-
-initChart();
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkSelect,
-		MkInput,
-		MkContainer,
-		MkFolder,
-		MkwFederation,
-	},
-
-	data() {
-		return {
-			version,
-			url,
-			stats: null,
-			serverInfo: null,
-			connection: null,
-			queueConnection: markRaw(stream.useChannel('queueStats')),
-			memUsage: 0,
-			chartCpuMem: null,
-			chartNet: null,
-			jobs: [],
-			logs: [],
-			logLevel: 'all',
-			logDomain: '',
-			modLogs: [],
-			dbInfo: null,
-			overviewHeight: '1fr',
-			queueHeight: '1fr',
-			paused: false,
-		};
-	},
-
-	computed: {
-		gridColor() {
-			// TODO: var(--panel)の色が暗いか明るいかで判定する
-			return this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-		},
-	},
-
-	mounted() {
-		this.fetchJobs();
-
-		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-		os.api('admin/server-info', {}).then(res => {
-			this.serverInfo = res;
-
-			this.connection = markRaw(stream.useChannel('serverStats'));
-			this.connection.on('stats', this.onStats);
-			this.connection.on('statsLog', this.onStatsLog);
-			this.connection.send('requestLog', {
-				id: Math.random().toString().substr(2, 8),
-				length: 150,
-			});
-
-			this.$nextTick(() => {
-				this.queueConnection.send('requestLog', {
-					id: Math.random().toString().substr(2, 8),
-					length: 200,
-				});
-			});
-		});
-	},
-
-	beforeUnmount() {
-		if (this.connection) {
-			this.connection.off('stats', this.onStats);
-			this.connection.off('statsLog', this.onStatsLog);
-			this.connection.dispose();
-		}
-		this.queueConnection.dispose();
-	},
-
-	methods: {
-		cpumem(el) {
-			if (this.chartCpuMem != null) return;
-			this.chartCpuMem = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'CPU',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#86b300',
-						backgroundColor: alpha('#86b300', 0.1),
-						data: [],
-					}, {
-						label: 'MEM (active)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#935dbf',
-						backgroundColor: alpha('#935dbf', 0.02),
-						data: [],
-					}, {
-						label: 'MEM (used)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#935dbf',
-						borderDash: [5, 5],
-						fill: false,
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-								max: 100,
-							},
-						},
-					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
-		},
-
-		net(el) {
-			if (this.chartNet != null) return;
-			this.chartNet = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'In',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Out',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
-		},
-
-		disk(el) {
-			if (this.chartDisk != null) return;
-			this.chartDisk = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'Read',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Write',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
-		},
-
-		fetchJobs() {
-			os.api('admin/queue/deliver-delayed', {}).then(jobs => {
-				this.jobs = jobs;
-			});
-		},
-
-		onStats(stats) {
-			if (this.paused) return;
-
-			const cpu = (stats.cpu * 100).toFixed(0);
-			const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
-			const memUsed = (stats.mem.used / this.serverInfo.mem.total * 100).toFixed(0);
-			this.memUsage = stats.mem.active;
-
-			this.chartCpuMem.data.labels.push('');
-			this.chartCpuMem.data.datasets[0].data.push(cpu);
-			this.chartCpuMem.data.datasets[1].data.push(memActive);
-			this.chartCpuMem.data.datasets[2].data.push(memUsed);
-			this.chartNet.data.labels.push('');
-			this.chartNet.data.datasets[0].data.push(stats.net.rx);
-			this.chartNet.data.datasets[1].data.push(stats.net.tx);
-			this.chartDisk.data.labels.push('');
-			this.chartDisk.data.datasets[0].data.push(stats.fs.r);
-			this.chartDisk.data.datasets[1].data.push(stats.fs.w);
-			if (this.chartCpuMem.data.datasets[0].data.length > 150) {
-				this.chartCpuMem.data.labels.shift();
-				this.chartCpuMem.data.datasets[0].data.shift();
-				this.chartCpuMem.data.datasets[1].data.shift();
-				this.chartCpuMem.data.datasets[2].data.shift();
-				this.chartNet.data.labels.shift();
-				this.chartNet.data.datasets[0].data.shift();
-				this.chartNet.data.datasets[1].data.shift();
-				this.chartDisk.data.labels.shift();
-				this.chartDisk.data.datasets[0].data.shift();
-				this.chartDisk.data.datasets[1].data.shift();
-			}
-			this.chartCpuMem.update();
-			this.chartNet.update();
-			this.chartDisk.update();
-		},
-
-		onStatsLog(statsLog) {
-			for (const stats of [...statsLog].reverse()) {
-				this.onStats(stats);
-			}
-		},
-
-		bytes,
-
-		number,
-
-		pause() {
-			this.paused = true;
-		},
-
-		resume() {
-			this.paused = false;
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.xhexznfu {
-	> div:nth-child(2) {
-		padding: 16px;
-		border-top: solid 0.5px var(--divider);
-	}
-}
-</style>

packages/frontend/src/pages/admin/overview.active-users.vue

@@ -12,18 +12,17 @@ import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick }
 import { Chart } from 'chart.js';
 import { enUS } from 'date-fns/locale';
 import tinycolor from 'tinycolor2';
+import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
-import 'chartjs-adapter-date-fns';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import gradient from 'chartjs-plugin-gradient';
 import { chartVLine } from '@/scripts/chart-vline';
 import { alpha } from '@/scripts/color';
 import { initChart } from '@/scripts/init-chart';
 
 initChart();
 
-const chartEl = $ref<HTMLCanvasElement>(null);
+const chartEl = $shallowRef<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
 const chartLimit = 7;

packages/frontend/src/pages/admin/overview.ap-requests.vue

@@ -34,8 +34,8 @@ import { initChart } from '@/scripts/init-chart';
 initChart();
 
 const chartLimit = 50;
-const chartEl = $ref<HTMLCanvasElement>();
+const chartEl = $shallowRef<HTMLCanvasElement>();
-const chartEl2 = $ref<HTMLCanvasElement>();
+const chartEl2 = $shallowRef<HTMLCanvasElement>();
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();

packages/frontend/src/pages/admin/overview.instances.vue

@@ -22,7 +22,7 @@ const fetching = ref(true);
 
 const fetch = async () => {
 	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
+		sort: '+latestRequestReceivedAt',
 		limit: 6,
 	});
 	instances.value = fetchedInstances;

packages/frontend/src/pages/admin/overview.pie.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import { Chart } from 'chart.js';
 import number from '@/filters/number';
 import { defaultStore } from '@/store';
@@ -16,7 +16,7 @@ const props = defineProps<{
 	data: { name: string; value: number; color: string; onClick?: () => void }[];
 }>();
 
-const chartEl = ref<HTMLCanvasElement>(null);
+const chartEl = shallowRef<HTMLCanvasElement>(null);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
 	position: 'middle',

packages/frontend/src/pages/admin/overview.queue.chart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref } from 'vue';
+import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import { Chart } from 'chart.js';
 import number from '@/filters/number';
 import * as os from '@/os';
@@ -19,7 +19,7 @@ const props = defineProps<{
 	type: string;
 }>();
 
-const chartEl = ref<HTMLCanvasElement>(null);
+const chartEl = shallowRef<HTMLCanvasElement>(null);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 

packages/frontend/src/pages/admin/overview.queue.vue

@@ -43,10 +43,10 @@ const activeSincePrevTick = ref(0);
 const active = ref(0);
 const delayed = ref(0);
 const waiting = ref(0);
-let chartProcess = $ref<InstanceType<typeof XChart>>();
+let chartProcess = $shallowRef<InstanceType<typeof XChart>>();
-let chartActive = $ref<InstanceType<typeof XChart>>();
+let chartActive = $shallowRef<InstanceType<typeof XChart>>();
-let chartDelayed = $ref<InstanceType<typeof XChart>>();
+let chartDelayed = $shallowRef<InstanceType<typeof XChart>>();
-let chartWaiting = $ref<InstanceType<typeof XChart>>();
+let chartWaiting = $shallowRef<InstanceType<typeof XChart>>();
 
 const props = defineProps<{
 	domain: string;

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

@@ -77,12 +77,11 @@ import * as os from '@/os';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
-import 'chartjs-adapter-date-fns';
 import { defaultStore } from '@/store';
 import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
 import MkFolder from '@/components/MkFolder.vue';
 
-const rootEl = $ref<HTMLElement>();
+const rootEl = $shallowRef<HTMLElement>();
 let serverInfo: any = $ref(null);
 let topSubInstancesForPie: any = $ref(null);
 let topPubInstancesForPie: any = $ref(null);
@@ -153,7 +152,7 @@ onMounted(async () => {
 	});
 
 	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
+		sort: '+latestRequestReceivedAt',
 		limit: 25,
 	}).then(res => {
 		activeInstances = res;

packages/frontend/src/pages/admin/queue.chart.chart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref } from 'vue';
+import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import { Chart } from 'chart.js';
 import number from '@/filters/number';
 import * as os from '@/os';
@@ -19,7 +19,7 @@ const props = defineProps<{
 	type: string;
 }>();
 
-const chartEl = ref<HTMLCanvasElement>(null);
+const chartEl = shallowRef<HTMLCanvasElement>(null);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 

packages/frontend/src/pages/admin/queue.chart.vue

@@ -53,10 +53,10 @@ const active = ref(0);
 const delayed = ref(0);
 const waiting = ref(0);
 const jobs = ref([]);
-let chartProcess = $ref<InstanceType<typeof XChart>>();
+let chartProcess = $shallowRef<InstanceType<typeof XChart>>();
-let chartActive = $ref<InstanceType<typeof XChart>>();
+let chartActive = $shallowRef<InstanceType<typeof XChart>>();
-let chartDelayed = $ref<InstanceType<typeof XChart>>();
+let chartDelayed = $shallowRef<InstanceType<typeof XChart>>();
-let chartWaiting = $ref<InstanceType<typeof XChart>>();
+let chartWaiting = $shallowRef<InstanceType<typeof XChart>>();
 
 const props = defineProps<{
 	domain: string;

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

@@ -65,7 +65,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { dateString } from '@/filters/date';
 
-let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
+let paginationComponent = $shallowRef<InstanceType<typeof MkPagination>>();
 
 let sort = $ref('+createdAt');
 let state = $ref('all');

packages/frontend/src/pages/antenna-timeline.vue

@@ -34,8 +34,8 @@ const props = defineProps<{
 
 let antenna = $ref(null);
 let queue = $ref(0);
-let rootEl = $ref<HTMLElement>();
+let rootEl = $shallowRef<HTMLElement>();
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
+let tlEl = $shallowRef<InstanceType<typeof XTimeline>>();
 const keymap = $computed(() => ({
 	't': focus,
 }));

packages/frontend/src/pages/explore.users.vue

@@ -72,7 +72,7 @@ const props = defineProps<{
 }>();
 
 let origin = $ref('local');
-let tagsEl = $ref<InstanceType<typeof MkFolder>>();
+let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 

packages/frontend/src/pages/explore.vue

@@ -51,7 +51,7 @@ const props = withDefaults(defineProps<{
 });
 
 let tab = $ref(props.initialTab);
-let tagsEl = $ref<InstanceType<typeof MkFolder>>();
+let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>();
 let searchQuery = $ref(null);
 let searchOrigin = $ref('combined');