Merge branch 'feat/post_import_export' into 'develop'

feat: import firefish renote and reply from export, import self-reply from mastodon export

Closes #9947, #10661, and #10807

See merge request firefish/firefish!10689

.dockerignore

@@ -53,11 +53,9 @@ title.svg
 /scripts
 !/scripts/copy-assets.mjs
 biome.json
-COPYING
 CODE_OF_CONDUCT.md
 CONTRIBUTING.md
 Dockerfile
-LICENSE
 Procfile
 README.md
 SECURITY.md

.gitlab-ci.yml

@@ -12,6 +12,11 @@ workflow:
       when: always
     - if: $CI_MERGE_REQUEST_PROJECT_PATH == 'firefish/firefish'
       when: always
+    - if: $CI_PROJECT_PATH != 'firefish/firefish'
+      changes:
+        paths:
+          - .gitlab-ci.yml
+      when: never
     - when: never
 
 cache:
@@ -56,9 +61,11 @@ build_test:
     - if: $CI_PIPELINE_SOURCE == 'push' || $CI_PIPELINE_SOURCE == 'merge_request_event'
       changes:
         paths:
-          - packages/**/*
+          - packages/backend/*
+          - packages/backend-rs/*
+          - packages/macro-rs/*
+          - packages/megalodon/*
           - scripts/**/*
-          - locales/**/*
           - package.json
           - pnpm-lock.yaml
           - Cargo.toml
@@ -68,6 +75,33 @@ build_test:
     - pnpm run build:debug
     - pnpm run migrate
 
+client_build_test:
+  stage: test
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'push' || $CI_PIPELINE_SOURCE == 'merge_request_event'
+      changes:
+        paths:
+          - packages/client/*
+          - packages/firefish-js/*
+          - packages/sw/*
+          - scripts/**/*
+          - locales/**/*
+          - package.json
+          - pnpm-lock.yaml
+    - if: $CI_PIPELINE_SOURCE == 'push' || $CI_PIPELINE_SOURCE == 'merge_request_event'
+      changes:
+        paths:
+          - packages/backend/*
+          - packages/backend-rs/*
+          - packages/macro-rs/*
+          - packages/megalodon/*
+          - Cargo.toml
+          - Cargo.lock
+      when: never
+  script:
+    - pnpm install --frozen-lockfile
+    - pnpm --filter 'firefish-js' --filter 'client' --filter 'sw' run build:debug
+
 container_image_build:
   stage: build
   image: docker.io/debian:bookworm-slim
@@ -90,8 +124,21 @@ container_image_build:
     - apt-get install -y --no-install-recommends buildah ca-certificates fuse-overlayfs
     - buildah login --username "${CI_REGISTRY_USER}" --password "${CI_REGISTRY_PASSWORD}" "${CI_REGISTRY}"
     - export IMAGE_TAG="${CI_REGISTRY}/${CI_PROJECT_PATH}/develop:not-for-production"
+    - export IMAGE_CACHE="${CI_REGISTRY}/${CI_PROJECT_PATH}/develop/cache"
   script:
-    - buildah build --isolation chroot --device /dev/fuse:rw --security-opt seccomp=unconfined --security-opt apparmor=unconfined --cap-add all --tag "${IMAGE_TAG}" --platform linux/amd64 .
+    - |-
+      buildah build \
+        --isolation chroot \
+        --device /dev/fuse:rw \
+        --security-opt seccomp=unconfined \
+        --security-opt apparmor=unconfined \
+        --cap-add all \
+        --platform linux/amd64 \
+        --layers \
+        --cache-to "${IMAGE_CACHE}" \
+        --cache-from "${IMAGE_CACHE}" \
+        --tag "${IMAGE_TAG}" \
+        .
     - buildah inspect "${IMAGE_TAG}"
     - buildah push "${IMAGE_TAG}"
 
@@ -119,7 +166,7 @@ cargo_unit_test:
 cargo_clippy:
   stage: test
   rules:
-    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event' || $CI_COMMIT_BRANCH == 'develop'
       changes:
         paths:
           - packages/backend-rs/**/*
@@ -129,6 +176,7 @@ cargo_clippy:
     - if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == 'main'
       when: never
   script:
+    - rustup component add clippy
     - cargo clippy -- -D warnings
 
 renovate:

COPYING

@@ -26,10 +26,6 @@ RsaSignature2017 implementation by Transmute Industries Inc
 License: MIT
 https://github.com/transmute-industries/RsaSignature2017/blob/master/LICENSE
 
-Machine learning model for sensitive images by Infinite Red, Inc.
-License: MIT
-https://github.com/infinitered/nsfwjs/blob/master/LICENSE
-
 Chiptune2.js by Simon Gündling
 License: MIT
 https://github.com/deskjet/chiptune2.js#license

docs/api-change.md

@@ -2,6 +2,8 @@
 
 Breaking changes are indicated by the :warning: icon.
 
+## Unreleased
+
 - Adding `lang` to the response of `i` and the request parameter of `i/update`.
 
 ## v20240504

locales/en-US.yml

@@ -74,6 +74,34 @@ mentions: "Mentions"
 directNotes: "Direct messages"
 cw: "Content warning"
 importAndExport: "Import/Export Data"
+importAndExportWarn: "The Import/Export Data feature is an experimental feature and
+  implementation may change at any time without prior notice.\n
+  Due to differences in the exported data of different software versions, the actual
+  conditions of the import program, and the server health of the exported data link,
+  the imported data may be incomplete or the access permissions may not be set
+  correctly (for example, there is no access permission mark in the
+  Mastodon/Akkoma/Pleroma exported data, so all posts makes public after import),
+  so please be sure to check the imported data carefully integrity and configure
+  the correct access permissions for it."
+importAndExportInfo: "Since some data cannot be obtained after the original account is
+  frozen or the original server goes offline, it is strongly recommendedthat you import
+  the data before the original account is frozen (migrated, logged out) or the original
+  server goes offline.\n
+  If the original account is frozen or the original server is offline but you have the
+  original images, you can try uploading them to the network disk before importing the
+  data, which may help with data import.\n
+  Since some data is obtained from its server using your current account when importing
+  data, data that the current account does not have permission to access will be regarded
+  as broken. Please make adjustments including but not limited to access permissions,
+  Manually following accounts and other methods allow the current account to obtain
+  relevant data, so that the import program can normally obtain the data it needs to
+  obtain to help you import.\n
+  Since it is impossible to confirm whether the broken link content posted by someone other
+  than you is posted by him/her, if there is broken link content posted by others in the
+  discussion thread, the related content and subsequent replies will not be imported.\n
+  Since data import is greatly affected by network communication, it is recommended that you
+  pay attention to data recovery after a period of time. If the data is still not restored,
+  you can try importing the same backup file again and try again."
 import: "Import"
 export: "Export"
 files: "Files"
@@ -2244,3 +2272,5 @@ incorrectLanguageWarning: "It looks like your post is in {detected}, but you sel
 noteEditHistory: "Post edit history"
 slashQuote: "Chain quote"
 foldNotification: "Group similar notifications"
+mergeThreadInTimeline: "Merge multiple posts in the same thread in timelines"
+mergeRenotesInTimeline: "Group multiple boosts of the same post"

locales/zh-CN.yml

@@ -61,6 +61,16 @@ mention: "提及"
 mentions: "提及"
 directNotes: "私信"
 importAndExport: "导入 / 导出数据"
+importAndExportWarn: "导入 / 导出数据功能是一项实验性功能，实现可能会随时变化而无预先通知。\n
+  由于不同软件不同版本的导出数据、导入程序实际情况以及导出数据链接的服务器运行状况不同，导入的数据可能会不完整或未被正确设置访问权限
+  （例如 Mastodon/Akkoma/Pleroma 导出数据内无访问权限标记，因此所有帖子导入后均为公开状态），因此请务必谨慎核对导入数据的完整性，
+  并为其配置正确的访问权限。"
+importAndExportInfo: "由于原账号冻结或者原服务器下线后部分数据无法获取，因此强烈建议您在原账号冻结（迁移、注销）或原服务器下线前导入数据。\n
+  在原账号冻结或者原服务器下线但您拥有原始图片的情况下，可以尝试在导入数据之前将其上传到网盘上，可能对数据导入有所帮助。\n
+  由于导入数据时部分数据是使用您当前账号到其服务器上获取，因此当前账号无权访问的数据会视为断链。请通过包括但不限于访问权限调整、
+  手动关注账户等方式让当前帐号可以获取到相关数据，以便导入程序能够正常获取到需要获取的数据从而帮助您进行导入。\n
+  由于无法确认非您本人发表的断链内容的是否由其本人发表，因此如果讨论串内有其他人发表的断链内容，则相关内容以及后续回复不会被导入。\n
+  由于数据导入受网络通信影响较大，因此建议您一段时间之后再关注数据恢复情况。如果数据仍未恢复可以尝试再次导入同样的备份文件重试一次。"
 import: "导入"
 export: "导出"
 files: "文件"
@@ -2071,3 +2081,5 @@ noteEditHistory: "帖子编辑历史"
 media: 媒体
 slashQuote: "斜杠引用"
 foldNotification: "将通知按同类型分组"
+mergeThreadInTimeline: "将时间线内的连续回复合并成一串"
+mergeRenotesInTimeline: "合并同一个帖子的转发"

