diff --git a/package.json b/package.json
index b34a6c1da5..abeb480344 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2024.5.0-mattyatea3",
+	"version": "2024.5.0-mattyatea4",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
diff --git a/packages/backend/src/core/NoteCreateService.ts b/packages/backend/src/core/NoteCreateService.ts
index 987fe78f44..4ab5c23382 100644
--- a/packages/backend/src/core/NoteCreateService.ts
+++ b/packages/backend/src/core/NoteCreateService.ts
@@ -1010,6 +1010,9 @@ export class NoteCreateService implements OnApplicationShutdown {
 						this.fanoutTimelineService.push('localTimelineWithFiles', note.id, 500, r);
 					}
 				}
+				if (note.visibility === 'public' && note.userHost !== null) {
+					this.fanoutTimelineService.push(`remoteLocalTimeline:${note.userHost}`, note.id, 1000, r);
+				}
 			}
 
 			if (Math.random() < 0.1) {
diff --git a/packages/backend/src/server/api/endpoints/notes/any-local-timeline.ts b/packages/backend/src/server/api/endpoints/notes/any-local-timeline.ts
index 3619661be8..077252da43 100644
--- a/packages/backend/src/server/api/endpoints/notes/any-local-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/any-local-timeline.ts
@@ -4,7 +4,7 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
-import { In } from 'typeorm';
+import { Brackets, In } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { IdService } from '@/core/IdService.js';
 import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
@@ -24,6 +24,8 @@ import { UtilityService } from '@/core/UtilityService.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { MetaService } from '@/core/MetaService.js';
 import { ApPersonService } from '@/core/activitypub/models/ApPersonService.js';
+import { FanoutTimelineEndpointService } from '@/core/FanoutTimelineEndpointService.js';
+import { QueryService } from '@/core/QueryService.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -80,168 +82,81 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
+		private idService: IdService,
+		private fanoutTimelineEndpointService: FanoutTimelineEndpointService,
+		private queryService: QueryService,
 		@Inject(DI.notesRepository)
 		private notesRepository: NotesRepository,
-		private idService: IdService,
-		private federatedInstanceService: FederatedInstanceService,
-		private httpRequestService: HttpRequestService,
-		private utilityService: UtilityService,
-		private userEntityService: UserEntityService,
-		private noteEntityService: NoteEntityService,
-		private metaService: MetaService,
-		private apResolverService: ApResolverService,
-		private apDbResolverService: ApDbResolverService,
-		private apPersonService: ApPersonService,
-		private apNoteService: ApNoteService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const untilId = ps.untilId ?? (ps.untilDate ? this.idService.gen(ps.untilDate!) : null);
 			const sinceId = ps.sinceId ?? (ps.sinceDate ? this.idService.gen(ps.sinceDate!) : null);
-			if (ps.host === undefined) throw new ApiError(meta.errors.hostIsNull);
-			if (ps.remoteToken === undefined) throw new ApiError(meta.errors.remoteTokenIsNull);
-			const i = await this.federatedInstanceService.fetch(ps.host);
-			const noteIds = [];
 
-			if (i.softwareName === 'misskey') {
-				const remoteTimeline: string[] = await (await this.httpRequestService.send('https://' + ps.host + '/api/notes/local-timeline', {
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify({
-						i: ps.remoteToken,
-						withFiles: ps.withFiles,
-						withRenotes: ps.withRenotes,
-						withReplies: ps.withReplies,
-						limit: 30,
-					}),
-				})).json() as string[];
+			if (ps.withReplies && ps.withFiles) throw new ApiError(meta.errors.bothWithRepliesAndWithFiles);
 
-				if (remoteTimeline.length > 0) {
-					for (const note of remoteTimeline) {
-						const uri = `https://${ps.host}/notes/${note.id}`;
-						const note_ = await this.fetchAny(uri, me);
-						if (note_ == null) continue;
-						noteIds.push(note_.id);
-					}
-				}
+			const timeline = await this.fanoutTimelineEndpointService.timeline({
+				untilId,
+				sinceId,
+				limit: ps.limit,
+				allowPartial: ps.allowPartial,
+				me,
+				useDbFallback: true,
+				redisTimelines: [`remoteLocalTimeline:${ps.host}`],
+				alwaysIncludeMyNotes: true,
+				excludePureRenotes: !ps.withRenotes,
+				dbFallback: async (untilId, sinceId, limit) => await this.getFromDb({
+					untilId,
+					sinceId,
+					limit,
+					withFiles: ps.withFiles,
+					withReplies: ps.withReplies,
+					host: ps.host,
+				}, me),
+			});
 
-				let notes = await this.notesRepository.findBy({ id: In(noteIds) });
-				let packedNote: any[] = await this.noteEntityService.packMany(notes, me, { detail: true });
-				if (untilId) {
-					let lastRemoteId;
-					const lastUri = packedNote[packedNote.length - 1].uri;
-					lastRemoteId = lastUri.split('/')[lastUri.split('/').length - 1];
-					do {
-						const remoteTimeline: string[] = await (await this.httpRequestService.send('https://' + ps.host + '/api/notes/local-timeline', {
-							method: 'POST',
-							headers: {
-								'Content-Type': 'application/json',
-							},
-							body: JSON.stringify({
-								i: ps.remoteToken,
-								withFiles: ps.withFiles,
-								withRenotes: ps.withRenotes,
-								withReplies: ps.withReplies,
-								untilId: lastRemoteId,
-								limit: 30,
-							}),
-						})).json() as string[];
+			return timeline;
+		},
 
-						if (remoteTimeline.length > 0) {
-							for (const note of remoteTimeline) {
-								const uri = `https://${ps.host}/notes/${note.id}`;
-								const note_ = await this.fetchAny(uri, me);
-								if (note_ == null) continue;
-								//noteIds.push(note_.id);
-								lastRemoteId = note_.id;
-								if (lastRemoteId === ps.untilId) {
-									break;
-								}
-							}
-						}
-					} while (lastRemoteId !== ps.untilId);
-					const remoteTimeline: string[] = await (await this.httpRequestService.send('https://' + ps.host + '/api/notes/local-timeline', {
-						method: 'POST',
-						headers: {
-							'Content-Type': 'application/json',
-						},
-						body: JSON.stringify({
-							i: ps.remoteToken,
-							withFiles: ps.withFiles,
-							withRenotes: ps.withRenotes,
-							withReplies: ps.withReplies,
-							untilId: lastRemoteId,
-							limit: 30,
-						}),
-					})).json() as string[];
-
-					if (remoteTimeline.length > 0) {
-						for (const note of remoteTimeline) {
-							const uri = `https://${ps.host}/notes/${note.id}`;
-							const note_ = await this.fetchAny(uri, me);
-							if (note_ == null) continue;
-							noteIds.push(note_.id);
-						}
-					}
-				}
-
-				notes = await this.notesRepository.findBy({ id: In(noteIds) });
-				packedNote = await this.noteEntityService.packMany(notes, me, { detail: true });
-				return packedNote.reverse();
-			}
-		});
-	}
-	@bindThis
-	private async fetchAny(uri: string, me: MiLocalUser | null | undefined) {
-		// ブロックしてたら中断
-		const fetchedMeta = await this.metaService.fetch();
-		if (this.utilityService.isBlockedHost(fetchedMeta.blockedHosts, this.utilityService.extractDbHost(uri))) return null;
-
-		let local = await this.mergePack(me, ...await Promise.all([
-			this.apDbResolverService.getUserFromApId(uri),
-			this.apDbResolverService.getNoteFromApId(uri),
-		]));
-		if (local != null) return local;
-
-		// リモートから一旦オブジェクトフェッチ
-		let object;
-		try {
-			const resolver = this.apResolverService.createResolver();
-			object = await resolver.resolve(uri) as any;
-		} catch (e) {
-			return null;
-		}
-		if (!object) return null;
-		// /@user のような正規id以外で取得できるURIが指定されていた場合、ここで初めて正規URIが確定する
-		// これはDBに存在する可能性があるため再度DB検索
-		if (uri !== object.id) {
-			local = await this.mergePack(me, ...await Promise.all([
-				this.apDbResolverService.getUserFromApId(object.id),
-				this.apDbResolverService.getNoteFromApId(object.id),
-			]));
-			if (local != null) return local;
-		}
-
-		return await this.mergePack(
-			me,
-			isActor(object) ? await this.apPersonService.createPerson(getApId(object)) : null,
-			isPost(object) ? await this.apNoteService.createNote(getApId(object), undefined, true) : null,
 		);
 	}
+	private async getFromDb(ps: {
+		sinceId: string | null,
+		untilId: string | null,
+		limit: number,
+		withFiles: boolean,
+		withReplies: boolean,
+		host: string,
+	}, me: MiLocalUser | null) {
+		const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'),
+			ps.sinceId, ps.untilId)
+			.andWhere(`(note.visibility = \'public\') AND (note.userHost = \'${ps.host}\') AND (note.channelId IS NULL)`)
+			.innerJoinAndSelect('note.user', 'user')
+			.leftJoinAndSelect('note.reply', 'reply')
+			.leftJoinAndSelect('note.renote', 'renote')
+			.leftJoinAndSelect('reply.user', 'replyUser')
+			.leftJoinAndSelect('renote.user', 'renoteUser');
 
-	@bindThis
-	private async mergePack(me: MiLocalUser | null | undefined, user: MiUser | null | undefined, note: MiNote | null | undefined) {
-		if (note != null) {
-			try {
-				const object = await this.noteEntityService.pack(note, me, { detail: true });
+		this.queryService.generateVisibilityQuery(query, me);
+		if (me) this.queryService.generateMutedUserQuery(query, me);
+		if (me) this.queryService.generateBlockedUserQuery(query, me);
+		if (me) this.queryService.generateMutedUserRenotesQueryForNotes(query, me);
 
-				return object;
-			} catch (e) {
-				return null;
-			}
+		if (ps.withFiles) {
+			query.andWhere('note.fileIds != \'{}\'');
 		}
 
-		return null;
+		if (!ps.withReplies) {
+			query.andWhere(new Brackets(qb => {
+				qb
+					.where('note.replyId IS NULL') // 返信ではない
+					.orWhere(new Brackets(qb => {
+						qb // 返信だけど投稿者自身への返信
+							.where('note.replyId IS NOT NULL')
+							.andWhere('note.replyUserId = note.userId');
+					}));
+			}));
+		}
+
+		return await query.limit(ps.limit).getMany();
 	}
 }
diff --git a/packages/cherrypick-js/src/entities.ts b/packages/cherrypick-js/src/entities.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts
index 4118a6f81c..7050a8fec8 100644
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@@ -28,6 +28,7 @@ export async function mainBoot() {
 		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
 		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
 		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+		ui === 'twilike' ? defineAsyncComponent(() => import('@/ui/twilike.vue')) :
 		defineAsyncComponent(() => import('@/ui/universal.vue')),
 	));
 
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 4ba1ced710..f33126bfb6 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -165,14 +165,12 @@ function updatePaginationQuery() {
 		channel: { channelId: props.channel },
 		role: { roleId: props.role },
 	};
