From 26986b150376142d63dc3b0b552268019671c116 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 8 Apr 2023 16:52:07 +0900
Subject: [PATCH 001/147] feat(frontend): tms: drafts

---
 packages/client/src/components/MkPostForm.vue |  65 ++-----
 .../pages/messaging/messaging-room.form.vue   |  59 +++----
 packages/client/src/scripts/tms/drafts.ts     | 167 ++++++++++++++++++
 3 files changed, 205 insertions(+), 86 deletions(-)
 create mode 100644 packages/client/src/scripts/tms/drafts.ts

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 245e30e1ecde..00ab1a2ae8f3 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -94,6 +94,7 @@ import { uploadFile } from '@/scripts/upload';
 import { deepClone } from '@/scripts/clone';
 import { parseObject, parseArray } from '@/scripts/tms/parse';
 import { imanonashi } from '@/scripts/tms/imanonashi';
+import { getDraft as _getDraft, setDraft as _setDraft, deleteDraft as _deleteDraft } from '@/scripts/tms/drafts';
 
 const modal = inject('modal');
 
@@ -453,14 +454,15 @@ const clear = (): void => {
 };
 
 const onKeydown = (ev: KeyboardEvent): void => {
+	typing();
+	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
 	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
 	if (ev.key === 'Escape' || ev.key === 'Esc') emit('esc');
-	typing();
 };
 
 const onCompositionUpdate = (ev: CompositionEvent): void => {
-	imeText = ev.data;
 	typing();
+	imeText = ev.data;
 };
 
 const onCompositionEnd = (_ev: CompositionEvent): void => {
@@ -555,45 +557,9 @@ const onDrop = (ev: DragEvent): void => {
 	//#endregion
 };
 
-type DraftData = {
-	updatedAt: string;
-	data: {
-		text: typeof text;
-		useCw: typeof useCw;
-		cw: typeof cw;
-		visibility: typeof visibility;
-		localOnly: typeof localOnly;
-		files: typeof files;
-		poll: typeof poll;
-	};
-};
+const saveDraft = (): void => _setDraft(draftKey, { text, useCw, cw, visibility, localOnly, files, poll });
 
-const saveDraft = (): void => {
-	const draftData = parseObject<Record<string, DraftData>>(localStorage.getItem('drafts'));
-
-	draftData[draftKey] = {
-		updatedAt: new Date().toJSON(),
-		data: {
-			text: text,
-			useCw: useCw,
-			cw: cw,
-			visibility: visibility,
-			localOnly: localOnly,
-			files: files,
-			poll: poll,
-		},
-	};
-
-	localStorage.setItem('drafts', JSON.stringify(draftData));
-};
-
-const deleteDraft = (): void => {
-	const draftData = parseObject<Record<string, DraftData>>(localStorage.getItem('drafts'));
-
-	delete draftData[draftKey];
-
-	localStorage.setItem('drafts', JSON.stringify(draftData));
-};
+const deleteDraft = (): void => _deleteDraft(draftKey);
 
 const post = async (ev?: MouseEvent): Promise<void> => {
 	if (ev) {
@@ -728,24 +694,22 @@ onMounted(() => {
 	nextTick(() => {
 		// 書きかけの投稿を復元
 		if (!props.instant && !props.mention && !props.specified) {
-			const draft = parseObject<Record<string, DraftData | undefined>>(localStorage.getItem('drafts'))[draftKey];
+			const draft = _getDraft(draftKey);
 			if (draft) {
 				text = draft.data.text;
 				useCw = draft.data.useCw;
 				cw = draft.data.cw;
 				visibility = draft.data.visibility;
 				localOnly = draft.data.localOnly;
-				files = (draft.data.files || []).filter(draftFile => draftFile);
-				if (draft.data.poll) {
-					poll = draft.data.poll;
-				}
+				files = draft.data.files;
+				poll = draft.data.poll;
 			}
 		}
 
 		// 削除して編集
 		if (props.initialNote) {
 			const init = props.initialNote;
-			text = init.text ? init.text : '';
+			text = init.text ?? '';
 			files = init.files;
 			cw = init.cw;
 			useCw = init.cw != null;
@@ -758,11 +722,14 @@ onMounted(() => {
 				};
 			}
 			visibility = init.visibility;
-			localOnly = init.localOnly;
-			quoteId = init.renote ? init.renote.id : null;
+			localOnly = !!init.localOnly;
+			quoteId = init.renote?.id ?? null;
 		}
 
-		nextTick(() => watchForDraft());
+		nextTick(() => {
+			saveDraft();
+			watchForDraft();
+		});
 	});
 });
 </script>
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 66d86c451a77..2bbf4c9d2560 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
+import { onMounted, watch, nextTick } from 'vue';
 import * as Misskey from 'misskey-js';
 import autosize from 'autosize';
 //import insertTextAtCursor from 'insert-text-at-cursor';
@@ -41,6 +41,7 @@ import { i18n } from '@/i18n';
 //import { Autocomplete } from '@/scripts/autocomplete';
 import { uploadFile } from '@/scripts/upload';
 import { parseObject } from '@/scripts/tms/parse';
+import { getMessageDraft as _getMessageDraft, setMessageDraft as _setMessageDraft, deleteMessageDraft as _deleteMessageDraft } from '@/scripts/tms/drafts';
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -57,10 +58,17 @@ const typing = throttle(3000, () => {
 	stream.send('typingOnMessaging', props.user ? { partner: props.user.id } : { group: props.group?.id });
 });
 
-let draftKey = $computed(() => props.user ? 'user:' + props.user.id : 'group:' + props.group?.id);
-let canSend = $computed(() => (text != null && text !== '') || file != null);
+const draftKey = $computed(() => {
+	if (props.user) return `user:${props.user.id}`;
+	if (props.group) return `group:${props.group.id}`;
+	return null;
+});
+const canSend = $computed(() => (text != null && text !== '') || file != null);
 
-watch([$$(text), $$(file)], saveDraft);
+const watchForDraft = (): void => {
+	watch($$(text), () => saveDraft());
+	watch($$(file), () => saveDraft());
+};
 
 async function onPaste(ev: ClipboardEvent) {
 	if (!ev.clipboardData) return;
@@ -126,9 +134,8 @@ function onDrop(ev: DragEvent): void {
 
 function onKeydown(ev: KeyboardEvent) {
 	typing();
-	if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey) && canSend) {
-		send();
-	}
+	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
+	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canSend) send();
 }
 
 function onCompositionUpdate() {
@@ -173,36 +180,9 @@ function clear() {
 	deleteDraft();
 }
 
-type DraftData = {
-	updatedAt: string;
-	data: {
-		text: typeof text;
-		file: typeof file;
-	};
-};
+const saveDraft = (): void => _setMessageDraft(draftKey, { text, file });
 
-function saveDraft() {
-	const drafts = parseObject<Record<string, DraftData>>(localStorage.getItem('message_drafts'));
-
-	drafts[draftKey] = {
-		updatedAt: new Date().toJSON(),
-		// eslint-disable-next-line id-denylist
-		data: {
-			text: text,
-			file: file,
-		},
-	};
-
-	localStorage.setItem('message_drafts', JSON.stringify(drafts));
-}
-
-function deleteDraft() {
-	const drafts = parseObject<Record<string, DraftData>>(localStorage.getItem('message_drafts'));
-
-	delete drafts[draftKey];
-
-	localStorage.setItem('message_drafts', JSON.stringify(drafts));
-}
+const deleteDraft = (): void => _deleteMessageDraft(draftKey);
 
 async function insertEmoji(ev: MouseEvent) {
 	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textEl);
@@ -216,11 +196,16 @@ onMounted(() => {
 	//new Autocomplete(textEl, this, { model: 'text' });
 
 	// 書きかけの投稿を復元
-	const draft = parseObject<Record<string, DraftData | undefined>>(localStorage.getItem('message_drafts'))[draftKey];
+	const draft = _getMessageDraft(draftKey);
 	if (draft) {
 		text = draft.data.text;
 		file = draft.data.file;
 	}
+
+	nextTick(() => {
+		saveDraft();
+		watchForDraft();
+	});
 });
 
 defineExpose({
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
new file mode 100644
index 000000000000..f7d603f8c3e2
--- /dev/null
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -0,0 +1,167 @@
+import * as Misskey from 'misskey-js';
+import { defaultStore } from '@/store';
+import { parseObject } from '@/scripts/tms/parse';
+
+const LS_DRAFTS_KEY = 'tmsDrafts';
+const LS_MESSAGE_DRAFTS_KEY = 'tmsMessageDrafts';
+
+type DraftData = {
+	text: string;
+	useCw: boolean;
+	cw: string | null;
+	visibility: Misskey.entities.Note['visibility'];
+	localOnly: boolean;
+	files: Misskey.entities.DriveFile[];
+	poll: {
+		choices: string[];
+		multiple: boolean;
+		expiresAt: string | null;
+		expiredAfter: string | null;
+	} | null;
+};
+
+type LsDraft = {
+	updatedAt: string;
+	data: Partial<DraftData>;
+};
+
+type Draft = {
+	updatedAt: string;
+	data: DraftData;
+};
+
+type MessageDraftData = {
+	text: string;
+	file: Misskey.entities.DriveFile | null;
+};
+
+type LsMessageDraft = {
+	updatedAt: string;
+	data: Partial<MessageDraftData>;
+};
+
+type MessageDraft = {
+	updatedAt: string;
+	data: MessageDraftData;
+};
+
+const isEmptyObject = (obj: Record<string, unknown>): obj is Record<string, never> => !Object.values(obj).some(v => v !== undefined);
+
+const getVisibility = (): Misskey.entities.Note['visibility'] => defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
+const getLocalOnly = (): boolean => defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
+
+const loadLsDrafts = (): Record<string, LsDraft | undefined> => parseObject<Record<string, LsDraft | undefined>>(localStorage.getItem(LS_DRAFTS_KEY));
+const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => localStorage.setItem(LS_DRAFTS_KEY, JSON.stringify(drafts));
+
+export const getDraft = (draftKey: string | null): Draft | null => {
+	if (!draftKey) return null;
+
+	const draft = loadLsDrafts()[draftKey];
+	if (!draft) return null;
+
+	const { updatedAt, data: { text, useCw, cw, visibility, localOnly, files, poll } } = draft;
+
+	return {
+		updatedAt,
+		data: {
+			text: text ?? '',
+			useCw: useCw ?? false,
+			cw: cw ?? (useCw ? '' : null),
+			visibility: visibility ?? getVisibility(),
+			localOnly: localOnly ?? getLocalOnly(),
+			files: files ?? [],
+			poll: poll ?? null,
+		},
+	};
+};
+
+export const setDraft = (draftKey: string | null, data: DraftData): void => {
+	if (!draftKey) return;
+
+	const drafts = loadLsDrafts();
+
+	const { text, useCw, cw, visibility, localOnly, files, poll } = data;
+
+	const draftData: LsDraft['data'] = {
+		text: text || undefined,
+		useCw: useCw || undefined,
+		cw: cw || undefined,
+		visibility: visibility !== getVisibility() ? visibility : undefined,
+		localOnly: localOnly !== getLocalOnly() ? localOnly : undefined,
+		files: files.length ? files : undefined,
+		poll: poll ?? undefined,
+	};
+
+	if (isEmptyObject(draftData)) return deleteDraft(draftKey);
+
+	saveLsDrafts({
+		...drafts,
+		[draftKey]: {
+			updatedAt: new Date().toJSON(),
+			data: draftData,
+		},
+	});
+};
+
+export const deleteDraft = (draftKey: string | null): void => {
+	if (!draftKey) return;
+
+	const drafts = loadLsDrafts();
+
+	delete drafts[draftKey];
+
+	saveLsDrafts(drafts);
+};
+
+const loadLsMessageDrafts = (): Record<string, LsMessageDraft | undefined> => parseObject<Record<string, LsMessageDraft | undefined>>(localStorage.getItem(LS_MESSAGE_DRAFTS_KEY));
+const saveLsMessageDrafts = (drafts: Record<string, LsMessageDraft | undefined>): void => localStorage.setItem(LS_MESSAGE_DRAFTS_KEY, JSON.stringify(drafts));
+
+export const getMessageDraft = (draftKey: string | null): MessageDraft | null => {
+	if (!draftKey) return null;
+
+	const draft = loadLsMessageDrafts()[draftKey];
+	if (!draft) return null;
+
+	const { updatedAt, data: { text, file } } = draft;
+
+	return {
+		updatedAt,
+		data: {
+			text: text ?? '',
+			file: file ?? null,
+		},
+	};
+};
+
+export const setMessageDraft = (draftKey: string | null, data: MessageDraftData): void => {
+	if (!draftKey) return;
+
+	const drafts = loadLsMessageDrafts();
+
+	const { text, file } = data;
+
+	const draftData: LsMessageDraft['data'] = {
+		text: text || undefined,
+		file: file ?? undefined,
+	};
+
+	if (isEmptyObject(draftData)) return deleteMessageDraft(draftKey);
+
+	saveLsMessageDrafts({
+		...drafts,
+		[draftKey]: {
+			updatedAt: new Date().toJSON(),
+			data: draftData,
+		},
+	});
+};
+
+export const deleteMessageDraft = (draftKey: string | null): void => {
+	if (!draftKey) return;
+
+	const drafts = loadLsMessageDrafts();
+
+	delete drafts[draftKey];
+
+	saveLsMessageDrafts(drafts);
+};

From 7ff8facf27ba2230d4a9f0ff214b9ded456e7577 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 02:55:02 +0900
Subject: [PATCH 002/147] =?UTF-8?q?enhance(frontend):=20=E6=8A=95=E7=A8=BF?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=81=AE=E6=94=B9=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkModal.vue    |  33 +-
 packages/client/src/components/MkPostForm.vue | 724 ++++++++++--------
 .../src/components/MkPostFormDialog.vue       |  49 +-
 .../client/src/components/MkVisibility.vue    |   2 +-
 .../src/components/MkVisibilityPicker.vue     | 193 ++---
 packages/client/src/directives/click-anime.ts |  32 +-
 6 files changed, 585 insertions(+), 448 deletions(-)

diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index dcdda2b01463..65ee74fa86cf 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -89,6 +89,7 @@ let transformOrigin = $ref('center');
 let showing = $ref(true);
 let content = $ref<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
+let useSendAnime = $ref(false);
 const type = $computed(() => {
 	if (props.preferType === 'auto') {
 		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
@@ -102,21 +103,25 @@ const type = $computed(() => {
 });
 let transitionName = $computed((() =>
 	defaultStore.state.animation
-		? (type === 'drawer')
-			? 'modal-drawer'
-			: (type === 'popup')
-				? 'modal-popup'
-				: 'modal'
+		? useSendAnime
+			? 'send'
+			: type === 'drawer'
+				? 'modal-drawer'
+				: type === 'popup'
+					? 'modal-popup'
+					: 'modal'
 		: ''
 ));
 let transitionDuration = $computed((() =>
-	transitionName === 'modal-popup'
-		? 100
-		: transitionName === 'modal'
-			? 200
-			: transitionName === 'modal-drawer'
+	transitionName === 'send'
+		? 400
+		: transitionName === 'modal-popup'
+			? 100
+			: transitionName === 'modal'
 				? 200
-				: 0
+				: transitionName === 'modal-drawer'
+					? 200
+					: 0
 ));
 
 let contentClicking = false;
@@ -272,7 +277,11 @@ const onOpened = (): void => {
 	}, { passive: true });
 };
 
-const close = (): void => {
+const close = (opts: { useSendAnimation?: boolean } = {}): void => {
+	if (opts.useSendAnimation) {
+		useSendAnime = true;
+	}
+
 	// eslint-disable-next-line vue/no-mutating-props
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing = false;
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 00ab1a2ae8f3..d93f96f1ada2 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1,65 +1,85 @@
 <template>
 <div
 	v-size="{ max: [310, 500] }" class="gafaadew"
-	:class="{ modal, _popup: modal }"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
-		</button>
-		<div class="right">
-			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
-				<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
-				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+	<header :class="$style.header">
+		<div :class="$style.headerLeft">
+			<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
+			<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
+				<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
+			</button>
+		</div>
+		<div :class="$style.headerRight">
+			<template v-if="!(channel != null && fixed)">
+				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" class="_button" :class="[$style.v, $style.visibility]" @click="setVisibility">
+					<span v-if="localOnly" :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
+					<span v-if="visibility === 'public'" :class="$style.headerRightButtonIcon"><i class="ti ti-world"></i></span>
+					<span v-if="visibility === 'home'" :class="$style.headerRightButtonIcon"><i class="ti ti-home"></i></span>
+					<span v-if="visibility === 'followers'" :class="$style.headerRightButtonIcon"><i class="ti ti-lock"></i></span>
+					<span v-if="visibility === 'specified'" :class="$style.headerRightButtonIcon"><i class="ti ti-mail"></i></span>
+					<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
+				</button>
+				<button v-else class="_button" :class="[$style.headerRightItem, $style.visibility]" disabled>
+					<span :class="$style.headerRightButtonIcon"><i class="ti ti-device-tv"></i></span>
+					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
+				</button>
+			</template>
+			<button v-click-anime v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.headerRightItem, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+			<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+				<div :class="$style.submitInner">
+					<template v-if="posted"></template>
+					<template v-else-if="posting"><MkEllipsis/></template>
+					<template v-else>{{ submitText }}</template>
+					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+				</div>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i></button>
 		</div>
 	</header>
-	<div class="form" :class="{ fixed }">
-		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-		<div v-if="visibility === 'specified'" class="to-specified">
-			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div class="visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id">
-					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
-				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-			</div>
+	<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
+	<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
+	<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
+	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
+		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+		<div :class="$style.visibleUsers">
+			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
+				<MkAcct :user="u"/>
+				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+			</span>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 		</div>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn class="info hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<MkInfo v-if="annoyingPost" warn class="info annoyingPost">{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
-		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
-		<footer>
-			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
-		</footer>
-		<datalist id="hashtags">
-			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-		</datalist>
 	</div>
+	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
+	<MkInfo v-if="annoyingPost" warn :class="$style.annoyingPost">{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
+	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<div class="_acrylic" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+	</div>
+	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
+	<XPostFormAttaches :class="$style.attaches" :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+	<div v-if="showingOptions" style="padding: 8px 16px;">
+	</div>
+	<footer :class="$style.footer">
+		<div :class="$style.footerLeft">
+			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+			<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+			<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
+			<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
+			<button v-tooltip="i18n.ts.emoji" class="_button" :class="[$style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+		</div>
+	</footer>
+	<datalist id="hashtags">
+		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
+	</datalist>
 </div>
 </template>
 
@@ -72,10 +92,10 @@ import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import * as Acct from 'misskey-js/built/acct';
 import { throttle } from 'throttle-debounce';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XNotePreview from '@/components/MkNotePreview.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import XPollEditor from '@/components/MkPollEditor.vue';
+import MkPollEditor from '@/components/MkPollEditor.vue';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { host, url } from '@/config';
 import { erase, unique } from '@/scripts/array';
@@ -101,7 +121,7 @@ const modal = inject('modal');
 const props = withDefaults(defineProps<{
 	reply?: misskey.entities.Note;
 	renote?: misskey.entities.Note;
-	channel?: any; // TODO
+	channel?: misskey.entities.Channel; // TODO
 	mention?: misskey.entities.User;
 	specified?: misskey.entities.User;
 	initialText?: string;
@@ -113,6 +133,7 @@ const props = withDefaults(defineProps<{
 	instant?: boolean;
 	fixed?: boolean;
 	autofocus?: boolean;
+	freezeAfterPosted?: boolean;
 }>(), {
 	initialVisibleUsers: () => [],
 	autofocus: true,
@@ -124,12 +145,13 @@ const emit = defineEmits<{
 	(ev: 'esc'): void;
 }>();
 
-const textareaEl = $ref<HTMLTextAreaElement | null>(null);
-const cwInputEl = $ref<HTMLInputElement | null>(null);
-const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
-const visibilityButton = $ref<HTMLElement | null>(null);
+const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
+const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
+const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
+const visibilityButton = $shallowRef<HTMLElement | null>(null);
 
 let posting = $ref(false);
+let posted = $ref(false);
 let text = $ref(props.initialText ?? '');
 let files = $ref(props.initialFiles ?? []);
 let poll = $ref<{
@@ -144,13 +166,15 @@ let cw = $ref<string | null>(null);
 let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
 let visibility = $ref<'public' | 'home' | 'followers' | 'specified'>(props.initialVisibility ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility);
 let visibleUsers = $ref<misskey.entities.User[]>([]);
+props.initialVisibleUsers.forEach(user => pushVisibleUser(user));
 let autocomplete = $ref(null);
 let draghover = $ref(false);
-let quoteId: string | null = $ref(null);
+let quoteId = $ref<string | null>(null);
 let hasNotSpecifiedMentions = $ref(false);
 let annoyingPost = $ref(false);
 let recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
 let imeText = $ref('');
+let showingOptions = $ref(false);
 
 const typing = throttle(3000, () => {
 	if (props.channel) {
@@ -158,15 +182,17 @@ const typing = throttle(3000, () => {
 	}
 });
 
-const draftKey = $computed((): string => {
-	let key = props.channel ? `channel:${props.channel.id}` : '';
+const draftKey = $computed((): string | null => {
+	if (!$i?.id) return null;
+
+	let key = props.channel ? `ch:${props.channel.id}/` : '';
 
 	if (props.renote) {
-		key += `renote:${props.renote.id}`;
+		key += `rn:${props.renote.id}`;
 	} else if (props.reply) {
-		key += `reply:${props.reply.id}`;
+		key += `re:${props.reply.id}`;
 	} else {
-		key += 'note';
+		key += `note:${$i.id}`;
 	}
 
 	return key;
@@ -209,7 +235,7 @@ const maxTextLength = $computed((): number => {
 });
 
 const canPost = $computed((): boolean => {
-	return !posting &&
+	return !posting && !posted &&
 		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
 		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);
@@ -220,7 +246,7 @@ const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
 
 watch($$(text), () => {
 	checkMissingMention();
-});
+}, { immediate: true });
 
 watch($$(visibleUsers), () => {
 	checkMissingMention();
@@ -241,6 +267,10 @@ const pushVisibleUser = (user: misskey.entities.User): void => {
 const addVisibleUser = (): void => {
 	os.selectUser().then(user => {
 		pushVisibleUser(user);
+
+		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
+			text = `@${Acct.toString(user)} ${text}`;
+		}
 	});
 };
 
@@ -248,10 +278,6 @@ const removeVisibleUser = (user: misskey.entities.User): void => {
 	visibleUsers = erase(user, visibleUsers);
 };
 
-if (props.initialVisibleUsers) {
-	props.initialVisibleUsers.forEach(pushVisibleUser);
-}
-
 if (props.mention) {
 	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
 	text += ' ';
@@ -289,13 +315,22 @@ if (props.channel) {
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
-	visibility = props.reply.visibility;
-	if (props.reply.visibility === 'specified') {
-		os.api('users/show', {
-			userIds: props.reply.visibleUserIds?.filter(uid => uid !== $i?.id && uid !== props.reply?.userId) ?? [],
-		}).then(users => {
-			users.forEach(pushVisibleUser);
-		});
+	if (props.reply.visibility === 'home' && visibility === 'followers') {
+		visibility = 'followers';
+	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
+		visibility = 'specified';
+	} else {
+		visibility = props.reply.visibility;
+	}
+
+	if (visibility === 'specified') {
+		if (props.reply.visibleUserIds) {
+			os.api('users/show', {
+				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i?.id && uid !== props.reply?.userId),
+			}).then(users => {
+				users.forEach(pushVisibleUser);
+			});
+		}
 
 		if (props.reply.userId !== $i?.id) {
 			os.api('users/show', { userId: props.reply.userId }).then(user => {
@@ -422,7 +457,8 @@ const upload = (file: File, name?: string): void => {
 
 const setVisibility = (): void => {
 	if (props.channel) {
-		// TODO: information dialog
+		visibility = 'public';
+		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 		return;
 	}
 
@@ -512,9 +548,9 @@ const onDragover = (ev: DragEvent): void => {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
+			case 'copy':
+			case 'copyLink':
+			case 'copyMove':
 				ev.dataTransfer.dropEffect = 'copy';
 				break;
 			case 'linkMove':
@@ -579,7 +615,7 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
 		channelId: props.channel ? props.channel.id : undefined,
 		poll: poll,
-		cw: useCw ? cw || '' : undefined,
+		cw: useCw ? cw ?? '' : undefined,
 		localOnly: localOnly,
 		visibility: visibility,
 		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
@@ -606,7 +642,11 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 
 	posting = true;
 	os.api('notes/create', postData, token).then(({ createdNote }) => {
-		clear();
+		if (props.freezeAfterPosted) {
+			posted = true;
+		} else {
+			clear();
+		}
 		nextTick(() => {
 			deleteDraft();
 			emit('posted');
@@ -732,289 +772,339 @@ onMounted(() => {
 		});
 	});
 });
+
+defineExpose({
+	clear,
+});
 </script>
 
-<style lang="scss" scoped>
-.gafaadew {
+<style lang="scss" module>
+.root {
 	position: relative;
 
 	&.modal {
 		width: 100%;
 		max-width: 520px;
 	}
+}
 
-	> header {
-		z-index: 1000;
-		height: 66px;
-
-		> .cancel {
-			padding: 0;
-			font-size: 1em;
-			width: 64px;
-			line-height: 66px;
-		}
+//#region header
+.header {
+	z-index: 1000;
+	min-height: 50px;
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 4px;
+}
 
-		> .account {
-			height: 100%;
-			aspect-ratio: 1/1;
-			display: inline-flex;
-			vertical-align: bottom;
+.headerLeft {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(36px, 50px));
+	grid-template-rows: minmax(40px, 100%);
+}
 
-			> .avatar {
-				width: 28px;
-				height: 28px;
-				margin: auto;
-			}
-		}
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	height: 100%;
+}
 
-		> .right {
-			position: absolute;
-			top: 0;
-			right: 0;
+.account {
+	height: 100%;
+	display: inline-flex;
+	vertical-align: bottom;
+}
 
-			> .text-count {
-				opacity: 0.7;
-				line-height: 66px;
+.avatar {
+	width: 28px;
+	height: 28px;
+	margin: auto 0;
+}
 
-				&.over {
-					color: var(--error);
-				}
-			}
+.headerRight {
+	display: flex;
+	min-height: 48px;
+	font-size: 0.9em;
+	flex-wrap: nowrap;
+	align-items: center;
+	margin-left: auto;
+	gap: 4px;
+	overflow: clip;
+	padding-left: 4px;
+}
 
-			> .visibility {
-				height: 34px;
-				width: 34px;
-				margin: 0 0 0 8px;
+.submit {
+	margin: 12px 12px 12px 6px;
+	vertical-align: bottom;
 
-				& + .localOnly {
-					margin-left: 0 !important;
-				}
-			}
-			
-			> .local-only {
-				margin: 0 0 0 12px;
-				opacity: 0.7;
-			}
+	&:disabled {
+		opacity: 0.7;
+	}
 
-			> .preview {
-				display: inline-block;
-				padding: 0;
-				margin: 0 8px 0 0;
-				font-size: 16px;
-				width: 34px;
-				height: 34px;
-				border-radius: 6px;
-
-				&:hover {
-					background: var(--X5);
-				}
-
-				&.active {
-					color: var(--accent);
-				}
-			}
+	&.posting {
+		cursor: wait;
+	}
 
-			> .submit {
-				margin: 16px 16px 16px 0;
-				padding: 0 12px;
-				line-height: 34px;
-				font-weight: bold;
-				vertical-align: bottom;
-				border-radius: 4px;
-				font-size: 0.9em;
-
-				&:disabled {
-					opacity: 0.7;
-				}
-
-				> i {
-					margin-left: 6px;
-				}
-			}
+	&:not(:disabled):hover {
+		> .inner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
 		}
 	}
 
-	> .form {
-		> .preview {
-			padding: 16px;
+	&:not(:disabled):active {
+		> .inner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
 		}
+	}
+}
 
-		> .with-quote {
-			margin: 0 0 8px 0;
-			color: var(--accent);
+.submitInner {
+	padding: 0 12px;
+	line-height: 34px;
+	font-weight: bold;
+	border-radius: 6px;
+	min-width: 90px;
+	box-sizing: border-box;
+	color: var(--fgOnAccent);
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+}
 
-			> button {
-				padding: 4px 8px;
-				color: var(--accentAlpha04);
+.headerRightItem {
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
 
-				&:hover {
-					color: var(--accentAlpha06);
-				}
+	&:hover {
+		background: var(--X5);
+	}
 
-				&:active {
-					color: var(--accentDarken30);
-				}
-			}
-		}
+	&:disabled {
+		background: none;
+	}
+}
 
-		> .to-specified {
-			padding: 6px 24px;
-			margin-bottom: 8px;
-			overflow: auto;
-			white-space: nowrap;
-
-			> .visibleUsers {
-				display: inline;
-				top: -1px;
-				font-size: 14px;
-
-				> button {
-					padding: 4px;
-					border-radius: 8px;
-				}
-
-				> span {
-					margin-right: 14px;
-					padding: 8px 0 8px 8px;
-					border-radius: 8px;
-					background: var(--X4);
-
-					> button {
-						padding: 4px 8px;
-					}
-				}
-			}
-		}
+.headerRightButtonIcon:not(:first-child) {
+	padding-left: 6px;
+}
+
+.headerRightButtonText {
+	padding-left: 6px;
+}
 
-		> .info {
-			margin: 0 20px 8px 20px;
+.visibility {
+	overflow: clip;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-			&:last-child {
-				margin-bottom: 16px;
-			}
+	&:enabled {
+		> .headerRightButtonText {
+			opacity: 0.8;
 		}
+	}
+}
 
-		> .cw,
-		> .hashtags,
-		> .text {
-			display: block;
-			box-sizing: border-box;
-			padding: 0 24px;
-			margin: 0;
-			width: 100%;
-			font-size: 16px;
-			border: none;
-			border-radius: 0;
-			background: transparent;
-			color: var(--fg);
-			font-family: inherit;
-
-			&:focus {
-				outline: none;
-			}
+.previewButtonActive {
+	color: var(--accent);
+}
+//#endregion
 
-			&:disabled {
-				opacity: 0.5;
-			}
-		}
+.preview {
+	padding: 16px 20px 0 20px;
+}
 
-		> .cw {
-			z-index: 1;
-			padding-bottom: 8px;
-			border-bottom: solid 0.5px var(--divider);
-		}
+.targetNote {
+	padding: 0 20px 16px 20px;
+}
 
-		> .hashtags {
-			z-index: 1;
-			padding-top: 8px;
-			padding-bottom: 8px;
-			border-top: solid 0.5px var(--divider);
-		}
+.withQuote {
+	margin: 0 0 8px 0;
+	color: var(--accent);
+}
 
-		> .text {
-			max-width: 100%;
-			min-width: 100%;
-			min-height: 90px;
+.toSpecified {
+	padding: 6px 24px;
+	margin-bottom: 8px;
+	overflow: auto;
+	white-space: nowrap;
+}
 
-			&.withCw {
-				padding-top: 8px;
-			}
-		}
+.visibleUsers {
+	display: inline;
+	top: -1px;
+	font-size: 14px;
+}
 
-		> footer {
-			padding: 0 16px 16px 16px;
-
-			> button {
-				display: inline-block;
-				padding: 0;
-				margin: 0;
-				font-size: 1em;
-				width: 46px;
-				height: 46px;
-				border-radius: 6px;
-
-				&:hover {
-					background: var(--X5);
-				}
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-		}
+.visibleUser {
+	margin-right: 14px;
+	padding: 8px 0 8px 8px;
+	border-radius: 8px;
+	background: var(--X4);
+}
+
+.hasNotSpecifiedMentions {
+	margin: 0 20px 16px 20px;
+}
+
+.cw,
+.hashtags,
+.text {
+	display: block;
+	box-sizing: border-box;
+	padding: 0 24px;
+	margin: 0;
+	width: 100%;
+	font-size: 16px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	color: var(--fg);
+	font-family: inherit;
+
+	&:focus {
+		outline: none;
 	}
 
-	&.max-width_500px {
-		> header {
-			height: 50px;
+	&:disabled {
+		opacity: 0.5;
+	}
+}
 
-			> .cancel {
-				width: 50px;
-				line-height: 50px;
-			}
+.cw {
+	z-index: 1;
+	padding-bottom: 8px;
+	border-bottom: solid 0.5px var(--divider);
+}
 
-			> .right {
-				> .text-count {
-					line-height: 50px;
-				}
+.hashtags {
+	z-index: 1;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-top: solid 0.5px var(--divider);
+}
 
-				> .submit {
-					margin: 8px;
-				}
-			}
-		}
+.textOuter {
+	width: 100%;
+	position: relative;
 
-		> .form {
-			> .to-specified {
-				padding: 6px 16px;
-			}
+	&.withCw {
+		padding-top: 8px;
+	}
+}
 
-			> .cw,
-			> .hashtags,
-			> .text {
-				padding: 0 16px;
-			}
+.text {
+	max-width: 100%;
+	min-width: 100%;
+	width: 100%;
+	min-height: 90px;
+	height: 100%;
+}
 
-			> .text {
-				min-height: 80px;
-			}
+.textCount {
+	position: absolute;
+	top: 0;
+	right: 2px;
+	padding: 4px 6px;
+	font-size: .9em;
+	color: var(--warn);
+	border-radius: 6px;
+	min-width: 1.6em;
+	text-align: center;
+	pointer-events: none;
+
+	&.textOver {
+		color: var(--error);
+	}
+}
 
-			> footer {
-				padding: 0 8px 8px 8px;
-			}
-		}
+.footer {
+	display: flex;
+	padding: 0 16px 16px 16px;
+	font-size: 1em;
+}
+
+.footerLeft {
+	flex: 1;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	grid-auto-rows: 46px;
+}
+
+.footerRight {
+	flex: 0.3;
+	margin-left: auto;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	grid-auto-rows: 46px;
+	direction: rtl;
+}
+
+.footerButton {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	font-size: 1em;
+	width: auto;
+	height: 100%;
+	border-radius: 6px;
+
+	&:hover {
+		background: var(--X5);
 	}
 
-	&.max-width_310px {
-		> .form {
-			> footer {
-				> button {
-					font-size: 14px;
-					width: 44px;
-				height: 44px;
-				}
-			}
-		}
+	&.footerButtonActive {
+		color: var(--accent);
+	}
+}
+
+:global(.max-width_500px) {
+	.headerRight {
+		font-size: .9em;
+	}
+
+	.headerRightButtonText {
+		display: none;
+	}
+
+	.visibility {
+		overflow: initial;
+	}
+
+	.submit {
+		margin: 8px 8px 8px 4px;
+	}
+
+	.toSpecified {
+		padding: 6px 16px;
+	}
+
+	.preview {
+		padding: 16px 14px 0 14px;
+	}
+
+	.cw,
+	.hashtags,
+	.text {
+		padding: 0 16px;
+	}
+
+	.text {
+		min-height: 80px;
+	}
+
+	.footer {
+		padding: 0 8px 8px 8px;
+	}
+}
+
+:global(.max-width_310px) {
+	.headerRight {
+		gap: 0;
+	}
+
+	.footer {
+		font-size: 14px;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index 6dabb1db14e8..b5f183db7ae4 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,19 +1,46 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog:top'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<MkPostForm v-bind="$attrs" @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()"/>
+<MkModal ref="modal" :prefer-type="'dialog'" @click="modal?.close()" @closed="onModalClosed()">
+	<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
 </MkModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 
-export default defineComponent({
-	components: {
-		MkModal,
-		MkPostForm,
-	},
-	emits: ['closed'],
-});
+const props = defineProps<{
+	reply?: misskey.entities.Note;
+	renote?: misskey.entities.Note;
+	channel?: misskey.entities.Channel; // TODO
+	mention?: misskey.entities.User;
+	specified?: misskey.entities.User;
+	initialText?: string;
+	initialVisibility?: 'public' | 'home' | 'followers' | 'specified';
+	initialFiles?: misskey.entities.DriveFile[];
+	initialLocalOnly?: boolean;
+	initialVisibleUsers?: misskey.entities.User[];
+	initialNote?: misskey.entities.Note;
+	instant?: boolean;
+	fixed?: boolean;
+	autofocus?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
+const form = $shallowRef<InstanceType<typeof MkPostForm>>();
+
+const onPosted = (): void => {
+	modal?.close({
+		useSendAnimation: true,
+	});
+};
+
+const onModalClosed = (): void => {
+	emit('closed');
+};
 </script>
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 53f1be617179..ebfce3ae78f6 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -4,7 +4,7 @@
 	<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 	<i v-else-if="note.visibility === 'specified'" class="ti ti-mail" @click="showRecipients"></i>
 </span>
-<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility.disableFederation"><i class="ti ti-world-off"></i></span>
+<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility.disableFederation"><i class="ti ti-rocket-off"></i></span>
 <span v-if="hasAuthority" :class="$style.hasAuthority"><i class="ti ti-eye-check"></i></span>
 </template>
 
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index fb61304831d8..8a8f7a14c81c 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -1,42 +1,47 @@
 <template>
 <MkModal ref="modal" v-slot="{ type }" :z-priority="'high'" :src="src" @click="modal?.close()" @closed="emit('closed')">
-	<div class="gqyayizv _popup" :class="{ asDrawer: type === 'drawer' }">
-		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div class="prefix"><i class="ti ti-world"></i></div>
-			<div class="text">
-				<span class="label">{{ i18n.ts._visibility.public }}</span>
-				<span class="description">{{ i18n.ts._visibility.publicDescription }}</span>
+	<div class="gqyayizv _popup" :class="[$style.root, { [$style.asDrawer]: type === 'drawer' } ]">
+		<div :class="[$style.label, $style.item]">
+			{{ i18n.ts.visibility }}
+		</div>
+		<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
+			<div :class="$style.icon"><i class="ti ti-world"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
-		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div class="prefix"><i class="ti ti-home"></i></div>
-			<div class="text">
-				<span class="label">{{ i18n.ts._visibility.home }}</span>
-				<span class="description">{{ i18n.ts._visibility.homeDescription }}</span>
+		<button key="home" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
+			<div :class="$style.icon"><i class="ti ti-home"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
-		<button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
-			<div class="prefix"><i class="ti ti-lock"></i></div>
-			<div class="text">
-				<span class="label">{{ i18n.ts._visibility.followers }}</span>
-				<span class="description">{{ i18n.ts._visibility.followersDescription }}</span>
+		<button key="followers" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
+			<div :class="$style.icon"><i class="ti ti-lock"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
-		<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
-			<div class="prefix"><i class="ti ti-mail"></i></div>
-			<div class="text">
-				<span class="label">{{ i18n.ts._visibility.specified }}</span>
-				<span class="description">{{ i18n.ts._visibility.specifiedDescription }}</span>
+		<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
+			<div :class="$style.icon"><i class="ti ti-mail"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
+				<span :class="$style.itemDescription">{{ 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">
-			<div class="prefix"><i class="ti ti-world-off"></i></div>
-			<div class="text">
-				<span class="label">{{ i18n.ts._visibility.disableFederation }}</span>
-				<span class="description">{{ i18n.ts._visibility.disableFederationDescription }}</span>
+		<button key="localOnly" :disabled="v === 'specified'" class="_button" :class="[$style.item, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
+			<div :class="$style.icon">
+				<i v-if="!localOnly" class="ti ti-rocket"></i>
+				<i v-else class="ti ti-rocket-off" style="color: var(--error);"></i>
+			</div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.disableFederation }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.disableFederationDescription }}</span>
 			</div>
-			<div class="suffix"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
 		</button>
 	</div>
 </MkModal>
@@ -48,13 +53,14 @@ 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];
 	currentLocalOnly: boolean;
 	src?: HTMLElement;
 }>(), {
+	src: undefined,
 });
 
 const emit = defineEmits<{
@@ -79,86 +85,87 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 }
 </script>
 
-<style lang="scss" scoped>
-.gqyayizv {
+<style lang="scss" module>
+.root {
 	width: 240px;
 	padding: 8px 0;
 
-	> .divider {
-		margin: 8px 0;
-		border-top: solid 0.5px var(--divider);
-	}
-
-	> button {
-		display: flex;
-		padding: 8px 14px;
-		font-size: 12px;
-		text-align: left;
+	&.asDrawer {
+		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 		width: 100%;
-		box-sizing: border-box;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
 
-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
+		.label {
+			pointer-events: none;
+			font-size: 12px;
+			padding-bottom: 4px;
+			opacity: 0.7;
 		}
 
-		&:active {
-			background: rgba(0, 0, 0, 0.1);
+		.item {
+			font-size: 14px;
+			padding: 10px 24px;
 		}
+	}
+}
 
-		&.active {
-			color: var(--fgOnAccent);
-			background: var(--accent);
-		}
+.label {
+	pointer-events: none;
+	font-size: 10px;
+	padding-bottom: 4px;
+	opacity: 0.7;
+}
 
-		&.localOnly.active {
-			color: var(--accent);
-			background: inherit;
-		}
+.item {
+	display: flex;
+	padding: 8px 14px;
+	font-size: 12px;
+	text-align: left;
+	width: 100%;
+	box-sizing: border-box;
 
-		> .prefix {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-right: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
+	&:hover {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	&:active {
+		background: rgba(0, 0, 0, 0.1);
+	}
 
-		> .text {
-			flex: 1 1 auto;
+	&.active {
+		color: var(--accent);
+	}
+}
 
-			> .label {
-				display: block;
-				font-weight: bold;
-			}
+.icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 10px;
+	width: 16px;
+	top: 0;
+	bottom: 0;
+	margin-top: auto;
+	margin-bottom: auto;
+}
 
-			> .description {
-				opacity: 0.6;
-			}
-		}
+.body {
+	flex: 1 1 auto;
+}
 
-		> .suffix {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-left: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
-	}
+.itemTitle {
+	display: block;
+	font-weight: bold;
+}
 
-	&.asDrawer {
-		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
-		width: 100%;
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-	}
+.itemDescription {
+	opacity: 0.6;
+}
+
+.divider {
+	margin: 8px 0;
+	border-top: solid 0.5px var(--divider);
 }
 </style>
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
index d597eb173160..5cd54c7323da 100644
--- a/packages/client/src/directives/click-anime.ts
+++ b/packages/client/src/directives/click-anime.ts
@@ -1,31 +1,35 @@
 import { Directive } from 'vue';
-// import { defaultStore } from '@/store';
+import { defaultStore } from '@/store';
 
 export default {
-	mounted(el, binding, vn) {
-		/*
+	mounted(el: HTMLElement, binding, vn) {
 		if (!defaultStore.state.animation) return;
 
-		el.classList.add('_anime_bounce_standBy');
+		const target = el.children[0];
+
+		if (target == null) return;
+
+		target.classList.add('_anime_bounce_standBy');
 
 		el.addEventListener('mousedown', () => {
-			el.classList.add('_anime_bounce_standBy');
-			el.classList.add('_anime_bounce_ready');
+			target.classList.remove('_anime_bounce');
+
+			target.classList.add('_anime_bounce_standBy');
+			target.classList.add('_anime_bounce_ready');
 
-			el.addEventListener('mouseleave', () => {
-				el.classList.remove('_anime_bounce_ready');
+			target.addEventListener('mouseleave', () => {
+				target.classList.remove('_anime_bounce_ready');
 			});
 		});
 
 		el.addEventListener('click', () => {
-			el.classList.add('_anime_bounce');
+			target.classList.add('_anime_bounce');
+			target.classList.remove('_anime_bounce_ready');
 		});
 
 		el.addEventListener('animationend', () => {
-			el.classList.remove('_anime_bounce_ready');
-			el.classList.remove('_anime_bounce');
-			el.classList.add('_anime_bounce_standBy');
+			target.classList.remove('_anime_bounce');
+			target.classList.add('_anime_bounce_standBy');
 		});
-		*/
-	}
+	},
 } as Directive;

From fb108cc7a190871f8281ceb1376b1afaae19c1bc Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 03:28:50 +0900
Subject: [PATCH 003/147] =?UTF-8?q?fix:=20=E6=8A=95=E7=A8=BF=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=BC=E3=83=A0=E3=81=AE=E6=94=B9=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkNotePreview.vue   | 107 +++++++-----------
 packages/client/src/components/MkPostForm.vue |  11 +-
 .../src/components/MkVisibilityPicker.vue     |   5 +-
 3 files changed, 52 insertions(+), 71 deletions(-)

diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index a78b499654b8..b1da1e2a0a18 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -1,12 +1,12 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="fefdfafb">
-	<MkAvatar class="avatar" :user="$i"/>
-	<div class="main">
-		<div class="header">
-			<MkUserName :user="$i"/>
+<div v-size="{ min: [350, 500] }" class="fefdfafb" :class="$style.root">
+	<MkAvatar :class="$style.avatar" :user="$i"/>
+	<div :class="$style.main">
+		<div :class="$style.header">
+			<MkUserName :user="$i" :nowrap="true"/>
 		</div>
-		<div class="body">
-			<div class="content">
+		<div>
+			<div :class="$style.content">
 				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
 			</div>
 		</div>
@@ -16,77 +16,58 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { $i } from '@/account';
 
-const props = defineProps<{
+defineProps<{
 	text: string;
 }>();
 </script>
 
-<style lang="scss" scoped>
-.fefdfafb {
+<style lang="scss" module>
+.root {
 	display: flex;
 	margin: 0;
 	padding: 0;
 	overflow: clip;
 	font-size: 0.95em;
+}
 
-	&.min-width_350px {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-
-	&.min-width_500px {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-
-	> .avatar {
-		flex-shrink: 0;
-		display: block;
-		margin: 0 10px 0 0;
-		width: 40px;
-		height: 40px;
-		border-radius: 8px;
-		pointer-events: none;
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .header {
-			margin-bottom: 2px;
-			font-weight: bold;
-		}
+.avatar {
+	flex-shrink: 0 !important;
+	display: block !important;
+	margin: 0 10px 0 0 !important;
+	width: 40px !important;
+	height: 40px !important;
+	border-radius: 8px !important;
+	pointer-events: none !important;
+}
 
-		> .body {
+.main {
+	flex: 1;
+	min-width: 0;
+}
 
-			> .cw {
-				cursor: default;
-				display: block;
-				margin: 0;
-				padding: 0;
-				overflow-wrap: break-word;
+.header {
+	margin-bottom: 2px;
+	font-weight: bold;
+	width: 100%;
+	overflow: clip;
+	text-overflow: ellipsis;
+}
 
-				> .text {
-					margin-right: 8px;
-				}
-			}
+:global(.min-width_350px) {
+	.avatar {
+		margin: 0 10px 0 0 !important;
+		width: 44px !important;
+		height: 44px !important;
+	}
+}
 
-			> .content {
-				> .text {
-					cursor: default;
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
+:global(.min-width_500px) {
+	.avatar {
+		margin: 0 12px 0 0 !important;
+		width: 48px !important;
+		height: 48px !important;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index d93f96f1ada2..a3d36be58618 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -15,9 +15,11 @@
 			</button>
 		</div>
 		<div :class="$style.headerRight">
+			<button v-if="localOnly" v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
+				<span :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
+			</button>
 			<template v-if="!(channel != null && fixed)">
 				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" class="_button" :class="[$style.v, $style.visibility]" @click="setVisibility">
-					<span v-if="localOnly" :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
 					<span v-if="visibility === 'public'" :class="$style.headerRightButtonIcon"><i class="ti ti-world"></i></span>
 					<span v-if="visibility === 'home'" :class="$style.headerRightButtonIcon"><i class="ti ti-home"></i></span>
 					<span v-if="visibility === 'followers'" :class="$style.headerRightButtonIcon"><i class="ti ti-lock"></i></span>
@@ -64,8 +66,6 @@
 	<XPostFormAttaches :class="$style.attaches" :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
-	<div v-if="showingOptions" style="padding: 8px 16px;">
-	</div>
 	<footer :class="$style.footer">
 		<div :class="$style.footerLeft">
 			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
@@ -174,7 +174,6 @@ let hasNotSpecifiedMentions = $ref(false);
 let annoyingPost = $ref(false);
 let recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
 let imeText = $ref('');
-let showingOptions = $ref(false);
 
 const typing = throttle(3000, () => {
 	if (props.channel) {
@@ -893,8 +892,8 @@ defineExpose({
 
 .visibility {
 	overflow: clip;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 
 	&:enabled {
 		> .headerRightButtonText {
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 8a8f7a14c81c..b78b81b615b8 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -32,7 +32,7 @@
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
 			</div>
 		</button>
-		<div class="divider"></div>
+		<div :class="$style.divider"></div>
 		<button key="localOnly" :disabled="v === 'specified'" class="_button" :class="[$style.item, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
 			<div :class="$style.icon">
 				<i v-if="!localOnly" class="ti ti-rocket"></i>
@@ -135,7 +135,8 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 	}
 
 	&.active {
-		color: var(--accent);
+		color: var(--fgOnAccent);
+		background: var(--accent);
 	}
 }
 

From 7b7a901a6dded1ecd00924dc3f6719c8a58d6c27 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 03:34:15 +0900
Subject: [PATCH 004/147] =?UTF-8?q?tweak:=20=E6=8A=95=E7=A8=BF=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=BC=E3=83=A0=E3=81=AE=E6=94=B9=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkPostForm.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index a3d36be58618..fa681b81f6e8 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1004,11 +1004,12 @@ defineExpose({
 	right: 2px;
 	padding: 4px 6px;
 	font-size: .9em;
-	color: var(--warn);
+	color: var(--fg);
 	border-radius: 6px;
 	min-width: 1.6em;
 	text-align: center;
 	pointer-events: none;
+	opacity: 0.8;
 
 	&.textOver {
 		color: var(--error);

From 4a8c03e625cacebde9a1b8eb9421fbb76057d11c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 03:44:04 +0900
Subject: [PATCH 005/147] =?UTF-8?q?fix:=20=E6=8A=95=E7=A8=BF=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=BC=E3=83=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkPostForm.vue |  7 ++++---
 .../client/src/ui/deck/channel-column.vue     | 21 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index fa681b81f6e8..643ed12818eb 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -15,11 +15,12 @@
 			</button>
 		</div>
 		<div :class="$style.headerRight">
-			<button v-if="localOnly" v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
-				<span :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
+			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
+				<span v-if="!localOnly" :class="$style.headerRightButtonIcon"><i class="ti ti-rocket"></i></span>
+				<span v-else :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
 			</button>
 			<template v-if="!(channel != null && fixed)">
-				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" class="_button" :class="[$style.v, $style.visibility]" @click="setVisibility">
+				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" class="_button" :class="[$style.headerRightItem, $style.visibility]" @click="setVisibility">
 					<span v-if="visibility === 'public'" :class="$style.headerRightButtonIcon"><i class="ti ti-world"></i></span>
 					<span v-if="visibility === 'home'" :class="$style.headerRightButtonIcon"><i class="ti ti-home"></i></span>
 					<span v-if="visibility === 'followers'" :class="$style.headerRightButtonIcon"><i class="ti ti-lock"></i></span>
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index c9fe35f27c4d..cdccb2637206 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -8,16 +8,17 @@
 		<div style="padding: 8px; text-align: center;">
 			<MkButton primary gradate rounded inline @click="post"><i class="ti ti-pencil"></i></MkButton>
 		</div>
-		<XTimeline ref="timeline" src="channel" :channel="column.channelId" @after="() => emit('loaded')"/>
+		<MkTimeline ref="timeline" src="channel" :channel="column.channelId" @after="() => emit('loaded')"/>
 	</template>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import * as misskey from 'misskey-js';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -32,7 +33,8 @@ const emit = defineEmits<{
 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
 }>();
 
-let timeline = $ref<InstanceType<typeof XTimeline>>();
+let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
+let channel = $shallowRef<misskey.entities.Channel>();
 
 if (props.column.channelId == null) {
 	setChannel();
@@ -56,12 +58,15 @@ async function setChannel() {
 	});
 }
 
-function post() {
+async function post() {
+	if (!channel || channel.id !== props.column.channelId) {
+		channel = await os.api('channels/show', {
+			channelId: props.column.channelId,
+		});
+	}
+
 	os.post({
-		channel: {
-			id: props.column.channelId,
-		},
-		instant: true,
+		channel,
 	});
 }
 

From 91ef95941d8e8efcbd016a50a24b8046e009b096 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 03:58:10 +0900
Subject: [PATCH 006/147] fix (indent, anime)

---
 .../client/src/components/MkMediaList.vue     |   2 +-
 packages/client/src/components/MkMention.vue  |   8 +-
 packages/client/src/components/MkModal.vue    |  23 ++++
 .../src/components/MkReactionEffect.vue       |   8 +-
 packages/client/src/components/MkUserInfo.vue |   2 +-
 .../client/src/components/form/radios.vue     |   4 +-
 packages/client/src/pages/admin/_header_.vue  |   2 +-
 packages/client/src/pages/channel.vue         |   2 +-
 packages/client/src/pages/settings/theme.vue  |   2 +-
 .../client/src/scripts/tms/is-pure-renote.ts  |   2 +-
 packages/client/src/scripts/tms/pakuru.ts     |   2 +-
 packages/client/src/style.scss                |  32 +++---
 .../src/ui/_common_/statusbar-federation.vue  |   6 +-
 .../client/src/ui/_common_/statusbar-rss.vue  |   6 +-
 .../src/ui/_common_/statusbar-user-list.vue   |   6 +-
 packages/client/src/ui/_common_/upload.vue    | 108 +++++++++---------
 packages/client/src/widgets/rss-ticker.vue    |   6 +-
 17 files changed, 122 insertions(+), 99 deletions(-)

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 7567d4fa12d2..8e310efdcb32 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -204,7 +204,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 <style lang="scss">
 .pswp {
 	// なぜか機能しない
-  //z-index: v-bind(pswpZIndex);
+	//z-index: v-bind(pswpZIndex);
 	z-index: 2000000;
 	--pswp-bg: var(--modalBg);
 }
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index c887e33e289f..4de6ed801866 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -45,10 +45,10 @@ const bgCss = bg.toRgbString();
 	padding: 4px 8px 4px 4px;
 	border-radius: 999px;
 	color: var(--mention);
-  vertical-align: middle;
-  align-items: center;
-  overflow: hidden;
-  max-width: 100%;
+	vertical-align: middle;
+	align-items: center;
+	overflow: hidden;
+	max-width: 100%;
 	box-sizing: border-box;
 
 	&.isMe {
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 65ee74fa86cf..0426dfdacaf9 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -321,6 +321,29 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+.transition_send_enterActive, .transition_send_leaveActive {
+	> .bg {
+		transition: opacity 0.3s !important;
+	}
+
+	> .content {
+		transform: translateY(0px);
+		transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(0.5, -0.5, 1, 0.5) !important;
+	}
+}
+
+.transition_send_enterFrom, .transition_send_leaveTo {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
+		pointer-events: none;
+		opacity: 0;
+		transform: translateY(-300px);
+	}
+}
+
 .modal-enter-active, .modal-leave-active {
 	> .bg {
 		transition: opacity 0.2s !important;
diff --git a/packages/client/src/components/MkReactionEffect.vue b/packages/client/src/components/MkReactionEffect.vue
index c3b38b146c97..fff335383384 100644
--- a/packages/client/src/components/MkReactionEffect.vue
+++ b/packages/client/src/components/MkReactionEffect.vue
@@ -66,16 +66,16 @@ onMounted(() => {
 	color: var(--accent);
 	font-size: 18px;
 	font-weight: bold;
-  // Original: translateY(-30px);
-  transform: translateY(-20px);
-  // Original: transform 1s cubic-bezier(0, 0.5, 0, 1), opacity 1s cubic-bezier(0.5, 0, 1, 0.5);
+	// Original: translateY(-30px);
+	transform: translateY(-20px);
+	// Original: transform 1s cubic-bezier(0, 0.5, 0, 1), opacity 1s cubic-bezier(0.5, 0, 1, 0.5);
 	transition: transform 1s cubic-bezier(0, 0.5, 0, 1), opacity 1s cubic-bezier(0.5, 0, 1, 1);
 	will-change: opacity, transform;
 
 	&.up {
 		opacity: 0;
 		// Original: translateY(-50px) rotateZ(v-bind(angle));
-    transform: translateY(-40px) rotateZ(v-bind(angle));
+		transform: translateY(-40px) rotateZ(v-bind(angle));
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 036cbea3049d..1855ae421820 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -102,7 +102,7 @@ defineProps<{
 		> .mfm {
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;  
+			-webkit-box-orient: vertical;
 			overflow: hidden;
 		}
 	}
diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue
index bde4a8fb0035..bd360615008f 100644
--- a/packages/client/src/components/form/radios.vue
+++ b/packages/client/src/components/form/radios.vue
@@ -66,8 +66,8 @@ export default defineComponent({
 
 	> .body {
 		display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
+		gap: 12px;
+		flex-wrap: wrap;
 	}
 
 	> .caption {
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index e05aa2ede2a5..e5363454c406 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -156,7 +156,7 @@ onUnmounted(() => {
 	> .buttons {
 		--margin: 8px;
 		display: flex;
-    align-items: center;
+		align-items: center;
 		height: var(--height);
 		margin: 0 var(--margin);
 
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 3d1de43c09c5..7258b0199480 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -96,7 +96,7 @@ definePageMetadata(computed(() => channel ? {
 	> .toggle {
 		position: absolute;
 		z-index: 2;
-    top: 8px;
+		top: 8px;
 		right: 8px;
 		font-size: 1.2em;
 		width: 48px;
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 2a0c70007562..d82bf99abef2 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -233,7 +233,7 @@ definePageMetadata({
 			border-radius: 50px;
 			box-shadow: 0 2px 6px rgba(0,0,0,.3);
 			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-			transform:  rotate(-45deg);
+			transform: rotate(-45deg);
 
 			.crater {
 				position: absolute;
diff --git a/packages/client/src/scripts/tms/is-pure-renote.ts b/packages/client/src/scripts/tms/is-pure-renote.ts
index f56db27293c0..73c750b29a1f 100644
--- a/packages/client/src/scripts/tms/is-pure-renote.ts
+++ b/packages/client/src/scripts/tms/is-pure-renote.ts
@@ -2,7 +2,7 @@ import { Note } from 'misskey-js/built/entities';
 
 type SomeRequired<T, K extends keyof T> = Omit<T, K> & Required<RequiredNotNull<Pick<T, K>>>;
 type RequiredNotNull<T> = {
-  [P in keyof T]: NonNullable<T[P]>;
+	[P in keyof T]: NonNullable<T[P]>;
 };
 
 export const isPureRenote = (note: Note): note is SomeRequired<Note, 'renote' | 'renoteId'> => {
diff --git a/packages/client/src/scripts/tms/pakuru.ts b/packages/client/src/scripts/tms/pakuru.ts
index e86ee5dafecf..0dc6e538db88 100644
--- a/packages/client/src/scripts/tms/pakuru.ts
+++ b/packages/client/src/scripts/tms/pakuru.ts
@@ -10,7 +10,7 @@ import { isPureRenote } from '@/scripts/tms/is-pure-renote';
 
 type SomeRequired<T, K extends keyof T> = Omit<T, K> & Required<RequiredNotNull<Pick<T, K>>>;
 type RequiredNotNull<T> = {
-  [P in keyof T]: NonNullable<T[P]>;
+	[P in keyof T]: NonNullable<T[P]>;
 };
 
 type PostDataBase = Partial<{
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index bce123ef9344..ed8679e3a510 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -557,29 +557,29 @@ hr {
 
 ._anime_bounce {
 	will-change: transform;
-  animation: bounce ease 0.7s;
-  animation-iteration-count: 1;
-  transform-origin: 50% 50%;
+	animation: bounce ease 0.7s;
+	animation-iteration-count: 1;
+	transform-origin: 50% 50%;
 }
 ._anime_bounce_ready {
 	will-change: transform;
-	transform:  scaleX(0.90) scaleY(0.90) ;
+	transform: scaleX(0.90) scaleY(0.90) ;
 }
 ._anime_bounce_standBy {
 	transition: transform 0.1s ease;
 }
 
 @keyframes bounce{
-  0% {
-    transform:  scaleX(0.90) scaleY(0.90) ;
-  }
-  19% {
-    transform:  scaleX(1.10) scaleY(1.10) ;
-  }
-  48% {
-    transform:  scaleX(0.95) scaleY(0.95) ;
-  }
-  100% {
-    transform:  scaleX(1.00) scaleY(1.00) ;
-  }
+	0% {
+		transform: scaleX(0.90) scaleY(0.90) ;
+	}
+	19% {
+		transform: scaleX(1.10) scaleY(1.10) ;
+	}
+	48% {
+		transform: scaleX(0.95) scaleY(0.95) ;
+	}
+	100% {
+		transform: scaleX(1.00) scaleY(1.00) ;
+	}
 }
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index dada6f6f5c12..ac7fb9a29e7c 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -60,14 +60,14 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 .change-enter-active, .change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
index b7de4ff1c64f..55a3b3a1dc42 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -58,14 +58,14 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 .change-enter-active, .change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 95c3f40e7f7a..187c56df0c24 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -64,14 +64,14 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 .change-enter-active, .change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 70882bd251f3..b0e4e6582088 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -38,92 +38,92 @@ const zIndex = os.claimZIndex('high');
 	border-radius: 8px;
 }
 .mk-uploader:empty {
-  display: none;
+	display: none;
 }
 .mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+	display: block;
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 .mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
+	display: grid;
+	margin: 8px 0 0 0;
+	padding: 0;
+	height: 36px;
+	width: 100%;
+	border-top: solid 8px transparent;
+	grid-template-columns: 36px calc(100% - 44px);
+	grid-template-rows: 1fr 8px;
+	column-gap: 8px;
+	box-sizing: content-box;
 }
 .mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
+	margin: 0;
+	box-shadow: none;
+	border-top: none;
 }
 .mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
+	display: block;
+	background-size: cover;
+	background-position: center center;
+	grid-column: 1/2;
+	grid-row: 1/3;
 }
 .mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
+	display: flex;
+	grid-column: 2/3;
+	grid-row: 1/2;
 }
 .mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
+	display: block;
+	padding: 0 8px 0 0;
+	margin: 0;
+	font-size: 0.8em;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-shrink: 1;
 }
 .mk-uploader > ol > li > .top > .name > i {
-  margin-right: 4px;
+	margin-right: 4px;
 }
 .mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
+	display: block;
+	margin: 0 0 0 auto;
+	padding: 0;
+	font-size: 0.8em;
+	flex-shrink: 0;
 }
 .mk-uploader > ol > li > .top > .status > .initing {
 }
 .mk-uploader > ol > li > .top > .status > .kb {
 }
 .mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
+	display: inline-block;
+	width: 48px;
+	text-align: right;
 }
 .mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
+	content: '%';
 }
 .mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
+	display: block;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	overflow: hidden;
+	grid-column: 2/3;
+	grid-row: 2/3;
+	z-index: 2;
 	width: 100%;
 	height: 8px;
 }
 .mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--accent);
+	background: var(--accent);
 }
 .mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--accentAlpha01);
+	//background: var(--accentAlpha01);
 	background: transparent;
 }
 </style>
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index 05133ad4d902..ce8ae90c86b7 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -112,14 +112,14 @@ defineExpose<WidgetComponentExpose>({
 .change-enter-active, .change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 

From b32feeff16aee728b6b26552ad3ae69fc1dff9b8 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 04:15:12 +0900
Subject: [PATCH 007/147] =?UTF-8?q?tweak=20=E3=81=8A=E6=B0=97=E3=81=AB?=
 =?UTF-8?q?=E5=85=A5=E3=82=8A=E3=82=AB=E3=83=A9=E3=83=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/ui/deck/favorites-column.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/ui/deck/favorites-column.vue b/packages/client/src/ui/deck/favorites-column.vue
index 30845351dedb..3d47e9fb181c 100644
--- a/packages/client/src/ui/deck/favorites-column.vue
+++ b/packages/client/src/ui/deck/favorites-column.vue
@@ -11,9 +11,11 @@
 		</template>
 
 		<template #default="{ items }">
-			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="true" :ad="false">
-				<XNote :key="item.id" :note="item.note" :class="$style.note"/>
-			</XList>
+			<div :class="$style.notes">
+				<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="true" :ad="false">
+					<XNote :key="item.id" :note="item.note"/>
+				</XList>
+			</div>
 		</template>
 	</MkPagination>
 </XColumn>
@@ -46,7 +48,7 @@ const pagination = {
 </script>
 
 <style lang="scss" module>
-.note {
+.notes {
 	background: var(--panel);
 }
 </style>

From bb7af0d7abf0b48791d8a772009615da2de4875c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 04:21:07 +0900
Subject: [PATCH 008/147] =?UTF-8?q?tweak=20=E3=83=A1=E3=83=B3=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=82=AB=E3=83=A9=E3=83=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/ui/deck/mentions-column.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 49fc7d5ab153..765805469f99 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -2,7 +2,7 @@
 <XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
-	<XNotes :pagination="pagination"/>
+	<XNotes :pagination="pagination" no-gap/>
 </XColumn>
 </template>
 

From fba26298670726e8cb1d2f817dcc854b5d4b4b3f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 04:31:51 +0900
Subject: [PATCH 009/147] fix watch callback

---
 packages/client/src/components/MkPostForm.vue | 35 ++++++++-----------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 643ed12818eb..e4a11117f34a 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -244,20 +244,6 @@ const canPost = $computed((): boolean => {
 const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
 const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
 
-watch($$(text), () => {
-	checkMissingMention();
-}, { immediate: true });
-
-watch($$(visibleUsers), () => {
-	checkMissingMention();
-}, {
-	deep: true,
-});
-
-watch($$(text), () => checkAnnoyingPost());
-watch($$(useCw), () => checkAnnoyingPost());
-watch($$(visibility), () => checkAnnoyingPost());
-
 const pushVisibleUser = (user: misskey.entities.User): void => {
 	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
 		visibleUsers.push(user);
@@ -352,13 +338,13 @@ if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
 }
 
 const watchForDraft = (): void => {
-	watch($$(text), () => saveDraft());
-	watch($$(useCw), () => saveDraft());
-	watch($$(cw), () => saveDraft());
-	watch($$(poll), () => saveDraft());
-	watch($$(files), () => saveDraft(), { deep: true });
-	watch($$(visibility), () => saveDraft());
-	watch($$(localOnly), () => saveDraft());
+	watch($$(text), saveDraft);
+	watch($$(useCw), saveDraft);
+	watch($$(cw), saveDraft);
+	watch($$(poll), saveDraft);
+	watch($$(files), saveDraft, { deep: true });
+	watch($$(visibility), saveDraft);
+	watch($$(localOnly), saveDraft);
 };
 
 const checkMissingMention = (): void => {
@@ -401,6 +387,13 @@ const checkAnnoyingPost = (): void => {
 	}
 };
 
+watch($$(text), checkMissingMention, { immediate: true });
+watch($$(visibleUsers), checkMissingMention, { deep: true });
+
+watch($$(text), checkAnnoyingPost);
+watch($$(useCw), checkAnnoyingPost);
+watch($$(visibility), checkAnnoyingPost);
+
 const togglePoll = (): void => {
 	if (poll) {
 		poll = null;

From 3fb6d74373de73fec72be1f0224b3ac31f657968 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 06:43:59 +0900
Subject: [PATCH 010/147] =?UTF-8?q?feat(frontend):=20tms:=20=E3=83=8E?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E3=81=AE=E4=B8=8B=E6=9B=B8=E3=81=8D=E6=A9=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                             |  1 +
 packages/client/src/components/MkPostForm.vue | 27 ++++++-
 .../src/components/TmsDraftsList.draft.vue    | 50 ++++++++++++
 .../client/src/components/TmsDraftsList.vue   | 61 +++++++++++++++
 packages/client/src/scripts/tms/drafts.ts     | 78 +++++++++++++++----
 5 files changed, 198 insertions(+), 19 deletions(-)
 create mode 100644 packages/client/src/components/TmsDraftsList.draft.vue
 create mode 100644 packages/client/src/components/TmsDraftsList.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1640c40c6326..063e602d943e 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2304,3 +2304,4 @@ _tms:
   unreact: "リアクションを解除"
   pakuru: "パクる"
   numberquote: "数字引用する"
+  drafts: "下書き"
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index e4a11117f34a..c59a67de7a10 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -15,6 +15,10 @@
 			</button>
 		</div>
 		<div :class="$style.headerRight">
+			<button v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
+				<span :class="$style.headerRightButtonIcon"><i class="ti ti-pencil"></i></span>
+				<span :class="$style.headerRightButtonText">{{ i18n.ts._tms.drafts }}</span>
+			</button>
 			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
 				<span v-if="!localOnly" :class="$style.headerRightButtonIcon"><i class="ti ti-rocket"></i></span>
 				<span v-else :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
@@ -115,7 +119,7 @@ import { uploadFile } from '@/scripts/upload';
 import { deepClone } from '@/scripts/clone';
 import { parseObject, parseArray } from '@/scripts/tms/parse';
 import { imanonashi } from '@/scripts/tms/imanonashi';
-import { getDraft as _getDraft, setDraft as _setDraft, deleteDraft as _deleteDraft } from '@/scripts/tms/drafts';
+import { DraftWithId, getDraft as _getDraft, setDraft as _setDraft, deleteDraft as _deleteDraft } from '@/scripts/tms/drafts';
 
 const modal = inject('modal');
 
@@ -182,7 +186,7 @@ const typing = throttle(3000, () => {
 	}
 });
 
-const draftKey = $computed((): string | null => {
+let draftKey = $computed((): string | null => {
 	if (!$i?.id) return null;
 
 	let key = props.channel ? `ch:${props.channel.id}/` : '';
@@ -337,6 +341,25 @@ if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
 	cw = props.reply.cw;
 }
 
+const chooseDraft = (): void => {
+	new Promise<DraftWithId>(resolve => {
+		os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {}, {
+			chosen: (draft: DraftWithId) => {
+				resolve(draft);
+			},
+		}, 'closed');
+	}).then((draft: DraftWithId) => {
+		draftKey = draft.id;
+		text = draft.data.text;
+		useCw = draft.data.useCw;
+		cw = draft.data.cw;
+		visibility = draft.data.visibility;
+		localOnly = draft.data.localOnly;
+		files = draft.data.files;
+		poll = draft.data.poll;
+	});
+};
+
 const watchForDraft = (): void => {
 	watch($$(text), saveDraft);
 	watch($$(useCw), saveDraft);
diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
new file mode 100644
index 000000000000..e5714edf6870
--- /dev/null
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -0,0 +1,50 @@
+<template>
+<div :class="$style.root" @click="draftMenu">
+	<div :class="$style.text">{{ props.draft.data.text }}</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as os from '@/os';
+import { DraftWithId } from '@/scripts/tms/drafts';
+
+const props = defineProps<{
+	draft: DraftWithId;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'chosen', draftId: DraftWithId['id']): void;
+	(ev: 'deleted', draftId: DraftWithId['id']): void;
+	(ev: 'closed'): void;
+}>();
+
+const draftMenu = (ev: MouseEvent): void => {
+	const el = ev.currentTarget ?? ev.target;
+	if (!(el instanceof HTMLElement)) return;
+
+	const menu = [
+		{
+			text: '選択',
+			icon: 'ti ti-check',
+			action: () => emit('chosen', props.draft.id),
+		},
+		{
+			text: '削除',
+			icon: 'ti ti-trash',
+			action: () => emit('deleted', props.draft.id),
+			danger: true,
+		},
+	];
+
+	os.popupMenu(menu, el);
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 16px;
+	background: var(--panel);
+	user-select: none;
+}
+</style>
diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
new file mode 100644
index 000000000000..b6e6d72ace44
--- /dev/null
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -0,0 +1,61 @@
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	@click="dialog?.close()"
+	@close="dialog?.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts._tms.drafts }}</template>
+
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<div class="tms-drafts-list _gaps">
+			<div v-if="draftsList.length === 0" class="_fullinfo">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ i18n.ts.nothing }}</div>
+			</div>
+			<div v-else>
+				<TmsDraft v-for="draftItem in draftsList" :key="draftItem.id" :draft="draftItem" @chosen="chosen" @deleted="deleted"/>
+			</div>
+		</div>
+	</MkSpacer>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { i18n } from '@/i18n';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import TmsDraft from '@/components/TmsDraftsList.draft.vue';
+import { DraftWithId, getAllDraft, deleteDraft } from '@/scripts/tms/drafts';
+
+const emit = defineEmits<{
+	(ev: 'chosen', draft: DraftWithId): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
+
+let draftsList: DraftWithId[] = $ref([]);
+
+const init = (): void => {
+	draftsList = getAllDraft();
+};
+
+init();
+
+const chosen = (draftId: DraftWithId['id']): void => {
+	const draft = draftsList.find(d => d.id === draftId);
+	if (draft) emit('chosen', draft);
+	dialog?.close();
+};
+
+const deleted = (draftId: DraftWithId['id']): void => {
+	deleteDraft(draftId);
+	init();
+};
+</script>
+
+<style lang="scss" module>
+</style>
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index f7d603f8c3e2..cc2e50a2eca4 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -25,11 +25,15 @@ type LsDraft = {
 	data: Partial<DraftData>;
 };
 
-type Draft = {
+export type Draft = {
 	updatedAt: string;
 	data: DraftData;
 };
 
+export type DraftWithId = Draft & {
+	id: string;
+};
+
 type MessageDraftData = {
 	text: string;
 	file: Misskey.entities.DriveFile | null;
@@ -40,11 +44,15 @@ type LsMessageDraft = {
 	data: Partial<MessageDraftData>;
 };
 
-type MessageDraft = {
+export type MessageDraft = {
 	updatedAt: string;
 	data: MessageDraftData;
 };
 
+export type MessageDraftWithId = MessageDraft & {
+	id: string;
+};
+
 const isEmptyObject = (obj: Record<string, unknown>): obj is Record<string, never> => !Object.values(obj).some(v => v !== undefined);
 
 const getVisibility = (): Misskey.entities.Note['visibility'] => defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
@@ -53,25 +61,43 @@ const getLocalOnly = (): boolean => defaultStore.state.rememberNoteVisibility ?
 const loadLsDrafts = (): Record<string, LsDraft | undefined> => parseObject<Record<string, LsDraft | undefined>>(localStorage.getItem(LS_DRAFTS_KEY));
 const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => localStorage.setItem(LS_DRAFTS_KEY, JSON.stringify(drafts));
 
+const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
+	const { text, useCw, cw, visibility, localOnly, files, poll } = lsDraft;
+	return {
+		text: text ?? '',
+		useCw: useCw ?? false,
+		cw: cw ?? (useCw ? '' : null),
+		visibility: visibility ?? getVisibility(),
+		localOnly: localOnly ?? getLocalOnly(),
+		files: files ?? [],
+		poll: poll ?? null,
+	};
+};
+
+export const getAllDraft = (): DraftWithId[] => {
+	const drafts = loadLsDrafts();
+	return Object.entries(drafts).flatMap(([id, draft]) => {
+		if (!draft) return [];
+		const { updatedAt, data } = draft;
+		return [{
+			id,
+			updatedAt,
+			data: restoreDraftData(data),
+		}];
+	});
+};
+
 export const getDraft = (draftKey: string | null): Draft | null => {
 	if (!draftKey) return null;
 
 	const draft = loadLsDrafts()[draftKey];
 	if (!draft) return null;
 
-	const { updatedAt, data: { text, useCw, cw, visibility, localOnly, files, poll } } = draft;
+	const { updatedAt, data } = draft;
 
 	return {
 		updatedAt,
-		data: {
-			text: text ?? '',
-			useCw: useCw ?? false,
-			cw: cw ?? (useCw ? '' : null),
-			visibility: visibility ?? getVisibility(),
-			localOnly: localOnly ?? getLocalOnly(),
-			files: files ?? [],
-			poll: poll ?? null,
-		},
+		data: restoreDraftData(data),
 	};
 };
 
@@ -116,20 +142,38 @@ export const deleteDraft = (draftKey: string | null): void => {
 const loadLsMessageDrafts = (): Record<string, LsMessageDraft | undefined> => parseObject<Record<string, LsMessageDraft | undefined>>(localStorage.getItem(LS_MESSAGE_DRAFTS_KEY));
 const saveLsMessageDrafts = (drafts: Record<string, LsMessageDraft | undefined>): void => localStorage.setItem(LS_MESSAGE_DRAFTS_KEY, JSON.stringify(drafts));
 
+const restoreMessageDraftData = (lsDraft: Partial<MessageDraftData>): MessageDraftData => {
+	const { text, file } = lsDraft;
+	return {
+		text: text ?? '',
+		file: file ?? null,
+	};
+};
+
+export const getAllMessageDraft = (): MessageDraftWithId[] => {
+	const drafts = loadLsMessageDrafts();
+	return Object.entries(drafts).flatMap(([id, draft]) => {
+		if (!draft) return [];
+		const { updatedAt, data } = draft;
+		return [{
+			id,
+			updatedAt,
+			data: restoreMessageDraftData(data),
+		}];
+	});
+};
+
 export const getMessageDraft = (draftKey: string | null): MessageDraft | null => {
 	if (!draftKey) return null;
 
 	const draft = loadLsMessageDrafts()[draftKey];
 	if (!draft) return null;
 
-	const { updatedAt, data: { text, file } } = draft;
+	const { updatedAt, data } = draft;
 
 	return {
 		updatedAt,
-		data: {
-			text: text ?? '',
-			file: file ?? null,
-		},
+		data: restoreMessageDraftData(data),
 	};
 };
 

From 0ba56f3296061087cfd684134c578a994b386f4c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 06:56:36 +0900
Subject: [PATCH 011/147] fix

---
 .../client/src/components/MkNoteSimple.vue    | 123 +++++++++---------
 packages/client/src/components/MkPostForm.vue |  12 +-
 2 files changed, 67 insertions(+), 68 deletions(-)

diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 1bbbe0e1a6d0..3515fd08abc2 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -1,15 +1,15 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk">
-	<MkAvatar class="avatar" :user="note.user"/>
-	<div class="main">
-		<XNoteHeader class="header" :note="note" :mini="true"/>
-		<div class="body">
-			<p v-if="note.cw != null" class="cw">
-				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-				<XCwButton v-model="showContent" :note="note"/>
+<div v-size="{ min: [350, 500] }" class="yohlumlk" :class="$style.root">
+	<MkAvatar :class="$style.avatar" :user="note.user"/>
+	<div :class="$style.main">
+		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
+		<div>
+			<p v-if="note.cw != null" :class="$style.cw">
+				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+				<MkCwButton v-model="showContent" :note="note"/>
 			</p>
-			<div v-show="note.cw == null || showContent" class="content">
-				<MkSubNoteContent class="text" :note="note"/>
+			<div v-show="note.cw == null || showContent">
+				<MkSubNoteContent :class="$style.text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -19,11 +19,12 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import { $i } from '@/account';
 
-const props = defineProps<{
+defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
 }>();
@@ -31,69 +32,63 @@ const props = defineProps<{
 const showContent = $ref(false);
 </script>
 
-<style lang="scss" scoped>
-.yohlumlk {
+<style lang="scss" module>
+.root {
 	display: flex;
 	margin: 0;
 	padding: 0;
 	overflow: clip;
 	font-size: 0.95em;
+}
 
-	&.min-width_350px {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-
-	&.min-width_500px {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-
-	> .avatar {
-		flex-shrink: 0;
-		display: block;
-		margin: 0 10px 0 0;
-		width: 40px;
-		height: 40px;
-		border-radius: 8px;
-	}
+.avatar {
+	flex-shrink: 0;
+	display: block;
+	margin: 0 10px 0 0;
+	width: 34px;
+	height: 34px;
+	border-radius: 8px;
+	position: sticky !important;
+	top: calc(16px + var(--stickyTop, 0px));
+	left: 0;
+}
 
-	> .main {
-		flex: 1;
-		min-width: 0;
+.main {
+	flex: 1;
+	min-width: 0;
+}
 
-		> .header {
-			margin-bottom: 2px;
-		}
+.header {
+	margin-bottom: 2px;
+}
 
-		> .body {
+.cw {
+	cursor: default;
+	display: block;
+	margin: 0;
+	padding: 0;
+	overflow-wrap: break-word;
+}
 
-			> .cw {
-				cursor: default;
-				display: block;
-				margin: 0;
-				padding: 0;
-				overflow-wrap: break-word;
+.text {
+	cursor: default;
+	margin: 0;
+	padding: 0;
+}
 
-				> .text {
-					margin-right: 8px;
-				}
-			}
+:global(.min-width_350px) {
+	.avatar {
+		margin: 0 10px 0 0;
+		width: 44px;
+		height: 44px;
+	}
+}
 
-			> .content {
-				> .text {
-					cursor: default;
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
+:global(.min-width_500px) {
+	.avatar {
+		margin: 0 12px 0 0;
+		width: 48px;
+		height: 48px;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index c59a67de7a10..a02487902965 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -60,8 +60,8 @@
 			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 		</div>
 	</div>
-	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-	<MkInfo v-if="annoyingPost" warn :class="$style.annoyingPost">{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
+	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.info">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
+	<MkInfo v-if="annoyingPost" warn :class="$style.info">{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
 	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
 		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
@@ -957,8 +957,12 @@ defineExpose({
 	background: var(--X4);
 }
 
-.hasNotSpecifiedMentions {
-	margin: 0 20px 16px 20px;
+.info {
+	margin: 0 20px 8px 20px;
+
+	&:last-child {
+		margin-bottom: 16px;
+	}
 }
 
 .cw,

From f430bb54ea3f22cb5549377688976894ee9e942a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 07:19:02 +0900
Subject: [PATCH 012/147] test

---
 packages/client/src/components/MkPostForm.vue | 19 +++++++------------
 .../src/components/MkPostFormDialog.vue       | 12 ++++++++++--
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index a02487902965..61b3134744be 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -15,8 +15,8 @@
 			</button>
 		</div>
 		<div :class="$style.headerRight">
-			<button v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
-				<span :class="$style.headerRightButtonIcon"><i class="ti ti-pencil"></i></span>
+			<button v-if="props.reopen" v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
+				<span :class="$style.headerRightButtonIcon"><i class="ti ti-notes"></i></span>
 				<span :class="$style.headerRightButtonText">{{ i18n.ts._tms.drafts }}</span>
 			</button>
 			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
@@ -139,6 +139,8 @@ const props = withDefaults(defineProps<{
 	fixed?: boolean;
 	autofocus?: boolean;
 	freezeAfterPosted?: boolean;
+	reopen?: (draft: DraftWithId) => void;
+	draft?: DraftWithId;
 }>(), {
 	initialVisibleUsers: () => [],
 	autofocus: true,
@@ -187,6 +189,7 @@ const typing = throttle(3000, () => {
 });
 
 let draftKey = $computed((): string | null => {
+	if (props.draft) return props.draft.id;
 	if (!$i?.id) return null;
 
 	let key = props.channel ? `ch:${props.channel.id}/` : '';
@@ -342,22 +345,14 @@ if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
 }
 
 const chooseDraft = (): void => {
+	if (!props.reopen) return;
 	new Promise<DraftWithId>(resolve => {
 		os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {}, {
 			chosen: (draft: DraftWithId) => {
 				resolve(draft);
 			},
 		}, 'closed');
-	}).then((draft: DraftWithId) => {
-		draftKey = draft.id;
-		text = draft.data.text;
-		useCw = draft.data.useCw;
-		cw = draft.data.cw;
-		visibility = draft.data.visibility;
-		localOnly = draft.data.localOnly;
-		files = draft.data.files;
-		poll = draft.data.poll;
-	});
+	}).then(props.reopen);
 };
 
 const watchForDraft = (): void => {
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index b5f183db7ae4..1514f8ed6091 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="modal?.close()" @closed="onModalClosed()">
-	<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
+	<MkPostForm :key="reloadCount" style="margin: 0 auto auto auto;" v-bind="{...props, reopen, draft}" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
 </MkModal>
 </template>
 
@@ -9,6 +9,7 @@ import { } from 'vue';
 import * as misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
+import { DraftWithId } from '@/scripts/tms/drafts';
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -31,8 +32,10 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
+let reloadCount = $ref(0);
+let draft = $ref<DraftWithId>();
+
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
-const form = $shallowRef<InstanceType<typeof MkPostForm>>();
 
 const onPosted = (): void => {
 	modal?.close({
@@ -43,4 +46,9 @@ const onPosted = (): void => {
 const onModalClosed = (): void => {
 	emit('closed');
 };
+
+const reopen = (_draft: DraftWithId): void => {
+	draft = _draft;
+	reloadCount++;
+};
 </script>

From e3fe253bbef3384f153fa785d88706e2895d92a3 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 07:25:29 +0900
Subject: [PATCH 013/147] Revert "test"

This reverts commit f430bb54ea3f22cb5549377688976894ee9e942a.
---
 packages/client/src/components/MkPostForm.vue | 19 ++++++++++++-------
 .../src/components/MkPostFormDialog.vue       | 12 ++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 61b3134744be..a02487902965 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -15,8 +15,8 @@
 			</button>
 		</div>
 		<div :class="$style.headerRight">
-			<button v-if="props.reopen" v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
-				<span :class="$style.headerRightButtonIcon"><i class="ti ti-notes"></i></span>
+			<button v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
+				<span :class="$style.headerRightButtonIcon"><i class="ti ti-pencil"></i></span>
 				<span :class="$style.headerRightButtonText">{{ i18n.ts._tms.drafts }}</span>
 			</button>
 			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
@@ -139,8 +139,6 @@ const props = withDefaults(defineProps<{
 	fixed?: boolean;
 	autofocus?: boolean;
 	freezeAfterPosted?: boolean;
-	reopen?: (draft: DraftWithId) => void;
-	draft?: DraftWithId;
 }>(), {
 	initialVisibleUsers: () => [],
 	autofocus: true,
@@ -189,7 +187,6 @@ const typing = throttle(3000, () => {
 });
 
 let draftKey = $computed((): string | null => {
-	if (props.draft) return props.draft.id;
 	if (!$i?.id) return null;
 
 	let key = props.channel ? `ch:${props.channel.id}/` : '';
@@ -345,14 +342,22 @@ if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
 }
 
 const chooseDraft = (): void => {
-	if (!props.reopen) return;
 	new Promise<DraftWithId>(resolve => {
 		os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {}, {
 			chosen: (draft: DraftWithId) => {
 				resolve(draft);
 			},
 		}, 'closed');
-	}).then(props.reopen);
+	}).then((draft: DraftWithId) => {
+		draftKey = draft.id;
+		text = draft.data.text;
+		useCw = draft.data.useCw;
+		cw = draft.data.cw;
+		visibility = draft.data.visibility;
+		localOnly = draft.data.localOnly;
+		files = draft.data.files;
+		poll = draft.data.poll;
+	});
 };
 
 const watchForDraft = (): void => {
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index 1514f8ed6091..b5f183db7ae4 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="modal?.close()" @closed="onModalClosed()">
-	<MkPostForm :key="reloadCount" style="margin: 0 auto auto auto;" v-bind="{...props, reopen, draft}" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
+	<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
 </MkModal>
 </template>
 
@@ -9,7 +9,6 @@ import { } from 'vue';
 import * as misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
-import { DraftWithId } from '@/scripts/tms/drafts';
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -32,10 +31,8 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-let reloadCount = $ref(0);
-let draft = $ref<DraftWithId>();
-
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
+const form = $shallowRef<InstanceType<typeof MkPostForm>>();
 
 const onPosted = (): void => {
 	modal?.close({
@@ -46,9 +43,4 @@ const onPosted = (): void => {
 const onModalClosed = (): void => {
 	emit('closed');
 };
-
-const reopen = (_draft: DraftWithId): void => {
-	draft = _draft;
-	reloadCount++;
-};
 </script>

From abc8f0da0b1a00cc111f0b7c64bd3f683c54e5fc Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 07:25:56 +0900
Subject: [PATCH 014/147] tweak

---
 packages/client/src/components/MkPostForm.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index a02487902965..73317eb768ab 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -16,8 +16,7 @@
 		</div>
 		<div :class="$style.headerRight">
 			<button v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
-				<span :class="$style.headerRightButtonIcon"><i class="ti ti-pencil"></i></span>
-				<span :class="$style.headerRightButtonText">{{ i18n.ts._tms.drafts }}</span>
+				<span :class="$style.headerRightButtonIcon"><i class="ti ti-notes"></i></span>
 			</button>
 			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
 				<span v-if="!localOnly" :class="$style.headerRightButtonIcon"><i class="ti ti-rocket"></i></span>

From b1e596357e608a4d9c4e71ad1db22bf0ef33e0c4 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 08:09:10 +0900
Subject: [PATCH 015/147] test

---
 packages/client/src/components/MkPostForm.vue | 168 ++++++++++++------
 packages/client/src/scripts/tms/drafts.ts     |  13 +-
 2 files changed, 122 insertions(+), 59 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 73317eb768ab..589b687c091a 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1,7 +1,7 @@
 <template>
 <div
 	v-size="{ max: [310, 500] }" class="gafaadew"
-	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal, [$style.loading]: loading }]"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -179,21 +179,56 @@ let annoyingPost = $ref(false);
 let recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
 let imeText = $ref('');
 
+let reply = $ref(props.reply);
+let renote = $ref(props.renote);
+let channel = $ref(props.channel);
+let draft = $ref<DraftWithId>();
+let loading = $ref(false);
+
+watch($$(draft), async () => {
+	if (!draft) return;
+	if (loading) return;
+
+	loading = true;
+
+	const promises: Promise<unknown>[] = [];
+	if (draft.data.replyId) {
+		promises.push(os.api('notes/show', { noteId: draft.data.replyId }).then(_reply => reply = _reply));
+	}
+	if (draft.data.renoteId) {
+		promises.push(os.api('notes/show', { noteId: draft.data.renoteId }).then(_renote => renote = _renote));
+	}
+	if (draft.data.channelId) {
+		promises.push(os.api('channels/show', { channelId: draft.data.channelId }).then(_channel => channel = _channel));
+	}
+
+	text = draft.data.text;
+	useCw = draft.data.useCw;
+	cw = draft.data.cw;
+	visibility = draft.data.visibility;
+	localOnly = draft.data.localOnly;
+	files = draft.data.files;
+	poll = draft.data.poll;
+
+	Promise.allSettled(promises).then(() => loading = false);
+}, { deep: true });
+
 const typing = throttle(3000, () => {
-	if (props.channel) {
-		stream.send('typingOnChannel', { channel: props.channel.id });
+	if (channel) {
+		stream.send('typingOnChannel', { channel: channel.id });
 	}
 });
 
-let draftKey = $computed((): string | null => {
+const draftKey = $computed((): string | null => {
+	if (draft) return draft.id;
 	if (!$i?.id) return null;
 
-	let key = props.channel ? `ch:${props.channel.id}/` : '';
+	let key = channel ? `ch:${channel.id}/` : '';
 
-	if (props.renote) {
-		key += `rn:${props.renote.id}`;
-	} else if (props.reply) {
-		key += `re:${props.reply.id}`;
+	if (renote) {
+		key += `rn:${renote.id}`;
+	} else if (reply) {
+		key += `re:${reply.id}`;
 	} else {
 		key += `note:${$i.id}`;
 	}
@@ -202,11 +237,11 @@ let draftKey = $computed((): string | null => {
 });
 
 const placeholder = $computed((): string => {
-	if (props.renote) {
+	if (renote) {
 		return i18n.ts._postForm.quotePlaceholder;
-	} else if (props.reply) {
+	} else if (reply) {
 		return i18n.ts._postForm.replyPlaceholder;
-	} else if (props.channel) {
+	} else if (channel) {
 		return i18n.ts._postForm.channelPlaceholder;
 	} else {
 		const xs = [
@@ -222,9 +257,9 @@ const placeholder = $computed((): string => {
 });
 
 const submitText = $computed((): string => {
-	return props.renote
+	return renote
 		? i18n.ts.quote
-		: props.reply
+		: reply
 			? i18n.ts.reply
 			: i18n.ts.note;
 });
@@ -239,7 +274,7 @@ const maxTextLength = $computed((): number => {
 
 const canPost = $computed((): boolean => {
 	return !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
+		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
 		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);
 });
@@ -272,13 +307,13 @@ if (props.mention) {
 	text += ' ';
 }
 
-if (props.reply && (props.reply.user.username !== $i?.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
-	text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
+if (reply && (reply.user.username !== $i?.username || (reply.user.host != null && reply.user.host !== host))) {
+	text = `@${reply.user.username}${reply.user.host != null ? '@' + toASCII(reply.user.host) : ''} `;
 }
 
-if (props.reply && props.reply.text != null) {
-	const ast = mfm.parse(props.reply.text);
-	const otherHost = props.reply.user.host;
+if (reply && reply.text != null) {
+	const ast = mfm.parse(reply.text);
+	const otherHost = reply.user.host;
 
 	for (const x of extractMentions(ast)) {
 		const mention = x.host ?
@@ -297,32 +332,32 @@ if (props.reply && props.reply.text != null) {
 	}
 }
 
-if (props.channel) {
+if (channel) {
 	visibility = 'public';
 	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 }
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
-	if (props.reply.visibility === 'home' && visibility === 'followers') {
+if (reply && ['home', 'followers', 'specified'].includes(reply.visibility)) {
+	if (reply.visibility === 'home' && visibility === 'followers') {
 		visibility = 'followers';
-	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
+	} else if (['home', 'followers'].includes(reply.visibility) && visibility === 'specified') {
 		visibility = 'specified';
 	} else {
-		visibility = props.reply.visibility;
+		visibility = reply.visibility;
 	}
 
 	if (visibility === 'specified') {
-		if (props.reply.visibleUserIds) {
+		if (reply.visibleUserIds) {
 			os.api('users/show', {
-				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i?.id && uid !== props.reply?.userId),
+				userIds: reply.visibleUserIds.filter(uid => uid !== $i?.id && uid !== reply?.userId),
 			}).then(users => {
 				users.forEach(pushVisibleUser);
 			});
 		}
 
-		if (props.reply.userId !== $i?.id) {
-			os.api('users/show', { userId: props.reply.userId }).then(user => {
+		if (reply.userId !== $i?.id) {
+			os.api('users/show', { userId: reply.userId }).then(user => {
 				pushVisibleUser(user);
 			});
 		}
@@ -335,27 +370,20 @@ if (props.specified) {
 }
 
 // keep cw when reply
-if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
+if (defaultStore.state.keepCw && reply && reply.cw) {
 	useCw = true;
-	cw = props.reply.cw;
+	cw = reply.cw;
 }
 
 const chooseDraft = (): void => {
 	new Promise<DraftWithId>(resolve => {
 		os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {}, {
-			chosen: (draft: DraftWithId) => {
-				resolve(draft);
+			chosen: (_draft: DraftWithId) => {
+				resolve(_draft);
 			},
 		}, 'closed');
-	}).then((draft: DraftWithId) => {
-		draftKey = draft.id;
-		text = draft.data.text;
-		useCw = draft.data.useCw;
-		cw = draft.data.cw;
-		visibility = draft.data.visibility;
-		localOnly = draft.data.localOnly;
-		files = draft.data.files;
-		poll = draft.data.poll;
+	}).then((_draft: DraftWithId) => {
+		draft = _draft;
 	});
 };
 
@@ -471,7 +499,7 @@ const upload = (file: File, name?: string): void => {
 };
 
 const setVisibility = (): void => {
-	if (props.channel) {
+	if (channel) {
 		visibility = 'public';
 		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 		return;
@@ -536,7 +564,7 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	const paste = ev.clipboardData.getData('text');
 	const path = url + '/notes/';
 
-	if (!props.renote && !quoteId && paste.startsWith(path)) {
+	if (!renote && !quoteId && paste.startsWith(path)) {
 		ev.preventDefault();
 
 		os.confirm({
@@ -608,7 +636,18 @@ const onDrop = (ev: DragEvent): void => {
 	//#endregion
 };
 
-const saveDraft = (): void => _setDraft(draftKey, { text, useCw, cw, visibility, localOnly, files, poll });
+const saveDraft = (): void => _setDraft(draftKey, {
+	text,
+	useCw,
+	cw,
+	visibility,
+	localOnly,
+	files,
+	poll,
+	replyId: reply?.id ?? null,
+	renoteId: renote?.id ?? quoteId ?? null,
+	channelId: channel?.id ?? null,
+});
 
 const deleteDraft = (): void => _deleteDraft(draftKey);
 
@@ -626,9 +665,9 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 	let postData = {
 		text: text === '' ? undefined : text,
 		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
-		replyId: props.reply ? props.reply.id : undefined,
-		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
-		channelId: props.channel ? props.channel.id : undefined,
+		replyId: reply ? reply.id : undefined,
+		renoteId: renote ? renote.id : quoteId ? quoteId : undefined,
+		channelId: channel ? channel.id : undefined,
 		poll: poll,
 		cw: useCw ? cw ?? '' : undefined,
 		localOnly: localOnly,
@@ -749,15 +788,15 @@ onMounted(() => {
 	nextTick(() => {
 		// 書きかけの投稿を復元
 		if (!props.instant && !props.mention && !props.specified) {
-			const draft = _getDraft(draftKey);
-			if (draft) {
-				text = draft.data.text;
-				useCw = draft.data.useCw;
-				cw = draft.data.cw;
-				visibility = draft.data.visibility;
-				localOnly = draft.data.localOnly;
-				files = draft.data.files;
-				poll = draft.data.poll;
+			const draft_ = _getDraft(draftKey);
+			if (draft_) {
+				text = draft_.data.text;
+				useCw = draft_.data.useCw;
+				cw = draft_.data.cw;
+				visibility = draft_.data.visibility;
+				localOnly = draft_.data.localOnly;
+				files = draft_.data.files;
+				poll = draft_.data.poll;
 			}
 		}
 
@@ -801,6 +840,21 @@ defineExpose({
 		width: 100%;
 		max-width: 520px;
 	}
+
+	&.loading {
+		user-select: none;
+
+		::before {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: 10000;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+		}
+	}
 }
 
 //#region header
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index cc2e50a2eca4..241efafcbd05 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -18,6 +18,9 @@ type DraftData = {
 		expiresAt: string | null;
 		expiredAfter: string | null;
 	} | null;
+	replyId: string | null;
+	renoteId: string | null;
+	channelId: string | null;
 };
 
 type LsDraft = {
@@ -62,7 +65,7 @@ const loadLsDrafts = (): Record<string, LsDraft | undefined> => parseObject<Reco
 const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => localStorage.setItem(LS_DRAFTS_KEY, JSON.stringify(drafts));
 
 const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
-	const { text, useCw, cw, visibility, localOnly, files, poll } = lsDraft;
+	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId } = lsDraft;
 	return {
 		text: text ?? '',
 		useCw: useCw ?? false,
@@ -71,6 +74,9 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 		localOnly: localOnly ?? getLocalOnly(),
 		files: files ?? [],
 		poll: poll ?? null,
+		replyId: replyId ?? null,
+		renoteId: renoteId ?? null,
+		channelId: channelId ?? null,
 	};
 };
 
@@ -106,7 +112,7 @@ export const setDraft = (draftKey: string | null, data: DraftData): void => {
 
 	const drafts = loadLsDrafts();
 
-	const { text, useCw, cw, visibility, localOnly, files, poll } = data;
+	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId } = data;
 
 	const draftData: LsDraft['data'] = {
 		text: text || undefined,
@@ -116,6 +122,9 @@ export const setDraft = (draftKey: string | null, data: DraftData): void => {
 		localOnly: localOnly !== getLocalOnly() ? localOnly : undefined,
 		files: files.length ? files : undefined,
 		poll: poll ?? undefined,
+		replyId: replyId ?? undefined,
+		renoteId: renoteId ?? undefined,
+		channelId: channelId ?? undefined,
 	};
 
 	if (isEmptyObject(draftData)) return deleteDraft(draftKey);

From d631fb9c81673537f12bc39c95e69a47b6d9836f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 11 Apr 2023 08:52:37 +0900
Subject: [PATCH 016/147] fix

---
 packages/client/src/components/MkPostForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 589b687c091a..2074a99abaa5 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -273,7 +273,7 @@ const maxTextLength = $computed((): number => {
 });
 
 const canPost = $computed((): boolean => {
-	return !posting && !posted &&
+	return !loading && !posting && !posted &&
 		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
 		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);

From 86e6afea3ef05bc46ed36f3788a9035575185953 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 12 Apr 2023 16:02:59 +0900
Subject: [PATCH 017/147] fix drafts.ts

---
 packages/client/src/scripts/tms/drafts.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 241efafcbd05..7a3d92b2e85b 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -56,7 +56,9 @@ export type MessageDraftWithId = MessageDraft & {
 	id: string;
 };
 
-const isEmptyObject = (obj: Record<string, unknown>): obj is Record<string, never> => !Object.values(obj).some(v => v !== undefined);
+const isEmptyObject = <T extends Record<string, unknown>>(obj: T, ignoreKeys?: (keyof T)[]): obj is Record<keyof T, never> => {
+	return !Object.entries(obj).some(([k, v]) => !(ignoreKeys ?? []).includes(k) && typeof v !== 'undefined');
+};
 
 const getVisibility = (): Misskey.entities.Note['visibility'] => defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
 const getLocalOnly = (): boolean => defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
@@ -127,7 +129,7 @@ export const setDraft = (draftKey: string | null, data: DraftData): void => {
 		channelId: channelId ?? undefined,
 	};
 
-	if (isEmptyObject(draftData)) return deleteDraft(draftKey);
+	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId'])) return deleteDraft(draftKey);
 
 	saveLsDrafts({
 		...drafts,
@@ -198,7 +200,7 @@ export const setMessageDraft = (draftKey: string | null, data: MessageDraftData)
 		file: file ?? undefined,
 	};
 
-	if (isEmptyObject(draftData)) return deleteMessageDraft(draftKey);
+	if (isEmptyObject(draftData, [])) return deleteMessageDraft(draftKey);
 
 	saveLsMessageDrafts({
 		...drafts,

From 3309bac10dd89f36eeb511792092558e331a3a50 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 13 Apr 2023 03:15:27 +0900
Subject: [PATCH 018/147] fix

---
 .../src/components/TmsDraftsList.draft.vue    | 43 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index e5714edf6870..0eb6acd1b454 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -1,6 +1,12 @@
 <template>
 <div :class="$style.root" @click="draftMenu">
-	<div :class="$style.text">{{ props.draft.data.text }}</div>
+	<div :class="$style.labels">
+		<span v-if="props.draft.data.visibility !== 'public'" :class="$style.label">{{ i18n.ts._visibility[props.draft.data.visibility] }}</span>
+		<span v-if="props.draft.data.localOnly" :class="$style.label">{{ i18n.ts._visibility.disableFederation }}</span>
+		<span v-if="props.draft.data.replyId" :class="$style.label">{{ i18n.ts.reply }}</span>
+		<span v-if="props.draft.data.renoteId" :class="$style.label">{{ i18n.ts.quote }}</span>
+	</div>
+	<div :class="[$style.text, { [$style.textEmpty]: !text }]">{{ text || 'Empty' }}</div>
 </div>
 </template>
 
@@ -8,6 +14,7 @@
 import { } from 'vue';
 import * as os from '@/os';
 import { DraftWithId } from '@/scripts/tms/drafts';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	draft: DraftWithId;
@@ -19,6 +26,8 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
+const text = $ref(`${props.draft.data.cw || ''}\n${props.draft.data.text || ''}`.trim());
+
 const draftMenu = (ev: MouseEvent): void => {
 	const el = ev.currentTarget ?? ev.target;
 	if (!(el instanceof HTMLElement)) return;
@@ -45,6 +54,38 @@ const draftMenu = (ev: MouseEvent): void => {
 .root {
 	padding: 16px;
 	background: var(--panel);
+	color: var(--fg);
+	border: solid 1px var(--divider);
+	border-radius: 8px;
 	user-select: none;
+	margin-bottom: var(--margin);
+}
+
+.labels {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	font-size: 0.9em;
+	margin-bottom: 4px;
+}
+
+.label {
+	border: solid 1px var(--divider);
+	border-radius: 999px;
+	margin-right: 4px;
+	padding: 3px 8px;
+}
+
+.text {
+	overflow: hidden;
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+}
+
+.textEmpty {
+	opacity: 0.5;
 }
 </style>

From 41067dac7ad3e4f13b752e3b24323ecae9ea2a99 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 13 Apr 2023 16:53:03 +0900
Subject: [PATCH 019/147] tweak TmsDraftsList.draft

---
 .../src/components/TmsDraftsList.draft.vue       | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 0eb6acd1b454..b572269c9283 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -1,12 +1,9 @@
 <template>
 <div :class="$style.root" @click="draftMenu">
-	<div :class="$style.labels">
-		<span v-if="props.draft.data.visibility !== 'public'" :class="$style.label">{{ i18n.ts._visibility[props.draft.data.visibility] }}</span>
-		<span v-if="props.draft.data.localOnly" :class="$style.label">{{ i18n.ts._visibility.disableFederation }}</span>
-		<span v-if="props.draft.data.replyId" :class="$style.label">{{ i18n.ts.reply }}</span>
-		<span v-if="props.draft.data.renoteId" :class="$style.label">{{ i18n.ts.quote }}</span>
-	</div>
 	<div :class="[$style.text, { [$style.textEmpty]: !text }]">{{ text || 'Empty' }}</div>
+	<div :class="$style.files">
+		<ImgWithBlurhash v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in props.draft.data.files" :key="fileId" :src="src" :hash="hash" :alt="comment || name" :title="comment || name"/>
+	</div>
 </div>
 </template>
 
@@ -14,7 +11,7 @@
 import { } from 'vue';
 import * as os from '@/os';
 import { DraftWithId } from '@/scripts/tms/drafts';
-import { i18n } from '@/i18n';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 const props = defineProps<{
 	draft: DraftWithId;
@@ -88,4 +85,9 @@ const draftMenu = (ev: MouseEvent): void => {
 .textEmpty {
 	opacity: 0.5;
 }
+
+.files {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+}
 </style>

From f2b5b6fe841ce0eaa9785caa79f8606f230d69b7 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 13 Apr 2023 17:01:35 +0900
Subject: [PATCH 020/147] fix

---
 .../client/src/components/TmsDraftsList.draft.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index b572269c9283..a8221de769df 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -2,7 +2,15 @@
 <div :class="$style.root" @click="draftMenu">
 	<div :class="[$style.text, { [$style.textEmpty]: !text }]">{{ text || 'Empty' }}</div>
 	<div :class="$style.files">
-		<ImgWithBlurhash v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in props.draft.data.files" :key="fileId" :src="src" :hash="hash" :alt="comment || name" :title="comment || name"/>
+		<ImgWithBlurhash
+			v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in props.draft.data.files"
+			:key="fileId"
+			:src="src"
+			:hash="hash"
+			:alt="comment || name"
+			:title="comment || name"
+			:class="$style.file"
+		/>
 	</div>
 </div>
 </template>
@@ -89,5 +97,10 @@ const draftMenu = (ev: MouseEvent): void => {
 .files {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+	gap: 4px;
+}
+
+.file {
+	aspect-ratio: 1 / 1;
 }
 </style>

From c5349e9c14b03cf99026bb9bce8a9bb21bc3e391 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 13 Apr 2023 17:13:40 +0900
Subject: [PATCH 021/147] tweak

---
 .../src/components/TmsDraftsList.draft.vue    | 37 +++++++++++--------
 .../client/src/components/TmsDraftsList.vue   |  7 +++-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index a8221de769df..8a6361acc6ef 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -12,6 +12,10 @@
 			:class="$style.file"
 		/>
 	</div>
+	<div :class="$style.labels">
+		<span v-if="props.draft.data.renoteId" :class="$style.label">{{ i18n.ts.quote }}</span>
+		<span v-if="props.draft.data.poll" :class="$style.label">{{ i18n.ts.poll }}</span>
+	</div>
 </div>
 </template>
 
@@ -19,6 +23,7 @@
 import { } from 'vue';
 import * as os from '@/os';
 import { DraftWithId } from '@/scripts/tms/drafts';
+import { i18n } from '@/i18n';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 const props = defineProps<{
@@ -57,28 +62,15 @@ const draftMenu = (ev: MouseEvent): void => {
 
 <style lang="scss" module>
 .root {
+	display: grid;
+	grid-auto-flow: row;
+	gap: 4px;
 	padding: 16px;
 	background: var(--panel);
 	color: var(--fg);
 	border: solid 1px var(--divider);
 	border-radius: 8px;
 	user-select: none;
-	margin-bottom: var(--margin);
-}
-
-.labels {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px;
-	font-size: 0.9em;
-	margin-bottom: 4px;
-}
-
-.label {
-	border: solid 1px var(--divider);
-	border-radius: 999px;
-	margin-right: 4px;
-	padding: 3px 8px;
 }
 
 .text {
@@ -103,4 +95,17 @@ const draftMenu = (ev: MouseEvent): void => {
 .file {
 	aspect-ratio: 1 / 1;
 }
+
+.labels {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	font-size: 0.9em;
+}
+
+.label {
+	border: solid 1px var(--divider);
+	border-radius: 999px;
+	padding: 3px 8px;
+}
 </style>
diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index b6e6d72ace44..91dee75b87f3 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -15,7 +15,7 @@
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 				<div>{{ i18n.ts.nothing }}</div>
 			</div>
-			<div v-else>
+			<div v-else :class="$style.drastsList">
 				<TmsDraft v-for="draftItem in draftsList" :key="draftItem.id" :draft="draftItem" @chosen="chosen" @deleted="deleted"/>
 			</div>
 		</div>
@@ -58,4 +58,9 @@ const deleted = (draftId: DraftWithId['id']): void => {
 </script>
 
 <style lang="scss" module>
+.draftsList {
+	display: grid;
+	grid-auto-flow: row;
+	gap: var(--margin);
+}
 </style>

From a0affda33cae9f2a2a62194ac0932ca43d2c5218 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 13 Apr 2023 18:49:12 +0900
Subject: [PATCH 022/147] refactor TmsDraftsList

---
 packages/client/src/components/TmsDraftsList.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index 91dee75b87f3..7863ef940785 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -37,13 +37,7 @@ const emit = defineEmits<{
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
-let draftsList: DraftWithId[] = $ref([]);
-
-const init = (): void => {
-	draftsList = getAllDraft();
-};
-
-init();
+const draftsList = $ref<DraftWithId[]>(getAllDraft());
 
 const chosen = (draftId: DraftWithId['id']): void => {
 	const draft = draftsList.find(d => d.id === draftId);
@@ -53,7 +47,8 @@ const chosen = (draftId: DraftWithId['id']): void => {
 
 const deleted = (draftId: DraftWithId['id']): void => {
 	deleteDraft(draftId);
-	init();
+	const index = draftsList.findIndex(({ id }) => draftId === id);
+	if (index !== -1) draftsList.splice(index, 1);
 };
 </script>
 

From b88a71e79cfcb0c2fec307a105f43a00a972dfa1 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 13 Apr 2023 18:50:24 +0900
Subject: [PATCH 023/147] tweak

---
 packages/client/src/components/TmsDraftsList.draft.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 8a6361acc6ef..2c08235c3506 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -64,7 +64,7 @@ const draftMenu = (ev: MouseEvent): void => {
 .root {
 	display: grid;
 	grid-auto-flow: row;
-	gap: 4px;
+	gap: 6px;
 	padding: 16px;
 	background: var(--panel);
 	color: var(--fg);

From 66f864629a15352c8e84fe43ee1245fe883eef50 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 14 Apr 2023 01:19:19 +0900
Subject: [PATCH 024/147] fix: MkPollEditor

---
 .../client/src/components/MkPollEditor.vue    | 76 ++++++++++---------
 .../client/src/scripts/format-time-string.ts  | 50 ++++++------
 packages/client/src/scripts/tms/drafts.ts     |  8 +-
 3 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index f5c0b4d84a24..ab649ef4ed5b 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -5,8 +5,7 @@
 	</p>
 	<ul>
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)">
-			</MkInput>
+			<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event as string)"/>
 			<button class="_button" @click="remove(i)">
 				<i class="ti ti-x"></i>
 			</button>
@@ -57,21 +56,19 @@ import { formatDateTimeString } from '@/scripts/format-time-string';
 import { addTime } from '@/scripts/time';
 import { i18n } from '@/i18n';
 
+export type EditedPoll = {
+	choices: string[];
+	multiple: boolean;
+	expiresAt: number | null;
+	expiredAfter: number | null;
+};
+
 const props = defineProps<{
-	modelValue: {
-		expiresAt: string;
-		expiredAfter: number;
-		choices: string[];
-		multiple: boolean;
-	};
+	modelValue: EditedPoll;
 }>();
+
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: {
-		expiresAt: string;
-		expiredAfter: number;
-		choices: string[];
-		multiple: boolean;
-	}): void;
+	(ev: 'update:modelValue', v: EditedPoll): void;
 }>();
 
 const choices = ref(props.modelValue.choices);
@@ -80,14 +77,27 @@ const expiration = ref('infinite');
 const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
 const atTime = ref('00:00');
 const after = ref(0);
-const unit = ref('second');
+const unit = ref<'day' | 'hour' | 'minute' | 'second'>('second');
 
 if (props.modelValue.expiresAt) {
 	expiration.value = 'at';
-	atDate.value = atTime.value = props.modelValue.expiresAt;
+	atDate.value = formatDateTimeString(new Date(props.modelValue.expiresAt), 'yyyy-MM-dd');
+	atTime.value = formatDateTimeString(new Date(props.modelValue.expiresAt), 'HH:mm');
 } else if (typeof props.modelValue.expiredAfter === 'number') {
 	expiration.value = 'after';
-	after.value = props.modelValue.expiredAfter / 1000;
+	if (props.modelValue.expiredAfter % 86400000 === 0) {
+		unit.value = 'day';
+		after.value = props.modelValue.expiredAfter / 86400000;
+	} else if (props.modelValue.expiredAfter % 3600000 === 0) {
+		unit.value = 'hour';
+		after.value = props.modelValue.expiredAfter / 3600000;
+	} else if (props.modelValue.expiredAfter % 60000 === 0) {
+		unit.value = 'minute';
+		after.value = props.modelValue.expiredAfter / 60000;
+	} else {
+		unit.value = 'second';
+		after.value = props.modelValue.expiredAfter / 1000;
+	}
 } else {
 	expiration.value = 'infinite';
 }
@@ -98,31 +108,25 @@ const onInput = (i: number, value: string): void => {
 
 const add = (): void => {
 	choices.value.push('');
-	// TODO
-	// nextTick(() => {
-	//   (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
-	// });
 };
 
 const remove = (i: number): void => {
 	choices.value = choices.value.filter((_, _i) => _i !== i);
 };
 
-const get = (): unknown => {
-	const calcAt = (): unknown => {
-		return new Date(`${atDate.value} ${atTime.value}`).getTime();
+const get = (): EditedPoll => {
+	const calcAt = (): number | null => {
+		const unixtime = new Date(`${atDate.value} ${atTime.value}`).getTime();
+		if (Number.isNaN(unixtime)) return null;
+		return unixtime;
 	};
 
-	const calcAfter = (): unknown => {
-		let base = parseInt(after.value);
+	const calcAfter = (): number | null => {
 		switch (unit.value) {
-			case 'day': base *= 24;
-				// fallthrough
-			case 'hour': base *= 60;
-				// fallthrough
-			case 'minute': base *= 60;
-				// fallthrough
-			case 'second': return base *= 1000;
+			case 'day': return after.value * 86400000;
+			case 'hour': return after.value * 3600000;
+			case 'minute': return after.value * 60000;
+			case 'second': return after.value * 1000;
 			default: return null;
 		}
 	};
@@ -130,10 +134,8 @@ const get = (): unknown => {
 	return {
 		choices: choices.value,
 		multiple: multiple.value,
-		...(
-			expiration.value === 'at' ? { expiresAt: calcAt() } :
-			expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
-		),
+		expiresAt: expiration.value === 'at' ? calcAt() : null,
+		expiredAfter: expiration.value === 'after' ? calcAfter() : null,
 	};
 };
 
diff --git a/packages/client/src/scripts/format-time-string.ts b/packages/client/src/scripts/format-time-string.ts
index fb4718c00757..7c153656e8ec 100644
--- a/packages/client/src/scripts/format-time-string.ts
+++ b/packages/client/src/scripts/format-time-string.ts
@@ -1,4 +1,4 @@
-const defaultLocaleStringFormats: {[index: string]: string} = {
+const defaultLocaleStringFormats = {
 	'weekday': 'narrow',
 	'era': 'narrow',
 	'year': 'numeric',
@@ -7,44 +7,48 @@ const defaultLocaleStringFormats: {[index: string]: string} = {
 	'hour': 'numeric',
 	'minute': 'numeric',
 	'second': 'numeric',
-	'timeZoneName': 'short'
+	'timeZoneName': 'short',
 };
 
-function formatLocaleString(date: Date, format: string): string {
+const formatLocaleString = (date: Date, format: string): string => {
 	return format.replace(/\{\{(\w+)(:(\w+))?\}\}/g, (match: string, kind: string, unused?, option?: string) => {
-		if (['weekday', 'era', 'year', 'month', 'day', 'hour', 'minute', 'second', 'timeZoneName'].includes(kind)) {
+		if (Object.keys(defaultLocaleStringFormats).includes(kind)) {
 			return date.toLocaleString(window.navigator.language, { [kind]: option ? option : defaultLocaleStringFormats[kind] });
 		} else {
 			return match;
 		}
 	});
-}
+};
+
+export const formatDateTimeString = (date: Date, format: string): string => {
+	const padNumber = (n: number | string, maxLength?: number): string => {
+		return n.toString().padStart(maxLength ?? 0, '0').slice(-(maxLength ?? 0));
+	};
 
-export function formatDateTimeString(date: Date, format: string): string {
 	return format
-		.replace(/yyyy/g, date.getFullYear().toString())
-		.replace(/yy/g, date.getFullYear().toString().slice(-2))
+		.replace(/yyyy/g, padNumber(date.getFullYear()))
+		.replace(/yy/g, padNumber(date.getFullYear(), 2))
 		.replace(/MMMM/g, date.toLocaleString(window.navigator.language, { month: 'long' }))
 		.replace(/MMM/g, date.toLocaleString(window.navigator.language, { month: 'short' }))
-		.replace(/MM/g, (`0${date.getMonth() + 1}`).slice(-2))
-		.replace(/M/g, (date.getMonth() + 1).toString())
-		.replace(/dd/g, (`0${date.getDate()}`).slice(-2))
-		.replace(/d/g, date.getDate().toString())
-		.replace(/HH/g, (`0${date.getHours()}`).slice(-2))
-		.replace(/H/g, date.getHours().toString())
-		.replace(/hh/g, (`0${(date.getHours() % 12) || 12}`).slice(-2))
-		.replace(/h/g, ((date.getHours() % 12) || 12).toString())
-		.replace(/mm/g, (`0${date.getMinutes()}`).slice(-2))
-		.replace(/m/g, date.getMinutes().toString())
-		.replace(/ss/g, (`0${date.getSeconds()}`).slice(-2))
-		.replace(/s/g, date.getSeconds().toString())
+		.replace(/MM/g, padNumber(date.getMonth() + 1, 2))
+		.replace(/M/g, padNumber(date.getMonth() + 1))
+		.replace(/dd/g, padNumber(date.getDate(), 2))
+		.replace(/d/g, padNumber(date.getDate()))
+		.replace(/HH/g, padNumber(date.getHours(), 2))
+		.replace(/H/g, padNumber(date.getHours()))
+		.replace(/hh/g, padNumber((date.getHours() % 12) || 12, 2))
+		.replace(/h/g, padNumber((date.getHours() % 12) || 12))
+		.replace(/mm/g, padNumber(date.getMinutes(), 2))
+		.replace(/m/g, padNumber(date.getMinutes()))
+		.replace(/ss/g, padNumber(date.getSeconds(), 2))
+		.replace(/s/g, padNumber(date.getSeconds()))
 		.replace(/tt/g, date.getHours() >= 12 ? 'PM' : 'AM');
-}
+};
 
-export function formatTimeString(date: Date, format: string): string {
+export const formatTimeString = (date: Date, format: string): string => {
 	return format.replace(/\[(([^\[]|\[\])*)\]|(([yMdHhmst])\4{0,3})/g, (match: string, localeformat?: string, unused?, datetimeformat?: string) => {
 		if (localeformat) return formatLocaleString(date, localeformat);
 		if (datetimeformat) return formatDateTimeString(date, datetimeformat);
 		return match;
 	});
-}
+};
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 7a3d92b2e85b..614c3564d44a 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -1,6 +1,7 @@
 import * as Misskey from 'misskey-js';
 import { defaultStore } from '@/store';
 import { parseObject } from '@/scripts/tms/parse';
+import { EditedPoll } from '@/components/MkPollEditor.vue';
 
 const LS_DRAFTS_KEY = 'tmsDrafts';
 const LS_MESSAGE_DRAFTS_KEY = 'tmsMessageDrafts';
@@ -12,12 +13,7 @@ type DraftData = {
 	visibility: Misskey.entities.Note['visibility'];
 	localOnly: boolean;
 	files: Misskey.entities.DriveFile[];
-	poll: {
-		choices: string[];
-		multiple: boolean;
-		expiresAt: string | null;
-		expiredAfter: string | null;
-	} | null;
+	poll: EditedPoll | null;
 	replyId: string | null;
 	renoteId: string | null;
 	channelId: string | null;

From 901409d48edcdf97deb9c760902d9e9ae7bd074a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 04:09:39 +0900
Subject: [PATCH 025/147] feat: TmsPostForm

- drop MkPostForm
- change cw(empty): null -> ''
- tweak TmsDraftsList
---
 packages/client/src/components/MkPostForm.vue | 1184 ---------------
 .../src/components/MkPostFormDialog.vue       |    6 +-
 .../src/components/TmsDraftsList.draft.vue    |   15 +-
 .../client/src/components/TmsDraftsList.vue   |    8 +-
 .../client/src/components/TmsPostForm.vue     | 1280 +++++++++++++++++
 packages/client/src/pages/channel.vue         |    4 +-
 packages/client/src/pages/share.vue           |    4 +-
 packages/client/src/pages/timeline.vue        |    4 +-
 packages/client/src/scripts/tms/drafts.ts     |    8 +-
 packages/client/src/widgets/post-form.vue     |    6 +-
 10 files changed, 1313 insertions(+), 1206 deletions(-)
 delete mode 100644 packages/client/src/components/MkPostForm.vue
 create mode 100644 packages/client/src/components/TmsPostForm.vue

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
deleted file mode 100644
index 2074a99abaa5..000000000000
--- a/packages/client/src/components/MkPostForm.vue
+++ /dev/null
@@ -1,1184 +0,0 @@
-<template>
-<div
-	v-size="{ max: [310, 500] }" class="gafaadew"
-	:class="[$style.root, { [$style.modal]: modal, _popup: modal, [$style.loading]: loading }]"
-	@dragover.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<header :class="$style.header">
-		<div :class="$style.headerLeft">
-			<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
-			<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
-				<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
-			</button>
-		</div>
-		<div :class="$style.headerRight">
-			<button v-click-anime v-tooltip="i18n.ts._tms.drafts" class="_button" :class="$style.headerRightItem" @click="chooseDraft">
-				<span :class="$style.headerRightButtonIcon"><i class="ti ti-notes"></i></span>
-			</button>
-			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="$style.headerRightItem" :disabled="channel != null || visibility === 'specified'" @click="localOnly = !localOnly">
-				<span v-if="!localOnly" :class="$style.headerRightButtonIcon"><i class="ti ti-rocket"></i></span>
-				<span v-else :class="$style.headerRightButtonIcon"><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
-			</button>
-			<template v-if="!(channel != null && fixed)">
-				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" class="_button" :class="[$style.headerRightItem, $style.visibility]" @click="setVisibility">
-					<span v-if="visibility === 'public'" :class="$style.headerRightButtonIcon"><i class="ti ti-world"></i></span>
-					<span v-if="visibility === 'home'" :class="$style.headerRightButtonIcon"><i class="ti ti-home"></i></span>
-					<span v-if="visibility === 'followers'" :class="$style.headerRightButtonIcon"><i class="ti ti-lock"></i></span>
-					<span v-if="visibility === 'specified'" :class="$style.headerRightButtonIcon"><i class="ti ti-mail"></i></span>
-					<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
-				</button>
-				<button v-else class="_button" :class="[$style.headerRightItem, $style.visibility]" disabled>
-					<span :class="$style.headerRightButtonIcon"><i class="ti ti-device-tv"></i></span>
-					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
-				</button>
-			</template>
-			<button v-click-anime v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.headerRightItem, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
-			<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div :class="$style.submitInner">
-					<template v-if="posted"></template>
-					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ submitText }}</template>
-					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
-				</div>
-			</button>
-		</div>
-	</header>
-	<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
-	<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
-	<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
-		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-		<div :class="$style.visibleUsers">
-			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
-				<MkAcct :user="u"/>
-				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
-			</span>
-			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-		</div>
-	</div>
-	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.info">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-	<MkInfo v-if="annoyingPost" warn :class="$style.info">{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
-	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<div class="_acrylic" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
-	</div>
-	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-	<XPostFormAttaches :class="$style.attaches" :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
-	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
-	<footer :class="$style.footer">
-		<div :class="$style.footerLeft">
-			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" :class="[$style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-		</div>
-	</footer>
-	<datalist id="hashtags">
-		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-	</datalist>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
-import * as mfm from 'mfm-js';
-import * as misskey from 'misskey-js';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import { toASCII } from 'punycode/';
-import * as Acct from 'misskey-js/built/acct';
-import { throttle } from 'throttle-debounce';
-import MkNoteSimple from '@/components/MkNoteSimple.vue';
-import MkNotePreview from '@/components/MkNotePreview.vue';
-import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import MkPollEditor from '@/components/MkPollEditor.vue';
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import { host, url } from '@/config';
-import { erase, unique } from '@/scripts/array';
-import { extractMentions } from '@/scripts/extract-mentions';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { Autocomplete } from '@/scripts/autocomplete';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { selectFiles } from '@/scripts/select-file';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
-import MkInfo from '@/components/MkInfo.vue';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
-import { uploadFile } from '@/scripts/upload';
-import { deepClone } from '@/scripts/clone';
-import { parseObject, parseArray } from '@/scripts/tms/parse';
-import { imanonashi } from '@/scripts/tms/imanonashi';
-import { DraftWithId, getDraft as _getDraft, setDraft as _setDraft, deleteDraft as _deleteDraft } from '@/scripts/tms/drafts';
-
-const modal = inject('modal');
-
-const props = withDefaults(defineProps<{
-	reply?: misskey.entities.Note;
-	renote?: misskey.entities.Note;
-	channel?: misskey.entities.Channel; // TODO
-	mention?: misskey.entities.User;
-	specified?: misskey.entities.User;
-	initialText?: string;
-	initialVisibility?: 'public' | 'home' | 'followers' | 'specified';
-	initialFiles?: misskey.entities.DriveFile[];
-	initialLocalOnly?: boolean;
-	initialVisibleUsers?: misskey.entities.User[];
-	initialNote?: misskey.entities.Note;
-	instant?: boolean;
-	fixed?: boolean;
-	autofocus?: boolean;
-	freezeAfterPosted?: boolean;
-}>(), {
-	initialVisibleUsers: () => [],
-	autofocus: true,
-});
-
-const emit = defineEmits<{
-	(ev: 'posted'): void;
-	(ev: 'cancel'): void;
-	(ev: 'esc'): void;
-}>();
-
-const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
-const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
-const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
-const visibilityButton = $shallowRef<HTMLElement | null>(null);
-
-let posting = $ref(false);
-let posted = $ref(false);
-let text = $ref(props.initialText ?? '');
-let files = $ref(props.initialFiles ?? []);
-let poll = $ref<{
-	choices: string[];
-	multiple: boolean;
-	expiresAt: string | null;
-	expiredAfter: string | null;
-} | null>(null);
-let useCw = $ref(false);
-let showPreview = $ref(false);
-let cw = $ref<string | null>(null);
-let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
-let visibility = $ref<'public' | 'home' | 'followers' | 'specified'>(props.initialVisibility ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility);
-let visibleUsers = $ref<misskey.entities.User[]>([]);
-props.initialVisibleUsers.forEach(user => pushVisibleUser(user));
-let autocomplete = $ref(null);
-let draghover = $ref(false);
-let quoteId = $ref<string | null>(null);
-let hasNotSpecifiedMentions = $ref(false);
-let annoyingPost = $ref(false);
-let recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
-let imeText = $ref('');
-
-let reply = $ref(props.reply);
-let renote = $ref(props.renote);
-let channel = $ref(props.channel);
-let draft = $ref<DraftWithId>();
-let loading = $ref(false);
-
-watch($$(draft), async () => {
-	if (!draft) return;
-	if (loading) return;
-
-	loading = true;
-
-	const promises: Promise<unknown>[] = [];
-	if (draft.data.replyId) {
-		promises.push(os.api('notes/show', { noteId: draft.data.replyId }).then(_reply => reply = _reply));
-	}
-	if (draft.data.renoteId) {
-		promises.push(os.api('notes/show', { noteId: draft.data.renoteId }).then(_renote => renote = _renote));
-	}
-	if (draft.data.channelId) {
-		promises.push(os.api('channels/show', { channelId: draft.data.channelId }).then(_channel => channel = _channel));
-	}
-
-	text = draft.data.text;
-	useCw = draft.data.useCw;
-	cw = draft.data.cw;
-	visibility = draft.data.visibility;
-	localOnly = draft.data.localOnly;
-	files = draft.data.files;
-	poll = draft.data.poll;
-
-	Promise.allSettled(promises).then(() => loading = false);
-}, { deep: true });
-
-const typing = throttle(3000, () => {
-	if (channel) {
-		stream.send('typingOnChannel', { channel: channel.id });
-	}
-});
-
-const draftKey = $computed((): string | null => {
-	if (draft) return draft.id;
-	if (!$i?.id) return null;
-
-	let key = channel ? `ch:${channel.id}/` : '';
-
-	if (renote) {
-		key += `rn:${renote.id}`;
-	} else if (reply) {
-		key += `re:${reply.id}`;
-	} else {
-		key += `note:${$i.id}`;
-	}
-
-	return key;
-});
-
-const placeholder = $computed((): string => {
-	if (renote) {
-		return i18n.ts._postForm.quotePlaceholder;
-	} else if (reply) {
-		return i18n.ts._postForm.replyPlaceholder;
-	} else if (channel) {
-		return i18n.ts._postForm.channelPlaceholder;
-	} else {
-		const xs = [
-			i18n.ts._postForm._placeholders.a,
-			i18n.ts._postForm._placeholders.b,
-			i18n.ts._postForm._placeholders.c,
-			i18n.ts._postForm._placeholders.d,
-			i18n.ts._postForm._placeholders.e,
-			i18n.ts._postForm._placeholders.f,
-		];
-		return xs[Math.floor(Math.random() * xs.length)];
-	}
-});
-
-const submitText = $computed((): string => {
-	return renote
-		? i18n.ts.quote
-		: reply
-			? i18n.ts.reply
-			: i18n.ts.note;
-});
-
-const textLength = $computed((): number => {
-	return length((text + imeText).trim());
-});
-
-const maxTextLength = $computed((): number => {
-	return instance ? instance.maxNoteTextLength : 1000;
-});
-
-const canPost = $computed((): boolean => {
-	return !loading && !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
-		(textLength <= maxTextLength) &&
-		(!poll || poll.choices.length >= 2);
-});
-
-const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
-const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
-
-const pushVisibleUser = (user: misskey.entities.User): void => {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
-		visibleUsers.push(user);
-	}
-};
-
-const addVisibleUser = (): void => {
-	os.selectUser().then(user => {
-		pushVisibleUser(user);
-
-		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
-			text = `@${Acct.toString(user)} ${text}`;
-		}
-	});
-};
-
-const removeVisibleUser = (user: misskey.entities.User): void => {
-	visibleUsers = erase(user, visibleUsers);
-};
-
-if (props.mention) {
-	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
-	text += ' ';
-}
-
-if (reply && (reply.user.username !== $i?.username || (reply.user.host != null && reply.user.host !== host))) {
-	text = `@${reply.user.username}${reply.user.host != null ? '@' + toASCII(reply.user.host) : ''} `;
-}
-
-if (reply && reply.text != null) {
-	const ast = mfm.parse(reply.text);
-	const otherHost = reply.user.host;
-
-	for (const x of extractMentions(ast)) {
-		const mention = x.host ?
-			`@${x.username}@${toASCII(x.host)}` :
-			(otherHost == null || otherHost === host) ?
-				`@${x.username}` :
-				`@${x.username}@${toASCII(otherHost)}`;
-
-		// 自分は除外
-		if ($i?.username === x.username && (x.host == null || x.host === host)) continue;
-
-		// 重複は除外
-		if (text.includes(`${mention} `)) continue;
-
-		text += `${mention} `;
-	}
-}
-
-if (channel) {
-	visibility = 'public';
-	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
-}
-
-// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-if (reply && ['home', 'followers', 'specified'].includes(reply.visibility)) {
-	if (reply.visibility === 'home' && visibility === 'followers') {
-		visibility = 'followers';
-	} else if (['home', 'followers'].includes(reply.visibility) && visibility === 'specified') {
-		visibility = 'specified';
-	} else {
-		visibility = reply.visibility;
-	}
-
-	if (visibility === 'specified') {
-		if (reply.visibleUserIds) {
-			os.api('users/show', {
-				userIds: reply.visibleUserIds.filter(uid => uid !== $i?.id && uid !== reply?.userId),
-			}).then(users => {
-				users.forEach(pushVisibleUser);
-			});
-		}
-
-		if (reply.userId !== $i?.id) {
-			os.api('users/show', { userId: reply.userId }).then(user => {
-				pushVisibleUser(user);
-			});
-		}
-	}
-}
-
-if (props.specified) {
-	visibility = 'specified';
-	pushVisibleUser(props.specified);
-}
-
-// keep cw when reply
-if (defaultStore.state.keepCw && reply && reply.cw) {
-	useCw = true;
-	cw = reply.cw;
-}
-
-const chooseDraft = (): void => {
-	new Promise<DraftWithId>(resolve => {
-		os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {}, {
-			chosen: (_draft: DraftWithId) => {
-				resolve(_draft);
-			},
-		}, 'closed');
-	}).then((_draft: DraftWithId) => {
-		draft = _draft;
-	});
-};
-
-const watchForDraft = (): void => {
-	watch($$(text), saveDraft);
-	watch($$(useCw), saveDraft);
-	watch($$(cw), saveDraft);
-	watch($$(poll), saveDraft);
-	watch($$(files), saveDraft, { deep: true });
-	watch($$(visibility), saveDraft);
-	watch($$(localOnly), saveDraft);
-};
-
-const checkMissingMention = (): void => {
-	if (visibility === 'specified') {
-		const ast = mfm.parse(text);
-
-		for (const x of extractMentions(ast)) {
-			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-				hasNotSpecifiedMentions = true;
-				return;
-			}
-		}
-		hasNotSpecifiedMentions = false;
-	}
-};
-
-const addMissingMention = (): void => {
-	const ast = mfm.parse(text);
-
-	for (const x of extractMentions(ast)) {
-		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host ?? undefined }).then(user => {
-				visibleUsers.push(user);
-			});
-		}
-	}
-};
-
-const checkAnnoyingPost = (): void => {
-	if (!useCw && visibility === 'public') {
-		annoyingPost = (
-			text.includes('$[x2') ||
-			text.includes('$[x3') ||
-			text.includes('$[x4') ||
-			text.includes('$[scale') ||
-			text.includes('$[position')
-		);
-	} else {
-		annoyingPost = false;
-	}
-};
-
-watch($$(text), checkMissingMention, { immediate: true });
-watch($$(visibleUsers), checkMissingMention, { deep: true });
-
-watch($$(text), checkAnnoyingPost);
-watch($$(useCw), checkAnnoyingPost);
-watch($$(visibility), checkAnnoyingPost);
-
-const togglePoll = (): void => {
-	if (poll) {
-		poll = null;
-	} else {
-		poll = {
-			choices: ['', ''],
-			multiple: false,
-			expiresAt: null,
-			expiredAfter: null,
-		};
-	}
-};
-
-const addTag = (tag: string): void => {
-	insertTextAtCursor(textareaEl, ` #${tag} `);
-};
-
-const focus = (): void => {
-	if (textareaEl) {
-		textareaEl.focus();
-		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
-	}
-};
-
-const chooseFileFrom = (ev: MouseEvent): void => {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
-		for (const file of files_) {
-			files.push(file);
-		}
-	});
-};
-
-const detachFile = (id: string): void => {
-	files = files.filter(x => x.id !== id);
-};
-
-const updateFiles = (_files: misskey.entities.DriveFile[]): void => {
-	files = _files;
-};
-
-const updateFileSensitive = (file: misskey.entities.DriveFile, sensitive: boolean): void => {
-	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
-};
-
-const updateFileName = (file: misskey.entities.DriveFile, name: string): void => {
-	files[files.findIndex(x => x.id === file.id)].name = name;
-};
-
-const upload = (file: File, name?: string): void => {
-	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
-		files.push(res);
-	});
-};
-
-const setVisibility = (): void => {
-	if (channel) {
-		visibility = 'public';
-		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
-		return;
-	}
-
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
-		src: visibilityButton,
-	}, {
-		changeVisibility: (v: typeof visibility) => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
-		},
-		changeLocalOnly: (v: typeof localOnly) => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
-		},
-	}, 'closed');
-};
-
-const clear = (): void => {
-	text = '';
-	files = [];
-	poll = null;
-	quoteId = null;
-};
-
-const onKeydown = (ev: KeyboardEvent): void => {
-	typing();
-	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
-	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.key === 'Escape' || ev.key === 'Esc') emit('esc');
-};
-
-const onCompositionUpdate = (ev: CompositionEvent): void => {
-	typing();
-	imeText = ev.data;
-};
-
-const onCompositionEnd = (_ev: CompositionEvent): void => {
-	imeText = '';
-};
-
-const onPaste = async (ev: ClipboardEvent): Promise<void> => {
-	if (!ev.clipboardData) return;
-
-	Array.from(ev.clipboardData.items, (item, i) => {
-		if (item.kind !== 'file') return;
-		const file = item.getAsFile();
-		if (!file) return;
-		const lio = file.name.lastIndexOf('.');
-		const ext = lio >= 0 ? file.name.slice(lio) : '';
-		const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
-		upload(file, formatted);
-	});
-
-	const paste = ev.clipboardData.getData('text');
-	const path = url + '/notes/';
-
-	if (!renote && !quoteId && paste.startsWith(path)) {
-		ev.preventDefault();
-
-		os.confirm({
-			type: 'info',
-			text: i18n.ts.quoteQuestion,
-		}).then(({ canceled }) => {
-			if (canceled) {
-				insertTextAtCursor(textareaEl, paste);
-				return;
-			}
-
-			quoteId = paste.slice((url + '/notes/').length).split(/[\/\?#]/, 1)[0] || null;
-		});
-	}
-};
-
-const onDragover = (ev: DragEvent): void => {
-	if (!ev.dataTransfer?.items[0]) return;
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	if (isFile || isDriveFile) {
-		ev.preventDefault();
-		draghover = true;
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy':
-			case 'copyLink':
-			case 'copyMove':
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	}
-};
-
-const onDragenter = (_ev: DragEvent): void => {
-	draghover = true;
-};
-
-const onDragleave = (_ev: DragEvent): void => {
-	draghover = false;
-};
-
-const onDrop = (ev: DragEvent): void => {
-	if (!ev.dataTransfer) return;
-	draghover = false;
-
-	// ファイルだったら
-	if (ev.dataTransfer.files.length > 0) {
-		ev.preventDefault();
-		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
-		return;
-	}
-
-	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile) {
-		const file = parseObject<misskey.entities.DriveFile>(driveFile);
-		files.push(file);
-		ev.preventDefault();
-	}
-	//#endregion
-};
-
-const saveDraft = (): void => _setDraft(draftKey, {
-	text,
-	useCw,
-	cw,
-	visibility,
-	localOnly,
-	files,
-	poll,
-	replyId: reply?.id ?? null,
-	renoteId: renote?.id ?? quoteId ?? null,
-	channelId: channel?.id ?? null,
-});
-
-const deleteDraft = (): void => _deleteDraft(draftKey);
-
-const post = async (ev?: MouseEvent): Promise<void> => {
-	if (ev) {
-		const el = ev.currentTarget ?? ev.target;
-		if (el instanceof HTMLElement) {
-			const rect = el.getBoundingClientRect();
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
-		}
-	}
-
-	let postData = {
-		text: text === '' ? undefined : text,
-		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
-		replyId: reply ? reply.id : undefined,
-		renoteId: renote ? renote.id : quoteId ? quoteId : undefined,
-		channelId: channel ? channel.id : undefined,
-		poll: poll,
-		cw: useCw ? cw ?? '' : undefined,
-		localOnly: localOnly,
-		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
-	};
-
-	if (withHashtags && hashtags && hashtags.trim() !== '') {
-		const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
-		postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
-	}
-
-	// plugin
-	if (notePostInterruptors.length > 0) {
-		for (const interruptor of notePostInterruptors) {
-			postData = await interruptor.handler(deepClone(postData)) as typeof postData;
-		}
-	}
-
-	let token = undefined;
-
-	if (postAccount) {
-		const storedAccounts = await getAccounts();
-		token = storedAccounts.find(x => x.id === postAccount?.id)?.token;
-	}
-
-	posting = true;
-	os.api('notes/create', postData, token).then(({ createdNote }) => {
-		if (props.freezeAfterPosted) {
-			posted = true;
-		} else {
-			clear();
-		}
-		nextTick(() => {
-			deleteDraft();
-			emit('posted');
-			if (postData.text && postData.text !== '') {
-				const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
-				const history = parseArray<string[]>(localStorage.getItem('hashtags'));
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
-			}
-			posting = false;
-			postAccount = null;
-
-			imanonashi(createdNote);
-		});
-	}).catch(err => {
-		posting = false;
-		os.alert({
-			type: 'error',
-			text: err.message + '\n' + (err as any).id,
-		});
-	});
-};
-
-const cancel = (): void => {
-	emit('cancel');
-};
-
-const insertMention = (): void => {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, '@' + Acct.toString(user) + ' ');
-	});
-};
-
-const insertEmoji = async (ev: MouseEvent): Promise<void> => {
-	const el = ev.currentTarget ?? ev.target;
-	if (!(el instanceof HTMLElement)) return;
-	os.openEmojiPicker(el, {}, textareaEl);
-};
-
-const showActions = (ev: MouseEvent): void => {
-	const el = ev.currentTarget ?? ev.target;
-	if (!(el instanceof HTMLElement)) return;
-	os.popupMenu(postFormActions.map(action => ({
-		text: action.title,
-		action: (): void => {
-			action.handler({
-				text: text,
-			}, (key, value) => {
-				if (key === 'text') { text = value; }
-			});
-		},
-	})), el);
-};
-
-let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
-
-const openAccountMenu = (ev: MouseEvent): void => {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount != null ? postAccount.id : $i?.id,
-		onChoose: (account) => {
-			if (account.id === $i?.id) {
-				postAccount = null;
-			} else {
-				postAccount = account;
-			}
-		},
-	}, ev);
-};
-
-onMounted(() => {
-	if (props.autofocus) {
-		focus();
-
-		nextTick(() => {
-			focus();
-		});
-	}
-
-	// TODO: detach when unmount
-	new Autocomplete(textareaEl, $$(text));
-	new Autocomplete(cwInputEl, $$(cw));
-	new Autocomplete(hashtagsInputEl, $$(hashtags));
-
-	nextTick(() => {
-		// 書きかけの投稿を復元
-		if (!props.instant && !props.mention && !props.specified) {
-			const draft_ = _getDraft(draftKey);
-			if (draft_) {
-				text = draft_.data.text;
-				useCw = draft_.data.useCw;
-				cw = draft_.data.cw;
-				visibility = draft_.data.visibility;
-				localOnly = draft_.data.localOnly;
-				files = draft_.data.files;
-				poll = draft_.data.poll;
-			}
-		}
-
-		// 削除して編集
-		if (props.initialNote) {
-			const init = props.initialNote;
-			text = init.text ?? '';
-			files = init.files;
-			cw = init.cw;
-			useCw = init.cw != null;
-			if (init.poll) {
-				poll = {
-					choices: init.poll.choices.map(x => x.text),
-					multiple: init.poll.multiple,
-					expiresAt: init.poll.expiresAt,
-					expiredAfter: init.poll.expiredAfter,
-				};
-			}
-			visibility = init.visibility;
-			localOnly = !!init.localOnly;
-			quoteId = init.renote?.id ?? null;
-		}
-
-		nextTick(() => {
-			saveDraft();
-			watchForDraft();
-		});
-	});
-});
-
-defineExpose({
-	clear,
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	position: relative;
-
-	&.modal {
-		width: 100%;
-		max-width: 520px;
-	}
-
-	&.loading {
-		user-select: none;
-
-		::before {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: 10000;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-		}
-	}
-}
-
-//#region header
-.header {
-	z-index: 1000;
-	min-height: 50px;
-	display: flex;
-	flex-wrap: nowrap;
-	gap: 4px;
-}
-
-.headerLeft {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(36px, 50px));
-	grid-template-rows: minmax(40px, 100%);
-}
-
-.cancel {
-	padding: 0;
-	font-size: 1em;
-	height: 100%;
-}
-
-.account {
-	height: 100%;
-	display: inline-flex;
-	vertical-align: bottom;
-}
-
-.avatar {
-	width: 28px;
-	height: 28px;
-	margin: auto 0;
-}
-
-.headerRight {
-	display: flex;
-	min-height: 48px;
-	font-size: 0.9em;
-	flex-wrap: nowrap;
-	align-items: center;
-	margin-left: auto;
-	gap: 4px;
-	overflow: clip;
-	padding-left: 4px;
-}
-
-.submit {
-	margin: 12px 12px 12px 6px;
-	vertical-align: bottom;
-
-	&:disabled {
-		opacity: 0.7;
-	}
-
-	&.posting {
-		cursor: wait;
-	}
-
-	&:not(:disabled):hover {
-		> .inner {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
-
-	&:not(:disabled):active {
-		> .inner {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
-}
-
-.submitInner {
-	padding: 0 12px;
-	line-height: 34px;
-	font-weight: bold;
-	border-radius: 6px;
-	min-width: 90px;
-	box-sizing: border-box;
-	color: var(--fgOnAccent);
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-}
-
-.headerRightItem {
-	margin: 0;
-	padding: 8px;
-	border-radius: 6px;
-
-	&:hover {
-		background: var(--X5);
-	}
-
-	&:disabled {
-		background: none;
-	}
-}
-
-.headerRightButtonIcon:not(:first-child) {
-	padding-left: 6px;
-}
-
-.headerRightButtonText {
-	padding-left: 6px;
-}
-
-.visibility {
-	overflow: clip;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&:enabled {
-		> .headerRightButtonText {
-			opacity: 0.8;
-		}
-	}
-}
-
-.previewButtonActive {
-	color: var(--accent);
-}
-//#endregion
-
-.preview {
-	padding: 16px 20px 0 20px;
-}
-
-.targetNote {
-	padding: 0 20px 16px 20px;
-}
-
-.withQuote {
-	margin: 0 0 8px 0;
-	color: var(--accent);
-}
-
-.toSpecified {
-	padding: 6px 24px;
-	margin-bottom: 8px;
-	overflow: auto;
-	white-space: nowrap;
-}
-
-.visibleUsers {
-	display: inline;
-	top: -1px;
-	font-size: 14px;
-}
-
-.visibleUser {
-	margin-right: 14px;
-	padding: 8px 0 8px 8px;
-	border-radius: 8px;
-	background: var(--X4);
-}
-
-.info {
-	margin: 0 20px 8px 20px;
-
-	&:last-child {
-		margin-bottom: 16px;
-	}
-}
-
-.cw,
-.hashtags,
-.text {
-	display: block;
-	box-sizing: border-box;
-	padding: 0 24px;
-	margin: 0;
-	width: 100%;
-	font-size: 16px;
-	border: none;
-	border-radius: 0;
-	background: transparent;
-	color: var(--fg);
-	font-family: inherit;
-
-	&:focus {
-		outline: none;
-	}
-
-	&:disabled {
-		opacity: 0.5;
-	}
-}
-
-.cw {
-	z-index: 1;
-	padding-bottom: 8px;
-	border-bottom: solid 0.5px var(--divider);
-}
-
-.hashtags {
-	z-index: 1;
-	padding-top: 8px;
-	padding-bottom: 8px;
-	border-top: solid 0.5px var(--divider);
-}
-
-.textOuter {
-	width: 100%;
-	position: relative;
-
-	&.withCw {
-		padding-top: 8px;
-	}
-}
-
-.text {
-	max-width: 100%;
-	min-width: 100%;
-	width: 100%;
-	min-height: 90px;
-	height: 100%;
-}
-
-.textCount {
-	position: absolute;
-	top: 0;
-	right: 2px;
-	padding: 4px 6px;
-	font-size: .9em;
-	color: var(--fg);
-	border-radius: 6px;
-	min-width: 1.6em;
-	text-align: center;
-	pointer-events: none;
-	opacity: 0.8;
-
-	&.textOver {
-		color: var(--error);
-	}
-}
-
-.footer {
-	display: flex;
-	padding: 0 16px 16px 16px;
-	font-size: 1em;
-}
-
-.footerLeft {
-	flex: 1;
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
-	grid-auto-rows: 46px;
-}
-
-.footerRight {
-	flex: 0.3;
-	margin-left: auto;
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
-	grid-auto-rows: 46px;
-	direction: rtl;
-}
-
-.footerButton {
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-	font-size: 1em;
-	width: auto;
-	height: 100%;
-	border-radius: 6px;
-
-	&:hover {
-		background: var(--X5);
-	}
-
-	&.footerButtonActive {
-		color: var(--accent);
-	}
-}
-
-:global(.max-width_500px) {
-	.headerRight {
-		font-size: .9em;
-	}
-
-	.headerRightButtonText {
-		display: none;
-	}
-
-	.visibility {
-		overflow: initial;
-	}
-
-	.submit {
-		margin: 8px 8px 8px 4px;
-	}
-
-	.toSpecified {
-		padding: 6px 16px;
-	}
-
-	.preview {
-		padding: 16px 14px 0 14px;
-	}
-
-	.cw,
-	.hashtags,
-	.text {
-		padding: 0 16px;
-	}
-
-	.text {
-		min-height: 80px;
-	}
-
-	.footer {
-		padding: 0 8px 8px 8px;
-	}
-}
-
-:global(.max-width_310px) {
-	.headerRight {
-		gap: 0;
-	}
-
-	.footer {
-		font-size: 14px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index b5f183db7ae4..3775a70dbcf9 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="modal?.close()" @closed="onModalClosed()">
-	<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
+	<TmsPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
 </MkModal>
 </template>
 
@@ -8,7 +8,7 @@
 import { } from 'vue';
 import * as misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
-import MkPostForm from '@/components/MkPostForm.vue';
+import TmsPostForm from '@/components/TmsPostForm.vue';
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -32,7 +32,7 @@ const emit = defineEmits<{
 }>();
 
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
-const form = $shallowRef<InstanceType<typeof MkPostForm>>();
+const form = $shallowRef<InstanceType<typeof TmsPostForm>>();
 
 const onPosted = (): void => {
 	modal?.close({
diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 2c08235c3506..1f0553fb0f01 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -1,9 +1,9 @@
 <template>
 <div :class="$style.root" @click="draftMenu">
 	<div :class="[$style.text, { [$style.textEmpty]: !text }]">{{ text || 'Empty' }}</div>
-	<div :class="$style.files">
+	<div v-if="files.length !== 0" :class="$style.files">
 		<ImgWithBlurhash
-			v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in props.draft.data.files"
+			v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in files"
 			:key="fileId"
 			:src="src"
 			:hash="hash"
@@ -12,15 +12,15 @@
 			:class="$style.file"
 		/>
 	</div>
-	<div :class="$style.labels">
-		<span v-if="props.draft.data.renoteId" :class="$style.label">{{ i18n.ts.quote }}</span>
-		<span v-if="props.draft.data.poll" :class="$style.label">{{ i18n.ts.poll }}</span>
+	<div v-if="labels.length !== 0" :class="$style.labels">
+		<span v-for="label in labels" :key="label" :class="$style.label">{{ label }}</span>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { DraftWithId } from '@/scripts/tms/drafts';
 import { i18n } from '@/i18n';
@@ -37,6 +37,11 @@ const emit = defineEmits<{
 }>();
 
 const text = $ref(`${props.draft.data.cw || ''}\n${props.draft.data.text || ''}`.trim());
+const files = $ref<Misskey.entities.DriveFile[]>(props.draft.data.files);
+
+const labels = $ref<string[]>([]);
+if (props.draft.data.renoteId) labels.push(i18n.ts.quote);
+if (props.draft.data.poll) labels.push(i18n.ts.poll);
 
 const draftMenu = (ev: MouseEvent): void => {
 	const el = ev.currentTarget ?? ev.target;
diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index 7863ef940785..de72d6d08287 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -30,6 +30,12 @@ import MkModalWindow from '@/components/MkModalWindow.vue';
 import TmsDraft from '@/components/TmsDraftsList.draft.vue';
 import { DraftWithId, getAllDraft, deleteDraft } from '@/scripts/tms/drafts';
 
+const props = withDefaults(defineProps<{
+	ignoreDraftIds?: string[];
+}>(), {
+	ignoreDraftIds: (): string[] => [],
+});
+
 const emit = defineEmits<{
 	(ev: 'chosen', draft: DraftWithId): void;
 	(ev: 'closed'): void;
@@ -37,7 +43,7 @@ const emit = defineEmits<{
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
-const draftsList = $ref<DraftWithId[]>(getAllDraft());
+const draftsList = $ref<DraftWithId[]>(getAllDraft().filter(({ id }) => !props.ignoreDraftIds.includes(id)));
 
 const chosen = (draftId: DraftWithId['id']): void => {
 	const draft = draftsList.find(d => d.id === draftId);
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
new file mode 100644
index 000000000000..922517fa693e
--- /dev/null
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -0,0 +1,1280 @@
+<template>
+<div
+	ref="rootEl"
+	v-size="{ max: [310, 500] }"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal, '--tmsPostForm-counterWidth': `${textCountElWidth}px` }]"
+	@dragover.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<header :class="$style.header">
+		<div :class="$style.headerLeft">
+			<button v-if="!fixed" :class="['_button', $style.cancel]" @click="cancel">
+				<i class="ti ti-x"></i>
+			</button>
+			<button v-tooltip="i18n.ts.switchAccount" :class="['_button', $style.account]" @click="openAccountMenu">
+				<MkAvatar :user="postAccount ?? ($i as any)" :class="$style.avatar"/>
+			</button>
+		</div>
+		<div :class="$style.headerRight">
+			<button v-tooltip="i18n.ts._tms.drafts" :class="['_button', $style.headerRightButton]" @click="chooseDraft">
+				<span><i class="ti ti-notes"></i></span>
+			</button>
+			<template v-if="!(channel && fixed)">
+				<button v-tooltip="i18n.ts._visibility.disableFederation" :class="['_button', $style.headerRightButton]" :disabled="!!channel || visibility === 'specified'" @click="localOnly = !localOnly">
+					<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
+					<span v-else><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
+				</button>
+				<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightButton]" :disabled="!!channel" @click="openVisibilityPicker">
+					<template v-if="!channel">
+						<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+						<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+						<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
+						<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+						<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
+					</template>
+					<template v-else>
+						<span><i class="ti ti-device-tv"></i></span>
+						<span :class="$style.headerRightButtonText">{{ (channel as any).name }}</span>
+					</template>
+				</button>
+			</template>
+			<button v-tooltip="i18n.ts.previewNoteText" :class="['_button', $style.headerRightButton, { [$style.headerRightButtonActive]: showPreview }]" @click="showPreview = !showPreview">
+				<span><i class="ti ti-eye"></i></span>
+			</button>
+			<button :class="['_button', $style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+				<div :class="$style.submitInner">
+					<template v-if="posted"></template>
+					<template v-else-if="posting"><MkEllipsis/></template>
+					<template v-else>{{ renote ? i18n.ts.quote : reply ? i18n.ts.reply : i18n.ts.note }}</template>
+					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : reply ? 'ti-arrow-back-up' : renote ? 'ti-quote' : 'ti-send'"></i>
+				</div>
+			</button>
+		</div>
+	</header>
+	<MkNoteSimple v-if="reply" :class="$style.replyNote" :note="reply"/>
+	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
+		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+		<div :class="$style.visibleUsers">
+			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
+				<MkAcct :user="u"/>
+				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+			</span>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+		</div>
+	</div>
+	<div :class="$style.infoList">
+		<MkInfo v-if="hasNotSpecifiedMentions" warn>{{ i18n.ts.notSpecifiedMentionWarning }}<span style="margin: 0 4px; user-select: none;">-</span><button class="_textButton" @click="addMissingMention">{{ i18n.ts.add }}</button></MkInfo>
+		<MkInfo v-if="hasAnnoyingText" warn>{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
+	</div>
+	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="[$style.input, $style.cw]" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+	<div :class="$style.textOuter">
+		<textarea ref="textareaEl" v-model="text" :class="[$style.input, $style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
+		<div v-if="renote" :class="$style.quoteNote">
+			<div :class="$style.quoteNoteInner">
+				<MkNoteSimple :note="renote"/>
+				<button :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
+			</div>
+		</div>
+		<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+	</div>
+	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
+	<MkPostFormAttaches :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+	<footer :class="$style.footer">
+		<button v-tooltip="i18n.ts.attachFile" :class="['_button', $style.footerButton]" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+		<button v-tooltip="i18n.ts.poll" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+		<button v-tooltip="i18n.ts.useCw" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
+		<button v-tooltip="i18n.ts.mention" :class="['_button', $style.footerButton]" @click="insertMention"><i class="ti ti-at"></i></button>
+		<button v-tooltip="i18n.ts.hashtags" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+		<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" :class="['_button', $style.footerButton]" @click="showActions"><i class="ti ti-plug"></i></button>
+		<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+	</footer>
+	<datalist id="hashtags">
+		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
+	</datalist>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, inject, watch, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as Acct from 'misskey-js/built/acct';
+import * as mfm from 'mfm-js';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { length } from 'stringz';
+import { toASCII } from 'punycode/';
+import { throttle } from 'throttle-debounce';
+import { v4 as uuid } from 'uuid';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { stream } from '@/stream';
+import { host, url } from '@/config';
+import { instance } from '@/instance';
+import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
+import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
+import { formatTimeString } from '@/scripts/format-time-string';
+import { extractMentions } from '@/scripts/extract-mentions';
+import { Autocomplete } from '@/scripts/autocomplete';
+import { selectFiles } from '@/scripts/select-file';
+import { uploadFile } from '@/scripts/upload';
+import { erase, unique } from '@/scripts/array';
+import { deepClone } from '@/scripts/clone';
+import { parseObject, parseArray } from '@/scripts/tms/parse';
+import * as Draft from '@/scripts/tms/drafts';
+import { imanonashi } from '@/scripts/tms/imanonashi';
+import MkInfo from '@/components/MkInfo.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkNotePreview from '@/components/MkNotePreview.vue';
+import MkPostFormAttaches from '@/components/MkPostFormAttaches.vue';
+import MkPollEditor, { EditedPoll } from '@/components/MkPollEditor.vue';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+
+const props = withDefaults(defineProps<{
+	reply?: Misskey.entities.Note | null;
+	renote?: Misskey.entities.Note | null;
+	channel?: Misskey.entities.Channel | null;
+	mention?: Misskey.entities.User | null;
+	specified?: Misskey.entities.User | null;
+	initialText?: string | null;
+	initialVisibility?: Misskey.entities.Note['visibility'] | null;
+	initialFiles?: Misskey.entities.DriveFile[] | null;
+	initialLocalOnly?: boolean | null;
+	initialVisibleUsers?: Misskey.entities.User[] | null;
+	initialNote?: Misskey.entities.Note | null;
+	instant?: boolean | null;
+	fixed?: boolean | null;
+	autofocus?: boolean | null;
+	freezeAfterPosted?: boolean | null;
+}>(), {
+	reply: null,
+	renote: null,
+	channel: null,
+	mention: null,
+	specified: null,
+	initialText: null,
+	initialVisibility: null,
+	initialFiles: null,
+	initialLocalOnly: null,
+	initialVisibleUsers: null,
+	initialNote: null,
+	instant: null,
+	fixed: null,
+	autofocus: true,
+	freezeAfterPosted: null,
+});
+
+const emit = defineEmits<{
+	(ev: 'posted'): void;
+	(ev: 'cancel'): void;
+	(ev: 'esc'): void;
+}>();
+
+const rootEl = $shallowRef<HTMLElement | null>(null);
+const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
+const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
+const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
+const visibilityButton = $shallowRef<HTMLElement | null>(null);
+
+let textareaElAutocomplete: Autocomplete | null = null;
+let cwInputElAutocomplete: Autocomplete | null = null;
+let hashtagsInputElAutocomplete: Autocomplete | null = null;
+
+const focus = (): void => {
+	if (textareaEl) {
+		textareaEl.focus();
+		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
+	}
+};
+
+const textCountEl = $shallowRef<HTMLElement | null>(null);
+let textCountElResizeObserver: ResizeObserver | null = null;
+let textCountElWidth = $ref(0);
+
+onMounted(() => {
+	if (textareaEl) {
+		textareaElAutocomplete = new Autocomplete(textareaEl, $$(text));
+	}
+	if (cwInputEl) {
+		cwInputElAutocomplete = new Autocomplete(cwInputEl, $$(cw));
+	}
+	if (hashtagsInputEl) {
+		hashtagsInputElAutocomplete = new Autocomplete(hashtagsInputEl, $$(hashtags));
+	}
+	if (textCountEl) {
+		textCountElResizeObserver = new ResizeObserver(entries => {
+			entries.forEach(({ contentBoxSize }) => {
+				contentBoxSize.forEach(({ inlineSize }) => {
+					textCountElWidth = Math.ceil(inlineSize);
+				});
+			});
+		});
+		textCountElResizeObserver.observe(textCountEl);
+	}
+	if (props.autofocus) {
+		focus();
+		nextTick(focus);
+	}
+});
+
+onUnmounted(() => {
+	if (textareaElAutocomplete) {
+		textareaElAutocomplete.detach();
+		textareaElAutocomplete = null;
+	}
+	if (cwInputElAutocomplete) {
+		cwInputElAutocomplete.detach();
+		cwInputElAutocomplete = null;
+	}
+	if (hashtagsInputElAutocomplete) {
+		hashtagsInputElAutocomplete.detach();
+		hashtagsInputElAutocomplete = null;
+	}
+	if (textCountElResizeObserver) {
+		textCountElResizeObserver.disconnect();
+		textCountElResizeObserver = null;
+	}
+});
+
+const modal = inject<boolean>('modal', false);
+
+const fetching = $computed<boolean>(() => fetchList.length !== 0);
+let fetchList = $ref<string[]>([]);
+const pushFetchList = (): {
+	popFetchList(): void;
+} => {
+	const fetchId = uuid();
+	fetchList.push(fetchId);
+	return {
+		popFetchList(): void {
+			fetchList = fetchList.filter(fid => fid !== fetchId);
+		},
+	};
+};
+
+// パラメーター
+let text = $ref(props.initialText ?? '');
+let files = $ref(props.initialFiles ?? []);
+let useCw = $ref(false);
+let cw = $ref<string>('');
+let poll = $ref<EditedPoll | null>(null);
+let localOnly = $ref<boolean>(props.initialLocalOnly ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly));
+let visibility = $ref<Misskey.entities.Note['visibility']>(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility));
+let visibleUsers = $ref<Misskey.entities.User[]>([]);
+
+const pushVisibleUser = (user: Misskey.entities.User): void => {
+	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+		visibleUsers.push(user);
+	}
+};
+const addVisibleUser = (): void => {
+	os.selectUser().then(user => {
+		pushVisibleUser(user);
+
+		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
+			text = `@${Acct.toString(user)} ${text}`;
+		}
+	});
+};
+const removeVisibleUser = (user: Misskey.entities.User): void => {
+	visibleUsers = erase(user, visibleUsers);
+};
+
+if (props.initialVisibleUsers) {
+	props.initialVisibleUsers.forEach(user => pushVisibleUser(user));
+}
+
+if (props.specified) {
+	visibility = 'specified';
+	pushVisibleUser(props.specified);
+}
+
+if (props.mention) {
+	const mention = `@${props.mention.username}${(props.mention.host != null && props.mention.host !== host) ? `@${toASCII(props.mention.host)}` : ''}`;
+	text = `${mention} ${text}`;
+}
+
+// 宛先
+let hasNotSpecifiedMentions = $ref(false);
+const checkMissingMention = (): void => {
+	if (visibility === 'specified') {
+		const ast = mfm.parse(text);
+
+		for (const x of extractMentions(ast)) {
+			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+				hasNotSpecifiedMentions = true;
+				return;
+			}
+		}
+		hasNotSpecifiedMentions = false;
+	}
+};
+const addMissingMention = (): void => {
+	const ast = mfm.parse(text);
+
+	for (const x of extractMentions(ast)) {
+		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+			os.api('users/show', { username: x.username, host: x.host ?? undefined }).then(user => {
+				visibleUsers.push(user);
+			});
+		}
+	}
+};
+
+// MFM判定
+let hasAnnoyingText = $ref(false);
+const checkAnnoyingText = (): void => {
+	if (!useCw && visibility === 'public') {
+		hasAnnoyingText = (
+			text.includes('$[x2') ||
+			text.includes('$[x3') ||
+			text.includes('$[x4') ||
+			text.includes('$[scale') ||
+			text.includes('$[position')
+		);
+	} else {
+		hasAnnoyingText = false;
+	}
+};
+
+watch($$(text), checkMissingMention, { immediate: true });
+watch($$(visibility), checkMissingMention);
+watch($$(visibleUsers), checkMissingMention, { deep: true });
+
+watch($$(text), checkAnnoyingText, { immediate: true });
+watch($$(useCw), checkAnnoyingText);
+watch($$(visibility), checkAnnoyingText);
+
+// 投稿するアカウント
+let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
+let token = $ref<string | null>(null);
+watch($$(postAccount), async () => {
+	const storedAccounts = await getAccounts() as {
+		id: string;
+		token: string;
+	}[];
+	token = storedAccounts.find(x => x.id === postAccount?.id)?.token ?? null;
+});
+const openAccountMenu = (ev: MouseEvent): void => {
+	openAccountMenu_({
+		withExtraOperation: false,
+		includeCurrentAccount: true,
+		active: postAccount?.id ?? $i?.id,
+		onChoose: (account) => {
+			if (account.id === $i?.id) {
+				postAccount = null;
+			} else {
+				postAccount = account;
+			}
+		},
+	}, ev);
+};
+
+const mergeVisibility = async (note: Misskey.entities.Note): Promise<void> => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+	}
+
+	const { visibility: vis } = note;
+	const getVisLevel = (v: Misskey.entities.Note['visibility']): number => {
+		return {
+			public: 1,
+			home: 2,
+			followers: 3,
+			specified: 4,
+		}[v];
+	};
+
+	if (getVisLevel(visibility) < getVisLevel(vis)) {
+		visibility = vis;
+	}
+
+	if (visibility === 'specified') {
+		const visibleUserIds = note.visibleUserIds?.filter(uid => uid !== $i?.id && uid !== note.userId) ?? [];
+		if (note.userId !== $i?.id) visibleUserIds.push(note.userId);
+
+		if (visibleUserIds.length !== 0) {
+			const { popFetchList } = pushFetchList();
+
+			visibleUsers = [];
+
+			await os.api('users/show', {
+				userIds: visibleUserIds,
+			}).then(users => {
+				users.forEach(pushVisibleUser);
+			});
+
+			popFetchList();
+		}
+	} else {
+		visibleUsers = [];
+	}
+};
+
+// 返信
+let replyId = $ref(props.reply?.id ?? null);
+let reply = $ref<Misskey.entities.Note | null>(null);
+watch([$$(replyId), $$(token)], async ([, newToken]) => {
+	if (!replyId) {
+		reply = null;
+		return;
+	}
+	if (replyId === reply?.id && token === newToken) return;
+
+	const { popFetchList } = pushFetchList();
+
+	await os.apiWithDialog('notes/show', { noteId: replyId }, token)
+		.then(_reply => {
+			reply = _reply;
+			mergeVisibility(reply);
+
+			// keep cw
+			if (defaultStore.state.keepCw && reply.cw) {
+				useCw = true;
+				cw = reply.cw;
+			}
+
+			let mentionText = '';
+			const addMention = ({ username, host: _host }: {
+				username: string;
+				host: string | null;
+			}): void => {
+				if ($i?.username === username && (_host == null || _host === host)) return;
+
+				const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
+
+				if (`${mentionText}${text}`.includes(`${mention} `)) return;
+
+				mentionText += `${mention} `;
+			};
+
+			addMention({
+				username: reply.user.username,
+				host: reply.user.host,
+			});
+
+			if (reply.text != null) {
+				const ast = mfm.parse(reply.text);
+
+				for (const x of extractMentions(ast)) {
+					addMention({
+						username: x.username,
+						host: x.host,
+					});
+				}
+			}
+
+			text = `${mentionText}${text}`;
+		})
+		.catch(() => reply = null);
+
+	popFetchList();
+}, { immediate: true });
+
+// Renote, 引用
+let renoteId = $ref(props.renote?.id ?? null);
+let renote = $ref<Misskey.entities.Note | null>(null);
+watch([$$(renoteId), $$(token)], async ([, newToken]) => {
+	if (!renoteId) {
+		renote = null;
+		return;
+	}
+	if (renoteId === renote?.id && token === newToken) return;
+
+	const { popFetchList } = pushFetchList();
+
+	await os.apiWithDialog('notes/show', { noteId: renoteId }, token)
+		.then(_renote => renote = _renote)
+		.catch(() => renote = null);
+
+	popFetchList();
+}, { immediate: true });
+
+// チャンネル
+let channelId = $ref(props.channel?.id ?? null);
+let channel = $ref<Misskey.entities.Channel | null>(null);
+watch([$$(channelId), $$(token)], async ([, newToken]) => {
+	if (!channelId) {
+		channel = null;
+		return;
+	}
+	if (channelId === channel?.id && token === newToken) return;
+
+	const { popFetchList } = pushFetchList();
+
+	await os.apiWithDialog('channels/show', { noteId: channelId }, token)
+		.then(_channel => {
+			channel = (_channel as Misskey.entities.Channel);
+			visibility = 'public';
+			localOnly = true;
+		})
+		.catch(() => channel = null);
+	
+	popFetchList();
+}, { immediate: true });
+
+// 下書き
+let draftWatching = $ref(false);
+let draftId = $ref<string | null>(null);
+let draft = $ref<Draft.Draft | null>(null);
+const saveDraft = (): void => {
+	Draft.setDraft(draftId ?? autosaveDraftId, {
+		text,
+		useCw,
+		cw,
+		visibility,
+		localOnly,
+		files,
+		poll,
+		replyId,
+		renoteId,
+		channelId,
+	});
+};
+const deleteDraft = (): void => {
+	Draft.deleteDraft(draftId ?? autosaveDraftId);
+};
+const autosaveDraftId = $computed((): string | null => {
+	if (!$i?.id) return null;
+
+	let key = '';
+
+	if (channelId) {
+		key += `ch:${channelId}/`;
+	}
+
+	if (renoteId) {
+		key += `rn:${renoteId}`;
+	} else if (replyId) {
+		key += `re:${replyId}`;
+	} else {
+		key += `new:${$i.id}`;
+	}
+
+	// rename
+	if (!draftId || draftId === key) {
+		const _draft = Draft.getDraft(key);
+		if (_draft) {
+			Draft.deleteDraft(key);
+			Draft.setDraft(key, _draft.data);
+		}
+	}
+
+	return key;
+});
+watch([
+	$$(text),
+	$$(useCw),
+	$$(cw),
+	$$(visibility),
+	$$(localOnly),
+	$$(files),
+	$$(poll),
+	$$(replyId),
+	$$(renoteId),
+	$$(channelId),
+], () => {
+	if (!draftWatching) return;
+	saveDraft();
+}, { deep: true });
+watch($$(draftId), () => {
+	draftWatching = false;
+
+	draft = Draft.getDraft(draftId ?? autosaveDraftId);
+	text = draft?.data.text ?? '';
+	useCw = draft?.data.useCw ?? false;
+	cw = draft?.data.cw ?? '';
+	visibility = draft?.data.visibility ?? Draft.getVisibility();
+	localOnly = draft?.data.localOnly ?? Draft.getLocalOnly();
+	files = draft?.data.files ?? [];
+	poll = draft?.data.poll ?? null;
+	replyId = draft?.data.replyId ?? null;
+	renoteId = draft?.data.renoteId ?? null;
+	channelId = draft?.data.channelId ?? null;
+
+	draftWatching = true;
+}, { immediate: true });
+
+// ハッシュタグ
+const withHashtags = $computed<boolean>(defaultStore.makeGetterSetter('postFormWithHashtags'));
+const hashtags = $computed<string>(defaultStore.makeGetterSetter('postFormHashtags'));
+const recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
+
+// 入力フォーム
+let imeText = $ref(''); // 変換中の文字列
+let showPreview = $ref(false);
+let posting = $ref(false);
+let posted = $ref(false);
+
+const placeholder = $computed((): string => {
+	if (renote) return i18n.ts._postForm.quotePlaceholder;
+	if (reply) return i18n.ts._postForm.replyPlaceholder;
+	if (channel) return i18n.ts._postForm.channelPlaceholder;
+	const xs = [
+		i18n.ts._postForm._placeholders.a,
+		i18n.ts._postForm._placeholders.b,
+		i18n.ts._postForm._placeholders.c,
+		i18n.ts._postForm._placeholders.d,
+		i18n.ts._postForm._placeholders.e,
+		i18n.ts._postForm._placeholders.f,
+	];
+	return xs[Math.floor(Math.random() * xs.length)];
+});
+
+const textLength = $computed((): number => {
+	return length((text + imeText).trim());
+});
+const maxTextLength = $computed((): number => {
+	const instanceTyped = instance as {
+		maxNoteTextLength?: number;
+	} | null | undefined;
+	return instanceTyped?.maxNoteTextLength ?? 1000;
+});
+const canPost = $computed((): boolean => {
+	return !fetching && !posting && !posted &&
+		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
+		(textLength <= maxTextLength) &&
+		(!poll || poll.choices.length >= 2);
+});
+
+const clear = (): void => {
+	text = '';
+	files = [];
+	poll = null;
+	replyId = null;
+	renoteId = null;
+};
+
+// 投稿フォーム全体
+// let draghover = $ref(false);
+const onDragover = (ev: DragEvent): void => {
+	if (!ev.dataTransfer?.items[0]) return;
+	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+	if (isFile || isDriveFile) {
+		ev.preventDefault();
+		// draghover = true;
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy':
+			case 'copyLink':
+			case 'copyMove':
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	}
+};
+const onDragenter = (_ev: DragEvent): void => {
+	// draghover = true;
+};
+const onDragleave = (_ev: DragEvent): void => {
+	// draghover = false;
+};
+const onDrop = (ev: DragEvent): void => {
+	if (!ev.dataTransfer) return;
+	// draghover = false;
+
+	// File
+	if (ev.dataTransfer.files.length > 0) {
+		ev.preventDefault();
+		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
+		return;
+	}
+
+	// DriveFile
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile) {
+		const file = parseObject<Misskey.entities.DriveFile>(driveFile);
+		files.push(file);
+		ev.preventDefault();
+	}
+};
+
+// 入力フォーム
+const typing = throttle(3000, () => {
+	if (channel) {
+		stream.send('typingOnChannel', { channel: channel.id });
+	}
+});
+const onKeydown = (ev: KeyboardEvent): void => {
+	typing();
+	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
+	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
+	if (ev.key === 'Escape' || ev.key === 'Esc') emit('esc');
+};
+const onCompositionUpdate = (ev: CompositionEvent): void => {
+	typing();
+	imeText = ev.data;
+};
+const onCompositionEnd = (_ev: CompositionEvent): void => {
+	imeText = '';
+};
+const onPaste = async (ev: ClipboardEvent): Promise<void> => {
+	if (!ev.clipboardData) return;
+
+	Array.from(ev.clipboardData.items, (item, i) => {
+		if (item.kind !== 'file') return;
+		const file = item.getAsFile();
+		if (!file) return;
+		const lio = file.name.lastIndexOf('.');
+		const ext = lio >= 0 ? file.name.slice(lio) : '';
+		const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+		upload(file, formatted);
+	});
+
+	const paste = ev.clipboardData.getData('text');
+	const path = url + '/notes/';
+
+	if (!renote && !renoteId && paste.startsWith(path)) {
+		ev.preventDefault();
+
+		os.confirm({
+			type: 'info',
+			text: i18n.ts.quoteQuestion,
+		}).then(({ canceled }) => {
+			if (canceled) {
+				insertTextAtCursor(textareaEl, paste);
+				return;
+			}
+
+			renoteId = paste.slice((url + '/notes/').length).split(/[\/\?#]/, 1)[0] || null;
+		});
+	}
+};
+
+// ファイル
+const chooseFileFrom = (ev: MouseEvent): void => {
+	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(_files => {
+		for (const file of _files) {
+			files.push(file);
+		}
+	});
+};
+const detachFile = (id: string): void => {
+	files = files.filter(x => x.id !== id);
+};
+const updateFiles = (_files: Misskey.entities.DriveFile[]): void => {
+	files = _files;
+};
+const updateFileSensitive = (file: Misskey.entities.DriveFile, sensitive: boolean): void => {
+	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+};
+const updateFileName = (file: Misskey.entities.DriveFile, name: string): void => {
+	files[files.findIndex(x => x.id === file.id)].name = name;
+};
+const upload = async (file: File, name?: string): Promise<void> => {
+	const { popFetchList } = pushFetchList();
+
+	await uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+		files.push(res);
+	});
+
+	popFetchList();
+};
+
+const cancel = (): void => {
+	emit('cancel');
+};
+
+const chooseDraft = (): void => {
+	const defaultDraftId = draftId ?? autosaveDraftId;
+	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
+		ignoreDraftIds: defaultDraftId ? [defaultDraftId] : [],
+	}, {
+		chosen: ({ id }: Draft.DraftWithId) => {
+			draftId = id;
+		},
+	}, 'closed');
+};
+
+const openVisibilityPicker = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+		currentVisibility: visibility,
+		currentLocalOnly: localOnly,
+		src: visibilityButton,
+	}, {
+		changeVisibility: (v: typeof visibility) => {
+			visibility = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('visibility', visibility);
+			}
+		},
+		changeLocalOnly: (v: typeof localOnly) => {
+			localOnly = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('localOnly', localOnly);
+			}
+		},
+	}, 'closed');
+};
+
+const togglePoll = (): void => {
+	if (poll) {
+		poll = null;
+	} else {
+		poll = {
+			choices: ['', ''],
+			multiple: false,
+			expiresAt: null,
+			expiredAfter: null,
+		};
+	}
+};
+
+const insertMention = (): void => {
+	os.selectUser().then(user => {
+		insertTextAtCursor(textareaEl, `@${Acct.toString(user)} `);
+	});
+};
+
+const showActions = (ev: MouseEvent): void => {
+	const el = ev.currentTarget ?? ev.target;
+	if (!(el instanceof HTMLElement)) return;
+
+	os.popupMenu(postFormActions.map(action => {
+		return {
+			text: action.title,
+			action: (): void => {
+				action.handler({ text }, (key, value) => {
+					if (key === 'text') text = value;
+				});
+			},
+		};
+	}), el);
+};
+
+const insertEmoji = async (ev: MouseEvent): Promise<void> => {
+	const el = ev.currentTarget ?? ev.target;
+	if (!(el instanceof HTMLElement)) return;
+	os.openEmojiPicker(el, {}, textareaEl);
+};
+
+const post = async (ev?: MouseEvent): Promise<void> => {
+	if (ev) {
+		const el = ev.currentTarget ?? ev.target;
+		if (el instanceof HTMLElement) {
+			const rect = el.getBoundingClientRect();
+			const x = rect.left + (el.offsetWidth / 2);
+			const y = rect.top + (el.offsetHeight / 2);
+			os.popup(MkRippleEffect, { x, y }, {}, 'end');
+		}
+	}
+
+	let postData = {
+		text: text || undefined,
+		fileIds: files.length !== 0 ? files.map(({ id }) => id) : undefined,
+		replyId: replyId || undefined,
+		renoteId: renoteId || undefined,
+		channelId: channelId || undefined,
+		poll: poll,
+		cw: useCw ? cw || '' : undefined,
+		localOnly: localOnly,
+		visibility: visibility,
+		visibleUserIds: visibility === 'specified' ? visibleUsers.map(({ id }) => id) : undefined,
+	};
+
+	if (withHashtags) {
+		const hashtags_ = hashtags.split(/[\s#]/).flatMap(x => x ? [`#${x}`] : []).join(' ');
+		postData.text = `${postData.text} ${hashtags_}`.trim();
+	}
+
+	if (notePostInterruptors.length !== 0) {
+		for (const interruptor of notePostInterruptors) {
+			postData = await interruptor.handler(deepClone(postData)) as typeof postData;
+		}
+	}
+
+	posting = true;
+	os.api('notes/create', postData, token).then(({ createdNote }) => {
+		if (props.freezeAfterPosted) {
+			posted = true;
+		} else {
+			clear();
+		}
+		nextTick(() => {
+			deleteDraft();
+			emit('posted');
+			if (postData.text && postData.text !== '') {
+				const hashtags_ = mfm.parse(postData.text).flatMap((x) => x.type === 'hashtag' ? [x.props.hashtag] : []);
+				const history = parseArray<string[]>(localStorage.getItem('hashtags'));
+				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
+			}
+			posting = false;
+			postAccount = null;
+
+			imanonashi(createdNote);
+		});
+	}).catch((err: unknown) => {
+		const { id, message } = err as {
+			id: string;
+			message: string;
+		};
+		posting = false;
+		os.alert({
+			type: 'error',
+			text: `${message}\n${id}`,
+		});
+	});
+};
+
+onMounted(() => {
+	nextTick(() => {
+		// 削除して編集
+		if (props.initialNote) {
+			draftId = `edit:${Date.now()}`;
+			const init = props.initialNote;
+			text = init.text ?? '';
+			files = init.files;
+			useCw = init.cw != null;
+			cw = init.cw ?? '';
+			if (init.poll) {
+				poll = {
+					choices: init.poll.choices.map(x => x.text),
+					multiple: init.poll.multiple,
+					expiresAt: init.poll.expiresAt ? new Date(init.poll.expiresAt).getTime() : null,
+					expiredAfter: null,
+				};
+			}
+			visibility = init.visibility;
+			localOnly = !!init.localOnly;
+			renoteId = init.renote?.id ?? null;
+			defaultStore.set('postFormWithHashtags', false);
+		}
+	});
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
+}
+
+.header {
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: 1fr;
+	gap: 4px;
+	min-height: 50px;
+}
+
+.headerLeft {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(36px, 50px);
+	grid-auto-rows: minmax(40px, 100%);
+}
+
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	height: 100%;
+}
+
+.account {
+	height: 100%;
+	vertical-align: bottom;
+
+	> .avatar {
+		width: 28px;
+		height: 28px;
+		margin: auto 0;
+	}
+}
+
+.headerRight {
+	justify-self: end;
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	align-items: center;
+	gap: 4px;
+}
+
+.headerRightItem {
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+
+	&:disabled {
+		background: none;
+	}
+}
+
+.headerRightButton {
+	display: flex;
+	gap: 6px;
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+	overflow: hidden;
+	white-space: nowrap;
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		background: var(--X5);
+	}
+
+	&.headerRightButtonActive {
+		color: var(--accent);
+	}
+}
+
+.headerRightButtonText {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.submit {
+	margin: 12px 12px 12px 6px;
+	vertical-align: bottom;
+
+	&:disabled {
+		opacity: 0.7;
+	}
+
+	&.submitPosting {
+		cursor: wait;
+	}
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		> .submitInner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+	}
+
+	> .submitInner {
+		padding: 0 12px;
+		line-height: 34px;
+		font-weight: bold;
+		border-radius: 6px;
+		min-width: 90px;
+		box-sizing: border-box;
+		color: var(--fgOnAccent);
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+}
+
+.replyNote {
+	padding: 0 20px 16px 20px;
+}
+
+.toSpecified {
+	padding: 6px 24px;
+	margin-bottom: 8px;
+	overflow: auto;
+	white-space: nowrap;
+}
+
+.visibleUsers {
+	display: inline;
+	top: -1px;
+	font-size: 14px;
+}
+
+.visibleUser {
+	margin-right: 14px;
+	padding: 8px 0 8px 8px;
+	border-radius: 8px;
+	background: var(--X4);
+}
+
+.infoList {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 0 20px 16px 20px;
+}
+
+.input {
+	--tmsPostForm-inputPadding: 24px;
+	display: block;
+	box-sizing: border-box;
+	padding: 0 var(--tmsPostForm-inputPadding);
+	margin: 0;
+	width: 100%;
+	font-size: 16px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	color: var(--fg);
+	font-family: inherit;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
+}
+
+.cw {
+	padding-bottom: 8px;
+	border-bottom: solid 0.5px var(--divider);
+}
+
+.hashtags {
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-top: solid 0.5px var(--divider);
+}
+
+.textOuter {
+	width: 100%;
+	position: relative;
+}
+
+.text {
+	max-width: 100%;
+	min-width: 100%;
+	width: 100%;
+	min-height: 90px;
+	height: 100%;
+	padding-right: calc(var(--tmsPostForm-inputPadding) + var(--tmsPostForm-counterWidth, 0px));
+
+	&.withCw {
+		padding-top: 8px;
+	}
+}
+
+.quoteNote {
+	padding: 8px var(--tmsPostForm-inputPadding);
+
+	> .quoteNoteInner {
+		position: relative;
+		padding: 16px;
+		border: dashed 1px var(--renote);
+		border-radius: 8px;
+
+		> .quoteNoteCancel {
+			position: absolute;
+			top: 0;
+			right: 0;
+			padding: 4px;
+		}
+	}
+}
+
+.textCount {
+	position: absolute;
+	top: 0;
+	right: 2px;
+	padding: 4px 6px;
+	font-size: 0.9em;
+	color: var(--fg);
+	min-width: 1.6em;
+	pointer-events: none;
+	opacity: 0.8;
+
+	&.textOver {
+		color: var(--error);
+	}
+}
+
+.preview {
+	padding: 16px 20px 0 20px;
+}
+
+.footer {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	grid-auto-rows: 46px;
+	padding: 0 16px 16px 16px;
+	font-size: 1em;
+}
+
+.footerButton {
+	border-radius: 6px;
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		background: var(--X5);
+	}
+
+	&.footerButtonActive {
+		color: var(--accent);
+	}
+}
+
+:global(.max-width_500px) {
+	.headerRight {
+		font-size: 0.9em;
+	}
+
+	.headerRightButtonText {
+		display: none;
+	}
+
+	.submit {
+		margin: 8px 8px 8px 4px;
+	}
+
+	.replyNote {
+		padding: 0 14px 16px 14px;
+	}
+
+	.toSpecified {
+		padding: 6px 16px;
+	}
+
+	.infoList {
+		padding: 0 14px 16px 14px;
+	}
+
+	.input {
+		--tmsPostForm-inputPadding: 16px;
+	}
+
+	.text {
+		min-height: 80px;
+	}
+
+	.preview {
+		padding: 16px 14px 0 14px;
+	}
+
+	.footer {
+		padding: 0 8px 8px 8px;
+	}
+}
+
+:global(.max-width_310px) {
+	.header {
+		gap: 0;
+	}
+
+	.headerRight {
+		gap: 0;
+	}
+
+	.footer {
+		font-size: 14px;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 7258b0199480..4b628a24befd 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -23,7 +23,7 @@
 				</div>
 			</div>
 
-			<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
+			<TmsPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
 
 			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
 		</div>
@@ -33,7 +33,7 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import XPostForm from '@/components/MkPostForm.vue';
+import TmsPostForm from '@/components/TmsPostForm.vue';
 import XTimeline from '@/components/MkTimeline.vue';
 import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
 import * as os from '@/os';
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index a7e797eeabc3..1114e5361a99 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<XPostForm
+		<TmsPostForm
 			v-if="state === 'writing'"
 			fixed
 			:instant="true"
@@ -29,7 +29,7 @@ import { noteVisibilities } from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
-import XPostForm from '@/components/MkPostForm.vue';
+import TmsPostForm from '@/components/TmsPostForm.vue';
 import * as os from '@/os';
 import { mainRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index b13358da563e..9f7d98e81135 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -4,7 +4,7 @@
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+			<TmsPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
 			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 			<div class="tl _block">
@@ -24,7 +24,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, watch, provide } from 'vue';
 import XTimeline from '@/components/MkTimeline.vue';
-import XPostForm from '@/components/MkPostForm.vue';
+import TmsPostForm from '@/components/TmsPostForm.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 614c3564d44a..0b037c04c220 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -9,7 +9,7 @@ const LS_MESSAGE_DRAFTS_KEY = 'tmsMessageDrafts';
 type DraftData = {
 	text: string;
 	useCw: boolean;
-	cw: string | null;
+	cw: string;
 	visibility: Misskey.entities.Note['visibility'];
 	localOnly: boolean;
 	files: Misskey.entities.DriveFile[];
@@ -56,8 +56,8 @@ const isEmptyObject = <T extends Record<string, unknown>>(obj: T, ignoreKeys?: (
 	return !Object.entries(obj).some(([k, v]) => !(ignoreKeys ?? []).includes(k) && typeof v !== 'undefined');
 };
 
-const getVisibility = (): Misskey.entities.Note['visibility'] => defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
-const getLocalOnly = (): boolean => defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
+export const getVisibility = (): Misskey.entities.Note['visibility'] => defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
+export const getLocalOnly = (): boolean => defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
 
 const loadLsDrafts = (): Record<string, LsDraft | undefined> => parseObject<Record<string, LsDraft | undefined>>(localStorage.getItem(LS_DRAFTS_KEY));
 const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => localStorage.setItem(LS_DRAFTS_KEY, JSON.stringify(drafts));
@@ -67,7 +67,7 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 	return {
 		text: text ?? '',
 		useCw: useCw ?? false,
-		cw: cw ?? (useCw ? '' : null),
+		cw: cw ?? '',
 		visibility: visibility ?? getVisibility(),
 		localOnly: localOnly ?? getLocalOnly(),
 		files: files ?? [],
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
index 96a216f4f894..f7314726b959 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -1,12 +1,12 @@
 <template>
-<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
+<TmsPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget';
-import XPostForm from '@/components/MkPostForm.vue';
+import { GetFormResultType } from '@/scripts/form';
+import TmsPostForm from '@/components/TmsPostForm.vue';
 
 const name = 'postForm';
 

From 0f97ff3d6efb9aeb2bcb137ef5c77294ff9b3646 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 04:25:00 +0900
Subject: [PATCH 026/147] fix TmsPostForm

---
 packages/client/src/components/TmsPostForm.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 922517fa693e..b922e87195ae 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -2,7 +2,8 @@
 <div
 	ref="rootEl"
 	v-size="{ max: [310, 500] }"
-	:class="[$style.root, { [$style.modal]: modal, _popup: modal, '--tmsPostForm-counterWidth': `${textCountElWidth}px` }]"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
+	:style="{ '--tmsPostForm-counterWidth': `${textCountElWidth}px` }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -355,8 +356,8 @@ watch($$(postAccount), async () => {
 		id: string;
 		token: string;
 	}[];
-	token = storedAccounts.find(x => x.id === postAccount?.id)?.token ?? null;
-});
+	token = storedAccounts.find(x => x.id === (postAccount?.id ?? $i?.id))?.token ?? null;
+}, { immediate: true });
 const openAccountMenu = (ev: MouseEvent): void => {
 	openAccountMenu_({
 		withExtraOperation: false,
@@ -1108,6 +1109,10 @@ onMounted(() => {
 	flex-direction: column;
 	gap: 8px;
 	padding: 0 20px 16px 20px;
+
+	&:empty {
+		display: none;
+	}
 }
 
 .input {
@@ -1204,12 +1209,12 @@ onMounted(() => {
 	display: grid;
 	grid-auto-flow: row;
 	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
-	grid-auto-rows: 46px;
 	padding: 0 16px 16px 16px;
 	font-size: 1em;
 }
 
 .footerButton {
+	aspect-ratio: 1 / 1;
 	border-radius: 6px;
 
 	&:not(:disabled):hover,

From 619844eeba4c183024a61f27265a899e0e2999ad Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 04:30:29 +0900
Subject: [PATCH 027/147] fix

---
 packages/client/src/components/TmsPostForm.vue | 4 ++--
 packages/client/src/os.ts                      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index b922e87195ae..8fb2529a5107 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -356,8 +356,8 @@ watch($$(postAccount), async () => {
 		id: string;
 		token: string;
 	}[];
-	token = storedAccounts.find(x => x.id === (postAccount?.id ?? $i?.id))?.token ?? null;
-}, { immediate: true });
+	token = storedAccounts.find(x => x.id === postAccount?.id)?.token ?? null;
+});
 const openAccountMenu = (ev: MouseEvent): void => {
 	openAccountMenu_({
 		withExtraOperation: false,
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 0bdd6b51afa8..a6a32f47c3f5 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -26,7 +26,7 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 	const promise = new Promise((resolve, reject) => {
 		// Append a credential
 		if ($i) data.i = $i.token;
-		if (token !== undefined) data.i = token;
+		if (token != null) data.i = token;
 
 		// Send request
 		fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, {

From 095af9ce6ef4c4a52a7538b7ad6522d42597ab69 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 05:22:02 +0900
Subject: [PATCH 028/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 132 ++++++++++--------
 1 file changed, 77 insertions(+), 55 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 8fb2529a5107..126482a8778b 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -69,18 +69,20 @@
 		<MkInfo v-if="hasNotSpecifiedMentions" warn>{{ i18n.ts.notSpecifiedMentionWarning }}<span style="margin: 0 4px; user-select: none;">-</span><button class="_textButton" @click="addMissingMention">{{ i18n.ts.add }}</button></MkInfo>
 		<MkInfo v-if="hasAnnoyingText" warn>{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
 	</div>
-	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="[$style.input, $style.cw]" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-	<div :class="$style.textOuter">
-		<textarea ref="textareaEl" v-model="text" :class="[$style.input, $style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
-		<div v-if="renote" :class="$style.quoteNote">
-			<div :class="$style.quoteNoteInner">
-				<MkNoteSimple :note="renote"/>
-				<button :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
+	<div :class="$style.forms">
+		<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="[$style.input, $style.cw]" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+		<div :class="$style.textOuter">
+			<textarea ref="textareaEl" v-model="text" :class="[$style.input, $style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
+			<div v-if="renote" :class="$style.quoteNote">
+				<div :class="$style.quoteNoteInner">
+					<MkNoteSimple :note="renote"/>
+					<button :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
+				</div>
 			</div>
+			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 		</div>
-		<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
 	</div>
-	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
 	<MkPostFormAttaches :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
@@ -206,9 +208,10 @@ onMounted(() => {
 	}
 	if (textCountEl) {
 		textCountElResizeObserver = new ResizeObserver(entries => {
-			entries.forEach(({ contentBoxSize }) => {
-				contentBoxSize.forEach(({ inlineSize }) => {
-					textCountElWidth = Math.ceil(inlineSize);
+			entries.forEach(({ borderBoxSize }) => {
+				borderBoxSize.forEach(({ inlineSize }) => {
+					const width = Math.ceil(inlineSize);
+					textCountElWidth = width + (width % 2);
 				});
 			});
 		});
@@ -283,20 +286,6 @@ const removeVisibleUser = (user: Misskey.entities.User): void => {
 	visibleUsers = erase(user, visibleUsers);
 };
 
-if (props.initialVisibleUsers) {
-	props.initialVisibleUsers.forEach(user => pushVisibleUser(user));
-}
-
-if (props.specified) {
-	visibility = 'specified';
-	pushVisibleUser(props.specified);
-}
-
-if (props.mention) {
-	const mention = `@${props.mention.username}${(props.mention.host != null && props.mention.host !== host) ? `@${toASCII(props.mention.host)}` : ''}`;
-	text = `${mention} ${text}`;
-}
-
 // 宛先
 let hasNotSpecifiedMentions = $ref(false);
 const checkMissingMention = (): void => {
@@ -416,7 +405,7 @@ const mergeVisibility = async (note: Misskey.entities.Note): Promise<void> => {
 };
 
 // 返信
-let replyId = $ref(props.reply?.id ?? null);
+let replyId = $ref<string | null>(null);
 let reply = $ref<Misskey.entities.Note | null>(null);
 watch([$$(replyId), $$(token)], async ([, newToken]) => {
 	if (!replyId) {
@@ -476,7 +465,7 @@ watch([$$(replyId), $$(token)], async ([, newToken]) => {
 }, { immediate: true });
 
 // Renote, 引用
-let renoteId = $ref(props.renote?.id ?? null);
+let renoteId = $ref<string | null>(null);
 let renote = $ref<Misskey.entities.Note | null>(null);
 watch([$$(renoteId), $$(token)], async ([, newToken]) => {
 	if (!renoteId) {
@@ -492,10 +481,10 @@ watch([$$(renoteId), $$(token)], async ([, newToken]) => {
 		.catch(() => renote = null);
 
 	popFetchList();
-}, { immediate: true });
+});
 
 // チャンネル
-let channelId = $ref(props.channel?.id ?? null);
+let channelId = $ref<string | null>(null);
 let channel = $ref<Misskey.entities.Channel | null>(null);
 watch([$$(channelId), $$(token)], async ([, newToken]) => {
 	if (!channelId) {
@@ -515,7 +504,7 @@ watch([$$(channelId), $$(token)], async ([, newToken]) => {
 		.catch(() => channel = null);
 	
 	popFetchList();
-}, { immediate: true });
+});
 
 // 下書き
 let draftWatching = $ref(false);
@@ -543,14 +532,14 @@ const autosaveDraftId = $computed((): string | null => {
 
 	let key = '';
 
-	if (channelId) {
-		key += `ch:${channelId}/`;
+	if (channel) {
+		key += `ch:${channel.id}/`;
 	}
 
-	if (renoteId) {
-		key += `rn:${renoteId}`;
-	} else if (replyId) {
-		key += `re:${replyId}`;
+	if (renote) {
+		key += `rn:${renote.id}`;
+	} else if (reply) {
+		key += `re:${reply.id}`;
 	} else {
 		key += `new:${$i.id}`;
 	}
@@ -574,9 +563,9 @@ watch([
 	$$(localOnly),
 	$$(files),
 	$$(poll),
-	$$(replyId),
-	$$(renoteId),
-	$$(channelId),
+	$$(reply),
+	$$(renote),
+	$$(channel),
 ], () => {
 	if (!draftWatching) return;
 	saveDraft();
@@ -737,7 +726,7 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	const paste = ev.clipboardData.getData('text');
 	const path = url + '/notes/';
 
-	if (!renote && !renoteId && paste.startsWith(path)) {
+	if (!renote && paste.startsWith(path)) {
 		ev.preventDefault();
 
 		os.confirm({
@@ -881,9 +870,9 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 	let postData = {
 		text: text || undefined,
 		fileIds: files.length !== 0 ? files.map(({ id }) => id) : undefined,
-		replyId: replyId || undefined,
-		renoteId: renoteId || undefined,
-		channelId: channelId || undefined,
+		replyId: reply?.id || undefined,
+		renoteId: renote?.id || undefined,
+		channelId: channel?.id || undefined,
 		poll: poll,
 		cw: useCw ? cw || '' : undefined,
 		localOnly: localOnly,
@@ -937,7 +926,33 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 
 onMounted(() => {
 	nextTick(() => {
-		// 削除して編集
+		if (props.initialVisibleUsers) {
+			props.initialVisibleUsers.forEach(user => pushVisibleUser(user));
+		}
+
+		if (props.specified) {
+			visibility = 'specified';
+			pushVisibleUser(props.specified);
+		}
+
+		if (props.mention) {
+			const { username, host: _host } = props.mention;
+			const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
+			text = `${mention} ${text}`;
+		}
+
+		if (props.reply) {
+			replyId = props.reply.id;
+		}
+
+		if (props.renote) {
+			renoteId = props.renote.id;
+		}
+
+		if (props.channel) {
+			channelId = props.channel.id;
+		}
+
 		if (props.initialNote) {
 			draftId = `edit:${Date.now()}`;
 			const init = props.initialNote;
@@ -1041,12 +1056,16 @@ onMounted(() => {
 	&.headerRightButtonActive {
 		color: var(--accent);
 	}
-}
 
-.headerRightButtonText {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	> .headerRightButtonText {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:enabled > .headerRightButtonText {
+		opacity: 0.8;
+	}
 }
 
 .submit {
@@ -1115,8 +1134,11 @@ onMounted(() => {
 	}
 }
 
-.input {
+.forms {
 	--tmsPostForm-inputPadding: 24px;
+}
+
+.input {
 	display: block;
 	box-sizing: border-box;
 	padding: 0 var(--tmsPostForm-inputPadding);
@@ -1160,7 +1182,7 @@ onMounted(() => {
 	width: 100%;
 	min-height: 90px;
 	height: 100%;
-	padding-right: calc(var(--tmsPostForm-inputPadding) + var(--tmsPostForm-counterWidth, 0px));
+	padding-right: max(var(--tmsPostForm-inputPadding), var(--tmsPostForm-counterWidth, 0px));
 
 	&.withCw {
 		padding-top: 8px;
@@ -1188,8 +1210,8 @@ onMounted(() => {
 .textCount {
 	position: absolute;
 	top: 0;
-	right: 2px;
-	padding: 4px 6px;
+	right: 0;
+	padding: 4px 8px;
 	font-size: 0.9em;
 	color: var(--fg);
 	min-width: 1.6em;
@@ -1252,7 +1274,7 @@ onMounted(() => {
 		padding: 0 14px 16px 14px;
 	}
 
-	.input {
+	.forms {
 		--tmsPostForm-inputPadding: 16px;
 	}
 

From 88b1046ef8d8a9b8606924a682ddc77a7c92b55a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 05:31:59 +0900
Subject: [PATCH 029/147] fix

---
 packages/client/src/components/TmsPostForm.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 126482a8778b..9ab09fe8235c 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -495,7 +495,7 @@ watch([$$(channelId), $$(token)], async ([, newToken]) => {
 
 	const { popFetchList } = pushFetchList();
 
-	await os.apiWithDialog('channels/show', { noteId: channelId }, token)
+	await os.apiWithDialog('channels/show', { channelId: channelId }, token)
 		.then(_channel => {
 			channel = (_channel as Misskey.entities.Channel);
 			visibility = 'public';
@@ -942,14 +942,17 @@ onMounted(() => {
 		}
 
 		if (props.reply) {
+			reply = props.reply;
 			replyId = props.reply.id;
 		}
 
 		if (props.renote) {
+			renote = props.renote;
 			renoteId = props.renote.id;
 		}
 
 		if (props.channel) {
+			channel = props.channel;
 			channelId = props.channel.id;
 		}
 

From 8ac466d0ff9a77fe71c1d1e82be022835cde7d0f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 05:57:02 +0900
Subject: [PATCH 030/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 124 ++++++++++--------
 1 file changed, 67 insertions(+), 57 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 9ab09fe8235c..9a7166d633a9 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -383,6 +383,8 @@ const mergeVisibility = async (note: Misskey.entities.Note): Promise<void> => {
 	}
 
 	if (visibility === 'specified') {
+		localOnly = false;
+
 		const visibleUserIds = note.visibleUserIds?.filter(uid => uid !== $i?.id && uid !== note.userId) ?? [];
 		if (note.userId !== $i?.id) visibleUserIds.push(note.userId);
 
@@ -407,59 +409,62 @@ const mergeVisibility = async (note: Misskey.entities.Note): Promise<void> => {
 // 返信
 let replyId = $ref<string | null>(null);
 let reply = $ref<Misskey.entities.Note | null>(null);
-watch([$$(replyId), $$(token)], async ([, newToken]) => {
-	if (!replyId) {
-		reply = null;
-		return;
+const updateReply = (_reply: Misskey.entities.Note | null): void => {
+	reply = _reply;
+	if (!reply) return;
+
+	mergeVisibility(reply);
+
+	// keep cw
+	if (defaultStore.state.keepCw && reply.cw) {
+		useCw = true;
+		cw = reply.cw;
 	}
-	if (replyId === reply?.id && token === newToken) return;
 
-	const { popFetchList } = pushFetchList();
+	let mentionText = '';
+	const addMention = ({ username, host: _host }: {
+		username: string;
+		host: string | null;
+	}): void => {
+		if ($i?.username === username && (_host == null || _host === host)) return;
 
-	await os.apiWithDialog('notes/show', { noteId: replyId }, token)
-		.then(_reply => {
-			reply = _reply;
-			mergeVisibility(reply);
-
-			// keep cw
-			if (defaultStore.state.keepCw && reply.cw) {
-				useCw = true;
-				cw = reply.cw;
-			}
+		const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
 
-			let mentionText = '';
-			const addMention = ({ username, host: _host }: {
-				username: string;
-				host: string | null;
-			}): void => {
-				if ($i?.username === username && (_host == null || _host === host)) return;
+		if (`${mentionText}${text}`.includes(`${mention} `)) return;
 
-				const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
+		mentionText += `${mention} `;
+	};
 
-				if (`${mentionText}${text}`.includes(`${mention} `)) return;
+	addMention({
+		username: reply.user.username,
+		host: reply.user.host,
+	});
 
-				mentionText += `${mention} `;
-			};
+	if (reply.text != null) {
+		const ast = mfm.parse(reply.text);
 
+		for (const x of extractMentions(ast)) {
 			addMention({
-				username: reply.user.username,
-				host: reply.user.host,
+				username: x.username,
+				host: x.host,
 			});
+		}
+	}
 
-			if (reply.text != null) {
-				const ast = mfm.parse(reply.text);
+	text = `${mentionText}${text}`;
+};
+watch([$$(replyId), $$(token)], async ([, newToken]) => {
+	if (!replyId) {
+		updateReply(null);
+		return;
+	}
+	if (replyId === reply?.id && token === newToken) return;
 
-				for (const x of extractMentions(ast)) {
-					addMention({
-						username: x.username,
-						host: x.host,
-					});
-				}
-			}
+	const { popFetchList } = pushFetchList();
 
-			text = `${mentionText}${text}`;
-		})
-		.catch(() => reply = null);
+	await os.apiWithDialog('notes/show', { noteId: replyId }, token)
+		.then(updateReply)
+		.catch(updateReply);
 
 	popFetchList();
 }, { immediate: true });
@@ -467,9 +472,13 @@ watch([$$(replyId), $$(token)], async ([, newToken]) => {
 // Renote, 引用
 let renoteId = $ref<string | null>(null);
 let renote = $ref<Misskey.entities.Note | null>(null);
+const updateRenote = (_renote: Misskey.entities.Note | null): void => {
+	renote = _renote;
+	if (!renote) return;
+};
 watch([$$(renoteId), $$(token)], async ([, newToken]) => {
 	if (!renoteId) {
-		renote = null;
+		updateRenote(null);
 		return;
 	}
 	if (renoteId === renote?.id && token === newToken) return;
@@ -477,8 +486,8 @@ watch([$$(renoteId), $$(token)], async ([, newToken]) => {
 	const { popFetchList } = pushFetchList();
 
 	await os.apiWithDialog('notes/show', { noteId: renoteId }, token)
-		.then(_renote => renote = _renote)
-		.catch(() => renote = null);
+		.then(updateRenote)
+		.catch(updateRenote);
 
 	popFetchList();
 });
@@ -486,9 +495,16 @@ watch([$$(renoteId), $$(token)], async ([, newToken]) => {
 // チャンネル
 let channelId = $ref<string | null>(null);
 let channel = $ref<Misskey.entities.Channel | null>(null);
+const updateChannel = (_channel: unknown | Misskey.entities.Channel | null): void => {
+	channel = (_channel as Misskey.entities.Channel | null);
+	if (!channel) return;
+
+	visibility = 'public';
+	localOnly = true;
+};
 watch([$$(channelId), $$(token)], async ([, newToken]) => {
 	if (!channelId) {
-		channel = null;
+		updateChannel(null);
 		return;
 	}
 	if (channelId === channel?.id && token === newToken) return;
@@ -496,12 +512,8 @@ watch([$$(channelId), $$(token)], async ([, newToken]) => {
 	const { popFetchList } = pushFetchList();
 
 	await os.apiWithDialog('channels/show', { channelId: channelId }, token)
-		.then(_channel => {
-			channel = (_channel as Misskey.entities.Channel);
-			visibility = 'public';
-			localOnly = true;
-		})
-		.catch(() => channel = null);
+		.then(updateChannel)
+		.catch(updateChannel);
 	
 	popFetchList();
 });
@@ -932,6 +944,7 @@ onMounted(() => {
 
 		if (props.specified) {
 			visibility = 'specified';
+			localOnly = false;
 			pushVisibleUser(props.specified);
 		}
 
@@ -942,17 +955,17 @@ onMounted(() => {
 		}
 
 		if (props.reply) {
-			reply = props.reply;
+			updateReply(props.reply);
 			replyId = props.reply.id;
 		}
 
 		if (props.renote) {
-			renote = props.renote;
+			updateRenote(props.renote);
 			renoteId = props.renote.id;
 		}
 
 		if (props.channel) {
-			channel = props.channel;
+			updateChannel(props.channel);
 			channelId = props.channel.id;
 		}
 
@@ -1030,6 +1043,7 @@ onMounted(() => {
 	grid-auto-columns: max-content;
 	align-items: center;
 	gap: 4px;
+	font-size: 0.9em;
 }
 
 .headerRightItem {
@@ -1253,10 +1267,6 @@ onMounted(() => {
 }
 
 :global(.max-width_500px) {
-	.headerRight {
-		font-size: 0.9em;
-	}
-
 	.headerRightButtonText {
 		display: none;
 	}

From 9c4035fd59bfc4ddaffaa266eabfcc89c8bc80b2 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 06:14:58 +0900
Subject: [PATCH 031/147] fix

---
 .../client/src/components/TmsDraftsList.vue   |  2 +-
 packages/client/src/scripts/tms/drafts.ts     | 20 +++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index de72d6d08287..22214f17ccff 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -15,7 +15,7 @@
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 				<div>{{ i18n.ts.nothing }}</div>
 			</div>
-			<div v-else :class="$style.drastsList">
+			<div v-else :class="$style.draftsList">
 				<TmsDraft v-for="draftItem in draftsList" :key="draftItem.id" :draft="draftItem" @chosen="chosen" @deleted="deleted"/>
 			</div>
 		</div>
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 0b037c04c220..ec94d69034c7 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -64,7 +64,8 @@ const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => loca
 
 const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId } = lsDraft;
-	return {
+
+	const draftData: DraftData = {
 		text: text ?? '',
 		useCw: useCw ?? false,
 		cw: cw ?? '',
@@ -76,10 +77,17 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 		renoteId: renoteId ?? null,
 		channelId: channelId ?? null,
 	};
+
+	if (draftData.channelId) {
+		draftData.localOnly = true;
+	}
+
+	return draftData;
 };
 
 export const getAllDraft = (): DraftWithId[] => {
 	const drafts = loadLsDrafts();
+
 	return Object.entries(drafts).flatMap(([id, draft]) => {
 		if (!draft) return [];
 		const { updatedAt, data } = draft;
@@ -125,6 +133,10 @@ export const setDraft = (draftKey: string | null, data: DraftData): void => {
 		channelId: channelId ?? undefined,
 	};
 
+	if (draftData.channelId) {
+		draftData.localOnly = undefined;
+	}
+
 	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId'])) return deleteDraft(draftKey);
 
 	saveLsDrafts({
@@ -151,14 +163,18 @@ const saveLsMessageDrafts = (drafts: Record<string, LsMessageDraft | undefined>)
 
 const restoreMessageDraftData = (lsDraft: Partial<MessageDraftData>): MessageDraftData => {
 	const { text, file } = lsDraft;
-	return {
+
+	const draftData: MessageDraftData = {
 		text: text ?? '',
 		file: file ?? null,
 	};
+
+	return draftData;
 };
 
 export const getAllMessageDraft = (): MessageDraftWithId[] => {
 	const drafts = loadLsMessageDrafts();
+
 	return Object.entries(drafts).flatMap(([id, draft]) => {
 		if (!draft) return [];
 		const { updatedAt, data } = draft;

From 793a11a7789671ac84e7c313d3086e3eb14be50f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 06:36:12 +0900
Subject: [PATCH 032/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 9a7166d633a9..bb1f037a9a93 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -598,7 +598,7 @@ watch($$(draftId), () => {
 	channelId = draft?.data.channelId ?? null;
 
 	draftWatching = true;
-}, { immediate: true });
+});
 
 // ハッシュタグ
 const withHashtags = $computed<boolean>(defaultStore.makeGetterSetter('postFormWithHashtags'));
@@ -970,25 +970,32 @@ onMounted(() => {
 		}
 
 		if (props.initialNote) {
-			draftId = `edit:${Date.now()}`;
-			const init = props.initialNote;
-			text = init.text ?? '';
-			files = init.files;
-			useCw = init.cw != null;
-			cw = init.cw ?? '';
-			if (init.poll) {
-				poll = {
+			const init = props.initialNote as Misskey.entities.Note & {
+				channel?: Misskey.entities.Channel;
+			};
+			const _draftId = `edit:${Date.now()}`;
+			Draft.setDraft(_draftId, {
+				text: init.text ?? '',
+				useCw: init.cw != null,
+				cw: init.cw ?? '',
+				visibility: init.visibility,
+				localOnly: !!init.localOnly,
+				files: init.files,
+				poll: init.poll ? {
 					choices: init.poll.choices.map(x => x.text),
 					multiple: init.poll.multiple,
 					expiresAt: init.poll.expiresAt ? new Date(init.poll.expiresAt).getTime() : null,
 					expiredAfter: null,
-				};
-			}
-			visibility = init.visibility;
-			localOnly = !!init.localOnly;
-			renoteId = init.renote?.id ?? null;
+				} : null,
+				replyId: init.reply?.id ?? null,
+				renoteId: init.renote?.id ?? null,
+				channelId: init.channel?.id ?? null,
+			});
 			defaultStore.set('postFormWithHashtags', false);
+			draftId = _draftId;
 		}
+
+		draftWatching = true;
 	});
 });
 </script>

From ea00ea0ec151117535267c383117cc96c3b09e00 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 06:51:21 +0900
Subject: [PATCH 033/147] fix

---
 packages/client/src/components/TmsPostForm.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index bb1f037a9a93..a62a35263c6e 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -582,7 +582,8 @@ watch([
 	if (!draftWatching) return;
 	saveDraft();
 }, { deep: true });
-watch($$(draftId), () => {
+
+const loadDraft = (): void => {
 	draftWatching = false;
 
 	draft = Draft.getDraft(draftId ?? autosaveDraftId);
@@ -598,6 +599,9 @@ watch($$(draftId), () => {
 	channelId = draft?.data.channelId ?? null;
 
 	draftWatching = true;
+};
+watch($$(draftId), () => {
+	loadDraft();
 });
 
 // ハッシュタグ
@@ -993,6 +997,8 @@ onMounted(() => {
 			});
 			defaultStore.set('postFormWithHashtags', false);
 			draftId = _draftId;
+		} else {
+			loadDraft();
 		}
 
 		draftWatching = true;

From 2c375da824383734d1b9e36e36511458a103b4d9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 07:20:01 +0900
Subject: [PATCH 034/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 53 +++++++------------
 1 file changed, 19 insertions(+), 34 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index a62a35263c6e..6893a0d9f467 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -523,7 +523,7 @@ let draftWatching = $ref(false);
 let draftId = $ref<string | null>(null);
 let draft = $ref<Draft.Draft | null>(null);
 const saveDraft = (): void => {
-	Draft.setDraft(draftId ?? autosaveDraftId, {
+	Draft.setDraft(draftId, {
 		text,
 		useCw,
 		cw,
@@ -537,36 +537,8 @@ const saveDraft = (): void => {
 	});
 };
 const deleteDraft = (): void => {
-	Draft.deleteDraft(draftId ?? autosaveDraftId);
+	Draft.deleteDraft(draftId);
 };
-const autosaveDraftId = $computed((): string | null => {
-	if (!$i?.id) return null;
-
-	let key = '';
-
-	if (channel) {
-		key += `ch:${channel.id}/`;
-	}
-
-	if (renote) {
-		key += `rn:${renote.id}`;
-	} else if (reply) {
-		key += `re:${reply.id}`;
-	} else {
-		key += `new:${$i.id}`;
-	}
-
-	// rename
-	if (!draftId || draftId === key) {
-		const _draft = Draft.getDraft(key);
-		if (_draft) {
-			Draft.deleteDraft(key);
-			Draft.setDraft(key, _draft.data);
-		}
-	}
-
-	return key;
-});
 watch([
 	$$(text),
 	$$(useCw),
@@ -586,7 +558,7 @@ watch([
 const loadDraft = (): void => {
 	draftWatching = false;
 
-	draft = Draft.getDraft(draftId ?? autosaveDraftId);
+	draft = Draft.getDraft(draftId);
 	text = draft?.data.text ?? '';
 	useCw = draft?.data.useCw ?? false;
 	cw = draft?.data.cw ?? '';
@@ -794,9 +766,8 @@ const cancel = (): void => {
 };
 
 const chooseDraft = (): void => {
-	const defaultDraftId = draftId ?? autosaveDraftId;
 	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
-		ignoreDraftIds: defaultDraftId ? [defaultDraftId] : [],
+		ignoreDraftIds: draftId ? [draftId] : [],
 	}, {
 		chosen: ({ id }: Draft.DraftWithId) => {
 			draftId = id;
@@ -998,7 +969,21 @@ onMounted(() => {
 			defaultStore.set('postFormWithHashtags', false);
 			draftId = _draftId;
 		} else {
-			loadDraft();
+			let _draftId = '';
+
+			if (props.channel) {
+				_draftId += `ch:${props.channel.id}/`;
+			}
+
+			if (props.renote) {
+				_draftId += `rn:${props.renote.id}`;
+			} else if (props.reply) {
+				_draftId += `re:${props.reply.id}`;
+			} else if ($i) {
+				_draftId += `new:${$i.id}`;
+			}
+
+			draftId = _draftId || null;
 		}
 
 		draftWatching = true;

From 22166f78863df8a586cebb4bff1a232b0ab39d20 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 07:53:52 +0900
Subject: [PATCH 035/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 48 ++++++++++++++-----
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 6893a0d9f467..e9bc906963e6 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -306,7 +306,7 @@ const addMissingMention = (): void => {
 
 	for (const x of extractMentions(ast)) {
 		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host ?? undefined }).then(user => {
+			os.api('users/show', { username: x.username, host: x.host ?? undefined }, token).then(user => {
 				visibleUsers.push(user);
 			});
 		}
@@ -345,7 +345,31 @@ watch($$(postAccount), async () => {
 		id: string;
 		token: string;
 	}[];
-	token = storedAccounts.find(x => x.id === postAccount?.id)?.token ?? null;
+	const newToken = storedAccounts.find(x => x.id === postAccount?.id)?.token ?? null;
+
+	if (token !== newToken) {
+		token = newToken;
+
+		const { popFetchList } = pushFetchList();
+
+		if (reply) {
+			await os.apiWithDialog('notes/show', { noteId: reply.id }, token)
+				.then(updateReply)
+				.catch(updateReply);
+		}
+		if (renote) {
+			await os.apiWithDialog('notes/show', { noteId: renote.id }, token)
+				.then(updateRenote)
+				.catch(updateRenote);
+		}
+		if (channel) {
+			await os.apiWithDialog('channels/show', { channelId: channel.id }, token)
+				.then(updateChannel)
+				.catch(updateChannel);
+		}
+
+		popFetchList();
+	}
 });
 const openAccountMenu = (ev: MouseEvent): void => {
 	openAccountMenu_({
@@ -395,7 +419,7 @@ const mergeVisibility = async (note: Misskey.entities.Note): Promise<void> => {
 
 			await os.api('users/show', {
 				userIds: visibleUserIds,
-			}).then(users => {
+			}, token).then(users => {
 				users.forEach(pushVisibleUser);
 			});
 
@@ -453,12 +477,12 @@ const updateReply = (_reply: Misskey.entities.Note | null): void => {
 
 	text = `${mentionText}${text}`;
 };
-watch([$$(replyId), $$(token)], async ([, newToken]) => {
+watch($$(replyId), async () => {
 	if (!replyId) {
 		updateReply(null);
 		return;
 	}
-	if (replyId === reply?.id && token === newToken) return;
+	if (replyId === reply?.id) return;
 
 	const { popFetchList } = pushFetchList();
 
@@ -476,12 +500,12 @@ const updateRenote = (_renote: Misskey.entities.Note | null): void => {
 	renote = _renote;
 	if (!renote) return;
 };
-watch([$$(renoteId), $$(token)], async ([, newToken]) => {
+watch($$(renoteId), async () => {
 	if (!renoteId) {
 		updateRenote(null);
 		return;
 	}
-	if (renoteId === renote?.id && token === newToken) return;
+	if (renoteId === renote?.id) return;
 
 	const { popFetchList } = pushFetchList();
 
@@ -502,12 +526,12 @@ const updateChannel = (_channel: unknown | Misskey.entities.Channel | null): voi
 	visibility = 'public';
 	localOnly = true;
 };
-watch([$$(channelId), $$(token)], async ([, newToken]) => {
+watch($$(channelId), async () => {
 	if (!channelId) {
 		updateChannel(null);
 		return;
 	}
-	if (channelId === channel?.id && token === newToken) return;
+	if (channelId === channel?.id) return;
 
 	const { popFetchList } = pushFetchList();
 
@@ -531,9 +555,9 @@ const saveDraft = (): void => {
 		localOnly,
 		files,
 		poll,
-		replyId,
-		renoteId,
-		channelId,
+		replyId: reply?.id ?? null,
+		renoteId: renote?.id ?? null,
+		channelId: channel?.id ?? null,
 	});
 };
 const deleteDraft = (): void => {

From 3baebf3a567ce31b83e0d99e50678758d1e87f7c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 08:09:08 +0900
Subject: [PATCH 036/147] fix

---
 packages/client/src/components/TmsPostForm.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index e9bc906963e6..b2691b5beb0e 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -76,7 +76,7 @@
 			<div v-if="renote" :class="$style.quoteNote">
 				<div :class="$style.quoteNoteInner">
 					<MkNoteSimple :note="renote"/>
-					<button :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
+					<button v-if="!props.renote" :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
 				</div>
 			</div>
 			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
@@ -435,6 +435,7 @@ let replyId = $ref<string | null>(null);
 let reply = $ref<Misskey.entities.Note | null>(null);
 const updateReply = (_reply: Misskey.entities.Note | null): void => {
 	reply = _reply;
+	replyId = reply?.id ?? null;
 	if (!reply) return;
 
 	mergeVisibility(reply);
@@ -479,7 +480,7 @@ const updateReply = (_reply: Misskey.entities.Note | null): void => {
 };
 watch($$(replyId), async () => {
 	if (!replyId) {
-		updateReply(null);
+		reply = null;
 		return;
 	}
 	if (replyId === reply?.id) return;
@@ -498,11 +499,12 @@ let renoteId = $ref<string | null>(null);
 let renote = $ref<Misskey.entities.Note | null>(null);
 const updateRenote = (_renote: Misskey.entities.Note | null): void => {
 	renote = _renote;
+	renoteId = renote?.id ?? null;
 	if (!renote) return;
 };
 watch($$(renoteId), async () => {
 	if (!renoteId) {
-		updateRenote(null);
+		renote = null;
 		return;
 	}
 	if (renoteId === renote?.id) return;
@@ -521,6 +523,7 @@ let channelId = $ref<string | null>(null);
 let channel = $ref<Misskey.entities.Channel | null>(null);
 const updateChannel = (_channel: unknown | Misskey.entities.Channel | null): void => {
 	channel = (_channel as Misskey.entities.Channel | null);
+	channelId = channel?.id ?? null;
 	if (!channel) return;
 
 	visibility = 'public';
@@ -528,7 +531,7 @@ const updateChannel = (_channel: unknown | Misskey.entities.Channel | null): voi
 };
 watch($$(channelId), async () => {
 	if (!channelId) {
-		updateChannel(null);
+		channel = null;
 		return;
 	}
 	if (channelId === channel?.id) return;
@@ -955,17 +958,14 @@ onMounted(() => {
 
 		if (props.reply) {
 			updateReply(props.reply);
-			replyId = props.reply.id;
 		}
 
 		if (props.renote) {
 			updateRenote(props.renote);
-			renoteId = props.renote.id;
 		}
 
 		if (props.channel) {
 			updateChannel(props.channel);
-			channelId = props.channel.id;
 		}
 
 		if (props.initialNote) {

From d9a69fee9dcaf2b3697a80926c2bd0d8b3e40525 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 08:16:58 +0900
Subject: [PATCH 037/147] tweak

---
 packages/client/src/components/TmsPostForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index b2691b5beb0e..954d2f2dd56e 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -76,7 +76,7 @@
 			<div v-if="renote" :class="$style.quoteNote">
 				<div :class="$style.quoteNoteInner">
 					<MkNoteSimple :note="renote"/>
-					<button v-if="!props.renote" :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
+					<button v-if="!props.renote || !!draftId?.split('/').some(x => x.startsWith('rn:'))" :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
 				</div>
 			</div>
 			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>

From 22bd6ba4b96535684736183e5e600859e64b8d9b Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 08:37:45 +0900
Subject: [PATCH 038/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 954d2f2dd56e..251f471006b2 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -586,16 +586,20 @@ const loadDraft = (): void => {
 	draftWatching = false;
 
 	draft = Draft.getDraft(draftId);
-	text = draft?.data.text ?? '';
-	useCw = draft?.data.useCw ?? false;
-	cw = draft?.data.cw ?? '';
-	visibility = draft?.data.visibility ?? Draft.getVisibility();
-	localOnly = draft?.data.localOnly ?? Draft.getLocalOnly();
-	files = draft?.data.files ?? [];
-	poll = draft?.data.poll ?? null;
-	replyId = draft?.data.replyId ?? null;
-	renoteId = draft?.data.renoteId ?? null;
-	channelId = draft?.data.channelId ?? null;
+	if (draft) {
+		text = draft.data.text;
+		useCw = draft.data.useCw;
+		cw = draft.data.cw;
+		visibility = draft.data.visibility;
+		localOnly = draft.data.localOnly;
+		files = draft.data.files;
+		poll = draft.data.poll;
+		replyId = draft.data.replyId;
+		renoteId = draft.data.renoteId;
+		channelId = draft.data.channelId;
+	} else {
+		clear();
+	}
 
 	draftWatching = true;
 };

From e9ff34f57289d94e07c20a2f75c2abc53273a29f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 08:52:47 +0900
Subject: [PATCH 039/147] fix

---
 packages/client/src/components/TmsPostForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 251f471006b2..2b4e4f14a6ea 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -492,7 +492,7 @@ watch($$(replyId), async () => {
 		.catch(updateReply);
 
 	popFetchList();
-}, { immediate: true });
+});
 
 // Renote, 引用
 let renoteId = $ref<string | null>(null);

From 185e503aa7d83a2dbcbd431f772cc66718a653b9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 09:30:48 +0900
Subject: [PATCH 040/147] tweak

---
 locales/en-US.yml                             |  2 ++
 locales/ja-CJP.yml                            |  2 ++
 locales/ja-JP.yml                             |  1 +
 locales/ja-KS.yml                             |  2 ++
 .../src/components/TmsDraftsList.draft.vue    | 25 ++++++++++++++++---
 .../client/src/components/TmsDraftsList.vue   | 19 +++++++++++---
 .../client/src/components/TmsPostForm.vue     |  2 +-
 packages/client/src/scripts/tms/drafts.ts     |  2 +-
 8 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 99c7419bf78e..d2314c92d02e 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -2212,3 +2212,5 @@ _tms:
   unreact: "Unreact"
   pakuru: "Pakuru"
   numberquote: "Numberquote"
+  drafts: "Drafts"
+  loadDraft: "Load from draft"
diff --git a/locales/ja-CJP.yml b/locales/ja-CJP.yml
index 397ee5708f8f..1a33d0b8c5c8 100644
--- a/locales/ja-CJP.yml
+++ b/locales/ja-CJP.yml
@@ -2304,3 +2304,5 @@ _tms:
   unreact: "刂マケツ゚彐ソを解除"
   pakuru: "八゜ケゑ"
   numberquote: "数字引用ずゑ"
+  drafts: "草稿"
+  loadDraft: "草稿を読み込む"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 063e602d943e..e627b5b67d89 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2305,3 +2305,4 @@ _tms:
   pakuru: "パクる"
   numberquote: "数字引用する"
   drafts: "下書き"
+  loadDraft: "下書きを読み込む"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index c7ba36495544..7594d7d3810c 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -2304,3 +2304,5 @@ _tms:
   unreact: "リアクションやめる"
   pakuru: "パクる"
   numberquote: "数字引用する"
+  drafts: "下書き"
+  loadDraft: "下書きを読み込む"
diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 1f0553fb0f01..223dd098315a 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -1,5 +1,5 @@
 <template>
-<div :class="$style.root" @click="draftMenu">
+<div :class="[$style.root, { [$style.active]: props.active }]" @click="draftMenu">
 	<div :class="[$style.text, { [$style.textEmpty]: !text }]">{{ text || 'Empty' }}</div>
 	<div v-if="files.length !== 0" :class="$style.files">
 		<ImgWithBlurhash
@@ -28,6 +28,7 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 const props = defineProps<{
 	draft: DraftWithId;
+	active?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -44,17 +45,19 @@ if (props.draft.data.renoteId) labels.push(i18n.ts.quote);
 if (props.draft.data.poll) labels.push(i18n.ts.poll);
 
 const draftMenu = (ev: MouseEvent): void => {
+	if (props.active) return;
+
 	const el = ev.currentTarget ?? ev.target;
 	if (!(el instanceof HTMLElement)) return;
 
 	const menu = [
 		{
-			text: '選択',
+			text: i18n.ts._tms.loadDraft,
 			icon: 'ti ti-check',
 			action: () => emit('chosen', props.draft.id),
 		},
 		{
-			text: '削除',
+			text: i18n.ts.delete,
 			icon: 'ti ti-trash',
 			action: () => emit('deleted', props.draft.id),
 			danger: true,
@@ -76,6 +79,22 @@ const draftMenu = (ev: MouseEvent): void => {
 	border: solid 1px var(--divider);
 	border-radius: 8px;
 	user-select: none;
+
+	&.active {
+		border-style: dashed;
+
+		> .text {
+			opacity: 0.5;
+		}
+
+		> .files {
+			display: none;
+		}
+
+		> .labels {
+			display: none;
+		}
+	}
 }
 
 .text {
diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index 22214f17ccff..ec60b995d388 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -16,7 +16,14 @@
 				<div>{{ i18n.ts.nothing }}</div>
 			</div>
 			<div v-else :class="$style.draftsList">
-				<TmsDraft v-for="draftItem in draftsList" :key="draftItem.id" :draft="draftItem" @chosen="chosen" @deleted="deleted"/>
+				<TmsDraft
+					v-for="draftItem in draftsList"
+					:key="draftItem.id"
+					:draft="draftItem"
+					:active="draftItem.id === activeDraftId"
+					@chosen="chosen"
+					@deleted="deleted"
+				/>
 			</div>
 		</div>
 	</MkSpacer>
@@ -31,9 +38,9 @@ import TmsDraft from '@/components/TmsDraftsList.draft.vue';
 import { DraftWithId, getAllDraft, deleteDraft } from '@/scripts/tms/drafts';
 
 const props = withDefaults(defineProps<{
-	ignoreDraftIds?: string[];
+	activeDraftId?: string | null;
 }>(), {
-	ignoreDraftIds: (): string[] => [],
+	activeDraftId: null,
 });
 
 const emit = defineEmits<{
@@ -43,7 +50,11 @@ const emit = defineEmits<{
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
-const draftsList = $ref<DraftWithId[]>(getAllDraft().filter(({ id }) => !props.ignoreDraftIds.includes(id)));
+const draftsList = $ref<DraftWithId[]>(
+	getAllDraft()
+		.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+		.sort(({ id }) => id === props.activeDraftId ? -1 : 1),
+);
 
 const chosen = (draftId: DraftWithId['id']): void => {
 	const draft = draftsList.find(d => d.id === draftId);
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 2b4e4f14a6ea..35bd5e8fe299 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -798,7 +798,7 @@ const cancel = (): void => {
 
 const chooseDraft = (): void => {
 	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
-		ignoreDraftIds: draftId ? [draftId] : [],
+		activeDraftId: draftId,
 	}, {
 		chosen: ({ id }: Draft.DraftWithId) => {
 			draftId = id;
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index ec94d69034c7..2f2f608d5c5d 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -137,7 +137,7 @@ export const setDraft = (draftKey: string | null, data: DraftData): void => {
 		draftData.localOnly = undefined;
 	}
 
-	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId'])) return deleteDraft(draftKey);
+	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId', 'visibility', 'localOnly'])) return deleteDraft(draftKey);
 
 	saveLsDrafts({
 		...drafts,

From 25bb46783d01deb8533b3484534430ca3757d859 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 15 Apr 2023 17:51:58 +0900
Subject: [PATCH 041/147] fix

---
 .../client/src/components/TmsPostForm.vue     | 122 ++++++++++--------
 1 file changed, 68 insertions(+), 54 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 35bd5e8fe299..63172fce15a7 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -76,7 +76,7 @@
 			<div v-if="renote" :class="$style.quoteNote">
 				<div :class="$style.quoteNoteInner">
 					<MkNoteSimple :note="renote"/>
-					<button v-if="!props.renote || !!draftId?.split('/').some(x => x.startsWith('rn:'))" :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
+					<button v-if="quoteNoteCancel" :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
 				</div>
 			</div>
 			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
@@ -517,6 +517,7 @@ watch($$(renoteId), async () => {
 
 	popFetchList();
 });
+let quoteNoteCancel = $ref(true);
 
 // チャンネル
 let channelId = $ref<string | null>(null);
@@ -605,6 +606,7 @@ const loadDraft = (): void => {
 };
 watch($$(draftId), () => {
 	loadDraft();
+	quoteNoteCancel = !draftId?.split('/').some(x => x.startsWith('rn:'));
 });
 
 // ハッシュタグ
@@ -944,77 +946,88 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 
 onMounted(() => {
 	nextTick(() => {
-		if (props.initialVisibleUsers) {
-			props.initialVisibleUsers.forEach(user => pushVisibleUser(user));
-		}
+		const _initialVisibleUsers = $ref(props.initialVisibleUsers ?? []);
+		_initialVisibleUsers.forEach(pushVisibleUser);
 
-		if (props.specified) {
+		const _specified = $ref(props.specified);
+		if (_specified) {
 			visibility = 'specified';
 			localOnly = false;
-			pushVisibleUser(props.specified);
+			pushVisibleUser(_specified);
 		}
 
-		if (props.mention) {
-			const { username, host: _host } = props.mention;
+		const _mention = $ref(props.mention);
+		if (_mention) {
+			const { username, host: _host } = _mention;
 			const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
 			text = `${mention} ${text}`;
 		}
 
-		if (props.reply) {
-			updateReply(props.reply);
+		const _reply = $ref(props.reply);
+		if (_reply) {
+			updateReply(_reply);
 		}
 
-		if (props.renote) {
-			updateRenote(props.renote);
+		const _renote = $ref(props.renote);
+		if (_renote) {
+			updateRenote(_renote);
+			quoteNoteCancel = false;
 		}
 
-		if (props.channel) {
-			updateChannel(props.channel);
+		const _channel = $ref(props.channel);
+		if (_channel) {
+			updateChannel(_channel);
 		}
 
-		if (props.initialNote) {
-			const init = props.initialNote as Misskey.entities.Note & {
+		nextTick(() => {
+			draftWatching = false;
+
+			const init = $ref(props.initialNote as Misskey.entities.Note & {
 				channel?: Misskey.entities.Channel;
-			};
-			const _draftId = `edit:${Date.now()}`;
-			Draft.setDraft(_draftId, {
-				text: init.text ?? '',
-				useCw: init.cw != null,
-				cw: init.cw ?? '',
-				visibility: init.visibility,
-				localOnly: !!init.localOnly,
-				files: init.files,
-				poll: init.poll ? {
-					choices: init.poll.choices.map(x => x.text),
-					multiple: init.poll.multiple,
-					expiresAt: init.poll.expiresAt ? new Date(init.poll.expiresAt).getTime() : null,
-					expiredAfter: null,
-				} : null,
-				replyId: init.reply?.id ?? null,
-				renoteId: init.renote?.id ?? null,
-				channelId: init.channel?.id ?? null,
 			});
-			defaultStore.set('postFormWithHashtags', false);
-			draftId = _draftId;
-		} else {
-			let _draftId = '';
-
-			if (props.channel) {
-				_draftId += `ch:${props.channel.id}/`;
-			}
-
-			if (props.renote) {
-				_draftId += `rn:${props.renote.id}`;
-			} else if (props.reply) {
-				_draftId += `re:${props.reply.id}`;
-			} else if ($i) {
-				_draftId += `new:${$i.id}`;
+			if (init) {
+				const _draftId = `edit:${Date.now()}`;
+				Draft.setDraft(_draftId, {
+					text: init.text ?? '',
+					useCw: init.cw != null,
+					cw: init.cw ?? '',
+					visibility: init.visibility,
+					localOnly: !!init.localOnly,
+					files: init.files,
+					poll: init.poll ? {
+						choices: init.poll.choices.map(x => x.text),
+						multiple: init.poll.multiple,
+						expiresAt: init.poll.expiresAt ? new Date(init.poll.expiresAt).getTime() : null,
+						expiredAfter: null,
+					} : null,
+					replyId: init.reply?.id ?? null,
+					renoteId: init.renote?.id ?? null,
+					channelId: init.channel?.id ?? null,
+				});
+				defaultStore.set('postFormWithHashtags', false);
+				draftId = _draftId;
+			} else {
+				let _draftId = '';
+
+				if (_channel) {
+					_draftId += `ch:${_channel.id}/`;
+				}
+
+				if (_renote) {
+					_draftId += `rn:${_renote.id}`;
+				} else if (_reply) {
+					_draftId += `re:${_reply.id}`;
+				} else if ($i) {
+					_draftId += `new:${$i.id}`;
+				}
+
+				if (_draftId) {
+					draftId = _draftId;
+				}
 			}
 
-			draftId = _draftId || null;
-		}
-
-		draftWatching = true;
+			draftWatching = true;
+		});
 	});
 });
 </script>
@@ -1237,7 +1250,7 @@ onMounted(() => {
 
 	> .quoteNoteInner {
 		position: relative;
-		padding: 16px;
+		padding: 16px 32px 16px 16px;
 		border: dashed 1px var(--renote);
 		border-radius: 8px;
 
@@ -1246,6 +1259,7 @@ onMounted(() => {
 			top: 0;
 			right: 0;
 			padding: 4px;
+			font-size: 16px;
 		}
 	}
 }

From a8d4102056fdb299163318eb30b154b8e1ed2727 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 09:38:31 +0900
Subject: [PATCH 042/147] test

---
 .../src/components/TmsDraftsList.draft.vue    |   13 +-
 .../client/src/components/TmsDraftsList.vue   |   18 +-
 .../src/components/TmsPostForm.core.vue       | 1293 ++++++++++++++++
 .../client/src/components/TmsPostForm.vue     | 1378 +----------------
 packages/client/src/scripts/tms/drafts.ts     |   83 +-
 packages/client/src/scripts/tms/utils.ts      |    9 +
 6 files changed, 1478 insertions(+), 1316 deletions(-)
 create mode 100644 packages/client/src/components/TmsPostForm.core.vue

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 223dd098315a..5d3de88f437d 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -22,18 +22,19 @@
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os';
-import { DraftWithId } from '@/scripts/tms/drafts';
 import { i18n } from '@/i18n';
+import { Draft } from '@/scripts/tms/drafts';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 const props = defineProps<{
-	draft: DraftWithId;
+	draft: Draft;
 	active?: boolean;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'chosen', draftId: DraftWithId['id']): void;
-	(ev: 'deleted', draftId: DraftWithId['id']): void;
+	(ev: 'chosen', draftId: Draft['id']): void;
+	(ev: 'deleted', draftId: Draft['id']): void;
 	(ev: 'closed'): void;
 }>();
 
@@ -47,8 +48,8 @@ if (props.draft.data.poll) labels.push(i18n.ts.poll);
 const draftMenu = (ev: MouseEvent): void => {
 	if (props.active) return;
 
-	const el = ev.currentTarget ?? ev.target;
-	if (!(el instanceof HTMLElement)) return;
+	const el = getHtmlElementFromEvent(ev);
+	if (!el) return;
 
 	const menu = [
 		{
diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index ec60b995d388..b8945c9a21ef 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -20,7 +20,7 @@
 					v-for="draftItem in draftsList"
 					:key="draftItem.id"
 					:draft="draftItem"
-					:active="draftItem.id === activeDraftId"
+					:active="draftItem.id === active"
 					@chosen="chosen"
 					@deleted="deleted"
 				/>
@@ -33,36 +33,36 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import { i18n } from '@/i18n';
+import { Draft, getAllDraft, deleteDraft } from '@/scripts/tms/drafts';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import TmsDraft from '@/components/TmsDraftsList.draft.vue';
-import { DraftWithId, getAllDraft, deleteDraft } from '@/scripts/tms/drafts';
 
 const props = withDefaults(defineProps<{
-	activeDraftId?: string | null;
+	active?: string | null;
 }>(), {
-	activeDraftId: null,
+	active: null,
 });
 
 const emit = defineEmits<{
-	(ev: 'chosen', draft: DraftWithId): void;
+	(ev: 'chosen', draft: Draft): void;
 	(ev: 'closed'): void;
 }>();
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
-const draftsList = $ref<DraftWithId[]>(
+const draftsList = $ref<Draft[]>(
 	getAllDraft()
 		.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
-		.sort(({ id }) => id === props.activeDraftId ? -1 : 1),
+		.sort(({ id }) => id === props.active ? -1 : 1),
 );
 
-const chosen = (draftId: DraftWithId['id']): void => {
+const chosen = (draftId: Draft['id']): void => {
 	const draft = draftsList.find(d => d.id === draftId);
 	if (draft) emit('chosen', draft);
 	dialog?.close();
 };
 
-const deleted = (draftId: DraftWithId['id']): void => {
+const deleted = (draftId: Draft['id']): void => {
 	deleteDraft(draftId);
 	const index = draftsList.findIndex(({ id }) => draftId === id);
 	if (index !== -1) draftsList.splice(index, 1);
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
new file mode 100644
index 000000000000..7143263630aa
--- /dev/null
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -0,0 +1,1293 @@
+<template>
+<div
+	ref="rootEl"
+	v-size="{ max: [310, 500] }"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
+	:style="{ '--tmsPostForm-counterWidth': `${textCountElWidth}px` }"
+	@dragover.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<header :class="$style.header">
+		<div :class="$style.headerLeft">
+			<button v-if="!fixed" :class="['_button', $style.cancel]" @click="cancel">
+				<i class="ti ti-x"></i>
+			</button>
+			<button v-tooltip="i18n.ts.switchAccount" :class="['_button', $style.account]" @click="openAccountMenu">
+				<MkAvatar :user="postAccount ?? ($i as any)" :class="$style.avatar"/>
+			</button>
+		</div>
+		<div :class="$style.headerRight">
+			<button v-tooltip="i18n.ts._tms.drafts" :class="['_button', $style.headerRightButton]" @click="chooseDraft">
+				<span><i class="ti ti-notes"></i></span>
+			</button>
+			<template v-if="!(channel && fixed)">
+				<button v-tooltip="i18n.ts._visibility.disableFederation" :class="['_button', $style.headerRightButton]" :disabled="!!channel || visibility === 'specified'" @click="toggleLocalOnly">
+					<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
+					<span v-else><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
+				</button>
+				<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightButton]" :disabled="!!channel" @click="openVisibilityPicker">
+					<template v-if="!channel">
+						<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+						<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+						<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
+						<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+						<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
+					</template>
+					<template v-else>
+						<span><i class="ti ti-device-tv"></i></span>
+						<span :class="$style.headerRightButtonText">{{ (channel as any).name }}</span>
+					</template>
+				</button>
+			</template>
+			<button v-tooltip="i18n.ts.previewNoteText" :class="['_button', $style.headerRightButton, { [$style.headerRightButtonActive]: showPreview }]" @click="togglePreview">
+				<span><i class="ti ti-eye"></i></span>
+			</button>
+			<button :class="['_button', $style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+				<div :class="$style.submitInner">
+					<template v-if="posted"></template>
+					<template v-else-if="posting"><MkEllipsis/></template>
+					<template v-else>{{ renote ? i18n.ts.quote : reply ? i18n.ts.reply : i18n.ts.note }}</template>
+					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : reply ? 'ti-arrow-back-up' : renote ? 'ti-quote' : 'ti-send'"></i>
+				</div>
+			</button>
+		</div>
+	</header>
+	<MkNoteSimple v-if="reply" :class="$style.replyNote" :note="reply"/>
+	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
+		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+		<div :class="$style.visibleUsers">
+			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
+				<MkAcct :user="u"/>
+				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+			</span>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+		</div>
+	</div>
+	<div :class="$style.infoList">
+		<MkInfo v-if="hasNotSpecifiedMentions" warn>{{ i18n.ts.notSpecifiedMentionWarning }}<span style="margin: 0 4px; user-select: none;">-</span><button class="_textButton" @click="addMissingMention">{{ i18n.ts.add }}</button></MkInfo>
+		<MkInfo v-if="hasAnnoyingText" warn>{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
+	</div>
+	<div :class="$style.forms">
+		<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="[$style.input, $style.cw]" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+		<div :class="$style.textOuter">
+			<textarea ref="textareaEl" v-model="text" :class="[$style.input, $style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
+			<div v-if="renote || quote" :class="$style.quote">
+				<div :class="[$style.quoteInner, { [$style.hasQuoteCancel]: quote }]">
+					<MkNoteSimple v-if="renote" :note="renote"/>
+					<MkNoteSimple v-if="quote" :note="quote"/>
+					<button v-if="quote" :class="['_button', $style.quoteCancel]" @click="quote = null"><i class="ti ti-x"></i></button>
+				</div>
+			</div>
+			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+		</div>
+		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
+	</div>
+	<MkPostFormAttaches :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+	<footer :class="$style.footer">
+		<button v-tooltip="i18n.ts.attachFile" :class="['_button', $style.footerButton]" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+		<button v-tooltip="i18n.ts.poll" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+		<button v-tooltip="i18n.ts.useCw" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="toggleUseCw"><i class="ti ti-eye-off"></i></button>
+		<button v-tooltip="i18n.ts.mention" :class="['_button', $style.footerButton]" @click="insertMention"><i class="ti ti-at"></i></button>
+		<button v-tooltip="i18n.ts.hashtags" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="toggleWithHashtags"><i class="ti ti-hash"></i></button>
+		<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" :class="['_button', $style.footerButton]" @click="showActions"><i class="ti ti-plug"></i></button>
+		<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+	</footer>
+	<datalist id="hashtags">
+		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
+	</datalist>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, inject, watch, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as Acct from 'misskey-js/built/acct';
+import * as mfm from 'mfm-js';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { length } from 'stringz';
+import { toASCII } from 'punycode/';
+import { throttle } from 'throttle-debounce';
+import { v4 as uuid } from 'uuid';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { stream } from '@/stream';
+import { host as Host, url } from '@/config';
+import { instance } from '@/instance';
+import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
+import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
+import { extractMentions } from '@/scripts/extract-mentions';
+import { Autocomplete } from '@/scripts/autocomplete';
+import { selectFiles } from '@/scripts/select-file';
+import { uploadFile } from '@/scripts/upload';
+import { erase, unique } from '@/scripts/array';
+import { deepClone } from '@/scripts/clone';
+import { parseObject, parseArray } from '@/scripts/tms/parse';
+import * as Draft from '@/scripts/tms/drafts';
+import { imanonashi } from '@/scripts/tms/imanonashi';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
+import MkInfo from '@/components/MkInfo.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkNotePreview from '@/components/MkNotePreview.vue';
+import MkPostFormAttaches from '@/components/MkPostFormAttaches.vue';
+import MkPollEditor, { EditedPoll } from '@/components/MkPollEditor.vue';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+
+//#region define
+const props = withDefaults(defineProps<{
+	draft: Draft.Draft | null;
+	reply: Misskey.entities.Note | null;
+	renote: Misskey.entities.Note | null;
+	channel: Misskey.entities.Channel | null;
+	mention: Misskey.entities.User | null;
+	specified: Misskey.entities.User | null;
+	initialText: string | null;
+	initialVisibility: Misskey.entities.Note['visibility'] | null;
+	initialFiles: Misskey.entities.DriveFile[] | null;
+	initialLocalOnly: boolean | null;
+	initialVisibleUsers: Misskey.entities.User[] | null;
+	instant: boolean | null;
+	fixed: boolean | null;
+	autofocus: boolean | null;
+	freezeAfterPosted: boolean | null;
+}>(), {
+	draft: null,
+	reply: null,
+	renote: null,
+	channel: null,
+	mention: null,
+	specified: null,
+	initialText: null,
+	initialVisibility: null,
+	initialFiles: null,
+	initialLocalOnly: null,
+	initialVisibleUsers: null,
+	instant: null,
+	fixed: null,
+	autofocus: true,
+	freezeAfterPosted: null,
+});
+
+const emit = defineEmits<{
+	(ev: 'posted'): void;
+	(ev: 'cancel'): void;
+	(ev: 'esc'): void;
+	(ev: 'reopen', draft?: Draft.Draft | null): void;
+}>();
+
+const modal = inject<boolean>('modal', false);
+
+let fetchingList = $ref<string[]>([]);
+const fetchingWrapper = <T>(prom: Promise<T>): Promise<T> => {
+	const id = uuid();
+	fetchingList.push(id);
+
+	prom.finally(() => {
+		fetchingList = fetchingList.filter(fid => fid !== id);
+	});
+
+	return prom;
+};
+const fetching = $computed<boolean>(() => fetchingList.length !== 0);
+//#endregion
+
+//#region params, flags
+let text = $ref<string>(props.initialText ?? '');
+let useCw = $ref<boolean>(false);
+let cw = $ref<string>('');
+let visibility = $ref<Misskey.entities.Note['visibility']>(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility));
+let localOnly = $ref<boolean>(props.initialLocalOnly ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly));
+let files = $ref<Misskey.entities.DriveFile[]>(props.initialFiles ?? []);
+let poll = $ref<EditedPoll | null>(null);
+
+let visibleUsers = $ref<Misskey.entities.User[]>([]);
+const reply = $ref<Misskey.entities.Note | null>(props.reply);
+const renote = $ref<Misskey.entities.Note | null>(props.renote);
+const channel = $ref<Misskey.entities.Channel | null>(props.channel);
+
+let quote = $ref<Misskey.entities.Note | null>(null);
+const setQuote = (quoteId?: string | null): void => {
+	if (!quoteId || renote) {
+		quote = null;
+		return;
+	}
+
+	fetchingWrapper(
+		os.apiWithDialog('notes/show', { noteId: quoteId }, token)
+			.then(_quote => quote = _quote)
+			.catch(() => quote = null),
+	);
+};
+
+let withHashtags = $ref<boolean>(defaultStore.state.postFormWithHashtags);
+const hashtags = $computed<string>(defaultStore.makeGetterSetter('postFormHashtags'));
+const recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
+
+let imeText = $ref('');
+
+let showPreview = $ref(false);
+
+let posting = $ref(false);
+let posted = $ref(false);
+
+const clear = (): void => {
+	text = '';
+	files = [];
+	poll = null;
+	quote = null;
+};
+
+const placeholder = $computed((): string => {
+	if (renote) return i18n.ts._postForm.quotePlaceholder;
+	if (reply) return i18n.ts._postForm.replyPlaceholder;
+	if (channel) return i18n.ts._postForm.channelPlaceholder;
+	const xs = [
+		i18n.ts._postForm._placeholders.a,
+		i18n.ts._postForm._placeholders.b,
+		i18n.ts._postForm._placeholders.c,
+		i18n.ts._postForm._placeholders.d,
+		i18n.ts._postForm._placeholders.e,
+		i18n.ts._postForm._placeholders.f,
+	];
+	return xs[Math.floor(Math.random() * xs.length)];
+});
+
+const textLength = $computed((): number => {
+	return length((text + imeText).trim());
+});
+
+const maxTextLength = $computed((): number => {
+	const instanceTyped = instance as {
+		maxNoteTextLength?: number;
+	} | null | undefined;
+	return instanceTyped?.maxNoteTextLength ?? 1000;
+});
+
+const canPost = $computed((): boolean => {
+	return !fetching && !posting && !posted &&
+		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
+		(textLength <= maxTextLength) &&
+		(!poll || poll.choices.length >= 2);
+});
+
+// 宛先
+let hasNotSpecifiedMentions = $ref(false);
+
+const checkMissingMention = (): void => {
+	if (visibility === 'specified') {
+		const ast = mfm.parse(text);
+
+		for (const x of extractMentions(ast)) {
+			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+				hasNotSpecifiedMentions = true;
+				return;
+			}
+		}
+		hasNotSpecifiedMentions = false;
+	}
+};
+
+const addMissingMention = (): void => {
+	const ast = mfm.parse(text);
+
+	for (const x of extractMentions(ast)) {
+		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+			fetchingWrapper(
+				os.api('users/show', { username: x.username, host: x.host ?? undefined }, token).then(user => {
+					visibleUsers.push(user);
+				}),
+			);
+		}
+	}
+};
+
+watch($$(text), checkMissingMention, { immediate: true });
+watch($$(visibility), checkMissingMention);
+watch($$(visibleUsers), checkMissingMention, { deep: true });
+
+// MFM
+let hasAnnoyingText = $ref(false);
+
+const checkAnnoyingText = (): void => {
+	if (!useCw && visibility === 'public') {
+		hasAnnoyingText = (
+			text.includes('$[x2') ||
+			text.includes('$[x3') ||
+			text.includes('$[x4') ||
+			text.includes('$[scale') ||
+			text.includes('$[position')
+		);
+	} else {
+		hasAnnoyingText = false;
+	}
+};
+
+watch($$(text), checkAnnoyingText, { immediate: true });
+watch($$(useCw), checkAnnoyingText);
+watch($$(visibility), checkAnnoyingText);
+//#endregion
+
+//#region draft
+const draft = $ref<Draft.Draft | null>(props.draft);
+const draftKey = $computed<string | null>(() => {
+	if (draft) return draft.id;
+	return Draft.genDraftId({
+		user: $i,
+		reply,
+		renote,
+		channel,
+	});
+});
+
+const saveDraft = (): void => {
+	Draft.setDraft(draftKey, {
+		text,
+		useCw,
+		cw,
+		visibility,
+		localOnly,
+		files,
+		poll,
+		replyId: reply?.id ?? null,
+		renoteId: renote?.id ?? quote?.id ?? null,
+		channelId: channel?.id ?? null,
+	});
+};
+
+const deleteDraft = (): void => {
+	Draft.deleteDraft(draftKey);
+};
+
+watch([
+	$$(text),
+	$$(useCw),
+	$$(cw),
+	$$(visibility),
+	$$(localOnly),
+	$$(files),
+	$$(poll),
+	$$(quote),
+], saveDraft, { deep: true });
+//#endregion
+
+//#region credential
+let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
+let token = $ref<string | null>(null);
+const updatePostAccount = async (newPostAccount: Misskey.entities.UserDetailed | null): Promise<void> => {
+	if (!newPostAccount || $i?.id === newPostAccount.id) {
+		postAccount = null;
+		token = null;
+		return;
+	}
+	if (postAccount && (postAccount.id === newPostAccount.id)) return;
+
+	type StoredAccount = {
+		id: string;
+		token: string;
+	};
+
+	const storedAccounts = (await getAccounts()) as StoredAccount[];
+	const newToken = storedAccounts.find(x => x.id === newPostAccount.id)?.token ?? null;
+
+	if (!newToken) {
+		postAccount = null;
+		token = null;
+		return;
+	}
+
+	postAccount = newPostAccount;
+	token = newToken;
+};
+//#endregion
+
+//#region elements
+const rootEl = $shallowRef<HTMLElement | null>(null);
+const visibilityButton = $shallowRef<HTMLElement | null>(null);
+const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
+const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
+const textCountEl = $shallowRef<HTMLElement | null>(null);
+const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
+
+let cwInputElAutocomplete: Autocomplete | null = null;
+let textareaElAutocomplete: Autocomplete | null = null;
+let hashtagsInputElAutocomplete: Autocomplete | null = null;
+
+let textCountElResizeObserver: ResizeObserver | null = null;
+let textCountElWidth = $ref(0);
+
+const focus = (): void => {
+	if (textareaEl) {
+		textareaEl.focus();
+		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
+	}
+};
+
+onMounted(() => {
+	if (cwInputEl) {
+		cwInputElAutocomplete = new Autocomplete(cwInputEl, $$(cw));
+	}
+	if (textareaEl) {
+		textareaElAutocomplete = new Autocomplete(textareaEl, $$(text));
+	}
+	if (hashtagsInputEl) {
+		hashtagsInputElAutocomplete = new Autocomplete(hashtagsInputEl, $$(hashtags));
+	}
+	if (textCountEl) {
+		textCountElResizeObserver = new ResizeObserver(entries => {
+			entries.forEach(({ borderBoxSize }) => {
+				borderBoxSize.forEach(({ inlineSize }) => {
+					const width = Math.ceil(inlineSize);
+					textCountElWidth = width + (width % 2);
+				});
+			});
+		});
+		textCountElResizeObserver.observe(textCountEl);
+	}
+	if (props.autofocus) {
+		focus();
+		nextTick(focus);
+	}
+
+	if (!props.instant && !props.mention && !props.specified) {
+		if (draft) {
+			text = draft.data.text;
+			useCw = draft.data.useCw;
+			cw = draft.data.cw;
+			visibility = draft.data.visibility;
+			localOnly = draft.data.localOnly;
+			files = draft.data.files;
+			poll = draft.data.poll;
+			setQuote(draft.data.renoteId);
+		}
+	}
+});
+
+onUnmounted(() => {
+	if (cwInputElAutocomplete) {
+		cwInputElAutocomplete.detach();
+		cwInputElAutocomplete = null;
+	}
+	if (textareaElAutocomplete) {
+		textareaElAutocomplete.detach();
+		textareaElAutocomplete = null;
+	}
+	if (hashtagsInputElAutocomplete) {
+		hashtagsInputElAutocomplete.detach();
+		hashtagsInputElAutocomplete = null;
+	}
+	if (textCountElResizeObserver) {
+		textCountElResizeObserver.disconnect();
+		textCountElResizeObserver = null;
+	}
+});
+//#endregion
+
+//#region visibleUser
+const pushVisibleUser = (user: Misskey.entities.User): void => {
+	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+		visibleUsers.push(user);
+	}
+};
+
+const addVisibleUser = (): void => {
+	os.selectUser().then(user => {
+		pushVisibleUser(user);
+
+		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
+			text = `@${Acct.toString(user)} ${text}`;
+		}
+	});
+};
+
+const removeVisibleUser = (user: Misskey.entities.User): void => {
+	visibleUsers = erase(user, visibleUsers);
+};
+//#endregion
+
+//#region files
+// const upload = async (file: File): Promise<void> => {
+// 	const fileIndex = files.length;
+// 	return await fetchingWrapper(
+// 		uploadFile(file, defaultStore.state.uploadFolder)
+// 			.then(driveFile => {
+// 				files.splice(fileIndex, 0, driveFile);
+// 			}),
+// 	);
+// };
+
+const uploads = async (fileList: File[]): Promise<void> => {
+	const fileIndex = files.length;
+	return await fetchingWrapper(
+		Promise.all(fileList.map(file => uploadFile(file, defaultStore.state.uploadFolder)))
+			.then(driveFiles => {
+				files.splice(fileIndex, 0, ...driveFiles);
+			}),
+	);
+};
+
+const detachFile = (id: string): void => {
+	files = files.filter(x => x.id !== id);
+};
+
+const updateFiles = (_files: Misskey.entities.DriveFile[]): void => {
+	files = _files;
+};
+
+const updateFileSensitive = (file: Misskey.entities.DriveFile, sensitive: boolean): void => {
+	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+};
+
+const updateFileName = (file: Misskey.entities.DriveFile, name: string): void => {
+	files[files.findIndex(x => x.id === file.id)].name = name;
+};
+//#endregion
+
+//#region init
+// メンションの引き継ぎ
+const parseMention = ({ username, host }: {
+	username: string;
+	host?: string | null;
+}): string => {
+	if (host == null || host === Host) {
+		return `@${username}`;
+	}
+	return `@${username}@${toASCII(host)}`;
+};
+
+if (text === '') {
+	if (props.mention) {
+		const mention = parseMention({
+			username: props.mention.username,
+			host: props.mention.host,
+		});
+		text += `${mention} `;
+	}
+
+	if (reply) {
+		const mention = parseMention({
+			username: reply.user.username,
+			host: reply.user.host,
+		});
+		text += `${mention} `;
+	}
+
+	if (reply && reply.text) {
+		const ast = mfm.parse(reply.text);
+
+		for (const x of extractMentions(ast)) {
+			const mention = parseMention({
+				username: x.username,
+				host: x.host,
+			});
+
+			// 自分は除外
+			if ($i?.username === x.username && (x.host == null || x.host === Host)) continue;
+
+			// 重複は除外
+			if (text.includes(`${mention} `)) continue;
+
+			text += `${mention} `;
+		}
+	}
+}
+
+// 公開範囲の引き継ぎ
+if (reply) {
+	if (reply.visibility !== 'specified') {
+		visibleUsers = [];
+
+		if (visibility === 'public' && reply.visibility === 'home') {
+			visibility = 'home';
+		}
+		if (visibility === 'home' && reply.visibility === 'followers') {
+			visibility = 'followers';
+		}
+	} else {
+		visibility = 'specified';
+		localOnly = false;
+
+		const visibleUserIds = reply.visibleUserIds?.filter(uid => uid !== $i?.id && uid !== reply?.userId) ?? [];
+		if (visibleUserIds.length === 0) {
+			visibleUsers = [];
+		} else {
+			fetchingWrapper(
+				os.api('users/show', { userIds: visibleUserIds }, token)
+					.then(users => {
+						users.forEach(pushVisibleUser);
+					}),
+			);
+		}
+	}
+}
+
+if (props.specified) {
+	visibility = 'specified';
+	pushVisibleUser(props.specified);
+}
+
+if (channel) {
+	visibility = 'public';
+	localOnly = true;
+}
+
+if (defaultStore.state.keepCw && reply && reply.cw) {
+	useCw = true;
+	cw = reply.cw;
+}
+//#endregion
+
+//#region handler (drag, drop)
+// let draghover = $ref(false);
+
+const onDragover = (ev: DragEvent): void => {
+	if (!ev.dataTransfer?.items[0]) return;
+
+	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+
+	if (isFile || isDriveFile) {
+		ev.preventDefault();
+
+		// draghover = true;
+
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy':
+			case 'copyLink':
+			case 'copyMove':
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	}
+};
+
+const onDragenter = (_ev: DragEvent): void => {
+	// draghover = true;
+};
+
+const onDragleave = (_ev: DragEvent): void => {
+	// draghover = false;
+};
+
+const onDrop = (ev: DragEvent): void => {
+	if (!ev.dataTransfer) return;
+
+	// draghover = false;
+
+	// File
+	if (ev.dataTransfer.files.length > 0) {
+		ev.preventDefault();
+		uploads(Array.from(ev.dataTransfer.files));
+		return;
+	}
+
+	// DriveFile
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile) {
+		const file = parseObject<Misskey.entities.DriveFile>(driveFile);
+		files.push(file);
+		ev.preventDefault();
+	}
+};
+//#endregion
+
+//#region handler (keydown, ime, paste)
+const typing = throttle(3000, () => {
+	if (channel) {
+		stream.send('typingOnChannel', { channel: channel.id });
+	}
+});
+
+const onKeydown = (ev: KeyboardEvent): void => {
+	typing();
+	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
+	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
+	if (ev.key === 'Escape' || ev.key === 'Esc') emit('esc');
+};
+
+const onCompositionUpdate = (ev: CompositionEvent): void => {
+	typing();
+	imeText = ev.data;
+};
+
+const onCompositionEnd = (_ev: CompositionEvent): void => {
+	imeText = '';
+};
+
+const onPaste = async (ev: ClipboardEvent): Promise<void> => {
+	if (!ev.clipboardData) return;
+
+	uploads(
+		Array.from(ev.clipboardData.items).flatMap(item => {
+			if (item.kind !== 'file') return [];
+			const file = item.getAsFile();
+			if (!file) return [];
+			return [file];
+		}),
+	);
+
+	const paste = ev.clipboardData.getData('text');
+	const path = `${url}/notes/`;
+
+	if (!renote && !quote && paste.startsWith(path)) {
+		ev.preventDefault();
+
+		os.confirm({
+			type: 'info',
+			text: i18n.ts.quoteQuestion,
+		}).then(({ canceled }) => {
+			if (canceled) {
+				insertTextAtCursor(textareaEl, paste);
+				return;
+			}
+
+			const quoteId = paste.slice(path.length).split(/[\/\?#]/, 1)[0] || null;
+			setQuote(quoteId);
+		});
+	}
+};
+//#endregion
+
+//#region header buttons
+const cancel = (): void => {
+	emit('cancel');
+};
+
+const openAccountMenu = (ev: MouseEvent): void => {
+	openAccountMenu_({
+		withExtraOperation: false,
+		includeCurrentAccount: true,
+		active: postAccount?.id ?? $i?.id,
+		onChoose: (account) => {
+			updatePostAccount(account);
+		},
+	}, ev);
+};
+
+const chooseDraft = (): void => {
+	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
+		active: draft?.id,
+	}, {
+		chosen: (draft_: Draft.Draft) => {
+			emit('reopen', draft_);
+		},
+	}, 'closed');
+};
+
+const toggleLocalOnly = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	localOnly = !localOnly;
+};
+
+const openVisibilityPicker = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+		currentVisibility: visibility,
+		currentLocalOnly: localOnly,
+		src: visibilityButton,
+	}, {
+		changeVisibility: (v: typeof visibility) => {
+			visibility = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('visibility', visibility);
+			}
+		},
+		changeLocalOnly: (v: typeof localOnly) => {
+			localOnly = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('localOnly', localOnly);
+			}
+		},
+	}, 'closed');
+};
+
+const togglePreview = (): void => {
+	showPreview = !showPreview;
+};
+
+const post = async (ev?: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev);
+	if (el) {
+		const rect = el.getBoundingClientRect();
+		const x = rect.left + (el.offsetWidth / 2);
+		const y = rect.top + (el.offsetHeight / 2);
+		os.popup(MkRippleEffect, { x, y }, {}, 'end');
+	}
+
+	let postData = {
+		text: text || undefined,
+		fileIds: files.length !== 0 ? files.map(({ id }) => id) : undefined,
+		replyId: reply?.id || undefined,
+		renoteId: renote?.id || quote?.id || undefined,
+		channelId: channel?.id || undefined,
+		poll: poll,
+		cw: useCw ? cw : undefined,
+		localOnly: localOnly,
+		visibility: visibility,
+		visibleUserIds: visibility === 'specified' ? visibleUsers.map(({ id }) => id) : undefined,
+	};
+
+	if (withHashtags) {
+		const hashtags_ = hashtags.split(/[\s#]/).flatMap(x => x ? [`#${x}`] : []).join(' ');
+		postData.text = `${postData.text} ${hashtags_}`.trim();
+	}
+
+	if (notePostInterruptors.length !== 0) {
+		for (const interruptor of notePostInterruptors) {
+			postData = (await interruptor.handler(deepClone(postData))) as typeof postData;
+		}
+	}
+
+	posting = true;
+	os.api('notes/create', postData, token).then(({ createdNote }) => {
+		if (props.freezeAfterPosted) {
+			posted = true;
+		} else {
+			clear();
+		}
+
+		nextTick(() => {
+			deleteDraft();
+
+			emit('posted');
+
+			if (postData.text && postData.text !== '') {
+				const hashtags_ = mfm.parse(postData.text).flatMap((x) => x.type === 'hashtag' ? [x.props.hashtag] : []);
+				const history = parseArray<string[]>(localStorage.getItem('hashtags'));
+				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
+			}
+
+			posting = false;
+			updatePostAccount(null);
+
+			imanonashi(createdNote);
+		});
+	}).catch((err: unknown) => {
+		const { id, message } = err as {
+			id: string;
+			message: string;
+		};
+
+		posting = false;
+
+		os.alert({
+			type: 'error',
+			text: `${message}\n${id}`,
+		});
+	});
+};
+//#endregion
+
+//#region footer buttons
+const chooseFileFrom = (ev: MouseEvent): void => {
+	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(_files => {
+		for (const file of _files) {
+			files.push(file);
+		}
+	});
+};
+
+const togglePoll = (): void => {
+	if (poll) {
+		poll = null;
+	} else {
+		poll = {
+			choices: ['', ''],
+			multiple: false,
+			expiresAt: null,
+			expiredAfter: null,
+		};
+	}
+};
+
+const toggleUseCw = (): void => {
+	useCw = !useCw;
+};
+
+const insertMention = (): void => {
+	os.selectUser().then(user => {
+		insertTextAtCursor(textareaEl, `@${Acct.toString(user)} `);
+	});
+};
+
+const toggleWithHashtags = (): void => {
+	withHashtags = !withHashtags;
+	defaultStore.set('postFormWithHashtags', withHashtags);
+};
+
+const showActions = (ev: MouseEvent): void => {
+	const el = getHtmlElementFromEvent(ev);
+	if (!el) return;
+
+	os.popupMenu(postFormActions.map(action => {
+		return {
+			text: action.title,
+			action: (): void => {
+				action.handler({ text }, (key, value) => {
+					if (key === 'text') text = value;
+				});
+			},
+		};
+	}), el);
+};
+
+const insertEmoji = async (ev: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev);
+	if (!el) return;
+
+	os.openEmojiPicker(el, {}, textareaEl);
+};
+//#endregion
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
+}
+
+.header {
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: 1fr;
+	gap: 4px;
+	min-height: 50px;
+}
+
+.headerLeft {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(36px, 50px);
+	grid-auto-rows: minmax(40px, 100%);
+}
+
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	height: 100%;
+}
+
+.account {
+	height: 100%;
+	vertical-align: bottom;
+
+	> .avatar {
+		width: 28px;
+		height: 28px;
+		margin: auto 0;
+	}
+}
+
+.headerRight {
+	justify-self: end;
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	align-items: center;
+	gap: 4px;
+	font-size: 0.9em;
+}
+
+.headerRightItem {
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+
+	&:disabled {
+		background: none;
+	}
+}
+
+.headerRightButton {
+	display: flex;
+	gap: 6px;
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+	overflow: hidden;
+	white-space: nowrap;
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		background: var(--X5);
+	}
+
+	&.headerRightButtonActive {
+		color: var(--accent);
+	}
+
+	> .headerRightButtonText {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:enabled > .headerRightButtonText {
+		opacity: 0.8;
+	}
+}
+
+.submit {
+	margin: 12px 12px 12px 6px;
+	vertical-align: bottom;
+
+	&:disabled {
+		opacity: 0.7;
+	}
+
+	&.submitPosting {
+		cursor: wait;
+	}
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		> .submitInner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+	}
+
+	> .submitInner {
+		padding: 0 12px;
+		line-height: 34px;
+		font-weight: bold;
+		border-radius: 6px;
+		min-width: 90px;
+		box-sizing: border-box;
+		color: var(--fgOnAccent);
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+}
+
+.replyNote {
+	padding: 0 20px 16px 20px;
+}
+
+.toSpecified {
+	padding: 6px 24px;
+	margin-bottom: 8px;
+	overflow: auto;
+	white-space: nowrap;
+}
+
+.visibleUsers {
+	display: inline;
+	top: -1px;
+	font-size: 14px;
+}
+
+.visibleUser {
+	margin-right: 14px;
+	padding: 8px 0 8px 8px;
+	border-radius: 8px;
+	background: var(--X4);
+}
+
+.infoList {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 0 20px 16px 20px;
+
+	&:empty {
+		display: none;
+	}
+}
+
+.forms {
+	--tmsPostForm-inputPadding: 24px;
+}
+
+.input {
+	display: block;
+	box-sizing: border-box;
+	padding: 0 var(--tmsPostForm-inputPadding);
+	margin: 0;
+	width: 100%;
+	font-size: 16px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	color: var(--fg);
+	font-family: inherit;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
+}
+
+.cw {
+	padding-bottom: 8px;
+	border-bottom: solid 0.5px var(--divider);
+}
+
+.hashtags {
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-top: solid 0.5px var(--divider);
+}
+
+.textOuter {
+	width: 100%;
+	position: relative;
+}
+
+.text {
+	max-width: 100%;
+	min-width: 100%;
+	width: 100%;
+	min-height: 90px;
+	height: 100%;
+	padding-right: max(var(--tmsPostForm-inputPadding), var(--tmsPostForm-counterWidth, 0px));
+
+	&.withCw {
+		padding-top: 8px;
+	}
+}
+
+.quote {
+	padding: 8px var(--tmsPostForm-inputPadding);
+
+	> .quoteInner {
+		position: relative;
+		padding: 16px;
+		border: dashed 1px var(--renote);
+		border-radius: 8px;
+
+		&.hasQuoteCancel {
+			padding-right: 32px;
+		}
+
+		> .quoteCancel {
+			position: absolute;
+			top: 0;
+			right: 0;
+			padding: 4px;
+			font-size: 16px;
+		}
+	}
+}
+
+.textCount {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 8px;
+	font-size: 0.9em;
+	color: var(--fg);
+	min-width: 1.6em;
+	pointer-events: none;
+	opacity: 0.8;
+
+	&.textOver {
+		color: var(--error);
+	}
+}
+
+.preview {
+	padding: 16px 20px 0 20px;
+}
+
+.footer {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	padding: 0 16px 16px 16px;
+	font-size: 1em;
+}
+
+.footerButton {
+	aspect-ratio: 1 / 1;
+	border-radius: 6px;
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		background: var(--X5);
+	}
+
+	&.footerButtonActive {
+		color: var(--accent);
+	}
+}
+
+:global(.max-width_500px) {
+	.headerRightButtonText {
+		display: none;
+	}
+
+	.submit {
+		margin: 8px 8px 8px 4px;
+	}
+
+	.replyNote {
+		padding: 0 14px 16px 14px;
+	}
+
+	.toSpecified {
+		padding: 6px 16px;
+	}
+
+	.infoList {
+		padding: 0 14px 16px 14px;
+	}
+
+	.forms {
+		--tmsPostForm-inputPadding: 16px;
+	}
+
+	.text {
+		min-height: 80px;
+	}
+
+	.preview {
+		padding: 16px 14px 0 14px;
+	}
+
+	.footer {
+		padding: 0 8px 8px 8px;
+	}
+}
+
+:global(.max-width_310px) {
+	.header {
+		gap: 0;
+	}
+
+	.headerRight {
+		gap: 0;
+	}
+
+	.footer {
+		font-size: 14px;
+	}
+}
+</style>
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 63172fce15a7..09acd9b30f82 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -1,139 +1,28 @@
 <template>
-<div
-	ref="rootEl"
-	v-size="{ max: [310, 500] }"
-	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
-	:style="{ '--tmsPostForm-counterWidth': `${textCountElWidth}px` }"
-	@dragover.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<header :class="$style.header">
-		<div :class="$style.headerLeft">
-			<button v-if="!fixed" :class="['_button', $style.cancel]" @click="cancel">
-				<i class="ti ti-x"></i>
-			</button>
-			<button v-tooltip="i18n.ts.switchAccount" :class="['_button', $style.account]" @click="openAccountMenu">
-				<MkAvatar :user="postAccount ?? ($i as any)" :class="$style.avatar"/>
-			</button>
-		</div>
-		<div :class="$style.headerRight">
-			<button v-tooltip="i18n.ts._tms.drafts" :class="['_button', $style.headerRightButton]" @click="chooseDraft">
-				<span><i class="ti ti-notes"></i></span>
-			</button>
-			<template v-if="!(channel && fixed)">
-				<button v-tooltip="i18n.ts._visibility.disableFederation" :class="['_button', $style.headerRightButton]" :disabled="!!channel || visibility === 'specified'" @click="localOnly = !localOnly">
-					<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
-					<span v-else><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
-				</button>
-				<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightButton]" :disabled="!!channel" @click="openVisibilityPicker">
-					<template v-if="!channel">
-						<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-						<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
-						<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
-						<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
-						<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
-					</template>
-					<template v-else>
-						<span><i class="ti ti-device-tv"></i></span>
-						<span :class="$style.headerRightButtonText">{{ (channel as any).name }}</span>
-					</template>
-				</button>
-			</template>
-			<button v-tooltip="i18n.ts.previewNoteText" :class="['_button', $style.headerRightButton, { [$style.headerRightButtonActive]: showPreview }]" @click="showPreview = !showPreview">
-				<span><i class="ti ti-eye"></i></span>
-			</button>
-			<button :class="['_button', $style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div :class="$style.submitInner">
-					<template v-if="posted"></template>
-					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ renote ? i18n.ts.quote : reply ? i18n.ts.reply : i18n.ts.note }}</template>
-					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : reply ? 'ti-arrow-back-up' : renote ? 'ti-quote' : 'ti-send'"></i>
-				</div>
-			</button>
-		</div>
-	</header>
-	<MkNoteSimple v-if="reply" :class="$style.replyNote" :note="reply"/>
-	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
-		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-		<div :class="$style.visibleUsers">
-			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
-				<MkAcct :user="u"/>
-				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
-			</span>
-			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-		</div>
-	</div>
-	<div :class="$style.infoList">
-		<MkInfo v-if="hasNotSpecifiedMentions" warn>{{ i18n.ts.notSpecifiedMentionWarning }}<span style="margin: 0 4px; user-select: none;">-</span><button class="_textButton" @click="addMissingMention">{{ i18n.ts.add }}</button></MkInfo>
-		<MkInfo v-if="hasAnnoyingText" warn>{{ i18n.ts.thisPostMayBeAnnoying }}</MkInfo>
-	</div>
-	<div :class="$style.forms">
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="[$style.input, $style.cw]" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<div :class="$style.textOuter">
-			<textarea ref="textareaEl" v-model="text" :class="[$style.input, $style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
-			<div v-if="renote" :class="$style.quoteNote">
-				<div :class="$style.quoteNoteInner">
-					<MkNoteSimple :note="renote"/>
-					<button v-if="quoteNoteCancel" :class="['_button', $style.quoteNoteCancel]" @click="renoteId = null"><i class="ti ti-x"></i></button>
-				</div>
-			</div>
-			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
-		</div>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
-	</div>
-	<MkPostFormAttaches :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
-	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
-	<footer :class="$style.footer">
-		<button v-tooltip="i18n.ts.attachFile" :class="['_button', $style.footerButton]" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-		<button v-tooltip="i18n.ts.poll" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-		<button v-tooltip="i18n.ts.useCw" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-		<button v-tooltip="i18n.ts.mention" :class="['_button', $style.footerButton]" @click="insertMention"><i class="ti ti-at"></i></button>
-		<button v-tooltip="i18n.ts.hashtags" :class="['_button', $style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-		<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" :class="['_button', $style.footerButton]" @click="showActions"><i class="ti ti-plug"></i></button>
-		<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-	</footer>
-	<datalist id="hashtags">
-		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-	</datalist>
-</div>
+<TmsPostFormCore
+	v-if="showPostForm"
+	v-bind="bindProps"
+	:instant="props.instant"
+	:fixed="props.fixed"
+	:autofocus="props.autofocus"
+	:freeze-after-posted="props.freezeAfterPosted"
+	@posted="emit('posted')"
+	@cancel="emit('cancel')"
+	@esc="emit('esc')"
+	@reopen="reopen"
+/>
+<div v-else style="display: grid; place-items: center;"><MkEllipsis/></div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, inject, watch, defineAsyncComponent } from 'vue';
+import { nextTick, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as Acct from 'misskey-js/built/acct';
-import * as mfm from 'mfm-js';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import { toASCII } from 'punycode/';
-import { throttle } from 'throttle-debounce';
-import { v4 as uuid } from 'uuid';
+import { $i } from '@/account';
 import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { stream } from '@/stream';
-import { host, url } from '@/config';
-import { instance } from '@/instance';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { extractMentions } from '@/scripts/extract-mentions';
-import { Autocomplete } from '@/scripts/autocomplete';
-import { selectFiles } from '@/scripts/select-file';
-import { uploadFile } from '@/scripts/upload';
-import { erase, unique } from '@/scripts/array';
-import { deepClone } from '@/scripts/clone';
-import { parseObject, parseArray } from '@/scripts/tms/parse';
 import * as Draft from '@/scripts/tms/drafts';
-import { imanonashi } from '@/scripts/tms/imanonashi';
-import MkInfo from '@/components/MkInfo.vue';
-import MkNoteSimple from '@/components/MkNoteSimple.vue';
-import MkNotePreview from '@/components/MkNotePreview.vue';
-import MkPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import MkPollEditor, { EditedPoll } from '@/components/MkPollEditor.vue';
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import TmsPostFormCore from '@/components/TmsPostForm.core.vue';
+
+let showPostForm = $ref(false);
 
 const props = withDefaults(defineProps<{
 	reply?: Misskey.entities.Note | null;
@@ -173,1188 +62,91 @@ const emit = defineEmits<{
 	(ev: 'posted'): void;
 	(ev: 'cancel'): void;
 	(ev: 'esc'): void;
+	(ev: 'reopen', draft?: Draft.Draft | null): void;
 }>();
 
-const rootEl = $shallowRef<HTMLElement | null>(null);
-const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
-const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
-const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
-const visibilityButton = $shallowRef<HTMLElement | null>(null);
-
-let textareaElAutocomplete: Autocomplete | null = null;
-let cwInputElAutocomplete: Autocomplete | null = null;
-let hashtagsInputElAutocomplete: Autocomplete | null = null;
-
-const focus = (): void => {
-	if (textareaEl) {
-		textareaEl.focus();
-		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
-	}
-};
-
-const textCountEl = $shallowRef<HTMLElement | null>(null);
-let textCountElResizeObserver: ResizeObserver | null = null;
-let textCountElWidth = $ref(0);
-
-onMounted(() => {
-	if (textareaEl) {
-		textareaElAutocomplete = new Autocomplete(textareaEl, $$(text));
-	}
-	if (cwInputEl) {
-		cwInputElAutocomplete = new Autocomplete(cwInputEl, $$(cw));
-	}
-	if (hashtagsInputEl) {
-		hashtagsInputElAutocomplete = new Autocomplete(hashtagsInputEl, $$(hashtags));
-	}
-	if (textCountEl) {
-		textCountElResizeObserver = new ResizeObserver(entries => {
-			entries.forEach(({ borderBoxSize }) => {
-				borderBoxSize.forEach(({ inlineSize }) => {
-					const width = Math.ceil(inlineSize);
-					textCountElWidth = width + (width % 2);
-				});
-			});
-		});
-		textCountElResizeObserver.observe(textCountEl);
-	}
-	if (props.autofocus) {
-		focus();
-		nextTick(focus);
-	}
-});
-
-onUnmounted(() => {
-	if (textareaElAutocomplete) {
-		textareaElAutocomplete.detach();
-		textareaElAutocomplete = null;
-	}
-	if (cwInputElAutocomplete) {
-		cwInputElAutocomplete.detach();
-		cwInputElAutocomplete = null;
-	}
-	if (hashtagsInputElAutocomplete) {
-		hashtagsInputElAutocomplete.detach();
-		hashtagsInputElAutocomplete = null;
-	}
-	if (textCountElResizeObserver) {
-		textCountElResizeObserver.disconnect();
-		textCountElResizeObserver = null;
-	}
-});
-
-const modal = inject<boolean>('modal', false);
-
-const fetching = $computed<boolean>(() => fetchList.length !== 0);
-let fetchList = $ref<string[]>([]);
-const pushFetchList = (): {
-	popFetchList(): void;
-} => {
-	const fetchId = uuid();
-	fetchList.push(fetchId);
-	return {
-		popFetchList(): void {
-			fetchList = fetchList.filter(fid => fid !== fetchId);
-		},
-	};
-};
-
-// パラメーター
-let text = $ref(props.initialText ?? '');
-let files = $ref(props.initialFiles ?? []);
-let useCw = $ref(false);
-let cw = $ref<string>('');
-let poll = $ref<EditedPoll | null>(null);
-let localOnly = $ref<boolean>(props.initialLocalOnly ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly));
-let visibility = $ref<Misskey.entities.Note['visibility']>(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility));
-let visibleUsers = $ref<Misskey.entities.User[]>([]);
-
-const pushVisibleUser = (user: Misskey.entities.User): void => {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
-		visibleUsers.push(user);
-	}
-};
-const addVisibleUser = (): void => {
-	os.selectUser().then(user => {
-		pushVisibleUser(user);
-
-		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
-			text = `@${Acct.toString(user)} ${text}`;
-		}
-	});
-};
-const removeVisibleUser = (user: Misskey.entities.User): void => {
-	visibleUsers = erase(user, visibleUsers);
-};
-
-// 宛先
-let hasNotSpecifiedMentions = $ref(false);
-const checkMissingMention = (): void => {
-	if (visibility === 'specified') {
-		const ast = mfm.parse(text);
-
-		for (const x of extractMentions(ast)) {
-			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-				hasNotSpecifiedMentions = true;
-				return;
-			}
-		}
-		hasNotSpecifiedMentions = false;
-	}
-};
-const addMissingMention = (): void => {
-	const ast = mfm.parse(text);
-
-	for (const x of extractMentions(ast)) {
-		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host ?? undefined }, token).then(user => {
-				visibleUsers.push(user);
-			});
-		}
-	}
-};
-
-// MFM判定
-let hasAnnoyingText = $ref(false);
-const checkAnnoyingText = (): void => {
-	if (!useCw && visibility === 'public') {
-		hasAnnoyingText = (
-			text.includes('$[x2') ||
-			text.includes('$[x3') ||
-			text.includes('$[x4') ||
-			text.includes('$[scale') ||
-			text.includes('$[position')
-		);
-	} else {
-		hasAnnoyingText = false;
-	}
-};
-
-watch($$(text), checkMissingMention, { immediate: true });
-watch($$(visibility), checkMissingMention);
-watch($$(visibleUsers), checkMissingMention, { deep: true });
-
-watch($$(text), checkAnnoyingText, { immediate: true });
-watch($$(useCw), checkAnnoyingText);
-watch($$(visibility), checkAnnoyingText);
-
-// 投稿するアカウント
-let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
-let token = $ref<string | null>(null);
-watch($$(postAccount), async () => {
-	const storedAccounts = await getAccounts() as {
-		id: string;
-		token: string;
-	}[];
-	const newToken = storedAccounts.find(x => x.id === postAccount?.id)?.token ?? null;
-
-	if (token !== newToken) {
-		token = newToken;
-
-		const { popFetchList } = pushFetchList();
-
-		if (reply) {
-			await os.apiWithDialog('notes/show', { noteId: reply.id }, token)
-				.then(updateReply)
-				.catch(updateReply);
-		}
-		if (renote) {
-			await os.apiWithDialog('notes/show', { noteId: renote.id }, token)
-				.then(updateRenote)
-				.catch(updateRenote);
-		}
-		if (channel) {
-			await os.apiWithDialog('channels/show', { channelId: channel.id }, token)
-				.then(updateChannel)
-				.catch(updateChannel);
-		}
-
-		popFetchList();
-	}
-});
-const openAccountMenu = (ev: MouseEvent): void => {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount?.id ?? $i?.id,
-		onChoose: (account) => {
-			if (account.id === $i?.id) {
-				postAccount = null;
-			} else {
-				postAccount = account;
-			}
-		},
-	}, ev);
-};
-
-const mergeVisibility = async (note: Misskey.entities.Note): Promise<void> => {
-	if (channel) {
-		visibility = 'public';
-		localOnly = true;
-	}
-
-	const { visibility: vis } = note;
-	const getVisLevel = (v: Misskey.entities.Note['visibility']): number => {
-		return {
-			public: 1,
-			home: 2,
-			followers: 3,
-			specified: 4,
-		}[v];
-	};
-
-	if (getVisLevel(visibility) < getVisLevel(vis)) {
-		visibility = vis;
-	}
-
-	if (visibility === 'specified') {
-		localOnly = false;
-
-		const visibleUserIds = note.visibleUserIds?.filter(uid => uid !== $i?.id && uid !== note.userId) ?? [];
-		if (note.userId !== $i?.id) visibleUserIds.push(note.userId);
-
-		if (visibleUserIds.length !== 0) {
-			const { popFetchList } = pushFetchList();
-
-			visibleUsers = [];
-
-			await os.api('users/show', {
-				userIds: visibleUserIds,
-			}, token).then(users => {
-				users.forEach(pushVisibleUser);
-			});
-
-			popFetchList();
-		}
-	} else {
-		visibleUsers = [];
-	}
-};
-
-// 返信
-let replyId = $ref<string | null>(null);
-let reply = $ref<Misskey.entities.Note | null>(null);
-const updateReply = (_reply: Misskey.entities.Note | null): void => {
-	reply = _reply;
-	replyId = reply?.id ?? null;
-	if (!reply) return;
-
-	mergeVisibility(reply);
-
-	// keep cw
-	if (defaultStore.state.keepCw && reply.cw) {
-		useCw = true;
-		cw = reply.cw;
-	}
-
-	let mentionText = '';
-	const addMention = ({ username, host: _host }: {
-		username: string;
-		host: string | null;
-	}): void => {
-		if ($i?.username === username && (_host == null || _host === host)) return;
-
-		const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
-
-		if (`${mentionText}${text}`.includes(`${mention} `)) return;
-
-		mentionText += `${mention} `;
-	};
-
-	addMention({
-		username: reply.user.username,
-		host: reply.user.host,
-	});
-
-	if (reply.text != null) {
-		const ast = mfm.parse(reply.text);
-
-		for (const x of extractMentions(ast)) {
-			addMention({
-				username: x.username,
-				host: x.host,
-			});
-		}
-	}
-
-	text = `${mentionText}${text}`;
-};
-watch($$(replyId), async () => {
-	if (!replyId) {
-		reply = null;
-		return;
-	}
-	if (replyId === reply?.id) return;
-
-	const { popFetchList } = pushFetchList();
-
-	await os.apiWithDialog('notes/show', { noteId: replyId }, token)
-		.then(updateReply)
-		.catch(updateReply);
-
-	popFetchList();
-});
-
-// Renote, 引用
-let renoteId = $ref<string | null>(null);
-let renote = $ref<Misskey.entities.Note | null>(null);
-const updateRenote = (_renote: Misskey.entities.Note | null): void => {
-	renote = _renote;
-	renoteId = renote?.id ?? null;
-	if (!renote) return;
-};
-watch($$(renoteId), async () => {
-	if (!renoteId) {
-		renote = null;
-		return;
-	}
-	if (renoteId === renote?.id) return;
-
-	const { popFetchList } = pushFetchList();
-
-	await os.apiWithDialog('notes/show', { noteId: renoteId }, token)
-		.then(updateRenote)
-		.catch(updateRenote);
-
-	popFetchList();
-});
-let quoteNoteCancel = $ref(true);
-
-// チャンネル
-let channelId = $ref<string | null>(null);
-let channel = $ref<Misskey.entities.Channel | null>(null);
-const updateChannel = (_channel: unknown | Misskey.entities.Channel | null): void => {
-	channel = (_channel as Misskey.entities.Channel | null);
-	channelId = channel?.id ?? null;
-	if (!channel) return;
-
-	visibility = 'public';
-	localOnly = true;
-};
-watch($$(channelId), async () => {
-	if (!channelId) {
-		channel = null;
-		return;
-	}
-	if (channelId === channel?.id) return;
-
-	const { popFetchList } = pushFetchList();
-
-	await os.apiWithDialog('channels/show', { channelId: channelId }, token)
-		.then(updateChannel)
-		.catch(updateChannel);
-	
-	popFetchList();
-});
-
-// 下書き
-let draftWatching = $ref(false);
-let draftId = $ref<string | null>(null);
-let draft = $ref<Draft.Draft | null>(null);
-const saveDraft = (): void => {
-	Draft.setDraft(draftId, {
-		text,
-		useCw,
-		cw,
-		visibility,
-		localOnly,
-		files,
-		poll,
-		replyId: reply?.id ?? null,
-		renoteId: renote?.id ?? null,
-		channelId: channel?.id ?? null,
-	});
-};
-const deleteDraft = (): void => {
-	Draft.deleteDraft(draftId);
-};
-watch([
-	$$(text),
-	$$(useCw),
-	$$(cw),
-	$$(visibility),
-	$$(localOnly),
-	$$(files),
-	$$(poll),
-	$$(reply),
-	$$(renote),
-	$$(channel),
-], () => {
-	if (!draftWatching) return;
-	saveDraft();
-}, { deep: true });
-
-const loadDraft = (): void => {
-	draftWatching = false;
-
-	draft = Draft.getDraft(draftId);
-	if (draft) {
-		text = draft.data.text;
-		useCw = draft.data.useCw;
-		cw = draft.data.cw;
-		visibility = draft.data.visibility;
-		localOnly = draft.data.localOnly;
-		files = draft.data.files;
-		poll = draft.data.poll;
-		replyId = draft.data.replyId;
-		renoteId = draft.data.renoteId;
-		channelId = draft.data.channelId;
-	} else {
-		clear();
-	}
-
-	draftWatching = true;
-};
-watch($$(draftId), () => {
-	loadDraft();
-	quoteNoteCancel = !draftId?.split('/').some(x => x.startsWith('rn:'));
-});
-
-// ハッシュタグ
-const withHashtags = $computed<boolean>(defaultStore.makeGetterSetter('postFormWithHashtags'));
-const hashtags = $computed<string>(defaultStore.makeGetterSetter('postFormHashtags'));
-const recentHashtags = $ref(parseArray<string[]>(localStorage.getItem('hashtags')));
-
-// 入力フォーム
-let imeText = $ref(''); // 変換中の文字列
-let showPreview = $ref(false);
-let posting = $ref(false);
-let posted = $ref(false);
-
-const placeholder = $computed((): string => {
-	if (renote) return i18n.ts._postForm.quotePlaceholder;
-	if (reply) return i18n.ts._postForm.replyPlaceholder;
-	if (channel) return i18n.ts._postForm.channelPlaceholder;
-	const xs = [
-		i18n.ts._postForm._placeholders.a,
-		i18n.ts._postForm._placeholders.b,
-		i18n.ts._postForm._placeholders.c,
-		i18n.ts._postForm._placeholders.d,
-		i18n.ts._postForm._placeholders.e,
-		i18n.ts._postForm._placeholders.f,
-	];
-	return xs[Math.floor(Math.random() * xs.length)];
-});
-
-const textLength = $computed((): number => {
-	return length((text + imeText).trim());
-});
-const maxTextLength = $computed((): number => {
-	const instanceTyped = instance as {
-		maxNoteTextLength?: number;
-	} | null | undefined;
-	return instanceTyped?.maxNoteTextLength ?? 1000;
-});
-const canPost = $computed((): boolean => {
-	return !fetching && !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
-		(textLength <= maxTextLength) &&
-		(!poll || poll.choices.length >= 2);
+let bindProps = $ref<{
+	draft?: Draft.Draft | null;
+	reply?: Misskey.entities.Note | null;
+	renote?: Misskey.entities.Note | null;
+	channel?: Misskey.entities.Channel | null;
+	mention?: Misskey.entities.User | null;
+	specified?: Misskey.entities.User | null;
+	initialText?: string | null;
+	initialVisibility?: Misskey.entities.Note['visibility'] | null;
+	initialFiles?: Misskey.entities.DriveFile[] | null;
+	initialLocalOnly?: boolean | null;
+	initialVisibleUsers?: Misskey.entities.User[] | null;
+}>({
+	draft: null,
+	reply: props.reply,
+	renote: props.renote,
+	channel: props.channel,
+	mention: props.mention,
+	specified: props.specified,
+	initialText: props.initialText,
+	initialVisibility: props.initialVisibility,
+	initialFiles: props.initialFiles,
+	initialLocalOnly: props.initialLocalOnly,
+	initialVisibleUsers: props.initialVisibleUsers,
 });
 
-const clear = (): void => {
-	text = '';
-	files = [];
-	poll = null;
-	replyId = null;
-	renoteId = null;
-};
+onMounted(() => {
+	if (props.initialNote) {
+		const init = props.initialNote as Misskey.entities.Note & {
+			channel?: Misskey.entities.Channel;
+		};
 
-// 投稿フォーム全体
-// let draghover = $ref(false);
-const onDragover = (ev: DragEvent): void => {
-	if (!ev.dataTransfer?.items[0]) return;
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	if (isFile || isDriveFile) {
-		ev.preventDefault();
-		// draghover = true;
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy':
-			case 'copyLink':
-			case 'copyMove':
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	}
-};
-const onDragenter = (_ev: DragEvent): void => {
-	// draghover = true;
-};
-const onDragleave = (_ev: DragEvent): void => {
-	// draghover = false;
-};
-const onDrop = (ev: DragEvent): void => {
-	if (!ev.dataTransfer) return;
-	// draghover = false;
+		const draftId = Draft.genDraftId({
+			user: $i,
+			isEdit: true,
+		});
 
-	// File
-	if (ev.dataTransfer.files.length > 0) {
-		ev.preventDefault();
-		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
-		return;
-	}
+		Draft.setDraft(draftId, {
+			text: init.text ?? '',
+			useCw: init.cw != null,
+			cw: init.cw ?? '',
+			visibility: init.visibility,
+			localOnly: !!init.localOnly,
+			files: init.files,
+			poll: init.poll ? {
+				choices: init.poll.choices.map(x => x.text),
+				multiple: init.poll.multiple,
+				expiresAt: init.poll.expiresAt ? new Date(init.poll.expiresAt).getTime() : null,
+				expiredAfter: null,
+			} : null,
+			replyId: init.reply?.id ?? null,
+			renoteId: init.renote?.id ?? null,
+			channelId: init.channel?.id ?? null,
+		});
 
-	// DriveFile
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile) {
-		const file = parseObject<Misskey.entities.DriveFile>(driveFile);
-		files.push(file);
-		ev.preventDefault();
+		bindProps.draft = Draft.getDraft(draftId);
 	}
-};
 
-// 入力フォーム
-const typing = throttle(3000, () => {
-	if (channel) {
-		stream.send('typingOnChannel', { channel: channel.id });
-	}
+	nextTick(() => showPostForm = true);
 });
-const onKeydown = (ev: KeyboardEvent): void => {
-	typing();
-	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
-	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.key === 'Escape' || ev.key === 'Esc') emit('esc');
-};
-const onCompositionUpdate = (ev: CompositionEvent): void => {
-	typing();
-	imeText = ev.data;
-};
-const onCompositionEnd = (_ev: CompositionEvent): void => {
-	imeText = '';
-};
-const onPaste = async (ev: ClipboardEvent): Promise<void> => {
-	if (!ev.clipboardData) return;
-
-	Array.from(ev.clipboardData.items, (item, i) => {
-		if (item.kind !== 'file') return;
-		const file = item.getAsFile();
-		if (!file) return;
-		const lio = file.name.lastIndexOf('.');
-		const ext = lio >= 0 ? file.name.slice(lio) : '';
-		const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
-		upload(file, formatted);
-	});
 
-	const paste = ev.clipboardData.getData('text');
-	const path = url + '/notes/';
+const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
+	showPostForm = false;
 
-	if (!renote && paste.startsWith(path)) {
-		ev.preventDefault();
-
-		os.confirm({
-			type: 'info',
-			text: i18n.ts.quoteQuestion,
-		}).then(({ canceled }) => {
-			if (canceled) {
-				insertTextAtCursor(textareaEl, paste);
-				return;
-			}
-
-			renoteId = paste.slice((url + '/notes/').length).split(/[\/\?#]/, 1)[0] || null;
-		});
-	}
-};
-
-// ファイル
-const chooseFileFrom = (ev: MouseEvent): void => {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(_files => {
-		for (const file of _files) {
-			files.push(file);
-		}
-	});
-};
-const detachFile = (id: string): void => {
-	files = files.filter(x => x.id !== id);
-};
-const updateFiles = (_files: Misskey.entities.DriveFile[]): void => {
-	files = _files;
-};
-const updateFileSensitive = (file: Misskey.entities.DriveFile, sensitive: boolean): void => {
-	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
-};
-const updateFileName = (file: Misskey.entities.DriveFile, name: string): void => {
-	files[files.findIndex(x => x.id === file.id)].name = name;
-};
-const upload = async (file: File, name?: string): Promise<void> => {
-	const { popFetchList } = pushFetchList();
-
-	await uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
-		files.push(res);
-	});
-
-	popFetchList();
-};
-
-const cancel = (): void => {
-	emit('cancel');
-};
-
-const chooseDraft = (): void => {
-	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
-		activeDraftId: draftId,
-	}, {
-		chosen: ({ id }: Draft.DraftWithId) => {
-			draftId = id;
-		},
-	}, 'closed');
-};
-
-const openVisibilityPicker = (): void => {
-	if (channel) {
-		visibility = 'public';
-		localOnly = true;
+	if (!draft) {
+		bindProps = {};
+		nextTick(() => showPostForm = true);
 		return;
 	}
 
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
-		src: visibilityButton,
-	}, {
-		changeVisibility: (v: typeof visibility) => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
-		},
-		changeLocalOnly: (v: typeof localOnly) => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
-		},
-	}, 'closed');
-};
-
-const togglePoll = (): void => {
-	if (poll) {
-		poll = null;
-	} else {
-		poll = {
-			choices: ['', ''],
-			multiple: false,
-			expiresAt: null,
-			expiredAfter: null,
-		};
-	}
-};
-
-const insertMention = (): void => {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, `@${Acct.toString(user)} `);
-	});
-};
-
-const showActions = (ev: MouseEvent): void => {
-	const el = ev.currentTarget ?? ev.target;
-	if (!(el instanceof HTMLElement)) return;
-
-	os.popupMenu(postFormActions.map(action => {
-		return {
-			text: action.title,
-			action: (): void => {
-				action.handler({ text }, (key, value) => {
-					if (key === 'text') text = value;
-				});
-			},
-		};
-	}), el);
-};
-
-const insertEmoji = async (ev: MouseEvent): Promise<void> => {
-	const el = ev.currentTarget ?? ev.target;
-	if (!(el instanceof HTMLElement)) return;
-	os.openEmojiPicker(el, {}, textareaEl);
-};
-
-const post = async (ev?: MouseEvent): Promise<void> => {
-	if (ev) {
-		const el = ev.currentTarget ?? ev.target;
-		if (el instanceof HTMLElement) {
-			const rect = el.getBoundingClientRect();
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
-		}
-	}
-
-	let postData = {
-		text: text || undefined,
-		fileIds: files.length !== 0 ? files.map(({ id }) => id) : undefined,
-		replyId: reply?.id || undefined,
-		renoteId: renote?.id || undefined,
-		channelId: channel?.id || undefined,
-		poll: poll,
-		cw: useCw ? cw || '' : undefined,
-		localOnly: localOnly,
-		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(({ id }) => id) : undefined,
-	};
+	const { replyId, renoteId, channelId } = Draft.parseDraftId(draft.id);
 
-	if (withHashtags) {
-		const hashtags_ = hashtags.split(/[\s#]/).flatMap(x => x ? [`#${x}`] : []).join(' ');
-		postData.text = `${postData.text} ${hashtags_}`.trim();
-	}
+	const reply = replyId ? os.api('notes/show', { noteId: replyId }) : null;
+	const renote = renoteId ? os.api('notes/show', { noteId: renoteId }) : null;
+	const channel = channelId ? os.api('channels/show', { channelId: channelId }) : null;
 
-	if (notePostInterruptors.length !== 0) {
-		for (const interruptor of notePostInterruptors) {
-			postData = await interruptor.handler(deepClone(postData)) as typeof postData;
-		}
-	}
+	bindProps = {};
 
-	posting = true;
-	os.api('notes/create', postData, token).then(({ createdNote }) => {
-		if (props.freezeAfterPosted) {
-			posted = true;
-		} else {
-			clear();
-		}
-		nextTick(() => {
-			deleteDraft();
-			emit('posted');
-			if (postData.text && postData.text !== '') {
-				const hashtags_ = mfm.parse(postData.text).flatMap((x) => x.type === 'hashtag' ? [x.props.hashtag] : []);
-				const history = parseArray<string[]>(localStorage.getItem('hashtags'));
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
-			}
-			posting = false;
-			postAccount = null;
+	bindProps.reply = await reply;
+	bindProps.renote = await renote;
+	bindProps.channel = (await channel) as Misskey.entities.Channel | null;
 
-			imanonashi(createdNote);
-		});
-	}).catch((err: unknown) => {
-		const { id, message } = err as {
-			id: string;
-			message: string;
-		};
-		posting = false;
-		os.alert({
-			type: 'error',
-			text: `${message}\n${id}`,
-		});
-	});
+	nextTick(() => showPostForm = true);
 };
-
-onMounted(() => {
-	nextTick(() => {
-		const _initialVisibleUsers = $ref(props.initialVisibleUsers ?? []);
-		_initialVisibleUsers.forEach(pushVisibleUser);
-
-		const _specified = $ref(props.specified);
-		if (_specified) {
-			visibility = 'specified';
-			localOnly = false;
-			pushVisibleUser(_specified);
-		}
-
-		const _mention = $ref(props.mention);
-		if (_mention) {
-			const { username, host: _host } = _mention;
-			const mention = `@${username}${(_host != null && _host !== host) ? `@${toASCII(_host)}` : ''}`;
-			text = `${mention} ${text}`;
-		}
-
-		const _reply = $ref(props.reply);
-		if (_reply) {
-			updateReply(_reply);
-		}
-
-		const _renote = $ref(props.renote);
-		if (_renote) {
-			updateRenote(_renote);
-			quoteNoteCancel = false;
-		}
-
-		const _channel = $ref(props.channel);
-		if (_channel) {
-			updateChannel(_channel);
-		}
-
-		nextTick(() => {
-			draftWatching = false;
-
-			const init = $ref(props.initialNote as Misskey.entities.Note & {
-				channel?: Misskey.entities.Channel;
-			});
-			if (init) {
-				const _draftId = `edit:${Date.now()}`;
-				Draft.setDraft(_draftId, {
-					text: init.text ?? '',
-					useCw: init.cw != null,
-					cw: init.cw ?? '',
-					visibility: init.visibility,
-					localOnly: !!init.localOnly,
-					files: init.files,
-					poll: init.poll ? {
-						choices: init.poll.choices.map(x => x.text),
-						multiple: init.poll.multiple,
-						expiresAt: init.poll.expiresAt ? new Date(init.poll.expiresAt).getTime() : null,
-						expiredAfter: null,
-					} : null,
-					replyId: init.reply?.id ?? null,
-					renoteId: init.renote?.id ?? null,
-					channelId: init.channel?.id ?? null,
-				});
-				defaultStore.set('postFormWithHashtags', false);
-				draftId = _draftId;
-			} else {
-				let _draftId = '';
-
-				if (_channel) {
-					_draftId += `ch:${_channel.id}/`;
-				}
-
-				if (_renote) {
-					_draftId += `rn:${_renote.id}`;
-				} else if (_reply) {
-					_draftId += `re:${_reply.id}`;
-				} else if ($i) {
-					_draftId += `new:${$i.id}`;
-				}
-
-				if (_draftId) {
-					draftId = _draftId;
-				}
-			}
-
-			draftWatching = true;
-		});
-	});
-});
 </script>
-
-<style lang="scss" module>
-.root {
-	position: relative;
-
-	&.modal {
-		width: 100%;
-		max-width: 520px;
-	}
-}
-
-.header {
-	display: grid;
-	grid-auto-flow: column;
-	grid-template-columns: auto 1fr;
-	grid-template-rows: 1fr;
-	gap: 4px;
-	min-height: 50px;
-}
-
-.headerLeft {
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: minmax(36px, 50px);
-	grid-auto-rows: minmax(40px, 100%);
-}
-
-.cancel {
-	padding: 0;
-	font-size: 1em;
-	height: 100%;
-}
-
-.account {
-	height: 100%;
-	vertical-align: bottom;
-
-	> .avatar {
-		width: 28px;
-		height: 28px;
-		margin: auto 0;
-	}
-}
-
-.headerRight {
-	justify-self: end;
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: max-content;
-	align-items: center;
-	gap: 4px;
-	font-size: 0.9em;
-}
-
-.headerRightItem {
-	margin: 0;
-	padding: 8px;
-	border-radius: 6px;
-
-	&:disabled {
-		background: none;
-	}
-}
-
-.headerRightButton {
-	display: flex;
-	gap: 6px;
-	margin: 0;
-	padding: 8px;
-	border-radius: 6px;
-	overflow: hidden;
-	white-space: nowrap;
-
-	&:not(:disabled):hover,
-	&:not(:disabled):active {
-		background: var(--X5);
-	}
-
-	&.headerRightButtonActive {
-		color: var(--accent);
-	}
-
-	> .headerRightButtonText {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&:enabled > .headerRightButtonText {
-		opacity: 0.8;
-	}
-}
-
-.submit {
-	margin: 12px 12px 12px 6px;
-	vertical-align: bottom;
-
-	&:disabled {
-		opacity: 0.7;
-	}
-
-	&.submitPosting {
-		cursor: wait;
-	}
-
-	&:not(:disabled):hover,
-	&:not(:disabled):active {
-		> .submitInner {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
-
-	> .submitInner {
-		padding: 0 12px;
-		line-height: 34px;
-		font-weight: bold;
-		border-radius: 6px;
-		min-width: 90px;
-		box-sizing: border-box;
-		color: var(--fgOnAccent);
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-	}
-}
-
-.replyNote {
-	padding: 0 20px 16px 20px;
-}
-
-.toSpecified {
-	padding: 6px 24px;
-	margin-bottom: 8px;
-	overflow: auto;
-	white-space: nowrap;
-}
-
-.visibleUsers {
-	display: inline;
-	top: -1px;
-	font-size: 14px;
-}
-
-.visibleUser {
-	margin-right: 14px;
-	padding: 8px 0 8px 8px;
-	border-radius: 8px;
-	background: var(--X4);
-}
-
-.infoList {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 0 20px 16px 20px;
-
-	&:empty {
-		display: none;
-	}
-}
-
-.forms {
-	--tmsPostForm-inputPadding: 24px;
-}
-
-.input {
-	display: block;
-	box-sizing: border-box;
-	padding: 0 var(--tmsPostForm-inputPadding);
-	margin: 0;
-	width: 100%;
-	font-size: 16px;
-	border: none;
-	border-radius: 0;
-	background: transparent;
-	color: var(--fg);
-	font-family: inherit;
-
-	&:focus {
-		outline: none;
-	}
-
-	&:disabled {
-		opacity: 0.5;
-	}
-}
-
-.cw {
-	padding-bottom: 8px;
-	border-bottom: solid 0.5px var(--divider);
-}
-
-.hashtags {
-	padding-top: 8px;
-	padding-bottom: 8px;
-	border-top: solid 0.5px var(--divider);
-}
-
-.textOuter {
-	width: 100%;
-	position: relative;
-}
-
-.text {
-	max-width: 100%;
-	min-width: 100%;
-	width: 100%;
-	min-height: 90px;
-	height: 100%;
-	padding-right: max(var(--tmsPostForm-inputPadding), var(--tmsPostForm-counterWidth, 0px));
-
-	&.withCw {
-		padding-top: 8px;
-	}
-}
-
-.quoteNote {
-	padding: 8px var(--tmsPostForm-inputPadding);
-
-	> .quoteNoteInner {
-		position: relative;
-		padding: 16px 32px 16px 16px;
-		border: dashed 1px var(--renote);
-		border-radius: 8px;
-
-		> .quoteNoteCancel {
-			position: absolute;
-			top: 0;
-			right: 0;
-			padding: 4px;
-			font-size: 16px;
-		}
-	}
-}
-
-.textCount {
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: 4px 8px;
-	font-size: 0.9em;
-	color: var(--fg);
-	min-width: 1.6em;
-	pointer-events: none;
-	opacity: 0.8;
-
-	&.textOver {
-		color: var(--error);
-	}
-}
-
-.preview {
-	padding: 16px 20px 0 20px;
-}
-
-.footer {
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
-	padding: 0 16px 16px 16px;
-	font-size: 1em;
-}
-
-.footerButton {
-	aspect-ratio: 1 / 1;
-	border-radius: 6px;
-
-	&:not(:disabled):hover,
-	&:not(:disabled):active {
-		background: var(--X5);
-	}
-
-	&.footerButtonActive {
-		color: var(--accent);
-	}
-}
-
-:global(.max-width_500px) {
-	.headerRightButtonText {
-		display: none;
-	}
-
-	.submit {
-		margin: 8px 8px 8px 4px;
-	}
-
-	.replyNote {
-		padding: 0 14px 16px 14px;
-	}
-
-	.toSpecified {
-		padding: 6px 16px;
-	}
-
-	.infoList {
-		padding: 0 14px 16px 14px;
-	}
-
-	.forms {
-		--tmsPostForm-inputPadding: 16px;
-	}
-
-	.text {
-		min-height: 80px;
-	}
-
-	.preview {
-		padding: 16px 14px 0 14px;
-	}
-
-	.footer {
-		padding: 0 8px 8px 8px;
-	}
-}
-
-:global(.max-width_310px) {
-	.header {
-		gap: 0;
-	}
-
-	.headerRight {
-		gap: 0;
-	}
-
-	.footer {
-		font-size: 14px;
-	}
-}
-</style>
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 2f2f608d5c5d..39c68230d0b1 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -25,14 +25,11 @@ type LsDraft = {
 };
 
 export type Draft = {
+	id: string;
 	updatedAt: string;
 	data: DraftData;
 };
 
-export type DraftWithId = Draft & {
-	id: string;
-};
-
 type MessageDraftData = {
 	text: string;
 	file: Misskey.entities.DriveFile | null;
@@ -44,12 +41,80 @@ type LsMessageDraft = {
 };
 
 export type MessageDraft = {
+	id: string;
 	updatedAt: string;
 	data: MessageDraftData;
 };
 
-export type MessageDraftWithId = MessageDraft & {
-	id: string;
+type PartialNullable<T> = {
+	[P in keyof T]?: T[P] | null;
+};
+
+export const genDraftId = (data: PartialNullable<{
+	user: {
+		id: string;
+	};
+	reply: Misskey.entities.Note;
+	renote: Misskey.entities.Note;
+	channel: Misskey.entities.Channel;
+	isEdit: boolean;
+}>): Draft['id'] | null => {
+	const entries: [string, string | null][] = [];
+	const { user, reply, renote, channel, isEdit } = data;
+
+	if (!user) return null;
+	entries.push(['u', user.id]);
+
+	if (channel) {
+		entries.push(['ch', channel.id]);
+	}
+	if (renote) {
+		entries.push(['rn', renote.id]);
+	} else if (reply) {
+		entries.push(['re', reply.id]);
+	} else {
+		if (isEdit) {
+			entries.push(['edit', Date.now().toString()]);
+		} else {
+			entries.push(['new', null]);
+		}
+	}
+
+	return entries.map(([k, v]) => v ? `${k}:${v}` : k).join('/');
+};
+
+export const parseDraftId = (draftId: Draft['id'] | null): {
+	userId: string | null;
+	replyId: string | null;
+	renoteId: string | null;
+	channelId: string | null;
+	isNew: boolean;
+	isEdit: boolean;
+} => {
+	const result: ReturnType<typeof parseDraftId> = {
+		userId: null,
+		replyId: null,
+		renoteId: null,
+		channelId: null,
+		isNew: false,
+		isEdit: false,
+	};
+
+	const entries = draftId ? draftId.split('/').map<[string, string | null]>(kv => {
+		const [k, v = null] = kv.split(':');
+		return [k, v];
+	}) : [];
+
+	entries.forEach(([k, v]) => {
+		if (k === 'u') result.userId = v;
+		if (k === 're') result.replyId = v;
+		if (k === 'rn') result.renoteId = v;
+		if (k === 'ch') result.channelId = v;
+		if (k === 'new') result.isNew = true;
+		if (k === 'edit') result.isEdit = true;
+	});
+
+	return result;
 };
 
 const isEmptyObject = <T extends Record<string, unknown>>(obj: T, ignoreKeys?: (keyof T)[]): obj is Record<keyof T, never> => {
@@ -85,7 +150,7 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 	return draftData;
 };
 
-export const getAllDraft = (): DraftWithId[] => {
+export const getAllDraft = (): Draft[] => {
 	const drafts = loadLsDrafts();
 
 	return Object.entries(drafts).flatMap(([id, draft]) => {
@@ -108,6 +173,7 @@ export const getDraft = (draftKey: string | null): Draft | null => {
 	const { updatedAt, data } = draft;
 
 	return {
+		id: draftKey,
 		updatedAt,
 		data: restoreDraftData(data),
 	};
@@ -172,7 +238,7 @@ const restoreMessageDraftData = (lsDraft: Partial<MessageDraftData>): MessageDra
 	return draftData;
 };
 
-export const getAllMessageDraft = (): MessageDraftWithId[] => {
+export const getAllMessageDraft = (): MessageDraft[] => {
 	const drafts = loadLsMessageDrafts();
 
 	return Object.entries(drafts).flatMap(([id, draft]) => {
@@ -195,6 +261,7 @@ export const getMessageDraft = (draftKey: string | null): MessageDraft | null =>
 	const { updatedAt, data } = draft;
 
 	return {
+		id: draftKey,
 		updatedAt,
 		data: restoreMessageDraftData(data),
 	};
diff --git a/packages/client/src/scripts/tms/utils.ts b/packages/client/src/scripts/tms/utils.ts
index 98a701b05cb8..ef9fac32a726 100644
--- a/packages/client/src/scripts/tms/utils.ts
+++ b/packages/client/src/scripts/tms/utils.ts
@@ -13,3 +13,12 @@ export const getRandomArrayElements = <T>(arr: T[], count: number): T[] => {
 
 	return result;
 };
+
+export const isHtmlElement = <T extends HTMLElement>(value: unknown): value is T => {
+	return value instanceof HTMLElement;
+};
+
+export const getHtmlElementFromEvent = <T extends HTMLElement>(event?: Event | null): T | null => {
+	const el = event?.currentTarget ?? event?.target;
+	return isHtmlElement<T>(el) ? el : null;
+};

From e02ca70205258bc6972ab1a480739c129f78ea04 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 10:01:01 +0900
Subject: [PATCH 043/147] fix

---
 .../src/components/TmsPostForm.core.vue       |  2 +-
 .../client/src/components/TmsPostForm.vue     | 21 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 7143263630aa..1ffef7691efe 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -19,7 +19,7 @@
 			</button>
 		</div>
 		<div :class="$style.headerRight">
-			<button v-tooltip="i18n.ts._tms.drafts" :class="['_button', $style.headerRightButton]" @click="chooseDraft">
+			<button v-if="!channel && !fixed" v-tooltip="i18n.ts._tms.drafts" :class="['_button', $style.headerRightButton]" @click="chooseDraft">
 				<span><i class="ti ti-notes"></i></span>
 			</button>
 			<template v-if="!(channel && fixed)">
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 09acd9b30f82..68e34f85b106 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -11,14 +11,14 @@
 	@esc="emit('esc')"
 	@reopen="reopen"
 />
-<div v-else style="display: grid; place-items: center;"><MkEllipsis/></div>
 </template>
 
 <script lang="ts" setup>
 import { nextTick, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
-import { $i } from '@/account';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
 import * as Draft from '@/scripts/tms/drafts';
 import TmsPostFormCore from '@/components/TmsPostForm.core.vue';
 
@@ -137,9 +137,11 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 
 	const { replyId, renoteId, channelId } = Draft.parseDraftId(draft.id);
 
-	const reply = replyId ? os.api('notes/show', { noteId: replyId }) : null;
-	const renote = renoteId ? os.api('notes/show', { noteId: renoteId }) : null;
-	const channel = channelId ? os.api('channels/show', { channelId: channelId }) : null;
+	const reply = replyId ? os.api('notes/show', { noteId: replyId }).catch(() => null) : null;
+	const renote = renoteId ? os.api('notes/show', { noteId: renoteId }).catch(() => null) : null;
+	const channel = channelId ? os.api('channels/show', { channelId: channelId }).catch(() => null) : null;
+
+	os.promiseDialog(Promise.allSettled([reply, renote, channel]), null, null, i18n.ts.processing);
 
 	bindProps = {};
 
@@ -147,6 +149,15 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 	bindProps.renote = await renote;
 	bindProps.channel = (await channel) as Misskey.entities.Channel | null;
 
+	Draft.setDraft(draft.id, {
+		...draft.data,
+		replyId: (await reply)?.id ?? null,
+		renoteId: (await renote)?.id ?? null,
+		channelId: (await channel)?.id ?? null,
+	});
+
+	bindProps.draft = Draft.getDraft(draft.id);
+
 	nextTick(() => showPostForm = true);
 };
 </script>

From c62ee8fe07781c9c9bee589b8b041bc4df5cedea Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 10:08:03 +0900
Subject: [PATCH 044/147] fix

---
 .../src/components/TmsPostForm.core.vue       | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 1ffef7691efe..643ea2b5fa4c 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -451,18 +451,21 @@ onMounted(() => {
 		nextTick(focus);
 	}
 
-	if (!props.instant && !props.mention && !props.specified) {
-		if (draft) {
-			text = draft.data.text;
-			useCw = draft.data.useCw;
-			cw = draft.data.cw;
-			visibility = draft.data.visibility;
-			localOnly = draft.data.localOnly;
-			files = draft.data.files;
-			poll = draft.data.poll;
-			setQuote(draft.data.renoteId);
+	nextTick(() => {
+		if (!props.instant && !props.mention && !props.specified) {
+			const _draft = draft ?? Draft.getDraft(draftKey);
+			if (_draft) {
+				text = _draft.data.text;
+				useCw = _draft.data.useCw;
+				cw = _draft.data.cw;
+				visibility = _draft.data.visibility;
+				localOnly = _draft.data.localOnly;
+				files = _draft.data.files;
+				poll = _draft.data.poll;
+				setQuote(_draft.data.renoteId);
+			}
 		}
-	}
+	});
 });
 
 onUnmounted(() => {

From ff133798de0a12b6154fb4e5b907c93b2ad5c8b0 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 10:12:22 +0900
Subject: [PATCH 045/147] fix

---
 .../src/components/TmsPostForm.core.vue       | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 643ea2b5fa4c..ef180deecd0c 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -452,18 +452,16 @@ onMounted(() => {
 	}
 
 	nextTick(() => {
-		if (!props.instant && !props.mention && !props.specified) {
-			const _draft = draft ?? Draft.getDraft(draftKey);
-			if (_draft) {
-				text = _draft.data.text;
-				useCw = _draft.data.useCw;
-				cw = _draft.data.cw;
-				visibility = _draft.data.visibility;
-				localOnly = _draft.data.localOnly;
-				files = _draft.data.files;
-				poll = _draft.data.poll;
-				setQuote(_draft.data.renoteId);
-			}
+		const _draft = draft ?? Draft.getDraft(draftKey);
+		if (_draft) {
+			text = _draft.data.text;
+			useCw = _draft.data.useCw;
+			cw = _draft.data.cw;
+			visibility = _draft.data.visibility;
+			localOnly = _draft.data.localOnly;
+			files = _draft.data.files;
+			poll = _draft.data.poll;
+			setQuote(_draft.data.renoteId);
 		}
 	});
 });

From 4cffadff43862dcdd36bae7b3bd18dfb81426c8f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 10:19:54 +0900
Subject: [PATCH 046/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index ef180deecd0c..bfd6ff66efe3 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -452,6 +452,8 @@ onMounted(() => {
 	}
 
 	nextTick(() => {
+		if (props.instant || props.fixed) return;
+	
 		const _draft = draft ?? Draft.getDraft(draftKey);
 		if (_draft) {
 			text = _draft.data.text;

From 192032faaafceaf56792336ca0432a7ca0d3b8cb Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 10:21:48 +0900
Subject: [PATCH 047/147] tweak

---
 packages/client/src/components/TmsPostForm.core.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index bfd6ff66efe3..9d99a397ac4c 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -216,7 +216,7 @@ const setQuote = (quoteId?: string | null): void => {
 	}
 
 	fetchingWrapper(
-		os.apiWithDialog('notes/show', { noteId: quoteId }, token)
+		os.api('notes/show', { noteId: quoteId }, token)
 			.then(_quote => quote = _quote)
 			.catch(() => quote = null),
 	);

From 6739d99de2bfdb1ac304921046b30bae1e9b81fe Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 21:16:52 +0900
Subject: [PATCH 048/147] fix

---
 .../src/components/TmsDraftsList.draft.vue    |   2 +-
 .../src/components/TmsPostForm.core.vue       | 122 ++++++++++--------
 .../client/src/components/TmsPostForm.vue     |   5 +-
 packages/client/src/scripts/tms/drafts.ts     |  45 +++++--
 4 files changed, 108 insertions(+), 66 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 5d3de88f437d..928e5d8549b8 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -42,7 +42,7 @@ const text = $ref(`${props.draft.data.cw || ''}\n${props.draft.data.text || ''}`
 const files = $ref<Misskey.entities.DriveFile[]>(props.draft.data.files);
 
 const labels = $ref<string[]>([]);
-if (props.draft.data.renoteId) labels.push(i18n.ts.quote);
+if (props.draft.data.renoteId || props.draft.data.quoteId) labels.push(i18n.ts.quote);
 if (props.draft.data.poll) labels.push(i18n.ts.poll);
 
 const draftMenu = (ev: MouseEvent): void => {
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 9d99a397ac4c..749951abf9b1 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -241,7 +241,7 @@ const clear = (): void => {
 };
 
 const placeholder = $computed((): string => {
-	if (renote) return i18n.ts._postForm.quotePlaceholder;
+	if (renote || quote) return i18n.ts._postForm.quotePlaceholder;
 	if (reply) return i18n.ts._postForm.replyPlaceholder;
 	if (channel) return i18n.ts._postForm.channelPlaceholder;
 	const xs = [
@@ -268,7 +268,7 @@ const maxTextLength = $computed((): number => {
 
 const canPost = $computed((): boolean => {
 	return !fetching && !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!renote) &&
+		(1 <= textLength || 1 <= files.length || !!poll || !!(renote || quote)) &&
 		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);
 });
@@ -352,8 +352,9 @@ const saveDraft = (): void => {
 		files,
 		poll,
 		replyId: reply?.id ?? null,
-		renoteId: renote?.id ?? quote?.id ?? null,
+		renoteId: renote?.id ?? null,
 		channelId: channel?.id ?? null,
+		quoteId: quote?.id ?? null,
 	});
 };
 
@@ -361,16 +362,18 @@ const deleteDraft = (): void => {
 	Draft.deleteDraft(draftKey);
 };
 
-watch([
-	$$(text),
-	$$(useCw),
-	$$(cw),
-	$$(visibility),
-	$$(localOnly),
-	$$(files),
-	$$(poll),
-	$$(quote),
-], saveDraft, { deep: true });
+const watchForDraft = (): void => {
+	watch([
+		$$(text),
+		$$(useCw),
+		$$(cw),
+		$$(visibility),
+		$$(localOnly),
+		$$(files),
+		$$(poll),
+		$$(quote),
+	], saveDraft, { deep: true });
+};
 //#endregion
 
 //#region credential
@@ -452,19 +455,21 @@ onMounted(() => {
 	}
 
 	nextTick(() => {
-		if (props.instant || props.fixed) return;
-	
-		const _draft = draft ?? Draft.getDraft(draftKey);
-		if (_draft) {
-			text = _draft.data.text;
-			useCw = _draft.data.useCw;
-			cw = _draft.data.cw;
-			visibility = _draft.data.visibility;
-			localOnly = _draft.data.localOnly;
-			files = _draft.data.files;
-			poll = _draft.data.poll;
-			setQuote(_draft.data.renoteId);
+		if (!props.instant && !props.fixed) {	
+			const _draft = draft ?? Draft.getDraft(draftKey);
+			if (_draft) {
+				text = _draft.data.text;
+				useCw = _draft.data.useCw;
+				cw = _draft.data.cw;
+				visibility = _draft.data.visibility;
+				localOnly = _draft.data.localOnly;
+				files = _draft.data.files;
+				poll = _draft.data.poll;
+				setQuote(_draft.data.quoteId);
+			}
 		}
+
+		watchForDraft();
 	});
 });
 
@@ -496,13 +501,15 @@ const pushVisibleUser = (user: Misskey.entities.User): void => {
 };
 
 const addVisibleUser = (): void => {
-	os.selectUser().then(user => {
-		pushVisibleUser(user);
+	fetchingWrapper(
+		os.selectUser().then(user => {
+			pushVisibleUser(user);
 
-		if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
-			text = `@${Acct.toString(user)} ${text}`;
-		}
-	});
+			if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
+				text = `@${Acct.toString(user)} ${text}`;
+			}
+		}),
+	);
 };
 
 const removeVisibleUser = (user: Misskey.entities.User): void => {
@@ -619,7 +626,9 @@ if (reply) {
 			fetchingWrapper(
 				os.api('users/show', { userIds: visibleUserIds }, token)
 					.then(users => {
-						users.forEach(pushVisibleUser);
+						users.forEach(user => {
+							pushVisibleUser(user);
+						});
 					}),
 			);
 		}
@@ -746,18 +755,20 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	if (!renote && !quote && paste.startsWith(path)) {
 		ev.preventDefault();
 
-		os.confirm({
-			type: 'info',
-			text: i18n.ts.quoteQuestion,
-		}).then(({ canceled }) => {
-			if (canceled) {
-				insertTextAtCursor(textareaEl, paste);
-				return;
-			}
-
-			const quoteId = paste.slice(path.length).split(/[\/\?#]/, 1)[0] || null;
-			setQuote(quoteId);
-		});
+		fetchingWrapper(
+			os.confirm({
+				type: 'info',
+				text: i18n.ts.quoteQuestion,
+			}).then(({ canceled }) => {
+				if (canceled) {
+					insertTextAtCursor(textareaEl, paste);
+					return;
+				}
+
+				const quoteId = paste.slice(path.length).split(/[\/\?#]/, 1)[0] || null;
+				setQuote(quoteId);
+			}),
+		);
 	}
 };
 //#endregion
@@ -904,11 +915,16 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 
 //#region footer buttons
 const chooseFileFrom = (ev: MouseEvent): void => {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(_files => {
-		for (const file of _files) {
-			files.push(file);
-		}
-	});
+	const el = getHtmlElementFromEvent(ev);
+
+	fetchingWrapper(
+		selectFiles(el, i18n.ts.attachFile)
+			.then(_files => {
+				for (const file of _files) {
+					files.push(file);
+				}
+			}),
+	);
 };
 
 const togglePoll = (): void => {
@@ -929,9 +945,11 @@ const toggleUseCw = (): void => {
 };
 
 const insertMention = (): void => {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, `@${Acct.toString(user)} `);
-	});
+	fetchingWrapper(
+		os.selectUser().then(user => {
+			insertTextAtCursor(textareaEl, `@${Acct.toString(user)} `);
+		}),
+	);
 };
 
 const toggleWithHashtags = (): void => {
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 68e34f85b106..20f59eb1dc8e 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -118,6 +118,7 @@ onMounted(() => {
 			replyId: init.reply?.id ?? null,
 			renoteId: init.renote?.id ?? null,
 			channelId: init.channel?.id ?? null,
+			quoteId: null,
 		});
 
 		bindProps.draft = Draft.getDraft(draftId);
@@ -149,15 +150,13 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 	bindProps.renote = await renote;
 	bindProps.channel = (await channel) as Misskey.entities.Channel | null;
 
-	Draft.setDraft(draft.id, {
+	bindProps.draft = Draft.setDraft(draft.id, {
 		...draft.data,
 		replyId: (await reply)?.id ?? null,
 		renoteId: (await renote)?.id ?? null,
 		channelId: (await channel)?.id ?? null,
 	});
 
-	bindProps.draft = Draft.getDraft(draft.id);
-
 	nextTick(() => showPostForm = true);
 };
 </script>
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 39c68230d0b1..3cf0b6b198a4 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -17,6 +17,7 @@ type DraftData = {
 	replyId: string | null;
 	renoteId: string | null;
 	channelId: string | null;
+	quoteId: string | null;
 };
 
 type LsDraft = {
@@ -128,7 +129,7 @@ const loadLsDrafts = (): Record<string, LsDraft | undefined> => parseObject<Reco
 const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => localStorage.setItem(LS_DRAFTS_KEY, JSON.stringify(drafts));
 
 const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
-	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId } = lsDraft;
+	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId } = lsDraft;
 
 	const draftData: DraftData = {
 		text: text ?? '',
@@ -141,6 +142,7 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 		replyId: replyId ?? null,
 		renoteId: renoteId ?? null,
 		channelId: channelId ?? null,
+		quoteId: quoteId ?? null,
 	};
 
 	if (draftData.channelId) {
@@ -179,12 +181,12 @@ export const getDraft = (draftKey: string | null): Draft | null => {
 	};
 };
 
-export const setDraft = (draftKey: string | null, data: DraftData): void => {
-	if (!draftKey) return;
+export const setDraft = (draftKey: string | null, data: DraftData): Draft | null => {
+	if (!draftKey) return null;
 
 	const drafts = loadLsDrafts();
 
-	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId } = data;
+	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId } = data;
 
 	const draftData: LsDraft['data'] = {
 		text: text || undefined,
@@ -197,21 +199,33 @@ export const setDraft = (draftKey: string | null, data: DraftData): void => {
 		replyId: replyId ?? undefined,
 		renoteId: renoteId ?? undefined,
 		channelId: channelId ?? undefined,
+		quoteId: quoteId ?? undefined,
 	};
 
 	if (draftData.channelId) {
 		draftData.localOnly = undefined;
 	}
 
-	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId', 'visibility', 'localOnly'])) return deleteDraft(draftKey);
+	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId', 'visibility', 'localOnly'])) {
+		deleteDraft(draftKey);
+		return null;
+	}
+
+	const updatedAt = new Date().toJSON();
 
 	saveLsDrafts({
 		...drafts,
 		[draftKey]: {
-			updatedAt: new Date().toJSON(),
+			updatedAt,
 			data: draftData,
 		},
 	});
+
+	return {
+		id: draftKey,
+		updatedAt,
+		data: restoreDraftData(draftData),
+	};
 };
 
 export const deleteDraft = (draftKey: string | null): void => {
@@ -267,8 +281,8 @@ export const getMessageDraft = (draftKey: string | null): MessageDraft | null =>
 	};
 };
 
-export const setMessageDraft = (draftKey: string | null, data: MessageDraftData): void => {
-	if (!draftKey) return;
+export const setMessageDraft = (draftKey: string | null, data: MessageDraftData): MessageDraft | null => {
+	if (!draftKey) return null;
 
 	const drafts = loadLsMessageDrafts();
 
@@ -279,15 +293,26 @@ export const setMessageDraft = (draftKey: string | null, data: MessageDraftData)
 		file: file ?? undefined,
 	};
 
-	if (isEmptyObject(draftData, [])) return deleteMessageDraft(draftKey);
+	if (isEmptyObject(draftData, [])) {
+		deleteMessageDraft(draftKey);
+		return null;
+	}
+
+	const updatedAt = new Date().toJSON();
 
 	saveLsMessageDrafts({
 		...drafts,
 		[draftKey]: {
-			updatedAt: new Date().toJSON(),
+			updatedAt,
 			data: draftData,
 		},
 	});
+
+	return {
+		id: draftKey,
+		updatedAt,
+		data: restoreMessageDraftData(draftData),
+	};
 };
 
 export const deleteMessageDraft = (draftKey: string | null): void => {

From c9f8b73f7215cca42068bfb59a4c9527f13aec32 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 21:19:14 +0900
Subject: [PATCH 049/147] fix

---
 packages/client/src/components/TmsPostForm.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 20f59eb1dc8e..eff25383421d 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -102,7 +102,7 @@ onMounted(() => {
 			isEdit: true,
 		});
 
-		Draft.setDraft(draftId, {
+		bindProps.draft = Draft.setDraft(draftId, {
 			text: init.text ?? '',
 			useCw: init.cw != null,
 			cw: init.cw ?? '',
@@ -120,8 +120,6 @@ onMounted(() => {
 			channelId: init.channel?.id ?? null,
 			quoteId: null,
 		});
-
-		bindProps.draft = Draft.getDraft(draftId);
 	}
 
 	nextTick(() => showPostForm = true);

From 95e3e36744fb22928279cc24c34038b6b082796a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 21:50:37 +0900
Subject: [PATCH 050/147] tweak

---
 .../client/src/components/TmsPostForm.vue     | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index eff25383421d..810e8e8dc157 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -14,12 +14,13 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import * as Draft from '@/scripts/tms/drafts';
+import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
 import TmsPostFormCore from '@/components/TmsPostForm.core.vue';
 
 let showPostForm = $ref(false);
@@ -138,21 +139,30 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 
 	const reply = replyId ? os.api('notes/show', { noteId: replyId }).catch(() => null) : null;
 	const renote = renoteId ? os.api('notes/show', { noteId: renoteId }).catch(() => null) : null;
-	const channel = channelId ? os.api('channels/show', { channelId: channelId }).catch(() => null) : null;
+	const channel = channelId ? (os.api('channels/show', { channelId: channelId }) as Promise<Misskey.entities.Channel>).catch(() => null) : null;
 
-	os.promiseDialog(Promise.allSettled([reply, renote, channel]), null, null, i18n.ts.processing);
+	const showing = ref(true);
+	Promise.allSettled([reply, renote, channel]).then(() => {
+		showing.value = false;
+	});
+
+	os.popup(MkWaitingDialog, {
+		success: false,
+		showing,
+		text: i18n.ts.processing,
+	}, {}, 'closed');
 
 	bindProps = {};
 
 	bindProps.reply = await reply;
 	bindProps.renote = await renote;
-	bindProps.channel = (await channel) as Misskey.entities.Channel | null;
+	bindProps.channel = await channel;
 
 	bindProps.draft = Draft.setDraft(draft.id, {
 		...draft.data,
-		replyId: (await reply)?.id ?? null,
-		renoteId: (await renote)?.id ?? null,
-		channelId: (await channel)?.id ?? null,
+		replyId: bindProps.reply?.id ?? null,
+		renoteId: bindProps.renote?.id ?? null,
+		channelId: bindProps.channel?.id ?? null,
 	});
 
 	nextTick(() => showPostForm = true);

From d884c793c0ad15c7a13ab0f1f50b03de2343df8d Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 22:47:20 +0900
Subject: [PATCH 051/147] fix

---
 packages/client/src/components/MkPopupMenu.vue | 14 ++++++++++----
 packages/client/src/os.ts                      | 10 ++++++----
 packages/client/src/scripts/select-file.ts     |  6 ++++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index f04c7f561814..1244b1c45428 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -1,6 +1,6 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="done(null)" @closed="emit('closed')">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="done"/>
 </MkModal>
 </template>
 
@@ -15,14 +15,20 @@ defineProps<{
 	align?: 'center' | string;
 	width?: number;
 	viaKeyboard?: boolean;
-	src?: any;
+	src?: HTMLElement;
 }>();
 
 const emit = defineEmits<{
+	(ev: 'done', result: unknown): void;
 	(ev: 'closed'): void;
 }>();
 
-let modal = $ref<InstanceType<typeof MkModal>>();
+const modal = $ref<InstanceType<typeof MkModal>>();
+
+const done = (result: unknown): void => {
+	modal?.close();
+	emit('done', result);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index a6a32f47c3f5..039497cc81e0 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -535,8 +535,8 @@ export const popupMenu = (items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 	align?: string;
 	width?: number;
 	viaKeyboard?: boolean;
-}): Promise<void> => {
-	return new Promise((resolve, _reject) => {
+}): Promise<{ canceled: boolean }> => {
+	return new Promise(resolve => {
 		let dispose: () => void;
 		popup(defineAsyncComponent(() => import('@/components/MkPopupMenu.vue')), {
 			items,
@@ -545,8 +545,10 @@ export const popupMenu = (items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 			align: options?.align,
 			viaKeyboard: options?.viaKeyboard,
 		}, {
-			closed: () => {
-				resolve();
+			done: (result: unknown) => {
+				resolve({
+					canceled: !result,
+				});
 				dispose();
 			},
 		}).then(res => {
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index b1cc6ecc4e5f..f47553101c22 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -8,7 +8,7 @@ import { defaultStore } from '@/store';
 import { uploadFile } from '@/scripts/upload';
 
 function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
-	return new Promise((res, rej) => {
+	return new Promise(async (res, rej) => {
 		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
 
 		const chooseFileFromPc = () => {
@@ -72,7 +72,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			});
 		};
 
-		os.popupMenu([label ? {
+		const { canceled } = await os.popupMenu([label ? {
 			text: label,
 			type: 'label',
 		} : undefined, {
@@ -92,6 +92,8 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			icon: 'ti ti-link',
 			action: chooseFileFromUrl,
 		}], src);
+
+		if (canceled) rej();
 	});
 }
 

From 086fedac98324efb8b55f60ff455171a2f6da461 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 23:19:21 +0900
Subject: [PATCH 052/147] tweak

---
 .../src/components/TmsPostForm.core.vue       |  6 +++
 .../client/src/components/TmsPostForm.vue     | 52 ++++++++++++++-----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 749951abf9b1..12ec55282c76 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -192,6 +192,12 @@ const fetchingWrapper = <T>(prom: Promise<T>): Promise<T> => {
 	return prom;
 };
 const fetching = $computed<boolean>(() => fetchingList.length !== 0);
+
+defineExpose({
+	isFetching(): boolean {
+		return fetching;
+	},
+});
 //#endregion
 
 //#region params, flags
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 810e8e8dc157..e56c9c8fe635 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -1,14 +1,15 @@
 <template>
 <TmsPostFormCore
 	v-if="showPostForm"
+	ref="form"
 	v-bind="bindProps"
 	:instant="props.instant"
 	:fixed="props.fixed"
 	:autofocus="props.autofocus"
 	:freeze-after-posted="props.freezeAfterPosted"
-	@posted="emit('posted')"
-	@cancel="emit('cancel')"
-	@esc="emit('esc')"
+	@posted="posted"
+	@cancel="cancel"
+	@esc="esc"
 	@reopen="reopen"
 />
 </template>
@@ -23,8 +24,6 @@ import * as Draft from '@/scripts/tms/drafts';
 import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
 import TmsPostFormCore from '@/components/TmsPostForm.core.vue';
 
-let showPostForm = $ref(false);
-
 const props = withDefaults(defineProps<{
 	reply?: Misskey.entities.Note | null;
 	renote?: Misskey.entities.Note | null;
@@ -92,7 +91,21 @@ let bindProps = $ref<{
 	initialVisibleUsers: props.initialVisibleUsers,
 });
 
+const form = ref<InstanceType<typeof TmsPostFormCore> | null>(null);
+
+const showPostForm = ref(false);
+
+const shown = (): void => {
+	showPostForm.value = true;
+};
+
+const hidden = (): void => {
+	showPostForm.value = false;
+};
+
 onMounted(() => {
+	hidden();
+
 	if (props.initialNote) {
 		const init = props.initialNote as Misskey.entities.Note & {
 			channel?: Misskey.entities.Channel;
@@ -123,15 +136,32 @@ onMounted(() => {
 		});
 	}
 
-	nextTick(() => showPostForm = true);
+	nextTick(shown);
 });
 
+const posted = (): void => {
+	emit('posted');
+};
+
+const cancel = (): void => {
+	if (form.value?.isFetching()) return;
+	emit('cancel');
+};
+
+const esc = (): void => {
+	if (form.value?.isFetching()) return;
+	emit('esc');
+};
+
 const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
-	showPostForm = false;
+	if (form.value?.isFetching()) return;
+
+	hidden();
+
+	bindProps = {};
 
 	if (!draft) {
-		bindProps = {};
-		nextTick(() => showPostForm = true);
+		nextTick(shown);
 		return;
 	}
 
@@ -152,8 +182,6 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 		text: i18n.ts.processing,
 	}, {}, 'closed');
 
-	bindProps = {};
-
 	bindProps.reply = await reply;
 	bindProps.renote = await renote;
 	bindProps.channel = await channel;
@@ -165,6 +193,6 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 		channelId: bindProps.channel?.id ?? null,
 	});
 
-	nextTick(() => showPostForm = true);
+	nextTick(shown);
 };
 </script>

From d141c9103d11e1863828947fbdcedd644d0c0fb5 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 23:31:13 +0900
Subject: [PATCH 053/147] tweak

---
 .../client/src/components/MkPostFormDialog.vue   |  9 ++++++++-
 .../client/src/components/TmsPostForm.core.vue   |  6 +++---
 packages/client/src/components/TmsPostForm.vue   | 16 +++++++++++-----
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index 3775a70dbcf9..c1a38b0ca4cd 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" @click="modal?.close()" @closed="onModalClosed()">
+<MkModal ref="modal" :prefer-type="'dialog'" @click="onClick" @closed="onModalClosed()">
 	<TmsPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
 </MkModal>
 </template>
@@ -34,6 +34,13 @@ const emit = defineEmits<{
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
 const form = $shallowRef<InstanceType<typeof TmsPostForm>>();
 
+const isFetching = (): boolean => !!form?.isFetching();
+
+const onClick = (): void => {
+	if (isFetching()) return;
+	modal?.close();
+};
+
 const onPosted = (): void => {
 	modal?.close({
 		useSendAnimation: true,
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 12ec55282c76..4135150b65a7 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -193,10 +193,10 @@ const fetchingWrapper = <T>(prom: Promise<T>): Promise<T> => {
 };
 const fetching = $computed<boolean>(() => fetchingList.length !== 0);
 
+const isFetching = (): boolean => fetching;
+
 defineExpose({
-	isFetching(): boolean {
-		return fetching;
-	},
+	isFetching,
 });
 //#endregion
 
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index e56c9c8fe635..51430de84141 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, onMounted } from 'vue';
+import { ref, shallowRef, nextTick, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -91,7 +91,13 @@ let bindProps = $ref<{
 	initialVisibleUsers: props.initialVisibleUsers,
 });
 
-const form = ref<InstanceType<typeof TmsPostFormCore> | null>(null);
+const form = shallowRef<InstanceType<typeof TmsPostFormCore> | null>(null);
+
+const isFetching = (): boolean => !!form.value?.isFetching();
+
+defineExpose({
+	isFetching,
+});
 
 const showPostForm = ref(false);
 
@@ -144,17 +150,17 @@ const posted = (): void => {
 };
 
 const cancel = (): void => {
-	if (form.value?.isFetching()) return;
+	if (isFetching()) return;
 	emit('cancel');
 };
 
 const esc = (): void => {
-	if (form.value?.isFetching()) return;
+	if (isFetching()) return;
 	emit('esc');
 };
 
 const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
-	if (form.value?.isFetching()) return;
+	if (isFetching()) return;
 
 	hidden();
 

From 2298bb2d8fc8a99a53b37cc138655d7326831a15 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 16 Apr 2023 23:46:17 +0900
Subject: [PATCH 054/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 4135150b65a7..7ae35c064bef 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -525,21 +525,19 @@ const removeVisibleUser = (user: Misskey.entities.User): void => {
 
 //#region files
 // const upload = async (file: File): Promise<void> => {
-// 	const fileIndex = files.length;
 // 	return await fetchingWrapper(
 // 		uploadFile(file, defaultStore.state.uploadFolder)
 // 			.then(driveFile => {
-// 				files.splice(fileIndex, 0, driveFile);
+// 				files.push(driveFile);
 // 			}),
 // 	);
 // };
 
 const uploads = async (fileList: File[]): Promise<void> => {
-	const fileIndex = files.length;
 	return await fetchingWrapper(
 		Promise.all(fileList.map(file => uploadFile(file, defaultStore.state.uploadFolder)))
 			.then(driveFiles => {
-				files.splice(fileIndex, 0, ...driveFiles);
+				files.push(...driveFiles);
 			}),
 	);
 };

From 6318a45d2bc2a4e777a7fdd5c24469f35eef5007 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 04:25:26 +0900
Subject: [PATCH 055/147] refactor: trimming trailing spaces

---
 packages/client/src/components/MkFileListForAdmin.vue     | 2 +-
 packages/client/src/components/MkMediaVideo.vue           | 4 ++--
 packages/client/src/components/MkModalPageWindow.vue      | 1 -
 packages/client/src/components/MkNote.vue                 | 2 +-
 .../client/src/components/MkReactionsViewer.details.vue   | 2 +-
 packages/client/src/components/MkSubNoteContent.vue       | 2 +-
 packages/client/src/components/MkSuperMenu.vue            | 2 +-
 packages/client/src/components/MkUserInfo.vue             | 4 ++--
 packages/client/src/components/TmsPostForm.core.vue       | 2 +-
 packages/client/src/directives/adaptive-border.ts         | 2 +-
 packages/client/src/directives/panel.ts                   | 2 +-
 packages/client/src/nirax.ts                              | 6 +++---
 packages/client/src/pages/about.emojis.vue                | 2 +-
 packages/client/src/pages/admin/emojis.vue                | 4 ++--
 packages/client/src/pages/admin/index.vue                 | 2 +-
 packages/client/src/pages/admin/integrations.discord.vue  | 2 +-
 packages/client/src/pages/admin/integrations.github.vue   | 2 +-
 packages/client/src/pages/admin/integrations.twitter.vue  | 2 +-
 packages/client/src/pages/admin/users.vue                 | 2 +-
 packages/client/src/pages/channel.vue                     | 4 ++--
 packages/client/src/pages/clip.vue                        | 2 +-
 packages/client/src/pages/follow.vue                      | 2 +-
 packages/client/src/pages/instance-info.vue               | 2 +-
 .../client/src/pages/messaging/messaging-room.message.vue | 2 +-
 packages/client/src/pages/messaging/messaging-room.vue    | 2 +-
 packages/client/src/pages/my-groups/index.vue             | 2 +-
 packages/client/src/pages/registry.keys.vue               | 2 +-
 packages/client/src/pages/registry.value.vue              | 2 +-
 packages/client/src/pages/reset-password.vue              | 2 +-
 packages/client/src/pages/search.vue                      | 2 +-
 .../client/src/pages/settings/preferences-backups.vue     | 4 ++--
 packages/client/src/pages/settings/privacy.vue            | 4 ++--
 packages/client/src/pages/settings/security.vue           | 4 ++--
 packages/client/src/pages/settings/taiyme-services.vue    | 2 +-
 packages/client/src/pages/settings/webhook.vue            | 2 +-
 packages/client/src/scripts/initialize-sw.ts              | 4 ++--
 packages/client/src/scripts/touch.ts                      | 2 +-
 packages/client/src/scripts/use-note-capture.ts           | 4 ++--
 packages/client/src/style.scss                            | 8 ++++----
 packages/client/src/ui/classic.header.vue                 | 2 +-
 packages/client/src/ui/classic.vue                        | 2 +-
 packages/client/src/ui/deck.vue                           | 2 +-
 packages/client/src/ui/visitor/a.vue                      | 7 +++----
 43 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index bd3680b7116f..e036ffbdafbc 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -92,7 +92,7 @@ const props = defineProps<{
 		> .file {
 			position: relative;
 			aspect-ratio: 1;
-		
+
 			> .thumbnail {
 				width: 100%;
 				height: 100%;
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index df0bf84116fc..7cbc3d73f286 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -14,8 +14,8 @@
 		controls
 		@contextmenu.stop
 	>
-		<source 
-			:src="video.url" 
+		<source
+			:src="video.url"
 			:type="video.type"
 		>
 	</video>
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 88007bc8ca3b..4ab6c3ca60b1 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -45,7 +45,6 @@ defineEmits<{
 const router = new Router(routes, props.initialPath);
 
 router.addListener('push', ctx => {
-	
 });
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 0b3675a14b70..536eb55da56e 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -191,7 +191,7 @@ const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : n
 const { collapseNote, collapseNoteHeight, collapseNoteFile, collapseNoteUrl, collapseNotePoll } = tmsStore.state;
 const isLong = $computed(() => {
 	return collapseNote && !!(
-		appearNote.cw == null && 
+		appearNote.cw == null &&
 		appearNote.text != null && (
 			// textElHeight: null の場合は文字数で判定する
 			(!!collapseNoteHeight && (textElHeight == null ? appearNote.text.length > 500 : textElHeight >= collapseNoteHeight)) ||
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index c0f2b5d16358..4f53302975e7 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -60,7 +60,7 @@ const getReactionName = (reaction: string): string => {
 		}
 
 		> .mk-emoji-fallback {
-			display: none;				
+			display: none;
 		}
 
 		> .name {
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index f424244ad1a8..af83d1368600 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -51,7 +51,7 @@ onMounted(() => {
 const { collapseNote, collapseNoteHeight } = tmsStore.state;
 const isLong = $computed(() => {
 	return collapseNote && !!(
-		props.note.cw == null && 
+		props.note.cw == null &&
 		props.note.text != null && (
 			// textElHeight: null の場合は文字数で判定する
 			(!!collapseNoteHeight && (textElHeight == null ? props.note.text.length > 500 : textElHeight >= collapseNoteHeight))
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index a23cfd568135..753a38352402 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -55,7 +55,7 @@ export default defineComponent({
 			margin: 0 0 8px 0;
 			font-size: 0.9em;
 		}
-	
+
 		> .items {
 			> .item {
 				display: flex;
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 1855ae421820..d3705c3d8dde 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -82,7 +82,7 @@ defineProps<{
 			opacity: 0.7;
 		}
 	}
-	
+
 	> .followed {
 		position: absolute;
 		top: 12px;
@@ -93,7 +93,7 @@ defineProps<{
 		font-size: 0.7em;
 		border-radius: 6px;
 	}
-	
+
 	> .description {
 		padding: 16px;
 		font-size: 0.8em;
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 7ae35c064bef..1aba0efee135 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -461,7 +461,7 @@ onMounted(() => {
 	}
 
 	nextTick(() => {
-		if (!props.instant && !props.fixed) {	
+		if (!props.instant && !props.fixed) {
 			const _draft = draft ?? Draft.getDraft(draftKey);
 			if (_draft) {
 				text = _draft.data.text;
diff --git a/packages/client/src/directives/adaptive-border.ts b/packages/client/src/directives/adaptive-border.ts
index 619c9f0b6d50..5bd04024beef 100644
--- a/packages/client/src/directives/adaptive-border.ts
+++ b/packages/client/src/directives/adaptive-border.ts
@@ -10,7 +10,7 @@ export default {
 				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
 			}
 		};
-	
+
 		const parentBg = getBgColor(src.parentElement);
 
 		const myBg = window.getComputedStyle(src).backgroundColor;
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
index d31dc41ed416..8727183d3652 100644
--- a/packages/client/src/directives/panel.ts
+++ b/packages/client/src/directives/panel.ts
@@ -10,7 +10,7 @@ export default {
 				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
 			}
 		};
-	
+
 		const parentBg = getBgColor(src.parentElement);
 
 		const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel');
diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
index 3089a65610af..67e9f810036d 100644
--- a/packages/client/src/nirax.ts
+++ b/packages/client/src/nirax.ts
@@ -159,11 +159,11 @@ export class Router extends EventEmitter<{
 					if (route.hash != null && hash != null) {
 						props.set(route.hash, safeURIDecode(hash));
 					}
-	
+
 					if (route.query != null && queryString != null) {
 						const queryObject = [...new URLSearchParams(queryString).entries()]
 							.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {});
-	
+
 						for (const q in route.query) {
 							const as = route.query[q];
 							if (queryObject[q]) {
@@ -171,7 +171,7 @@ export class Router extends EventEmitter<{
 							}
 						}
 					}
-	
+
 					return {
 						route,
 						props,
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index de00eb179496..bc6eb567b885 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -18,7 +18,7 @@
 			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
 	</MkFolder>
-	
+
 	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
 		<template #header>{{ category || $ts.other }}</template>
 		<div class="zuvgdzyt">
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index b21ba93c7567..ce8f5fa20e3e 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -300,13 +300,13 @@ definePageMetadata(computed(() => ({
 		.empty {
 			margin: var(--margin);
 		}
-		
+
 		.ldhfsamy {
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 			grid-gap: 12px;
 			margin: var(--margin) 0;
-	
+
 			> .emoji {
 				display: flex;
 				align-items: center;
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 008444e0b745..058d91280acf 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -1,6 +1,6 @@
 <template>
 <div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || currentPage?.route.name == null" class="nav">	
+	<div v-if="!narrow || currentPage?.route.name == null" class="nav">
 		<MkSpacer :content-max="700" :margin-min="16">
 			<div class="lxpfedzu">
 				<div class="banner">
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
index 0a69c44c93f8..f5d6845694b1 100644
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -7,7 +7,7 @@
 
 		<template v-if="enableDiscordIntegration">
 			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
-		
+
 			<FormInput v-model="discordClientId" class="_formBlock">
 				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Client ID</template>
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
index 66419d589125..9c1e228f708f 100644
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -7,7 +7,7 @@
 
 		<template v-if="enableGithubIntegration">
 			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
-		
+
 			<FormInput v-model="githubClientId" class="_formBlock">
 				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Client ID</template>
diff --git a/packages/client/src/pages/admin/integrations.twitter.vue b/packages/client/src/pages/admin/integrations.twitter.vue
index 32b83d73dc2e..50fd72835bdf 100644
--- a/packages/client/src/pages/admin/integrations.twitter.vue
+++ b/packages/client/src/pages/admin/integrations.twitter.vue
@@ -7,7 +7,7 @@
 
 		<template v-if="enableTwitterIntegration">
 			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/tw/cb` }}</FormInfo>
-		
+
 			<FormInput v-model="twitterConsumerKey" class="_formBlock">
 				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Consumer Key</template>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index d466e2190743..20348d4313ff 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -154,7 +154,7 @@ definePageMetadata(computed(() => ({
 				}
 			}
 		}
-	
+
 		> .users {
 			margin-top: var(--margin);
 			display: grid;
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 4b628a24befd..2d5a26a30fc3 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -104,12 +104,12 @@ definePageMetadata(computed(() => channel ? {
 		color: #fff;
 		background: rgba(0, 0, 0, 0.5);
 		border-radius: 100%;
-		
+
 		> i {
 			vertical-align: middle;
 		}
 	}
-	
+
 	> .banner {
 		position: relative;
 		height: 200px;
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 974c6c712985..af3922babf34 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -48,7 +48,7 @@ watch(() => props.clipId, async () => {
 	});
 }, {
 	immediate: true,
-}); 
+});
 
 provide('currentClipPage', $$(clip));
 
diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
index 828246d67862..6fa4ca8964b3 100644
--- a/packages/client/src/pages/follow.vue
+++ b/packages/client/src/pages/follow.vue
@@ -20,7 +20,7 @@ async function follow(user): Promise<void> {
 		window.close();
 		return;
 	}
-	
+
 	os.apiWithDialog('following/create', {
 		userId: user.id,
 	});
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 1716b782afb6..e934db44cd9f 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -53,7 +53,7 @@
 					<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
 				</MkKeyValue>
 			</FormSection>
-	
+
 			<FormSection>
 				<MkKeyValue oneline style="margin: 1em 0;">
 					<template #key>Following (Pub)</template>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index e7cf54a06644..5099e289b14c 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -263,7 +263,7 @@ function del(): void {
 				::selection {
 					color: var(--accent);
 					background-color: #fff;
-				} 
+				}
 
 				&.noText {
 					background: transparent;
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 584942d46626..c34ec56ba28b 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -100,7 +100,7 @@ async function fetch() {
 		const acct = Acct.parse(props.userAcct);
 		user = await os.api('users/show', { username: acct.username, host: acct.host || undefined });
 		group = null;
-		
+
 		pagination = {
 			endpoint: 'messaging/messages',
 			limit: 20,
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index e35e4a757119..cb6f8af3b1fd 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -43,7 +43,7 @@
 	</MkSpacer>
 </MkStickyContainer>
 </template>
-	
+
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index d9e79f11d1f6..171c7bcde95c 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -12,7 +12,7 @@
 				<template #value>{{ scope.join('/') }}</template>
 			</MkKeyValue>
 		</FormSplit>
-		
+
 		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
 
 		<FormSection v-if="keys">
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index f7485c4fcd81..1091749ee17f 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -19,7 +19,7 @@
 					<template #value>{{ key }}</template>
 				</MkKeyValue>
 			</FormSplit>
-			
+
 			<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
 				<template #label>{{ i18n.ts.value }} (JSON)</template>
 			</FormTextarea>
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 8ec15f64253d..f06881f33ad5 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -7,7 +7,7 @@
 				<template #prefix><i class="ti ti-lock"></i></template>
 				<template #label>{{ i18n.ts.newPassword }}</template>
 			</FormInput>
-		
+
 			<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
 		</div>
 	</MkSpacer>
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 9b4049a81f5b..bfaf4c8560d6 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -155,7 +155,7 @@ const search = async (): Promise<void> => {
 			break;
 		}
 	}
-	
+
 	if (location.pathname === '/search') {
 		window.history.replaceState(null, '', `/search?q=${encodeURIComponent(query)}&type=${searchType}${searchType === 'user' ? `&origin=${searchOrigin}` : ''}`);
 	}
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index 66675af3b829..bd641416e5ea 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -141,7 +141,7 @@ function validate(profile: unknown): void {
 
 	if (!profile.name) throw new Error('Missing required prop: name');
 	if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
-	
+
 	// Check if createdAt and updatedAt is Date
 	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
 	if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt).getTime())) throw new Error('createdAt is falsy or not Date');
@@ -270,7 +270,7 @@ async function applyProfile(id: string): Promise<void> {
 			defaultStore.set(key, settings.hot[key]);
 		}
 	}
-	
+
 	// coldDeviceStorage
 	for (const key of coldDeviceStorageSaveKeys) {
 		if (settings.cold[key] !== undefined) {
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 4063795588df..b51c086f408c 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -7,7 +7,7 @@
 		{{ i18n.ts.makeReactionsPublic }}
 		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
 	</FormSwitch>
-		
+
 	<FormSelect v-model="ffVisibility" class="_formBlock" @update:model-value="save()">
 		<template #label>{{ i18n.ts.ffVisibility }}</template>
 		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
@@ -15,7 +15,7 @@
 		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
 		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
 	</FormSelect>
-		
+
 	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:model-value="save()">
 		{{ i18n.ts.hideOnlineStatus }}
 		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 33f49eb3ef0c..c1c26d01158a 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -9,7 +9,7 @@
 		<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
 		<X2fa/>
 	</FormSection>
-	
+
 	<FormSection>
 		<template #label>{{ i18n.ts.signinHistory }}</template>
 		<MkPagination :pagination="pagination" disable-auto-load>
@@ -78,7 +78,7 @@ async function change() {
 		});
 		return;
 	}
-	
+
 	os.apiWithDialog('i/change-password', {
 		currentPassword,
 		newPassword,
diff --git a/packages/client/src/pages/settings/taiyme-services.vue b/packages/client/src/pages/settings/taiyme-services.vue
index fbd135870e5f..081d0fee30ca 100644
--- a/packages/client/src/pages/settings/taiyme-services.vue
+++ b/packages/client/src/pages/settings/taiyme-services.vue
@@ -337,7 +337,7 @@ const save = async (): Promise<void> => {
 			text: errors.join('\n'),
 		});
 	}
-	
+
 	type Store = typeof tmsStore.state;
 	type StoreKeys = keyof Store;
 
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index 6afb71b9edcd..a26a931110f0 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -5,7 +5,7 @@
 			Create webhook
 		</FormLink>
 	</FormSection>
-	
+
 	<FormSection>
 		<MkPagination :pagination="pagination">
 			<template #default="{items}">
diff --git a/packages/client/src/scripts/initialize-sw.ts b/packages/client/src/scripts/initialize-sw.ts
index 7bacfbdf00cc..058ac72a1fca 100644
--- a/packages/client/src/scripts/initialize-sw.ts
+++ b/packages/client/src/scripts/initialize-sw.ts
@@ -23,7 +23,7 @@ export async function initializeSw() {
 				function encode(buffer: ArrayBuffer | null) {
 					return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
 				}
-		
+
 				// Register
 				api('sw/register', {
 					endpoint: subscription.endpoint,
@@ -37,7 +37,7 @@ export async function initializeSw() {
 				if (err.name === 'NotAllowedError') {
 					return;
 				}
-		
+
 				// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
 				// 既に存在していることが原因でエラーになった可能性があるので、
 				// そのサブスクリプションを解除しておく
diff --git a/packages/client/src/scripts/touch.ts b/packages/client/src/scripts/touch.ts
index 87024edcc00a..775c37d4702f 100644
--- a/packages/client/src/scripts/touch.ts
+++ b/packages/client/src/scripts/touch.ts
@@ -33,7 +33,7 @@ if (isTouchSupported) {
 
 		dmcHandler();
 	}, { passive: true });
-	
+
 	window.addEventListener('touchend', () => {
 		// 子要素のtouchstartイベントでstopPropagation()が呼ばれると親要素に伝搬されずタッチされたと判定されないため、
 		// touchendイベントでもtouchstartイベントと同様にtrueにする
diff --git a/packages/client/src/scripts/use-note-capture.ts b/packages/client/src/scripts/use-note-capture.ts
index 389ee1256132..e939a380a6a1 100644
--- a/packages/client/src/scripts/use-note-capture.ts
+++ b/packages/client/src/scripts/use-note-capture.ts
@@ -96,12 +96,12 @@ export function useNoteCapture(props: {
 	function onStreamConnected() {
 		capture(false);
 	}
-	
+
 	capture(true);
 	if (connection) {
 		connection.on('_connected_', onStreamConnected);
 	}
-	
+
 	onUnmounted(() => {
 		decapture(true);
 		if (connection) {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index ed8679e3a510..c7ab36034de3 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -7,7 +7,7 @@
 
 	--margin: var(--marginFull);
 	--minBottomSpacing: 0px;
-	
+
 	@media (max-width: 500px) {
 		--margin: var(--marginHalf);
 		--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
@@ -19,7 +19,7 @@
 ::selection {
 	color: #fff;
 	background-color: var(--accent);
-} 
+}
 
 html {
 	touch-action: manipulation;
@@ -365,11 +365,11 @@ hr {
 	._section:not(:empty) {
 		box-sizing: border-box;
 		padding: var(--root-margin, 32px);
-	
+
 		@media (max-width: 500px) {
 			--root-margin: 10px;
 		}
-	
+
 		& + ._section:not(:empty) {
 			border-top: solid 0.5px var(--divider);
 		}
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 397096def5c6..16bf2d4d6796 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -188,7 +188,7 @@ export default defineComponent({
 
 			> .post {
 				display: inline-block;
-			
+
 				> .button {
 					width: 40px;
 					height: 40px;
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 3ba3ca2fee91..19be5f841de1 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -217,7 +217,7 @@ onMounted(() => {
 
 		&.fullView {
 			margin: 0;
-		
+
 			> .sidebar {
 				display: none;
 			}
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index b8a652861401..303747956257 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -394,7 +394,7 @@ async function deleteProfile() {
 			&:active {
 				background: var(--X2);
 			}
-			
+
 			&.post {
 				background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 				color: var(--fgOnAccent);
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 6dd8a2a40995..238fb96d024a 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -148,7 +148,7 @@ export default defineComponent({
 			* {
 				color: #fff;
 			}
-					
+
 			> h1 {
 				margin: 0;
 				padding: 96px 32px 0 32px;
@@ -170,7 +170,7 @@ export default defineComponent({
 
 			> .action {
 				padding-bottom: 64px;
-				
+
 				> button {
 					display: inline-block;
 					padding: 10px 20px;
@@ -211,9 +211,8 @@ export default defineComponent({
 			}
 
 			> header {
-				
 			}
-					
+
 			> h1 {
 				margin: 0;
 				padding: 32px;

From 4ae2ad561a05619f60a1ff6192fe0d22c0f53ece Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 04:28:56 +0900
Subject: [PATCH 056/147] test(frontend/router): history api

---
 .../client/src/components/MkMediaList.vue     |  9 ++--
 packages/client/src/components/MkModal.vue    | 15 ++----
 packages/client/src/init.ts                   |  6 ---
 packages/client/src/router.ts                 | 54 +++++++++++++++++--
 packages/client/src/scripts/tms/url-hash.ts   | 22 --------
 packages/client/src/ui/universal.vue          | 29 ++--------
 6 files changed, 63 insertions(+), 72 deletions(-)
 delete mode 100644 packages/client/src/scripts/tms/url-hash.ts

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 8e310efdcb32..625067781f8e 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -21,8 +21,9 @@ import 'photoswipe/style.css';
 import XBanner from '@/components/MkMediaBanner.vue';
 import XImage from '@/components/MkMediaImage.vue';
 import XVideo from '@/components/MkMediaVideo.vue';
-import * as os from '@/os';
+// import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
+import { setHistoryBackHandler } from '@/router';
 
 const props = defineProps<{
 	mediaList: misskey.entities.DriveFile[];
@@ -30,7 +31,7 @@ const props = defineProps<{
 }>();
 
 const gallery = ref(null);
-const pswpZIndex = os.claimZIndex('middle');
+// const pswpZIndex = os.claimZIndex('middle');
 const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
 
 onMounted(() => {
@@ -113,8 +114,8 @@ onMounted(() => {
 	});
 
 	lightbox.init();
-	
-	window.addEventListener('popstate', () => {
+
+	setHistoryBackHandler(() => {
 		if (lightbox.pswp && lightbox.pswp.isOpen === true) {
 			lightbox.pswp.close();
 			return;
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 0426dfdacaf9..828d05d27df7 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -40,7 +40,7 @@ import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
 import { deviceKind } from '@/scripts/device-kind';
-import { pushHash, trimHash } from '@/scripts/tms/url-hash';
+import { setHistoryBackHandler } from '@/router';
 
 const getFixedContainer = (el: HTMLElement | null): HTMLElement | null => {
 	if (el == null || el.tagName === 'BODY') return null;
@@ -254,14 +254,9 @@ const onOpened = (): void => {
 	emit('opened');
 
 	if (type !== 'popup') {
-		window.addEventListener('popstate', () => {
-			if (!window.location.hash.endsWith(type) && !window.location.hash) {
-				close();
-				return;
-			}
+		setHistoryBackHandler(() => {
+			close();
 		});
-
-		history.pushState(null, '', pushHash(window.location.hash, type));
 	}
 
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
@@ -286,10 +281,6 @@ const close = (opts: { useSendAnimation?: boolean } = {}): void => {
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing = false;
 
-	if (type !== 'popup' && window.location.hash.endsWith(type)) {
-		trimHash();
-	}
-
 	emit('close');
 };
 
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 6a4d6d3fee75..b7a3ede3b39a 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -38,17 +38,11 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
-import { trimHash } from '@/scripts/tms/url-hash';
 import { mainRouter } from '@/router';
 
 (async (): Promise<void> => {
 	console.info(`Misskey v${version}`);
 
-	const [{ type: entryType }] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
-	if (entryType === 'reload') {
-		trimHash();
-	}
-
 	if (_DEV_) {
 		console.warn('Development mode!!!');
 
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 6c19c455ec59..55793e4270c1 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -1,4 +1,5 @@
 import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
+import { v4 as uuid } from 'uuid';
 import { Router } from '@/nirax';
 import { $i, iAmModerator } from '@/account';
 import MkLoading from '@/pages/_loading_.vue';
@@ -470,7 +471,43 @@ export const routes = [{
 
 export const mainRouter = new Router(routes, location.pathname + location.search + location.hash);
 
-window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
+type HistoryState = {
+	key: string | null;
+	historyId: string | null;
+	count: number;
+}
+
+const getHistoryState = (_state?: unknown): HistoryState => {
+	const state = typeof (_state ?? window.history.state) === 'object'
+		? (_state ?? window.history.state) as Partial<HistoryState>
+		: {};
+
+	return {
+		key: state.key ?? null,
+		historyId: state.historyId ?? null,
+		count: state.count ?? 0,
+	};
+};
+
+const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
+	const state = getHistoryState();
+	return {
+		key: newState.key ?? state.key,
+		historyId: newState.historyId ?? state.historyId,
+		count: state.count + 1,
+	};
+};
+
+const historyMap = new Map<string, () => void>();
+
+export const setHistoryBackHandler = (callback: () => void): void => {
+	const id = uuid();
+	historyMap.set(id, callback);
+	window.history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
+	window.history.pushState(mergeHistoryState({}), '', location.href);
+};
+
+window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), count: 0 }), '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -478,11 +515,12 @@ window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.hr
 const scrollPosStore = new Map<string, number>();
 
 window.setInterval(() => {
-	scrollPosStore.set(window.history.state?.key, window.scrollY);
+	const { key } = getHistoryState();
+	if (key) scrollPosStore.set(key, window.scrollY);
 }, 1000);
 
 mainRouter.addListener('push', ctx => {
-	window.history.pushState({ key: ctx.key }, '', ctx.path);
+	window.history.pushState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
 	const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
 	window.scroll({ top: scrollPos, behavior: 'instant' });
 	if (scrollPos !== 0) {
@@ -493,7 +531,7 @@ mainRouter.addListener('push', ctx => {
 });
 
 mainRouter.addListener('replace', ctx => {
-	window.history.replaceState({ key: ctx.key }, '', ctx.path);
+	window.history.replaceState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
 });
 
 mainRouter.addListener('same', () => {
@@ -501,6 +539,14 @@ mainRouter.addListener('same', () => {
 });
 
 window.addEventListener('popstate', (event) => {
+	const eventState = getHistoryState(event.state);
+	const isBack = getHistoryState().count > eventState.count;
+	if (isBack && eventState.historyId && historyMap.has(eventState.historyId)) {
+		historyMap.get(eventState.historyId)?.();
+		historyMap.delete(eventState.historyId);
+		window.history.go(-1);
+		return;
+	}
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
 	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
 	window.scroll({ top: scrollPos, behavior: 'instant' });
diff --git a/packages/client/src/scripts/tms/url-hash.ts b/packages/client/src/scripts/tms/url-hash.ts
deleted file mode 100644
index d3e66dbf4597..000000000000
--- a/packages/client/src/scripts/tms/url-hash.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const pushHash = (baseHash: string, additionalHash: string): string => {
-	if (baseHash.startsWith('#')) return `${baseHash}-${additionalHash}`;
-
-	return `#${additionalHash}`;
-};
-
-export const popHash = (hashStr: string): {
-	popped: string;
-	newHash: string;
-} => {
-	if (!new RegExp(/#(.*)$/).test(hashStr)) return { popped: '', newHash: '' };
-
-	const hashArray = hashStr.split('-');
-	const popped = hashArray.pop() || '';
-
-	return {
-		popped: popped,
-		newHash: hashArray.join('-'),
-	};
-};
-
-export const trimHash = (): void => history.pushState(null, '', `${location.pathname}${location.search}`);
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index bca8ca2dabe6..846c6f7bdba0 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -59,11 +59,10 @@ import { defaultStore } from '@/store';
 import { navbarItemDef } from '@/navbar';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
-import { mainRouter } from '@/router';
+import { mainRouter, setHistoryBackHandler } from '@/router';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { disableContextmenu } from '@/scripts/touch';
-import { pushHash, trimHash } from '@/scripts/tms/url-hash';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
@@ -139,44 +138,26 @@ onMounted(() => {
 });
 
 const openWidgets = (): void => {
-	window.addEventListener('popstate', () => {
-		if (!window.location.hash.endsWith('widgets')) {
-			widgetsShowing = false;
-			return;
-		}
+	setHistoryBackHandler(() => {
+		widgetsShowing = false;
 	});
 
 	widgetsShowing = true;
-
-	history.pushState(null, '', pushHash(window.location.hash, 'widgets'));
 };
 
 const closeWidgets = (): void => {
-	if (window.location.hash.endsWith('widgets')) {
-		trimHash();
-	}
-
 	widgetsShowing = false;
 };
 
 const openDrawerMenu = (): void => {
-	window.addEventListener('popstate', () => {
-		if (!window.location.hash.endsWith('menu')) {
-			drawerMenuShowing = false;
-			return;
-		}
+	setHistoryBackHandler(() => {
+		drawerMenuShowing = false;
 	});
 
 	drawerMenuShowing = true;
-
-	history.pushState(null, '', pushHash(window.location.hash, 'menu'));
 };
 
 const closeDrawerMenu = (): void => {
-	if (window.location.hash.endsWith('menu')) {
-		trimHash();
-	}
-
 	drawerMenuShowing = false;
 };
 

From 7c55698fb933b62c614cff0a5e527c814e3e8c67 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 04:40:44 +0900
Subject: [PATCH 057/147] hotfix: history state

---
 packages/client/src/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 55793e4270c1..752af773a8bd 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -479,7 +479,7 @@ type HistoryState = {
 
 const getHistoryState = (_state?: unknown): HistoryState => {
 	const state = typeof (_state ?? window.history.state) === 'object'
-		? (_state ?? window.history.state) as Partial<HistoryState>
+		? (_state ?? window.history.state ?? {}) as Partial<HistoryState>
 		: {};
 
 	return {

From d5b8c93082a98d0cd30821545674fb0046b60566 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 05:39:58 +0900
Subject: [PATCH 058/147] fix

---
 packages/client/src/router.ts | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 752af773a8bd..ca84bd80fc79 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -498,16 +498,20 @@ const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
 	};
 };
 
-const historyMap = new Map<string, () => void>();
+const histories = new Map<string, () => void>();
+let historyIds: string[] = [];
 
 export const setHistoryBackHandler = (callback: () => void): void => {
 	const id = uuid();
-	historyMap.set(id, callback);
-	window.history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
-	window.history.pushState(mergeHistoryState({}), '', location.href);
+
+	history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
+	history.pushState(mergeHistoryState({ historyId: id }), '', location.href);
+
+	histories.set(id, callback);
+	historyIds.push(id);
 };
 
-window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), count: 0 }), '', location.href);
+window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null, count: 0 }), '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -539,14 +543,18 @@ mainRouter.addListener('same', () => {
 });
 
 window.addEventListener('popstate', (event) => {
-	const eventState = getHistoryState(event.state);
-	const isBack = getHistoryState().count > eventState.count;
-	if (isBack && eventState.historyId && historyMap.has(eventState.historyId)) {
-		historyMap.get(eventState.historyId)?.();
-		historyMap.delete(eventState.historyId);
-		window.history.go(-1);
+	const { historyId } = getHistoryState(event.state);
+	if (historyId) {
+		if (histories.has(historyId)) {
+			histories.get(historyId)?.();
+			histories.delete(historyId);
+		}
+		historyIds = historyIds.filter(id => historyId !== id);
+		const newHistoryId = historyIds.pop() ?? null;
+		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '');
 		return;
 	}
+
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
 	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
 	window.scroll({ top: scrollPos, behavior: 'instant' });

From fc08fcde9c4769812c25956fcb4a3b1162897ab0 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 05:44:30 +0900
Subject: [PATCH 059/147] fix

---
 packages/client/src/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index ca84bd80fc79..e21c85201ec6 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -552,7 +552,7 @@ window.addEventListener('popstate', (event) => {
 		historyIds = historyIds.filter(id => historyId !== id);
 		const newHistoryId = historyIds.pop() ?? null;
 		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '');
-		return;
+		history.back();
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From 1eb4a9b21deaeff6c8d311faf530d09d4b0b18a9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 05:51:31 +0900
Subject: [PATCH 060/147] fix

---
 packages/client/src/router.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index e21c85201ec6..e39b299e548a 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -544,15 +544,22 @@ mainRouter.addListener('same', () => {
 
 window.addEventListener('popstate', (event) => {
 	const { historyId } = getHistoryState(event.state);
+
 	if (historyId) {
-		if (histories.has(historyId)) {
+		const hasHistory = histories.has(historyId);
+		if (hasHistory) {
 			histories.get(historyId)?.();
 			histories.delete(historyId);
 		}
-		historyIds = historyIds.filter(id => historyId !== id);
+
+		historyIds = historyIds.filter(id => histories.has(id));
 		const newHistoryId = historyIds.pop() ?? null;
-		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '');
-		history.back();
+
+		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
+
+		if (hasHistory) {
+			history.back();
+		}
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From 33d16d82e06f9443212121ce1a502e893c3b75a6 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 06:01:18 +0900
Subject: [PATCH 061/147] fix

---
 packages/client/src/router.ts | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index e39b299e548a..ea833d0e4f98 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -546,19 +546,27 @@ window.addEventListener('popstate', (event) => {
 	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
-		const hasHistory = histories.has(historyId);
-		if (hasHistory) {
-			histories.get(historyId)?.();
-			histories.delete(historyId);
-		}
+		if (historyId === '_used_backward_') {
+			history.replaceState(mergeHistoryState({ historyId: '_used_forward_' }), '', location.href);
+			history.forward();
+		} else if (historyId === '_used_forward_') {
+			history.replaceState(mergeHistoryState({ historyId: '_used_backward_' }), '', location.href);
+			history.back();
+		} else {
+			const hasHistory = histories.has(historyId);
+			if (hasHistory) {
+				histories.get(historyId)?.();
+				histories.delete(historyId);
+			}
 
-		historyIds = historyIds.filter(id => histories.has(id));
-		const newHistoryId = historyIds.pop() ?? null;
+			historyIds = historyIds.filter(id => histories.has(id));
+			const newHistoryId = historyIds.pop() ?? '_used_backward_';
 
-		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
+			history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
 
-		if (hasHistory) {
-			history.back();
+			if (hasHistory) {
+				history.back();
+			}
 		}
 	}
 

From a21fdc605a61305945e60b599853ed940ffad9d6 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 06:10:55 +0900
Subject: [PATCH 062/147] test

---
 packages/client/src/router.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index ea833d0e4f98..80edcb990208 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -542,10 +542,16 @@ mainRouter.addListener('same', () => {
 	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
+let disableHistoryHandler = false;
+
 window.addEventListener('popstate', (event) => {
+	if (disableHistoryHandler) return;
+
 	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
+		disableHistoryHandler = true;
+
 		if (historyId === '_used_backward_') {
 			history.replaceState(mergeHistoryState({ historyId: '_used_forward_' }), '', location.href);
 			history.forward();
@@ -568,6 +574,8 @@ window.addEventListener('popstate', (event) => {
 				history.back();
 			}
 		}
+
+		disableHistoryHandler = false;
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From c777cb77f6972de05b3e6568ede8bde444878fdb Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 06:35:43 +0900
Subject: [PATCH 063/147] test

---
 packages/client/src/router.ts | 39 ++++++++++++++---------------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 80edcb990208..1e8aa39b8acf 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -474,7 +474,6 @@ export const mainRouter = new Router(routes, location.pathname + location.search
 type HistoryState = {
 	key: string | null;
 	historyId: string | null;
-	count: number;
 }
 
 const getHistoryState = (_state?: unknown): HistoryState => {
@@ -485,7 +484,6 @@ const getHistoryState = (_state?: unknown): HistoryState => {
 	return {
 		key: state.key ?? null,
 		historyId: state.historyId ?? null,
-		count: state.count ?? 0,
 	};
 };
 
@@ -494,7 +492,6 @@ const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
 	return {
 		key: newState.key ?? state.key,
 		historyId: newState.historyId ?? state.historyId,
-		count: state.count + 1,
 	};
 };
 
@@ -504,14 +501,14 @@ let historyIds: string[] = [];
 export const setHistoryBackHandler = (callback: () => void): void => {
 	const id = uuid();
 
-	history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
-	history.pushState(mergeHistoryState({ historyId: id }), '', location.href);
+	window.history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
+	window.history.pushState(mergeHistoryState({ historyId: id }), '', location.href);
 
 	histories.set(id, callback);
 	historyIds.push(id);
 };
 
-window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null, count: 0 }), '', location.href);
+window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null }), '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -542,40 +539,34 @@ mainRouter.addListener('same', () => {
 	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
-let disableHistoryHandler = false;
+const actionedHistories = new Map<string, 'forward' | 'backward'>();
 
 window.addEventListener('popstate', (event) => {
-	if (disableHistoryHandler) return;
-
 	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
-		disableHistoryHandler = true;
+		const historyType = actionedHistories.get(historyId);
 
-		if (historyId === '_used_backward_') {
-			history.replaceState(mergeHistoryState({ historyId: '_used_forward_' }), '', location.href);
-			history.forward();
-		} else if (historyId === '_used_forward_') {
-			history.replaceState(mergeHistoryState({ historyId: '_used_backward_' }), '', location.href);
-			history.back();
+		if (historyType === 'forward') {
+			actionedHistories.set(historyId, 'backward');
+			window.history.forward();
+		} else if (historyType === 'backward') {
+			actionedHistories.set(historyId, 'forward');
+			window.history.back();
 		} else {
 			const hasHistory = histories.has(historyId);
 			if (hasHistory) {
 				histories.get(historyId)?.();
 				histories.delete(historyId);
+				actionedHistories.set(historyId, 'forward');
 			}
 
 			historyIds = historyIds.filter(id => histories.has(id));
-			const newHistoryId = historyIds.pop() ?? '_used_backward_';
-
-			history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
-
-			if (hasHistory) {
-				history.back();
+			const newHistoryId = historyIds.pop() ?? null;
+			if (newHistoryId) {
+				window.history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
 			}
 		}
-
-		disableHistoryHandler = false;
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From 9a39b64c6471cbbf5138abd94572d7cf1f816109 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 07:06:51 +0900
Subject: [PATCH 064/147] test

---
 packages/client/src/router.ts | 56 ++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 1e8aa39b8acf..9098458b8b47 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -474,6 +474,7 @@ export const mainRouter = new Router(routes, location.pathname + location.search
 type HistoryState = {
 	key: string | null;
 	historyId: string | null;
+	count: number;
 }
 
 const getHistoryState = (_state?: unknown): HistoryState => {
@@ -484,14 +485,16 @@ const getHistoryState = (_state?: unknown): HistoryState => {
 	return {
 		key: state.key ?? null,
 		historyId: state.historyId ?? null,
+		count: state.count ?? 0,
 	};
 };
 
-const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
+const mergeHistoryState = (newState: Partial<Omit<HistoryState, 'count'>>): HistoryState => {
 	const state = getHistoryState();
 	return {
 		key: newState.key ?? state.key,
 		historyId: newState.historyId ?? state.historyId,
+		count: state.count + 1,
 	};
 };
 
@@ -508,7 +511,11 @@ export const setHistoryBackHandler = (callback: () => void): void => {
 	historyIds.push(id);
 };
 
-window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null }), '', location.href);
+window.history.replaceState({
+	key: mainRouter.getCurrentKey(),
+	historyId: null,
+	count: 0,
+}, '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -539,28 +546,37 @@ mainRouter.addListener('same', () => {
 	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
-const actionedHistories = new Map<string, 'forward' | 'backward'>();
+const actionedHistoryIds: string[] = [];
+let prevHistoryState: HistoryState = getHistoryState(window.history.state);
 
 window.addEventListener('popstate', (event) => {
-	const { historyId } = getHistoryState(event.state);
+	const historyState = getHistoryState(event.state);
+	const { historyId } = historyState;
+
+	let disableRouterReplace = false;
 
 	if (historyId) {
-		const historyType = actionedHistories.get(historyId);
+		if (actionedHistoryIds.includes(historyId)) {
+			disableRouterReplace = true;
 
-		if (historyType === 'forward') {
-			actionedHistories.set(historyId, 'backward');
-			window.history.forward();
-		} else if (historyType === 'backward') {
-			actionedHistories.set(historyId, 'forward');
-			window.history.back();
+			if (prevHistoryState.count > historyState.count) {
+				// backward
+				console.log('[router]: backward');
+			} else if (prevHistoryState.count < historyState.count) {
+				// forward
+				console.log('[router]: forward');
+			} else {
+				// stay
+				console.log('[router]: stay');
+			}
 		} else {
 			const hasHistory = histories.has(historyId);
 			if (hasHistory) {
 				histories.get(historyId)?.();
 				histories.delete(historyId);
-				actionedHistories.set(historyId, 'forward');
+				actionedHistoryIds.push(historyId);
 			}
-
+	
 			historyIds = historyIds.filter(id => histories.has(id));
 			const newHistoryId = historyIds.pop() ?? null;
 			if (newHistoryId) {
@@ -569,12 +585,16 @@ window.addEventListener('popstate', (event) => {
 		}
 	}
 
-	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
-	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
-	window.scroll({ top: scrollPos, behavior: 'instant' });
-	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+	prevHistoryState = historyState;
+
+	if (!disableRouterReplace) {
+		mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
+		const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
 		window.scroll({ top: scrollPos, behavior: 'instant' });
-	}, 100);
+		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+			window.scroll({ top: scrollPos, behavior: 'instant' });
+		}, 100);
+	}
 });
 
 export function useRouter(): Router {

From c6641bc7a395e27cc789fc001ad373b52b44614c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 07:19:30 +0900
Subject: [PATCH 065/147] test

---
 packages/client/src/router.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 9098458b8b47..919a99559c90 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -553,12 +553,11 @@ window.addEventListener('popstate', (event) => {
 	const historyState = getHistoryState(event.state);
 	const { historyId } = historyState;
 
-	let disableRouterReplace = false;
+	console.log('[router/curState]', historyState);
+	console.log('[router/prevState]', prevHistoryState);
 
 	if (historyId) {
 		if (actionedHistoryIds.includes(historyId)) {
-			disableRouterReplace = true;
-
 			if (prevHistoryState.count > historyState.count) {
 				// backward
 				console.log('[router]: backward');
@@ -585,16 +584,16 @@ window.addEventListener('popstate', (event) => {
 		}
 	}
 
-	prevHistoryState = historyState;
-
-	if (!disableRouterReplace) {
-		mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
-		const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
+	if (historyState.key && historyState.key !== prevHistoryState.key) {
+		mainRouter.replace(location.pathname + location.search + location.hash, historyState.key, false);
+		const scrollPos = scrollPosStore.get(historyState.key) ?? 0;
 		window.scroll({ top: scrollPos, behavior: 'instant' });
 		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
 			window.scroll({ top: scrollPos, behavior: 'instant' });
 		}, 100);
 	}
+
+	prevHistoryState = historyState;
 });
 
 export function useRouter(): Router {

From e615a97b5c418bb1fa0810880871f466073e8de4 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 07:40:18 +0900
Subject: [PATCH 066/147] test

---
 packages/client/src/router.ts | 70 +++++++++++++++--------------------
 1 file changed, 29 insertions(+), 41 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 919a99559c90..761e543bb3f6 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -538,62 +538,50 @@ mainRouter.addListener('push', ctx => {
 	}
 });
 
-mainRouter.addListener('replace', ctx => {
-	window.history.replaceState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
-});
-
-mainRouter.addListener('same', () => {
-	window.scroll({ top: 0, behavior: 'smooth' });
-});
-
-const actionedHistoryIds: string[] = [];
-let prevHistoryState: HistoryState = getHistoryState(window.history.state);
+const actionedHistories = new Map<string, 'forward' | 'backward'>();
 
-window.addEventListener('popstate', (event) => {
-	const historyState = getHistoryState(event.state);
+mainRouter.addListener('replace', ctx => {
+	const historyState = getHistoryState(window.history.state);
 	const { historyId } = historyState;
 
-	console.log('[router/curState]', historyState);
-	console.log('[router/prevState]', prevHistoryState);
-
 	if (historyId) {
-		if (actionedHistoryIds.includes(historyId)) {
-			if (prevHistoryState.count > historyState.count) {
-				// backward
-				console.log('[router]: backward');
-			} else if (prevHistoryState.count < historyState.count) {
-				// forward
-				console.log('[router]: forward');
-			} else {
-				// stay
-				console.log('[router]: stay');
-			}
+		const historyType = actionedHistories.get(historyId);
+
+		if (historyType === 'forward') {
+			actionedHistories.set(historyId, 'backward');
+			window.history.forward();
+		} else if (historyType === 'backward') {
+			actionedHistories.set(historyId, 'forward');
+			window.history.back();
 		} else {
 			const hasHistory = histories.has(historyId);
 			if (hasHistory) {
 				histories.get(historyId)?.();
 				histories.delete(historyId);
-				actionedHistoryIds.push(historyId);
+				actionedHistories.set(historyId, 'forward');
 			}
-	
+
 			historyIds = historyIds.filter(id => histories.has(id));
-			const newHistoryId = historyIds.pop() ?? null;
-			if (newHistoryId) {
-				window.history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
-			}
+			if (hasHistory) window.history.back();
 		}
 	}
 
-	if (historyState.key && historyState.key !== prevHistoryState.key) {
-		mainRouter.replace(location.pathname + location.search + location.hash, historyState.key, false);
-		const scrollPos = scrollPosStore.get(historyState.key) ?? 0;
-		window.scroll({ top: scrollPos, behavior: 'instant' });
-		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-			window.scroll({ top: scrollPos, behavior: 'instant' });
-		}, 100);
-	}
+	window.history.replaceState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
+});
+
+mainRouter.addListener('same', () => {
+	window.scroll({ top: 0, behavior: 'smooth' });
+});
+
+window.addEventListener('popstate', (event) => {
+	const historyState = getHistoryState(event.state);
 
-	prevHistoryState = historyState;
+	mainRouter.replace(location.pathname + location.search + location.hash, historyState.key, false);
+	const scrollPos = historyState.key ? scrollPosStore.get(historyState.key) ?? 0 : 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+		window.scroll({ top: scrollPos, behavior: 'instant' });
+	}, 100);
 });
 
 export function useRouter(): Router {

From 0fecb8f2d9e0cb7546d9b82c34688362ae4ddc7e Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:01:42 +0900
Subject: [PATCH 067/147] Revert "test"

This reverts commit e615a97b5c418bb1fa0810880871f466073e8de4.
---
 packages/client/src/router.ts | 70 ++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 761e543bb3f6..919a99559c90 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -538,50 +538,62 @@ mainRouter.addListener('push', ctx => {
 	}
 });
 
-const actionedHistories = new Map<string, 'forward' | 'backward'>();
-
 mainRouter.addListener('replace', ctx => {
-	const historyState = getHistoryState(window.history.state);
+	window.history.replaceState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
+});
+
+mainRouter.addListener('same', () => {
+	window.scroll({ top: 0, behavior: 'smooth' });
+});
+
+const actionedHistoryIds: string[] = [];
+let prevHistoryState: HistoryState = getHistoryState(window.history.state);
+
+window.addEventListener('popstate', (event) => {
+	const historyState = getHistoryState(event.state);
 	const { historyId } = historyState;
 
-	if (historyId) {
-		const historyType = actionedHistories.get(historyId);
+	console.log('[router/curState]', historyState);
+	console.log('[router/prevState]', prevHistoryState);
 
-		if (historyType === 'forward') {
-			actionedHistories.set(historyId, 'backward');
-			window.history.forward();
-		} else if (historyType === 'backward') {
-			actionedHistories.set(historyId, 'forward');
-			window.history.back();
+	if (historyId) {
+		if (actionedHistoryIds.includes(historyId)) {
+			if (prevHistoryState.count > historyState.count) {
+				// backward
+				console.log('[router]: backward');
+			} else if (prevHistoryState.count < historyState.count) {
+				// forward
+				console.log('[router]: forward');
+			} else {
+				// stay
+				console.log('[router]: stay');
+			}
 		} else {
 			const hasHistory = histories.has(historyId);
 			if (hasHistory) {
 				histories.get(historyId)?.();
 				histories.delete(historyId);
-				actionedHistories.set(historyId, 'forward');
+				actionedHistoryIds.push(historyId);
 			}
-
+	
 			historyIds = historyIds.filter(id => histories.has(id));
-			if (hasHistory) window.history.back();
+			const newHistoryId = historyIds.pop() ?? null;
+			if (newHistoryId) {
+				window.history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
+			}
 		}
 	}
 
-	window.history.replaceState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
-});
-
-mainRouter.addListener('same', () => {
-	window.scroll({ top: 0, behavior: 'smooth' });
-});
-
-window.addEventListener('popstate', (event) => {
-	const historyState = getHistoryState(event.state);
-
-	mainRouter.replace(location.pathname + location.search + location.hash, historyState.key, false);
-	const scrollPos = historyState.key ? scrollPosStore.get(historyState.key) ?? 0 : 0;
-	window.scroll({ top: scrollPos, behavior: 'instant' });
-	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+	if (historyState.key && historyState.key !== prevHistoryState.key) {
+		mainRouter.replace(location.pathname + location.search + location.hash, historyState.key, false);
+		const scrollPos = scrollPosStore.get(historyState.key) ?? 0;
 		window.scroll({ top: scrollPos, behavior: 'instant' });
-	}, 100);
+		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+			window.scroll({ top: scrollPos, behavior: 'instant' });
+		}, 100);
+	}
+
+	prevHistoryState = historyState;
 });
 
 export function useRouter(): Router {

From d3a815bf211b66462131a2a063c57c4830da7691 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:01 +0900
Subject: [PATCH 068/147] Revert "test"

This reverts commit c6641bc7a395e27cc789fc001ad373b52b44614c.
---
 packages/client/src/router.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 919a99559c90..9098458b8b47 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -553,11 +553,12 @@ window.addEventListener('popstate', (event) => {
 	const historyState = getHistoryState(event.state);
 	const { historyId } = historyState;
 
-	console.log('[router/curState]', historyState);
-	console.log('[router/prevState]', prevHistoryState);
+	let disableRouterReplace = false;
 
 	if (historyId) {
 		if (actionedHistoryIds.includes(historyId)) {
+			disableRouterReplace = true;
+
 			if (prevHistoryState.count > historyState.count) {
 				// backward
 				console.log('[router]: backward');
@@ -584,16 +585,16 @@ window.addEventListener('popstate', (event) => {
 		}
 	}
 
-	if (historyState.key && historyState.key !== prevHistoryState.key) {
-		mainRouter.replace(location.pathname + location.search + location.hash, historyState.key, false);
-		const scrollPos = scrollPosStore.get(historyState.key) ?? 0;
+	prevHistoryState = historyState;
+
+	if (!disableRouterReplace) {
+		mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
+		const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
 		window.scroll({ top: scrollPos, behavior: 'instant' });
 		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
 			window.scroll({ top: scrollPos, behavior: 'instant' });
 		}, 100);
 	}
-
-	prevHistoryState = historyState;
 });
 
 export function useRouter(): Router {

From b95f49f05e62b0bc4886d48c1c3c2b097e6c7f22 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:14 +0900
Subject: [PATCH 069/147] Revert "test"

This reverts commit 9a39b64c6471cbbf5138abd94572d7cf1f816109.
---
 packages/client/src/router.ts | 56 +++++++++++------------------------
 1 file changed, 18 insertions(+), 38 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 9098458b8b47..1e8aa39b8acf 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -474,7 +474,6 @@ export const mainRouter = new Router(routes, location.pathname + location.search
 type HistoryState = {
 	key: string | null;
 	historyId: string | null;
-	count: number;
 }
 
 const getHistoryState = (_state?: unknown): HistoryState => {
@@ -485,16 +484,14 @@ const getHistoryState = (_state?: unknown): HistoryState => {
 	return {
 		key: state.key ?? null,
 		historyId: state.historyId ?? null,
-		count: state.count ?? 0,
 	};
 };
 
-const mergeHistoryState = (newState: Partial<Omit<HistoryState, 'count'>>): HistoryState => {
+const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
 	const state = getHistoryState();
 	return {
 		key: newState.key ?? state.key,
 		historyId: newState.historyId ?? state.historyId,
-		count: state.count + 1,
 	};
 };
 
@@ -511,11 +508,7 @@ export const setHistoryBackHandler = (callback: () => void): void => {
 	historyIds.push(id);
 };
 
-window.history.replaceState({
-	key: mainRouter.getCurrentKey(),
-	historyId: null,
-	count: 0,
-}, '', location.href);
+window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null }), '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -546,37 +539,28 @@ mainRouter.addListener('same', () => {
 	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
-const actionedHistoryIds: string[] = [];
-let prevHistoryState: HistoryState = getHistoryState(window.history.state);
+const actionedHistories = new Map<string, 'forward' | 'backward'>();
 
 window.addEventListener('popstate', (event) => {
-	const historyState = getHistoryState(event.state);
-	const { historyId } = historyState;
-
-	let disableRouterReplace = false;
+	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
-		if (actionedHistoryIds.includes(historyId)) {
-			disableRouterReplace = true;
+		const historyType = actionedHistories.get(historyId);
 
-			if (prevHistoryState.count > historyState.count) {
-				// backward
-				console.log('[router]: backward');
-			} else if (prevHistoryState.count < historyState.count) {
-				// forward
-				console.log('[router]: forward');
-			} else {
-				// stay
-				console.log('[router]: stay');
-			}
+		if (historyType === 'forward') {
+			actionedHistories.set(historyId, 'backward');
+			window.history.forward();
+		} else if (historyType === 'backward') {
+			actionedHistories.set(historyId, 'forward');
+			window.history.back();
 		} else {
 			const hasHistory = histories.has(historyId);
 			if (hasHistory) {
 				histories.get(historyId)?.();
 				histories.delete(historyId);
-				actionedHistoryIds.push(historyId);
+				actionedHistories.set(historyId, 'forward');
 			}
-	
+
 			historyIds = historyIds.filter(id => histories.has(id));
 			const newHistoryId = historyIds.pop() ?? null;
 			if (newHistoryId) {
@@ -585,16 +569,12 @@ window.addEventListener('popstate', (event) => {
 		}
 	}
 
-	prevHistoryState = historyState;
-
-	if (!disableRouterReplace) {
-		mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
-		const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
+	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
+	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
 		window.scroll({ top: scrollPos, behavior: 'instant' });
-		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-			window.scroll({ top: scrollPos, behavior: 'instant' });
-		}, 100);
-	}
+	}, 100);
 });
 
 export function useRouter(): Router {

From 1ac546b872080e54901bb988e256483d85fc4749 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:21 +0900
Subject: [PATCH 070/147] Revert "test"

This reverts commit c777cb77f6972de05b3e6568ede8bde444878fdb.
---
 packages/client/src/router.ts | 39 +++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 1e8aa39b8acf..80edcb990208 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -474,6 +474,7 @@ export const mainRouter = new Router(routes, location.pathname + location.search
 type HistoryState = {
 	key: string | null;
 	historyId: string | null;
+	count: number;
 }
 
 const getHistoryState = (_state?: unknown): HistoryState => {
@@ -484,6 +485,7 @@ const getHistoryState = (_state?: unknown): HistoryState => {
 	return {
 		key: state.key ?? null,
 		historyId: state.historyId ?? null,
+		count: state.count ?? 0,
 	};
 };
 
@@ -492,6 +494,7 @@ const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
 	return {
 		key: newState.key ?? state.key,
 		historyId: newState.historyId ?? state.historyId,
+		count: state.count + 1,
 	};
 };
 
@@ -501,14 +504,14 @@ let historyIds: string[] = [];
 export const setHistoryBackHandler = (callback: () => void): void => {
 	const id = uuid();
 
-	window.history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
-	window.history.pushState(mergeHistoryState({ historyId: id }), '', location.href);
+	history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
+	history.pushState(mergeHistoryState({ historyId: id }), '', location.href);
 
 	histories.set(id, callback);
 	historyIds.push(id);
 };
 
-window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null }), '', location.href);
+window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null, count: 0 }), '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -539,34 +542,40 @@ mainRouter.addListener('same', () => {
 	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
-const actionedHistories = new Map<string, 'forward' | 'backward'>();
+let disableHistoryHandler = false;
 
 window.addEventListener('popstate', (event) => {
+	if (disableHistoryHandler) return;
+
 	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
-		const historyType = actionedHistories.get(historyId);
+		disableHistoryHandler = true;
 
-		if (historyType === 'forward') {
-			actionedHistories.set(historyId, 'backward');
-			window.history.forward();
-		} else if (historyType === 'backward') {
-			actionedHistories.set(historyId, 'forward');
-			window.history.back();
+		if (historyId === '_used_backward_') {
+			history.replaceState(mergeHistoryState({ historyId: '_used_forward_' }), '', location.href);
+			history.forward();
+		} else if (historyId === '_used_forward_') {
+			history.replaceState(mergeHistoryState({ historyId: '_used_backward_' }), '', location.href);
+			history.back();
 		} else {
 			const hasHistory = histories.has(historyId);
 			if (hasHistory) {
 				histories.get(historyId)?.();
 				histories.delete(historyId);
-				actionedHistories.set(historyId, 'forward');
 			}
 
 			historyIds = historyIds.filter(id => histories.has(id));
-			const newHistoryId = historyIds.pop() ?? null;
-			if (newHistoryId) {
-				window.history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
+			const newHistoryId = historyIds.pop() ?? '_used_backward_';
+
+			history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
+
+			if (hasHistory) {
+				history.back();
 			}
 		}
+
+		disableHistoryHandler = false;
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From f6678319733285e28f524724fbcaceca4b5d413d Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:30 +0900
Subject: [PATCH 071/147] Revert "test"

This reverts commit a21fdc605a61305945e60b599853ed940ffad9d6.
---
 packages/client/src/router.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 80edcb990208..ea833d0e4f98 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -542,16 +542,10 @@ mainRouter.addListener('same', () => {
 	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
-let disableHistoryHandler = false;
-
 window.addEventListener('popstate', (event) => {
-	if (disableHistoryHandler) return;
-
 	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
-		disableHistoryHandler = true;
-
 		if (historyId === '_used_backward_') {
 			history.replaceState(mergeHistoryState({ historyId: '_used_forward_' }), '', location.href);
 			history.forward();
@@ -574,8 +568,6 @@ window.addEventListener('popstate', (event) => {
 				history.back();
 			}
 		}
-
-		disableHistoryHandler = false;
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From 0542cb514bc471f8566b07befe5235db665db960 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:37 +0900
Subject: [PATCH 072/147] Revert "fix"

This reverts commit 33d16d82e06f9443212121ce1a502e893c3b75a6.
---
 packages/client/src/router.ts | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index ea833d0e4f98..e39b299e548a 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -546,27 +546,19 @@ window.addEventListener('popstate', (event) => {
 	const { historyId } = getHistoryState(event.state);
 
 	if (historyId) {
-		if (historyId === '_used_backward_') {
-			history.replaceState(mergeHistoryState({ historyId: '_used_forward_' }), '', location.href);
-			history.forward();
-		} else if (historyId === '_used_forward_') {
-			history.replaceState(mergeHistoryState({ historyId: '_used_backward_' }), '', location.href);
-			history.back();
-		} else {
-			const hasHistory = histories.has(historyId);
-			if (hasHistory) {
-				histories.get(historyId)?.();
-				histories.delete(historyId);
-			}
+		const hasHistory = histories.has(historyId);
+		if (hasHistory) {
+			histories.get(historyId)?.();
+			histories.delete(historyId);
+		}
 
-			historyIds = historyIds.filter(id => histories.has(id));
-			const newHistoryId = historyIds.pop() ?? '_used_backward_';
+		historyIds = historyIds.filter(id => histories.has(id));
+		const newHistoryId = historyIds.pop() ?? null;
 
-			history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
+		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
 
-			if (hasHistory) {
-				history.back();
-			}
+		if (hasHistory) {
+			history.back();
 		}
 	}
 

From cdb69e4ee0c109ba64a331657f78f6fa18ea4f88 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:45 +0900
Subject: [PATCH 073/147] Revert "fix"

This reverts commit 1eb4a9b21deaeff6c8d311faf530d09d4b0b18a9.
---
 packages/client/src/router.ts | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index e39b299e548a..e21c85201ec6 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -544,22 +544,15 @@ mainRouter.addListener('same', () => {
 
 window.addEventListener('popstate', (event) => {
 	const { historyId } = getHistoryState(event.state);
-
 	if (historyId) {
-		const hasHistory = histories.has(historyId);
-		if (hasHistory) {
+		if (histories.has(historyId)) {
 			histories.get(historyId)?.();
 			histories.delete(historyId);
 		}
-
-		historyIds = historyIds.filter(id => histories.has(id));
+		historyIds = historyIds.filter(id => historyId !== id);
 		const newHistoryId = historyIds.pop() ?? null;
-
-		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '', location.href);
-
-		if (hasHistory) {
-			history.back();
-		}
+		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '');
+		history.back();
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From 03871cf0b6802949ec34176aae9af6e1b4445c4d Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:02:55 +0900
Subject: [PATCH 074/147] Revert "fix"

This reverts commit fc08fcde9c4769812c25956fcb4a3b1162897ab0.
---
 packages/client/src/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index e21c85201ec6..ca84bd80fc79 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -552,7 +552,7 @@ window.addEventListener('popstate', (event) => {
 		historyIds = historyIds.filter(id => historyId !== id);
 		const newHistoryId = historyIds.pop() ?? null;
 		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '');
-		history.back();
+		return;
 	}
 
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);

From 1de69de387aab64f20d97f418410d3d588fe451b Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:03:06 +0900
Subject: [PATCH 075/147] Revert "fix"

This reverts commit d5b8c93082a98d0cd30821545674fb0046b60566.
---
 packages/client/src/router.ts | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index ca84bd80fc79..752af773a8bd 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -498,20 +498,16 @@ const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
 	};
 };
 
-const histories = new Map<string, () => void>();
-let historyIds: string[] = [];
+const historyMap = new Map<string, () => void>();
 
 export const setHistoryBackHandler = (callback: () => void): void => {
 	const id = uuid();
-
-	history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
-	history.pushState(mergeHistoryState({ historyId: id }), '', location.href);
-
-	histories.set(id, callback);
-	historyIds.push(id);
+	historyMap.set(id, callback);
+	window.history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
+	window.history.pushState(mergeHistoryState({}), '', location.href);
 };
 
-window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), historyId: null, count: 0 }), '', location.href);
+window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), count: 0 }), '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -543,18 +539,14 @@ mainRouter.addListener('same', () => {
 });
 
 window.addEventListener('popstate', (event) => {
-	const { historyId } = getHistoryState(event.state);
-	if (historyId) {
-		if (histories.has(historyId)) {
-			histories.get(historyId)?.();
-			histories.delete(historyId);
-		}
-		historyIds = historyIds.filter(id => historyId !== id);
-		const newHistoryId = historyIds.pop() ?? null;
-		history.replaceState(mergeHistoryState({ historyId: newHistoryId }), '');
+	const eventState = getHistoryState(event.state);
+	const isBack = getHistoryState().count > eventState.count;
+	if (isBack && eventState.historyId && historyMap.has(eventState.historyId)) {
+		historyMap.get(eventState.historyId)?.();
+		historyMap.delete(eventState.historyId);
+		window.history.go(-1);
 		return;
 	}
-
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
 	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
 	window.scroll({ top: scrollPos, behavior: 'instant' });

From c0b695dc293976cc1920bbb8b15e90e7cc2ad637 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:03:13 +0900
Subject: [PATCH 076/147] Revert "hotfix: history state"

This reverts commit 7c55698fb933b62c614cff0a5e527c814e3e8c67.
---
 packages/client/src/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 752af773a8bd..55793e4270c1 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -479,7 +479,7 @@ type HistoryState = {
 
 const getHistoryState = (_state?: unknown): HistoryState => {
 	const state = typeof (_state ?? window.history.state) === 'object'
-		? (_state ?? window.history.state ?? {}) as Partial<HistoryState>
+		? (_state ?? window.history.state) as Partial<HistoryState>
 		: {};
 
 	return {

From 50a13a1f776eb0be3f320bd39be3cd232368ca54 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:03:21 +0900
Subject: [PATCH 077/147] Revert "test(frontend/router): history api"

This reverts commit 4ae2ad561a05619f60a1ff6192fe0d22c0f53ece.
---
 .../client/src/components/MkMediaList.vue     |  9 ++--
 packages/client/src/components/MkModal.vue    | 15 ++++--
 packages/client/src/init.ts                   |  6 +++
 packages/client/src/router.ts                 | 54 ++-----------------
 packages/client/src/scripts/tms/url-hash.ts   | 22 ++++++++
 packages/client/src/ui/universal.vue          | 29 ++++++++--
 6 files changed, 72 insertions(+), 63 deletions(-)
 create mode 100644 packages/client/src/scripts/tms/url-hash.ts

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 625067781f8e..8e310efdcb32 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -21,9 +21,8 @@ import 'photoswipe/style.css';
 import XBanner from '@/components/MkMediaBanner.vue';
 import XImage from '@/components/MkMediaImage.vue';
 import XVideo from '@/components/MkMediaVideo.vue';
-// import * as os from '@/os';
+import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
-import { setHistoryBackHandler } from '@/router';
 
 const props = defineProps<{
 	mediaList: misskey.entities.DriveFile[];
@@ -31,7 +30,7 @@ const props = defineProps<{
 }>();
 
 const gallery = ref(null);
-// const pswpZIndex = os.claimZIndex('middle');
+const pswpZIndex = os.claimZIndex('middle');
 const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
 
 onMounted(() => {
@@ -114,8 +113,8 @@ onMounted(() => {
 	});
 
 	lightbox.init();
-
-	setHistoryBackHandler(() => {
+	
+	window.addEventListener('popstate', () => {
 		if (lightbox.pswp && lightbox.pswp.isOpen === true) {
 			lightbox.pswp.close();
 			return;
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 828d05d27df7..0426dfdacaf9 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -40,7 +40,7 @@ import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
 import { deviceKind } from '@/scripts/device-kind';
-import { setHistoryBackHandler } from '@/router';
+import { pushHash, trimHash } from '@/scripts/tms/url-hash';
 
 const getFixedContainer = (el: HTMLElement | null): HTMLElement | null => {
 	if (el == null || el.tagName === 'BODY') return null;
@@ -254,9 +254,14 @@ const onOpened = (): void => {
 	emit('opened');
 
 	if (type !== 'popup') {
-		setHistoryBackHandler(() => {
-			close();
+		window.addEventListener('popstate', () => {
+			if (!window.location.hash.endsWith(type) && !window.location.hash) {
+				close();
+				return;
+			}
 		});
+
+		history.pushState(null, '', pushHash(window.location.hash, type));
 	}
 
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
@@ -281,6 +286,10 @@ const close = (opts: { useSendAnimation?: boolean } = {}): void => {
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing = false;
 
+	if (type !== 'popup' && window.location.hash.endsWith(type)) {
+		trimHash();
+	}
+
 	emit('close');
 };
 
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index b7a3ede3b39a..6a4d6d3fee75 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -38,11 +38,17 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import { trimHash } from '@/scripts/tms/url-hash';
 import { mainRouter } from '@/router';
 
 (async (): Promise<void> => {
 	console.info(`Misskey v${version}`);
 
+	const [{ type: entryType }] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
+	if (entryType === 'reload') {
+		trimHash();
+	}
+
 	if (_DEV_) {
 		console.warn('Development mode!!!');
 
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 55793e4270c1..6c19c455ec59 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -1,5 +1,4 @@
 import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
-import { v4 as uuid } from 'uuid';
 import { Router } from '@/nirax';
 import { $i, iAmModerator } from '@/account';
 import MkLoading from '@/pages/_loading_.vue';
@@ -471,43 +470,7 @@ export const routes = [{
 
 export const mainRouter = new Router(routes, location.pathname + location.search + location.hash);
 
-type HistoryState = {
-	key: string | null;
-	historyId: string | null;
-	count: number;
-}
-
-const getHistoryState = (_state?: unknown): HistoryState => {
-	const state = typeof (_state ?? window.history.state) === 'object'
-		? (_state ?? window.history.state) as Partial<HistoryState>
-		: {};
-
-	return {
-		key: state.key ?? null,
-		historyId: state.historyId ?? null,
-		count: state.count ?? 0,
-	};
-};
-
-const mergeHistoryState = (newState: Partial<HistoryState>): HistoryState => {
-	const state = getHistoryState();
-	return {
-		key: newState.key ?? state.key,
-		historyId: newState.historyId ?? state.historyId,
-		count: state.count + 1,
-	};
-};
-
-const historyMap = new Map<string, () => void>();
-
-export const setHistoryBackHandler = (callback: () => void): void => {
-	const id = uuid();
-	historyMap.set(id, callback);
-	window.history.replaceState(mergeHistoryState({ historyId: id }), '', location.href);
-	window.history.pushState(mergeHistoryState({}), '', location.href);
-};
-
-window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(), count: 0 }), '', location.href);
+window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
 
 // TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
 // スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
@@ -515,12 +478,11 @@ window.history.replaceState(mergeHistoryState({ key: mainRouter.getCurrentKey(),
 const scrollPosStore = new Map<string, number>();
 
 window.setInterval(() => {
-	const { key } = getHistoryState();
-	if (key) scrollPosStore.set(key, window.scrollY);
+	scrollPosStore.set(window.history.state?.key, window.scrollY);
 }, 1000);
 
 mainRouter.addListener('push', ctx => {
-	window.history.pushState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
+	window.history.pushState({ key: ctx.key }, '', ctx.path);
 	const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
 	window.scroll({ top: scrollPos, behavior: 'instant' });
 	if (scrollPos !== 0) {
@@ -531,7 +493,7 @@ mainRouter.addListener('push', ctx => {
 });
 
 mainRouter.addListener('replace', ctx => {
-	window.history.replaceState(mergeHistoryState({ key: ctx.key }), '', ctx.path);
+	window.history.replaceState({ key: ctx.key }, '', ctx.path);
 });
 
 mainRouter.addListener('same', () => {
@@ -539,14 +501,6 @@ mainRouter.addListener('same', () => {
 });
 
 window.addEventListener('popstate', (event) => {
-	const eventState = getHistoryState(event.state);
-	const isBack = getHistoryState().count > eventState.count;
-	if (isBack && eventState.historyId && historyMap.has(eventState.historyId)) {
-		historyMap.get(eventState.historyId)?.();
-		historyMap.delete(eventState.historyId);
-		window.history.go(-1);
-		return;
-	}
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
 	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
 	window.scroll({ top: scrollPos, behavior: 'instant' });
diff --git a/packages/client/src/scripts/tms/url-hash.ts b/packages/client/src/scripts/tms/url-hash.ts
new file mode 100644
index 000000000000..d3e66dbf4597
--- /dev/null
+++ b/packages/client/src/scripts/tms/url-hash.ts
@@ -0,0 +1,22 @@
+export const pushHash = (baseHash: string, additionalHash: string): string => {
+	if (baseHash.startsWith('#')) return `${baseHash}-${additionalHash}`;
+
+	return `#${additionalHash}`;
+};
+
+export const popHash = (hashStr: string): {
+	popped: string;
+	newHash: string;
+} => {
+	if (!new RegExp(/#(.*)$/).test(hashStr)) return { popped: '', newHash: '' };
+
+	const hashArray = hashStr.split('-');
+	const popped = hashArray.pop() || '';
+
+	return {
+		popped: popped,
+		newHash: hashArray.join('-'),
+	};
+};
+
+export const trimHash = (): void => history.pushState(null, '', `${location.pathname}${location.search}`);
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 846c6f7bdba0..bca8ca2dabe6 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -59,10 +59,11 @@ import { defaultStore } from '@/store';
 import { navbarItemDef } from '@/navbar';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
-import { mainRouter, setHistoryBackHandler } from '@/router';
+import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { disableContextmenu } from '@/scripts/touch';
+import { pushHash, trimHash } from '@/scripts/tms/url-hash';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
@@ -138,26 +139,44 @@ onMounted(() => {
 });
 
 const openWidgets = (): void => {
-	setHistoryBackHandler(() => {
-		widgetsShowing = false;
+	window.addEventListener('popstate', () => {
+		if (!window.location.hash.endsWith('widgets')) {
+			widgetsShowing = false;
+			return;
+		}
 	});
 
 	widgetsShowing = true;
+
+	history.pushState(null, '', pushHash(window.location.hash, 'widgets'));
 };
 
 const closeWidgets = (): void => {
+	if (window.location.hash.endsWith('widgets')) {
+		trimHash();
+	}
+
 	widgetsShowing = false;
 };
 
 const openDrawerMenu = (): void => {
-	setHistoryBackHandler(() => {
-		drawerMenuShowing = false;
+	window.addEventListener('popstate', () => {
+		if (!window.location.hash.endsWith('menu')) {
+			drawerMenuShowing = false;
+			return;
+		}
 	});
 
 	drawerMenuShowing = true;
+
+	history.pushState(null, '', pushHash(window.location.hash, 'menu'));
 };
 
 const closeDrawerMenu = (): void => {
+	if (window.location.hash.endsWith('menu')) {
+		trimHash();
+	}
+
 	drawerMenuShowing = false;
 };
 

From 61c26b4ae67daca825e719ddc1857aae3fc28d0a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:16:41 +0900
Subject: [PATCH 078/147] fix className

---
 packages/client/src/components/MkModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 0426dfdacaf9..22ed37c7a046 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -321,7 +321,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.transition_send_enterActive, .transition_send_leaveActive {
+.send-enter-active, .send-leave-active {
 	> .bg {
 		transition: opacity 0.3s !important;
 	}
@@ -332,7 +332,7 @@ defineExpose({
 	}
 }
 
-.transition_send_enterFrom, .transition_send_leaveTo {
+.send-enter-from, .send-leave-to {
 	> .bg {
 		opacity: 0;
 	}

From a67952ef2281758f57250db8bee65bb4550f4af0 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 08:55:05 +0900
Subject: [PATCH 079/147] fix

---
 .../src/components/TmsPostForm.core.vue       | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 1aba0efee135..4304ffbe3602 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -48,8 +48,8 @@
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ renote ? i18n.ts.quote : reply ? i18n.ts.reply : i18n.ts.note }}</template>
-					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : reply ? 'ti-arrow-back-up' : renote ? 'ti-quote' : 'ti-send'"></i>
+					<template v-else>{{ (renote || quote) ? i18n.ts.quote : reply ? i18n.ts.reply : i18n.ts.note }}</template>
+					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : reply ? 'ti-arrow-back-up' : (renote || quote) ? 'ti-quote' : 'ti-send'"></i>
 				</div>
 			</button>
 		</div>
@@ -571,40 +571,37 @@ const parseMention = ({ username, host }: {
 	return `@${username}@${toASCII(host)}`;
 };
 
+const addMention = ({ username, host }: {
+	username: string;
+	host?: string | null;
+}): void => {
+	const mention = parseMention({ username, host });
+
+	if ($i?.username === username && (host == null || host === Host)) return;
+	if (text.includes(`${mention} `)) return;
+
+	text += `${mention} `;
+};
+
 if (text === '') {
 	if (props.mention) {
-		const mention = parseMention({
+		addMention({
 			username: props.mention.username,
 			host: props.mention.host,
 		});
-		text += `${mention} `;
 	}
 
 	if (reply) {
-		const mention = parseMention({
+		addMention({
 			username: reply.user.username,
 			host: reply.user.host,
 		});
-		text += `${mention} `;
 	}
 
 	if (reply && reply.text) {
 		const ast = mfm.parse(reply.text);
 
-		for (const x of extractMentions(ast)) {
-			const mention = parseMention({
-				username: x.username,
-				host: x.host,
-			});
-
-			// 自分は除外
-			if ($i?.username === x.username && (x.host == null || x.host === Host)) continue;
-
-			// 重複は除外
-			if (text.includes(`${mention} `)) continue;
-
-			text += `${mention} `;
-		}
+		for (const x of extractMentions(ast)) addMention(x);
 	}
 }
 
@@ -795,7 +792,7 @@ const openAccountMenu = (ev: MouseEvent): void => {
 
 const chooseDraft = (): void => {
 	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
-		active: draft?.id,
+		active: draftKey,
 	}, {
 		chosen: (draft_: Draft.Draft) => {
 			emit('reopen', draft_);
@@ -1008,8 +1005,10 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 .headerLeft {
 	display: grid;
 	grid-auto-flow: column;
-	grid-auto-columns: minmax(36px, 50px);
-	grid-auto-rows: minmax(40px, 100%);
+	grid-auto-columns: max-content;
+	grid-template-columns: minmax(36px, 50px);
+	grid-template-rows: minmax(40px, 100%);
+	gap: 4px;
 }
 
 .cancel {
@@ -1307,6 +1306,10 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 		gap: 0;
 	}
 
+	.headerLeft {
+		gap: 0;
+	}
+
 	.headerRight {
 		gap: 0;
 	}

From ef74946ee79f0a22366cba9569b42b1c1d03f747 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 09:32:43 +0900
Subject: [PATCH 080/147] tweak MkReactionsViewer

---
 .../components/MkReactionsViewer.reaction.vue | 42 +++++++++++++++----
 .../src/components/MkReactionsViewer.vue      | 41 ++++++------------
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 5150ff2e3a9c..b1e5beca4941 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -1,14 +1,21 @@
 <template>
-<button
-	v-if="count > 0"
-	ref="buttonRef"
-	class="hkzvhatu _button"
-	:class="[{ reacted: note.myReaction == reaction, canToggle }, useEasyReactionsViewer ? 'easy' : 'normal']"
-	@click="react"
+<Transition
+	:enter-active-class="defaultStore.state.animation ? $style.transition_x_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_x_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_x_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
 >
-	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis" :use-fallback-icon="true"/>
-	<span class="count">{{ count }}</span>
-</button>
+	<button
+		v-if="count > 0"
+		ref="buttonRef"
+		class="hkzvhatu _button"
+		:class="[{ reacted: note.myReaction == reaction, canToggle }, useEasyReactionsViewer ? 'easy' : 'normal']"
+		@click="react"
+	>
+		<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis" :use-fallback-icon="true"/>
+		<span class="count">{{ count }}</span>
+	</button>
+</Transition>
 </template>
 
 <script lang="ts" setup>
@@ -184,3 +191,20 @@ useTooltip(buttonRef, async (showing) => {
 	}
 }
 </style>
+
+<style lang="scss" module>
+.transition_x_enterActive, .transition_x_leaveActive {
+	transition: opacity 0.1s cubic-bezier(0, 0.5, 0.5, 1), transform 0.1s cubic-bezier(0, 0.5, 0.5, 1) !important;
+}
+
+.transition_x_enterFrom, .transition_x_leaveTo {
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.transition_x_leaveActive {
+	position: absolute;
+	visibility: hidden;
+	pointer-events: none;
+}
+</style>
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index 596d52911aaf..451d09d7f66d 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -1,24 +1,21 @@
 <template>
-<TransitionGroup
-	:enter-active-class="$store.state.animation ? $style.transition_x_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_x_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_x_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_x_leaveTo : ''"
-	:move-class="$store.state.animation ? $style.transition_x_move : ''"
-	tag="div"
-	class="tdflqwzn"
-	:class="[$style.root, { isMe }]"
->
-	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
-	<slot v-if="hasMoreReactions" name="more"/>
-</TransitionGroup>
+<div :class="$style.root" class="tdflqwzn">
+	<XReaction
+		v-for="[reaction, count] in reactions"
+		:key="reaction"
+		:reaction="reaction"
+		:count="count"
+		:is-initial="initialReactions.has(reaction)"
+		:note="note"
+	/>
+	<slot v-if="hasMoreReactions" name="more"></slot>
+</div>
 </template>
 
 <script lang="ts" setup>
-import { watch, computed } from 'vue';
+import { watch } from 'vue';
 import { Note } from 'misskey-js/built/entities';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
-import { $i } from '@/account';
 
 const props = withDefaults(defineProps<{
 	note: Note;
@@ -28,7 +25,6 @@ const props = withDefaults(defineProps<{
 });
 
 const initialReactions = new Set(Object.keys(props.note.reactions));
-const isMe = computed(() => $i && $i.id === props.note.userId);
 
 let reactions = $ref<[string, number][]>([]);
 let hasMoreReactions = $ref(false);
@@ -69,19 +65,6 @@ watch([(): Record<string, number> => props.note.reactions, (): number => props.m
 </script>
 
 <style lang="scss" module>
-.transition_x_move, .transition_x_enterActive, .transition_x_leaveActive {
-	transition: opacity 0.2s cubic-bezier(0, 0.5, 0.5, 1), transform 0.2s cubic-bezier(0, 0.5, 0.5, 1) !important;
-}
-
-.transition_x_enterFrom, .transition_x_leaveTo {
-	opacity: 0;
-	transform: scale(0.7);
-}
-
-.transition_x_leaveActive {
-	position: absolute;
-}
-
 .root {
 	margin: 4px -2px 0 -2px;
 	display: flex;

From 6120bd03fbee3cdffa7d9ae81471bac3cf6916a6 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 09:44:26 +0900
Subject: [PATCH 081/147] fix

---
 packages/client/src/components/MkReactionsViewer.reaction.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index b1e5beca4941..97ffa75375f5 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -4,6 +4,7 @@
 	:leave-active-class="defaultStore.state.animation ? $style.transition_x_leaveActive : ''"
 	:enter-from-class="defaultStore.state.animation ? $style.transition_x_enterFrom : ''"
 	:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
+	appear
 >
 	<button
 		v-if="count > 0"

From 92dad7a13e4d1d2e1614b2f2a1016524808a15cc Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 10:09:00 +0900
Subject: [PATCH 082/147] tweak

---
 .../components/MkReactionsViewer.reaction.vue | 177 +++++++++---------
 .../src/components/MkReactionsViewer.vue      |   2 +-
 2 files changed, 88 insertions(+), 91 deletions(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 97ffa75375f5..262af9fc1cb3 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -6,21 +6,22 @@
 	:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
 	appear
 >
-	<button
-		v-if="count > 0"
-		ref="buttonRef"
-		class="hkzvhatu _button"
-		:class="[{ reacted: note.myReaction == reaction, canToggle }, useEasyReactionsViewer ? 'easy' : 'normal']"
-		@click="react"
-	>
-		<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis" :use-fallback-icon="true"/>
-		<span class="count">{{ count }}</span>
-	</button>
+	<div v-if="count > 0">
+		<button
+			ref="buttonRef"
+			class="hkzvhatu mk-reactions-viewer-reaction"
+			:class="['_button', useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.reacted]: note.myReaction === reaction, [$style.canToggle]: canToggle }]"
+			@click="react"
+		>
+			<XReactionIcon :class="$style.reactionIcon" :reaction="reaction" :custom-emojis="note.emojis" use-fallback-icon/>
+			<span :class="$style.reactionCount">{{ count }}</span>
+		</button>
+	</div>
 </Transition>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, shallowRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
@@ -41,7 +42,7 @@ const props = defineProps<{
 
 const useEasyReactionsViewer = computed(() => tmsStore.state.useEasyReactionsViewer);
 
-const buttonRef = ref<HTMLElement>();
+const buttonRef = shallowRef<HTMLElement>();
 
 const canToggle = computed(() => !props.reaction.match(/@\w/) && !!$i);
 
@@ -107,105 +108,101 @@ useTooltip(buttonRef, async (showing) => {
 }, 100);
 </script>
 
-<style lang="scss" scoped>
-.hkzvhatu {
-	&.normal {
-		display: inline-block;
-		height: 32px;
-		padding: 0 6px;
-		border-radius: 4px;
-
-		&.canToggle {
-			background-color: rgba(0, 0, 0, 0.05);
-
-			&:hover {
-				background-color: rgba(0, 0, 0, 0.1);
-			}
-		}
+<style lang="scss" module>
+.transition_x_enterActive, .transition_x_leaveActive {
+	transition: opacity 0.1s cubic-bezier(0, 0.5, 0.5, 1), transform 0.1s cubic-bezier(0, 0.5, 0.5, 1) !important;
+}
 
-		&:not(.canToggle) {
-			cursor: default;
-		}
+.transition_x_enterFrom, .transition_x_leaveTo {
+	opacity: 0;
+	transform: scale(0.9);
+}
 
-		&.reacted {
-			background-color: var(--accent);
+.transition_x_leaveActive {
+	position: absolute;
+	visibility: hidden;
+	pointer-events: none;
+}
 
-			&:hover {
-				background-color: var(--accent);
-			}
+.viewTypeNormal {
+	display: inline-block;
+	height: 32px;
+	padding: 0 6px;
+	border-radius: 4px;
 
-			> .count {
-				color: var(--fgOnAccent);
-			}
+	&.canToggle {
+		background-color: rgba(0, 0, 0, 0.05);
 
-			> .icon {
-				filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
-			}
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.1);
 		}
+	}
 
-		> .count {
-			font-size: 0.9em;
-			line-height: 32px;
-			margin: 0 0 0 4px;
-		}
+	&:not(.canToggle) {
+		cursor: default;
 	}
 
-	&.easy {
-		background-color: var(--panel);
-		color: var(--fgTransparentWeak);
-		box-sizing: border-box;
-		display: grid;
-		grid-template-columns: auto auto;
-		grid-template-rows: 32px;
-		align-items: center;
-		border-radius: 4px;
-		box-shadow: 0 4px 14px -8px var(--shadow);
-		overflow: hidden;
-
-		&.canToggle {
-			box-shadow: 0 4px 14px -8px var(--shadow), 0 0 0 1px var(--divider); // SEE: https://dskd.jp/archives/73.html
-		}
+	&.reacted {
+		background-color: var(--accent);
 
-		&.canToggle:hover,
-		&.reacted {
+		&:hover {
 			background-color: var(--accent);
-			color: var(--fgOnAccent);
 		}
 
-		&:not(.canToggle) {
-			cursor: default;
+		> .reactionCount {
+			color: var(--fgOnAccent);
 		}
 
-		> .icon {
-			background-color: #fff;
-			box-sizing: border-box;
-			padding: 4px;
-			max-width: 100%; // はみ出し防止
-			height: 32px !important; // MkEmojiのheight上書き, 100%を指定するとGeckoエンジンで描画がバグる
+		> .reactionIcon {
+			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
 		}
+	}
 
-		> .count {
-			box-sizing: border-box;
-			padding: 0 6px;
-			font-size: 0.9em;
-		}
+	> .reactionCount {
+		font-size: 0.9em;
+		line-height: 32px;
+		margin: 0 0 0 4px;
 	}
 }
-</style>
 
-<style lang="scss" module>
-.transition_x_enterActive, .transition_x_leaveActive {
-	transition: opacity 0.1s cubic-bezier(0, 0.5, 0.5, 1), transform 0.1s cubic-bezier(0, 0.5, 0.5, 1) !important;
-}
+.viewTypeEasy {
+	background-color: var(--panel);
+	color: var(--fgTransparentWeak);
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: auto auto;
+	grid-template-rows: 32px;
+	align-items: center;
+	border-radius: 4px;
+	box-shadow: 0 4px 14px -8px var(--shadow);
+	overflow: hidden;
+
+	&.canToggle {
+		box-shadow: 0 4px 14px -8px var(--shadow), 0 0 0 1px var(--divider); // SEE: https://dskd.jp/archives/73.html
+	}
 
-.transition_x_enterFrom, .transition_x_leaveTo {
-	opacity: 0;
-	transform: scale(0.9);
-}
+	&.canToggle:hover,
+	&.reacted {
+		background-color: var(--accent);
+		color: var(--fgOnAccent);
+	}
 
-.transition_x_leaveActive {
-	position: absolute;
-	visibility: hidden;
-	pointer-events: none;
+	&:not(.canToggle) {
+		cursor: default;
+	}
+
+	> .reactionIcon {
+		background-color: #fff;
+		box-sizing: border-box;
+		padding: 4px;
+		max-width: 100%; // はみ出し防止
+		height: 32px !important; // MkEmojiのheight上書き, 100%を指定するとGeckoエンジンで描画がバグる
+	}
+
+	> .reactionCount {
+		box-sizing: border-box;
+		padding: 0 6px;
+		font-size: 0.9em;
+	}
 }
 </style>
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index 451d09d7f66d..56caa96f879a 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -1,5 +1,5 @@
 <template>
-<div :class="$style.root" class="tdflqwzn">
+<div :class="$style.root" class="tdflqwzn mk-reactions-viewer">
 	<XReaction
 		v-for="[reaction, count] in reactions"
 		:key="reaction"

From 01f86d9b3b5e8988b190d62a0e76f040e67def74 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 17 Apr 2023 10:18:55 +0900
Subject: [PATCH 083/147] fix

---
 .../components/MkReactionsViewer.reaction.vue | 130 +++++++++---------
 1 file changed, 66 insertions(+), 64 deletions(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 262af9fc1cb3..c6e73d917ebc 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -6,7 +6,7 @@
 	:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
 	appear
 >
-	<div v-if="count > 0">
+	<div v-if="count > 0" :class="$style.root">
 		<button
 			ref="buttonRef"
 			class="hkzvhatu mk-reactions-viewer-reaction"
@@ -124,85 +124,87 @@ useTooltip(buttonRef, async (showing) => {
 	pointer-events: none;
 }
 
-.viewTypeNormal {
-	display: inline-block;
-	height: 32px;
-	padding: 0 6px;
-	border-radius: 4px;
+.root {
+	.viewTypeNormal {
+		display: inline-block;
+		height: 32px;
+		padding: 0 6px;
+		border-radius: 4px;
 
-	&.canToggle {
-		background-color: rgba(0, 0, 0, 0.05);
+		&.canToggle {
+			background-color: rgba(0, 0, 0, 0.05);
 
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.1);
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.1);
+			}
 		}
-	}
-
-	&:not(.canToggle) {
-		cursor: default;
-	}
 
-	&.reacted {
-		background-color: var(--accent);
+		&:not(.canToggle) {
+			cursor: default;
+		}
 
-		&:hover {
+		&.reacted {
 			background-color: var(--accent);
-		}
 
-		> .reactionCount {
-			color: var(--fgOnAccent);
-		}
+			&:hover {
+				background-color: var(--accent);
+			}
 
-		> .reactionIcon {
-			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+			> .reactionCount {
+				color: var(--fgOnAccent);
+			}
+
+			> .reactionIcon {
+				filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+			}
 		}
-	}
 
-	> .reactionCount {
-		font-size: 0.9em;
-		line-height: 32px;
-		margin: 0 0 0 4px;
+		> .reactionCount {
+			font-size: 0.9em;
+			line-height: 32px;
+			margin: 0 0 0 4px;
+		}
 	}
-}
 
-.viewTypeEasy {
-	background-color: var(--panel);
-	color: var(--fgTransparentWeak);
-	box-sizing: border-box;
-	display: grid;
-	grid-template-columns: auto auto;
-	grid-template-rows: 32px;
-	align-items: center;
-	border-radius: 4px;
-	box-shadow: 0 4px 14px -8px var(--shadow);
-	overflow: hidden;
-
-	&.canToggle {
-		box-shadow: 0 4px 14px -8px var(--shadow), 0 0 0 1px var(--divider); // SEE: https://dskd.jp/archives/73.html
-	}
+	.viewTypeEasy {
+		background-color: var(--panel);
+		color: var(--fgTransparentWeak);
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-template-rows: 32px;
+		align-items: center;
+		border-radius: 4px;
+		box-shadow: 0 4px 14px -8px var(--shadow);
+		overflow: hidden;
+
+		&.canToggle {
+			box-shadow: 0 4px 14px -8px var(--shadow), 0 0 0 1px var(--divider); // SEE: https://dskd.jp/archives/73.html
+		}
 
-	&.canToggle:hover,
-	&.reacted {
-		background-color: var(--accent);
-		color: var(--fgOnAccent);
-	}
+		&.canToggle:hover,
+		&.reacted {
+			background-color: var(--accent);
+			color: var(--fgOnAccent);
+		}
 
-	&:not(.canToggle) {
-		cursor: default;
-	}
+		&:not(.canToggle) {
+			cursor: default;
+		}
 
-	> .reactionIcon {
-		background-color: #fff;
-		box-sizing: border-box;
-		padding: 4px;
-		max-width: 100%; // はみ出し防止
-		height: 32px !important; // MkEmojiのheight上書き, 100%を指定するとGeckoエンジンで描画がバグる
-	}
+		> .reactionIcon {
+			background-color: #fff;
+			box-sizing: border-box;
+			padding: 4px;
+			max-width: 100%; // はみ出し防止
+			height: 32px !important; // MkEmojiのheight上書き, 100%を指定するとGeckoエンジンで描画がバグる
+		}
 
-	> .reactionCount {
-		box-sizing: border-box;
-		padding: 0 6px;
-		font-size: 0.9em;
+		> .reactionCount {
+			box-sizing: border-box;
+			padding: 0 6px;
+			font-size: 0.9em;
+		}
 	}
 }
 </style>

From c4f2c2f1f1ad2242d781d485ddde485d4b042880 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 10:34:55 +0900
Subject: [PATCH 084/147] refactor(frontend): remove $, rename comp imports,
 fix types

- remove $i, $store, $instance, $t, $ts
- rename components imports
- fix types
---
 .../src/components/MkAbuseReportWindow.vue    |  18 +--
 packages/client/src/components/MkChart.vue    |   6 +-
 .../client/src/components/MkContainer.vue     |   8 +-
 .../client/src/components/MkContextMenu.vue   |   3 +-
 .../client/src/components/MkCropperDialog.vue |  44 +++---
 packages/client/src/components/MkDrive.vue    |   3 +-
 .../src/components/MkDriveSelectDialog.vue    |  12 +-
 .../client/src/components/MkDriveWindow.vue   |  10 +-
 packages/client/src/components/MkFolder.vue   |   5 +-
 .../src/components/MkForgotPassword.vue       |  17 +--
 .../client/src/components/MkFormDialog.vue    |  90 ++++++-------
 packages/client/src/components/MkFormula.vue  |  25 ++--
 .../client/src/components/MkFormulaCore.vue   |  34 ++---
 packages/client/src/components/MkGoogle.vue   |   3 +-
 .../client/src/components/MkMediaBanner.vue   |   5 +-
 .../client/src/components/MkMediaCaption.vue  |   6 +-
 .../client/src/components/MkMediaImage.vue    |  32 +++--
 .../client/src/components/MkMediaVideo.vue    |   5 +-
 packages/client/src/components/MkMention.vue  |   3 +-
 packages/client/src/components/MkMenu.vue     |   3 +-
 .../src/components/MkModalPageWindow.vue      |   4 +-
 packages/client/src/components/MkNote.vue     |  32 ++---
 .../client/src/components/MkNoteDetailed.vue  |  28 ++--
 packages/client/src/components/MkNoteSub.vue  |   9 +-
 packages/client/src/components/MkNotes.vue    |   4 +-
 .../client/src/components/MkNotification.vue  |  63 +++++----
 .../MkNotificationSettingWindow.vue           |  45 ++++---
 .../client/src/components/MkNotifications.vue |  24 ++--
 .../client/src/components/MkObjectView.vue    |   8 +-
 .../client/src/components/MkPageWindow.vue    |  46 +++----
 packages/client/src/components/MkPoll.vue     |   4 +-
 .../src/components/MkPostFormAttaches.vue     |  15 ++-
 .../client/src/components/MkReactionIcon.vue  |   7 +-
 .../src/components/MkReactionTooltip.vue      |   7 +-
 .../components/MkReactionsViewer.details.vue  |   9 +-
 .../components/MkReactionsViewer.reaction.vue |  51 ++-----
 packages/client/src/components/MkSample.vue   |   3 +-
 packages/client/src/components/MkSignin.vue   |   6 +-
 .../client/src/components/MkSigninDialog.vue  |  24 ++--
 .../client/src/components/MkSignupDialog.vue  |  12 +-
 .../src/components/MkSubNoteContent.vue       |  10 +-
 packages/client/src/components/MkTimeline.vue |  54 ++++----
 packages/client/src/components/MkToast.vue    |   3 +-
 .../src/components/MkTokenGenerateWindow.vue  |  41 +++---
 packages/client/src/components/MkTooltip.vue  |   3 +-
 .../client/src/components/MkUrlPreview.vue    |   3 +-
 .../src/components/MkUrlPreviewPopup.vue      |   3 +-
 packages/client/src/components/MkUserInfo.vue |   3 +-
 .../client/src/components/MkUserPreview.vue   |  13 +-
 .../src/components/MkUserSelectDialog.vue     |   8 +-
 packages/client/src/components/MkWidgets.vue  |  10 +-
 packages/client/src/components/MkWindow.vue   |   3 +-
 .../client/src/components/MkYoutubePlayer.vue |  80 +++++++----
 .../client/src/components/form/suspense.vue   |  10 +-
 .../client/src/components/global/MkAcct.vue   |   3 +-
 .../client/src/components/global/MkAd.vue     |   7 +-
 .../client/src/components/global/MkAvatar.vue |   4 +-
 .../client/src/components/global/MkError.vue  |   9 +-
 .../global/MkMisskeyFlavoredMarkdown.vue      |   6 +-
 .../client/src/components/page/page.note.vue  |  47 +++----
 .../client/src/components/page/page.post.vue  |  28 ++--
 .../client/src/components/page/page.text.vue  |  12 +-
 packages/client/src/i18n.ts                   |   8 --
 packages/client/src/init.ts                   |   8 --
 packages/client/src/instance.ts               |  11 +-
 packages/client/src/os.ts                     |  26 +++-
 packages/client/src/pages/_error_.vue         |  16 +--
 packages/client/src/pages/about-misskey.vue   |   3 +-
 packages/client/src/pages/about.emojis.vue    |  14 +-
 packages/client/src/pages/about.vue           |  15 ++-
 packages/client/src/pages/admin/abuses.vue    |  33 +++--
 .../src/pages/admin/emoji-edit-dialog.vue     |  43 +++---
 packages/client/src/pages/admin/index.vue     |   2 +-
 packages/client/src/pages/admin/metrics.vue   |  11 +-
 .../src/pages/admin/overview.federation.vue   |   3 +-
 packages/client/src/pages/admin/relays.vue    |   2 +-
 packages/client/src/pages/announcements.vue   |   3 +-
 .../client/src/pages/antenna-timeline.vue     |  56 ++++----
 packages/client/src/pages/auth.form.vue       |  34 +++--
 packages/client/src/pages/auth.vue            |  20 ++-
 packages/client/src/pages/channel.vue         |  20 +--
 packages/client/src/pages/clip.vue            |   8 +-
 packages/client/src/pages/drive.vue           |  11 +-
 .../client/src/pages/explore.featured.vue     |   6 +-
 packages/client/src/pages/explore.users.vue   | 127 ++++++++++++------
 packages/client/src/pages/favorites.vue       |   4 +-
 packages/client/src/pages/gallery/post.vue    |   4 +-
 packages/client/src/pages/messaging/index.vue |   6 +-
 .../messaging/messaging-room.message.vue      |   9 +-
 packages/client/src/pages/miauth.vue          |   4 +-
 packages/client/src/pages/my-lists/list.vue   |   5 +-
 packages/client/src/pages/note.vue            |  21 +--
 packages/client/src/pages/notifications.vue   |  28 ++--
 .../page-editor/els/page-editor.el.button.vue |  37 ++---
 .../page-editor/els/page-editor.el.canvas.vue |  13 +-
 .../els/page-editor.el.counter.vue            |  15 ++-
 .../page-editor/els/page-editor.el.if.vue     |  16 +--
 .../page-editor/els/page-editor.el.image.vue  |  11 +-
 .../page-editor/els/page-editor.el.note.vue   |  43 +++---
 .../els/page-editor.el.number-input.vue       |  15 ++-
 .../page-editor/els/page-editor.el.post.vue   |  15 ++-
 .../els/page-editor.el.radio-button.vue       |  21 +--
 .../page-editor/els/page-editor.el.switch.vue |  15 ++-
 .../els/page-editor.el.text-input.vue         |  15 ++-
 .../page-editor/els/page-editor.el.text.vue   |   9 +-
 .../els/page-editor.el.textarea-input.vue     |  15 ++-
 .../els/page-editor.el.textarea.vue           |   9 +-
 .../page-editor/page-editor.container.vue     |  13 +-
 .../page-editor/page-editor.script-block.vue  |  56 ++++----
 .../src/pages/page-editor/page-editor.vue     |  28 ++--
 packages/client/src/pages/page.vue            |   4 +-
 packages/client/src/pages/search.vue          |   9 +-
 packages/client/src/pages/settings/2fa.vue    |   2 +-
 packages/client/src/pages/settings/apps.vue   |   2 +-
 .../src/pages/settings/delete-account.vue     |   1 +
 .../src/pages/settings/notifications.vue      |  29 ++--
 packages/client/src/pages/settings/sounds.vue |   2 +-
 packages/client/src/pages/tag.vue             |   4 +-
 packages/client/src/pages/timeline.vue        |  80 ++++++-----
 packages/client/src/pages/user-info.vue       |   2 +-
 .../client/src/pages/user-list-timeline.vue   |  46 ++++---
 packages/client/src/pages/user/home.vue       |   6 +-
 .../client/src/pages/user/index.activity.vue  |   2 +-
 .../client/src/pages/user/index.photos.vue    |   5 +-
 .../client/src/pages/user/index.timeline.vue  |   4 +-
 .../client/src/pages/welcome.entrance.a.vue   |  11 +-
 .../client/src/pages/welcome.entrance.b.vue   |  54 ++++----
 .../client/src/pages/welcome.entrance.c.vue   |  40 +++---
 packages/client/src/pages/welcome.setup.vue   |   8 +-
 .../client/src/pages/welcome.timeline.vue     |  20 +--
 packages/client/src/scripts/tms/utils.ts      |  20 +++
 packages/client/src/store.ts                  |   7 -
 packages/client/src/ui/_common_/common.vue    |   3 +-
 .../src/ui/_common_/navbar-for-mobile.vue     |   5 +-
 packages/client/src/ui/_common_/navbar.vue    |   6 +-
 .../client/src/ui/_common_/notification.vue   |   4 +-
 .../src/ui/_common_/stream-indicator.vue      |   3 +-
 packages/client/src/ui/classic.header.vue     |  18 ++-
 packages/client/src/ui/classic.sidebar.vue    |  32 +++--
 packages/client/src/ui/classic.vue            |   6 +-
 packages/client/src/ui/classic.widgets.vue    |  34 ++---
 packages/client/src/ui/deck.vue               |   5 +-
 .../client/src/ui/deck/antenna-column.vue     |  29 ++--
 .../client/src/ui/deck/channel-column.vue     |  28 ++--
 packages/client/src/ui/deck/column.vue        | 105 ++++++++-------
 packages/client/src/ui/deck/direct-column.vue |   6 +-
 .../client/src/ui/deck/favorites-column.vue   |   4 +-
 packages/client/src/ui/deck/list-column.vue   |  25 ++--
 .../client/src/ui/deck/mentions-column.vue    |   4 +-
 .../src/ui/deck/notifications-column.vue      |  17 ++-
 packages/client/src/ui/deck/tl-column.vue     |  36 ++---
 .../client/src/ui/deck/widgets-column.vue     |  26 ++--
 packages/client/src/ui/universal.vue          |   8 +-
 packages/client/src/ui/universal.widgets.vue  |  26 ++--
 packages/client/src/ui/visitor/a.vue          |  18 ++-
 packages/client/src/ui/visitor/b.vue          |  33 ++---
 packages/client/src/ui/visitor/header.vue     |  24 ++--
 packages/client/src/ui/visitor/kanban.vue     |  22 +--
 packages/client/src/widgets/calendar.vue      |   8 +-
 packages/client/src/widgets/federation.vue    |   3 +-
 packages/client/src/widgets/notifications.vue |  24 ++--
 packages/client/src/widgets/slideshow.vue     |   2 +-
 packages/client/src/widgets/timeline.vue      |  43 +++---
 packages/client/src/widgets/trends.vue        |   5 +-
 packages/client/vite.config.ts                |   1 +
 165 files changed, 1612 insertions(+), 1359 deletions(-)

diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 2b710ce2be2d..8aa892a54af4 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
+<MkWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
 	<template #header>
 		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
@@ -19,13 +19,13 @@
 			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
 		</div>
 	</div>
-</XWindow>
+</MkWindow>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
@@ -40,22 +40,22 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const uiWindow = ref<InstanceType<typeof XWindow>>();
-const comment = ref(props.initialComment || '');
+const uiWindow = ref<InstanceType<typeof MkWindow>>();
+const comment = ref(props.initialComment ?? '');
 
-function send() {
+const send = (): void => {
 	os.apiWithDialog('users/report-abuse', {
 		userId: props.user.id,
 		comment: comment.value,
-	}, undefined).then(res => {
+	}, undefined).then(() => {
 		os.alert({
 			type: 'success',
-			text: i18n.ts.abuseReported
+			text: i18n.ts.abuseReported,
 		});
 		uiWindow.value?.close();
 		emit('closed');
 	});
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index 496512465dfd..53cd6e794a88 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -9,9 +9,9 @@
 
 <script lang="ts" setup>
 /* eslint-disable id-denylist --
-  Chart.js has a `data` attribute in most chart definitions, which triggers the
-  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.
+	Chart.js has a `data` attribute in most chart definitions, which triggers the
+	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 } from 'vue';
 import {
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 173fc1deed10..ea54c297ad52 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -11,7 +11,7 @@
 		</div>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
+		:name="defaultStore.state.animation ? 'container-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -20,7 +20,7 @@
 		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
 			<slot></slot>
 			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
+				<span>{{ i18n.ts.showMore }}</span>
 			</button>
 		</div>
 	</Transition>
@@ -29,6 +29,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
@@ -73,6 +75,8 @@ export default defineComponent({
 			showBody: this.expanded,
 			omitted: null,
 			ignoreOmit: false,
+			defaultStore,
+			i18n,
 		};
 	},
 	mounted() {
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index c8aeb86d77d4..f5f4e27aa4fb 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" appear>
+<Transition :name="defaultStore.state.animation ? 'fade' : ''" appear>
 	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
@@ -12,6 +12,7 @@ import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 import contains from '@/scripts/contains';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	items: MenuItem[];
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 655f634c5b7a..e7910c9c107a 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialogEl"
 	:width="800"
 	:height="500"
@@ -22,7 +22,7 @@
 			</div>
 		</div>
 	</template>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -30,7 +30,7 @@ import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
@@ -52,18 +52,22 @@ const props = defineProps<{
 const imgUrl = `${url}/proxy/image.webp?${query({
 	url: props.file.url,
 })}`;
-let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
-let imgEl = $ref<HTMLImageElement>();
+const dialogEl = $ref<InstanceType<typeof MkModalWindow>>();
+const imgEl = $ref<HTMLImageElement>();
 let cropper: Cropper | null = null;
 let loading = $ref(true);
 
-const ok = async () => {
+const ok = async (): Promise<void> => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
+		if (!croppedCanvas) return;
+
 		croppedCanvas.toBlob(blob => {
+			if (!blob) return;
+
 			const formData = new FormData();
 			formData.append('file', blob);
-			formData.append('i', $i.token);
+			formData.append('i', $i?.token);
 			if (defaultStore.state.uploadFolder) {
 				formData.append('folderId', defaultStore.state.uploadFolder);
 			}
@@ -84,43 +88,43 @@ const ok = async () => {
 	const f = await promise;
 
 	emit('ok', f);
-	dialogEl.close();
+	dialogEl?.close();
 };
 
-const cancel = () => {
+const cancel = (): void => {
 	emit('cancel');
-	dialogEl.close();
+	dialogEl?.close();
 };
 
-const onImageLoad = () => {
+const onImageLoad = (): void => {
 	loading = false;
 
-	if (cropper) {
-		cropper.getCropperImage()!.$center('contain');
-		cropper.getCropperSelection()!.$center();
-	}
+	cropper?.getCropperImage()?.$center('contain');
+	cropper?.getCropperSelection()?.$center();
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {
-	});
+	if (!imgEl) return;
+	cropper = new Cropper(imgEl, {});
 
 	const computedStyle = getComputedStyle(document.documentElement);
 
-	const selection = cropper.getCropperSelection()!;
+	const selection = cropper.getCropperSelection();
+	if (!selection) return;
+
 	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
 	selection.aspectRatio = props.aspectRatio;
 	selection.initialAspectRatio = props.aspectRatio;
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper?.getCropperImage()?.$center('contain');
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper?.getCropperImage()?.$center('contain');
 		selection.$center();
 	}, 500);
 });
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index fdf23564d00c..01091aa24a6a 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -27,7 +27,8 @@
 		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
-		ref="main" class="main"
+		ref="main"
+		class="main"
 		:class="{ uploading: uploadings.length > 0, fetching }"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
index ad5142aecc8d..e29c9105b9e9 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="800"
 	:height="500"
@@ -14,15 +14,15 @@
 		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
-	<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
-</XModalWindow>
+	<MkDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { DriveFile } from 'misskey-js/built/entities';
-import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkDrive from '@/components/MkDrive.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 
@@ -38,7 +38,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof MkModalWindow>>();
 
 const selected = ref<DriveFile[]>([]);
 
diff --git a/packages/client/src/components/MkDriveWindow.vue b/packages/client/src/components/MkDriveWindow.vue
index 617200321b74..08d95f8c1c8e 100644
--- a/packages/client/src/components/MkDriveWindow.vue
+++ b/packages/client/src/components/MkDriveWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<XWindow
+<MkWindow
 	ref="window"
 	:initial-width="800"
 	:initial-height="500"
@@ -9,15 +9,15 @@
 	<template #header>
 		{{ i18n.ts.drive }}
 	</template>
-	<XDrive :initial-folder="initialFolder"/>
-</XWindow>
+	<MkDrive :initial-folder="initialFolder"/>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
+import MkDrive from '@/components/MkDrive.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import { i18n } from '@/i18n';
 
 defineProps<{
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index ef4d1596bb3c..08d9ab33af36 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -9,7 +9,7 @@
 		</button>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'folder-toggle' : ''"
+		:name="defaultStore.state.animation ? 'folder-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -25,6 +25,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import tinycolor from 'tinycolor2';
+import { defaultStore } from '@/store';
 
 const localStoragePrefix = 'ui:folder:';
 
@@ -44,10 +45,12 @@ export default defineComponent({
 	data(): ({
 		bg: string | null;
 		showBody: boolean;
+		defaultStore: typeof defaultStore;
 	}) {
 		return {
 			bg: null,
 			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
+			defaultStore,
 		};
 	},
 	watch: {
diff --git a/packages/client/src/components/MkForgotPassword.vue b/packages/client/src/components/MkForgotPassword.vue
index 1b55451c940c..c4ee4451b6e0 100644
--- a/packages/client/src/components/MkForgotPassword.vue
+++ b/packages/client/src/components/MkForgotPassword.vue
@@ -1,8 +1,9 @@
 <template>
-<XModalWindow ref="dialog"
+<MkModalWindow
+	ref="dialog"
 	:width="370"
 	:height="400"
-	@close="dialog.close()"
+	@close="dialog?.close()"
 	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.forgotPassword }}</template>
@@ -28,12 +29,12 @@
 	<div v-else class="bafecedb">
 		{{ i18n.ts._forgotPassword.contactAdmin }}
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import * as os from '@/os';
@@ -45,21 +46,21 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-let dialog: InstanceType<typeof XModalWindow> = $ref();
+const dialog = $ref<InstanceType<typeof MkModalWindow>>();
 
 let username = $ref('');
 let email = $ref('');
 let processing = $ref(false);
 
-async function onSubmit() {
+const onSubmit = async (): Promise<void> => {
 	processing = true;
 	await os.apiWithDialog('request-reset-password', {
 		username,
 		email,
 	});
 	emit('done');
-	dialog.close();
-}
+	dialog?.close();
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
index 764d7525b969..efff2a6aff1c 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="450"
 	:can-close="false"
@@ -17,64 +17,65 @@
 	<MkSpacer :margin-min="20" :margin-max="32">
 		<div class="xkpnjxcv _formRoot">
 			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
-				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				<MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" :max="form[item].max" type="text" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				</MkInput>
+				<MkInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" :max="form[item].max" type="text" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" :max="form[item].max" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				</MkInput>
+				<MkTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" :max="form[item].max" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormTextarea>
-				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
+				</MkTextarea>
+				<MkSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
 					<span v-text="form[item].label || item"></span>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormSwitch>
-				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				</MkSwitch>
+				<MkSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<option v-for="item_ in form[item].enum" :key="item_.value" :value="item_.value">{{ item_.label }}</option>
-				</FormSelect>
-				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				</MkSelect>
+				<MkRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<option v-for="item_ in form[item].options" :key="item_.value" :value="item_.value">{{ item_.label }}</option>
-				</FormRadios>
-				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				</MkRadios>
+				<MkRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormRange>
+				</MkRange>
 				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
 					<span v-text="form[item].content || item"></span>
 				</MkButton>
 			</template>
 		</div>
 	</MkSpacer>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormInput from './form/input.vue';
-import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
-import FormSelect from './form/select.vue';
-import FormRange from './form/range.vue';
+import MkInput from './form/input.vue';
+import MkTextarea from './form/textarea.vue';
+import MkSwitch from './form/switch.vue';
+import MkSelect from './form/select.vue';
+import MkRange from './form/range.vue';
 import MkButton from './MkButton.vue';
-import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkRadios from './form/radios.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
-		XModalWindow,
-		FormInput,
-		FormTextarea,
-		FormSwitch,
-		FormSelect,
-		FormRange,
+		MkModalWindow,
+		MkInput,
+		MkTextarea,
+		MkSwitch,
+		MkSelect,
+		MkRange,
 		MkButton,
-		FormRadios,
+		MkRadios,
 	},
 
 	props: {
@@ -88,11 +89,12 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done'],
+	emits: ['done', 'closed'],
 
 	data() {
 		return {
 			values: {},
+			i18n,
 		};
 	},
 
@@ -104,24 +106,22 @@ export default defineComponent({
 
 	methods: {
 		ok() {
+			const dialog = this.$refs.dialog as InstanceType<typeof MkModalWindow> | null | undefined;
 			this.$emit('done', {
+				canceled: false,
 				result: this.values,
 			});
-			this.$refs.dialog.close();
+			dialog?.close();
 		},
 
 		cancel() {
+			const dialog = this.$refs.dialog as InstanceType<typeof MkModalWindow> | null | undefined;
 			this.$emit('done', {
 				canceled: true,
+				result: undefined,
 			});
-			this.$refs.dialog.close();
+			dialog?.close();
 		},
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-.xkpnjxcv {
-
-}
-</style>
diff --git a/packages/client/src/components/MkFormula.vue b/packages/client/src/components/MkFormula.vue
index 3d18e0a582e4..c1eedb870638 100644
--- a/packages/client/src/components/MkFormula.vue
+++ b/packages/client/src/components/MkFormula.vue
@@ -2,22 +2,13 @@
 <XFormula :formula="formula" :block="block"/>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
 
-export default defineComponent({
-	components: {
-		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
-	},
-	props: {
-		formula: {
-			type: String,
-			required: true,
-		},
-		block: {
-			type: Boolean,
-			required: true,
-		},
-	},
-});
+const XFormula = defineAsyncComponent(() => import('@/components/MkFormulaCore.vue'));
+
+defineProps<{
+	formula: string;
+	block: boolean;
+}>();
 </script>
diff --git a/packages/client/src/components/MkFormulaCore.vue b/packages/client/src/components/MkFormulaCore.vue
index 8db8932fcdf1..3168037a90a5 100644
--- a/packages/client/src/components/MkFormulaCore.vue
+++ b/packages/client/src/components/MkFormulaCore.vue
@@ -1,31 +1,23 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
+<!-- eslint-disable-next-line vue/no-v-html -->
 <div v-if="block" v-html="compiledFormula"></div>
+<!-- eslint-disable-next-line vue/no-v-html -->
 <span v-else v-html="compiledFormula"></span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import katex from 'katex';
 
-export default defineComponent({
-	props: {
-		formula: {
-			type: String,
-			required: true
-		},
-		block: {
-			type: Boolean,
-			required: true
-		}
-	},
-	computed: {
-		compiledFormula(): any {
-			return katex.renderToString(this.formula, {
-				throwOnError: false
-			} as any);
-		}
-	}
+const props = defineProps<{
+	formula: string;
+	block: boolean;
+}>();
+
+const compiledFormula = computed(() => {
+	return katex.renderToString(props.formula, {
+		throwOnError: false,
+	});
 });
 </script>
 
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index d104cd4cd4d8..4eba3afc4e55 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,12 +1,13 @@
 <template>
 <div class="mk-google">
 	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
+	<button @click="search"><i class="ti ti-search"></i> {{ i18n.ts.searchByGoogle }}</button>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	q: string;
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index aa06c00fc640..f700b41e38d6 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -2,8 +2,8 @@
 <div class="mk-media-banner">
 	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
 		<span class="icon"><i class="ti ti-alert-triangle"></i></span>
-		<b>{{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
+		<b>{{ i18n.ts.sensitive }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
 		<audio
@@ -32,6 +32,7 @@
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import { ColdDeviceStorage } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	media: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 9c72653e301b..17aeb185eb29 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -9,8 +9,8 @@
 				</header>
 				<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
 				<div v-if="(showOkButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
-					<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
+					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
+					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -34,6 +34,7 @@ import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -74,6 +75,7 @@ export default defineComponent({
 	data() {
 		return {
 			inputValue: this.input.default ? this.input.default : null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 6e182f7fb858..0db23fc91359 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -3,8 +3,8 @@
 	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
 	<div class="text">
 		<div class="wrapper">
-			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
-			<span style="display: block;">{{ $ts.clickToShow }}</span>
+			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
 </div>
@@ -16,7 +16,9 @@
 		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :cover="false"/>
 		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 	</a>
-	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button>
+	<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true">
+		<div class="hideInner"><i class="ti ti-eye-off"></i></div>
+	</button>
 </div>
 </template>
 
@@ -26,6 +28,7 @@ import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -87,19 +90,24 @@ watch(() => props.image, () => {
 	> .hide {
 		display: block;
 		position: absolute;
-		border-radius: 6px;
-		background-color: var(--accentedBg);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
-		color: var(--accent);
+		top: 0;
+		right: 0;
+		padding: 12px;
 		font-size: 0.8em;
-		padding: 6px 8px;
 		text-align: center;
-		top: 12px;
-		right: 12px;
 
-		> i {
+		.hideInner {
 			display: block;
+			border-radius: 6px;
+			background-color: var(--accentedBg);
+			-webkit-backdrop-filter: var(--blur, blur(15px));
+			backdrop-filter: var(--blur, blur(15px));
+			color: var(--accent);
+			padding: 6px 8px;
+
+			> i {
+				display: block;
+			}
 		}
 	}
 
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 7cbc3d73f286..d999b335287a 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -1,8 +1,8 @@
 <template>
 <div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
 	<div>
-		<b><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
+		<b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
@@ -27,6 +27,7 @@
 import { ref } from 'vue';
 import * as misskey from 'misskey-js';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 4de6ed801866..b67411b9be84 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -3,7 +3,7 @@
 	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
+		<span v-if="(host != localHost) || defaultStore.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
 <a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
@@ -20,6 +20,7 @@ import { } from 'vue';
 import tinycolor from 'tinycolor2';
 import { host as localHost } from '@/config';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	username: string;
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index ecb642ca0f09..d643664bfbe2 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,7 +1,8 @@
 <template>
 <div>
 	<div
-		ref="itemsEl" v-hotkey="keymap"
+		ref="itemsEl"
+		v-hotkey="keymap"
 		class="rrevdjwt _popup _shadow"
 		:class="{ center: align === 'center', asDrawer }"
 		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 4ab6c3ca60b1..63235d98a7b2 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -2,13 +2,13 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
+			<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
 			<span v-if="pageMetadata?.value" class="title">
 				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
 				<span>{{ pageMetadata?.value.title }}</span>
 			</span>
-			<button class="_button" @click="$refs.modal.close()"><i class="ti ti-x"></i></button>
+			<button class="_button" @click="modal?.close()"><i class="ti ti-x"></i></button>
 		</div>
 		<div class="body">
 			<MkStickyContainer>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 536eb55da56e..9016081ef472 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -38,12 +38,12 @@
 	<article v-else ref="articleEl" class="article" :style="{ '--articleTop': `${(el?.clientHeight ?? 0) - (articleEl?.clientHeight ?? 0)}px` }" @contextmenu.stop="onContextmenu">
 		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
-			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			<MkNoteHeader class="header" :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
+					<MkCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div ref="textEl" class="text">
@@ -54,17 +54,17 @@
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else class="translated">
-								<b>{{ $t('translatedFrom', { x: (translation as any /* 定義されていないため */).sourceLang }) }}: </b>
+								<b>{{ i18n.t('translatedFrom', { x: (translation as any /* 定義されていないため */).sourceLang }) }}: </b>
 								<Mfm :text="(translation as any /* 定義されていないため */).text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>
 					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
+						<MkMediaList :media-list="appearNote.files"/>
 					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+					<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"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote"/></div>
 					<button v-if="isLong && collapsed" class="fade _button" @click="collapsedFlag = false">
 						<span>{{ i18n.ts.showMore }}</span>
 					</button>
@@ -74,13 +74,13 @@
 				</div>
 				<MkA v-if="(appearNote as any /* 定義されていないため */).channel && !inChannel" class="channel" :to="`/channels/${(appearNote as any /* 定義されていないため */).channel.id}`"><i class="ti ti-device-tv"></i> {{ (appearNote as any /* 定義されていないため */).channel.name }}</MkA>
 			</div>
-			<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+			<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 			<footer class="footer">
 				<button class="button _button" @click="reply()">
 					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<MkRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="ti ti-plus"></i>
 				</button>
@@ -114,13 +114,13 @@ import { ReactiveVariable } from 'vue/macros';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import MkPoll from '@/components/MkPoll.vue';
+import MkRenoteButton from '@/components/MkRenoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
@@ -181,7 +181,7 @@ onMounted(() => {
 const el = ref<HTMLElement>();
 const articleEl = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
 let appearNote = $computed(() => isPureRenote(note) ? note.renote : note); // 本当はisRenoteを使いたいけど型推論してくれない
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 632fdeef8e25..ed0b7738d1c2 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -50,7 +50,7 @@
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
+					<MkCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
@@ -61,17 +61,17 @@
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else class="translated">
-								<b>{{ $t('translatedFrom', { x: (translation as any /* 定義されていないため */).sourceLang }) }}: </b>
+								<b>{{ i18n.t('translatedFrom', { x: (translation as any /* 定義されていないため */).sourceLang }) }}: </b>
 								<Mfm :text="(translation as any /* 定義されていないため */).text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>
 					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
+						<MkMediaList :media-list="appearNote.files"/>
 					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+					<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"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><MkNoteSimple :note="appearNote.renote"/></div>
 				</div>
 				<MkA v-if="(appearNote as any /* 定義されていないため */).channel && !inChannel" class="channel" :to="`/channels/${(appearNote as any /* 定義されていないため */).channel.id}`"><i class="ti ti-device-tv"></i> {{ (appearNote as any /* 定義されていないため */).channel.name }}</MkA>
 			</div>
@@ -81,12 +81,12 @@
 						<MkTime :time="appearNote.createdAt" mode="detail"/>
 					</MkA>
 				</div>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
 					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<MkRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="ti ti-plus"></i>
 				</button>
@@ -118,12 +118,12 @@ import { ReactiveVariable } from 'vue/macros';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import MkPoll from '@/components/MkPoll.vue';
+import MkRenoteButton from '@/components/MkRenoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
@@ -167,7 +167,7 @@ const isRenote = isPureRenote(note);
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
 let appearNote = $computed(() => isPureRenote(note) ? note.renote : note); // 本当はisRenoteを使いたいけど型推論してくれない
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 95b6b71be919..af255102aa25 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -3,11 +3,11 @@
 	<div class="main">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
-			<XNoteHeader class="header" :note="note" :mini="true"/>
+			<MkNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
 					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-					<XCwButton v-model="showContent" :note="note"/>
+					<MkCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
 					<MkSubNoteContent class="text" :note="note"/>
@@ -27,12 +27,13 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { $i } from '@/account';
 
 const props = withDefaults(defineProps<{
 	note: misskey.entities.Note;
diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
index b3dc11c37d2e..a03f207d22db 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -10,7 +10,7 @@
 	<template #default="{ items: notes }">
 		<div class="giivymft" :class="{ noGap }">
 			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
-				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
+				<MkNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
 			</XList>
 		</div>
 	</template>
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import XList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 751c88a07706..b93c59d1d63d 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -1,8 +1,8 @@
 <template>
-<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
+<div ref="rootEl" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
 	<div class="head">
-		<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
-		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
+		<MkAvatar v-if="(notification.type as any) === 'pollEnded' && 'note' in notification" class="icon" :user="notification.note.user"/>
+		<MkAvatar v-else-if="'user' in notification" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
@@ -14,9 +14,9 @@
 			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
 			<i v-else-if="notification.type === 'pollVote'" class="ti ti-chart-arrows"></i>
-			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
+			<i v-else-if="(notification.type as any) === 'pollEnded'" class="ti ti-chart-arrows"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
-			<XReactionIcon
+			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
 				ref="reactionRef"
 				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
@@ -27,8 +27,8 @@
 	</div>
 	<div class="tail">
 		<header>
-			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
-			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
+			<span v-if="(notification.type as any) === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
+			<MkA v-else-if="'user' in notification" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
 		</header>
@@ -37,7 +37,7 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :custom-emojis="notification.note.emojis"/>
 			<i class="ti ti-quote"></i>
 		</MkA>
-		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
+		<MkA v-if="notification.type === 'renote' && notification.note.renote" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 			<i class="ti ti-quote"></i>
 			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :custom-emojis="notification.note.renote.emojis"/>
 			<i class="ti ti-quote"></i>
@@ -56,7 +56,7 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :custom-emojis="notification.note.emojis"/>
 			<i class="ti ti-quote"></i>
 		</MkA>
-		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+		<MkA v-if="(notification.type as any) === 'pollEnded' && 'note' in notification" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<i class="ti ti-quote"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :custom-emojis="notification.note.emojis"/>
 			<i class="ti ti-quote"></i>
@@ -89,9 +89,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
+import MkReactionTooltip from '@/components/MkReactionTooltip.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { notePage } from '@/filters/note';
@@ -110,67 +110,74 @@ const props = withDefaults(defineProps<{
 	full: false,
 });
 
-const elRef = ref<HTMLElement>(null);
-const reactionRef = ref(null);
+const rootEl = ref<HTMLElement | null>(null);
+const reactionRef = ref<InstanceType<typeof MkReactionIcon> | null>(null);
 
 let readObserver: IntersectionObserver | undefined;
-let connection;
+let connection: misskey.ChannelConnection | undefined;
 
 onMounted(() => {
-	if (!props.notification.isRead) {
+	if (rootEl.value && !props.notification.isRead) {
 		readObserver = new IntersectionObserver((entries, observer) => {
-			if (!entries.some(entry => entry.isIntersecting)) return;
+			if (!entries.some(({ isIntersecting }) => isIntersecting)) return;
 			stream.send('readNotification', {
 				id: props.notification.id,
 			});
 			observer.disconnect();
 		});
 
-		readObserver.observe(elRef.value);
+		readObserver.observe(rootEl.value);
 
 		connection = stream.useChannel('main');
-		connection.on('readAllNotifications', () => readObserver.disconnect());
+		connection.on('readAllNotifications', () => {
+			readObserver?.disconnect();
+		});
 
-		watch(props.notification.isRead, () => {
-			readObserver.disconnect();
+		watch($$(props.notification.isRead), () => {
+			readObserver?.disconnect();
 		});
 	}
 });
 
 onUnmounted(() => {
-	if (readObserver) readObserver.disconnect();
-	if (connection) connection.dispose();
+	readObserver?.disconnect();
+	connection?.dispose();
 });
 
 const followRequestDone = ref(false);
 const groupInviteDone = ref(false);
 
-const acceptFollowRequest = () => {
+const acceptFollowRequest = (): void => {
+	if (props.notification.type !== 'followRequestAccepted') return;
 	followRequestDone.value = true;
 	os.api('following/requests/accept', { userId: props.notification.user.id });
 };
 
-const rejectFollowRequest = () => {
+const rejectFollowRequest = (): void => {
+	if (props.notification.type !== 'followRequestAccepted') return;
 	followRequestDone.value = true;
 	os.api('following/requests/reject', { userId: props.notification.user.id });
 };
 
-const acceptGroupInvitation = () => {
+const acceptGroupInvitation = (): void => {
+	if (props.notification.type !== 'groupInvited') return;
 	groupInviteDone.value = true;
 	os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
 };
 
-const rejectGroupInvitation = () => {
+const rejectGroupInvitation = (): void => {
+	if (props.notification.type !== 'groupInvited') return;
 	groupInviteDone.value = true;
 	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
 };
 
 useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
+	if (props.notification.type !== 'reaction') return;
+	os.popup(MkReactionTooltip, {
 		showing,
 		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
 		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
+		targetElement: reactionRef.value?.$el,
 	}, {}, 'closed');
 });
 </script>
diff --git a/packages/client/src/components/MkNotificationSettingWindow.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
index 75bea2976c0e..cff870c8dd42 100644
--- a/packages/client/src/components/MkNotificationSettingWindow.vue
+++ b/packages/client/src/components/MkNotificationSettingWindow.vue
@@ -1,12 +1,12 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="400"
 	:height="450"
 	:with-ok-button="true"
 	:ok-button-disabled="false"
 	@ok="ok()"
-	@close="dialog.close()"
+	@close="dialog?.close()"
 	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.notificationSetting }}</template>
@@ -24,7 +24,7 @@
 			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
 		</div>
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -33,55 +33,58 @@ import { notificationTypes } from 'misskey-js';
 import MkSwitch from './form/switch.vue';
 import MkInfo from './MkInfo.vue';
 import MkButton from './MkButton.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
+import { typedEntries } from '@/scripts/tms/utils';
+
+type NotificationType = typeof notificationTypes[number];
 
 const emit = defineEmits<{
-	(ev: 'done', v: { includingTypes: string[] | null }): void,
+	(ev: 'done', v: { includingTypes: NotificationType[] | null }): void,
 	(ev: 'closed'): void,
 }>();
 
 const props = withDefaults(defineProps<{
-	includingTypes?: typeof notificationTypes[number][] | null;
+	includingTypes?: NotificationType[] | null;
 	showGlobalToggle?: boolean;
 }>(), {
 	includingTypes: () => [],
 	showGlobalToggle: true,
 });
 
-let includingTypes = $computed(() => props.includingTypes || []);
+const includingTypes = $computed(() => props.includingTypes || []);
+
+const dialog = $ref<InstanceType<typeof MkModalWindow>>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const typesMap = $ref({} as Record<NotificationType, boolean>);
 
-let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
-let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
+const useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
 
 for (const ntype of notificationTypes) {
 	typesMap[ntype] = includingTypes.includes(ntype);
 }
 
-function ok() {
+const ok = (): void => {
 	if (useGlobalSetting) {
 		emit('done', { includingTypes: null });
 	} else {
 		emit('done', {
-			includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
-				.filter(type => typesMap[type]),
+			includingTypes: typedEntries($$(typesMap).value).flatMap(([type, bool]) => bool ? [type] : []),
 		});
 	}
 
-	dialog.close();
-}
+	dialog?.close();
+};
 
-function disableAll() {
+const disableAll = (): void => {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = false;
+		typesMap[type] = false;
 	}
-}
+};
 
-function enableAll() {
+const enableAll = (): void => {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = true;
+		typesMap[type] = true;
 	}
-}
+};
 </script>
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index 60fd17de6928..74f204cf3e28 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -9,8 +9,8 @@
 
 	<template #default="{ items: notifications }">
 		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
-			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
+			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+			<MkNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</XList>
 	</template>
 </MkPagination>
@@ -18,17 +18,17 @@
 
 <script lang="ts" setup>
 import { onUnmounted, onMounted, computed, ref } from 'vue';
-import { notificationTypes } from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import XNotification from '@/components/MkNotification.vue';
+import MkNotification from '@/components/MkNotification.vue';
 import XList from '@/components/MkDateSeparatedList.vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import { stream } from '@/stream';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	includeTypes?: typeof notificationTypes[number][];
+	includeTypes?: typeof Misskey.notificationTypes[number][];
 	unreadOnly?: boolean;
 }>();
 
@@ -39,13 +39,13 @@ const pagination: Paging = {
 	limit: 10,
 	params: computed(() => ({
 		includeTypes: props.includeTypes ?? undefined,
-		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
+		excludeTypes: props.includeTypes ? undefined : $i?.mutingNotificationTypes,
 		unreadOnly: props.unreadOnly,
 	})),
 };
 
-const onNotification = (notification) => {
-	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
+const onNotification = (notification: Misskey.entities.Notification): void => {
+	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : !!$i?.mutingNotificationTypes.includes(notification.type);
 	if (isMuted || document.visibilityState === 'visible') {
 		stream.send('readNotification', {
 			id: notification.id,
@@ -53,14 +53,14 @@ const onNotification = (notification) => {
 	}
 
 	if (!isMuted) {
-		pagingComponent.value.prepend({
+		pagingComponent.value?.prepend({
 			...notification,
 			isRead: document.visibilityState === 'visible',
 		});
 	}
 };
 
-let connection;
+let connection: Misskey.ChannelConnection | undefined;
 
 onMounted(() => {
 	connection = stream.useChannel('main');
@@ -92,7 +92,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	if (connection) connection.dispose();
+	connection?.dispose();
 });
 </script>
 
diff --git a/packages/client/src/components/MkObjectView.vue b/packages/client/src/components/MkObjectView.vue
index 55578a37f6b0..64a2203c6c84 100644
--- a/packages/client/src/components/MkObjectView.vue
+++ b/packages/client/src/components/MkObjectView.vue
@@ -8,13 +8,7 @@
 import { } from 'vue';
 import XValue from './MkObjectView.value.vue';
 
-const props = defineProps<{
+defineProps<{
 	value: Record<string, unknown>;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.zhyxdalp {
-
-}
-</style>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index 9ca8dd45a7d0..7a2916587bc7 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<XWindow
+<MkWindow
 	ref="windowEl"
 	:initial-width="500"
 	:initial-height="500"
@@ -20,13 +20,13 @@
 	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
 		<RouterView :key="reloadCount" :router="router"/>
 	</div>
-</XWindow>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
 import { ComputedRef, provide } from 'vue';
 import RouterView from '@/components/global/RouterView.vue';
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout';
 import { copyText } from '@/scripts/tms/clipboard';
 import { url } from '@/config';
@@ -46,13 +46,13 @@ defineEmits<{
 const router = new Router(routes, props.initialPath);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let windowEl = $ref<InstanceType<typeof XWindow>>();
+const windowEl = $ref<InstanceType<typeof MkWindow>>();
 const history = $ref<{ path: string; key: any; }[]>([{
 	path: router.getCurrentPath(),
 	key: router.getCurrentKey(),
 }]);
 const buttonsLeft = $computed(() => {
-	const buttons = [];
+	const buttons: unknown[] = [];
 
 	if (history.length > 1) {
 		buttons.push({
@@ -64,7 +64,7 @@ const buttonsLeft = $computed(() => {
 	return buttons;
 });
 const buttonsRight = $computed(() => {
-	const buttons = [{
+	const buttons: unknown[] = [{
 		icon: 'ti ti-reload',
 		title: i18n.ts.reload,
 		onClick: reload,
@@ -100,40 +100,40 @@ const contextmenu = $computed(() => ([{
 }, {
 	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
-	action: () => {
+	action: (): void => {
 		window.open(url + router.getCurrentPath(), '_blank');
-		windowEl.close();
+		windowEl?.close();
 	},
 }, {
 	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
-	action: () => {
+	action: (): void => {
 		copyText(url + router.getCurrentPath());
 	},
 }]));
 
-function back() {
+const back = (): void => {
 	history.pop();
 	router.replace(history[history.length - 1].path, history[history.length - 1].key);
-}
+};
 
-function reload() {
+const reload = (): void => {
 	reloadCount++;
-}
+};
 
-function close() {
-	windowEl.close();
-}
+const close = (): void => {
+	windowEl?.close();
+};
 
-function expand() {
+const expand = (): void => {
 	mainRouter.push(router.getCurrentPath(), 'forcePage');
-	windowEl.close();
-}
+	windowEl?.close();
+};
 
-function popout() {
-	_popout(router.getCurrentPath(), windowEl.$el);
-	windowEl.close();
-}
+const popout = (): void => {
+	_popout(router.getCurrentPath(), windowEl?.$el);
+	windowEl?.close();
+};
 
 defineExpose({
 	close,
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 352b35d6a971..852defdb51e2 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -6,12 +6,12 @@
 			<span>
 				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
-				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
+				<span v-if="showResult" class="votes">({{ i18n.t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
 		</li>
 	</ul>
 	<p v-if="!readOnly">
-		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
+		<span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
 		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
 		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index f81ac707012e..0da30b9eb7e9 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -19,6 +19,7 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 import { disableContextmenu } from '@/scripts/touch';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -74,7 +75,7 @@ export default defineComponent({
 		},
 		async rename(file) {
 			const { canceled, result } = await os.inputText({
-				title: this.$ts.enterFileName,
+				title: i18n.ts.enterFileName,
 				default: file.name,
 				allowEmpty: false,
 			});
@@ -90,9 +91,9 @@ export default defineComponent({
 
 		async describe(file) {
 			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: this.$ts.describeFile,
+				title: i18n.ts.describeFile,
 				input: {
-					placeholder: this.$ts.inputNewDescription,
+					placeholder: i18n.ts.inputNewDescription,
 					default: file.comment !== null ? file.comment : '',
 				},
 				image: file,
@@ -114,19 +115,19 @@ export default defineComponent({
 			if (disableContextmenu && ev.type === 'contextmenu') return;
 			if (this.menu) return;
 			this.menu = os.popupMenu([{
-				text: this.$ts.renameFile,
+				text: i18n.ts.renameFile,
 				icon: 'ti ti-forms',
 				action: () => { this.rename(file); },
 			}, {
-				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
+				text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
 				icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
 				action: () => { this.toggleSensitive(file); },
 			}, {
-				text: this.$ts.describeFile,
+				text: i18n.ts.describeFile,
 				icon: 'ti ti-forms',
 				action: () => { this.describe(file); },
 			}, {
-				text: this.$ts.attachCancel,
+				text: i18n.ts.attachCancel,
 				icon: 'ti ti-circle-x',
 				action: () => { this.detachMedia(file.id); },
 			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
diff --git a/packages/client/src/components/MkReactionIcon.vue b/packages/client/src/components/MkReactionIcon.vue
index d4b5e786565a..ce220274698b 100644
--- a/packages/client/src/components/MkReactionIcon.vue
+++ b/packages/client/src/components/MkReactionIcon.vue
@@ -1,13 +1,14 @@
 <template>
-<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle" :use-fallback-icon="useFallbackIcon"/>
+<MkEmoji :emoji="reaction" :custom-emojis="customEmojis ?? []" :is-reaction="true" :normal="true" :no-style="noStyle" :use-fallback-icon="useFallbackIcon"/>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { CustomEmoji } from 'misskey-js/built/entities';
 
-const props = defineProps<{
+defineProps<{
 	reaction: string;
-	customEmojis?: any[]; // TODO
+	customEmojis?: CustomEmoji[];
 	noStyle?: boolean;
 	useFallbackIcon?: boolean;
 }>();
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index 8d2451867cee..f7f22af4443d 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="beeadbfb">
-		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+		<MkReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
 		<div class="name">{{ getReactionName(reaction) }}</div>
 	</div>
 </MkTooltip>
@@ -9,14 +9,15 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { CustomEmoji } from 'misskey-js/built/entities';
 import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import { getEmojiName } from '@/scripts/emojilist';
 
 defineProps<{
 	showing: boolean;
 	reaction: string;
-	emojis: any[]; // TODO
+	emojis: CustomEmoji[];
 	targetElement: HTMLElement;
 }>();
 
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 4f53302975e7..36b3d6ee0bed 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -2,7 +2,7 @@
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="bqxuuuey">
 		<div class="reaction">
-			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+			<MkReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
 			<div class="name">{{ getReactionName(reaction) }}</div>
 		</div>
 		<div class="users">
@@ -18,16 +18,17 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { UserDetailed, CustomEmoji } from 'misskey-js/built/entities';
 import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import { getEmojiName } from '@/scripts/emojilist';
 
 defineProps<{
 	showing: boolean;
 	reaction: string;
-	users: any[]; // TODO
+	users: UserDetailed[];
 	count: number;
-	emojis: any[]; // TODO
+	emojis: CustomEmoji[];
 	targetElement: HTMLElement;
 }>();
 
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index c6e73d917ebc..e4e65c6aeb05 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -1,30 +1,22 @@
 <template>
-<Transition
-	:enter-active-class="defaultStore.state.animation ? $style.transition_x_enterActive : ''"
-	:leave-active-class="defaultStore.state.animation ? $style.transition_x_leaveActive : ''"
-	:enter-from-class="defaultStore.state.animation ? $style.transition_x_enterFrom : ''"
-	:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
-	appear
->
-	<div v-if="count > 0" :class="$style.root">
-		<button
-			ref="buttonRef"
-			class="hkzvhatu mk-reactions-viewer-reaction"
-			:class="['_button', useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.reacted]: note.myReaction === reaction, [$style.canToggle]: canToggle }]"
-			@click="react"
-		>
-			<XReactionIcon :class="$style.reactionIcon" :reaction="reaction" :custom-emojis="note.emojis" use-fallback-icon/>
-			<span :class="$style.reactionCount">{{ count }}</span>
-		</button>
-	</div>
-</Transition>
+<div v-if="count > 0" class="mk-reactions-viewer-reaction" :class="$style.root">
+	<button
+		ref="buttonRef"
+		class="hkzvhatu _button"
+		:class="[tmsStore.state.useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.reacted]: reacted, [$style.canToggle]: canToggle }]"
+		@click="react"
+	>
+		<MkReactionIcon :class="$style.reactionIcon" :reaction="reaction" :custom-emojis="note.emojis" use-fallback-icon/>
+		<span :class="$style.reactionCount">{{ count }}</span>
+	</button>
+</div>
 </template>
 
 <script lang="ts" setup>
 import { computed, onMounted, shallowRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
@@ -40,12 +32,12 @@ const props = defineProps<{
 	note: misskey.entities.Note;
 }>();
 
-const useEasyReactionsViewer = computed(() => tmsStore.state.useEasyReactionsViewer);
-
 const buttonRef = shallowRef<HTMLElement>();
 
 const canToggle = computed(() => !props.reaction.match(/@\w/) && !!$i);
 
+const reacted = computed(() => props.note.myReaction === props.reaction);
+
 const react = (): void => {
 	const param = {
 		reaction: props.reaction,
@@ -109,21 +101,6 @@ useTooltip(buttonRef, async (showing) => {
 </script>
 
 <style lang="scss" module>
-.transition_x_enterActive, .transition_x_leaveActive {
-	transition: opacity 0.1s cubic-bezier(0, 0.5, 0.5, 1), transform 0.1s cubic-bezier(0, 0.5, 0.5, 1) !important;
-}
-
-.transition_x_enterFrom, .transition_x_leaveTo {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.transition_x_leaveActive {
-	position: absolute;
-	visibility: hidden;
-	pointer-events: none;
-}
-
 .root {
 	.viewTypeNormal {
 		display: inline-block;
diff --git a/packages/client/src/components/MkSample.vue b/packages/client/src/components/MkSample.vue
index 1169654d0971..d5da8e87ab8d 100644
--- a/packages/client/src/components/MkSample.vue
+++ b/packages/client/src/components/MkSample.vue
@@ -36,6 +36,7 @@ import MkTextarea from '@/components/form/textarea.vue';
 import MkRadio from '@/components/form/radio.vue';
 import * as os from '@/os';
 import * as config from '@/config';
+import { $i } from '@/account';
 
 export default defineComponent({
 	components: {
@@ -51,7 +52,7 @@ export default defineComponent({
 			text: '',
 			flag: true,
 			radio: 'misskey',
-			mfm: `Hello world! This is an @example mention. BTW you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
+			mfm: `Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
 		};
 	},
 
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 51ce632f957a..575e20e2daa5 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -41,9 +41,9 @@
 		</div>
 	</div>
 	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Twitter' }) }}</a>
+		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'GitHub' }) }}</a>
+		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 </form>
 </template>
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
index fd2724451647..f49ffc853221 100644
--- a/packages/client/src/components/MkSigninDialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="370"
 	:height="400"
@@ -9,16 +9,16 @@
 	<template #header>{{ i18n.ts.login }}</template>
 
 	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import MkSignin from '@/components/MkSignin.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
 	autoSet?: boolean;
 	message?: string,
 }>(), {
@@ -27,20 +27,20 @@ const props = withDefaults(defineProps<{
 });
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
+	(ev: 'done', r: any): void;
 	(ev: 'closed'): void;
 	(ev: 'cancelled'): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $ref<InstanceType<typeof MkModalWindow>>();
 
-function onClose() {
+const onClose = (): void => {
 	emit('cancelled');
-	dialog.close();
-}
+	dialog?.close();
+};
 
-function onLogin(res) {
+const onLogin = (res: any): void => {
 	emit('done', res);
-	dialog.close();
-}
+	dialog?.close();
+};
 </script>
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
index b1057536cb28..fb837c0dce43 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="366"
 	:height="500"
@@ -10,16 +10,16 @@
 
 	<div class="_monolithic_">
 		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
+			<MkSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
 		</div>
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XSignup from '@/components/MkSignup.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkSignup from '@/components/MkSignup.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = $ref<InstanceType<typeof MkModalWindow>>();
 
 const onSignup = (res): void => {
 	emit('done', res);
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index af83d1368600..e1acf2cdac29 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -8,12 +8,12 @@
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">
-		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<XMediaList :media-list="note.files"/>
+		<summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary>
+		<MkMediaList :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>{{ i18n.ts.poll }}</summary>
-		<XPoll :note="note"/>
+		<MkPoll :note="note"/>
 	</details>
 	<button v-if="isLong && collapsed" class="fade _button" @click="collapsedFlag = false">
 		<span>{{ i18n.ts.showMore }}</span>
@@ -27,8 +27,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as misskey from 'misskey-js';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { tmsStore } from '@/tms/store';
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 1ba48bf77de7..ba8f5245c8b1 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -1,13 +1,15 @@
 <template>
-<XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+<MkNotes ref="tlComponent" :no-gap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
 </template>
 
 <script lang="ts" setup>
 import { computed, provide, onUnmounted } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
+import * as Misskey from 'misskey-js';
+import MkNotes from '@/components/MkNotes.vue';
 import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	src: string;
@@ -24,10 +26,10 @@ const emit = defineEmits<{
 
 provide('inChannel', computed(() => props.src === 'channel'));
 
-const tlComponent: InstanceType<typeof XNotes> = $ref();
+const tlComponent = $ref<InstanceType<typeof MkNotes>>();
 
-const prepend = note => {
-	tlComponent.pagingComponent?.prepend(note);
+const prepend = (note: Misskey.entities.Note): void => {
+	tlComponent?.pagingComponent?.prepend(note);
 
 	emit('note');
 
@@ -36,24 +38,24 @@ const prepend = note => {
 	}
 };
 
-const onUserAdded = () => {
-	tlComponent.pagingComponent?.reload();
+const onUserAdded = (): void => {
+	tlComponent?.pagingComponent?.reload();
 };
 
-const onUserRemoved = () => {
-	tlComponent.pagingComponent?.reload();
+const onUserRemoved = (): void => {
+	tlComponent?.pagingComponent?.reload();
 };
 
-const onChangeFollowing = () => {
-	if (!tlComponent.pagingComponent?.backed) {
-		tlComponent.pagingComponent?.reload();
+const onChangeFollowing = (): void => {
+	if (!tlComponent?.pagingComponent?.backed) {
+		tlComponent?.pagingComponent?.reload();
 	}
 };
 
-let endpoint;
-let query;
-let connection;
-let connection2;
+let endpoint: keyof Misskey.Endpoints | undefined;
+let query: Misskey.Endpoints[keyof Misskey.Endpoints]['req'] | undefined;
+let connection: Misskey.ChannelConnection | undefined;
+let connection2: Misskey.ChannelConnection | undefined;
 
 if (props.src === 'antenna') {
 	endpoint = 'antennas/notes';
@@ -93,7 +95,7 @@ if (props.src === 'antenna') {
 	query = {
 		visibility: 'specified',
 	};
-	const onNote = note => {
+	const onNote = (note: Misskey.entities.Note): void => {
 		if (note.visibility === 'specified') {
 			prepend(note);
 		}
@@ -122,6 +124,10 @@ if (props.src === 'antenna') {
 	connection.on('note', prepend);
 }
 
+if (!endpoint) {
+	throw new Error();
+}
+
 const pagination = {
 	endpoint: endpoint,
 	limit: 10,
@@ -129,14 +135,12 @@ const pagination = {
 };
 
 onUnmounted(() => {
-	connection.dispose();
-	if (connection2) connection2.dispose();
+	connection?.dispose();
+	connection2?.dispose();
 });
 
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
+// const timetravel = (date?: Date) => {
+// 	this.date = date;
+// 	this.$refs.tl.reload();
+// };
 </script>
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 24473f1ab07f..b87c05a28c86 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-toast">
-	<Transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
+	<Transition :name="defaultStore.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
 		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
 			<div class="message">
 				{{ message }}
@@ -13,6 +13,7 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 defineProps<{
 	message: string;
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
index b846034a24ad..47cf668597b9 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -1,31 +1,31 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="400"
 	:height="450"
 	:with-ok-button="true"
 	:ok-button-disabled="false"
 	:can-close="false"
-	@close="dialog.close()"
+	@close="dialog?.close()"
 	@closed="$emit('closed')"
 	@ok="ok()"
 >
-	<template #header>{{ title || $ts.generateAccessToken }}</template>
+	<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
 	<div v-if="information" class="_section">
 		<MkInfo warn>{{ information }}</MkInfo>
 	</div>
 	<div class="_section">
 		<MkInput v-model="name">
-			<template #label>{{ $ts.name }}</template>
+			<template #label>{{ i18n.ts.name }}</template>
 		</MkInput>
 	</div>
 	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
-		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
-		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
-		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
+		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.permission }}</b></div>
+		<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
+		<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
+		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch>
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -35,7 +35,8 @@ import MkInput from './form/input.vue';
 import MkSwitch from './form/switch.vue';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	title?: string | null;
@@ -54,9 +55,9 @@ const emit = defineEmits<{
 	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-let name = $ref(props.initialName);
-let permissions = $ref({});
+const dialog = $ref<InstanceType<typeof MkModalWindow>>();
+let name = $ref(props.initialName ?? '');
+let permissions = $ref({} as Record<string, boolean>);
 
 if (props.initialPermissions) {
 	for (const kind of props.initialPermissions) {
@@ -68,23 +69,23 @@ if (props.initialPermissions) {
 	}
 }
 
-function ok(): void {
+const ok = (): void => {
 	emit('done', {
 		name: name,
 		permissions: Object.keys(permissions).filter(p => permissions[p]),
 	});
-	dialog.close();
-}
+	dialog?.close();
+};
 
-function disableAll(): void {
+const disableAll = (): void => {
 	for (const p in permissions) {
 		permissions[p] = false;
 	}
-}
+};
 
-function enableAll(): void {
+const enableAll = (): void => {
 	for (const p in permissions) {
 		permissions[p] = true;
 	}
-}
+};
 </script>
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
index 9dba0c735097..e66dd55db74b 100644
--- a/packages/client/src/components/MkTooltip.vue
+++ b/packages/client/src/components/MkTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
+<Transition :name="defaultStore.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
 	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
 		<slot>
 			<Mfm v-if="asMfm" :text="text"/>
@@ -13,6 +13,7 @@
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import * as os from '@/os';
 import { calcPopupPosition } from '@/scripts/popup-position';
+import { defaultStore } from '@/store';
 
 const props = withDefaults(defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 841fab7f9168..c6a5cfe33c76 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -28,7 +28,7 @@
 			scrolling="no"
 			frameborder="no"
 			:style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }"
-			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
+			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
 		/>
 	</div>
 	<div :class="$style.action">
@@ -84,6 +84,7 @@ import * as os from '@/os';
 import { deviceKind } from '@/scripts/device-kind';
 import MkButton from '@/components/MkButton.vue';
 import { versatileLang } from '@/scripts/intl-const';
+import { defaultStore } from '@/store';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index 363225f1a4de..50ce2132f816 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
-	<Transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
+	<Transition :name="defaultStore.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
 		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" popup/>
 	</Transition>
 </div>
@@ -10,6 +10,7 @@
 import { onMounted } from 'vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index d3705c3d8dde..cd5dda21abcd 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -6,7 +6,7 @@
 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>
 	</div>
-	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 	<div class="description">
 		<div v-if="user.description" class="mfm">
 			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
@@ -33,6 +33,7 @@ import * as misskey from 'misskey-js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
+import { $i } from '@/account';
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 4c95b3512956..4198fe0030eb 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -1,9 +1,9 @@
 <template>
-<Transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
+<Transition :name="defaultStore.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
 	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
 		<div v-if="user != null" class="info">
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
-				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 			</div>
 			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 			<div class="title">
@@ -15,13 +15,13 @@
 			</div>
 			<div class="status">
 				<div>
-					<p>{{ $ts.notes }}</p><span>{{ user.notesCount }}</span>
+					<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
 				</div>
 				<div>
-					<p>{{ $ts.following }}</p><span>{{ user.followingCount }}</span>
+					<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
 				</div>
 				<div>
-					<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
+					<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
 				</div>
 			</div>
 			<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
@@ -40,6 +40,9 @@ import * as misskey from 'misskey-js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index 95bb41714522..0187c135e7f1 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialogEl"
 	:with-ok-button="true"
 	:ok-button-disabled="selected == null"
@@ -48,7 +48,7 @@
 			</div>
 		</div>
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
@@ -56,7 +56,7 @@ import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import MkInput from '@/components/form/input.vue';
 import FormSplit from '@/components/form/split.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
@@ -72,7 +72,7 @@ let host = $ref('');
 let users: misskey.entities.UserDetailed[] = $ref([]);
 let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
 let selected: misskey.entities.UserDetailed | null = $ref(null);
-let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
+let dialogEl = $ref<InstanceType<typeof MkModalWindow>>();
 
 const search = (): void => {
 	if (username === '' && host === '') {
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index e1debbaef4d8..3d45ceffd6ff 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -40,14 +40,16 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { disableContextmenu } from '@/scripts/touch';
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
-
-type Widget = {
+export type Widget = {
 	name: string;
 	id: string;
 	data: Record<string, any>;
 };
 
+export type EditedWidget = Pick<Widget, 'id' | 'data'>;
+
+const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
+
 const props = defineProps<{
 	widgets: Widget[];
 	edit: boolean;
@@ -57,7 +59,7 @@ const emit = defineEmits<{
 	(ev: 'updateWidgets', widgets: Widget[]): void;
 	(ev: 'addWidget', widget: Widget): void;
 	(ev: 'removeWidget', widget: Widget): void;
-	(ev: 'updateWidget', widget: Partial<Widget>): void;
+	(ev: 'updateWidget', widget: EditedWidget): void;
 	(ev: 'exit'): void;
 }>();
 
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 9d85f47ca6b7..42639691ad04 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
+<Transition :name="defaultStore.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
 	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
 		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
@@ -41,6 +41,7 @@ import * as os from '@/os';
 import { MenuItem } from '@/types/menu';
 import { i18n } from '@/i18n';
 import { disableContextmenu } from '@/scripts/touch';
+import { defaultStore } from '@/store';
 
 const minHeight = 50;
 const minWidth = 250;
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
index 0c5545bdbc05..36616746c7fc 100644
--- a/packages/client/src/components/MkYoutubePlayer.vue
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -1,26 +1,42 @@
 <template>
-<XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
+<MkWindow
+	:initial-width="640"
+	:initial-height="402"
+	:can-resize="true"
+	:close-button="true"
+>
 	<template #header>
 		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
 		<span>{{ title ?? 'YouTube' }}</span>
 	</template>
 
-	<div class="poamfof">
-		<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-			<div v-if="player.url && (player.url.startsWith('http://') || player.url.startsWith('https://'))" class="player">
-				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+	<div class="poamfof" :class="$style.root">
+		<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="player.url && (player.url.startsWith('http://') || player.url.startsWith('https://'))" class="player" :class="$style.player">
+				<iframe
+					v-if="!fetching"
+					:class="$style.iframe"
+					:src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')"
+					frameborder="0"
+					allow="autoplay; encrypted-media"
+					allowfullscreen
+				/>
 			</div>
 			<span v-else>invalid url</span>
 		</Transition>
 		<MkLoading v-if="fetching"/>
 		<MkError v-else-if="!player.url" @retry="ytFetch()"/>
 	</div>
-</XWindow>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
-import XWindow from '@/components/MkWindow.vue';
-import { lang } from '@/config';
+import type { summaly } from 'summaly';
+import MkWindow from '@/components/MkWindow.vue';
+import { defaultStore } from '@/store';
+import { versatileLang } from '@/scripts/intl-const';
+
+type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
 const props = defineProps<{
 	url: string;
@@ -31,44 +47,56 @@ if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid
 
 let fetching = $ref(true);
 let title = $ref<string | null>(null);
-let player = $ref({
+let player = $ref<SummalyResult['player']>({
 	url: null,
 	width: null,
 	height: null,
+	allow: [],
 });
 
-const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP').replace('ja-CJP', 'ja-JP');
-
 const ytFetch = (): void => {
 	fetching = true;
-	fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
-		res.json().then(info => {
-			if (info.url == null) return;
+	window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`).then(res => {
+		if (!res.ok) {
+			title = null;
+			fetching = false;
+			player = {
+				url: null,
+				width: null,
+				height: null,
+				allow: [],
+			};
+			return;
+		}
+		res.json().then((info: SummalyResult) => {
 			title = info.title;
 			fetching = false;
-			player = info.player;
+			// Playerが空になる/欠落することがあるためデフォルト値を設定する
+			player = {
+				...{ url: null, width: null, height: null, allow: [] },
+				...info.player,
+			};
 		});
 	});
 };
 
 ytFetch();
-
 </script>
 
-<style lang="scss">
-.poamfof {
+<style lang="scss" module>
+.root {
 	position: relative;
 	overflow: hidden;
 	height: 100%;
+}
 
-	.player {
-		position: absolute;
-		inset: 0;
+.player {
+	position: absolute;
+	inset: 0;
+}
 
-		iframe {
-			width: 100%;
-			height: 100%;
-		}
-	}
+.iframe {
+	width: 100%;
+	height: 100%;
 }
 </style>
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 49f24e06681e..d1bee1c61839 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
 	<div v-if="pending">
 		<MkLoading/>
 	</div>
@@ -8,8 +8,8 @@
 	</div>
 	<div v-else>
 		<div class="wszdbhzo">
-			<div><i class="ti ti-alert-triangle"></i> {{ $ts.somethingHappened }}</div>
-			<MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ $ts.retry }}</MkButton>
+			<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div>
+			<MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
 		</div>
 	</div>
 </transition>
@@ -18,6 +18,8 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import MkButton from '@/components/MkButton.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -72,6 +74,8 @@ export default defineComponent({
 			rejected,
 			result,
 			retry,
+			defaultStore,
+			i18n,
 		};
 	},
 });
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/MkAcct.vue
index 1592e745ff89..f75b615de669 100644
--- a/packages/client/src/components/global/MkAcct.vue
+++ b/packages/client/src/components/global/MkAcct.vue
@@ -1,7 +1,7 @@
 <template>
 <span class="mk-acct">
 	<span class="name">@{{ user.username }}</span>
-	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
+	<span v-if="user.host || detail || defaultStore.state.showFullAcct" class="host">@{{ user.host || host }}</span>
 </span>
 </template>
 
@@ -9,6 +9,7 @@
 import { User, UserLite, UserDetailed } from 'misskey-js/built/entities';
 import { toUnicode } from 'punycode/';
 import { host as hostRaw } from '@/config';
+import { defaultStore } from '@/store';
 
 defineProps<{
 	user: User | UserLite | UserDetailed;
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index a80efb142cb9..987775d71d3f 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -9,9 +9,9 @@
 	<div v-else class="menu">
 		<div class="body">
 			<div>Ads by {{ host }}</div>
-			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
-			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
+			<!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>-->
+			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
 		</div>
 	</div>
 </div>
@@ -25,6 +25,7 @@ import { host } from '@/config';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 type Ad = (typeof instance)['ads'][number];
 
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index ab1f90df87e7..2164dfddc2a1 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -1,9 +1,9 @@
 <template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 606e0ef2ed9d..32cfafbeb51f 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -1,9 +1,9 @@
 <template>
-<Transition :name="$store.state.animation ? 'zoom' : ''" appear>
+<Transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
 	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
-		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
+		<MkButton class="button" @click="emit('retry')">{{ i18n.ts.retry }}</MkButton>
 	</div>
 </transition>
 </template>
@@ -11,6 +11,11 @@
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+
+const emit = defineEmits<{
+	(ev: 'retry'): void;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 48e072e34818..e38f097ceaad 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -4,19 +4,21 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
+import { CustomEmoji } from 'misskey-js/built/entities';
 import MfmCore from '@/components/mfm';
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
 	text: string;
 	plain?: boolean;
 	nowrap?: boolean;
 	author?: any;
-	customEmojis?: any;
+	customEmojis?: CustomEmoji[];
 	isNote?: boolean;
 }>(), {
 	plain: false,
 	nowrap: false,
 	author: null,
+	customEmojis: () => [],
 	isNote: true,
 });
 </script>
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
index 431f0b08df7d..8861da83e40c 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -1,42 +1,31 @@
 <template>
 <div class="voxdxuby">
-	<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
-	<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
+	<MkNote v-if="note && !block.detailed" :key="`${note.id}:normal`" v-model:note="note"/>
+	<MkNoteDetailed v-if="note && block.detailed" :key="`${note.id}:detail`" v-model:note="note"/>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { Note } from 'misskey-js/built/entities';
+import MkNote from '@/components/MkNote.vue';
+import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import * as os from '@/os';
 import { NoteBlock } from '@/scripts/hpml/block';
 
-export default defineComponent({
-	components: {
-		XNote,
-		XNoteDetailed,
-	},
-	props: {
-		block: {
-			type: Object as PropType<NoteBlock>,
-			required: true
-		}
-	},
-	setup(props, ctx) {
-		const note: Ref<Record<string, any> | null> = ref(null);
+const props = defineProps<{
+	block: NoteBlock;
+}>();
 
-		onMounted(() => {
-			os.api('notes/show', { noteId: props.block.note })
-			.then(result => {
-				note.value = result;
-			});
-		});
+const note = ref<Note | null>(null);
+
+onMounted(() => {
+	if (!props.block.note) return;
 
-		return {
-			note
-		};
-	}
+	os.api('notes/show', { noteId: props.block.note })
+		.then(result => {
+			note.value = result;
+		});
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 48ab5878c93d..ba09775445da 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -16,6 +16,8 @@ import { apiUrl } from '@/config';
 import * as os from '@/os';
 import { PostBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
 	components: {
@@ -25,16 +27,16 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<PostBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
-			text: this.hpml.interpolate(this.block.text),
+			text: this.hpml.interpolate(this.block.text) ?? '',
 			posted: false,
 			posting: false,
 		};
@@ -42,21 +44,23 @@ export default defineComponent({
 	watch: {
 		'hpml.vars': {
 			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
+				this.text = this.hpml.interpolate(this.block.text) ?? '';
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 	methods: {
 		upload() {
 			const promise = new Promise((ok) => {
 				const canvas = this.hpml.canvases[this.block.canvasId];
 				canvas.toBlob(blob => {
+					if (!blob) return;
+
 					const formData = new FormData();
 					formData.append('file', blob);
-					formData.append('i', this.$i.token);
-					if (this.$store.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
+					formData.append('i', $i?.token);
+					if (defaultStore.state.uploadFolder) {
+						formData.append('folderId', defaultStore.state.uploadFolder);
 					}
 
 					fetch(apiUrl + '/drive/files/create', {
@@ -81,8 +85,8 @@ export default defineComponent({
 			}).then(() => {
 				this.posted = true;
 			});
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index fe7d41071344..e916cbd4f03e 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -11,6 +11,7 @@ import * as mfm from 'mfm-js';
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+import { $i } from '@/account';
 
 export default defineComponent({
 	components: {
@@ -23,12 +24,13 @@ export default defineComponent({
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
 			text: this.hpml.interpolate(this.block.text),
+			$i,
 		};
 	},
 	computed: {
@@ -38,15 +40,15 @@ export default defineComponent({
 			} else {
 				return [];
 			}
-		}
+		},
 	},
 	watch: {
 		'hpml.vars': {
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/i18n.ts b/packages/client/src/i18n.ts
index 8a62d693f434..f802e1ed8cfb 100644
--- a/packages/client/src/i18n.ts
+++ b/packages/client/src/i18n.ts
@@ -13,11 +13,3 @@ export const i18n = markRaw(new I18n<I18nObject>(locale));
 export const updateI18n = (newLocale: I18nObject): void => {
 	i18n.ts = newLocale;
 };
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$t: typeof i18n['t'];
-		$ts: typeof i18n['locale'];
-	}
-}
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 6a4d6d3fee75..1c2b04b53c4d 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -203,14 +203,6 @@ import { mainRouter } from '@/router';
 		app.config.performance = true;
 	}
 
-	app.config.globalProperties = {
-		$i,
-		$store: defaultStore,
-		$instance: instance,
-		$t: i18n.t,
-		$ts: i18n.ts,
-	};
-
 	widgets(app);
 	directives(app);
 	components(app);
diff --git a/packages/client/src/instance.ts b/packages/client/src/instance.ts
index e83a5b60de3c..6e3de67467db 100644
--- a/packages/client/src/instance.ts
+++ b/packages/client/src/instance.ts
@@ -34,7 +34,7 @@ export const fetchInstance = async (): Promise<void> => {
 
 export const emojiCategories = computed(() => {
 	if (instance.emojis == null) return [];
-	const categories = new Set();
+	const categories = new Set<string>();
 	for (const emoji of instance.emojis) {
 		categories.add(emoji.category);
 	}
@@ -43,7 +43,7 @@ export const emojiCategories = computed(() => {
 
 export const emojiTags = computed(() => {
 	if (instance.emojis == null) return [];
-	const tags = new Set();
+	const tags = new Set<string>();
 	for (const emoji of instance.emojis) {
 		for (const tag of emoji.aliases) {
 			tags.add(tag);
@@ -51,10 +51,3 @@ export const emojiTags = computed(() => {
 	}
 	return Array.from(tags);
 });
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$instance: typeof instance;
-	}
-}
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 039497cc81e0..0eaf54c2bc95 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -395,11 +395,29 @@ export const waiting = (): Promise<void> => {
 	});
 };
 
-export const form = (title: string, form: Record<string, any>): Promise<void> => {
+type GetFormResultType<TForm extends Record<string, any>> = {
+	[K in keyof TForm]:
+		TForm[K]['type'] extends 'number' ? number :
+		TForm[K]['type'] extends 'string' ? string :
+		TForm[K]['type'] extends 'boolean' ? boolean :
+		TForm[K]['type'] extends 'enum' ? string :
+		TForm[K]['type'] extends 'radio' ? unknown : // TODO
+		TForm[K]['type'] extends 'range' ? number :
+		never;
+};
+
+export const form = <C extends Record<string, any>>(title: string, form_: C): Promise<
+	| { canceled: false; result: GetFormResultType<C>; }
+	| { canceled: true; result: undefined; }
+> => {
 	return new Promise((resolve, _reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form }, {
-			done: result => {
-				resolve(result);
+		popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form: form_ }, {
+			done: (result: (
+				| { canceled: false; result: GetFormResultType<C>; }
+				| { canceled: true; result: undefined }
+				| null | undefined
+			)) => {
+				resolve(result ? result : { canceled: true, result: undefined });
 			},
 		}, 'closed');
 	});
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index ea83549e1bdc..8b7160739e1f 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -1,6 +1,6 @@
 <template>
 <MkLoading v-if="!loaded"/>
-<Transition :name="$store.state.animation ? 'zoom' : ''" appear>
+<Transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
 	<div v-show="loaded" class="mjndxjch">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
@@ -26,11 +26,11 @@ import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { defaultStore } from '@/store';
 
-const props = withDefaults(defineProps<{
+defineProps<{
 	error?: Error;
-}>(), {
-});
+}>();
 
 let loaded = $ref(false);
 let serverIsDead = $ref(false);
@@ -48,13 +48,9 @@ os.api('meta', {
 	serverIsDead = true;
 });
 
-function reload() {
+const reload = (): void => {
 	unisonReload();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
+};
 
 definePageMetadata({
 	title: i18n.ts.error,
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index 29ae1665ada7..d2802398c6fe 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -9,7 +9,7 @@
 					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
 					<div class="misskey">Misskey</div>
 					<div class="version">v{{ version }}</div>
-					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
+					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="instance.emojis ?? []" :is-reaction="false" :normal="true" :no-style="true"/></span>
 				</div>
 				<div class="_formBlock" style="text-align: center;">
 					{{ i18n.ts._aboutMisskey.about }}<br><a href="https://misskey-hub.net/docs/misskey.html" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a>
@@ -79,6 +79,7 @@ import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { instance } from '@/instance';
 
 const patrons = [
 	'まっちゃとーにゅ',
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index bc6eb567b885..c1acc55b0c72 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="driuhtrh">
 	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="$ts.search">
+		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
 			<template #prefix><i class="ti ti-search"></i></template>
 		</MkInput>
 
@@ -13,14 +13,14 @@
 	</div>
 
 	<MkFolder v-if="searchEmojis" class="emojis">
-		<template #header>{{ $ts.searchResult }}</template>
+		<template #header>{{ i18n.ts.searchResult }}</template>
 		<div class="zuvgdzyt">
 			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
 	</MkFolder>
 
 	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
-		<template #header>{{ category || $ts.other }}</template>
+		<template #header>{{ category || i18n.ts.other }}</template>
 		<div class="zuvgdzyt">
 			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
@@ -36,7 +36,8 @@ import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkTab from '@/components/MkTab.vue';
-import { emojiCategories, emojiTags } from '@/instance';
+import { instance, emojiCategories, emojiTags } from '@/instance';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -52,10 +53,11 @@ export default defineComponent({
 		return {
 			q: '',
 			customEmojiCategories: emojiCategories,
-			customEmojis: this.$instance.emojis,
+			customEmojis: instance.emojis ?? [],
 			tags: emojiTags,
-			selectedTags: new Set(),
+			selectedTags: new Set<string>(),
 			searchEmojis: null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 54228c74846e..15c3efdb935a 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -3,18 +3,18 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
 		<div class="_formRoot">
-			<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+			<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 				<div class="content">
-					<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+					<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 					<div class="name">
-						<b>{{ $instance.name || host }}</b>
+						<b>{{ instance.name || host }}</b>
 					</div>
 				</div>
 			</div>
 
 			<MkKeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ $instance.description }}</template>
+				<template #value>{{ instance.description }}</template>
 			</MkKeyValue>
 
 			<FormSection>
@@ -29,14 +29,14 @@
 				<FormSplit>
 					<MkKeyValue class="_formBlock">
 						<template #key>{{ i18n.ts.administrator }}</template>
-						<template #value>{{ $instance.maintainerName }}</template>
+						<template #value>{{ instance.maintainerName }}</template>
 					</MkKeyValue>
 					<MkKeyValue class="_formBlock">
 						<template #key>{{ i18n.ts.contact }}</template>
-						<template #value>{{ $instance.maintainerEmail }}</template>
+						<template #value>{{ instance.maintainerEmail }}</template>
 					</MkKeyValue>
 				</FormSplit>
-				<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
+				<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
 			</FormSection>
 
 			<FormSuspense :p="initStats">
@@ -94,6 +94,7 @@ import * as os from '@/os';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { instance } from '@/instance';
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 88355f14e007..56fbbdfaf6b3 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -26,18 +26,18 @@
 						</MkSelect>
 					</div>
 					<!-- TODO
-			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
-					<span>{{ i18n.ts.username }}</span>
-				</MkInput>
-				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
-					<span>{{ i18n.ts.host }}</span>
-				</MkInput>
-			</div>
-			-->
+					<div class="inputs" style="display: flex; padding-top: 1.2em;">
+						<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
+							<span>{{ i18n.ts.username }}</span>
+						</MkInput>
+						<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
+							<span>{{ i18n.ts.host }}</span>
+						</MkInput>
+					</div>
+					-->
 
 					<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
-						<XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
+						<MkAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
 					</MkPagination>
 				</div>
 			</div>
@@ -48,11 +48,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-
 import XHeader from './_header_.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import XAbuseReport from '@/components/MkAbuseReport.vue';
+import MkAbuseReport from '@/components/MkAbuseReport.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
@@ -61,8 +60,8 @@ let reports = $ref<InstanceType<typeof MkPagination>>();
 let state = $ref('unresolved');
 let reporterOrigin = $ref('combined');
 let targetUserOrigin = $ref('combined');
-let searchUsername = $ref('');
-let searchHost = $ref('');
+// let searchUsername = $ref('');
+// let searchHost = $ref('');
 
 const pagination = {
 	endpoint: 'admin/abuse-user-reports' as const,
@@ -74,9 +73,9 @@ const pagination = {
 	})),
 };
 
-function resolved(reportId) {
-	reports.removeItem(item => item.id === reportId);
-}
+const resolved = (reportId: string): void => {
+	reports?.removeItem(item => item.id === reportId);
+};
 
 const headerActions = $computed(() => []);
 
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 59f01a471b6d..b1f8153af60f 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -1,9 +1,9 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="370"
 	:with-ok-button="true"
-	@close="$refs.dialog.close()"
+	@close="dialog?.close()"
 	@closed="$emit('closed')"
 	@ok="ok()"
 >
@@ -25,38 +25,41 @@
 			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</div>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import { CustomEmoji } from 'misskey-js/built/entities';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { emojiCategories } from '@/instance';
 
+type EditedCustomEmoji = Omit<CustomEmoji, 'url'>;
+
 const props = defineProps<{
-	emoji: any,
+	emoji: CustomEmoji;
 }>();
 
-let dialog = $ref(null);
-let name: string = $ref(props.emoji.name);
-let category: string = $ref(props.emoji.category);
-let aliases: string = $ref(props.emoji.aliases.join(' '));
-let categories: string[] = $ref(emojiCategories);
-
 const emit = defineEmits<{
-	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
+	(ev: 'done', v: { deleted?: boolean, updated?: EditedCustomEmoji }): void,
 	(ev: 'closed'): void
 }>();
 
-function ok() {
+const dialog = $ref<InstanceType<typeof MkModalWindow> | null>(null);
+let name: string = $ref(props.emoji.name);
+let category: string = $ref(props.emoji.category);
+let aliases: string = $ref(props.emoji.aliases.join(' '));
+const categories: string[] = $ref(emojiCategories);
+
+const ok = (): void => {
 	update();
-}
+};
 
-async function update() {
+const update = async (): Promise<void> => {
 	await os.apiWithDialog('admin/emoji/update', {
 		id: props.emoji.id,
 		name,
@@ -73,10 +76,10 @@ async function update() {
 		},
 	});
 
-	dialog.close();
-}
+	dialog?.close();
+};
 
-async function del() {
+const del = async (): Promise<void> => {
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		text: i18n.t('removeAreYouSure', { x: name }),
@@ -89,9 +92,9 @@ async function del() {
 		emit('done', {
 			deleted: true,
 		});
-		dialog.close();
+		dialog?.close();
 	});
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 058d91280acf..f7001588c7ad 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -4,7 +4,7 @@
 		<MkSpacer :content-max="700" :margin-min="16">
 			<div class="lxpfedzu">
 				<div class="banner">
-					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+					<img :src="instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 				</div>
 
 				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index 436249723329..aa1b568e7fe8 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ti ti-cpu"></i> {{ $ts.cpuAndMemory }}</div>
+	<div class="_debobigegoLabel"><i class="ti ti-cpu"></i> {{ i18n.ts.cpuAndMemory }}</div>
 	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="cpumem"></canvas>
@@ -17,7 +17,7 @@
 	</div>
 </div>
 <div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ti ti-database"></i> {{ $ts.disk }}</div>
+	<div class="_debobigegoLabel"><i class="ti ti-database"></i> {{ i18n.ts.disk }}</div>
 	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="disk"></canvas>
@@ -34,7 +34,7 @@
 	</div>
 </div>
 <div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ti ti-arrows-right-left"></i> {{ $ts.network }}</div>
+	<div class="_debobigegoLabel"><i class="ti ti-arrows-right-left"></i> {{ i18n.ts.network }}</div>
 	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="net"></canvas>
@@ -77,6 +77,8 @@ import MkFolder from '@/components/MkFolder.vue';
 import { version, url } from '@/config';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 Chart.register(
 	ArcElement,
@@ -133,13 +135,14 @@ export default defineComponent({
 			overviewHeight: '1fr',
 			queueHeight: '1fr',
 			paused: false,
+			i18n,
 		};
 	},
 
 	computed: {
 		gridColor() {
 			// TODO: var(--panel)の色が暗いか明るいかで判定する
-			return this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+			return defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 		},
 	},
 
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 33ee356373e3..61c6eae59906 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="wbrkwale">
 	<MkLoading v-if="fetching"/>
-	<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
+	<TransitionGroup v-else tag="div" :name="defaultStore.state.animation ? 'chart' : ''" class="instances">
 		<MkA v-for="(instance, i) in instances" :key="instance.id" :to="`/instance-info/${instance.host}`" class="instance">
 			<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
 			<div class="body">
@@ -19,6 +19,7 @@ import { ref } from 'vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { defaultStore } from '@/store';
 
 const instances = ref([]);
 const charts = ref([]);
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 4768ae67b16a..240a48b20535 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -8,7 +8,7 @@
 				<i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i>
 				<i v-else-if="relay.status === 'rejected'" class="ti ti-ban icon rejected"></i>
 				<i v-else class="ti ti-clock icon requesting"></i>
-				<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
+				<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
 			</div>
 			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 		</div>
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 6a93b3b9fa42..cdbb287a52c4 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -10,7 +10,7 @@
 					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 				</div>
 				<div v-if="$i && !announcement.isRead" class="_footer">
-					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
+					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
 				</div>
 			</section>
 		</MkPagination>
@@ -25,6 +25,7 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
 
 const pagination = {
 	endpoint: 'announcements' as const,
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 551ee97bc752..ed201eaef922 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -2,10 +2,11 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="antennaId"
+			<MkTimeline
+				ref="tlEl"
+				:key="antennaId"
 				class="tl"
 				src="antenna"
 				:antenna="antennaId"
@@ -19,7 +20,8 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
+import { Antenna } from 'misskey-js/built/entities';
+import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { useRouter } from '@/router';
@@ -32,38 +34,41 @@ const props = defineProps<{
 	antennaId: string;
 }>();
 
-let antenna = $ref(null);
+let antenna = $ref<Antenna | null>(null);
 let queue = $ref(0);
-let rootEl = $ref<HTMLElement>();
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
+const rootEl = $ref<HTMLElement>();
+const tlEl = $ref<InstanceType<typeof MkTimeline>>();
 const keymap = $computed(() => ({
-	't': focus,
+	// 't': focus,
 }));
 
-function queueUpdated(q) {
+const queueUpdated = (q: number): void => {
 	queue = q;
-}
+};
 
-function top() {
+const top = (): void => {
+	if (!rootEl) return;
 	scroll(rootEl, { top: 0 });
-}
+};
 
-async function timetravel() {
-	const { canceled, result: date } = await os.inputDate({
-		title: i18n.ts.date,
-	});
-	if (canceled) return;
+// const timetravel = async (): Promise<void> => {
+// 	if (!tlEl) return;
 
-	tlEl.timetravel(date);
-}
+// 	const { canceled, result: date } = await os.inputDate({
+// 		title: i18n.ts.date,
+// 	});
+// 	if (canceled) return;
 
-function settings() {
+// 	tlEl.timetravel(date);
+// };
+
+const settings = (): void => {
 	router.push(`/my/antennas/${props.antennaId}`);
-}
+};
 
-function focus() {
-	tlEl.focus();
-}
+// const focus = (): void => {
+// 	tlEl?.focus();
+// };
 
 watch(() => props.antennaId, async () => {
 	antenna = await os.api('antennas/show', {
@@ -74,7 +79,8 @@ watch(() => props.antennaId, async () => {
 const headerActions = $computed(() => antenna ? [{
 	icon: 'ti ti-calendar-time',
 	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
+	// handler: timetravel,
+	handler: (): void => {},
 }, {
 	icon: 'ti ti-settings',
 	text: i18n.ts.settings,
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
index 024a7a2c5b23..1b33a02509ab 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -1,20 +1,20 @@
 <template>
 <section class="_section">
-	<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
+	<div class="_title">{{ i18n.t('_auth.shareAccess', { name: app.name }) }}</div>
 	<div class="_content">
 		<h2>{{ app.name }}</h2>
 		<p class="id">{{ app.id }}</p>
 		<p class="description">{{ app.description }}</p>
 	</div>
 	<div class="_content">
-		<h2>{{ $ts._auth.permissionAsk }}</h2>
+		<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
 		<ul>
-			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+			<li v-for="p in app.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
 		</ul>
 	</div>
 	<div class="_footer">
-		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
+		<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+		<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
 	</div>
 </section>
 </template>
@@ -23,12 +23,23 @@
 import { defineComponent } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
+
 	props: ['session'],
+
+	emits: ['denied', 'accepted'],
+
+	data() {
+		return {
+			i18n,
+		};
+	},
+
 	computed: {
 		name(): string {
 			const el = document.createElement('div');
@@ -37,12 +48,13 @@ export default defineComponent({
 		},
 		app(): any {
 			return this.session.app;
-		}
+		},
 	},
+
 	methods: {
 		cancel() {
 			os.api('auth/deny', {
-				token: this.session.token
+				token: this.session.token,
 			}).then(() => {
 				this.$emit('denied');
 			});
@@ -50,11 +62,11 @@ export default defineComponent({
 
 		accept() {
 			os.api('auth/accept', {
-				token: this.session.token
+				token: this.session.token,
 			}).then(() => {
 				this.$emit('accepted');
 			});
-		}
-	}
+		},
+	},
 });
 </script>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index b7727ca30d02..2e064e731436 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -12,15 +12,15 @@
 		@accepted="accepted"
 	/>
 	<div v-if="state == 'denied'" class="denied">
-		<h1>{{ $ts._auth.denied }}</h1>
+		<h1>{{ i18n.ts._auth.denied }}</h1>
 	</div>
 	<div v-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? $t('already-authorized') : $ts.allowed }}</h1>
-		<p v-if="session.app.callbackUrl">{{ $ts._auth.callback }}<MkEllipsis/></p>
-		<p v-if="!session.app.callbackUrl">{{ $ts._auth.pleaseGoBack }}</p>
+		<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
+		<p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
+		<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
 	</div>
 	<div v-if="state == 'fetch-session-error'" class="error">
-		<p>{{ $ts.somethingHappened }}</p>
+		<p>{{ i18n.ts.somethingHappened }}</p>
 	</div>
 </div>
 <div v-else class="signin">
@@ -33,23 +33,28 @@ import { defineComponent } from 'vue';
 import XForm from './auth.form.vue';
 import MkSignin from '@/components/MkSignin.vue';
 import * as os from '@/os';
-import { login } from '@/account';
+import { $i, login } from '@/account';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
 		XForm,
 		MkSignin,
 	},
+
 	props: ['token'],
 	data() {
 		return {
 			state: null,
 			session: null,
 			fetching: true,
+			i18n,
+			$i,
 		};
 	},
+
 	mounted() {
-		if (!this.$i) return;
+		if (!$i) return;
 
 		// Fetch session
 		os.api('auth/session/show', {
@@ -73,6 +78,7 @@ export default defineComponent({
 			this.fetching = false;
 		});
 	},
+
 	methods: {
 		accepted() {
 			this.state = 'accepted';
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 2d5a26a30fc3..b9be24eacac9 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -4,7 +4,7 @@
 	<MkSpacer :content-max="700">
 		<div v-if="channel">
 			<div class="wpgynlbz _panel _gap" :class="{ hide: !showBanner }">
-				<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
+				<MkChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
 				<button class="_button toggle" @click="() => showBanner = !showBanner">
 					<template v-if="showBanner"><i class="ti ti-chevron-up"></i></template>
 					<template v-else><i class="ti ti-chevron-down"></i></template>
@@ -25,7 +25,7 @@
 
 			<TmsPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
 
-			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
+			<MkTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -33,9 +33,10 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
+import { Channel } from 'misskey-js/built/entities';
 import TmsPostForm from '@/components/TmsPostForm.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
+import MkChannelFollowButton from '@/components/MkChannelFollowButton.vue';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { $i } from '@/account';
@@ -48,7 +49,7 @@ const props = defineProps<{
 	channelId: string;
 }>();
 
-let channel = $ref(null);
+let channel = $ref<Channel | null>(null);
 let showBanner = $ref(true);
 const pagination = {
 	endpoint: 'channels/timeline' as const,
@@ -59,14 +60,15 @@ const pagination = {
 };
 
 watch(() => props.channelId, async () => {
-	channel = await os.api('channels/show', {
+	channel = (await os.api('channels/show', {
 		channelId: props.channelId,
-	});
+	}) as Channel);
 }, { immediate: true });
 
-function edit() {
+const edit = (): void => {
+	if (!channel) return;
 	router.push(`/channels/${channel.id}/edit`);
-}
+};
 
 const headerActions = $computed(() => channel && channel.userId ? [{
 	icon: 'ti ti-settings',
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index af3922babf34..9ae781966e47 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="800">
+	<MkSpacer :content-max="800">
 		<div v-if="clip">
 			<div class="okzinsic _panel">
 				<div v-if="clip.description" class="description">
@@ -12,7 +12,7 @@
 				</div>
 			</div>
 
-			<XNotes :pagination="pagination" :detail="true"/>
+			<MkNotes :pagination="pagination" :detail="true"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import { computed, watch, provide } from 'vue';
 import * as misskey from 'misskey-js';
-import XNotes from '@/components/MkNotes.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
@@ -31,7 +31,7 @@ const props = defineProps<{
 	clipId: string,
 }>();
 
-let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
+let clip = $ref<misskey.entities.Clip | null>(null);
 const pagination = {
 	endpoint: 'clips/notes' as const,
 	limit: 10,
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 0b398684ca37..d63c4d258bc6 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -1,20 +1,17 @@
 <template>
 <div>
-	<XDrive ref="drive" @cd="x => folder = x"/>
+	<MkDrive ref="drive" @cd="x => folder = x"/>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import XDrive from '@/components/MkDrive.vue';
+import { DriveFolder } from 'misskey-js/built/entities';
+import MkDrive from '@/components/MkDrive.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-let folder = $ref(null);
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
+let folder = $ref<DriveFolder | null>(null);
 
 definePageMetadata(computed(() => ({
 	title: folder ? folder.name : i18n.ts.drive,
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
index 18a371a0863a..a972ae04ec32 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -4,13 +4,13 @@
 		<option value="notes">{{ i18n.ts.notes }}</option>
 		<option value="polls">{{ i18n.ts.poll }}</option>
 	</MkTab>
-	<XNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
-	<XNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/>
+	<MkNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
+	<MkNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/>
 </MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import XNotes from '@/components/MkNotes.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 189265a0f1ab..02dd0f12f60d 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -8,19 +8,19 @@
 		<template v-if="tag == null">
 			<MkFolder class="_gap" persist-key="explore-pinned-users">
 				<template #header><i class="ti ti-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
-				<XUserList :pagination="pinnedUsers"/>
+				<MkUserList :pagination="pinnedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-popular-users">
 				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsers"/>
+				<MkUserList :pagination="popularUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
 				<template #header><i class="ti ti-message ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsers"/>
+				<MkUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
 				<template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsers"/>
+				<MkUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
 	</div>
@@ -29,28 +29,28 @@
 			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
-				<MkA v-for="tagLocal in tagsLocal" :key="'local:' + tagLocal.tag" :to="`/explore/tags/${tagLocal.tag}`" class="local">{{ tagLocal.tag }}</MkA>
-				<MkA v-for="tagRemote in tagsRemote" :key="'remote:' + tagRemote.tag" :to="`/explore/tags/${tagRemote.tag}`">{{ tagRemote.tag }}</MkA>
+				<MkA v-for="tagLocal in tagsLocal" :key="`local:${tagLocal.tag}`" :to="`/explore/tags/${tagLocal.tag}`" class="local">{{ tagLocal.tag }}</MkA>
+				<MkA v-for="tagRemote in tagsRemote" :key="`remote:${tagRemote.tag}`" :to="`/explore/tags/${tagRemote.tag}`">{{ tagRemote.tag }}</MkA>
 			</div>
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
 			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
-			<XUserList :pagination="tagUsers"/>
+			<MkUserList :pagination="tagUsers"/>
 		</MkFolder>
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap">
 				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsersF"/>
+				<MkUserList :pagination="popularUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
 				<template #header><i class="ti ti-message ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsersF"/>
+				<MkUserList :pagination="recentlyUpdatedUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
 				<template #header><i class="ti ti-rocket ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsersF"/>
+				<MkUserList :pagination="recentlyRegisteredUsersF"/>
 			</MkFolder>
 		</template>
 	</div>
@@ -59,7 +59,7 @@
 
 <script lang="ts" setup>
 import { watch } from 'vue';
-import XUserList from '@/components/MkUserList.vue';
+import MkUserList from '@/components/MkUserList.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
@@ -71,8 +71,9 @@ const props = defineProps<{
 
 let origin = $ref('local');
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-let tagsLocal = $ref([]);
-let tagsRemote = $ref([]);
+
+let tagsLocal = $ref<{ tag: string; }[]>([]);
+let tagsRemote = $ref<{ tag: string; }[]>([]);
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
@@ -88,48 +89,88 @@ const tagUsers = $computed(() => ({
 	},
 }));
 
-const pinnedUsers = { endpoint: 'pinned-users' };
-const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	state: 'alive',
-	origin: 'local',
-	sort: '+follower',
-} };
-const recentlyUpdatedUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'local',
-	sort: '+updatedAt',
-} };
-const recentlyRegisteredUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'local',
-	state: 'alive',
-	sort: '+createdAt',
-} };
-const popularUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	state: 'alive',
-	origin: 'remote',
-	sort: '+follower',
-} };
-const recentlyUpdatedUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'combined',
-	sort: '+updatedAt',
-} };
-const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'combined',
-	sort: '+createdAt',
-} };
+const pinnedUsers = {
+	endpoint: 'pinned-users' as const,
+	limit: 10,
+};
+
+const popularUsers = {
+	endpoint: 'users' as const,
+	limit: 10,
+	noPaging: true,
+	params: {
+		state: 'alive',
+		origin: 'local',
+		sort: '+follower',
+	},
+};
+
+const recentlyUpdatedUsers = {
+	endpoint: 'users' as const,
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: 'local',
+		sort: '+updatedAt',
+	},
+};
+
+const recentlyRegisteredUsers = {
+	endpoint: 'users' as const,
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: 'local',
+		state: 'alive',
+		sort: '+createdAt',
+	},
+};
+
+const popularUsersF = {
+	endpoint: 'users' as const,
+	limit: 10,
+	noPaging: true,
+	params: {
+		state: 'alive',
+		origin: 'remote',
+		sort: '+follower',
+	},
+};
+
+const recentlyUpdatedUsersF = {
+	endpoint: 'users' as const,
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: 'combined',
+		sort: '+updatedAt',
+	},
+};
+
+const recentlyRegisteredUsersF = {
+	endpoint: 'users' as const,
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: 'combined',
+		sort: '+createdAt',
+	},
+};
 
 os.api('hashtags/list', {
 	sort: '+attachedLocalUsers',
 	attachedToLocalUserOnly: true,
 	limit: 30,
 }).then(tags => {
-	tagsLocal = tags;
+	tagsLocal = tags as { tag: string; }[];
 });
+
 os.api('hashtags/list', {
 	sort: '+attachedRemoteUsers',
 	attachedToRemoteUserOnly: true,
 	limit: 30,
 }).then(tags => {
-	tagsRemote = tags;
+	tagsRemote = tags as { tag: string; }[];
 });
 </script>
 
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index ab47efec7113..baeae5b47031 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -12,7 +12,7 @@
 
 			<template #default="{ items }">
 				<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
-					<XNote :key="item.id" :note="item.note" :class="$style.note"/>
+					<MkNote :key="item.id" :note="item.note" :class="$style.note"/>
 				</XList>
 			</template>
 		</MkPagination>
@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import XList from '@/components/MkDateSeparatedList.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 7a0cc2f0f4b0..11a404a3e6e9 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
 		<div class="_root">
-			<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="post" class="rkxwuolj">
 					<div class="files">
 						<div v-for="file in post.files" :key="file.id" class="file">
@@ -66,6 +66,8 @@ import { url } from '@/config';
 import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { defaultStore } from '@/store';
+import { $i } from '@/account';
 
 const router = useRouter();
 
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 1e8ed5ad1d78..68a5e2d2efd3 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div v-size="{ max: [400] }" class="yweeujhr">
-			<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton>
+			<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
 
 			<div v-if="messages.length > 0" class="history">
 				<MkA
@@ -27,14 +27,14 @@
 							<MkTime :time="message.createdAt" class="time"/>
 						</header>
 						<div class="body">
-							<p class="text"><span v-if="isMe(message)" class="me">{{ $ts.you }}:</span>{{ message.text }}</p>
+							<p class="text"><span v-if="isMe(message)" class="me">{{ i18n.ts.you }}:</span>{{ message.text }}</p>
 						</div>
 					</div>
 				</MkA>
 			</div>
 			<div v-if="!fetching && messages.length == 0" class="_fullinfo">
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ $ts.noHistory }}</div>
+				<div>{{ i18n.ts.noHistory }}</div>
 			</div>
 			<MkLoading v-if="fetching"/>
 		</div>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 5099e289b14c..7ff53b5584de 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -3,7 +3,7 @@
 	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }" >
-			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
+			<button v-if="isMe" class="delete-button" :title="i18n.ts.delete" @click="del">
 				<img src="/client-assets/remove.png" alt="Delete"/>
 			</button>
 			<div v-if="!message.isDeleted" class="content">
@@ -16,17 +16,17 @@
 				</div>
 			</div>
 			<div v-else class="content">
-				<p class="is-deleted">{{ $ts.deleted }}</p>
+				<p class="is-deleted">{{ i18n.ts.deleted }}</p>
 			</div>
 		</div>
 		<div></div>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
 		<footer>
 			<template v-if="isGroup">
-				<span v-if="message.reads.length > 0" class="read">{{ $ts.messageRead }} {{ message.reads.length }}</span>
+				<span v-if="message.reads.length > 0" class="read">{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
 			</template>
 			<template v-else>
-				<span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
+				<span v-if="isMe && message.isRead" class="read">{{ i18n.ts.messageRead }}</span>
 			</template>
 			<MkTime :time="message.createdAt"/>
 			<template v-if="message.is_edited"><i class="ti ti-pencil"></i></template>
@@ -43,6 +43,7 @@ import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	message: Misskey.entities.MessagingMessage;
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index 444c70a6e7f8..303c9b04dc62 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -18,12 +18,12 @@
 			</div>
 		</div>
 		<div v-else class="_section">
-			<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
+			<div v-if="name" class="_title">{{ i18n.t('_auth.shareAccess', { name: name }) }}</div>
 			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
 			<div class="_content">
 				<p>{{ i18n.ts._auth.permissionAsk }}</p>
 				<ul>
-					<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+					<li v-for="p in _permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
 				</ul>
 			</div>
 			<div class="_footer">
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index 30c3818c09e3..444a014e2432 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="mk-list-page">
-			<Transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+			<Transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
 				<div v-if="list" class="_section">
 					<div class="_content">
 						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
@@ -13,7 +13,7 @@
 				</div>
 			</transition>
 
-			<Transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+			<Transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
 				<div v-if="list" class="_section members _gap">
 					<div class="_title">{{ i18n.ts.members }}</div>
 					<div class="_content">
@@ -44,6 +44,7 @@ import * as os from '@/os';
 import { mainRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	listId: string;
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 6c8ecdbd3126..e9f77ef7a247 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -3,17 +3,17 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div class="fcuexfpr">
-			<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="note" class="note">
 					<div v-if="showNext" class="_gap">
-						<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
+						<MkNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
 					</div>
 
 					<div class="main _gap">
 						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton>
 						<div class="note _gap">
 							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
-							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
+							<MkNoteDetailed :key="note.id" v-model:note="note" class="note"/>
 						</div>
 						<div v-if="clips && clips.length > 0" class="_content clips _gap">
 							<div class="title">{{ i18n.ts.clip }}</div>
@@ -29,7 +29,7 @@
 					</div>
 
 					<div v-if="showPrev" class="_gap">
-						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
+						<MkNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
 					</div>
 				</div>
 				<MkError v-else-if="error" @retry="fetch()"/>
@@ -43,20 +43,21 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import XNotes from '@/components/MkNotes.vue';
+import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	noteId: string;
 }>();
 
-let note = $ref<null | misskey.entities.Note>();
-let clips = $ref();
+let note = $ref<misskey.entities.Note | null>();
+let clips = $ref<misskey.entities.Clip | null>();
 let hasPrev = $ref(false);
 let hasNext = $ref(false);
 let showPrev = $ref(false);
@@ -82,7 +83,7 @@ const nextPagination = {
 	}) : null),
 };
 
-function fetchNote() {
+const fetchNote = (): void => {
 	hasPrev = false;
 	hasNext = false;
 	showPrev = false;
@@ -114,7 +115,7 @@ function fetchNote() {
 	}).catch(err => {
 		error = err;
 	});
-}
+};
 
 watch(() => props.noteId, fetchNote, {
 	immediate: true,
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 7106951de284..640689c34e03 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -3,13 +3,13 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div v-if="tab === 'all' || tab === 'unread'">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
+			<MkNotifications class="notifications" :include-types="includeTypes ?? []" :unread-only="unreadOnly"/>
 		</div>
 		<div v-else-if="tab === 'mentions'">
-			<XNotes :pagination="mentionsPagination"/>
+			<MkNotes :pagination="mentionsPagination"/>
 		</div>
 		<div v-else-if="tab === 'directNotes'">
-			<XNotes :pagination="directNotesPagination"/>
+			<MkNotes :pagination="directNotesPagination"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -18,14 +18,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { notificationTypes } from 'misskey-js';
-import XNotifications from '@/components/MkNotifications.vue';
-import XNotes from '@/components/MkNotes.vue';
+import MkNotifications from '@/components/MkNotifications.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 
 let tab = $ref('all');
-let includeTypes = $ref<string[] | null>(null);
+let includeTypes = $ref<typeof notificationTypes[number][] | null>(null);
 let unreadOnly = $computed(() => tab === 'unread');
 
 const mentionsPagination = {
@@ -41,23 +42,24 @@ const directNotesPagination = {
 	},
 };
 
-function setFilter(ev) {
+const setFilter = (ev: MouseEvent): void => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
 	const typeItems = notificationTypes.map(t => ({
 		text: i18n.t(`_notification._types.${t}`),
-		active: includeTypes && includeTypes.includes(t),
-		action: () => {
+		active: !!includeTypes?.includes(t),
+		action: (): void => {
 			includeTypes = [t];
 		},
 	}));
 	const items = includeTypes != null ? [{
 		icon: 'ti ti-x',
 		text: i18n.ts.clear,
-		action: () => {
+		action: (): void => {
 			includeTypes = null;
 		},
 	}, null, ...typeItems] : typeItems;
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
+	os.popupMenu(items, el);
+};
 
 const headerActions = $computed(() => [tab === 'all' ? {
 	text: i18n.ts.filter,
@@ -67,7 +69,7 @@ const headerActions = $computed(() => [tab === 'all' ? {
 } : undefined, tab === 'all' ? {
 	text: i18n.ts.markAllAsRead,
 	icon: 'ti ti-check',
-	handler: () => {
+	handler: (): void => {
 		os.apiWithDialog('notifications/mark-all-as-read');
 	},
 } : undefined].filter(x => x !== undefined));
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 5df000c6ac0d..63ca9f4acbba 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,38 +1,38 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.button }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.button }}</template>
 
 	<section class="xfhsjczc">
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
-		<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._button.text }}</template></MkInput>
+		<MkSwitch v-model="value.primary"><span>{{ i18n.ts._pages.blocks._button.colored }}</span></MkSwitch>
 		<MkSelect v-model="value.action">
-			<template #label>{{ $ts._pages.blocks._button.action }}</template>
-			<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
-			<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
-			<option value="pushEvent">{{ $ts._pages.blocks._button._action.pushEvent }}</option>
-			<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
+			<template #label>{{ i18n.ts._pages.blocks._button.action }}</template>
+			<option value="dialog">{{ i18n.ts._pages.blocks._button._action.dialog }}</option>
+			<option value="resetRandom">{{ i18n.ts._pages.blocks._button._action.resetRandom }}</option>
+			<option value="pushEvent">{{ i18n.ts._pages.blocks._button._action.pushEvent }}</option>
+			<option value="callAiScript">{{ i18n.ts._pages.blocks._button._action.callAiScript }}</option>
 		</MkSelect>
 		<template v-if="value.action === 'dialog'">
-			<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
+			<MkInput v-model="value.content"><template #label>{{ i18n.ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
 		</template>
 		<template v-else-if="value.action === 'pushEvent'">
-			<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
-			<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
+			<MkInput v-model="value.event"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
+			<MkInput v-model="value.message"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
 			<MkSelect v-model="value.var">
-				<template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template>
-				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
+				<template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.variable }}</template>
+				<option :value="null">{{ i18n.t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
 				<option v-for="(v, i) in hpml.getVarsByType()" :key="i" :value="v.name">{{ v.name }}</option>
-				<optgroup :label="$ts._pages.script.pageVariables">
+				<optgroup :label="i18n.ts._pages.script.pageVariables">
 					<option v-for="(v, i) in hpml.getPageVarsByType()" :key="i" :value="v">{{ v }}</option>
 				</optgroup>
-				<optgroup :label="$ts._pages.script.enviromentVariables">
+				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
 					<option v-for="(v, i) in hpml.getEnvVarsByType()" :key="i" :value="v">{{ v }}</option>
 				</optgroup>
 			</MkSelect>
 		</template>
 		<template v-else-if="value.action === 'callAiScript'">
-			<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
+			<MkInput v-model="value.fn"><template #label>{{ i18n.ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
 		</template>
 	</section>
 </XContainer>
@@ -45,6 +45,7 @@ import XContainer from '../page-editor.container.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any,
@@ -58,8 +59,8 @@ withDefaults(defineProps<{
 		message: null,
 		primary: false,
 		var: null,
-		fn: null
-	}
+		fn: null,
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index 42941139662f..a5192f52d1c4 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,19 +1,19 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
+	<template #header><i class="ti ti-brush"></i> {{ i18n.ts._pages.blocks.canvas }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
 			<template #prefix><i class="ti ti-wand"></i></template>
-			<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._canvas.id }}</template>
 		</MkInput>
 		<MkInput v-model="value.width" type="number">
-			<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._canvas.width }}</template>
 			<template #suffix>px</template>
 		</MkInput>
 		<MkInput v-model="value.height" type="number">
-			<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._canvas.height }}</template>
 			<template #suffix>px</template>
 		</MkInput>
 	</section>
@@ -25,6 +25,7 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
@@ -32,7 +33,7 @@ withDefaults(defineProps<{
 	value: {
 		name: '',
 		width: 300,
-		height: 200
-	}
+		height: 200,
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index d00f2fd00c89..e1282884e4f5 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,18 +1,18 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.counter }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
 			<template #prefix><i class="ti ti-wand"></i></template>
-			<template #label>{{ $ts._pages.blocks._counter.name }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._counter.name }}</template>
 		</MkInput>
 		<MkInput v-model="value.text">
-			<template #label>{{ $ts._pages.blocks._counter.text }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._counter.text }}</template>
 		</MkInput>
 		<MkInput v-model="value.inc" type="number">
-			<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._counter.inc }}</template>
 		</MkInput>
 	</section>
 </XContainer>
@@ -23,12 +23,13 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		name: ''
-	}
+		name: '',
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 14c995598a3a..a029b119ca03 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-question-mark"></i> {{ $ts._pages.blocks.if }}</template>
+	<template #header><i class="ti ti-question-mark"></i> {{ i18n.ts._pages.blocks.if }}</template>
 	<template #func>
 		<button class="_button" @click="add()">
 			<i class="ti ti-plus"></i>
@@ -10,12 +10,12 @@
 
 	<section class="romcojzs">
 		<MkSelect v-model="value.var">
-			<template #label>{{ $ts._pages.blocks._if.variable }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._if.variable }}</template>
 			<option v-for="(v, i) in hpml.getVarsByType('boolean')" :key="i" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$ts._pages.script.pageVariables">
+			<optgroup :label="i18n.ts._pages.script.pageVariables">
 				<option v-for="(v, i) in hpml.getPageVarsByType('boolean')" :key="i" :value="v">{{ v }}</option>
 			</optgroup>
-			<optgroup :label="$ts._pages.script.enviromentVariables">
+			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
 				<option v-for="(v, i) in hpml.getEnvVarsByType('boolean')" :key="i" :value="v">{{ v }}</option>
 			</optgroup>
 		</MkSelect>
@@ -37,13 +37,13 @@ import { i18n } from '@/i18n';
 const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
 const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
+	value: any;
+	hpml: any;
 }>(), {
 	value: {
 		children: [],
-		var: null
-	}
+		var: null,
+	},
 });
 
 const getPageBlockList = inject<(any) => any>('getPageBlockList');
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index fe3e2d353015..63fba35d4b3d 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-photo"></i> {{ $ts._pages.blocks.image }}</template>
+	<template #header><i class="ti ti-photo"></i> {{ i18n.ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
 			<i class="ti ti-folder"></i>
@@ -20,13 +20,14 @@ import { onMounted } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		fileId: null
-	}
+		fileId: null,
+	},
 });
 
 let file: any = $ref(null);
@@ -43,7 +44,7 @@ onMounted(async () => {
 		await choose();
 	} else {
 		os.api('drive/files/show', {
-			fileId: props.value.fileId
+			fileId: props.value.fileId,
 		}).then(fileResponse => {
 			file = fileResponse;
 		});
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 1b7c8f4a6c4e..5d96f1185732 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,17 +1,17 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-note"></i> {{ $ts._pages.blocks.note }}</template>
+	<template #header><i class="ti ti-note"></i> {{ i18n.ts._pages.blocks.note }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="id">
-			<template #label>{{ $ts._pages.blocks._note.id }}</template>
-			<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
+			<template #caption>{{ i18n.ts._pages.blocks._note.idDescription }}</template>
 		</MkInput>
-		<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
+		<MkSwitch v-model="value.detailed"><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></MkSwitch>
 
-		<XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
-		<XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
+		<MkNote v-if="note && !value.detailed" :key="`${note.id}:normal`" v-model:note="note" style="margin-bottom: 16px;"/>
+		<MkNoteDetailed v-if="note && value.detailed" :key="`${note.id}:detail`" v-model:note="note" style="margin-bottom: 16px;"/>
 	</section>
 </XContainer>
 </template>
@@ -19,34 +19,41 @@
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
 import { watch } from 'vue';
+import { Note } from 'misskey-js/built/entities';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
+import MkNote from '@/components/MkNote.vue';
+import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
-	value: any
+	value?: {
+		note: string | null;
+		detailed: boolean;
+	};
 }>(), {
-	value: {
+	value: () => ({
 		note: null,
-		detailed: false
-	}
+		detailed: false,
+	}),
 });
 
-let id: any = $ref(props.value.note);
-let note: any = $ref(null);
+let id = $ref<string>(props.value.note ?? '');
+let note = $ref<Note | null>(null);
 
-watch(id, async () => {
+watch($$(id), async () => {
 	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
+		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop() ?? null;
 	} else {
 		props.value.note = id;
 	}
 
-	note = await os.api('notes/show', { noteId: props.value.note });
+	note = props.value.note
+		? await os.api('notes/show', { noteId: props.value.note })
+		: null;
 }, {
-	immediate: true
+	immediate: true,
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 1d1368bf2f38..f60c8fa0a09c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,18 +1,18 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.numberInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
 			<template #prefix><i class="ti ti-wand"></i></template>
-			<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._numberInput.name }}</template>
 		</MkInput>
 		<MkInput v-model="value.text">
-			<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._numberInput.text }}</template>
 		</MkInput>
 		<MkInput v-model="value.default" type="number">
-			<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._numberInput.default }}</template>
 		</MkInput>
 	</section>
 </XContainer>
@@ -23,12 +23,13 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		name: ''
-	}
+		name: '',
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index 39be01ab3212..579d61ec1f39 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-send"></i> {{ $ts._pages.blocks.post }}</template>
+	<template #header><i class="ti ti-send"></i> {{ i18n.ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
-		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
-		<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
-		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
+		<MkTextarea v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._post.text }}</template></MkTextarea>
+		<MkSwitch v-model="value.attachCanvasImage"><span>{{ i18n.ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
+		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ i18n.ts._pages.blocks._post.canvasId }}</template></MkInput>
 	</section>
 </XContainer>
 </template>
@@ -18,14 +18,15 @@ import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
 		text: '',
 		attachCanvasImage: false,
-		canvasId: ''
-	}
+		canvasId: '',
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 7119a4e5af08..be2fd10ae82f 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,13 +1,13 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.radioButton }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
-		<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
-		<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
-		<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
+		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ i18n.ts._pages.blocks._radioButton.name }}</template></MkInput>
+		<MkInput v-model="value.title"><template #label>{{ i18n.ts._pages.blocks._radioButton.title }}</template></MkInput>
+		<MkTextarea v-model="values"><template #label>{{ i18n.ts._pages.blocks._radioButton.values }}</template></MkTextarea>
+		<MkInput v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._radioButton.default }}</template></MkInput>
 	</section>
 </XContainer>
 </template>
@@ -18,22 +18,23 @@ import { watch } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
 		name: '',
 		title: '',
-		values: []
-	}
+		values: [],
+	},
 });
 
-let values: string = $ref(props.value.values.join('\n'));
+let values = $ref<string>(props.value?.values.join('\n') ?? '');
 
 watch(values, () => {
 	props.value.values = values.split('\n');
 }, {
-	deep: true
+	deep: true,
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index b68553ae7ce3..72afcd0cc87c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.switch }}</template>
 
 	<section class="kjuadyyj">
-		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
-		<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
+		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ i18n.ts._pages.blocks._switch.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._switch.text }}</template></MkInput>
+		<MkSwitch v-model="value.default"><span>{{ i18n.ts._pages.blocks._switch.default }}</span></MkSwitch>
 	</section>
 </XContainer>
 </template>
@@ -17,13 +17,14 @@ import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		name: ''
-	}
+		name: '',
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index 0f5c2b2d4ece..23011b4579a7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.textInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput>
-		<MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput>
+		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ i18n.ts._pages.blocks._textInput.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textInput.text }}</template></MkInput>
+		<MkInput v-model="value.default" type="text"><template #label>{{ i18n.ts._pages.blocks._textInput.default }}</template></MkInput>
 	</section>
 </XContainer>
 </template>
@@ -16,12 +16,13 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		name: ''
-	}
+		name: '',
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index bbea255dbef0..564ca295384e 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-align-left"></i> {{ $ts._pages.blocks.text }}</template>
+	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section class="vckmsadr">
 		<textarea v-model="value.text"></textarea>
@@ -13,13 +13,14 @@
 /* eslint-disable vue/no-mutating-props */
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		text: ''
-	}
+		text: '',
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index bd2d8a5807f5..47be903b6f46 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.textareaInput }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput>
-		<MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
+		<MkInput v-model="value.name"><template #prefix><i class="ti ti-wand"></i></template><template #label>{{ i18n.ts._pages.blocks._textareaInput.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textareaInput.text }}</template></MkInput>
+		<MkTextarea v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
 	</section>
 </XContainer>
 </template>
@@ -17,12 +17,13 @@ import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		name: ''
-	}
+		name: '',
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index 9c6e83dccc2f..6a3938b8d175 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-align-left"></i> {{ $ts._pages.blocks.textarea }}</template>
+	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.textarea }}</template>
 
 	<section class="ihymsbbe">
 		<textarea v-model="value.text"></textarea>
@@ -13,13 +13,14 @@
 /* eslint-disable vue/no-mutating-props */
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
-		text: ''
-	}
+		text: '',
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index efc9aac2a76f..fd5136f785dd 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -16,8 +16,8 @@
 			</button>
 		</div>
 	</header>
-	<p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
-	<p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
+	<p v-show="showBody" v-if="error != null" class="error">{{ i18n.t('_pages.script.typeError', { slot: error.arg + 1, expect: i18n.t(`script.types.${error.expect}`), actual: i18n.t(`script.types.${error.actual}`) }) }}</p>
+	<p v-show="showBody" v-if="warn != null" class="warn">{{ i18n.t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
 	<div v-show="showBody" class="body">
 		<slot></slot>
 	</div>
@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
@@ -50,12 +51,16 @@ export default defineComponent({
 			default: null
 		}
 	},
+
 	emits: ['toggle', 'remove'],
+
 	data() {
 		return {
 			showBody: this.expanded,
+			i18n,
 		};
 	},
+
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
@@ -63,8 +68,8 @@ export default defineComponent({
 		},
 		remove() {
 			this.$emit('remove');
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index e8da96499678..036cdc23a174 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -9,7 +9,7 @@
 	</template>
 
 	<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
-		{{ $ts._pages.script.emptySlot }}
+		{{ i18n.ts._pages.script.emptySlot }}
 	</section>
 	<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
 		<input v-model="modelValue.value"/>
@@ -18,7 +18,7 @@
 		<textarea v-model="modelValue.value"></textarea>
 	</section>
 	<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
-		<textarea v-model="modelValue.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea>
+		<textarea v-model="modelValue.value" :placeholder="i18n.ts._pages.script.blocks._textList.info"></textarea>
 	</section>
 	<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
 		<input v-model="modelValue.value" type="number"/>
@@ -26,13 +26,13 @@
 	<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
 		<select v-model="modelValue.value">
 			<option v-for="(v, i) in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :key="i" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$ts._pages.script.argVariables">
+			<optgroup :label="i18n.ts._pages.script.argVariables">
 				<option v-for="(v, i) in fnSlots" :key="i" :value="v.name">{{ v.name }}</option>
 			</optgroup>
-			<optgroup :label="$ts._pages.script.pageVariables">
+			<optgroup :label="i18n.ts._pages.script.pageVariables">
 				<option v-for="(v, i) in hpml.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :key="i" :value="v">{{ v }}</option>
 			</optgroup>
-			<optgroup :label="$ts._pages.script.enviromentVariables">
+			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
 				<option v-for="(v, i) in hpml.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :key="i" :value="v">{{ v }}</option>
 			</optgroup>
 		</select>
@@ -42,16 +42,16 @@
 	</section>
 	<section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
 		<MkTextarea v-model="slots">
-			<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
-			<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
+			<template #label>{{ i18n.ts._pages.script.blocks._fn.slots }}</template>
+			<template #caption>{{ i18n.t('_pages.script.blocks._fn.slots-info') }}</template>
 		</MkTextarea>
-		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
+		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="i18n.t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
 	</section>
 	<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
 		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
 	</section>
 	<section v-else class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>
+		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="i18n.t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>
 	</section>
 </XContainer>
 </template>
@@ -66,6 +66,7 @@ import { blockDefs } from '@/scripts/hpml/index';
 import * as os from '@/os';
 import { isLiteralValue } from '@/scripts/hpml/expr';
 import { funcDefs } from '@/scripts/hpml/lib';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -78,17 +79,17 @@ export default defineComponent({
 	props: {
 		getExpectedType: {
 			required: false,
-			default: null
+			default: null,
 		},
 		modelValue: {
-			required: true
+			required: true,
 		},
 		title: {
-			required: false
+			required: false,
 		},
 		removable: {
 			required: false,
-			default: false
+			default: false,
 		},
 		hpml: {
 			required: true,
@@ -101,8 +102,8 @@ export default defineComponent({
 		},
 		draggable: {
 			required: false,
-			default: false
-		}
+			default: false,
+		},
 	},
 
 	data() {
@@ -110,6 +111,7 @@ export default defineComponent({
 			error: null,
 			warn: null,
 			slots: '',
+			i18n,
 		};
 	},
 
@@ -122,7 +124,7 @@ export default defineComponent({
 		typeText(): any {
 			if (this.modelValue.type === null) return null;
 			if (this.modelValue.type.startsWith('fn:')) return this.modelValue.type.split(':')[1];
-			return this.$t(`_pages.script.blocks.${this.modelValue.type}`);
+			return i18n.t(`_pages.script.blocks.${this.modelValue.type}`);
 		},
 	},
 
@@ -131,11 +133,11 @@ export default defineComponent({
 			handler() {
 				this.modelValue.value.slots = this.slots.split('\n').map(x => ({
 					name: x,
-					type: null
+					type: null,
 				}));
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 
 	created() {
@@ -150,7 +152,7 @@ export default defineComponent({
 				const id = uuid();
 				this.modelValue.value = {
 					slots: [],
-					expression: { id, type: null }
+					expression: { id, type: null },
 				};
 				return;
 			}
@@ -194,13 +196,13 @@ export default defineComponent({
 			const emptySlotIndex = args.findIndex(x => x.type === null);
 			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
 				this.warn = {
-					slot: emptySlotIndex
+					slot: emptySlotIndex,
 				};
 			} else {
 				this.warn = null;
 			}
 		}, {
-			deep: true
+			deep: true,
 		});
 
 		this.$watch(() => this.hpml.variables, () => {
@@ -208,15 +210,15 @@ export default defineComponent({
 				this.error = this.hpml.typeCheck(this.modelValue);
 			}
 		}, {
-			deep: true
+			deep: true,
 		});
 	},
 
 	methods: {
 		async changeType() {
 			const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.selectType,
-				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
+				title: i18n.ts._pages.selectType,
+				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null),
 			});
 			if (canceled) return;
 			this.modelValue.type = type;
@@ -224,8 +226,8 @@ export default defineComponent({
 
 		_getExpectedType(slot: number) {
 			return this.hpml.getExpectedType(this.modelValue, slot);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index cfa0f01045d2..cac291ca57a5 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -3,42 +3,42 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="jqqmcavi">
-			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ $ts._pages.viewPage }}</MkButton>
-			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ $ts.save }}</MkButton>
-			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
-			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ $ts.delete }}</MkButton>
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ i18n.ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 
 		<div v-if="tab === 'settings'">
 			<div class="_formRoot">
 				<MkInput v-model="title" class="_formBlock">
-					<template #label>{{ $ts._pages.title }}</template>
+					<template #label>{{ i18n.ts._pages.title }}</template>
 				</MkInput>
 
 				<MkInput v-model="summary" class="_formBlock">
-					<template #label>{{ $ts._pages.summary }}</template>
+					<template #label>{{ i18n.ts._pages.summary }}</template>
 				</MkInput>
 
 				<MkInput v-model="name" class="_formBlock">
 					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<template #label>{{ $ts._pages.url }}</template>
+					<template #label>{{ i18n.ts._pages.url }}</template>
 				</MkInput>
 
-				<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
+				<MkSwitch v-model="alignCenter" class="_formBlock">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
 
 				<MkSelect v-model="font" class="_formBlock">
-					<template #label>{{ $ts._pages.font }}</template>
-					<option value="serif">{{ $ts._pages.fontSerif }}</option>
-					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+					<template #label>{{ i18n.ts._pages.font }}</template>
+					<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
+					<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
 				</MkSelect>
 
-				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
 				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
 					<div v-else-if="eyeCatchingImage">
 						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
 					</div>
 				</div>
 			</div>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 1b912d828def..64debd7deed1 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
-		<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+		<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
 				<div class="_block main">
 					<!--
@@ -74,6 +74,8 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { defaultStore } from '@/store';
+import { $i } from '@/account';
 
 const props = defineProps<{
 	pageName: string;
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index bfaf4c8560d6..b0c342f031d2 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -13,10 +13,10 @@
 
 		<div v-if="searchType === 'note'">
 			<Transition
-				:enter-active-class="$store.state.animation ? $style.transition_x_enterActive : ''"
-				:leave-active-class="$store.state.animation ? $style.transition_x_leaveActive : ''"
-				:enter-from-class="$store.state.animation ? $style.transition_x_enterFrom : ''"
-				:leave-to-class="$store.state.animation ? $style.transition_x_leaveTo : ''"
+				:enter-active-class="defaultStore.state.animation ? $style.transition_x_enterActive : ''"
+				:leave-active-class="defaultStore.state.animation ? $style.transition_x_leaveActive : ''"
+				:enter-from-class="defaultStore.state.animation ? $style.transition_x_enterFrom : ''"
+				:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
 			>
 				<div v-if="pickup" :class="$style.pickup">
 					<div :class="$style.pickupLabel">Pickup</div>
@@ -57,6 +57,7 @@ import FormRadios from '@/components/form/radios.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 type SearchType = 'note' | 'user';
 type SearchOrigin = 'combined' | 'local' | 'remote';
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index db5f5dd3a043..e5fc9fa1b78a 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -52,7 +52,7 @@
 					</template>
 				</I18n>
 			</li>
-			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ $ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
+			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ i18n.ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
 			<li>
 				{{ i18n.ts._2fa.step3 }}<br>
 				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 05abadff23a0..eadb7c19d4ef 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -27,7 +27,7 @@
 					<details>
 						<summary>{{ i18n.ts.details }}</summary>
 						<ul>
-							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+							<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
 						</ul>
 					</details>
 				</div>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 8a25ff39f058..38827f407c4b 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -14,6 +14,7 @@ import * as os from '@/os';
 import { signout } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
 
 async function deleteAccount() {
 	{
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 29ac6c4557ca..ecfeb4fa9cca 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -19,38 +19,37 @@ import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-async function readAllUnreadNotes() {
+const readAllUnreadNotes = async (): Promise<void> => {
 	await os.api('i/read-all-unread-notes');
-}
+};
 
-async function readAllMessagingMessages() {
+const readAllMessagingMessages = async (): Promise<void> => {
 	await os.api('i/read-all-messaging-messages');
-}
+};
 
-async function readAllNotifications() {
+const readAllNotifications = async (): Promise<void> => {
 	await os.api('notifications/mark-all-as-read');
-}
+};
 
-function configure() {
+const configure = (): void => {
 	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
 	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes,
 		showGlobalToggle: false,
 	}, {
-		done: async (res) => {
+		done: async (res: {
+			includingTypes: typeof notificationTypes[number][] | null;
+		}) => {
 			const { includingTypes: value } = res;
 			await os.apiWithDialog('i/update', {
-				mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
+				mutingNotificationTypes: notificationTypes.filter(x => !value?.includes(x)),
 			}).then(i => {
-				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
+				if (!$i) return;
+				$i.mutingNotificationTypes = i.mutingNotificationTypes;
 			});
 		},
 	}, 'closed');
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
+};
 
 definePageMetadata({
 	title: i18n.ts.notifications,
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index b774ebe87a98..d1c811afb5aa 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -7,7 +7,7 @@
 	<FormSection>
 		<template #label>{{ i18n.ts.sounds }}</template>
 		<FormLink v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;" @click="edit(type)">
-			{{ $t('_sfx.' + type) }}
+			{{ i18n.t('_sfx.' + type) }}
 			<template #suffix>{{ sounds[type].type || i18n.ts.none }}</template>
 			<template #suffixIcon><i class="ti ti-chevron-down"></i></template>
 		</FormLink>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 72775ed5c96a..0346bf32eb68 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -2,14 +2,14 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<XNotes class="_content" :pagination="pagination"/>
+		<MkNotes class="_content" :pagination="pagination"/>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 9f7d98e81135..a72fbc75b99b 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -3,13 +3,14 @@
 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-			<TmsPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+			<XTutorial v-if="defaultStore.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+			<TmsPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
 			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 			<div class="tl _block">
-				<XTimeline
-					ref="tl" :key="src"
+				<MkTimeline
+					ref="tl"
+					:key="src"
 					class="tl"
 					:src="src"
 					:sound="true"
@@ -23,7 +24,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, watch, provide } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
 import TmsPostForm from '@/components/TmsPostForm.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -32,6 +33,7 @@ import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 
 provide('shouldOmitHeaderTitle', true);
 
@@ -39,11 +41,11 @@ const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
 const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
 const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
-const keymap = {
-	't': focus,
-};
+const keymap = $computed(() => ({
+	// 't': focus,
+}));
 
-const tlComponent = $ref<InstanceType<typeof XTimeline>>();
+// const tlComponent = $ref<InstanceType<typeof MkTimeline>>();
 const rootEl = $ref<HTMLElement>();
 
 let queue = $ref(0);
@@ -51,25 +53,28 @@ const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set:
 
 watch ($$(src), () => queue = 0);
 
-function queueUpdated(q: number): void {
+const queueUpdated = (q: number): void => {
 	queue = q;
-}
+};
 
-function top(): void {
+const top = (): void => {
+	if (!rootEl) return;
 	scroll(rootEl, { top: 0 });
-}
+};
 
-async function chooseList(ev: MouseEvent): Promise<void> {
+const chooseList = async (ev: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
 	const lists = await os.api('users/lists/list');
 	const items = lists.map(list => ({
 		type: 'link' as const,
 		text: list.name,
 		to: `/timeline/list/${list.id}`,
 	}));
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
+	os.popupMenu(items, el);
+};
 
-async function chooseAntenna(ev: MouseEvent): Promise<void> {
+const chooseAntenna = async (ev: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
 	const antennas = await os.api('antennas/list');
 	const items = antennas.map(antenna => ({
 		type: 'link' as const,
@@ -77,41 +82,44 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
 		indicate: antenna.hasUnreadNote,
 		to: `/timeline/antenna/${antenna.id}`,
 	}));
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
+	os.popupMenu(items, el);
+};
 
-async function chooseChannel(ev: MouseEvent): Promise<void> {
+const chooseChannel = async (ev: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
 	const channels = await os.api('channels/followed', {
 		limit: 100,
 	});
-	const items = channels.map(channel => ({
+	const items = channels?.map(channel => ({
 		type: 'link' as const,
 		text: channel.name,
 		indicate: channel.hasUnreadNote,
 		to: `/channels/${channel.id}`,
-	}));
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
+	})) ?? [];
+	os.popupMenu(items, el);
+};
 
-function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global'): void {
+const saveSrc = (newSrc: 'home' | 'local' | 'social' | 'global'): void => {
 	defaultStore.set('tl', {
 		...defaultStore.state.tl,
 		src: newSrc,
 	});
-}
+};
 
-async function timetravel(): Promise<void> {
-	const { canceled, result: date } = await os.inputDate({
-		title: i18n.ts.date,
-	});
-	if (canceled) return;
+// const timetravel = async (): Promise<void> => {
+// 	if (!tlComponent) return;
 
-	tlComponent.timetravel(date);
-}
+// 	const { canceled, result: date } = await os.inputDate({
+// 		title: i18n.ts.date,
+// 	});
+// 	if (canceled) return;
 
-function focus(): void {
-	tlComponent.focus();
-}
+// 	tlComponent.timetravel(date);
+// };
+
+// const focus = (): void => {
+// 	tlComponent?.focus();
+// };
 
 const headerActions = $computed(() => []);
 
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 821a3f3dadf4..da2920a48f05 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -178,7 +178,7 @@ import { url } from '@/config';
 import { userPage, acct } from '@/filters/user';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import { iAmAdmin, iAmModerator } from '@/account';
+import { $i, iAmAdmin, iAmModerator } from '@/account';
 import { instance } from '@/instance';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index d9930a5bcac8..28587f5a95c0 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -4,8 +4,9 @@
 	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
 		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="listId"
+			<MkTimeline
+				ref="tlEl"
+				:key="listId"
 				class="tl"
 				src="list"
 				:list="listId"
@@ -19,7 +20,8 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
+import { UserList } from 'misskey-js/built/entities';
+import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { useRouter } from '@/router';
@@ -32,10 +34,10 @@ const props = defineProps<{
 	listId: string;
 }>();
 
-let list = $ref(null);
+let list = $ref<UserList | null>(null);
 let queue = $ref(0);
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
-let rootEl = $ref<HTMLElement>();
+const tlEl = $ref<InstanceType<typeof MkTimeline>>();
+const rootEl = $ref<HTMLElement>();
 
 watch(() => props.listId, async () => {
 	list = await os.api('users/lists/show', {
@@ -43,31 +45,35 @@ watch(() => props.listId, async () => {
 	});
 }, { immediate: true });
 
-function queueUpdated(q) {
+const queueUpdated = (q): void => {
 	queue = q;
-}
+};
 
-function top() {
+const top = (): void => {
+	if (!rootEl) return;
 	scroll(rootEl, { top: 0 });
-}
+};
 
-function settings() {
+const settings = (): void => {
 	router.push(`/my/lists/${props.listId}`);
-}
+};
 
-async function timetravel() {
-	const { canceled, result: date } = await os.inputDate({
-		title: i18n.ts.date,
-	});
-	if (canceled) return;
+// const timetravel = async (): Promise<void> => {
+// 	if (!tlEl) return;
 
-	tlEl.timetravel(date);
-}
+// 	const { canceled, result: date } = await os.inputDate({
+// 		title: i18n.ts.date,
+// 	});
+// 	if (canceled) return;
+
+// 	tlEl.timetravel(date);
+// };
 
 const headerActions = $computed(() => list ? [{
 	icon: 'ti ti-calendar-time',
 	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
+	// handler: timetravel,
+	handler: (): void => {},
 }, {
 	icon: 'ti ti-settings',
 	text: i18n.ts.settings,
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 26a7faf9113a..70505c90dcc8 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -51,7 +51,7 @@
 						</dl>
 						<dl v-if="user.birthday" class="field">
 							<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.t('yearsOld', { age }) }})</dd>
 						</dl>
 						<dl class="field">
 							<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
@@ -87,7 +87,7 @@
 
 			<div class="contents">
 				<div v-if="user.pinnedNotes.length > 0" class="_gap">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
+					<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
 				</div>
 				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">
@@ -112,7 +112,7 @@ import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import calcAge from 's-age';
 import * as misskey from 'misskey-js';
 import XUserTimeline from './index.timeline.vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
 import MkInfo from '@/components/MkInfo.vue';
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index f60b78df4443..c6c6b889d285 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer>
-	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
+	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ i18n.ts.activity }}</template>
 	<template #func>
 		<button class="_button" @click="showMenu">
 			<i class="ti ti-dots"></i>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 02dd3a9d415e..f58d6aeeec41 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :max-height="300" :foldable="true">
-	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
+	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ i18n.ts.images }}</template>
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
 		<div v-if="!fetching && images.length > 0" class="stream">
@@ -13,7 +13,7 @@
 				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
 			</MkA>
 		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
+		<p v-if="!fetching && images.length == 0" class="empty">{{ i18n.ts.nothing }}</p>
 	</div>
 </MkContainer>
 </template>
@@ -27,6 +27,7 @@ import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 7ac54f962e2f..94fc28a3256d 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -7,14 +7,14 @@
 			<option value="files">{{ i18n.ts.withFiles }}</option>
 		</MkTab>
 	</template>
-	<XNotes :no-gap="true" :pagination="pagination"/>
+	<MkNotes :no-gap="true" :pagination="pagination"/>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import * as misskey from 'misskey-js';
-import XNotes from '@/components/MkNotes.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index f43860319976..77ced41a00e3 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -14,7 +14,7 @@
 			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
 		</div>
 		<div class="main">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
 			<div class="fg">
 				<h1>
@@ -49,13 +49,14 @@
 import { } from 'vue';
 import XTimeline from './welcome.timeline.vue';
 import MarqueeText from '@/components/MkMarquee.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkSigninDialog from '@/components/MkSigninDialog.vue';
+import MkSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import { instanceName } from '@/config';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
 let meta = $ref();
 let stats = $ref();
@@ -90,13 +91,13 @@ os.api('federation/instances', {
 });
 
 function signin() {
-	os.popup(XSigninDialog, {
+	os.popup(MkSigninDialog, {
 		autoSet: true,
 	}, {}, 'closed');
 }
 
 function signup() {
-	os.popup(XSignupDialog, {
+	os.popup(MkSignupDialog, {
 		autoSet: true,
 	}, {}, 'closed');
 }
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index fb4b49a2ea3d..51923b8d94bb 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -10,22 +10,22 @@
 			</h1>
 			<div class="about">
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+				<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
 			</div>
 			<div class="action">
-				<MkButton class="signup" inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
-				<MkButton class="signin" inline @click="signin()">{{ $ts.login }}</MkButton>
+				<MkButton class="signup" inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
+				<MkButton class="signin" inline @click="signin()">{{ i18n.ts.login }}</MkButton>
 			</div>
 			<div v-if="onlineUsersCount && stats" class="status">
 				<div>
-					<I18n :src="$ts.nUsers" text-tag="span" class="users">
+					<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
 						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
 					</I18n>
-					<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+					<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
 						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
 					</I18n>
 				</div>
-				<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+				<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
 					<template #n><b>{{ onlineUsersCount }}</b></template>
 				</I18n>
 			</div>
@@ -39,19 +39,20 @@
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
 import XTimeline from './welcome.timeline.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkSigninDialog from '@/components/MkSigninDialog.vue';
+import MkSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
 		MkButton,
-		XNote,
+		MkNote,
 		XTimeline,
 		MkFeaturedPhotos,
 	},
@@ -64,6 +65,7 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
+			i18n,
 		};
 	},
 
@@ -82,7 +84,7 @@ export default defineComponent({
 
 		os.api('hashtags/list', {
 			sort: '+mentionedLocalUsers',
-			limit: 8
+			limit: 8,
 		}).then(tags => {
 			this.tags = tags;
 		});
@@ -90,41 +92,41 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
+			os.popup(MkSigninDialog, {
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
+			os.popup(MkSignupDialog, {
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		showMenu(ev) {
 			os.popupMenu([{
-				text: this.$t('aboutX', { x: instanceName }),
+				text: i18n.t('aboutX', { x: instanceName }),
 				icon: 'ti ti-info-circle',
-				action: () => {
+				action: (): void => {
 					os.pageWindow('/about');
-				}
+				},
 			}, {
-				text: this.$ts.aboutMisskey,
+				text: i18n.ts.aboutMisskey,
 				icon: 'ti ti-info-circle',
-				action: () => {
+				action: (): void => {
 					os.pageWindow('/about-misskey');
-				}
+				},
 			}, null, {
-				text: this.$ts.help,
+				text: i18n.ts.help,
 				icon: 'ti ti-question-circle',
-				action: () => {
+				action: (): void => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				}
+				},
 			}], ev.currentTarget ?? ev.target);
 		},
 
-		number
-	}
+		number,
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 845b8be89d17..c8c059e47a8a 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -22,22 +22,22 @@
 					</h1>
 					<div class="about">
 						<!-- eslint-disable-next-line vue/no-v-html -->
-						<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+						<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
 					</div>
 					<div class="action">
-						<MkButton inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
-						<MkButton inline @click="signin()">{{ $ts.login }}</MkButton>
+						<MkButton inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
+						<MkButton inline @click="signin()">{{ i18n.ts.login }}</MkButton>
 					</div>
 					<div v-if="onlineUsersCount && stats" class="status">
 						<div>
-							<I18n :src="$ts.nUsers" text-tag="span" class="users">
+							<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
 								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
 							</I18n>
-							<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+							<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
 								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
 							</I18n>
 						</div>
-						<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+						<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
 							<template #n><b>{{ onlineUsersCount }}</b></template>
 						</I18n>
 					</div>
@@ -45,10 +45,10 @@
 				</div>
 			</div>
 			<nav class="nav">
-				<MkA to="/announcements">{{ $ts.announcements }}</MkA>
-				<MkA to="/explore">{{ $ts.explore }}</MkA>
-				<MkA to="/channels">{{ $ts.channel }}</MkA>
-				<MkA to="/featured">{{ $ts.featured }}</MkA>
+				<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
+				<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
+				<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
+				<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
 			</nav>
 		</div>
 	</div>
@@ -59,19 +59,20 @@
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
 import XTimeline from './welcome.timeline.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkSigninDialog from '@/components/MkSigninDialog.vue';
+import MkSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
 		MkButton,
-		XNote,
+		MkNote,
 		MkFeaturedPhotos,
 		XTimeline,
 	},
@@ -84,6 +85,7 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
+			i18n,
 		};
 	},
 
@@ -110,32 +112,32 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
+			os.popup(MkSigninDialog, {
 				autoSet: true
 			}, {}, 'closed');
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
+			os.popup(MkSignupDialog, {
 				autoSet: true
 			}, {}, 'closed');
 		},
 
 		showMenu(ev) {
 			os.popupMenu([{
-				text: this.$t('aboutX', { x: instanceName }),
+				text: i18n.t('aboutX', { x: instanceName }),
 				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about');
 				}
 			}, {
-				text: this.$ts.aboutMisskey,
+				text: i18n.ts.aboutMisskey,
 				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
 				}
 			}, null, {
-				text: this.$ts.help,
+				text: i18n.ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index 2729d30d4b0e..ab9212198fb6 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -2,19 +2,19 @@
 <form class="mk-setup" @submit.prevent="submit()">
 	<h1>Welcome to Misskey!</h1>
 	<div class="_formRoot">
-		<p>{{ $ts.intro }}</p>
+		<p>{{ i18n.ts.intro }}</p>
 		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
-			<template #label>{{ $ts.username }}</template>
+			<template #label>{{ i18n.ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</MkInput>
 		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
-			<template #label>{{ $ts.password }}</template>
+			<template #label>{{ i18n.ts.password }}</template>
 			<template #prefix><i class="ti ti-lock"></i></template>
 		</MkInput>
 		<div class="bottom _formBlock">
 			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
-				{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/>
+				{{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/>
 			</MkButton>
 		</div>
 	</div>
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index 2cd263caee48..7f435b9c2787 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -9,13 +9,13 @@
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
 				<div v-if="note.files.length > 0" class="richcontent">
-					<XMediaList :media-list="note.files"/>
+					<MkMediaList :media-list="note.files"/>
 				</div>
 				<div v-if="note.poll">
-					<XPoll :note="note" :read-only="true"/>
+					<MkPoll :note="note" :read-only="true"/>
 				</div>
 			</div>
-			<XReactionsViewer ref="reactionsViewer" :note="note"/>
+			<MkReactionsViewer ref="reactionsViewer" :note="note"/>
 		</div>
 	</div>
 </div>
@@ -23,22 +23,24 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkPoll from '@/components/MkPoll.vue';
 import * as os from '@/os';
+import { $i } from '@/account';
 
 export default defineComponent({
 	components: {
-		XReactionsViewer,
-		XMediaList,
-		XPoll
+		MkReactionsViewer,
+		MkMediaList,
+		MkPoll
 	},
 
 	data() {
 		return {
 			notes: [],
 			isScrolling: false,
+			$i,
 		};
 	},
 
diff --git a/packages/client/src/scripts/tms/utils.ts b/packages/client/src/scripts/tms/utils.ts
index ef9fac32a726..81be59b2acd2 100644
--- a/packages/client/src/scripts/tms/utils.ts
+++ b/packages/client/src/scripts/tms/utils.ts
@@ -22,3 +22,23 @@ export const getHtmlElementFromEvent = <T extends HTMLElement>(event?: Event | n
 	const el = event?.currentTarget ?? event?.target;
 	return isHtmlElement<T>(el) ? el : null;
 };
+
+type TypedKeys<T extends Record<string, unknown>> = (keyof T)[];
+
+type TypedValues<T extends Record<string, unknown>> = T[keyof T][];
+
+type TypedEntries<T extends Record<string, unknown>> = {
+	[K in keyof T]: [keyof Pick<T, K>, T[K]];
+}[keyof T][];
+
+export const typedKeys = <T extends Record<string, unknown>>(obj: T): TypedKeys<T> => {
+	return Object.keys(obj) as unknown as TypedKeys<T>;
+};
+
+export const typedValues = <T extends Record<string, unknown>>(obj: T): TypedValues<T> => {
+	return Object.values(obj) as unknown as TypedValues<T>;
+};
+
+export const typedEntries = <T extends Record<string, unknown>>(obj: T): TypedEntries<T> => {
+	return Object.entries(obj) as unknown as TypedEntries<T>;
+};
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 4680c6934be8..8cf4f5616217 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -374,10 +374,3 @@ export class ColdDeviceStorage {
 		};
 	}
 }
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$store: typeof defaultStore;
-	}
-}
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 901d11eee550..9573bbf93e3e 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -9,7 +9,7 @@
 
 <XUpload v-if="uploads.length > 0"/>
 
-<TransitionGroup :name="$store.state.animation ? 'notification' : ''" tag="div" class="notification-toast">
+<TransitionGroup :name="defaultStore.state.animation ? 'notification' : ''" tag="div" class="notification-toast">
 	<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" class="notification"/>
 </TransitionGroup>
 
@@ -33,6 +33,7 @@ import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XUpload = defineAsyncComponent(() => import('./upload.vue'));
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index c6eb0ba87496..cebe1f0765b9 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -2,9 +2,9 @@
 <div class="kmwsukvl">
 	<div class="body">
 		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
+			<div class="banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
 			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button>
 		</div>
 		<div class="middle">
@@ -51,6 +51,7 @@ import { openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
+import { $i } from '@/account';
 
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 01238f0989a4..54d9aeede1f3 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -2,9 +2,9 @@
 <div class="mvcprjjd" :class="{ iconOnly }">
 	<div class="body">
 		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			<div class="banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
+			<button v-click-anime v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+				<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button>
 		</div>
 		<div class="middle">
diff --git a/packages/client/src/ui/_common_/notification.vue b/packages/client/src/ui/_common_/notification.vue
index 06dfcb0a2393..19060b52dd27 100644
--- a/packages/client/src/ui/_common_/notification.vue
+++ b/packages/client/src/ui/_common_/notification.vue
@@ -1,13 +1,13 @@
 <template>
 <div :class="$style.root">
-	<XNotification :notification="notification" class="notification _acrylic" :full="false"/>
+	<MkNotification :notification="notification" class="notification _acrylic" :full="false"/>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNotification from '@/components/MkNotification.vue';
+import MkNotification from '@/components/MkNotification.vue';
 
 defineProps<{
 	notification: misskey.entities.Notification;
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index 9a67c15cb59a..f7f2889c5aa2 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
+<div v-if="hasDisconnected && defaultStore.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
 	<div>{{ i18n.ts.disconnectedFromServer }}</div>
 	<div class="command">
 		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
@@ -12,6 +12,7 @@
 import { onUnmounted } from 'vue';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 let hasDisconnected = $ref(false);
 
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 16bf2d4d6796..161c98d5887d 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -2,18 +2,18 @@
 <div class="azykntjl">
 	<div class="body">
 		<div class="left">
-			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
+			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
 				<i class="ti ti-home ti-fw"></i>
 			</MkA>
 			<template v-for="item in menu" :key="item">
 				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="i18n.ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
 					<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
 					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="ti ti-dashboard ti-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
@@ -22,7 +22,7 @@
 			</button>
 		</div>
 		<div class="right">
-			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="ti ti-settings ti-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
@@ -43,9 +43,11 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
+import { $i, openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
 import { mainRouter } from '@/router';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -59,12 +61,14 @@ export default defineComponent({
 			connection: null,
 			navbarItemDef: navbarItemDef,
 			settingsWindowed: false,
+			i18n,
+			$i,
 		};
 	},
 
 	computed: {
 		menu(): string[] {
-			return this.$store.state.menu;
+			return defaultStore.state.menu;
 		},
 
 		otherNavItemIndicated(): boolean {
@@ -77,7 +81,7 @@ export default defineComponent({
 	},
 
 	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
+		'defaultStore.reactiveState.menuDisplay.value'() {
 			this.calcViewState();
 		},
 	},
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 41dcff1fad1d..ad4c96991ed9 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -5,35 +5,35 @@
 	</button>
 	<div class="post" data-cy-open-post-form @click="post">
 		<MkButton class="button" gradate full rounded>
-			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
+			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
 		</MkButton>
 	</div>
 	<div class="divider"></div>
 	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		<i class="ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu" :key="item">
 		<div v-if="item === '-'" class="divider"></div>
 		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
 			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
-	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+	<MkA v-if="$i?.isAdmin || $i?.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 	</MkA>
 	<button v-click-anime class="item _button" @click="more">
-		<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
+		<i class="ti ti-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 		<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
 	</button>
 	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
+		<i class="ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
 		<MkA v-click-anime class="link" to="/about">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+			<img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
 		</MkA>
 	</div>
 	<!--<MisskeyLogo class="misskey"/>-->
@@ -45,10 +45,13 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
+import { $i, openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import { mainRouter } from '@/router';
+import { instance } from '@/instance';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 //import MisskeyLogo from '@assets/client/misskey.svg';
 
 export default defineComponent({
@@ -57,6 +60,8 @@ export default defineComponent({
 		//MisskeyLogo,
 	},
 
+	emits: ['change-view-mode'],
+
 	data() {
 		return {
 			host: host,
@@ -65,12 +70,15 @@ export default defineComponent({
 			navbarItemDef: navbarItemDef,
 			iconOnly: false,
 			settingsWindowed: false,
+			instance,
+			i18n,
+			$i,
 		};
 	},
 
 	computed: {
 		menu(): string[] {
-			return this.$store.state.menu;
+			return defaultStore.state.menu;
 		},
 
 		otherNavItemIndicated(): boolean {
@@ -83,7 +91,7 @@ export default defineComponent({
 	},
 
 	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
+		'defaultStore.reactiveState.menuDisplay.value'() {
 			this.calcViewState();
 		},
 
@@ -108,7 +116,7 @@ export default defineComponent({
 
 	methods: {
 		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
+			this.iconOnly = (window.innerWidth <= 1400) || (defaultStore.state.menuDisplay === 'sideIcon');
 			this.settingsWindowed = (window.innerWidth > 1400);
 		},
 
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 19be5f841de1..1060645cfb00 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -21,7 +21,7 @@
 		</div>
 	</div>
 
-	<Transition :name="$store.state.animation ? 'tray-back' : ''">
+	<Transition :name="defaultStore.state.animation ? 'tray-back' : ''">
 		<div
 			v-if="widgetsShowing"
 			class="tray-back _modalBg"
@@ -30,11 +30,11 @@
 		></div>
 	</transition>
 
-	<Transition :name="$store.state.animation ? 'tray' : ''">
+	<Transition :name="defaultStore.state.animation ? 'tray' : ''">
 		<XWidgets v-if="widgetsShowing" class="tray"/>
 	</transition>
 
-	<iframe v-if="$store.state.aiChanMode" ref="live2d" class="ivnzpscs" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
+	<iframe v-if="defaultStore.state.aiChanMode" ref="live2d" class="ivnzpscs" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
 
 	<XCommon/>
 </div>
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 120ae98bb5ee..280385757d0e 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -1,26 +1,28 @@
 <template>
 <div class="ddiqwdnk">
-	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkWidgets class="widgets" :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 	<MkAd class="a" :prefer="['square']"/>
 
-	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ $ts.editWidgets }}</button>
+	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
+import MkWidgets from '@/components/MkWidgets.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
-		XWidgets
+		MkWidgets,
 	},
 
 	props: {
 		place: {
 			type: String,
-		}
+		},
 	},
 
 	emits: ['mounted'],
@@ -28,6 +30,8 @@ export default defineComponent({
 	data() {
 		return {
 			editMode: false,
+			defaultStore,
+			i18n,
 		};
 	},
 
@@ -37,30 +41,30 @@ export default defineComponent({
 
 	methods: {
 		addWidget(widget) {
-			this.$store.set('widgets', [{
+			defaultStore.set('widgets', [{
 				...widget,
 				place: this.place,
-			}, ...this.$store.state.widgets]);
+			}, ...defaultStore.state.widgets]);
 		},
 
 		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id !== widget.id));
+			defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id));
 		},
 
 		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+			defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
 				...w,
 				data,
 			} : w));
 		},
 
 		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
+			defaultStore.set('widgets', [
+				...defaultStore.state.widgets.filter(w => w.place !== this.place),
+				...widgets,
 			]);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 303747956257..45b3c4b06603 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -54,7 +54,7 @@
 		<button class="button post _button" @click="os.post()"><i class="icon ti ti-pencil"></i></button>
 	</div>
 
-	<Transition :name="$store.state.animation ? 'menu-back' : ''">
+	<Transition :name="defaultStore.state.animation ? 'menu-back' : ''">
 		<div
 			v-if="drawerMenuShowing"
 			class="menu-back _modalBg"
@@ -63,7 +63,7 @@
 		></div>
 	</transition>
 
-	<Transition :name="$store.state.animation ? 'menu' : ''">
+	<Transition :name="defaultStore.state.animation ? 'menu' : ''">
 		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
 	</transition>
 
@@ -88,6 +88,7 @@ import { i18n } from '@/i18n';
 import { mainRouter } from '@/router';
 import { unisonReload } from '@/scripts/unison-reload';
 import { disableContextmenu } from '@/scripts/touch';
+import { defaultStore } from '@/store';
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 
 const isNoMainColumn = (): boolean => !deckStore.state.columns.some(x => x.type === 'main');
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index ba14530662fb..e24d0fb0fc8d 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -4,7 +4,7 @@
 		<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
+	<MkTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
 </XColumn>
 </template>
 
@@ -12,7 +12,7 @@
 import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
 }>();
 
-let timeline = $ref<InstanceType<typeof XTimeline>>();
+const timeline = $ref<InstanceType<typeof MkTimeline>>();
 
 onMounted(() => {
 	if (props.column.antennaId == null) {
@@ -34,8 +34,9 @@ onMounted(() => {
 	}
 });
 
-async function setAntenna() {
+const setAntenna = async (): Promise<void> => {
 	const antennas = await os.api('antennas/list');
+
 	const { canceled, result: antenna } = await os.select({
 		title: i18n.ts.selectAntenna,
 		items: antennas.map(x => ({
@@ -44,10 +45,11 @@ async function setAntenna() {
 		default: props.column.antennaId,
 	});
 	if (canceled) return;
+
 	updateColumn(props.column.id, {
 		antennaId: antenna.id,
 	});
-}
+};
 
 const menu = [{
 	icon: 'ti ti-pencil',
@@ -55,16 +57,11 @@ const menu = [{
 	action: setAntenna,
 }];
 
-/*
-function focus() {
-	timeline.focus();
-}
+// const focus = (): void => {
+// 	timeline?.focus();
+// };
 
-defineExpose({
-	focus,
-});
-*/
+// defineExpose({
+// 	focus,
+// });
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index cdccb2637206..81c85b7ff799 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
@@ -33,18 +33,21 @@ const emit = defineEmits<{
 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
 }>();
 
-let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
+const timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
 let channel = $shallowRef<misskey.entities.Channel>();
 
-if (props.column.channelId == null) {
-	setChannel();
-}
+onMounted(() => {
+	if (props.column.channelId == null) {
+		setChannel();
+	}
+});
 
-async function setChannel() {
+const setChannel = async (): Promise<void> => {
 	const channels = await os.api('channels/followed', {
 		limit: 100,
 	});
-	const { canceled, result: channel } = await os.select({
+
+	const { canceled, result: _channel } = await os.select({
 		title: i18n.ts.selectChannel,
 		items: channels.map(x => ({
 			value: x, text: x.name,
@@ -52,13 +55,14 @@ async function setChannel() {
 		default: props.column.channelId,
 	});
 	if (canceled) return;
+
 	updateColumn(props.column.id, {
-		channelId: channel.id,
-		name: channel.name,
+		channelId: _channel.id,
+		name: _channel.name,
 	});
-}
+};
 
-async function post() {
+const post = async (): Promise<void> => {
 	if (!channel || channel.id !== props.column.channelId) {
 		channel = await os.api('channels/show', {
 			channelId: props.column.channelId,
@@ -68,7 +72,7 @@ async function post() {
 	os.post({
 		channel,
 	});
-}
+};
 
 const menu = [{
 	icon: 'ti ti-pencil',
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 965e20c9b1d9..a419b3bfec93 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -39,6 +39,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { disableContextmenu } from '@/scripts/touch';
 import { MenuItem } from '@/types/menu';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<{
 	isStacked: false,
 	naked: false,
 	indicated: false,
+	menu: () => [],
 });
 
 const emit = defineEmits<{
@@ -76,10 +78,10 @@ const active = $computed(() => props.column.active !== false);
 watch($$(active), v => emit('change-active-state', v));
 
 const keymap = $computed(() => ({
-	'shift+up': () => emit('parent-focus', 'up'),
-	'shift+down': () => emit('parent-focus', 'down'),
-	'shift+left': () => emit('parent-focus', 'left'),
-	'shift+right': () => emit('parent-focus', 'right'),
+	'shift+up': (): void => emit('parent-focus', 'up'),
+	'shift+down': (): void => emit('parent-focus', 'down'),
+	'shift+left': (): void => emit('parent-focus', 'left'),
+	'shift+right': (): void => emit('parent-focus', 'right'),
 }));
 
 onMounted(() => {
@@ -96,39 +98,39 @@ const reload = (): void => {
 	reloadCount++;
 };
 
-function onOtherDragStart() {
+const onOtherDragStart = (): void => {
 	dropready = true;
-}
+};
 
-function onOtherDragEnd() {
+const onOtherDragEnd = (): void => {
 	dropready = false;
-}
+};
 
-function toggleActive() {
+const toggleActive = (): void => {
 	if (!props.isStacked) return;
 	updateColumn(props.column.id, {
 		active: !props.column.active,
 	});
-}
+};
 
-function getMenu() {
-	let items = [{
+const getMenu = (): MenuItem[] => {
+	let items: MenuItem[] = [{
 		icon: 'ti ti-settings',
 		text: i18n.ts._deck.configureColumn,
-		action: async () => {
-			const { canceled, result } = await os.form(props.column.name, {
+		action: async (): Promise<void> => {
+			const { canceled, result } = await os.form(props.column.name ?? '', {
 				name: {
-					type: 'string',
+					type: 'string' as const,
 					label: i18n.ts.name,
 					default: props.column.name,
 				},
 				width: {
-					type: 'number',
+					type: 'number' as const,
 					label: i18n.ts.width,
 					default: props.column.width,
 				},
 				flexible: {
-					type: 'boolean',
+					type: 'boolean' as const,
 					label: i18n.ts.flexible,
 					default: props.column.flexible,
 				},
@@ -143,89 +145,92 @@ function getMenu() {
 		children: [{
 			icon: 'ti ti-arrow-left',
 			text: i18n.ts._deck.swapLeft,
-			action: () => {
+			action: (): void => {
 				swapLeftColumn(props.column.id);
 			},
 		}, {
 			icon: 'ti ti-arrow-right',
 			text: i18n.ts._deck.swapRight,
-			action: () => {
+			action: (): void => {
 				swapRightColumn(props.column.id);
 			},
 		}, props.isStacked ? {
 			icon: 'ti ti-arrow-up',
 			text: i18n.ts._deck.swapUp,
-			action: () => {
+			action: (): void => {
 				swapUpColumn(props.column.id);
 			},
 		} : undefined, props.isStacked ? {
 			icon: 'ti ti-arrow-down',
 			text: i18n.ts._deck.swapDown,
-			action: () => {
+			action: (): void => {
 				swapDownColumn(props.column.id);
 			},
 		} : undefined],
 	}, {
 		icon: 'ti ti-stack-2',
 		text: i18n.ts._deck.stackLeft,
-		action: () => {
+		action: (): void => {
 			stackLeftColumn(props.column.id);
 		},
 	}, props.isStacked ? {
 		icon: 'ti ti-window-maximize',
 		text: i18n.ts._deck.popRight,
-		action: () => {
+		action: (): void => {
 			popRightColumn(props.column.id);
 		},
 	} : undefined, null, {
 		icon: 'ti ti-trash',
 		text: i18n.ts.remove,
 		danger: true,
-		action: () => {
+		action: (): void => {
 			removeColumn(props.column.id);
 		},
 	}];
 
-	if (props.menu) {
-		items.unshift(null);
-		items = props.menu.concat(items);
-	}
+	items.unshift(null);
+	items = props.menu.concat(items);
 
 	return items;
-}
+};
 
-function showSettingsMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), ev.currentTarget ?? ev.target);
-}
+const showSettingsMenu = (ev: MouseEvent): void => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
+	os.popupMenu(getMenu(), el);
+};
 
-function onContextmenu(ev: MouseEvent) {
+const onContextmenu = (ev: MouseEvent): void => {
 	if (disableContextmenu) return;
 	os.contextMenu(getMenu(), ev);
-}
+};
 
-function goTop() {
-	body.scrollTo({
+const goTop = (): void => {
+	body?.scrollTo({
 		top: 0,
 		behavior: 'smooth',
 	});
-}
+};
+
+const onDragstart = (ev: DragEvent): void => {
+	if (!ev.dataTransfer) return;
 
-function onDragstart(ev) {
 	ev.dataTransfer.effectAllowed = 'move';
 	ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
 
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
 	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
-	window.setTimeout(() => {
+	window.setTimeout((): void => {
 		dragging = true;
 	}, 10);
-}
+};
 
-function onDragend(ev) {
+const onDragend = (_ev: DragEvent): void => {
 	dragging = false;
-}
+};
+
+const onDragover = (ev: DragEvent): void => {
+	if (!ev.dataTransfer) return;
 
-function onDragover(ev) {
 	// 自分自身がドラッグされている場合
 	if (dragging) {
 		// 自分自身にはドロップさせない
@@ -237,21 +242,23 @@ function onDragover(ev) {
 
 		if (isDeckColumn) draghover = true;
 	}
-}
+};
 
-function onDragleave() {
+const onDragleave = (): void => {
 	draghover = false;
-}
+};
+
+const onDrop = (ev: DragEvent): void => {
+	if (!ev.dataTransfer) return;
 
-function onDrop(ev) {
 	draghover = false;
 	os.deckGlobalEvents.emit('column.dragEnd');
 
 	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
-	if (id != null && id !== '') {
+	if (id) {
 		swapColumn(props.column.id, id);
 	}
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index e800f267e282..15b76c4d92bc 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -2,7 +2,7 @@
 <XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
-	<XNotes :pagination="pagination"/>
+	<MkNotes :pagination="pagination"/>
 </XColumn>
 </template>
 
@@ -10,7 +10,7 @@
 import { } from 'vue';
 import XColumn from './column.vue';
 import { Column } from './deck-store';
-import XNotes from '@/components/MkNotes.vue';
+import MkNotes from '@/components/MkNotes.vue';
 
 defineProps<{
 	column: Column;
@@ -25,7 +25,7 @@ const pagination = {
 	endpoint: 'notes/mentions' as const,
 	limit: 10,
 	params: {
-		visibility: 'specified'
+		visibility: 'specified',
 	},
 };
 </script>
diff --git a/packages/client/src/ui/deck/favorites-column.vue b/packages/client/src/ui/deck/favorites-column.vue
index 3d47e9fb181c..2907ef4f4a7f 100644
--- a/packages/client/src/ui/deck/favorites-column.vue
+++ b/packages/client/src/ui/deck/favorites-column.vue
@@ -13,7 +13,7 @@
 		<template #default="{ items }">
 			<div :class="$style.notes">
 				<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="true" :ad="false">
-					<XNote :key="item.id" :note="item.note"/>
+					<MkNote :key="item.id" :note="item.note"/>
 				</XList>
 			</div>
 		</template>
@@ -26,7 +26,7 @@ import { ref } from 'vue';
 import XColumn from './column.vue';
 import { Column } from './deck-store';
 import MkPagination from '@/components/MkPagination.vue';
-import XNote from '@/components/MkNote.vue';
+import MkNote from '@/components/MkNote.vue';
 import XList from '@/components/MkDateSeparatedList.vue';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index d9f3f7b4e7c0..4325b7ef6347 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -4,15 +4,15 @@
 		<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
+	<MkTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -26,14 +26,17 @@ const emit = defineEmits<{
 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
 }>();
 
-let timeline = $ref<InstanceType<typeof XTimeline>>();
+const timeline = $ref<InstanceType<typeof MkTimeline>>();
 
-if (props.column.listId == null) {
-	setList();
-}
+onMounted(() => {
+	if (props.column.listId == null) {
+		setList();
+	}
+});
 
-async function setList() {
+const setList = async (): Promise<void> => {
 	const lists = await os.api('users/lists/list');
+
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
 		items: lists.map(x => ({
@@ -42,10 +45,11 @@ async function setList() {
 		default: props.column.listId,
 	});
 	if (canceled) return;
+
 	updateColumn(props.column.id, {
 		listId: list.id,
 	});
-}
+};
 
 const menu = [{
 	icon: 'ti ti-pencil',
@@ -53,6 +57,3 @@ const menu = [{
 	action: setList,
 }];
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 765805469f99..6fa78d811c0f 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -2,7 +2,7 @@
 <XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
-	<XNotes :pagination="pagination" no-gap/>
+	<MkNotes :pagination="pagination" no-gap/>
 </XColumn>
 </template>
 
@@ -10,7 +10,7 @@
 import { } from 'vue';
 import XColumn from './column.vue';
 import { Column } from './deck-store';
-import XNotes from '@/components/MkNotes.vue';
+import MkNotes from '@/components/MkNotes.vue';
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index bceec14a0f07..ee2ea95e5f69 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -2,15 +2,16 @@
 <XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
-	<XNotifications :include-types="column.includingTypes"/>
+	<MkNotifications :include-types="column.includingTypes"/>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import { notificationTypes } from 'misskey-js';
 import XColumn from './column.vue';
 import { updateColumn , Column } from './deck-store';
-import XNotifications from '@/components/MkNotifications.vue';
+import MkNotifications from '@/components/MkNotifications.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -23,22 +24,24 @@ const emit = defineEmits<{
 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
 }>();
 
-function func() {
+const openNotificationSetting = (): void => {
 	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes: props.column.includingTypes,
 	}, {
-		done: async (res) => {
+		done: async (res: {
+			includingTypes: typeof notificationTypes[number][] | null;
+		}) => {
 			const { includingTypes } = res;
 			updateColumn(props.column.id, {
-				includingTypes: includingTypes,
+				includingTypes: includingTypes ?? [],
 			});
 		},
 	}, 'closed');
-}
+};
 
 const menu = [{
 	icon: 'ti ti-pencil',
 	text: i18n.ts.notificationSetting,
-	action: func,
+	action: openNotificationSetting,
 }];
 </script>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 182bee9346a7..bcb93c5b1499 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -11,11 +11,11 @@
 	<div v-if="disabled" class="iwaalbte">
 		<p>
 			<i class="ti ti-minus-circle"></i>
-			{{ $t('disabled-timeline.title') }}
+			{{ i18n.t('disabled-timeline.title') }}
 		</p>
-		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
+		<p class="desc">{{ i18n.t('disabled-timeline.description') }}</p>
 	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
+	<MkTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
 </XColumn>
 </template>
 
@@ -23,7 +23,7 @@
 import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import { removeColumn, updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { instance } from '@/instance';
@@ -53,17 +53,21 @@ onMounted(() => {
 	}
 });
 
-async function setType() {
+const setType = async (): Promise<void> => {
 	const { canceled, result: src } = await os.select({
 		title: i18n.ts.timeline,
 		items: [{
-			value: 'home' as const, text: i18n.ts._timelines.home,
+			value: 'home' as const,
+			text: i18n.ts._timelines.home,
 		}, {
-			value: 'local' as const, text: i18n.ts._timelines.local,
+			value: 'local' as const,
+			text: i18n.ts._timelines.local,
 		}, {
-			value: 'social' as const, text: i18n.ts._timelines.social,
+			value: 'social' as const,
+			text: i18n.ts._timelines.social,
 		}, {
-			value: 'global' as const, text: i18n.ts._timelines.global,
+			value: 'global' as const,
+			text: i18n.ts._timelines.global,
 		}],
 	});
 	if (canceled) {
@@ -75,27 +79,27 @@ async function setType() {
 	updateColumn(props.column.id, {
 		tl: src,
 	});
-}
+};
 
-function queueUpdated(q) {
+const queueUpdated = (q: number): void => {
 	if (columnActive) {
 		indicated = q !== 0;
 	}
-}
+};
 
-function onNote() {
+const onNote = (): void => {
 	if (!columnActive) {
 		indicated = true;
 	}
-}
+};
 
-function onChangeActiveState(state) {
+const onChangeActiveState = (state: boolean): void => {
 	columnActive = state;
 
 	if (columnActive) {
 		indicated = false;
 	}
-}
+};
 
 const menu = [{
 	icon: 'ti ti-pencil',
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index fc61d18ff6d0..9258090a38e8 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -4,7 +4,7 @@
 
 	<div class="wtdtxvec">
 		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
-		<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
+		<MkWidgets :edit="edit" :widgets="column.widgets ?? []" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
 	</div>
 </XColumn>
 </template>
@@ -13,7 +13,7 @@
 import { } from 'vue';
 import XColumn from './column.vue';
 import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
-import XWidgets from '@/components/MkWidgets.vue';
+import MkWidgets, { Widget, EditedWidget } from '@/components/MkWidgets.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
@@ -27,30 +27,30 @@ const emit = defineEmits<{
 
 let edit = $ref(false);
 
-function addWidget(widget) {
+const addWidget = (widget: Widget): void => {
 	addColumnWidget(props.column.id, widget);
-}
+};
 
-function removeWidget(widget) {
+const removeWidget = (widget: Widget): void => {
 	removeColumnWidget(props.column.id, widget);
-}
+};
 
-function updateWidget({ id, data }) {
+const updateWidget = ({ id, data }: EditedWidget): void => {
 	updateColumnWidget(props.column.id, id, data);
-}
+};
 
-function updateWidgets(widgets) {
+const updateWidgets = (widgets: Widget[]): void => {
 	setColumnWidgets(props.column.id, widgets);
-}
+};
 
-function func() {
+const toggleWidgetEdit = (): void => {
 	edit = !edit;
-}
+};
 
 const menu = [{
 	icon: 'ti ti-pencil',
 	text: i18n.ts.editWidgets,
-	action: func,
+	action: toggleWidgetEdit,
 }];
 </script>
 
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index bca8ca2dabe6..5696d0f1f1bb 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -28,19 +28,19 @@
 		<button class="button post _button" @click="os.post()"><i class="icon ti ti-pencil"></i></button>
 	</div>
 
-	<Transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+	<Transition :name="defaultStore.state.animation ? 'menuDrawer-back' : ''">
 		<div v-if="drawerMenuShowing" class="menuDrawer-back _modalBg" @click="closeDrawerMenu()" @touchstart.passive="closeDrawerMenu()"></div>
 	</transition>
 
-	<Transition :name="$store.state.animation ? 'menuDrawer' : ''">
+	<Transition :name="defaultStore.state.animation ? 'menuDrawer' : ''">
 		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
 	</transition>
 
-	<Transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+	<Transition :name="defaultStore.state.animation ? 'widgetsDrawer-back' : ''">
 		<div v-if="widgetsShowing" class="widgetsDrawer-back _modalBg" @click="closeWidgets()" @touchstart.passive="closeWidgets()"></div>
 	</transition>
 
-	<Transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+	<Transition :name="defaultStore.state.animation ? 'widgetsDrawer' : ''">
 		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
 	</transition>
 
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 33fb49283693..de9937867295 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="efzpzdvf">
-	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
 	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
@@ -9,42 +9,42 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
+import MkWidgets, { Widget, EditedWidget } from '@/components/MkWidgets.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 
 const emit = defineEmits<{
-	(ev: 'mounted', el: Element): void;
+	(ev: 'mounted', el: HTMLElement | null): void;
 }>();
 
 let editMode = $ref(false);
-let rootEl = $ref<HTMLDivElement>();
+const rootEl = $ref<HTMLDivElement>();
 
 onMounted(() => {
-	emit('mounted', rootEl);
+	emit('mounted', rootEl ?? null);
 });
 
-function addWidget(widget) {
+const addWidget = (widget: Widget): void => {
 	defaultStore.set('widgets', [{
 		...widget,
 		place: null,
 	}, ...defaultStore.state.widgets]);
-}
+};
 
-function removeWidget(widget) {
+const removeWidget = (widget: Widget): void => {
 	defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id));
-}
+};
 
-function updateWidget({ id, data }) {
+const updateWidget = ({ id, data }: EditedWidget): void => {
 	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
 		...w,
 		data,
 	} : w));
-}
+};
 
-function updateWidgets(widgets) {
+const updateWidgets = (widgets: Widget[]): void => {
 	defaultStore.set('widgets', widgets);
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 238fb96d024a..99144bc68580 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -1,19 +1,19 @@
 <template>
 <div class="mk-app">
-	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 		<div>
 			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 			<div v-if="meta" class="about">
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+				<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
 			</div>
 			<div class="action">
-				<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+				<button class="_button primary" @click="signup()">{{ i18n.ts.signup }}</button>
+				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
 	</div>
-	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 		<div>
 			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 		</div>
@@ -43,8 +43,10 @@ import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage } from '@/store';
+import { defaultStore, ColdDeviceStorage } from '@/store';
 import { mainRouter } from '@/router';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -68,6 +70,8 @@ export default defineComponent({
 			},
 			mainRouter,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			instance,
+			i18n,
 		};
 	},
 
@@ -76,7 +80,7 @@ export default defineComponent({
 			return {
 				'd': (): void => {
 					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-					this.$store.set('darkMode', !this.$store.state.darkMode);
+					defaultStore.set('darkMode', !defaultStore.state.darkMode);
 				},
 				's': (): void => {
 					mainRouter.push('/search');
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 21b1f8a02153..d118149374e2 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -21,7 +21,7 @@
 		</div>
 	</div>
 
-	<Transition :name="$store.state.animation ? 'tray-back' : ''">
+	<Transition :name="defaultStore.state.animation ? 'tray-back' : ''">
 		<div
 			v-if="showMenu"
 			class="menu-back _modalBg"
@@ -30,15 +30,15 @@
 		></div>
 	</transition>
 
-	<Transition :name="$store.state.animation ? 'tray' : ''">
+	<Transition :name="defaultStore.state.animation ? 'tray' : ''">
 		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><i class="ti ti-flare icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="ti ti-flare icon"></i>{{ i18n.ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
 			<div class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
+				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
 	</transition>
@@ -51,11 +51,12 @@ import XHeader from './header.vue';
 import XKanban from './kanban.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkSigninDialog from '@/components/MkSigninDialog.vue';
+import MkSignupDialog from '@/components/MkSignupDialog.vue';
 import { ColdDeviceStorage, defaultStore } from '@/store';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -96,17 +97,17 @@ os.api('meta', { detail: true }).then(res => {
 	meta = res;
 });
 
-function signin() {
-	os.popup(XSigninDialog, {
+const signin = (): void => {
+	os.popup(MkSigninDialog, {
 		autoSet: true,
 	}, {}, 'closed');
-}
+};
 
-function signup() {
-	os.popup(XSignupDialog, {
+const signup = (): void => {
+	os.popup(MkSignupDialog, {
 		autoSet: true,
 	}, {}, 'closed');
-}
+};
 
 onMounted(() => {
 	if (!isDesktop) {
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index ed7f1ef05b38..bb6c6b13396d 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,10 +2,10 @@
 <div class="sqxihjet">
 	<div v-if="narrow === false" class="wide">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><i class="ti ti-flare icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="ti ti-flare icon"></i>{{ i18n.ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
 			<div v-if="info" class="page active link">
 				<div class="title">
 					<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -16,9 +16,9 @@
 				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
-				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
+				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ i18n.ts.search }}</span></button>
+				<button class="_buttonPrimary signup" @click="signup()">{{ i18n.ts.signup }}</button>
+				<button class="_button login" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
 	</div>
@@ -41,10 +41,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkSigninDialog from '@/components/MkSigninDialog.vue';
+import MkSignupDialog from '@/components/MkSignupDialog.vue';
 import * as os from '@/os';
 import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
@@ -57,6 +58,7 @@ export default defineComponent({
 		return {
 			narrow: null,
 			showMenu: false,
+			i18n,
 		};
 	},
 
@@ -66,13 +68,13 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
+			os.popup(MkSigninDialog, {
 				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
+			os.popup(MkSignupDialog, {
 				autoSet: true,
 			}, {}, 'closed');
 		},
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 70d930558e3a..0a303519fc80 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
+<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ instance.backgroundImageUrl })` }">
 	<div class="back" :class="{ transparent }"></div>
 	<div class="contents">
 		<div class="wrapper">
@@ -9,14 +9,14 @@
 			</h1>
 			<template v-if="full">
 				<div v-if="meta" class="about">
-					<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+					<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
 				</div>
 				<div class="action">
-					<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
-					<button class="_button" @click="signin()">{{ $ts.login }}</button>
+					<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
+					<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
 				</div>
 				<div class="announcements panel">
-					<header>{{ $ts.announcements }}</header>
+					<header>{{ i18n.ts.announcements }}</header>
 					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
 						<section v-for="announcement in items" :key="announcement.id" class="item">
 							<div class="title">{{ announcement.title }}</div>
@@ -42,9 +42,11 @@ import { defineComponent } from 'vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkSigninDialog from '@/components/MkSigninDialog.vue';
+import MkSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -81,6 +83,8 @@ export default defineComponent({
 				endpoint: 'announcements',
 				limit: 10,
 			},
+			instance,
+			i18n,
 		};
 	},
 
@@ -92,13 +96,13 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
+			os.popup(MkSigninDialog, {
 				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
+			os.popup(MkSignupDialog, {
 				autoSet: true,
 			}, {}, 'closed');
 		},
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index ec1cecc82901..cb6eda613ca0 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -2,11 +2,11 @@
 <div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
 	<div class="calendar" :class="{ isHoliday }">
 		<p class="month-and-year">
-			<span class="year">{{ $t('yearX', { year }) }}</span>
-			<span class="month">{{ $t('monthX', { month }) }}</span>
+			<span class="year">{{ i18n.t('yearX', { year }) }}</span>
+			<span class="month">{{ i18n.t('monthX', { month }) }}</span>
 		</p>
-		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
-		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
+		<p v-if="month === 1 && day === 1" class="day">🎉{{ i18n.t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
+		<p v-else class="day">{{ i18n.t('dayX', { day }) }}</p>
 		<p class="week-day">{{ weekDay }}</p>
 	</div>
 	<div class="info">
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 8e431b5be7e6..291954c4dc55 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -4,7 +4,7 @@
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
-		<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
+		<TransitionGroup v-else tag="div" :name="defaultStore.state.animation ? 'chart' : ''" class="instances">
 			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
 				<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
 				<div class="body">
@@ -27,6 +27,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const name = 'federation';
 
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 03febe00a474..5012a7384ddc 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -4,17 +4,18 @@
 	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
 
 	<div>
-		<XNotifications :include-types="widgetProps.includingTypes"/>
+		<MkNotifications :include-types="widgetProps.includingTypes"/>
 	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import { notificationTypes } from 'misskey-js';
 import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/MkContainer.vue';
-import XNotifications from '@/components/MkNotifications.vue';
+import MkNotifications from '@/components/MkNotifications.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -31,7 +32,7 @@ const widgetPropsDef = {
 	},
 	includingTypes: {
 		type: 'array' as const,
-		hidden: true,
+		hidden: true as const,
 		default: null,
 	},
 };
@@ -41,8 +42,13 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{
+	widget?: Widget<WidgetProps>;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'updateProps', props_: WidgetProps);
+}>();
 
 const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	widgetPropsDef,
@@ -50,13 +56,15 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const configureNotification = () => {
+const configureNotification = (): void => {
 	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes: widgetProps.includingTypes,
 	}, {
-		done: async (res) => {
+		done: async (res: {
+			includingTypes: typeof notificationTypes[number][] | null;
+		}) => {
 			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes;
+			widgetProps.includingTypes = includingTypes ?? [];
 			save();
 		},
 	}, 'closed');
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index 01f410c4fcc4..162257abcdc2 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -4,7 +4,7 @@
 		<p v-if="widgetProps.folderId == null">
 			{{ i18n.ts.folder }}
 		</p>
-		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
+		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ i18n.t('no-image') }}</p>
 		<div ref="slideA" class="slide a"></div>
 		<div ref="slideB" class="slide b"></div>
 	</div>
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 0e0693665f2d..122058dd51a6 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -8,13 +8,13 @@
 			<i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
 			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
 			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
-			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
+			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : i18n.t('_timelines.' + widgetProps.src) }}</span>
 			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
 		</button>
 	</template>
 
 	<div>
-		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
+		<MkTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
 	</div>
 </MkContainer>
 </template>
@@ -25,8 +25,9 @@ import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget';
 import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
-import XTimeline from '@/components/MkTimeline.vue';
+import MkTimeline from '@/components/MkTimeline.vue';
 import { i18n } from '@/i18n';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 
 const name = 'timeline';
 
@@ -47,12 +48,12 @@ const widgetPropsDef = {
 	antenna: {
 		type: 'object' as const,
 		default: null,
-		hidden: true,
+		hidden: true as const,
 	},
 	list: {
 		type: 'object' as const,
 		default: null,
-		hidden: true,
+		hidden: true as const,
 	},
 };
 
@@ -61,8 +62,13 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{
+	widget?: Widget<WidgetProps>;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'updateProps', props_: WidgetProps): void;
+}>();
 
 const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	widgetPropsDef,
@@ -72,12 +78,13 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 
 const menuOpened = ref(false);
 
-const setSrc = (src) => {
+const setSrc = (src: string): void => {
 	widgetProps.src = src;
 	save();
 };
 
-const choose = async (ev) => {
+const choose = async (ev: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
 	menuOpened.value = true;
 	const [antennas, lists] = await Promise.all([
 		os.api('antennas/list'),
@@ -86,36 +93,36 @@ const choose = async (ev) => {
 	const antennaItems = antennas.map(antenna => ({
 		text: antenna.name,
 		icon: 'ti ti-antenna',
-		action: () => {
+		action: (): void => {
 			widgetProps.antenna = antenna;
 			setSrc('antenna');
-		}
+		},
 	}));
 	const listItems = lists.map(list => ({
 		text: list.name,
 		icon: 'ti ti-list',
-		action: () => {
+		action: (): void => {
 			widgetProps.list = list;
 			setSrc('list');
-		}
+		},
 	}));
 	os.popupMenu([{
 		text: i18n.ts._timelines.home,
 		icon: 'ti ti-home',
-		action: () => { setSrc('home'); }
+		action: (): void => { setSrc('home'); }
 	}, {
 		text: i18n.ts._timelines.local,
 		icon: 'ti ti-planet',
-		action: () => { setSrc('local'); },
+		action: (): void => { setSrc('local'); },
 	}, {
 		text: i18n.ts._timelines.social,
 		icon: 'ti ti-rocket',
-		action: () => { setSrc('social'); },
+		action: (): void => { setSrc('social'); },
 	}, {
 		text: i18n.ts._timelines.global,
 		icon: 'ti ti-whirl',
-		action: () => { setSrc('global'); },
-	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
+		action: (): void => { setSrc('global'); },
+	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], el).then(() => {
 		menuOpened.value = false;
 	});
 };
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index e0f92b222bd7..8d0efd935b88 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -4,11 +4,11 @@
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
-		<TransitionGroup v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
+		<TransitionGroup v-else tag="div" :name="defaultStore.state.animation ? 'chart' : ''" class="tags">
 			<div v-for="stat in stats" :key="stat.tag">
 				<div class="tag">
 					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
-					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
+					<p>{{ i18n.t('nUsersMentioned', { n: stat.usersCount }) }}</p>
 				</div>
 				<MkMiniChart class="chart" :src="stat.chart"/>
 			</div>
@@ -26,6 +26,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const name = 'hashtags';
 
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 5800cf5021d6..bd049d2f7b71 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -58,6 +58,7 @@ export default defineConfig(({ command, mode }) => {
 				output: {
 					manualChunks: {
 						vue: ['vue'],
+						photoswipe: ['photoswipe', 'photoswipe/lightbox', 'photoswipe/style.css'],
 					},
 				},
 			},

From b7c41396684a884b8169dfb3b11026f1e2e47c83 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 11:50:58 +0900
Subject: [PATCH 085/147] tweak draftslist

---
 .../src/components/TmsDraftsList.draft.vue    | 88 +++++++++----------
 1 file changed, 42 insertions(+), 46 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index 928e5d8549b8..c0c5d6d2e291 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -1,19 +1,23 @@
 <template>
 <div :class="[$style.root, { [$style.active]: props.active }]" @click="draftMenu">
-	<div :class="[$style.text, { [$style.textEmpty]: !text }]">{{ text || 'Empty' }}</div>
-	<div v-if="files.length !== 0" :class="$style.files">
-		<ImgWithBlurhash
-			v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in files"
-			:key="fileId"
-			:src="src"
-			:hash="hash"
-			:alt="comment || name"
-			:title="comment || name"
-			:class="$style.file"
-		/>
-	</div>
-	<div v-if="labels.length !== 0" :class="$style.labels">
-		<span v-for="label in labels" :key="label" :class="$style.label">{{ label }}</span>
+	<div :class="$style.inner">
+		<div :class="$style.text">
+			<span v-if="hasReply" :class="$style.replyMark"><i class="ti ti-arrow-back-up"></i></span>
+			<span v-if="text">{{ text }}</span>
+			<span v-else :class="$style.textEmpty">Empty</span>
+			<span v-if="hasRenote" :class="$style.quoteMark">RN:</span>
+		</div>
+		<div v-if="files.length !== 0" :class="$style.files">
+			<ImgWithBlurhash
+				v-for="{ id: fileId, url: src, blurhash: hash, comment, name } in files"
+				:key="fileId"
+				:src="src"
+				:hash="hash"
+				:alt="comment || name"
+				:title="comment || name"
+				:class="$style.file"
+			/>
+		</div>
 	</div>
 </div>
 </template>
@@ -38,12 +42,11 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const text = $ref(`${props.draft.data.cw || ''}\n${props.draft.data.text || ''}`.trim());
+const text = $ref(`${props.draft.data.cw || ''}\n${props.draft.data.text || ''}${props.draft.data.poll ? ` (${i18n.ts.poll})` : ''}`.trim());
 const files = $ref<Misskey.entities.DriveFile[]>(props.draft.data.files);
 
-const labels = $ref<string[]>([]);
-if (props.draft.data.renoteId || props.draft.data.quoteId) labels.push(i18n.ts.quote);
-if (props.draft.data.poll) labels.push(i18n.ts.poll);
+const hasReply = $ref(!!props.draft.data.replyId);
+const hasRenote = $ref(!!props.draft.data.renoteId || !!props.draft.data.quoteId);
 
 const draftMenu = (ev: MouseEvent): void => {
 	if (props.active) return;
@@ -71,9 +74,6 @@ const draftMenu = (ev: MouseEvent): void => {
 
 <style lang="scss" module>
 .root {
-	display: grid;
-	grid-auto-flow: row;
-	gap: 6px;
 	padding: 16px;
 	background: var(--panel);
 	color: var(--fg);
@@ -81,20 +81,18 @@ const draftMenu = (ev: MouseEvent): void => {
 	border-radius: 8px;
 	user-select: none;
 
+	.inner {
+		display: grid;
+		grid-auto-flow: row;
+		gap: 6px;
+	}
+
 	&.active {
 		border-style: dashed;
 
-		> .text {
+		> .inner {
 			opacity: 0.5;
 		}
-
-		> .files {
-			display: none;
-		}
-
-		> .labels {
-			display: none;
-		}
 	}
 }
 
@@ -102,15 +100,26 @@ const draftMenu = (ev: MouseEvent): void => {
 	overflow: hidden;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 3;
+	// display: -webkit-box;
+	// -webkit-box-orient: vertical;
+	// -webkit-line-clamp: 3;
 }
 
 .textEmpty {
 	opacity: 0.5;
 }
 
+.replyMark {
+	margin-right: 0.5em;
+	color: var(--accent);
+}
+
+.quoteMark {
+	margin-left: 0.5em;
+	font-style: oblique;
+	color: var(--accent);
+}
+
 .files {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
@@ -120,17 +129,4 @@ const draftMenu = (ev: MouseEvent): void => {
 .file {
 	aspect-ratio: 1 / 1;
 }
-
-.labels {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px;
-	font-size: 0.9em;
-}
-
-.label {
-	border: solid 1px var(--divider);
-	border-radius: 999px;
-	padding: 3px 8px;
-}
 </style>

From e80d49f55dbbe300942754def07006ebd310b0e6 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 12:45:31 +0900
Subject: [PATCH 086/147] fix

---
 packages/client/src/os.ts                  | 13 +++++--
 packages/client/src/scripts/select-file.ts | 40 ++++++++++++++--------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 0eaf54c2bc95..84f944dc038c 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -424,11 +424,14 @@ export const form = <C extends Record<string, any>>(title: string, form_: C): Pr
 };
 
 export const selectUser = async (): Promise<Misskey.entities.UserDetailed> => {
-	return new Promise((resolve, _reject) => {
+	return new Promise((resolve, reject) => {
 		popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {}, {
 			ok: user => {
 				resolve(user);
 			},
+			cancel: () => {
+				reject();
+			},
 		}, 'closed');
 	});
 };
@@ -436,7 +439,7 @@ export const selectUser = async (): Promise<Misskey.entities.UserDetailed> => {
 export const selectDriveFile = async <T extends boolean>(multiple: T): Promise<
 	T extends true ? Misskey.entities.DriveFile[] : Misskey.entities.DriveFile
 > => {
-	return new Promise((resolve, _reject) => {
+	return new Promise((resolve, reject) => {
 		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'file',
 			multiple,
@@ -444,6 +447,8 @@ export const selectDriveFile = async <T extends boolean>(multiple: T): Promise<
 			done: files => {
 				if (files) {
 					resolve(multiple ? files : files[0]);
+				} else {
+					reject();
 				}
 			},
 		}, 'closed');
@@ -453,7 +458,7 @@ export const selectDriveFile = async <T extends boolean>(multiple: T): Promise<
 export const selectDriveFolder = async <T extends boolean>(multiple: T): Promise<
 	T extends true ? Misskey.entities.DriveFolder[] : Misskey.entities.DriveFolder
 > => {
-	return new Promise((resolve, _reject) => {
+	return new Promise((resolve, reject) => {
 		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
 			type: 'folder',
 			multiple,
@@ -461,6 +466,8 @@ export const selectDriveFolder = async <T extends boolean>(multiple: T): Promise
 			done: folders => {
 				if (folders) {
 					resolve(multiple ? folders : folders[0]);
+				} else {
+					reject();
 				}
 			},
 		}, 'closed');
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index f47553101c22..9974f223e44b 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -7,41 +7,50 @@ import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { uploadFile } from '@/scripts/upload';
 
-function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
+declare global {
+	interface Window {
+		__misskey_input_ref__: HTMLInputElement | null;
+	}
+}
+
+const select = (src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> => {
 	return new Promise(async (res, rej) => {
 		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
 
-		const chooseFileFromPc = () => {
+		const chooseFileFromPc = (): void => {
 			const input = document.createElement('input');
 			input.type = 'file';
 			input.multiple = multiple;
-			input.onchange = () => {
-				const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
+			input.onchange = (): void => {
+				const promises = Array.from(input.files ?? []).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
 
 				Promise.all(promises).then(driveFiles => {
 					res(multiple ? driveFiles : driveFiles[0]);
-				}).catch(err => {
+				}).catch((): void => {
 					// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
+					rej();
 				});
 
 				// 一応廃棄
-				(window as any).__misskey_input_ref__ = null;
+				window.__misskey_input_ref__ = null;
 			};
 
 			// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
 			// iOS Safari で正常に動かす為のおまじない
-			(window as any).__misskey_input_ref__ = input;
+			window.__misskey_input_ref__ = input;
 
 			input.click();
 		};
 
-		const chooseFileFromDrive = () => {
+		const chooseFileFromDrive = (): void => {
 			os.selectDriveFile(multiple).then(files => {
 				res(files);
+			}).catch((): void => {
+				rej();
 			});
 		};
 
-		const chooseFileFromUrl = () => {
+		const chooseFileFromUrl = (): void => {
 			os.inputText({
 				title: i18n.ts.uploadFromUrl,
 				type: 'url',
@@ -63,6 +72,9 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 					url: url,
 					folderId: defaultStore.state.uploadFolder,
 					marker,
+				}).catch((): void => {
+					rej();
+					connection.dispose();
 				});
 
 				os.alert({
@@ -95,12 +107,12 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 
 		if (canceled) rej();
 	});
-}
+};
 
-export function selectFile(src: any, label: string | null = null): Promise<DriveFile> {
+export const selectFile = (src: any, label: string | null = null): Promise<DriveFile> => {
 	return select(src, label, false) as Promise<DriveFile>;
-}
+};
 
-export function selectFiles(src: any, label: string | null = null): Promise<DriveFile[]> {
+export const selectFiles = (src: any, label: string | null = null): Promise<DriveFile[]> => {
 	return select(src, label, true) as Promise<DriveFile[]>;
-}
+};

From ae72cf1eeeb059002e918a7b6c1d5738ab34b38c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 13:51:36 +0900
Subject: [PATCH 087/147] fix

---
 .../src/components/TmsPostForm.core.vue       | 14 ++---
 packages/client/src/scripts/select-file.ts    | 58 +++++++++++++------
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 4304ffbe3602..2f058c7c1837 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -918,14 +918,12 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 const chooseFileFrom = (ev: MouseEvent): void => {
 	const el = getHtmlElementFromEvent(ev);
 
-	fetchingWrapper(
-		selectFiles(el, i18n.ts.attachFile)
-			.then(_files => {
-				for (const file of _files) {
-					files.push(file);
-				}
-			}),
-	);
+	selectFiles(el, i18n.ts.attachFile, fetchingWrapper)
+		.then(_files => {
+			for (const file of _files) {
+				files.push(file);
+			}
+		});
 };
 
 const togglePoll = (): void => {
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 9974f223e44b..0638441e6749 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -13,7 +13,11 @@ declare global {
 	}
 }
 
-const select = (src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> => {
+type FetchingWrapper = {
+	<T>(prom: Promise<T>): Promise<T>;
+};
+
+const select = (src: any, label: string | null, multiple: boolean, fetchingWrapper?: FetchingWrapper): Promise<DriveFile | DriveFile[]> => {
 	return new Promise(async (res, rej) => {
 		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
 
@@ -31,6 +35,10 @@ const select = (src: any, label: string | null, multiple: boolean): Promise<Driv
 					rej();
 				});
 
+				if (fetchingWrapper) {
+					fetchingWrapper(Promise.all(promises));
+				}
+
 				// 一応廃棄
 				window.__misskey_input_ref__ = null;
 			};
@@ -43,11 +51,15 @@ const select = (src: any, label: string | null, multiple: boolean): Promise<Driv
 		};
 
 		const chooseFileFromDrive = (): void => {
-			os.selectDriveFile(multiple).then(files => {
+			const promise = os.selectDriveFile(multiple).then(files => {
 				res(files);
 			}).catch((): void => {
 				rej();
 			});
+
+			if (fetchingWrapper) {
+				fetchingWrapper(promise);
+			}
 		};
 
 		const chooseFileFromUrl = (): void => {
@@ -60,22 +72,30 @@ const select = (src: any, label: string | null, multiple: boolean): Promise<Driv
 
 				const marker = uuid();
 
-				const connection = stream.useChannel('main');
-				connection.on('urlUploadFinished', urlResponse => {
-					if (urlResponse.marker === marker) {
-						res(multiple ? [urlResponse.file] : urlResponse.file);
+				const promise = new Promise<void>(r => {
+					const connection = stream.useChannel('main');
+					connection.on('urlUploadFinished', urlResponse => {
+						if (urlResponse.marker === marker) {
+							r();
+							res(multiple ? [urlResponse.file] : urlResponse.file);
+							connection.dispose();
+						}
+					});
+
+					os.api('drive/files/upload-from-url', {
+						url: url,
+						folderId: defaultStore.state.uploadFolder,
+						marker,
+					}).catch(() => {
+						r();
+						rej();
 						connection.dispose();
-					}
+					});
 				});
 
-				os.api('drive/files/upload-from-url', {
-					url: url,
-					folderId: defaultStore.state.uploadFolder,
-					marker,
-				}).catch((): void => {
-					rej();
-					connection.dispose();
-				});
+				if (fetchingWrapper) {
+					fetchingWrapper(promise);
+				}
 
 				os.alert({
 					title: i18n.ts.uploadFromUrlRequested,
@@ -109,10 +129,10 @@ const select = (src: any, label: string | null, multiple: boolean): Promise<Driv
 	});
 };
 
-export const selectFile = (src: any, label: string | null = null): Promise<DriveFile> => {
-	return select(src, label, false) as Promise<DriveFile>;
+export const selectFile = (src: any, label: string | null = null, fetchingWrapper?: FetchingWrapper): Promise<DriveFile> => {
+	return select(src, label, false, fetchingWrapper) as Promise<DriveFile>;
 };
 
-export const selectFiles = (src: any, label: string | null = null): Promise<DriveFile[]> => {
-	return select(src, label, true) as Promise<DriveFile[]>;
+export const selectFiles = (src: any, label: string | null = null, fetchingWrapper?: FetchingWrapper): Promise<DriveFile[]> => {
+	return select(src, label, true, fetchingWrapper) as Promise<DriveFile[]>;
 };

From 21339c29282710ebec0ebf663f16eadd63f04379 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 14:07:50 +0900
Subject: [PATCH 088/147] fix

---
 .../client/src/components/global/MkMisskeyFlavoredMarkdown.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index e38f097ceaad..9be774ea5f49 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -18,7 +18,7 @@ withDefaults(defineProps<{
 	plain: false,
 	nowrap: false,
 	author: null,
-	customEmojis: () => [],
+	customEmojis: undefined,
 	isNote: true,
 });
 </script>

From 3bb033e3ef66812f889f1e43201169076aacea0b Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 14:42:12 +0900
Subject: [PATCH 089/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 2f058c7c1837..1ebbd5b2e4a6 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -292,8 +292,9 @@ const checkMissingMention = (): void => {
 				return;
 			}
 		}
-		hasNotSpecifiedMentions = false;
 	}
+
+	hasNotSpecifiedMentions = false;
 };
 
 const addMissingMention = (): void => {
@@ -326,9 +327,10 @@ const checkAnnoyingText = (): void => {
 			text.includes('$[scale') ||
 			text.includes('$[position')
 		);
-	} else {
-		hasAnnoyingText = false;
+		return;
 	}
+
+	hasAnnoyingText = false;
 };
 
 watch($$(text), checkAnnoyingText, { immediate: true });

From 269d564ae8bdba43635a8bb46914185ab1ebe7f2 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 15:49:21 +0900
Subject: [PATCH 090/147] tweak

---
 .../client/src/components/TmsDraftsList.vue   | 15 ++--
 .../src/components/TmsPostForm.core.vue       | 16 ++--
 .../client/src/components/TmsPostForm.vue     |  6 +-
 packages/client/src/scripts/tms/drafts.ts     | 88 ++++++++++++-------
 packages/client/src/ui/deck/column.vue        |  5 +-
 5 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index b8945c9a21ef..7369a467ef1d 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -11,11 +11,10 @@
 
 	<MkSpacer :margin-min="20" :margin-max="28">
 		<div class="tms-drafts-list _gaps">
-			<div v-if="draftsList.length === 0" class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ i18n.ts.nothing }}</div>
+			<div style="padding: 8px; text-align: center;">
+				<MkButton primary gradate rounded inline @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createNew }}</MkButton>
 			</div>
-			<div v-else :class="$style.draftsList">
+			<div v-if="draftsList.length !== 0" :class="$style.draftsList">
 				<TmsDraft
 					v-for="draftItem in draftsList"
 					:key="draftItem.id"
@@ -33,8 +32,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import { i18n } from '@/i18n';
-import { Draft, getAllDraft, deleteDraft } from '@/scripts/tms/drafts';
+import { Draft, getAllDraft, deleteDraft, createDraft } from '@/scripts/tms/drafts';
 import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
 import TmsDraft from '@/components/TmsDraftsList.draft.vue';
 
 const props = withDefaults(defineProps<{
@@ -56,6 +56,11 @@ const draftsList = $ref<Draft[]>(
 		.sort(({ id }) => id === props.active ? -1 : 1),
 );
 
+const create = (): void => {
+	const draft = createDraft();
+	emit('chosen', draft);
+};
+
 const chosen = (draftId: Draft['id']): void => {
 	const draft = draftsList.find(d => d.id === draftId);
 	if (draft) emit('chosen', draft);
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 1ebbd5b2e4a6..f5c4710db3c6 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -340,7 +340,7 @@ watch($$(visibility), checkAnnoyingText);
 
 //#region draft
 const draft = $ref<Draft.Draft | null>(props.draft);
-const draftKey = $computed<string | null>(() => {
+const draftId = $computed<string | null>(() => {
 	if (draft) return draft.id;
 	return Draft.genDraftId({
 		user: $i,
@@ -350,8 +350,12 @@ const draftKey = $computed<string | null>(() => {
 	});
 });
 
+const isEdit = $computed<boolean>(() => {
+	return Draft.parseDraftId(draftId).isEdit;
+});
+
 const saveDraft = (): void => {
-	Draft.setDraft(draftKey, {
+	Draft.setDraft(draftId, {
 		text,
 		useCw,
 		cw,
@@ -363,11 +367,11 @@ const saveDraft = (): void => {
 		renoteId: renote?.id ?? null,
 		channelId: channel?.id ?? null,
 		quoteId: quote?.id ?? null,
-	});
+	}, isEdit);
 };
 
 const deleteDraft = (): void => {
-	Draft.deleteDraft(draftKey);
+	Draft.deleteDraft(draftId);
 };
 
 const watchForDraft = (): void => {
@@ -464,7 +468,7 @@ onMounted(() => {
 
 	nextTick(() => {
 		if (!props.instant && !props.fixed) {
-			const _draft = draft ?? Draft.getDraft(draftKey);
+			const _draft = draft ?? Draft.getDraft(draftId);
 			if (_draft) {
 				text = _draft.data.text;
 				useCw = _draft.data.useCw;
@@ -794,7 +798,7 @@ const openAccountMenu = (ev: MouseEvent): void => {
 
 const chooseDraft = (): void => {
 	os.popup(defineAsyncComponent(() => import('@/components/TmsDraftsList.vue')), {
-		active: draftKey,
+		active: draftId,
 	}, {
 		chosen: (draft_: Draft.Draft) => {
 			emit('reopen', draft_);
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 51430de84141..56541ce88a53 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -139,7 +139,7 @@ onMounted(() => {
 			renoteId: init.renote?.id ?? null,
 			channelId: init.channel?.id ?? null,
 			quoteId: null,
-		});
+		}, true);
 	}
 
 	nextTick(shown);
@@ -171,7 +171,7 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 		return;
 	}
 
-	const { replyId, renoteId, channelId } = Draft.parseDraftId(draft.id);
+	const { replyId, renoteId, channelId, isEdit } = Draft.parseDraftId(draft.id);
 
 	const reply = replyId ? os.api('notes/show', { noteId: replyId }).catch(() => null) : null;
 	const renote = renoteId ? os.api('notes/show', { noteId: renoteId }).catch(() => null) : null;
@@ -197,7 +197,7 @@ const reopen = async (draft?: Draft.Draft | null): Promise<void> => {
 		replyId: bindProps.reply?.id ?? null,
 		renoteId: bindProps.renote?.id ?? null,
 		channelId: bindProps.channel?.id ?? null,
-	});
+	}, isEdit);
 
 	nextTick(shown);
 };
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index 3cf0b6b198a4..dd6e9987e8e3 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -1,4 +1,5 @@
 import * as Misskey from 'misskey-js';
+import { $i } from '@/account';
 import { defaultStore } from '@/store';
 import { parseObject } from '@/scripts/tms/parse';
 import { EditedPoll } from '@/components/MkPollEditor.vue';
@@ -152,6 +153,33 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 	return draftData;
 };
 
+export const createDraft = (): Draft => {
+	const draftId = genDraftId({
+		user: $i,
+		isEdit: true,
+	});
+
+	if (!draftId) throw new Error();
+
+	const draftData: LsDraft['data'] = {};
+
+	const updatedAt = new Date().toJSON();
+
+	saveLsDrafts({
+		...loadLsDrafts(),
+		[draftId]: {
+			updatedAt,
+			data: draftData,
+		},
+	});
+
+	return {
+		id: draftId,
+		updatedAt,
+		data: restoreDraftData(draftData),
+	};
+};
+
 export const getAllDraft = (): Draft[] => {
 	const drafts = loadLsDrafts();
 
@@ -166,25 +194,23 @@ export const getAllDraft = (): Draft[] => {
 	});
 };
 
-export const getDraft = (draftKey: string | null): Draft | null => {
-	if (!draftKey) return null;
+export const getDraft = (draftId: string | null): Draft | null => {
+	if (!draftId) return null;
 
-	const draft = loadLsDrafts()[draftKey];
+	const draft = loadLsDrafts()[draftId];
 	if (!draft) return null;
 
 	const { updatedAt, data } = draft;
 
 	return {
-		id: draftKey,
+		id: draftId,
 		updatedAt,
 		data: restoreDraftData(data),
 	};
 };
 
-export const setDraft = (draftKey: string | null, data: DraftData): Draft | null => {
-	if (!draftKey) return null;
-
-	const drafts = loadLsDrafts();
+export const setDraft = (draftId: string | null, data: DraftData, force = false): Draft | null => {
+	if (!draftId) return null;
 
 	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId } = data;
 
@@ -206,34 +232,34 @@ export const setDraft = (draftKey: string | null, data: DraftData): Draft | null
 		draftData.localOnly = undefined;
 	}
 
-	if (isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId', 'visibility', 'localOnly'])) {
-		deleteDraft(draftKey);
+	if (!force && isEmptyObject(draftData, ['replyId', 'renoteId', 'channelId', 'visibility', 'localOnly'])) {
+		deleteDraft(draftId);
 		return null;
 	}
 
 	const updatedAt = new Date().toJSON();
 
 	saveLsDrafts({
-		...drafts,
-		[draftKey]: {
+		...loadLsDrafts(),
+		[draftId]: {
 			updatedAt,
 			data: draftData,
 		},
 	});
 
 	return {
-		id: draftKey,
+		id: draftId,
 		updatedAt,
 		data: restoreDraftData(draftData),
 	};
 };
 
-export const deleteDraft = (draftKey: string | null): void => {
-	if (!draftKey) return;
+export const deleteDraft = (draftId: string | null): void => {
+	if (!draftId) return;
 
 	const drafts = loadLsDrafts();
 
-	delete drafts[draftKey];
+	delete drafts[draftId];
 
 	saveLsDrafts(drafts);
 };
@@ -266,25 +292,23 @@ export const getAllMessageDraft = (): MessageDraft[] => {
 	});
 };
 
-export const getMessageDraft = (draftKey: string | null): MessageDraft | null => {
-	if (!draftKey) return null;
+export const getMessageDraft = (draftId: string | null): MessageDraft | null => {
+	if (!draftId) return null;
 
-	const draft = loadLsMessageDrafts()[draftKey];
+	const draft = loadLsMessageDrafts()[draftId];
 	if (!draft) return null;
 
 	const { updatedAt, data } = draft;
 
 	return {
-		id: draftKey,
+		id: draftId,
 		updatedAt,
 		data: restoreMessageDraftData(data),
 	};
 };
 
-export const setMessageDraft = (draftKey: string | null, data: MessageDraftData): MessageDraft | null => {
-	if (!draftKey) return null;
-
-	const drafts = loadLsMessageDrafts();
+export const setMessageDraft = (draftId: string | null, data: MessageDraftData, force = false): MessageDraft | null => {
+	if (!draftId) return null;
 
 	const { text, file } = data;
 
@@ -293,34 +317,34 @@ export const setMessageDraft = (draftKey: string | null, data: MessageDraftData)
 		file: file ?? undefined,
 	};
 
-	if (isEmptyObject(draftData, [])) {
-		deleteMessageDraft(draftKey);
+	if (!force && isEmptyObject(draftData, [])) {
+		deleteMessageDraft(draftId);
 		return null;
 	}
 
 	const updatedAt = new Date().toJSON();
 
 	saveLsMessageDrafts({
-		...drafts,
-		[draftKey]: {
+		...loadLsMessageDrafts(),
+		[draftId]: {
 			updatedAt,
 			data: draftData,
 		},
 	});
 
 	return {
-		id: draftKey,
+		id: draftId,
 		updatedAt,
 		data: restoreMessageDraftData(draftData),
 	};
 };
 
-export const deleteMessageDraft = (draftKey: string | null): void => {
-	if (!draftKey) return;
+export const deleteMessageDraft = (draftId: string | null): void => {
+	if (!draftId) return;
 
 	const drafts = loadLsMessageDrafts();
 
-	delete drafts[draftKey];
+	delete drafts[draftId];
 
 	saveLsMessageDrafts(drafts);
 };
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index a419b3bfec93..e0da6341db63 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -188,8 +188,9 @@ const getMenu = (): MenuItem[] => {
 		},
 	}];
 
-	items.unshift(null);
-	items = props.menu.concat(items);
+	if (props.menu.length !== 0) {
+		items = [...props.menu, null, ...items];
+	}
 
 	return items;
 };

From 77806ba7b2983eb745bfe4d38f403dda3077f49c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 16:04:00 +0900
Subject: [PATCH 091/147] fix

---
 packages/client/src/components/TmsDraftsList.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index 7369a467ef1d..a1691e80a391 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -11,7 +11,7 @@
 
 	<MkSpacer :margin-min="20" :margin-max="28">
 		<div class="tms-drafts-list _gaps">
-			<div style="padding: 8px; text-align: center;">
+			<div style="margin-bottom: calc(var(--margin) * -1) auto var(--margin) auto; text-align: center;">
 				<MkButton primary gradate rounded inline @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createNew }}</MkButton>
 			</div>
 			<div v-if="draftsList.length !== 0" :class="$style.draftsList">
@@ -59,6 +59,7 @@ const draftsList = $ref<Draft[]>(
 const create = (): void => {
 	const draft = createDraft();
 	emit('chosen', draft);
+	dialog?.close();
 };
 
 const chosen = (draftId: Draft['id']): void => {

From be8c0e842ef29489a2812e5386294d7f6020c07c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 18 Apr 2023 16:08:25 +0900
Subject: [PATCH 092/147] fix

---
 packages/client/src/components/TmsDraftsList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index a1691e80a391..a36f7d75ad7d 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -11,7 +11,7 @@
 
 	<MkSpacer :margin-min="20" :margin-max="28">
 		<div class="tms-drafts-list _gaps">
-			<div style="margin-bottom: calc(var(--margin) * -1) auto var(--margin) auto; text-align: center;">
+			<div style="margin-top: calc(var(--margin) * -1); margin-bottom: var(--margin); text-align: center;">
 				<MkButton primary gradate rounded inline @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createNew }}</MkButton>
 			</div>
 			<div v-if="draftsList.length !== 0" :class="$style.draftsList">

From 2401b8925aa8da72bfdab64070f9031aa4819f3f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 03:22:26 +0900
Subject: [PATCH 093/147] =?UTF-8?q?fix=20=E9=80=9A=E7=9F=A5=E3=81=8C?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=81=AA=E3=81=8F=E3=81=AA?=
 =?UTF-8?q?=E3=82=8B=E5=95=8F=E9=A1=8C,=20connection=E3=81=AE=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkNotification.vue   | 14 ++++++++++----
 .../client/src/components/MkNotifications.vue  | 18 ++++++++++++------
 packages/client/src/components/MkTimeline.vue  | 14 ++++++++++----
 packages/client/src/pages/messaging/index.vue  |  8 ++++++--
 .../src/pages/messaging/messaging-room.vue     | 10 ++++++++--
 packages/client/src/pages/notifications.vue    |  2 +-
 .../src/pages/settings/notifications.vue       |  2 +-
 packages/client/src/ui/deck/deck-store.ts      |  2 +-
 .../src/ui/deck/notifications-column.vue       |  2 +-
 packages/client/src/widgets/notifications.vue  |  2 +-
 10 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index b93c59d1d63d..765db31f7be8 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -113,8 +113,8 @@ const props = withDefaults(defineProps<{
 const rootEl = ref<HTMLElement | null>(null);
 const reactionRef = ref<InstanceType<typeof MkReactionIcon> | null>(null);
 
-let readObserver: IntersectionObserver | undefined;
-let connection: misskey.ChannelConnection | undefined;
+let readObserver: IntersectionObserver | null = null;
+let connection: misskey.ChannelConnection | null = null;
 
 onMounted(() => {
 	if (rootEl.value && !props.notification.isRead) {
@@ -140,8 +140,14 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	readObserver?.disconnect();
-	connection?.dispose();
+	if (readObserver) {
+		readObserver.disconnect();
+		readObserver = null;
+	}
+	if (connection) {
+		connection.dispose();
+		connection = null;
+	}
 });
 
 const followRequestDone = ref(false);
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index 74f204cf3e28..72c40a8bcdf1 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -28,7 +28,7 @@ import { $i } from '@/account';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	includeTypes?: typeof Misskey.notificationTypes[number][];
+	includeTypes?: typeof Misskey.notificationTypes[number][] | null;
 	unreadOnly?: boolean;
 }>();
 
@@ -38,14 +38,17 @@ const pagination: Paging = {
 	endpoint: 'i/notifications' as const,
 	limit: 10,
 	params: computed(() => ({
-		includeTypes: props.includeTypes ?? undefined,
-		excludeTypes: props.includeTypes ? undefined : $i?.mutingNotificationTypes,
+		includeTypes: props.includeTypes ? props.includeTypes : undefined,
+		excludeTypes: !props.includeTypes ? $i?.mutingNotificationTypes : undefined,
 		unreadOnly: props.unreadOnly,
 	})),
 };
 
 const onNotification = (notification: Misskey.entities.Notification): void => {
-	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : !!$i?.mutingNotificationTypes.includes(notification.type);
+	const isMuted = props.includeTypes
+		? !props.includeTypes.includes(notification.type)
+		: !!$i?.mutingNotificationTypes.includes(notification.type);
+
 	if (isMuted || document.visibilityState === 'visible') {
 		stream.send('readNotification', {
 			id: notification.id,
@@ -60,7 +63,7 @@ const onNotification = (notification: Misskey.entities.Notification): void => {
 	}
 };
 
-let connection: Misskey.ChannelConnection | undefined;
+let connection: Misskey.ChannelConnection | null = null;
 
 onMounted(() => {
 	connection = stream.useChannel('main');
@@ -92,7 +95,10 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	connection?.dispose();
+	if (connection) {
+		connection.dispose();
+		connection = null;
+	}
 });
 </script>
 
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index ba8f5245c8b1..9d2db0bedf4d 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -54,8 +54,8 @@ const onChangeFollowing = (): void => {
 
 let endpoint: keyof Misskey.Endpoints | undefined;
 let query: Misskey.Endpoints[keyof Misskey.Endpoints]['req'] | undefined;
-let connection: Misskey.ChannelConnection | undefined;
-let connection2: Misskey.ChannelConnection | undefined;
+let connection: Misskey.ChannelConnection | null = null;
+let connection2: Misskey.ChannelConnection | null = null;
 
 if (props.src === 'antenna') {
 	endpoint = 'antennas/notes';
@@ -135,8 +135,14 @@ const pagination = {
 };
 
 onUnmounted(() => {
-	connection?.dispose();
-	connection2?.dispose();
+	if (connection) {
+		connection.dispose();
+		connection = null;
+	}
+	if (connection2) {
+		connection2.dispose();
+		connection2 = null;
+	}
 });
 
 // const timetravel = (date?: Date) => {
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 68a5e2d2efd3..578b3cb84408 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -44,6 +44,7 @@
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onUnmounted } from 'vue';
+import { ChannelConnection } from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import MkButton from '@/components/MkButton.vue';
 import { acct } from '@/filters/user';
@@ -59,7 +60,7 @@ const router = useRouter();
 let fetching = $ref(true);
 let moreFetching = $ref(false);
 let messages = $ref([]);
-let connection = $ref(null);
+let connection = $ref<ChannelConnection | null>(null);
 
 const getAcct = Acct.toString;
 
@@ -149,7 +150,10 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	if (connection) connection.dispose();
+	if (connection) {
+		connection.dispose();
+		connection = null;
+	}
 });
 
 const headerActions = $computed(() => []);
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index c34ec56ba28b..fb196af78591 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -89,7 +89,10 @@ const {
 let pagination: Paging | null = $ref(null);
 
 watch([() => props.userAcct, () => props.groupId], () => {
-	if (connection) connection.dispose();
+	if (connection) {
+		connection.dispose();
+		connection = null;
+	}
 	fetch();
 });
 
@@ -276,7 +279,10 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-	connection?.dispose();
+	if (connection) {
+		connection.dispose();
+		connection = null;
+	}
 	document.removeEventListener('visibilitychange', onVisibilitychange);
 	if (scrollRemove) scrollRemove();
 });
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 640689c34e03..81694aae7582 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div v-if="tab === 'all' || tab === 'unread'">
-			<MkNotifications class="notifications" :include-types="includeTypes ?? []" :unread-only="unreadOnly"/>
+			<MkNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
 		</div>
 		<div v-else-if="tab === 'mentions'">
 			<MkNotes :pagination="mentionsPagination"/>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index ecfeb4fa9cca..29dfbd351006 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -32,7 +32,7 @@ const readAllNotifications = async (): Promise<void> => {
 };
 
 const configure = (): void => {
-	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
+	const includingTypes = notificationTypes.filter(x => !$i?.mutingNotificationTypes.includes(x));
 	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
 		includingTypes,
 		showGlobalToggle: false,
diff --git a/packages/client/src/ui/deck/deck-store.ts b/packages/client/src/ui/deck/deck-store.ts
index 0260b459f5ac..78be48d60b86 100644
--- a/packages/client/src/ui/deck/deck-store.ts
+++ b/packages/client/src/ui/deck/deck-store.ts
@@ -22,7 +22,7 @@ export type Column = {
 	antennaId?: string;
 	listId?: string;
 	channelId?: string;
-	includingTypes?: typeof notificationTypes[number][];
+	includingTypes?: typeof notificationTypes[number][] | null;
 	tl?: 'home' | 'local' | 'social' | 'global';
 };
 
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index ee2ea95e5f69..0b11df4b65cc 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -33,7 +33,7 @@ const openNotificationSetting = (): void => {
 		}) => {
 			const { includingTypes } = res;
 			updateColumn(props.column.id, {
-				includingTypes: includingTypes ?? [],
+				includingTypes: includingTypes,
 			});
 		},
 	}, 'closed');
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 5012a7384ddc..c8fd0fd20ec2 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -64,7 +64,7 @@ const configureNotification = (): void => {
 			includingTypes: typeof notificationTypes[number][] | null;
 		}) => {
 			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes ?? [];
+			widgetProps.includingTypes = includingTypes;
 			save();
 		},
 	}, 'closed');

From 21e12bb312dc14b43fff7d9d4aa1039dafbc87a1 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 05:26:47 +0900
Subject: [PATCH 094/147] =?UTF-8?q?refactor:=20=E6=96=87=E5=AD=97=E6=95=B0?=
 =?UTF-8?q?=E3=82=AB=E3=82=A6=E3=83=B3=E3=82=BF=E3=83=BC=E3=82=92=E9=96=A2?=
 =?UTF-8?q?=E6=95=B0=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TmsPostForm.core.vue       | 21 +++++------
 packages/client/src/components/form/input.vue | 18 ++++------
 .../client/src/components/form/textarea.vue   | 18 ++++------
 .../client/src/scripts/tms/text-counter.ts    | 35 +++++++++++++++++++
 4 files changed, 57 insertions(+), 35 deletions(-)
 create mode 100644 packages/client/src/scripts/tms/text-counter.ts

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index f5c4710db3c6..3e6e729c298c 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -80,7 +80,7 @@
 					<button v-if="quote" :class="['_button', $style.quoteCancel]" @click="quote = null"><i class="ti ti-x"></i></button>
 				</div>
 			</div>
-			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+			<div v-if="counter.ok" ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: counter.isOver }]">{{ counter.remainingChars }}</div>
 		</div>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
 	</div>
@@ -108,7 +108,6 @@ import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import * as mfm from 'mfm-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import { throttle } from 'throttle-debounce';
 import { v4 as uuid } from 'uuid';
@@ -128,6 +127,7 @@ import { deepClone } from '@/scripts/clone';
 import { parseObject, parseArray } from '@/scripts/tms/parse';
 import * as Draft from '@/scripts/tms/drafts';
 import { imanonashi } from '@/scripts/tms/imanonashi';
+import { textCounter } from '@/scripts/tms/text-counter';
 import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 import MkInfo from '@/components/MkInfo.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
@@ -261,21 +261,16 @@ const placeholder = $computed((): string => {
 	return xs[Math.floor(Math.random() * xs.length)];
 });
 
-const textLength = $computed((): number => {
-	return length((text + imeText).trim());
-});
-
-const maxTextLength = $computed((): number => {
-	const instanceTyped = instance as {
-		maxNoteTextLength?: number;
-	} | null | undefined;
-	return instanceTyped?.maxNoteTextLength ?? 1000;
+const counter = textCounter({
+	text: $$((text + imeText).trim()),
+	maxChars: (instance.maxNoteTextLength as number | undefined) ?? 1000,
 });
 
 const canPost = $computed((): boolean => {
+	if (!counter.value.ok) return false;
 	return !fetching && !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!(renote || quote)) &&
-		(textLength <= maxTextLength) &&
+		(1 <= counter.value.chars || 1 <= files.length || !!poll || !!(renote || quote)) &&
+		(!counter.value.isOver) &&
 		(!poll || poll.choices.length >= 2);
 });
 
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 2bed7744b165..8fffb3ebfd57 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -2,8 +2,8 @@
 <template>
 <div class="matxzzsk">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label" class="label-text"><slot name="label"></slot></span>
-		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
+		<span v-if="$slots.label || counter.ok" class="label-text"><slot name="label"></slot></span>
+		<span v-if="counter.ok" class="text-count" :class="{ over: counter.isOver }">{{ counter.remainingChars }}</span>
 	</div>
 	<div class="input" :class="{ inline, disabled, focused, invalid }">
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
@@ -40,11 +40,11 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
-import { length } from 'stringz';
 import { v4 as uuid } from 'uuid';
 import MkButton from '@/components/MkButton.vue';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
+import { textCounter } from '@/scripts/tms/text-counter';
 
 const props = defineProps<{
 	modelValue: string | number;
@@ -88,13 +88,9 @@ const height =
 	props.large ? 40 :
 	38;
 
-const textLength = $computed((): number => {
-	if (typeof v.value !== 'string') return 0;
-	return length(v.value);
-});
-
-const maxTextLength = $computed((): number | null => {
-	return props.max ?? null;
+const counter = textCounter({
+	text: v,
+	maxChars: props.max,
 });
 
 const focus = (): void => inputEl.value?.focus();
@@ -128,7 +124,7 @@ watch(modelValue, newValue => {
 });
 
 watch(v, () => {
-	invalid.value = !!inputEl.value?.validity.badInput || (textLength != null && maxTextLength != null && textLength > maxTextLength);
+	invalid.value = !!inputEl.value?.validity.badInput || (counter.value.ok && counter.value.isOver);
 
 	if (!props.manualSave) {
 		if (props.debounce) {
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 78131f0948ff..de6f8022e13b 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -2,8 +2,8 @@
 <template>
 <div class="adhpbeos">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label" class="label-text"><slot name="label"></slot></span>
-		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
+		<span v-if="$slots.label || counter.ok" class="label-text"><slot name="label"></slot></span>
+		<span v-if="counter.ok" class="text-count" :class="{ over: counter.isOver }">{{ counter.remainingChars }}</span>
 	</div>
 	<div class="input" :class="{ disabled, focused, invalid, tall, pre }">
 		<textarea
@@ -33,9 +33,9 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
-import { length } from 'stringz';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { textCounter } from '@/scripts/tms/text-counter';
 
 const props = defineProps<{
 	modelValue: string;
@@ -70,13 +70,9 @@ const changed = ref(false);
 const invalid = ref(false);
 const inputEl = ref<HTMLTextAreaElement>();
 
-const textLength = $computed((): number => {
-	if (typeof v.value !== 'string') return 0;
-	return length(v.value);
-});
-
-const maxTextLength = $computed((): number | null => {
-	return props.max ?? null;
+const counter = textCounter({
+	text: v,
+	maxChars: props.max,
 });
 
 const focus = (): void => inputEl.value?.focus();
@@ -106,7 +102,7 @@ watch(modelValue, newValue => {
 });
 
 watch(v, () => {
-	invalid.value = !!inputEl.value?.validity.badInput || (textLength != null && maxTextLength != null && textLength > maxTextLength);
+	invalid.value = !!inputEl.value?.validity.badInput || (counter.value.ok && counter.value.isOver);
 
 	if (!props.manualSave) {
 		if (props.debounce) {
diff --git a/packages/client/src/scripts/tms/text-counter.ts b/packages/client/src/scripts/tms/text-counter.ts
new file mode 100644
index 000000000000..feab016bd58a
--- /dev/null
+++ b/packages/client/src/scripts/tms/text-counter.ts
@@ -0,0 +1,35 @@
+import { computed, Ref, ComputedRef } from 'vue';
+import { length } from 'stringz';
+
+type TextCounterPropsType = {
+	text: Ref<unknown | string>;
+	maxChars: unknown | number;
+};
+
+type TextCounterResultType = {
+	ok: true;
+	chars: number;
+	maxChars: number;
+	remainingChars: number;
+	isOver: boolean;
+} | {
+	ok: false;
+};
+
+const isText = (v: Ref<unknown>): v is Ref<string> => {
+	return typeof v.value === 'string';
+};
+
+const isMaxChars = (v: unknown): v is number => {
+	return typeof v === 'number' && Number.isFinite(v) && Number.isInteger(v) && v >= 0;
+};
+
+export const textCounter = ({ text, maxChars }: TextCounterPropsType): ComputedRef<TextCounterResultType> => {
+	return computed<TextCounterResultType>(() => {
+		if (!isText(text) || !isMaxChars(maxChars)) return { ok: false };
+		const chars = length(text.value);
+		const remainingChars = maxChars - chars;
+		const isOver = chars > maxChars;
+		return { ok: true, chars, maxChars, remainingChars, isOver };
+	});	
+};

From 3e196ab8b797e5627f7d5251cd7a211dafc3396f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 06:45:58 +0900
Subject: [PATCH 095/147] =?UTF-8?q?Revert=20"refactor:=20=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E6=95=B0=E3=82=AB=E3=82=A6=E3=83=B3=E3=82=BF=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E9=96=A2=E6=95=B0=E5=8C=96"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 21e12bb312dc14b43fff7d9d4aa1039dafbc87a1.
---
 .../src/components/TmsPostForm.core.vue       | 21 ++++++-----
 packages/client/src/components/form/input.vue | 18 ++++++----
 .../client/src/components/form/textarea.vue   | 18 ++++++----
 .../client/src/scripts/tms/text-counter.ts    | 35 -------------------
 4 files changed, 35 insertions(+), 57 deletions(-)
 delete mode 100644 packages/client/src/scripts/tms/text-counter.ts

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 3e6e729c298c..f5c4710db3c6 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -80,7 +80,7 @@
 					<button v-if="quote" :class="['_button', $style.quoteCancel]" @click="quote = null"><i class="ti ti-x"></i></button>
 				</div>
 			</div>
-			<div v-if="counter.ok" ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: counter.isOver }]">{{ counter.remainingChars }}</div>
+			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 		</div>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
 	</div>
@@ -108,6 +108,7 @@ import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import * as mfm from 'mfm-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
+import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import { throttle } from 'throttle-debounce';
 import { v4 as uuid } from 'uuid';
@@ -127,7 +128,6 @@ import { deepClone } from '@/scripts/clone';
 import { parseObject, parseArray } from '@/scripts/tms/parse';
 import * as Draft from '@/scripts/tms/drafts';
 import { imanonashi } from '@/scripts/tms/imanonashi';
-import { textCounter } from '@/scripts/tms/text-counter';
 import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 import MkInfo from '@/components/MkInfo.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
@@ -261,16 +261,21 @@ const placeholder = $computed((): string => {
 	return xs[Math.floor(Math.random() * xs.length)];
 });
 
-const counter = textCounter({
-	text: $$((text + imeText).trim()),
-	maxChars: (instance.maxNoteTextLength as number | undefined) ?? 1000,
+const textLength = $computed((): number => {
+	return length((text + imeText).trim());
+});
+
+const maxTextLength = $computed((): number => {
+	const instanceTyped = instance as {
+		maxNoteTextLength?: number;
+	} | null | undefined;
+	return instanceTyped?.maxNoteTextLength ?? 1000;
 });
 
 const canPost = $computed((): boolean => {
-	if (!counter.value.ok) return false;
 	return !fetching && !posting && !posted &&
-		(1 <= counter.value.chars || 1 <= files.length || !!poll || !!(renote || quote)) &&
-		(!counter.value.isOver) &&
+		(1 <= textLength || 1 <= files.length || !!poll || !!(renote || quote)) &&
+		(textLength <= maxTextLength) &&
 		(!poll || poll.choices.length >= 2);
 });
 
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 8fffb3ebfd57..2bed7744b165 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -2,8 +2,8 @@
 <template>
 <div class="matxzzsk">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label || counter.ok" class="label-text"><slot name="label"></slot></span>
-		<span v-if="counter.ok" class="text-count" :class="{ over: counter.isOver }">{{ counter.remainingChars }}</span>
+		<span v-if="$slots.label" class="label-text"><slot name="label"></slot></span>
+		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
 	</div>
 	<div class="input" :class="{ inline, disabled, focused, invalid }">
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
@@ -40,11 +40,11 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
+import { length } from 'stringz';
 import { v4 as uuid } from 'uuid';
 import MkButton from '@/components/MkButton.vue';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
-import { textCounter } from '@/scripts/tms/text-counter';
 
 const props = defineProps<{
 	modelValue: string | number;
@@ -88,9 +88,13 @@ const height =
 	props.large ? 40 :
 	38;
 
-const counter = textCounter({
-	text: v,
-	maxChars: props.max,
+const textLength = $computed((): number => {
+	if (typeof v.value !== 'string') return 0;
+	return length(v.value);
+});
+
+const maxTextLength = $computed((): number | null => {
+	return props.max ?? null;
 });
 
 const focus = (): void => inputEl.value?.focus();
@@ -124,7 +128,7 @@ watch(modelValue, newValue => {
 });
 
 watch(v, () => {
-	invalid.value = !!inputEl.value?.validity.badInput || (counter.value.ok && counter.value.isOver);
+	invalid.value = !!inputEl.value?.validity.badInput || (textLength != null && maxTextLength != null && textLength > maxTextLength);
 
 	if (!props.manualSave) {
 		if (props.debounce) {
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index de6f8022e13b..78131f0948ff 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -2,8 +2,8 @@
 <template>
 <div class="adhpbeos">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label || counter.ok" class="label-text"><slot name="label"></slot></span>
-		<span v-if="counter.ok" class="text-count" :class="{ over: counter.isOver }">{{ counter.remainingChars }}</span>
+		<span v-if="$slots.label" class="label-text"><slot name="label"></slot></span>
+		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
 	</div>
 	<div class="input" :class="{ disabled, focused, invalid, tall, pre }">
 		<textarea
@@ -33,9 +33,9 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
+import { length } from 'stringz';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
-import { textCounter } from '@/scripts/tms/text-counter';
 
 const props = defineProps<{
 	modelValue: string;
@@ -70,9 +70,13 @@ const changed = ref(false);
 const invalid = ref(false);
 const inputEl = ref<HTMLTextAreaElement>();
 
-const counter = textCounter({
-	text: v,
-	maxChars: props.max,
+const textLength = $computed((): number => {
+	if (typeof v.value !== 'string') return 0;
+	return length(v.value);
+});
+
+const maxTextLength = $computed((): number | null => {
+	return props.max ?? null;
 });
 
 const focus = (): void => inputEl.value?.focus();
@@ -102,7 +106,7 @@ watch(modelValue, newValue => {
 });
 
 watch(v, () => {
-	invalid.value = !!inputEl.value?.validity.badInput || (counter.value.ok && counter.value.isOver);
+	invalid.value = !!inputEl.value?.validity.badInput || (textLength != null && maxTextLength != null && textLength > maxTextLength);
 
 	if (!props.manualSave) {
 		if (props.debounce) {
diff --git a/packages/client/src/scripts/tms/text-counter.ts b/packages/client/src/scripts/tms/text-counter.ts
deleted file mode 100644
index feab016bd58a..000000000000
--- a/packages/client/src/scripts/tms/text-counter.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { computed, Ref, ComputedRef } from 'vue';
-import { length } from 'stringz';
-
-type TextCounterPropsType = {
-	text: Ref<unknown | string>;
-	maxChars: unknown | number;
-};
-
-type TextCounterResultType = {
-	ok: true;
-	chars: number;
-	maxChars: number;
-	remainingChars: number;
-	isOver: boolean;
-} | {
-	ok: false;
-};
-
-const isText = (v: Ref<unknown>): v is Ref<string> => {
-	return typeof v.value === 'string';
-};
-
-const isMaxChars = (v: unknown): v is number => {
-	return typeof v === 'number' && Number.isFinite(v) && Number.isInteger(v) && v >= 0;
-};
-
-export const textCounter = ({ text, maxChars }: TextCounterPropsType): ComputedRef<TextCounterResultType> => {
-	return computed<TextCounterResultType>(() => {
-		if (!isText(text) || !isMaxChars(maxChars)) return { ok: false };
-		const chars = length(text.value);
-		const remainingChars = maxChars - chars;
-		const isOver = chars > maxChars;
-		return { ok: true, chars, maxChars, remainingChars, isOver };
-	});	
-};

From 8aa0f236bb20fccd0cbaff648717fee81a98acfb Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 06:47:26 +0900
Subject: [PATCH 096/147] tweak

---
 packages/client/src/components/form/input.vue    | 2 +-
 packages/client/src/components/form/textarea.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 2bed7744b165..064fd924a86b 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -2,7 +2,7 @@
 <template>
 <div class="matxzzsk">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label" class="label-text"><slot name="label"></slot></span>
+		<span v-if="$slots.label || (textLength != null && maxTextLength != null)" class="label-text"><slot name="label"></slot></span>
 		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
 	</div>
 	<div class="input" :class="{ inline, disabled, focused, invalid }">
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 78131f0948ff..07f3227e0702 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -2,7 +2,7 @@
 <template>
 <div class="adhpbeos">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label" class="label-text"><slot name="label"></slot></span>
+		<span v-if="$slots.label || (textLength != null && maxTextLength != null)" class="label-text"><slot name="label"></slot></span>
 		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
 	</div>
 	<div class="input" :class="{ disabled, focused, invalid, tall, pre }">

From 4d7ba08c14177d4bc674263e8081cd9a707c7bbc Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 08:05:09 +0900
Subject: [PATCH 097/147] =?UTF-8?q?refactor:=20=E6=96=87=E5=AD=97=E6=95=B0?=
 =?UTF-8?q?=E3=82=AB=E3=82=A6=E3=83=B3=E3=82=BF=E3=83=BC=E3=82=92=E9=96=A2?=
 =?UTF-8?q?=E6=95=B0=E5=8C=96(=E3=83=AA=E3=83=99=E3=83=B3=E3=82=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TmsPostForm.core.vue       | 20 +++++--------
 packages/client/src/components/form/input.vue | 18 +++++------
 .../client/src/components/form/textarea.vue   | 18 +++++------
 .../client/src/scripts/tms/text-counter.ts    | 30 +++++++++++++++++++
 4 files changed, 51 insertions(+), 35 deletions(-)
 create mode 100644 packages/client/src/scripts/tms/text-counter.ts

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index f5c4710db3c6..5e4bc62a3d53 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -80,7 +80,7 @@
 					<button v-if="quote" :class="['_button', $style.quoteCancel]" @click="quote = null"><i class="ti ti-x"></i></button>
 				</div>
 			</div>
-			<div ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+			<div v-if="counter.isRemaining" ref="textCountEl" :class="[$style.textCount, { [$style.textOver]: counter.isOver }]">{{ counter.remainingChars }}</div>
 		</div>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
 	</div>
@@ -108,7 +108,6 @@ import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import * as mfm from 'mfm-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import { throttle } from 'throttle-debounce';
 import { v4 as uuid } from 'uuid';
@@ -128,6 +127,7 @@ import { deepClone } from '@/scripts/clone';
 import { parseObject, parseArray } from '@/scripts/tms/parse';
 import * as Draft from '@/scripts/tms/drafts';
 import { imanonashi } from '@/scripts/tms/imanonashi';
+import { textCounter } from '@/scripts/tms/text-counter';
 import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 import MkInfo from '@/components/MkInfo.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
@@ -261,21 +261,15 @@ const placeholder = $computed((): string => {
 	return xs[Math.floor(Math.random() * xs.length)];
 });
 
-const textLength = $computed((): number => {
-	return length((text + imeText).trim());
-});
-
-const maxTextLength = $computed((): number => {
-	const instanceTyped = instance as {
-		maxNoteTextLength?: number;
-	} | null | undefined;
-	return instanceTyped?.maxNoteTextLength ?? 1000;
+const counter = textCounter({
+	text: [$$(text), $$(imeText)],
+	maxChars: (instance.maxNoteTextLength as number | undefined) ?? 1000,
 });
 
 const canPost = $computed((): boolean => {
 	return !fetching && !posting && !posted &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!(renote || quote)) &&
-		(textLength <= maxTextLength) &&
+		(1 <= counter.value.chars || 1 <= files.length || !!poll || !!(renote || quote)) &&
+		!(counter.value.isRemaining && counter.value.isOver) &&
 		(!poll || poll.choices.length >= 2);
 });
 
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 064fd924a86b..df33f29b646d 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -2,8 +2,8 @@
 <template>
 <div class="matxzzsk">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label || (textLength != null && maxTextLength != null)" class="label-text"><slot name="label"></slot></span>
-		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
+		<span v-if="$slots.label || counter.isRemaining" class="label-text"><slot name="label"></slot></span>
+		<span v-if="counter.isRemaining" class="text-count" :class="{ over: counter.isOver }">{{ counter.remainingChars }}</span>
 	</div>
 	<div class="input" :class="{ inline, disabled, focused, invalid }">
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
@@ -40,11 +40,11 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
-import { length } from 'stringz';
 import { v4 as uuid } from 'uuid';
 import MkButton from '@/components/MkButton.vue';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
+import { textCounter } from '@/scripts/tms/text-counter';
 
 const props = defineProps<{
 	modelValue: string | number;
@@ -88,13 +88,9 @@ const height =
 	props.large ? 40 :
 	38;
 
-const textLength = $computed((): number => {
-	if (typeof v.value !== 'string') return 0;
-	return length(v.value);
-});
-
-const maxTextLength = $computed((): number | null => {
-	return props.max ?? null;
+const counter = textCounter({
+	text: v,
+	maxChars: props.max ?? Infinity,
 });
 
 const focus = (): void => inputEl.value?.focus();
@@ -128,7 +124,7 @@ watch(modelValue, newValue => {
 });
 
 watch(v, () => {
-	invalid.value = !!inputEl.value?.validity.badInput || (textLength != null && maxTextLength != null && textLength > maxTextLength);
+	invalid.value = !!inputEl.value?.validity.badInput || (counter.value.isRemaining && counter.value.isOver);
 
 	if (!props.manualSave) {
 		if (props.debounce) {
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 07f3227e0702..87bf5725cc4a 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -2,8 +2,8 @@
 <template>
 <div class="adhpbeos">
 	<div class="label" @click="focus">
-		<span v-if="$slots.label || (textLength != null && maxTextLength != null)" class="label-text"><slot name="label"></slot></span>
-		<span v-if="textLength != null && maxTextLength != null" class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
+		<span v-if="$slots.label || counter.isRemaining" class="label-text"><slot name="label"></slot></span>
+		<span v-if="counter.isRemaining" class="text-count" :class="{ over: counter.isOver }">{{ counter.remainingChars }}</span>
 	</div>
 	<div class="input" :class="{ disabled, focused, invalid, tall, pre }">
 		<textarea
@@ -33,9 +33,9 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
-import { length } from 'stringz';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { textCounter } from '@/scripts/tms/text-counter';
 
 const props = defineProps<{
 	modelValue: string;
@@ -70,13 +70,9 @@ const changed = ref(false);
 const invalid = ref(false);
 const inputEl = ref<HTMLTextAreaElement>();
 
-const textLength = $computed((): number => {
-	if (typeof v.value !== 'string') return 0;
-	return length(v.value);
-});
-
-const maxTextLength = $computed((): number | null => {
-	return props.max ?? null;
+const counter = textCounter({
+	text: v,
+	maxChars: props.max ?? Infinity,
 });
 
 const focus = (): void => inputEl.value?.focus();
@@ -106,7 +102,7 @@ watch(modelValue, newValue => {
 });
 
 watch(v, () => {
-	invalid.value = !!inputEl.value?.validity.badInput || (textLength != null && maxTextLength != null && textLength > maxTextLength);
+	invalid.value = !!inputEl.value?.validity.badInput || (counter.value.isRemaining && counter.value.isOver);
 
 	if (!props.manualSave) {
 		if (props.debounce) {
diff --git a/packages/client/src/scripts/tms/text-counter.ts b/packages/client/src/scripts/tms/text-counter.ts
new file mode 100644
index 000000000000..0f842b9c0611
--- /dev/null
+++ b/packages/client/src/scripts/tms/text-counter.ts
@@ -0,0 +1,30 @@
+import { computed, Ref, ComputedRef } from 'vue';
+import { length } from 'stringz';
+
+type TextCounterPropsType = {
+	text: Ref<unknown> | Ref<unknown>[];
+	maxChars: number;
+};
+
+type TextCounterResultType = {
+	isRemaining: true;
+	chars: number;
+	maxChars: number;
+	remainingChars: number;
+	isOver: boolean;
+} | {
+	isRemaining: false;
+	chars: number;
+};
+
+export const textCounter = (props: TextCounterPropsType): ComputedRef<TextCounterResultType> => {
+	const inputs = Array.isArray(props.text) ? props.text : [props.text];
+	const { maxChars } = props;
+	const isRemaining = Number.isInteger(maxChars) && maxChars >= 0;
+
+	return computed(() => {
+		const chars = length(inputs.map(({ value }) => typeof value === 'string' ? value : '').join('').trim());
+		if (!isRemaining) return { isRemaining, chars };
+		return { isRemaining, chars, maxChars, remainingChars: maxChars - chars, isOver: chars > maxChars };
+	});
+};

From 7b9278914e925b30c9771d4bc82e04452ae871ba Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 08:29:10 +0900
Subject: [PATCH 098/147] =?UTF-8?q?enhance:=20esc=E3=82=AD=E3=83=BC?=
 =?UTF-8?q?=E3=81=A7pwsp=E3=82=92=E9=96=89=E3=81=98=E3=82=89=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB,=20esc=E5=88=A4=E5=AE=9A?=
 =?UTF-8?q?=E3=81=AB'Esc'=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkAutocomplete.vue  |  1 +
 packages/client/src/components/MkDialog.vue   |  2 +-
 .../client/src/components/MkMediaList.vue     | 21 ++++++++++++++++---
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index 7ba6fa1a40af..ba44f8435a91 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -285,6 +285,7 @@ function onKeydown(event: KeyboardEvent) {
 			break;
 
 		case 'Escape':
+		case 'Esc':
 			cancel();
 			props.close();
 			break;
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 84cedde4832a..88868a4acf09 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -132,7 +132,7 @@ function onBgClick() {
 }
 */
 function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape') cancel();
+	if (evt.key === 'Escape' || evt.key === 'Esc') cancel();
 }
 
 function onInputKeydown(evt: KeyboardEvent) {
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 8e310efdcb32..e4b36c417991 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -113,13 +113,27 @@ onMounted(() => {
 	});
 
 	lightbox.init();
-	
-	window.addEventListener('popstate', () => {
+
+	const close = (): void => {
 		if (lightbox.pswp && lightbox.pswp.isOpen === true) {
+			removeListener();
 			lightbox.pswp.close();
 			return;
 		}
-	});
+	};
+
+	const popstateHandler = (): void => close();
+	const keydownHandler = (ev: KeyboardEvent): void => {
+		if (ev.key === 'Escape' || ev.key === 'Esc') close();
+	};
+
+	const removeListener = (): void => {
+		window.removeEventListener('popstate', popstateHandler);
+		window.removeEventListener('keydown', keydownHandler);
+	};
+
+	window.addEventListener('popstate', popstateHandler);
+	window.addEventListener('keydown', keydownHandler);
 
 	lightbox.on('beforeOpen', () => {
 		history.pushState(null, '', '#pswp');
@@ -127,6 +141,7 @@ onMounted(() => {
 
 	lightbox.on('close', () => {
 		if (window.location.hash === '#pswp') {
+			removeListener();
 			history.back();
 		}
 	});

From 45bf312fb3f54f165e218952b863c845670c0856 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 08:35:24 +0900
Subject: [PATCH 099/147] =?UTF-8?q?=E5=8B=95=E3=81=84=E3=81=A6=E3=81=AA?=
 =?UTF-8?q?=E3=81=95=E3=81=9D=E3=81=86=E3=81=AA=E3=81=AE=E3=81=A7=E3=81=84?=
 =?UTF-8?q?=E3=81=BE=E3=81=AE=E3=81=AA=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkMediaList.vue     | 21 +++----------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index e4b36c417991..8e310efdcb32 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -113,27 +113,13 @@ onMounted(() => {
 	});
 
 	lightbox.init();
-
-	const close = (): void => {
+	
+	window.addEventListener('popstate', () => {
 		if (lightbox.pswp && lightbox.pswp.isOpen === true) {
-			removeListener();
 			lightbox.pswp.close();
 			return;
 		}
-	};
-
-	const popstateHandler = (): void => close();
-	const keydownHandler = (ev: KeyboardEvent): void => {
-		if (ev.key === 'Escape' || ev.key === 'Esc') close();
-	};
-
-	const removeListener = (): void => {
-		window.removeEventListener('popstate', popstateHandler);
-		window.removeEventListener('keydown', keydownHandler);
-	};
-
-	window.addEventListener('popstate', popstateHandler);
-	window.addEventListener('keydown', keydownHandler);
+	});
 
 	lightbox.on('beforeOpen', () => {
 		history.pushState(null, '', '#pswp');
@@ -141,7 +127,6 @@ onMounted(() => {
 
 	lightbox.on('close', () => {
 		if (window.location.hash === '#pswp') {
-			removeListener();
 			history.back();
 		}
 	});

From 3c5df01977e45ec1e14132429a621307a4fb09cf Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 20:50:08 +0900
Subject: [PATCH 100/147] =?UTF-8?q?test(frontend):=20=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=A0=E3=83=A9=E3=82=A4=E3=83=B3=E3=81=AE=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E3=82=92=E8=A8=98=E6=86=B6=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

現状は現在時刻を記憶しているけど、いずれはnoteIdで保存して任意の場所に復元できるようにしたい
---
 packages/client/src/components/MkTimeline.vue | 31 +++++++++++++++++++
 packages/client/src/pages/timeline.vue        |  1 +
 .../client/src/scripts/tms/remembering.ts     | 11 +++++++
 3 files changed, 43 insertions(+)
 create mode 100644 packages/client/src/scripts/tms/remembering.ts

diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 9d2db0bedf4d..5989940e2313 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -10,6 +10,7 @@ import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
+import { getRemembering, setRemembering } from '@/scripts/tms/remembering';
 
 const props = defineProps<{
 	src: string;
@@ -17,6 +18,7 @@ const props = defineProps<{
 	antenna?: string;
 	channel?: string;
 	sound?: boolean;
+	remembering?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -128,6 +130,31 @@ if (!endpoint) {
 	throw new Error();
 }
 
+let rememberingHandlerStop: (() => void) | null = null;
+
+if (props.remembering && (
+	endpoint === 'notes/timeline' ||
+	endpoint === 'notes/local-timeline' ||
+	endpoint === 'notes/hybrid-timeline' ||
+	endpoint === 'notes/global-timeline'
+)) {
+	const ep = endpoint;
+	const sinceDate = getRemembering(ep);
+	if (sinceDate) {
+		query = {
+			...(query as Misskey.Endpoints[typeof endpoint]['req']),
+			sinceDate,
+		};
+	}
+
+	const intervalId = window.setInterval(() => {
+		setRemembering(ep, Date.now());
+	}, 1000);
+	rememberingHandlerStop = (): void => {
+		window.clearInterval(intervalId);
+	};
+}
+
 const pagination = {
 	endpoint: endpoint,
 	limit: 10,
@@ -143,6 +170,10 @@ onUnmounted(() => {
 		connection2.dispose();
 		connection2 = null;
 	}
+	if (rememberingHandlerStop) {
+		rememberingHandlerStop();
+		rememberingHandlerStop = null;
+	}
 });
 
 // const timetravel = (date?: Date) => {
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index a72fbc75b99b..cef0b772a3a8 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -14,6 +14,7 @@
 					class="tl"
 					:src="src"
 					:sound="true"
+					:remembering="true"
 					@queue="queueUpdated"
 				/>
 			</div>
diff --git a/packages/client/src/scripts/tms/remembering.ts b/packages/client/src/scripts/tms/remembering.ts
new file mode 100644
index 000000000000..91a738350bee
--- /dev/null
+++ b/packages/client/src/scripts/tms/remembering.ts
@@ -0,0 +1,11 @@
+import { parseArray } from '@/scripts/tms/parse';
+
+const remembering = new Map<string, number>(parseArray<[string, number][]>(localStorage.getItem('tmsRemembering')));
+
+export const getRemembering = (key: string): number | null => {
+	return remembering.get(key) ?? null;
+};
+
+export const setRemembering = (key: string, dateNumber: number): void => {
+	localStorage.setItem('tmsRemembering', JSON.stringify([...remembering.set(key, dateNumber).entries()]));
+};

From 6040f0402a6fc931c1c0956b28f90b80cab5b245 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 19 Apr 2023 21:00:14 +0900
Subject: [PATCH 101/147] =?UTF-8?q?Revert=20"test(frontend):=20=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4=E3=83=B3=E3=81=AE=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E3=82=92=E8=A8=98=E6=86=B6=E3=81=99=E3=82=8B"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 3c5df01977e45ec1e14132429a621307a4fb09cf.
---
 packages/client/src/components/MkTimeline.vue | 31 -------------------
 packages/client/src/pages/timeline.vue        |  1 -
 .../client/src/scripts/tms/remembering.ts     | 11 -------
 3 files changed, 43 deletions(-)
 delete mode 100644 packages/client/src/scripts/tms/remembering.ts

diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 5989940e2313..9d2db0bedf4d 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -10,7 +10,6 @@ import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
-import { getRemembering, setRemembering } from '@/scripts/tms/remembering';
 
 const props = defineProps<{
 	src: string;
@@ -18,7 +17,6 @@ const props = defineProps<{
 	antenna?: string;
 	channel?: string;
 	sound?: boolean;
-	remembering?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -130,31 +128,6 @@ if (!endpoint) {
 	throw new Error();
 }
 
-let rememberingHandlerStop: (() => void) | null = null;
-
-if (props.remembering && (
-	endpoint === 'notes/timeline' ||
-	endpoint === 'notes/local-timeline' ||
-	endpoint === 'notes/hybrid-timeline' ||
-	endpoint === 'notes/global-timeline'
-)) {
-	const ep = endpoint;
-	const sinceDate = getRemembering(ep);
-	if (sinceDate) {
-		query = {
-			...(query as Misskey.Endpoints[typeof endpoint]['req']),
-			sinceDate,
-		};
-	}
-
-	const intervalId = window.setInterval(() => {
-		setRemembering(ep, Date.now());
-	}, 1000);
-	rememberingHandlerStop = (): void => {
-		window.clearInterval(intervalId);
-	};
-}
-
 const pagination = {
 	endpoint: endpoint,
 	limit: 10,
@@ -170,10 +143,6 @@ onUnmounted(() => {
 		connection2.dispose();
 		connection2 = null;
 	}
-	if (rememberingHandlerStop) {
-		rememberingHandlerStop();
-		rememberingHandlerStop = null;
-	}
 });
 
 // const timetravel = (date?: Date) => {
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index cef0b772a3a8..a72fbc75b99b 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -14,7 +14,6 @@
 					class="tl"
 					:src="src"
 					:sound="true"
-					:remembering="true"
 					@queue="queueUpdated"
 				/>
 			</div>
diff --git a/packages/client/src/scripts/tms/remembering.ts b/packages/client/src/scripts/tms/remembering.ts
deleted file mode 100644
index 91a738350bee..000000000000
--- a/packages/client/src/scripts/tms/remembering.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { parseArray } from '@/scripts/tms/parse';
-
-const remembering = new Map<string, number>(parseArray<[string, number][]>(localStorage.getItem('tmsRemembering')));
-
-export const getRemembering = (key: string): number | null => {
-	return remembering.get(key) ?? null;
-};
-
-export const setRemembering = (key: string, dateNumber: number): void => {
-	localStorage.setItem('tmsRemembering', JSON.stringify([...remembering.set(key, dateNumber).entries()]));
-};

From 356bed9cb4d9533e7ecf84f4766b270f092fcfc2 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 20 Apr 2023 01:42:34 +0900
Subject: [PATCH 102/147] =?UTF-8?q?fix=20=E6=96=87=E5=AD=97=E6=95=B0?=
 =?UTF-8?q?=E3=82=AB=E3=82=A6=E3=83=B3=E3=82=BF=E3=83=BC=E3=81=8C=E6=94=B9?=
 =?UTF-8?q?=E8=A1=8C=E3=81=95=E3=82=8C=E3=82=8B,=20MkMediaCaption=E3=81=AB?=
 =?UTF-8?q?=E3=82=82=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkMediaCaption.vue  | 22 ++++++++++++-------
 .../src/components/TmsPostForm.core.vue       |  1 +
 packages/client/src/components/form/input.vue |  1 +
 .../client/src/components/form/textarea.vue   |  1 +
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 17aeb185eb29..35a4e9493052 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -5,11 +5,11 @@
 			<div class="mk-dialog">
 				<header>
 					<Mfm v-if="title" class="title" :text="title"/>
-					<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
+					<span v-if="counter.isRemaining" class="text-count" :class="{ over: counter.isOver }">{{ counter.isRemaining }}</span>
 				</header>
 				<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
 				<div v-if="(showOkButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
+					<MkButton inline primary @click="ok">{{ i18n.ts.ok }}</MkButton>
 					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
 				</div>
 			</div>
@@ -29,12 +29,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { length } from 'stringz';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
+import { textCounter } from '@/scripts/tms/text-counter';
 
 export default defineComponent({
 	components: {
@@ -72,7 +72,10 @@ export default defineComponent({
 
 	emits: ['done', 'closed'],
 
-	data() {
+	data(): ({
+		inputValue: string | null;
+		i18n: typeof i18n;
+	}) {
 		return {
 			inputValue: this.input.default ? this.input.default : null,
 			i18n,
@@ -80,9 +83,11 @@ export default defineComponent({
 	},
 
 	computed: {
-		remainingLength(): number {
-			if (typeof this.inputValue !== 'string') return 512;
-			return 512 - length(this.inputValue);
+		counter() {
+			return textCounter({
+				text: $$(this.inputValue),
+				maxChars: 512,
+			}).value;
 		},
 	},
 
@@ -183,9 +188,10 @@ export default defineComponent({
 		}
 
 		> .text-count {
-			opacity: 0.7;
 			position: absolute;
 			right: 0;
+			white-space: nowrap;
+			opacity: 0.7;
 		}
 	}
 
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 5e4bc62a3d53..3988e7a23943 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -1228,6 +1228,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 	color: var(--fg);
 	min-width: 1.6em;
 	pointer-events: none;
+	white-space: nowrap;
 	opacity: 0.8;
 
 	&.textOver {
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index df33f29b646d..b467b8bca36e 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -184,6 +184,7 @@ onMounted(() => {
 		}
 
 		> .text-count {
+			white-space: nowrap;
 			opacity: 0.7;
 
 			&.over {
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 87bf5725cc4a..320232a10623 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -143,6 +143,7 @@ onMounted(() => {
 		}
 
 		> .text-count {
+			white-space: nowrap;
 			opacity: 0.7;
 
 			&.over {

From 761ee5707b1e27a1bcd573fb20b5240e0c1454aa Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 20 Apr 2023 02:35:17 +0900
Subject: [PATCH 103/147] =?UTF-8?q?enhance/refactor:=20MkFileCaptionEditWi?=
 =?UTF-8?q?ndow,=20MkPostFormAttaches=E3=81=AA=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkDrive.file.vue    |  73 +++--
 .../components/MkFileCaptionEditWindow.vue    |  48 +++
 .../client/src/components/MkMediaCaption.vue  | 273 ------------------
 .../src/components/MkPostFormAttaches.vue     | 222 +++++++-------
 .../src/components/TmsPostForm.core.vue       |   6 +-
 5 files changed, 192 insertions(+), 430 deletions(-)
 create mode 100644 packages/client/src/components/MkFileCaptionEditWindow.vue
 delete mode 100644 packages/client/src/components/MkMediaCaption.vue

diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 0af4a4e1db37..702240eaf35a 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -41,6 +41,8 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { disableContextmenu } from '@/scripts/touch';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
+import { MenuItem } from '@/types/menu';
 
 const props = withDefaults(defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -61,7 +63,7 @@ const isDragging = ref(false);
 
 const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
 
-function getMenu() {
+const getMenu = (): MenuItem[] => {
 	return [{
 		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
@@ -72,7 +74,7 @@ function getMenu() {
 		action: toggleSensitive,
 	}, {
 		text: i18n.ts.describeFile,
-		icon: 'ti ti-forms',
+		icon: 'ti ti-text-caption',
 		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
@@ -91,22 +93,23 @@ function getMenu() {
 		danger: true,
 		action: deleteFile,
 	}];
-}
+};
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent): void => {
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
 	if (props.selectMode) {
 		emit('chosen', props.file);
 	} else {
-		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		os.popupMenu(getMenu(), el);
 	}
-}
+};
 
-function onContextmenu(ev: MouseEvent) {
+const onContextmenu = (ev: MouseEvent): void => {
 	if (disableContextmenu) return;
 	os.contextMenu(getMenu(), ev);
-}
+};
 
-function onDragstart(ev: DragEvent) {
+const onDragstart = (ev: DragEvent): void => {
 	if (ev.dataTransfer) {
 		ev.dataTransfer.effectAllowed = 'move';
 		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
@@ -114,14 +117,14 @@ function onDragstart(ev: DragEvent) {
 	isDragging.value = true;
 
 	emit('dragstart');
-}
+};
 
-function onDragend() {
+const onDragend = (): void => {
 	isDragging.value = false;
 	emit('dragend');
-}
+};
 
-function rename() {
+const rename = (): void => {
 	os.inputText({
 		title: i18n.ts.renameFile,
 		placeholder: i18n.ts.inputNewFileName,
@@ -133,45 +136,39 @@ function rename() {
 			name: name,
 		});
 	});
-}
+};
 
-function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-		title: i18n.ts.describeFile,
-		input: {
-			placeholder: i18n.ts.inputNewDescription,
-			default: props.file.comment != null ? props.file.comment : '',
-		},
-		image: props.file,
+const describe = (): void => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+		default: props.file.comment != null ? props.file.comment : '',
+		file: props.file,
 	}, {
-		done: result => {
-			if (!result || result.canceled) return;
-			let comment = result.result;
+		done: (caption: string) => {
 			os.api('drive/files/update', {
 				fileId: props.file.id,
-				comment: comment.length === 0 ? null : comment,
+				comment: caption.length === 0 ? null : caption,
 			});
 		},
 	}, 'closed');
-}
+};
 
-function toggleSensitive() {
+const toggleSensitive = (): void => {
 	os.api('drive/files/update', {
 		fileId: props.file.id,
 		isSensitive: !props.file.isSensitive,
 	});
-}
+};
 
-function copyUrl() {
+const copyUrl = (): void => {
 	copyText(props.file.url);
 	os.success();
-}
-/*
-function addApp() {
-	alert('not implemented yet');
-}
-*/
-async function deleteFile() {
+};
+
+// const addApp = (): void => {
+// 	alert('not implemented yet');
+// };
+
+const deleteFile = async (): Promise<void> => {
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
@@ -181,7 +178,7 @@ async function deleteFile() {
 	os.api('drive/files/delete', {
 		fileId: props.file.id,
 	});
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkFileCaptionEditWindow.vue b/packages/client/src/components/MkFileCaptionEditWindow.vue
new file mode 100644
index 000000000000..ac0789f0bec6
--- /dev/null
+++ b/packages/client/src/components/MkFileCaptionEditWindow.vue
@@ -0,0 +1,48 @@
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="dialog?.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.describeFile }}</template>
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<MkDriveFileThumbnail :file="file" fit="contain" style="height: 100px; margin-bottom: 16px;"/>
+		<MkTextarea v-model="caption" :max="512" autofocus :placeholder="i18n.ts.inputNewDescription">
+			<template #label>{{ i18n.ts.caption }}</template>
+		</MkTextarea>
+	</MkSpacer>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { DriveFile } from 'misskey-js/built/entities';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	file: DriveFile;
+	default: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'done', v: string): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
+
+const caption = $ref(props.default);
+
+const ok = async (): Promise<void> => {
+	emit('done', caption);
+	dialog?.close();
+};
+</script>
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
deleted file mode 100644
index 35a4e9493052..000000000000
--- a/packages/client/src/components/MkMediaCaption.vue
+++ /dev/null
@@ -1,273 +0,0 @@
-<template>
-<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
-	<div class="container">
-		<div class="fullwidth top-caption">
-			<div class="mk-dialog">
-				<header>
-					<Mfm v-if="title" class="title" :text="title"/>
-					<span v-if="counter.isRemaining" class="text-count" :class="{ over: counter.isOver }">{{ counter.isRemaining }}</span>
-				</header>
-				<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
-				<div v-if="(showOkButton || showCancelButton)" class="buttons">
-					<MkButton inline primary @click="ok">{{ i18n.ts.ok }}</MkButton>
-					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
-				</div>
-			</div>
-		</div>
-		<div class="hdrwpsaf fullwidth">
-			<header>{{ image.name }}</header>
-			<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
-			<footer>
-				<span>{{ image.type }}</span>
-				<span>{{ bytes(image.size) }}</span>
-				<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-			</footer>
-		</div>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { textCounter } from '@/scripts/tms/text-counter';
-
-export default defineComponent({
-	components: {
-		MkModal,
-		MkButton,
-	},
-
-	props: {
-		image: {
-			type: Object,
-			required: true,
-		},
-		title: {
-			type: String,
-			required: false,
-			default: undefined,
-		},
-		input: {
-			type: Object,
-			required: true,
-		},
-		showOkButton: {
-			type: Boolean,
-			default: true,
-		},
-		showCancelButton: {
-			type: Boolean,
-			default: true,
-		},
-		cancelableByBgClick: {
-			type: Boolean,
-			default: true,
-		},
-	},
-
-	emits: ['done', 'closed'],
-
-	data(): ({
-		inputValue: string | null;
-		i18n: typeof i18n;
-	}) {
-		return {
-			inputValue: this.input.default ? this.input.default : null,
-			i18n,
-		};
-	},
-
-	computed: {
-		counter() {
-			return textCounter({
-				text: $$(this.inputValue),
-				maxChars: 512,
-			}).value;
-		},
-	},
-
-	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
-	},
-
-	beforeUnmount() {
-		document.removeEventListener('keydown', this.onKeydown);
-	},
-
-	methods: {
-		bytes,
-		number,
-
-		done(canceled: boolean, result?) {
-			this.$emit('done', { canceled, result });
-			this.$refs.modal.close();
-		},
-
-		async ok() {
-			if (!this.showOkButton) return;
-
-			const result = this.inputValue;
-			this.done(false, result);
-		},
-
-		cancel() {
-			this.done(true);
-		},
-
-		onBgClick() {
-			if (this.cancelableByBgClick) {
-				this.cancel();
-			}
-		},
-
-		onKeydown(evt: KeyboardEvent) {
-			if (evt.key === 'Escape' || evt.key === 'Esc') {
-				this.cancel();
-			}
-		},
-
-		onInputKeydown(evt: KeyboardEvent) {
-			if (evt.key === 'Enter') {
-				if (evt.ctrlKey) {
-					evt.preventDefault();
-					evt.stopPropagation();
-					this.ok();
-				}
-			}
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	flex-direction: row;
-	overflow: scroll;
-	position: fixed;
-	left: 0;
-	top: 0;
-}
-@media (max-width: 850px) {
-	.container {
-		flex-direction: column;
-	}
-	.top-caption {
-		padding-bottom: 8px;
-	}
-}
-.fullwidth {
-	width: 100%;
-	margin: auto;
-}
-.mk-dialog {
-	position: relative;
-	padding: 32px;
-	min-width: 320px;
-	max-width: 480px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-	margin: auto;
-
-	> header {
-		margin: 0 0 8px 0;
-		position: relative;
-
-		> .title {
-			font-weight: bold;
-			font-size: 20px;
-		}
-
-		> .text-count {
-			position: absolute;
-			right: 0;
-			white-space: nowrap;
-			opacity: 0.7;
-		}
-	}
-
-	> .buttons {
-		margin-top: 16px;
-
-		> * {
-			margin: 0 8px;
-		}
-	}
-
-	> textarea {
-		display: block;
-		box-sizing: border-box;
-		padding: 0 24px;
-		margin: 0;
-		width: 100%;
-		font-size: 16px;
-		border: none;
-		border-radius: 0;
-		background: transparent;
-		color: var(--fg);
-		font-family: inherit;
-		max-width: 100%;
-		min-width: 100%;
-		min-height: 90px;
-
-		&:focus-visible {
-			outline: none;
-		}
-
-		&:disabled {
-			opacity: 0.5;
-		}
-	}
-}
-.hdrwpsaf {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> header,
-	> footer {
-		align-self: center;
-		display: inline-block;
-		padding: 6px 9px;
-		font-size: 90%;
-		background: rgba(0, 0, 0, 0.5);
-		border-radius: 6px;
-		color: #fff;
-	}
-
-	> header {
-		margin-bottom: 8px;
-		opacity: 0.9;
-	}
-
-	> img {
-		display: block;
-		flex: 1;
-		min-height: 0;
-		object-fit: contain;
-		width: 100%;
-		cursor: zoom-out;
-		image-orientation: from-image;
-	}
-
-	> footer {
-		margin-top: 8px;
-		opacity: 0.8;
-
-		> span + span {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
-			border-left: solid 1px rgba(255, 255, 255, 0.5);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 0da30b9eb7e9..ffadef9c2161 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,6 +1,6 @@
 <template>
-<div v-show="files.length != 0" class="skeikyzd">
-	<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+<div v-show="props.modelValue.length != 0" class="skeikyzd">
+	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:model-value="v => emit('update:modelValue', v)">
 		<template #item="{element}">
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@@ -9,131 +9,108 @@
 				</div>
 			</div>
 		</template>
-	</XDraggable>
-	<p class="remain">{{ 16 - files.length }}/16</p>
+	</Sortable>
+	<div v-if="props.modelValue.length <= 16" class="remain">{{ 16 - props.modelValue.length }}/16</div>
+	<div v-else class="remain over">{{ 16 - props.modelValue.length }}</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { DriveFile } from 'misskey-js/built/entities';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
-import { disableContextmenu } from '@/scripts/touch';
 import { i18n } from '@/i18n';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 
-export default defineComponent({
-	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		MkDriveFileThumbnail,
-	},
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
-	props: {
-		files: {
-			type: Array,
-			required: true,
-		},
-		detachMediaFn: {
-			type: Function,
-			required: false,
-		},
-	},
-
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
-
-	data() {
-		return {
-			menu: null as Promise<null> | null,
-		};
-	},
-
-	computed: {
-		_files: {
-			get() {
-				return this.files;
-			},
-			set(value) {
-				this.$emit('updated', value);
-			},
-		},
-	},
-
-	methods: {
-		detachMedia(id) {
-			if (this.detachMediaFn) {
-				this.detachMediaFn(id);
-			} else {
-				this.$emit('detach', id);
-			}
-		},
-		toggleSensitive(file) {
-			os.api('drive/files/update', {
-				fileId: file.id,
-				isSensitive: !file.isSensitive,
-			}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
-			});
-		},
-		async rename(file) {
-			const { canceled, result } = await os.inputText({
-				title: i18n.ts.enterFileName,
-				default: file.name,
-				allowEmpty: false,
-			});
-			if (canceled) return;
+const props = defineProps<{
+	modelValue: DriveFile[];
+	detachMediaFn?: (id: string) => void;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: DriveFile[]): void;
+	(ev: 'detach', id: string): void;
+	(ev: 'changeSensitive', file: DriveFile, isSensitive: boolean): void;
+	(ev: 'changeName', file: DriveFile, changedName: string): void;
+}>();
+
+let menuShowing = false;
+
+const detachMedia = (id: string): void => {
+	if (props.detachMediaFn) {
+		props.detachMediaFn(id);
+	} else {
+		emit('detach', id);
+	}
+};
+
+const toggleSensitive = (file: DriveFile): void => {
+	os.api('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	}).then(() => {
+		emit('changeSensitive', file, !file.isSensitive);
+	});
+};
+
+const rename = async (file: DriveFile): Promise<void> => {
+	const { canceled, result: changedName } = await os.inputText({
+		title: i18n.ts.enterFileName,
+		default: file.name,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+	os.api('drive/files/update', {
+		fileId: file.id,
+		name: changedName,
+	}).then(() => {
+		emit('changeName', file, changedName);
+		file.name = changedName;
+	});
+};
+
+const describe = async (file: DriveFile): Promise<void> => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+		default: file.comment !== null ? file.comment : '',
+		file: file,
+	}, {
+		done: (caption: string) => {
+			const comment = caption.length === 0 ? null : caption;
 			os.api('drive/files/update', {
 				fileId: file.id,
-				name: result,
+				comment,
 			}).then(() => {
-				this.$emit('changeName', file, result);
-				file.name = result;
+				file.comment = comment;
 			});
 		},
-
-		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: i18n.ts.describeFile,
-				input: {
-					placeholder: i18n.ts.inputNewDescription,
-					default: file.comment !== null ? file.comment : '',
-				},
-				image: file,
-			}, {
-				done: result => {
-					if (!result || result.canceled) return;
-					let comment = result.result.length === 0 ? null : result.result;
-					os.api('drive/files/update', {
-						fileId: file.id,
-						comment: comment,
-					}).then(() => {
-						file.comment = comment;
-					});
-				},
-			}, 'closed');
-		},
-
-		showFileMenu(file, ev: MouseEvent) {
-			if (disableContextmenu && ev.type === 'contextmenu') return;
-			if (this.menu) return;
-			this.menu = os.popupMenu([{
-				text: i18n.ts.renameFile,
-				icon: 'ti ti-forms',
-				action: () => { this.rename(file); },
-			}, {
-				text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-				icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
-				action: () => { this.toggleSensitive(file); },
-			}, {
-				text: i18n.ts.describeFile,
-				icon: 'ti ti-forms',
-				action: () => { this.describe(file); },
-			}, {
-				text: i18n.ts.attachCancel,
-				icon: 'ti ti-circle-x',
-				action: () => { this.detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
-		},
-	},
-});
+	}, 'closed');
+};
+
+const showFileMenu = (file: DriveFile, ev: MouseEvent): void => {
+	if (menuShowing) return;
+	const el = getHtmlElementFromEvent(ev) ?? undefined;
+	os.popupMenu([{
+		text: i18n.ts.renameFile,
+		icon: 'ti ti-forms',
+		action: () => rename(file),
+	}, {
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+		icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
+		action: () => toggleSensitive(file),
+	}, {
+		text: i18n.ts.describeFile,
+		icon: 'ti ti-text-caption',
+		action: () => describe(file),
+	}, {
+		text: i18n.ts.attachCancel,
+		icon: 'ti ti-circle-x',
+		action: () => detachMedia(file.id),
+	}], el).then(() => menuShowing = false);
+	menuShowing = true;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -191,5 +168,22 @@ export default defineComponent({
 		margin: 0;
 		padding: 0;
 	}
+
+	> .remain {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 4px 8px;
+		font-size: 0.9em;
+		color: var(--fg);
+		min-width: 1.6em;
+		pointer-events: none;
+		white-space: nowrap;
+		opacity: 0.8;
+
+		&.over {
+			color: var(--error);
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 3988e7a23943..158face253e3 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -84,7 +84,7 @@
 		</div>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="[$style.input, $style.hashtags]" :placeholder="i18n.ts.hashtags" list="hashtags">
 	</div>
-	<MkPostFormAttaches :files="files" @updated="updateFiles" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+	<MkPostFormAttaches v-model="files" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
 	<footer :class="$style.footer">
@@ -546,10 +546,6 @@ const detachFile = (id: string): void => {
 	files = files.filter(x => x.id !== id);
 };
 
-const updateFiles = (_files: Misskey.entities.DriveFile[]): void => {
-	files = _files;
-};
-
 const updateFileSensitive = (file: Misskey.entities.DriveFile, sensitive: boolean): void => {
 	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 };

From 701af88161a4ec66364524ccdc59d70b1902aa3b Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 20 Apr 2023 03:37:03 +0900
Subject: [PATCH 104/147] refactor: use slice/substring

---
 .../client/src/components/MkDrive.file.vue    | 12 +++++++--
 .../client/src/components/MkUrlPreview.vue    |  2 +-
 .../client/src/components/MkUserPreview.vue   |  2 +-
 .../client/src/components/global/MkUrl.vue    |  2 +-
 packages/client/src/components/global/i18n.ts |  4 +--
 packages/client/src/scripts/autocomplete.ts   | 26 +++++++++----------
 .../client/src/scripts/gen-search-query.ts    |  2 +-
 packages/client/src/scripts/search.ts         |  2 +-
 packages/client/src/scripts/theme-editor.ts   |  2 +-
 packages/client/src/scripts/theme.ts          |  4 +--
 10 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 702240eaf35a..8e8d74dacbb6 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -25,8 +25,8 @@
 	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 
 	<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+		<span>{{ fileName }}</span>
+		<span v-if="fileExt" class="ext">{{ fileExt }}</span>
 	</p>
 </div>
 </template>
@@ -62,6 +62,14 @@ const emit = defineEmits<{
 const isDragging = ref(false);
 
 const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
+const fileName = computed<string>(() => {
+	const lio = props.file.name.lastIndexOf('.');
+	return lio !== -1 ? props.file.name.substring(0, lio) : props.file.name;
+});
+const fileExt = computed<string | null>(() => {
+	const lio = props.file.name.lastIndexOf('.');
+	return lio !== -1 ? props.file.name.substring(lio) : null;
+});
 
 const getMenu = (): MenuItem[] => {
 	return [{
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index c6a5cfe33c76..4643ed8f80f3 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -38,7 +38,7 @@
 	</div>
 </div>
 <div v-else v-size="{ max: [400, 350] }" :class="$style.urlPreview">
-	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
+	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 		<div v-if="thumbnail" :class="$style.thumbnail" :style="`background-image: url('${thumbnail}')`">
 		</div>
 		<article :class="$style.body">
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 4198fe0030eb..29ff940f2ee4 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -66,7 +66,7 @@ onMounted(() => {
 		user = props.q;
 	} else {
 		const query = props.q.startsWith('@') ?
-			Acct.parse(props.q.substr(1)) :
+			Acct.parse(props.q.slice(1)) :
 			{ userId: props.q };
 
 		os.api('users/show', query).then(res => {
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index be547983ed36..8d448506412a 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -1,7 +1,7 @@
 <template>
 <MkA v-if="props.url.startsWith(local)" ref="selfEl" :class="$style.root" class="ieqqeuvs _link" :to="props.url.substring(local.length)" :rel="rel" @contextmenu.stop="() => {}">
 	<span v-if="pathname === '/'" :class="$style.self" class="self">{{ hostname }}</span>
-	<span v-if="pathname" :class="$style.pathname" class="pathname">{{ pathname.substring(1) }}</span>
+	<span v-if="pathname" :class="$style.pathname" class="pathname">{{ pathname.slice(1) }}</span>
 	<span v-if="query" :class="$style.query" class="query">{{ query }}</span>
 	<span v-if="hash" :class="$style.hash" class="hash">{{ hash }}</span>
 </MkA>
diff --git a/packages/client/src/components/global/i18n.ts b/packages/client/src/components/global/i18n.ts
index 1fd293ba1075..ee8201b97cb1 100644
--- a/packages/client/src/components/global/i18n.ts
+++ b/packages/client/src/components/global/i18n.ts
@@ -28,13 +28,13 @@ export default defineComponent({
 				parsed.push(str);
 				break;
 			} else {
-				if (nextBracketOpen > 0) parsed.push(str.substr(0, nextBracketOpen));
+				if (nextBracketOpen > 0) parsed.push(str.substring(0, nextBracketOpen));
 				parsed.push({
 					arg: str.substring(nextBracketOpen + 1, nextBracketClose),
 				});
 			}
 
-			str = str.substr(nextBracketClose + 1);
+			str = str.substring(nextBracketClose + 1);
 		}
 
 		return h(this.tag, parsed.map(x => typeof x === 'string' ? (this.textTag ? h(this.textTag, x) : x) : this.$slots[x.arg]()));
diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index 206724de9e84..3523a06f6db4 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -61,7 +61,7 @@ export class Autocomplete {
 	 */
 	private onInput() {
 		const caretPos = this.textarea.selectionStart;
-		const text = this.text.substr(0, caretPos).split('\n').pop()!;
+		const text = this.text.substring(0, caretPos).split('\n').pop()!;
 
 		const mentionIndex = text.lastIndexOf('@');
 		const hashtagIndex = text.lastIndexOf('#');
@@ -87,7 +87,7 @@ export class Autocomplete {
 		let opened = false;
 
 		if (isMention) {
-			const username = text.substr(mentionIndex + 1);
+			const username = text.substring(mentionIndex + 1);
 			if (username !== '' && username.match(/^[a-zA-Z0-9_]+$/)) {
 				this.open('user', username);
 				opened = true;
@@ -98,7 +98,7 @@ export class Autocomplete {
 		}
 
 		if (isHashtag && !opened) {
-			const hashtag = text.substr(hashtagIndex + 1);
+			const hashtag = text.substring(hashtagIndex + 1);
 			if (!hashtag.includes(' ')) {
 				this.open('hashtag', hashtag);
 				opened = true;
@@ -106,7 +106,7 @@ export class Autocomplete {
 		}
 
 		if (isEmoji && !opened) {
-			const emoji = text.substr(emojiIndex + 1);
+			const emoji = text.substring(emojiIndex + 1);
 			if (!emoji.includes(' ')) {
 				this.open('emoji', emoji);
 				opened = true;
@@ -114,7 +114,7 @@ export class Autocomplete {
 		}
 
 		if (isMfmTag && !opened) {
-			const mfmTag = text.substr(mfmTagIndex + 1);
+			const mfmTag = text.substring(mfmTagIndex + 1);
 			if (!mfmTag.includes(' ')) {
 				this.open('mfmTag', mfmTag.replace('[', ''));
 				opened = true;
@@ -204,9 +204,9 @@ export class Autocomplete {
 		if (type === 'user') {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf('@'));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			const acct = value.host === null ? value.username : `${value.username}@${toASCII(value.host)}`;
 
@@ -222,9 +222,9 @@ export class Autocomplete {
 		} else if (type === 'hashtag') {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf('#'));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			// 挿入
 			this.text = `${trimmedBefore}#${value} ${after}`;
@@ -238,9 +238,9 @@ export class Autocomplete {
 		} else if (type === 'emoji') {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf(':'));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			// 挿入
 			this.text = trimmedBefore + value + after;
@@ -254,9 +254,9 @@ export class Autocomplete {
 		} else if (type === 'mfmTag') {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf('$'));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			// 挿入
 			this.text = `${trimmedBefore}$[${value} ]${after}`;
diff --git a/packages/client/src/scripts/gen-search-query.ts b/packages/client/src/scripts/gen-search-query.ts
index b413cbbab197..529a3b2ee1ac 100644
--- a/packages/client/src/scripts/gen-search-query.ts
+++ b/packages/client/src/scripts/gen-search-query.ts
@@ -5,7 +5,7 @@ export async function genSearchQuery(v: any, q: string) {
 	let host: string;
 	let userId: string;
 	if (q.split(' ').some(x => x.startsWith('@'))) {
-		for (const at of q.split(' ').filter(x => x.startsWith('@')).map(x => x.substr(1))) {
+		for (const at of q.split(' ').filter(x => x.startsWith('@')).map(x => x.slice(1))) {
 			if (at.includes('.')) {
 				if (at === localHost || at === '.') {
 					host = null;
diff --git a/packages/client/src/scripts/search.ts b/packages/client/src/scripts/search.ts
index 69f1586b77c7..5e5eefd057f9 100644
--- a/packages/client/src/scripts/search.ts
+++ b/packages/client/src/scripts/search.ts
@@ -16,7 +16,7 @@ export async function search() {
 	}
 
 	if (q.startsWith('#')) {
-		mainRouter.push(`/tags/${encodeURIComponent(q.substr(1))}`);
+		mainRouter.push(`/tags/${encodeURIComponent(q.slice(1))}`);
 		return;
 	}
 
diff --git a/packages/client/src/scripts/theme-editor.ts b/packages/client/src/scripts/theme-editor.ts
index 2c917e280d78..c602e3c469af 100644
--- a/packages/client/src/scripts/theme-editor.ts
+++ b/packages/client/src/scripts/theme-editor.ts
@@ -35,7 +35,7 @@ export const fromThemeString = (str?: string) : ThemeValue => {
 	} else if (str.startsWith('"')) {
 		return {
 			type: 'css',
-			value: str.substr(1).trim(),
+			value: str.slice(1).trim(),
 		};
 	} else {
 		return str;
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index 185537f61e86..996577db632a 100644
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@@ -96,7 +96,7 @@ function compile(theme: Theme): Record<string, string> {
 	function getColor(val: string): tinycolor.Instance {
 		// ref (prop)
 		if (val[0] === '@') {
-			return getColor(theme.props[val.substr(1)]);
+			return getColor(theme.props[val.slice(1)]);
 		}
 
 		// ref (const)
@@ -107,7 +107,7 @@ function compile(theme: Theme): Record<string, string> {
 		// func
 		else if (val[0] === ':') {
 			const parts = val.split('<');
-			const func = parts.shift().substr(1);
+			const func = parts.shift().slice(1);
 			const arg = parseFloat(parts.shift());
 			const color = getColor(parts.join('<'));
 

From 5fd87b18487a23da6f36b6f10038d7b323a3cb63 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 21 Apr 2023 22:17:25 +0900
Subject: [PATCH 105/147] =?UTF-8?q?enhance(frontend):=20=E5=85=AC=E9=96=8B?=
 =?UTF-8?q?=E7=AF=84=E5=9B=B2=E3=81=AE=E5=BC=95=E3=81=8D=E7=B6=99=E3=81=8E?=
 =?UTF-8?q?=E3=82=92=E5=BC=B7=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkVisibilityPicker.vue     | 10 ++-
 .../src/components/TmsPostForm.core.vue       | 86 ++++++++++++-------
 .../client/src/scripts/tms/note-visibility.ts | 79 +++++++++++++++++
 packages/client/src/scripts/tms/utils.ts      | 11 +++
 4 files changed, 150 insertions(+), 36 deletions(-)
 create mode 100644 packages/client/src/scripts/tms/note-visibility.ts

diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index b78b81b615b8..9cfa984a0fa3 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -4,28 +4,28 @@
 		<div :class="[$style.label, $style.item]">
 			{{ i18n.ts.visibility }}
 		</div>
-		<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
+		<button key="public" :disabled="disabledVisibilities.includes('public')" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
 			<div :class="$style.icon"><i class="ti ti-world"></i></div>
 			<div :class="$style.body">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
-		<button key="home" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
+		<button key="home" :disabled="disabledVisibilities.includes('home')" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
 			<div :class="$style.icon"><i class="ti ti-home"></i></div>
 			<div :class="$style.body">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
-		<button key="followers" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
+		<button key="followers" :disabled="disabledVisibilities.includes('followers')" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
 			<div :class="$style.icon"><i class="ti ti-lock"></i></div>
 			<div :class="$style.body">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
-		<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
+		<button key="specified" :disabled="disabledVisibilities.includes('specified') || localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
 			<div :class="$style.icon"><i class="ti ti-mail"></i></div>
 			<div :class="$style.body">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
@@ -59,8 +59,10 @@ const props = withDefaults(defineProps<{
 	currentVisibility: typeof misskey.noteVisibilities[number];
 	currentLocalOnly: boolean;
 	src?: HTMLElement;
+	disabledVisibilities?: typeof misskey.noteVisibilities[number][];
 }>(), {
 	src: undefined,
+	disabledVisibilities: () => [],
 });
 
 const emit = defineEmits<{
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 158face253e3..440f19eb30da 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -128,6 +128,7 @@ import { parseObject, parseArray } from '@/scripts/tms/parse';
 import * as Draft from '@/scripts/tms/drafts';
 import { imanonashi } from '@/scripts/tms/imanonashi';
 import { textCounter } from '@/scripts/tms/text-counter';
+import { migrateNoteVisibility as _migrateNoteVisibility } from '@/scripts/tms/note-visibility';
 import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
 import MkInfo from '@/components/MkInfo.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
@@ -215,17 +216,19 @@ const renote = $ref<Misskey.entities.Note | null>(props.renote);
 const channel = $ref<Misskey.entities.Channel | null>(props.channel);
 
 let quote = $ref<Misskey.entities.Note | null>(null);
-const setQuote = (quoteId?: string | null): void => {
+const setQuote = async (quoteId?: string | null): Promise<void> => {
 	if (!quoteId || renote) {
 		quote = null;
 		return;
 	}
 
-	fetchingWrapper(
+	await fetchingWrapper(
 		os.api('notes/show', { noteId: quoteId }, token)
 			.then(_quote => quote = _quote)
 			.catch(() => quote = null),
 	);
+
+	migrateNoteVisibility();
 };
 
 let withHashtags = $ref<boolean>(defaultStore.state.postFormWithHashtags);
@@ -602,46 +605,64 @@ if (text === '') {
 }
 
 // 公開範囲の引き継ぎ
-if (reply) {
-	if (reply.visibility !== 'specified') {
+let disabledVisibilities = $ref([] as Misskey.entities.Note['visibility'][]);
+const migrateNoteVisibility = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	const parseNoteVis = (_note: Misskey.entities.Note | null): {
+		visibility: typeof Misskey.noteVisibilities[number];
+		localOnly: boolean;
+		visibleUserIds: string[];
+	} | null => _note ? {
+		visibility: _note.visibility,
+		localOnly: !!_note.localOnly,
+		visibleUserIds: _note.visibleUserIds ?? [],
+	} : null;
+
+	const migrated = _migrateNoteVisibility({
+		note: {
+			visibility,
+			localOnly,
+			visibleUserIds: visibleUsers.map(({ id }) => id),
+		},
+		reply: parseNoteVis(reply),
+		renote: parseNoteVis(renote || quote),
+	});
+
+	visibility = migrated.visibility;
+	localOnly = migrated.localOnly;
+	disabledVisibilities = migrated.disabledVisibilities;
+
+	if (visibility !== 'specified') {
 		visibleUsers = [];
+	}
 
-		if (visibility === 'public' && reply.visibility === 'home') {
-			visibility = 'home';
-		}
-		if (visibility === 'home' && reply.visibility === 'followers') {
-			visibility = 'followers';
-		}
+	if (migrated.visibleUserIds.length !== 0) {
+		const visibleUserIds = migrated.visibleUserIds.filter(id => id !== $i?.id && id !== reply?.userId && !visibleUsers.some(x => id === x.id));
+		fetchingWrapper(
+			os.api('users/show', { userIds: visibleUserIds }, token)
+				.then(users => {
+					users.forEach(user => {
+						pushVisibleUser(user);
+					});
+				}),
+		);
 	} else {
-		visibility = 'specified';
-		localOnly = false;
-
-		const visibleUserIds = reply.visibleUserIds?.filter(uid => uid !== $i?.id && uid !== reply?.userId) ?? [];
-		if (visibleUserIds.length === 0) {
-			visibleUsers = [];
-		} else {
-			fetchingWrapper(
-				os.api('users/show', { userIds: visibleUserIds }, token)
-					.then(users => {
-						users.forEach(user => {
-							pushVisibleUser(user);
-						});
-					}),
-			);
-		}
+		visibleUsers = [];
 	}
-}
+};
+
+migrateNoteVisibility();
 
 if (props.specified) {
 	visibility = 'specified';
 	pushVisibleUser(props.specified);
 }
 
-if (channel) {
-	visibility = 'public';
-	localOnly = true;
-}
-
 if (defaultStore.state.keepCw && reply && reply.cw) {
 	useCw = true;
 	cw = reply.cw;
@@ -817,6 +838,7 @@ const openVisibilityPicker = (): void => {
 		currentVisibility: visibility,
 		currentLocalOnly: localOnly,
 		src: visibilityButton,
+		disabledVisibilities,
 	}, {
 		changeVisibility: (v: typeof visibility) => {
 			visibility = v;
diff --git a/packages/client/src/scripts/tms/note-visibility.ts b/packages/client/src/scripts/tms/note-visibility.ts
new file mode 100644
index 000000000000..1afb8b279797
--- /dev/null
+++ b/packages/client/src/scripts/tms/note-visibility.ts
@@ -0,0 +1,79 @@
+import { noteVisibilities } from 'misskey-js';
+import { deepClone } from '@/scripts/clone';
+import { arrayAt } from '@/scripts/tms/utils';
+
+type Note<T = typeof noteVisibilities[number]> = {
+	visibility: T;
+	localOnly: boolean;
+	visibleUserIds: string[];
+};
+
+const getDisabledVisibilities = (vis: Note['visibility']): Note['visibility'][] => {
+	const visibilities = ['public', 'home', 'followers', 'specified'] as const;
+	const index = visibilities.indexOf(vis);
+	if (index === -1) throw new Error(`Invalid visibility: ${vis}`);
+	return visibilities.slice(0, index);
+};
+
+const isPublic = (v: Note): v is Note<'public'> => v.visibility === 'public';
+const isHome = (v: Note): v is Note<'home'> => v.visibility === 'home';
+const isFollowers = (v: Note): v is Note<'followers'> => v.visibility === 'followers';
+const isSpecified = (v: Note): v is Note<'specified'> => v.visibility === 'specified';
+
+export const migrateNoteVisibility = (props: {
+	note: Note;
+	reply?: Note | null;
+	renote?: Note | null;
+}): Note & {
+	disabledVisibilities: Note['visibility'][];
+} => {
+	const { note, reply, renote } = deepClone(props);
+	const order: Note[] = [note, reply, renote].flatMap(x => x ? [x] : []);
+
+	if (order.length <= 1) {
+		const orderNote = arrayAt(order, 0);
+		if (orderNote) return {
+			...orderNote,
+			disabledVisibilities: getDisabledVisibilities(orderNote.visibility),
+		};
+		throw new Error();
+	}
+
+	if (order.every(isPublic)) {
+		return {
+			visibility: 'public',
+			localOnly: order.some(x => x.localOnly === true),
+			visibleUserIds: [],
+			disabledVisibilities: getDisabledVisibilities('public'),
+		};
+	}
+
+	if (order.some(isSpecified)) {
+		return {
+			visibility: 'specified',
+			localOnly: false,
+			visibleUserIds: [...new Set<string>(order.flatMap(({ visibleUserIds }) => visibleUserIds))],
+			disabledVisibilities: getDisabledVisibilities('specified'),
+		};
+	}
+
+	if (order.some(isFollowers)) {
+		return {
+			visibility: 'followers',
+			localOnly: order.some(x => x.localOnly === true),
+			visibleUserIds: [],
+			disabledVisibilities: getDisabledVisibilities('followers'),
+		};
+	}
+
+	if (order.some(isHome)) {
+		return {
+			visibility: 'home',
+			localOnly: order.some(x => x.localOnly === true),
+			visibleUserIds: [],
+			disabledVisibilities: getDisabledVisibilities('home'),
+		};
+	}
+
+	throw new Error();
+};
diff --git a/packages/client/src/scripts/tms/utils.ts b/packages/client/src/scripts/tms/utils.ts
index 81be59b2acd2..39961583bcf3 100644
--- a/packages/client/src/scripts/tms/utils.ts
+++ b/packages/client/src/scripts/tms/utils.ts
@@ -42,3 +42,14 @@ export const typedValues = <T extends Record<string, unknown>>(obj: T): TypedVal
 export const typedEntries = <T extends Record<string, unknown>>(obj: T): TypedEntries<T> => {
 	return Object.entries(obj) as unknown as TypedEntries<T>;
 };
+
+// Array<T>.prototype.at(index: number): T | undefined;
+export const arrayAt = <T>(array: T[], index: number): T | undefined => {
+	if (typeof Array.prototype.at === 'function') {
+		return array.at(index);
+	} else {
+		const intIndex = Math.trunc(+index) || 0;
+		const absIndex = intIndex >= 0 ? intIndex : array.length + intIndex;
+		return (absIndex < 0 || absIndex >= array.length) ? undefined : array[absIndex];
+	}
+};

From 056c80a92a384c5ff3a36821884bfd894ef3529a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 21 Apr 2023 22:36:48 +0900
Subject: [PATCH 106/147] fix

---
 .../client/src/components/TmsPostForm.core.vue    | 15 +++++++++++++--
 packages/client/src/scripts/tms/drafts.ts         |  7 +++++--
 .../client/src/scripts/tms/note-visibility.ts     |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 440f19eb30da..1bbc82da69ef 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -364,6 +364,7 @@ const saveDraft = (): void => {
 		renoteId: renote?.id ?? null,
 		channelId: channel?.id ?? null,
 		quoteId: quote?.id ?? null,
+		visibleUserIds: visibleUsers.map(({ id }) => id),
 	}, isEdit);
 };
 
@@ -463,7 +464,7 @@ onMounted(() => {
 		nextTick(focus);
 	}
 
-	nextTick(() => {
+	nextTick(async () => {
 		if (!props.instant && !props.fixed) {
 			const _draft = draft ?? Draft.getDraft(draftId);
 			if (_draft) {
@@ -474,7 +475,17 @@ onMounted(() => {
 				localOnly = _draft.data.localOnly;
 				files = _draft.data.files;
 				poll = _draft.data.poll;
-				setQuote(_draft.data.quoteId);
+				if (_draft.data.visibleUserIds.length) {
+					await fetchingWrapper(
+						os.api('users/show', { userIds: _draft.data.visibleUserIds }, token)
+							.then(users => {
+								users.forEach(user => {
+									pushVisibleUser(user);
+								});
+							}),
+					);
+				}
+				await setQuote(_draft.data.quoteId);
 			}
 		}
 
diff --git a/packages/client/src/scripts/tms/drafts.ts b/packages/client/src/scripts/tms/drafts.ts
index dd6e9987e8e3..4237cb6383a7 100644
--- a/packages/client/src/scripts/tms/drafts.ts
+++ b/packages/client/src/scripts/tms/drafts.ts
@@ -19,6 +19,7 @@ type DraftData = {
 	renoteId: string | null;
 	channelId: string | null;
 	quoteId: string | null;
+	visibleUserIds: string[];
 };
 
 type LsDraft = {
@@ -130,7 +131,7 @@ const loadLsDrafts = (): Record<string, LsDraft | undefined> => parseObject<Reco
 const saveLsDrafts = (drafts: Record<string, LsDraft | undefined>): void => localStorage.setItem(LS_DRAFTS_KEY, JSON.stringify(drafts));
 
 const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
-	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId } = lsDraft;
+	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId, visibleUserIds } = lsDraft;
 
 	const draftData: DraftData = {
 		text: text ?? '',
@@ -144,6 +145,7 @@ const restoreDraftData = (lsDraft: Partial<DraftData>): DraftData => {
 		renoteId: renoteId ?? null,
 		channelId: channelId ?? null,
 		quoteId: quoteId ?? null,
+		visibleUserIds: visibleUserIds ?? [],
 	};
 
 	if (draftData.channelId) {
@@ -212,7 +214,7 @@ export const getDraft = (draftId: string | null): Draft | null => {
 export const setDraft = (draftId: string | null, data: DraftData, force = false): Draft | null => {
 	if (!draftId) return null;
 
-	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId } = data;
+	const { text, useCw, cw, visibility, localOnly, files, poll, replyId, renoteId, channelId, quoteId, visibleUserIds } = data;
 
 	const draftData: LsDraft['data'] = {
 		text: text || undefined,
@@ -226,6 +228,7 @@ export const setDraft = (draftId: string | null, data: DraftData, force = false)
 		renoteId: renoteId ?? undefined,
 		channelId: channelId ?? undefined,
 		quoteId: quoteId ?? undefined,
+		visibleUserIds: visibleUserIds.length ? visibleUserIds : undefined,
 	};
 
 	if (draftData.channelId) {
diff --git a/packages/client/src/scripts/tms/note-visibility.ts b/packages/client/src/scripts/tms/note-visibility.ts
index 1afb8b279797..34ffcba24c44 100644
--- a/packages/client/src/scripts/tms/note-visibility.ts
+++ b/packages/client/src/scripts/tms/note-visibility.ts
@@ -34,7 +34,7 @@ export const migrateNoteVisibility = (props: {
 		const orderNote = arrayAt(order, 0);
 		if (orderNote) return {
 			...orderNote,
-			disabledVisibilities: getDisabledVisibilities(orderNote.visibility),
+			disabledVisibilities: [],
 		};
 		throw new Error();
 	}

From 0a0cd26a43ccaf399328e70c348b7b5b352adcb5 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 21 Apr 2023 22:43:51 +0900
Subject: [PATCH 107/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 1bbc82da69ef..b7ea8ff1a161 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -379,9 +379,12 @@ const watchForDraft = (): void => {
 		$$(cw),
 		$$(visibility),
 		$$(localOnly),
+	], saveDraft, { deep: false });
+	watch([
 		$$(files),
 		$$(poll),
 		$$(quote),
+		$$(visibleUsers),
 	], saveDraft, { deep: true });
 };
 //#endregion

From 9bbe42280a1d453713ffcbfce8f401ba4d8dd660 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 21 Apr 2023 23:14:02 +0900
Subject: [PATCH 108/147] fix types

---
 packages/client/package.json                  |  1 +
 .../src/components/TmsPostForm.core.vue       | 12 +++++-----
 .../client/src/components/TmsPostForm.vue     |  1 +
 pnpm-lock.yaml                                | 22 ++++++++++++++-----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 7bf20afd43d6..1f638229f993 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -70,6 +70,7 @@
 		"@types/glob": "8.1.0",
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
+		"@types/insert-text-at-cursor": "^0.3.0",
 		"@types/katex": "0.16.0",
 		"@types/matter-js": "0.18.2",
 		"@types/punycode": "2.1.0",
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index b7ea8ff1a161..b4b311d60c7d 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -105,7 +105,6 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, inject, watch, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as Acct from 'misskey-js/built/acct';
 import * as mfm from 'mfm-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode/';
@@ -527,9 +526,10 @@ const addVisibleUser = (): void => {
 	fetchingWrapper(
 		os.selectUser().then(user => {
 			pushVisibleUser(user);
-
-			if (!text.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
-				text = `@${Acct.toString(user)} ${text}`;
+			
+			const mention = parseMention(user);
+			if (!text.toLowerCase().includes(mention)) {
+				text = `${mention} ${text}`;
 			}
 		}),
 	);
@@ -793,7 +793,7 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 				text: i18n.ts.quoteQuestion,
 			}).then(({ canceled }) => {
 				if (canceled) {
-					insertTextAtCursor(textareaEl, paste);
+					if (textareaEl) insertTextAtCursor(textareaEl, paste);
 					return;
 				}
 
@@ -978,7 +978,7 @@ const toggleUseCw = (): void => {
 const insertMention = (): void => {
 	fetchingWrapper(
 		os.selectUser().then(user => {
-			insertTextAtCursor(textareaEl, `@${Acct.toString(user)} `);
+			if (textareaEl) insertTextAtCursor(textareaEl, `${parseMention(user)} `);
 		}),
 	);
 };
diff --git a/packages/client/src/components/TmsPostForm.vue b/packages/client/src/components/TmsPostForm.vue
index 56541ce88a53..e2813e711aa3 100644
--- a/packages/client/src/components/TmsPostForm.vue
+++ b/packages/client/src/components/TmsPostForm.vue
@@ -139,6 +139,7 @@ onMounted(() => {
 			renoteId: init.renote?.id ?? null,
 			channelId: init.channel?.id ?? null,
 			quoteId: null,
+			visibleUserIds: init.visibleUserIds ?? [],
 		}, true);
 	}
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9ec97cdf356..385c99c7308e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -331,7 +331,7 @@ importers:
         version: 2.1.0
       summaly:
         specifier: github:misskey-dev/summaly
-        version: github.com/misskey-dev/summaly/1bab7afee616429b8bbf7a7cbcbb8ebcef66d992
+        version: github.com/misskey-dev/summaly/c7d71a9ec2467268b3911dc2ac805c2b8a898d3e
       syslog-pro:
         specifier: 1.0.0
         version: 1.0.0
@@ -740,6 +740,9 @@ importers:
       '@types/gulp-rename':
         specifier: 2.0.1
         version: 2.0.1
+      '@types/insert-text-at-cursor':
+        specifier: ^0.3.0
+        version: 0.3.0
       '@types/katex':
         specifier: 0.16.0
         version: 0.16.0
@@ -793,7 +796,7 @@ importers:
         version: 1.15.4
       summaly:
         specifier: github:misskey-dev/summaly
-        version: github.com/misskey-dev/summaly/1bab7afee616429b8bbf7a7cbcbb8ebcef66d992
+        version: github.com/misskey-dev/summaly/c7d71a9ec2467268b3911dc2ac805c2b8a898d3e
 
   packages/sw:
     dependencies:
@@ -2119,6 +2122,7 @@ packages:
   /@swc/cli@0.1.62(@swc/core@1.3.36)(chokidar@3.5.3):
     resolution: {integrity: sha512-kOFLjKY3XH1DWLfXL1/B5MizeNorHR8wHKEi92S/Zi9Md/AK17KSqR8MgyRJ6C1fhKHvbBCl8wboyKAFXStkYw==}
     engines: {node: '>= 12.13'}
+    hasBin: true
     peerDependencies:
       '@swc/core': ^1.2.66
       chokidar: ^3.5.1
@@ -2661,6 +2665,10 @@ packages:
   /@types/http-errors@2.0.1:
     resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==}
 
+  /@types/insert-text-at-cursor@0.3.0:
+    resolution: {integrity: sha512-58a+1l6hz5DQ25NjODvZEYmJUWA1ALbUxcf/GHjMfh92r41lZkI6buNN0NwxIvJQDkTFNqL73G2Fduu5ctHVhA==}
+    dev: true
+
   /@types/js-yaml@4.0.5:
     resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
     dev: true
@@ -12274,6 +12282,7 @@ packages:
 
   /ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.14.1)(typescript@4.9.5):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
     peerDependencies:
       '@swc/core': '>=1.2.50'
       '@swc/wasm': '>=1.2.50'
@@ -12432,6 +12441,7 @@ packages:
   /typeorm@0.3.12(ioredis@5.3.1)(pg@8.9.0)(ts-node@10.9.1):
     resolution: {integrity: sha512-sYSxBmCf1nJLLTcYtwqZ+lQIRtLPyUoO93rHTOKk9vJCyT4UfRtU7oRsJvfvKP3nnZTD1hzz2SEy2zwPEN6OyA==}
     engines: {node: '>= 12.9.0'}
+    hasBin: true
     peerDependencies:
       '@google-cloud/spanner': ^5.18.0
       '@sap/hana-client': ^2.12.25
@@ -12658,6 +12668,7 @@ packages:
 
   /update-browserslist-db@1.0.10(browserslist@4.21.5):
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
+    hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
@@ -12839,6 +12850,7 @@ packages:
   /vite@4.1.4(sass@1.58.3):
     resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==}
     engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
     peerDependencies:
       '@types/node': '>= 14'
       less: '*'
@@ -13395,10 +13407,10 @@ packages:
     version: 2.2.1-misskey.3
     dev: false
 
-  github.com/misskey-dev/summaly/1bab7afee616429b8bbf7a7cbcbb8ebcef66d992:
-    resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/1bab7afee616429b8bbf7a7cbcbb8ebcef66d992}
+  github.com/misskey-dev/summaly/c7d71a9ec2467268b3911dc2ac805c2b8a898d3e:
+    resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/c7d71a9ec2467268b3911dc2ac805c2b8a898d3e}
     name: summaly
-    version: 4.0.1
+    version: 4.0.2
     dependencies:
       cheerio: 1.0.0-rc.12
       escape-regexp: 0.0.1

From e9e40bd4795115793587fc82ad6c4c16c7ad52ae Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 22 Apr 2023 00:44:39 +0900
Subject: [PATCH 109/147] fix types

---
 packages/client/package.json |  2 ++
 pnpm-lock.yaml               | 14 ++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/client/package.json b/packages/client/package.json
index 1f638229f993..699823b6e797 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -66,6 +66,7 @@
 		"vuedraggable": "4.1.0"
 	},
 	"devDependencies": {
+		"@types/autosize": "^4.0.1",
 		"@types/escape-regexp": "0.0.1",
 		"@types/glob": "8.1.0",
 		"@types/gulp": "4.0.10",
@@ -75,6 +76,7 @@
 		"@types/matter-js": "0.18.2",
 		"@types/punycode": "2.1.0",
 		"@types/seedrandom": "3.0.5",
+		"@types/textarea-caret": "^3.0.1",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "9.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 385c99c7308e..eda52908a534 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -728,6 +728,9 @@ importers:
         specifier: 4.1.0
         version: 4.1.0(vue@3.2.47)
     devDependencies:
+      '@types/autosize':
+        specifier: ^4.0.1
+        version: 4.0.1
       '@types/escape-regexp':
         specifier: 0.0.1
         version: 0.0.1
@@ -755,6 +758,9 @@ importers:
       '@types/seedrandom':
         specifier: 3.0.5
         version: 3.0.5
+      '@types/textarea-caret':
+        specifier: ^3.0.1
+        version: 3.0.1
       '@types/throttle-debounce':
         specifier: 5.0.0
         version: 5.0.0
@@ -2538,6 +2544,10 @@ packages:
     dependencies:
       '@types/node': 18.14.1
 
+  /@types/autosize@4.0.1:
+    resolution: {integrity: sha512-iPJT/FCaSO79G6j+9n6gmFc5nhxZ1gDrA2UAvb5FslJ6FJQZnDfbBU0qp5vpp0Cbjj7+gOyjuWZ7RrXvRuETaA==}
+    dev: true
+
   /@types/bcryptjs@2.4.2:
     resolution: {integrity: sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==}
     dev: true
@@ -2926,6 +2936,10 @@ packages:
       '@types/node': 18.14.1
     dev: true
 
+  /@types/textarea-caret@3.0.1:
+    resolution: {integrity: sha512-JjrXYzk4t6dM/5nz1hHkZXmd3xSdJM6mOIDSBUrpg4xThwKNryiu4CqHx81LwUJHxEEoQWHTu4fMV4em+c5bXg==}
+    dev: true
+
   /@types/throttle-debounce@5.0.0:
     resolution: {integrity: sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw==}
     dev: true

From 62318e44d94a0bd8e872adf663f6db65bf07ce17 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sat, 22 Apr 2023 22:45:00 +0900
Subject: [PATCH 110/147] tweak

---
 packages/client/src/components/TmsPostForm.core.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index b4b311d60c7d..6218f074b82d 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -467,7 +467,7 @@ onMounted(() => {
 	}
 
 	nextTick(async () => {
-		if (!props.instant && !props.fixed) {
+		if (!props.instant && !props.mention && !props.specified) {
 			const _draft = draft ?? Draft.getDraft(draftId);
 			if (_draft) {
 				text = _draft.data.text;
@@ -1262,6 +1262,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 	pointer-events: none;
 	white-space: nowrap;
 	opacity: 0.8;
+	font-variant: tabular-nums;
 
 	&.textOver {
 		color: var(--error);

From 988643c424cc97c0193e494a801c1a736b77c2a6 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 01:00:01 +0900
Subject: [PATCH 111/147] refactor: MkPagination

---
 .../client/src/components/MkPagination.vue    | 80 +++++++++----------
 1 file changed, 38 insertions(+), 42 deletions(-)

diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 9673d633406f..52718ab61495 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -1,10 +1,10 @@
 <template>
 <Transition
-	mode="out-in"
 	:enter-active-class="defaultStore.state.animation ? $style.transition_fade_enterActive : ''"
 	:leave-active-class="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''"
 	:enter-from-class="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''"
 	:leave-to-class="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''"
+	mode="out-in"
 >
 	<MkLoading v-if="fetching"/>
 
@@ -66,7 +66,7 @@ import { i18n } from '@/i18n';
 
 export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
 	endpoint: E;
-	limit: number;
+	limit?: number;
 	params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
 
 	/**
@@ -100,7 +100,7 @@ const emit = defineEmits<{
 	(ev: 'queue', count: number): void;
 }>();
 
-let rootEl = $shallowRef<HTMLElement>();
+const rootEl = $shallowRef<HTMLElement>();
 
 // 遡り中かどうか
 let backed = $ref(false);
@@ -126,9 +126,7 @@ const more = ref(false);
 const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
-const {
-	enableInfiniteScroll,
-} = defaultStore.reactiveState;
+const { enableInfiniteScroll } = defaultStore.reactiveState;
 
 const contentEl = $computed(() => props.pagination.pageEl ?? rootEl);
 const scrollableElement = $computed(() => getScrollContainer(contentEl ?? null));
@@ -173,27 +171,37 @@ watch([$$(backed), $$(contentEl)], () => {
 	}
 });
 
-const init = async (): Promise<void> => {
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(queue, (a, b) => {
+	if (a.length === 0 && b.length === 0) return;
+	emit('queue', queue.value.length);
+}, { deep: true });
+
+async function init(): Promise<void> {
 	queue.value = [];
 	fetching.value = true;
-	const params = unref(props.pagination.params);
+	const params = props.pagination.params ? unref(props.pagination.params) : {};
 	await os.api(props.pagination.endpoint, {
 		...params,
-		limit: props.pagination.noPaging ? (props.pagination.limit || 10) : (props.pagination.limit || 10) + 1,
-	}).then(res => {
+		limit: props.pagination.limit ?? 10,
+	}).then((res: MisskeyEntity[]) => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
 			if (i === 3) item._shouldInsertAd_ = true;
 		}
-		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
-			res.pop();
-			if (props.pagination.reversed) moreFetching.value = true;
+
+		if (res.length === 0 || props.pagination.noPaging) {
 			items.value = res;
-			more.value = true;
+			more.value = false;
 		} else {
+			if (props.pagination.reversed) moreFetching.value = true;
 			items.value = res;
-			more.value = false;
+			more.value = true;
 		}
+
 		offset.value = res.length;
 		error.value = false;
 		fetching.value = false;
@@ -201,17 +209,8 @@ const init = async (): Promise<void> => {
 		error.value = true;
 		fetching.value = false;
 	});
-};
-
-if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
 }
 
-watch(queue, (a, b) => {
-	if (a.length === 0 && b.length === 0) return;
-	emit('queue', queue.value.length);
-}, { deep: true });
-
 const reload = (): Promise<void> => {
 	items.value = [];
 	return init();
@@ -220,22 +219,22 @@ const reload = (): Promise<void> => {
 const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
 	moreFetching.value = true;
-	const params = unref(props.pagination.params);
+	const params = props.pagination.params ? unref(props.pagination.params) : {};
 	await os.api(props.pagination.endpoint, {
 		...params,
-		limit: SECOND_FETCH_LIMIT + 1,
+		limit: SECOND_FETCH_LIMIT,
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
 		} : {
 			untilId: items.value[items.value.length - 1].id,
 		}),
-	}).then(res => {
+	}).then((res: MisskeyEntity[]) => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
 			if (i === 10) item._shouldInsertAd_ = true;
 		}
 
-		const reverseConcat = (_res): Promise<void> => {
+		const reverseConcat = (_res: MisskeyEntity[]): Promise<void> => {
 			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
 			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
 
@@ -252,28 +251,26 @@ const fetchMore = async (): Promise<void> => {
 			});
 		};
 
-		if (res.length > SECOND_FETCH_LIMIT) {
-			res.pop();
-
+		if (res.length === 0) {
 			if (props.pagination.reversed) {
 				reverseConcat(res).then(() => {
-					more.value = true;
+					more.value = false;
 					moreFetching.value = false;
 				});
 			} else {
 				items.value = items.value.concat(res);
-				more.value = true;
+				more.value = false;
 				moreFetching.value = false;
 			}
 		} else {
 			if (props.pagination.reversed) {
 				reverseConcat(res).then(() => {
-					more.value = false;
+					more.value = true;
 					moreFetching.value = false;
 				});
 			} else {
 				items.value = items.value.concat(res);
-				more.value = false;
+				more.value = true;
 				moreFetching.value = false;
 			}
 		}
@@ -286,23 +283,22 @@ const fetchMore = async (): Promise<void> => {
 const fetchMoreAhead = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
 	moreFetching.value = true;
-	const params = unref(props.pagination.params);
+	const params = props.pagination.params ? unref(props.pagination.params) : {};
 	await os.api(props.pagination.endpoint, {
 		...params,
-		limit: SECOND_FETCH_LIMIT + 1,
+		limit: SECOND_FETCH_LIMIT,
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
 		} : {
 			sinceId: items.value[items.value.length - 1].id,
 		}),
-	}).then(res => {
-		if (res.length > SECOND_FETCH_LIMIT) {
-			res.pop();
+	}).then((res: MisskeyEntity[]) => {
+		if (res.length === 0) {
 			items.value = items.value.concat(res);
-			more.value = true;
+			more.value = false;
 		} else {
 			items.value = items.value.concat(res);
-			more.value = false;
+			more.value = true;
 		}
 		offset.value += res.length;
 		moreFetching.value = false;

From 62e8f9d2021bb921374f316e58d62ac0421090f8 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 01:57:50 +0900
Subject: [PATCH 112/147] test(client/vite): generateScopedName

---
 packages/client/vite.config.ts | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index bd049d2f7b71..3c3f27186ced 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import * as fs from 'fs';
 import pluginVue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
@@ -8,6 +9,37 @@ import pluginJson5 from './vite.json5';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
+// const hash = (str: string, seed = 0): number => {
+// 	let h1 = 0xdeadbeef ^ seed;
+// 	let h2 = 0x41c6ce57 ^ seed;
+
+// 	for (let i = 0; i < str.length; i++) {
+// 		const ch = str.charCodeAt(i);
+// 		h1 = Math.imul(h1 ^ ch, 2654435761);
+// 		h2 = Math.imul(h2 ^ ch, 1597334677);
+// 	}
+
+// 	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+// 	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+
+// 	return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+// };
+
+// const toBase62 = (n: number): string => {
+// 	if (n === 0) return '0';
+
+// 	const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+// 	let result = '';
+
+// 	while (n > 0) {
+// 		result = chars[n % 62] + result;
+// 		// eslint-disable-next-line no-param-reassign
+// 		n = Math.floor(n / 62);
+// 	}
+
+// 	return result;
+// };
+
 export default defineConfig(({ command, mode }) => {
 	fs.mkdirSync(__dirname + '/../../built', { recursive: true });
 	fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
@@ -31,6 +63,20 @@ export default defineConfig(({ command, mode }) => {
 			},
 		},
 
+		css: {
+			modules: {
+				generateScopedName(name, filename, _css): string {
+					const id = `${path.relative(__dirname, filename.split('?')[0])}-${name}`.replace(/[\\\/\.\?&=]/g, '-').replace(/(src-|vue-)/g, '');
+					// if (process.env.NODE_ENV === 'production') {
+					// 	return `x${toBase62(hash(id)).substring(0, 4)}`;
+					// } else {
+					// 	return id;
+					// }
+					return id;
+				},
+			},
+		},
+
 		define: {
 			_VERSION_: JSON.stringify(meta.version),
 			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),

From 1574e43762b65565d07057c9c031452fdee8d9e8 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 03:12:49 +0900
Subject: [PATCH 113/147] tweak(client/vite): generateScopedName

---
 packages/client/vite.config.ts | 70 +++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 3c3f27186ced..efff66cd2f7d 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -9,36 +9,43 @@ import pluginJson5 from './vite.json5';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
-// const hash = (str: string, seed = 0): number => {
-// 	let h1 = 0xdeadbeef ^ seed;
-// 	let h2 = 0x41c6ce57 ^ seed;
+const pathToIdentifier = (_path: string): string => _path.replace(/[\\\/\.\?&=]/g, '-');
 
-// 	for (let i = 0; i < str.length; i++) {
-// 		const ch = str.charCodeAt(i);
-// 		h1 = Math.imul(h1 ^ ch, 2654435761);
-// 		h2 = Math.imul(h2 ^ ch, 1597334677);
-// 	}
+const kebabize = (str: string): string => {
+	return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (m1: string, m2: unknown) => `${m2 ? '-' : ''}${m1.toLowerCase()}`);
+};
 
-// 	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-// 	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+const hash = (str: string, seed = 0): number => {
+	let h1 = 0xdeadbeef ^ seed;
+	let h2 = 0x41c6ce57 ^ seed;
 
-// 	return 4294967296 * (2097151 & h2) + (h1 >>> 0);
-// };
+	for (let i = 0; i < str.length; i++) {
+		const ch = str.charCodeAt(i);
+		h1 = Math.imul(h1 ^ ch, 2654435761);
+		h2 = Math.imul(h2 ^ ch, 1597334677);
+	}
 
-// const toBase62 = (n: number): string => {
-// 	if (n === 0) return '0';
+	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
 
-// 	const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
-// 	let result = '';
+	return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+};
 
-// 	while (n > 0) {
-// 		result = chars[n % 62] + result;
-// 		// eslint-disable-next-line no-param-reassign
-// 		n = Math.floor(n / 62);
-// 	}
+const toBase62 = (n: number): string => {
+	if (n === 0) return '0';
+
+	const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+	let result = '';
+
+	while (n > 0) {
+		result = chars[n % 62] + result;
+		// eslint-disable-next-line no-param-reassign
+		n = Math.floor(n / 62);
+	}
+
+	return result;
+};
 
-// 	return result;
-// };
 
 export default defineConfig(({ command, mode }) => {
 	fs.mkdirSync(__dirname + '/../../built', { recursive: true });
@@ -65,14 +72,15 @@ export default defineConfig(({ command, mode }) => {
 
 		css: {
 			modules: {
-				generateScopedName(name, filename, _css): string {
-					const id = `${path.relative(__dirname, filename.split('?')[0])}-${name}`.replace(/[\\\/\.\?&=]/g, '-').replace(/(src-|vue-)/g, '');
-					// if (process.env.NODE_ENV === 'production') {
-					// 	return `x${toBase62(hash(id)).substring(0, 4)}`;
-					// } else {
-					// 	return id;
-					// }
-					return id;
+				generateScopedName(name, _filename, _css): string {
+					const dir = path.relative(__dirname, _filename.split('?')[0]).replace(/^(src|vue)\//, '');
+
+					const componentsPath = 'components/';
+					if (dir.startsWith(componentsPath)) {
+						return `_${name}_${kebabize(pathToIdentifier(dir.slice(componentsPath.length)))}`;
+					}
+
+					return `_${name}__${toBase62(hash(pathToIdentifier(`${dir}-${name}`))).substring(0, 5)}`;
 				},
 			},
 		},

From cd12f9095d75d6fdcdb82c9505f1b9e1dbd920aa Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 03:47:18 +0900
Subject: [PATCH 114/147] tweak

---
 packages/client/vite.config.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index efff66cd2f7d..4108f0fef68a 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -11,10 +11,6 @@ const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.s
 
 const pathToIdentifier = (_path: string): string => _path.replace(/[\\\/\.\?&=]/g, '-');
 
-const kebabize = (str: string): string => {
-	return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (m1: string, m2: unknown) => `${m2 ? '-' : ''}${m1.toLowerCase()}`);
-};
-
 const hash = (str: string, seed = 0): number => {
 	let h1 = 0xdeadbeef ^ seed;
 	let h2 = 0x41c6ce57 ^ seed;
@@ -46,7 +42,6 @@ const toBase62 = (n: number): string => {
 	return result;
 };
 
-
 export default defineConfig(({ command, mode }) => {
 	fs.mkdirSync(__dirname + '/../../built', { recursive: true });
 	fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
@@ -73,14 +68,17 @@ export default defineConfig(({ command, mode }) => {
 		css: {
 			modules: {
 				generateScopedName(name, _filename, _css): string {
-					const dir = path.relative(__dirname, _filename.split('?')[0]).replace(/^(src|vue)\//, '');
+					const _path = path.relative(__dirname, _filename.split('?')[0]).replace(/^src\//, '');
+					const dir = path.dirname(_path);
+					const { name: filename } = path.parse(_path);
 
 					const componentsPath = 'components/';
 					if (dir.startsWith(componentsPath)) {
-						return `_${name}_${kebabize(pathToIdentifier(dir.slice(componentsPath.length)))}`;
+						const id = pathToIdentifier(`${dir.slice(componentsPath.length)}/${filename}`);
+						return `_${name}_${id}`;
 					}
 
-					return `_${name}__${toBase62(hash(pathToIdentifier(`${dir}-${name}`))).substring(0, 5)}`;
+					return `_${name}__${toBase62(hash(pathToIdentifier(`${dir}/${filename}`))).substring(0, 5)}`;
 				},
 			},
 		},

From 268f47763eb6c5b42debda473e7681c697bcda01 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 04:04:21 +0900
Subject: [PATCH 115/147] fix

---
 packages/client/vite.config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 4108f0fef68a..3ecb5f008819 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -69,16 +69,16 @@ export default defineConfig(({ command, mode }) => {
 			modules: {
 				generateScopedName(name, _filename, _css): string {
 					const _path = path.relative(__dirname, _filename.split('?')[0]).replace(/^src\//, '');
-					const dir = path.dirname(_path);
+					const dir = `${path.dirname(_path)}/`;
 					const { name: filename } = path.parse(_path);
 
 					const componentsPath = 'components/';
 					if (dir.startsWith(componentsPath)) {
-						const id = pathToIdentifier(`${dir.slice(componentsPath.length)}/${filename}`);
+						const id = pathToIdentifier(`${dir.slice(componentsPath.length)}${filename}`);
 						return `_${name}_${id}`;
 					}
 
-					return `_${name}__${toBase62(hash(pathToIdentifier(`${dir}/${filename}`))).substring(0, 5)}`;
+					return `_${name}__${toBase62(hash(pathToIdentifier(`${dir}${filename}`))).substring(0, 5)}`;
 				},
 			},
 		},

From a6a67af1eafe84f55660c9aee12cc9db55fa53b9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 04:25:04 +0900
Subject: [PATCH 116/147] tweak

---
 packages/client/vite.config.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 3ecb5f008819..399b5323894f 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -69,16 +69,15 @@ export default defineConfig(({ command, mode }) => {
 			modules: {
 				generateScopedName(name, _filename, _css): string {
 					const _path = path.relative(__dirname, _filename.split('?')[0]).replace(/^src\//, '');
-					const dir = `${path.dirname(_path)}/`;
-					const { name: filename } = path.parse(_path);
+					const filename = `${path.dirname(_path).replaceAll(path.sep, '/')}/${path.parse(_path).name}`;
 
 					const componentsPath = 'components/';
-					if (dir.startsWith(componentsPath)) {
-						const id = pathToIdentifier(`${dir.slice(componentsPath.length)}${filename}`);
+					if (filename.startsWith(componentsPath)) {
+						const id = pathToIdentifier(filename.slice(componentsPath.length));
 						return `_${name}_${id}`;
 					}
 
-					return `_${name}__${toBase62(hash(pathToIdentifier(`${dir}${filename}`))).substring(0, 5)}`;
+					return `_${name}__${toBase62(hash(pathToIdentifier(filename))).substring(0, 5)}`;
 				},
 			},
 		},

From 73386faa87f18a6350ffee0d179126482392a1ad Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 04:41:45 +0900
Subject: [PATCH 117/147] =?UTF-8?q?test(frontend/MkPagination):=20?=
 =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E7=B3=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkPagination.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 52718ab61495..535dd6e97bbf 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -293,6 +293,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 			sinceId: items.value[items.value.length - 1].id,
 		}),
 	}).then((res: MisskeyEntity[]) => {
+		if (contentEl && isTop()) scroll(contentEl, { top: 1 });
 		if (res.length === 0) {
 			items.value = items.value.concat(res);
 			more.value = false;
@@ -303,6 +304,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 		offset.value += res.length;
 		moreFetching.value = false;
 	}, () => {
+		if (contentEl && isTop()) scroll(contentEl, { top: 1 });
 		moreFetching.value = false;
 	});
 };

From c47464a27d1dc04b12d6a7a5d3e3c5cc14329737 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 04:59:12 +0900
Subject: [PATCH 118/147] tweak

---
 packages/client/src/components/MkPagination.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 535dd6e97bbf..8dbbbbb5a672 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -21,9 +21,10 @@
 
 	<div v-else ref="rootEl">
 		<div v-show="pagination.reversed && more" key="_more_ahead_" class="_gap" :class="$style.loadMore">
+			<!-- 自動で読み込み続けてしまうので一旦削除 -->
+			<!-- v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMoreAhead : null" -->
 			<MkButton
 				v-if="!moreFetching"
-				v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMoreAhead : null"
 				:disabled="moreFetching"
 				:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
 				primary
@@ -293,7 +294,6 @@ const fetchMoreAhead = async (): Promise<void> => {
 			sinceId: items.value[items.value.length - 1].id,
 		}),
 	}).then((res: MisskeyEntity[]) => {
-		if (contentEl && isTop()) scroll(contentEl, { top: 1 });
 		if (res.length === 0) {
 			items.value = items.value.concat(res);
 			more.value = false;
@@ -304,7 +304,6 @@ const fetchMoreAhead = async (): Promise<void> => {
 		offset.value += res.length;
 		moreFetching.value = false;
 	}, () => {
-		if (contentEl && isTop()) scroll(contentEl, { top: 1 });
 		moreFetching.value = false;
 	});
 };

From 8515874b701ce26282bbd21bd09fbca983f18f8c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 05:43:26 +0900
Subject: [PATCH 119/147] enhance(frontend/MkWindow): upgrade MkWindow

---
 packages/client/src/components/MkWindow.vue | 558 +++++++++++---------
 packages/client/src/directives/container.ts |  22 +
 2 files changed, 336 insertions(+), 244 deletions(-)
 create mode 100644 packages/client/src/directives/container.ts

diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 42639691ad04..fe62b7a81cad 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -1,37 +1,50 @@
 <template>
-<Transition :name="defaultStore.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
-	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
-		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
-			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
-				<span class="left">
-					<button v-for="button in buttonsLeft" :key="button.title" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
+<Transition
+	:enter-active-class="defaultStore.state.animation ? $style.transition_window_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_window_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_window_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_window_leaveTo : ''"
+	appear
+	@after-leave="emit('closed')"
+>
+	<div v-if="showing" ref="rootEl" :class="[$style.root, { [$style.maximized]: maximized }]">
+		<div :class="$style.body" class="_shadow" @mousedown="onBodyMousedown" @keydown="onKeydown">
+			<div :class="[$style.header, { [$style.mini]: mini }]" @contextmenu.prevent.stop="onContextmenu">
+				<span :class="$style.headerLeft">
+					<template v-if="!minimized">
+						<button v-for="button in buttonsLeft" :key="button.title" v-tooltip="button.title" class="_button" :class="[$style.headerButton, { [$style.highlighted]: button.highlighted }]" @click="button.onClick"><i :class="button.icon"></i></button>
+					</template>
 				</span>
-				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
+				<span :class="$style.headerTitle" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
 					<slot name="header"></slot>
 				</span>
-				<span class="right">
-					<button v-for="button in buttonsRight" :key="button.title" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button>
-					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-rectangle"></i></button>
-					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
+				<span :class="$style.headerRight">
+					<template v-if="!minimized">
+						<button v-for="button in buttonsRight" :key="button.title" v-tooltip="button.title" class="_button" :class="[$style.headerButton, { [$style.highlighted]: button.highlighted }]" @click="button.onClick"><i :class="button.icon"></i></button>
+					</template>
+					<button v-if="canResize && minimized" v-tooltip="i18n.ts.windowRestore" class="_button" :class="$style.headerButton" @click="unMinimize()"><i class="ti ti-maximize"></i></button>
+					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMinimize" class="_button" :class="$style.headerButton" @click="minimize()"><i class="ti ti-minimize"></i></button>
+					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="_button" :class="$style.headerButton" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button>
+					<button v-else-if="canResize && !maximized && !minimized" v-tooltip="i18n.ts.windowMaximize" class="_button" :class="$style.headerButton" @click="maximize()"><i class="ti ti-rectangle"></i></button>
+					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
-			<div class="body">
+			<div v-container :class="$style.content">
 				<slot></slot>
 			</div>
 		</div>
-		<template v-if="canResize">
-			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
-			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
-			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
-			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
-			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
-			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
-			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
-			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		<template v-if="canResize && !minimized">
+			<div :class="$style.handleTop" @mousedown.prevent="onTopHandleMousedown"></div>
+			<div :class="$style.handleRight" @mousedown.prevent="onRightHandleMousedown"></div>
+			<div :class="$style.handleBottom" @mousedown.prevent="onBottomHandleMousedown"></div>
+			<div :class="$style.handleLeft" @mousedown.prevent="onLeftHandleMousedown"></div>
+			<div :class="$style.handleTopLeft" @mousedown.prevent="onTopLeftHandleMousedown"></div>
+			<div :class="$style.handleTopRight" @mousedown.prevent="onTopRightHandleMousedown"></div>
+			<div :class="$style.handleBottomRight" @mousedown.prevent="onBottomRightHandleMousedown"></div>
+			<div :class="$style.handleBottomLeft" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
 		</template>
 	</div>
-</transition>
+</Transition>
 </template>
 
 <script lang="ts" setup>
@@ -40,31 +53,30 @@ import contains from '@/scripts/contains';
 import * as os from '@/os';
 import { MenuItem } from '@/types/menu';
 import { i18n } from '@/i18n';
-import { disableContextmenu } from '@/scripts/touch';
 import { defaultStore } from '@/store';
 
 const minHeight = 50;
 const minWidth = 250;
 
-function dragListen(fn: (ev: MouseEvent) => void) {
+const dragListen = (fn: (ev: MouseEvent | TouchEvent) => void): void => {
 	window.addEventListener('mousemove', fn);
 	window.addEventListener('touchmove', fn);
 	window.addEventListener('mouseleave', dragClear.bind(null, fn));
 	window.addEventListener('mouseup', dragClear.bind(null, fn));
 	window.addEventListener('touchend', dragClear.bind(null, fn));
-}
+};
 
-function dragClear(fn) {
+const dragClear = (fn): void => {
 	window.removeEventListener('mousemove', fn);
 	window.removeEventListener('touchmove', fn);
 	window.removeEventListener('mouseleave', dragClear);
 	window.removeEventListener('mouseup', dragClear);
 	window.removeEventListener('touchend', dragClear);
-}
+};
 
 const props = withDefaults(defineProps<{
-	initialWidth?: number;
-	initialHeight?: number | null;
+	initialWidth: number;
+	initialHeight: number | null;
 	canResize?: boolean;
 	closeButton?: boolean;
 	mini?: boolean;
@@ -90,72 +102,105 @@ 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);
-let unMaximizedTop = '';
-let unMaximizedLeft = '';
-let unMaximizedWidth = '';
-let unMaximizedHeight = '';
+let minimized = $ref(false);
+let unResizedTop = '';
+let unResizedLeft = '';
+let unResizedWidth = '';
+let unResizedHeight = '';
 
-function close() {
+const close = (): void => {
 	showing = false;
-}
+};
 
-function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape' || evt.key === 'Esc') {
+const onKeydown = (evt): void => {
+	if (evt.which === 27) { // Esc
 		evt.preventDefault();
 		evt.stopPropagation();
 		close();
 	}
-}
+};
 
-function onContextmenu(ev: MouseEvent) {
-	if (disableContextmenu) return;
+const onContextmenu = (ev: MouseEvent): void => {
 	if (props.contextmenu) {
 		os.contextMenu(props.contextmenu, ev);
 	}
-}
+};
 
 // 最前面へ移動
-function top() {
-	if (rootEl) {
-		rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
-	}
-}
+const toTop = (): void => {
+	if (!rootEl) return;
+	rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low').toString();
+};
 
-function maximize() {
+const maximize = (): void => {
+	if (!rootEl) return;
 	maximized = true;
-	unMaximizedTop = rootEl.style.top;
-	unMaximizedLeft = rootEl.style.left;
-	unMaximizedWidth = rootEl.style.width;
-	unMaximizedHeight = rootEl.style.height;
+	unResizedTop = rootEl.style.top;
+	unResizedLeft = rootEl.style.left;
+	unResizedWidth = rootEl.style.width;
+	unResizedHeight = rootEl.style.height;
 	rootEl.style.top = '0';
 	rootEl.style.left = '0';
 	rootEl.style.width = '100%';
 	rootEl.style.height = '100%';
-}
+};
 
-function unMaximize() {
+const unMaximize = (): void => {
+	if (!rootEl) return;
 	maximized = false;
-	rootEl.style.top = unMaximizedTop;
-	rootEl.style.left = unMaximizedLeft;
-	rootEl.style.width = unMaximizedWidth;
-	rootEl.style.height = unMaximizedHeight;
-}
+	rootEl.style.top = unResizedTop;
+	rootEl.style.left = unResizedLeft;
+	rootEl.style.width = unResizedWidth;
+	rootEl.style.height = unResizedHeight;
+};
+
+const minimize = (): void => {
+	if (!rootEl) return;
+	minimized = true;
+	unResizedWidth = rootEl.style.width;
+	unResizedHeight = rootEl.style.height;
+	rootEl.style.width = minWidth + 'px';
+	rootEl.style.height = props.mini ? '32px' : '39px';
+};
+
+const unMinimize = (): void => {
+	if (!rootEl) return;
+	const main = rootEl;
+	minimized = false;
+	rootEl.style.width = unResizedWidth;
+	rootEl.style.height = unResizedHeight;
+	const browserWidth = window.innerWidth;
+	const browserHeight = window.innerHeight;
+	const windowWidth = main.offsetWidth;
+	const windowHeight = main.offsetHeight;
 
-function onBodyMousedown() {
-	top();
-}
+	const position = main.getBoundingClientRect();
+	if (position.top + windowHeight > browserHeight) main.style.top = `${browserHeight - windowHeight}px`;
+	if (position.left + windowWidth > browserWidth) main.style.left = `${browserWidth - windowWidth}px`;
+};
+
+const onBodyMousedown = (): void => {
+	toTop();
+};
+
+const onDblClick = (): void => {
+	if (minimized) {
+		unMinimize();
+	} else {
+		maximize();
+	}
+};
 
-function onDblClick() {
-	maximize();
-}
+const onHeaderMousedown = (evt: MouseEvent | TouchEvent): void => {
+	const isMouseEvent = evt instanceof MouseEvent;
+	const isTouchEvent = evt instanceof TouchEvent;
 
-function onHeaderMousedown(evt: MouseEvent) {
 	// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
-	if (evt.button === 2) return;
+	if (isMouseEvent && evt.button === 2) return;
 
 	let beforeMaximized = false;
 
@@ -180,16 +225,18 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 	const position = main.getBoundingClientRect();
 
-	const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
-	const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
-	const moveBaseX = beforeMaximized ? parseInt(unMaximizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
+	const clickX = isTouchEvent ? evt.touches[0].clientX : evt.clientX;
+	const clickY = isTouchEvent ? evt.touches[0].clientY : evt.clientY;
+	const moveBaseX = beforeMaximized ? parseInt(unResizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
 	const moveBaseY = beforeMaximized ? 20 : clickY - position.top;
 	const browserWidth = window.innerWidth;
 	const browserHeight = window.innerHeight;
 	const windowWidth = main.offsetWidth;
 	const windowHeight = main.offsetHeight;
 
-	function move(x: number, y: number) {
+	const move = (x: number, y: number): void => {
+		if (!rootEl) return;
+
 		let moveLeft = x - moveBaseX;
 		let moveTop = y - moveBaseY;
 
@@ -205,9 +252,9 @@ function onHeaderMousedown(evt: MouseEvent) {
 		// 右はみ出し
 		if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
 
-		rootEl.style.left = moveLeft + 'px';
-		rootEl.style.top = moveTop + 'px';
-	}
+		rootEl.style.left = `${moveLeft}px`;
+		rootEl.style.top = `${moveTop}px`;
+	};
 
 	if (beforeMaximized) {
 		move(clickX, clickY);
@@ -215,16 +262,18 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 	// 動かした時
 	dragListen(me => {
-		const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
-		const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
+		const x = me instanceof TouchEvent ? me.touches[0].clientX : me.clientX;
+		const y = me instanceof TouchEvent ? me.touches[0].clientY : me.clientY;
 
 		move(x, y);
 	});
-}
+};
 
 // 上ハンドル掴み時
-function onTopHandleMousedown(evt) {
+const onTopHandleMousedown = (evt: MouseEvent): void => {
 	const main = rootEl;
+	// どういうわけかnullになることがある
+	if (main == null) return;
 
 	const base = evt.clientY;
 	const height = parseInt(getComputedStyle(main, '').height, 10);
@@ -232,6 +281,7 @@ function onTopHandleMousedown(evt) {
 
 	// 動かした時
 	dragListen(me => {
+		if (!(me instanceof MouseEvent)) return;
 		const move = me.clientY - base;
 		if (top + move > 0) {
 			if (height + -move > minHeight) {
@@ -246,11 +296,12 @@ function onTopHandleMousedown(evt) {
 			applyTransformTop(0);
 		}
 	});
-}
+};
 
 // 右ハンドル掴み時
-function onRightHandleMousedown(evt) {
+const onRightHandleMousedown = (evt: MouseEvent): void => {
 	const main = rootEl;
+	if (main == null) return;
 
 	const base = evt.clientX;
 	const width = parseInt(getComputedStyle(main, '').width, 10);
@@ -259,6 +310,7 @@ function onRightHandleMousedown(evt) {
 
 	// 動かした時
 	dragListen(me => {
+		if (!(me instanceof MouseEvent)) return;
 		const move = me.clientX - base;
 		if (left + width + move < browserWidth) {
 			if (width + move > minWidth) {
@@ -270,11 +322,12 @@ function onRightHandleMousedown(evt) {
 			applyTransformWidth(browserWidth - left);
 		}
 	});
-}
+};
 
 // 下ハンドル掴み時
-function onBottomHandleMousedown(evt) {
+const onBottomHandleMousedown = (evt: MouseEvent): void => {
 	const main = rootEl;
+	if (main == null) return;
 
 	const base = evt.clientY;
 	const height = parseInt(getComputedStyle(main, '').height, 10);
@@ -283,6 +336,7 @@ function onBottomHandleMousedown(evt) {
 
 	// 動かした時
 	dragListen(me => {
+		if (!(me instanceof MouseEvent)) return;
 		const move = me.clientY - base;
 		if (top + height + move < browserHeight) {
 			if (height + move > minHeight) {
@@ -294,11 +348,12 @@ function onBottomHandleMousedown(evt) {
 			applyTransformHeight(browserHeight - top);
 		}
 	});
-}
+};
 
 // 左ハンドル掴み時
-function onLeftHandleMousedown(evt) {
+const onLeftHandleMousedown = (evt: MouseEvent): void => {
 	const main = rootEl;
+	if (main == null) return;
 
 	const base = evt.clientX;
 	const width = parseInt(getComputedStyle(main, '').width, 10);
@@ -306,6 +361,7 @@ function onLeftHandleMousedown(evt) {
 
 	// 動かした時
 	dragListen(me => {
+		if (!(me instanceof MouseEvent)) return;
 		const move = me.clientX - base;
 		if (left + move > 0) {
 			if (width + -move > minWidth) {
@@ -320,76 +376,82 @@ function onLeftHandleMousedown(evt) {
 			applyTransformLeft(0);
 		}
 	});
-}
+};
 
 // 左上ハンドル掴み時
-function onTopLeftHandleMousedown(evt) {
+const onTopLeftHandleMousedown = (evt: MouseEvent): void => {
 	onTopHandleMousedown(evt);
 	onLeftHandleMousedown(evt);
-}
+};
 
 // 右上ハンドル掴み時
-function onTopRightHandleMousedown(evt) {
+const onTopRightHandleMousedown = (evt: MouseEvent): void => {
 	onTopHandleMousedown(evt);
 	onRightHandleMousedown(evt);
-}
+};
 
 // 右下ハンドル掴み時
-function onBottomRightHandleMousedown(evt) {
+const onBottomRightHandleMousedown = (evt: MouseEvent): void => {
 	onBottomHandleMousedown(evt);
 	onRightHandleMousedown(evt);
-}
+};
 
 // 左下ハンドル掴み時
-function onBottomLeftHandleMousedown(evt) {
+const onBottomLeftHandleMousedown = (evt: MouseEvent): void => {
 	onBottomHandleMousedown(evt);
 	onLeftHandleMousedown(evt);
-}
+};
 
 // 高さを適用
-function applyTransformHeight(height) {
-	if (height > window.innerHeight) height = window.innerHeight;
-	rootEl.style.height = height + 'px';
-}
+const applyTransformHeight = (height: number): void => {
+	if (!rootEl) return;
+	rootEl.style.height = `${height > window.innerHeight ? window.innerHeight : height}px`;
+};
 
 // 幅を適用
-function applyTransformWidth(width) {
-	if (width > window.innerWidth) width = window.innerWidth;
-	rootEl.style.width = width + 'px';
-}
+const applyTransformWidth = (width: number): void => {
+	if (!rootEl) return;
+	rootEl.style.width = `${width > window.innerWidth ? window.innerWidth : width}px`;
+};
 
 // Y座標を適用
-function applyTransformTop(top) {
-	rootEl.style.top = top + 'px';
-}
+const applyTransformTop = (top: number): void => {
+	if (!rootEl) return;
+	rootEl.style.top = `${top}px`;
+};
 
 // X座標を適用
-function applyTransformLeft(left) {
-	rootEl.style.left = left + 'px';
-}
+const applyTransformLeft = (left: number): void => {
+	if (!rootEl) return;
+	rootEl.style.left = `${left}px`;
+};
 
-function onBrowserResize() {
+const onBrowserResize = (): void => {
 	const main = rootEl;
+	if (main == null) return;
+
 	const position = main.getBoundingClientRect();
 	const browserWidth = window.innerWidth;
 	const browserHeight = window.innerHeight;
 	const windowWidth = main.offsetWidth;
 	const windowHeight = main.offsetHeight;
 	if (position.left < 0) main.style.left = '0'; // 左はみ出し
-	if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
-	if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
+	if (position.top + windowHeight > browserHeight) main.style.top = `${browserHeight - windowHeight}px`; // 下はみ出し
+	if (position.left + windowWidth > browserWidth) main.style.left = `${browserWidth - windowWidth}px`; // 右はみ出し
 	if (position.top < 0) main.style.top = '0'; // 上はみ出し
-}
+};
 
 onMounted(() => {
-	if (props.initialWidth) applyTransformWidth(props.initialWidth);
+	if (!rootEl) return;
+
+	applyTransformWidth(props.initialWidth);
 	if (props.initialHeight) applyTransformHeight(props.initialHeight);
 
 	applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));
 	applyTransformLeft((window.innerWidth / 2) - (rootEl.offsetWidth / 2));
 
 	// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
-	top();
+	toTop();
 
 	window.addEventListener('resize', onBrowserResize);
 });
@@ -403,165 +465,173 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.window-enter-active, .window-leave-active {
+<style lang="scss" module>
+.transition_window_enterActive, .transition_window_leaveActive {
 	transition: opacity 0.2s, transform 0.2s !important;
 }
-.window-enter-from, .window-leave-to {
+
+.transition_window_enterFrom, .transition_window_leaveTo {
 	pointer-events: none;
 	opacity: 0;
 	transform: scale(0.9);
 }
 
-.ebkgocck {
+.root {
 	position: fixed;
 	top: 0;
 	left: 0;
 
-	> .body {
-		overflow: clip;
-		display: flex;
-		flex-direction: column;
-		contain: content;
-		width: 100%;
-		height: 100%;
-		border-radius: var(--radius);
+	&.maximized {
+		> .body {
+			border-radius: 0;
+		}
+	}
+}
 
-		> .header {
-			--height: 39px;
+.body {
+	overflow: clip;
+	display: flex;
+	flex-direction: column;
+	contain: content;
+	width: 100%;
+	height: 100%;
+	border-radius: var(--radius);
+}
 
-			&.mini {
-				--height: 32px;
-			}
+.header {
+	--height: 39px;
 
-			display: flex;
-			position: relative;
-			z-index: 1;
-			flex-shrink: 0;
-			user-select: none;
-			height: var(--height);
-			background: var(--windowHeader);
-			-webkit-backdrop-filter: var(--blur, blur(15px));
-			backdrop-filter: var(--blur, blur(15px));
-			//border-bottom: solid 1px var(--divider);
-			font-size: 95%;
-			font-weight: bold;
-
-			> .left, > .right {
-				> .button {
-					height: var(--height);
-					width: var(--height);
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					&.highlighted {
-						color: var(--accent);
-					}
-				}
-			}
+	&.mini {
+		--height: 32px;
+	}
 
-			> .left {
-				margin-right: 16px;
-			}
+	display: flex;
+	position: relative;
+	z-index: 1;
+	flex-shrink: 0;
+	user-select: none;
+	height: var(--height);
+	background: var(--windowHeader);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	//border-bottom: solid 1px var(--divider);
+	font-size: 90%;
+	font-weight: bold;
+}
 
-			> .right {
-				min-width: 16px;
-			}
+.headerButton {
+	height: var(--height);
+	width: var(--height);
 
-			> .title {
-				flex: 1;
-				position: relative;
-				line-height: var(--height);
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				cursor: move;
-			}
-		}
+	&:hover {
+		color: var(--fgHighlighted);
+	}
 
-		> .body {
-			flex: 1;
-			overflow: auto;
-			background: var(--panel);
-		}
+	&.highlighted {
+		color: var(--accent);
 	}
+}
 
-	> .handle {
-		$size: 8px;
+.headerLeft {
+	margin-right: 16px;
+}
 
-		position: absolute;
+.headerRight {
+	min-width: 16px;
+}
 
-		&.top {
-			top: -($size);
-			left: 0;
-			width: 100%;
-			height: $size;
-			cursor: ns-resize;
-		}
+.headerTitle {
+	flex: 1;
+	position: relative;
+	line-height: var(--height);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	cursor: move;
+}
 
-		&.right {
-			top: 0;
-			right: -($size);
-			width: $size;
-			height: 100%;
-			cursor: ew-resize;
-		}
+.content {
+	flex: 1;
+	overflow: auto;
+	background: var(--panel);
+	container-type: inline-size;
+}
 
-		&.bottom {
-			bottom: -($size);
-			left: 0;
-			width: 100%;
-			height: $size;
-			cursor: ns-resize;
-		}
+$handleSize: 8px;
 
-		&.left {
-			top: 0;
-			left: -($size);
-			width: $size;
-			height: 100%;
-			cursor: ew-resize;
-		}
+.handle {
+	position: absolute;
+}
 
-		&.top-left {
-			top: -($size);
-			left: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nwse-resize;
-		}
+.handleTop {
+	composes: handle;
+	top: -($handleSize);
+	left: 0;
+	width: 100%;
+	height: $handleSize;
+	cursor: ns-resize;
+}
 
-		&.top-right {
-			top: -($size);
-			right: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nesw-resize;
-		}
+.handleRight {
+	composes: handle;
+	top: 0;
+	right: -($handleSize);
+	width: $handleSize;
+	height: 100%;
+	cursor: ew-resize;
+}
 
-		&.bottom-right {
-			bottom: -($size);
-			right: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nwse-resize;
-		}
+.handleBottom {
+	composes: handle;
+	bottom: -($handleSize);
+	left: 0;
+	width: 100%;
+	height: $handleSize;
+	cursor: ns-resize;
+}
 
-		&.bottom-left {
-			bottom: -($size);
-			left: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nesw-resize;
-		}
-	}
+.handleLeft {
+	composes: handle;
+	top: 0;
+	left: -($handleSize);
+	width: $handleSize;
+	height: 100%;
+	cursor: ew-resize;
+}
 
-	&.maximized {
-		> .body {
-			border-radius: 0;
-		}
-	}
+.handleTopLeft {
+	composes: handle;
+	top: -($handleSize);
+	left: -($handleSize);
+	width: $handleSize * 2;
+	height: $handleSize * 2;
+	cursor: nwse-resize;
+}
+
+.handleTopRight {
+	composes: handle;
+	top: -($handleSize);
+	right: -($handleSize);
+	width: $handleSize * 2;
+	height: $handleSize * 2;
+	cursor: nesw-resize;
+}
+
+.handleBottomRight {
+	composes: handle;
+	bottom: -($handleSize);
+	right: -($handleSize);
+	width: $handleSize * 2;
+	height: $handleSize * 2;
+	cursor: nwse-resize;
+}
+
+.handleBottomLeft {
+	composes: handle;
+	bottom: -($handleSize);
+	left: -($handleSize);
+	width: $handleSize * 2;
+	height: $handleSize * 2;
+	cursor: nesw-resize;
 }
 </style>
diff --git a/packages/client/src/directives/container.ts b/packages/client/src/directives/container.ts
new file mode 100644
index 000000000000..28cc9f4be205
--- /dev/null
+++ b/packages/client/src/directives/container.ts
@@ -0,0 +1,22 @@
+import { Directive } from 'vue';
+
+const map = new WeakMap<HTMLElement, ResizeObserver>();
+
+// eslint-disable-next-line import/no-default-export
+export default {
+	mounted(el: HTMLElement) {
+		const ro = new ResizeObserver(() => {
+			el.style.setProperty('--containerHeight', `${el.offsetHeight}px`);
+		});
+		ro.observe(el);
+		map.set(el, ro);
+	},
+
+	unmounted(el: HTMLElement) {
+		const ro = map.get(el);
+		if (ro) {
+			ro.disconnect();
+			map.delete(el);
+		}
+	},
+} as Directive;

From 130830ed186d9e003bb048d5d811e816389e2db6 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 05:52:39 +0900
Subject: [PATCH 120/147] =?UTF-8?q?fix:=20=E3=82=A6=E3=82=A3=E3=83=B3?=
 =?UTF-8?q?=E3=83=89=E3=82=A6=E3=81=A7=E7=94=BB=E9=9D=A2=E3=81=8C=E3=82=AC?=
 =?UTF-8?q?=E3=82=BF=E3=82=AC=E3=82=BF=E3=81=97=E3=81=A6=E3=81=97=E3=81=BE?=
 =?UTF-8?q?=E3=81=86=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkWindow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index fe62b7a81cad..2e44ec99b394 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -552,7 +552,7 @@ defineExpose({
 
 .content {
 	flex: 1;
-	overflow: auto;
+	overflow: auto scroll; // overflow-yをautoにすると画面がガタガタすることがある
 	background: var(--panel);
 	container-type: inline-size;
 }

From bb0137274f7354c50b5a99fc10d5ec2ec21a259c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 06:34:51 +0900
Subject: [PATCH 121/147] refactor: $emit to emit

---
 .../client/src/components/MkContextMenu.vue   |  2 +-
 .../client/src/components/MkCropperDialog.vue |  2 +-
 .../client/src/components/MkFormDialog.vue    | 85 +++++++------------
 .../src/components/MkModalPageWindow.vue      | 49 ++++++-----
 .../client/src/components/MkModalWindow.vue   |  8 +-
 .../client/src/components/MkPageWindow.vue    |  4 +-
 .../client/src/components/MkSignupDialog.vue  |  2 +-
 .../src/components/MkTokenGenerateWindow.vue  |  2 +-
 packages/client/src/components/MkUpdated.vue  | 12 ++-
 .../src/components/MkUserSelectDialog.vue     |  2 +-
 packages/client/src/components/MkWidgets.vue  |  2 +-
 .../src/pages/admin/emoji-edit-dialog.vue     |  2 +-
 .../page-editor/els/page-editor.el.button.vue | 10 ++-
 .../page-editor/els/page-editor.el.canvas.vue |  8 +-
 .../els/page-editor.el.counter.vue            |  6 +-
 .../page-editor/els/page-editor.el.if.vue     | 12 ++-
 .../page-editor/els/page-editor.el.image.vue  | 10 ++-
 .../page-editor/els/page-editor.el.note.vue   |  6 +-
 .../els/page-editor.el.number-input.vue       |  6 +-
 .../page-editor/els/page-editor.el.post.vue   |  6 +-
 .../els/page-editor.el.radio-button.vue       |  6 +-
 .../els/page-editor.el.section.vue            | 26 +++---
 .../page-editor/els/page-editor.el.switch.vue |  6 +-
 .../els/page-editor.el.text-input.vue         |  6 +-
 .../page-editor/els/page-editor.el.text.vue   |  6 +-
 .../els/page-editor.el.textarea-input.vue     |  6 +-
 .../els/page-editor.el.textarea.vue           |  6 +-
 packages/client/src/router.ts                 |  2 +-
 28 files changed, 171 insertions(+), 129 deletions(-)

diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index f5f4e27aa4fb..9f61cad2b32d 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
 <Transition :name="defaultStore.state.animation ? 'fade' : ''" appear>
 	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
+		<MkMenu :items="items" :align="'left'" @close="emit('closed')"/>
 	</div>
 </Transition>
 </template>
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index e7910c9c107a..0d4749a8b255 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -7,7 +7,7 @@
 	:with-ok-button="true"
 	@close="cancel()"
 	@ok="ok()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.cropImage }}</template>
 	<template #default="{ width, height }">
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
index efff2a6aff1c..d4c3e05eeabb 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -8,7 +8,7 @@
 	@click="cancel()"
 	@ok="ok()"
 	@close="cancel()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>
 		{{ title }}
@@ -54,8 +54,8 @@
 </MkModalWindow>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkInput from './form/input.vue';
 import MkTextarea from './form/textarea.vue';
 import MkSwitch from './form/switch.vue';
@@ -66,62 +66,37 @@ import MkRadios from './form/radios.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		MkModalWindow,
-		MkInput,
-		MkTextarea,
-		MkSwitch,
-		MkSelect,
-		MkRange,
-		MkButton,
-		MkRadios,
-	},
+const props = defineProps<{
+	title: string;
+	form: Record<string, any>;
+}>();
 
-	props: {
-		title: {
-			type: String,
-			required: true,
-		},
-		form: {
-			type: Object,
-			required: true,
-		},
-	},
+const emit = defineEmits<{
+	(ev: 'done', r: { canceled: false; result: Record<string, any>; }): void;
+	(ev: 'done', r: { canceled: true; result: undefined; }): void;
+	(ev: 'closed'): void;
+}>();
 
-	emits: ['done', 'closed'],
+const dialog = $ref<InstanceType<typeof MkModalWindow>>();
 
-	data() {
-		return {
-			values: {},
-			i18n,
-		};
-	},
+const values = $ref<Record<string, any>>({});
 
-	created() {
-		for (const item in this.form) {
-			this.values[item] = this.form[item].default ?? null;
-		}
-	},
+for (const item in props.form) {
+	values[item] = props.form[item].default ?? null;
+}
 
-	methods: {
-		ok() {
-			const dialog = this.$refs.dialog as InstanceType<typeof MkModalWindow> | null | undefined;
-			this.$emit('done', {
-				canceled: false,
-				result: this.values,
-			});
-			dialog?.close();
-		},
+const ok = (): void => {
+	emit('done', {
+		canceled: false,
+		result: values,
+	});
+	dialog?.close();
+};
 
-		cancel() {
-			const dialog = this.$refs.dialog as InstanceType<typeof MkModalWindow> | null | undefined;
-			this.$emit('done', {
-				canceled: true,
-				result: undefined,
-			});
-			dialog?.close();
-		},
-	},
-});
+const cancel = (): void => {
+	emit('done', {
+		canceled: true,
+		result: undefined,
+	});
+};
 </script>
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 63235d98a7b2..4b114b60c5fe 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+<MkModal ref="modal" @click="emit('click')" @closed="emit('closed')">
 	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
 			<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
@@ -32,12 +32,13 @@ import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { disableContextmenu } from '@/scripts/touch';
 import { Router } from '@/nirax';
+import { MenuItem } from '@/types/menu';
 
 const props = defineProps<{
 	initialPath: string;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
 	(ev: 'closed'): void;
 	(ev: 'click'): void;
 }>();
@@ -48,12 +49,12 @@ router.addListener('push', ctx => {
 });
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let rootEl = $ref();
-let modal = $ref<InstanceType<typeof MkModal>>();
+const rootEl = $ref<HTMLElement>();
+const modal = $ref<InstanceType<typeof MkModal>>();
 let path = $ref(props.initialPath);
 let width = $ref(860);
 let height = $ref(660);
-const history = [];
+const history: string[] = [];
 
 provide('router', router);
 provideMetadataReceiver((info) => {
@@ -63,7 +64,7 @@ provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 
 const pageUrl = $computed(() => url + path);
-const contextmenu = $computed(() => {
+const contextmenu = $computed<MenuItem[]>(() => {
 	return [{
 		type: 'label',
 		text: path,
@@ -78,42 +79,44 @@ const contextmenu = $computed(() => {
 	}, null, {
 		icon: 'ti ti-external-link',
 		text: i18n.ts.openInNewTab,
-		action: () => {
+		action: (): void => {
 			window.open(pageUrl, '_blank');
-			modal.close();
+			modal?.close();
 		},
 	}, {
 		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
-		action: () => {
+		action: (): void => {
 			copyText(pageUrl);
 		},
 	}];
 });
 
-function navigate(path, record = true) {
+const navigate = (_path: string, record = true): void => {
 	if (record) history.push(router.getCurrentPath());
-	router.push(path);
-}
+	router.push(_path);
+};
 
-function back() {
-	navigate(history.pop(), false);
-}
+const back = (): void => {
+	const popped = history.pop();
+	if (popped == null) return;
+	navigate(popped, false);
+};
 
-function expand() {
+const expand = (): void => {
 	mainRouter.push(path);
-	modal.close();
-}
+	modal?.close();
+};
 
-function popout() {
+const popout = (): void => {
 	_popout(path, rootEl);
-	modal.close();
-}
+	modal?.close();
+};
 
-function onContextmenu(ev: MouseEvent) {
+const onContextmenu = (ev: MouseEvent): void => {
 	if (disableContextmenu) return;
 	os.contextMenu(contextmenu, ev);
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 280974e6b2a9..57179474151e 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -1,13 +1,13 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
+<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="emit('closed')">
 	<div ref="rootEl" class="ebkgoccj _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : undefined) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
 		<div ref="headerEl" class="header">
-			<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span class="title">
 				<slot name="header"></slot>
 			</span>
-			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
-			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
+			<button v-if="!withOkButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div class="body">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index 7a2916587bc7..4eca6011dccd 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -8,7 +8,7 @@
 	:buttons-left="buttonsLeft"
 	:buttons-right="buttonsRight"
 	:contextmenu="contextmenu"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>
 		<template v-if="pageMetadata?.value">
@@ -39,7 +39,7 @@ const props = defineProps<{
 	initialPath: string;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
index fb837c0dce43..5ac1dc0f9d05 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -4,7 +4,7 @@
 	:width="366"
 	:height="500"
 	@close="dialog?.close()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.signup }}</template>
 
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
index 47cf668597b9..62525cc7a975 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -7,7 +7,7 @@
 	:ok-button-disabled="false"
 	:can-close="false"
 	@close="dialog?.close()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 	@ok="ok()"
 >
 	<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index 36e78b72d72b..a34be25317ac 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -1,10 +1,10 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" :z-priority="'middle'" @click="modal?.close()" @closed="emit('closed')">
 	<div class="ewlycnyt">
 		<div class="title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
 		<div class="version">✨{{ version }}🚀</div>
 		<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
-		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
+		<MkButton class="gotIt" primary full @click="modal?.close()">{{ i18n.ts.gotIt }}</MkButton>
 	</div>
 </MkModal>
 </template>
@@ -17,10 +17,14 @@ import MkSparkle from '@/components/MkSparkle.vue';
 import { version } from '@/config';
 import { i18n } from '@/i18n';
 
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
 const modal = ref<InstanceType<typeof MkModal>>();
 
-const whatIsNew = () => {
-	modal.value.close();
+const whatIsNew = (): void => {
+	modal.value?.close();
 	window.open(`https://github.com/taiyme/misskey/releases/tag/${version}`, '_blank');
 };
 </script>
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index 0187c135e7f1..59d9c5fe64f8 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -6,7 +6,7 @@
 	@click="cancel()"
 	@close="cancel()"
 	@ok="ok()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.selectUser }}</template>
 	<div class="tbhwbxda">
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 3d45ceffd6ff..d6b0f2ebe24d 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -7,7 +7,7 @@
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
 			</MkSelect>
 			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
+			<MkButton inline @click="emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<XDraggable
 			v-model="widgets_"
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index b1f8153af60f..9b5abe3bdb15 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -4,7 +4,7 @@
 	:width="370"
 	:with-ok-button="true"
 	@close="dialog?.close()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 	@ok="ok()"
 >
 	<template #header>:{{ emoji.name }}:</template>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 63ca9f4acbba..4d6f8169b91b 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.button }}</template>
 
 	<section class="xfhsjczc">
@@ -48,8 +48,8 @@ import MkSwitch from '@/components/form/switch.vue';
 import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any,
-	hpml: any
+	value: any;
+	hpml: any;
 }>(), {
 	value: {
 		text: '',
@@ -62,6 +62,10 @@ withDefaults(defineProps<{
 		fn: null,
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index a5192f52d1c4..f23c0474ca4f 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-brush"></i> {{ i18n.ts._pages.blocks.canvas }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
@@ -28,7 +28,7 @@ import MkInput from '@/components/form/input.vue';
 import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
-	value: any
+	value: any;
 }>(), {
 	value: {
 		name: '',
@@ -36,4 +36,8 @@ withDefaults(defineProps<{
 		height: 200,
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index e1282884e4f5..354fa04bf872 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.counter }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
@@ -32,4 +32,8 @@ withDefaults(defineProps<{
 		name: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index a029b119ca03..4eaa0287816a 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-question-mark"></i> {{ i18n.ts._pages.blocks.if }}</template>
 	<template #func>
 		<button class="_button" @click="add()">
@@ -46,18 +46,22 @@ const props = withDefaults(defineProps<{
 	},
 });
 
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
+
 const getPageBlockList = inject<(any) => any>('getPageBlockList');
 
-async function add() {
+const add = async (): Promise<void> => {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
 	const id = uuid();
 	props.value.children.push({ id, type });
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 63fba35d4b3d..45e9b5f72e63 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-photo"></i> {{ i18n.ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
@@ -30,14 +30,18 @@ const props = withDefaults(defineProps<{
 	},
 });
 
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
+
 let file: any = $ref(null);
 
-async function choose() {
+const choose = (): void => {
 	os.selectDriveFile(false).then((fileResponse: any) => {
 		file = fileResponse;
 		props.value.fileId = fileResponse.id;
 	});
-}
+};
 
 onMounted(async () => {
 	if (props.value.fileId == null) {
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 5d96f1185732..51899269edb9 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ i18n.ts._pages.blocks.note }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
@@ -40,6 +40,10 @@ const props = withDefaults(defineProps<{
 	}),
 });
 
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
+
 let id = $ref<string>(props.value.note ?? '');
 let note = $ref<Note | null>(null);
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index f60c8fa0a09c..ed5e6bb9e488 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.numberInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
@@ -32,4 +32,8 @@ withDefaults(defineProps<{
 		name: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index 579d61ec1f39..94744c341348 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-send"></i> {{ i18n.ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
@@ -29,4 +29,8 @@ withDefaults(defineProps<{
 		canvasId: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index be2fd10ae82f..05278ea29928 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.radioButton }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
@@ -30,6 +30,10 @@ const props = withDefaults(defineProps<{
 	},
 });
 
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
+
 let values = $ref<string>(props.value?.values.join('\n') ?? '');
 
 watch(values, () => {
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
index 82932b8b6ae9..538bd7522ef1 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ value.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
@@ -28,36 +28,40 @@ import { i18n } from '@/i18n';
 const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
 const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
+	value: any;
+	hpml: any;
 }>(), {
 	value: {
 		title: null,
-		children: []
-	}
+		children: [],
+	},
 });
 
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
+
 const getPageBlockList = inject<(any) => any>('getPageBlockList');
 
-async function rename() {
+const rename = async (): Promise<void> => {
 	const { canceled, result: title } = await os.inputText({
 		title: 'Enter title',
-		default: props.value.title
+		default: props.value.title,
 	});
 	if (canceled) return;
 	props.value.title = title;
-}
+};
 
-async function add() {
+const add = async (): Promise<void> => {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
 	const id = uuid();
 	props.value.children.push({ id, type });
-}
+};
 
 onMounted(() => {
 	if (props.value.title == null) {
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index 72afcd0cc87c..722d89295f57 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.switch }}</template>
 
 	<section class="kjuadyyj">
@@ -26,6 +26,10 @@ withDefaults(defineProps<{
 		name: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index 23011b4579a7..a4392fd2de15 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.textInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
@@ -25,4 +25,8 @@ withDefaults(defineProps<{
 		name: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index 564ca295384e..8de769fbd8b8 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section class="vckmsadr">
@@ -22,6 +22,10 @@ withDefaults(defineProps<{
 		text: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index 47be903b6f46..b460ef5a5170 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-bolt"></i> {{ i18n.ts._pages.blocks.textareaInput }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
@@ -26,4 +26,8 @@ withDefaults(defineProps<{
 		name: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index 6a3938b8d175..7f30626640ac 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
+<XContainer :draggable="true" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.textarea }}</template>
 
 	<section class="ihymsbbe">
@@ -22,6 +22,10 @@ withDefaults(defineProps<{
 		text: '',
 	},
 });
+
+const emit = defineEmits<{
+	(ev: 'remove'): void;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 6c19c455ec59..c4cdbf37646f 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -10,7 +10,7 @@ const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
 	errorComponent: MkError,
 });
 
-export const routes = [{
+export const routes: Router['routes'] = [{
 	path: '/@:initUser/pages/:initPageName/view-source',
 	component: page(() => import('./pages/page-editor/page-editor.vue')),
 }, {

From f2a7c36ac1f747fd077354da18255bfba48a803f Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 23 Apr 2023 17:21:24 +0900
Subject: [PATCH 122/147] refactor: MkContainer

---
 .../client/src/components/MkContainer.vue     | 187 ++++++++----------
 1 file changed, 84 insertions(+), 103 deletions(-)

diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index ea54c297ad52..6525502dd268 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -1,6 +1,6 @@
 <template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
-	<header v-if="showHeader" ref="header">
+<div ref="rootEl" v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
+	<header v-if="showHeader" ref="headerEl">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">
 			<slot name="func"></slot>
@@ -17,7 +17,7 @@
 		@leave="leave"
 		@after-leave="afterLeave"
 	>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
+		<div v-show="showBody" ref="contentEl" class="content" :class="{ omitted }">
 			<slot></slot>
 			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
 				<span>{{ i18n.ts.showMore }}</span>
@@ -27,110 +27,91 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, shallowRef, watch, onMounted } from 'vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
-	props: {
-		showHeader: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		thin: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		naked: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		foldable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		expanded: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		scrollable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		maxHeight: {
-			type: Number,
-			required: false,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			showBody: this.expanded,
-			omitted: null,
-			ignoreOmit: false,
-			defaultStore,
-			i18n,
-		};
-	},
-	mounted() {
-		this.$watch('showBody', showBody => {
-			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
-			this.$el.style.minHeight = `${headerHeight}px`;
-			if (showBody) {
-				this.$el.style.flexBasis = 'auto';
+const props = withDefaults(defineProps<{
+	showHeader?: boolean;
+	thin?: boolean;
+	naked?: boolean;
+	foldable?: boolean;
+	expanded?: boolean;
+	scrollable?: boolean;
+	maxHeight?: number | null;
+}>(), {
+	showHeader: true,
+	thin: false,
+	naked: false,
+	foldable: false,
+	expanded: true,
+	scrollable: false,
+	maxHeight: null,
+});
+
+const rootEl = shallowRef<HTMLElement>();
+const headerEl = shallowRef<HTMLElement>();
+const contentEl = shallowRef<HTMLElement>();
+
+const showBody = ref(props.expanded);
+const omitted = ref<boolean | null>(null);
+const ignoreOmit = ref(false);
+
+onMounted(() => {
+	watch(showBody, _showBody => {
+		const headerHeight = props.showHeader ? headerEl.value?.offsetHeight ?? 0 : 0;
+		if (rootEl.value) {
+			rootEl.value.style.minHeight = `${headerHeight}px`;
+			if (showBody.value) {
+				rootEl.value.style.flexBasis = 'auto';
 			} else {
-				this.$el.style.flexBasis = `${headerHeight}px`;
+				rootEl.value.style.flexBasis = `${headerHeight}px`;
 			}
-		}, {
-			immediate: true,
-		});
-
-		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
-
-		const calcOmit = () => {
-			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
-			const height = this.$refs.content.offsetHeight;
-			this.omitted = height > this.maxHeight;
-		};
-
-		calcOmit();
-		new ResizeObserver((entries, observer) => {
-			calcOmit();
-		}).observe(this.$refs.content);
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			if (!this.foldable) return;
-			this.showBody = show;
-		},
-
-		enter(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = 0;
-			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
-		},
-		afterEnter(el) {
-			el.style.height = null;
-		},
-		leave(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
-			el.offsetHeight; // reflow
-			el.style.height = 0;
-		},
-		afterLeave(el) {
-			el.style.height = null;
-		},
-	},
+		}
+	}, { immediate: true });
+
+	if (rootEl.value && props.maxHeight != null) {
+		rootEl.value.style.setProperty('--maxHeight', `${props.maxHeight}px`);
+	}
+
+	const calcOmit = (): void => {
+		if (omitted.value || ignoreOmit.value || props.maxHeight == null) return;
+		const height = contentEl.value?.offsetHeight ?? 0;
+		omitted.value = height > props.maxHeight;
+	};
+
+	calcOmit();
+
+	if (contentEl.value) new ResizeObserver(calcOmit).observe(contentEl.value);
 });
+
+// const toggleContent = (show: boolean): void => {
+// 	if (!props.foldable) return;
+// 	showBody.value = show;
+// };
+
+const enter = (el: HTMLElement): void => {
+	const { height: elementHeight } = el.getBoundingClientRect();
+	el.style.height = '0';
+	el.offsetHeight; // reflow
+	el.style.height = `${elementHeight}px`;
+};
+
+const afterEnter = (el: HTMLElement): void => {
+	el.style.height = '';
+};
+
+const leave = (el: HTMLElement): void => {
+	const { height: elementHeight } = el.getBoundingClientRect();
+	el.style.height = `${elementHeight}px`;
+	el.offsetHeight; // reflow
+	el.style.height = '0';
+};
+
+const afterLeave = (el: HTMLElement): void => {
+	el.style.height = '';
+};
 </script>
 
 <style lang="scss" scoped>
@@ -245,8 +226,8 @@ export default defineComponent({
 			}
 		}
 
-		> .content {
-		}
+		// > .content {
+		// }
 	}
 }
 

From ba54316f94ebeb34a5ddc1a335da8586d7f273c2 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 24 Apr 2023 02:54:58 +0900
Subject: [PATCH 123/147] Update i18n

---
 locales/ar-SA.yml   |   1 -
 locales/bn-BD.yml   |   1 -
 locales/ca-ES.yml   |   1 -
 locales/cs-CZ.yml   |   1 -
 locales/da-DK.yml   |   1 -
 locales/de-DE.yml   |  39 +++++++++--
 locales/el-GR.yml   |   1 -
 locales/en-US.yml   |  61 ++++++++++++++++--
 locales/es-ES.yml   |  38 ++++++++++-
 locales/fr-FR.yml   |   3 +-
 locales/hr-HR.yml   |   1 -
 locales/ht-HT.yml   |   1 -
 locales/id-ID.yml   |  19 +++++-
 locales/it-IT.yml   |  80 +++++++++++++++++------
 locales/ja-CJP.yml  |  67 ++++++++++++++++++-
 locales/ja-JP.yml   |  67 ++++++++++++++++++-
 locales/ja-KS.yml   | 153 +++++++++++++++++++++++++++++++-------------
 locales/jbo-EN.yml  |   1 -
 locales/kab-KAB.yml |   1 -
 locales/kn-IN.yml   |   1 -
 locales/ko-KR.yml   |   4 ++
 locales/lo-LA.yml   |  21 +++++-
 locales/nl-NL.yml   |   1 -
 locales/no-NO.yml   |   1 -
 locales/pl-PL.yml   |   3 +-
 locales/pt-PT.yml   |   1 -
 locales/ro-RO.yml   |   1 -
 locales/ru-RU.yml   |   5 +-
 locales/si-LK.yml   |   1 -
 locales/sk-SK.yml   |   5 +-
 locales/sv-SE.yml   |  21 +++++-
 locales/th-TH.yml   |  47 +++++++++++++-
 locales/tr-TR.yml   |   1 -
 locales/uk-UA.yml   |   3 +-
 locales/vi-VN.yml   |   5 +-
 locales/zh-CN.yml   |  57 ++++++++++++-----
 locales/zh-TW.yml   |  29 ++++++++-
 37 files changed, 616 insertions(+), 128 deletions(-)

diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml
index 351495040a72..4a399bd115ed 100644
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -1575,4 +1575,3 @@ _deck:
 _webhookSettings:
   name: "الإسم"
   active: "مفعّل"
-
diff --git a/locales/bn-BD.yml b/locales/bn-BD.yml
index e979c19dc498..82ec9a67a61c 100644
--- a/locales/bn-BD.yml
+++ b/locales/bn-BD.yml
@@ -1690,4 +1690,3 @@ _deck:
 _webhookSettings:
   name: "নাম"
   active: "চালু"
-
diff --git a/locales/ca-ES.yml b/locales/ca-ES.yml
index ed072e583b50..37f5782f527d 100644
--- a/locales/ca-ES.yml
+++ b/locales/ca-ES.yml
@@ -483,4 +483,3 @@ _deck:
     list: "Llistes"
     mentions: "Mencions"
     direct: "Publicacions directes"
-
diff --git a/locales/cs-CZ.yml b/locales/cs-CZ.yml
index 9a5fd4921d9b..77536bb7eac1 100644
--- a/locales/cs-CZ.yml
+++ b/locales/cs-CZ.yml
@@ -952,4 +952,3 @@ _deck:
 _webhookSettings:
   name: "Jméno"
   active: "Zapnuto"
-
diff --git a/locales/da-DK.yml b/locales/da-DK.yml
index d1fbec9f6791..08c15ed092fc 100644
--- a/locales/da-DK.yml
+++ b/locales/da-DK.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Dansk"
-
diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index 42cc38f8485b..a00d0e06b3fb 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -20,6 +20,7 @@ noNotes: "Keine Notizen gefunden"
 noNotifications: "Keine Benachrichtigungen gefunden"
 instance: "Instanz"
 settings: "Einstellungen"
+notificationSettings: "Benachrichtigungseinstellungen"
 basicSettings: "Allgemeine Einstellungen"
 otherSettings: "Weitere Einstellungen"
 openInWindow: "In einem Fenster öffnen"
@@ -67,7 +68,7 @@ import: "Import"
 export: "Export"
 files: "Dateien"
 download: "Herunterladen"
-driveFileDeleteConfirm: "Möchtest du die Datei „{name}“ wirklich löschen? Notizen mit dieser Datei werden ebenso verschwinden."
+driveFileDeleteConfirm: "Möchtest du die Datei „{name}“ wirklich löschen? Sie wird in allen Inhalten, die sie verwenden, auch verschwinden."
 unfollowConfirm: "Möchtest du {name} wirklich nicht mehr folgen?"
 exportRequested: "Du hast einen Export angefragt. Dies kann etwas Zeit in Anspruch nehmen. Sobald der Export abgeschlossen ist, wird er deiner Drive hinzugefügt."
 importRequested: "Du hast einen Import angefragt. Dies kann etwas Zeit in Anspruch nehmen."
@@ -197,7 +198,7 @@ instanceInfo: "Instanzinformationen"
 statistics: "Statistiken"
 clearQueue: "Warteschlange leeren"
 clearQueueConfirmTitle: "Möchtest du die Warteschlange wirklich leeren?"
-clearQueueConfirmText: "Hierdurch werden jegliche noch nicht gesendete Notizen nicht förderiert. Normalerweise wird dies nicht benötigt."
+clearQueueConfirmText: "Hierdurch werden jegliche noch nicht gesendete Notizen nicht föderiert. Normalerweise wird dies nicht benötigt."
 clearCachedFiles: "Cache leeren"
 clearCachedFilesConfirm: "Sollen alle im Cache gespeicherten Dateien von anderen Instanzen wirklich gelöscht werden?"
 blockedInstances: "Blockierte Instanzen"
@@ -473,6 +474,8 @@ uiLanguage: "Sprache der Benutzeroberfläche"
 groupInvited: "Du wurdest in eine Gruppe eingeladen"
 aboutX: "Über {x}"
 useOsNativeEmojis: "Eingebaute Emojis des Betriebssystems benutzen"
+emojiStyle: "Emoji-Stil"
+native: "Nativ"
 disableDrawer: "Keine ausfahrbaren Menüs verwenden"
 showNoteActionsOnlyHover: "Notizmenü nur bei Mouseover anzeigen"
 youHaveNoGroups: "Keine Gruppen vorhanden"
@@ -480,6 +483,8 @@ joinOrCreateGroup: "Lass dich zu einer Gruppe einladen oder erstelle deine eigen
 noHistory: "Kein Verlauf gefunden"
 signinHistory: "Anmeldungsverlauf"
 disableAnimatedMfm: "MFM, die Animationen enthalten, deaktivieren"
+enableAdvancedMfm: "Erweitertes MFM aktivieren"
+enableAnimatedMfm: "Animiertes MFM aktivieren"
 doing: "In Bearbeitung …"
 category: "Kategorie"
 tags: "Schlagwörter"
@@ -515,12 +520,13 @@ objectStoragePrefixDesc: "Dateien werden in Ordnern unter diesem Prefix gespeich
 objectStorageEndpoint: "Endpoint"
 objectStorageEndpointDesc: "Im Falle von S3 leerlassen, für andere Anbieter den relevanten Endpoint im Format „<host>“ oder „<host>:<port>“ angeben."
 objectStorageRegion: "Region"
-objectStorageRegionDesc: "Gib eine Region wie z.B. „xx-east-1“ an. Falls dein Anbieter nicht zwischen Regionen unterscheidet, lass dieses Feld leer oder gib „us-east-1“ an."
+objectStorageRegionDesc: "Gib eine Region wie z.B. „xx-east-1“ an. Falls dein Anbieter nicht zwischen Regionen unterscheidet, gib „us-east-1“ an. Lasse es leer bei Verwendung von AWS Konfigurationsdateien oder Umgebungsvariablen."
 objectStorageUseSSL: "SSL verwenden"
 objectStorageUseSSLDesc: "Deaktiviere dies, falls du für API-Verbindungen kein HTTPS verwenden wirst"
 objectStorageUseProxy: "Über Proxy verbinden"
 objectStorageUseProxyDesc: "Deaktiviere dies, falls du für Verbindungen zur API keinen Proxy verwenden wirst"
 objectStorageSetPublicRead: "Bei Upload auf \"public-read\" stellen"
+s3ForcePathStyleDesc: "Ist s3ForcePathStyle aktiviert, so muss der Bucketname nicht im Hostnamen der URL, sondern im Pfad der URL angeben werden. Diese Option muss eventuell aktiviert werden, wenn Dienste wie z.B. eine selbstbetriebene Minio-Instanz verwendet werden."
 serverLogs: "Serverprotokolle"
 deleteAll: "Alle löschen"
 showFixedPostForm: "Bereich zum Schreiben neuer Notizen am Anfang der Chronik anzeigen"
@@ -937,6 +943,7 @@ pushNotificationNotSupported: "Entweder dein Browser oder deine Instanz unterst
 sendPushNotificationReadMessage: "Push-Benachrichtigungen löschen, sobald die relevanten Benachrichtigungen oder Nachrichten gelesen wurden"
 sendPushNotificationReadMessageCaption: "Eine Push-Benachrichtigungen mit dem Inhalt \"{emptyPushNotificationMessage}\" wird kurz eingeblendet. Dies kann gegebenenfalls den Batterieverbrauch deines Gerätes erhöhen."
 windowMaximize: "Maximieren"
+windowMinimize: "Minimieren"
 windowRestore: "Wiederherstellen"
 caption: "Beschreibung"
 loggedInAsBot: "Momentan als Bot angemeldet"
@@ -979,6 +986,9 @@ joinThisServer: "Bei dieser Instanz registrieren"
 exploreOtherServers: "Eine andere Instanz finden"
 letsLookAtTimeline: "Die Chronik durchstöbern"
 disableFederationWarn: "Dies deaktiviert Föderation, aber alle Notizen bleiben, sofern nicht umgestellt, öffentlich. In den meisten Fällen wird diese Option nicht benötigt."
+disableFederationConfirm: "Föderation wirklich deaktivieren?"
+disableFederationConfirmWarn: "Auch mit deaktivierter Föderation bleiben Notizen, sofern nicht umgestellt, öffentlich. In den meisten Fällen wird dies nicht benötigt."
+disableFederationOk: "Deaktivieren"
 invitationRequiredToRegister: "Diese Instanz ist einladungsbasiert. Du musst einen validen Einladungscode eingeben, um dich zu registrieren."
 emailNotSupported: "Diese Instanz unterstützt das Versenden von Emails nicht"
 postToTheChannel: "In Kanal senden"
@@ -1001,6 +1011,19 @@ retryAllQueuesConfirmText: "Dies wird zu einer temporären Erhöhung der Serverl
 enableChartsForRemoteUser: "Diagramme für Nutzer fremder Instanzen erstellen"
 enableChartsForFederatedInstances: "Diagramme für fremde Instanzen erstellen"
 showClipButtonInNoteFooter: "\"Clip\" zum Notizmenu hinzufügen"
+largeNoteReactions: "Reaktionen vergrößert anzeigen"
+noteIdOrUrl: "Notiz-ID oder URL"
+accountMigration: "Konto-Umzug"
+accountMoved: "Dieser Benutzer ist zu einem neuen Konto umgezogen:"
+forceShowAds: "Werbung immer anzeigen"
+_accountMigration:
+  moveTo: "Dieses Konto zu einem neuen umziehen"
+  moveToLabel: "Umzugsziel:"
+  moveAccountDescription: "Ein Umzug kann nicht rückgängig gemacht werden. Stelle zuerst sicher, dass du auf dem Umzugsziel einen Alias erstellt hast. Gib dann das Umzugsziel in folgendem Format ein: @person@instance.com"
+  moveFrom: "Von einem anderen Konto zu diesem umziehen"
+  moveFromLabel: "Umzugsursprung:"
+  moveFromDescription: "Stelle sicher, dass du auf dem Umzugsursprungskonto einen Alias zu diesem Konto erstellt hast, falls du die Follower des Ursprungskontos übertragen möchtest. Dies muss vor dem Umzug geschehen! Gib dann das Ursprungskonto in folgendem Format an: @person@instance.com"
+  migrationConfirm: "Dieses Konto wirklich zu {account} umziehen? Sobald der Umzug beginnt, kann er nicht rückgängig gemacht werden, und dieses Konto nicht wieder im ursprünglichen Zustand verwendet werden.\n\nÜberprüfe zusätzlich, dass du auf dem Umzugsziel einen Alias eingerichtet hast."
 _achievements:
   earnedAt: "Freigeschaltet am"
   _types:
@@ -1273,7 +1296,7 @@ _role:
     gtlAvailable: "Kann auf die globale Chronik zugreifen"
     ltlAvailable: "Kann auf die lokale Chronik zugreifen"
     canPublicNote: "Kann öffentliche Notizen erstellen"
-    canInvite: "Kann Einladungscodes für diese Instanz erstellen"
+    canInvite: "Erstellung von Einladungscodes für diese Instanz"
     canManageCustomEmojis: "Benutzerdefinierte Emojis verwalten"
     driveCapacity: "Drive-Kapazität"
     pinMax: "Maximale Anzahl an angehefteten Notizen"
@@ -1474,6 +1497,8 @@ _channel:
   following: "Gefolgt"
   usersCount: "{n} Teilnehmer"
   notesCount: "{n} Notizen"
+  nameAndDescription: "Name und Beschreibung"
+  nameOnly: "Nur Name"
 _menuDisplay:
   sideFull: "Seitlich"
   sideIcon: "Seitlich (Icons)"
@@ -1492,7 +1517,7 @@ _instanceMute:
   instanceMuteDescription: "Schaltet alle Notizen/Renotes stumm, die von den gelisteten Instanzen stammen, inklusive Antworten von Benutzern an einen Benutzer einer stummgeschalteten Instanz."
   instanceMuteDescription2: "Instanzen getrennt durch Zeilenumbrüchen angeben"
   title: "Blendet Notizen von stummgeschalteten Instanzen aus."
-  heading: "Liste der stummzuschaltenden Instanzen"
+  heading: "Stummzuschaltende Instanzen"
 _theme:
   explore: "Farbschemata erforschen"
   install: "Farbschemata installieren"
@@ -1769,7 +1794,7 @@ _visibility:
   specifiedDescription: "Nur für bestimmte Benutzer sichtbar"
   localOnly: "Nur Lokal"
   localOnlyDescription: "Unsichtbar für Benutzer anderer Instanzen"
-  disableFederation: "Deförderiert"
+  disableFederation: "Deföderieren"
   disableFederationDescription: "Nicht an andere Instanzen übertragen"
 _postForm:
   replyPlaceholder: "Dieser Notiz antworten …"
@@ -2206,6 +2231,7 @@ _deck:
     channel: "Kanal"
     mentions: "Erwähnungen"
     direct: "Direktnachrichten"
+    roleTimeline: "Rollenchronik"
 _dialog:
   charactersExceeded: "Maximallänge überschritten! Momentan {current} von {max}"
   charactersBelow: "Minimallänge unterschritten! Momentan {current} von {min}"
@@ -2229,4 +2255,3 @@ _webhookSettings:
     renote: "Wenn du ein Renote erhältst"
     reaction: "Wenn du eine Reaktion erhältst"
     mention: "Wenn du erwähnt wirst"
-
diff --git a/locales/el-GR.yml b/locales/el-GR.yml
index 634e36c29eed..32964e9982ac 100644
--- a/locales/el-GR.yml
+++ b/locales/el-GR.yml
@@ -394,4 +394,3 @@ _deck:
     mentions: "Επισημάνσεις"
 _webhookSettings:
   name: "Όνομα"
-
diff --git a/locales/en-US.yml b/locales/en-US.yml
index d2314c92d02e..39f95bc622a2 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -20,6 +20,7 @@ noNotes: "No notes"
 noNotifications: "No notifications"
 instance: "Instance"
 settings: "Settings"
+notificationSettings: "Notification Settings"
 basicSettings: "Basic Settings"
 otherSettings: "Other Settings"
 openInWindow: "Open in window"
@@ -67,7 +68,7 @@ import: "Import"
 export: "Export"
 files: "Files"
 download: "Download"
-driveFileDeleteConfirm: "Are you sure you want to delete \"{name}\"? All notes with this file attached will also be deleted."
+driveFileDeleteConfirm: "Are you sure you want to delete \"{name}\"? It will also vanish from all contents that use it."
 unfollowConfirm: "Are you sure you want to unfollow {name}?"
 exportRequested: "You've requested an export. This may take a while. It will be added to your Drive once completed."
 importRequested: "You've requested an import. This may take a while."
@@ -473,6 +474,8 @@ uiLanguage: "User interface language"
 groupInvited: "You've been invited to a group"
 aboutX: "About {x}"
 useOsNativeEmojis: "Use OS native Emoji"
+emojiStyle: "Emoji style"
+native: "Native"
 disableDrawer: "Don't use drawer-style menus"
 showNoteActionsOnlyHover: "Only show note actions on hover"
 youHaveNoGroups: "You have no groups"
@@ -480,6 +483,8 @@ joinOrCreateGroup: "Get invited to a group or create your own."
 noHistory: "No history available"
 signinHistory: "Login history"
 disableAnimatedMfm: "Disable MFM with animation"
+enableAdvancedMfm: "Enable advanced MFM"
+enableAnimatedMfm: "Enable animated MFM"
 doing: "Processing..."
 category: "Category"
 tags: "Tags"
@@ -515,12 +520,13 @@ objectStoragePrefixDesc: "Files will be stored under directories with this prefi
 objectStorageEndpoint: "Endpoint"
 objectStorageEndpointDesc: "Leave this empty if you are using AWS S3, otherwise specify the endpoint as '<host>' or '<host>:<port>', depending on the service you are using."
 objectStorageRegion: "Region"
-objectStorageRegionDesc: "Specify a region like 'xx-east-1'. If your service does not distinguish between regions, leave this blank or enter 'us-east-1'."
+objectStorageRegionDesc: "Specify a region like 'xx-east-1'. If your service does not distinguish between regions, enter 'us-east-1'. Leave empty if using AWS configuration files or environment variables."
 objectStorageUseSSL: "Use SSL"
 objectStorageUseSSLDesc: "Turn this off if you are not going to use HTTPS for API connections"
 objectStorageUseProxy: "Connect over Proxy"
 objectStorageUseProxyDesc: "Turn this off if you are not going to use a Proxy for API connections"
 objectStorageSetPublicRead: "Set \"public-read\" on upload"
+s3ForcePathStyleDesc: "If s3ForcePathStyle is enabled, the bucket name has to included in the path of the URL as opposed to the hostname of the URL. You may need to enable this setting when using services such as a self-hosted Minio instance."
 serverLogs: "Server logs"
 deleteAll: "Delete all"
 showFixedPostForm: "Display the posting form at the top of the timeline"
@@ -921,6 +927,7 @@ remoteOnly: "Remote only"
 failedToUpload: "Upload failed"
 cannotUploadBecauseInappropriate: "This file could not be uploaded because parts of it have been detected as potentially NSFW."
 cannotUploadBecauseNoFreeSpace: "Upload failed due to lack of Drive capacity."
+cannotUploadBecauseExceedsFileSizeLimit: "This file could not be uploaded because it exceeds the maximum allowed size."
 beta: "Beta"
 enableAutoSensitive: "Automatic NSFW-Marking"
 enableAutoSensitiveDescription: "Allows automatic detection and marking of NSFW media through Machine Learning where possible. Even if this option is disabled, it may be enabled instance-wide."
@@ -935,8 +942,9 @@ unsubscribePushNotification: "Disable push notifications"
 pushNotificationAlreadySubscribed: "Push notifications are already enabled"
 pushNotificationNotSupported: "Your browser or instance does not support push notifications"
 sendPushNotificationReadMessage: "Delete push notifications once the relevant notifications or messages have been read"
-sendPushNotificationReadMessageCaption: "A notification containing the text \"{emptyPushNotificationMessage}\" will be displayed for a short time. This may increase the battery usage of your device, if applicable."
+sendPushNotificationReadMessageCaption: "A notification containing the text \"{emptyPushNotificationMessage}\" will be displayed for a short time. This may increase the power consumption of your device."
 windowMaximize: "Maximize"
+windowMinimize: "Minimize"
 windowRestore: "Restore"
 caption: "Caption"
 loggedInAsBot: "Currently logged in as bot"
@@ -979,6 +987,9 @@ joinThisServer: "Sign up at this instance"
 exploreOtherServers: "Look for another instance"
 letsLookAtTimeline: "Have a look at the timeline"
 disableFederationWarn: "This will disable federation, but posts will continue to be public unless set otherwise. You usually do not need to use this setting."
+disableFederationConfirm: "Really disable federation?"
+disableFederationConfirmWarn: "Even if defederated, posts will continue to be public unless set otherwise. You usually do not need to do this."
+disableFederationOk: "Disable"
 invitationRequiredToRegister: "This instance is invite-only. You must enter a valid invite code sign up."
 emailNotSupported: "This instance does not support sending emails"
 postToTheChannel: "Post to channel"
@@ -1001,6 +1012,19 @@ retryAllQueuesConfirmText: "This will temporarily increase the server load."
 enableChartsForRemoteUser: "Generate remote user data charts"
 enableChartsForFederatedInstances: "Generate remote instance data charts"
 showClipButtonInNoteFooter: "Add \"Clip\" to note action menu"
+largeNoteReactions: "Enlargen displayed reactions"
+noteIdOrUrl: "Note ID or URL"
+accountMigration: "Account Migration"
+accountMoved: "This user has moved to a new account:"
+forceShowAds: "Always show ads"
+_accountMigration:
+  moveTo: "Migrate this account to a different one"
+  moveToLabel: "Account to move to:"
+  moveAccountDescription: "This action is irreversible. First, create an alias for this account on the account you wish to move to. Then, enter the account to move to in the following format: @person@instance.com"
+  moveFrom: "Migrate another account to this one"
+  moveFromLabel: "Account to move from:"
+  moveFromDescription: "Create an alias for the account to move from on this account if you wish to transfer its followers. This has to be done before the transfer! Then, enter the account to move to in the following format: @person@instance.com"
+  migrationConfirm: "Really migrate this account to {account}? Once started, this process cannot be stopped or taken back, and you will not be able to use this account in its original state anymore.\n\nAlso, confirm you've created an alias at the account to migrate to."
 _achievements:
   earnedAt: "Unlocked at"
   _types:
@@ -1474,6 +1498,8 @@ _channel:
   following: "Followed"
   usersCount: "{n} Participants"
   notesCount: "{n} Notes"
+  nameAndDescription: "Name and description"
+  nameOnly: "Name only"
 _menuDisplay:
   sideFull: "Side"
   sideIcon: "Side (Icons)"
@@ -1769,7 +1795,7 @@ _visibility:
   specifiedDescription: "Make visible for specified users only"
   localOnly: "Local only"
   localOnlyDescription: "Not visible to remote users"
-  disableFederation: "Unfederated"
+  disableFederation: "Defederate"
   disableFederationDescription: "Don't transmit to other instances"
 _postForm:
   replyPlaceholder: "Reply to this note..."
@@ -2187,7 +2213,7 @@ _deck:
   swapRight: "Swap with the right column"
   swapUp: "Swap with the above column"
   swapDown: "Swap with the below column"
-  stackLeft: "Stack with the left column"
+  stackLeft: "Stack on left column"
   popRight: "Pop column to the right"
   profile: "Profile"
   newProfile: "New profile"
@@ -2206,7 +2232,30 @@ _deck:
     channel: "Channel"
     mentions: "Mentions"
     direct: "Direct notes"
-
+    roleTimeline: "Role Timeline"
+_dialog:
+  charactersExceeded: "You've exceeded the maximum character limit! Currently at {current} of {max}."
+  charactersBelow: "You're below the minimum character limit! Currently at {current} of {min}."
+_disabledTimeline:
+  title: "Timeline disabled"
+  description: "You cannot use this timeline under your current roles."
+_drivecleaner:
+  orderBySizeDesc: "Descending Filesizes"
+  orderByCreatedAtAsc: "Ascending Dates"
+_webhookSettings:
+  createWebhook: "Create Webhook"
+  name: "Name"
+  secret: "Secret"
+  events: "Webhook Events"
+  active: "Enabled"
+  _events:
+    follow: "When following a user"
+    followed: "When being followed"
+    note: "When posting a note"
+    reply: "When receiving a reply"
+    renote: "When renoted"
+    reaction: "When receiving a reaction"
+    mention: "When being mentioned"
 _tms:
   react: "React"
   unreact: "Unreact"
diff --git a/locales/es-ES.yml b/locales/es-ES.yml
index 1277e732b41b..88d13a42c64f 100644
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -473,6 +473,8 @@ uiLanguage: "Idioma de visualización de la interfaz"
 groupInvited: "Invitado al grupo"
 aboutX: "Acerca de {x}"
 useOsNativeEmojis: "Usa los emojis nativos de la plataforma"
+emojiStyle: "Estilo de emoji"
+native: "Nativo"
 disableDrawer: "No mostrar los menús en cajones"
 showNoteActionsOnlyHover: "Mostrar acciones de la nota sólo al pasar el cursor"
 youHaveNoGroups: "Sin grupos"
@@ -480,6 +482,8 @@ joinOrCreateGroup: "Obtenga una invitación para unirse al grupos o puede crear
 noHistory: "No hay datos en el historial"
 signinHistory: "Historial de ingresos"
 disableAnimatedMfm: "Deshabilitar MFM que tiene animaciones"
+enableAdvancedMfm: "Habilitar MFM avanzado"
+enableAnimatedMfm: "Habilitar MFM con movimiento"
 doing: "Voy en camino"
 category: "Categoría"
 tags: "Etiqueta"
@@ -521,6 +525,7 @@ objectStorageUseSSLDesc: "Desactive esto si no va a usar HTTPS para la conexión
 objectStorageUseProxy: "Conectarse a través de Proxy"
 objectStorageUseProxyDesc: "Desactive esto si no va a usar Proxy para la conexión de Almacenamiento de objetos"
 objectStorageSetPublicRead: "Seleccionar \"public-read\" al subir "
+s3ForcePathStyleDesc: "Si s3ForcePathStyle esta habilitado el nombre del bucket debe ser especificado como parte de la URL en lugar del nombre de host en la URL. Puede ser necesario activar esta opción cuando se utilice, por ejemplo, Minio en un servidor propio."
 serverLogs: "Registros del servidor"
 deleteAll: "Eliminar todos"
 showFixedPostForm: "Mostrar el formulario de las entradas encima de la línea de tiempo"
@@ -937,6 +942,7 @@ pushNotificationNotSupported: "El navegador o la instancia no admiten notificaci
 sendPushNotificationReadMessage: "Eliminar las notificaciones push después de leer las notificaciones y los mensajes"
 sendPushNotificationReadMessageCaption: "La notificación \"{emptyPushNotificationMessage}\" aparecerá momentáneamente. Esto puede aumentar el consumo de batería del dispositivo."
 windowMaximize: "Maximizar"
+windowMinimize: "Minimizar"
 windowRestore: "Regresar"
 caption: "Pie de foto"
 loggedInAsBot: "Inicio sesión como cuenta bot."
@@ -979,6 +985,9 @@ joinThisServer: "Registrarse en esta instancia"
 exploreOtherServers: "Buscar otra instancia"
 letsLookAtTimeline: "Mirar la línea de tiempo local"
 disableFederationWarn: "Esto desactivará la federación, pero las publicaciones segurán siendo públicas al menos que se configure diferente. Usualmente no necesitas usar esta configuración."
+disableFederationConfirm: "¿Estas seguro que quieres desactivar la federación?"
+disableFederationConfirmWarn: "Aunque no exista federación los posts no serán marcados como privados. En la mayoría de los casos, no es necesario hacer los posts no federar."
+disableFederationOk: "Desactivar."
 invitationRequiredToRegister: "Esta instancia está configurada sólo por invitación, tienes que ingresar un código de invitación válido."
 emailNotSupported: "Esta instancia no soporta el envío de correo electrónico"
 postToTheChannel: "Publicar en el canal"
@@ -998,6 +1007,21 @@ drivecleaner: "Limpiador del Drive"
 retryAllQueuesNow: "Reintentar inmediatamente todas las colas"
 retryAllQueuesConfirmTitle: "Desea ¿reintentar inmediatamente todas las colas?"
 retryAllQueuesConfirmText: "La carga del servidor está incrementándose temporalmente "
+enableChartsForRemoteUser: "Generar gráficas de usuarios remotos."
+enableChartsForFederatedInstances: "Generar gráficos de servidores remotos"
+showClipButtonInNoteFooter: "Añadir \"Clip\" al menú de notas"
+largeNoteReactions: "Agrandar las reacciones de las notas"
+noteIdOrUrl: "ID o URL de la nota"
+accountMigration: "Migración de cuenta"
+accountMoved: "Este usuario se ha mudado a una nueva cuenta:"
+_accountMigration:
+  moveTo: "Mover esta cuenta a una nueva"
+  moveToLabel: "Cuenta destino:"
+  moveAccountDescription: "Esta operación no puede deshacerse. En primer lugar, asegúrese de haber creado un alias para esta cuenta en la cuenta a la que se va a trasladar. Después de crear el alias, introduzca la cuenta a la que se está trasladando de la siguiente manera: @person@instance.com"
+  moveFrom: "Trasladar de otra cuenta a ésta"
+  moveFromLabel: "Cuenta desde la que se realiza el traslado:"
+  moveFromDescription: "Si quieres transferir seguidores de otra cuenta a esta cuenta y trasladarlos, tendrás que crear un alias aquí. Asegúrate de crearlo antes de realizar el traslado. Introduce la cuenta desde la que estás moviendo los seguidores así: @person@instance.com"
+  migrationConfirm: "¿Estás seguro de que quieres mover esta cuenta a {account}? Una vez trasladada, no podrás deshacer el traslado y no podrás volver a utilizar la cuenta original.\n\nAdemás, compruebe que ha configurado un alias en el destino del traslado."
 _achievements:
   earnedAt: "Desbloqueado el"
   _types:
@@ -1294,6 +1318,8 @@ _role:
     followersMoreThanOrEq: "Tiene X o más seguidores"
     followingLessThanOrEq: "Sigue X o menos cuentas"
     followingMoreThanOrEq: "Sigue X o más cuentas"
+    notesLessThanOrEq: "El número de notas es inferior o igual a"
+    notesMoreThanOrEq: "El número de notas es superior o igual a"
     and: "Condicional AND"
     or: "Condicional OR"
     not: "Condicional NOT"
@@ -2211,6 +2237,16 @@ _drivecleaner:
   orderBySizeDesc: "Más grandes"
   orderByCreatedAtAsc: "Más antiguos"
 _webhookSettings:
+  createWebhook: "Crear Webhook"
   name: "Nombre"
+  secret: "Secreto"
+  events: "Eventos de webhook"
   active: "Activado"
-
+  _events:
+    follow: "Cuando se sigue a alguien"
+    followed: "Cuando se es seguido"
+    note: "Cuando se publica una nota"
+    reply: "Cuando se recibe una respuesta"
+    renote: "Cuando reciba un \"re-note\""
+    reaction: "Cuando se recibe una reacción"
+    mention: "Cuando hay una mención"
diff --git a/locales/fr-FR.yml b/locales/fr-FR.yml
index 90531daad517..4b6d63ee02ac 100644
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -462,6 +462,8 @@ uiLanguage: "Langue d’affichage de l’interface"
 groupInvited: "Invité au groupe"
 aboutX: "À propos de {x}"
 useOsNativeEmojis: "Utiliser les émojis natifs du système"
+emojiStyle: "Style des émojis"
+native: "Natif"
 youHaveNoGroups: "Vous n’avez aucun groupe"
 joinOrCreateGroup: "Vous pouvez être invité·e à rejoindre des groupes existants ou créer votre propre nouveau groupe."
 disableDrawer: "Les menus ne s'affichent pas dans le tiroir"
@@ -1805,4 +1807,3 @@ _deck:
 _webhookSettings:
   name: "Nom"
   active: "Activé"
-
diff --git a/locales/hr-HR.yml b/locales/hr-HR.yml
index cd21505a47e5..ed97d539c095 100644
--- a/locales/hr-HR.yml
+++ b/locales/hr-HR.yml
@@ -1,2 +1 @@
 ---
-
diff --git a/locales/ht-HT.yml b/locales/ht-HT.yml
index cd21505a47e5..ed97d539c095 100644
--- a/locales/ht-HT.yml
+++ b/locales/ht-HT.yml
@@ -1,2 +1 @@
 ---
-
diff --git a/locales/id-ID.yml b/locales/id-ID.yml
index 1828025c0032..9109a1d47d54 100644
--- a/locales/id-ID.yml
+++ b/locales/id-ID.yml
@@ -122,6 +122,8 @@ unmarkAsSensitive: "Hapus tanda konten sensitif"
 enterFileName: "Masukkan nama berkas"
 mute: "Bisukan"
 unmute: "Hapus bisukan"
+renoteMute: "Matikan renote"
+renoteUnmute: "Batal mematikan renote"
 block: "Blokir"
 unblock: "Buka blokir"
 suspend: "Bekukan"
@@ -395,13 +397,17 @@ aboutMisskey: "Tentang Misskey"
 administrator: "Admin"
 token: "Token"
 twoStepAuthentication: "Otentikasi dua faktor"
+totp: "Aplikasi autentikator"
+totpDescription: "Gunakan aplikasi autentikator untuk mendapatkan kata sandi sekali pakai"
 moderator: "Moderator"
 moderation: "Moderasi"
 nUsersMentioned: "{n} pengguna disebut"
+securityKeyAndPasskey: "Security key dan passkey"
 securityKey: "Kunci keamanan"
 securityKeyName: "Nama kunci"
 registerSecurityKey: "Daftarkan kunci keamanan"
 lastUsed: "Terakhir digunakan"
+lastUsedAt: "Penggunaan terakhir: {t}"
 unregister: "Batalkan pendaftaran"
 passwordLessLogin: "Setel login tanpa kata sandi"
 resetPassword: "Atur ulang kata sandi"
@@ -464,12 +470,16 @@ uiLanguage: "Bahasa antarmuka pengguna"
 groupInvited: "Telah diundang ke grup"
 aboutX: "Tentang {x}"
 useOsNativeEmojis: "Gunakan Emoji bawaan sistem operasi"
+emojiStyle: "Gaya emoji"
+native: "Native"
 disableDrawer: "Jangan gunakan menu bergaya laci"
 youHaveNoGroups: "Kamu tidak memiliki grup"
 joinOrCreateGroup: "Bergabunglah dengan grup atau kamu dapat membuat grupmu sendiri."
 noHistory: "Tidak ada riwayat"
 signinHistory: "Riwayat masuk"
 disableAnimatedMfm: "Nonaktifkan MFM dengan animasi"
+enableAdvancedMfm: "Nyalakan MFM tingkat lanjut"
+enableAnimatedMfm: "Nyalakan animasi MFM"
 doing: "Sedang berkerja..."
 category: "Kategori"
 tags: "Tandai"
@@ -862,6 +872,7 @@ tenMinutes: "10 Menit"
 oneHour: "1 Jam"
 oneDay: "1 Hari"
 oneWeek: "1 Bulan"
+oneMonth: "satu bulan"
 reflectMayTakeTime: "Mungkin perlu beberapa saat untuk dicerminkan."
 failedToFetchAccountInformation: "Gagal untuk mendapatkan informasi akun"
 rateLimitExceeded: "Batas sudah terlampaui"
@@ -919,6 +930,7 @@ pushNotificationNotSupported: "Browser atau instansi kamu tidak mendukung pember
 sendPushNotificationReadMessage: "Hapus pemberitahuan push ketika pemberitahuan relevan atau pesan telah dibaca"
 sendPushNotificationReadMessageCaption: "Pemberitahuan berisi teks「{emptyPushNotificationMessage}」akan ditampilkan dalam waktu pendek. Ini mungkin dapat menambah pemakaian baterai pada perangkat kamu."
 windowMaximize: "Maksimalkan"
+windowMinimize: "Minimalkan"
 windowRestore: "Kembalikan"
 caption: "Keterangan"
 loggedInAsBot: "Sedang login sebagai bot"
@@ -957,6 +969,12 @@ collapseRenotes: "Tutup renote yang sudah kamu lihat"
 internalServerError: "Kesalahan internal peladen"
 internalServerErrorDescription: "Peladen sedang mengalami galat tak terduga"
 copyErrorInfo: "Salin detil galat"
+joinThisServer: "Gabung server ini"
+exploreOtherServers: "Cari server lain"
+letsLookAtTimeline: "LIhat timeline"
+disableFederationConfirm: "Matikan federasi?"
+disableFederationConfirmWarn: "Mematikan federasi tidak membuat kiriman menjadi privat. Umumnya, mematikan federasi tidak diperlukan."
+disableFederationOk: "Matikan federasi"
 _achievements:
   earnedAt: "Terbuka pada"
   _types:
@@ -2140,4 +2158,3 @@ _deck:
 _webhookSettings:
   name: "Nama"
   active: "Aktif"
-
diff --git a/locales/it-IT.yml b/locales/it-IT.yml
index a5406905b012..dc7b1596a1ac 100644
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@@ -20,6 +20,7 @@ noNotes: "Nessuna nota!"
 noNotifications: "Nessuna notifica"
 instance: "Istanza"
 settings: "Impostazioni"
+notificationSettings: "Preferenze di notifica"
 basicSettings: "Impostazioni generali"
 otherSettings: "Altre impostazioni"
 openInWindow: "Apri in una finestra"
@@ -170,7 +171,7 @@ proxyAccountDescription: "Un profilo proxy funziona come follower per i profili
 host: "Server remoto"
 selectUser: "Seleziona profilo"
 recipient: "Destinatario"
-annotation: "Descrizione"
+annotation: "Annotazione preventiva"
 federation: "Federazione"
 instances: "Istanza"
 registeredAt: "Registrato presso"
@@ -213,7 +214,7 @@ intro: "L'installazione di Misskey è terminata! Si prega di creare il profilo a
 done: "Fine"
 processing: "In elaborazione"
 preview: "Anteprima"
-default: "Medio"
+default: "Predefinito"
 defaultValueIs: "Predefinito: {value}"
 noCustomEmojis: "Nessun emoji"
 noJobs: "Nessun lavoro"
@@ -238,14 +239,14 @@ more: "Di più!"
 featured: "Tendenze"
 usernameOrUserId: "Nome utente o ID utente"
 noSuchUser: "Nessun utente trovato"
-lookup: "Cerca"
+lookup: "Ricerca remota"
 announcements: "Annunci"
 imageUrl: "URL dell'immagine"
 remove: "Elimina"
 removed: "Eliminato con successo"
 removeAreYouSure: "Vuoi davvero eliminare \"{x}\"?"
 deleteAreYouSure: "Eliminare \"{x}\"?"
-resetAreYouSure: "Reimposta"
+resetAreYouSure: "Ripristinare?"
 saved: "Salvato"
 messaging: "Messaggi"
 upload: "Carica"
@@ -412,7 +413,7 @@ lastUsedAt: "Uso più recente: {t}"
 unregister: "Annulla l'iscrizione"
 passwordLessLogin: "Accedi senza password"
 passwordLessLoginDescription: "Accedi senza password, usando la chiave di sicurezza"
-resetPassword: "Reimposta password"
+resetPassword: "Ripristina la password"
 newPasswordIs: "La tua nuova password è「{password}」"
 reduceUiAnimation: "Ridurre le animazioni dell'interfaccia"
 share: "Condividi"
@@ -472,6 +473,8 @@ uiLanguage: "Lingua di visualizzazione dell'interfaccia"
 groupInvited: "Invitat@ al gruppo"
 aboutX: "Informazioni su {x}"
 useOsNativeEmojis: "Usare le emoji native del sistema operativo"
+emojiStyle: "Stile emoji"
+native: "Nativo"
 disableDrawer: "Non mostrare il menù sul drawer"
 showNoteActionsOnlyHover: "Mostra le azioni delle Note solo al passaggio del mouse"
 youHaveNoGroups: "Nessun gruppo"
@@ -479,6 +482,8 @@ joinOrCreateGroup: "Puoi creare il tuo gruppo o essere invitat@ a gruppi che gi
 noHistory: "Nessuna cronologia"
 signinHistory: "Storico degli accessi al profilo"
 disableAnimatedMfm: "Disabilità i MFM animati"
+enableAdvancedMfm: "Attiva MFM avanzati"
+enableAnimatedMfm: "Attiva MFM animati"
 doing: "In corso..."
 category: "Categoria"
 tags: "Tag"
@@ -520,6 +525,7 @@ objectStorageUseSSLDesc: "Disabilita quest'opzione se non utilizzi HTTPS per le
 objectStorageUseProxy: "Usa proxy"
 objectStorageUseProxyDesc: "Disabilita quest'opzione se non usi proxy per la connessione API."
 objectStorageSetPublicRead: "Imposta \"visibilità pubblica\" al momento di caricare"
+s3ForcePathStyleDesc: "L'attivazione di s3ForcePathStyle impone di specificare il nome del bucket come parte del percorso nell'URL anziché del nome host. Potrebbe tornare utile quando si utilizzano applicazioni come Minio."
 serverLogs: "Log del server"
 deleteAll: "Cancella cronologia"
 showFixedPostForm: "Visualizzare la finestra di pubblicazione in cima alla timeline"
@@ -578,7 +584,7 @@ invisibleNote: "Nota invisibile"
 enableInfiniteScroll: "Abilita scorrimento infinito"
 visibility: "Visibilità"
 poll: "Sondaggio"
-useCw: "Nascondere media"
+useCw: "Content Warning"
 enablePlayer: "Visualizza"
 disablePlayer: "Chiudi"
 expandTweet: "Espandi tweet"
@@ -593,7 +599,7 @@ plugins: "Estensioni"
 preferencesBackups: "Backup delle impostazioni"
 deck: "Deck"
 undeck: "Esci dal deck"
-useBlurEffectForModal: "Utilizza effetto sfocatura per i modali"
+useBlurEffectForModal: "Utilizza effetto sfocatura per le finestre modali"
 useFullReactionPicker: "Usa la totalità del pannello di reazioni"
 width: "Larghezza"
 height: "Altezza"
@@ -610,7 +616,7 @@ notificationType: "Tipo di notifiche"
 edit: "Modifica"
 emailServer: "Server email"
 enableEmail: "Abilita consegna email"
-emailConfigInfo: "Utilizzato per verificare il tuo indirizzo di posta elettronica e per reimpostare la tua password"
+emailConfigInfo: "Utilizzato per verificare il tuo indirizzo di posta elettronica e per ripristinare la password"
 email: "Email"
 emailAddress: "Indirizzo di posta elettronica"
 smtpConfig: "Impostazioni del server SMTP"
@@ -799,7 +805,7 @@ gallery: "Galleria"
 recentPosts: "Le più recenti"
 popularPosts: "Le più visualizzate"
 shareWithNote: "Condividere in nota"
-ads: "Pubblicità"
+ads: "Banner"
 expiration: "Scadenza"
 startingperiod: "Periodo di inizio"
 memo: "Promemoria"
@@ -828,7 +834,7 @@ translatedFrom: "Tradotto da {x}"
 accountDeletionInProgress: "È in corso l'eliminazione del profilo"
 usernameInfo: "Un nome per identificare univocamente il tuo profilo sull'istanza. Puoi utilizzare caratteri alfanumerici maiuscoli, minuscoli e il trattino basso (_). Non potrai cambiare nome utente in seguito."
 aiChanMode: "Modalità Ai"
-keepCw: "Mantieni il CW"
+keepCw: "Mantieni il Content Warning"
 pubSub: "Publish/Subscribe del profilo"
 lastCommunication: "La comunicazione più recente"
 resolved: "Risolto"
@@ -935,6 +941,7 @@ pushNotificationNotSupported: "Il client o il server non supporta le notifiche p
 sendPushNotificationReadMessage: "Elimina le notifiche push dopo la relativa lettura"
 sendPushNotificationReadMessageCaption: "Se possibile, verrà mostrata brevemente una notifica con il testo \"{emptyPushNotificationMessage}\". Potrebbe influire negativamente sulla durata della batteria."
 windowMaximize: "Ingrandisci"
+windowMinimize: "Contrai finestra"
 windowRestore: "Ripristina"
 caption: "Didascalia"
 loggedInAsBot: "Connessione come Bot"
@@ -977,15 +984,18 @@ joinThisServer: "Registrati su questa istanza"
 exploreOtherServers: "Trova altre istanze"
 letsLookAtTimeline: "Sbircia la timeline"
 disableFederationWarn: "Disabilita la federazione. Questo cambiamento non rende le pubblicazioni private. Di solito non è necessario abilitare questa opzione."
-invitationRequiredToRegister: "L'accesso a questo nodo è solo ad invito. Devi inserire un codice d'invito valido. Puoi richiedere un codice all'amministratore."
+disableFederationConfirm: "Vuoi davvero disattivare la federazione?"
+disableFederationConfirmWarn: "Anche se defederate, le Note continueranno ad essere pubbliche, se non diversamente specificato. Di solito, non è necessario far questo."
+disableFederationOk: "Disabilita federazione"
+invitationRequiredToRegister: "L'accesso a questa istanza è solo ad invito. Può registrarsi solo chi ha un codice fornito dall'amministrazione."
 emailNotSupported: "L'istanza non supporta l'invio di email"
-postToTheChannel: "Pubblica sul canale"
+postToTheChannel: "Pubblica nel canale"
 cannotBeChangedLater: "Non sarà più modificabile"
 reactionAcceptance: "Accettazione reazioni"
 likeOnly: "Solo i Like"
 likeOnlyForRemote: "Solo Like remoti"
 rolesAssignedToMe: "I miei ruoli"
-resetPasswordConfirm: "Vuoi reimpostare la password?"
+resetPasswordConfirm: "Vuoi davvero ripristinare la password?"
 sensitiveWords: "Parole sensibili"
 sensitiveWordsDescription: "Imposta automaticamente \"Home\" alla visibilità delle Note che contengono una qualsiasi parola tra queste configurate. Puoi separarle per riga."
 notesSearchNotAvailable: "Non è possibile cercare tra le Note."
@@ -996,6 +1006,22 @@ drivecleaner: "Drive cleaner"
 retryAllQueuesNow: "Ritenta di consumare tutte le code"
 retryAllQueuesConfirmTitle: "Vuoi ritentare adesso?"
 retryAllQueuesConfirmText: "Potrebbe sovraccaricare il server temporaneamente."
+enableChartsForRemoteUser: "Abilita i grafici per i profili remoti"
+enableChartsForFederatedInstances: "Abilita i grafici per le istanze federate"
+showClipButtonInNoteFooter: "Aggiungi il bottone Clip tra le azioni delle Note"
+largeNoteReactions: "Ingrandisci le reazioni"
+noteIdOrUrl: "ID della Nota o URL"
+accountMigration: "Migrazione del profilo"
+accountMoved: "Questo profilo ha migrato altrove:"
+forceShowAds: "Mostra sempre i banner"
+_accountMigration:
+  moveTo: "Migrare questo profilo verso un un altro"
+  moveToLabel: "Profilo verso cui migrare"
+  moveAccountDescription: "Questa attività è irreversibile! Innanzitutto, assicurati di aver creato, nella istanza di destinazione, un alias con l'indirizzo di questo profilo. Successivamente, indica qui il profilo di destinazione in questo modo: @persona@istanza.it"
+  moveFrom: "Migra un altro profilo dentro a questo"
+  moveFromLabel: "Profilo da cui migrare:"
+  moveFromDescription: "Se desideri spostare i profili follower da un altro profilo a questo, devi prima creare un alias qui. Assicurati averlo creato PRIMA di eseguire l'attività! Inserisci l'indirizzo del profilo mittente in questo modo: @persona@istanza.it"
+  migrationConfirm: "Vuoi davvero migrare questo profilo su {account}? L'azione è irreversibile e non potrai più utilizzare questo profilo nel suo stato originale.\nInoltre, assicurati di aver già creato un alias sull'account a cui ti stai trasferendo."
 _achievements:
   earnedAt: "Data di conseguimento"
   _types:
@@ -1292,6 +1318,8 @@ _role:
     followersMoreThanOrEq: "Ha più di N follower"
     followingLessThanOrEq: "Segue N profili o meno"
     followingMoreThanOrEq: "Segue N profili o più"
+    notesLessThanOrEq: "Conteggio Note inferiore o uguale a"
+    notesMoreThanOrEq: "Conteggio Note maggiore o uguale a"
     and: "E"
     or: "O"
     not: "NON"
@@ -1330,8 +1358,8 @@ _ad:
   hide: "Nascondi"
 _forgotPassword:
   enterEmail: "Inserisci l'indirizzo di posta elettronica che hai registrato nel tuo profilo. Il collegamento necessario per ripristinare la password verrà inviato a questo indirizzo."
-  ifNoEmail: "Se nessun indirizzo e-mail è stato registrato, si prega di contattare l'amministratore·trice dell'istanza."
-  contactAdmin: "Poiché questa istanza non permette l'utilizzo di una mail, si prega di contattare l'amministratore·trice dell'istanza per poter ripristinare la password."
+  ifNoEmail: "Se il tuo indirizzo email non risulta registrato, contatta l'amministrazione dell'istanza."
+  contactAdmin: "Poiché questa istanza non permette di impostare l'indirizzo mail, contatta l'amministrazione per  ripristinare la password.\n"
 _gallery:
   my: "Le mie pubblicazioni"
   liked: "Pubblicazioni che mi piacciono"
@@ -1438,6 +1466,8 @@ _channel:
   following: "Seguiti"
   usersCount: "{n} partecipanti"
   notesCount: "{n} note"
+  nameAndDescription: "Nome e descrizione"
+  nameOnly: "Solo il nome"
 _menuDisplay:
   sideFull: "Laterale"
   sideIcon: "Laterale (solo icone)"
@@ -1725,14 +1755,14 @@ _visibility:
   public: "Pubblica"
   publicDescription: "Visibile per tutti sul Fediverso"
   home: "Home"
-  homeDescription: "Visibile solo sulla timeline \"Home\""
+  homeDescription: "Visibile solo sulla timeline locale"
   followers: "Follower"
-  followersDescription: "Visibile solo per i tuoi follower"
+  followersDescription: "Visibile solo ai tuoi follower"
   specified: "Nota diretta"
   specifiedDescription: "Visibile solo ai profili menzionati"
   localOnly: "Soltanto locale"
   localOnlyDescription: "Nascosta per gli/le utenti remotə"
-  disableFederation: "Interrompi la federazione"
+  disableFederation: "Federazione disabilitata"
   disableFederationDescription: "Non spedire attività alle altre istanze remote"
 _postForm:
   replyPlaceholder: "Rispondi a questa nota..."
@@ -2084,11 +2114,21 @@ _dialog:
   charactersBelow: "Sei al di sotto del minimo di {min} caratteri!  ({corrente})"
 _disabledTimeline:
   title: "Timeline disabilitata"
-  description: "Il tuo ruolo non ha i permessi per accedere a questa timeline"
+  description: "Il ruolo in cui sei non ti permette di leggere questa timeline"
 _drivecleaner:
   orderBySizeDesc: "Dal più grande al più piccolo"
   orderByCreatedAtAsc: "Dal più vecchio al più recente"
 _webhookSettings:
+  createWebhook: "Creazione Webhook"
   name: "Nome"
+  secret: "Segreto"
+  events: "Quando eseguire il Webhook"
   active: "Attivo"
-
+  _events:
+    follow: "Quando segui un profilo"
+    followed: "Quando ti segue un profilo"
+    note: "Quando pubblichi una Nota"
+    reply: "Quando rispondono ad una Nota"
+    renote: "Quando la Nota è Rinotata"
+    reaction: "Quando ricevo una reazione"
+    mention: "Quando mi menzionano"
diff --git a/locales/ja-CJP.yml b/locales/ja-CJP.yml
index 1a33d0b8c5c8..bb2fc713c5d7 100644
--- a/locales/ja-CJP.yml
+++ b/locales/ja-CJP.yml
@@ -31,6 +31,7 @@ loggingIn: "登录中"
 logout: "ロゲマウ卜"
 signup: "注册"
 uploading: "マシプロード中"
+uploading: "マシプロード中"
 save: "保存"
 users: "用户"
 addUser: "用户を追加"
@@ -263,14 +264,17 @@ noMoreHistory: "これよリ过去ゐ履历はあリま乜ん"
 startMessaging: "于ャシ卜を开始"
 nUsersRead: "{n}人が読みまレだ"
 agreeTo: "{0}に同意"
+agree: "同意ずゑ"
 agreeBelow: "下记に同意ずゑ"
 basicNotesBeforeCreateAccount: "基本的な注意事项"
 tos: "利用规约"
+termsOfService: "利用规约"
 start: "始めゑ"
 home: "首页"
 remoteUserCaution: "刂乇ー卜ユーザーゐだめ、情报が不完全てず。"
 activity: "マケ亍ィビ亍ィ"
 images: "画像"
+image: "画像"
 birthday: "诞生日"
 yearsOld: "{age}歳"
 registeredDate: "登录日"
@@ -473,6 +477,8 @@ uiLanguage: "UIゐ表示言语"
 groupInvited: "ゲ儿ープに招待されまレだ"
 aboutX: "{x}について"
 useOsNativeEmojis: "OS礻亻亍ィブゐ絵文字を使用"
+emojiStyle: "絵文字ゐヌタ亻儿"
+native: "礻亻亍ィブ"
 disableDrawer: "〆ニューをドロワーて表示レない"
 showNoteActionsOnlyHover: "ノー卜ゐマケツ゚彐ソをホ八゛ー时ゐみ表示ずゑ"
 youHaveNoGroups: "ゲ儿ープがあリま乜ん"
@@ -480,6 +486,8 @@ joinOrCreateGroup: "既存ゐゲ儿ープに招待レてもらラカ、新レㄑ
 noHistory: "履历はあリま乜ん"
 signinHistory: "登录履历"
 disableAnimatedMfm: "动きゐあゑMFMを无効にずゑ"
+enableAdvancedMfm: "高度なMFMを有効にずゑ"
+enableAnimatedMfm: "动きゐあゑMFMを有効にずゑ"
 doing: "やっこいまず"
 category: "力亍ゴ刂"
 tags: "タゲ"
@@ -488,6 +496,8 @@ createAccount: "マカウソトを作成"
 existingAccount: "既存ゐマカウソト"
 regenerate: "再生成"
 fontSize: "フォソ卜サ亻ス"
+mediaListWithOneImageAppearance: "画像が1枚ゐみゐ〆ディマ刂ヌ卜ゐ高さ"
+limitTo: "{x}を上限に"
 noFollowRequests: "关注申请はあリま乜ん"
 openImageInNewTab: "画像を新レいタブて开ㄑ"
 dashboard: "ダシツ゚ュ㝳ード"
@@ -521,6 +531,7 @@ objectStorageUseSSLDesc: "API接続にhttpsを使用レない场合は才フに
 objectStorageUseProxy: "Proxyを利用ずゑ"
 objectStorageUseProxyDesc: "API接続にproxyを利用レない场合は才フにレてくたちい"
 objectStorageSetPublicRead: "マシプロード时に'public-read'を设定ずゑ"
+s3ForcePathStyleDesc: "s3ForcePathStyleを有効にずゑと、八゛ケシ卜名をURLゐホヌ卜名てはなㄑ八゜ヌゐ一部とレて指定ずゑことを强制レまず。乜儿フホヌ卜されだMinioなどゐ使用时に有効にずゑ必要があゑ场合があリまず。"
 serverLogs: "サー八゛ーロゲ"
 deleteAll: "全て削除"
 showFixedPostForm: "タ亻ムう亻ソ上部に投稿フォームを表示ずゑ"
@@ -921,6 +932,7 @@ remoteOnly: "刂乇ー卜ゐみ"
 failedToUpload: "マシプロード失败"
 cannotUploadBecauseInappropriate: "不适切な内容を含む可能性があゑと判定されだだめマシプロードてきま乜ん。"
 cannotUploadBecauseNoFreeSpace: "ドう亻ブゐ空き容量が无いだめマシプロードてきま乜ん。"
+cannotUploadBecauseExceedsFileSizeLimit: "ファ亻儿サ亻スゐ制限を超えていゑだめマシプロードてきま乜ん。"
 beta: "へータ"
 enableAutoSensitive: "自动NSFW判定"
 enableAutoSensitiveDescription: "利用可能な场合は、机械学习を利用レて自动て〆ディマにNSFWフうゲを设定レまず。こゐ机能を才フにレても、亻ソヌタソヌによっこは自动て设定されゑことがあリまず。"
@@ -934,9 +946,10 @@ subscribePushNotification: "プシツ゚ュ通知を有効化"
 unsubscribePushNotification: "プシツ゚ュ通知を停止ずゑ"
 pushNotificationAlreadySubscribed: "プシツ゚ュ通知は有効てず"
 pushNotificationNotSupported: "ブうウザカ亻ソヌタソヌがプシツ゚ュ通知に非対応"
-sendPushNotificationReadMessage: "通知や〆シ乜ーヅが既読になっだらプシツ゚ュ通知を削除ずゑ"
-sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」といラ通知が一瞬表示されゑよラになゑ。端末ゐ电池消费量が増加ずゑ可能性があリまず。"
+sendPushNotificationReadMessage: "通知が既読になっだらプシツ゚ュ通知を削除ずゑ"
+sendPushNotificationReadMessageCaption: "端末ゐ电池消费量が増加ずゑ可能性があリまず。"
 windowMaximize: "最大化"
+windowMinimize: "最小化"
 windowRestore: "元に戻ず"
 caption: "キャプツ゚彐ソ"
 loggedInAsBot: "Botマカウソトて登录中"
@@ -962,6 +975,10 @@ manageCustomEmojis: "力ヌタム絵文字ゐ管理"
 youCannotCreateAnymore: "これ以上作成ずゑことはてきま乜ん。"
 cannotPerformTemporary: "一时的に利用てきま乜ん"
 cannotPerformTemporaryDescription: "操作回数が制限を超过ずゑだめ一时的に利用てきま乜ん。レばらㄑ时间を置いてカら再度お试レくたちい。"
+invalidParamError: "八゜う〆ータ卫うー"
+invalidParamErrorDescription: "刂ケ卫ヌ卜八゜う〆ータに问题があリまず。通常これは八゛ゲてずが、入力レだ文字数が多ずぎゑ等ゐ可能性もあリまず。"
+permissionDeniedError: "操作が拒否されまレだ"
+permissionDeniedErrorDescription: "こゐマカウソトにはこゐ操作を行ラだめゐ権限があリま乜ん。"
 preset: "プ刂乜シ卜"
 selectFromPresets: "プ刂乜シ卜カら选択"
 achievements: "实绩"
@@ -979,6 +996,9 @@ joinThisServer: "こゐ亻ソヌタソヌに登录ずゑ"
 exploreOtherServers: "他ゐ亻ソヌタソヌを探ず"
 letsLookAtTimeline: "タ亻ムう亻ソを见てみゑ"
 disableFederationWarn: "连合が无効になっこいまず。无効にレても投稿が非公开にはなリま乜ん。ほとんどゐ场合、こゐ才プツ゚彐ソを有効にずゑ必要はあリま乜ん。"
+disableFederationConfirm: "连合なレにレまずカ？"
+disableFederationConfirmWarn: "连合なレにレても投稿は非公开になリま乜ん。ほとんどゐ场合、连合なレにずゑ必要はあリま乜ん。"
+disableFederationOk: "连合なレにずゑ"
 invitationRequiredToRegister: "现在こゐ亻ソヌタソヌは招待制てず。招待コードをお持ちゐ方ゐみ登录てきまず。"
 emailNotSupported: "こゐ亻ソヌタソヌては〆ー儿配信はサポー卜されていま乜ん"
 postToTheChannel: "于ャソ礻儿に投稿"
@@ -1001,6 +1021,41 @@ retryAllQueuesConfirmText: "一时的にサー八゛ーゐ负荷が増大ずゑ
 enableChartsForRemoteUser: "刂乇ー卜ユーザーゐ于ャー卜を生成"
 enableChartsForFederatedInstances: "刂乇ー卜亻ソヌタソヌゐ于ャー卜を生成"
 showClipButtonInNoteFooter: "ノー卜ゐマケツ゚彐ソにケ刂シプを追加"
+largeNoteReactions: "ノー卜ゐ刂マケツ゚彐ソを大きㄑ表示"
+noteIdOrUrl: "ノー卜IDまだはURL"
+video: "动画"
+videos: "动画"
+dataSaver: "データ乜ー八゛ー"
+accountMigration: "マカウソトゐ引っ越レ"
+accountMoved: "こゐユーザーは新レいマカウソトに引っ越レまレだ："
+forceShowAds: "常に広告を表示ずゑ"
+addMemo: "〆乇を追加"
+editMemo: "〆乇を编集"
+notificationDisplay: "通知ゐ表示"
+leftTop: "左上"
+rightTop: "右上"
+leftBottom: "左下"
+rightBottom: "右下"
+stackAxis: "ヌタシケ方向"
+vertical: "縦"
+horizontal: "横"
+position: "位置"
+serverRules: "亻ソヌタソヌ儿ー儿"
+pleaseConfirmBelowBeforeSignup: "こゐ亻ソヌタソヌに登录ずゑ前に、以下を确认レてくたちい。"
+pleaseAgreeAllToContinue: "続けゑには、全てゐ「同意ずゑ」に于卫シケが入っこいゑ必要があリまず。"
+continue: "続けゑ"
+
+_serverRules:
+  description: "新规登录前に表示ずゑ、亻ソヌタソヌゐ简洁な儿ー儿を设定レまず。内容は利用规约ゐ要约とずゑことを推奨レまず。"
+
+_accountMigration:
+  moveTo: "こゐマカウソトを新レいマカウソトに引っ越ず"
+  moveToLabel: "引っ越レ先ゐマカウソト："
+  moveAccountDescription: "こゐ操作は取リ消乜ま乜ん。まずは引っ越レ先ゐマカウソトてこゐマカウソトに対レ卫亻刂マヌを作成レだことを确认レてくたちい。卫亻刂マヌ作成后、引っ越レ先ゐマカウソトをこゐよラに入力レてくたちい：@person@instance.com"
+  moveFrom: "别ゐマカウソトカらこゐマカウソトに引っ越ず"
+  moveFromLabel: "引っ越レ元ゐマカウソト："
+  moveFromDescription: "别ゐマカウソトカらこゐマカウソトにフォロワーを引き継いて引っ越レだい场合、ここて卫亻刂マヌを作成レておㄑ必要があリまず。必ず引っ越レを实行ずゑ前に作成レてくたちい！引っ越レ元ゐマカウソトをこゐよラに入力レてくたちい：@person@instance.com"
+  migrationConfirm: "本当にこゐマカウソトを {account} に引っ越レまずカ？一度引っ越レを行ラと取リ消乜ず、二度とこゐマカウソトを元ゐ状态て使用てきなㄑなゑ。\nまだ、引っ越レ先ゐマカウソトて卫亻刂マヌを作成レだことを确认レてくたちい。"
 
 _achievements:
   earnedAt: "获得日时"
@@ -1173,6 +1228,9 @@ _achievements:
     _client30min:
       title: "ひとやずみ"
       description: "ケう亻マソ卜を起动レてカら30分以上経过レだ"
+    _client60min:
+      title: "Misskeyゐ见ずぎ"
+      description: "ケう亻マソ卜を起动レてカら60分以上経过レだ"
     _noteDeletedWithin1min:
       title: "いまゐなレ"
       description: "投稿レてカら1分以内にそゐ投稿を削除レだ"
@@ -1262,6 +1320,8 @@ _role:
   iconUrl: "マ亻コソ画像ゐURL"
   asBadge: "八゛シヅとレて表示"
   descriptionOfAsBadge: "才ソにずゑと、ユーザー名ゐ横にロー儿ゐマ亻コソが表示されまず。"
+  isExplorable: "ロー儿タ亻ムう亻ソを公开"
+  descriptionOfIsExplorable: "才ソにずゑと、ロー儿ゐタ亻ムう亻ソを公开レまず。ロー儿ゐ公开が才フゐ场合、タ亻ムう亻ソゐ公开はされま乜ん。"
   displayOrder: "表示顺"
   descriptionOfDisplayOrder: "数價が大きいほどUI上て先头に表示されまず。"
   canEditMembersByModerator: "乇デレーターゐ〆ソ八゛ー编集を许可"
@@ -1494,6 +1554,8 @@ _channel:
   following: "关注中"
   usersCount: "{n}人が参加中"
   notesCount: "{n}投稿があリまず"
+  nameAndDescription: "名前と说明"
+  nameOnly: "名前ゐみ"
 
 _menuDisplay:
   sideFull: "横"
@@ -2270,6 +2332,7 @@ _deck:
     channel: "于ャソ礻儿"
     mentions: "贵樣宛て"
     direct: "ダ亻レケ卜"
+    roleTimeline: "ロー儿タ亻ムう亻ソ"
 
 _dialog:
   charactersExceeded: "最大文字数を超えていまず！ 现在 {current} / 制限 {max}"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e627b5b67d89..083a830c05c7 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -20,6 +20,7 @@ noNotes: "ノートはありません"
 noNotifications: "通知はありません"
 instance: "インスタンス"
 settings: "設定"
+notificationSettings: "通知の設定"
 basicSettings: "基本設定"
 otherSettings: "その他の設定"
 openInWindow: "ウィンドウで開く"
@@ -263,14 +264,17 @@ noMoreHistory: "これより過去の履歴はありません"
 startMessaging: "チャットを開始"
 nUsersRead: "{n}人が読みました"
 agreeTo: "{0}に同意"
+agree: "同意する"
 agreeBelow: "下記に同意する"
 basicNotesBeforeCreateAccount: "基本的な注意事項"
 tos: "利用規約"
+termsOfService: "利用規約"
 start: "始める"
 home: "ホーム"
 remoteUserCaution: "リモートユーザーのため、情報が不完全です。"
 activity: "アクティビティ"
 images: "画像"
+image: "画像"
 birthday: "誕生日"
 yearsOld: "{age}歳"
 registeredDate: "登録日"
@@ -473,6 +477,8 @@ uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されました"
 aboutX: "{x}について"
 useOsNativeEmojis: "OSネイティブの絵文字を使用"
+emojiStyle: "絵文字のスタイル"
+native: "ネイティブ"
 disableDrawer: "メニューをドロワーで表示しない"
 showNoteActionsOnlyHover: "ノートのアクションをホバー時のみ表示する"
 youHaveNoGroups: "グループがありません"
@@ -480,6 +486,8 @@ joinOrCreateGroup: "既存のグループに招待してもらうか、新しく
 noHistory: "履歴はありません"
 signinHistory: "ログイン履歴"
 disableAnimatedMfm: "動きのあるMFMを無効にする"
+enableAdvancedMfm: "高度なMFMを有効にする"
+enableAnimatedMfm: "動きのあるMFMを有効にする"
 doing: "やっています"
 category: "カテゴリ"
 tags: "タグ"
@@ -488,6 +496,8 @@ createAccount: "アカウントを作成"
 existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
+mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
+limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はありません"
 openImageInNewTab: "画像を新しいタブで開く"
 dashboard: "ダッシュボード"
@@ -521,6 +531,7 @@ objectStorageUseSSLDesc: "API接続にhttpsを使用しない場合はオフに
 objectStorageUseProxy: "Proxyを利用する"
 objectStorageUseProxyDesc: "API接続にproxyを利用しない場合はオフにしてください"
 objectStorageSetPublicRead: "アップロード時に'public-read'を設定する"
+s3ForcePathStyleDesc: "s3ForcePathStyleを有効にすると、バケット名をURLのホスト名ではなくパスの一部として指定することを強制します。セルフホストされたMinioなどの使用時に有効にする必要がある場合があります。"
 serverLogs: "サーバーログ"
 deleteAll: "全て削除"
 showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
@@ -921,6 +932,7 @@ remoteOnly: "リモートのみ"
 failedToUpload: "アップロード失敗"
 cannotUploadBecauseInappropriate: "不適切な内容を含む可能性があると判定されたためアップロードできません。"
 cannotUploadBecauseNoFreeSpace: "ドライブの空き容量が無いためアップロードできません。"
+cannotUploadBecauseExceedsFileSizeLimit: "ファイルサイズの制限を超えているためアップロードできません。"
 beta: "ベータ"
 enableAutoSensitive: "自動NSFW判定"
 enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。"
@@ -934,9 +946,10 @@ subscribePushNotification: "プッシュ通知を有効化"
 unsubscribePushNotification: "プッシュ通知を停止する"
 pushNotificationAlreadySubscribed: "プッシュ通知は有効です"
 pushNotificationNotSupported: "ブラウザかインスタンスがプッシュ通知に非対応"
-sendPushNotificationReadMessage: "通知やメッセージが既読になったらプッシュ通知を削除する"
-sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」という通知が一瞬表示されるようになります。端末の電池消費量が増加する可能性があります。"
+sendPushNotificationReadMessage: "通知が既読になったらプッシュ通知を削除する"
+sendPushNotificationReadMessageCaption: "端末の電池消費量が増加する可能性があります。"
 windowMaximize: "最大化"
+windowMinimize: "最小化"
 windowRestore: "元に戻す"
 caption: "キャプション"
 loggedInAsBot: "Botアカウントでログイン中"
@@ -962,6 +975,10 @@ manageCustomEmojis: "カスタム絵文字の管理"
 youCannotCreateAnymore: "これ以上作成することはできません。"
 cannotPerformTemporary: "一時的に利用できません"
 cannotPerformTemporaryDescription: "操作回数が制限を超過するため一時的に利用できません。しばらく時間を置いてから再度お試しください。"
+invalidParamError: "パラメータエラー"
+invalidParamErrorDescription: "リクエストパラメータに問題があります。通常これはバグですが、入力した文字数が多すぎる等の可能性もあります。"
+permissionDeniedError: "操作が拒否されました"
+permissionDeniedErrorDescription: "このアカウントにはこの操作を行うための権限がありません。"
 preset: "プリセット"
 selectFromPresets: "プリセットから選択"
 achievements: "実績"
@@ -979,6 +996,9 @@ joinThisServer: "このインスタンスに登録する"
 exploreOtherServers: "他のインスタンスを探す"
 letsLookAtTimeline: "タイムラインを見てみる"
 disableFederationWarn: "連合が無効になっています。無効にしても投稿が非公開にはなりません。ほとんどの場合、このオプションを有効にする必要はありません。"
+disableFederationConfirm: "連合なしにしますか？"
+disableFederationConfirmWarn: "連合なしにしても投稿は非公開になりません。ほとんどの場合、連合なしにする必要はありません。"
+disableFederationOk: "連合なしにする"
 invitationRequiredToRegister: "現在このインスタンスは招待制です。招待コードをお持ちの方のみ登録できます。"
 emailNotSupported: "このインスタンスではメール配信はサポートされていません"
 postToTheChannel: "チャンネルに投稿"
@@ -1001,6 +1021,41 @@ retryAllQueuesConfirmText: "一時的にサーバーの負荷が増大するこ
 enableChartsForRemoteUser: "リモートユーザーのチャートを生成"
 enableChartsForFederatedInstances: "リモートインスタンスのチャートを生成"
 showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
+largeNoteReactions: "ノートのリアクションを大きく表示"
+noteIdOrUrl: "ノートIDまたはURL"
+video: "動画"
+videos: "動画"
+dataSaver: "データセーバー"
+accountMigration: "アカウントの引っ越し"
+accountMoved: "このユーザーは新しいアカウントに引っ越しました："
+forceShowAds: "常に広告を表示する"
+addMemo: "メモを追加"
+editMemo: "メモを編集"
+notificationDisplay: "通知の表示"
+leftTop: "左上"
+rightTop: "右上"
+leftBottom: "左下"
+rightBottom: "右下"
+stackAxis: "スタック方向"
+vertical: "縦"
+horizontal: "横"
+position: "位置"
+serverRules: "インスタンスルール"
+pleaseConfirmBelowBeforeSignup: "このインスタンスに登録する前に、以下を確認してください。"
+pleaseAgreeAllToContinue: "続けるには、全ての「同意する」にチェックが入っている必要があります。"
+continue: "続ける"
+
+_serverRules:
+  description: "新規登録前に表示する、インスタンスの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
+
+_accountMigration:
+  moveTo: "このアカウントを新しいアカウントに引っ越す"
+  moveToLabel: "引っ越し先のアカウント："
+  moveAccountDescription: "この操作は取り消せません。まずは引っ越し先のアカウントでこのアカウントに対しエイリアスを作成したことを確認してください。エイリアス作成後、引っ越し先のアカウントをこのように入力してください：@person@instance.com"
+  moveFrom: "別のアカウントからこのアカウントに引っ越す"
+  moveFromLabel: "引っ越し元のアカウント："
+  moveFromDescription: "別のアカウントからこのアカウントにフォロワーを引き継いで引っ越したい場合、ここでエイリアスを作成しておく必要があります。必ず引っ越しを実行する前に作成してください！引っ越し元のアカウントをこのように入力してください：@person@instance.com"
+  migrationConfirm: "本当にこのアカウントを {account} に引っ越しますか？一度引っ越しを行うと取り消せず、二度とこのアカウントを元の状態で使用できなくなります。\nまた、引っ越し先のアカウントでエイリアスを作成したことを確認してください。"
 
 _achievements:
   earnedAt: "獲得日時"
@@ -1173,6 +1228,9 @@ _achievements:
     _client30min:
       title: "ひとやすみ"
       description: "クライアントを起動してから30分以上経過した"
+    _client60min:
+      title: "Misskeyの見すぎ"
+      description: "クライアントを起動してから60分以上経過した"
     _noteDeletedWithin1min:
       title: "いまのなし"
       description: "投稿してから1分以内にその投稿を削除した"
@@ -1262,6 +1320,8 @@ _role:
   iconUrl: "アイコン画像のURL"
   asBadge: "バッジとして表示"
   descriptionOfAsBadge: "オンにすると、ユーザー名の横にロールのアイコンが表示されます。"
+  isExplorable: "ロールタイムラインを公開"
+  descriptionOfIsExplorable: "オンにすると、ロールのタイムラインを公開します。ロールの公開がオフの場合、タイムラインの公開はされません。"
   displayOrder: "表示順"
   descriptionOfDisplayOrder: "数値が大きいほどUI上で先頭に表示されます。"
   canEditMembersByModerator: "モデレーターのメンバー編集を許可"
@@ -1494,6 +1554,8 @@ _channel:
   following: "フォロー中"
   usersCount: "{n}人が参加中"
   notesCount: "{n}投稿があります"
+  nameAndDescription: "名前と説明"
+  nameOnly: "名前のみ"
 
 _menuDisplay:
   sideFull: "横"
@@ -2270,6 +2332,7 @@ _deck:
     channel: "チャンネル"
     mentions: "あなた宛て"
     direct: "ダイレクト"
+    roleTimeline: "ロールタイムライン"
 
 _dialog:
   charactersExceeded: "最大文字数を超えています！ 現在 {current} / 制限 {max}"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index 7594d7d3810c..b2bc76d0b729 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -2,7 +2,7 @@
 _lang_: "日本語 (関西弁)"
 headlineMisskey: "ノートでつながるネットワーク"
 introMisskey: "ようお越し！Misskeyは、オープンソースの分散型マイクロブログサービスやねん。\n「ノート」を作って、いま起こっとることを共有したり、あんたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加したりもできるで✌\nほな新しい世界を探検しよか🚀"
-poweredByMisskeyDescription: "{name}は、オープンソースのプラットフォーム<b>Misskey</b>のサーバーのひとつなんやで。"
+poweredByMisskeyDescription: "{name}は、オープンソースのプラットフォーム<b>Misskey</b>のインスタンスのひとつなんやで。"
 monthAndDay: "{month}月 {day}日"
 search: "探す"
 notifications: "通知"
@@ -16,22 +16,23 @@ cancel: "やめとく"
 noThankYou: "やめとく"
 enterUsername: "ユーザー名を入れてや"
 renotedBy: "{user}がRenoteしたで"
-noNotes: "ノートなんてあらへんで"
-noNotifications: "通知なんてあらへんで"
+noNotes: "ノートはあらへん"
+noNotifications: "通知はあらへん"
 instance: "インスタンス"
 settings: "設定"
+notificationSettings: "通知の設定"
 basicSettings: "基本設定"
 otherSettings: "ほかの設定"
 openInWindow: "ウィンドウで開くで"
 profile: "プロフィール"
 timeline: "タイムライン"
-noAccountDescription: "自己紹介食ってもた"
+noAccountDescription: "自己紹介はあらへん"
 login: "ログイン"
 loggingIn: "ログインしよるで"
 logout: "ログアウト"
 signup: "新規登録"
 uploading: "アップロードしとるで"
-save: "保存"
+save: "とっとく"
 users: "ユーザー"
 addUser: "ユーザーを追加や"
 favorite: "お気に入り"
@@ -81,9 +82,9 @@ followsYou: "フォローされとるで"
 createList: "リスト作る"
 manageLists: "リストの管理"
 error: "エラー"
-somethingHappened: "なんかアカンことが起こったで"
+somethingHappened: "なんかあかんわ"
 retry: "もっぺんやる？"
-pageLoadError: "ページの読み込みに失敗してもうたわ…"
+pageLoadError: "ページが読み込めんかったわ。"
 pageLoadErrorDescription: "これは普通ならネットワークかブラウザキャッシュが悪さしてるんよ。キャッシュをほかすか、もうちょっとだけ待ってくれへん？"
 serverIsDead: "サーバーからの応答がないで。もうちょい待ってから試してみてな。"
 youShouldUpgradeClient: "このページを表示するには、リロードして新しいバージョンのクライアントを使ってなー。"
@@ -108,8 +109,8 @@ inChannelQuote: "チャンネル内引用"
 pinnedNote: "ピン留めされとるノート"
 pinned: "ピン留めしとく"
 you: "あんた"
-clickToShow: "押したら見えるで"
-sensitive: "ちょっとアカンやつやで"
+clickToShow: "押したら出ら"
+sensitive: "気いつけて見いや"
 add: "増やす"
 reaction: "リアクション"
 reactions: "リアクション"
@@ -122,8 +123,8 @@ unmarkAsSensitive: "そこまでアカンことないやろ"
 enterFileName: "ファイル名を入れてや"
 mute: "ミュート"
 unmute: "ミュートやめたる"
-renoteMute: "リノートは見いひん"
-renoteUnmute: "リノートもやっぱ見るわ"
+renoteMute: "Renoteは見いひん"
+renoteUnmute: "Renoteもやっぱ見るわ"
 block: "ブロック"
 unblock: "ブロックやめたる"
 suspend: "凍結"
@@ -141,14 +142,14 @@ editWidgetsExit: "編集終ったで"
 customEmojis: "カスタム絵文字"
 emoji: "絵文字"
 emojis: "絵文字"
-emojiName: "絵文字名"
+emojiName: "絵文字はんの名前"
 emojiUrl: "絵文字画像URL"
 addEmoji: "絵文字を追加"
 settingGuide: "ええ感じの設定"
 cacheRemoteFiles: "リモートのファイルをキャッシュする"
-cacheRemoteFilesDescription: "この設定を切っとくと、リモートファイルをキャッシュせず直リンクするようになるで。サーバーの容量は節約できるけど、サムネイルが作られんくなるから通信量が増えるで。"
+cacheRemoteFilesDescription: "この設定を切っとったら、リモートファイルをキャッシュせんと直リンクするようになるで。サーバーの容量は節約できるけど、サムネイルを作らんなるから通信量が増えるで。"
 flagAsBot: "Botにするで"
-flagAsBotDescription: "もしこのアカウントをプログラム使うて運用するんやったら、このフラグをオンにしてや。オンにすれば、反応がバーッて連鎖するのを避けるために開発者が使うたり、Misskeyのシステム上での扱いがBotに合ったもんになるからな。"
+flagAsBotDescription: "もしこのアカウントをプログラム使うて運用するんやったら、このフラグをオンにしてや。オンにすれば、反応がバーッて連鎖せんように開発者が使うたり、Misskeyのシステム上での扱いがBotに合ったもんになるからな。"
 flagAsCat: "Catやで"
 flagAsCatDescription: "ワレ、猫ちゃんならこのフラグをつけてみ？"
 flagShowTimelineReplies: "タイムラインにノートへの返信を表示するで"
@@ -195,10 +196,10 @@ network: "ネットワーク"
 disk: "ディスク"
 instanceInfo: "インスタンス情報"
 statistics: "統計"
-clearQueue: "キューにさいなら"
-clearQueueConfirmTitle: "キューをクリアしまっか？"
-clearQueueConfirmText: "未配達の投稿は配送されなくなるで。ふつうこの操作を行う必要は無いんやけどな。"
-clearCachedFiles: "キャッシュにさいなら"
+clearQueue: "キューをほかす"
+clearQueueConfirmTitle: "キューをほかしとこか？"
+clearQueueConfirmText: "未配達の投稿は配送されんなるで。ふつうこの操作を行う必要は無いんやけどな。"
+clearCachedFiles: "キャッシュをほかす"
 clearCachedFilesConfirm: "キャッシュされとるリモートファイルをみんなほかしてええか？"
 blockedInstances: "ブロックしたインスタンス"
 blockedInstancesDescription: "ブロックしたいインスタンスのホストを改行で区切って設定してな。ブロックされてもうたインスタンスとはもう金輪際やり取りできひんくなるで。ついでにそのサブドメインもブロックするで。"
@@ -207,7 +208,7 @@ mutedUsers: "ミュートしたユーザー"
 blockedUsers: "ブロックしたユーザー"
 noUsers: "ユーザーはおらん"
 editProfile: "プロフィールをいじる"
-noteDeleteConfirm: "このノートを削除しまっか？"
+noteDeleteConfirm: "このノートをほかしてええか？"
 pinLimitExceeded: "これ以上ピン留めできひん"
 intro: "Misskeyのインストールが完了したで！管理者アカウントを作ってや。"
 done: "でけた"
@@ -227,9 +228,9 @@ notResponding: "応答してへんで"
 instanceFollowing: "インスタンスのフォロー"
 instanceFollowers: "インスタンスのフォロワー\n"
 instanceUsers: "インスタンスのユーザー"
-changePassword: "パスワード変える"
+changePassword: "パスワードをいじる"
 security: "セキュリティ"
-retypedNotMatch: "入れたやつ同じになってないで。"
+retypedNotMatch: "入れたやつ合うてへんわ。"
 currentPassword: "今のパスワード"
 newPassword: "次のパスワード"
 newPasswordRetype: "今度のパスワード(もっぺん入れて)"
@@ -259,18 +260,21 @@ uploadFromUrlRequested: "アップロードしたい言うといたで"
 uploadFromUrlMayTakeTime: "アップロード終わるんにちょい時間かかるかもしれへんわ。"
 explore: "みつける"
 messageRead: "もう読んだ"
-noMoreHistory: "これより過去の履歴はあらへんで"
+noMoreHistory: "これより昔のんはあらへんで"
 startMessaging: "チャットやるで"
 nUsersRead: "{n}人が読んでもうた"
 agreeTo: "{0}に同意したで"
+agree: "同意したる"
 agreeBelow: "下記に同意したる"
 basicNotesBeforeCreateAccount: "よう読んでやってや"
 tos: "利用規約"
+termsOfService: "利用規約"
 start: "始める"
 home: "ホーム"
 remoteUserCaution: "リモートユーザーやから、足りひん情報あるかもしれへん。"
 activity: "アクティビティ"
 images: "画像"
+image: "画像"
 birthday: "生まれた日"
 yearsOld: "{age}歳"
 registeredDate: "始めた日"
@@ -295,14 +299,14 @@ createFolder: "フォルダー作る"
 renameFolder: "フォルダー名を変える"
 deleteFolder: "フォルダーをほかす"
 addFile: "ファイルを追加"
-emptyDrive: "ドライブにはなんも残っとらん"
+emptyDrive: "ドライブは空っぽや"
 emptyFolder: "このフォルダーは空や"
-unableToDelete: "消そうおもってんけどな、あかんかったわ"
+unableToDelete: "消せんかったわ"
 inputNewFileName: "今度のファイル名は何にするん？"
 inputNewDescription: "新しいキャプションを入れてや"
 inputNewFolderName: "今度のフォルダ名は何にするん？"
 circularReferenceFolder: "移動先のフォルダーは、移動するフォルダーのサブフォルダーや。"
-hasChildFilesOrFolders: "このフォルダ、まだなんか入っとるから消されへん"
+hasChildFilesOrFolders: "このフォルダは空っぽちゃうから消されへん"
 copyUrl: "URLをコピー"
 rename: "名前を変えるで"
 avatar: "アイコン"
@@ -342,7 +346,7 @@ invite: "来てや"
 driveCapacityPerLocalAccount: "ローカルユーザーはんひとりあたりのドライブ容量"
 driveCapacityPerRemoteAccount: "リモートユーザーはんひとりあたりのドライブ容量"
 inMb: "メガバイト単位"
-iconUrl: "アイコン画像のURL"
+iconUrl: "アイコン画像のURL (faviconなど)"
 bannerUrl: "バナー画像のURL"
 backgroundImageUrl: "背景画像のURL"
 basicInfo: "基本情報"
@@ -396,7 +400,7 @@ userList: "リスト"
 about: "情報"
 aboutMisskey: "Misskeyってなんや？"
 administrator: "管理者"
-token: "トークン"
+token: "確認コード"
 2fa: "二要素認証"
 totp: "認証アプリ"
 totpDescription: "認証アプリ使うてワンタイムパスワードを入れる"
@@ -473,6 +477,8 @@ uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されとるで"
 aboutX: "{x}について"
 useOsNativeEmojis: "OSネイティブの絵文字を使う"
+emojiStyle: "絵文字のスタイル"
+native: "ネイティブ"
 disableDrawer: "メニューをドロワーで表示せぇへん"
 showNoteActionsOnlyHover: "ノートの操作部をホバー時のみ表示するで"
 youHaveNoGroups: "グループがあらへんねぇ。"
@@ -480,6 +486,8 @@ joinOrCreateGroup: "既存のグループに招待してもらうか、新しく
 noHistory: "履歴はないわ。"
 signinHistory: "ログイン履歴"
 disableAnimatedMfm: "動きがやかましいMFMを止める"
+enableAdvancedMfm: "ややこしいMFMもありにする"
+enableAnimatedMfm: "動きがやかましいMFMも許したる"
 doing: "やっとるがな"
 category: "カテゴリ"
 tags: "タグ"
@@ -488,6 +496,8 @@ createAccount: "アカウントを作るで"
 existingAccount: "前に作ったアカウント"
 regenerate: "もっぺん生成するで"
 fontSize: "字の大きさ"
+mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
+limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はあらへんで"
 openImageInNewTab: "画像を新しいタブで開くで"
 dashboard: "ダッシュボード"
@@ -521,6 +531,7 @@ objectStorageUseSSLDesc: "API接続にhttpsを使わん場合はオフにする
 objectStorageUseProxy: "Proxyを使う"
 objectStorageUseProxyDesc: "API接続にproxy使わんのやったら切ってくれへん？"
 objectStorageSetPublicRead: "アップロードした時に'public-read'を設定してや"
+s3ForcePathStyleDesc: "s3ForcePathStyleを使たらバケット名をURLのホスト名やなくてパスの一部として必ず指定させるようになるで。セルフホストされたMinioとかを使うてるんやったら有効にせなあかん場合があるで。"
 serverLogs: "サーバーログ"
 deleteAll: "全部ほかす"
 showFixedPostForm: "タイムラインの上の方で投稿できるようにやってくれへん？"
@@ -659,7 +670,7 @@ reporter: "通報者"
 reporteeOrigin: "通報先"
 reporterOrigin: "通報元"
 forwardReport: "リモートインスタンスに通報を転送するで"
-forwardReportIsAnonymous: "リモートインスタンスからはあんたの情報は見れへんくって、匿名のシステムアカウントとして表示されるで。"
+forwardReportIsAnonymous: "リモートインスタンスからはあんたの情報は見えんなって、匿名のシステムアカウントとして表示されるで。"
 send: "送信"
 abuseMarkAsResolved: "対応したで"
 openInNewTab: "新しいタブで開く"
@@ -869,8 +880,8 @@ themeColor: "テーマカラー"
 size: "大きさ"
 numberOfColumn: "列の数"
 searchByGoogle: "探す"
-instanceDefaultLightTheme: "インスタンスの最初の明るいテーマ"
-instanceDefaultDarkTheme: "インスタンスの最初の暗いテーマ"
+instanceDefaultLightTheme: "インスタンスおすすめの明るいテーマ"
+instanceDefaultDarkTheme: "インスタンスおすすめのの暗いテーマ"
 instanceDefaultThemeDescription: "オブジェクト形式のテーマコードを記入するで。"
 mutePeriod: "ミュートする期間"
 period: "期限"
@@ -884,7 +895,7 @@ reflectMayTakeTime: "反映されるまで時間がかかることがあるで"
 failedToFetchAccountInformation: "アカウントの取得に失敗したみたいや…"
 rateLimitExceeded: "レート制限が超えたみたいやで"
 cropImage: "画像のクロップ"
-cropImageAsk: "画像をクロップしたってええか？"
+cropImageAsk: "画像をクロップしてもええか？"
 cropYes: "切り抜いたる"
 cropNo: "切り抜かへん"
 file: "ファイル"
@@ -919,24 +930,26 @@ sensitiveMediaDetection: "センシティブなメディアの検出"
 localOnly: "ローカルのみ"
 remoteOnly: "リモートのみ"
 failedToUpload: "アップロードに失敗してもうたわ…"
-cannotUploadBecauseInappropriate: "不適切な内容を含むかもしれへんって判定されたでアップロードできまへん。"
-cannotUploadBecauseNoFreeSpace: "ドライブの空き容量が無いでアップロードできまへん。"
+cannotUploadBecauseInappropriate: "不適切な内容を含むかもしれへんって判定されたからアップロードできへんわ。"
+cannotUploadBecauseNoFreeSpace: "ドライブの空き容量が無いからアップロードできへんわ。"
+cannotUploadBecauseExceedsFileSizeLimit: "ファイルサイズの制限超えてるからアップロードできんわ"
 beta: "ベータ"
 enableAutoSensitive: "自動NSFW判定"
 enableAutoSensitiveDescription: "使える時は、機械学習を使って自動でメディアにNSFWフラグを設定するで。この機能をオフにしても、インスタンスによっては自動で設定されることがあるで。"
 activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかとかを判定して積極的に行うで。オフにすると単に文字列として正しいかどうかだけチェックするで。"
 navbar: "ナビゲーションバー"
-shuffle: "シャッフルするで"
+shuffle: "シャッフル"
 account: "アカウント"
-move: "移動するで"
+move: "移動"
 pushNotification: "プッシュ通知"
 subscribePushNotification: "プッシュ通知をオンにするで"
 unsubscribePushNotification: "プッシュ通知を止めるで"
 pushNotificationAlreadySubscribed: "プッシュ通知はオンになってるで"
 pushNotificationNotSupported: "ブラウザかインスタンスがプッシュ通知に対応してないみたいやで。"
-sendPushNotificationReadMessage: "通知やメッセージが既読になったらプッシュ通知を消すで"
-sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」っていう表示が一瞬表示されるようになるで。端末の電池使用量が増える可能性があるで。"
+sendPushNotificationReadMessage: "通知が既読になったらプッシュ通知を消すで"
+sendPushNotificationReadMessageCaption: "端末の電池消費量が増える可能性があるで。"
 windowMaximize: "最大化"
+windowMinimize: "最小化"
 windowRestore: "元に戻す"
 caption: "キャプション"
 loggedInAsBot: "Botアカウントでログイン中やで"
@@ -949,7 +962,7 @@ numberOfLikes: "いいね数"
 show: "表示"
 neverShow: "今後表示しない"
 remindMeLater: "また後で"
-didYouLikeMisskey: "Misskeyを気に入っとっただけましたん？"
+didYouLikeMisskey: "Misskey気に入ってくれた？"
 pleaseDonate: "Misskeyは{host}が使用している無料のソフトウェアやで。これからも開発を続けれるように、寄付したってな～。"
 roles: "ロール"
 role: "ロール"
@@ -959,9 +972,13 @@ assign: "アサイン"
 unassign: "アサインを解除"
 color: "色"
 manageCustomEmojis: "カスタム絵文字の管理"
-youCannotCreateAnymore: "これ以上作れなさそうや"
+youCannotCreateAnymore: "これ以上作れなさそうやわ"
 cannotPerformTemporary: "一時的に利用できへんで"
 cannotPerformTemporaryDescription: "操作回数が制限を超えたから一時的に利用できへんくなったで。ちょっと時間置いてからもう一回やってやー。"
+invalidParamError: "パラメータエラー"
+invalidParamErrorDescription: "リクエストパラメータに問題があるで。だいたいこれはバグやけど、入力した文字数が多すぎるとかの可能性もあるで。"
+permissionDeniedError: "操作が拒否されたわ"
+permissionDeniedErrorDescription: "このアカウントにはこの操作をするための権限があらへんで。"
 preset: "プリセット"
 selectFromPresets: "プリセットから選ぶ"
 achievements: "実績"
@@ -979,6 +996,9 @@ joinThisServer: "このインスタンスに登録するわ"
 exploreOtherServers: "他のインスタンス見てみる"
 letsLookAtTimeline: "タイムライン見てみーや"
 disableFederationWarn: "連合が無効になっとるで。無効にしても投稿は非公開ってわけちゃうねん。大体の場合はこのオプションを有効にする必要は別にないで。"
+disableFederationConfirm: "連合なしにしとくか？"
+disableFederationConfirmWarn: "連合なしにしても投稿は非公開にはならへんで。大体の場合は連合なしにする必要はないで。"
+disableFederationOk: "連合なしにしとく"
 invitationRequiredToRegister: "今このインスタンス招待制になってもうてんねん。招待コードを持っとるんやったら登録できるで。"
 emailNotSupported: "このインスタンスはメール配信がサポートされてへんみたいやわ"
 postToTheChannel: "チャンネルに投稿"
@@ -1001,6 +1021,41 @@ retryAllQueuesConfirmText: "一時的にサーバー重なるかもしれへん
 enableChartsForRemoteUser: "リモートユーザーのチャートを作る"
 enableChartsForFederatedInstances: "リモートインスタンスのチャートを作る"
 showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
+largeNoteReactions: "ノートのリアクションを大きする"
+noteIdOrUrl: "ノートIDかURL"
+video: "動画"
+videos: "動画"
+dataSaver: "データセーバー"
+accountMigration: "アカウントのお引っ越し"
+accountMoved: "このユーザーはさらのアカウントに引っ越したで："
+forceShowAds: "常に広告を表示しとく"
+addMemo: "メモを追加"
+editMemo: "メモをいじる"
+notificationDisplay: "通知の表示"
+leftTop: "左上"
+rightTop: "右上"
+leftBottom: "左下"
+rightBottom: "右下"
+stackAxis: "スタック方向"
+vertical: "縦"
+horizontal: "横"
+position: "位置"
+serverRules: "インスタンスルール"
+pleaseConfirmBelowBeforeSignup: "このインスタンスに登録する前に、以下を確認してな。"
+pleaseAgreeAllToContinue: "続けるには、全ての「同意したる」にチェックが入ってないとあかんで。"
+continue: "続ける"
+
+_serverRules:
+  description: "新規登録前に見せる、インスタンスの簡潔なルールを設定するで。内容は利用規約の要約にしとくとええで。"
+
+_accountMigration:
+  moveTo: "このアカウントをさらのアカウントに引っ越すで"
+  moveToLabel: "引っ越し先のアカウント："
+  moveAccountDescription: "この操作は戻されへんで。まず引っ越し先のアカウントでこのアカウントへのエイリアスが作れたか確認してきなはれや。エイリアスができてたら、引っ越し先のアカウントをこんな風に入力してくれへんか？：@person@instance.com"
+  moveFrom: "別のアカウントからこのアカウントに引っ越す"
+  moveFromLabel: "引っ越し元のアカウント："
+  moveFromDescription: "別のアカウントからこのアカウントにフォロワーを引き継いで引っ越したかったら、ここでエイリアスを作っとく必要があるで。必ずお引っ越しを実行する前に作っとかなあかんで！引っ越し元のアカウントをこんな風に入力してくれへんか？：@person@instance.com"
+  migrationConfirm: "ほんまにこのアカウントを {account} に引っ越すんか？一回引っ越してもうたら取り消されへんし、二度とこのアカウントを元に戻されへんくなるで。\nそれと、引っ越し先のアカウントでエイリアスが作れたかちゃ～んと確認しーや？"
 
 _achievements:
   earnedAt: "貰った日ぃ"
@@ -1062,7 +1117,7 @@ _achievements:
     _login7:
       title: "ビギナーⅡ"
       description: "通算7日ログインした"
-      flavor: "慣れてきたんちゃう？"
+      flavor: "慣れてきたんとちゃう？"
     _login15:
       title: "ビギナーⅢ"
       description: "通算15日ログインした"
@@ -1166,13 +1221,16 @@ _achievements:
     _iLoveMisskey:
       title: "Misskey好きやねん"
       description: "\"I ❤ #Misskey\"を投稿した"
-      flavor: "Misskeyを使ってくれてありがとうな～　by 開発チーム"
+      flavor: "Misskeyを使ってくれておおきにな～　by 開発チーム"
     _foundTreasure:
       title: "なんでも鑑定団"
       description: "隠されたお宝を発見した"
     _client30min:
       title: "ねんね"
       description: "クライアントを起動してから30分以上経過した"
+    _client60min:
+      title: "Misskeyの見すぎ"
+      description: "クライアントを起動してから60分以上経過した"
     _noteDeletedWithin1min:
       title: "＊おおっと＊"
       description: "投稿してから1分以内にその投稿を消した"
@@ -1229,7 +1287,7 @@ _achievements:
     _loggedInOnNewYearsDay:
       title: "あけましておめでとうございます！"
       description: "元旦にログインした"
-      flavor: "今年も弊インスタンスをよろしくお願いします"
+      flavor: "今年も弊インスタンスをよろしゅう頼みますわ"
     _cookieClicked:
       title: "クッキー叩くやつ"
       description: "クッキー叩いてもうた"
@@ -1246,7 +1304,7 @@ _role:
   description: "ロールの説明"
   permission: "ロールの権限"
   descriptionOfPermission: "<b>モデレーター</b>は基本的なモデレーションに関わる操作を行えるで。\n<b>管理者</b>はインスタンスの全ての設定を変更できるで。"
-  assignTarget: "アサインターゲット"
+  assignTarget: "アサイン"
   descriptionOfAssignTarget: "<b>マニュアル</b>は誰がこのロールに含まれてるかを手動で管理するで。\n<b>コンディショナル</b>は条件を設定して、それに合うユーザーが自動で含まれるようになるで。"
   manual: "マニュアル"
   conditional: "コンディショナル"
@@ -1262,6 +1320,8 @@ _role:
   iconUrl: "アイコン画像のURL"
   asBadge: "バッジとして見せる"
   descriptionOfAsBadge: "オンにすると、ユーザー名の横んとこにロールのアイコンが表示されるで。"
+  isExplorable: "ロールタイムラインを公開"
+  descriptionOfIsExplorable: "オンにすると、ロールのタイムラインを公開するで。ロールの公開がオフのとき、タイムラインの公開はされないで。"
   displayOrder: "表示順"
   descriptionOfDisplayOrder: "数がでかいほど、UI上で先に表示されるで。"
   canEditMembersByModerator: "モデレーターのメンバー編集を許可"
@@ -1287,7 +1347,7 @@ _role:
     userListMax: "ユーザーリストの作成可能数"
     userEachUserListsMax: "ユーザーリスト内のユーザーの最大数"
     rateLimitFactor: "レートリミット"
-    descriptionOfRateLimitFactor: "ちっちゃいほど制限が緩くなって、大きいほど制限されるで。"
+    descriptionOfRateLimitFactor: "ちっちゃいほど制限が緩なって、大きいほど制限されるで。"
     canHideAds: "広告を表示させへん"
     canSearchNotes: "ノート検索を使わすかどうか"
   _condition:
@@ -1494,6 +1554,8 @@ _channel:
   following: "フォロー中やで"
   usersCount: "{n}人が参加中やで"
   notesCount: "{n}こ投稿があるで"
+  nameAndDescription: "名前と説明"
+  nameOnly: "名前だけ"
 
 _menuDisplay:
   sideFull: "横"
@@ -2268,8 +2330,9 @@ _deck:
     antenna: "アンテナ"
     list: "リスト"
     channel: "チャンネル"
-    mentions: "あんた宛て"
+    mentions: "うち宛て"
     direct: "ダイレクト"
+    roleTimeline: "ロールタイムライン"
 
 _dialog:
   charactersExceeded: "最大の文字数を上回っとるで！今は {current} / 最大でも {max}"
diff --git a/locales/jbo-EN.yml b/locales/jbo-EN.yml
index cd21505a47e5..ed97d539c095 100644
--- a/locales/jbo-EN.yml
+++ b/locales/jbo-EN.yml
@@ -1,2 +1 @@
 ---
-
diff --git a/locales/kab-KAB.yml b/locales/kab-KAB.yml
index 6eeb898c33d2..19dc0e403e58 100644
--- a/locales/kab-KAB.yml
+++ b/locales/kab-KAB.yml
@@ -127,4 +127,3 @@ _deck:
   _columns:
     notifications: "Ilɣuyen"
     list: "Tibdarin"
-
diff --git a/locales/kn-IN.yml b/locales/kn-IN.yml
index d1e60071296b..124736a73895 100644
--- a/locales/kn-IN.yml
+++ b/locales/kn-IN.yml
@@ -86,4 +86,3 @@ _deck:
     favorites: "ಮೆಚ್ಚಿನವುಗಳು"
     tl: "ಸಮಯಸಾಲು"
     mentions: "ಹೆಸರಿಸಿದ"
-
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index 74280aecd6b8..2563e40c68bf 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -473,6 +473,8 @@ uiLanguage: "UI 표시 언어"
 groupInvited: "그룹에 초대되었습니다"
 aboutX: "{x}에 대하여"
 useOsNativeEmojis: "OS 기본 이모지를 사용"
+emojiStyle: "이모지 스타일"
+native: "네이티브"
 disableDrawer: "드로어 메뉴를 사용하지 않기"
 showNoteActionsOnlyHover: "노트 액션 버튼을 마우스를 올렸을 때에만 표시"
 youHaveNoGroups: "그룹이 없습니다"
@@ -480,6 +482,8 @@ joinOrCreateGroup: "다른 그룹의 초대를 받거나, 직접 새 그룹을 
 noHistory: "기록이 없습니다"
 signinHistory: "로그인 기록"
 disableAnimatedMfm: "움직임이 있는 MFM을 비활성화"
+enableAdvancedMfm: "고급 MFM을 활성화"
+enableAnimatedMfm: "움직임이 있는 MFM을 활성화"
 doing: "잠시만요"
 category: "카테고리"
 tags: "태그"
diff --git a/locales/lo-LA.yml b/locales/lo-LA.yml
index 5736fa67a7b6..3f97b3982ca3 100644
--- a/locales/lo-LA.yml
+++ b/locales/lo-LA.yml
@@ -163,11 +163,15 @@ instanceInfo: "ອີນສະແຕນ"
 statistics: "ສະຖິຕິ"
 clearQueue: "ລ້າງຄິວ"
 clearCachedFiles: "ລຶບລ້າງແຄສ"
+noUsers: "ບໍ່ພົບຜູ້ໃຊ້"
 editProfile: "ແກ້ໄຂໂປຣໄຟລ໌"
 done: "ສຳເລັດ"
 processing: "ກຳລັງປະມວນຜົນ"
 preview: "ສະແດງເປັນຕົວຢ່າງ"
 default: "ຄ່າເລີ່ມຕົ້ນ"
+defaultValueIs: "ຄ່າເລີ່ມຕົ້ນ: {value}"
+noCustomEmojis: "ບໍ່ມີອີໂມຈິ"
+noJobs: "ບໍ່ມີຊິ້ນວຽກ"
 federating: "ສະຫະພັນ"
 blocked: "ບລັອກແລ້ວ "
 suspended: "ໂຈະ"
@@ -182,6 +186,9 @@ changePassword: "ປ່ຽນ​ລະ​ຫັດ​ຜ່ານ"
 security: "ຄວາມປອດໄພ"
 retypedNotMatch: "ວັດສະດຸປ້ອນບໍ່ກົງກັນ"
 currentPassword: "ລະຫັດຜ່ານປະຈຸບັນ"
+newPassword: "ລະຫັດຜ່ານໃໝ່"
+newPasswordRetype: "ໃສ່ລະຫັດຜ່ານໃໝ່ອີກເທື່ອໜຶ່ງ"
+attachFile: "ແນບໄຟລ໌"
 more: "ເພີ່ມເຕີມ!"
 featured: "ໄຮໄລທ໌"
 usernameOrUserId: "ຊື່ຜູ້ໃຊ້ ຫຼື id ຜູ້ໃຊ້"
@@ -196,25 +203,31 @@ saved: "ບັນທຶກແລ້ວ"
 messaging: "ແຊ໋ດ"
 upload: "ອັບໂຫຼດ"
 keepOriginalUploading: "ຮັກສາຮູບພາບຕົ້ນສະບັບ"
+fromDrive: "ຈາກ Drive"
 fromUrl: "ຈາກ URL"
 uploadFromUrl: "ອັບໂຫຼດຈາກ URL"
 uploadFromUrlDescription: "URL ຂອງໄຟລ໌ທີ່ທ່ານຕ້ອງການອັບໂຫລດ"
+uploadFromUrlRequested: "ຮ້ອງຂໍການອັບໂຫລດ"
 messageRead: "ອ່ານແລ້ວ"
 startMessaging: "ເລີ່ມການສົນທະນາໃໝ່"
 nUsersRead: "ອ່ານໂດຍ {n}"
 tos: "ເງື່ອນໄຂການໃຫ້ບໍລິການ"
 start: "ເລີ່ມຕົ້ນນຳໃຊ້ເລີຍ"
 home: "ໜ້າຫຼັກ"
+activity: "ກິດຈະກຳ"
 images: "ຮູບພາບ"
 birthday: "ວັນເກີດ"
 yearsOld: "{age} ປີ"
 registeredDate: "ວັນທີ່ເປັນສະມາຊິກ"
 location: "ທີ່ຕັ້ງ"
 theme: "ແທ໋ມ"
+themeForLightMode: "ຮູບແບບສີສັນເພື່ອໃຊ້ໃນໂໝດແສງ"
+themeForDarkMode: "ຮູບແບບສີສັນທີ່ຈະໃຊ້ຢູ່ໃນໂໝດມືດ"
 light: "ສະຫວ່າງ"
 dark: "ມືດ"
 lightThemes: "ຊຸດຮູບແບບສະຫວ່າງ"
 darkThemes: "ຮູບແບບສີສັນມືດ"
+syncDeviceDarkMode: "ຊິງຄ໌ໂໝດມືດກັບການຕັ້ງຄ່າທົ່ວອຸປະກອນ"
 drive: "ຂັບ"
 fileName: "ຊື່ໄຟລ໌"
 selectFile: "ເລືອກໄຟລ໌"
@@ -265,6 +278,9 @@ invite: "ເຊີນ"
 driveCapacityPerLocalAccount: "ຄວາມອາດສາມາດຂັບຕໍ່ຜູ້ໃຊ້ທ້ອງຖິ່ນ"
 driveCapacityPerRemoteAccount: "ໄດຣຟ໌ຄວາມອາດສາມາດຕໍ່ຜູ້ໃຊ້ທາງໄກ"
 pinnedNotes: "ບັນທຶກທີ່ປັກໝຸດໄວ້"
+turnstileSiteKey: "ກະແຈໄຊທ໌"
+turnstileSecretKey: "ກະແຈລັບ"
+name: "ຊື່"
 userList: "ລາຍການ"
 about: "ກ່ຽວກັບ"
 aboutMisskey: "ກ່ຽວກັບ Misskey"
@@ -326,6 +342,7 @@ _widgets:
   instanceInfo: "ອີນສະແຕນ"
   notifications: "ການແຈ້ງເຕືອນ"
   timeline: "​ເສັ້ນກຳ​ນົດ​ເວ​ລາ​"
+  activity: "ກິດຈະກຳ"
   federation: "ສະຫະພັນ"
   _userList:
     chooseList: "ເລືອກບັນຊີລາຍການ"
@@ -335,6 +352,7 @@ _visibility:
   home: "ໜ້າຫຼັກ"
   followers: "ຜູ້ຕິດຕາມ"
 _profile:
+  name: "ຊື່"
   username: "ຊື່ຜູ້ໃຊ້"
 _exportOrImport:
   followingList: "ກຳລັງຕິດຕາມ"
@@ -368,4 +386,5 @@ _deck:
     list: "ລາຍການ"
     channel: "ຊ່ອງ"
     mentions: "ກ່າວເຖິງ"
-
+_webhookSettings:
+  name: "ຊື່"
diff --git a/locales/nl-NL.yml b/locales/nl-NL.yml
index 7ecc8dd105aa..36a5e836e6ed 100644
--- a/locales/nl-NL.yml
+++ b/locales/nl-NL.yml
@@ -511,4 +511,3 @@ _deck:
     mentions: "Vermeldingen"
 _webhookSettings:
   name: "Naam"
-
diff --git a/locales/no-NO.yml b/locales/no-NO.yml
index 36a0a2e0e3c7..83e189b9cf1c 100644
--- a/locales/no-NO.yml
+++ b/locales/no-NO.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Norsk Bokmål"
-
diff --git a/locales/pl-PL.yml b/locales/pl-PL.yml
index 90b64fc6b75e..af15979f02a2 100644
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -466,6 +466,8 @@ uiLanguage: "Język wyświetlania UI"
 groupInvited: "Zaproszony(-a) do grupy"
 aboutX: "O {x}"
 useOsNativeEmojis: "Używaj natywnych Emoji systemu"
+emojiStyle: "Styl emoji"
+native: "Natywny"
 disableDrawer: "Nie używaj menu w stylu szuflady"
 youHaveNoGroups: "Nie masz żadnych grup"
 joinOrCreateGroup: "Uzyskaj zaproszenie do dołączenia do grupy lub utwórz własną grupę."
@@ -1691,4 +1693,3 @@ _deck:
 _webhookSettings:
   name: "Nazwa"
   active: "Właczono"
-
diff --git a/locales/pt-PT.yml b/locales/pt-PT.yml
index a34c2722e050..15c22c8a2989 100644
--- a/locales/pt-PT.yml
+++ b/locales/pt-PT.yml
@@ -742,4 +742,3 @@ _deck:
     direct: "Notas diretas"
 _webhookSettings:
   name: "Nome"
-
diff --git a/locales/ro-RO.yml b/locales/ro-RO.yml
index 9c02acfb102e..4e4c8d2799e5 100644
--- a/locales/ro-RO.yml
+++ b/locales/ro-RO.yml
@@ -748,4 +748,3 @@ _deck:
     mentions: "Mențiuni"
 _webhookSettings:
   name: "Nume"
-
diff --git a/locales/ru-RU.yml b/locales/ru-RU.yml
index e9f79690e02e..05785a4511f6 100644
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@@ -470,12 +470,16 @@ uiLanguage: "Язык интерфейса"
 groupInvited: "Приглашение в группу"
 aboutX: "Описание {x}"
 useOsNativeEmojis: "Использовать эмодзи операционной системы"
+emojiStyle: "Стиль эмодзи"
+native: "Системные"
 disableDrawer: "Не использовать выдвижные меню"
 youHaveNoGroups: "У вас нет ни одной группы"
 joinOrCreateGroup: "Получайте приглашения в группы или создавайте свои собственные"
 noHistory: "История пока пуста"
 signinHistory: "Журнал посещений"
 disableAnimatedMfm: "Отключение анимированной разметки MFM"
+enableAdvancedMfm: "Включить расширенный MFM"
+enableAnimatedMfm: "Включить анимированную разметку MFM"
 doing: "В процессе"
 category: "Категория"
 tags: "Метки"
@@ -2173,4 +2177,3 @@ _dialog:
 _webhookSettings:
   name: "Название"
   active: "Вкл."
-
diff --git a/locales/si-LK.yml b/locales/si-LK.yml
index cd21505a47e5..ed97d539c095 100644
--- a/locales/si-LK.yml
+++ b/locales/si-LK.yml
@@ -1,2 +1 @@
 ---
-
diff --git a/locales/sk-SK.yml b/locales/sk-SK.yml
index 19d75c4ca460..a4d1354193ce 100644
--- a/locales/sk-SK.yml
+++ b/locales/sk-SK.yml
@@ -470,6 +470,8 @@ uiLanguage: "Jazyk používateľského prostredia"
 groupInvited: "Pozvať do skupiny"
 aboutX: "O {x}"
 useOsNativeEmojis: "Používať natívne emoji z OS"
+emojiStyle: "Štýl emoji"
+native: "Natívne"
 disableDrawer: "Nepoužívať šuflíkové menu"
 showNoteActionsOnlyHover: "Ovládacie prvky poznámky sa zobrazujú len po nabehnutí myši"
 youHaveNoGroups: "Nemáte žiadne skupiny"
@@ -477,6 +479,8 @@ joinOrCreateGroup: "Požiadajte o pozvanie do existujúcej skupiny alebo vytvort
 noHistory: "Žiadna história"
 signinHistory: "História prihlásení"
 disableAnimatedMfm: "Vypnúť MFM s animáciou"
+enableAdvancedMfm: "Povolenie pokročilého MFM"
+enableAnimatedMfm: "Povoliť animované MFM"
 doing: "Pracujem..."
 category: "Kategórie"
 tags: "Značky"
@@ -1813,4 +1817,3 @@ _deck:
 _webhookSettings:
   name: "Názov"
   active: "Zapnuté"
-
diff --git a/locales/sv-SE.yml b/locales/sv-SE.yml
index 70a20c416495..4b61e0ce0b24 100644
--- a/locales/sv-SE.yml
+++ b/locales/sv-SE.yml
@@ -344,9 +344,16 @@ recentlyRegisteredUsers: "Nyligen registrerade användare"
 userList: "Listor"
 aboutMisskey: "Om Misskey"
 administrator: "Administratör"
+passwordLessLogin: "Lösenordsfri inloggning"
+passwordLessLoginDescription: "Tillåter lösenordsfri inloggning med endast en säkerhetsnyckel eller en passkey."
+resetPassword: "Återställ Lösenord"
 newPasswordIs: "Det nya lösenordet är \"{password}\""
 share: "Dela"
 enable: "Aktivera"
+weakPassword: "Svagt Lösenord"
+normalPassword: "Medel Lösenord"
+strongPassword: "Starkt Lösenord"
+signinFailed: "Kan inte logga in. Det angivna användarnamnet eller lösenordet är felaktigt."
 serviceworkerInfo: "Måste vara aktiverad för pushnotiser."
 enableInfiniteScroll: "Ladda mer automatiskt"
 enablePlayer: "Öppna videospelare"
@@ -355,11 +362,14 @@ enableEmail: "Aktivera epost-utskick"
 smtpHost: "Värd"
 smtpUser: "Användarnamn"
 smtpPass: "Lösenord"
+emptyToDisableSmtpAuth: "Lämna användarnamn och lösenord tomt för att avaktivera SMTP verifiering"
 clearCache: "Rensa cache"
+onlineUsersCount: "{n} användare är online"
 enabled: "Aktiverad"
 user: "Användare"
 global: "Global"
 squareAvatars: "Visa fyrkantiga profilbilder"
+incorrectPassword: "Fel lösenord."
 searchByGoogle: "Sök"
 file: "Filer"
 enableAutoSensitive: "Automatisk NSFW markering"
@@ -369,6 +379,15 @@ subscribePushNotification: "Aktivera pushnotiser"
 unsubscribePushNotification: "Avaktivera pushnotiser"
 pushNotificationAlreadySubscribed: "Pushnotiser är redan aktiverade"
 pushNotificationNotSupported: "Din webbläsare eller instans har inte stöd för pushnotiser"
+windowMaximize: "Maximera"
+windowMinimize: "Minimera"
+windowRestore: "Återställ"
+resetPasswordConfirm: "Återställ verkligen ditt lösenord?"
+_achievements:
+  _types:
+    _open3windows:
+      title: "Flera Fönster"
+      description: "Ha minst 3 fönster öppna samtidigt"
 _email:
   _follow:
     title: "följde dig"
@@ -390,6 +409,7 @@ _sfx:
   chat: "Chatt"
   antenna: "Antenner"
 _2fa:
+  passwordToTOTP: "Skriv in ditt lösenord"
   renewTOTPCancel: "Nej tack"
 _antennaSources:
   all: "Alla noter"
@@ -469,4 +489,3 @@ _deck:
     mentions: "Omnämningar"
 _webhookSettings:
   active: "Aktiverad"
-
diff --git a/locales/th-TH.yml b/locales/th-TH.yml
index 30c6532163d6..9685134902d6 100644
--- a/locales/th-TH.yml
+++ b/locales/th-TH.yml
@@ -122,6 +122,8 @@ unmarkAsSensitive: "ยกเลิกทำเครื่องหมายเ
 enterFileName: "พิมพ์ชื่อไฟล์"
 mute: "ปิดเสียง"
 unmute: "ยกเลิกการปิดเสียง"
+renoteMute: "ปิดเสียงรีโน้ต"
+renoteUnmute: "เปิดเสียง รีโน้ต"
 block: "บล็อค"
 unblock: "เลิกปิดกั้น"
 suspend: "ถูกระงับ"
@@ -153,6 +155,7 @@ flagShowTimelineReplies: "แสดงตอบกลับ ในไทม์
 flagShowTimelineRepliesDescription: "แสดงการตอบกลับของผู้ใช้งานไปยังโน้ตของผู้ใช้งานรายอื่นๆในไทม์ไลน์หากได้เปิดเอาไว้"
 autoAcceptFollowed: "อนุมัติคำขอติดตามโดยอัตโนมัติทันที จากผู้ใช้งานที่คุณกำลังติดตาม"
 addAccount: "เพิ่มบัญชี"
+reloadAccountsList: "รีโหลดรายการบัญชีใหม่"
 loginFailed: "การเข้าสู่ระบบไม่สำเร็จ"
 showOnRemote: "ดูบนอินสแตนซ์ระยะไกล"
 general: "ทั่วไป"
@@ -470,6 +473,8 @@ uiLanguage: "ภาษาอินเทอร์เฟซผู้ใช้ง
 groupInvited: "คุณได้รับเชิญให้เข้าร่วมกลุ่ม"
 aboutX: "เกี่ยวกับ {x}"
 useOsNativeEmojis: "ใช้อีโมจิ OS แบบดั้งเดิม"
+emojiStyle: "สไตล์อิโมจิ"
+native: "ภาษาแม่"
 disableDrawer: "อย่าใช้ลิ้นชักสไตล์เมนู"
 showNoteActionsOnlyHover: "แสดงการดำเนินการเฉพาะโน้ตเมื่อโฮเวอร์"
 youHaveNoGroups: "คุณยังไม่มีกลุ่ม"
@@ -477,6 +482,8 @@ joinOrCreateGroup: "รับเชิญเข้าร่วมกลุ่ม
 noHistory: "ไม่มีรายการ"
 signinHistory: "ประวัติการเข้าสู่ระบบ"
 disableAnimatedMfm: "ปิดการใช้งาน MFM ด้วยแอนิเมชั่น"
+enableAdvancedMfm: "เปิดใช้งาน MFM ขั้นสูง"
+enableAnimatedMfm: "เปิดการใช้งาน MFM ด้วยแอนิเมชั่น"
 doing: "กำลังประมวลผล......"
 category: "หมวดหมู่"
 tags: "แท็ก"
@@ -518,6 +525,7 @@ objectStorageUseSSLDesc: "ปิดการทำงานนี้ไว้ 
 objectStorageUseProxy: "เชื่อมต่อผ่านพร็อกซี"
 objectStorageUseProxyDesc: "ปิดสิ่งนี้ไว้ถ้าหากคุณจะไม่ใช้ Proxy สำหรับการเชื่อมต่อ API"
 objectStorageSetPublicRead: "ตั้งค่า \"public-read\" ในการอัปโหลด"
+s3ForcePathStyleDesc: "ถ้าหากเปิดใช้งาน s3ForcePathStyle ชื่อบัคเก็ตนั้นอาจจะต้องรวมอยู่ในเส้นทางของ URL ซึ่งตรงข้ามกับชื่อโฮสต์ของ URL คุณอาจจะต้องเปิดใช้งานการตั้งค่านี้เมื่อใช้บริการต่างๆ เช่น อินสแตนซ์ Minio ที่โฮสต์เองนะ"
 serverLogs: "บันทึกของเซิร์ฟเวอร์"
 deleteAll: "ลบทั้งหมด"
 showFixedPostForm: "แสดงแบบฟอร์มการโพสต์ที่ด้านบนสุดของไทม์ไลน์"
@@ -560,7 +568,9 @@ userSilenced: "ผู้ใช้รายนี้กำลังถูกป
 yourAccountSuspendedTitle: "บัญชีนี้นั้นถูกระงับ"
 yourAccountSuspendedDescription: "บัญชีนี้ถูกระงับ เนื่องจากละเมิดข้อกำหนดในการให้บริการของเซิร์ฟเวอร์หรืออาจจะละเมิดหลักเกณฑ์ชุมชน หรือ อาจจะโดนร้องเรียนเรื่องการละเมิดลิขสิทธิ์และอื่นๆอย่างต่อเนื่องซ้ำๆ หากคุณคิดว่าไม่ได้ทำผิดจริงๆหรือตัดสินผิดพลาด ได้โปรดกรุณาติดต่อผู้ดูแลระบบหากคุณต้องการทราบเหตุผลโดยละเอียดเพิ่มเติม และขอความกรุณาอย่าสร้างบัญชีใหม่"
 tokenRevoked: "โทเค็นไม่ถูกต้อง"
+tokenRevokedDescription: "โทเค็นนี้หมดอายุแล้วนะค่ะกรุณาเข้าสู่ระบบอีกครั้งนะ"
 accountDeleted: "ลบบัญชีแล้ว"
+accountDeletedDescription: "บัญชีนี้ถูกลบไปแล้วนะ"
 menu: "เมนู"
 divider: "ตัวแบ่ง"
 addItem: "เพิ่มรายการ"
@@ -932,6 +942,7 @@ pushNotificationNotSupported: "เบราว์เซอร์หรืออ
 sendPushNotificationReadMessage: "ลบการแจ้งเตือนแบบพุชเมื่ออ่านการแจ้งเตือนหรือข้อความที่เกี่ยวข้องแล้ว"
 sendPushNotificationReadMessageCaption: "การแจ้งเตือนที่มีข้อความ \"{emptyPushNotificationMessage}\" จะแสดงขึ้นมาในช่วงระยะเวลาสั้นๆ การดำเนินการนี้อาจทำให้เพิ่มการใช้งานแบตเตอรี่ของอุปกรณ์ถ้าหากมีนะ"
 windowMaximize: "ขยายใหญ่สุดแล้ว"
+windowMinimize: "ย่อเล็กที่สุด"
 windowRestore: "เลิกทำ"
 caption: "รายละเอียด"
 loggedInAsBot: "ล็อกอินเป็นบอตอยู่ในขณะนี้"
@@ -974,11 +985,17 @@ joinThisServer: "ลงชื่อสมัครใช้ในอินสแ
 exploreOtherServers: "มองหาอินสแตนซ์อื่น"
 letsLookAtTimeline: "ลองดูที่ไทม์ไลน์"
 disableFederationWarn: "การดำเนินการนี้ถ้าหากจะปิดใช้งานการรวมศูนย์ แต่โพสต์ดังกล่าวนั้นจะยังคงเป็นสาธารณะต่อไป ยกเว้นแต่ว่าจะตั้งค่าเป็นอย่างอื่น โดยปกติคุณไม่จำเป็นต้องใช้การตั้งค่านี้นะ"
+disableFederationConfirm: "ปิดใช้งานสหพันธ์จริงๆหรอแน่ใจแล้วนะ?"
+disableFederationConfirmWarn: "แม้ว่าจะถูกยกเลิกเอาไว้โพสต์ดังกล่าวนั้นจะยังคงเป็นสาธารณะต่อไป เว้นแต่ว่า...จะตั้งค่าเป็นอย่างอื่น โดยปกติคุณไม่จำเป็นต้องทำตรงนี้หรอกนะค่ะ"
+disableFederationOk: "ปิดการใช้งาน"
 invitationRequiredToRegister: "อินสแตนซ์นี้เป็นแบบรับเชิญเท่านั้น คุณต้องป้อนรหัสเชิญที่ถูกต้องถึงจะลงทะเบียนได้นะค่ะ"
 emailNotSupported: "อินสแตนซ์นี้ไม่รองรับการส่งอีเมลนะค่ะ"
 postToTheChannel: "โพสต์ลงช่อง"
 cannotBeChangedLater: "สิ่งนี้ไม่สามารถเปลี่ยนแปลงได้ในภายหลังนะ"
+reactionAcceptance: "การยอมรับรีแอคชั่น"
 likeOnly: "ที่ชอบเท่านั้น"
+likeOnlyForRemote: "ไลค์สำหรับอินสแตนซ์ระยะไกลเท่านั้น"
+rolesAssignedToMe: "บทบาทที่ได้รับมอบหมายให้ฉัน"
 resetPasswordConfirm: "รีเซ็ตรหัสผ่านของคุณจริงๆหรอ?"
 sensitiveWords: "คำที่ละเอียดอ่อน"
 sensitiveWordsDescription: "การเปิดเผยโน้ตทั้งหมดที่มีคำที่กำหนดค่าไว้จะถูกตั้งค่าเป็น \"หน้าแรก\" โดยอัตโนมัติ คุณยังสามารถแสดงหลายรายการได้โดยแยกรายการโดยใช้ตัวแบ่งบรรทัดได้นะ"
@@ -990,6 +1007,22 @@ drivecleaner: "ทำความสะอาดไดรฟ์"
 retryAllQueuesNow: "ลองเรียกใช้คิวทั้งหมดอีกครั้ง"
 retryAllQueuesConfirmTitle: "ลองใหม่ทั้งหมดจริงๆหรอแน่ใจนะ?"
 retryAllQueuesConfirmText: "สิ่งนี้จะเพิ่มการโหลดเซิร์ฟเวอร์ชั่วคราวนะ"
+enableChartsForRemoteUser: "สร้างแผนภูมิข้อมูลผู้ใช้ระยะไกล"
+enableChartsForFederatedInstances: "สร้างแผนภูมิข้อมูลอินสแตนซ์ระยะไกล"
+showClipButtonInNoteFooter: "เพิ่ม \"คลิป\" เพื่อบันทึกเมนูการทำงาน"
+largeNoteReactions: "ขยายรีแอคชั่นการแสดงผล"
+noteIdOrUrl: "โน้ต ID หรือ URL"
+accountMigration: "การโยกย้ายบัญชี"
+accountMoved: "ผู้ใช้รายนี้ได้ย้ายไปยังบัญชีใหม่แล้ว:"
+forceShowAds: "แสดงโฆษณาเสมอ"
+_accountMigration:
+  moveTo: "ย้ายข้อมูลบัญชีนี้ไปยังบัญชีอีกหนึ่ง"
+  moveToLabel: "บัญชีที่จะย้ายไปที่:"
+  moveAccountDescription: "การกระทำนี้ไม่สามารถย้อนกลับได้นะ ขั้นตอนแรก ต้องสร้างนามแฝงสำหรับบัญชีนี้ในบัญชีที่คุณต้องการย้ายไป หลังจากนั้นแล้ว ป้อนบัญชีที่จะย้ายไปในรูปแบบดังต่อไปนี้: @person@instance.com"
+  moveFrom: "ย้ายข้อมูลบัญชีอื่นไปยังอีกบัญชีนี้หนึ่ง"
+  moveFromLabel: "บัญชีที่จะย้ายจาก:"
+  moveFromDescription: "สร้างนามแฝงสำหรับบัญชีที่จะย้ายจากบัญชีนี้ ถ้าหากคุณต้องการโอนผู้ติดตาม สิ่งนี้ต้องทำก่อนโอนก่อนนะค่ะ! หลังจากนั้น ป้อนบัญชีที่จะย้ายไปในรูปแบบต่อไปนี้: @person@instance.com"
+  migrationConfirm: "ย้ายข้อมูลบัญชีนี้ไปที่ {account} จริงๆนะ เมื่อมีการเริ่มต้นแล้ว กระบวนการนี้จะไม่สามารถหยุดหรือนำกลับคืนมาได้ และคุณจะไม่สามารถใช้บัญชีนี้ในสถานะดั้งเดิมได้อีกต่อไป\n\nนอกจากนี้ เพื่อให้แน่ใจยืนยันว่าคุณได้สร้างนามแฝงในบัญชีที่จะย้ายข้อมูลนะค่ะ"
 _achievements:
   earnedAt: "ได้รับเมื่อ"
   _types:
@@ -1286,6 +1319,8 @@ _role:
     followersMoreThanOrEq: "จำนวนผู้ติดตามมากกว่าหรือเท่ากับ\n"
     followingLessThanOrEq: "จำนวนบัญชีต่อไปนี้คือ น้อยกว่าหรือเท่ากับ"
     followingMoreThanOrEq: "จำนวนบัญชีต่อไปนี้คือ มากกว่าหรือเท่ากับ"
+    notesLessThanOrEq: "จำนวนโพสต์น้อยกว่าเท่ากับ"
+    notesMoreThanOrEq: "จำนวนโพสต์มากกว่าเท่ากับ"
     and: "และ"
     or: "หรือ"
     not: "ไม่"
@@ -1970,6 +2005,16 @@ _drivecleaner:
   orderBySizeDesc: "ขนาดไฟล์จากมากไปหาน้อย"
   orderByCreatedAtAsc: "วันที่จากน้อยไปหามาก"
 _webhookSettings:
+  createWebhook: "สร้าง Webhook"
   name: "ชื่อ"
+  secret: "ความลับ"
+  events: "อีเว้นท์ Webhook"
   active: "เปิดใช้งาน"
-
+  _events:
+    follow: "เมื่อกำลังติดตามผู้ใช้"
+    followed: "เมื่อกำลังติดตามแล้ว"
+    note: "เมื่อกำลังโพสต์โน้ต"
+    reply: "เมื่อได้รับการตอบกลับ"
+    renote: "รีโน้ตแล้วเมื่อ"
+    reaction: "เมื่อได้รับรีแอคชั่น"
+    mention: "เมื่อกำลังถูกกล่าวถึง"
diff --git a/locales/tr-TR.yml b/locales/tr-TR.yml
index 48cf6319ba5e..dcbe8c7608ee 100644
--- a/locales/tr-TR.yml
+++ b/locales/tr-TR.yml
@@ -63,4 +63,3 @@ _deck:
     notifications: "Bildirim"
     favorites: "Favoriler"
     tl: "Zaman çizelgesi"
-
diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
index d215121df04c..28b2c7a90eb0 100644
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@@ -469,6 +469,8 @@ joinOrCreateGroup: "Отримуйте запрошення до груп або
 noHistory: "Історія порожня"
 signinHistory: "Історія входів"
 disableAnimatedMfm: "Відключити анімації MFM"
+enableAdvancedMfm: "Увімкнути розширений MFM"
+enableAnimatedMfm: "Увімкнути анімований MFM"
 doing: "Виконується"
 category: "Категорія"
 tags: "Теги"
@@ -1963,4 +1965,3 @@ _deck:
 _webhookSettings:
   name: "Ім'я"
   active: "Увімкнено"
-
diff --git a/locales/vi-VN.yml b/locales/vi-VN.yml
index 6738a59e5cf0..bdc146abf1b0 100644
--- a/locales/vi-VN.yml
+++ b/locales/vi-VN.yml
@@ -470,12 +470,16 @@ uiLanguage: "Ngôn ngữ giao diện"
 groupInvited: "Bạn đã được mời tham gia nhóm"
 aboutX: "Giới thiệu {x}"
 useOsNativeEmojis: "Dùng emoji hệ thống"
+emojiStyle: "Kiểu cách Emoji"
+native: "Bản xứ"
 disableDrawer: "Không dùng menu thanh bên"
 youHaveNoGroups: "Không có nhóm nào"
 joinOrCreateGroup: "Tham gia hoặc tạo một nhóm mới."
 noHistory: "Không có dữ liệu"
 signinHistory: "Lịch sử đăng nhập"
 disableAnimatedMfm: "Tắt MFM với chuyển động"
+enableAdvancedMfm: "Xem bài MFM chất lượng cao."
+enableAnimatedMfm: "Xem bài MFM có chuyển động"
 doing: "Đang xử lý..."
 category: "Phân loại"
 tags: "Thẻ"
@@ -2043,4 +2047,3 @@ _dialog:
 _webhookSettings:
   name: "Tên"
   active: "Đã bật"
-
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index d6f9d07a737f..eb509a1283ba 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -16,16 +16,17 @@ cancel: "取消"
 noThankYou: "不用，谢谢"
 enterUsername: "输入用户名"
 renotedBy: "由 {user} 转贴"
-noNotes: "没有帖子"
+noNotes: "没有帖文"
 noNotifications: "无通知"
 instance: "服务器"
 settings: "设置"
+notificationSettings: "通知设置"
 basicSettings: "基本设置"
 otherSettings: "其他设置"
 openInWindow: "在新窗口中打开"
 profile: "个人资料"
 timeline: "时间线"
-noAccountDescription: "这个人很懒，没有写自我介绍"
+noAccountDescription: "此用户尚无自我介绍"
 login: "登录"
 loggingIn: "正在登录..."
 logout: "登出"
@@ -60,7 +61,7 @@ youGotNewFollower: "你有新的关注者"
 receiveFollowRequest: "您收到了关注请求"
 followRequestAccepted: "您的关注请求被通过了"
 mention: "提及"
-mentions: "提及"
+mentions: "提到我的"
 directNotes: "私信"
 importAndExport: "导入和导出"
 import: "导入"
@@ -85,7 +86,7 @@ somethingHappened: "出现了一些问题！"
 retry: "重试"
 pageLoadError: "页面加载失败。"
 pageLoadErrorDescription: "这通常是由于网络或浏览器缓存的原因。请清除缓存或等待片刻后重试。"
-serverIsDead: "服务器没有响应。 请稍等片刻，然后重试。"
+serverIsDead: "没有服务器响应。 请稍后再试。"
 youShouldUpgradeClient: "请重新加载并使用新版本的客户端查看此页面。"
 enterListName: "输入列表名称"
 privacy: "隐私"
@@ -95,7 +96,7 @@ follow: "关注"
 followRequest: "关注申请"
 followRequests: "关注申请"
 unfollow: "取消关注"
-followRequestPending: "发送关注请求"
+followRequestPending: "关注请求批准中"
 enterEmoji: "输入表情符号"
 renote: "转发"
 unrenote: "取消转发"
@@ -119,7 +120,7 @@ rememberNoteVisibility: "保存上次设置的可见性"
 attachCancel: "删除附件"
 markAsSensitive: "标记为敏感内容"
 unmarkAsSensitive: "取消标记为敏感内容"
-enterFileName: "请输入文件名"
+enterFileName: "输入文件名"
 mute: "屏蔽"
 unmute: "解除屏蔽"
 renoteMute: "屏蔽转帖"
@@ -142,18 +143,18 @@ customEmojis: "自定义表情符号"
 emoji: "表情符号"
 emojis: "表情符号"
 emojiName: "表情符号名称"
-emojiUrl: "表情符号地址"
+emojiUrl: "emoji 地址"
 addEmoji: "添加表情符号"
 settingGuide: "推荐配置"
-cacheRemoteFiles: "远程文件缓存"
+cacheRemoteFiles: "缓存远程文件"
 cacheRemoteFilesDescription: "当禁用此设定时远程文件将直接从远程服务器载入。禁用后会减小储存空间需求，但是会增加流量，因为缩略图不会被生成。"
 flagAsBot: "这是一个机器人账号"
-flagAsBotDescription: "如果此帐户由程序控制，请启用此项。启用后，此标志可以帮助其他开发人员防止机器人之间产生无限互动的行为，并让Misskey的内部系统将此帐户识别为机器人。"
+flagAsBotDescription: "如果此账户由程序控制，请启用此项。启用后，此标志可以帮助其他开发人员防止机器人之间产生无限互动的行为，并让Misskey的内部系统将此账户识别为机器人。"
 flagAsCat: "将这个账户设定为一只猫"
 flagAsCatDescription: "如果您想表明此帐户是一只猫，请打开此标志。\n开启后，会在您的头像上出现猫耳朵，并将你的帖子中的「na」替换为「nya」，日文同理。"
 flagShowTimelineReplies: "在时间线上显示帖子的回复"
 flagShowTimelineRepliesDescription: "启用时，时间线除了显示用户的帖子外，还会显示其他用户对帖子的回复。"
-autoAcceptFollowed: "自动允许关注者的关注"
+autoAcceptFollowed: "自动允许来自我关注的用户对我的关注请求"
 addAccount: "添加账户"
 reloadAccountsList: "更新账户列表"
 loginFailed: "登录失败"
@@ -204,7 +205,7 @@ blockedInstances: "被阻拦的服务器"
 blockedInstancesDescription: "设定要阻拦的服务器，以换行来进行分割。被阻拦的服务器将无法与本服务器进行交换通讯。"
 muteAndBlock: "屏蔽/拉黑"
 mutedUsers: "已屏蔽用户"
-blockedUsers: "被拉黑的用户"
+blockedUsers: "已拉黑的用户"
 noUsers: "无用户"
 editProfile: "编辑资料"
 noteDeleteConfirm: "要删除该帖子吗？"
@@ -337,7 +338,7 @@ enableLocalTimeline: "启用本地时间线功能"
 enableGlobalTimeline: "启用全局时间线"
 disablingTimelinesInfo: "即使时间线功能被禁用，出于方便，管理员和数据图表也可以继续使用。"
 registration: "注册"
-enableRegistration: "允许新用户注册"
+enableRegistration: "允许任何人注册"
 invite: "邀请"
 driveCapacityPerLocalAccount: "每个用户的网盘空间"
 driveCapacityPerRemoteAccount: "每个远程用户的网盘容量"
@@ -355,7 +356,7 @@ pinnedNotes: "已置顶的帖子"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "启用 hCaptcha"
 hcaptchaSiteKey: "网站密钥"
-hcaptchaSecretKey: "hCaptcha 密钥(SecretKey)"
+hcaptchaSecretKey: "密钥"
 recaptcha: "reCAPTCHA"
 enableRecaptcha: "启用 reCAPTCHA\n(请注意, 此功能在中国大陆不可用. 如果启用, 可能导致无法正常使用登录或注册等功能)"
 recaptchaSiteKey: "网站密钥"
@@ -473,6 +474,8 @@ uiLanguage: "显示语言"
 groupInvited: "您有新的群组邀请"
 aboutX: "关于 {x}"
 useOsNativeEmojis: "使用系统的原生表情符号"
+emojiStyle: "emoji 的样式"
+native: "原生"
 disableDrawer: "不显示抽屉菜单"
 showNoteActionsOnlyHover: "仅在悬停时显示帖子操作"
 youHaveNoGroups: "没有群组"
@@ -480,6 +483,8 @@ joinOrCreateGroup: "请加入一个现有的群组，或者创建新群组。"
 noHistory: "没有历史记录"
 signinHistory: "登录历史"
 disableAnimatedMfm: "禁用MFM动画"
+enableAdvancedMfm: "启用扩展MFM"
+enableAnimatedMfm: "启用MFM动画"
 doing: "正在进行"
 category: "类别"
 tags: "标签"
@@ -521,6 +526,7 @@ objectStorageUseSSLDesc: "如果不使用https进行API连接，请关闭。"
 objectStorageUseProxy: "使用代理"
 objectStorageUseProxyDesc: "如果您不使用代理进行API连接，请将其关闭。"
 objectStorageSetPublicRead: "上传时设置为public-read"
+s3ForcePathStyleDesc: "启用 s3ForcePathStyle 会强制将存储桶名称指定为 URL 中路径的一部分，而不是主机名。使用自托管 Minio 等时可能需要启用。"
 serverLogs: "服务器日志"
 deleteAll: "全部删除"
 showFixedPostForm: "在时间线顶部显示发帖框"
@@ -937,6 +943,7 @@ pushNotificationNotSupported: "浏览器或服务器不支持推送通知消息"
 sendPushNotificationReadMessage: "删除已读推送通知消息"
 sendPushNotificationReadMessageCaption: "“{emptyPushNotificationMessage}”的通知消息将会显示。您终端设备的电池消耗可能会增加。"
 windowMaximize: "最大化"
+windowMinimize: "最小化"
 windowRestore: "还原"
 caption: "标题"
 loggedInAsBot: "以Bot账户登录"
@@ -979,6 +986,9 @@ joinThisServer: "在本服务器上注册"
 exploreOtherServers: "探索其他服务器"
 letsLookAtTimeline: "时间线"
 disableFederationWarn: "联合被禁用。 禁用它并不能使帖子变成私人的。 在大多数情况下，这个选项不需要被启用。"
+disableFederationConfirm: "确定要禁用联合？"
+disableFederationConfirmWarn: "禁用联合不会将帖子设为私有。在大多数情况下，不需要禁用联合。"
+disableFederationOk: "联合禁用"
 invitationRequiredToRegister: "此服务器目前只允许拥有邀请码的人注册。"
 emailNotSupported: "此服务器不支持发送邮件"
 postToTheChannel: "发布到频道"
@@ -1001,6 +1011,19 @@ retryAllQueuesConfirmText: "可能会使服务器负荷在一定时间内增加"
 enableChartsForRemoteUser: "生成远程用户的图表"
 enableChartsForFederatedInstances: "生成远程服务器的图表"
 showClipButtonInNoteFooter: "在贴文下方显示便签按钮"
+largeNoteReactions: "使用大图标来显示回应"
+noteIdOrUrl: "帖子ID或URL"
+accountMigration: "账户迁移"
+accountMoved: "此用户已迁移账户"
+forceShowAds: "总是显示广告"
+_accountMigration:
+  moveTo: "把这个账户迁移到新的账户"
+  moveToLabel: "迁移后的账户"
+  moveAccountDescription: "此操作无法取消。请先确认您已在迁移后的账户上，为此账户创造了别名。创造别名后，请如以下输入您的迁移后的账户：@person@instance.com"
+  moveFrom: "从别的账号迁移到此账户"
+  moveFromLabel: "迁移前的账户"
+  moveFromDescription: "如果迁移时需要继承其他账户的关注者，请在此创造别名。此操作需要在实行迁移之前完成！请如已下输入需要迁移的账户：@person@instance.com"
+  migrationConfirm: "确定要把此账户迁移到{account}吗？一旦确定后，此操作无法取消，此账户也无法以原来的状态使用。\n同时，请确认迁移后的账户，已创造别名。"
 _achievements:
   earnedAt: "达成时间"
   _types:
@@ -1273,7 +1296,7 @@ _role:
     gtlAvailable: "查看全局时间线"
     ltlAvailable: "查看本地时间线"
     canPublicNote: "允许公开发帖"
-    canInvite: "发放实例邀请码"
+    canInvite: "发放服务器邀请码"
     canManageCustomEmojis: "管理自定义表情符号"
     driveCapacity: "网盘容量"
     pinMax: "帖子置顶数量限制"
@@ -1474,6 +1497,8 @@ _channel:
   following: "正在关注"
   usersCount: "有{n}人参与"
   notesCount: "有{n}个帖子"
+  nameAndDescription: "名称与描述"
+  nameOnly: "仅名称"
 _menuDisplay:
   sideFull: "横向"
   sideIcon: "横向(图标)"
@@ -1716,7 +1741,7 @@ _widgets:
   photos: "照片"
   digitalClock: "数字时钟"
   unixClock: "UNIX时钟"
-  federation: "联邦宇宙"
+  federation: "联合"
   instanceCloud: "服务器云"
   postForm: "投稿窗口"
   slideshow: "幻灯片展示"
@@ -2206,6 +2231,7 @@ _deck:
     channel: "频道"
     mentions: "提及"
     direct: "指定用户"
+    roleTimeline: "角色时间线"
 _dialog:
   charactersExceeded: "已经超过了最大字符数! 当前字符数 {current} / 限制字符数 {max}"
   charactersBelow: "低于最小字符数！当前字符数 {current} / 限制字符数 {min}"
@@ -2229,4 +2255,3 @@ _webhookSettings:
     renote: "被转发时"
     reaction: "被回应时"
     mention: "被提及时"
-
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index ba97c4e904a8..63fdb3b3ccf5 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -20,6 +20,7 @@ noNotes: "無貼文。"
 noNotifications: "沒有通知"
 instance: "實例"
 settings: "設定"
+notificationSettings: "通知選項"
 basicSettings: "基本設定"
 otherSettings: "其他設定"
 openInWindow: "在新視窗開啟"
@@ -473,6 +474,8 @@ uiLanguage: "介面語言"
 groupInvited: "您有新的群組邀請"
 aboutX: "關於{x}"
 useOsNativeEmojis: "使用OS原生表情符號"
+emojiStyle: "表情符號的風格"
+native: "原生"
 disableDrawer: "不顯示下拉式選單"
 showNoteActionsOnlyHover: "僅在游標停留時顯示貼文的操作選項"
 youHaveNoGroups: "找不到群組"
@@ -480,6 +483,8 @@ joinOrCreateGroup: "請加入現有群組，或創建新群組。"
 noHistory: "沒有歷史紀錄"
 signinHistory: "登入歷史"
 disableAnimatedMfm: "禁用MFM動畫"
+enableAdvancedMfm: "啟用高級MFM"
+enableAnimatedMfm: "啟用MFM動畫"
 doing: "正在進行"
 category: "類別"
 tags: "標籤"
@@ -521,6 +526,7 @@ objectStorageUseSSLDesc: "如果不使用https進行API連接，請關閉"
 objectStorageUseProxy: "使用網路代理"
 objectStorageUseProxyDesc: "如果不使用代理進行API連接，請關閉"
 objectStorageSetPublicRead: "上傳時設定為\"public-read\""
+s3ForcePathStyleDesc: "啟用 s3ForcePathStyle 會強制將儲存槽名稱指定為 URL 中路徑的一部分，而不是主機名。 使用自託管 Minio 之類的可能需要啟用。"
 serverLogs: "伺服器日誌"
 deleteAll: "刪除所有記錄"
 showFixedPostForm: "於時間軸頁頂顯示「發送貼文」方框"
@@ -575,7 +581,7 @@ inboxUrl: "收件夾URL"
 addedRelays: "已加入的中繼"
 serviceworkerInfo: "您需要啟用推送通知"
 deletedNote: "已删除的貼文"
-invisibleNote: "隱藏的貼文"
+invisibleNote: "私密的貼文"
 enableInfiniteScroll: "啟用自動滾動頁面模式"
 visibility: "可見性"
 poll: "投票"
@@ -937,6 +943,7 @@ pushNotificationNotSupported: "瀏覽器或實例不支援推播通知"
 sendPushNotificationReadMessage: "通知與訊息如果已讀的話，就將推播通知刪除"
 sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」通知將立刻顯示。可能會增加設備的電池消耗。"
 windowMaximize: "最大化"
+windowMinimize: "最小化"
 windowRestore: "復原"
 caption: "標題"
 loggedInAsBot: "以機器人帳戶登入中"
@@ -979,6 +986,9 @@ joinThisServer: "在此伺服器上註冊"
 exploreOtherServers: "探索其他伺服器"
 letsLookAtTimeline: "看看時間軸"
 disableFederationWarn: "聯邦被停用了。即使停用也不會讓您的貼文不公開，在大多數情況下，不需要啟用這個選項。"
+disableFederationConfirm: "要停止聯邦功能嗎？"
+disableFederationConfirmWarn: "即使停止了聯邦功能，貼文也不會變成私密的。在大部分的情況下，沒有必要停止聯邦功能。"
+disableFederationOk: "停止聯邦功能"
 invitationRequiredToRegister: "目前這個伺服器為邀請制，必須擁有邀請碼才能註冊。"
 emailNotSupported: "這個伺服器不支援寄送郵件"
 postToTheChannel: "發布到頻道"
@@ -1001,6 +1011,19 @@ retryAllQueuesConfirmText: "伺服器的負荷可能會暫時增加。"
 enableChartsForRemoteUser: "生成遠端用戶的圖表"
 enableChartsForFederatedInstances: "生成遠端伺服器的圖表"
 showClipButtonInNoteFooter: "將摘錄添加至貼文"
+largeNoteReactions: "將貼文的反應放大顯示"
+noteIdOrUrl: "貼文ID或URL"
+accountMigration: "遷移帳戶"
+accountMoved: "這個使用者已遷移至新的帳戶："
+forceShowAds: "總是顯示廣告"
+_accountMigration:
+  moveTo: "將這個帳戶遷移至新的帳戶"
+  moveToLabel: "要遷移到的帳戶："
+  moveAccountDescription: "這個操作不可撤銷。首先，請確認已在要遷移到的帳戶中為這個帳戶建立了一個別名。建立別名之後，像這樣輸入你要遷移到的帳戶：@person@instance.com"
+  moveFrom: "從其他帳戶遷移到這個帳戶"
+  moveFromLabel: "要遷移過來的帳戶："
+  moveFromDescription: "如果你想把跟隨者從別的帳戶遷移過來，必須先在這裡建立別名。請務必在執行遷移之前建立別名！請像這樣輸入要遷移的帳戶：@person@instance.com"
+  migrationConfirm: "確定要將這個帳戶遷移至 {account} 嗎？一旦遷移就無法撤銷，也就無法以原來的狀態使用這個帳戶。\n另外，請確認在要遷移到的帳戶已經建立了一個別名。"
 _achievements:
   earnedAt: "獲得日期"
   _types:
@@ -1474,6 +1497,8 @@ _channel:
   following: "關注中"
   usersCount: "有{n}人參與"
   notesCount: "有{n}個貼文"
+  nameAndDescription: "名稱與說明"
+  nameOnly: "僅名稱"
 _menuDisplay:
   sideFull: "側向"
   sideIcon: "側向（圖示）"
@@ -2206,6 +2231,7 @@ _deck:
     channel: "頻道"
     mentions: "提及"
     direct: "指定使用者"
+    roleTimeline: "角色時間軸"
 _dialog:
   charactersExceeded: "已超過最大字數！現在 {current} / 限制 {max}"
   charactersBelow: "低於最少字數！現在 {current} / 限制 {max}"
@@ -2229,4 +2255,3 @@ _webhookSettings:
     renote: "當被轉發時"
     reaction: "當獲得反應時"
     mention: "當被提到時"
-

From 9397cb3b2898cd93e6bd1ebd19f22f35ef866d8c Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 25 Apr 2023 00:34:50 +0900
Subject: [PATCH 124/147] =?UTF-8?q?enhance(frontend/pakuru):=20nyaize?=
 =?UTF-8?q?=E3=81=AE=E8=AD=A6=E5=91=8A=E8=A1=A8=E7=A4=BA=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en-US.yml                         |  1 +
 locales/ja-CJP.yml                        |  1 +
 locales/ja-JP.yml                         |  1 +
 locales/ja-KS.yml                         |  1 +
 packages/client/src/scripts/tms/pakuru.ts | 38 ++++++++++++++++++++---
 5 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 39f95bc622a2..1cd7c3024f09 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -2263,3 +2263,4 @@ _tms:
   numberquote: "Numberquote"
   drafts: "Drafts"
   loadDraft: "Load from draft"
+  nyaizeWarning: "This post may be infected with nyaize."
diff --git a/locales/ja-CJP.yml b/locales/ja-CJP.yml
index bb2fc713c5d7..b4928c984e55 100644
--- a/locales/ja-CJP.yml
+++ b/locales/ja-CJP.yml
@@ -2369,3 +2369,4 @@ _tms:
   numberquote: "数字引用ずゑ"
   drafts: "草稿"
   loadDraft: "草稿を読み込む"
+  nyaizeWarning: "こゐ投稿はnyaizeに感染レていゑ可能性があリまず。"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 083a830c05c7..8fec09cf3a97 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2369,3 +2369,4 @@ _tms:
   numberquote: "数字引用する"
   drafts: "下書き"
   loadDraft: "下書きを読み込む"
+  nyaizeWarning: "この投稿はnyaizeに感染している可能性があります。"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index b2bc76d0b729..8c0f2e1e40db 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -2369,3 +2369,4 @@ _tms:
   numberquote: "数字引用する"
   drafts: "下書き"
   loadDraft: "下書きを読み込む"
+  nyaizeWarning: "この投稿はnyaizeに感染しているかもしれんよ。"
diff --git a/packages/client/src/scripts/tms/pakuru.ts b/packages/client/src/scripts/tms/pakuru.ts
index 0dc6e538db88..eb0853b06411 100644
--- a/packages/client/src/scripts/tms/pakuru.ts
+++ b/packages/client/src/scripts/tms/pakuru.ts
@@ -7,6 +7,7 @@ import { stream } from '@/stream';
 import { defaultStore } from '@/store';
 import { deepClone } from '@/scripts/clone';
 import { isPureRenote } from '@/scripts/tms/is-pure-renote';
+import { i18n } from '@/i18n';
 
 type SomeRequired<T, K extends keyof T> = Omit<T, K> & Required<RequiredNotNull<Pick<T, K>>>;
 type RequiredNotNull<T> = {
@@ -149,17 +150,44 @@ const _nqadd = (text: PostData['text']): PostData['text'] => {
 	return text.replace(/\-?\d+$/, (n => (BigInt(n) + 1n).toString(10)));
 };
 
+const confirmNyaize = async (note: Note): Promise<boolean> => {
+	const iAmCat = !!$i?.isCat;
+	const isCat = 'isCat' in note.user && !!note.user.isCat;
+
+	if (!iAmCat && !isCat) return true;
+
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts._tms.nyaizeWarning,
+	});
+
+	return !canceled;
+};
+
 export const pakuru = async (note: Note): Promise<{
+	canceled: false;
 	createdNote: Note;
+} | {
+	canceled: true;
+	createdNote: undefined;
 }> => {
-	return os.api('notes/create', await makeParams(note));
+	if (!(await confirmNyaize(note))) return { canceled: true, createdNote: undefined };
+	const makedParams = await makeParams(note);
+	const { createdNote } = await os.api('notes/create', makedParams);
+	return { canceled: false, createdNote };
 };
 
 export const numberquote = async (note: Note): Promise<{
+	canceled: false;
 	createdNote: Note;
+} | {
+	canceled: true;
+	createdNote: undefined;
 }> => {
-	return os.api('notes/create', await makeParams(note).then(params => {
-		const text = _nqadd(params.text);
-		return { ...params, text };
-	}));
+	if (!(await confirmNyaize(note))) return { canceled: true, createdNote: undefined };
+	const makedParams = await makeParams(note).then(params => {
+		return { ...params, text: _nqadd(params.text) };
+	});
+	const { createdNote } = await os.api('notes/create', makedParams);
+	return { canceled: false, createdNote };
 };

From 2ee5ac46b7f65aa4640a63ceb9bb970f3a7cc694 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 25 Apr 2023 00:39:24 +0900
Subject: [PATCH 125/147] fix ja-CJP.yml

---
 locales/ja-CJP.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/ja-CJP.yml b/locales/ja-CJP.yml
index b4928c984e55..8b6c0b2a2af9 100644
--- a/locales/ja-CJP.yml
+++ b/locales/ja-CJP.yml
@@ -20,6 +20,7 @@ noNotes: "Noteはあリま乜ん"
 noNotifications: "通知はあリま乜ん"
 instance: "亻ソヌタソヌ"
 settings: "设定"
+notificationSettings: "通知ゐ设定"
 basicSettings: "基本设定"
 otherSettings: "そゐ他ゐ设定"
 openInWindow: "ウィソドウて开ㄑ"
@@ -31,7 +32,6 @@ loggingIn: "登录中"
 logout: "ロゲマウ卜"
 signup: "注册"
 uploading: "マシプロード中"
-uploading: "マシプロード中"
 save: "保存"
 users: "用户"
 addUser: "用户を追加"

From 697682c5c5f6070fefe47a1e9fcd09e73885be2e Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 03:47:28 +0900
Subject: [PATCH 126/147] =?UTF-8?q?feat(frontend/TmsRenoteForm):=20tms:=20?=
 =?UTF-8?q?Renote=E3=81=A7=E5=85=AC=E9=96=8B=E7=AF=84=E5=9B=B2=E3=82=84?=
 =?UTF-8?q?=E6=8A=95=E7=A8=BF=E3=82=A2=E3=82=AB=E3=82=A6=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E6=8C=87=E5=AE=9A=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkRenoteButton.vue  |  17 +-
 .../client/src/components/TmsRenoteForm.vue   | 534 ++++++++++++++++++
 .../src/components/TmsRenoteFormDialog.vue    |  40 ++
 3 files changed, 587 insertions(+), 4 deletions(-)
 create mode 100644 packages/client/src/components/TmsRenoteForm.vue
 create mode 100644 packages/client/src/components/TmsRenoteFormDialog.vue

diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 02e90b084273..4f90698a8a20 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -13,6 +13,7 @@ import { computed, ref } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkUsersTooltip.vue';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import TmsRenoteFormDialog from '@/components/TmsRenoteFormDialog.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
 import { $i } from '@/account';
@@ -71,10 +72,18 @@ const renote = (viaKeyboard = false): void => {
 			text: i18n.ts.renote,
 			icon: 'ti ti-repeat',
 			action: (): void => {
-				renoteAnime();
-
-				os.api('notes/create', {
-					renoteId: props.note.id,
+				let dispose: () => void;
+				os.popup(TmsRenoteFormDialog, {
+					renote: props.note,
+				}, {
+					posted: () => {
+						renoteAnime();
+					},
+					closed: () => {
+						dispose();
+					},
+				}).then(res => {
+					dispose = res.dispose;
 				});
 			},
 		},
diff --git a/packages/client/src/components/TmsRenoteForm.vue b/packages/client/src/components/TmsRenoteForm.vue
new file mode 100644
index 000000000000..32c079323075
--- /dev/null
+++ b/packages/client/src/components/TmsRenoteForm.vue
@@ -0,0 +1,534 @@
+<template>
+<div
+	ref="rootEl"
+	v-size="{ max: [310, 500] }"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
+>
+	<header :class="$style.header">
+		<div :class="$style.headerLeft">
+			<button :class="['_button', $style.cancel]" @click="cancel">
+				<i class="ti ti-x"></i>
+			</button>
+			<button v-tooltip="i18n.ts.switchAccount" :class="['_button', $style.account]" @click="openAccountMenu">
+				<MkAvatar :user="postAccount ?? ($i as any)" :class="$style.avatar"/>
+			</button>
+		</div>
+		<div :class="$style.headerRight">
+			<template v-if="!channel">
+				<button v-tooltip="i18n.ts._visibility.disableFederation" :class="['_button', $style.headerRightButton]" :disabled="!!channel || visibility === 'specified'" @click="toggleLocalOnly">
+					<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
+					<span v-else><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
+				</button>
+				<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightButton]" :disabled="!!channel" @click="openVisibilityPicker">
+					<template v-if="!channel">
+						<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+						<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+						<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
+						<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+						<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
+					</template>
+					<template v-else>
+						<span><i class="ti ti-device-tv"></i></span>
+						<span :class="$style.headerRightButtonText">{{ (channel as any).name }}</span>
+					</template>
+				</button>
+			</template>
+			<button :class="['_button', $style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+				<div :class="$style.submitInner">
+					<template v-if="posted"></template>
+					<template v-else-if="posting"><MkEllipsis/></template>
+					<template v-else>{{ i18n.ts.quote }}</template>
+					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : 'ti-send'"></i>
+				</div>
+			</button>
+		</div>
+	</header>
+	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
+		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+		<div :class="$style.visibleUsers">
+			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
+				<MkAcct :user="u"/>
+				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+			</span>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+		</div>
+	</div>
+	<div :class="$style.forms">
+		<div :class="$style.textOuter">
+			<div :class="$style.quote">
+				<div :class="$style.quoteInner">
+					<MkNoteSimple :note="renote"/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, inject, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+import { v4 as uuid } from 'uuid';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
+import { erase } from '@/scripts/array';
+import { migrateNoteVisibility as _migrateNoteVisibility } from '@/scripts/tms/note-visibility';
+import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+
+//#region define
+const props = defineProps<{
+	renote: Misskey.entities.Note;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'posted'): void;
+	(ev: 'cancel'): void;
+	(ev: 'esc'): void;
+}>();
+
+const modal = inject<boolean>('modal', false);
+
+let fetchingList = $ref<string[]>([]);
+const fetchingWrapper = <T>(prom: Promise<T>): Promise<T> => {
+	const id = uuid();
+	fetchingList.push(id);
+
+	prom.finally(() => {
+		fetchingList = fetchingList.filter(fid => fid !== id);
+	});
+
+	return prom;
+};
+const fetching = $computed<boolean>(() => fetchingList.length !== 0);
+
+const isFetching = (): boolean => fetching;
+
+defineExpose({
+	isFetching,
+});
+//#endregion
+
+//#region params, flags
+let visibility = $ref<Misskey.entities.Note['visibility']>(defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility);
+let localOnly = $ref<boolean>(defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
+
+let visibleUsers = $ref<Misskey.entities.User[]>([]);
+const renote = $ref<Misskey.entities.Note>(props.renote);
+const channel = $ref<Misskey.entities.Channel | null>((renote as typeof renote & { channel?: Misskey.entities.Channel })?.channel ?? null);
+
+let posting = $ref(false);
+let posted = $ref(false);
+
+const canPost = $computed((): boolean => {
+	return !fetching && !posting && !posted && !!renote;
+});
+
+//#region credential
+let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
+let token = $ref<string | null>(null);
+const updatePostAccount = async (newPostAccount: Misskey.entities.UserDetailed | null): Promise<void> => {
+	if (!newPostAccount || $i?.id === newPostAccount.id) {
+		postAccount = null;
+		token = null;
+		return;
+	}
+	if (postAccount && (postAccount.id === newPostAccount.id)) return;
+
+	type StoredAccount = {
+		id: string;
+		token: string;
+	};
+
+	const storedAccounts = (await getAccounts()) as StoredAccount[];
+	const newToken = storedAccounts.find(x => x.id === newPostAccount.id)?.token ?? null;
+
+	if (!newToken) {
+		postAccount = null;
+		token = null;
+		return;
+	}
+
+	postAccount = newPostAccount;
+	token = newToken;
+};
+//#endregion
+
+//#region elements
+const rootEl = $shallowRef<HTMLElement | null>(null);
+const visibilityButton = $shallowRef<HTMLElement | null>(null);
+//#endregion
+
+//#region visibleUser
+const pushVisibleUser = (user: Misskey.entities.User): void => {
+	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+		visibleUsers.push(user);
+	}
+};
+
+const addVisibleUser = (): void => {
+	fetchingWrapper(
+		os.selectUser().then(user => {
+			pushVisibleUser(user);
+		}),
+	);
+};
+
+const removeVisibleUser = (user: Misskey.entities.User): void => {
+	visibleUsers = erase(user, visibleUsers);
+};
+//#endregion
+
+//#region init
+// 公開範囲の引き継ぎ
+let disabledVisibilities = $ref([] as Misskey.entities.Note['visibility'][]);
+const migrateNoteVisibility = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	const parseNoteVis = (_note: Misskey.entities.Note | null): {
+		visibility: typeof Misskey.noteVisibilities[number];
+		localOnly: boolean;
+		visibleUserIds: string[];
+	} | null => _note ? {
+		visibility: _note.visibility,
+		localOnly: !!_note.localOnly,
+		visibleUserIds: _note.visibleUserIds ?? [],
+	} : null;
+
+	const migrated = _migrateNoteVisibility({
+		note: {
+			visibility,
+			localOnly,
+			visibleUserIds: visibleUsers.map(({ id }) => id),
+		},
+		renote: parseNoteVis(renote),
+	});
+
+	visibility = migrated.visibility;
+	localOnly = migrated.localOnly;
+	disabledVisibilities = migrated.disabledVisibilities;
+
+	if (visibility !== 'specified') {
+		visibleUsers = [];
+	}
+
+	if (migrated.visibleUserIds.length !== 0) {
+		const visibleUserIds = migrated.visibleUserIds.filter(id => id !== $i?.id && !visibleUsers.some(x => id === x.id));
+		fetchingWrapper(
+			os.api('users/show', { userIds: visibleUserIds }, token)
+				.then(users => {
+					users.forEach(user => {
+						pushVisibleUser(user);
+					});
+				}),
+		);
+	} else {
+		visibleUsers = [];
+	}
+};
+
+migrateNoteVisibility();
+//#endregion
+
+//#region header buttons
+const cancel = (): void => {
+	emit('cancel');
+};
+
+const openAccountMenu = (ev: MouseEvent): void => {
+	openAccountMenu_({
+		withExtraOperation: false,
+		includeCurrentAccount: true,
+		active: postAccount?.id ?? $i?.id,
+		onChoose: (account) => {
+			updatePostAccount(account);
+		},
+	}, ev);
+};
+
+const toggleLocalOnly = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	localOnly = !localOnly;
+};
+
+const openVisibilityPicker = (): void => {
+	if (channel) {
+		visibility = 'public';
+		localOnly = true;
+		return;
+	}
+
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+		currentVisibility: visibility,
+		currentLocalOnly: localOnly,
+		src: visibilityButton,
+		disabledVisibilities,
+	}, {
+		changeVisibility: (v: typeof visibility) => {
+			visibility = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('visibility', visibility);
+			}
+		},
+		changeLocalOnly: (v: typeof localOnly) => {
+			localOnly = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('localOnly', localOnly);
+			}
+		},
+	}, 'closed');
+};
+
+const post = async (ev?: MouseEvent): Promise<void> => {
+	const el = getHtmlElementFromEvent(ev);
+	if (el) {
+		const rect = el.getBoundingClientRect();
+		const x = rect.left + (el.offsetWidth / 2);
+		const y = rect.top + (el.offsetHeight / 2);
+		os.popup(MkRippleEffect, { x, y }, {}, 'end');
+	}
+
+	let postData = {
+		renoteId: renote.id,
+		channelId: channel?.id || undefined,
+		localOnly: localOnly,
+		visibility: visibility,
+		visibleUserIds: visibility === 'specified' ? visibleUsers.map(({ id }) => id) : undefined,
+	};
+
+	posting = true;
+	os.api('notes/create', postData, token).then(() => {
+		posted = true;
+
+		nextTick(() => {
+			emit('posted');
+
+			posting = false;
+			updatePostAccount(null);
+		});
+	}).catch((err: unknown) => {
+		const { id, message } = err as {
+			id: string;
+			message: string;
+		};
+
+		posting = false;
+
+		os.alert({
+			type: 'error',
+			text: `${message}\n${id}`,
+		});
+	});
+};
+//#endregion
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
+}
+
+.header {
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: 1fr;
+	gap: 4px;
+	min-height: 50px;
+}
+
+.headerLeft {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	grid-template-columns: minmax(36px, 50px);
+	grid-template-rows: minmax(40px, 100%);
+	gap: 4px;
+}
+
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	height: 100%;
+}
+
+.account {
+	height: 100%;
+	vertical-align: bottom;
+
+	> .avatar {
+		width: 28px;
+		height: 28px;
+		margin: auto 0;
+	}
+}
+
+.headerRight {
+	justify-self: end;
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	align-items: center;
+	gap: 4px;
+	font-size: 0.9em;
+}
+
+.headerRightItem {
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+
+	&:disabled {
+		background: none;
+	}
+}
+
+.headerRightButton {
+	display: flex;
+	gap: 6px;
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+	overflow: hidden;
+	white-space: nowrap;
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		background: var(--X5);
+	}
+
+	&.headerRightButtonActive {
+		color: var(--accent);
+	}
+
+	> .headerRightButtonText {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:enabled > .headerRightButtonText {
+		opacity: 0.8;
+	}
+}
+
+.submit {
+	margin: 12px 12px 12px 6px;
+	vertical-align: bottom;
+
+	&:disabled {
+		opacity: 0.7;
+	}
+
+	&.submitPosting {
+		cursor: wait;
+	}
+
+	&:not(:disabled):hover,
+	&:not(:disabled):active {
+		> .submitInner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+	}
+
+	> .submitInner {
+		padding: 0 12px;
+		line-height: 34px;
+		font-weight: bold;
+		border-radius: 6px;
+		min-width: 90px;
+		box-sizing: border-box;
+		color: var(--fgOnAccent);
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	}
+}
+
+.toSpecified {
+	padding: 6px 24px;
+	margin-bottom: 8px;
+	overflow: auto;
+	white-space: nowrap;
+}
+
+.visibleUsers {
+	display: inline;
+	top: -1px;
+	font-size: 14px;
+}
+
+.visibleUser {
+	margin-right: 14px;
+	padding: 8px 0 8px 8px;
+	border-radius: 8px;
+	background: var(--X4);
+}
+
+.forms {
+	--tmsPostForm-inputPadding: 24px;
+}
+
+.textOuter {
+	width: 100%;
+	position: relative;
+}
+
+.quote {
+	padding: 8px var(--tmsPostForm-inputPadding);
+
+	> .quoteInner {
+		position: relative;
+		padding: 16px;
+		border: dashed 1px var(--renote);
+		border-radius: 8px;
+	}
+}
+
+:global(.max-width_500px) {
+	.headerRightButtonText {
+		display: none;
+	}
+
+	.submit {
+		margin: 8px 8px 8px 4px;
+	}
+
+	.toSpecified {
+		padding: 6px 16px;
+	}
+
+	.forms {
+		--tmsPostForm-inputPadding: 16px;
+	}
+}
+
+:global(.max-width_310px) {
+	.header {
+		gap: 0;
+	}
+
+	.headerLeft {
+		gap: 0;
+	}
+
+	.headerRight {
+		gap: 0;
+	}
+}
+</style>
diff --git a/packages/client/src/components/TmsRenoteFormDialog.vue b/packages/client/src/components/TmsRenoteFormDialog.vue
new file mode 100644
index 000000000000..b20c02fd953e
--- /dev/null
+++ b/packages/client/src/components/TmsRenoteFormDialog.vue
@@ -0,0 +1,40 @@
+<template>
+<MkModal ref="modal" :prefer-type="'dialog'" @click="onClick" @closed="onModalClosed()">
+	<TmsRenoteForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkModal from '@/components/MkModal.vue';
+import TmsRenoteForm from '@/components/TmsRenoteForm.vue';
+
+const props = defineProps<{
+	renote: Misskey.entities.Note;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
+const form = $shallowRef<InstanceType<typeof TmsRenoteForm>>();
+
+const isFetching = (): boolean => !!form?.isFetching();
+
+const onClick = (): void => {
+	if (isFetching()) return;
+	modal?.close();
+};
+
+const onPosted = (): void => {
+	modal?.close({
+		useSendAnimation: true,
+	});
+};
+
+const onModalClosed = (): void => {
+	emit('closed');
+};
+</script>

From eb0f4d4fb2ae92e50d5445095962b311623c7754 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 04:04:02 +0900
Subject: [PATCH 127/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 4 ++--
 packages/client/src/components/TmsRenoteForm.vue    | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 6218f074b82d..3dfd626a11ea 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -1108,7 +1108,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 }
 
 .submit {
-	margin: 12px 12px 12px 6px;
+	margin: 12px 12px 12px 6px !important; // ._buttonを上書き
 	vertical-align: bottom;
 
 	&:disabled {
@@ -1301,7 +1301,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 	}
 
 	.submit {
-		margin: 8px 8px 8px 4px;
+		margin: 8px 8px 8px 4px !important; // ._buttonを上書き
 	}
 
 	.replyNote {
diff --git a/packages/client/src/components/TmsRenoteForm.vue b/packages/client/src/components/TmsRenoteForm.vue
index 32c079323075..935be0aa451b 100644
--- a/packages/client/src/components/TmsRenoteForm.vue
+++ b/packages/client/src/components/TmsRenoteForm.vue
@@ -37,7 +37,7 @@
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ i18n.ts.quote }}</template>
+					<template v-else>{{ i18n.ts.renote }}</template>
 					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : 'ti-send'"></i>
 				</div>
 			</button>
@@ -430,7 +430,7 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 }
 
 .submit {
-	margin: 12px 12px 12px 6px;
+	margin: 12px 12px 12px 6px !important; // ._buttonを上書き
 	vertical-align: bottom;
 
 	&:disabled {
@@ -482,6 +482,7 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 
 .forms {
 	--tmsPostForm-inputPadding: 24px;
+	padding-bottom: var(--tmsPostForm-inputPadding);
 }
 
 .textOuter {
@@ -506,7 +507,7 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 	}
 
 	.submit {
-		margin: 8px 8px 8px 4px;
+		margin: 8px 8px 8px 4px !important; // ._buttonを上書き
 	}
 
 	.toSpecified {

From a836cfba7a887e37d1a45feab338c9ebdeb7d56b Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 04:25:39 +0900
Subject: [PATCH 128/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 4 ++--
 packages/client/src/components/TmsRenoteForm.vue    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 3dfd626a11ea..4bd16daf3963 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -1081,8 +1081,8 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 .headerRightButton {
 	display: flex;
 	gap: 6px;
-	margin: 0;
-	padding: 8px;
+	margin: 0 !important; // ._buttonを上書き
+	padding: 8px !important; // ._buttonを上書き
 	border-radius: 6px;
 	overflow: hidden;
 	white-space: nowrap;
diff --git a/packages/client/src/components/TmsRenoteForm.vue b/packages/client/src/components/TmsRenoteForm.vue
index 935be0aa451b..d55aab3b2547 100644
--- a/packages/client/src/components/TmsRenoteForm.vue
+++ b/packages/client/src/components/TmsRenoteForm.vue
@@ -403,8 +403,8 @@ const post = async (ev?: MouseEvent): Promise<void> => {
 .headerRightButton {
 	display: flex;
 	gap: 6px;
-	margin: 0;
-	padding: 8px;
+	margin: 0 !important; // ._buttonを上書き
+	padding: 8px !important; // ._buttonを上書き
 	border-radius: 6px;
 	overflow: hidden;
 	white-space: nowrap;

From 5110b19136545449c3a44944883c69ebd1e9a574 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 04:37:03 +0900
Subject: [PATCH 129/147] Revert "fix"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit a836cfba7a887e37d1a45feab338c9ebdeb7d56b.

Revert "fix"

This reverts commit eb0f4d4fb2ae92e50d5445095962b311623c7754.

Revert "feat(frontend/TmsRenoteForm): tms: Renoteで公開範囲や投稿アカウントを指定できるように"

This reverts commit 697682c5c5f6070fefe47a1e9fcd09e73885be2e.
---
 .../client/src/components/MkRenoteButton.vue  |  17 +-
 .../src/components/TmsPostForm.core.vue       |   8 +-
 .../client/src/components/TmsRenoteForm.vue   | 535 ------------------
 .../src/components/TmsRenoteFormDialog.vue    |  40 --
 4 files changed, 8 insertions(+), 592 deletions(-)
 delete mode 100644 packages/client/src/components/TmsRenoteForm.vue
 delete mode 100644 packages/client/src/components/TmsRenoteFormDialog.vue

diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 4f90698a8a20..02e90b084273 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -13,7 +13,6 @@ import { computed, ref } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkUsersTooltip.vue';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import TmsRenoteFormDialog from '@/components/TmsRenoteFormDialog.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
 import { $i } from '@/account';
@@ -72,18 +71,10 @@ const renote = (viaKeyboard = false): void => {
 			text: i18n.ts.renote,
 			icon: 'ti ti-repeat',
 			action: (): void => {
-				let dispose: () => void;
-				os.popup(TmsRenoteFormDialog, {
-					renote: props.note,
-				}, {
-					posted: () => {
-						renoteAnime();
-					},
-					closed: () => {
-						dispose();
-					},
-				}).then(res => {
-					dispose = res.dispose;
+				renoteAnime();
+
+				os.api('notes/create', {
+					renoteId: props.note.id,
 				});
 			},
 		},
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 4bd16daf3963..6218f074b82d 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -1081,8 +1081,8 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 .headerRightButton {
 	display: flex;
 	gap: 6px;
-	margin: 0 !important; // ._buttonを上書き
-	padding: 8px !important; // ._buttonを上書き
+	margin: 0;
+	padding: 8px;
 	border-radius: 6px;
 	overflow: hidden;
 	white-space: nowrap;
@@ -1108,7 +1108,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 }
 
 .submit {
-	margin: 12px 12px 12px 6px !important; // ._buttonを上書き
+	margin: 12px 12px 12px 6px;
 	vertical-align: bottom;
 
 	&:disabled {
@@ -1301,7 +1301,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 	}
 
 	.submit {
-		margin: 8px 8px 8px 4px !important; // ._buttonを上書き
+		margin: 8px 8px 8px 4px;
 	}
 
 	.replyNote {
diff --git a/packages/client/src/components/TmsRenoteForm.vue b/packages/client/src/components/TmsRenoteForm.vue
deleted file mode 100644
index d55aab3b2547..000000000000
--- a/packages/client/src/components/TmsRenoteForm.vue
+++ /dev/null
@@ -1,535 +0,0 @@
-<template>
-<div
-	ref="rootEl"
-	v-size="{ max: [310, 500] }"
-	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
->
-	<header :class="$style.header">
-		<div :class="$style.headerLeft">
-			<button :class="['_button', $style.cancel]" @click="cancel">
-				<i class="ti ti-x"></i>
-			</button>
-			<button v-tooltip="i18n.ts.switchAccount" :class="['_button', $style.account]" @click="openAccountMenu">
-				<MkAvatar :user="postAccount ?? ($i as any)" :class="$style.avatar"/>
-			</button>
-		</div>
-		<div :class="$style.headerRight">
-			<template v-if="!channel">
-				<button v-tooltip="i18n.ts._visibility.disableFederation" :class="['_button', $style.headerRightButton]" :disabled="!!channel || visibility === 'specified'" @click="toggleLocalOnly">
-					<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
-					<span v-else><i class="ti ti-rocket-off" style="color: var(--error);"></i></span>
-				</button>
-				<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightButton]" :disabled="!!channel" @click="openVisibilityPicker">
-					<template v-if="!channel">
-						<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-						<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
-						<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
-						<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
-						<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
-					</template>
-					<template v-else>
-						<span><i class="ti ti-device-tv"></i></span>
-						<span :class="$style.headerRightButtonText">{{ (channel as any).name }}</span>
-					</template>
-				</button>
-			</template>
-			<button :class="['_button', $style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div :class="$style.submitInner">
-					<template v-if="posted"></template>
-					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ i18n.ts.renote }}</template>
-					<i :style="{ marginLeft: !posted ? '6px' : undefined }" class="ti" :class="posted ? 'ti-check' : 'ti-send'"></i>
-				</div>
-			</button>
-		</div>
-	</header>
-	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
-		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-		<div :class="$style.visibleUsers">
-			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
-				<MkAcct :user="u"/>
-				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
-			</span>
-			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-		</div>
-	</div>
-	<div :class="$style.forms">
-		<div :class="$style.textOuter">
-			<div :class="$style.quote">
-				<div :class="$style.quoteInner">
-					<MkNoteSimple :note="renote"/>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, inject, defineAsyncComponent } from 'vue';
-import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
-import { erase } from '@/scripts/array';
-import { migrateNoteVisibility as _migrateNoteVisibility } from '@/scripts/tms/note-visibility';
-import { getHtmlElementFromEvent } from '@/scripts/tms/utils';
-import MkNoteSimple from '@/components/MkNoteSimple.vue';
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
-
-//#region define
-const props = defineProps<{
-	renote: Misskey.entities.Note;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'posted'): void;
-	(ev: 'cancel'): void;
-	(ev: 'esc'): void;
-}>();
-
-const modal = inject<boolean>('modal', false);
-
-let fetchingList = $ref<string[]>([]);
-const fetchingWrapper = <T>(prom: Promise<T>): Promise<T> => {
-	const id = uuid();
-	fetchingList.push(id);
-
-	prom.finally(() => {
-		fetchingList = fetchingList.filter(fid => fid !== id);
-	});
-
-	return prom;
-};
-const fetching = $computed<boolean>(() => fetchingList.length !== 0);
-
-const isFetching = (): boolean => fetching;
-
-defineExpose({
-	isFetching,
-});
-//#endregion
-
-//#region params, flags
-let visibility = $ref<Misskey.entities.Note['visibility']>(defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility);
-let localOnly = $ref<boolean>(defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
-
-let visibleUsers = $ref<Misskey.entities.User[]>([]);
-const renote = $ref<Misskey.entities.Note>(props.renote);
-const channel = $ref<Misskey.entities.Channel | null>((renote as typeof renote & { channel?: Misskey.entities.Channel })?.channel ?? null);
-
-let posting = $ref(false);
-let posted = $ref(false);
-
-const canPost = $computed((): boolean => {
-	return !fetching && !posting && !posted && !!renote;
-});
-
-//#region credential
-let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
-let token = $ref<string | null>(null);
-const updatePostAccount = async (newPostAccount: Misskey.entities.UserDetailed | null): Promise<void> => {
-	if (!newPostAccount || $i?.id === newPostAccount.id) {
-		postAccount = null;
-		token = null;
-		return;
-	}
-	if (postAccount && (postAccount.id === newPostAccount.id)) return;
-
-	type StoredAccount = {
-		id: string;
-		token: string;
-	};
-
-	const storedAccounts = (await getAccounts()) as StoredAccount[];
-	const newToken = storedAccounts.find(x => x.id === newPostAccount.id)?.token ?? null;
-
-	if (!newToken) {
-		postAccount = null;
-		token = null;
-		return;
-	}
-
-	postAccount = newPostAccount;
-	token = newToken;
-};
-//#endregion
-
-//#region elements
-const rootEl = $shallowRef<HTMLElement | null>(null);
-const visibilityButton = $shallowRef<HTMLElement | null>(null);
-//#endregion
-
-//#region visibleUser
-const pushVisibleUser = (user: Misskey.entities.User): void => {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
-		visibleUsers.push(user);
-	}
-};
-
-const addVisibleUser = (): void => {
-	fetchingWrapper(
-		os.selectUser().then(user => {
-			pushVisibleUser(user);
-		}),
-	);
-};
-
-const removeVisibleUser = (user: Misskey.entities.User): void => {
-	visibleUsers = erase(user, visibleUsers);
-};
-//#endregion
-
-//#region init
-// 公開範囲の引き継ぎ
-let disabledVisibilities = $ref([] as Misskey.entities.Note['visibility'][]);
-const migrateNoteVisibility = (): void => {
-	if (channel) {
-		visibility = 'public';
-		localOnly = true;
-		return;
-	}
-
-	const parseNoteVis = (_note: Misskey.entities.Note | null): {
-		visibility: typeof Misskey.noteVisibilities[number];
-		localOnly: boolean;
-		visibleUserIds: string[];
-	} | null => _note ? {
-		visibility: _note.visibility,
-		localOnly: !!_note.localOnly,
-		visibleUserIds: _note.visibleUserIds ?? [],
-	} : null;
-
-	const migrated = _migrateNoteVisibility({
-		note: {
-			visibility,
-			localOnly,
-			visibleUserIds: visibleUsers.map(({ id }) => id),
-		},
-		renote: parseNoteVis(renote),
-	});
-
-	visibility = migrated.visibility;
-	localOnly = migrated.localOnly;
-	disabledVisibilities = migrated.disabledVisibilities;
-
-	if (visibility !== 'specified') {
-		visibleUsers = [];
-	}
-
-	if (migrated.visibleUserIds.length !== 0) {
-		const visibleUserIds = migrated.visibleUserIds.filter(id => id !== $i?.id && !visibleUsers.some(x => id === x.id));
-		fetchingWrapper(
-			os.api('users/show', { userIds: visibleUserIds }, token)
-				.then(users => {
-					users.forEach(user => {
-						pushVisibleUser(user);
-					});
-				}),
-		);
-	} else {
-		visibleUsers = [];
-	}
-};
-
-migrateNoteVisibility();
-//#endregion
-
-//#region header buttons
-const cancel = (): void => {
-	emit('cancel');
-};
-
-const openAccountMenu = (ev: MouseEvent): void => {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount?.id ?? $i?.id,
-		onChoose: (account) => {
-			updatePostAccount(account);
-		},
-	}, ev);
-};
-
-const toggleLocalOnly = (): void => {
-	if (channel) {
-		visibility = 'public';
-		localOnly = true;
-		return;
-	}
-
-	localOnly = !localOnly;
-};
-
-const openVisibilityPicker = (): void => {
-	if (channel) {
-		visibility = 'public';
-		localOnly = true;
-		return;
-	}
-
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
-		src: visibilityButton,
-		disabledVisibilities,
-	}, {
-		changeVisibility: (v: typeof visibility) => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
-		},
-		changeLocalOnly: (v: typeof localOnly) => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
-		},
-	}, 'closed');
-};
-
-const post = async (ev?: MouseEvent): Promise<void> => {
-	const el = getHtmlElementFromEvent(ev);
-	if (el) {
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(MkRippleEffect, { x, y }, {}, 'end');
-	}
-
-	let postData = {
-		renoteId: renote.id,
-		channelId: channel?.id || undefined,
-		localOnly: localOnly,
-		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(({ id }) => id) : undefined,
-	};
-
-	posting = true;
-	os.api('notes/create', postData, token).then(() => {
-		posted = true;
-
-		nextTick(() => {
-			emit('posted');
-
-			posting = false;
-			updatePostAccount(null);
-		});
-	}).catch((err: unknown) => {
-		const { id, message } = err as {
-			id: string;
-			message: string;
-		};
-
-		posting = false;
-
-		os.alert({
-			type: 'error',
-			text: `${message}\n${id}`,
-		});
-	});
-};
-//#endregion
-</script>
-
-<style lang="scss" module>
-.root {
-	position: relative;
-
-	&.modal {
-		width: 100%;
-		max-width: 520px;
-	}
-}
-
-.header {
-	display: grid;
-	grid-auto-flow: column;
-	grid-template-columns: auto 1fr;
-	grid-template-rows: 1fr;
-	gap: 4px;
-	min-height: 50px;
-}
-
-.headerLeft {
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: max-content;
-	grid-template-columns: minmax(36px, 50px);
-	grid-template-rows: minmax(40px, 100%);
-	gap: 4px;
-}
-
-.cancel {
-	padding: 0;
-	font-size: 1em;
-	height: 100%;
-}
-
-.account {
-	height: 100%;
-	vertical-align: bottom;
-
-	> .avatar {
-		width: 28px;
-		height: 28px;
-		margin: auto 0;
-	}
-}
-
-.headerRight {
-	justify-self: end;
-	display: grid;
-	grid-auto-flow: column;
-	grid-auto-columns: max-content;
-	align-items: center;
-	gap: 4px;
-	font-size: 0.9em;
-}
-
-.headerRightItem {
-	margin: 0;
-	padding: 8px;
-	border-radius: 6px;
-
-	&:disabled {
-		background: none;
-	}
-}
-
-.headerRightButton {
-	display: flex;
-	gap: 6px;
-	margin: 0 !important; // ._buttonを上書き
-	padding: 8px !important; // ._buttonを上書き
-	border-radius: 6px;
-	overflow: hidden;
-	white-space: nowrap;
-
-	&:not(:disabled):hover,
-	&:not(:disabled):active {
-		background: var(--X5);
-	}
-
-	&.headerRightButtonActive {
-		color: var(--accent);
-	}
-
-	> .headerRightButtonText {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&:enabled > .headerRightButtonText {
-		opacity: 0.8;
-	}
-}
-
-.submit {
-	margin: 12px 12px 12px 6px !important; // ._buttonを上書き
-	vertical-align: bottom;
-
-	&:disabled {
-		opacity: 0.7;
-	}
-
-	&.submitPosting {
-		cursor: wait;
-	}
-
-	&:not(:disabled):hover,
-	&:not(:disabled):active {
-		> .submitInner {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
-
-	> .submitInner {
-		padding: 0 12px;
-		line-height: 34px;
-		font-weight: bold;
-		border-radius: 6px;
-		min-width: 90px;
-		box-sizing: border-box;
-		color: var(--fgOnAccent);
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-	}
-}
-
-.toSpecified {
-	padding: 6px 24px;
-	margin-bottom: 8px;
-	overflow: auto;
-	white-space: nowrap;
-}
-
-.visibleUsers {
-	display: inline;
-	top: -1px;
-	font-size: 14px;
-}
-
-.visibleUser {
-	margin-right: 14px;
-	padding: 8px 0 8px 8px;
-	border-radius: 8px;
-	background: var(--X4);
-}
-
-.forms {
-	--tmsPostForm-inputPadding: 24px;
-	padding-bottom: var(--tmsPostForm-inputPadding);
-}
-
-.textOuter {
-	width: 100%;
-	position: relative;
-}
-
-.quote {
-	padding: 8px var(--tmsPostForm-inputPadding);
-
-	> .quoteInner {
-		position: relative;
-		padding: 16px;
-		border: dashed 1px var(--renote);
-		border-radius: 8px;
-	}
-}
-
-:global(.max-width_500px) {
-	.headerRightButtonText {
-		display: none;
-	}
-
-	.submit {
-		margin: 8px 8px 8px 4px !important; // ._buttonを上書き
-	}
-
-	.toSpecified {
-		padding: 6px 16px;
-	}
-
-	.forms {
-		--tmsPostForm-inputPadding: 16px;
-	}
-}
-
-:global(.max-width_310px) {
-	.header {
-		gap: 0;
-	}
-
-	.headerLeft {
-		gap: 0;
-	}
-
-	.headerRight {
-		gap: 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/TmsRenoteFormDialog.vue b/packages/client/src/components/TmsRenoteFormDialog.vue
deleted file mode 100644
index b20c02fd953e..000000000000
--- a/packages/client/src/components/TmsRenoteFormDialog.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<MkModal ref="modal" :prefer-type="'dialog'" @click="onClick" @closed="onModalClosed()">
-	<TmsRenoteForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as Misskey from 'misskey-js';
-import MkModal from '@/components/MkModal.vue';
-import TmsRenoteForm from '@/components/TmsRenoteForm.vue';
-
-const props = defineProps<{
-	renote: Misskey.entities.Note;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const modal = $shallowRef<InstanceType<typeof MkModal>>();
-const form = $shallowRef<InstanceType<typeof TmsRenoteForm>>();
-
-const isFetching = (): boolean => !!form?.isFetching();
-
-const onClick = (): void => {
-	if (isFetching()) return;
-	modal?.close();
-};
-
-const onPosted = (): void => {
-	modal?.close({
-		useSendAnimation: true,
-	});
-};
-
-const onModalClosed = (): void => {
-	emit('closed');
-};
-</script>

From 7eb42b66e176338ed47764798af780383a17f4a8 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 04:40:12 +0900
Subject: [PATCH 130/147] fix

---
 packages/client/src/components/TmsPostForm.core.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 6218f074b82d..4bd16daf3963 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -1081,8 +1081,8 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 .headerRightButton {
 	display: flex;
 	gap: 6px;
-	margin: 0;
-	padding: 8px;
+	margin: 0 !important; // ._buttonを上書き
+	padding: 8px !important; // ._buttonを上書き
 	border-radius: 6px;
 	overflow: hidden;
 	white-space: nowrap;
@@ -1108,7 +1108,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 }
 
 .submit {
-	margin: 12px 12px 12px 6px;
+	margin: 12px 12px 12px 6px !important; // ._buttonを上書き
 	vertical-align: bottom;
 
 	&:disabled {
@@ -1301,7 +1301,7 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 	}
 
 	.submit {
-		margin: 8px 8px 8px 4px;
+		margin: 8px 8px 8px 4px !important; // ._buttonを上書き
 	}
 
 	.replyNote {

From 94ef700135354de933ed7538297907cb55fdbe67 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 05:00:37 +0900
Subject: [PATCH 131/147] =?UTF-8?q?fix=20XList=E3=81=AEborder=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3,=20=E3=82=A2=E3=83=AD=E3=83=BC=E9=96=A2?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkDateSeparatedList.vue    | 19 +++++++++++++------
 .../client/src/components/MkPagination.vue    |  6 +++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index cfacfbce4de2..39c1d98699c0 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -38,14 +38,14 @@ export default defineComponent({
 
 	setup(props, { slots, expose }) {
 		const $style = useCssModule();
-		function getDateText(time: string) {
+		const getDateText = (time: string): string => {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
 			return i18n.t('monthAndDay', {
 				month: month.toString(),
 				day: date.toString(),
 			});
-		}
+		};
 
 		if (props.items.length === 0) return;
 
@@ -113,14 +113,14 @@ export default defineComponent({
 			return children;
 		};
 
-		function onBeforeLeave(el: HTMLElement) {
+		const onBeforeLeave = (el: HTMLElement): void => {
 			el.style.top = `${el.offsetTop}px`;
 			el.style.left = `${el.offsetLeft}px`;
-		}
-		function onLeaveCanceled(el: HTMLElement) {
+		};
+		const onLeaveCanceled = (el: HTMLElement): void => {
 			el.style.top = '';
 			el.style.left = '';
-		}
+		};
 
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
@@ -182,6 +182,13 @@ export default defineComponent({
 			border-bottom: solid 0.5px var(--divider);
 		}
 	}
+
+	&.reversed > * {
+		&:not(:last-child) {
+			border-bottom: none;
+			border-top: solid 0.5px var(--divider);
+		}
+	}
 }
 
 .direction-up {
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 8dbbbbb5a672..6d62c4c73a88 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -173,7 +173,7 @@ watch([$$(backed), $$(contentEl)], () => {
 });
 
 if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
+	watch(props.pagination.params, () => init(), { deep: true });
 }
 
 watch(queue, (a, b) => {
@@ -181,7 +181,7 @@ watch(queue, (a, b) => {
 	emit('queue', queue.value.length);
 }, { deep: true });
 
-async function init(): Promise<void> {
+const init = async (): Promise<void> => {
 	queue.value = [];
 	fetching.value = true;
 	const params = props.pagination.params ? unref(props.pagination.params) : {};
@@ -210,7 +210,7 @@ async function init(): Promise<void> {
 		error.value = true;
 		fetching.value = false;
 	});
-}
+};
 
 const reload = (): Promise<void> => {
 	items.value = [];

From d10cc3a7713a923d6b31c8ec627bd80904d6f308 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 06:47:09 +0900
Subject: [PATCH 132/147] refactor(frontend): directives

---
 .../client/src/components/MkUserCardMini.vue  |  2 +-
 packages/client/src/directives/adaptive-bg.ts | 33 ++++++++++++
 .../client/src/directives/adaptive-border.ts  | 25 ++++++---
 packages/client/src/directives/anim.ts        |  7 +--
 packages/client/src/directives/appear.ts      | 21 +++++---
 packages/client/src/directives/click-anime.ts | 14 ++---
 packages/client/src/directives/container.ts   |  6 +--
 .../client/src/directives/follow-append.ts    | 28 ++++++----
 packages/client/src/directives/get-size.ts    | 19 +++----
 packages/client/src/directives/hotkey.ts      | 34 +++++++------
 packages/client/src/directives/index.ts       | 41 ++++++++++-----
 packages/client/src/directives/panel.ts       | 25 ++++++---
 packages/client/src/directives/ripple.ts      | 19 ++++---
 packages/client/src/directives/size.ts        | 39 +++++++-------
 packages/client/src/directives/tooltip.ts     | 39 +++++++-------
 .../client/src/directives/user-preview.ts     | 51 ++++++++++---------
 packages/client/src/scripts/hotkey.ts         | 16 +++---
 packages/client/src/scripts/tms/utils.ts      |  3 +-
 18 files changed, 258 insertions(+), 164 deletions(-)
 create mode 100644 packages/client/src/directives/adaptive-bg.ts

diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 960e229dd3fa..e778b1641e6a 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,5 +1,5 @@
 <template>
-<div :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
+<div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
 	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
 	<div class="body">
 		<span class="name"><MkUserName class="name" :user="user"/></span>
diff --git a/packages/client/src/directives/adaptive-bg.ts b/packages/client/src/directives/adaptive-bg.ts
new file mode 100644
index 000000000000..4be9cde3c699
--- /dev/null
+++ b/packages/client/src/directives/adaptive-bg.ts
@@ -0,0 +1,33 @@
+import { Directive } from 'vue';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+	mounted(src) {
+		const isTransparent = (color?: string | null): boolean => {
+			if (!color) return false;
+			if (color === 'transparent') return true;
+			const [_r, _g, _b, alpha = null] = [...color.match(/\d+/g) ?? []];
+			return alpha === '0';
+		};
+
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (!el) return 'transparent';
+			const { backgroundColor } = window.getComputedStyle(el);
+			if (backgroundColor && !isTransparent(backgroundColor)) {
+				return backgroundColor;
+			} else {
+				return getBgColor(el.parentElement);
+			}
+		};
+
+		const parentBg = getBgColor(src.parentElement);
+
+		const { backgroundColor: myBg } = window.getComputedStyle(src);
+
+		if (parentBg === myBg) {
+			src.style.backgroundColor = 'var(--bg)';
+		} else {
+			src.style.backgroundColor = myBg;
+		}
+	},
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/adaptive-border.ts b/packages/client/src/directives/adaptive-border.ts
index 5bd04024beef..2fa1d457c973 100644
--- a/packages/client/src/directives/adaptive-border.ts
+++ b/packages/client/src/directives/adaptive-border.ts
@@ -1,19 +1,28 @@
 import { Directive } from 'vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
+	mounted(src) {
+		const isTransparent = (color?: string | null): boolean => {
+			if (!color) return false;
+			if (color === 'transparent') return true;
+			const [_r, _g, _b, alpha = null] = [...color.match(/\d+/g) ?? []];
+			return alpha === '0';
+		};
+
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (!el) return 'transparent';
+			const { backgroundColor } = window.getComputedStyle(el);
+			if (backgroundColor && !isTransparent(backgroundColor)) {
+				return backgroundColor;
 			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+				return getBgColor(el.parentElement);
 			}
 		};
 
 		const parentBg = getBgColor(src.parentElement);
 
-		const myBg = window.getComputedStyle(src).backgroundColor;
+		const { backgroundColor: myBg } = window.getComputedStyle(src);
 
 		if (parentBg === myBg) {
 			src.style.borderColor = 'var(--divider)';
@@ -21,4 +30,4 @@ export default {
 			src.style.borderColor = myBg;
 		}
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/anim.ts b/packages/client/src/directives/anim.ts
index 04e1c6a40425..fd37109c0d48 100644
--- a/packages/client/src/directives/anim.ts
+++ b/packages/client/src/directives/anim.ts
@@ -1,7 +1,8 @@
 import { Directive } from 'vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	beforeMount(src, binding, vn) {
+	beforeMount(src) {
 		src.style.opacity = '0';
 		src.style.transform = 'scale(0.9)';
 		// ページネーションと相性が悪いので
@@ -9,10 +10,10 @@ export default {
 		src.classList.add('_zoom');
 	},
 
-	mounted(src, binding, vn) {
+	mounted(src) {
 		window.setTimeout(() => {
 			src.style.opacity = '1';
 			src.style.transform = 'none';
 		}, 1);
 	},
-} as Directive;
+} as Directive<HTMLElement, number>;
diff --git a/packages/client/src/directives/appear.ts b/packages/client/src/directives/appear.ts
index a504d11ef9ae..1628d67a0bfb 100644
--- a/packages/client/src/directives/appear.ts
+++ b/packages/client/src/directives/appear.ts
@@ -1,7 +1,10 @@
 import { Directive } from 'vue';
 
+const map = new WeakMap<HTMLElement, IntersectionObserver>();
+
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
+	mounted(src, binding) {
 		const fn = binding.value;
 		if (fn == null) return;
 
@@ -10,13 +13,15 @@ export default {
 				fn();
 			}
 		});
-
 		observer.observe(src);
-
-		src._observer_ = observer;
+		map.set(src, observer);
 	},
 
-	unmounted(src, binding, vn) {
-		if (src._observer_) src._observer_.disconnect();
-	}
-} as Directive;
+	unmounted(src) {
+		const observer = map.get(src);
+		if (observer) {
+			observer.disconnect();
+			map.delete(src);
+		}
+	},
+} as Directive<HTMLElement, (() => void) | null | undefined>;
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
index 5cd54c7323da..6b582e003a0d 100644
--- a/packages/client/src/directives/click-anime.ts
+++ b/packages/client/src/directives/click-anime.ts
@@ -1,17 +1,19 @@
 import { Directive } from 'vue';
 import { defaultStore } from '@/store';
+import { arrayAt } from '@/scripts/tms/utils';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(src) {
 		if (!defaultStore.state.animation) return;
 
-		const target = el.children[0];
+		const target = arrayAt(src.children, 0);
 
 		if (target == null) return;
 
 		target.classList.add('_anime_bounce_standBy');
 
-		el.addEventListener('mousedown', () => {
+		src.addEventListener('mousedown', () => {
 			target.classList.remove('_anime_bounce');
 
 			target.classList.add('_anime_bounce_standBy');
@@ -22,14 +24,14 @@ export default {
 			});
 		});
 
-		el.addEventListener('click', () => {
+		src.addEventListener('click', () => {
 			target.classList.add('_anime_bounce');
 			target.classList.remove('_anime_bounce_ready');
 		});
 
-		el.addEventListener('animationend', () => {
+		src.addEventListener('animationend', () => {
 			target.classList.remove('_anime_bounce');
 			target.classList.add('_anime_bounce_standBy');
 		});
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/container.ts b/packages/client/src/directives/container.ts
index 28cc9f4be205..da150e38db65 100644
--- a/packages/client/src/directives/container.ts
+++ b/packages/client/src/directives/container.ts
@@ -4,7 +4,7 @@ const map = new WeakMap<HTMLElement, ResizeObserver>();
 
 // eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement) {
+	mounted(el) {
 		const ro = new ResizeObserver(() => {
 			el.style.setProperty('--containerHeight', `${el.offsetHeight}px`);
 		});
@@ -12,11 +12,11 @@ export default {
 		map.set(el, ro);
 	},
 
-	unmounted(el: HTMLElement) {
+	unmounted(el) {
 		const ro = map.get(el);
 		if (ro) {
 			ro.disconnect();
 			map.delete(el);
 		}
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/follow-append.ts b/packages/client/src/directives/follow-append.ts
index b0e99628b0be..046a90f53fb2 100644
--- a/packages/client/src/directives/follow-append.ts
+++ b/packages/client/src/directives/follow-append.ts
@@ -1,13 +1,18 @@
 import { Directive } from 'vue';
 import { getScrollContainer, getScrollPosition } from '@/scripts/scroll';
 
+const map = new WeakMap<HTMLElement, ResizeObserver>();
+
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
+	mounted(src, binding) {
 		if (binding.value === false) return;
 
 		let isBottom = true;
 
-		const container = getScrollContainer(src)!;
+		const container = getScrollContainer(src);
+		if (!container) return;
+
 		container.addEventListener('scroll', () => {
 			const pos = getScrollPosition(container);
 			const viewHeight = container.clientHeight;
@@ -16,20 +21,21 @@ export default {
 		}, { passive: true });
 		container.scrollTop = container.scrollHeight;
 
-		const ro = new ResizeObserver((entries, observer) => {
+		const ro = new ResizeObserver(() => {
 			if (isBottom) {
 				const height = container.scrollHeight;
 				container.scrollTop = height;
 			}
 		});
-
 		ro.observe(src);
-
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		src._ro_ = ro;
+		map.set(src, ro);
 	},
 
-	unmounted(src, binding, vn) {
-		if (src._ro_) src._ro_.unobserve(src);
-	}
-} as Directive;
+	unmounted(src) {
+		const ro = map.get(src);
+		if (ro) {
+			ro.disconnect();
+			map.delete(src);
+		}
+	},
+} as Directive<HTMLElement, boolean>;
diff --git a/packages/client/src/directives/get-size.ts b/packages/client/src/directives/get-size.ts
index 76b54ea4b00e..32ca428d30b8 100644
--- a/packages/client/src/directives/get-size.ts
+++ b/packages/client/src/directives/get-size.ts
@@ -1,12 +1,12 @@
 import { Directive } from 'vue';
 
-const mountings = new Map<Element, {
+const mountings = new Map<HTMLElement, {
 	resize: ResizeObserver;
 	intersection?: IntersectionObserver;
 	fn: (w: number, h: number) => void;
 }>();
 
-function calc(src: Element) {
+const calc = (src: HTMLElement): void => {
 	const info = mountings.get(src);
 	const height = src.clientHeight;
 	const width = src.clientWidth;
@@ -30,25 +30,26 @@ function calc(src: Element) {
 	}
 
 	info.fn(width, height);
-}
+};
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const resize = new ResizeObserver((entries, observer) => {
+	mounted(src, binding) {
+		const resize = new ResizeObserver(() => {
 			calc(src);
 		});
 		resize.observe(src);
 
-		mountings.set(src, { resize, fn: binding.value, });
+		mountings.set(src, { resize, fn: binding.value });
 		calc(src);
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src, binding) {
 		binding.value(0, 0);
 		const info = mountings.get(src);
 		if (!info) return;
 		info.resize.disconnect();
 		if (info.intersection) info.intersection.disconnect();
 		mountings.delete(src);
-	}
-} as Directive<Element, (w: number, h: number) => void>;
+	},
+} as Directive<HTMLElement, (w: number, h: number) => void>;
diff --git a/packages/client/src/directives/hotkey.ts b/packages/client/src/directives/hotkey.ts
index d813a95074d8..ed53eacf3c68 100644
--- a/packages/client/src/directives/hotkey.ts
+++ b/packages/client/src/directives/hotkey.ts
@@ -1,24 +1,28 @@
 import { Directive } from 'vue';
-import { makeHotkey } from '../scripts/hotkey';
+import { Keymap, makeHotkey } from '../scripts/hotkey';
 
-export default {
-	mounted(el, binding) {
-		el._hotkey_global = binding.modifiers.global === true;
+const map = new WeakMap<HTMLElement, () => void>();
 
-		el._keyHandler = makeHotkey(binding.value);
+// eslint-disable-next-line import/no-default-export
+export default {
+	mounted(src, binding) {
+		const global = binding.modifiers.global === true;
+		const handler = makeHotkey(binding.value);
 
-		if (el._hotkey_global) {
-			document.addEventListener('keydown', el._keyHandler);
+		if (global) {
+			document.addEventListener('keydown', handler);
+			map.set(src, () => document.removeEventListener('keydown', handler));
 		} else {
-			el.addEventListener('keydown', el._keyHandler);
+			src.addEventListener('keydown', handler);
+			map.set(src, () => src.removeEventListener('keydown', handler));
 		}
 	},
 
-	unmounted(el) {
-		if (el._hotkey_global) {
-			document.removeEventListener('keydown', el._keyHandler);
-		} else {
-			el.removeEventListener('keydown', el._keyHandler);
+	unmounted(src) {
+		const stopHandler = map.get(src);
+		if (stopHandler) {
+			stopHandler();
+			map.delete(src);
 		}
-	}
-} as Directive;
+	},
+} as Directive<HTMLElement, Keymap>;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index 401a917cba6d..c8d870c5097a 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -11,18 +11,31 @@ import anim from './anim';
 import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
+import adaptiveBg from './adaptive-bg';
+import container from './container';
 
-export default function(app: App) {
-	app.directive('userPreview', userPreview);
-	app.directive('user-preview', userPreview);
-	app.directive('size', size);
-	app.directive('get-size', getSize);
-	app.directive('ripple', ripple);
-	app.directive('tooltip', tooltip);
-	app.directive('hotkey', hotkey);
-	app.directive('appear', appear);
-	app.directive('anim', anim);
-	app.directive('click-anime', clickAnime);
-	app.directive('panel', panel);
-	app.directive('adaptive-border', adaptiveBorder);
-}
+import { typedEntries } from '@/scripts/tms/utils';
+
+// eslint-disable-next-line import/no-default-export
+export default (app: App): void => {
+	for (const [key, value] of typedEntries(directives)) {
+		app.directive(key, value);
+	}
+};
+
+export const directives = {
+	'userPreview': userPreview,
+	'user-preview': userPreview,
+	'size': size,
+	'get-size': getSize,
+	'ripple': ripple,
+	'tooltip': tooltip,
+	'hotkey': hotkey,
+	'appear': appear,
+	'anim': anim,
+	'click-anime': clickAnime,
+	'panel': panel,
+	'adaptive-border': adaptiveBorder,
+	'adaptive-bg': adaptiveBg,
+	'container': container,
+};
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
index 8727183d3652..03f15f2f5b51 100644
--- a/packages/client/src/directives/panel.ts
+++ b/packages/client/src/directives/panel.ts
@@ -1,19 +1,28 @@
 import { Directive } from 'vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
+	mounted(src) {
+		const isTransparent = (color?: string | null): boolean => {
+			if (!color) return false;
+			if (color === 'transparent') return true;
+			const [_r, _g, _b, alpha = null] = [...color.match(/\d+/g) ?? []];
+			return alpha === '0';
+		};
+
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (!el) return 'transparent';
+			const { backgroundColor } = window.getComputedStyle(el);
+			if (backgroundColor && !isTransparent(backgroundColor)) {
+				return backgroundColor;
 			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+				return getBgColor(el.parentElement);
 			}
 		};
 
 		const parentBg = getBgColor(src.parentElement);
 
-		const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel');
+		const myBg = window.getComputedStyle(document.documentElement).getPropertyValue('--panel');
 
 		if (parentBg === myBg) {
 			src.style.backgroundColor = 'var(--bg)';
@@ -21,4 +30,4 @@ export default {
 			src.style.backgroundColor = 'var(--panel)';
 		}
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts
index c444a082ed50..4d41a2a45178 100644
--- a/packages/client/src/directives/ripple.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -1,18 +1,21 @@
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { Directive } from 'vue';
 import { popup } from '@/os';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el, binding, vn) {
+	mounted(src, binding) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
 
-		el.addEventListener('click', () => {
-			const rect = el.getBoundingClientRect();
+		src.addEventListener('click', () => {
+			const { offsetWidth: width, offsetHeight: height } = src;
+			const { top, left } = src.getBoundingClientRect();
 
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
+			const x = left + (width / 2);
+			const y = top + (height / 2);
 
 			popup(MkRippleEffect, { x, y }, {}, 'end');
 		});
-	}
-};
+	},
+} as Directive<HTMLElement, boolean>;
diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts
index c472a528ac70..f86fa7176ebf 100644
--- a/packages/client/src/directives/size.ts
+++ b/packages/client/src/directives/size.ts
@@ -2,8 +2,8 @@ import { Directive } from 'vue';
 
 type Value = { max?: number[]; min?: number[]; };
 
-//const observers = new Map<Element, ResizeObserver>();
-const mountings = new Map<Element, {
+//const observers = new Map<HTMLElement, ResizeObserver>();
+const mountings = new Map<HTMLElement, {
 	value: Value;
 	resize: ResizeObserver;
 	intersection?: IntersectionObserver;
@@ -17,9 +17,9 @@ type ClassOrder = {
 
 const cache = new Map<string, ClassOrder>();
 
-function getClassOrder(width: number, queue: Value): ClassOrder {
-	const getMaxClass = (v: number) => `max-width_${v}px`;
-	const getMinClass = (v: number) => `min-width_${v}px`;
+const getClassOrder = (width: number, queue: Value): ClassOrder => {
+	const getMaxClass = (v: number): `max-width_${typeof v}px` => `max-width_${v}px`;
+	const getMinClass = (v: number): `min-width_${typeof v}px` => `min-width_${v}px`;
 
 	return {
 		add: [
@@ -29,20 +29,20 @@ function getClassOrder(width: number, queue: Value): ClassOrder {
 		remove: [
 			...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
 			...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
-		]
+		],
 	};
-}
+};
 
-function applyClassOrder(el: Element, order: ClassOrder) {
+const applyClassOrder = (el: HTMLElement, order: ClassOrder): void => {
 	el.classList.add(...order.add);
 	el.classList.remove(...order.remove);
-}
+};
 
-function getOrderName(width: number, queue: Value): string {
+const getOrderName = (width: number, queue: Value): string => {
 	return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
-}
+};
 
-function calc(el: Element) {
+const calc = (el: HTMLElement): void => {
 	const info = mountings.get(el);
 	const width = el.clientWidth;
 
@@ -74,11 +74,12 @@ function calc(el: Element) {
 		cache.set(getOrderName(width, info.value), order);
 		applyClassOrder(el, order);
 	}
-}
+};
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const resize = new ResizeObserver((entries, observer) => {
+	mounted(src, binding) {
+		const resize = new ResizeObserver(() => {
 			calc(src);
 		});
 
@@ -92,16 +93,16 @@ export default {
 		resize.observe(src);
 	},
 
-	updated(src, binding, vn) {
+	updated(src, binding) {
 		mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
 		calc(src);
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src) {
 		const info = mountings.get(src);
 		if (!info) return;
 		info.resize.disconnect();
 		if (info.intersection) info.intersection.disconnect();
 		mountings.delete(src);
-	}
-} as Directive<Element, Value>;
+	},
+} as Directive<HTMLElement, Value>;
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index 5d13497b5f56..e7a0ab23e7ff 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -8,19 +8,20 @@ import { popup, alert } from '@/os';
 const start = isTouchUsing ? 'touchstart' : 'mouseover';
 const end = isTouchUsing ? 'touchend' : 'mouseleave';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(src, binding) {
 		const delay = binding.modifiers.noDelay ? 0 : 100;
 
-		const self = (el as any)._tooltipDirective_ = {} as any;
+		const self = (src as any)._tooltipDirective_ = {} as any;
 
-		self.text = binding.value as string;
+		self.text = binding.value;
 		self._close = null;
 		self.showTimer = null;
 		self.hideTimer = null;
 		self.checkTimer = null;
 
-		self.close = () => {
+		self.close = (): void => {
 			if (self._close) {
 				window.clearInterval(self.checkTimer);
 				self._close();
@@ -29,7 +30,7 @@ export default {
 		};
 
 		if (binding.arg === 'dialog') {
-			el.addEventListener('click', (ev) => {
+			src.addEventListener('click', (ev: MouseEvent) => {
 				ev.preventDefault();
 				ev.stopPropagation();
 				alert({
@@ -40,8 +41,8 @@ export default {
 			});
 		}
 
-		self.show = () => {
-			if (!document.body.contains(el)) return;
+		self.show = (): void => {
+			if (!document.body.contains(src)) return;
 			if (self._close) return;
 			if (self.text == null) return;
 
@@ -51,43 +52,43 @@ export default {
 				text: self.text,
 				asMfm: binding.modifiers.mfm,
 				direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
-				targetElement: el,
+				targetElement: src,
 			}, {}, 'closed');
 
-			self._close = () => {
+			self._close = (): void => {
 				showing.value = false;
 			};
 		};
 
-		el.addEventListener('selectstart', ev => {
+		src.addEventListener('selectstart', ev => {
 			ev.preventDefault();
 		});
 
-		el.addEventListener(start, () => {
+		src.addEventListener(start, () => {
 			window.clearTimeout(self.showTimer);
 			window.clearTimeout(self.hideTimer);
 			self.showTimer = window.setTimeout(self.show, delay);
 		}, { passive: true });
 
-		el.addEventListener(end, () => {
+		src.addEventListener(end, () => {
 			window.clearTimeout(self.showTimer);
 			window.clearTimeout(self.hideTimer);
 			self.hideTimer = window.setTimeout(self.close, delay);
 		}, { passive: true });
 
-		el.addEventListener('click', () => {
+		src.addEventListener('click', () => {
 			window.clearTimeout(self.showTimer);
 			self.close();
 		});
 	},
 
-	updated(el, binding) {
-		const self = el._tooltipDirective_;
-		self.text = binding.value as string;
+	updated(src, binding) {
+		const self = (src as any)._tooltipDirective_;
+		self.text = binding.value;
 	},
 
-	unmounted(el, binding, vn) {
-		const self = el._tooltipDirective_;
+	unmounted(src) {
+		const self = (src as any)._tooltipDirective_;
 		window.clearInterval(self.checkTimer);
 	},
-} as Directive;
+} as Directive<HTMLElement, string>;
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
index c46167662490..e27e329ab8d9 100644
--- a/packages/client/src/directives/user-preview.ts
+++ b/packages/client/src/directives/user-preview.ts
@@ -1,24 +1,28 @@
 import { defineAsyncComponent, Directive, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import autobind from 'autobind-decorator';
 import { popup } from '@/os';
 
 export class UserPreview {
-	private el;
-	private user;
-	private showTimer;
-	private hideTimer;
-	private checkTimer;
-	private promise;
-
-	constructor(el, user) {
+	private el: HTMLElement;
+	private user: Misskey.entities.User;
+	private showTimer: number | undefined;
+	private hideTimer: number | undefined;
+	private checkTimer: number | undefined;
+	private promise: {
+		cancel: () => void;
+	} | null;
+
+	constructor(el: HTMLElement, user: Misskey.entities.User) {
 		this.el = el;
 		this.user = user;
+		this.promise = null;
 
 		this.attach();
 	}
 
 	@autobind
-	private show() {
+	private show(): void {
 		if (!document.body.contains(this.el)) return;
 		if (this.promise) return;
 
@@ -27,7 +31,7 @@ export class UserPreview {
 		popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), {
 			showing,
 			q: this.user,
-			source: this.el
+			source: this.el,
 		}, {
 			mouseover: () => {
 				window.clearTimeout(this.hideTimer);
@@ -39,9 +43,9 @@ export class UserPreview {
 		}, 'closed');
 
 		this.promise = {
-			cancel: () => {
+			cancel: (): void => {
 				showing.value = false;
-			}
+			},
 		};
 
 		this.checkTimer = window.setInterval(() => {
@@ -54,7 +58,7 @@ export class UserPreview {
 	}
 
 	@autobind
-	private close() {
+	private close(): void {
 		if (this.promise) {
 			window.clearInterval(this.checkTimer);
 			this.promise.cancel();
@@ -63,34 +67,34 @@ export class UserPreview {
 	}
 
 	@autobind
-	private onMouseover() {
+	private onMouseover(): void {
 		window.clearTimeout(this.showTimer);
 		window.clearTimeout(this.hideTimer);
 		this.showTimer = window.setTimeout(this.show, 500);
 	}
 
 	@autobind
-	private onMouseleave() {
+	private onMouseleave(): void {
 		window.clearTimeout(this.showTimer);
 		window.clearTimeout(this.hideTimer);
 		this.hideTimer = window.setTimeout(this.close, 500);
 	}
 
 	@autobind
-	private onClick() {
+	private onClick(): void {
 		window.clearTimeout(this.showTimer);
 		this.close();
 	}
 
 	@autobind
-	public attach() {
+	public attach(): void {
 		this.el.addEventListener('mouseover', this.onMouseover);
 		this.el.addEventListener('mouseleave', this.onMouseleave);
 		this.el.addEventListener('click', this.onClick);
 	}
 
 	@autobind
-	public detach() {
+	public detach(): void {
 		this.el.removeEventListener('mouseover', this.onMouseover);
 		this.el.removeEventListener('mouseleave', this.onMouseleave);
 		this.el.removeEventListener('click', this.onClick);
@@ -98,8 +102,9 @@ export class UserPreview {
 	}
 }
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(el: HTMLElement, binding) {
 		if (binding.value == null) return;
 
 		// TODO: 新たにプロパティを作るのをやめMapを使う
@@ -109,10 +114,10 @@ export default {
 		self.preview = new UserPreview(el, binding.value);
 	},
 
-	unmounted(el, binding, vn) {
+	unmounted(el, binding) {
 		if (binding.value == null) return;
 
-		const self = el._userPreviewDirective_;
+		const self = (el as any)._userPreviewDirective_;
 		self.preview.detach();
-	}
-} as Directive;
+	},
+} as Directive<HTMLElement, Misskey.entities.User | null | undefined>;
diff --git a/packages/client/src/scripts/hotkey.ts b/packages/client/src/scripts/hotkey.ts
index bd8c3b6cab4e..8fe9fac3c35f 100644
--- a/packages/client/src/scripts/hotkey.ts
+++ b/packages/client/src/scripts/hotkey.ts
@@ -2,7 +2,7 @@ import keyCode from './keycode';
 
 type Callback = (ev: KeyboardEvent) => void;
 
-type Keymap = Record<string, Callback>;
+export type Keymap = Record<string, Callback>;
 
 type Pattern = {
 	which: string[];
@@ -17,12 +17,12 @@ type Action = {
 	allowRepeat: boolean;
 };
 
-const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, callback]): Action => {
-	const result = {
+const parseKeymap = (keymap: Keymap): Action[] => Object.entries(keymap).map(([patterns, callback]): Action => {
+	const result: Action = {
 		patterns: [],
 		callback,
-		allowRepeat: true
-	} as Action;
+		allowRepeat: true,
+	};
 
 	if (patterns.match(/^\(.*\)$/) !== null) {
 		result.allowRepeat = false;
@@ -34,7 +34,7 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 			which: [],
 			ctrl: false,
 			alt: false,
-			shift: false
+			shift: false,
 		} as Pattern;
 
 		const keys = part.trim().split('+').map(x => x.trim().toLowerCase());
@@ -61,11 +61,11 @@ function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
 		pattern.ctrl === ev.ctrlKey &&
 		pattern.shift === ev.shiftKey &&
 		pattern.alt === ev.altKey &&
-		!ev.metaKey
+		!ev.metaKey,
 	);
 }
 
-export const makeHotkey = (keymap: Keymap) => {
+export const makeHotkey = (keymap: Keymap): ((ev: KeyboardEvent) => void) => {
 	const actions = parseKeymap(keymap);
 
 	return (ev: KeyboardEvent) => {
diff --git a/packages/client/src/scripts/tms/utils.ts b/packages/client/src/scripts/tms/utils.ts
index 39961583bcf3..ad4ee249e372 100644
--- a/packages/client/src/scripts/tms/utils.ts
+++ b/packages/client/src/scripts/tms/utils.ts
@@ -44,7 +44,8 @@ export const typedEntries = <T extends Record<string, unknown>>(obj: T): TypedEn
 };
 
 // Array<T>.prototype.at(index: number): T | undefined;
-export const arrayAt = <T>(array: T[], index: number): T | undefined => {
+export const arrayAt = <T>(arrayLike: T[] | ArrayLike<T>, index: number): T | undefined => {
+	const array = Array.isArray(arrayLike) ? arrayLike : Array.from(arrayLike);
 	if (typeof Array.prototype.at === 'function') {
 		return array.at(index);
 	} else {

From c53bf479d9c2ba51852e3bc455fff3849bdea353 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Wed, 26 Apr 2023 22:52:42 +0900
Subject: [PATCH 133/147] fix types

---
 packages/client/src/components/global/MkPageHeader.vue | 4 ++--
 packages/client/src/pages/user/index.vue               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index a7e6bbcf1403..63b1a2401d48 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 	tab: undefined,
 	actions: undefined,
-	tabs: (): Tab[] => [],
+	tabs: undefined,
 });
 
 const emit = defineEmits<{
@@ -71,7 +71,7 @@ const thin_ = props.thin || inject<boolean>('shouldHeaderThin', false);
 let el = $shallowRef<HTMLElement>();
 const bg = ref<string>();
 let narrow = $ref(false);
-const hasTabs = $computed(() => props.tabs.length > 0);
+const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
 const hasActions = $computed(() => props.actions && props.actions.length > 0);
 const show = $computed(() => {
 	return !hideTitle || hasTabs || hasActions;
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 13641f03deed..0ac4018bc8b9 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -83,7 +83,7 @@ const headerTabs = $computed(() => user ? [{
 	key: 'gallery',
 	title: i18n.ts.gallery,
 	icon: 'ti ti-icons',
-}] : null);
+}] : []);
 
 definePageMetadata(computed(() => user ? {
 	icon: 'ti ti-user',

From 6e7c55f0fc3bb8ea83ba8c26a9b80475e05f1436 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Sun, 30 Apr 2023 04:58:20 +0900
Subject: [PATCH 134/147] fix lockfile

---
 pnpm-lock.yaml | 536 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 381 insertions(+), 155 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eda52908a534..b2dcddab8275 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,7 @@ importers:
         version: 2.0.1
       '@typescript-eslint/parser':
         specifier: 5.54.0
-        version: 5.54.0(eslint@8.35.0)(typescript@4.9.5)
+        version: 5.54.0(eslint@8.39.0)(typescript@4.9.5)
       cross-env:
         specifier: 7.0.3
         version: 7.0.3
@@ -184,7 +184,7 @@ importers:
         version: 2.2.3
       json5-loader:
         specifier: 4.0.1
-        version: 4.0.1(webpack@5.76.3)
+        version: 4.0.1(webpack@5.81.0)
       jsonld:
         specifier: 8.1.1
         version: 8.1.1
@@ -346,7 +346,7 @@ importers:
         version: 0.2.1
       ts-loader:
         specifier: 9.4.2
-        version: 9.4.2(typescript@4.9.5)(webpack@5.76.3)
+        version: 9.4.2(typescript@4.9.5)(webpack@5.81.0)
       ts-node:
         specifier: 10.9.1
         version: 10.9.1(@swc/core@1.3.36)(@types/node@18.14.1)(typescript@4.9.5)
@@ -1729,6 +1729,21 @@ packages:
     dev: false
     optional: true
 
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.39.0):
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 8.39.0
+      eslint-visitor-keys: 3.4.0
+    dev: true
+
+  /@eslint-community/regexpp@4.5.0:
+    resolution: {integrity: sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
   /@eslint/eslintrc@2.0.2:
     resolution: {integrity: sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1751,6 +1766,11 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@eslint/js@8.39.0:
+    resolution: {integrity: sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /@gar/promisify@1.1.3:
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
     dev: false
@@ -1806,6 +1826,15 @@ packages:
       '@jridgewell/trace-mapping': 0.3.17
     dev: false
 
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.18
+    dev: false
+
   /@jridgewell/resolve-uri@3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
@@ -1816,17 +1845,21 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
-  /@jridgewell/source-map@0.3.2:
-    resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==}
+  /@jridgewell/source-map@0.3.3:
+    resolution: {integrity: sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==}
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.18
     dev: false
 
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: false
 
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: false
+
   /@jridgewell/trace-mapping@0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
     dependencies:
@@ -1834,6 +1867,13 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: false
 
+  /@jridgewell/trace-mapping@0.3.18:
+    resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: false
+
   /@jridgewell/trace-mapping@0.3.9:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
     dependencies:
@@ -2486,7 +2526,7 @@ packages:
       '@tensorflow/tfjs-layers': 3.21.0(@tensorflow/tfjs-core@3.21.0)
       argparse: 1.0.10
       chalk: 4.1.2
-      core-js: 3.29.1
+      core-js: 3.30.1
       regenerator-runtime: 0.13.11
       yargs: 16.2.0
     transitivePeerDependencies:
@@ -2594,25 +2634,25 @@ packages:
   /@types/eslint-scope@3.7.4:
     resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
     dependencies:
-      '@types/eslint': 8.21.3
-      '@types/estree': 1.0.0
+      '@types/eslint': 8.37.0
+      '@types/estree': 1.0.1
     dev: false
 
-  /@types/eslint@8.21.3:
-    resolution: {integrity: sha512-fa7GkppZVEByMWGbTtE5MbmXWJTVbrjjaS8K6uQj+XtuuUv1fsuPAxhygfqLmsb/Ufb3CV8deFCpiMfAgi00Sw==}
+  /@types/eslint@8.37.0:
+    resolution: {integrity: sha512-Piet7dG2JBuDIfohBngQ3rCt7MgO9xCO4xIMKxBThCq5PNRB91IjlJ10eJVwfoNtvTErmxLzwBZ7rHZtbOMmFQ==}
     dependencies:
-      '@types/estree': 1.0.0
+      '@types/estree': 1.0.1
       '@types/json-schema': 7.0.11
     dev: false
 
-  /@types/estree@0.0.51:
-    resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
-    dev: false
-
   /@types/estree@1.0.0:
     resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
     dev: false
 
+  /@types/estree@1.0.1:
+    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+    dev: false
+
   /@types/expect@1.20.4:
     resolution: {integrity: sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==}
 
@@ -2637,11 +2677,18 @@ packages:
       '@types/node': 18.14.1
     dev: true
 
-  /@types/glob-stream@6.1.1:
-    resolution: {integrity: sha512-AGOUTsTdbPkRS0qDeyeS+6KypmfVpbT5j23SN8UPG63qjKXNKjXn6V9wZUr8Fin0m9l8oGYaPK8b2WUMF8xI1A==}
+  /@types/glob-stream@6.1.2:
+    resolution: {integrity: sha512-EIJSLP/nGyMzD8aFhJljO9nv3EmQ10xk1+dl+i15AITrcWLhhTTPmNMFK0TWcGRvVYuSlA1VPi1fe8tbgDsUhg==}
     dependencies:
-      '@types/glob': 8.1.0
-      '@types/node': 18.14.1
+      '@types/glob': 7.2.0
+      '@types/node': 18.16.3
+    dev: true
+
+  /@types/glob@7.2.0:
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.16.3
     dev: true
 
   /@types/glob@8.1.0:
@@ -2654,7 +2701,7 @@ packages:
   /@types/gulp-rename@2.0.1:
     resolution: {integrity: sha512-9ZjeS2RHEnmBmTcyi2+oeye3BgCsWhvi4uv3qCnAg8i6plOuRdaeNxjOves0ELysEXYLBl7bCl5fbVs7AZtgTA==}
     dependencies:
-      '@types/node': 18.14.1
+      '@types/node': 18.16.3
       '@types/vinyl': 2.0.7
     dev: true
 
@@ -2662,7 +2709,7 @@ packages:
     resolution: {integrity: sha512-spgZHJFqiEJGwqGlf7T/k4nkBpBcLgP7T0EfN6G2vvnhUfvd4uO1h8RwpXOE8x/54DVYUs1XCAtBHkX/R3axAQ==}
     dependencies:
       '@types/undertaker': 1.2.8
-      '@types/vinyl-fs': 3.0.1
+      '@types/vinyl-fs': 3.0.2
       chokidar: 3.5.3
     dev: true
 
@@ -2819,9 +2866,16 @@ packages:
     resolution: {integrity: sha512-xefu+RBie4xWlK8hwAzGh3npDz/4VhF6icY/shU+zv/1fNn+ZVG7T7CRwe9LId9sAYRPxI+59QBPuKL3WpyGRg==}
     dev: true
 
+  /@types/node@14.18.43:
+    resolution: {integrity: sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ==}
+    dev: true
+
   /@types/node@18.14.1:
     resolution: {integrity: sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==}
 
+  /@types/node@18.16.3:
+    resolution: {integrity: sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==}
+
   /@types/nodemailer@6.4.7:
     resolution: {integrity: sha512-f5qCBGAn/f0qtRcd4SEn88c8Fp3Swct1731X4ryPKqS61/A3LmmzN8zaEz7hneJvpjFbUUgY7lru/B/7ODTazg==}
     dependencies:
@@ -2881,13 +2935,6 @@ packages:
       '@types/node': 18.14.1
     dev: false
 
-  /@types/rimraf@2.0.5:
-    resolution: {integrity: sha512-YyP+VfeaqAyFmXoTh3HChxOQMyjByRMsHU7kc5KOJkSlXudhMhQIALbYV7rHh/l8d2lX3VUQzprrcAgWdRuU8g==}
-    dependencies:
-      '@types/glob': 8.1.0
-      '@types/node': 18.14.1
-    dev: true
-
   /@types/sanitize-html@2.8.0:
     resolution: {integrity: sha512-Uih6caOm3DsBYnVGOYn0A9NoTNe1c4aPStmHC/YA2JrpP9kx//jzaRcIklFvSpvVQEcpl/ZCr4DgISSf/YxTvg==}
     dependencies:
@@ -2963,7 +3010,7 @@ packages:
   /@types/undertaker@1.2.8:
     resolution: {integrity: sha512-gW3PRqCHYpo45XFQHJBhch7L6hytPsIe0QeLujlnFsjHPnXLhJcPdN6a9368d7aIQgH2I/dUTPFBlGeSNA3qOg==}
     dependencies:
-      '@types/node': 18.14.1
+      '@types/node': 18.16.3
       '@types/undertaker-registry': 1.0.1
       async-done: 1.3.2
     dev: true
@@ -2972,12 +3019,11 @@ packages:
     resolution: {integrity: sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==}
     dev: true
 
-  /@types/vinyl-fs@3.0.1:
-    resolution: {integrity: sha512-me2Gcxw23pZp62oqPoiTDDMz/txEmtEZzXM/D/VTr+xUX4LiNA+nQPs38SSPu5KHnsaEER4HEtzWU5qJRXigfA==}
+  /@types/vinyl-fs@3.0.2:
+    resolution: {integrity: sha512-ctNcmmzbMIKooXjRkyyUCOu2Z4AyqibL+RhXoF3pb7K7j+ezItnakmpm31LymkYHSIM5ey0tjIFzTvFOTSBCGw==}
     dependencies:
-      '@types/glob-stream': 6.1.1
-      '@types/node': 18.14.1
-      '@types/rimraf': 2.0.5
+      '@types/glob-stream': 6.1.2
+      '@types/node': 18.16.3
       '@types/vinyl': 2.0.7
     dev: true
 
@@ -2985,7 +3031,7 @@ packages:
     resolution: {integrity: sha512-4UqPv+2567NhMQuMLdKAyK4yzrfCqwaTt6bLhHEs8PFcxbHILsrxaY63n4wgE/BRLDWDQeI+WcTmkXKExh9hQg==}
     dependencies:
       '@types/expect': 1.20.4
-      '@types/node': 18.14.1
+      '@types/node': 18.16.3
 
   /@types/web-push@3.3.2:
     resolution: {integrity: sha512-JxWGVL/m7mWTIg4mRYO+A6s0jPmBkr4iJr39DqJpRJAc+jrPiEe1/asmkwerzRon8ZZDxaZJpsxpv0Z18Wo9gw==}
@@ -3017,7 +3063,7 @@ packages:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 18.14.1
+      '@types/node': 14.18.43
     dev: true
     optional: true
 
@@ -3073,6 +3119,26 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/parser@5.54.0(eslint@8.39.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-aAVL3Mu2qTi+h/r04WI/5PfNWvO6pdhpeMRWk9R7rEV4mwJNzoWf5CCU5vDKBsPIFQFjEq1xg7XBI2rjiMXQbQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.54.0
+      '@typescript-eslint/types': 5.54.0
+      '@typescript-eslint/typescript-estree': 5.54.0(typescript@4.9.5)
+      debug: 4.3.4(supports-color@8.1.1)
+      eslint: 8.39.0
+      typescript: 4.9.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/scope-manager@5.54.0:
     resolution: {integrity: sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3120,7 +3186,7 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.3.8
+      semver: 7.5.0
       tsutils: 3.21.0(typescript@4.9.5)
       typescript: 4.9.5
     transitivePeerDependencies:
@@ -3246,109 +3312,109 @@ packages:
   /@vue/shared@3.2.47:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
 
-  /@webassemblyjs/ast@1.11.1:
-    resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
+  /@webassemblyjs/ast@1.11.5:
+    resolution: {integrity: sha512-LHY/GSAZZRpsNQH+/oHqhRQ5FT7eoULcBqgfyTB5nQHogFnK3/7QoN7dLnwSE/JkUAF0SrRuclT7ODqMFtWxxQ==}
     dependencies:
-      '@webassemblyjs/helper-numbers': 1.11.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
+      '@webassemblyjs/helper-numbers': 1.11.5
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.5
     dev: false
 
-  /@webassemblyjs/floating-point-hex-parser@1.11.1:
-    resolution: {integrity: sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==}
+  /@webassemblyjs/floating-point-hex-parser@1.11.5:
+    resolution: {integrity: sha512-1j1zTIC5EZOtCplMBG/IEwLtUojtwFVwdyVMbL/hwWqbzlQoJsWCOavrdnLkemwNoC/EOwtUFch3fuo+cbcXYQ==}
     dev: false
 
-  /@webassemblyjs/helper-api-error@1.11.1:
-    resolution: {integrity: sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==}
+  /@webassemblyjs/helper-api-error@1.11.5:
+    resolution: {integrity: sha512-L65bDPmfpY0+yFrsgz8b6LhXmbbs38OnwDCf6NpnMUYqa+ENfE5Dq9E42ny0qz/PdR0LJyq/T5YijPnU8AXEpA==}
     dev: false
 
-  /@webassemblyjs/helper-buffer@1.11.1:
-    resolution: {integrity: sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==}
+  /@webassemblyjs/helper-buffer@1.11.5:
+    resolution: {integrity: sha512-fDKo1gstwFFSfacIeH5KfwzjykIE6ldh1iH9Y/8YkAZrhmu4TctqYjSh7t0K2VyDSXOZJ1MLhht/k9IvYGcIxg==}
     dev: false
 
-  /@webassemblyjs/helper-numbers@1.11.1:
-    resolution: {integrity: sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==}
+  /@webassemblyjs/helper-numbers@1.11.5:
+    resolution: {integrity: sha512-DhykHXM0ZABqfIGYNv93A5KKDw/+ywBFnuWybZZWcuzWHfbp21wUfRkbtz7dMGwGgT4iXjWuhRMA2Mzod6W4WA==}
     dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.11.1
-      '@webassemblyjs/helper-api-error': 1.11.1
+      '@webassemblyjs/floating-point-hex-parser': 1.11.5
+      '@webassemblyjs/helper-api-error': 1.11.5
       '@xtuc/long': 4.2.2
     dev: false
 
-  /@webassemblyjs/helper-wasm-bytecode@1.11.1:
-    resolution: {integrity: sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==}
+  /@webassemblyjs/helper-wasm-bytecode@1.11.5:
+    resolution: {integrity: sha512-oC4Qa0bNcqnjAowFn7MPCETQgDYytpsfvz4ujZz63Zu/a/v71HeCAAmZsgZ3YVKec3zSPYytG3/PrRCqbtcAvA==}
     dev: false
 
-  /@webassemblyjs/helper-wasm-section@1.11.1:
-    resolution: {integrity: sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==}
+  /@webassemblyjs/helper-wasm-section@1.11.5:
+    resolution: {integrity: sha512-uEoThA1LN2NA+K3B9wDo3yKlBfVtC6rh0i4/6hvbz071E8gTNZD/pT0MsBf7MeD6KbApMSkaAK0XeKyOZC7CIA==}
     dependencies:
-      '@webassemblyjs/ast': 1.11.1
-      '@webassemblyjs/helper-buffer': 1.11.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
-      '@webassemblyjs/wasm-gen': 1.11.1
+      '@webassemblyjs/ast': 1.11.5
+      '@webassemblyjs/helper-buffer': 1.11.5
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.5
+      '@webassemblyjs/wasm-gen': 1.11.5
     dev: false
 
-  /@webassemblyjs/ieee754@1.11.1:
-    resolution: {integrity: sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==}
+  /@webassemblyjs/ieee754@1.11.5:
+    resolution: {integrity: sha512-37aGq6qVL8A8oPbPrSGMBcp38YZFXcHfiROflJn9jxSdSMMM5dS5P/9e2/TpaJuhE+wFrbukN2WI6Hw9MH5acg==}
     dependencies:
       '@xtuc/ieee754': 1.2.0
     dev: false
 
-  /@webassemblyjs/leb128@1.11.1:
-    resolution: {integrity: sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==}
+  /@webassemblyjs/leb128@1.11.5:
+    resolution: {integrity: sha512-ajqrRSXaTJoPW+xmkfYN6l8VIeNnR4vBOTQO9HzR7IygoCcKWkICbKFbVTNMjMgMREqXEr0+2M6zukzM47ZUfQ==}
     dependencies:
       '@xtuc/long': 4.2.2
     dev: false
 
-  /@webassemblyjs/utf8@1.11.1:
-    resolution: {integrity: sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==}
+  /@webassemblyjs/utf8@1.11.5:
+    resolution: {integrity: sha512-WiOhulHKTZU5UPlRl53gHR8OxdGsSOxqfpqWeA2FmcwBMaoEdz6b2x2si3IwC9/fSPLfe8pBMRTHVMk5nlwnFQ==}
     dev: false
 
-  /@webassemblyjs/wasm-edit@1.11.1:
-    resolution: {integrity: sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==}
+  /@webassemblyjs/wasm-edit@1.11.5:
+    resolution: {integrity: sha512-C0p9D2fAu3Twwqvygvf42iGCQ4av8MFBLiTb+08SZ4cEdwzWx9QeAHDo1E2k+9s/0w1DM40oflJOpkZ8jW4HCQ==}
     dependencies:
-      '@webassemblyjs/ast': 1.11.1
-      '@webassemblyjs/helper-buffer': 1.11.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
-      '@webassemblyjs/helper-wasm-section': 1.11.1
-      '@webassemblyjs/wasm-gen': 1.11.1
-      '@webassemblyjs/wasm-opt': 1.11.1
-      '@webassemblyjs/wasm-parser': 1.11.1
-      '@webassemblyjs/wast-printer': 1.11.1
+      '@webassemblyjs/ast': 1.11.5
+      '@webassemblyjs/helper-buffer': 1.11.5
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.5
+      '@webassemblyjs/helper-wasm-section': 1.11.5
+      '@webassemblyjs/wasm-gen': 1.11.5
+      '@webassemblyjs/wasm-opt': 1.11.5
+      '@webassemblyjs/wasm-parser': 1.11.5
+      '@webassemblyjs/wast-printer': 1.11.5
     dev: false
 
-  /@webassemblyjs/wasm-gen@1.11.1:
-    resolution: {integrity: sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==}
+  /@webassemblyjs/wasm-gen@1.11.5:
+    resolution: {integrity: sha512-14vteRlRjxLK9eSyYFvw1K8Vv+iPdZU0Aebk3j6oB8TQiQYuO6hj9s4d7qf6f2HJr2khzvNldAFG13CgdkAIfA==}
     dependencies:
-      '@webassemblyjs/ast': 1.11.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
-      '@webassemblyjs/ieee754': 1.11.1
-      '@webassemblyjs/leb128': 1.11.1
-      '@webassemblyjs/utf8': 1.11.1
+      '@webassemblyjs/ast': 1.11.5
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.5
+      '@webassemblyjs/ieee754': 1.11.5
+      '@webassemblyjs/leb128': 1.11.5
+      '@webassemblyjs/utf8': 1.11.5
     dev: false
 
-  /@webassemblyjs/wasm-opt@1.11.1:
-    resolution: {integrity: sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==}
+  /@webassemblyjs/wasm-opt@1.11.5:
+    resolution: {integrity: sha512-tcKwlIXstBQgbKy1MlbDMlXaxpucn42eb17H29rawYLxm5+MsEmgPzeCP8B1Cl69hCice8LeKgZpRUAPtqYPgw==}
     dependencies:
-      '@webassemblyjs/ast': 1.11.1
-      '@webassemblyjs/helper-buffer': 1.11.1
-      '@webassemblyjs/wasm-gen': 1.11.1
-      '@webassemblyjs/wasm-parser': 1.11.1
+      '@webassemblyjs/ast': 1.11.5
+      '@webassemblyjs/helper-buffer': 1.11.5
+      '@webassemblyjs/wasm-gen': 1.11.5
+      '@webassemblyjs/wasm-parser': 1.11.5
     dev: false
 
-  /@webassemblyjs/wasm-parser@1.11.1:
-    resolution: {integrity: sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==}
+  /@webassemblyjs/wasm-parser@1.11.5:
+    resolution: {integrity: sha512-SVXUIwsLQlc8srSD7jejsfTU83g7pIGr2YYNb9oHdtldSxaOhvA5xwvIiWIfcX8PlSakgqMXsLpLfbbJ4cBYew==}
     dependencies:
-      '@webassemblyjs/ast': 1.11.1
-      '@webassemblyjs/helper-api-error': 1.11.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.1
-      '@webassemblyjs/ieee754': 1.11.1
-      '@webassemblyjs/leb128': 1.11.1
-      '@webassemblyjs/utf8': 1.11.1
+      '@webassemblyjs/ast': 1.11.5
+      '@webassemblyjs/helper-api-error': 1.11.5
+      '@webassemblyjs/helper-wasm-bytecode': 1.11.5
+      '@webassemblyjs/ieee754': 1.11.5
+      '@webassemblyjs/leb128': 1.11.5
+      '@webassemblyjs/utf8': 1.11.5
     dev: false
 
-  /@webassemblyjs/wast-printer@1.11.1:
-    resolution: {integrity: sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==}
+  /@webassemblyjs/wast-printer@1.11.5:
+    resolution: {integrity: sha512-f7Pq3wvg3GSPUPzR0F6bmI89Hdb+u9WXrSKc4v+N0aV0q6r42WoF92Jp2jEorBEBRoRNXgjp53nBniDXcqZYPA==}
     dependencies:
-      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/ast': 1.11.5
       '@xtuc/long': 4.2.2
     dev: false
 
@@ -3852,6 +3918,7 @@ packages:
   /atob@2.1.2:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
+    hasBin: true
     dev: false
 
   /autobind-decorator@2.4.0:
@@ -3863,7 +3930,7 @@ packages:
     resolution: {integrity: sha512-WKExI/eSGgGAkWAO+wMVdFObZV7hQen54UpD1kCCTN3tvlL3W1jL4+lPP/M7MwoP7Q4RHzKtO3JQ4HxYEcd+xQ==}
     dependencies:
       browserslist: 1.7.7
-      caniuse-db: 1.0.30001472
+      caniuse-db: 1.0.30001481
       normalize-range: 0.1.2
       num2fraction: 1.2.2
       postcss: 5.2.18
@@ -4124,9 +4191,11 @@ packages:
 
   /browserslist@1.7.7:
     resolution: {integrity: sha512-qHJblDE2bXVRYzuDetv/wAeHOJyO97+9wxC1cdCtyzgNuSozOyRCiiLaCR1f71AN66lQdVVBipWm63V+a7bPOw==}
+    deprecated: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
+    hasBin: true
     dependencies:
-      caniuse-db: 1.0.30001472
-      electron-to-chromium: 1.4.342
+      caniuse-db: 1.0.30001481
+      electron-to-chromium: 1.4.377
     dev: false
 
   /browserslist@4.21.5:
@@ -4285,6 +4354,18 @@ packages:
     resolution: {integrity: sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==}
     engines: {node: '>=14.16'}
 
+  /cacheable-request@10.2.10:
+    resolution: {integrity: sha512-v6WB+Epm/qO4Hdlio/sfUn69r5Shgh39SsE9DSd4bIezP0mblOlObI+I0kUEM7J0JFc+I7pSeMeYaOYtX1N/VQ==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      '@types/http-cache-semantics': 4.0.1
+      get-stream: 6.0.1
+      http-cache-semantics: 4.1.1
+      keyv: 4.5.2
+      mimic-response: 4.0.0
+      normalize-url: 8.0.0
+      responselike: 3.0.0
+
   /cacheable-request@10.2.9:
     resolution: {integrity: sha512-CaAMr53AS1Tb9evO1BIWFnZjSr8A4pbXofpsNVWPMDZZj3ZQKHwsQG9BrTqQ4x5ZYJXz1T2b8LLtTZODxSpzbg==}
     engines: {node: '>=14.16'}
@@ -4296,6 +4377,7 @@ packages:
       mimic-response: 4.0.0
       normalize-url: 8.0.0
       responselike: 3.0.0
+    dev: false
 
   /cacheable-request@7.0.2:
     resolution: {integrity: sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==}
@@ -4345,13 +4427,13 @@ packages:
     resolution: {integrity: sha512-SBTl70K0PkDUIebbkXrxWqZlHNs0wRgRD6QZ8guctShjbh63gEPfF+Wj0Yw+75f5Y8tSzqAI/NcisYv/cCah2Q==}
     dependencies:
       browserslist: 1.7.7
-      caniuse-db: 1.0.30001472
+      caniuse-db: 1.0.30001481
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: false
 
-  /caniuse-db@1.0.30001472:
-    resolution: {integrity: sha512-OS+dlNL8+w2U9LKu0M3/h34qar8STVvzPvc2V9+tQwPBsFy2Z74zmQ/D7GPAJIvtm/fiTxu2ihTpLSp1kAOtOg==}
+  /caniuse-db@1.0.30001481:
+    resolution: {integrity: sha512-e9NQ3TgGjMDE8g++HxjQR6B2Zghmoufb0lpNwpqdNwZIgSulI2YtU12jlb8ghQqdwuVKMkfEyyOh7KMHJGeofQ==}
     dev: false
 
   /caniuse-lite@1.0.30001472:
@@ -4483,7 +4565,7 @@ packages:
       css-what: 6.1.0
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.0.1
+      domutils: 3.1.0
 
   /cheerio@1.0.0-rc.12:
     resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==}
@@ -4492,13 +4574,14 @@ packages:
       cheerio-select: 2.1.0
       dom-serializer: 2.0.0
       domhandler: 5.0.3
-      domutils: 3.0.1
+      domutils: 3.1.0
       htmlparser2: 8.0.2
       parse5: 7.1.2
       parse5-htmlparser2-tree-adapter: 7.0.0
 
   /chokidar@2.1.8:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
+    deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
     dependencies:
       anymatch: 2.0.0
       async-each: 1.0.6
@@ -4764,6 +4847,7 @@ packages:
 
   /color-support@1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
+    hasBin: true
     dev: false
 
   /color@0.11.4:
@@ -4786,8 +4870,8 @@ packages:
     resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
     dev: true
 
-  /colorette@2.0.19:
-    resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
+  /colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
 
   /colormin@1.1.2:
@@ -5110,6 +5194,12 @@ packages:
     resolution: {integrity: sha512-+jwgnhg6cQxKYIIjGtAHq2nwUOolo9eoFZ4sHfUH09BLXBgxnH4gA0zEd+t+BO2cNB8idaBtZFcFTRjQJRJmAw==}
     requiresBuild: true
     dev: false
+    optional: true
+
+  /core-js@3.30.1:
+    resolution: {integrity: sha512-ZNS5nbiSwDTq4hFosEDqm65izl2CWmLz0hARJMyNQBgkUZMIF51cQiMvIQKA6hvuaeWxQDP3hEedM1JZIgTldQ==}
+    requiresBuild: true
+    dev: false
 
   /core-util-is@1.0.2:
     resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
@@ -5152,6 +5242,7 @@ packages:
   /cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
     dependencies:
       cross-spawn: 7.0.3
     dev: true
@@ -5182,7 +5273,7 @@ packages:
       boolbase: 1.0.0
       css-what: 6.1.0
       domhandler: 5.0.3
-      domutils: 3.0.1
+      domutils: 3.1.0
       nth-check: 2.1.1
 
   /css-what@6.1.0:
@@ -5234,6 +5325,7 @@ packages:
   /csso@2.3.2:
     resolution: {integrity: sha512-FmCI/hmqDeHHLaIQckMhMZneS84yzUZdrWDAvJVVxOwcKE1P1LF9FGmzr1ktIQSxOw6fl3PaQsmfg+GN+VvR3w==}
     engines: {node: '>=0.10.0'}
+    hasBin: true
     dependencies:
       clap: 1.2.3
       source-map: 0.5.7
@@ -5267,11 +5359,12 @@ packages:
   /cypress@12.7.0:
     resolution: {integrity: sha512-7rq+nmhzz0u6yabCFyPtADU2OOrYt6pvUau9qV7xyifJ/hnsaw/vkr0tnLlcuuQKUAOC1v1M1e4Z0zG7S0IAvA==}
     engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
+    hasBin: true
     requiresBuild: true
     dependencies:
       '@cypress/request': 2.88.11
       '@cypress/xvfb': 1.2.4(supports-color@8.1.1)
-      '@types/node': 14.18.42
+      '@types/node': 14.18.43
       '@types/sinonjs__fake-timers': 8.1.1
       '@types/sizzle': 2.3.3
       arch: 2.2.0
@@ -5306,7 +5399,7 @@ packages:
       pretty-bytes: 5.6.0
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
-      semver: 7.3.8
+      semver: 7.5.0
       supports-color: 8.1.1
       tmp: 0.2.1
       untildify: 4.0.0
@@ -5578,7 +5671,7 @@ packages:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      entities: 4.4.0
+      entities: 4.5.0
 
   /domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
@@ -5603,6 +5696,13 @@ packages:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   /dotenv@16.0.3:
     resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
     engines: {node: '>=12'}
@@ -5670,6 +5770,10 @@ packages:
     resolution: {integrity: sha512-dTei3VResi5bINDENswBxhL+N0Mw5YnfWyTqO75KGsVldurEkhC9+CelJVAse8jycWyP8pv3VSj4BSyP8wTWJA==}
     dev: false
 
+  /electron-to-chromium@1.4.377:
+    resolution: {integrity: sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw==}
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -5708,6 +5812,14 @@ packages:
       tapable: 2.2.1
     dev: false
 
+  /enhanced-resolve@5.13.0:
+    resolution: {integrity: sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+    dev: false
+
   /enquirer@2.3.6:
     resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
     engines: {node: '>=8.6'}
@@ -5723,6 +5835,10 @@ packages:
     resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
     engines: {node: '>=0.12'}
 
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   /env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -5778,8 +5894,8 @@ packages:
       which-typed-array: 1.1.9
     dev: true
 
-  /es-module-lexer@0.9.3:
-    resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
+  /es-module-lexer@1.2.1:
+    resolution: {integrity: sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==}
     dev: false
 
   /es-set-tostringtag@2.0.1:
@@ -6052,6 +6168,14 @@ packages:
       estraverse: 5.3.0
     dev: true
 
+  /eslint-scope@7.2.0:
+    resolution: {integrity: sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
   /eslint-utils@3.0.0(eslint@8.35.0):
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
@@ -6120,6 +6244,55 @@ packages:
       - supports-color
     dev: true
 
+  /eslint@8.39.0:
+    resolution: {integrity: sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
+      '@eslint-community/regexpp': 4.5.0
+      '@eslint/eslintrc': 2.0.2
+      '@eslint/js': 8.39.0
+      '@humanwhocodes/config-array': 0.11.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4(supports-color@8.1.1)
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.0
+      eslint-visitor-keys: 3.4.0
+      espree: 9.5.1
+      esquery: 1.5.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.20.0
+      grapheme-splitter: 1.0.4
+      ignore: 5.2.4
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-sdsl: 4.4.0
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.1
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /espree@9.5.1:
     resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6132,6 +6305,7 @@ packages:
   /esprima@2.7.3:
     resolution: {integrity: sha512-OarPfz0lFCiW4/AV2Oy1Rp9qu0iusTKqykwTspGCZtPxmF81JR4MmIebvF1F9+UOKth2ZubLQ4XGGaU+hSn99A==}
     engines: {node: '>=0.10.0'}
+    hasBin: true
     dev: false
 
   /esprima@4.0.1:
@@ -6354,6 +6528,7 @@ packages:
   /extract-zip@2.0.1(supports-color@8.1.1):
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
     engines: {node: '>= 10.17.0'}
+    hasBin: true
     dependencies:
       debug: 4.3.4(supports-color@8.1.1)
       get-stream: 5.2.0
@@ -6604,6 +6779,7 @@ packages:
 
   /flatten@1.0.3:
     resolution: {integrity: sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==}
+    deprecated: flatten is deprecated in favor of utility frameworks such as lodash.
     dev: false
 
   /fluent-ffmpeg@2.1.2:
@@ -6755,7 +6931,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
     requiresBuild: true
     dependencies:
       bindings: 1.5.0
@@ -7128,7 +7304,7 @@ packages:
       '@sindresorhus/is': 5.3.0
       '@szmarczak/http-timer': 5.0.1
       cacheable-lookup: 7.0.0
-      cacheable-request: 10.2.9
+      cacheable-request: 10.2.10
       decompress-response: 6.0.0
       form-data-encoder: 2.1.4
       get-stream: 6.0.1
@@ -7147,6 +7323,7 @@ packages:
   /gulp-cli@2.3.0:
     resolution: {integrity: sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==}
     engines: {node: '>= 0.10'}
+    hasBin: true
     dependencies:
       ansi-colors: 1.1.0
       archy: 1.0.0
@@ -7189,7 +7366,7 @@ packages:
     resolution: {integrity: sha512-SVSF7ikuWKhpAW4l4wapAqPPSToJoiNKsbDoUnRrSgwZHH7lH8pbPeQj1aOVYQrbZKhfSVBxVW+Py7vtulRktw==}
     engines: {node: '>=10'}
     dependencies:
-      '@types/node': 18.14.1
+      '@types/node': 18.16.3
       '@types/vinyl': 2.0.7
       istextorbinary: 3.3.0
       replacestream: 4.0.3
@@ -7201,7 +7378,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       plugin-error: 1.0.1
-      terser: 5.16.8
+      terser: 5.17.1
       through2: 4.0.2
       vinyl-sourcemaps-apply: 0.2.1
     dev: false
@@ -7209,6 +7386,7 @@ packages:
   /gulp@4.0.2:
     resolution: {integrity: sha512-dvEs27SCZt2ibF29xYgmnwwCYZxdxhQ/+LFWlbAW8y7jt68L/65402Lz3+CKy0Ov4rOs+NERmDq7YlZaDqUIfA==}
     engines: {node: '>= 0.10'}
+    hasBin: true
     dependencies:
       glob-watcher: 5.0.5
       gulp-cli: 2.3.0
@@ -7767,6 +7945,7 @@ packages:
 
   /is-ci@3.0.1:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
+    hasBin: true
     dependencies:
       ci-info: 3.8.0
     dev: true
@@ -7776,6 +7955,12 @@ packages:
     dependencies:
       has: 1.0.3
 
+  /is-core-module@2.12.0:
+    resolution: {integrity: sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==}
+    dependencies:
+      has: 1.0.3
+    dev: false
+
   /is-data-descriptor@0.1.4:
     resolution: {integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==}
     engines: {node: '>=0.10.0'}
@@ -8123,8 +8308,8 @@ packages:
     engines: {node: '>= 0.6.0'}
     dev: false
 
-  /joi@17.9.1:
-    resolution: {integrity: sha512-FariIi9j6QODKATGBrEX7HZcja8Bsh3rfdGYy/Sb65sGlZWK/QWesU1ghk7aJWDj95knjXlQfSmzFSPPkLVsfw==}
+  /joi@17.9.2:
+    resolution: {integrity: sha512-Itk/r+V4Dx0V3c7RLFdRh12IOjySm2/WGPMubBT92cQvRfYZhPM2W0hZlctjj72iES8jsRCwp7S/cRmWBnJ4nw==}
     dependencies:
       '@hapi/hoek': 9.3.0
       '@hapi/topo': 5.1.0
@@ -8174,6 +8359,7 @@ packages:
 
   /js-yaml@3.7.0:
     resolution: {integrity: sha512-eIlkGty7HGmntbV6P/ZlAsoncFLGsNoM27lkTzS+oneY/EiNhj+geqD9ezg/ip+SW6Var0BJU2JtV0vEUZpWVQ==}
+    hasBin: true
     dependencies:
       argparse: 1.0.10
       esprima: 2.7.3
@@ -8181,6 +8367,7 @@ packages:
 
   /js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
     dependencies:
       argparse: 2.0.1
 
@@ -8263,7 +8450,7 @@ packages:
   /json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
-  /json5-loader@4.0.1(webpack@5.76.3):
+  /json5-loader@4.0.1(webpack@5.81.0):
     resolution: {integrity: sha512-c9viNZlZTz0MTIcf/4qvek5Dz1/PU3DNCB4PwUhlEZIV3qb1bSD6vQQymlV17/Wm6ncra1aCvmIPsuRj+KfEEg==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -8272,7 +8459,7 @@ packages:
       json5: 2.2.3
       loader-utils: 2.0.4
       schema-utils: 3.1.1
-      webpack: 5.76.3(@swc/core@1.3.36)
+      webpack: 5.81.0(@swc/core@1.3.36)
     dev: false
 
   /json5@1.0.2:
@@ -8765,7 +8952,7 @@ packages:
       is-plain-object: 2.0.4
       object.map: 1.0.1
       rechoir: 0.6.2
-      resolve: 1.22.1
+      resolve: 1.22.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -8784,12 +8971,12 @@ packages:
         optional: true
     dependencies:
       cli-truncate: 2.1.0
-      colorette: 2.0.19
+      colorette: 2.0.20
       enquirer: 2.3.6
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.3.0
-      rxjs: 7.8.0
+      rxjs: 7.8.1
       through: 2.3.8
       wrap-ansi: 7.0.0
     dev: true
@@ -9017,7 +9204,7 @@ packages:
     dependencies:
       findup-sync: 2.0.0
       micromatch: 3.1.10
-      resolve: 1.22.1
+      resolve: 1.22.2
       stack-trace: 0.0.10
     transitivePeerDependencies:
       - supports-color
@@ -9556,7 +9743,7 @@ packages:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.1
+      resolve: 1.22.2
       semver: 5.7.1
       validate-npm-package-license: 3.0.4
     dev: false
@@ -10599,6 +10786,7 @@ packages:
   /ps-tree@1.2.0:
     resolution: {integrity: sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==}
     engines: {node: '>= 0.10'}
+    hasBin: true
     dependencies:
       event-stream: 3.3.4
     dev: true
@@ -10946,7 +11134,7 @@ packages:
     resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
     engines: {node: '>= 0.10'}
     dependencies:
-      resolve: 1.22.1
+      resolve: 1.22.2
     dev: false
 
   /reconnecting-websocket@4.4.0:
@@ -11167,6 +11355,7 @@ packages:
 
   /resolve-url@0.2.1:
     resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
+    deprecated: https://github.com/lydell/resolve-url#deprecated
     dev: false
 
   /resolve@1.22.1:
@@ -11176,6 +11365,15 @@ packages:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  /resolve@1.22.2:
+    resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: false
+
   /responselike@2.0.1:
     resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
     dependencies:
@@ -11250,8 +11448,8 @@ packages:
     dependencies:
       queue-microtask: 1.2.3
 
-  /rxjs@7.8.0:
-    resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
     dependencies:
       tslib: 2.5.0
     dev: true
@@ -11332,6 +11530,15 @@ packages:
       ajv-keywords: 3.5.2(ajv@6.12.6)
     dev: false
 
+  /schema-utils@3.1.2:
+    resolution: {integrity: sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.11
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2(ajv@6.12.6)
+    dev: false
+
   /secure-json-parse@2.7.0:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
     dev: false
@@ -11365,6 +11572,7 @@ packages:
 
   /semver@5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
+    hasBin: true
     dev: false
 
   /semver@6.3.0:
@@ -11376,6 +11584,14 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
+  /semver@7.5.0:
+    resolution: {integrity: sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
     dependencies:
@@ -11598,6 +11814,7 @@ packages:
 
   /source-map-resolve@0.5.3:
     resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
     dependencies:
       atob: 2.1.2
       decode-uri-component: 0.2.2
@@ -11615,6 +11832,7 @@ packages:
 
   /source-map-url@0.4.1:
     resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
+    deprecated: See https://github.com/lydell/source-map-url#deprecated
     dev: false
 
   /source-map@0.5.7:
@@ -11728,6 +11946,7 @@ packages:
   /start-server-and-test@1.15.4:
     resolution: {integrity: sha512-ucQtp5+UCr0m4aHlY+aEV2JSYNTiMZKdSKK/bsIr6AlmwAWDYDnV7uGlWWEtWa7T4XvRI5cPYcPcQgeLqpz+Tg==}
     engines: {node: '>=6'}
+    hasBin: true
     dependencies:
       arg: 5.0.2
       bluebird: 3.7.2
@@ -11966,6 +12185,8 @@ packages:
   /svgo@0.7.2:
     resolution: {integrity: sha512-jT/g9FFMoe9lu2IT6HtAxTA7RR2XOrmcrmCtGnyB/+GQnV6ZjNn+KOHZbZ35yL81+1F/aB6OeEsJztzBQ2EEwA==}
     engines: {node: '>=0.10.0'}
+    deprecated: This SVGO version is no longer supported. Upgrade to v2.x.x.
+    hasBin: true
     dependencies:
       coa: 1.0.4
       colors: 1.1.2
@@ -12054,7 +12275,7 @@ packages:
       yoga-layout-prebuilt: 1.10.0
     dev: true
 
-  /terser-webpack-plugin@5.3.7(@swc/core@1.3.36)(webpack@5.76.3):
+  /terser-webpack-plugin@5.3.7(@swc/core@1.3.36)(webpack@5.81.0):
     resolution: {integrity: sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -12070,20 +12291,21 @@ packages:
       uglify-js:
         optional: true
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.17
+      '@jridgewell/trace-mapping': 0.3.18
       '@swc/core': 1.3.36
       jest-worker: 27.5.1
-      schema-utils: 3.1.1
+      schema-utils: 3.1.2
       serialize-javascript: 6.0.1
-      terser: 5.16.8
-      webpack: 5.76.3(@swc/core@1.3.36)
+      terser: 5.17.1
+      webpack: 5.81.0(@swc/core@1.3.36)
     dev: false
 
-  /terser@5.16.8:
-    resolution: {integrity: sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==}
+  /terser@5.17.1:
+    resolution: {integrity: sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==}
     engines: {node: '>=10'}
+    hasBin: true
     dependencies:
-      '@jridgewell/source-map': 0.3.2
+      '@jridgewell/source-map': 0.3.3
       acorn: 8.8.2
       commander: 2.20.3
       source-map-support: 0.5.21
@@ -12279,7 +12501,7 @@ packages:
       escape-string-regexp: 5.0.0
     dev: false
 
-  /ts-loader@9.4.2(typescript@4.9.5)(webpack@5.76.3):
+  /ts-loader@9.4.2(typescript@4.9.5)(webpack@5.81.0):
     resolution: {integrity: sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -12291,7 +12513,7 @@ packages:
       micromatch: 4.0.5
       semver: 7.3.8
       typescript: 4.9.5
-      webpack: 5.76.3(@swc/core@1.3.36)
+      webpack: 5.81.0(@swc/core@1.3.36)
     dev: false
 
   /ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.14.1)(typescript@4.9.5):
@@ -12537,6 +12759,7 @@ packages:
   /typescript@4.9.5:
     resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
     engines: {node: '>=4.2.0'}
+    hasBin: true
 
   /ulid@2.3.0:
     resolution: {integrity: sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==}
@@ -12698,6 +12921,7 @@ packages:
 
   /urix@0.1.0:
     resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
+    deprecated: Please see https://github.com/lydell/urix#deprecated
     dev: false
 
   /url-parse@1.5.10:
@@ -12956,12 +13180,13 @@ packages:
   /wait-on@7.0.1(debug@4.3.4):
     resolution: {integrity: sha512-9AnJE9qTjRQOlTZIldAaf/da2eW0eSRSgcqq85mXQja/DW3MriHxkpODDSUEg+Gri/rKEcXUZHe+cevvYItaog==}
     engines: {node: '>=12.0.0'}
+    hasBin: true
     dependencies:
       axios: 0.27.2(debug@4.3.4)
-      joi: 17.9.1
+      joi: 17.9.2
       lodash: 4.17.21
       minimist: 1.2.8
-      rxjs: 7.8.0
+      rxjs: 7.8.1
     transitivePeerDependencies:
       - debug
     dev: true
@@ -13006,8 +13231,8 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: false
 
-  /webpack@5.76.3(@swc/core@1.3.36):
-    resolution: {integrity: sha512-18Qv7uGPU8b2vqGeEEObnfICyw2g39CHlDEK4I7NK13LOur1d0HGmGNKGT58Eluwddpn3oEejwvBPoP4M7/KSA==}
+  /webpack@5.81.0(@swc/core@1.3.36):
+    resolution: {integrity: sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -13017,16 +13242,16 @@ packages:
         optional: true
     dependencies:
       '@types/eslint-scope': 3.7.4
-      '@types/estree': 0.0.51
-      '@webassemblyjs/ast': 1.11.1
-      '@webassemblyjs/wasm-edit': 1.11.1
-      '@webassemblyjs/wasm-parser': 1.11.1
+      '@types/estree': 1.0.1
+      '@webassemblyjs/ast': 1.11.5
+      '@webassemblyjs/wasm-edit': 1.11.5
+      '@webassemblyjs/wasm-parser': 1.11.5
       acorn: 8.8.2
       acorn-import-assertions: 1.8.0(acorn@8.8.2)
       browserslist: 4.21.5
       chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.12.0
-      es-module-lexer: 0.9.3
+      enhanced-resolve: 5.13.0
+      es-module-lexer: 1.2.1
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -13035,9 +13260,9 @@ packages:
       loader-runner: 4.3.0
       mime-types: 2.1.35
       neo-async: 2.6.2
-      schema-utils: 3.1.1
+      schema-utils: 3.1.2
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.7(@swc/core@1.3.36)(webpack@5.76.3)
+      terser-webpack-plugin: 5.3.7(@swc/core@1.3.36)(webpack@5.81.0)
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -13129,6 +13354,7 @@ packages:
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
+    hasBin: true
     dependencies:
       isexe: 2.0.0
 

From afe94a851277b8b0cc1b636fd47fc988b09859a9 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 1 May 2023 04:35:15 +0900
Subject: [PATCH 135/147] refactor(frontend): use overflow: clip, dvh units

---
 .../client/src/components/MkAutocomplete.vue  |  9 ++--
 packages/client/src/components/MkButton.vue   |  4 +-
 .../client/src/components/MkContainer.vue     |  4 +-
 .../src/components/MkDriveFileThumbnail.vue   |  1 +
 packages/client/src/components/MkFolder.vue   |  3 +-
 .../src/components/MkInstanceTicker.vue       |  3 +-
 packages/client/src/components/MkMarquee.vue  |  1 +
 packages/client/src/components/MkModal.vue    |  1 +
 .../client/src/components/MkNote.sample.vue   |  1 +
 packages/client/src/components/MkNote.vue     |  4 +-
 .../client/src/components/MkNoteDetailed.vue  |  3 +-
 .../client/src/components/MkNotePreview.vue   |  2 +
 .../client/src/components/MkNoteSimple.vue    |  1 +
 .../client/src/components/MkNotification.vue  |  1 +
 packages/client/src/components/MkPoll.vue     |  3 +-
 .../src/components/MkPostFormAttaches.vue     |  3 +-
 .../src/components/MkSubNoteContent.vue       |  3 +-
 packages/client/src/components/MkTagCloud.vue |  1 +
 packages/client/src/components/MkToast.vue    |  1 +
 .../client/src/components/MkUrlPreview.vue    |  1 +
 .../client/src/components/MkUserCardMini.vue  |  3 +-
 packages/client/src/components/MkUserInfo.vue |  3 +-
 .../client/src/components/MkUserPreview.vue   |  3 +-
 packages/client/src/components/MkWindow.vue   |  1 +
 .../client/src/components/MkYoutubePlayer.vue |  3 +-
 .../src/components/TmsDraftsList.draft.vue    |  3 +-
 .../src/components/TmsPostForm.core.vue       |  2 -
 packages/client/src/components/form/range.vue |  1 +
 .../client/src/components/global/MkAvatar.vue |  3 +-
 .../components/global/MkPageHeader.tabs.vue   |  6 ++-
 packages/client/src/init.ts                   | 43 ++++++++++---------
 packages/client/src/pages/about-misskey.vue   |  9 +++-
 packages/client/src/pages/about.vue           |  4 +-
 packages/client/src/pages/admin/emojis.vue    |  6 ++-
 .../src/pages/admin/overview.federation.vue   |  3 +-
 .../client/src/pages/admin/overview.user.vue  |  3 +-
 packages/client/src/pages/admin/overview.vue  |  2 +
 .../client/src/pages/antenna-timeline.vue     |  1 +
 packages/client/src/pages/emojis.emoji.vue    |  3 +-
 packages/client/src/pages/messaging/index.vue |  3 +-
 .../messaging/messaging-room.message.vue      |  9 ++--
 .../page-editor/page-editor.container.vue     |  3 +-
 packages/client/src/pages/search.vue          |  3 +-
 packages/client/src/pages/settings/drive.vue  |  3 +-
 .../client/src/pages/settings/profile.vue     |  1 +
 packages/client/src/pages/settings/theme.vue  |  1 +
 packages/client/src/pages/timeline.vue        |  1 +
 packages/client/src/pages/user-info.vue       |  3 +-
 .../client/src/pages/user-list-timeline.vue   |  1 +
 packages/client/src/pages/user/home.vue       |  6 ++-
 .../client/src/pages/user/index.photos.vue    |  1 +
 .../client/src/pages/welcome.entrance.a.vue   |  7 ++-
 .../client/src/pages/welcome.entrance.b.vue   |  6 ++-
 .../client/src/pages/welcome.entrance.c.vue   |  3 +-
 packages/client/src/pages/welcome.setup.vue   |  3 +-
 packages/client/src/scripts/tms/utils.ts      |  7 ++-
 packages/client/src/style.scss                |  1 +
 packages/client/src/ui/_common_/navbar.vue    |  5 ++-
 .../client/src/ui/_common_/notification.vue   |  1 +
 .../client/src/ui/_common_/statusbars.vue     |  1 +
 packages/client/src/ui/_common_/upload.vue    |  3 +-
 packages/client/src/ui/classic.vue            |  9 ++--
 packages/client/src/ui/deck.vue               |  9 ++--
 packages/client/src/ui/deck/column.vue        |  5 ++-
 packages/client/src/ui/universal.vue          | 12 +++---
 packages/client/src/ui/universal.widgets.vue  |  3 +-
 packages/client/src/ui/visitor/a.vue          |  3 +-
 packages/client/src/ui/visitor/b.vue          | 15 ++++---
 packages/client/src/ui/zen.vue                |  4 +-
 packages/client/src/widgets/calendar.vue      |  3 +-
 packages/client/src/widgets/federation.vue    |  6 ++-
 packages/client/src/widgets/trends.vue        |  6 ++-
 72 files changed, 199 insertions(+), 100 deletions(-)

diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index ba44f8435a91..f74d360afc80 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -380,7 +380,8 @@ onBeforeUnmount(() => {
 	position: fixed;
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	transition: top 0.1s ease, left 0.1s ease;
 
 	> ol {
@@ -397,7 +398,8 @@ onBeforeUnmount(() => {
 			align-items: center;
 			padding: 4px 12px;
 			white-space: nowrap;
-			overflow: hidden;
+			overflow: hidden; // fallback (overflow: clip)
+			overflow: clip;
 			font-size: 0.9em;
 			cursor: default;
 
@@ -406,7 +408,8 @@ onBeforeUnmount(() => {
 			}
 
 			* {
-				overflow: hidden;
+				overflow: hidden; // fallback (overflow: clip)
+				overflow: clip;
 				text-overflow: ellipsis;
 			}
 
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index b666f7c968a5..16c5faccc60c 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -119,6 +119,7 @@ const onMousedown = (evt: MouseEvent): void => {
 	text-decoration: none;
 	background: var(--buttonBg);
 	border-radius: 5px;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
@@ -212,7 +213,8 @@ const onMousedown = (evt: MouseEvent): void => {
 		width: 100%;
 		height: 100%;
 		border-radius: 6px;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 
 		::v-deep(div) {
 			position: absolute;
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 6525502dd268..a117b69381e2 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -116,7 +116,8 @@ const afterLeave = (el: HTMLElement): void => {
 
 <style lang="scss" scoped>
 .container-toggle-enter-active, .container-toggle-leave-active {
-	overflow-y: hidden;
+	overflow-y: hidden; // fallback (overflow: clip)
+	overflow-y: clip;
 	transition: opacity 0.5s, height 0.5s !important;
 }
 .container-toggle-enter-from {
@@ -128,6 +129,7 @@ const afterLeave = (el: HTMLElement): void => {
 
 .ukygtjoj {
 	position: relative;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index 33379ed5ca70..86df0c0bac7f 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -59,6 +59,7 @@ const isThumbnailAvailable = computed(() => {
 	display: flex;
 	background: var(--panel);
 	border-radius: 8px;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 
 	> .icon-sub {
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 08d9ab33af36..71c13a075cbf 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -103,7 +103,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .folder-toggle-enter-active, .folder-toggle-leave-active {
-	overflow-y: hidden;
+	overflow-y: hidden; // fallback (overflow: clip)
+	overflow-y: clip;
 	transition: opacity 0.5s, height 0.5s !important;
 }
 .folder-toggle-enter-from {
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 8f7853deea71..21c5f07370be 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -59,7 +59,8 @@ const tickerColor = {
 .mk-instance-ticker {
 	background: var(--ticker-bg, #777777);
 	color: var(--ticker-fg, #ffffff);
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 
 	> .icon {
 		aspect-ratio: 1 / 1;
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/MkMarquee.vue
index 5ca04b0b48cb..388c421453b9 100644
--- a/packages/client/src/components/MkMarquee.vue
+++ b/packages/client/src/components/MkMarquee.vue
@@ -76,6 +76,7 @@ export default {
 
 <style lang="scss" module>
 .wrap {
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	animation-play-state: running;
 
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 22ed37c7a046..2e8fdb1672d6 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -481,6 +481,7 @@ defineExpose({
 		left: 0;
 		width: 100%;
 		height: 100%;
+		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 
 		> .content {
diff --git a/packages/client/src/components/MkNote.sample.vue b/packages/client/src/components/MkNote.sample.vue
index 496fbe61e9d9..b247d82c55c5 100644
--- a/packages/client/src/components/MkNote.sample.vue
+++ b/packages/client/src/components/MkNote.sample.vue
@@ -110,6 +110,7 @@ const react = ({ reaction, canToggle }: {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	font-size: 1.05em;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 	background: var(--panel);
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 9016081ef472..0e8c6bb83aa3 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -352,6 +352,7 @@ const readPromo = (): void => {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	font-size: 1.05em;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 
@@ -582,7 +583,8 @@ const readPromo = (): void => {
 					&.collapsed {
 						position: relative;
 						max-height: 9em;
-						overflow: hidden;
+						overflow: hidden; // fallback (overflow: clip)
+						overflow: clip;
 
 						> .fade {
 							display: block;
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index ed0b7738d1c2..d1196056b41f 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -316,7 +316,8 @@ if (appearNote.replyId) {
 .lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	contain: content;
 
 	&:focus-visible {
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index b1da1e2a0a18..081a0e3a2731 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -28,6 +28,7 @@ defineProps<{
 	display: flex;
 	margin: 0;
 	padding: 0;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	font-size: 0.95em;
 }
@@ -51,6 +52,7 @@ defineProps<{
 	margin-bottom: 2px;
 	font-weight: bold;
 	width: 100%;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	text-overflow: ellipsis;
 }
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 3515fd08abc2..388e68c11c73 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -37,6 +37,7 @@ const showContent = $ref(false);
 	display: flex;
 	margin: 0;
 	padding: 0;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	font-size: 0.95em;
 }
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 765db31f7be8..bb75f35b27e4 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -316,6 +316,7 @@ useTooltip(reactionRef, (showing) => {
 		> .text {
 			display: flex;
 			width: 100%;
+			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 
 			> i {
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 852defdb51e2..0108f6142c83 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -102,7 +102,8 @@ const vote = async (id) => {
 			//border: solid 0.5px var(--divider);
 			background: var(--accentedBg);
 			border-radius: 4px;
-			overflow: hidden;
+			overflow: hidden; // fallback (overflow: clip)
+			overflow: clip;
 			cursor: pointer;
 
 			> .backdrop {
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index ffadef9c2161..daf881018312 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -128,7 +128,8 @@ const showFileMenu = (file: DriveFile, ev: MouseEvent): void => {
 			height: 64px;
 			margin-right: 4px;
 			border-radius: 4px;
-			overflow: hidden;
+			overflow: hidden; // fallback (overflow: clip)
+			overflow: clip;
 			cursor: move;
 
 			&:hover > .remove {
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index e1acf2cdac29..661aec9d709c 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -102,7 +102,8 @@ const collapsed = $computed(() => collapsedFlag.value && isLong);
 	&.collapsed {
 		position: relative;
 		max-height: 9em;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 
 		> .fade {
 			display: block;
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
index d56a48aa3fab..1492827fea6e 100644
--- a/packages/client/src/components/MkTagCloud.vue
+++ b/packages/client/src/components/MkTagCloud.vue
@@ -73,6 +73,7 @@ defineExpose({
 <style lang="scss" scoped>
 .meijqfqm {
 	position: relative;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	display: grid;
 	place-items: center;
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index b87c05a28c86..456324d3c32b 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -55,6 +55,7 @@ onMounted(() => {
 		width: min-content;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		border-radius: 8px;
+		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 		text-align: center;
 		pointer-events: none;
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 4643ed8f80f3..af667ee73f24 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -223,6 +223,7 @@ onUnmounted(() => {
 	font-size: 14px;
 	box-shadow: 0 0 0 1px var(--divider);
 	border-radius: 8px;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 
 	&:hover {
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index e778b1641e6a..79dc4eb49cda 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -56,7 +56,8 @@ onMounted(() => {
 
 	> :global(.body) {
 		flex: 1;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 		font-size: 0.9em;
 		color: var(--fg);
 		padding-right: 8px;
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index cd5dda21abcd..821a9371f73d 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -104,7 +104,8 @@ defineProps<{
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;
-			overflow: hidden;
+			overflow: hidden; // fallback (overflow: clip)
+			overflow: clip;
 		}
 	}
 
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 29ff940f2ee4..dabd77148398 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -96,7 +96,8 @@ onMounted(() => {
 .fxxzrfni {
 	position: absolute;
 	width: 300px;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	transform-origin: center top;
 
 	> .info {
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 2e44ec99b394..9fc9afd9d110 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -489,6 +489,7 @@ defineExpose({
 }
 
 .body {
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	display: flex;
 	flex-direction: column;
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
index 36616746c7fc..826932c923b8 100644
--- a/packages/client/src/components/MkYoutubePlayer.vue
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -86,7 +86,8 @@ ytFetch();
 <style lang="scss" module>
 .root {
 	position: relative;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	height: 100%;
 }
 
diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index c0c5d6d2e291..acb75d0d5b5f 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -97,7 +97,8 @@ const draftMenu = (ev: MouseEvent): void => {
 }
 
 .text {
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
 	// display: -webkit-box;
diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 4bd16daf3963..4505fa20b87d 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -1035,7 +1035,6 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 .headerLeft {
 	display: grid;
 	grid-auto-flow: column;
-	grid-auto-columns: max-content;
 	grid-template-columns: minmax(36px, 50px);
 	grid-template-rows: minmax(40px, 100%);
 	gap: 4px;
@@ -1062,7 +1061,6 @@ const insertEmoji = async (ev: MouseEvent): Promise<void> => {
 	justify-self: end;
 	display: grid;
 	grid-auto-flow: column;
-	grid-auto-columns: max-content;
 	align-items: center;
 	gap: 4px;
 	font-size: 0.9em;
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index a297e3f8bfbd..1b4b1ca41158 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -191,6 +191,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 				height: 3px;
 				background: rgba(0, 0, 0, 0.1);
 				border-radius: 999px;
+				overflow: hidden; // fallback (overflow: clip)
 				overflow: clip;
 
 				> .highlight {
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 2164dfddc2a1..58af5efbfbb4 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -85,7 +85,8 @@ watch(() => props.user.avatarBlurhash, () => {
 		top: 0;
 		border-radius: 100%;
 		z-index: 1;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 		object-fit: cover;
 		width: 100%;
 		height: 100%;
diff --git a/packages/client/src/components/global/MkPageHeader.tabs.vue b/packages/client/src/components/global/MkPageHeader.tabs.vue
index 184a8b6a49f0..4283e4978545 100644
--- a/packages/client/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/client/src/components/global/MkPageHeader.tabs.vue
@@ -191,7 +191,8 @@ onUnmounted(() => {
 	font-size: 0.8em;
 	text-align: center;
 	overflow-x: auto;
-	overflow-y: hidden;
+	overflow-y: hidden; // fallback (overflow: clip)
+	overflow-y: clip;
 	scrollbar-width: none;
 
 	&::-webkit-scrollbar {
@@ -236,7 +237,8 @@ onUnmounted(() => {
 }
 
 .tabTitle {
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 
 	&.animate {
 		transition: width .15s linear, padding-left .15s linear;
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 1c2b04b53c4d..d597db95af5f 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -54,29 +54,27 @@ import { mainRouter } from '@/router';
 
 		console.info(`vue ${vueVersion}`);
 
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		(window as any).$i = $i;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		(window as any).$store = defaultStore;
 
 		window.addEventListener('error', event => {
 			console.error(event);
-			/*
-			alert({
-				type: 'error',
-				title: 'DEV: Unhandled error',
-				text: event.message
-			});
-			*/
+			// alert({
+			// 	type: 'error',
+			// 	title: 'DEV: Unhandled error',
+			// 	text: event.message,
+			// });
 		});
 
 		window.addEventListener('unhandledrejection', event => {
 			console.error(event);
-			/*
-			alert({
-				type: 'error',
-				title: 'DEV: Unhandled promise rejection',
-				text: event.reason
-			});
-			*/
+			// alert({
+			// 	type: 'error',
+			// 	title: 'DEV: Unhandled promise rejection',
+			// 	text: event.reason,
+			// });
 		});
 	}
 
@@ -106,12 +104,17 @@ import { mainRouter } from '@/router';
 	});
 
 	//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	// TODO: いつの日にか消したい
-	const setViewportHeight = (): void => {
-		const vh = window.innerHeight * 0.01;
-		document.documentElement.style.setProperty('--vh', `${vh}px`);
-	};
-	window.addEventListener('resize', setViewportHeight);
+	try {
+		if (!window.CSS.supports('height', '1dvh')) throw new Error();
+		document.documentElement.style.setProperty('--vh', '1dvh'); // 後方互換
+	} catch {
+		// fallback (dvh units)
+		const setViewportHeight = (): void => {
+			const vh = window.innerHeight * 0.01;
+			document.documentElement.style.setProperty('--vh', `${vh}px`);
+		};
+		window.addEventListener('resize', setViewportHeight);
+	}
 	//#endregion
 
 	// If mobile, insert the viewport meta tag
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index d2802398c6fe..1c76810b1050 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
+	<div :class="$style.container">
 		<MkSpacer :content-max="600" :margin-min="20">
 			<div class="_formRoot znqjceqz">
 				<div id="debug"></div>
@@ -268,3 +268,10 @@ definePageMetadata({
 	}
 }
 </style>
+
+<style lang="scss" module>
+.container {
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
+}
+</style>
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 15c3efdb935a..b15cc5f38bd2 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -139,12 +139,14 @@ definePageMetadata(computed(() => ({
 .fwhjspax {
 	text-align: center;
 	border-radius: 10px;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	background-size: cover;
 	background-position: center center;
 
 	> .content {
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 
 		> .icon {
 			display: block;
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index ce8f5fa20e3e..e810306916ee 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -330,7 +330,8 @@ definePageMetadata(computed(() => ({
 				> .body {
 					padding: 0 0 0 8px;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // fallback (overflow: clip)
+					overflow: clip;
 
 					> .name {
 						text-overflow: ellipsis;
@@ -376,7 +377,8 @@ definePageMetadata(computed(() => ({
 				> .body {
 					padding: 0 0 0 8px;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // fallback (overflow: clip)
+					overflow: clip;
 
 					> .name {
 						text-overflow: ellipsis;
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 61c6eae59906..1cc108ac4321 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -69,7 +69,8 @@ useInterval(fetch, 1000 * 60, {
 
 			> .body {
 				flex: 1;
-				overflow: hidden;
+				overflow: hidden; // fallback (overflow: clip)
+				overflow: clip;
 				font-size: 0.9em;
 				color: var(--fg);
 				padding-right: 8px;
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 0dd4a749ba1d..4ef8e1677aad 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -43,7 +43,8 @@ os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }
 
 	> :global(.body) {
 		flex: 1;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 		font-size: 0.9em;
 		color: var(--fg);
 		padding-right: 8px;
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index d22bbfec2c2e..f6f7c35ca230 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -560,6 +560,7 @@ definePageMetadata({
 				> .body {
 					background: var(--panel);
 					border-radius: var(--radius);
+					overflow: hidden; // fallback (overflow: clip)
 					overflow: clip;
 				}
 			}
@@ -619,6 +620,7 @@ definePageMetadata({
 				> .body {
 					background: var(--panel);
 					border-radius: var(--radius);
+					overflow: hidden; // fallback (overflow: clip)
 					overflow: clip;
 				}
 			}
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index ed201eaef922..a57e042044f0 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -116,6 +116,7 @@ definePageMetadata(computed(() => antenna ? {
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
+		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 	}
 
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index 743bed97bfea..80ce29774be8 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -54,7 +54,8 @@ function menu(ev) {
 	> .body {
 		padding: 0 0 0 8px;
 		white-space: nowrap;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 
 		> .name {
 			text-overflow: ellipsis;
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 578b3cb84408..b3b87cf7e6e6 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -226,7 +226,8 @@ definePageMetadata({
 					align-items: center;
 					margin-bottom: 2px;
 					white-space: nowrap;
-					overflow: hidden;
+					overflow: hidden; // fallback (overflow: clip)
+					overflow: clip;
 
 					> .name {
 						margin: 0;
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 7ff53b5584de..b830104a750d 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -137,7 +137,8 @@ function del(): void {
 					display: block;
 					margin: 0;
 					padding: 0;
-					overflow: hidden;
+					overflow: hidden; // fallback (overflow: clip)
+					overflow: clip;
 					overflow-wrap: break-word;
 					font-size: 1em;
 					color: rgba(#000, 0.5);
@@ -147,7 +148,8 @@ function del(): void {
 					display: block;
 					margin: 0;
 					padding: 12px 18px;
-					overflow: hidden;
+					overflow: hidden; // fallback (overflow: clip)
+					overflow: clip;
 					overflow-wrap: break-word;
 					word-break: break-word;
 					font-size: 1em;
@@ -165,7 +167,8 @@ function del(): void {
 						display: block;
 						max-width: 100%;
 						border-radius: 16px;
-						overflow: hidden;
+						overflow: hidden; // fallback (overflow: clip)
+						overflow: clip;
 						text-decoration: none;
 
 						&:hover {
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index fd5136f785dd..9d1587d2f295 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -76,7 +76,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .cpjygsrt {
 	position: relative;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	background: var(--panel);
 	border: solid 2px var(--X12);
 	border-radius: 6px;
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index b0c342f031d2..2e1d41b8bcd6 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -206,7 +206,8 @@ definePageMetadata(computed(() => ({
 }
 
 .pickup {
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	background: var(--panel);
 	border-radius: var(--radius);
 	margin-bottom: var(--margin);
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index dcccab6e6442..80d0de31c0e1 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -134,7 +134,8 @@ definePageMetadata({
 		$size: 12px;
 		background: rgba(0, 0, 0, 0.1);
 		border-radius: math.div($size, 2);
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 
 		> div {
 			height: $size;
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index bb06d9cbfec3..4c1b84ff0b48 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -193,6 +193,7 @@ definePageMetadata({
 	background-position: center;
 	border: solid 1px var(--divider);
 	border-radius: 10px;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 
 	> .avatar {
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index d82bf99abef2..4d0b8a7b39a2 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -184,6 +184,7 @@ definePageMetadata({
 		> .toggleWrapper {
 			display: inline-block;
 			text-align: left;
+			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			padding: 0 100px;
 			vertical-align: bottom;
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index a72fbc75b99b..78aaed498cfd 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -189,6 +189,7 @@ definePageMetadata(computed(() => ({
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
+		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 	}
 }
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index da2920a48f05..9319ee529ba3 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -442,7 +442,8 @@ definePageMetadata(computed(() => ({
 
 	> .body {
 		flex: 1;
-		overflow: hidden;
+		overflow: hidden; // fallback (overflow: clip)
+		overflow: clip;
 
 		> .name {
 			display: block;
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 28587f5a95c0..7b65643e665b 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -109,6 +109,7 @@ definePageMetadata(computed(() => list ? {
 	> .tl {
 		background: var(--bg);
 		border-radius: var(--radius);
+		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 	}
 
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 70505c90dcc8..8c7157272674 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -199,12 +199,14 @@ onUnmounted(() => {
 
 			> .main {
 				position: relative;
-				overflow: hidden;
+				overflow: hidden; // fallback (overflow: clip)
+				overflow: clip;
 
 				> .banner-container {
 					position: relative;
 					height: 250px;
-					overflow: hidden;
+					overflow: hidden; // fallback (overflow: clip)
+					overflow: clip;
 					background-size: cover;
 					background-position: center;
 
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index f58d6aeeec41..265bce822815 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -84,6 +84,7 @@ onMounted(() => {
 		> .img {
 			height: 128px;
 			border-radius: 6px;
+			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 		}
 	}
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 77ced41a00e3..9206af4e6b8a 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -130,7 +130,8 @@ function showMenu(ev) {
 	> .top {
 		display: flex;
 		text-align: center;
-		min-height: 100vh;
+		min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		min-height: 100dvh;
 		box-sizing: border-box;
 		padding: 16px;
 
@@ -150,7 +151,8 @@ function showMenu(ev) {
 			margin: auto;
 			width: 500px;
 			height: calc(100% - 128px);
-			overflow: hidden;
+			overflow: hidden; // fallback (overflow: clip)
+			overflow: clip;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 
@@ -274,6 +276,7 @@ function showMenu(ev) {
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
 			border-radius: 999px;
+			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			width: 800px;
 			padding: 8px 0;
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 51923b8d94bb..f7969cf749e9 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -133,7 +133,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .rsqzvsbo {
 	> .top {
-		min-height: 100vh;
+		min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		min-height: 100dvh;
 		box-sizing: border-box;
 
 		> .bg {
@@ -152,7 +153,8 @@ export default defineComponent({
 			margin: auto;
 			width: 500px;
 			height: calc(100% - 128px);
-			overflow: hidden;
+			overflow: hidden; // fallback (overflow: clip)
+			overflow: clip;
 			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 		}
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index c8c059e47a8a..a4a2f8f0731d 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -155,7 +155,8 @@ export default defineComponent({
 	> .top {
 		display: flex;
 		text-align: center;
-		min-height: 100vh;
+		min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		min-height: 100dvh;
 		box-sizing: border-box;
 		padding: 16px;
 
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index ab9212198fb6..7744254c695e 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -58,7 +58,8 @@ function submit() {
 .mk-setup {
 	border-radius: var(--radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	max-width: 500px;
 	margin: 32px auto;
 
diff --git a/packages/client/src/scripts/tms/utils.ts b/packages/client/src/scripts/tms/utils.ts
index ad4ee249e372..f56eca550a41 100644
--- a/packages/client/src/scripts/tms/utils.ts
+++ b/packages/client/src/scripts/tms/utils.ts
@@ -5,7 +5,8 @@ export const getRandomArrayElements = <T>(arr: T[], count: number): T[] => {
 
 	while (result.length < count) {
 		const randomIndex = Math.floor(Math.random() * arr.length);
-		const randomElement = arr[randomIndex];
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const randomElement = arrayAt(arr, randomIndex)!;
 		if (result.indexOf(randomElement) === -1) {
 			result.push(randomElement);
 		}
@@ -43,9 +44,11 @@ export const typedEntries = <T extends Record<string, unknown>>(obj: T): TypedEn
 	return Object.entries(obj) as unknown as TypedEntries<T>;
 };
 
+const toArray = <T>(arrayLike: T[] | ArrayLike<T>): T[] => Array.isArray(arrayLike) ? arrayLike : Array.from(arrayLike);
+
 // Array<T>.prototype.at(index: number): T | undefined;
 export const arrayAt = <T>(arrayLike: T[] | ArrayLike<T>, index: number): T | undefined => {
-	const array = Array.isArray(arrayLike) ? arrayLike : Array.from(arrayLike);
+	const array = toArray(arrayLike);
 	if (typeof Array.prototype.at === 'function') {
 		return array.at(index);
 	} else {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index c7ab36034de3..a2f02139170b 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -276,6 +276,7 @@ hr {
 ._panel {
 	background: var(--panel);
 	border-radius: var(--radius);
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 }
 
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 54d9aeede1f3..6697879e1fc9 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -168,10 +168,11 @@ function more(ev: MouseEvent) {
 		left: 0;
 		z-index: 1001;
 		width: $nav-icon-only-width;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 		box-sizing: border-box;
 		overflow: auto;
+		overflow-x: hidden; // fallback (overflow: clip)
 		overflow-x: clip;
 		background: var(--navBg);
 		contain: strict;
diff --git a/packages/client/src/ui/_common_/notification.vue b/packages/client/src/ui/_common_/notification.vue
index 19060b52dd27..74cae7c568c3 100644
--- a/packages/client/src/ui/_common_/notification.vue
+++ b/packages/client/src/ui/_common_/notification.vue
@@ -18,6 +18,7 @@ defineProps<{
 .root {
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 	border-radius: 8px;
+	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
 	contain: content;
 }
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index f84695c15f85..9aaaec85e208 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -64,6 +64,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 		width: 100%;
 		line-height: var(--height);
 		height: var(--height);
+		overflow: hidden; // fallback (overflow: clip)
 		overflow: clip;
 		contain: strict;
 
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index b0e4e6582088..21e7027b8767 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -112,7 +112,8 @@ const zIndex = os.claimZIndex('high');
 	background: transparent;
 	border: none;
 	border-radius: 4px;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	grid-column: 2/3;
 	grid-row: 2/3;
 	z-index: 2;
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 1060645cfb00..7ecc6e294dc7 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -200,8 +200,8 @@ onMounted(() => {
 	$ui-font-size: 1em;
 	$widgets-hide-threshold: 1200px;
 
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	min-height: 100dvh;
 	box-sizing: border-box;
 
 	&.wallpaper {
@@ -242,6 +242,7 @@ onMounted(() => {
 			border-left: solid 1px var(--divider);
 			border-right: solid 1px var(--divider);
 			border-radius: 0;
+			overflow: hidden; // fallback (overflow: clip)
 			overflow: clip;
 			--margin: 12px;
 		}
@@ -303,8 +304,8 @@ onMounted(() => {
 		top: 0;
 		right: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 		padding: var(--margin);
 		box-sizing: border-box;
 		overflow: auto;
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 45b3c4b06603..8bbbb46053d4 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -269,8 +269,8 @@ async function deleteProfile() {
 	--deckDividerThickness: 5px;
 
 	display: flex;
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	height: calc(var(--vh, 1vh) * 100);
+	height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	height: 100dvh;
 	box-sizing: border-box;
 	flex: 1;
 
@@ -288,6 +288,7 @@ async function deleteProfile() {
 			flex: 1;
 			display: flex;
 			overflow-x: auto;
+			overflow-y: hidden; // fallback (overflow: clip)
 			overflow-y: clip;
 
 			&.center {
@@ -434,8 +435,8 @@ async function deleteProfile() {
 		top: 0;
 		left: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 		width: 240px;
 		box-sizing: border-box;
 		contain: strict;
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index e0da6341db63..b65fc8789f8f 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -268,7 +268,8 @@ const onDrop = (ev: DragEvent): void => {
 	--deckColumnHeaderHeight: 42px;
 
 	height: 100%;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 	contain: strict;
 
 	&.draghover {
@@ -411,7 +412,7 @@ const onDrop = (ev: DragEvent): void => {
 	> div {
 		height: calc(100% - var(--deckColumnHeaderHeight));
 		overflow-y: auto;
-		overflow-x: hidden; // Safari does not supports clip
+		overflow-x: hidden; // fallback (overflow: clip)
 		overflow-x: clip;
 		-webkit-overflow-scrolling: touch;
 		box-sizing: border-box;
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 5696d0f1f1bb..9d9c6f3fa8e5 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -273,8 +273,8 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
 
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	min-height: 100dvh;
 	box-sizing: border-box;
 	display: flex;
 
@@ -326,8 +326,8 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		top: 0;
 		right: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 		padding: var(--margin);
 		box-sizing: border-box;
 		overflow: auto;
@@ -408,8 +408,8 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		top: 0;
 		left: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 		width: 240px;
 		box-sizing: border-box;
 		contain: strict;
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index de9937867295..e9331d74cb5e 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -51,7 +51,8 @@ const updateWidgets = (widgets: Widget[]): void => {
 .efzpzdvf {
 	position: sticky;
 	height: min-content;
-	min-height: 100vh;
+	min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	min-height: 100dvh;
 	padding: var(--margin) 0;
 	box-sizing: border-box;
 
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 99144bc68580..a15bc338e5d2 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -136,7 +136,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mk-app {
-	min-height: 100vh;
+	min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	min-height: 100dvh;
 
 	> .banner {
 		position: relative;
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index d118149374e2..6047f95cda32 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -151,21 +151,24 @@ defineExpose({
 
 .mk-app {
 	display: flex;
-	min-height: 100vh;
+	min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	min-height: 100dvh;
 	background-position: center;
 	background-size: cover;
 	background-attachment: fixed;
 
 	> .side {
 		width: 500px;
-		height: 100vh;
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 
 		> .kanban {
 			position: fixed;
 			top: 0;
 			left: 0;
 			width: 500px;
-			height: 100vh;
+			height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+			height: 100dvh;
 			overflow: auto;
 		}
 	}
@@ -202,7 +205,8 @@ defineExpose({
 		top: 0;
 		left: 0;
 		width: 100vw;
-		height: 100vh;
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 	}
 
 	> .menu {
@@ -211,7 +215,8 @@ defineExpose({
 		top: 0;
 		left: 0;
 		width: 240px;
-		height: 100vh;
+		height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+		height: 100dvh;
 		background: var(--panel);
 
 		> .link {
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index e20fd406548e..ba4910385234 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -28,8 +28,8 @@ document.documentElement.style.overflowY = 'scroll';
 
 <style lang="scss" scoped>
 .mk-app {
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: calc(var(--vh, 1vh) * 100); // fallback (dvh units)
+	min-height: 100dvh;
 	box-sizing: border-box;
 }
 </style>
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index cb6eda613ca0..c882817d92f8 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -180,7 +180,8 @@ defineExpose<WidgetComponentExpose>({
 
 			> .meter {
 				width: 100%;
-				overflow: hidden;
+				overflow: hidden; // fallback (overflow: clip)
+				overflow: clip;
 				background: var(--X11);
 				border-radius: 8px;
 
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 291954c4dc55..bb9c4bacfe81 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -85,7 +85,8 @@ defineExpose<WidgetComponentExpose>({
 	$bodyInfoHieght: 16px;
 
 	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 
 	> .instances {
 		.chart-move {
@@ -109,7 +110,8 @@ defineExpose<WidgetComponentExpose>({
 
 			> .body {
 				flex: 1;
-				overflow: hidden;
+				overflow: hidden; // fallback (overflow: clip)
+				overflow: clip;
 				font-size: 0.9em;
 				color: var(--fg);
 				padding-right: 8px;
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 8d0efd935b88..d6f6ba8e9340 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -76,7 +76,8 @@ defineExpose<WidgetComponentExpose>({
 <style lang="scss" scoped>
 .wbrkwala {
 	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
 
 	> .tags {
 		.chart-move {
@@ -91,7 +92,8 @@ defineExpose<WidgetComponentExpose>({
 
 			> .tag {
 				flex: 1;
-				overflow: hidden;
+				overflow: hidden; // fallback (overflow: clip)
+				overflow: clip;
 				font-size: 0.9em;
 				color: var(--fg);
 

From 05a6e98a92cc1cac1f06cc2dba825b333c140775 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 1 May 2023 05:42:36 +0900
Subject: [PATCH 136/147] tweak style: user/clips, pages, reactions

---
 .../client/src/components/MkPagePreview.vue   | 21 ++----
 packages/client/src/pages/user/clips.vue      | 43 +++++++++--
 packages/client/src/pages/user/pages.vue      | 20 +++--
 packages/client/src/pages/user/reactions.vue  | 73 +++++++++++--------
 4 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue
index 5287e057701c..355b7d3d1a72 100644
--- a/packages/client/src/components/MkPagePreview.vue
+++ b/packages/client/src/components/MkPagePreview.vue
@@ -5,7 +5,7 @@
 		<header>
 			<h1 :title="page.title">{{ page.title }}</h1>
 		</header>
-		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
+		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? `${page.summary.slice(0, 85)}…` : page.summary }}</p>
 		<footer>
 			<img class="icon" :src="page.user.avatarUrl"/>
 			<p>{{ userName(page.user) }}</p>
@@ -14,21 +14,14 @@
 </MkA>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
 import { userName } from '@/filters/user';
 
-export default defineComponent({
-	props: {
-		page: {
-			type: Object,
-			required: true,
-		},
-	},
-	methods: {
-		userName,
-	},
-});
+defineProps<{
+	page: Misskey.entities.Page;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 50a5d4b818b1..a169643003f8 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,12 +1,15 @@
+<!-- eslint-disable-line vue/multi-word-component-names -->
 <template>
-<div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-			<b>{{ item.name }}</b>
-			<div v-if="item.description" class="description">{{ item.description }}</div>
-		</MkA>
+<MkSpacer :content-max="700">
+	<MkPagination v-slot="{items}" :pagination="pagination">
+		<div :class="$style.clips">
+			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" :class="[$style.clip, '_panel']">
+				<div :class="$style.clipName">{{ item.name }}</div>
+				<div v-if="item.description" :class="$style.clipDescription">{{ item.description }}</div>
+			</MkA>
+		</div>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -27,6 +30,30 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
+.clips {
+	display: grid;
+	grid-auto-flow: row;
+	gap: var(--margin);
+}
 
+.clip {
+	display: block;
+	padding: 16px;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
+}
+
+.clipName {
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.clipDescription {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: solid 0.5px var(--divider);
+}
 </style>
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index bd16c46681e6..1c6591db71aa 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,19 +1,21 @@
+<!-- eslint-disable-line vue/multi-word-component-names -->
 <template>
-<div>
+<MkSpacer :content-max="700">
 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
+		<div :class="$style.pages"></div>
+		<MkPagePreview v-for="page in items" :key="page.id" :page="(page as any /* 定義されていないため */)" :class="$style.page"/>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 
 const props = defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 }>();
 
 const pagination = {
@@ -25,6 +27,10 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss" module>
+.pages {
+	display: grid;
+	grid-auto-flow: row;
+	gap: var(--margin);
+}
 </style>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 7e84e100a47d..052227bfe1be 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,16 +1,19 @@
+<!-- eslint-disable-line vue/multi-word-component-names -->
 <template>
-<div>
+<MkSpacer :content-max="700">
 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
-			<div class="header">
-				<MkAvatar class="avatar" :user="user"/>
-				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
-				<MkTime :time="item.createdAt" class="createdAt"/>
+		<div :class="$style.reactions">
+			<div v-for="item in items" :key="item.id" :class="[$style.reaction, '_panel']">
+				<div :class="$style.header">
+					<MkAvatar :class="$style.avatar" :user="user"/>
+					<MkReactionIcon :class="$style.reactionIcon" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
+					<MkTime :time="item.createdAt" :class="$style.createdAt"/>
+				</div>
+				<MkNote :key="item.id" :note="item.note"/>
 			</div>
-			<MkNote :key="item.id" :note="item.note"/>
 		</div>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -33,29 +36,35 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
-.afdcfbfb {
-	> .header {
-		display: flex;
-		align-items: center;
-		padding: 8px 16px;
-		margin-bottom: 8px;
-		border-bottom: solid 2px var(--divider);
-
-		> .avatar {
-			width: 24px;
-			height: 24px;
-			margin-right: 8px;
-		}
-
-		> .reaction {
-			width: 32px;
-			height: 32px;
-		}
-
-		> .createdAt {
-			margin-left: auto;
-		}
-	}
+<style lang="scss" module>
+.reactions {
+	display: grid;
+	grid-auto-flow: row;
+	gap: var(--margin);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	margin-bottom: 8px;
+	border-bottom: solid 0.5px var(--divider);
+}
+
+.avatar {
+	width: 24px !important;
+	height: 24px !important;
+	margin-right: 8px;
+}
+
+.reactionIcon {
+	width: 32px !important;
+	height: 32px !important;
+	margin-right: 4px;
+}
+
+.createdAt {
+	margin-left: auto;
+	font-size: 0.9em;
 }
 </style>

From 830f8c7c066657ed77402c2db4cb8c8e2f66c0ad Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 1 May 2023 05:56:23 +0900
Subject: [PATCH 137/147] =?UTF-8?q?enhance:=20=E3=83=A2=E3=83=87=E3=83=AC?=
 =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=83=BC=E6=A8=A9=E9=99=90=E3=82=92=E6=8C=81?=
 =?UTF-8?q?=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B=E5=A0=B4=E5=90=88=E3=83=A6?=
 =?UTF-8?q?=E3=83=BC=E3=82=B6=E3=83=BC=E3=81=AE=E7=8A=B6=E6=85=8B(?=
 =?UTF-8?q?=E5=87=8D=E7=B5=90=E3=83=BB=E3=82=B5=E3=82=A4=E3=83=AC=E3=83=B3?=
 =?UTF-8?q?=E3=82=B9)=E3=82=92=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkInfo.vue |  2 +-
 packages/client/src/pages/user/home.vue   | 19 +++++++------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 2eb6bdbe4739..933724270e1d 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 
-const props = defineProps<{
+defineProps<{
 	warn?: boolean;
 }>();
 </script>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 8c7157272674..e5b67174d04b 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -2,12 +2,13 @@
 <MkSpacer :content-max="narrow ? 800 : 1100">
 	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
 		<div class="main">
-			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
-
 			<div class="profile">
-				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
+				<template v-if="iAmModerator">
+					<MkInfo v-if="user.isSilenced">{{ i18n.ts.userSilenced }}</MkInfo>
+					<MkInfo v-if="user.isSuspended">{{ i18n.ts.userSuspended }}</MkInfo>
+				</template>
+
+				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn _block"/>
 
 				<div :key="user.id" class="_block main">
 					<div class="banner-container" :style="style">
@@ -123,7 +124,7 @@ import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { $i, iAmModerator } from '@/account';
 
 const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
@@ -189,12 +190,6 @@ onUnmounted(() => {
 .ftskorzw {
 
 	> .main {
-
-		> .punished {
-			font-size: 0.8em;
-			padding: 16px;
-		}
-
 		> .profile {
 
 			> .main {

From 68280383431453eade9acd61d807da32944e69ad Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Mon, 1 May 2023 06:19:11 +0900
Subject: [PATCH 138/147] fix grid layout width, noPaging

---
 packages/client/src/components/TmsDraftsList.draft.vue | 1 +
 packages/client/src/components/TmsDraftsList.vue       | 1 +
 packages/client/src/pages/my-antennas/index.vue        | 1 +
 packages/client/src/pages/my-clips/index.vue           | 1 +
 packages/client/src/pages/my-groups/index.vue          | 3 +++
 packages/client/src/pages/my-lists/index.vue           | 1 +
 packages/client/src/pages/user/clips.vue               | 1 +
 packages/client/src/pages/user/pages.vue               | 1 +
 packages/client/src/pages/user/reactions.vue           | 1 +
 9 files changed, 11 insertions(+)

diff --git a/packages/client/src/components/TmsDraftsList.draft.vue b/packages/client/src/components/TmsDraftsList.draft.vue
index acb75d0d5b5f..1a07ed242ee0 100644
--- a/packages/client/src/components/TmsDraftsList.draft.vue
+++ b/packages/client/src/components/TmsDraftsList.draft.vue
@@ -84,6 +84,7 @@ const draftMenu = (ev: MouseEvent): void => {
 	.inner {
 		display: grid;
 		grid-auto-flow: row;
+		grid-template-columns: 100%;
 		gap: 6px;
 	}
 
diff --git a/packages/client/src/components/TmsDraftsList.vue b/packages/client/src/components/TmsDraftsList.vue
index a36f7d75ad7d..9e261d24591b 100644
--- a/packages/client/src/components/TmsDraftsList.vue
+++ b/packages/client/src/components/TmsDraftsList.vue
@@ -79,6 +79,7 @@ const deleted = (draftId: Draft['id']): void => {
 .draftsList {
 	display: grid;
 	grid-auto-flow: row;
+	grid-template-columns: 100%;
 	gap: var(--margin);
 }
 </style>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 4d3d082c4c0f..f4a9290dcc9b 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -26,6 +26,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'antennas/list' as const,
+	noPaging: true,
 	limit: 10,
 };
 
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 64f65fd7dd5b..935bea9cf196 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -26,6 +26,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'clips/list' as const,
+	noPaging: true,
 	limit: 10,
 };
 
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index cb6f8af3b1fd..53b0a64529d8 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -62,14 +62,17 @@ let tab = $ref('owned');
 
 const ownedPagination = {
 	endpoint: 'users/groups/owned' as const,
+	noPaging: true,
 	limit: 10,
 };
 const joinedPagination = {
 	endpoint: 'users/groups/joined' as const,
+	noPaging: true,
 	limit: 10,
 };
 const invitationPagination = {
 	endpoint: 'i/user-group-invites' as const,
+	noPaging: true,
 	limit: 10,
 };
 
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 16aacdf7c7c5..c6f629ec6ccd 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -29,6 +29,7 @@ const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
 	endpoint: 'users/lists/list' as const,
+	noPaging: true,
 	limit: 10,
 };
 
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index a169643003f8..cb402702f019 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -34,6 +34,7 @@ const pagination = {
 .clips {
 	display: grid;
 	grid-auto-flow: row;
+	grid-template-columns: 100%;
 	gap: var(--margin);
 }
 
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 1c6591db71aa..9afcd4fe0aad 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -31,6 +31,7 @@ const pagination = {
 .pages {
 	display: grid;
 	grid-auto-flow: row;
+	grid-template-columns: 100%;
 	gap: var(--margin);
 }
 </style>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 052227bfe1be..191de75b9ec4 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -40,6 +40,7 @@ const pagination = {
 .reactions {
 	display: grid;
 	grid-auto-flow: row;
+	grid-template-columns: 100%;
 	gap: var(--margin);
 }
 

From 85b2fa6f35b3b40aebec9bf196020bc600842950 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 2 May 2023 10:35:04 +0900
Subject: [PATCH 139/147] fix onPaste

---
 .../src/components/TmsPostForm.core.vue       | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 4505fa20b87d..fb063ca79e8e 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -551,6 +551,7 @@ const removeVisibleUser = (user: Misskey.entities.User): void => {
 // };
 
 const uploads = async (fileList: File[]): Promise<void> => {
+	if (fileList.length === 0) return;
 	return await fetchingWrapper(
 		Promise.all(fileList.map(file => uploadFile(file, defaultStore.state.uploadFolder)))
 			.then(driveFiles => {
@@ -772,14 +773,16 @@ const onCompositionEnd = (_ev: CompositionEvent): void => {
 const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	if (!ev.clipboardData) return;
 
-	uploads(
-		Array.from(ev.clipboardData.items).flatMap(item => {
-			if (item.kind !== 'file') return [];
-			const file = item.getAsFile();
-			if (!file) return [];
-			return [file];
-		}),
-	);
+	const uploadItems = Array.from(ev.clipboardData.items).flatMap(item => {
+		if (item.kind !== 'file') return [];
+		const file = item.getAsFile();
+		if (!file) return [];
+		return [file];
+	});
+
+	if (uploadItems.length !== 0) {
+		uploads(uploadItems);
+	}
 
 	const paste = ev.clipboardData.getData('text');
 	const path = `${url}/notes/`;

From bb3bee1bc949b2d21aeac7a407cabf97301fe042 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 2 May 2023 13:58:26 +0900
Subject: [PATCH 140/147] fix fetchingList, onPaste

---
 .../client/src/components/TmsPostForm.core.vue  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index fb063ca79e8e..25e92e3a015e 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -180,18 +180,16 @@ const emit = defineEmits<{
 
 const modal = inject<boolean>('modal', false);
 
-let fetchingList = $ref<string[]>([]);
+const fetchingList = new Set<string>();
 const fetchingWrapper = <T>(prom: Promise<T>): Promise<T> => {
 	const id = uuid();
-	fetchingList.push(id);
 
-	prom.finally(() => {
-		fetchingList = fetchingList.filter(fid => fid !== id);
-	});
+	fetchingList.add(id);
+	prom.finally(() => fetchingList.delete(id));
 
 	return prom;
 };
-const fetching = $computed<boolean>(() => fetchingList.length !== 0);
+const fetching = $computed<boolean>(() => fetchingList.size !== 0);
 
 const isFetching = (): boolean => fetching;
 
@@ -773,6 +771,8 @@ const onCompositionEnd = (_ev: CompositionEvent): void => {
 const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	if (!ev.clipboardData) return;
 
+	ev.preventDefault();
+
 	const uploadItems = Array.from(ev.clipboardData.items).flatMap(item => {
 		if (item.kind !== 'file') return [];
 		const file = item.getAsFile();
@@ -782,14 +782,13 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 
 	if (uploadItems.length !== 0) {
 		uploads(uploadItems);
+		return;
 	}
 
 	const paste = ev.clipboardData.getData('text');
 	const path = `${url}/notes/`;
 
 	if (!renote && !quote && paste.startsWith(path)) {
-		ev.preventDefault();
-
 		fetchingWrapper(
 			os.confirm({
 				type: 'info',
@@ -804,6 +803,8 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 				setQuote(quoteId);
 			}),
 		);
+	} else {
+		if (textareaEl) insertTextAtCursor(textareaEl, paste);
 	}
 };
 //#endregion

From 89720440d40e58b0d203d8f99a5ae94c2e8123cc Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 2 May 2023 14:20:26 +0900
Subject: [PATCH 141/147] fix onPaste

---
 packages/client/src/components/TmsPostForm.core.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/TmsPostForm.core.vue b/packages/client/src/components/TmsPostForm.core.vue
index 25e92e3a015e..a5d02e2a99e0 100644
--- a/packages/client/src/components/TmsPostForm.core.vue
+++ b/packages/client/src/components/TmsPostForm.core.vue
@@ -771,16 +771,15 @@ const onCompositionEnd = (_ev: CompositionEvent): void => {
 const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	if (!ev.clipboardData) return;
 
-	ev.preventDefault();
-
 	const uploadItems = Array.from(ev.clipboardData.items).flatMap(item => {
 		if (item.kind !== 'file') return [];
 		const file = item.getAsFile();
-		if (!file) return [];
+		if (!file || file.type === '') return [];
 		return [file];
 	});
 
 	if (uploadItems.length !== 0) {
+		ev.preventDefault();
 		uploads(uploadItems);
 		return;
 	}
@@ -788,7 +787,10 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 	const paste = ev.clipboardData.getData('text');
 	const path = `${url}/notes/`;
 
+	if (paste === '') return;
+
 	if (!renote && !quote && paste.startsWith(path)) {
+		ev.preventDefault();
 		fetchingWrapper(
 			os.confirm({
 				type: 'info',
@@ -803,8 +805,6 @@ const onPaste = async (ev: ClipboardEvent): Promise<void> => {
 				setQuote(quoteId);
 			}),
 		);
-	} else {
-		if (textareaEl) insertTextAtCursor(textareaEl, paste);
 	}
 };
 //#endregion

From 3ea98f66a45403242899df3bda6fac9398b4d348 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 2 May 2023 14:39:55 +0900
Subject: [PATCH 142/147] =?UTF-8?q?fix=20types,=20=E3=83=80=E3=83=96?=
 =?UTF-8?q?=E3=83=AB=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=A7=E3=83=AA?=
 =?UTF-8?q?=E3=82=A2=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkAutocomplete.vue   |  2 +-
 packages/client/src/components/MkNote.sample.vue    |  8 +++++---
 packages/client/src/components/MkReactionIcon.vue   |  6 ++++--
 .../client/src/components/MkReactionTooltip.vue     |  6 ++++--
 .../src/components/MkReactionsViewer.reaction.vue   | 13 ++++++++-----
 packages/client/src/components/global/MkEmoji.vue   |  6 ++++--
 .../components/global/MkMisskeyFlavoredMarkdown.vue |  6 ++++--
 packages/client/src/components/mfm.ts               |  6 ++++--
 8 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index f74d360afc80..f63e6b2f235a 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -21,7 +21,7 @@
 			<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 			<span v-else class="emoji">{{ emoji.emoji }}</span>
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
+			<span class="name" v-html="q ? emoji.name.replace(q, `<b>${q}</b>`) : ''"></span>
 			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
 		</li>
 	</ol>
diff --git a/packages/client/src/components/MkNote.sample.vue b/packages/client/src/components/MkNote.sample.vue
index b247d82c55c5..f65accc8751d 100644
--- a/packages/client/src/components/MkNote.sample.vue
+++ b/packages/client/src/components/MkNote.sample.vue
@@ -19,7 +19,8 @@
 					<button
 						:class="[$style.reactionButton, useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.canToggle]: item.canToggle, [$style.reacted]: item.reacted }]"
 						class="_button"
-						@click="react(item, $event)"
+						@click="react({ ...item, disableMenu: false }, $event)"
+						@dblclick="react({ ...item, disableMenu: true }, $event)"
 					>
 						<MkEmoji :class="$style.reactionIcon" :emoji="item.reaction" :custom-emojis="item.customEmojis" :is-reaction="true" :normal="true"/>
 						<span :class="$style.reactionCount">1</span>
@@ -89,14 +90,15 @@ const reactions = [
 	...emojis,
 ];
 
-const react = ({ reaction, canToggle }: {
+const react = ({ reaction, canToggle, disableMenu }: {
 	reaction: string;
 	canToggle: boolean;
+	disableMenu: boolean;
 }, ev: MouseEvent): void => {
 	if (!(ev.target instanceof HTMLElement)) return;
 	const reactButton = ref(ev.target);
 
-	if (useReactionMenu.value) {
+	if (!disableMenu && useReactionMenu.value) {
 		getReactMenuDryrun({ reactButton, reaction });
 	} else {
 		toggleReactDryrun({ reactButton, canToggle: ref(canToggle) });
diff --git a/packages/client/src/components/MkReactionIcon.vue b/packages/client/src/components/MkReactionIcon.vue
index ce220274698b..f93e46966f3a 100644
--- a/packages/client/src/components/MkReactionIcon.vue
+++ b/packages/client/src/components/MkReactionIcon.vue
@@ -4,11 +4,13 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
 
 defineProps<{
 	reaction: string;
-	customEmojis?: CustomEmoji[];
+	customEmojis?: {
+		name: string;
+		url: string;
+	}[];
 	noStyle?: boolean;
 	useFallbackIcon?: boolean;
 }>();
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index f7f22af4443d..377de2d9321a 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -9,7 +9,6 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
 import MkTooltip from './MkTooltip.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import { getEmojiName } from '@/scripts/emojilist';
@@ -17,7 +16,10 @@ import { getEmojiName } from '@/scripts/emojilist';
 defineProps<{
 	showing: boolean;
 	reaction: string;
-	emojis: CustomEmoji[];
+	emojis: {
+		name: string;
+		url: string;
+	}[];
 	targetElement: HTMLElement;
 }>();
 
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index e4e65c6aeb05..e3af052f205f 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -4,7 +4,8 @@
 		ref="buttonRef"
 		class="hkzvhatu _button"
 		:class="[tmsStore.state.useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.reacted]: reacted, [$style.canToggle]: canToggle }]"
-		@click="react"
+		@click="react()"
+		@dblclick="react({ disableMenu: true })"
 	>
 		<MkReactionIcon :class="$style.reactionIcon" :reaction="reaction" :custom-emojis="note.emojis" use-fallback-icon/>
 		<span :class="$style.reactionCount">{{ count }}</span>
@@ -14,7 +15,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, shallowRef, watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
@@ -29,7 +30,7 @@ const props = defineProps<{
 	reaction: string;
 	count: number;
 	isInitial: boolean;
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 }>();
 
 const buttonRef = shallowRef<HTMLElement>();
@@ -38,14 +39,16 @@ const canToggle = computed(() => !props.reaction.match(/@\w/) && !!$i);
 
 const reacted = computed(() => props.note.myReaction === props.reaction);
 
-const react = (): void => {
+const react = (opt: {
+	disableMenu?: boolean;
+} = {}): void => {
 	const param = {
 		reaction: props.reaction,
 		note: props.note,
 		canToggle: canToggle,
 		reactButton: buttonRef,
 	};
-	if (tmsStore.state.useReactionMenu) {
+	if (!opt.disableMenu && tmsStore.state.useReactionMenu) {
 		getReactMenu(param);
 	} else {
 		toggleReact(param);
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 7022bf84e42d..d0546aa174c7 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { char2filePath } from '@/scripts/twemoji-base';
 import { defaultStore } from '@/store';
@@ -19,7 +18,10 @@ const props = withDefaults(defineProps<{
 	emoji: string;
 	normal?: boolean;
 	noStyle?: boolean;
-	customEmojis?: CustomEmoji[];
+	customEmojis?: {
+		name: string;
+		url: string;
+	}[];
 	isReaction?: boolean;
 	useFallbackIcon?: boolean;
 }>(), {
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 9be774ea5f49..63221aeee721 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -4,7 +4,6 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
 import MfmCore from '@/components/mfm';
 
 withDefaults(defineProps<{
@@ -12,7 +11,10 @@ withDefaults(defineProps<{
 	plain?: boolean;
 	nowrap?: boolean;
 	author?: any;
-	customEmojis?: CustomEmoji[];
+	customEmojis?: {
+		name: string;
+		url: string;
+	}[];
 	isNote?: boolean;
 }>(), {
 	plain: false,
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index b0515c6e646b..fd231cfe3435 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -1,5 +1,4 @@
 import { VNode, defineComponent, h, PropType } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
 import * as mfm from 'mfm-js';
 import { v4 as uuid } from 'uuid';
 import MkUrl from '@/components/global/MkUrl.vue';
@@ -38,7 +37,10 @@ export default defineComponent({
 			default: null,
 		},
 		customEmojis: {
-			type: Array as PropType<CustomEmoji[]>,
+			type: Array as PropType<{
+				name: string;
+				url: string;
+			}[]>,
 			required: false,
 			default: undefined,
 		},

From f651785be551258694a96317d7215e868fc97a0d Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Tue, 2 May 2023 14:46:21 +0900
Subject: [PATCH 143/147] =?UTF-8?q?revert:=20=E3=82=84=E3=81=A3=E3=81=B1?=
 =?UTF-8?q?=E3=81=AA=E3=81=97=20(=E3=83=80=E3=83=96=E3=83=AB=E3=82=AF?=
 =?UTF-8?q?=E3=83=AA=E3=83=83=E3=82=AF)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkNote.sample.vue       |  8 +++-----
 .../src/components/MkReactionsViewer.reaction.vue      | 10 ++++------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/MkNote.sample.vue b/packages/client/src/components/MkNote.sample.vue
index f65accc8751d..b247d82c55c5 100644
--- a/packages/client/src/components/MkNote.sample.vue
+++ b/packages/client/src/components/MkNote.sample.vue
@@ -19,8 +19,7 @@
 					<button
 						:class="[$style.reactionButton, useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.canToggle]: item.canToggle, [$style.reacted]: item.reacted }]"
 						class="_button"
-						@click="react({ ...item, disableMenu: false }, $event)"
-						@dblclick="react({ ...item, disableMenu: true }, $event)"
+						@click="react(item, $event)"
 					>
 						<MkEmoji :class="$style.reactionIcon" :emoji="item.reaction" :custom-emojis="item.customEmojis" :is-reaction="true" :normal="true"/>
 						<span :class="$style.reactionCount">1</span>
@@ -90,15 +89,14 @@ const reactions = [
 	...emojis,
 ];
 
-const react = ({ reaction, canToggle, disableMenu }: {
+const react = ({ reaction, canToggle }: {
 	reaction: string;
 	canToggle: boolean;
-	disableMenu: boolean;
 }, ev: MouseEvent): void => {
 	if (!(ev.target instanceof HTMLElement)) return;
 	const reactButton = ref(ev.target);
 
-	if (!disableMenu && useReactionMenu.value) {
+	if (useReactionMenu.value) {
 		getReactMenuDryrun({ reactButton, reaction });
 	} else {
 		toggleReactDryrun({ reactButton, canToggle: ref(canToggle) });
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index e3af052f205f..bbe3e24d771d 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -4,8 +4,7 @@
 		ref="buttonRef"
 		class="hkzvhatu _button"
 		:class="[tmsStore.state.useEasyReactionsViewer ? $style.viewTypeEasy : $style.viewTypeNormal, { [$style.reacted]: reacted, [$style.canToggle]: canToggle }]"
-		@click="react()"
-		@dblclick="react({ disableMenu: true })"
+		@click="react"
 	>
 		<MkReactionIcon :class="$style.reactionIcon" :reaction="reaction" :custom-emojis="note.emojis" use-fallback-icon/>
 		<span :class="$style.reactionCount">{{ count }}</span>
@@ -39,16 +38,15 @@ const canToggle = computed(() => !props.reaction.match(/@\w/) && !!$i);
 
 const reacted = computed(() => props.note.myReaction === props.reaction);
 
-const react = (opt: {
-	disableMenu?: boolean;
-} = {}): void => {
+const react = (): void => {
 	const param = {
 		reaction: props.reaction,
 		note: props.note,
 		canToggle: canToggle,
 		reactButton: buttonRef,
 	};
-	if (!opt.disableMenu && tmsStore.state.useReactionMenu) {
+
+	if (tmsStore.state.useReactionMenu) {
 		getReactMenu(param);
 	} else {
 		toggleReact(param);

From fdef7466c54a5ef4060b25ed93f1e9686a3bc39a Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 11 May 2023 12:51:18 +0900
Subject: [PATCH 144/147] refactor: misskey -> Misskey (misskey-js)

---
 packages/client/src/account.ts                 | 12 ++++++------
 packages/client/src/components/MkAvatars.vue   |  4 ++--
 .../client/src/components/MkCropperDialog.vue  |  8 ++++----
 packages/client/src/components/MkCwButton.vue  |  4 ++--
 .../client/src/components/MkImageViewer.vue    |  4 ++--
 .../src/components/MkInstanceCardMini.vue      |  4 ++--
 .../client/src/components/MkMediaBanner.vue    |  4 ++--
 .../client/src/components/MkMediaImage.vue     |  4 ++--
 packages/client/src/components/MkMediaList.vue |  6 +++---
 .../client/src/components/MkMediaVideo.vue     |  4 ++--
 packages/client/src/components/MkNote.vue      | 12 ++++++------
 .../client/src/components/MkNoteDetailed.vue   | 16 ++++++++--------
 .../client/src/components/MkNoteHeader.vue     |  4 ++--
 .../client/src/components/MkNoteSimple.vue     |  4 ++--
 packages/client/src/components/MkNoteSub.vue   |  6 +++---
 .../client/src/components/MkNotification.vue   |  6 +++---
 .../client/src/components/MkPagination.vue     |  8 ++++----
 packages/client/src/components/MkPoll.vue      |  4 ++--
 .../client/src/components/MkPostFormDialog.vue | 18 +++++++++---------
 .../src/components/MkReactedUsersDialog.vue    |  6 +++---
 .../client/src/components/MkRenoteButton.vue   |  4 ++--
 .../client/src/components/MkSubNoteContent.vue |  4 ++--
 .../client/src/components/MkUserCardMini.vue   |  4 ++--
 .../client/src/components/MkUserIdsDialog.vue  |  6 +++---
 packages/client/src/components/MkUserInfo.vue  |  4 ++--
 .../src/components/MkUserOnlineIndicator.vue   |  4 ++--
 .../client/src/components/MkUserPreview.vue    |  4 ++--
 .../src/components/MkUserSelectDialog.vue      | 12 ++++++------
 .../client/src/components/MkVisibility.vue     |  4 ++--
 .../src/components/MkVisibilityPicker.vue      | 10 +++++-----
 .../client/src/components/global/MkAvatar.vue  |  4 ++--
 .../src/components/global/MkUserName.vue       |  4 ++--
 packages/client/src/filters/user.ts            |  8 ++++----
 packages/client/src/pages/_error_.vue          |  4 ++--
 .../client/src/pages/admin/overview.user.vue   |  4 ++--
 packages/client/src/pages/clip.vue             |  4 ++--
 packages/client/src/pages/instance-info.vue    |  6 +++---
 packages/client/src/pages/note.vue             |  6 +++---
 packages/client/src/pages/search.vue           |  6 +++---
 packages/client/src/pages/user-info.vue        |  4 ++--
 packages/client/src/pages/user/follow-list.vue |  4 ++--
 packages/client/src/pages/user/followers.vue   |  4 ++--
 packages/client/src/pages/user/following.vue   |  4 ++--
 packages/client/src/pages/user/gallery.vue     |  4 ++--
 packages/client/src/pages/user/home.vue        |  4 ++--
 .../client/src/pages/user/index.activity.vue   |  4 ++--
 .../client/src/pages/user/index.photos.vue     | 10 +++++-----
 .../client/src/pages/user/index.timeline.vue   |  4 ++--
 packages/client/src/pages/user/index.vue       |  4 ++--
 packages/client/src/pages/user/pages.vue       |  7 ++++---
 packages/client/src/pages/user/reactions.vue   |  4 ++--
 packages/client/src/scripts/get-note-menu.ts   |  6 +++---
 .../client/src/scripts/get-note-summary.ts     |  4 ++--
 packages/client/src/scripts/get-user-menu.ts   |  4 ++--
 packages/client/src/scripts/page-metadata.ts   |  6 +++---
 .../client/src/scripts/use-note-capture.ts     |  4 ++--
 packages/client/src/ui/_common_/common.vue     |  4 ++--
 .../client/src/ui/_common_/notification.vue    |  4 ++--
 .../src/ui/_common_/statusbar-federation.vue   |  4 ++--
 .../src/ui/_common_/statusbar-user-list.vue    |  4 ++--
 packages/client/src/ui/deck/channel-column.vue |  4 ++--
 61 files changed, 171 insertions(+), 170 deletions(-)

diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index c02b76edd207..4a42e7524612 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -1,5 +1,5 @@
 import { defineAsyncComponent, reactive } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { showSuspendedDialog } from './scripts/show-suspended-dialog';
 import { i18n } from './i18n';
 import { del, get, set } from '@/scripts/idb-proxy';
@@ -10,7 +10,7 @@ import { parseObject } from '@/scripts/tms/parse';
 
 // TODO: 他のタブと永続化されたstateを同期
 
-type Account = misskey.entities.MeDetailed;
+type Account = Misskey.entities.MeDetailed;
 
 const accountData = localStorage.getItem('account');
 
@@ -143,8 +143,8 @@ export async function login(token: Account['token'], redirect?: string) {
 export async function openAccountMenu(opts: {
 	includeCurrentAccount?: boolean;
 	withExtraOperation: boolean;
-	active?: misskey.entities.UserDetailed['id'];
-	onChoose?: (account: misskey.entities.UserDetailed) => void;
+	active?: Misskey.entities.UserDetailed['id'];
+	onChoose?: (account: Misskey.entities.UserDetailed) => void;
 }, ev: MouseEvent) {
 	function showSigninDialog() {
 		popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
@@ -164,7 +164,7 @@ export async function openAccountMenu(opts: {
 		}, 'closed');
 	}
 
-	async function switchAccount(account: misskey.entities.UserDetailed) {
+	async function switchAccount(account: Misskey.entities.UserDetailed) {
 		const storedAccounts = await getAccounts();
 		const token = storedAccounts.find(x => x.id === account.id).token;
 		switchAccountWithToken(token);
@@ -177,7 +177,7 @@ export async function openAccountMenu(opts: {
 	const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
 	const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) });
 
-	function createItem(account: misskey.entities.UserDetailed) {
+	function createItem(account: Misskey.entities.UserDetailed) {
 		return {
 			type: 'user',
 			user: account,
diff --git a/packages/client/src/components/MkAvatars.vue b/packages/client/src/components/MkAvatars.vue
index 15e2b48b0fcf..da330a3ea5d8 100644
--- a/packages/client/src/components/MkAvatars.vue
+++ b/packages/client/src/components/MkAvatars.vue
@@ -8,14 +8,14 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 
 const props = defineProps<{
 	userIds: string[];
 }>();
 
-const users = ref<misskey.entities.UserDetailed[]>([]);
+const users = ref<Misskey.entities.UserDetailed[]>([]);
 
 onMounted(async () => {
 	users.value = await os.api('users/show', {
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 0d4749a8b255..3a7f933c1288 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -39,13 +39,13 @@ import { query } from '@/scripts/url';
 import { i18n } from '@/i18n';
 
 const emit = defineEmits<{
-	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
+	(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
 	(ev: 'cancel'): void;
 	(ev: 'closed'): void;
 }>();
 
 const props = defineProps<{
-	file: misskey.entities.DriveFile;
+	file: Misskey.entities.DriveFile;
 	aspectRatio: number;
 }>();
 
@@ -58,7 +58,7 @@ let cropper: Cropper | null = null;
 let loading = $ref(true);
 
 const ok = async (): Promise<void> => {
-	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
+	const promise = new Promise<Misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
 		if (!croppedCanvas) return;
 
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index dd906f9bf34c..4ba791f8775e 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -8,13 +8,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { length } from 'stringz';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { concat } from '@/scripts/array';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	modelValue: boolean;
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 }>();
 
 const emit = defineEmits<{
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index f074b1a2f28d..cbfbc5fb48bc 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -14,13 +14,13 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 import MkModal from '@/components/MkModal.vue';
 
 const props = withDefaults(defineProps<{
-	image: misskey.entities.DriveFile;
+	image: Misskey.entities.DriveFile;
 }>(), {
 });
 
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index f6e2f4eaa7d9..5fa1de460cbb 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 
 const props = defineProps<{
-	instance: misskey.entities.Instance;
+	instance: Misskey.entities.Instance;
 }>();
 
 let chartValues = $ref<number[] | null>(null);
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index f700b41e38d6..ff05a049e15a 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -30,12 +30,12 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { ColdDeviceStorage } from '@/store';
 import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
-	media: misskey.entities.DriveFile;
+	media: Misskey.entities.DriveFile;
 }>(), {
 });
 
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 0db23fc91359..a7db2a1d9ca2 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -24,14 +24,14 @@
 
 <script lang="ts" setup>
 import { watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	image: misskey.entities.DriveFile;
+	image: Misskey.entities.DriveFile;
 	raw?: boolean;
 }>();
 
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 8e310efdcb32..3c8d00ae73f0 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
 import 'photoswipe/style.css';
@@ -25,7 +25,7 @@ import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 
 const props = defineProps<{
-	mediaList: misskey.entities.DriveFile[];
+	mediaList: Misskey.entities.DriveFile[];
 	raw?: boolean;
 }>();
 
@@ -132,7 +132,7 @@ onMounted(() => {
 	});
 });
 
-const previewable = (file: misskey.entities.DriveFile): boolean => {
+const previewable = (file: Misskey.entities.DriveFile): boolean => {
 	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
 	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index d999b335287a..21b01445e7af 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -25,12 +25,12 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	video: misskey.entities.DriveFile;
+	video: Misskey.entities.DriveFile;
 }>();
 
 const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 0e8c6bb83aa3..194318d59471 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -112,7 +112,7 @@
 import { inject, onMounted, ref, Ref, computed } from 'vue';
 import { ReactiveVariable } from 'vue/macros';
 import * as mfm from 'mfm-js';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
@@ -146,20 +146,20 @@ import { tmsStore } from '@/tms/store';
 import { isPureRenote } from '@/scripts/tms/is-pure-renote';
 
 const props = defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	pinned?: boolean;
 }>();
 
 const inChannel = inject('inChannel', null);
 
-let note = $ref<misskey.entities.Note>(deepClone(props.note));
+let note = $ref<Misskey.entities.Note>(deepClone(props.note));
 
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
 		let result = deepClone(note);
 		for (const interruptor of noteViewInterruptors) {
-			result = await interruptor.handler(result) as ReactiveVariable<misskey.entities.Note>; // unknownのため
+			result = await interruptor.handler(result) as ReactiveVariable<Misskey.entities.Note>; // unknownのため
 		}
 		note = result;
 	});
@@ -249,7 +249,7 @@ const react = (_viaKeyboard = false): void => {
 	}, focus);
 };
 
-const undoReact = (note_: misskey.entities.Note): void => {
+const undoReact = (note_: Misskey.entities.Note): void => {
 	const oldReaction = note_.myReaction;
 	if (!oldReaction) return;
 	os.api('notes/reactions/delete', {
@@ -257,7 +257,7 @@ const undoReact = (note_: misskey.entities.Note): void => {
 	});
 };
 
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+const currentClipPage = inject<Ref<Misskey.entities.Clip> | null>('currentClipPage', null);
 
 const onContextmenu = (ev: MouseEvent): void => {
 	if (disableContextmenu) return;
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index d1196056b41f..41621f012023 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -116,7 +116,7 @@
 import { inject, onMounted, ref, Ref } from 'vue';
 import { ReactiveVariable } from 'vue/macros';
 import * as mfm from 'mfm-js';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
@@ -144,20 +144,20 @@ import { disableContextmenu } from '@/scripts/touch';
 import { isPureRenote } from '@/scripts/tms/is-pure-renote';
 
 const props = defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	pinned?: boolean;
 }>();
 
 const inChannel = inject('inChannel', null);
 
-let note = $ref<misskey.entities.Note>(deepClone(props.note));
+let note = $ref<Misskey.entities.Note>(deepClone(props.note));
 
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
 		let result = deepClone(note);
 		for (const interruptor of noteViewInterruptors) {
-			result = await interruptor.handler(result) as ReactiveVariable<misskey.entities.Note>; // unknownのため
+			result = await interruptor.handler(result) as ReactiveVariable<Misskey.entities.Note>; // unknownのため
 		}
 		note = result;
 	});
@@ -179,8 +179,8 @@ const translation = ref(null);
 const translating = ref(false);
 const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
-const conversation = ref<misskey.entities.Note[]>([]);
-const replies = ref<misskey.entities.Note[]>([]);
+const conversation = ref<Misskey.entities.Note[]>([]);
+const replies = ref<Misskey.entities.Note[]>([]);
 
 const keymap = {
 	'r': (): void => reply(true),
@@ -217,7 +217,7 @@ const react = (_viaKeyboard = false): void => {
 	}, focus);
 };
 
-const undoReact = (note_: misskey.entities.Note): void => {
+const undoReact = (note_: Misskey.entities.Note): void => {
 	const oldReaction = note_.myReaction;
 	if (!oldReaction) return;
 	os.api('notes/reactions/delete', {
@@ -306,7 +306,7 @@ if (appearNote.replyId) {
 	os.api('notes/conversation', {
 		noteId: appearNote.replyId,
 	}).then(res => {
-		const resTyped = res as misskey.entities.Note[]; // TODO型のため
+		const resTyped = res as Misskey.entities.Note[]; // TODO型のため
 		conversation.value = resTyped.reverse();
 	});
 }
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 333c3ddbd90e..4312c8da2fd0 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -16,13 +16,13 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkVisibility from '@/components/MkVisibility.vue';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
 
 defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	pinned?: boolean;
 }>();
 </script>
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 388e68c11c73..d934063e1a74 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -18,14 +18,14 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import { $i } from '@/account';
 
 defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	pinned?: boolean;
 }>();
 
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index af255102aa25..b7c455bf73e2 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
@@ -36,7 +36,7 @@ import { i18n } from '@/i18n';
 import { $i } from '@/account';
 
 const props = withDefaults(defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	detail?: boolean;
 
 	// how many notes are in between this one and the note being viewed in detail
@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<{
 });
 
 let showContent = $ref(false);
-let replies: misskey.entities.Note[] = $ref([]);
+let replies: Misskey.entities.Note[] = $ref([]);
 
 if (props.detail) {
 	os.api('notes/children', {
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index bb75f35b27e4..545352b34851 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -88,7 +88,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkReactionTooltip from '@/components/MkReactionTooltip.vue';
@@ -102,7 +102,7 @@ import { stream } from '@/stream';
 import { useTooltip } from '@/scripts/use-tooltip';
 
 const props = withDefaults(defineProps<{
-	notification: misskey.entities.Notification;
+	notification: Misskey.entities.Notification;
 	withTime?: boolean;
 	full?: boolean;
 }>(), {
@@ -114,7 +114,7 @@ const rootEl = ref<HTMLElement | null>(null);
 const reactionRef = ref<InstanceType<typeof MkReactionIcon> | null>(null);
 
 let readObserver: IntersectionObserver | null = null;
-let connection: misskey.ChannelConnection | null = null;
+let connection: Misskey.ChannelConnection | null = null;
 
 onMounted(() => {
 	if (rootEl.value && !props.notification.isRead) {
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 6d62c4c73a88..ff174c465276 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -56,7 +56,7 @@
 
 <script lang="ts" setup>
 import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch, unref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';
 import { useDocumentVisibility } from '@/scripts/use-document-visibility';
@@ -65,10 +65,10 @@ import { defaultStore } from '@/store';
 import { MisskeyEntity } from '@/types/date-separated-list';
 import { i18n } from '@/i18n';
 
-export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
+export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints> = {
 	endpoint: E;
 	limit?: number;
-	params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
+	params?: Misskey.Endpoints[E]['req'] | ComputedRef<Misskey.Endpoints[E]['req']>;
 
 	/**
 	 * 検索APIのような、ページング不可なエンドポイントを利用する場合
@@ -113,7 +113,7 @@ const users = computed(() => {
 	return items.value
 		.flatMap(x => {
 			const xTyped = x as typeof x & {
-				user?: misskey.entities.UserDetailed | null; /* any型のため */
+				user?: Misskey.entities.UserDetailed | null; /* any型のため */
 			};
 			return xTyped.user ? [xTyped.user] : [];
 		})
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 0108f6142c83..4cb51c809e77 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { sum } from '@/scripts/array';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
@@ -31,7 +31,7 @@ import { i18n } from '@/i18n';
 import { useInterval } from '@/scripts/use-interval';
 
 const props = defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	readOnly?: boolean;
 }>();
 
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index c1a38b0ca4cd..f3c95bae9ad4 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -6,22 +6,22 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import TmsPostForm from '@/components/TmsPostForm.vue';
 
 const props = defineProps<{
-	reply?: misskey.entities.Note;
-	renote?: misskey.entities.Note;
-	channel?: misskey.entities.Channel; // TODO
-	mention?: misskey.entities.User;
-	specified?: misskey.entities.User;
+	reply?: Misskey.entities.Note;
+	renote?: Misskey.entities.Note;
+	channel?: Misskey.entities.Channel; // TODO
+	mention?: Misskey.entities.User;
+	specified?: Misskey.entities.User;
 	initialText?: string;
 	initialVisibility?: 'public' | 'home' | 'followers' | 'specified';
-	initialFiles?: misskey.entities.DriveFile[];
+	initialFiles?: Misskey.entities.DriveFile[];
 	initialLocalOnly?: boolean;
-	initialVisibleUsers?: misskey.entities.User[];
-	initialNote?: misskey.entities.Note;
+	initialVisibleUsers?: Misskey.entities.User[];
+	initialNote?: Misskey.entities.Note;
 	instant?: boolean;
 	fixed?: boolean;
 	autofocus?: boolean;
diff --git a/packages/client/src/components/MkReactedUsersDialog.vue b/packages/client/src/components/MkReactedUsersDialog.vue
index 4a0ac321498b..03af683b4710 100644
--- a/packages/client/src/components/MkReactedUsersDialog.vue
+++ b/packages/client/src/components/MkReactedUsersDialog.vue
@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { onMounted, computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkUserCardMiniList from '@/components/MkUserCardMiniList.vue';
@@ -53,7 +53,7 @@ const emit = defineEmits<{
 }>();
 
 const props = defineProps<{
-	noteId: misskey.entities.Note['id'];
+	noteId: Misskey.entities.Note['id'];
 	initialTab?: string | null;
 }>();
 
@@ -62,7 +62,7 @@ const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 const RENOTE_TAB = 'RENOTE_TAB';
 let hasRenote = $ref<boolean>(false);
 
-let note = $ref<misskey.entities.Note>();
+let note = $ref<Misskey.entities.Note>();
 let tab = $ref<typeof RENOTE_TAB | string>();
 let reactions = $ref<string[]>();
 
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 02e90b084273..ba9cf92374a6 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import XDetails from '@/components/MkUsersTooltip.vue';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { pleaseLogin } from '@/scripts/please-login';
@@ -22,7 +22,7 @@ import { pakuru, numberquote } from '@/scripts/tms/pakuru';
 import { tmsStore } from '@/tms/store';
 
 const props = defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	count: number;
 }>();
 
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 661aec9d709c..d2cec45b811e 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n';
@@ -34,7 +34,7 @@ import { $i } from '@/account';
 import { tmsStore } from '@/tms/store';
 
 const props = defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 }>();
 
 const textEl = ref<HTMLElement>();
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 79dc4eb49cda..44a182bdd1fc 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -10,14 +10,14 @@
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { onMounted } from 'vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { acct } from '@/filters/user';
 
 const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 	withChart: boolean;
 }>(), {
 	withChart: true,
diff --git a/packages/client/src/components/MkUserIdsDialog.vue b/packages/client/src/components/MkUserIdsDialog.vue
index 7c15dc95f2ed..46eb3b05b79e 100644
--- a/packages/client/src/components/MkUserIdsDialog.vue
+++ b/packages/client/src/components/MkUserIdsDialog.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { userPage } from '@/filters/user';
@@ -40,12 +40,12 @@ const emit = defineEmits<{
 
 const props = defineProps<{
 	title: string;
-	userIds: misskey.entities.User['id'][];
+	userIds: Misskey.entities.User['id'][];
 }>();
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
 
-let users = $ref<misskey.entities.UserDetailed[]>([]);
+let users = $ref<Misskey.entities.UserDetailed[]>([]);
 
 os.api('users/show', {
 	userIds: props.userIds,
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 821a9371f73d..0a7886aff814 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -29,14 +29,14 @@
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 
 defineProps<{
-	user: misskey.entities.UserDetailed;
+	user: Misskey.entities.UserDetailed;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
index a4f6f80383e3..2c19e303aeb2 100644
--- a/packages/client/src/components/MkUserOnlineIndicator.vue
+++ b/packages/client/src/components/MkUserOnlineIndicator.vue
@@ -4,11 +4,11 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 }>();
 
 const text = $computed(() => {
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index dabd77148398..cf8bfffb3c8e 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
@@ -57,7 +57,7 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex('middle');
-let user = $ref<misskey.entities.UserDetailed | null>(null);
+let user = $ref<Misskey.entities.UserDetailed | null>(null);
 let top = $ref(0);
 let left = $ref(0);
 
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index 59d9c5fe64f8..fe4e068a7733 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -53,7 +53,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkInput from '@/components/form/input.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -62,16 +62,16 @@ import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
 const emit = defineEmits<{
-	(ev: 'ok', selected: misskey.entities.UserDetailed): void;
+	(ev: 'ok', selected: Misskey.entities.UserDetailed): void;
 	(ev: 'cancel'): void;
 	(ev: 'closed'): void;
 }>();
 
 let username = $ref('');
 let host = $ref('');
-let users: misskey.entities.UserDetailed[] = $ref([]);
-let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
-let selected: misskey.entities.UserDetailed | null = $ref(null);
+let users: Misskey.entities.UserDetailed[] = $ref([]);
+let recentUsers: Misskey.entities.UserDetailed[] = $ref([]);
+let selected: Misskey.entities.UserDetailed | null = $ref(null);
 let dialogEl = $ref<InstanceType<typeof MkModalWindow>>();
 
 const search = (): void => {
@@ -85,7 +85,7 @@ const search = (): void => {
 		limit: 10,
 		detail: false,
 	}).then((_users) => {
-		users = _users as unknown as misskey.entities.UserDetailed[];
+		users = _users as unknown as Misskey.entities.UserDetailed[];
 	});
 };
 
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index ebfce3ae78f6..d6cdbbcace7e 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -10,13 +10,13 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 
 const props = defineProps<{
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 }>();
 
 let hasAuthority = $ref(false);
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 9cfa984a0fa3..ed25134483e2 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -49,24 +49,24 @@
 
 <script lang="ts" setup>
 import { nextTick, watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import { i18n } from '@/i18n';
 
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
 const props = withDefaults(defineProps<{
-	currentVisibility: typeof misskey.noteVisibilities[number];
+	currentVisibility: typeof Misskey.noteVisibilities[number];
 	currentLocalOnly: boolean;
 	src?: HTMLElement;
-	disabledVisibilities?: typeof misskey.noteVisibilities[number][];
+	disabledVisibilities?: typeof Misskey.noteVisibilities[number][];
 }>(), {
 	src: undefined,
 	disabledVisibilities: () => [],
 });
 
 const emit = defineEmits<{
-	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
+	(ev: 'changeVisibility', v: typeof Misskey.noteVisibilities[number]): void;
 	(ev: 'changeLocalOnly', v: boolean): void;
 	(ev: 'closed'): void;
 }>();
@@ -78,7 +78,7 @@ watch($$(localOnly), () => {
 	emit('changeLocalOnly', localOnly);
 });
 
-function choose(visibility: typeof misskey.noteVisibilities[number]): void {
+function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
 	v = visibility;
 	emit('changeVisibility', visibility);
 	nextTick(() => {
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 58af5efbfbb4..22b050a94b80 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
 import { acct, userPage } from '@/filters/user';
@@ -19,7 +19,7 @@ import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
 import { defaultStore } from '@/store';
 
 const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 	target?: string | null;
 	disableLink?: boolean;
 	disablePreview?: boolean;
diff --git a/packages/client/src/components/global/MkUserName.vue b/packages/client/src/components/global/MkUserName.vue
index 090de3df3023..af90ec83f596 100644
--- a/packages/client/src/components/global/MkUserName.vue
+++ b/packages/client/src/components/global/MkUserName.vue
@@ -4,10 +4,10 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 
 const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 	nowrap?: boolean;
 }>(), {
 	nowrap: true,
diff --git a/packages/client/src/filters/user.ts b/packages/client/src/filters/user.ts
index ff2f7e2dae4f..a95bb5a930ee 100644
--- a/packages/client/src/filters/user.ts
+++ b/packages/client/src/filters/user.ts
@@ -1,15 +1,15 @@
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import { url } from '@/config';
 
-export const acct = (user: misskey.Acct) => {
+export const acct = (user: Misskey.Acct) => {
 	return Acct.toString(user);
 };
 
-export const userName = (user: misskey.entities.User) => {
+export const userName = (user: Misskey.entities.User) => {
 	return user.name || user.username;
 };
 
-export const userPage = (user: misskey.Acct, path?, absolute = false) => {
+export const userPage = (user: Misskey.Acct, path?, absolute = false) => {
 	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
 };
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index 8b7160739e1f..ebf62a461cca 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import { version } from '@/config';
 import * as os from '@/os';
@@ -34,7 +34,7 @@ defineProps<{
 
 let loaded = $ref(false);
 let serverIsDead = $ref(false);
-let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null);
+let meta = $ref<Misskey.entities.LiteInstanceMetadata | null>(null);
 
 os.api('meta', {
 	detail: false,
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 4ef8e1677aad..c468f7b73de6 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { acct } from '@/filters/user';
 
 const props = defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 }>();
 
 let chart = $ref(null);
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 9ae781966e47..e2a5e63dddc7 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { computed, watch, provide } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
@@ -31,7 +31,7 @@ const props = defineProps<{
 	clipId: string,
 }>();
 
-let clip = $ref<misskey.entities.Clip | null>(null);
+let clip = $ref<Misskey.entities.Clip | null>(null);
 const pagination = {
 	endpoint: 'clips/notes' as const,
 	limit: 10,
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index e934db44cd9f..ecc6f7b5830b 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -116,7 +116,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
 import FormLink from '@/components/form/link.vue';
@@ -140,8 +140,8 @@ const props = defineProps<{
 
 let tab = $ref('overview');
 let chartSrc = $ref('instance-requests');
-let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
-let instance = $ref<misskey.entities.Instance | null>(null);
+let meta = $ref<Misskey.entities.DetailedInstanceMetadata | null>(null);
+let instance = $ref<Misskey.entities.Instance | null>(null);
 let suspended = $ref(false);
 let isBlocked = $ref(false);
 
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index e9f77ef7a247..abeaea604682 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import MkNotes from '@/components/MkNotes.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
@@ -56,8 +56,8 @@ const props = defineProps<{
 	noteId: string;
 }>();
 
-let note = $ref<misskey.entities.Note | null>();
-let clips = $ref<misskey.entities.Clip | null>();
+let note = $ref<Misskey.entities.Note | null>();
+let clips = $ref<Misskey.entities.Clip | null>();
 let hasPrev = $ref(false);
 let hasNext = $ref(false);
 let showPrev = $ref(false);
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 2e1d41b8bcd6..bc8cb062c6f3 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import * as mfm from 'mfm-js';
 import { v4 as uuid } from 'uuid';
 import MkNote from '@/components/MkNote.vue';
@@ -77,10 +77,10 @@ let currentId = $ref(uuid());
 
 let pickup = $ref<{
 	type: 'note';
-	value: misskey.entities.Note;
+	value: Misskey.entities.Note;
 } | {
 	type: 'user';
-	value: misskey.entities.UserDetailed;
+	value: Misskey.entities.UserDetailed;
 } | {
 	type: 'fetch';
 	value: string | null;
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 9319ee529ba3..4b189aae273d 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -158,7 +158,7 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
 import FormTextarea from '@/components/form/textarea.vue';
@@ -187,7 +187,7 @@ const props = defineProps<{
 
 let tab = $ref('overview');
 let chartSrc = $ref('per-user-notes');
-let user = $ref<null | misskey.entities.UserDetailed>();
+let user = $ref<null | Misskey.entities.UserDetailed>();
 let init = $ref<ReturnType<typeof createFetcher>>();
 let info = $ref();
 let ips = $ref(null);
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index d42acd838f85..e83e6aaa37c8 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -10,12 +10,12 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination from '@/components/MkPagination.vue';
 
 const props = defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 	type: 'following' | 'followers';
 }>();
 
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index 5e1424d1b624..42c70b985d4a 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import XFollowList from './follow-list.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-let user = $ref<null | misskey.entities.UserDetailed>(null);
+let user = $ref<null | Misskey.entities.UserDetailed>(null);
 let error = $ref(null);
 
 function fetchUser(): void {
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index e7ae6e52596e..9e5b3e6cafd3 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import XFollowList from './follow-list.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-let user = $ref<null | misskey.entities.UserDetailed>(null);
+let user = $ref<null | Misskey.entities.UserDetailed>(null);
 let error = $ref(null);
 
 function fetchUser(): void {
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 3b6768e64a3d..e9990b3aacae 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -10,12 +10,12 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 
 const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 }>(), {
 });
 
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index e5b67174d04b..1cc179f1b720 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -111,7 +111,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import calcAge from 's-age';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import XUserTimeline from './index.timeline.vue';
 import MkNote from '@/components/MkNote.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -130,7 +130,7 @@ const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
 
 const props = withDefaults(defineProps<{
-	user: misskey.entities.UserDetailed;
+	user: Misskey.entities.UserDetailed;
 }>(), {
 });
 
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index c6c6b889d285..5bc4cc445091 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -15,14 +15,14 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkChart from '@/components/MkChart.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 	limit?: number;
 }>(), {
 	limit: 50,
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 265bce822815..a7e702fac73d 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
@@ -30,16 +30,16 @@ import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	user: misskey.entities.UserDetailed;
+	user: Misskey.entities.UserDetailed;
 }>();
 
 let fetching = $ref(true);
 let images = $ref<{
-	note: misskey.entities.Note;
-	file: misskey.entities.DriveFile;
+	note: Misskey.entities.Note;
+	file: Misskey.entities.DriveFile;
 }[]>([]);
 
-function thumbnail(image: misskey.entities.DriveFile): string {
+function thumbnail(image: Misskey.entities.DriveFile): string {
 	return defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(image.thumbnailUrl)
 		: image.thumbnailUrl;
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 94fc28a3256d..fdf84d610d4d 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -13,13 +13,13 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	user: misskey.entities.UserDetailed;
+	user: Misskey.entities.UserDetailed;
 }>();
 
 const include = ref<string | null>(null);
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 0ac4018bc8b9..0bbd15ba1099 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -20,7 +20,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, watch } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { acct as getAcct } from '@/filters/user';
 import * as os from '@/os';
 import { useRouter } from '@/router';
@@ -44,7 +44,7 @@ const props = withDefaults(defineProps<{
 const router = useRouter();
 
 let tab = $ref(props.page);
-let user = $ref<null | misskey.entities.UserDetailed>(null);
+let user = $ref<null | Misskey.entities.UserDetailed>(null);
 let error = $ref(null);
 
 function fetchUser(): void {
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 9afcd4fe0aad..60ec7950e987 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,9 +1,10 @@
 <!-- eslint-disable-line vue/multi-word-component-names -->
 <template>
 <MkSpacer :content-max="700">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<div :class="$style.pages"></div>
-		<MkPagePreview v-for="page in items" :key="page.id" :page="(page as any /* 定義されていないため */)" :class="$style.page"/>
+	<MkPagination v-slot="{items}" :pagination="pagination">
+		<div :class="$style.pages">
+			<MkPagePreview v-for="page in items" :key="page.id" :page="(page as any /* 定義されていないため */)"/>
+		</div>
 	</MkPagination>
 </MkSpacer>
 </template>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 191de75b9ec4..b9c8fced632b 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -18,13 +18,13 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkPagination from '@/components/MkPagination.vue';
 import MkNote from '@/components/MkNote.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 
 const props = defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 }>();
 
 const pagination = {
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 96b9420b8fab..74b0d461c4dd 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -1,5 +1,5 @@
 import { defineAsyncComponent, Ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
@@ -11,12 +11,12 @@ import { getUserMenu } from '@/scripts/get-user-menu';
 import { isPureRenote } from '@/scripts/tms/is-pure-renote';
 
 export function getNoteMenu(props: {
-	note: misskey.entities.Note;
+	note: Misskey.entities.Note;
 	menuButton?: Ref<HTMLElement>;
 	translation: Ref<any>;
 	translating: Ref<boolean>;
 	isDeleted: Ref<boolean>;
-	currentClipPage?: Ref<misskey.entities.Clip>;
+	currentClipPage?: Ref<Misskey.entities.Clip>;
 }) {
 	const appearNote = isPureRenote(props.note) ? props.note.renote : props.note;
 
diff --git a/packages/client/src/scripts/get-note-summary.ts b/packages/client/src/scripts/get-note-summary.ts
index d57e1c30297f..d31855a35a13 100644
--- a/packages/client/src/scripts/get-note-summary.ts
+++ b/packages/client/src/scripts/get-note-summary.ts
@@ -1,11 +1,11 @@
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n';
 
 /**
  * 投稿を表す文字列を取得します。
  * @param {*} note (packされた)投稿
  */
-export const getNoteSummary = (note: misskey.entities.Note): string => {
+export const getNoteSummary = (note: Misskey.entities.Note): string => {
 	if (note.deletedAt) {
 		return `(${i18n.ts.deletedNote})`;
 	}
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 5c22787e18e3..f8f92895b030 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -1,6 +1,6 @@
 import * as Acct from 'misskey-js/built/acct';
 import { defineAsyncComponent } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n';
 import { copyText } from '@/scripts/tms/clipboard';
 import { host } from '@/config';
@@ -10,7 +10,7 @@ import { $i, iAmModerator } from '@/account';
 import { mainRouter } from '@/router';
 import { Router } from '@/nirax';
 
-export function getUserMenu(user: misskey.entities.UserDetailed, router: Router = mainRouter) {
+export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;
 
 	async function pushList() {
diff --git a/packages/client/src/scripts/page-metadata.ts b/packages/client/src/scripts/page-metadata.ts
index 0db8369f9d6b..834564e5e1a6 100644
--- a/packages/client/src/scripts/page-metadata.ts
+++ b/packages/client/src/scripts/page-metadata.ts
@@ -1,4 +1,4 @@
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { ComputedRef, inject, isRef, onActivated, onMounted, provide, ref, Ref } from 'vue';
 
 export const setPageMetadata = Symbol('setPageMetadata');
@@ -8,8 +8,8 @@ export type PageMetadata = {
 	title: string;
 	subtitle?: string;
 	icon?: string | null;
-	avatar?: misskey.entities.User | null;
-	userName?: misskey.entities.User | null;
+	avatar?: Misskey.entities.User | null;
+	userName?: Misskey.entities.User | null;
 	bg?: string;
 };
 
diff --git a/packages/client/src/scripts/use-note-capture.ts b/packages/client/src/scripts/use-note-capture.ts
index e939a380a6a1..0c59709c3560 100644
--- a/packages/client/src/scripts/use-note-capture.ts
+++ b/packages/client/src/scripts/use-note-capture.ts
@@ -1,11 +1,11 @@
 import { onUnmounted, Ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { stream } from '@/stream';
 import { $i } from '@/account';
 
 export function useNoteCapture(props: {
 	rootEl: Ref<HTMLElement>;
-	note: Ref<misskey.entities.Note>;
+	note: Ref<Misskey.entities.Note>;
 	isDeletedRef: Ref<boolean>;
 }) {
 	const note = props.note;
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 9573bbf93e3e..b5df5c5297b8 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import { swInject } from './sw-inject';
 import XNotification from './notification.vue';
 import { popups, pendingApiRequestsCount } from '@/os';
@@ -40,7 +40,7 @@ const XUpload = defineAsyncComponent(() => import('./upload.vue'));
 
 const dev = _DEV_;
 
-let notifications = $ref<misskey.entities.Notification[]>([]);
+let notifications = $ref<Misskey.entities.Notification[]>([]);
 
 function onNotification(notification) {
 	if ($i.mutingNotificationTypes.includes(notification.type)) return;
diff --git a/packages/client/src/ui/_common_/notification.vue b/packages/client/src/ui/_common_/notification.vue
index 74cae7c568c3..4d22703a2e25 100644
--- a/packages/client/src/ui/_common_/notification.vue
+++ b/packages/client/src/ui/_common_/notification.vue
@@ -6,11 +6,11 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MkNotification from '@/components/MkNotification.vue';
 
 defineProps<{
-	notification: misskey.entities.Notification;
+	notification: Misskey.entities.Notification;
 }>();
 </script>
 
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index ac7fb9a29e7c..2d2b20678e36 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MarqueeText from '@/components/MkMarquee.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
@@ -35,7 +35,7 @@ const props = defineProps<{
 	refreshIntervalSec?: number;
 }>();
 
-const instances = ref<misskey.entities.Instance[]>([]);
+const instances = ref<Misskey.entities.Instance[]>([]);
 const fetching = ref(true);
 let key = $ref(0);
 
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 187c56df0c24..29f20bdf9301 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import MarqueeText from '@/components/MkMarquee.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
@@ -37,7 +37,7 @@ const props = defineProps<{
 	refreshIntervalSec?: number;
 }>();
 
-const notes = ref<misskey.entities.Note[]>([]);
+const notes = ref<Misskey.entities.Note[]>([]);
 const fetching = ref(true);
 let key = $ref(0);
 
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index 81c85b7ff799..cac82929df23 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
 import MkTimeline from '@/components/MkTimeline.vue';
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 }>();
 
 const timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
-let channel = $shallowRef<misskey.entities.Channel>();
+let channel = $shallowRef<Misskey.entities.Channel>();
 
 onMounted(() => {
 	if (props.column.channelId == null) {

From 5b885d1676c697647d0b7840643188fcde007e09 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 11 May 2023 12:51:53 +0900
Subject: [PATCH 145/147] ehnahce: TmsClipPreview, :user/clips

---
 .../client/src/components/TmsClipPreview.vue  | 73 +++++++++++++++++++
 packages/client/src/pages/user/clips.vue      | 30 +-------
 2 files changed, 77 insertions(+), 26 deletions(-)
 create mode 100644 packages/client/src/components/TmsClipPreview.vue

diff --git a/packages/client/src/components/TmsClipPreview.vue b/packages/client/src/components/TmsClipPreview.vue
new file mode 100644
index 000000000000..d031f102f6e5
--- /dev/null
+++ b/packages/client/src/components/TmsClipPreview.vue
@@ -0,0 +1,73 @@
+<template>
+<MkA :to="`/clips/${clip.id}`" :class="[$style.root, '_block']" tabindex="-1">
+	<div :class="$style.clipName">{{ clip.name }}</div>
+	<div v-if="clip.description" :class="$style.clipDescription">{{ clip.description.length > 85 ? `${clip.description.slice(0, 85)}…` : clip.description }}</div>
+	<div :class="$style.clipUser">
+		<MkAvatar :class="$style.clipUserIcon" :user="clip.user" disable-link disable-preview/>
+		<MkUserName :class="$style.clipUserName" :user="clip.user" nowrap/>
+	</div>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+
+defineProps<{
+	// clip: Misskey.entities.Clip;
+	clip: {
+		id: string;
+		createdAt: string;
+		userId: string;
+		user: Misskey.entities.UserLite;
+		name: string;
+		description: string | null;
+		isPublic: boolean;
+	};
+}>();
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+	padding: 16px;
+	overflow: hidden; // fallback (overflow: clip)
+	overflow: clip;
+	color: inherit !important;
+
+	&:hover {
+		text-decoration: none;
+		color: var(--accent);
+	}
+}
+
+.clipName {
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.clipDescription {
+	margin-top: 8px;
+	font-size: 0.8em;
+}
+
+.clipUser {
+	margin-top: 8px;
+	display: grid;
+	grid-template-columns: 16px 1fr;
+	grid-template-rows: 16px;
+}
+
+.clipUserIcon {
+	display: block !important;
+	width: 100% !important;
+	height: 100% !important;
+}
+
+.clipUserName {
+	font-size: 0.8em;
+	line-height: 0.8em;
+}
+</style>
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index cb402702f019..161107f42fe5 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -3,10 +3,7 @@
 <MkSpacer :content-max="700">
 	<MkPagination v-slot="{items}" :pagination="pagination">
 		<div :class="$style.clips">
-			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" :class="[$style.clip, '_panel']">
-				<div :class="$style.clipName">{{ item.name }}</div>
-				<div v-if="item.description" :class="$style.clipDescription">{{ item.description }}</div>
-			</MkA>
+			<TmsClipPreview v-for="clip in items" :key="clip.id" :clip="(clip as any /* 定義されていないため */)"/>
 		</div>
 	</MkPagination>
 </MkSpacer>
@@ -14,11 +11,12 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import * as misskey from 'misskey-js';
+import * as Misskey from 'misskey-js';
+import TmsClipPreview from '@/components/TmsClipPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 
 const props = defineProps<{
-	user: misskey.entities.User;
+	user: Misskey.entities.User;
 }>();
 
 const pagination = {
@@ -37,24 +35,4 @@ const pagination = {
 	grid-template-columns: 100%;
 	gap: var(--margin);
 }
-
-.clip {
-	display: block;
-	padding: 16px;
-	overflow: hidden; // fallback (overflow: clip)
-	overflow: clip;
-}
-
-.clipName {
-	font-weight: bold;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.clipDescription {
-	margin-top: 8px;
-	padding-top: 8px;
-	border-top: solid 0.5px var(--divider);
-}
 </style>

From 785220c2dbaf237e08cf860c7f1f7ff28556a9b5 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 11 May 2023 13:04:10 +0900
Subject: [PATCH 146/147] refactor: TmsUserCardMiniList

---
 .../src/components/MkReactedUsersDialog.vue    |  6 +++---
 ...ardMiniList.vue => TmsUserCardMiniList.vue} | 18 ++++++++++++------
 2 files changed, 15 insertions(+), 9 deletions(-)
 rename packages/client/src/components/{MkUserCardMiniList.vue => TmsUserCardMiniList.vue} (70%)

diff --git a/packages/client/src/components/MkReactedUsersDialog.vue b/packages/client/src/components/MkReactedUsersDialog.vue
index 03af683b4710..bfcfa8de475f 100644
--- a/packages/client/src/components/MkReactedUsersDialog.vue
+++ b/packages/client/src/components/MkReactedUsersDialog.vue
@@ -27,8 +27,8 @@
 					</button>
 				</div>
 				<div class="users">
-					<MkUserCardMiniList v-if="tab === RENOTE_TAB" :pagination="renotedUsers" :with-chart="false" :use-user-page="true"></MkUserCardMiniList>
-					<MkUserCardMiniList v-else :pagination="reactedUsers" :with-chart="false" :use-user-page="true"></MkUserCardMiniList>
+					<TmsUserCardMiniList v-if="tab === RENOTE_TAB" :pagination="renotedUsers" :with-chart="false" :use-user-page="true"/>
+					<TmsUserCardMiniList v-else :pagination="reactedUsers" :with-chart="false" :use-user-page="true"/>
 				</div>
 			</template>
 		</div>
@@ -44,7 +44,7 @@ import { onMounted, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
-import MkUserCardMiniList from '@/components/MkUserCardMiniList.vue';
+import TmsUserCardMiniList from '@/components/TmsUserCardMiniList.vue';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 
diff --git a/packages/client/src/components/MkUserCardMiniList.vue b/packages/client/src/components/TmsUserCardMiniList.vue
similarity index 70%
rename from packages/client/src/components/MkUserCardMiniList.vue
rename to packages/client/src/components/TmsUserCardMiniList.vue
index 431b91f812f2..98f460606a82 100644
--- a/packages/client/src/components/MkUserCardMiniList.vue
+++ b/packages/client/src/components/TmsUserCardMiniList.vue
@@ -8,12 +8,12 @@
 	</template>
 
 	<template #default="{ users }">
-		<div class="mk-user-card-mini-list" :class="{ links: props.useUserPage }">
+		<div :class="$style.cardList">
 			<template v-for="user in users" :key="user.id">
-				<MkA v-if="props.useUserPage" :to="userPage(user)">
-					<MkUserCardMini class="user" :user="user" :with-chart="props.withChart"/>
+				<MkA v-if="useUserPage" :to="userPage(user)">
+					<MkUserCardMini :user="user" :with-chart="withChart"/>
 				</MkA>
-				<MkUserCardMini v-else class="user" :user="user" :with-chart="props.withChart"/>
+				<MkUserCardMini v-else :user="user" :with-chart="withChart"/>
 			</template>
 		</div>
 	</template>
@@ -27,7 +27,7 @@ import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
 	pagination: Paging;
 	withChart: boolean;
 	useUserPage: boolean;
@@ -39,5 +39,11 @@ const props = withDefaults(defineProps<{
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
+.cardList {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: 100%;
+	gap: var(--margin);
+}
 </style>

From 8d1edfc2f8bb258f5cd3ef69ef4c8b2d420c519e Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Thu, 11 May 2023 13:08:01 +0900
Subject: [PATCH 147/147] tweak style TmsClipPreview

---
 packages/client/src/components/TmsClipPreview.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/TmsClipPreview.vue b/packages/client/src/components/TmsClipPreview.vue
index d031f102f6e5..66b2c70b3e1f 100644
--- a/packages/client/src/components/TmsClipPreview.vue
+++ b/packages/client/src/components/TmsClipPreview.vue
@@ -29,11 +29,14 @@ defineProps<{
 
 <style lang="scss" module>
 .root {
-	display: block;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: 100%;
+	gap: 8px;
 	padding: 16px;
 	overflow: hidden; // fallback (overflow: clip)
 	overflow: clip;
-	color: inherit !important;
+	color: inherit;
 
 	&:hover {
 		text-decoration: none;
@@ -49,15 +52,15 @@ defineProps<{
 }
 
 .clipDescription {
-	margin-top: 8px;
 	font-size: 0.8em;
 }
 
 .clipUser {
-	margin-top: 8px;
 	display: grid;
 	grid-template-columns: 16px 1fr;
 	grid-template-rows: 16px;
+	align-items: center;
+	gap: 4px;
 }
 
 .clipUserIcon {
@@ -68,6 +71,5 @@ defineProps<{
 
 .clipUserName {
 	font-size: 0.8em;
-	line-height: 0.8em;
 }
 </style>