packages/backend/package.json

@@ -59,11 +59,11 @@
 		"form-data": "^4.0.0",
 		"got": "14.2.1",
 		"gunzip-maybe": "^1.4.2",
-		"happy-dom": "^14.7.1",
 		"hpagent": "1.2.0",
 		"ioredis": "5.4.1",
 		"ip-cidr": "4.0.0",
 		"is-svg": "5.0.0",
+		"jsdom": "24.0.0",
 		"json5": "2.2.3",
 		"jsonld": "8.3.2",
 		"jsrsasign": "11.1.0",
@@ -131,6 +131,7 @@
 		"@types/content-disposition": "^0.5.8",
 		"@types/escape-regexp": "0.0.3",
 		"@types/fluent-ffmpeg": "2.1.24",
+		"@types/jsdom": "21.1.6",
 		"@types/jsonld": "1.5.13",
 		"@types/jsrsasign": "10.5.13",
 		"@types/katex": "0.16.7",

packages/backend/src/mfm/to-html.ts

@@ -1,21 +1,17 @@
-import { type HTMLElement, Window } from "happy-dom";
+import { JSDOM } from "jsdom";
 import type * as mfm from "mfm-js";
 import katex from "katex";
 import { config } from "@/config.js";
 import { intersperse } from "@/prelude/array.js";
 import type { IMentionedRemoteUsers } from "@/models/entities/note.js";
 