-
-	if (props.src.startsWith('custom-timeline')) {
+	if (props.src.startsWith('remoteLocalTimeline')) {
 		paginationQuery = {
 			endpoint: 'notes/any-local-timeline',
 			limit: 10,
 			params: {
-				host: defaultStore.state[`remoteLocalTimelineDomain${props.src.split('-')[2]}`],
-				remoteToken: defaultStore.state[`remoteLocalTimelineToken${props.src.split('-')[2]}`],
+				host: props.list,
 			},
 		};
 	} else {
diff --git a/packages/frontend/src/components/XNote.vue b/packages/frontend/src/components/XNote.vue
new file mode 100644
index 0000000000..16f50870f9
--- /dev/null
+++ b/packages/frontend/src/components/XNote.vue
@@ -0,0 +1,1075 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	v-if="!hardMuted && muted === false"
+	v-show="!isDeleted"
+	ref="rootEl"
+	v-hotkey="keymap"
+	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
+	:tabindex="!isDeleted ? '-1' : undefined"
+>
+	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
+	<div v-if="isRenote" :class="$style.renote">
+		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
+		<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
+		<i class="ti ti-repeat" style="margin-right: 4px;"></i>
+		<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
+			<template #user>
+				<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
+					<MkUserName :user="note.user"/>
+				</MkA>
+			</template>
+		</I18n>
+		<div :class="$style.renoteInfo">
+			<button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()">
+				<i class="ti ti-dots" :class="$style.renoteMenu"></i>
+				<MkTime :time="note.createdAt"/>
+			</button>
+			<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
+				<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
+				<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
+				<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+			</span>
+			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
+			<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
+		</div>
+	</div>
+	<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
+		<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
+		<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
+	</div>
+	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
+		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
+		<div :class="$style.main">
+
+			<XNoteHeader :note="appearNote" :mini="true"/>
+
+			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
+			<div style="container-type: inline-size;">
+				<p v-if="appearNote.cw != null" :class="$style.cw">
+					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
+					<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;"/>
+				</p>
+				<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
+					<div :class="$style.text">
+						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+						<Mfm
+							v-if="appearNote.text"
+							:parsedNodes="parsed"
+							:text="appearNote.text"
+							:author="appearNote.user"
+							:nyaize="'respect'"
+							:emojiUrls="appearNote.emojis"
+							:enableEmojiMenu="true"
+							:enableEmojiMenuReaction="true"
+						/>
+						<div v-if="translating || translation" :class="$style.translation">
+							<MkLoading v-if="translating" mini/>
+							<div v-else-if="translation">
+								<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+								<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
+							</div>
+						</div>
+					</div>
+					<div v-if="appearNote.files && appearNote.files.length > 0">
+						<MkMediaList :mediaList="appearNote.files"/>
+					</div>
+					<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/>
+					<div v-if="isEnabledUrlPreview">
+						<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
+					</div>
+					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
+					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
+						<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
+					</button>
+					<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
+						<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
+					</button>
+				</div>
+				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
+			</div>
+			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
+				<template #more>
+					<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
+				</template>
+			</MkReactionsViewer>
+			<footer :class="$style.footer">
+				<div :class="$style.footerLeft">
+					<button :class="$style.footerButton" class="_button" @click="reply()">
+						<i class="ti ti-arrow-back-up"></i>
+						<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
+					</button>
+					<button
+						v-if="canRenote"
+						ref="renoteButton"
+						:class="$style.footerButton"
+						class="_button"
+						@mousedown="renote()"
+					>
+						<i class="ti ti-repeat"></i>
+						<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.renoteCount) }}</p>
+					</button>
+					<button v-else :class="$style.footerButton" class="_button" disabled>
+						<i class="ti ti-ban"></i>
+					</button>
+					<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
+						<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i>
+						<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
+						<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
+						<i v-else class="ti ti-plus"></i>
+						<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
+					</button>
+				</div>
+				<div :class="$style.footerRight">
+					<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()">
+						<i class="ti ti-paperclip"></i>
+					</button>
+
+					<button  :class="$style.footerButton" class="_button" @mousedown="toggleFavorite()">
+						<i v-if="!isFavorite" class="ti ti-star"></i>
+						<i v-if="isFavorite" class="ti ti-star-off"></i>
+					</button>
+				</div>
+			</footer>
+		</div>
+	</article>
+</div>
+<div v-else-if="!hardMuted" :class="$style.muted" @click="muted = false">
+	<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
+		<template #name>
+			<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
+				<MkUserName :user="appearNote.user"/>
+			</MkA>
+		</template>
+	</I18n>
+	<I18n v-else :src="i18n.ts.userSaysSomething" tag="small">
+		<template #name>
+			<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
+				<MkUserName :user="appearNote.user"/>
+			</MkA>
+		</template>
+	</I18n>
+</div>
+<div v-else>
+	<!--
+		MkDateSeparatedList uses TransitionGroup which requires single element in the child elements
+		so MkNote create empty div instead of no elements
+	-->
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onMounted, ref, shallowRef, Ref, watch, provide } from 'vue';
+import * as mfm from 'mfm-js';
+import * as Misskey from 'misskey-js';
+import MkNoteSub from '@/components/MkNoteSub.vue';
+import XNoteHeader from '@/components/XNoteHeader.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
+import MkReactionsViewerDetails from '@/components/MkReactionsViewer.details.vue';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import MkPoll from '@/components/MkPoll.vue';
+import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import { pleaseLogin } from '@/scripts/please-login.js';
+import { focusPrev, focusNext } from '@/scripts/focus.js';
+import { checkWordMute } from '@/scripts/check-word-mute.js';
+import { userPage } from '@/filters/user.js';
+import number from '@/filters/number.js';
+import * as os from '@/os.js';
+import * as sound from '@/scripts/sound.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
+import { defaultStore, noteViewInterruptors } from '@/store.js';
+import { reactionPicker } from '@/scripts/reaction-picker.js';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
+import { $i } from '@/account.js';
+import { i18n } from '@/i18n.js';
+import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/scripts/get-note-menu.js';
+import { useNoteCapture } from '@/scripts/use-note-capture.js';
+import { deepClone } from '@/scripts/clone.js';
+import { useTooltip } from '@/scripts/use-tooltip.js';
+import { claimAchievement } from '@/scripts/achievements.js';
+import { getNoteSummary } from '@/scripts/get-note-summary.js';
+import { MenuItem } from '@/types/menu.js';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
+import { shouldCollapsed } from '@/scripts/collapsed.js';
+import { isEnabledUrlPreview } from '@/instance.js';
+
+const props = withDefaults(defineProps<{
+	note: Misskey.entities.Note;
+	pinned?: boolean;
+	mock?: boolean;
+	withHardMute?: boolean;
+}>(), {
+	mock: false,
+});
+
+provide('mock', props.mock);
+
+const emit = defineEmits<{
+	(ev: 'reaction', emoji: string): void;
+	(ev: 'removeReaction', emoji: string): void;
+}>();
+
+const inTimeline = inject<boolean>('inTimeline', false);
+const inChannel = inject('inChannel', null);
+const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
+
+const note = ref(deepClone(props.note));
+
+// plugin
+if (noteViewInterruptors.length > 0) {
+	onMounted(async () => {
+		let result: Misskey.entities.Note | null = deepClone(note.value);
+		for (const interruptor of noteViewInterruptors) {
+			try {
+				result = await interruptor.handler(result!) as Misskey.entities.Note | null;
+				if (result === null) {
+					isDeleted.value = true;
+					return;
+				}
+			} catch (err) {
+				console.error(err);
+			}
+		}
+		note.value = result as Misskey.entities.Note;
+	});
+}
+
+const isRenote = (
+	note.value.renote != null &&
+	note.value.reply == null &&
+	note.value.text == null &&
+	note.value.cw == null &&
+	note.value.fileIds && note.value.fileIds.length === 0 &&
+	note.value.poll == null
+);
+
+const rootEl = shallowRef<HTMLElement>();
+const renoteButton = shallowRef<HTMLElement>();
+const renoteTime = shallowRef<HTMLElement>();
+const reactButton = shallowRef<HTMLElement>();
+const clipButton = shallowRef<HTMLElement>();
+const appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value);
+const isMyRenote = $i && ($i.id === note.value.userId);
+const showContent = ref(false);
+const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
+const urls = computed(() => parsed.value ? extractUrlFromMfm(parsed.value).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null);
+const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
+const collapsed = ref(appearNote.value.cw == null && isLong);
+const isDeleted = ref(false);
+const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
+const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords, true));
+const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
+const translating = ref(false);
+const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
+const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
+const isFavorite = ref(false);
+let statePromise;
+if ($i) {
+	statePromise = misskeyApi('notes/state', {
+		noteId: props.note.id,
+	});
+	statePromise.then((state) => {
+		isFavorite.value = state.isFavorited;
+	});
+
+}
+const renoteCollapsed = ref(
+	defaultStore.state.collapseRenotes && isRenote && (
+		($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
+		(appearNote.value.myReaction != null)
+	),
+);
+
+/* Overload FunctionにLintが対応していないのでコメントアウト
+function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
+function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): boolean | 'sensitiveMute';
+*/
+function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly = false): boolean | 'sensitiveMute' {
+	if (mutedWords == null) return false;
+
+	if (checkWordMute(noteToCheck, $i, mutedWords)) return true;
+	if (noteToCheck.reply && checkWordMute(noteToCheck.reply, $i, mutedWords)) return true;
+	if (noteToCheck.renote && checkWordMute(noteToCheck.renote, $i, mutedWords)) return true;
+
+	if (checkOnly) return false;
+
+	if (inTimeline && !defaultStore.state.tl.filter.withSensitive && noteToCheck.files?.some((v) => v.isSensitive)) return 'sensitiveMute';
+	return false;
+}
+
+const keymap = {
+	'r': () => reply(true),
+	'e|a|plus': () => react(true),
+	'q': () => renote(true),
+	'up|k|shift+tab': focusBefore,
+	'down|j|tab': focusAfter,
+	'esc': blur,
+	's': () => showContent.value !== showContent.value,
+};
+
+function toggleFavorite(): void {
+	if ($i == null) {
+		pleaseLogin();
+		return;
+	}
+	claimAchievement('noteFavorited1');
+	os.apiWithDialog(!isFavorite.value ? 'notes/favorites/create' : 'notes/favorites/delete', {
+		noteId: props.note.id,
+	});
+	isFavorite.value = !isFavorite.value;
+}
+provide('react', (reaction: string) => {
+	misskeyApi('notes/reactions/create', {
+		noteId: appearNote.value.id,
+		reaction: reaction,
+	});
+});
+
+if (props.mock) {
+	watch(() => props.note, (to) => {
+		note.value = deepClone(to);
+	}, { deep: true });
+} else {
+	useNoteCapture({
+		rootEl: rootEl,
+		note: appearNote,
+		pureNote: note,
+		isDeletedRef: isDeleted,
+	});
+}
+
+if (!props.mock) {
+	useTooltip(renoteButton, async (showing) => {
+		const renotes = await misskeyApi('notes/renotes', {
+			noteId: appearNote.value.id,
+			limit: 11,
+		});
+
+		const users = renotes.map(x => x.user);
+
+		if (users.length < 1) return;
+
+		os.popup(MkUsersTooltip, {
+			showing,
+			users,
+			count: appearNote.value.renoteCount,
+			targetElement: renoteButton.value,
+		}, {}, 'closed');
+	});
+
+	if (appearNote.value.reactionAcceptance === 'likeOnly') {
+		useTooltip(reactButton, async (showing) => {
+			const reactions = await misskeyApiGet('notes/reactions', {
+				noteId: appearNote.value.id,
+				limit: 10,
+				_cacheKey_: appearNote.value.reactionCount,
+			});
+
+			const users = reactions.map(x => x.user);
+
+			if (users.length < 1) return;
+
+			os.popup(MkReactionsViewerDetails, {
+				showing,
+				reaction: '❤️',
+				users,
+				count: appearNote.value.reactionCount,
+				targetElement: reactButton.value!,
+			}, {}, 'closed');
+		});
+	}
+}
+
+function renote(viaKeyboard = false) {
+	pleaseLogin();
+	showMovedDialog();
+
+	const { menu } = getRenoteMenu({ note: note.value, renoteButton, mock: props.mock });
+	os.popupMenu(menu, renoteButton.value, {
+		viaKeyboard,
+	});
+}
+
+function reply(viaKeyboard = false): void {
+	pleaseLogin();
+	if (props.mock) {
+		return;
+	}
+	os.post({
+		reply: appearNote.value,
+		channel: appearNote.value.channel,
+		animation: !viaKeyboard,
+	}).then(() => {
+		focus();
+	});
+}
+
+function react(viaKeyboard = false): void {
+	pleaseLogin();
+	showMovedDialog();
+	if (appearNote.value.reactionAcceptance === 'likeOnly') {
+		sound.playMisskeySfx('reaction');
+
+		if (props.mock) {
+			return;
+		}
+
+		misskeyApi('notes/reactions/create', {
+			noteId: appearNote.value.id,
+			reaction: '❤️',
+		});
+		const el = reactButton.value;
+		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');
+		}
+	} else {
+		blur();
+		reactionPicker.show(reactButton.value ?? null, note.value, reaction => {
+			sound.playMisskeySfx('reaction');
+
+			if (props.mock) {
+				emit('reaction', reaction);
+				return;
+			}
+
+			misskeyApi('notes/reactions/create', {
+				noteId: appearNote.value.id,
+				reaction: reaction,
+			});
+			if (appearNote.value.text && appearNote.value.text.length > 100 && (Date.now() - new Date(appearNote.value.createdAt).getTime() < 1000 * 3)) {
+				claimAchievement('reactWithoutRead');
+			}
+		}, () => {
+			focus();
+		});
+	}
+}
+
+function undoReact(targetNote: Misskey.entities.Note): void {
+	const oldReaction = targetNote.myReaction;
+	if (!oldReaction) return;
+
+	if (props.mock) {
+		emit('removeReaction', oldReaction);
+		return;
+	}
+
+	misskeyApi('notes/reactions/delete', {
+		noteId: targetNote.id,
+	});
+}
+
+function toggleReact() {
+	if (appearNote.value.myReaction == null) {
+		react();
+	} else {
+		undoReact(appearNote.value);
+	}
+}
+
+function onContextmenu(ev: MouseEvent): void {
+	if (props.mock) {
+		return;
+	}
+
+	const isLink = (el: HTMLElement): boolean => {
+		if (el.tagName === 'A') return true;
+		// 再生速度の選択などのために、Audio要素のコンテキストメニューはブラウザデフォルトとする。
+		if (el.tagName === 'AUDIO') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+		return false;
+	};
+
+	if (ev.target && isLink(ev.target as HTMLElement)) return;
+	if (window.getSelection()?.toString() !== '') return;
+
+	if (defaultStore.state.useReactionPickerForContextMenu) {
+		ev.preventDefault();
+		react();
+	} else {
+		const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value });
+		os.contextMenu(menu, ev).then(focus).finally(cleanup);
+	}
+}
+
+function showMenu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
+	const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value });
+	os.popupMenu(menu, menuButton.value, {
+		viaKeyboard,
+	}).then(focus).finally(cleanup);
+}
+
+async function clip() {
+	if (props.mock) {
+		return;
+	}
+
+	os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
+}
+
+function showRenoteMenu(viaKeyboard = false): void {
+	if (props.mock) {
+		return;
+	}
+
+	function getUnrenote(): MenuItem {
+		return {
+			text: i18n.ts.unrenote,
+			icon: 'ti ti-trash',
+			danger: true,
+			action: () => {
+				misskeyApi('notes/delete', {
+					noteId: note.value.id,
+				});
+				isDeleted.value = true;
+			},
+		};
+	}
+
+	if (isMyRenote) {
+		pleaseLogin();
+		os.popupMenu([
+			getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
+			{ type: 'divider' },
+			getUnrenote(),
+		], renoteTime.value, {
+			viaKeyboard: viaKeyboard,
+		});
+	} else {
+		os.popupMenu([
+			getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
+			{ type: 'divider' },
+			getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote),
+			($i?.isModerator || $i?.isAdmin) ? getUnrenote() : undefined,
+		], renoteTime.value, {
+			viaKeyboard: viaKeyboard,
+		});
+	}
+}
+
+function focus() {
+	rootEl.value?.focus();
+}
+
+function blur() {
+	rootEl.value?.blur();
+}
+
+function focusBefore() {
+	focusPrev(rootEl.value ?? null);
+}
+
+function focusAfter() {
+	focusNext(rootEl.value ?? null);
+}
+
+function readPromo() {
+	misskeyApi('promo/read', {
+		noteId: appearNote.value.id,
+	});
+	isDeleted.value = true;
+}
+
+function emitUpdReaction(emoji: string, delta: number) {
+	if (delta < 0) {
+		emit('removeReaction', emoji);
+	} else if (delta > 0) {
+		emit('reaction', emoji);
+	}
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	transition: box-shadow 0.1s ease;
+	font-size: 1.05em;
+	overflow: clip;
+	contain: content;
+
+	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
+	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
+	// ノートがマウントされたときに自身の高さを取得し contain-intrinsic-size を設定しなおせばほぼ解決できそうだが、
+	// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
+	// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
+	//content-visibility: auto;
+  //contain-intrinsic-size: 0 128px;
+
+	&:focus-visible {
+		outline: none;
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: dashed 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
+	}
+
+	.footer {
+		display: flex;
+		font-size: 1em;
+		justify-content: flex-start;
+	}
+
+	.footer {
+		display: flex;
+		font-size: 1em;
+		justify-content: flex-start;
+		margin-left: -64px;
+	}
+
+	.footerLeft {
+		flex: 1;
+		display: grid;
+		grid-auto-flow: column;
+		grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
+		grid-auto-rows: 32px;
+	}
+
+	.footerRight {
+		flex: 0;
+		display: grid;
+		grid-auto-flow: column;
+		grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
+		grid-auto-rows: 32px;
+		direction: rtl;
+	}
+
+	&:hover > .article > .main > .footer > .footerButton {
+		opacity: 1;
+	}
+
+	&.showActionsOnlyHover {
+		.footer {
+			visibility: hidden;
+			position: absolute;
+			top: 12px;
+			right: 12px;
+			padding: 0 4px;
+			margin-bottom: 0 !important;
+			background: var(--popup);
+			border-radius: 8px;
+			box-shadow: 0px 4px 32px var(--shadow);
+		}
+
+		.footerButton {
+			font-size: 90%;
+
+			&:not(:last-child) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	&.showActionsOnlyHover:hover {
+		.footer {
+			visibility: visible;
+		}
+	}
+}
+
+.tip {
+	display: flex;
+	align-items: center;
+	padding: 16px 32px 8px 32px;
+	line-height: 24px;
+	font-size: 90%;
+	white-space: pre;
+	color: #d28a3f;
+}
+
+.tip + .article {
+	padding-top: 8px;
+}
+
+.replyTo {
+	opacity: 0.7;
+	padding-bottom: 0;
+}
+
+.renote {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 16px 32px 8px 32px;
+	line-height: 28px;
+	white-space: pre;
+	color: var(--renote);
+
+	& + .article {
+		padding-top: 8px;
+	}
+
+	> .colorBar {
+		height: calc(100% - 6px);
+	}
+}
+
+.renoteAvatar {
+	flex-shrink: 0;
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	margin: 0 8px 0 0;
+}
+
+.renoteText {
+	overflow: hidden;
+	flex-shrink: 1;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.renoteUserName {
+	font-weight: bold;
+}
+
+.renoteInfo {
+	margin-left: auto;
+	font-size: 0.9em;
+}
+
+.renoteTime {
+	flex-shrink: 0;
+	color: inherit;
+}
+
+.renoteMenu {
+	margin-right: 4px;
+}
+
+.collapsedRenoteTarget {
+	display: flex;
+	align-items: center;
+	line-height: 28px;
+	white-space: pre;
+	padding: 0 32px 18px;
+}
+
+.collapsedRenoteTargetAvatar {
+	flex-shrink: 0;
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	margin: 0 8px 0 0;
+}
+
+.collapsedRenoteTargetText {
+	overflow: hidden;
+	flex-shrink: 1;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 90%;
+	opacity: 0.7;
+	cursor: pointer;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.article {
+	position: relative;
+	display: flex;
+	padding: 16px  24px;
+}
+
+.colorBar {
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	width: 5px;
+	height: calc(100% - 16px);
+	border-radius: 999px;
+	pointer-events: none;
+}
+
+.avatar {
+	flex-shrink: 0;
+	display: block !important;
+	margin: 0 14px 0 0;
+	width: 58px;
+	height: 58px;
+	position: sticky !important;
+	top: calc(22px + var(--stickyTop, 0px));
+	left: 0;
+}
+
+.main {
+	flex: 1;
+	min-width: 0;
+}
+
+.cw {
+	cursor: default;
+	display: block;
+	margin: 0;
+	padding: 0;
+	overflow-wrap: break-word;
+}
+
+.showLess {
+	width: 100%;
+	margin-top: 14px;
+	position: sticky;
+	bottom: calc(var(--stickyBottom, 0px) + 14px);
+}
+
+.showLessLabel {
+	display: inline-block;
+	background: var(--popup);
+	padding: 6px 10px;
+	font-size: 0.8em;
+	border-radius: 999px;
+	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+}
+
+.contentCollapsed {
+	position: relative;
+	max-height: 9em;
+	overflow: clip;
+}
+
+.collapsed {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	z-index: 2;
+	width: 100%;
+	height: 64px;
+	background: linear-gradient(0deg, var(--panel), var(--X15));
+
+	&:hover > .collapsedLabel {
+		background: var(--panelHighlight);
+	}
+}
+
+.collapsedLabel {
+	display: inline-block;
+	background: var(--panel);
+	padding: 6px 10px;
+	font-size: 0.8em;
+	border-radius: 999px;
+	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+}
+
+.text {
+	overflow-wrap: break-word;
+}
+
+.replyIcon {
+	color: var(--accent);
+	margin-right: 0.5em;
+}
+
+.translation {
+	border: solid 0.5px var(--divider);
+	border-radius: var(--radius);
+	padding: 12px;
+	margin-top: 8px;
+}
+
+.urlPreview {
+	margin-top: 8px;
+}
+
+.poll {
+	font-size: 80%;
+}
+
+.quote {
+	padding: 8px 0;
+}
+
+.quoteNote {
+	padding: 16px;
+	border: dashed 1px var(--renote);
+	border-radius: 8px;
+	overflow: clip;
+}
+
+.channel {
+	opacity: 0.7;
+	font-size: 80%;
+}
+
+.footer {
+	margin-bottom: -14px;
+}
+
+.footerButton {
+	margin: 0;
+
+	opacity: 0.7;
+
+	&:hover {
+		color: var(--fgHighlighted);
+	}
+}
+
+.footerButtonCount {
+	display: inline;
+	margin: 0 0 0 8px;
+	opacity: 0.7;
+}
+
+@container (max-width: 580px) {
+	.root {
+		font-size: 0.95em;
+	}
+
+	.renote {
+		padding: 12px 26px 0 26px;
+	}
+
+	.article {
+		padding: 24px 26px;
+	}
+
+	.avatar {
+		width: 42px;
+		height: 42px;
+	}
+}
+
+@container (max-width: 500px) {
+	.root {
+		font-size: 0.9em;
+	}
+
+	.renote {
+		padding: 10px 22px 0 22px;
+	}
+
+	.article {
+		padding: 20px 22px;
+	}
+
+	.footer {
+		margin-bottom: -8px;
+	}
+}
+
+@container (max-width: 480px) {
+	.renote {
+		padding: 8px 16px 0 16px;
+	}
+
+	.tip {
+		padding: 8px 16px 0 16px;
+	}
+
+	.collapsedRenoteTarget {
+		padding: 0 16px 9px;
+		margin-top: 4px;
+	}
+
+	.article {
+		padding: 14px 16px;
+	}
+}
+
+@container (max-width: 450px) {
+	.avatar {
+		margin: 0 10px 0 0;
+		width: 46px;
+		height: 46px;
+		top: calc(14px + var(--stickyTop, 0px));
+	}
+}
+
+@container (max-width: 400px) {
+	.root:not(.showActionsOnlyHover) {
+		.footerButton {
+			&:not(:last-child) {
+				margin-right: 18px;
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.root:not(.showActionsOnlyHover) {
+		.footerButton {
+			&:not(:last-child) {
+				margin-right: 12px;
+			}
+		}
+	}
+
+	.colorBar {
+		top: 6px;
+		left: 6px;
+		width: 4px;
+		height: calc(100% - 12px);
+	}
+}
+
+@container (max-width: 300px) {
+	.avatar {
+		width: 44px;
+		height: 44px;
+	}
+
+	.root:not(.showActionsOnlyHover) {
+		.footerButton {
+			&:not(:last-child) {
+				margin-right: 8px;
+			}
+		}
+	}
+}
+
+@container (max-width: 250px) {
+	.quoteNote {
+		padding: 12px;
+	}
+}
+
+.muted {
+	padding: 8px;
+	text-align: center;
+	opacity: 0.7;
+}
+
+.reactionOmitted {
+	display: inline-block;
+	margin-left: 8px;
+	opacity: .8;
+	font-size: 95%;
+}
+</style>
diff --git a/packages/frontend/src/components/XNoteHeader.vue b/packages/frontend/src/components/XNoteHeader.vue
new file mode 100644
index 0000000000..a38604382b
--- /dev/null
+++ b/packages/frontend/src/components/XNoteHeader.vue
@@ -0,0 +1,137 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<header :class="$style.root">
+	<div v-if="mock" :class="$style.name">
+		<MkUserName :user="note.user"/>
+	</div>
+	<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
+		<MkUserName :user="note.user"/>
+	</MkA>
+	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
+	<div :class="$style.username"><MkAcct :user="note.user"/></div>
+	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
+		<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
+	</div>
+	<div v-if="mock">
+		<MkTime :time="note.createdAt" colored/>
+	</div>
+	<MkA v-else :class="$style.time" :to="notePage(note)">
+		<MkTime :time="note.createdAt" colored/>
+	</MkA>
+	<div :class="$style.info">
+		<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="showMenu()">
+			<i class="ti ti-dots"></i>
+		</button>
+		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
+			<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
+			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
+			<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+		</span>
+		<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
+		<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
+	</div>
+</header>
+</template>
+
+<script lang="ts" setup>
+import { inject, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import { i18n } from '@/i18n.js';
+import { notePage } from '@/filters/note.js';
+import { userPage } from '@/filters/user.js';
+import { getNoteMenu } from '@/scripts/get-note-menu.js';
+import * as os from '@/os.js';
+const menuButton = shallowRef<HTMLElement>();
+
+const props = defineProps<{
+	note: Misskey.entities.Note;
+}>();
+
+function showMenu(viaKeyboard = false): void {
+	if (mock) {
+		return;
+	}
+
+	const { menu, cleanup } = getNoteMenu({ note: props.note });
+	os.popupMenu(menu, menuButton.value, {
+		viaKeyboard,
+	}).then(focus).finally(cleanup);
+}
+
+const mock = inject<boolean>('mock', false);
+</script>
+
+<style lang="scss" module>
+.root {
+	display: flex;
+	align-items: baseline;
+	white-space: nowrap;
+}
+.footerButton {
+	margin: -12px 0 0;
+	opacity: 0.7;
+
+	&:hover {
+		color: var(--fgHighlighted);
+	}
+}
+.name {
+	flex-shrink: 1;
+	display: block;
+	margin: 0 .5em 0 0;
+	padding: 0;
+	overflow: hidden;
+	font-size: 1em;
+	font-weight: bold;
+	text-decoration: none;
+	text-overflow: ellipsis;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.isBot {
+	flex-shrink: 0;
+	align-self: center;
+	margin: 0 .5em 0 0;
+	padding: 1px 6px;
+	font-size: 80%;
+	border: solid 0.5px var(--divider);
+	border-radius: 3px;
+}
+
+.username {
+	flex-shrink: 9999999;
+	margin: 0 .5em 0 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: var(--fgTransparentWeak);
+}
+
+.info {
+	flex-shrink: 0;
+	margin-left: auto;
+
+}
+
+.badgeRoles {
+	margin: 0 .5em 0 0;
+}
+
+.badgeRole {
+	height: 1.3em;
+	vertical-align: -20%;
+
+	& + .badgeRole {
+		margin-left: 0.2em;
+	}
+}
+.time{
+	color: var(--fgTransparentWeak);
+}
+</style>
diff --git a/packages/frontend/src/components/XPostForm.vue b/packages/frontend/src/components/XPostForm.vue
new file mode 100644
index 0000000000..030ccf6318
--- /dev/null
+++ b/packages/frontend/src/components/XPostForm.vue
@@ -0,0 +1,1349 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	:style="!dialog ? { borderBottom: 'solid 1px var(--divider)' } : {}"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
+	@dragover.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<header v-if="!fixed" :class="$style.header">
+		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
+	</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.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></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 }]">
+		<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
+
+		<div style="display: flex;">
+			<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
+				<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
+			</button>
+
+			<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		</div>
+		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $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 v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
+	<MkPollEditor v-if="poll" v-model="poll" style="margin: 8px 32px; padding: 8px; border: solid 0.5px var(--divider); border-radius: 16px;" @destroyed="poll = null"/>
+	<div v-if="showingOptions" style="padding: 8px 16px;">
+	</div>
+
+	<footer :style="dialog ? { borderTop: 'solid 1px var(--divider)' , padding: ' 8px'} : {padding: '0 16px 16px 64px'}" :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.plugins" class="_button" :class="$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>
+			<button v-if="showAddMfmFunction" v-tooltip="i18n.ts.addMfmFunction" :class="['_button', $style.footerButton]" @click="insertMfmFunction"><i class="ti ti-palette"></i></button>
+		</div>
+		<div :class="$style.footerRight">
+			<button v-click-anime class="_button" :class="[$style.footerButton, $style.submit]" :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>
+	</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, provide, shallowRef, ref, computed } from 'vue';
+import * as mfm from 'mfm-js';
+import * as Misskey from 'misskey-js';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { toASCII } from 'punycode/';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
+import MkNotePreview from '@/components/MkNotePreview.vue';
+import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
+import MkPollEditor, { type PollEditorModelValue } from '@/components/MkPollEditor.vue';
+import { host, url } from '@/config.js';
+import { erase, unique } from '@/scripts/array.js';
+import { extractMentions } from '@/scripts/extract-mentions.js';
+import { formatTimeString } from '@/scripts/format-time-string.js';
+import { Autocomplete } from '@/scripts/autocomplete.js';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { selectFiles } from '@/scripts/select-file.js';
+import { defaultStore, notePostInterruptors, postFormActions } from '@/store.js';
+import MkInfo from '@/components/MkInfo.vue';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { signinRequired, notesCount, incNotesCount, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account.js';
+import { uploadFile } from '@/scripts/upload.js';
+import { deepClone } from '@/scripts/clone.js';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { miLocalStorage } from '@/local-storage.js';
+import { claimAchievement } from '@/scripts/achievements.js';
+import { emojiPicker } from '@/scripts/emoji-picker.js';
+import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
+
+const $i = signinRequired();
+
+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.UserDetailed;
+	initialText?: string;
+	initialCw?: string;
+	initialVisibility?: (typeof Misskey.noteVisibilities)[number];
+	initialFiles?: Misskey.entities.DriveFile[];
+	initialLocalOnly?: boolean;
+	initialVisibleUsers?: Misskey.entities.UserDetailed[];
+	initialNote?: Misskey.entities.Note;
+	instant?: boolean;
+	fixed?: boolean;
+	autofocus?: boolean;
+	freezeAfterPosted?: boolean;
+	mock?: boolean;
+	dialog?: boolean;
+}>(), {
+	initialVisibleUsers: () => [],
+	autofocus: true,
+	mock: false,
+	initialLocalOnly: undefined,
+});
+
+provide('mock', props.mock);
+
+const emit = defineEmits<{
+	(ev: 'posted'): void;
+	(ev: 'cancel'): void;
+	(ev: 'esc'): void;
+
+	// Mock用
+	(ev: 'fileChangeSensitive', fileId: string, to: boolean): void;
+}>();
+
+const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
+const cwInputEl = shallowRef<HTMLInputElement | null>(null);
+const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
+const visibilityButton = shallowRef<HTMLElement>();
+
+const posting = ref(false);
+const posted = ref(false);
+const text = ref(props.initialText ?? '');
+const files = ref(props.initialFiles ?? []);
+const poll = ref<PollEditorModelValue | null>(null);
+const useCw = ref<boolean>(!!props.initialCw);
+const showPreview = ref(defaultStore.state.showPreview);
+watch(showPreview, () => defaultStore.set('showPreview', showPreview.value));
+const showAddMfmFunction = ref(defaultStore.state.enableQuickAddMfmFunction);
+watch(showAddMfmFunction, () => defaultStore.set('enableQuickAddMfmFunction', showAddMfmFunction.value));
+const cw = ref<string | null>(props.initialCw ?? null);
+const localOnly = ref(props.initialLocalOnly ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly));
+const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility));
+const visibleUsers = ref<Misskey.entities.UserDetailed[]>([]);
+if (props.initialVisibleUsers) {
+	props.initialVisibleUsers.forEach(u => pushVisibleUser(u));
+}
+const reactionAcceptance = ref(defaultStore.state.reactionAcceptance);
+const autocomplete = ref(null);
+const draghover = ref(false);
+const quoteId = ref<string | null>(null);
+const hasNotSpecifiedMentions = ref(false);
+const recentHashtags = ref(JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]'));
+const imeText = ref('');
+const showingOptions = ref(false);
+const textAreaReadOnly = ref(false);
+
+const draftKey = computed((): string => {
+	let key = props.channel ? `channel:${props.channel.id}` : '';
+
+	if (props.renote) {
+		key += `renote:${props.renote.id}`;
+	} else if (props.reply) {
+		key += `reply:${props.reply.id}`;
+	} else {
+		key += `note:${$i.id}`;
+	}
+
+	return key;
+});
+
+const placeholder = computed((): string => {
+	if (props.renote) {
+		return i18n.ts._postForm.quotePlaceholder;
+	} else if (props.reply) {
+		return i18n.ts._postForm.replyPlaceholder;
+	} else if (props.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 props.renote
+		? i18n.ts.quote
+		: props.reply
+			? i18n.ts.reply
+			: i18n.ts.note;
+});
+
+const textLength = computed((): number => {
+	return (text.value + imeText.value).trim().length;
+});
+
+const maxTextLength = computed((): number => {
+	return instance ? instance.maxNoteTextLength : 1000;
+});
+
+const canPost = computed((): boolean => {
+	return !props.mock && !posting.value && !posted.value &&
+		(
+			1 <= textLength.value ||
+			1 <= files.value.length ||
+			poll.value != null ||
+			props.renote != null ||
+			(props.reply != null && quoteId.value != null)
+		) &&
+		(textLength.value <= maxTextLength.value) &&
+		(!poll.value || poll.value.choices.length >= 2);
+});
+
+const withHashtags = computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
+const hashtags = computed(defaultStore.makeGetterSetter('postFormHashtags'));
+
+watch(text, () => {
+	checkMissingMention();
+}, { immediate: true });
+
+watch(visibility, () => {
+	checkMissingMention();
+}, { immediate: true });
+
+watch(visibleUsers, () => {
+	checkMissingMention();
+}, {
+	deep: true,
+});
+
+if (props.mention) {
+	text.value = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
+	text.value += ' ';
+}
+
+if (props.reply && (props.reply.user.username !== $i.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
+	text.value = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
+}
+
+if (props.reply && props.reply.text != null) {
+	const ast = mfm.parse(props.reply.text);
+	const otherHost = props.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.value.includes(`${mention} `)) continue;
+
+		text.value += `${mention} `;
+	}
+}
+
+if ($i.isSilenced && visibility.value === 'public') {
+	visibility.value = 'home';
+}
+
+if (props.channel) {
+	visibility.value = 'public';
+	localOnly.value = true; // TODO: チャンネルが連合するようになった折には消す
+}
+
+// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
+if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
+	if (props.reply.visibility === 'home' && visibility.value === 'followers') {
+		visibility.value = 'followers';
+	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility.value === 'specified') {
+		visibility.value = 'specified';
+	} else {
+		visibility.value = props.reply.visibility;
+	}
+
+	if (visibility.value === 'specified') {
+		if (props.reply.visibleUserIds) {
+			misskeyApi('users/show', {
+				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply?.userId),
+			}).then(users => {
+				users.forEach(u => pushVisibleUser(u));
+			});
+		}
+
+		if (props.reply.userId !== $i.id) {
+			misskeyApi('users/show', { userId: props.reply.userId }).then(user => {
+				pushVisibleUser(user);
+			});
+		}
+	}
+}
+
+if (props.specified) {
+	visibility.value = 'specified';
+	pushVisibleUser(props.specified);
+}
+
+// keep cw when reply
+if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
+	useCw.value = true;
+	cw.value = props.reply.cw;
+}
+
+function watchForDraft() {
+	watch(text, () => saveDraft());
+	watch(useCw, () => saveDraft());
+	watch(cw, () => saveDraft());
+	watch(poll, () => saveDraft());
+	watch(files, () => saveDraft(), { deep: true });
+	watch(visibility, () => saveDraft());
+	watch(localOnly, () => saveDraft());
+}
+
+function checkMissingMention() {
+	if (visibility.value === 'specified') {
+		const ast = mfm.parse(text.value);
+
+		for (const x of extractMentions(ast)) {
+			if (!visibleUsers.value.some(u => (u.username === x.username) && (u.host === x.host))) {
+				hasNotSpecifiedMentions.value = true;
+				return;
+			}
+		}
+	}
+	hasNotSpecifiedMentions.value = false;
+}
+
+function addMissingMention() {
+	const ast = mfm.parse(text.value);
+
+	for (const x of extractMentions(ast)) {
+		if (!visibleUsers.value.some(u => (u.username === x.username) && (u.host === x.host))) {
+			misskeyApi('users/show', { username: x.username, host: x.host }).then(user => {
+				pushVisibleUser(user);
+			});
+		}
+	}
+}
+
+function togglePoll() {
+	if (poll.value) {
+		poll.value = null;
+	} else {
+		poll.value = {
+			choices: ['', ''],
+			multiple: false,
+			expiresAt: null,
+			expiredAfter: null,
+		};
+	}
+}
+
+function addTag(tag: string) {
+	insertTextAtCursor(textareaEl.value, ` #${tag} `);
+}
+
+function focus() {
+	if (textareaEl.value) {
+		textareaEl.value.focus();
+		textareaEl.value.setSelectionRange(textareaEl.value.value.length, textareaEl.value.value.length);
+	}
+}
+
+function chooseFileFrom(ev) {
+	if (props.mock) return;
+
+	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
+		for (const file of files_) {
+			files.value.push(file);
+		}
+	});
+}
+
+function detachFile(id) {
+	files.value = files.value.filter(x => x.id !== id);
+}
+
+function updateFileSensitive(file, sensitive) {
+	if (props.mock) {
+		emit('fileChangeSensitive', file.id, sensitive);
+	}
+	files.value[files.value.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+}
+
+function updateFileName(file, name) {
+	files.value[files.value.findIndex(x => x.id === file.id)].name = name;
+}
+
+function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void {
+	files.value[files.value.findIndex(x => x.id === file.id)] = newFile;
+}
+
+function upload(file: File, name?: string): void {
+	if (props.mock) return;
+
+	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+		files.value.push(res);
+	});
+}
+
+function setVisibility() {
+	if (props.channel) {
+		visibility.value = 'public';
+		localOnly.value = true; // TODO: チャンネルが連合するようになった折には消す
+		return;
+	}
+
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+		currentVisibility: visibility.value,
+		isSilenced: $i.isSilenced,
+		localOnly: localOnly.value,
+		src: visibilityButton.value,
+		...(props.reply ? { isReplyVisibilitySpecified: props.reply.visibility === 'specified' } : {}),
+	}, {
+		changeVisibility: v => {
+			visibility.value = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('visibility', visibility.value);
+			}
+		},
+	}, 'closed');
+}
+
+async function toggleLocalOnly() {
+	if (props.channel) {
+		visibility.value = 'public';
+		localOnly.value = true; // TODO: チャンネルが連合するようになった折には消す
+		return;
+	}
+
+	const neverShowInfo = miLocalStorage.getItem('neverShowLocalOnlyInfo');
+
+	if (!localOnly.value && neverShowInfo !== 'true') {
+		const confirm = await os.actions({
+			type: 'question',
+			title: i18n.ts.disableFederationConfirm,
+			text: i18n.ts.disableFederationConfirmWarn,
+			actions: [
+				{
+					value: 'yes' as const,
+					text: i18n.ts.disableFederationOk,
+					primary: true,
+				},
+				{
+					value: 'neverShow' as const,
+					text: `${i18n.ts.disableFederationOk} (${i18n.ts.neverShow})`,
+					danger: true,
+				},
+				{
+					value: 'no' as const,
+					text: i18n.ts.cancel,
+				},
+			],
+		});
+		if (confirm.canceled) return;
+		if (confirm.result === 'no') return;
+
+		if (confirm.result === 'neverShow') {
+			miLocalStorage.setItem('neverShowLocalOnlyInfo', 'true');
+		}
+	}
+
+	localOnly.value = !localOnly.value;
+	if (defaultStore.state.rememberNoteVisibility) {
+		defaultStore.set('localOnly', localOnly.value);
+	}
+}
+
+async function toggleReactionAcceptance() {
+	const select = await os.select({
+		title: i18n.ts.reactionAcceptance,
+		items: [
+			{ value: null, text: i18n.ts.all },
+			{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
+			{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly },
+			{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote },
+			{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
+		],
+		default: reactionAcceptance.value,
+	});
+	if (select.canceled) return;
+	reactionAcceptance.value = select.result;
+}
+
+function pushVisibleUser(user: Misskey.entities.UserDetailed) {
+	if (!visibleUsers.value.some(u => u.username === user.username && u.host === user.host)) {
+		visibleUsers.value.push(user);
+	}
+}
+
+function addVisibleUser() {
+	os.selectUser().then(user => {
+		pushVisibleUser(user);
+
+		if (!text.value.toLowerCase().includes(`@${user.username.toLowerCase()}`)) {
+			text.value = `@${Misskey.acct.toString(user)} ${text.value}`;
+		}
+	});
+}
+
+function removeVisibleUser(user) {
+	visibleUsers.value = erase(user, visibleUsers.value);
+}
+
+function clear() {
+	text.value = '';
+	files.value = [];
+	poll.value = null;
+	quoteId.value = null;
+}
+
+function onKeydown(ev: KeyboardEvent) {
+	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost.value) post();
+	if (ev.key === 'Escape') emit('esc');
+}
+
+function onCompositionUpdate(ev: CompositionEvent) {
+	imeText.value = ev.data;
+}
+
+function onCompositionEnd(ev: CompositionEvent) {
+	imeText.value = '';
+}
+
+async function onPaste(ev: ClipboardEvent) {
+	if (props.mock) return;
+	if (!ev.clipboardData) return;
+
+	for (const { item, i } of Array.from(ev.clipboardData.items, (data, x) => ({ item: data, i: x }))) {
+		if (item.kind === 'file') {
+			const file = item.getAsFile();
+			if (!file) continue;
+			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');
+
+	if (!props.renote && !quoteId.value && paste.startsWith(url + '/notes/')) {
+		ev.preventDefault();
+
+		os.confirm({
+			type: 'info',
+			text: i18n.ts.quoteQuestion,
+		}).then(({ canceled }) => {
+			if (canceled) {
+				insertTextAtCursor(textareaEl.value, paste);
+				return;
+			}
+
+			quoteId.value = paste.substring(url.length).match(/^\/notes\/(.+?)\/?$/)?.[1] ?? null;
+		});
+	}
+
+	if (paste.length > 1000) {
+		ev.preventDefault();
+		os.confirm({
+			type: 'info',
+			text: i18n.ts.attachAsFileQuestion,
+		}).then(({ canceled }) => {
+			if (canceled) {
+				insertTextAtCursor(textareaEl.value, paste);
+				return;
+			}
+
+			const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, '0');
+			const file = new File([paste], `${fileName}.txt`, { type: 'text/plain' });
+			upload(file, `${fileName}.txt`);
+		});
+	}
+}
+
+function onDragover(ev) {
+	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.value = 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;
+		}
+	}
+}
+
+function onDragenter() {
+	draghover.value = true;
+}
+
+function onDragleave() {
+	draghover.value = false;
+}
+
+function onDrop(ev: DragEvent): void {
+	draghover.value = false;
+
+	// ファイルだったら
+	if (ev.dataTransfer && 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 != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
+		files.value.push(file);
+		ev.preventDefault();
+	}
+	//#endregion
+}
+
+function saveDraft() {
+	if (props.instant || props.mock) return;
+
+	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
+
+	draftData[draftKey.value] = {
+		updatedAt: new Date(),
+		data: {
+			text: text.value,
+			useCw: useCw.value,
+			cw: cw.value,
+			visibility: visibility.value,
+			localOnly: localOnly.value,
+			files: files.value,
+			poll: poll.value,
+			visibleUserIds: visibility.value === 'specified' ? visibleUsers.value.map(x => x.id) : undefined,
+		},
+	};
+
+	miLocalStorage.setItem('drafts', JSON.stringify(draftData));
+}
+
+function deleteDraft() {
+	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
+
+	delete draftData[draftKey.value];
+
+	miLocalStorage.setItem('drafts', JSON.stringify(draftData));
+}
+
+async function post(ev?: MouseEvent) {
+	if (useCw.value && (cw.value == null || cw.value.trim() === '')) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.cwNotationRequired,
+		});
+		return;
+	}
+
+	if (ev) {
+		const el = (ev.currentTarget ?? ev.target) as HTMLElement | null;
+
+		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');
+		}
+	}
+
+	if (props.mock) return;
+
+	const annoying =
+		text.value.includes('$[x2') ||
+		text.value.includes('$[x3') ||
+		text.value.includes('$[x4') ||
+		text.value.includes('$[scale') ||
+		text.value.includes('$[position');
+
+	if (annoying && visibility.value === 'public') {
+		const { canceled, result } = await os.actions({
+			type: 'warning',
+			text: i18n.ts.thisPostMayBeAnnoying,
+			actions: [{
+				value: 'home',
+				text: i18n.ts.thisPostMayBeAnnoyingHome,
+				primary: true,
+			}, {
+				value: 'cancel',
+				text: i18n.ts.thisPostMayBeAnnoyingCancel,
+			}, {
+				value: 'ignore',
+				text: i18n.ts.thisPostMayBeAnnoyingIgnore,
+			}],
+		});
+
+		if (canceled) return;
+		if (result === 'cancel') return;
+		if (result === 'home') {
+			visibility.value = 'home';
+		}
+	}
+
+	let postData = {
+		text: text.value === '' ? null : text.value,
+		fileIds: files.value.length > 0 ? files.value.map(f => f.id) : undefined,
+		replyId: props.reply ? props.reply.id : undefined,
+		renoteId: props.renote ? props.renote.id : quoteId.value ? quoteId.value : undefined,
+		channelId: props.channel ? props.channel.id : undefined,
+		poll: poll.value,
+		cw: useCw.value ? cw.value ?? '' : null,
+		localOnly: localOnly.value,
+		visibility: visibility.value,
+		visibleUserIds: visibility.value === 'specified' ? visibleUsers.value.map(u => u.id) : undefined,
+		reactionAcceptance: reactionAcceptance.value,
+	};
+
+	if (withHashtags.value && hashtags.value && hashtags.value.trim() !== '') {
+		const hashtags_ = hashtags.value.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
+		if (!postData.text) {
+			postData.text = hashtags_;
+		} else {
+			const postTextLines = postData.text.split('\n');
+			if (postTextLines[postTextLines.length - 1].trim() === '') {
+				postTextLines[postTextLines.length - 1] += hashtags_;
+			} else {
+				postTextLines[postTextLines.length - 1] += ' ' + hashtags_;
+			}
+			postData.text = postTextLines.join('\n');
+		}
+	}
+
+	// plugin
+	if (notePostInterruptors.length > 0) {
+		for (const interruptor of notePostInterruptors) {
+			try {
+				postData = await interruptor.handler(deepClone(postData)) as typeof postData;
+			} catch (err) {
+				console.error(err);
+			}
+		}
+	}
+
+	let token: string | undefined = undefined;
+
+	if (postAccount.value) {
+		const storedAccounts = await getAccounts();
+		token = storedAccounts.find(x => x.id === postAccount.value?.id)?.token;
+	}
+
+	posting.value = true;
+	misskeyApi('notes/create', postData, token).then(() => {
+		if (props.freezeAfterPosted) {
+			posted.value = true;
+		} else {
+			clear();
+		}
+		nextTick(() => {
+			deleteDraft();
+			emit('posted');
+			if (postData.text && postData.text !== '') {
+				const hashtags_ = mfm.parse(postData.text).map(x => x.type === 'hashtag' && x.props.hashtag).filter(x => x) as string[];
+				const history = JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]') as string[];
+				miLocalStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
+			}
+			posting.value = false;
+			postAccount.value = null;
+
+			incNotesCount();
+			if (notesCount === 1) {
+				claimAchievement('notes1');
+			}
+
+			const text = postData.text ?? '';
+			const lowerCase = text.toLowerCase();
+			if ((lowerCase.includes('love') || lowerCase.includes('❤')) && lowerCase.includes('misskey')) {
+				claimAchievement('iLoveMisskey');
+			}
+			if ([
+				'https://youtu.be/Efrlqw8ytg4',
+				'https://www.youtube.com/watch?v=Efrlqw8ytg4',
+				'https://m.youtube.com/watch?v=Efrlqw8ytg4',
+
+				'https://youtu.be/XVCwzwxdHuA',
+				'https://www.youtube.com/watch?v=XVCwzwxdHuA',
+				'https://m.youtube.com/watch?v=XVCwzwxdHuA',
+
+				'https://open.spotify.com/track/3Cuj0mZrlLoXx9nydNi7RB',
+				'https://open.spotify.com/track/7anfcaNPQWlWCwyCHmZqNy',
+				'https://open.spotify.com/track/5Odr16TvEN4my22K9nbH7l',
+				'https://open.spotify.com/album/5bOlxyl4igOrp2DwVQxBco',
+			].some(url => text.includes(url))) {
+				claimAchievement('brainDiver');
+			}
+
+			if (props.renote && (props.renote.userId === $i.id) && text.length > 0) {
+				claimAchievement('selfQuote');
+			}
+
+			const date = new Date();
+			const h = date.getHours();
+			const m = date.getMinutes();
+			const s = date.getSeconds();
+			if (h >= 0 && h <= 3) {
+				claimAchievement('postedAtLateNight');
+			}
+			if (m === 0 && s === 0) {
+				claimAchievement('postedAt0min0sec');
+			}
+		});
+	}).catch(err => {
+		posting.value = false;
+		os.alert({
+			type: 'error',
+			text: err.message + '\n' + (err as any).id,
+		});
+	});
+}
+
+function cancel() {
+	emit('cancel');
+}
+
+function insertMention() {
+	os.selectUser({ localOnly: localOnly.value, includeSelf: true }).then(user => {
+		insertTextAtCursor(textareaEl.value, '@' + Misskey.acct.toString(user) + ' ');
+	});
+}
+
+async function insertEmoji(ev: MouseEvent) {
+	textAreaReadOnly.value = true;
+	const target = ev.currentTarget ?? ev.target;
+	if (target == null) return;
+	emojiPicker.show(
+		target as HTMLElement,
+		emoji => {
+			insertTextAtCursor(textareaEl.value, emoji);
+		},
+		() => {
+			textAreaReadOnly.value = false;
+			nextTick(() => focus());
+		},
+	);
+}
+
+async function insertMfmFunction(ev: MouseEvent) {
+	if (textareaEl.value == null) return;
+	mfmFunctionPicker(
+		ev.currentTarget ?? ev.target,
+		textareaEl.value,
+		text,
+	);
+}
+
+function showActions(ev: MouseEvent) {
+	os.popupMenu(postFormActions.map(action => ({
+		text: action.title,
+		action: () => {
+			action.handler({
+				text: text.value,
+				cw: cw.value,
+			}, (key, value: any) => {
+				if (typeof key !== 'string') return;
+				if (key === 'text') { text.value = value; }
+				if (key === 'cw') { useCw.value = value !== null; cw.value = value; }
+			});
+		},
+	})), ev.currentTarget ?? ev.target);
+}
+
+const postAccount = ref<Misskey.entities.UserDetailed | null>(null);
+
+function openAccountMenu(ev: MouseEvent) {
+	if (props.mock) return;
+
+	openAccountMenu_({
+		withExtraOperation: false,
+		includeCurrentAccount: true,
+		active: postAccount.value != null ? postAccount.value.id : $i.id,
+		onChoose: (account) => {
+			if (account.id === $i.id) {
+				postAccount.value = null;
+			} else {
+				postAccount.value = account;
+			}
+		},
+	}, ev);
+}
+
+onMounted(() => {
+	if (props.autofocus) {
+		focus();
+
+		nextTick(() => {
+			focus();
+		});
+	}
+
+	// TODO: detach when unmount
+	if (textareaEl.value) new Autocomplete(textareaEl.value, text);
+	if (cwInputEl.value) new Autocomplete(cwInputEl.value, cw);
+	if (hashtagsInputEl.value) new Autocomplete(hashtagsInputEl.value, hashtags);
+
+	nextTick(() => {
+		// 書きかけの投稿を復元
+		if (!props.instant && !props.mention && !props.specified && !props.mock) {
+			const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey.value];
+			if (draft) {
+				text.value = draft.data.text;
+				useCw.value = draft.data.useCw;
+				cw.value = draft.data.cw;
+				visibility.value = draft.data.visibility;
+				localOnly.value = draft.data.localOnly;
+				files.value = (draft.data.files || []).filter(draftFile => draftFile);
+				if (draft.data.poll) {
+					poll.value = draft.data.poll;
+				}
+				if (draft.data.visibleUserIds) {
+					misskeyApi('users/show', { userIds: draft.data.visibleUserIds }).then(users => {
+						users.forEach(u => pushVisibleUser(u));
+					});
+				}
+			}
+		}
+
+		// 削除して編集
+		if (props.initialNote) {
+			const init = props.initialNote;
+			text.value = init.text ? init.text : '';
+			files.value = init.files ?? [];
+			cw.value = init.cw ?? null;
+			useCw.value = init.cw != null;
+			if (init.poll) {
+				poll.value = {
+					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.value = init.visibility;
+			localOnly.value = init.localOnly ?? false;
+			quoteId.value = init.renote ? init.renote.id : null;
+		}
+
+		nextTick(() => watchForDraft());
+	});
+});
+
+defineExpose({
+	clear,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	container-type: inline-size;
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
+}
+
+//#region header
+.header {
+	z-index: 1000;
+	min-height: 50px;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: center;
+	gap: 4px;
+}
+
+.headerLeft {
+	display: flex;
+	flex: 0 1 100px;
+}
+
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	height: 100%;
+	flex: 0 1 50px;
+}
+
+.account {
+	height: 100%;
+	margin-left: 16px;
+}
+
+.avatar {
+	width: 36px;
+	height: 36px;
+	margin: auto;
+}
+
+.headerRight {
+	display: flex;
+	min-height: 24px;
+	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));
+		}
+	}
+}
+
+.colorBar {
+	position: absolute;
+	top: 0px;
+	left: 12px;
+	width: 5px;
+	height: 100% ;
+	border-radius: 999px;
+	pointer-events: none;
+}
+
+.submitInner {
+	padding: 0 12px;
+	line-height: 35px;
+	font-weight: bold;
+	border-radius: 6px;
+	min-width: 90px;
+	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;
+	}
+
+	&.danger {
+		color: #ff2a2a;
+	}
+}
+
+.headerRightButtonText {
+	padding-left: 6px;
+}
+
+.visibility {
+	overflow: clip;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 210px;
+
+	&:enabled {
+		> .headerRightButtonText {
+			opacity: 0.8;
+		}
+	}
+}
+//#endregion
+
+.preview {
+	padding: 16px 20px 0 20px;
+	min-height: 75px;
+	max-height: 150px;
+	overflow: auto;
+}
+
+.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);
+}
+
+.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;
+	}
+
+	&: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: 92%;
+	min-width: 92%;
+	width: 92%;
+	min-height: 50px;
+	margin-top: 8px;
+	height: 100%;
+}
+
+.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;
+
+	&.textOver {
+		color: #ff2a2a;
+	}
+}
+
+.footer {
+	display: flex;
+	font-size: 1em;
+	justify-content: center;
+	align-items: center;
+}
+
+.footerLeft {
+	flex: 1;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
+	grid-auto-rows: 20px;
+}
+
+.footerRight {
+	flex: 0;
+	margin-left: auto;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+	grid-auto-rows: 35px;
+	place-items: center;
+	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);
+	}
+}
+
+.previewButtonActive {
+	color: var(--accent);
+}
+
+@container (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;
+	}
+}
+
+@container (max-width: 350px) {
+	.footer {
+		font-size: 0.9em;
+	}
+
+	.footerLeft {
+		grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+	}
+
+	.headerRight {
+		gap: 0;
+	}
+
+}
+</style>
diff --git a/packages/frontend/src/components/XPostFormDialog.vue b/packages/frontend/src/components/XPostFormDialog.vue
new file mode 100644
index 0000000000..a6cfa7449d
--- /dev/null
+++ b/packages/frontend/src/components/XPostFormDialog.vue
@@ -0,0 +1,62 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModal ref="modal" :preferType="'dialog'" @click="modal?.close()" @closed="onModalClosed()">
+	<XPostForm ref="form" :class="$style.form" :dialog="true" v-bind="props" autofocus freezeAfterPosted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkModal from '@/components/MkModal.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
+import XPostForm from '@/components/XPostForm.vue';
+
+const props = withDefaults(defineProps<{
+	reply?: Misskey.entities.Note;
+	renote?: Misskey.entities.Note;
+	channel?: any; // TODO
+	mention?: Misskey.entities.User;
+	specified?: Misskey.entities.UserDetailed;
+	initialText?: string;
+	initialCw?: string;
+	initialVisibility?: (typeof Misskey.noteVisibilities)[number];
+	initialFiles?: Misskey.entities.DriveFile[];
+	initialLocalOnly?: boolean;
+	initialVisibleUsers?: Misskey.entities.UserDetailed[];
+	initialNote?: Misskey.entities.Note;
+	instant?: boolean;
+	fixed?: boolean;
+	autofocus?: boolean;
+}>(), {
+	initialLocalOnly: undefined,
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+const form = shallowRef<InstanceType<typeof MkPostForm>>();
+
+function onPosted() {
+	modal.value?.close({
+		useSendAnimation: true,
+	});
+}
+
+function onModalClosed() {
+	emit('closed');
+}
+</script>
+
+<style lang="scss" module>
+.form {
+	max-height: 100%;
+	margin: 0 auto auto auto;
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index 71f7900548..ec3a80aceb 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="el" :class="$style.tabs" @wheel="onTabWheel">
-	<div :class="$style.tabsInner">
+	<div :class="ui !== 'twilike' ? $style.tabsInner : $style.tabsInnerX">
 		<button
 			v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
-			class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
+			class="_button" :class="[ui !== 'twilike' ? $style.tab : $style.tabX, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
 			@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
 		>
 			<div :class="$style.tabInner">
@@ -55,6 +55,7 @@ export type Tab = {
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed } from 'vue';
 import { defaultStore } from '@/store.js';
+import { ui } from '@/config.js';
 
 const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
 
@@ -207,6 +208,15 @@ onUnmounted(() => {
 	white-space: nowrap;
 }
 
+.tabsInnerX {
+	display: flex;
+	height: var(--height);
+	white-space: nowrap;
+	justify-content: space-around;
+}
+.tabX{
+	flex: 1;
+}
 .tab {
 	display: inline-block;
 	position: relative;
@@ -231,6 +241,7 @@ onUnmounted(() => {
 .tabInner {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 }
 
 .tabIcon + .tabTitle {
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index faa20ba869..2173f7a261 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -150,8 +150,8 @@ onUnmounted(() => {
 	height: var(--height);
 
 	.tabs:first-child {
-		margin-left: auto;
 		padding: 0 12px;
+		width: 100%;
 	}
 	.tabs {
 		margin-right: auto;
@@ -168,6 +168,7 @@ onUnmounted(() => {
 	}
 
 	&.slim {
+		width: 100%;
 		text-align: center;
 		gap: 0;
         .buttonsRight {
diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index f3d83ce079..dedb9d1ff9 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -147,6 +147,13 @@ export const navbarItemDef = reactive({
 					miLocalStorage.setItem('ui', 'classic');
 					unisonReload();
 				},
+			}, {
+				text: 'twilike',
+				active: ui === 'twilike',
+				action: () => {
+					miLocalStorage.setItem('ui', 'twilike');
+					unisonReload();
+				},
 			}], ev.currentTarget ?? ev.target);
 		},
 	},
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 3a6000526a..205ed16aa5 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -13,6 +13,7 @@ import type { Form, GetFormResultType } from '@/scripts/form.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
+import XPostFormDialog from '@/components/XPostFormDialog.vue';
 import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
 import MkPageWindow from '@/components/MkPageWindow.vue';
 import MkToast from '@/components/MkToast.vue';
@@ -25,6 +26,7 @@ import { MenuItem } from '@/types/menu.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
 import MkSwitch from '@/components/MkSwitch.vue';
+import { ui } from '@/config.js';
 
 export const openingWindowsCount = ref(0);
 
@@ -551,7 +553,7 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
 		popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {
 			includeSelf: opts.includeSelf,
 			localOnly: opts.localOnly,
-            multiple: opts.multiple,
+			multiple: opts.multiple,
 		}, {
 			ok: user => {
 				resolve(user);
@@ -682,14 +684,25 @@ export function post(props: Record<string, any> = {}): Promise<void> {
 		//       複数のpost formを開いたときに場合によってはエラーになる
 		//       もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
 		let dispose;
-		popup(MkPostFormDialog, props, {
-			closed: () => {
-				resolve();
-				dispose();
-			},
-		}).then(res => {
-			dispose = res.dispose;
-		});
+		if (ui !== 'twilike') {
+			popup(MkPostFormDialog, props, {
+				closed: () => {
+					resolve();
+					dispose();
+				},
+			}).then(res => {
+				dispose = res.dispose;
+			});
+		} else {
+			popup(XPostFormDialog, props, {
+				closed: () => {
+					resolve();
+					dispose();
+				},
+			}).then(res => {
+				dispose = res.dispose;
+			});
+		}
 	});
 }
 
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 7261343674..1038f917f1 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -117,7 +117,7 @@ const menuDef = computed(() => [{
 	}, {
 		icon: 'ti ti-layout-navbar',
 		text: i18n.ts.timelineHeader,
-		to: '/settings/timelineheader',
+		to: '/settings/timeline-header',
 		active: currentPage.value?.route.name === 'timelineHeader',
 	}, {
 		icon: 'ti ti-equal-double',
diff --git a/packages/frontend/src/pages/settings/timelineHeader.vue b/packages/frontend/src/pages/settings/timelineHeader.vue
index 16ec626dfe..dcec07abd7 100644
--- a/packages/frontend/src/pages/settings/timelineHeader.vue
+++ b/packages/frontend/src/pages/settings/timelineHeader.vue
@@ -30,6 +30,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</MkContainer>
 	</FormSlot>
+	<MkFoldableSection>
+		<template #header>リモートのローカルタイムライン</template>
+
+		<div v-if="remoteLocalTimeline.length < 3">
+			<MkInput v-model="tmpName" placeholder="remoteLocalTimeline 1"/>
+			<MkInput v-model="tmpServer" placeholder="https://prismisskey.space"/>
+			<MkButton @click="addRemote"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton>
+		</div>
+
+		<div v-for="(a,i) in remoteLocalTimeline" :key="i">
+			<MkInput v-model="remoteLocalTimeline[i]['name']" :placeholder="a"/>
+			<MkInput v-model="remoteLocalTimeline[i]['host']" :placeholder="a"/>
+			<MkButton danger @click="deleteRemote(i)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+		</div>
+	</MkFoldableSection>
 	<div class="_buttons">
 		<MkButton @click="addItem"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton>
 		<MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
@@ -39,25 +54,30 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import MkRadios from '@/components/MkRadios.vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSlot from '@/components/form/slot.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import * as os from '@/os.js';
-import { navbarItemDef } from '@/navbar.js';
 import { defaultStore } from '@/store.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { timelineHeaderItemDef } from '@/timeline-header.js';
+import MkInput from '@/components/MkInput.vue';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import { $i } from '@/account.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+const tmpName = ref();
+const tmpServer = ref();
 
 const items = ref(defaultStore.state.timelineHeader.map(x => ({
 	id: Math.random().toString(),
 	type: x,
 })));
+const remoteLocalTimeline = ref(defaultStore.state.remoteLocalTimeline);
+const maxLocalTimeline = $i.policies.localTimelineAnyLimit;
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
@@ -69,11 +89,31 @@ async function reloadAsk() {
 	unisonReload();
 }
 
+async function addRemote() {
+	if (!tmpName.value || !tmpServer.value) return;
+	if (maxLocalTimeline <= remoteLocalTimeline.value.length) return;
+	remoteLocalTimeline.value.push({
+		id: Math.random().toString(),
+		name: tmpName.value,
+		host: tmpServer.value,
+	});
+	tmpName.value = '';
+	tmpServer.value = '';
+	await defaultStore.set('remoteLocalTimeline', remoteLocalTimeline.value);
+}
+
+const menu = computed(() => {
+	return Object.keys(timelineHeaderItemDef).filter(k => !items.value.map(item => item.type).includes(k));
+});
+
+async function deleteRemote(index: number) {
+	remoteLocalTimeline.value.splice(index, 1);
+}
+
 async function addItem() {
-	const menu = Object.keys(timelineHeaderItemDef).filter(k => !defaultStore.state.timelineHeader.includes(k));
 	const { canceled, result: item } = await os.select({
 		title: i18n.ts.addItem,
-		items: [...menu.map(k => ({
+		items: [...menu.value.map(k => ({
 			value: k, text: timelineHeaderItemDef[k].title,
 		}))],
 	});
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 84e82bbbe8..7274a7a6d5 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -12,7 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
 					{{ i18n.ts._timelineDescription[src] }}
 				</MkInfo>
-				<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostForm.value" :channel="channelInfo" :autofocus="deviceKind === 'desktop'" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
+				<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostForm.value && ui !== 'twilike'" :channel="channelInfo" :autofocus="deviceKind === 'desktop'" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
+				<XPostForm v-if="$i && ui === 'twilike' " :channel="channelInfo" :autofocus="deviceKind === 'desktop'" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
 				<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
 				<div :class="$style.tl">
 					<MkTimeline
@@ -21,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:src="src.split(':')[0]"
 						:list="src.split(':')[1]"
 						:channel="src.split(':')[1]"
+						:antenna="src.split(':')[1]"
 						:withRenotes="withRenotes"
 						:withReplies="withReplies"
 						:onlyFiles="onlyFiles"
@@ -47,7 +49,6 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
 import { $i } from '@/account.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { antennasCache, userFavoriteListsCache, userListsCache, favoritedChannelsCache } from '@/cache.js';
@@ -57,6 +58,8 @@ import { MenuItem } from '@/types/menu.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { timelineHeaderItemDef } from '@/timeline-header.js';
 import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/scripts/get-timeline-available.js';
+import { ui } from '@/config.js';
+import XPostForm from '@/components/XPostForm.vue';
 
 provide('shouldOmitHeaderTitle', true);
 
@@ -121,14 +124,7 @@ const withSensitive = computed<boolean>({
 	get: () => defaultStore.reactiveState.tl.value.filter.withSensitive,
 	set: (x) => saveTlFilter('withSensitive', x),
 });
-const isShowMediaTimeline = ref(defaultStore.state.showMediaTimeline);
-const remoteLocalTimelineEnable1 = ref(defaultStore.state.remoteLocalTimelineEnable1);
-const remoteLocalTimelineEnable2 = ref(defaultStore.state.remoteLocalTimelineEnable2);
-const remoteLocalTimelineEnable3 = ref(defaultStore.state.remoteLocalTimelineEnable3);
-const remoteLocalTimelineEnable4 = ref(defaultStore.state.remoteLocalTimelineEnable4);
-const remoteLocalTimelineEnable5 = ref(defaultStore.state.remoteLocalTimelineEnable5);
-const showHomeTimeline = ref(defaultStore.state.showHomeTimeline);
-const showSocialTimeline = ref(defaultStore.state.showSocialTimeline);
+
 const channelInfo = ref();
 if (src.value.split(':')[0] === 'channel') {
 	const channelId = src.value.split(':')[1];
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index a4b29de810..3b8b644345 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -10,6 +10,8 @@ import type { SoundType } from '@/scripts/sound.js';
 import { Storage } from '@/pizzax.js';
 import { hemisphere } from '@/scripts/intl-const.js';
 import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/scripts/get-timeline-available.js';
+import { instance } from '@/instance.js';
+
 interface PostFormAction {
 	title: string,
 	handler: <T>(form: T, update: (key: unknown, value: unknown) => void) => void;
@@ -534,85 +536,9 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 44,
 	},
-	remoteLocalTimelineDomain1: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineDomain2: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineDomain3: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineDomain4: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineDomain5: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineToken1: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineToken2: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineToken3: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineToken4: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineToken5: {
-		where: 'account',
-		default: '',
-	},
-	remoteLocalTimelineEnable1: {
-		where: 'account',
-		default: false,
-	},
-	remoteLocalTimelineEnable2: {
-		where: 'account',
-		default: false,
-	},
-	remoteLocalTimelineEnable3: {
-		where: 'account',
-		default: false,
-	},
-	remoteLocalTimelineEnable4: {
-		where: 'account',
-		default: false,
-	},
-	remoteLocalTimelineEnable5: {
-		where: 'account',
-		default: false,
-	},
-	remoteLocalTimelineName1: {
-		where: 'account',
-		default: 'custom timeline 1',
-	},
-	remoteLocalTimelineName2: {
-		where: 'account',
-		default: 'custom timeline 2 ',
-	},
-	remoteLocalTimelineName3: {
-		where: 'account',
-		default: 'custom timeline 3',
-	},
-	remoteLocalTimelineName4: {
-		where: 'account',
-		default: 'custom timeline 4',
-	},
-	remoteLocalTimelineName5: {
-		where: 'account',
-		default: 'custom timeline 5',
+	remoteLocalTimeline: {
+		where: 'device',
+		default: [],
 	},
 	onlyAndWithSave: {
 		where: 'device',
diff --git a/packages/frontend/src/timeline-header.ts b/packages/frontend/src/timeline-header.ts
index 5cf27c0c7b..ee978115d5 100644
--- a/packages/frontend/src/timeline-header.ts
+++ b/packages/frontend/src/timeline-header.ts
@@ -3,10 +3,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { i18n } from '@/i18n.js';
-import { userListsCache } from '@/cache.js';
+import {
+	antennasCache,
+	userChannelFollowingsCache,
+	userChannelsCache,
+	userFavoriteListsCache,
+	userListsCache,
+} from '@/cache.js';
 import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/scripts/get-timeline-available.js';
+import { defaultStore } from '@/store.js';
+import { $i } from '@/account.js';
 
 export type TimelineHeaderItem =
 	'home' |
@@ -16,7 +24,11 @@ export type TimelineHeaderItem =
 	'lists' |
 	'antennas' |
 	'channels' |
-	`list:${string}`
+	`list:${string}` |
+	`channel:${string}` |
+	`antenna:${string}` |
+	'media' |
+	`customTimeline:${string}`;
 
 type TimelineHeaderItemsDef = {
 	title: string;
@@ -25,6 +37,11 @@ type TimelineHeaderItemsDef = {
 }
 
 const lists = await userListsCache.fetch();
+const userChannels = await userChannelsCache.fetch();
+const userChannelFollowings = await userChannelFollowingsCache.fetch();
+const userFavoriteLists = await userFavoriteListsCache.fetch();
+const antenna = await antennasCache.fetch();
+
 export const timelineHeaderItemDef = reactive<Partial<Record<TimelineHeaderItem, TimelineHeaderItemsDef>>>({
 	home: {
 		title: i18n.ts._timelines.home,
@@ -70,4 +87,46 @@ export const timelineHeaderItemDef = reactive<Partial<Record<TimelineHeaderItem,
 		};
 		return acc;
 	}, {}),
+	...userChannels.reduce((acc, l) => {
+		acc['channel:' + l.id] = {
+			title: i18n.ts.channel + ':' + l.name,
+			icon: 'ti ti-star',
+			iconOnly: true,
+		};
+		return acc;
+	}, {}),
+	...userChannelFollowings.reduce((acc, l) => {
+		acc['channel:' + l.id] = {
+			title: i18n.ts.channel + ':' + l.name,
+			icon: 'ti ti-star',
+			iconOnly: true,
+		};
+		return acc;
+	}, {}),
+	...userFavoriteLists.reduce((acc, l) => {
+		acc['channel:' + l.id] = {
+			title: i18n.ts.channel + ':' + l.name,
+			icon: 'ti ti-star',
+			iconOnly: true,
+		};
+		return acc;
+	}, {}),
+	...antenna.reduce((acc, l) => {
+		acc['antenna:' + l.id] = {
+			title: i18n.ts.antennas + ':' + l.name,
+			icon: 'ti ti-star',
+			iconOnly: true,
+		};
+		return acc;
+	}, {}),
+	...defaultStore.reactiveState.remoteLocalTimeline.value.reduce((acc, t) => {
+		acc['remoteLocalTimeline:' + t.host.replace('https://', '')] = {
+			title: 'remoteLocaltimeline:' + t.name,
+			icon: 'ti ti-star',
+			iconOnly: true,
+		};
+		return acc;
+	}, {}),
+
 });
+
diff --git a/packages/frontend/src/ui/twilike.sidebar.vue b/packages/frontend/src/ui/twilike.sidebar.vue
new file mode 100644
index 0000000000..3c75b5f52b
--- /dev/null
+++ b/packages/frontend/src/ui/twilike.sidebar.vue
@@ -0,0 +1,260 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="npcljfve" :class="{ iconOnly }">
+	<div class="about">
+		<button v-click-anime class="item _button" @click="openInstanceMenu">
+			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+		</button>
+	</div>
+	<MkA v-click-anime class="item index" activeClass="active" to="/" exact>
+		<i class="ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+	</MkA>
+	<template v-for="item in menu">
+		<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" activeClass="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">{{ navbarItemDef[item].title }}</span>
+			<span v-if="navbarItemDef[item].indicated" class="indicator">
+				<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
+				<i v-else class="_indicatorCircle"></i>
+			</span>
+		</component>
+	</template>
+	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : 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">{{ i18n.ts.more }}</span>
+		<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
+	</button>
+	<MkA v-click-anime class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
+		<i class="ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+	</MkA>
+
+	<div class="post" data-cy-open-post-form @click="os.post">
+		<MkButton class="button" gradate full rounded>
+			<div class="content">
+				<i class="ti ti-pencil ti-fw"></i>
+				<span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
+			</div>
+		</MkButton>
+	</div>
+
+	<button v-click-anime class="item _button account" @click="openAccountMenu">
+		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+	</button>
+
+	<!--<MisskeyLogo class="misskey"/>-->
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, watch, ref, shallowRef, onUnmounted, onMounted } from 'vue';
+import { openInstanceMenu } from './_common_/common.js';
+// import { host } from '@/config.js';
+import * as os from '@/os.js';
+import { navbarItemDef } from '@/navbar.js';
+import { openAccountMenu as openAccountMenu_, $i } from '@/account.js';
+import MkButton from '@/components/MkButton.vue';
+// import { StickySidebar } from '@/scripts/sticky-sidebar.js';
+// import { mainRouter } from '@/router.js';
+//import MisskeyLogo from '@assets/client/misskey.svg';
+import { defaultStore } from '@/store.js';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import { mainRouter } from '@/router/main.js';
+
+const WINDOW_THRESHOLD = 1400;
+
+const menu = ref(defaultStore.state.menu);
+const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+const otherNavItemIndicated = computed<boolean>(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+const el = shallowRef<HTMLElement>();
+// let accounts = $ref([]);
+// let connection = $ref(null);
+const iconOnly = ref(false);
+const settingsWindowed = ref(false);
+
+function calcViewState() {
+	iconOnly.value = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
+	settingsWindowed.value = (window.innerWidth > WINDOW_THRESHOLD);
+}
+
+function more(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+	}, {}, 'closed');
+}
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+let updateIconOnly: () => void;
+watch(defaultStore.reactiveState.menuDisplay, () => {
+	calcViewState();
+});
+onMounted(() => {
+	updateIconOnly = () => {
+		iconOnly.value = window.innerWidth < 1300;
+	};
+
+	window.addEventListener('resize', updateIconOnly);
+
+	updateIconOnly(); // 初期値を設定
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', updateIconOnly);
+});
+</script>
+
+<style lang="scss" scoped>
+
+	.npcljfve {
+		$ui-font-size: 1em; // TODO: どこかに集約したい
+		$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+		$avatar-size: 32px;
+		$avatar-margin: 8px;
+		overflow-y: auto;
+		padding: 0 16px;
+		box-sizing: border-box;
+		width: 260px;
+		height: 100%;
+		&.iconOnly {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width !important;
+
+			> .divider {
+				margin: 8px auto;
+				width: calc(100% - 32px);
+			}
+
+			> .post {
+				> .button {
+					width: 46px;
+					height: 46px;
+					padding: 0;
+				}
+			}
+
+			> .item {
+				padding-left: 0;
+				width: 100%;
+				text-align: center;
+				font-size: $ui-font-size * 1.5;
+				line-height: 3.7rem;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .text {
+					display: none;
+				}
+			}
+		}
+
+		> .post {
+			position: sticky;
+			top: 0;
+			z-index: 1;
+			padding: 16px 0;
+			background: var(--bg);
+
+			> .button {
+				min-width: 0;
+				min-height: 52px;
+			}
+			.content {
+				font-size: larger;
+			}
+		}
+
+		> .about {
+			fill: currentColor;
+			padding: 8px 0 16px 0;
+			text-align: center;
+
+			> .item {
+				display: block;
+				width: 32px;
+				margin: 0 auto;
+
+				img {
+					display: block;
+					width: 100%;
+				}
+			}
+		}
+
+		> .item {
+			position: relative;
+			display: block;
+			font-size: $ui-font-size * 1.2;
+			line-height: 3rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			height: 58px;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+			padding: 8px 4px 4px;
+			> i {
+				width: 32px;
+			}
+
+			> i,
+			> .avatar {
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 0;
+				color: var(--navIndicator);
+				font-size: 8px;
+				animation: global-blink 1s infinite;
+
+				&:has(.itemIndicateValueIcon) {
+					animation: none;
+					left: auto;
+					right: 20px;
+				}
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+		}
+	}
+</style>
diff --git a/packages/frontend/src/ui/twilike.vue b/packages/frontend/src/ui/twilike.vue
new file mode 100644
index 0000000000..cd1609acba
--- /dev/null
+++ b/packages/frontend/src/ui/twilike.vue
@@ -0,0 +1,463 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="[$style.root,{ wallpaper }]" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
+	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
+
+	<div :class="[$style.columns,{ [$style.fullView]:fullView, [$style.withGlobalHeader]: showMenuOnTop }]">
+		<div v-if="!showMenuOnTop && isDesktop" :class="$style.sidebar">
+			<XSidebar/>
+		</div>
+		<div v-else-if="!pageMetadata?.needWideArea && isDesktop" ref="widgetsLeft" :class="[$style.widgets,$style.left]">
+			<XWidgets place="left" :marginTop="'var(--margin)'"/>
+		</div>
+
+		<main :class="[$style.main, {[$style.wide]: pageMetadata?.needWideArea} ]" @contextmenu.stop="onContextmenu">
+			<RouterView/>
+		</main>
+
+		<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" :class="$style.widgets">
+			<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'"/>
+		</div>
+	</div>
+
+	<Transition :name="defaultStore.state.animation ? 'tray-back' : ''">
+		<div
+			v-if="widgetsShowing"
+			class="tray-back _modalBg"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</Transition>
+
+	<XCommon/>
+	<div v-if="!isDesktop" ref="navFooter" :class="$style.nav">
+		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
+			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
+			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+			</span>
+		</button>
+		<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
+		<button :class="$style.navButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+	</div>
+	<Transition
+		:enterActiveClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_enterActive : ''"
+		:leaveActiveClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
+		:enterFromClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
+		:leaveToClass="defaultStore.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
+	>
+		<div
+			v-if="drawerMenuShowing || widgetsShowing"
+			:class="$style.menuDrawerBg"
+			class="_modalBg"
+			@click="drawerMenuShowing = false; widgetsShowing = false "
+			@touchstart.passive="drawerMenuShowing = false; widgetsShowing = false"
+		></div>
+	</Transition>
+
+	<Transition
+		:enterActiveClass="defaultStore.state.animation ? $style.transition_menuDrawer_enterActive : ''"
+		:leaveActiveClass="defaultStore.state.animation ? $style.transition_menuDrawer_leaveActive : ''"
+		:enterFromClass="defaultStore.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
+		:leaveToClass="defaultStore.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
+	>
+		<div v-if="drawerMenuShowing" :class="$style.menuDrawer">
+			<XDrawerMenu/>
+		</div>
+	</Transition>
+	<Transition
+		:enterActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_enterActive : ''"
+		:leaveActiveClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
+		:enterFromClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
+		:leaveToClass="defaultStore.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
+	>
+		<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
+			<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button>
+			<XWidgets/>
+		</div>
+	</Transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef, watch } from 'vue';
+import XSidebar from './twilike.sidebar.vue';
+import XCommon from './_common_/common.vue';
+import { instanceName, ui } from '@/config.js';
+import * as os from '@/os.js';
+import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import { miLocalStorage } from '@/local-storage.js';
+import { mainRouter } from '@/router/main.js';
+import { $i } from '@/account.js';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
+const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
+const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
+
+const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
+
+const DESKTOP_THRESHOLD = 700;
+
+const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
+const drawerMenuShowing = ref(false);
+const pageMetadata = ref<null | PageMetadata>(null);
+const widgetsShowing = ref(false);
+const fullView = ref(false);
+const globalHeaderHeight = ref(0);
+const wallpaper = miLocalStorage.getItem('wallpaper') != null;
+const showMenuOnTop = computed(() => defaultStore.state.menuDisplay === 'top');
+const widgetsLeft = ref<HTMLElement>();
+const widgetsRight = ref<HTMLElement>();
+
+provide('router', mainRouter);
+provideMetadataReceiver((metadataGetter) => {
+	const info = metadataGetter();
+	pageMetadata.value = info;
+	if (mainRouter.currentRoute.value.path.split('/').slice(1)[0] === 'settings') {
+		pageMetadata.value.needWideArea = true;
+	}
+	if (pageMetadata.value) {
+		if (isRoot.value && pageMetadata.value.title === instanceName) {
+			document.title = pageMetadata.value.title;
+		} else {
+			document.title = `${pageMetadata.value.title} | ${instanceName}`;
+		}
+	}
+});
+provideReactiveMetadata(pageMetadata);
+provide('shouldHeaderThin', showMenuOnTop.value);
+provide('forceSpacerMin', true);
+
+function onContextmenu(ev: MouseEvent) {
+	const isLink = (el: HTMLElement) => {
+		if (el.tagName === 'A') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+	};
+	if (isLink(ev.target)) return;
+	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
+	if (window.getSelection().toString() !== '') return;
+	const path = mainRouter.getCurrentPath();
+	os.contextMenu([{
+		type: 'label',
+		text: path,
+	}, {
+		icon: fullView.value ? 'ti ti-minimize' : 'ti ti-maximize',
+		text: fullView.value ? i18n.ts.quitFullView : i18n.ts.fullView,
+		action: () => {
+			fullView.value = !fullView.value;
+		},
+	}, {
+		icon: 'ti ti-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		},
+	}], ev);
+}
+
+document.documentElement.style.overflowY = 'scroll';
+
+defaultStore.loaded.then(() => {
+	if (defaultStore.state.widgets.length === 0) {
+		defaultStore.set('widgets', [{
+			name: 'calendar',
+			id: 'a', place: null, data: {},
+		}, {
+			name: 'notifications',
+			id: 'b', place: null, data: {},
+		}, {
+			name: 'trends',
+			id: 'c', place: null, data: {},
+		}]);
+	}
+});
+
+onMounted(() => {
+	window.addEventListener('resize', () => {
+		isDesktop.value = (window.innerWidth >= DESKTOP_THRESHOLD);
+	}, { passive: true });
+});
+</script>
+
+<style lang="scss" module>
+$ui-font-size: 1em;
+$widgets-hide-threshold: 1200px;
+.transition_widgetsDrawer_enterActive,
+.transition_widgetsDrawer_leaveActive {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_widgetsDrawer_enterFrom,
+.transition_widgetsDrawer_leaveTo {
+	opacity: 0;
+	transform: translateX(240px);
+}
+.tray-enter-active,
+.tray-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-enter-from,
+.tray-leave-active {
+	opacity: 0;
+	transform: translateX(240px);
+}
+
+.tray-back-enter-active,
+.tray-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-back-enter-from,
+.tray-back-leave-active {
+	opacity: 0;
+}
+
+.transition_menuDrawerBg_enterActive,
+.transition_menuDrawerBg_leaveActive {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_menuDrawerBg_enterFrom,
+.transition_menuDrawerBg_leaveTo {
+	opacity: 0;
+}
+
+.transition_menuDrawer_enterActive,
+.transition_menuDrawer_leaveActive {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_menuDrawer_enterFrom,
+.transition_menuDrawer_leaveTo {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+@media (min-width: 700px) {
+	.root{
+		padding-right:48px;
+		padding-left:24px;
+	}
+}
+.wide{
+	&.main {
+		margin: 0;
+		border-radius: 0;
+		box-shadow: none;
+		width: 100% !important;
+		max-width: 900px !important;
+	}
+}
+
+.root {
+
+	min-height: 100dvh;
+	box-sizing: border-box;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+	}
+
+	> .tray-back {
+		z-index: 1001;
+	}
+
+	> .tray {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		height: 100dvh;
+		margin-top: var(--stickyTop);
+		padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
+		box-sizing: border-box;
+		overflow: auto;
+		background: var(--bg);
+	}
+
+	> .ivnzpscs {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 300px;
+		height: 600px;
+		border: none;
+		pointer-events: none;
+	}
+}
+
+.columns {
+	display: flex;
+	justify-content: center;
+	max-width: 100%;
+
+	&.fullView {
+		margin: 0;
+
+		> .sidebar {
+			display: none;
+		}
+
+		> .widgets {
+			display: none;
+		}
+
+		> .main {
+			margin: 0;
+			border-radius: 0;
+			box-shadow: none;
+			width: 100%;
+		}
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+		width: 750px;
+		margin: 0 16px 0 0;
+		border-left: solid 1px var(--divider);
+		border-right: solid 1px var(--divider);
+		border-radius: 0;
+		overflow: clip;
+		--margin: 12px;
+		max-width: 600px;
+	}
+
+	> .widgets {
+		//--panelBorder: none;
+		width: 300px;
+		height: 100vh;
+		padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
+		position: sticky;
+		overflow-y: auto;
+		top: 0;
+		padding-top: 16px;
+
+		@media (max-width: $widgets-hide-threshold) {
+			display: none;
+		}
+
+		&.left {
+			margin-right: 16px;
+		}
+	}
+
+	> .sidebar {
+		width: 275px;
+		height: 100vh;
+		position: sticky;
+		top: 0;
+		padding: 20px;
+	}
+
+	&.withGlobalHeader {
+		> .main {
+			margin-top: 0;
+			border: solid 1px var(--divider);
+			border-radius: var(--radius);
+			--stickyTop: var(--globalHeaderHeight);
+		}
+
+		> .widgets {
+			--stickyTop: var(--globalHeaderHeight);
+			margin-top: 0;
+		}
+	}
+	@media (max-width: 1300px) {
+		.sidebar {
+			width: 80px;
+		}
+		.main {
+			width: 100%;
+			max-width: 100%;
+		}
+	}
+	@media (max-width: 850px) {
+		margin: 0;
+
+		> .sidebar {
+			border-right: solid 0.5px var(--divider);
+		}
+
+		> .main {
+			margin: 0;
+			border-radius: 0;
+			box-shadow: none;
+			width: 100%;
+		}
+	}
+}
+.nav {
+	position: fixed;
+	z-index: 1000;
+	bottom: 0;
+	left: 0;
+	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	grid-gap: 8px;
+	width: 100%;
+	box-sizing: border-box;
+	-webkit-backdrop-filter: var(--blur, blur(24px));
+	backdrop-filter: var(--blur, blur(24px));
+	background-color: var(--bg);
+	border-top: solid 0.5px var(--divider);
+	height: 52px;
+}
+
+.menuDrawerBg {
+	z-index: 1001;
+}
+
+.menuDrawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	height: 100dvh;
+	width: 240px;
+	box-sizing: border-box;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--navBg);
+}
+
+.navButton{
+	font-size: 1.5em;
+}
+.widgetsDrawerBg {
+	z-index: 1001;
+}
+
+.widgetsDrawer {
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 1001;
+	width: 310px;
+	height: 100dvh;
+	padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important;
+	box-sizing: border-box;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--bg);
+}
+.widgetsCloseButton {
+	padding: 8px;
+	display: block;
+	margin: 0 auto;
+}
+</style>