-function toMathMl(code: string, displayMode: boolean): HTMLElement | null {
-	const { window } = new Window();
-	const document = window.document;
-
-	document.body.innerHTML = katex.renderToString(code, {
+function toMathMl(code: string, displayMode: boolean): MathMLElement | null {
+	const rendered = katex.renderToString(code, {
 		throwOnError: false,
 		output: "mathml",
 		displayMode,
 	});
-
-	return document.querySelector("math");
+	return JSDOM.fragment(rendered).querySelector("math");
 }
 
 export function toHtml(
@@ -26,7 +22,7 @@ export function toHtml(
 		return null;
 	}
 
-	const { window } = new Window();
+	const { window } = new JSDOM("");
 
 	const doc = window.document;
 

packages/backend/src/queue/index.ts

@@ -335,6 +335,7 @@ export function createImportMastoPostJob(
 	user: ThinUser,
 	post: any,
 	signatureCheck: boolean,
+	parent: Note | null = null,
 ) {
 	return dbQueue.add(
 		"importMastoPost",
@@ -342,6 +343,7 @@ export function createImportMastoPostJob(
 			user: user,
 			post: post,
 			signatureCheck: signatureCheck,
+			parent: parent,
 		},
 		{
 			removeOnComplete: true,

packages/backend/src/queue/processors/db/export-notes.ts

@@ -11,6 +11,7 @@ import type { Poll } from "@/models/entities/poll.js";
 import type { DbUserJobData } from "@/queue/types.js";
 import { createTemp } from "@/misc/create-temp.js";
 import { inspect } from "node:util";
+import { config } from "@/config.js";
 
 const logger = queueLogger.createSubLogger("export-notes");
 
@@ -131,5 +132,6 @@ async function serialize(
 		visibility: note.visibility,
 		visibleUserIds: note.visibleUserIds,
 		localOnly: note.localOnly,
+		objectUrl: `${config.url}/notes/${note.id}`,
 	};
 }

packages/backend/src/queue/processors/db/import-firefish-post.ts

@@ -1,12 +1,14 @@
 import * as Post from "@/misc/post.js";
 import create from "@/services/note/create.js";
-import { NoteFiles, Users } from "@/models/index.js";
+import Resolver from "@/remote/activitypub/resolver.js";
+import { DriveFiles, NoteFiles, Users } from "@/models/index.js";
 import type { DbUserImportMastoPostJobData } from "@/queue/types.js";
 import { queueLogger } from "../../logger.js";
 import { uploadFromUrl } from "@/services/drive/upload-from-url.js";
 import type { DriveFile } from "@/models/entities/drive-file.js";
 import type Bull from "bull";
 import { createImportCkPostJob } from "@/queue/index.js";
+import { resolveNote } from "@/remote/activitypub/models/note.js";
 import { Notes, NoteEdits } from "@/models/index.js";
 import type { Note } from "@/models/entities/note.js";
 import { genId } from "backend-rs";
@@ -23,20 +25,37 @@ export async function importCkPost(
 		return;
 	}
 	const post = job.data.post;
-	/*
-	if (post.replyId != null) {
-		done();
-		return;
+	const parent = job.data.parent;
+	const isRenote = post.renoteId !== null;
+	let reply: Note | null = null;
+	let renote: Note | null = null;
+	job.progress(20);
+	if (!isRenote && post.replyId !== null) {
+		if (
+			!parent &&
+			typeof post.objectUrl !== "undefined" &&
+			post.objectUrl !== null
+		) {
+			const resolver = new Resolver();
+			const originalNote = await resolver.resolve(post.objectUrl);
+			reply = await resolveNote(originalNote.inReplyTo);
+		} else {
+			reply = post.replyId !== null ? parent : null;
+		}
 	}
-	if (post.renoteId != null) {
-		done();
-		return;
+	// renote also need resolve original note
+	if (
+		isRenote &&
+		!parent &&
+		typeof post.objectUrl !== "undefined" &&
+		post.objectUrl !== null
+	) {
+		const resolver = new Resolver();
+		const originalNote = await resolver.resolve(post.objectUrl);
+		renote = await resolveNote(originalNote.quoteUrl);
+	} else {
+		renote = isRenote ? parent : null;
 	}
-	if (post.visibility !== "public") {
-		done();
-		return;
-	}
-	*/
 	const urls = (post.files || [])
 		.map((x: any) => x.url)
 		.filter((x: String) => x.startsWith("http"));
@@ -49,7 +68,17 @@ export async function importCkPost(
 			});
 			files.push(file);
 		} catch (e) {
-			logger.info(`Skipped adding file to drive: ${url}`);
+			// try to get the same md5 file from user drive
+			const md5 = post.files.map((x: any) => x.url).find(url).md5;
+			const much = await DriveFiles.findOneBy({
+				md5: md5,
+				userId: user.id,
+			});
+			if (much) {
+				files.push(much);
+			} else {
+				logger.info(`Skipped adding file to drive: ${url}`);
+			}
 		}
 	}
 	const { text, cw, localOnly, createdAt, visibility } = Post.parse(post);
@@ -88,8 +117,8 @@ export async function importCkPost(
 			files: files.length === 0 ? undefined : files,
 			poll: undefined,
 			text: text || undefined,
-			reply: post.replyId ? job.data.parent : null,
-			renote: post.renoteId ? job.data.parent : null,
+			reply,
+			renote,
 			cw: cw,
 			localOnly,
 			visibility: visibility,

packages/backend/src/queue/processors/db/import-masto-post.ts

@@ -10,6 +10,7 @@ import type { DriveFile } from "@/models/entities/drive-file.js";
 import { Notes, NoteEdits } from "@/models/index.js";
 import type { Note } from "@/models/entities/note.js";
 import { genId } from "backend-rs";
+import { createImportMastoPostJob } from "@/queue/index.js";
 
 const logger = queueLogger.createSubLogger("import-masto-post");
 
@@ -23,12 +24,17 @@ export async function importMastoPost(
 		return;
 	}
 	const post = job.data.post;
+	const parent = job.data.parent;
 	const isRenote = post.type === "Announce";
 	let reply: Note | null = null;
 	let renote: Note | null = null;
 	job.progress(20);
 	if (!isRenote && post.object.inReplyTo != null) {
-		reply = await resolveNote(post.object.inReplyTo);
+		if (parent == null) {
+			reply = await resolveNote(post.object.inReplyTo);
+		} else {
+			reply = parent;
+		}
 	}
 	// renote also need resolve original note
 	if (isRenote) {
@@ -135,4 +141,14 @@ export async function importMastoPost(
 	done();
 
 	logger.info("Imported");
+	if (post.childNotes) {
+		for (const child of post.childNotes) {
+			createImportMastoPostJob(
+				job.data.user,
+				child,
+				job.data.signatureCheck,
+				note,
+			);
+		}
+	}
 }

packages/backend/src/queue/processors/db/import-posts.ts

@@ -40,7 +40,10 @@ export async function importPosts(
 				file.url,
 				job.data.user.id,
 			);
-			for (const post of outbox.orderedItems) {
+			logger.info("Parsing mastodon style posts");
+			const arr = recreateChainForMastodon(outbox.orderedItems);
+			logger.debug(JSON.stringify(arr, null, 2));
+			for (const post of arr) {
 				createImportMastoPostJob(job.data.user, post, job.data.signatureCheck);
 			}
 		} catch (e) {
@@ -60,12 +63,15 @@ export async function importPosts(
 		if (Array.isArray(parsed)) {
 			logger.info("Parsing *key posts");
 			const arr = recreateChain(parsed);
+			logger.debug(JSON.stringify(arr, null, 2));
 			for (const post of arr) {
 				createImportCkPostJob(job.data.user, post, job.data.signatureCheck);
 			}
 		} else if (parsed instanceof Object) {
 			logger.info("Parsing Mastodon posts");
-			for (const post of parsed.orderedItems) {
+			const arr = recreateChainForMastodon(parsed.orderedItems);
+			logger.debug(JSON.stringify(arr, null, 2));
+			for (const post of arr) {
 				createImportMastoPostJob(job.data.user, post, job.data.signatureCheck);
 			}
 		}
@@ -96,9 +102,56 @@ function recreateChain(arr: any[]): any {
 		let parent = null;
 		if (note.replyId != null) {
 			parent = lookup[`${note.replyId}`];
+			// Accept URL, let import process to resolveNote
+			if (
+				!parent &&
+				typeof note.objectUrl !== "undefined" &&
+				note.objectUrl.startsWith("http")
+			) {
+				notesTree.push(note);
+			}
 		}
 		if (note.renoteId != null) {
 			parent = lookup[`${note.renoteId}`];
+			// Accept URL, let import process to resolveNote
+			if (
+				!parent &&
+				typeof note.objectUrl !== "undefined" &&
+				note.objectUrl.startsWith("http")
+			) {
+				notesTree.push(note);
+			}
+		}
+
+		if (parent) {
+			parent.childNotes.push(note);
+		}
+	}
+	return notesTree;
+}
+
+function recreateChainForMastodon(arr: any[]): any {
+	type NotesMap = {
+		[id: string]: any;
+	};
+	const notesTree: any[] = [];
+	const lookup: NotesMap = {};
+	for (const note of arr) {
+		lookup[`${note.id}`] = note;
+		note.childNotes = [];
+		if (note.object.inReplyTo == null) {
+			notesTree.push(note);
+		}
+	}
+	for (const note of arr) {
+		let parent = null;
+		if (note.object.inReplyTo != null) {
+			const inReplyToIdForLookup = `${note.object.inReplyTo}/activity`;
+			parent = lookup[`${inReplyToIdForLookup}`];
+			// Accept URL, let import process to resolveNote
+			if (!parent && note.object.inReplyTo.startsWith("http")) {
+				notesTree.push(note);
+			}
 		}
 
 		if (parent) {

packages/backend/src/services/fetch-instance-metadata.ts

@@ -1,8 +1,8 @@
 import { URL } from "node:url";
-import { Window } from "happy-dom";
+import { type DOMWindow, JSDOM } from "jsdom";
 import fetch from "node-fetch";
 import tinycolor from "tinycolor2";
-import { getJson, getAgentByUrl } from "@/misc/fetch.js";
+import { getJson, getHtml, getAgentByUrl } from "@/misc/fetch.js";
 import {
 	type Instance,
 	MAX_LENGTH_INSTANCE,
@@ -112,15 +112,13 @@ export async function fetchInstanceMetadata(
 	}
 }
 
-async function fetchDom(instance: Instance): Promise<Window["document"]> {
+async function fetchDom(instance: Instance): Promise<DOMWindow["document"]> {
 	logger.info(`Fetching HTML of ${instance.host} ...`);
 
-	const window = new Window({
-		url: `https://${instance.host}`,
-	});
-	const doc = window.document;
+	const html = await getHtml(`https://${instance.host}`);
+	const { window } = new JSDOM(html);
 
-	return doc;
+	return window.document;
 }
 
 async function fetchManifest(
@@ -137,7 +135,7 @@ async function fetchManifest(
 
 async function fetchFaviconUrl(
 	instance: Instance,
-	doc: Window["document"] | null,
+	doc: DOMWindow["document"] | null,
 ): Promise<string | null> {
 	const url = `https://${instance.host}`;
 
@@ -169,7 +167,7 @@ async function fetchFaviconUrl(
 
 async function fetchIconUrl(
 	instance: Instance,
-	doc: Window["document"] | null,
+	doc: DOMWindow["document"] | null,
 	manifest: Record<string, any> | null,
 ): Promise<string | null> {
 	if (manifest?.icons && manifest.icons.length > 0 && manifest.icons[0].src) {
@@ -219,9 +217,9 @@ async function getThemeColor(
 
 async function getSiteName(
 	info: Nodeinfo | null,
-	doc: Window["document"] | null,
+	doc: DOMWindow["document"] | null,
 	manifest: Record<string, any> | null,
-): Promise<string | undefined | null> {
+): Promise<string | null> {
 	if (info?.metadata) {
 		if (info.metadata.nodeName || info.metadata.name) {
 			return info.metadata.nodeName || info.metadata.name;
@@ -247,7 +245,7 @@ async function getSiteName(
 
 async function getDescription(
 	info: Nodeinfo | null,
-	doc: Window["document"] | null,
+	doc: DOMWindow["document"] | null,
 	manifest: Record<string, any> | null,
 ): Promise<string | null> {
 	if (info?.metadata) {

packages/backend/src/services/fetch-rel-me.ts

@@ -1,12 +1,11 @@
-import { Window } from "happy-dom";
-import type { HTMLAnchorElement, HTMLLinkElement } from "happy-dom";
+import { JSDOM } from "jsdom";
 import { config } from "@/config.js";
+import { getHtml } from "@/misc/fetch.js";
 
 async function getRelMeLinks(url: string): Promise<string[]> {
 	try {
-		const dom = new Window({
-			url: url,
-		});
+		const html = await getHtml(url);
+		const dom = new JSDOM(html);
 		const allLinks = [...dom.window.document.querySelectorAll("a, link")];
 		const relMeLinks = allLinks
 			.filter((a) => {

packages/client/src/components/MkMediaList.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import type { entities } from "firefish-js";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import PhotoSwipe from "photoswipe";
@@ -207,9 +207,9 @@ const isModule = (file: entities.DriveFile): boolean => {
 	);
 };
 
-const previewableCount = props.mediaList.filter((media) =>
-	previewable(media),
-).length;
+const previewableCount = computed(
+	() => props.mediaList.filter((media) => previewable(media)).length,
+);
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkNote.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="!muted.muted"
-		v-show="!isDeleted"
+		v-show="!isDeleted && renotes?.length !== 0"
 		:id="appearNote.historyId || appearNote.id"
 		ref="el"
 		v-hotkey="keymap"
@@ -10,13 +10,20 @@
 		:aria-label="accessibleLabel"
 		class="tkcbzcuz note-container"
 		:tabindex="!isDeleted ? '-1' : undefined"
-		:class="{ renote: isRenote }"
+		:class="{ renote: isRenote || (renotesSliced && renotesSliced.length > 0) }"
 	>
 		<MkNoteSub
-			v-if="appearNote.reply && !detailedView && !collapsedReply"
+			v-if="appearNote.reply && !detailedView && !collapsedReply && !parents"
 			:note="appearNote.reply"
 			class="reply-to"
 		/>
+		<MkNoteSub
+			v-else-if="!detailedView && !collapsedReply && parents"
+			v-for="n of parents"
+			:key="n.id"
+			:note="n"
+			class="reply-to"
+		/>
 		<div
 			v-if="!detailedView"
 			class="note-context"
@@ -41,35 +48,6 @@
 			<div v-if="pinned" class="info">
 				<i :class="icon('ph-push-pin')"></i>{{ i18n.ts.pinnedNote }}
 			</div>
-			<div v-if="isRenote" class="renote">
-				<i :class="icon('ph-rocket-launch')"></i>
-				<I18n :src="i18n.ts.renotedBy" tag="span">
-					<template #user>
-						<MkA
-							v-user-preview="note.userId"
-							class="name"
-							:to="userPage(note.user)"
-							@click.stop
-						>
-							<MkUserName :user="note.user" />
-						</MkA>
-					</template>
-				</I18n>
-				<div class="info">
-					<button
-						ref="renoteTime"
-						class="_button time"
-						@click.stop="showRenoteMenu()"
-					>
-						<i
-							v-if="isMyRenote"
-							:class="icon('ph-dots-three-outline dropdownIcon')"
-						></i>
-						<MkTime :time="note.createdAt" />
-					</button>
-					<MkVisibility :note="note" />
-				</div>
-			</div>
 			<div v-if="collapsedReply && appearNote.reply" class="info">
 				<MkAvatar class="avatar" :user="appearNote.reply.user" />
 				<MkUserName
@@ -85,6 +63,71 @@
 					:custom-emojis="note.emojis"
 				/>
 			</div>
+			<div v-if="isRenote || (renotesSliced && renotesSliced.length > 0)" class="renote">
+				<i :class="icon('ph-rocket-launch')"></i>
+				<I18n
+					v-if="renotesSliced == null"
+					:src="i18n.ts.renotedBy"
+					tag="span"
+				>
+					<template #user>
+						<MkAvatar class="avatar" :user="note.user" />
+						<MkA
+							v-user-preview="note.userId"
+							class="name"
+							:to="userPage(note.user)"
+							@click.stop
+						>
+							<MkUserName :user="note.user" />
+						</MkA>
+					</template>
+				</I18n>
+				<I18n
+					v-else
+					:src="i18n.ts.renotedBy"
+					tag="span"
+				>
+					<template #user>
+						<template
+							v-for="(renote, index) in renotesSliced"
+						>
+							<MkAvatar
+								class="avatar"
+								:user="renote.user"
+							/>
+							<MkA
+								v-user-preview="renote.userId"
+								class="name"
+								:to="userPage(renote.user)"
+								@click.stop
+							>
+								<MkUserName :user="renote.user" />
+							</MkA>
+							{{
+								index !== renotesSliced.length - 1
+									? ", "
+									: renotesSliced.length < renotes!.length
+										? "..."
+										: ""
+							}}
+						</template>
+					</template>
+				</I18n>
+				<div class="info">
+					<button
+						ref="renoteTime"
+						class="_button time"
+						@click.stop="showRenoteMenu()"
+					>
+						<i
+							v-if="isMyNote"
+							:class="icon('ph-dots-three-outline dropdownIcon')"
+						></i>
+						<MkTime :time="note.createdAt" />
+					</button>
+					<MkVisibility :note="note" />
+				</div>
+			</div>
 		</div>
 		<article
 			class="article"
@@ -279,7 +322,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref } from "vue";
+import { computed, inject, onMounted, ref, watch } from "vue";
 import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkSubNoteContent from "./MkSubNoteContent.vue";
@@ -310,17 +353,13 @@ import { notePage } from "@/filters/note";
 import { deepClone } from "@/scripts/clone";
 import { getNoteSummary } from "@/scripts/get-note-summary";
 import icon from "@/scripts/icon";
-import type { NoteTranslation } from "@/types/note";
-
-const router = useRouter();
-
-type NoteType = entities.Note & {
-	_featuredId_?: string;
-	_prId_?: string;
-};
+import type { NoteTranslation, NoteType } from "@/types/note";
+import { isRenote as _isRenote, isDeleted as _isDeleted } from "@/scripts/note";
 
 const props = defineProps<{
 	note: NoteType;
+	parents?: NoteType[];
+	renotes?: entities.Note[];
 	pinned?: boolean;
 	detailedView?: boolean;
 	collapsedReply?: boolean;
@@ -329,37 +368,20 @@ const props = defineProps<{
 	isLongJudger?: (note: entities.Note) => boolean;
 }>();
 
+//#region Constants
+const router = useRouter();
 const inChannel = inject("inChannel", null);
-
-const note = ref(deepClone(props.note));
-
-const softMuteReasonI18nSrc = (what?: string) => {
-	if (what === "note") return i18n.ts.userSaysSomethingReason;
-	if (what === "reply") return i18n.ts.userSaysSomethingReasonReply;
-	if (what === "renote") return i18n.ts.userSaysSomethingReasonRenote;
-	if (what === "quote") return i18n.ts.userSaysSomethingReasonQuote;
-
-	// I don't think here is reachable, but just in case
-	return i18n.ts.userSaysSomething;
+const keymap = {
+	r: () => reply(true),
+	"e|a|plus": () => react(true),
+	q: () => renoteButton.value!.renote(true),
+	"up|k": focusBefore,
+	"down|j": focusAfter,
+	esc: blur,
+	"m|o": () => menu(true),
+	// FIXME: What's this?
+	// s: () => showContent.value !== showContent.value,
 };
-
-// plugin
-if (noteViewInterruptors.length > 0) {
-	onMounted(async () => {
-		let result = deepClone(note.value);
-		for (const interruptor of noteViewInterruptors) {
-			result = await interruptor.handler(result);
-		}
-		note.value = result;
-	});
-}
-
-const isRenote =
-	note.value.renote != null &&
-	note.value.text == null &&
-	note.value.fileIds.length === 0 &&
-	note.value.poll == null;
-
 const el = ref<HTMLElement | null>(null);
 const footerEl = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
@@ -367,42 +389,179 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton> | null>(null);
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement | null>(null);
-const appearNote = computed(() =>
-	isRenote ? (note.value.renote as NoteType) : note.value,
-);
-const isMyRenote = isSignedIn(me) && me.id === note.value.userId;
-// const showContent = ref(false);
-const isDeleted = ref(false);
-const muted = ref(
-	getWordSoftMute(
-		note.value,
-		me?.id,
-		defaultStore.state.mutedWords,
-		defaultStore.state.mutedLangs,
-	),
-);
-const translation = ref<NoteTranslation | null>(null);
-const translating = ref(false);
-const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
-const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
+const enableEmojiReactions = defaultStore.reactiveState.enableEmojiReactions;
+const expandOnNoteClick = defaultStore.reactiveState.expandOnNoteClick;
 const lang = localStorage.getItem("lang");
 const translateLang = localStorage.getItem("translateLang");
 const targetLang = (translateLang || lang || navigator.language)?.slice(0, 2);
+const currentClipPage = inject<Ref<entities.Clip> | null>(
+	"currentClipPage",
+	null,
+);
+//#endregion
 
-const isForeignLanguage: boolean =
-	defaultStore.state.detectPostLanguage &&
-	appearNote.value.text != null &&
-	(() => {
-		const postLang = detectLanguage(appearNote.value.text);
-		return postLang !== "" && postLang !== targetLang;
-	})();
+//#region Variables bound to Notes
+let capture: ReturnType<typeof useNoteCapture> | undefined;
+const note = ref(deepClone(props.note));
+const postIsExpanded = ref(false);
+const translation = ref<NoteTranslation | null>(null);
+const translating = ref(false);
+const isDeleted = ref(false);
+const renotes = ref(props.renotes?.filter((rn) => !_isDeleted(rn.id)));
+//#endregion
 
+//#region computed
+
+const renotesSliced = computed(() => renotes.value?.slice(0, 5));
+
+const isRenote = computed(() => _isRenote(note.value));
+const appearNote = computed(() =>
+	isRenote.value ? (note.value.renote as NoteType) : note.value,
+);
+const isMyNote = computed(
+	() => isSignedIn(me) && me.id === note.value.userId && props.renotes == null,
+);
+const muted = computed(() =>
+	getWordSoftMute(
+		note.value,
+		me?.id,
+		defaultStore.reactiveState.mutedWords.value,
+		defaultStore.reactiveState.mutedLangs.value,
+	),
+);
+const isForeignLanguage = computed(
+	() =>
+		defaultStore.state.detectPostLanguage &&
+		appearNote.value.text != null &&
+		(() => {
+			const postLang = detectLanguage(appearNote.value.text);
+			return postLang !== "" && postLang !== targetLang;
+		})(),
+);
 const reactionCount = computed(() =>
 	Object.values(appearNote.value.reactions).reduce(
 		(partialSum, val) => partialSum + val,
 		0,
 	),
 );
+const accessibleLabel = computed(() => {
+	let label = `${appearNote.value.user.username}; `;
+	if (appearNote.value.renote) {
+		label += `${i18n.ts.renoted} ${appearNote.value.renote.user.username}; `;
+		if (appearNote.value.renote.cw) {
+			label += `${i18n.ts.cw}: ${appearNote.value.renote.cw}; `;
+			if (postIsExpanded.value) {
+				label += `${appearNote.value.renote.text}; `;
+			}
+		} else {
+			label += `${appearNote.value.renote.text}; `;
+		}
+	} else {
+		if (appearNote.value.cw) {
+			label += `${i18n.ts.cw}: ${appearNote.value.cw}; `;
+			if (postIsExpanded.value) {
+				label += `${appearNote.value.text}; `;
+			}
+		} else {
+			label += `${appearNote.value.text}; `;
+		}
+	}
+	const date = new Date(appearNote.value.createdAt);
+	label += `${date.toLocaleTimeString()}`;
+	return label;
+});
+//#endregion
+
+async function pluginInit(newNote: NoteType) {
+	// plugin
+	if (noteViewInterruptors.length > 0) {
+		let result = deepClone(newNote);
+		for (const interruptor of noteViewInterruptors) {
+			result = await interruptor.handler(result);
+		}
+		note.value = result;
+	}
+}
+
+function recalculateRenotes() {
+	renotes.value = props.renotes?.filter((rn) => !_isDeleted(rn.id));
+}
+
+async function init(newNote: NoteType, first = false) {
+	if (!first) {
+		// plugin
+		if (noteViewInterruptors.length > 0) {
+			await pluginInit(newNote);
+		} else {
+			note.value = deepClone(newNote);
+		}
+	}
+
+	translation.value = null;
+	translating.value = false;
+	postIsExpanded.value = false;
+	isDeleted.value = _isDeleted(note.value.id);
+	if (appearNote.value.historyId == null) {
+		capture?.close();
+		capture = useNoteCapture({
+			rootEl: el,
+			note: appearNote,
+			isDeletedRef: isDeleted,
+		});
+		if (isRenote.value === true) {
+			useNoteCapture({
+				rootEl: el,
+				note,
+				isDeletedRef: isDeleted,
+			});
+		}
+		if (props.renotes) {
+			const renoteDeletedTrigger = ref(false);
+			for (const renote of props.renotes) {
+				useNoteCapture({
+					rootEl: el,
+					note: ref(renote),
+					isDeletedRef: renoteDeletedTrigger,
+				});
+			}
+			watch(renoteDeletedTrigger, recalculateRenotes);
+		}
+	}
+}
+
+init(props.note, true);
+
+onMounted(() => {
+	pluginInit(note.value);
+});
+
+watch(isDeleted, () => {
+	if (isDeleted.value === true) {
+		if (props.parents && props.parents.length > 0) {
+			let noteTakePlace: NoteType | null = null;
+			while (noteTakePlace == null || _isDeleted(noteTakePlace.id)) {
+				if (props.parents.length === 0) {
+					return;
+				}
+				noteTakePlace = props.parents[props.parents.length - 1];
+				props.parents.pop();
+			}
+			noteTakePlace.repliesCount -= 1;
+			init(noteTakePlace);
+			isDeleted.value = false;
+		}
+	}
+});
+
+watch(
+	() => props.note.id,
+	(o, n) => {
+		if (o !== n && _isDeleted(note.value.id) !== true) {
+			init(props.note);
+		}
+	},
+);
+watch(() => props.renotes?.length, recalculateRenotes);
 
 async function translate_(noteId: string, targetLang: string) {
 	return await os.api("notes/translate", {
@@ -431,24 +590,14 @@ async function translate() {
 	translating.value = false;
 }
 
-const keymap = {
-	r: () => reply(true),
-	"e|a|plus": () => react(true),
-	q: () => renoteButton.value!.renote(true),
-	"up|k": focusBefore,
-	"down|j": focusAfter,
-	esc: blur,
-	"m|o": () => menu(true),
-	// FIXME: What's this?
-	// s: () => showContent.value !== showContent.value,
-};
+function softMuteReasonI18nSrc(what?: string) {
+	if (what === "note") return i18n.ts.userSaysSomethingReason;
+	if (what === "reply") return i18n.ts.userSaysSomethingReasonReply;
+	if (what === "renote") return i18n.ts.userSaysSomethingReasonRenote;
+	if (what === "quote") return i18n.ts.userSaysSomethingReasonQuote;
 
-if (appearNote.value.historyId == null) {
-	useNoteCapture({
-		rootEl: el,
-		note: appearNote,
-		isDeletedRef: isDeleted,
-	});
+	// I don't think here is reachable, but just in case
+	return i18n.ts.userSaysSomething;
 }
 
 function reply(_viaKeyboard = false): void {
@@ -489,11 +638,6 @@ function undoReact(note: NoteType): void {
 	});
 }
 
-const currentClipPage = inject<Ref<entities.Clip> | null>(
-	"currentClipPage",
-	null,
-);
-
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement): boolean => {
 		if (el.tagName === "A") return true;
@@ -582,7 +726,7 @@ function menu(viaKeyboard = false): void {
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
-	if (!isMyRenote) return;
+	if (!isMyNote.value) return;
 	os.popupMenu(
 		[
 			{
@@ -643,39 +787,10 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
-const postIsExpanded = ref(false);
-
 function setPostExpanded(val: boolean) {
 	postIsExpanded.value = val;
 }
 
-const accessibleLabel = computed(() => {
-	let label = `${appearNote.value.user.username}; `;
-	if (appearNote.value.renote) {
-		label += `${i18n.ts.renoted} ${appearNote.value.renote.user.username}; `;
-		if (appearNote.value.renote.cw) {
-			label += `${i18n.ts.cw}: ${appearNote.value.renote.cw}; `;
-			if (postIsExpanded.value) {
-				label += `${appearNote.value.renote.text}; `;
-			}
-		} else {
-			label += `${appearNote.value.renote.text}; `;
-		}
-	} else {
-		if (appearNote.value.cw) {
-			label += `${i18n.ts.cw}: ${appearNote.value.cw}; `;
-			if (postIsExpanded.value) {
-				label += `${appearNote.value.text}; `;
-			}
-		} else {
-			label += `${appearNote.value.text}; `;
-		}
-	}
-	const date = new Date(appearNote.value.createdAt);
-	label += `${date.toLocaleTimeString()}`;
-	return label;
-});
-
 defineExpose({
 	focus,
 	blur,
@@ -749,6 +864,7 @@ defineExpose({
 		position: relative;
 		padding: 0 32px 0 32px;
 		display: flex;
+		flex-wrap: wrap;
 		z-index: 1;
 		&:first-child {
 			margin-top: 20px;
@@ -801,6 +917,16 @@ defineExpose({
 				margin-right: 4px;
 			}
 
+			.avatar {
+				width: 1.2em;
+				height: 1.2em;
+				border-radius: 2em;
+				overflow: hidden;
+				margin-right: 0.4em;
+				background: var(--panelHighlight);
+				transform: translateY(-4px);
+			}
+
 			> span {
 				overflow: hidden;
 				flex-shrink: 1;

packages/client/src/components/MkNoteHeader.vue

@@ -48,8 +48,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-
 import type { entities } from "firefish-js";
 import { defaultStore } from "@/store";
 import MkVisibility from "@/components/MkVisibility.vue";
@@ -66,18 +64,16 @@ const props = defineProps<{
 	canOpenServerInfo?: boolean;
 }>();
 
-const note = ref(props.note);
-
 const showTicker =
 	defaultStore.state.instanceTicker === "always" ||
-	(defaultStore.state.instanceTicker === "remote" && note.value.user.instance);
+	(defaultStore.state.instanceTicker === "remote" && props.note.user.instance);
 
 function openServerInfo() {
 	if (!props.canOpenServerInfo || !defaultStore.state.openServerInfo) return;
 	const instanceInfoUrl =
-		note.value.user.host == null
+		props.note.user.host == null
 			? "/about"
-			: `/instance-info/${note.value.user.host}`;
+			: `/instance-info/${props.note.user.host}`;
 	pageWindow(instanceInfoUrl);
 }
 </script>

packages/client/src/components/MkNoteSimple.vue

@@ -1,5 +1,10 @@
 <template>
-	<div v-size="{ min: [350, 500] }" class="yohlumlk">
+	<div
+		v-show="!deleted"
+		v-size="{ min: [350, 500] }"
+		class="yohlumlk"
+		ref="el"
+	>
 		<MkAvatar class="avatar" :user="note.user" />
 		<div class="main">
 			<XNoteHeader class="header" :note="note" :mini="true" />
@@ -14,11 +19,40 @@
 import type { entities } from "firefish-js";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
 import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import { computed, ref, watch } from "vue";
+import { deepClone } from "@/scripts/clone";
+import { useNoteCapture } from "@/scripts/use-note-capture";
+import { isDeleted } from "@/scripts/note";
 
-defineProps<{
+const props = defineProps<{
 	note: entities.Note;
 	pinned?: boolean;
 }>();
+
+const rootEl = ref<HTMLElement | null>(null);
+const note = ref(deepClone(props.note));
+const deleted = computed(() => isDeleted(note.value.id));
+let capture = useNoteCapture({
+	note,
+	rootEl,
+});
+
+function reload() {
+	note.value = deepClone(props.note);
+	capture.close();
+	capture = useNoteCapture({
+		note,
+		rootEl,
+	});
+}
+
+watch(
+	() => props.note.id,
+	(o, n) => {
+		if (o === n) return;
+		reload();
+	},
+);
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkNotes.vue

@@ -3,6 +3,7 @@
 		ref="pagingComponent"
 		:pagination="pagination"
 		:disable-auto-load="disableAutoLoad"
+		:folder
 	>
 		<template #empty>
 			<div class="_fullinfo">
@@ -15,7 +16,7 @@
 			</div>
 		</template>
 
-		<template #default="{ items: notes }">
+		<template #default="{ foldedItems: notes }">
 			<div ref="tlEl" class="giivymft" :class="{ noGap }">
 				<XList
 					ref="notes"
@@ -28,6 +29,21 @@
 					class="notes"
 				>
 					<XNote
+						v-if="'folded' in note && note.folded === 'thread'"
+						:key="note.id"
+						class="qtqtichx"
+						:note="note.note"
+						:parents="note.parents"
+					/>
+					<XNote
+						v-else-if="'folded' in note && note.folded === 'renote'"
+						:key="note.key"
+						class="qtqtichx"
+						:note="note.note"
+						:renotes="note.renotesArr"
+					/>
+					<XNote
+						v-else
 						:key="note._featuredId_ || note._prId_ || note.id"
 						class="qtqtichx"
 						:note="note"
@@ -51,14 +67,21 @@ import XList from "@/components/MkDateSeparatedList.vue";
 import MkPagination from "@/components/MkPagination.vue";
 import { i18n } from "@/i18n";
 import { scroll } from "@/scripts/scroll";
+import type { NoteFolded, NoteThread, NoteType } from "@/types/note";
 
 const tlEl = ref<HTMLElement>();
 
-defineProps<{
-	pagination: PagingOf<entities.Note>;
-	noGap?: boolean;
-	disableAutoLoad?: boolean;
-}>();
+withDefaults(
+	defineProps<{
+		pagination: PagingOf<entities.Note>;
+		noGap?: boolean;
+		disableAutoLoad?: boolean;
+		folder?: (ns: entities.Note[]) => (NoteType | NoteThread | NoteFolded)[];
+	}>(),
+	{
+		folder: (ns: entities.Note[]) => ns,
+	},
+);
 
 const pagingComponent = ref<MkPaginationType<
 	PagingKeyOf<entities.Note>

packages/client/src/components/MkNotifications.vue

@@ -79,29 +79,35 @@ const stream = useStream();
 
 const pagingComponent = ref<MkPaginationType<"i/notifications"> | null>(null);
 
-const shouldFold = defaultStore.state.foldNotification;
+const shouldFold = defaultStore.reactiveState.foldNotification;
+
+const convertNotification = computed(() =>
+	shouldFold.value ? foldNotifications : (ns: entities.Notification[]) => ns,
+);
 
 const FETCH_LIMIT = 90;
 
-const pagination = Object.assign(
-	{
-		endpoint: "i/notifications" as const,
-		params: computed(() => ({
-			includeTypes: props.includeTypes ?? undefined,
-			excludeTypes: props.includeTypes
-				? undefined
-				: me?.mutingNotificationTypes,
-			unreadOnly: props.unreadOnly,
-		})),
-	},
-	shouldFold
-		? {
-				limit: 50,
-				secondFetchLimit: FETCH_LIMIT,
-			}
-		: {
-				limit: 30,
-			},
+const pagination = computed(() =>
+	Object.assign(
+		{
+			endpoint: "i/notifications" as const,
+			params: computed(() => ({
+				includeTypes: props.includeTypes ?? undefined,
+				excludeTypes: props.includeTypes
+					? undefined
+					: me?.mutingNotificationTypes,
+				unreadOnly: props.unreadOnly,
+			})),
+		},
+		shouldFold.value
+			? {
+					limit: 50,
+					secondFetchLimit: FETCH_LIMIT,
+				}
+			: {
+					limit: 30,
+				},
+	),
 );
 
 function isNoteNotification(
@@ -138,14 +144,6 @@ const onNotification = (notification: entities.Notification) => {
 
 let connection: StreamTypes.ChannelOf<"main"> | undefined;
 
-function convertNotification(ns: entities.Notification[]) {
-	if (shouldFold) {
-		return foldNotifications(ns);
-	} else {
-		return ns;
-	}
-}
-
 onMounted(() => {
 	connection = stream.useChannel("main");
 	connection.on("notification", onNotification);

packages/client/src/components/MkPagination.vue

@@ -365,9 +365,9 @@ async function fetch(firstFetching?: boolean) {
 						}
 
 						// biome-ignore lint/style/noParameterAssign: assign it intentially
-						res = res.filter((item) => {
-							if (idMap.has(item)) return false;
-							idMap.set(item, true);
+						res = res.filter((it) => {
+							if (idMap.has(it.id)) return false;
+							idMap.set(it.id, true);
 							return true;
 						});
 					}
@@ -435,8 +435,20 @@ const prepend = (...item: Item[]): void => {
 	}
 };
 
-const append = (...items: Item[]): void => {
-	appended.value.push(...items);
+const append = (...it: Item[]): void => {
+	// If there are too many appended, merge them into arrItems
+	if (
+		appended.value.length >
+		(props.pagination.secondFetchLimit || SECOND_FETCH_LIMIT_DEFAULT)
+	) {
+		for (const item of appended.value) {
+			idMap.set(item.id, true);
+		}
+		arrItems.value.push(appended.value);
+		appended.value = [];
+		// We don't need to calculate here because it won't cause any changes in items
+	}
+	appended.value.push(...it);
 	calculateItems();
 };
 
@@ -486,6 +498,8 @@ if (props.pagination.params && isRef<Param>(props.pagination.params)) {
 	watch(props.pagination.params, reload, { deep: true });
 }
 
+watch(() => props.folder, calculateItems);
+
 watch(
 	queue,
 	(a, b) => {

packages/client/src/components/MkSubNoteContent.vue

@@ -178,7 +178,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { computed, ref, watch } from "vue";
 import type { entities } from "firefish-js";
 import * as mfm from "mfm-js";
 import * as os from "@/os";
@@ -226,24 +226,35 @@ const emit = defineEmits<{
 const cwButton = ref<HTMLElement>();
 const showMoreButton = ref<HTMLElement>();
 
-const isLong =
-	!props.detailedView &&
-	props.note.cw == null &&
-	props.isLongJudger(props.note);
-const collapsed = ref(props.note.cw == null && isLong);
-const urls = props.note.text
-	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
-	: null;
-
-const showContent = ref(false);
-
-const mfms = props.note.text
-	? extractMfmWithAnimation(mfm.parse(props.note.text))
-	: null;
-
-const hasMfm = ref(mfms && mfms.length > 0);
+const isLong = computed(
+	() =>
+		!props.detailedView &&
+		props.note.cw == null &&
+		props.isLongJudger(props.note),
+);
+const urls = computed(() =>
+	props.note.text
+		? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
+		: null,
+);
+const mfms = computed(() =>
+	props.note.text ? extractMfmWithAnimation(mfm.parse(props.note.text)) : null,
+);
+const hasMfm = computed(() => mfms.value && mfms.value.length > 0);
 
 const disableMfm = ref(defaultStore.state.animatedMfm);
+const showContent = ref(false);
+const collapsed = ref(props.note.cw == null && isLong.value);
+
+watch(
+	() => props.note.id,
+	(o, n) => {
+		if (o !== n) return;
+		disableMfm.value = defaultStore.state.animatedMfm;
+		showContent.value = false;
+		collapsed.value = props.note.cw == null && isLong.value;
+	},
+);
 
 async function toggleMfm() {
 	if (disableMfm.value) {

packages/client/src/components/MkTimeline.vue

@@ -30,6 +30,7 @@
 			:pagination="pagination"
 			@queue="(x) => (queue = x)"
 			@status="pullToRefreshComponent?.setDisabled($event)"
+			:folder
 		/>
 	</MkPullToRefresh>
 	<XNotes
@@ -39,6 +40,7 @@
 		:pagination="pagination"
 		@queue="(x) => (queue = x)"
 		@status="pullToRefreshComponent?.setDisabled($event)"
+		:folder
 	/>
 </template>
 
@@ -54,6 +56,8 @@ import { isSignedIn, me } from "@/me";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import icon from "@/scripts/icon";
+import { foldNotes } from "@/scripts/fold";
+import type { NoteType } from "@/types/note";
 
 export type TimelineSource =
 	| "antenna"
@@ -85,6 +89,12 @@ const emit = defineEmits<{
 const tlComponent = ref<InstanceType<typeof XNotes>>();
 const pullToRefreshComponent = ref<InstanceType<typeof MkPullToRefresh>>();
 
+const folder = computed(() => {
+	const mergeThread = defaultStore.reactiveState.mergeThreadInTimeline.value;
+	const mergeRenotes = defaultStore.reactiveState.mergeRenotesInTimeline.value;
+	return (ns: NoteType[]) => foldNotes(ns, mergeThread, mergeRenotes);
+});
+
 let endpoint: TypeUtils.EndpointsOf<entities.Note[]>; // keyof Endpoints
 let query: {
 	antennaId?: string | undefined;

packages/client/src/components/global/MkTime.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { i18n } from "@/i18n";
 import { dateTimeFormat } from "@/scripts/intl-const";
 
@@ -25,7 +25,7 @@ const props = withDefaults(
 	},
 );
 
-const _time =
+const _time = computed(() =>
 	props.time == null
 		? Number.NaN
 		: typeof props.time === "number"
@@ -33,16 +33,19 @@ const _time =
 			: (props.time instanceof Date
 					? props.time
 					: new Date(props.time)
-				).getTime();
-const invalid = Number.isNaN(_time);
-const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
+				).getTime(),
+);
+const invalid = computed(() => Number.isNaN(_time.value));
+const absolute = computed(() =>
+	!invalid.value ? dateTimeFormat.format(_time.value) : i18n.ts._ago.invalid,
+);
 
 const now = ref(props.origin?.getTime() ?? Date.now());
 const relative = computed<string>(() => {
 	if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
-	if (invalid) return i18n.ts._ago.invalid;
+	if (invalid.value) return i18n.ts._ago.invalid;
 
-	const ago = (now.value - _time) / 1000; /* ms */
+	const ago = (now.value - _time.value) / 1000; /* ms */
 	return ago >= 31536000
 		? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() })
 		: ago >= 2592000
@@ -74,15 +77,25 @@ const relative = computed<string>(() => {
 									: i18n.ts._ago.future;
 });
 
-let tickId: number;
+let tickId: number | undefined;
 
 function tick() {
+	if (
+		invalid.value ||
+		props.origin ||
+		(props.mode !== "relative" && props.mode !== "detail")
+	) {
+		if (tickId) window.clearInterval(tickId);
+		tickId = undefined;
+		return;
+	}
+
 	const _now = Date.now();
-	const agoPrev = (now.value - _time) / 1000; /* ms */ // 現状のinterval
+	const agoPrev = (now.value - _time.value) / 1000; /* ms */ // 現状のinterval
 
 	now.value = _now;
 
-	const ago = (now.value - _time) / 1000; /* ms */ // 次のinterval
+	const ago = (now.value - _time.value) / 1000; /* ms */ // 次のinterval
 	const prev = agoPrev < 60 ? 10000 : agoPrev < 3600 ? 60000 : 180000;
 	const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
 
@@ -94,16 +107,13 @@ function tick() {
 	}
 }
 
-if (
-	!invalid &&
-	!props.origin &&
-	(props.mode === "relative" || props.mode === "detail")
-) {
-	onMounted(() => {
-		tick();
-	});
-	onUnmounted(() => {
-		if (tickId) window.clearInterval(tickId);
-	});
-}
+watch(() => props.time, tick);
+
+onMounted(() => {
+	tick();
+});
+
+onUnmounted(() => {
+	if (tickId) window.clearInterval(tickId);
+});
 </script>

packages/client/src/pages/settings/general.vue

@@ -140,6 +140,12 @@
 			<FormSwitch v-model="foldNotification" class="_formBlock">{{
 				i18n.ts.foldNotification
 			}}</FormSwitch>
+			<FormSwitch v-model="mergeThreadInTimeline" class="_formBlock">{{
+				i18n.ts.mergeThreadInTimeline
+			}}</FormSwitch>
+			<FormSwitch v-model="mergeRenotesInTimeline" class="_formBlock">{{
+				i18n.ts.mergeRenotesInTimeline
+			}}</FormSwitch>
 
 			<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@@ -556,6 +562,12 @@ const autocorrectNoteLanguage = computed(
 const foldNotification = computed(
 	defaultStore.makeGetterSetter("foldNotification"),
 );
+const mergeThreadInTimeline = computed(
+	defaultStore.makeGetterSetter("mergeThreadInTimeline"),
+);
+const mergeRenotesInTimeline = computed(
+	defaultStore.makeGetterSetter("mergeRenotesInTimeline"),
+);
 
 // This feature (along with injectPromo) is currently disabled
 // function onChangeInjectFeaturedNote(v) {
@@ -632,7 +644,6 @@ watch(
 		enableTimelineStreaming,
 		enablePullToRefresh,
 		pullToRefreshThreshold,
-		foldNotification,
 	],
 	async () => {
 		await reloadAsk();

packages/client/src/pages/settings/import-export.vue

@@ -1,5 +1,14 @@
 <template>
 	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.importAndExport }}</template>
+			<FormInfo warn class="_formBlock">{{
+				i18n.ts.importAndExportWarn
+			}}</FormInfo>
+			<FormInfo class="_formBlock">{{
+				i18n.ts.importAndExportInfo
+			}}</FormInfo>
+		</FormSection>
 		<FormSection>
 			<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
 			<FormFolder>
@@ -177,6 +186,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import FormInfo from "@/components/MkInfo.vue";
 import MkButton from "@/components/MkButton.vue";
 import FormSection from "@/components/form/section.vue";
 import FormFolder from "@/components/form/folder.vue";

packages/client/src/scripts/fold.ts

@@ -3,6 +3,9 @@ import type {
 	FoldableNotification,
 	NotificationFolded,
 } from "@/types/notification";
+import type { NoteType, NoteThread, NoteFolded } from "@/types/note";
+import { me } from "@/me";
+import { isDeleted, isRenote } from "./note";
 
 interface FoldOption {
 	/** If items length is 1, skip aggregation */
@@ -91,3 +94,94 @@ export function foldNotifications(ns: entities.Notification[]) {
 		},
 	);
 }
+
+export function foldNotes(ns: NoteType[], foldReply = true, foldRenote = true) {
+	// By the implement of MkPagination, lastId is unique and is safe for key
+	const lastId = ns[ns.length - 1]?.id ?? "prepend";
+
+	function foldReplies(ns: NoteType[]) {
+		const res: Array<NoteType | NoteThread> = [];
+		const threads = new Map<NoteType["id"], NoteType[]>();
+
+		for (const n of [...ns].reverse()) {
+			if (isDeleted(n.id)) {
+				continue;
+			}
+			if (n.replyId && threads.has(n.replyId)) {
+				const th = threads.get(n.replyId)!;
+				threads.delete(n.replyId);
+				th.push(n);
+				threads.set(n.id, th);
+			} else if (n.reply?.replyId && threads.has(n.reply.replyId)) {
+				const th = threads.get(n.reply.replyId)!;
+				threads.delete(n.reply.replyId);
+				th.push(n.reply, n);
+				threads.set(n.id, th);
+			} else {
+				threads.set(n.id, [n]);
+			}
+		}
+
+		for (const n of ns) {
+			const conversation = threads.get(n.id);
+			if (conversation == null) continue;
+
+			const first = conversation[0];
+			const last = conversation[conversation.length - 1];
+			if (conversation.length === 1) {
+				res.push(first);
+				continue;
+			}
+
+			res.push({
+				// The same note can only appear once in the timeline, so the ID will not be repeated
+				id: first.id,
+				createdAt: last.createdAt,
+				folded: "thread",
+				note: last,
+				parents: (first.reply ? [first.reply] : []).concat(
+					conversation.slice(0, -1),
+				),
+			});
+		}
+
+		return res;
+	}
+
+	let res: (NoteType | NoteThread | NoteFolded)[] = ns;
+
+	if (foldReply) {
+		res = foldReplies(ns);
+	}
+
+	if (foldRenote) {
+		res = foldItems(
+			res,
+			(n) => {
+				// never fold my renotes
+				if (!("folded" in n) && isRenote(n) && n.userId !== me?.id)
+					return `renote-${n.renoteId}`;
+				return n.id;
+			},
+			(ns, key) => {
+				const represent = ns[0];
+				if (!key.startsWith("renote-")) {
+					return represent;
+				}
+				return {
+					id: `G-${lastId}-${key}`,
+					key: `G-${lastId}-${key}`,
+					createdAt: represent.createdAt,
+					folded: "renote",
+					note: (represent as entities.Note).renote!,
+					renotesArr: ns as entities.Note[],
+				};
+			},
+			{
+				skipSingleElement: false,
+			},
+		);
+	}
+
+	return res;
+}

packages/client/src/scripts/note.ts

@@ -0,0 +1,20 @@
+import type { entities } from "firefish-js";
+import { deletedNoteIds } from "./use-note-capture";
+
+export function isRenote(note: entities.Note): note is entities.Note & {
+	renote: entities.Note;
+	text: null;
+	renoteId: string;
+	poll: undefined;
+} {
+	return (
+		note.renote != null &&
+		note.text == null &&
+		note.fileIds.length === 0 &&
+		note.poll == null
+	);
+}
+
+export function isDeleted(noteId: string) {
+	return deletedNoteIds.has(noteId);
+}

packages/client/src/scripts/use-note-capture.ts

@@ -1,22 +1,62 @@
 import type { Ref } from "vue";
-import { onUnmounted } from "vue";
-import type { entities } from "firefish-js";
+import { onUnmounted, ref } from "vue";
 import { useStream } from "@/stream";
 import { isSignedIn, me } from "@/me";
 import * as os from "@/os";
+import type { NoteType } from "@/types/note";
+
+export const deletedNoteIds = new Map<NoteType["id"], boolean>();
+
+const noteRefs = new Map<NoteType["id"], Ref<NoteType>[]>();
+
+function addToNoteRefs(note: Ref<NoteType>) {
+	const refs = noteRefs.get(note.value.id);
+	if (refs) {
+		refs.push(note);
+	} else {
+		noteRefs.set(note.value.id, [note]);
+	}
+}
+
+function eachNote(id: NoteType["id"], cb: (note: Ref<NoteType>) => void) {
+	const refs = noteRefs.get(id);
+	if (refs) {
+		for (const n of refs) {
+			// n.value.id maybe changed
+			if (n.value.id === id) {
+				cb(n);
+			}
+		}
+	}
+}
 
 export function useNoteCapture(props: {
 	rootEl: Ref<HTMLElement | null>;
-	note: Ref<entities.Note>;
-	isDeletedRef: Ref<boolean>;
-	onReplied?: (note: entities.Note) => void;
+	note: Ref<NoteType>;
+	isDeletedRef?: Ref<boolean>;
+	onReplied?: (note: NoteType) => void;
 }) {
+	let closed = false;
 	const note = props.note;
 	const connection = isSignedIn(me) ? useStream() : null;
+	addToNoteRefs(note);
+
+	function onDeleted() {
+		if (props.isDeletedRef) props.isDeletedRef.value = true;
+		deletedNoteIds.set(note.value.id, true);
+
+		if (note.value.replyId) {
+			eachNote(note.value.replyId, (n) => n.value.repliesCount--);
+		}
+		if (note.value.renoteId) {
+			eachNote(note.value.renoteId, (n) => n.value.renoteCount--);
+		}
+	}
 
 	async function onStreamNoteUpdated(noteData): Promise<void> {
 		const { type, id, body } = noteData;
 
+		if (closed) return;
 		if (id !== note.value.id) return;
 
 		switch (type) {
@@ -87,7 +127,7 @@ export function useNoteCapture(props: {
 			}
 
 			case "deleted": {
-				props.isDeletedRef.value = true;
+				onDeleted();
 				break;
 			}
 
@@ -96,17 +136,14 @@ export function useNoteCapture(props: {
 					const editedNote = await os.api("notes/show", {
 						noteId: id,
 					});
-
-					const keys = new Set<string>();
-					Object.keys(editedNote)
-						.concat(Object.keys(note.value))
-						.forEach((key) => keys.add(key));
-					keys.forEach((key) => {
+					for (const key of [
+						...new Set(Object.keys(editedNote).concat(Object.keys(note.value))),
+					]) {
 						note.value[key] = editedNote[key];
-					});
+					}
 				} catch {
 					// delete the note if failing to get the edited note
-					props.isDeletedRef.value = true;
+					onDeleted();
 				}
 				break;
 			}
@@ -147,4 +184,10 @@ export function useNoteCapture(props: {
 			connection.off("_connected_", onStreamConnected);
 		}
 	});
+
+	return {
+		close: () => {
+			closed = true;
+		},
+	};
 }

packages/client/src/store.ts

@@ -454,6 +454,14 @@ export const defaultStore = markRaw(
 			where: "deviceAccount",
 			default: true,
 		},
+		mergeThreadInTimeline: {
+			where: "deviceAccount",
+			default: true,
+		},
+		mergeRenotesInTimeline: {
+			where: "deviceAccount",
+			default: true,
+		},
 	}),
 );
 

packages/client/src/types/note.ts

@@ -1,4 +1,4 @@
-import type { noteVisibilities } from "firefish-js";
+import type { entities, noteVisibilities } from "firefish-js";
 
 export type NoteVisibility = (typeof noteVisibilities)[number] | "private";
 
@@ -6,3 +6,25 @@ export interface NoteTranslation {
 	sourceLang: string;
 	text: string;
 }
+
+export type NoteType = entities.Note & {
+	_featuredId_?: string;
+	_prId_?: string;
+};
+
+export type NoteFolded = {
+	id: string;
+	key: string;
+	createdAt: entities.Note["createdAt"];
+	folded: "renote";
+	note: entities.Note;
+	renotesArr: entities.Note[];
+};
+
+export type NoteThread = {
+	id: string;
+	createdAt: entities.Note["createdAt"];
+	folded: "thread";
+	note: entities.Note;
+	parents: entities.Note[];
+};

pnpm-lock.yaml

@@ -153,9 +153,6 @@ importers:
       gunzip-maybe:
         specifier: ^1.4.2
         version: 1.4.2
-      happy-dom:
-        specifier: ^14.7.1
-        version: 14.7.1
       hpagent:
         specifier: 1.2.0
         version: 1.2.0
@@ -168,6 +165,9 @@ importers:
       is-svg:
         specifier: 5.0.0
         version: 5.0.0
+      jsdom:
+        specifier: 24.0.0
+        version: 24.0.0
       json5:
         specifier: 2.2.3
         version: 2.2.3
@@ -368,6 +368,9 @@ importers:
       '@types/fluent-ffmpeg':
         specifier: 2.1.24
         version: 2.1.24
+      '@types/jsdom':
+        specifier: 21.1.6
+        version: 21.1.6
       '@types/jsonld':
         specifier: 1.5.13
         version: 1.5.13
@@ -4114,6 +4117,14 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
+  /@types/jsdom@21.1.6:
+    resolution: {integrity: sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==}
+    dependencies:
+      '@types/node': 20.12.7
+      '@types/tough-cookie': 4.0.5
+      parse5: 7.1.2
+    dev: true
+
   /@types/json-schema@7.0.12:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
@@ -4416,6 +4427,10 @@ packages:
     resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==}
     dev: true
 
+  /@types/tough-cookie@4.0.5:
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+    dev: true
+
   /@types/unist@2.0.7:
     resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
     dev: true
@@ -6712,6 +6727,13 @@ packages:
     hasBin: true
     dev: true
 
+  /cssstyle@4.0.1:
+    resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      rrweb-cssom: 0.6.0
+    dev: false
+
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
     dev: true
@@ -6743,6 +6765,14 @@ packages:
     engines: {node: '>= 12'}
     dev: false
 
+  /data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.0.0
+    dev: false
+
   /date-fns@3.6.0:
     resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
 
@@ -6816,6 +6846,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: false
+
   /decode-uri-component@0.2.2:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
     engines: {node: '>=0.10'}
@@ -9019,15 +9053,6 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
-  /happy-dom@14.7.1:
-    resolution: {integrity: sha512-v60Q0evZ4clvMcrAh5/F8EdxDdfHdFrtffz/CNe10jKD+nFweZVxM91tW+UyY2L4AtpgIaXdZ7TQmiO1pfcwbg==}
-    engines: {node: '>=16.0.0'}
-    dependencies:
-      entities: 4.5.0
-      webidl-conversions: 7.0.0
-      whatwg-mimetype: 3.0.0
-    dev: false
-
   /hard-rejection@2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -9129,6 +9154,13 @@ packages:
     engines: {node: '>=14'}
     dev: false
 
+  /html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      whatwg-encoding: 3.1.1
+    dev: false
+
   /html-entities@2.3.2:
     resolution: {integrity: sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==}
     dev: false
@@ -9199,6 +9231,16 @@ packages:
       toidentifier: 1.0.1
     dev: false
 
+  /http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+    dependencies:
+      agent-base: 7.1.0
+      debug: 4.3.4(supports-color@8.1.1)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /http2-wrapper@1.0.3:
     resolution: {integrity: sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==}
     engines: {node: '>=10.19.0'}
@@ -9239,6 +9281,16 @@ packages:
       - supports-color
     dev: false
 
+  /https-proxy-agent@7.0.4:
+    resolution: {integrity: sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      agent-base: 7.1.0
+      debug: 4.3.4(supports-color@8.1.1)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -9606,6 +9658,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: false
+
   /is-promise@2.2.2:
     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
 
@@ -10375,6 +10431,42 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
+  /jsdom@24.0.0:
+    resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^2.11.2
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      cssstyle: 4.0.1
+      data-urls: 5.0.0
+      decimal.js: 10.4.3
+      form-data: 4.0.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.4
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.9
+      parse5: 7.1.2
+      rrweb-cssom: 0.6.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.4
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.0.0
+      ws: 8.16.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -11579,6 +11671,10 @@ packages:
       boolbase: 1.0.0
     dev: true
 
+  /nwsapi@2.2.9:
+    resolution: {integrity: sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg==}
+    dev: false
+
   /oauth@0.10.0:
     resolution: {integrity: sha512-1orQ9MT1vHFGQxhuy7E/0gECD3fd2fCC+PIX+/jgmU/gI3EpRocXtmtvxCO5x3WZ443FLTLFWNDjl5MPJf9u+Q==}
     dev: false
@@ -11885,7 +11981,6 @@ packages:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
     dependencies:
       entities: 4.5.0
-    dev: false
 
   /parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
@@ -12365,6 +12460,10 @@ packages:
     resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
     dev: true
 
+  /psl@1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+    dev: false
+
   /pug-attrs@3.0.0:
     resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
     dependencies:
@@ -12524,6 +12623,10 @@ packages:
     deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
     dev: false
 
+  /querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -12760,6 +12863,10 @@ packages:
   /require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
 
+  /requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: false
+
   /resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
 
@@ -12886,6 +12993,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /rrweb-cssom@0.6.0:
+    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+    dev: false
+
   /rss-parser@3.13.0:
     resolution: {integrity: sha512-7jWUBV5yGN3rqMMj7CZufl/291QAhvrrGpDNE4k/02ZchL0npisiYYqULF71jCEKoIiHvK/Q2e6IkDwPziT7+w==}
     dependencies:
@@ -12964,6 +13075,13 @@ packages:
   /sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
 
+  /saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: false
+
   /schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -13569,6 +13687,10 @@ packages:
     engines: {node: '>= 4.7.0'}
     dev: true
 
+  /symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: false
+
   /synckit@0.6.2:
     resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==}
     engines: {node: '>=12.20'}
@@ -13788,9 +13910,26 @@ packages:
       '@tokenizer/token': 0.3.0
       ieee754: 1.2.1
 
+  /tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+    dev: false
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  /tr46@5.0.0:
+    resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
+    engines: {node: '>=18'}
+    dependencies:
+      punycode: 2.3.1
+    dev: false
+
   /trace-redirect@1.0.6:
     resolution: {integrity: sha512-UUfa1DjjU5flcjMdaFIiIEGDTyu2y/IiMjOX4uGXa7meKBS4vD4f2Uy/tken9Qkd4Jsm4sRsfZcIIPqrRVF3Mg==}
     dev: false
@@ -14270,6 +14409,11 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: false
 
+  /universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+    dev: false
+
   /universalify@2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
@@ -14310,6 +14454,13 @@ packages:
     dependencies:
       punycode: 2.3.1
 
+  /url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+    dev: false
+
   /url-polyfill@1.1.12:
     resolution: {integrity: sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==}
     dev: true
@@ -14581,6 +14732,13 @@ packages:
       typescript: 5.4.5
     dev: true
 
+  /w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+    dependencies:
+      xml-name-validator: 5.0.0
+    dev: false
+
   /walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
     dependencies:
@@ -14691,9 +14849,24 @@ packages:
       - supports-color
     dev: false
 
-  /whatwg-mimetype@3.0.0:
-    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
-    engines: {node: '>=12'}
+  /whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: false
+
+  /whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+    dev: false
+
+  /whatwg-url@14.0.0:
+    resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
+    engines: {node: '>=18'}
+    dependencies:
+      tr46: 5.0.0
+      webidl-conversions: 7.0.0
     dev: false
 
   /whatwg-url@5.0.0:
@@ -14823,7 +14996,6 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: true
 
   /xev@3.0.2:
     resolution: {integrity: sha512-8kxuH95iMXzHZj+fwqfA4UrPcYOy6bGIgfWzo9Ji23JoEc30ge/Z++Ubkiuy8c0+M64nXmmxrmJ7C8wnuBhluw==}
@@ -14841,6 +15013,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+    dev: false
+
   /xml2js@0.5.0:
     resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==}
     engines: {node: '>=4.0.0'}
@@ -14862,6 +15039,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: false
 
+  /xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: false
+
   /xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}