From 37235b0013ee9011050cb7d755adc6f591b24c92 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Thu, 25 May 2023 10:01:59 +0900
Subject: [PATCH] Remove deprecate files (friendly)

---
 .../ui/friendly-legacy-2/friendly.header.vue  | 314 --------
 .../ui/friendly-legacy-2/friendly.side.vue    | 162 ----
 .../ui/friendly-legacy-2/friendly.sidebar.vue | 631 ---------------
 .../src/ui/friendly-legacy-2/friendly.vue     | 612 ---------------
 .../ui/friendly-legacy-2/friendly.widgets.vue |  84 --
 .../src/ui/friendly-legacy-2/header.vue       | 465 -----------
 .../src/ui/friendly-legacy-2/sidebar.vue      | 735 ------------------
 .../src/ui/friendly-legacy/friendly.side.vue  | 162 ----
 .../ui/friendly-legacy/friendly.sidebar.vue   | 426 ----------
 .../src/ui/friendly-legacy/friendly.vue       | 581 --------------
 .../ui/friendly-legacy/friendly.widgets.vue   |  84 --
 .../src/ui/friendly-legacy/header.vue         | 309 --------
 .../src/ui/friendly-legacy/sidebar.vue        | 540 -------------
 .../src/ui/friendly-old-2/friendly.side.vue   | 158 ----
 .../src/ui/friendly-old-2/friendly.vue        | 506 ------------
 .../ui/friendly-old-2/friendly.widgets.vue    |  79 --
 .../frontend/src/ui/friendly-old-2/header.vue | 437 -----------
 .../src/ui/friendly-old-2/sidebar-mobile.vue  | 656 ----------------
 .../src/ui/friendly-old-2/sidebar.vue         | 656 ----------------
 .../src/ui/friendly-old/friendly.header.vue   | 314 --------
 .../src/ui/friendly-old/friendly.side.vue     | 162 ----
 .../src/ui/friendly-old/friendly.sidebar.vue  | 631 ---------------
 .../frontend/src/ui/friendly-old/friendly.vue | 600 --------------
 .../src/ui/friendly-old/friendly.widgets.vue  |  84 --
 .../frontend/src/ui/friendly-old/header.vue   | 556 -------------
 .../frontend/src/ui/friendly-old/sidebar.vue  | 735 ------------------
 26 files changed, 10679 deletions(-)
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/friendly.header.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/friendly.side.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/friendly.sidebar.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/friendly.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/friendly.widgets.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/header.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy-2/sidebar.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy/friendly.side.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy/friendly.sidebar.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy/friendly.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy/friendly.widgets.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy/header.vue
 delete mode 100644 packages/frontend/src/ui/friendly-legacy/sidebar.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old-2/friendly.side.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old-2/friendly.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old-2/friendly.widgets.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old-2/header.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old-2/sidebar-mobile.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old-2/sidebar.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/friendly.header.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/friendly.side.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/friendly.sidebar.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/friendly.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/friendly.widgets.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/header.vue
 delete mode 100644 packages/frontend/src/ui/friendly-old/sidebar.vue

diff --git a/packages/frontend/src/ui/friendly-legacy-2/friendly.header.vue b/packages/frontend/src/ui/friendly-legacy-2/friendly.header.vue
deleted file mode 100644
index c9d171c96f..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/friendly.header.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-<div class="azykntjl">
-	<div class="body">
-		<div class="left">
-			<MkA class="item index" active-class="active" to="/" exact v-click-anime v-tooltip="$ts.timeline">
-				<i class="fas fa-home fa-fw"></i>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime v-tooltip="$ts[menuDef[item].title]">
-					<i class="fa-fw" :class="menuDef[item].icon"></i>
-					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.instance">
-				<i class="fas fa-server fa-fw"></i>
-			</MkA>
-			<button class="item _button" @click="more" v-click-anime>
-				<i class="fas fa-ellipsis-h fa-fw"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-			</button>
-		</div>
-		<div class="right">
-			<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.settings">
-				<i class="fas fa-cog fa-fw"></i>
-			</MkA>
-			<button class="item _button account" @click="openProfile" v-click-anime>
-				<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-			</button>
-			<button class="_button toggler" @click="openAccountMenu">
-				<i class="fas fa-chevron-down"/>
-			</button>
-			<div class="post" @click="post">
-				<MkButton class="button" gradate full>
-					<i class="fas fa-pencil-alt fa-fw"></i>
-				</MkButton>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-import MkButton from '@client/components/ui/button.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			settingsWindowed: false,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			await os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${this.$i.username}`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => {
-							this.addAccount();
-						},
-					}, {
-						text: this.$ts.createAccount,
-						action: () => {
-							this.createAccount();
-						},
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => {
-							this.signout();
-						},
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => {
-							this.signoutAll();
-						},
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.azykntjl {
-	$height: 60px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	position: sticky;
-	top: 0;
-	z-index: 1000;
-	width: 100%;
-	height: $height;
-	background-color: var(--bg);
-
-	> .body {
-		max-width: 1380px;
-		margin: 0 auto;
-		display: flex;
-
-		> .right,
-		> .left {
-
-			> .item {
-				position: relative;
-				font-size: 0.9em;
-				display: inline-block;
-				padding: 0 12px;
-				line-height: $height;
-
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
-
-				> i {
-					left: 10px;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
-					position: absolute;
-					bottom: 10px;
-					right: 0;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-			}
-
-			> .divider {
-				display: inline-block;
-				height: 16px;
-				margin: 0 10px;
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .post {
-				display: inline-block;
-			
-				> .button {
-					width: 40px;
-					height: 40px;
-					padding: 0;
-					min-width: 0;
-				}
-			}
-
-			> .account {
-				display: inline-flex;
-				align-items: center;
-				vertical-align: top;
-
-				> .name {
-					margin-left: 10px;
-					font-weight: bold;
-				}
-			}
-
-			> .toggler {
-				position: relative;
-				right: 5px;
-				width: 36px;
-				height: 36px;
-			}
-		}
-
-		> .right {
-			margin-left: auto;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy-2/friendly.side.vue b/packages/frontend/src/ui/friendly-legacy-2/friendly.side.vue
deleted file mode 100644
index 0ad6f18b0a..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/friendly.side.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-<div class="qvzfzxam _narrow_" v-if="component">
-	<div class="container">
-		<header class="header" @contextmenu.prevent.stop="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
-			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
-			<XHeader class="title" :info="pageInfo" :with-back="false"/>
-			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
-		</header>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XHeader from './friendly/header.vue';
-import * as os from '@client/os';
-import copyToClipboard from '@client/scripts/copy-to-clipboard';
-import { resolve } from '@client/router';
-import { url } from '@client/config';
-import * as symbols from '@client/symbols';
-
-export default defineComponent({
-	components: {
-		XHeader
-	},
-
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			}
-		};
-	},
-
-	data() {
-		return {
-			path: null,
-			component: null,
-			props: {},
-			pageInfo: null,
-			history: [],
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record && this.path) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		close() {
-			this.path = null;
-			this.component = null;
-			this.props = {};
-		},
-
-		onContextmenu(e) {
-			os.contextMenu([{
-				type: 'label',
-				text: this.path,
-			}, {
-				icon: 'fas fa-expand-alt',
-				text: this.$ts.showInPage,
-				action: () => {
-					this.$router.push(this.path);
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(this.path);
-					this.close();
-				}
-			}, null, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				}
-			}], e);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qvzfzxam {
-	$header-height: 58px; // TODO: どこかに集約したい
-
-	--root-margin: 16px;
-	--margin: var(--marginHalf);
-
-	> .container {
-		position: fixed;
-		width: 370px;
-		height: 100vh;
-		overflow: auto;
-		box-sizing: border-box;
-
-		> .header {
-			display: flex;
-			position: sticky;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			font-weight: bold;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
-			background-color: var(--header);
-
-			> ._button {
-				height: $header-height;
-				width: $header-height;
-
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			> .title {
-				flex: 1;
-				position: relative;
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/frontend/src/ui/friendly-legacy-2/friendly.sidebar.vue b/packages/frontend/src/ui/friendly-legacy-2/friendly.sidebar.vue
deleted file mode 100644
index 4e02e50665..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/friendly.sidebar.vue
+++ /dev/null
@@ -1,631 +0,0 @@
-<template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = isAccountMenuMode = false"
-			@touchstart.passive="showing = isAccountMenuMode = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav">
-			<div class="profile">
-				<button v-if="!iconOnly" class="item _button account" @click="openProfile">
-					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-				</button>
-				<button v-if="iconOnly" class="item _button account" @click="openAccountMenu">
-					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-				</button>
-				<button v-else class="_button toggler" @click="toggleMenuMode">
-					<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
-					<i v-else class="fas fa-chevron-down"/>
-				</button>
-			</div>
-			<template v-if="!isAccountMenuMode">
-				<div class="post" @click="post">
-					<MkButton class="button" gradate full rounded>
-						<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
-					</MkButton>
-				</div>
-				<div class="divider"></div>
-				<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-				</MkA>
-				<template v-for="item in menu">
-					<div v-if="item === '-'" class="divider"></div>
-					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</component>
-				</template>
-				<div class="divider"></div>
-				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
-				</MkA>
-				<button class="item _button" @click="more" v-click-anime>
-					<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-				</button>
-				<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-				</MkA>
-				<div class="divider"></div>
-				<template v-if="$i.isPatron">
-					<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
-						<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
-					</button>
-					<button v-else class="patron-button _button" @click="patron" v-click-anime>
-						<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
-					</button>
-				</template>
-				<button v-else class="patron-button _button" @click="patron" v-click-anime>
-					<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
-				</button>
-				<div class="divider"></div>
-				<div class="about">
-					<MkA class="link" to="/about" v-click-anime>
-						<template v-if="isKokonect">
-							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-							<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
-							<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
-						</template>
-						<template v-else>
-							<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-						</template>
-					</MkA>
-				</div>
-				<!--<MisskeyLogo class="misskey"/>-->
-			</template>
-			<template v-else>
-				<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
-					<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
-				</button>
-				<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
-				<div class="divider"></div>
-				<button class="item-switch-acct _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
-				<button class="item-switch-acct danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
-			</template>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-import MkButton from '@client/components/ui/button.vue';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import MisskeyLogo from '@/../assets/client/misskey.svg';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MisskeyLogo,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			settingsWindowed: false,
-			isAccountMenuMode: false,
-			loadingAccounts: false,
-			showing: false,
-			isKokonect: null
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.isAccountMenuMode = false;
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
-
-		this.init();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async fetchAccounts() {
-			this.loadingAccounts = true;
-			this.accounts = await os.getAccounts();
-			this.loadingAccounts = false;
-		},
-
-		toggleMenuMode() {
-			this.isAccountMenuMode = !this.isAccountMenuMode;
-			if (this.isAccountMenuMode) {
-				this.fetchAccounts();
-			}
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => { this.signout(); },
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => { this.signoutAll(); },
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		patron() {
-			window.open("https://www.patreon.com/noridev", "_blank");
-		},
-
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
-		},
-
-		async openDrawerAccountMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.existingAccount,
-				action: () => { this.addAccount(); },
-			}, {
-				text: this.$ts.createAccount,
-				action: () => { this.createAccount(); },
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		async openSignoutMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.logout,
-				action: () => { this.signout(); },
-				danger: true,
-			}, {
-				text: this.$ts.logoutAll,
-				action: () => { this.signoutAll(); },
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.npcljfve {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-	$avatar-size: 46px;
-	$avatar-margin: 8px;
-
-	padding: 0 16px;
-	box-sizing: border-box;
-	width: 260px;
-
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width !important;
-
-		> .nav {
-			> .divider {
-				margin: 8px auto;
-				width: calc(100% - 32px);
-			}
-
-			> .post {
-				> .button {
-					width: 46px;
-					height: 46px;
-					padding: 0;
-				}
-
-				@media (max-width: (850px)) {
-					display: none;
-				}
-			}
-
-			> .item,
-				.patron-button {
-				padding-left: 0;
-				width: 100%;
-				text-align: center;
-				font-size: $ui-font-size * 1.1;
-				line-height: 3.7rem;
-				overflow: unset;
-
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
-
-				> i {
-					left: 10px;
-				}
-
-				> .text,
-					.name,
-					.patron-text {
-					display: none;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: unset;
-					bottom: 11px;
-					left: 33px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .patron,
-				.not-patron {
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	> .nav {
-		> .divider {
-			margin: 10px 0;
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .post {
-			position: sticky;
-			top: 65px;
-			z-index: 1;
-			padding: 16px 0;
-			background: var(--bg);
-
-			> .button {
-				min-width: 0;
-			}
-		}
-
-		> .about {
-			fill: currentColor;
-			padding: 8px 0 16px 0;
-			text-align: center;
-
-			> .link {
-				display: block;
-				//width: 32px;
-				margin: 0 auto;
-
-				img {
-					display: block;
-					width: 100%;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-			}
-		}
-
-		> .item,
-			.patron-button {
-			position: relative;
-			display: block;
-			font-size: $ui-font-size;
-			line-height: 2.6rem;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-
-			> i {
-				width: 32px;
-				margin-left: 3px;
-				margin-right: $avatar-margin;
-			}
-
-			> .avatar {
-				margin-left: unset;
-				margin-right: $avatar-margin;
-				width: $avatar-size;
-				height: $avatar-size;
-				vertical-align: middle;
-			}
-
-			> .name {
-				margin-left: 10px;
-				font-weight: bold;
-			}
-
-			> .indicator {
-				position: absolute;
-				bottom: 10px;
-				left: 0;
-				color: var(--navIndicator);
-				font-size: 7px;
-				animation: blink 1s infinite;
-			}
-
-			> .patron,
-				.not-patron {
-				margin-left: 6px;
-				margin-right: 12px;
-			}
-
-			> .patron {
-				color: var(--patron);
-			}
-
-			> .patron-text {
-				font-size: 0.9em;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-
-			&.active {
-				color: var(--navActive);
-			}
-		}
-
-		> .item-switch-acct {
-			position: relative;
-			display: block;
-			font-size: $ui-font-size;
-			line-height: 3rem;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-			padding-left: 12px;
-
-			> i {
-				width: 32px;
-				margin-left: 3px;
-				margin-right: $avatar-margin;
-			}
-
-			> .avatar {
-				margin-left: unset;
-				margin-right: $avatar-margin;
-				width: $avatar-size;
-				height: $avatar-size;
-				vertical-align: middle;
-			}
-
-			> .name {
-				margin-left: 10px;
-				font-weight: bold;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-
-			&.active {
-				color: var(--navActive);
-			}
-
-			&.danger {
-				color: red;
-			}
-		}
-
-		> .patron-button {
-			background: unset;
-			border: unset;
-		}
-
-		> .profile {
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			background: var(--bg);
-			padding: 10px 0 0 0;
-
-			> .item {
-				position: relative;
-				display: block;
-				font-size: $ui-font-size;
-				line-height: 2.6rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-
-				> i {
-					width: 32px;
-					margin-left: 3px;
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					margin-left: unset;
-					margin-right: $avatar-margin;
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 10px;
-					font-weight: bold;
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-			}
-
-			> .account {
-				padding: 10px 20px 0 0;
-			}
-
-			> .toggler {
-				position: absolute;
-				right: 0;
-				top: 25px;
-				width: 36px;
-				height: 36px;
-				z-index: 400;
-			}
-		}
-
-		> .account {
-			padding: 20px 0 0;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy-2/friendly.vue b/packages/frontend/src/ui/friendly-legacy-2/friendly.vue
deleted file mode 100644
index d31c6c7d6a..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/friendly.vue
+++ /dev/null
@@ -1,612 +0,0 @@
-<template>
-<div class="mk-app" :class="{ wallpaper, isMobile }">
-	<XHeaderMenu v-if="showMenuOnTop"/>
-
-	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<template v-if="!isMobile">
-			<div class="sidebar" v-if="!showMenuOnTop">
-				<XSidebar/>
-			</div>
-			<div class="widgets left" ref="widgetsLeft" v-else>
-				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
-			</div>
-		</template>
-
-		<main class="main _panel" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<header class="header">
-				<XHeader @kn-drawernav="showDrawerNav" :info="pageInfo" :back-button="true" @back="back()"/>
-			</header>
-			<div class="content">
-				<router-view v-slot="{ Component }">
-					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-						<keep-alive :include="['timeline']">
-							<component :is="Component" :ref="changePage"/>
-						</keep-alive>
-					</transition>
-				</router-view>
-			</div>
-		</main>
-
-		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
-			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
-		</div>
-	</div>
-
-	<button v-if="fabButton && !(isDesktop || isWideTablet)" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
-
-	<div class="buttons" v-if="isMobile">
-		<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
-		<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
-		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
-	</div>
-
-	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
-
-	<transition name="tray-back">
-		<div class="tray-back _modalBg"
-			v-if="widgetsShowing"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition name="tray">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
-
-	<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
-import { instanceName } from '@client/config';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import XSidebar from './friendly.sidebar.vue';
-import XDrawerSidebar from './sidebar.vue';
-import XCommon from '../_common_/common.vue';
-import XHeader from './header.vue';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import * as symbols from '@client/symbols';
-import XTimeline from '@client/components/timeline.vue';
-import { eventBus } from '@client/friendly/eventBus';
-
-const DESKTOP_THRESHOLD = 1100;
-const WIDE_TABLET_THRESHOLD = 850;
-const MOBILE_THRESHOLD = 600;
-
-localStorage.setItem('ui', 'friendly');
-
-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar,
-		XDrawerSidebar,
-		XHeader,
-		XTimeline,
-		XHeaderMenu: defineAsyncComponent(() => import('./friendly.header.vue')),
-		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
-	},
-
-	provide() {
-		return {
-			shouldHeaderThin: this.showMenuOnTop,
-		};
-	},
-
-	data() {
-		return {
-			pageInfo: null,
-			menuDef: menuDef,
-			navHidden: false,
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			widgetsShowing: false,
-			fullView: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-			queue: 0,
-			routeList: [
-				'index',
-				'explore',
-				'notifications',
-				'messaging',
-				'user',
-				'drive',
-				'clips',
-				'pages',
-				'ads',
-				'gallery',
-				'channels',
-				'groups',
-				'antennas'
-			],
-			fabButton: false
-		};
-	},
-
-	computed: {
-		navIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-
-		fabIcon() {
-			return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
-		},
-
-		showMenuOnTop(): boolean {
-			return !this.isMobile && this.$store.state.menuDisplay === 'top';
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-
-		if (this.$store.state.widgets.length === 0) {
-			this.$store.set('widgets', [{
-				name: 'calendar',
-				id: 'a', place: null, data: {}
-			}, {
-				name: 'notifications',
-				id: 'b', place: null, data: {}
-			}, {
-				name: 'trends',
-				id: 'c', place: null, data: {}
-			}]);
-		}
-
-		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
-		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
-	},
-
-	mounted() {
-		window.addEventListener('resize', () => {
-			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
-			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
-		}, { passive: true });
-
-		this.navHidden = this.isMobile;
-
-		if (this.$store.state.aiChanMode) {
-			const iframeRect = this.$refs.live2d.getBoundingClientRect();
-			window.addEventListener('mousemove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.clientX - iframeRect.left,
-						y: ev.clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-			window.addEventListener('touchmove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.touches[0].clientX - iframeRect.left,
-						y: ev.touches[0].clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-				document.title = `${this.pageInfo.title} | ${instanceName}`;
-				this.fabButton = this.routeList.includes(this.$route.name);
-			}
-		},
-
-		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-			window.addEventListener('scroll', () => {
-				sticky.calc(window.scrollY);
-			}, { passive: true });
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		back() {
-			history.back();
-		},
-
-		showDrawerNav() {
-			this.$refs.drawerNav.show();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		onContextmenu(e) {
-			const isLink = (el: HTMLElement) => {
-				if (el.tagName === 'A') return true;
-				if (el.parentElement) {
-					return isLink(el.parentElement);
-				}
-			};
-			if (isLink(e.target)) return;
-			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
-			if (window.getSelection().toString() !== '') return;
-			const path = this.$route.path;
-			os.contextMenu([{
-				type: 'label',
-				text: path,
-			}, {
-				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
-				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
-				action: () => {
-					this.fullView = !this.fullView;
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				}
-			}], e);
-		},
-
-		queueUpdated(q) {
-			this.queue = q;
-		},
-
-		queueReset() {
-			this.queue = 0;
-		},
-
-		onFabClicked(e) {
-			if (this.pageInfo && this.pageInfo.action) {
-				this.pageInfo.action.handler(e);
-			} else {
-				os.post_form();
-			}
-		},
-
-		onAiClick(ev) {
-			//if (this.live2d) this.live2d.click(ev);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.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;
-}
-
-.mk-app {
-	$nav-hide-threshold: 600px;
-	$header-height: 60px;
-	$ui-font-size: 1em;
-	$widgets-hide-threshold: 1200px;
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
-	box-sizing: border-box;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: blur(4px);
-	}
-
-	&.isMobile {
-		> .columns {
-			display: block;
-			margin: 0;
-
-			> .main {
-				margin: 0;
-				padding-bottom: 92px;
-				border: none;
-				width: 100%;
-				border-radius: 0;
-
-				> .header {
-					width: 100%;
-				}
-			}
-		}
-
-		> .buttons {
-			> .button {
-				&:hover {
-					background: var(--panel);
-				}
-			}
-		}
-	}
-
-	> .columns {
-		display: flex;
-		justify-content: center;
-		max-width: 100%;
-		//margin: 32px 0;
-
-		&.fullView {
-			margin: 0;
-		
-			> .sidebar {
-				display: none;
-			}
-
-			> .widgets {
-				display: none;
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-
-		> .main {
-			min-width: 0;
-			width: 750px;
-			margin: 0 16px 0 0;
-			background: var(--bg);
-			box-shadow: 0 0 0 1px var(--divider);
-			border-radius: 0;
-			border: initial;
-			--margin: 12px;
-
-			> .header {
-				position: sticky;
-				z-index: 1000;
-				top: var(--globalHeaderHeight, 0px);
-				height: $header-height;
-				line-height: $header-height;
-				-webkit-backdrop-filter: blur(32px);
-				backdrop-filter: blur(32px);
-				background-color: var(--header);
-			}
-
-			> .content {
-				background: var(--bg);
-				--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
-			}
-
-			@media (max-width: 850px) {
-				padding-top: $header-height;
-
-				> .header {
-					position: fixed;
-					width: calc(100% - #{$nav-icon-only-width});
-				}
-			}
-		}
-
-		> .widgets {
-			//--panelShadow: none;
-			width: 300px;
-			margin-top: 16px;
-
-			@media (max-width: $widgets-hide-threshold) {
-				display: none;
-			}
-
-			&.left {
-				margin-right: 16px;
-			}
-		}
-
-		> .sidebar {
-			margin-top: 16px;
-		}
-
-		&.withGlobalHeader {
-			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
-
-			> .main {
-				margin-top: 1px;
-				border-radius: var(--radius);
-				box-shadow: 0 0 0 1px var(--divider);
-			}
-
-			> .widgets {
-				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 1px;
-			}
-		}
-
-		@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%;
-			}
-		}
-	}
-
-	> .fab {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		right: calc(32px + var(--margin) * 2 + 300px);
-		bottom: 32px;
-		width: 55px;
-		height: 55px;
-		border-radius: 100%;
-		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
-		background: var(--accent);
-		color: white;
-
-		@media (max-width: $widgets-hide-threshold) {
-			right: 30px;
-		}
-
-		@media (max-width: $nav-hide-threshold) {
-			bottom: calc(66px + env(safe-area-inset-bottom));
-			right: 15px;
-		}
-
-		@media (min-width: (850px) + 1px) {
-			display: none;
-		}
-
-		@media (min-width: (600px) + 1px) {
-			bottom: calc(45px + env(safe-area-inset-bottom));
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		//padding: 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
-
-		> .button {
-			position: relative;
-			flex: 1;
-			//padding: 0;
-			margin: auto;
-			height: 50px;
-			//border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
-			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
-
-			&:not(:last-child) {
-				//margin-right: 12px;
-			}
-
-			@media (max-width: 300px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			&.active {
-					color: var(--accent);
-			}
-
-			> .indicator,
-				.indicator-home {
-				position: absolute;
-				top: 7px;
-				right: 20px;
-				color: var(--indicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
-			> .indicator-home {
-				top: 8px;
-				right: 25px;
-				font-size: 6px;
-				animation: none;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 18px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .tray-back {
-		z-index: 1001;
-	}
-
-	> .tray {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		padding: var(--margin);
-		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;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy-2/friendly.widgets.vue b/packages/frontend/src/ui/friendly-legacy-2/friendly.widgets.vue
deleted file mode 100644
index 873a561a0d..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/friendly.widgets.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<div class="ddiqwdnk">
-	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-	<MkAd v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" class="a" :prefer="['square']"/>
-
-	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@client/components/widgets.vue';
-
-export default defineComponent({
-	components: {
-		XWidgets
-	},
-
-	props: {
-		place: {
-			type: String,
-		}
-	},
-
-	emits: ['mounted'],
-
-	data() {
-		return {
-			editMode: false,
-		};
-	},
-
-	mounted() {
-		this.$emit('mounted', this.$el);
-	},
-
-	methods: {
-		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: this.place,
-			}, ...this.$store.state.widgets]);
-		},
-
-		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
-		},
-
-		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data: data
-			} : w));
-		},
-
-		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
-			]);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ddiqwdnk {
-	position: sticky;
-	height: min-content;
-	box-sizing: border-box;
-	padding-bottom: 8px;
-
-	> .widgets,
-	> .a {
-		width: 300px;
-	}
-
-	> .edit {
-		display: block;
-		margin: 28px auto;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy-2/header.vue b/packages/frontend/src/ui/friendly-legacy-2/header.vue
deleted file mode 100644
index 0f54e681e1..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/header.vue
+++ /dev/null
@@ -1,465 +0,0 @@
-<template>
-<div class="fdidabkb" :class="{ slim: titleOnly || narrow }" :style="`--height:${height};`" :key="key">
-	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
-		<div class="buttons left" v-if="backButton && canBack && !fabButton">
-			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
-		</div>
-	</transition>
-	<div class="buttons left" v-if="isMobile">
-		<button class="_button button" v-if="!(backButton && canBack) || fabButton" @click="showDrawerNav">
-			<MkAvatar class="avatar" v-if="!canBack || menuBar" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
-			<!-- <i class="fas fa-bars"/> -->
-			<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
-		</button>
-	</div>
-	<template v-if="info">
-		<div class="titleContainer" :class="{ center: $route.name !== 'user' }" @click="showTabsPopup">
-			<template v-if="info.tabs">
-				<template v-if="$route.name === 'user'">
-					<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-					<div class="title_user">
-						<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
-						<div class="subtitle" v-if="!narrow && info.subtitle">
-							{{ info.subtitle }}
-						</div>
-						<div class="subtitle activeTab" v-if="narrow && hasTabs">
-							{{ info.tabs.find(tab => tab.active)?.title }}
-							<i class="chevron fas fa-chevron-down"></i>
-						</div>
-					</div>
-				</template>
-				<div class="title tabs" v-else v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
-					<i v-if="tab.icon" class="fa-fw" :class="tab.icon" :key="tab.icon"/>
-					<span v-if="tab.title" class="title">{{ tab.title }}</span>
-					<i class="fas fa-circle indicator" v-if="tab.indicate"/>
-				</div>
-			</template>
-
-			<template v-else>
-				<i v-if="info.icon" class="icon" :class="info.icon"></i>
-				<div class="title">
-					<div v-if="info.title" class="title">{{ info.title }}</div>
-				</div>
-			</template>
-		</div>
-		<div class="tabs" v-if="!narrow && $route.name !== 'index'">
-			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-		</div>
-	</template>
-
-	<div class="buttons right">
-		<button v-if="queue > 0 && $route.name === 'index' && ($store.state.newNoteNotiBehavior === 'smail' || $store.state.newNoteNotiBehavior === 'header')" :class="{ 'new _button': $store.state.newNoteNotiBehavior === 'header', 'new-hover _buttonPrimary': $store.state.newNoteNotiBehavior === 'smail' }" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
-		<template v-if="info && info.actions && !narrow">
-			<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
-		</template>
-		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
-		<button v-if="closeButton" class="_button button" @click.stop="$emit('close')" @touchstart="preventDrag" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { popupMenu } from '@client/os';
-import { url } from '@client/config';
-import { eventBus } from "@client/friendly/eventBus";
-
-const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 600;
-
-export default defineComponent({
-	props: {
-		info: {
-			required: true
-		},
-		menu: {
-			required: false
-		},
-		backButton: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		closeButton: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		titleOnly: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		showIndicator: {
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			canBack: false,
-			narrow: false,
-			height: 0,
-			key: 0,
-			queue: 0,
-			routeList: [
-				'explore',
-				'notifications',
-				'messaging'
-			],
-			fabButton: false,
-			menuBar: false,
-		};
-	},
-
-	computed: {
-		hasTabs(): boolean {
-			return this.info.tabs && this.info.tabs.length > 0;
-		},
-
-		shouldShowMenu() {
-			if (this.info == null) return false;
-			if (this.info.actions != null && this.narrow) return true;
-			if (this.info.menu != null) return true;
-			if (this.info.share != null) return true;
-			if (this.menu != null) return true;
-			return false;
-		}
-	},
-
-	watch: {
-		info() {
-			this.key++;
-		},
-
-		$route: {
-			handler(to, from) {
-				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
-				this.fabButton = this.routeList.includes(this.$route.name);
-				this.menuBar = this.routeList.includes(this.$route.name);
-			},
-			immediate: true
-		},
-	},
-
-	created() {
-		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
-		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
-	},
-
-	mounted() {
-		this.height = this.$el.parentElement.offsetHeight + 'px';
-		this.narrow = this.titleOnly || window.innerWidth < 600;
-		new ResizeObserver((entries, observer) => {
-			this.height = this.$el.parentElement.offsetHeight + 'px';
-			this.narrow = this.titleOnly || window.innerWidth < 600;
-		}).observe(this.$el);
-	},
-
-	methods: {
-		share() {
-			navigator.share({
-				url: url + this.info.path,
-				...this.info.share,
-			});
-		},
-
-		showDrawerNav() {
-			this.$emit('kn-drawernav');
-		},
-
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		showMenu(ev) {
-			let menu = this.info.menu ? this.info.menu() : [];
-			if (!this.narrow && this.info.actions) {
-				menu = [...this.info.actions.map(x => ({
-					text: x.text,
-					icon: x.icon,
-					action: x.handler
-				})), menu.length > 0 ? null : undefined, ...menu];
-			}
-			if (this.info.share) {
-				if (menu.length > 0) menu.push(null);
-				menu.push({
-					text: this.$ts.share,
-					icon: 'fas fa-share-alt',
-					action: this.share
-				});
-			}
-			if (this.menu) {
-				if (menu.length > 0) menu.push(null);
-				menu = menu.concat(this.menu);
-			}
-			popupMenu(menu, ev.currentTarget || ev.target);
-		},
-
-		showTabsPopup(ev) {
-			if (!this.hasTabs) return;
-			if (!this.narrow) return;
-			ev.preventDefault();
-			ev.stopPropagation();
-			const menu = this.info.tabs.map(tab => ({
-				text: tab.title,
-				icon: tab.icon,
-				action: tab.onClick,
-			}));
-			popupMenu(menu, ev.currentTarget || ev.target);
-		},
-
-		preventDrag(ev) {
-			ev.stopPropagation();
-		},
-
-		queueUpdated(q) {
-			this.queue = q;
-		},
-
-		queueReset() {
-			this.queue = 0;
-		},
-
-		top() {
-			this.onHeaderClick();
-			this.queueReset();
-			eventBus.emit('kn-header-new-queue-reset', 0);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	$ui-font-size: 1em;
-	$avatar-size: 32px;
-	$avatar-margin: 10px;
-
-	display: flex;
-
-	&.slim {
-		text-align: center;
-
-		> .titleContainer {
-			margin: 0 auto;
-		}
-	}
-
-	> .buttons {
-		&.left, &.right {
-			>.button {
-				height: var(--height);
-				width: var(--height);
-			}
-		}
-
-		&.left {
-			position: relative;
-			z-index: 1;
-			top: 0;
-			left: 0;
-
-			> .button {
-				height: var(--height);
-				width: var(--height);
-
-				> .indicator {
-					position: absolute;
-					bottom: 13px;
-					left: 43px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-			}
-
-			@media (max-width: 600px) {
-				position: absolute;
-			}
-		}
-
-		&.right {
-			position: absolute;
-			z-index: 1;
-			top: 0;
-			right: 0;
-			margin-left: 0;
-
-			> .new {
-				width: $avatar-size;
-				height: var(--height);
-			}
-
-			> .new-hover {
-				position: absolute;
-				width: $avatar-size;
-				height: $avatar-size;
-				top: 55px;
-				right: 14px;
-				border-radius: 100%;
-				// border: 2px solid var(--patron);
-				line-height: 0;
-				background: var(--pick);
-				margin-top: 10px;
-				// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-
-				&:hover {
-					background: var(--pickLighten);
-				}
-			}
-		}
-
-		&:empty {
-			width: var(--height);
-		}
-	}
-
-	> .titleContainer {
-		display: flex;
-		align-items: center;
-		overflow: auto;
-		white-space: nowrap;
-		text-align: left;
-		font-weight: bold;
-		height: var(--height);
-		flex-shrink: 0;
-
-		> .avatar {
-			$size: 32px;
-			display: inline-block;
-			width: $size;
-			height: $size;
-			vertical-align: bottom;
-			margin: 0 8px;
-			pointer-events: none;
-		}
-
-		> .icon {
-			margin-right: 8px;
-		}
-
-		> .title,
-			.title_user {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> .indicator {
-				position: absolute;
-				top: 13px;
-				right: 7px;
-				color: var(--indicator);
-				font-size: 7px;
-				animation: blink 1s infinite;
-			}
-
-			> .patron {
-				margin-left: 0.5em;
-				color: var(--patron);
-			}
-
-			> .subtitle {
-				opacity: 0.6;
-				font-size: 0.8em;
-				font-weight: normal;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-
-				&.activeTab {
-					text-align: center;
-
-					> .chevron {
-						display: inline-block;
-						margin-left: 6px;
-					}
-				}
-			}
-
-			&._button {
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			&.selected {
-				box-shadow: 0 -2px 0 0 var(--accent) inset;
-				color: var(--fgHighlighted);
-			}
-		}
-
-		> .title {
-			display: inline-block;
-			vertical-align: bottom;
-			position: relative;
-		}
-
-		> .title_user {
-			min-width: 0;
-			line-height: 1.1;
-		}
-
-		&.center {
-			margin: 0 auto;
-		}
-
-		> .tabs {
-			padding: 0 16px;
-		}
-	}
-
-	> .tabs {
-		margin-left: 16px;
-		font-size: 0.8em;
-		overflow: auto;
-		white-space: nowrap;
-
-		> .tab {
-			display: inline-block;
-			position: relative;
-			padding: 0 10px;
-			height: 100%;
-			font-weight: normal;
-			opacity: 0.7;
-
-			&:hover {
-				opacity: 1;
-			}
-
-			&.active {
-				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
-			}
-
-			> .icon + .title {
-				margin-left: 8px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy-2/sidebar.vue b/packages/frontend/src/ui/friendly-legacy-2/sidebar.vue
deleted file mode 100644
index 8a4a4d2663..0000000000
--- a/packages/frontend/src/ui/friendly-legacy-2/sidebar.vue
+++ /dev/null
@@ -1,735 +0,0 @@
-<template>
-<div class="mvcprjjd">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = isAccountMenuMode = false"
-			@touchstart.passive="showing = isAccountMenuMode = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
-			<div>
-				<div class="profile">
-					<button class="item _button account" @click="openProfile">
-						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-					</button>
-					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
-						<i class="fas fa-ellipsis-v"/>
-					</button>
-					<button v-else class="_button toggler" @click="toggleMenuMode">
-						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
-						<i v-else class="fas fa-chevron-down"/>
-					</button>
-				</div>
-				<template v-if="!isAccountMenuMode">
-					<div class="divider"></div>
-					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-					</MkA>
-					<template v-for="item in menu">
-						<div v-if="item === '-'" class="divider"></div>
-						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-						</component>
-					</template>
-					<div class="divider"></div>
-					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
-						<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
-					</MkA>
-					<button class="item _button" @click="more" v-click-anime>
-						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</button>
-					<MkA class="item" active-class="active" to="/settings" v-click-anime>
-						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-					</MkA>
-					<!-- <button class="item _button post" @click="post">
-						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-					</button> -->
-					<div class="divider"></div>
-					<template v-if="$i.isPatron">
-						<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
-							<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
-						</button>
-						<button v-else class="patron-button _button" @click="patron" v-click-anime>
-							<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
-						</button>
-					</template>
-					<button v-else class="patron-button _button" @click="patron" v-click-anime>
-						<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
-					</button>
-					<div class="divider"></div>
-					<div class="about">
-						<MkA class="link" to="/about" v-click-anime>
-							<template v-if="isKokonect">
-								<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-								<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
-							</template>
-							<template v-else>
-								<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-							</template>
-						</MkA>
-					</div>
-				</template>
-				<template v-else>
-					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
-						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
-					</button>
-					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
-					<div class="divider" v-if="accounts.length > 0"></div>
-					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
-					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
-				</template>
-			</div>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/friendly/menu-mobile';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-
-export default defineComponent({
-	props: {
-		defaultHidden: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	data() {
-		return {
-			host: host,
-			showing: false,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			hidden: this.defaultHidden,
-			isAccountMenuMode: false,
-			loadingAccounts: false,
-			isKokonect: null
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-
-		hidden() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		}
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		this.init();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
-			if (!this.defaultHidden) {
-				this.hidden = (window.innerWidth <= 650);
-			}
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async fetchAccounts() {
-			this.loadingAccounts = true;
-			this.accounts = await os.getAccounts();
-			this.loadingAccounts = false;
-		},
-
-		toggleMenuMode() {
-			this.isAccountMenuMode = !this.isAccountMenuMode;
-			if (this.isAccountMenuMode) {
-				this.fetchAccounts();
-			}
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => { this.signout(); },
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => { this.signoutAll(); },
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		patron() {
-			window.open("https://www.patreon.com/noridev", "_blank");
-		},
-
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
-		},
-
-		async openDrawerAccountMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.existingAccount,
-				action: () => { this.addAccount(); },
-			}, {
-				text: this.$ts.createAccount,
-				action: () => { this.createAccount(); },
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		async openSignoutMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.logout,
-				action: () => { this.signout(); },
-				danger: true,
-			}, {
-				text: this.$ts.logoutAll,
-				action: () => { this.signoutAll(); },
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.nav-enter-active,
-.nav-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);
-}
-.nav-enter-from,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter-from,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-
-	> .nav-back {
-		z-index: 1001;
-	}
-
-	> .nav {
-		$avatar-size: 38px;
-		$avatar-margin: 8px;
-
-		flex: 0 0 $nav-width;
-		width: $nav-width;
-		box-sizing: border-box;
-
-		&.iconOnly {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-
-			&:not(.hidden) {
-				> div {
-					width: $nav-icon-only-width;
-
-					> .divider {
-						margin: 8px auto;
-						width: calc(100% - 32px);
-					}
-
-					> .item,
-						.patron-button {
-						padding: 18px 0;
-						width: 100%;
-						text-align: center;
-						font-size: $ui-font-size * 1.1;
-						line-height: initial;
-
-						> i,
-						> .avatar {
-							display: block;
-							margin: 0 auto;
-						}
-
-						> i {
-							opacity: 0.7;
-						}
-
-						> .text,
-							.patron-text {
-							display: none;
-						}
-
-						> .patron,
-							.not-patron {
-							margin: 0;
-						}
-
-						&:hover, &.active {
-							> i, > .text {
-								opacity: 1;
-							}
-						}
-
-						&:first-child {
-							margin-bottom: 8px;
-						}
-
-						&:last-child {
-							margin-top: 8px;
-						}
-					}
-				}
-			}
-		}
-
-		&.hidden {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		&:not(.hidden) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-			height: calc(var(--vh, 1vh) * 100);
-			box-sizing: border-box;
-			overflow: auto;
-			overflow-x: clip;
-			background: var(--navBg);
-
-			> .divider {
-				margin: 16px;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> .about {
-				fill: currentColor;
-				padding: 8px 0 16px 0;
-				text-align: center;
-				
-				> .link {
-					display: block;
-					//width: 32px;
-					margin: 0 auto;
-					
-					img {
-						display: block;
-						width: 100%;
-					}
-
-					&:hover {
-						text-decoration: none;
-					}
-				}
-			}
-
-			> .item,
-				.patron-button {
-				position: relative;
-				display: block;
-				padding: 0 24px;
-				font-size: $ui-font-size;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					position: relative;
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				> .indicator {
-					position: absolute;
-					bottom: 8px;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
-
-				> .patron,
-					.not-patron {
-					margin-left: 6px;
-					margin-right: 12px;
-				}
-
-				> .patron {
-					color: var(--patron);
-				}
-
-				> .patron-text {
-					font-size: 0.9em;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover, &.active {
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 8px;
-						background: var(--accentedBg);
-					}
-				}
-
-				&:last-child {
-					position: sticky;
-					z-index: 1;
-					bottom: 0;
-					margin-top: 16px;
-					border-top: solid 0.5px var(--divider);
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--X14);
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
-					color: var(--fgOnAccent);
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 20px);
-						height: calc(100% - 20px);
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-				}
-			}
-
-			> .item-switch-acct,
-			> .item-button {
-				position: relative;
-				display: block;
-				padding: 12px 24px 0;
-				font-size: $ui-font-size;
-				line-height: 3rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&.danger {
-					color: red;
-				}
-			}
-
-			> .item-button {
-				padding: 0 24px;
-			}
-
-			> .profile {
-				position: sticky;
-				z-index: 1;
-				top: 0;
-				display: flex;
-				text-align: center;
-				justify-content: center;
-				align-items: center;
-				background: var(--X14);
-				-webkit-backdrop-filter: blur(8px);
-				backdrop-filter: blur(8px);
-
-				> .item {
-					position: relative;
-					display: block;
-					padding: 12px 24px 0;
-					font-size: $ui-font-size;
-					line-height: 3rem;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> i {
-						width: 32px;
-					}
-
-					> i,
-					> .avatar {
-						margin-right: $avatar-margin;
-					}
-
-					> .avatar {
-						width: $avatar-size;
-						height: $avatar-size;
-						vertical-align: middle;
-					}
-
-					> .name {
-						margin-left: 5px;
-						font-weight: bold;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover {
-						text-decoration: none;
-						color: var(--navHoverFg);
-					}
-				}
-
-				> .toggler {
-					//position: absolute;
-					//right: 15px;
-					width: 36px;
-					height: 36px;
-					margin: 12px 15px 0 0;
-					padding: 10px;
-					z-index: 400;
-				}
-			}
-
-			> .patron-button {
-				background: unset;
-				border: unset;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy/friendly.side.vue b/packages/frontend/src/ui/friendly-legacy/friendly.side.vue
deleted file mode 100644
index 0ad6f18b0a..0000000000
--- a/packages/frontend/src/ui/friendly-legacy/friendly.side.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-<div class="qvzfzxam _narrow_" v-if="component">
-	<div class="container">
-		<header class="header" @contextmenu.prevent.stop="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
-			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
-			<XHeader class="title" :info="pageInfo" :with-back="false"/>
-			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
-		</header>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XHeader from './friendly/header.vue';
-import * as os from '@client/os';
-import copyToClipboard from '@client/scripts/copy-to-clipboard';
-import { resolve } from '@client/router';
-import { url } from '@client/config';
-import * as symbols from '@client/symbols';
-
-export default defineComponent({
-	components: {
-		XHeader
-	},
-
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			}
-		};
-	},
-
-	data() {
-		return {
-			path: null,
-			component: null,
-			props: {},
-			pageInfo: null,
-			history: [],
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record && this.path) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		close() {
-			this.path = null;
-			this.component = null;
-			this.props = {};
-		},
-
-		onContextmenu(e) {
-			os.contextMenu([{
-				type: 'label',
-				text: this.path,
-			}, {
-				icon: 'fas fa-expand-alt',
-				text: this.$ts.showInPage,
-				action: () => {
-					this.$router.push(this.path);
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(this.path);
-					this.close();
-				}
-			}, null, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				}
-			}], e);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qvzfzxam {
-	$header-height: 58px; // TODO: どこかに集約したい
-
-	--root-margin: 16px;
-	--margin: var(--marginHalf);
-
-	> .container {
-		position: fixed;
-		width: 370px;
-		height: 100vh;
-		overflow: auto;
-		box-sizing: border-box;
-
-		> .header {
-			display: flex;
-			position: sticky;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			font-weight: bold;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
-			background-color: var(--header);
-
-			> ._button {
-				height: $header-height;
-				width: $header-height;
-
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			> .title {
-				flex: 1;
-				position: relative;
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/frontend/src/ui/friendly-legacy/friendly.sidebar.vue b/packages/frontend/src/ui/friendly-legacy/friendly.sidebar.vue
deleted file mode 100644
index 4784f3209a..0000000000
--- a/packages/frontend/src/ui/friendly-legacy/friendly.sidebar.vue
+++ /dev/null
@@ -1,426 +0,0 @@
-<template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<button class="item _button account profile" @click="openProfile" @contextmenu.stop.prevent="openAccountMenu" v-click-anime>
-		<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-	</button>
-	<div class="post" @click="post">
-		<MkButton class="button" gradate full rounded>
-			<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
-		</MkButton>
-	</div>
-	<div class="divider"></div>
-	<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-		<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-	</MkA>
-	<template v-for="item in menu">
-		<div v-if="item === '-'" class="divider"></div>
-		<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-		</component>
-	</template>
-	<div class="divider"></div>
-	<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-		<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
-	</MkA>
-	<button class="item _button" @click="more" v-click-anime>
-		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-	</button>
-	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-	</MkA>
-	<div class="divider"></div>
-	<template v-if="$i.isPatron">
-		<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
-			<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
-		</button>
-		<button v-else class="patron-button _button" @click="patron" v-click-anime>
-			<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
-		</button>
-	</template>
-	<button v-else class="patron-button _button" @click="patron" v-click-anime>
-		<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
-	</button>
-	<div class="divider"></div>
-	<div class="about">
-		<MkA class="link" to="/about" v-click-anime>
-			<template v-if="isKokonect">
-				<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-				<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
-				<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
-			</template>
-			<template v-else>
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-			</template>
-		</MkA>
-	</div>
-	<!--<MisskeyLogo class="misskey"/>-->
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login } from '@client/account';
-import MkButton from '@client/components/ui/button.vue';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import MisskeyLogo from '@/../assets/client/misskey.svg';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MisskeyLogo,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			settingsWindowed: false,
-			isKokonect: null
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
-
-		this.init();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = (await getAccounts()).filter(x => x.id !== this.$i.id);
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			await os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${this.$i.username}`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				icon: 'fas fa-plus',
-				text: this.$ts.addAccount,
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => {
-							this.addAccount();
-						},
-					}, {
-						text: this.$ts.createAccount,
-						action: () => {
-							this.createAccount();
-						},
-					}], ev.currentTarget || ev.target);
-				},
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		switchAccount(account: any) {
-			const storedAccounts = getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		patron() {
-			window.open("https://www.patreon.com/noridev", "_blank");
-		},
-
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.npcljfve {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-	$avatar-size: 46px;
-	$avatar-margin: 8px;
-
-	padding: 0 16px;
-	box-sizing: border-box;
-	width: 260px;
-
-	&.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;
-			}
-
-			@media (max-width: (850px)) {
-				display: none;
-			}
-		}
-
-		> .item,
-			.patron-button {
-			padding-left: 0;
-			width: 100%;
-			text-align: center;
-			font-size: $ui-font-size * 1.1;
-			line-height: 3.7rem;
-			overflow: unset;
-
-			> i,
-			> .avatar {
-				margin-right: 0;
-			}
-
-			> i {
-				left: 10px;
-			}
-
-			> .text,
-				.name,
-				.patron-text {
-				display: none;
-			}
-
-			> .indicator {
-				position: absolute;
-				top: unset;
-				bottom: 11px;
-				left: 33px;
-				color: var(--navIndicator);
-				font-size: 7px;
-				animation: blink 1s infinite;
-			}
-
-			> .patron,
-				.not-patron {
-				margin: 0;
-			}
-		}
-	}
-
-	> .divider {
-		margin: 10px 0;
-		border-top: solid 0.5px var(--divider);
-	}
-
-	> .post {
-		position: sticky;
-		top: 65px;
-		z-index: 1;
-		padding: 16px 0;
-		background: var(--bg);
-
-		> .button {
-			min-width: 0;
-		}
-	}
-
-	> .about {
-		fill: currentColor;
-		padding: 8px 0 16px 0;
-		text-align: center;
-
-		> .link {
-			display: block;
-			//width: 32px;
-			margin: 0 auto;
-
-			img {
-				display: block;
-				width: 100%;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-		}
-	}
-
-	> .item,
-		.patron-button {
-		position: relative;
-		display: block;
-		font-size: $ui-font-size;
-		line-height: 2.6rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		width: 100%;
-		text-align: left;
-		box-sizing: border-box;
-
-		> i {
-			width: 32px;
-			margin-left: 3px;
-			margin-right: $avatar-margin;
-		}
-
-		> .avatar {
-			margin-left: unset;
-			margin-right: $avatar-margin;
-			width: $avatar-size;
-			height: $avatar-size;
-			vertical-align: middle;
-		}
-
-		> .name {
-			margin-left: 10px;
-			font-weight: bold;
-		}
-
-		> .indicator {
-			position: absolute;
-			bottom: 10px;
-			left: 0;
-			color: var(--navIndicator);
-			font-size: 7px;
-			animation: blink 1s infinite;
-		}
-
-		> .patron,
-			.not-patron {
-			margin-left: 6px;
-			margin-right: 12px;
-		}
-
-		> .patron {
-			color: var(--patron);
-		}
-
-		> .patron-text {
-			font-size: 0.9em;
-		}
-
-		&:hover {
-			text-decoration: none;
-			color: var(--navHoverFg);
-		}
-
-		&.active {
-			color: var(--navActive);
-		}
-	}
-
-	> .patron-button {
-		background: unset;
-		border: unset;
-	}
-
-	> .profile {
-		position: sticky;
-		top: 0;
-		z-index: 2;
-		background: var(--bg);
-		padding: 15px 0 0 0;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy/friendly.vue b/packages/frontend/src/ui/friendly-legacy/friendly.vue
deleted file mode 100644
index ed909b33c4..0000000000
--- a/packages/frontend/src/ui/friendly-legacy/friendly.vue
+++ /dev/null
@@ -1,581 +0,0 @@
-<template>
-<div class="mk-app" :class="{ wallpaper, isMobile }">
-	<XHeaderMenu v-if="showMenuOnTop"/>
-
-	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<template v-if="!isMobile">
-			<div class="sidebar" v-if="!showMenuOnTop">
-				<XSidebar/>
-			</div>
-			<div class="widgets left" ref="widgetsLeft" v-else>
-				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
-			</div>
-		</template>
-
-		<main class="main _panel" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<header class="header">
-				<XHeader @kn-drawernav="showDrawerNav" :info="pageInfo"/>
-			</header>
-			<div class="content">
-				<router-view v-slot="{ Component }">
-					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-						<keep-alive :include="['timeline']">
-							<component :is="Component" :ref="changePage"/>
-						</keep-alive>
-					</transition>
-				</router-view>
-			</div>
-		</main>
-
-		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
-			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
-		</div>
-	</div>
-
-	<div class="floatbtn" v-if="!isDesktop">
-		<button v-if="$route.name === 'index' || $route.name === 'notifications' || $route.name === 'user'" class="post _buttonPrimary" @click="post()" v-click-anime><i class="fas fa-pencil-alt"/></button>
-		<button v-if="$route.name === 'messaging'" class="post _buttonPrimary" @click="createMessagingRoom()" v-click-anime><i class="fas fa-plus"/></button>
-		<button v-if="$route.name === 'drive'" class="post _buttonPrimary" @click="driveMenu()" v-click-anime><i class="fas fa-plus"/></button>
-		<button v-if="$route.name === 'clips'" class="post _buttonPrimary" @click="createClip()" v-click-anime><i class="fas fa-plus"/></button>
-		<button v-if="$route.name === 'pages'" class="post _buttonPrimary" @click="createPage()" v-click-anime><i class="fas fa-plus"/></button>
-		<button v-if="$route.name === 'ads'" class="post _buttonPrimary" @click="createAd()" v-click-anime><i class="fas fa-plus"/></button>
-  </div>
-
-	<div class="buttons" v-if="isMobile">
-		<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i></button>
-		<button class="button search _button" @click="search"><i class="fas fa-search"/></button>
-		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
-	</div>
-
-	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
-
-	<transition name="tray-back">
-		<div class="tray-back _modalBg"
-			v-if="widgetsShowing"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition name="tray">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
-
-	<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
-import { instanceName } from '@client/config';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import XSidebar from './friendly.sidebar.vue';
-import XDrawerSidebar from './sidebar.vue';
-import XCommon from '../_common_/common.vue';
-import XHeader from './header.vue';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import * as symbols from '@client/symbols';
-import XTimeline from '@client/components/timeline.vue';
-import { search } from '@client/scripts/search';
-import { eventBus } from '@client/friendly/eventBus';
-
-const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 600;
-
-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar,
-		XDrawerSidebar,
-		XHeader,
-		XTimeline,
-		XHeaderMenu: defineAsyncComponent(() => import('../classic.header.vue')),
-		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
-	},
-
-	data() {
-		return {
-			pageInfo: null,
-			menuDef: menuDef,
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			widgetsShowing: false,
-			fullView: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-		};
-	},
-
-	computed: {
-		navIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-
-		showMenuOnTop(): boolean {
-			return !this.isMobile && this.$store.state.menuDisplay === 'top';
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-
-		if (this.$store.state.widgets.length === 0) {
-			this.$store.set('widgets', [{
-				name: 'calendar',
-				id: 'a', place: 'right', data: {}
-			}, {
-				name: 'notifications',
-				id: 'b', place: 'right', data: {}
-			}, {
-				name: 'trends',
-				id: 'c', place: 'right', data: {}
-			}]);
-		}
-	},
-
-	mounted() {
-		window.addEventListener('resize', () => {
-			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
-			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
-		}, { passive: true });
-
-		if (this.$store.state.aiChanMode) {
-			const iframeRect = this.$refs.live2d.getBoundingClientRect();
-			window.addEventListener('mousemove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.clientX - iframeRect.left,
-						y: ev.clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-			window.addEventListener('touchmove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.touches[0].clientX - iframeRect.left,
-						y: ev.touches[0].clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-				document.title = `${this.pageInfo.title} | ${instanceName}`;
-			}
-		},
-
-		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-			window.addEventListener('scroll', () => {
-				sticky.calc(window.scrollY);
-			}, { passive: true });
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		createMessagingRoom() {
-			eventBus.emit('kn-createmsgroom');
-		},
-
-		driveMenu() {
-			eventBus.emit('kn-drivemenu');
-		},
-
-		createClip() {
-			eventBus.emit('kn-createclip');
-		},
-
-		createPage() {
-			eventBus.emit('kn-createpage');
-		},
-
-		createAd() {
-			eventBus.emit('kn-createad');
-		},
-
-		search() {
-			search();
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		showDrawerNav() {
-			this.$refs.drawerNav.show();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		onContextmenu(e) {
-			const isLink = (el: HTMLElement) => {
-				if (el.tagName === 'A') return true;
-				if (el.parentElement) {
-					return isLink(el.parentElement);
-				}
-			};
-			if (isLink(e.target)) return;
-			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
-			if (window.getSelection().toString() !== '') return;
-			const path = this.$route.path;
-			os.contextMenu([{
-				type: 'label',
-				text: path,
-			}, {
-				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
-				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
-				action: () => {
-					this.fullView = !this.fullView;
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				}
-			}], e);
-		},
-
-		onAiClick(ev) {
-			//if (this.live2d) this.live2d.click(ev);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.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;
-}
-
-.mk-app {
-	$nav-hide-threshold: 650px;
-	$header-height: 50px;
-	$ui-font-size: 1em;
-	$widgets-hide-threshold: 1200px;
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
-	box-sizing: border-box;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: blur(4px);
-	}
-
-	&.isMobile {
-		> .columns {
-			display: block;
-			margin: 0;
-
-			> .main {
-				margin: 0;
-				padding-bottom: 92px;
-				border: none;
-				width: 100%;
-				border-radius: 0;
-
-				> .header {
-					width: 100%;
-				}
-			}
-		}
-
-		> .buttons {
-			> .button {
-				&:hover {
-					background: var(--panel);
-				}
-			}
-		}
-	}
-
-	> .columns {
-		display: flex;
-		justify-content: center;
-		max-width: 100%;
-		//margin: 32px 0;
-
-		&.fullView {
-			margin: 0;
-		
-			> .sidebar {
-				display: none;
-			}
-
-			> .widgets {
-				display: none;
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-
-		> .main {
-			min-width: 0;
-			width: 750px;
-			margin: 0 16px 0 0;
-			background: var(--bg);
-			box-shadow: 0 0 0 1px var(--divider);
-			border-radius: 0;
-			--margin: 12px;
-
-			> .header {
-				position: sticky;
-				z-index: 1000;
-				top: var(--globalHeaderHeight, 0px);
-				height: $header-height;
-				line-height: $header-height;
-				-webkit-backdrop-filter: blur(32px);
-				backdrop-filter: blur(32px);
-				background-color: var(--header);
-			}
-
-			> .content {
-				background: var(--bg);
-				--stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
-			}
-
-			@media (max-width: 850px) {
-				padding-top: $header-height;
-
-				> .header {
-					position: fixed;
-					width: calc(100% - #{$nav-icon-only-width});
-				}
-			}
-		}
-
-		> .widgets {
-			//--panelShadow: none;
-			width: 300px;
-			margin-top: 16px;
-
-			@media (max-width: $widgets-hide-threshold) {
-				display: none;
-			}
-
-			&.left {
-				margin-right: 16px;
-			}
-		}
-
-		> .sidebar {
-			margin-top: 16px;
-		}
-
-		&.withGlobalHeader {
-			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
-
-			> .main {
-				margin-top: 1px;
-				border-radius: var(--radius);
-				box-shadow: 0 0 0 1px var(--divider);
-			}
-
-			> .widgets {
-				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 1px;
-			}
-		}
-
-		@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%;
-			}
-		}
-	}
-
-	> .floatbtn {
-		position: fixed;
-		z-index: 1000;
-		bottom: 77px;
-		box-sizing: border-box;
-		padding: 18px 0 calc(constant(safe-area-inset-bottom) + 43px); /* iOS 11.0 */
-		padding: 18px 0 calc(env(safe-area-inset-bottom) + 43px); /* iOS 11.2 */
-
-		> .post {
-			position: fixed;
-			z-index: 1000;
-			width: 55px;
-			height: 55px;
-			border-radius: 100%;
-			box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-			font-size: 22px;
-			right: 15px;
-		}
-
-		@media (min-width: (850px) + 1px) {
-			display: none;
-		}
-
-		@media (min-width: (600px) + 1px) {
-			bottom: 50px;
-
-			> .post {
-				right: 30px;
-			}
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		//padding: 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
-
-		> .button {
-			position: relative;
-			flex: 1;
-			//padding: 0;
-			margin: auto;
-			height: 50px;
-			//border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
-			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
-
-			&:not(:last-child) {
-				//margin-right: 12px;
-			}
-
-			@media (max-width: 300px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			&.active {
-					color: var(--accent);
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 7px;
-				right: 20px;
-				color: var(--indicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 18px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .tray-back {
-		z-index: 1001;
-	}
-
-	> .tray {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		padding: var(--margin);
-		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;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy/friendly.widgets.vue b/packages/frontend/src/ui/friendly-legacy/friendly.widgets.vue
deleted file mode 100644
index 38b1c58eea..0000000000
--- a/packages/frontend/src/ui/friendly-legacy/friendly.widgets.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<div class="ddiqwdnk">
-	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-	<MkAd v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" class="a" prefer="square"/>
-
-	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@client/components/widgets.vue';
-
-export default defineComponent({
-	components: {
-		XWidgets
-	},
-
-	props: {
-		place: {
-			type: String,
-		}
-	},
-
-	emits: ['mounted'],
-
-	data() {
-		return {
-			editMode: false,
-		};
-	},
-
-	mounted() {
-		this.$emit('mounted', this.$el);
-	},
-
-	methods: {
-		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: this.place,
-			}, ...this.$store.state.widgets]);
-		},
-
-		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
-		},
-
-		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data: data
-			} : w));
-		},
-
-		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
-			]);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ddiqwdnk {
-	position: sticky;
-	height: min-content;
-	box-sizing: border-box;
-	padding-bottom: 8px;
-
-	> .widgets,
-	> .a {
-		width: 300px;
-	}
-
-	> .edit {
-		display: block;
-		margin: 16px auto;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy/header.vue b/packages/frontend/src/ui/friendly-legacy/header.vue
deleted file mode 100644
index a01e5c880f..0000000000
--- a/packages/frontend/src/ui/friendly-legacy/header.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<template>
-<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
-	<template v-if="info">
-		<div class="titleContainer" @click="onHeaderClick">
-			<div class="title">
-				<!-- <i v-if="info.icon" class="icon" :class="info.icon"></i> -->
-				<MkAvatar v-if="info.avatar && !($route.name === 'note')" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
-				<span v-else-if="info.title" class="text">{{ info.title }}</span>
-			</div>
-		</div>
-		<div class="buttons_L" v-if="isMobile">
-			<button class="_button button_L" v-if="!(withBack && canBack) || ($route.name === 'notifications' || $route.name === 'messaging')" @click="showDrawerNav" v-click-anime>
-				<i class="fas fa-bars"/>
-				<span v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator">
-					<i class="fas fa-circle"></i>
-				</span>
-			</button>
-			<MkAvatar class="avatar" v-if="!(withBack && canBack) || ($route.name === 'notifications' || $route.name === 'messaging')" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
-			<MkAvatar class="avatar_back" v-else-if="withBack && canBack && !(info.avatar)" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
-			<!--
-			<template v-if="$i.isPatron && !(info.avatar) || ($route.name === 'notifications' || $route.name === 'messaging')">
-				<span class="patron" v-if="$i.isVip"><i class="fas fa-gem"></i></span>
-				<span class="patron" v-else><i class="fas fa-heart"></i></span>
-			</template>
-			-->
-		</div>
-	</template>
-	<div class="buttons_R">
-		<button v-if="queue > 0 && $route.name === 'index' && !isDesktop" class="new _buttonPrimary" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
-		<template v-if="info && info.actions && showActions">
-			<button v-for="action in info.actions" class="_button button_R" @click.stop="action.handler" v-tooltip="action.text" v-click-anime><i :class="action.icon"></i></button>
-		</template>
-		<button v-if="showMenu" class="_button button_R" @click.stop="menu" v-click-anime><i class="fas fa-ellipsis-h"></i></button>
-	</div>
-	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
-		<button class="_button back" v-if="withBack && canBack && isMobile && !($route.name === 'notifications' || $route.name === 'messaging')" @click.stop="back()" v-click-anime><i class="fas fa-chevron-left"></i></button>
-		<button class="_button back" v-else-if="withBack && canBack && !isMobile" @click.stop="back()" v-click-anime><i class="fas fa-chevron-left"></i></button>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { popupMenu } from '@client/os';
-import { url } from '@client/config';
-import { eventBus } from "../../friendly/eventBus";
-
-const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 600;
-
-export default defineComponent({
-	props: {
-		info: {
-			required: true
-		},
-		withBack: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		center: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		showIndicator: {
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			canBack: false,
-			showActions: false,
-			height: 0,
-			key: 0,
-			queue: 0,
-		};
-	},
-
-	computed: {
-		showMenu() {
-			if (this.info == null) return false;
-			if (this.info.actions != null && !this.showActions) return true;
-			if (this.info.menu != null) return true;
-			if (this.info.share != null) return true;
-			return false;
-		}
-	},
-
-	watch: {
-		info() {
-			this.key++;
-		},
-
-		$route: {
-			handler(to, from) {
-				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
-			},
-			immediate: true
-		},
-	},
-
-	created() {
-		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
-		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
-	},
-
-	mounted() {
-		this.height = this.$el.parentElement.offsetHeight + 'px';
-		this.showActions = this.$el.parentElement.offsetWidth >= 500;
-		new ResizeObserver((entries, observer) => {
-			this.height = this.$el.parentElement.offsetHeight + 'px';
-			this.showActions = this.$el.parentElement.offsetWidth >= 500;
-		}).observe(this.$el);
-
-		window.addEventListener('resize', () => {
-			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
-			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
-		}, { passive: true });
-	},
-
-	methods: {
-		back() {
-			if (this.canBack) this.$router.back();
-		},
-
-		share() {
-			navigator.share({
-				url: url + this.info.path,
-				...this.info.share,
-			});
-		},
-
-		showDrawerNav() {
-			this.$emit('kn-drawernav');
-		},
-
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		menu(ev) {
-			let menu = this.info.menu ? this.info.menu() : [];
-			if (!this.showActions && this.info.actions) {
-				menu = [...this.info.actions.map(x => ({
-					text: x.text,
-					icon: x.icon,
-					action: x.handler
-				})), menu.length > 0 ? null : undefined, ...menu];
-			}
-			if (this.info.share) {
-				if (menu.length > 0) menu.push(null);
-				menu.push({
-					text: this.$ts.share,
-					icon: 'fas fa-share-alt',
-					action: this.share
-				});
-			}
-			popupMenu(menu, ev.currentTarget || ev.target);
-		},
-
-		queueUpdated(q) {
-			this.queue = q;
-		},
-
-		queueReset() {
-			this.queue = 0;
-		},
-
-		top() {
-			this.onHeaderClick();
-			this.queueReset();
-			eventBus.emit('kn-header-new-queue-reset', 0);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	$ui-font-size: 1em;
-	$avatar-size: 32px;
-	$avatar-margin: 10px;
-
-	&.center {
-		text-align: center;
-
-		> .titleContainer {
-			margin: 0 auto;
-		}
-	}
-
-	> .back {
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		left: 0;
-		height: var(--height);
-		width: var(--height);
-	}
-
-	> .buttons_L {
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		left: 0;
-
-		> .button_L {
-			height: var(--height);
-			width: var(--height);
-
-			> .indicator {
-			position: absolute;
-			bottom: 13px;
-			left: 35px;
-			color: var(--navIndicator);
-			font-size: 7px;
-			animation: blink 1s infinite;
-			}
-		}
-
-		> .avatar {
-			width: $avatar-size;
-			height: $avatar-size;
-			vertical-align: middle;
-		}
-
-		> .avatar_back {
-			margin-left: 50px;
-			width: $avatar-size;
-			height: $avatar-size;
-			vertical-align: middle;
-		}
-
-		> .patron {
-			margin-left: 0.5em;
-			color: var(--patron);
-		}
-	}
-
-	> .buttons_R {
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		right: 0;
-
-		> .button_R {
-			height: var(--height);
-			width: var(--height);
-		}
-
-		> .new {
-			position: absolute;
-			z-index: 1;
-			right: 50px;
-			width: $avatar-size;
-			height: $avatar-size;
-			border-radius: 100px;
-			// border: 2px solid var(--patron);
-			background: transparent;
-
-			i {
-				color: var(--panelHeaderFg)
-			}
-		}
-	}
-
-	> .titleContainer {
-		overflow: auto;
-		white-space: nowrap;
-		width: calc(100% - (var(--height) * 2));
-
-		> .title {
-			display: inline-block;
-			vertical-align: bottom;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			padding: 0 16px;
-			position: relative;
-			height: var(--height);
-
-			> .icon + .text {
-				margin-left: 8px;
-			}
-
-			> .avatar {
-				$size: 32px;
-				display: inline-block;
-				width: $size;
-				height: $size;
-				vertical-align: bottom;
-				margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
-				pointer-events: none;
-			}
-
-			> .patron {
-				margin-left: 0.5em;
-				color: var(--patron);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-legacy/sidebar.vue b/packages/frontend/src/ui/friendly-legacy/sidebar.vue
deleted file mode 100644
index 6bcf562465..0000000000
--- a/packages/frontend/src/ui/friendly-legacy/sidebar.vue
+++ /dev/null
@@ -1,540 +0,0 @@
-<template>
-<div class="mvcprjjd">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = false"
-			@touchstart.passive="showing = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
-			<div>
-				<button class="item _button account" @click="openAccountMenu" v-click-anime>
-					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-				</button>
-				<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-				</MkA>
-				<template v-for="item in menu">
-					<div v-if="item === '-'" class="divider"></div>
-					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
-						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</component>
-				</template>
-				<div class="divider"></div>
-				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
-					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
-				</MkA>
-				<button class="item _button" @click="more" v-click-anime>
-					<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-				</button>
-				<MkA class="item" active-class="active" to="/settings" v-click-anime>
-					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-				</MkA>
-				<!-- <button class="item _button post" @click="post">
-					<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-				</button> -->
-				<div class="divider"></div>
-				<template v-if="$i.isPatron">
-					<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
-						<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
-					</button>
-					<button v-else class="patron-button _button" @click="patron" v-click-anime>
-						<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
-					</button>
-				</template>
-				<button v-else class="patron-button _button" @click="patron" v-click-anime>
-					<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
-				</button>
-				<div class="divider"></div>
-				<div class="about">
-					<MkA class="link" to="/about" v-click-anime>
-						<template v-if="isKokonect">
-							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-							<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
-						</template>
-						<template v-else>
-							<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-						</template>
-					</MkA>
-				</div>
-			</div>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/friendly/menu-mobile';
-import { getAccounts, addAccount, login } from '@client/account';
-
-export default defineComponent({
-	props: {
-		defaultHidden: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	data() {
-		return {
-			host: host,
-			showing: false,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			hidden: this.defaultHidden,
-			isKokonect: null
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-
-		hidden() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		}
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		this.init();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
-			if (!this.defaultHidden) {
-				this.hidden = (window.innerWidth <= 650);
-			}
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = getAccounts().filter(x => x.id !== this.$i.id);
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				icon: 'fas fa-plus',
-				text: this.$ts.addAccount,
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		switchAccount(account: any) {
-			const storedAccounts = getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		patron() {
-			window.open("https://www.patreon.com/noridev", "_blank");
-		},
-
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.nav-enter-active,
-.nav-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);
-}
-.nav-enter-from,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter-from,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-
-	> .nav-back {
-		z-index: 1001;
-	}
-
-	> .nav {
-		$avatar-size: 38px;
-		$avatar-margin: 8px;
-
-		flex: 0 0 $nav-width;
-		width: $nav-width;
-		box-sizing: border-box;
-
-		&.iconOnly {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-
-			&:not(.hidden) {
-				> div {
-					width: $nav-icon-only-width;
-
-					> .divider {
-						margin: 8px auto;
-						width: calc(100% - 32px);
-					}
-
-					> .item,
-						.patron-button {
-						padding: 18px 0;
-						width: 100%;
-						text-align: center;
-						font-size: $ui-font-size * 1.1;
-						line-height: initial;
-
-						> i,
-						> .avatar {
-							display: block;
-							margin: 0 auto;
-						}
-
-						> i {
-							opacity: 0.7;
-						}
-
-						> .text,
-							.patron-text {
-							display: none;
-						}
-
-						> .patron,
-							.not-patron {
-							margin: 0;
-						}
-
-						&:hover, &.active {
-							> i, > .text {
-								opacity: 1;
-							}
-						}
-
-						&:first-child {
-							margin-bottom: 8px;
-						}
-
-						&:last-child {
-							margin-top: 8px;
-						}
-					}
-				}
-			}
-		}
-
-		&.hidden {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		&:not(.hidden) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-			height: calc(var(--vh, 1vh) * 100);
-			box-sizing: border-box;
-			overflow: auto;
-			overflow-x: clip;
-			background: var(--navBg);
-
-			> .divider {
-				margin: 16px 16px;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> .about {
-				fill: currentColor;
-				padding: 8px 0 16px 0;
-				text-align: center;
-				
-				> .link {
-					display: block;
-					//width: 32px;
-					margin: 0 auto;
-					
-					img {
-						display: block;
-						width: 100%;
-					}
-
-					&:hover {
-						text-decoration: none;
-					}
-				}
-			}
-
-			> .item,
-				.patron-button {
-				position: relative;
-				display: block;
-				padding: 0 24px;
-				font-size: $ui-font-size;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					position: relative;
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				> .indicator {
-					position: absolute;
-					bottom: 8px;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
-
-				> .patron,
-					.not-patron {
-					margin-left: 6px;
-					margin-right: 12px;
-				}
-
-				> .patron {
-					color: var(--patron);
-				}
-
-				> .patron-text {
-					font-size: 0.9em;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover, &.active {
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 8px;
-						background: var(--accentedBg);
-					}
-				}
-
-				&:first-child, &:last-child {
-					position: sticky;
-					z-index: 1;
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--X14);
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
-				}
-
-				&:first-child {
-					top: 0;
-					margin-bottom: 16px;
-					border-bottom: solid 0.5px var(--divider);
-				}
-
-				&:last-child {
-					bottom: 0;
-					margin-top: 16px;
-					border-top: solid 0.5px var(--divider);
-					color: var(--fgOnAccent);
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 20px);
-						height: calc(100% - 20px);
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-				}
-			}
-
-			> .patron-button {
-				background: unset;
-				border: unset;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old-2/friendly.side.vue b/packages/frontend/src/ui/friendly-old-2/friendly.side.vue
deleted file mode 100644
index c7d2abff26..0000000000
--- a/packages/frontend/src/ui/friendly-old-2/friendly.side.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-<div class="qvzfzxam _narrow_" v-if="component">
-	<div class="container">
-		<header class="header" @contextmenu.prevent.stop="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
-			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
-			<span class="title">{{ pageInfo.title }}</span>
-			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
-		</header>
-		<MkHeader class="pageHeader" :info="pageInfo"/>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@client/os';
-import copyToClipboard from '@client/scripts/copy-to-clipboard';
-import { resolve } from '@client/router';
-import { url } from '@client/config';
-import * as symbols from '@client/symbols';
-
-export default defineComponent({
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			}
-		};
-	},
-
-	data() {
-		return {
-			path: null,
-			component: null,
-			props: {},
-			pageInfo: null,
-			history: [],
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record && this.path) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		close() {
-			this.path = null;
-			this.component = null;
-			this.props = {};
-		},
-
-		onContextmenu(e) {
-			os.contextMenu([{
-				type: 'label',
-				text: this.path,
-			}, {
-				icon: 'fas fa-expand-alt',
-				text: this.$ts.showInPage,
-				action: () => {
-					this.$router.push(this.path);
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(this.path);
-					this.close();
-				}
-			}, null, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				}
-			}], e);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qvzfzxam {
-	$header-height: 58px; // TODO: どこかに集約したい
-
-	--root-margin: 16px;
-	--margin: var(--marginHalf);
-
-	> .container {
-		position: fixed;
-		width: 370px;
-		height: 100vh;
-		overflow: auto;
-		box-sizing: border-box;
-
-		> .header {
-			display: flex;
-			position: sticky;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			font-weight: bold;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: var(--blur, blur(32px));
-			backdrop-filter: var(--blur, blur(32px));
-			background-color: var(--header);
-
-			> ._button {
-				height: $header-height;
-				width: $header-height;
-
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			> .title {
-				flex: 1;
-				position: relative;
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/frontend/src/ui/friendly-old-2/friendly.vue b/packages/frontend/src/ui/friendly-old-2/friendly.vue
deleted file mode 100644
index 8d5caac780..0000000000
--- a/packages/frontend/src/ui/friendly-old-2/friendly.vue
+++ /dev/null
@@ -1,506 +0,0 @@
-<template>
-<div class="mk-app" :class="{ wallpaper }">
-	<XSidebar v-if="!isMobile" ref="nav" class="sidebar"/>
-	<XSidebarMobile v-if="isMobile" ref="nav" class="sidebar"/>
-
-	<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-		<main ref="main">
-			<div class="content">
-				<MkStickyContainer>
-					<template #header><MkHeaderCP v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo" @back="back()"/></template>
-					<router-view v-slot="{ Component }">
-						<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-							<keep-alive :include="['timeline']">
-								<component :is="Component" :ref="changePage"/>
-							</keep-alive>
-						</transition>
-					</router-view>
-				</MkStickyContainer>
-			</div>
-			<div class="spacer"></div>
-		</main>
-	</div>
-
-	<XSide v-if="isDesktop" class="side" ref="side"/>
-
-	<div v-if="isDesktop" class="widgets" ref="widgets">
-		<XWidgets @mounted="attachSticky"/>
-	</div>
-
-	<div class="buttons" :class="{ navHidden }">
-		<!-- <button class="button nav _button" @click="showNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
-		<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
-		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
-	</div>
-
-	<button v-if="fabButton && !isMobile" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
-
-	<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-
-	<transition name="tray-back">
-		<div class="tray-back _modalBg"
-			v-if="widgetsShowing"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition name="tray">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { instanceName } from '@client/config';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import XSidebar from './sidebar.vue';
-import XSidebarMobile from './sidebar-mobile.vue';
-import XCommon from '../_common_/common.vue';
-import XSide from './friendly.side.vue';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import * as symbols from '@client/symbols';
-import { eventBus } from '@client/friendly/eventBus';
-
-const DESKTOP_THRESHOLD = 1100;
-const WIDE_TABLET_THRESHOLD = 850;
-const MOBILE_THRESHOLD = 600;
-
-localStorage.setItem('ui', 'friendly');
-
-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar,
-		XSidebarMobile,
-		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue')),
-		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
-	},
-
-	provide() {
-		return {
-			sideViewHook: this.isDesktop ? (url) => {
-				this.$refs.side.navigate(url);
-			} : null
-		};
-	},
-
-	data() {
-		return {
-			pageInfo: null,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			menuDef: menuDef,
-			navHidden: false,
-			widgetsShowing: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-			queue: 0,
-			routeList: [
-				'index',
-				'explore',
-				'notifications',
-				'messaging',
-				'user',
-				'drive',
-				'clips',
-				'pages',
-				'ads',
-				'gallery',
-				'channels',
-				'groups',
-				'antennas'
-			],
-			fabButton: false
-		};
-	},
-
-	computed: {
-		navIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-
-		fabIcon() {
-			return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-
-		if (this.$store.state.widgets.length === 0) {
-			this.$store.set('widgets', [{
-				name: 'calendar',
-				id: 'a', place: 'right', data: {}
-			}, {
-				name: 'notifications',
-				id: 'b', place: 'right', data: {}
-			}, {
-				name: 'trends',
-				id: 'c', place: 'right', data: {}
-			}]);
-		}
-
-		eventBus.on('kn-drawernav', () => this.showNav());
-		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
-		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
-	},
-
-	mounted() {
-		this.adjustUI();
-
-		const ro = new ResizeObserver((entries, observer) => {
-			this.adjustUI();
-		});
-
-		ro.observe(this.$refs.contents);
-
-		window.addEventListener('resize', this.adjustUI, { passive: true });
-
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-				document.title = `${this.pageInfo.title} | ${instanceName}`;
-				this.fabButton = this.routeList.includes(this.$route.name);
-			}
-		},
-
-		adjustUI() {
-			const navWidth = this.$refs.nav.$el.offsetWidth;
-			this.navHidden = navWidth === 0;
-		},
-
-		showNav() {
-			this.$refs.nav.show();
-		},
-
-		attachSticky(el) {
-			const sticky = new StickySidebar(this.$refs.widgets);
-			window.addEventListener('scroll', () => {
-				sticky.calc(window.scrollY);
-			}, { passive: true });
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		back() {
-			history.back();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		onContextmenu(e) {
-			const isLink = (el: HTMLElement) => {
-				if (el.tagName === 'A') return true;
-				if (el.parentElement) {
-					return isLink(el.parentElement);
-				}
-			};
-			if (isLink(e.target)) return;
-			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
-			if (window.getSelection().toString() !== '') return;
-			const path = this.$route.path;
-			os.contextMenu([{
-				type: 'label',
-				text: path,
-			}, {
-				icon: 'fas fa-columns',
-				text: this.$ts.openInSideView,
-				action: () => {
-					this.$refs.side.navigate(path);
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				}
-			}], e);
-		},
-
-		queueUpdated(q) {
-			this.queue = q;
-		},
-
-		queueReset() {
-			this.queue = 0;
-		},
-
-		onFabClicked(e) {
-			if (this.pageInfo && this.pageInfo.action) {
-				this.pageInfo.action.handler(e);
-			} else {
-				os.post_form();
-			}
-		},
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.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;
-}
-
-.mk-app {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$widgets-hide-threshold: 1090px;
-	$nav-hide-threshold: 600px;
-
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
-	box-sizing: border-box;
-	display: flex;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
-	}
-
-	> .sidebar {
-	}
-
-	> .contents {
-		width: 100%;
-		min-width: 0;
-		background: var(--panel);
-
-		> main {
-			min-width: 0;
-
-			> .spacer {
-				height: 82px;
-
-				@media (min-width: ($widgets-hide-threshold + 1px)) {
-					display: none;
-				}
-			}
-		}
-	}
-
-	> .side {
-		min-width: 370px;
-		max-width: 370px;
-		border-left: solid 0.5px var(--divider);
-	}
-
-	> .widgets {
-		padding: 0 var(--margin);
-		border-left: solid 0.5px var(--divider);
-		background: var(--bg);
-
-		@media (max-width: $widgets-hide-threshold) {
-			display: none;
-		}
-	}
-
-	> .widgetButton {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		bottom: 32px;
-		right: 32px;
-		width: 64px;
-		height: 64px;
-		border-radius: 100%;
-		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
-		background: var(--panel);
-
-		&.navHidden {
-			display: none;
-		}
-
-		@media (min-width: ($widgets-hide-threshold + 1px)) {
-			display: none;
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		//padding: 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		-webkit-backdrop-filter: var(--blur, blur(32px));
-		backdrop-filter: var(--blur, blur(32px));
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
-
-		&:not(.navHidden) {
-			display: none;
-		}
-
-		> .button {
-			position: relative;
-			flex: 1;
-			//padding: 0;
-			margin: auto;
-			height: 50px;
-			//border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
-			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
-
-			&:not(:last-child) {
-				//margin-right: 12px;
-			}
-
-			@media (max-width: 300px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			&.active {
-				color: var(--accent);
-			}
-
-			> .indicator,
-				.indicator-home {
-				position: absolute;
-				top: 7px;
-				right: 20px;
-				color: var(--indicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
-			> .indicator-home {
-				top: 8px;
-				right: 25px;
-				font-size: 6px;
-				animation: none;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 18px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .fab {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		right: calc(32px + var(--margin) * 2 + 300px);
-		bottom: 32px;
-		width: 55px;
-		height: 55px;
-		border-radius: 100%;
-		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
-		background: var(--accent);
-		color: white;
-
-		@media (max-width: $widgets-hide-threshold) {
-			right: 30px;
-		}
-
-		@media (max-width: $nav-hide-threshold) {
-			bottom: calc(66px + env(safe-area-inset-bottom));
-			right: 15px;
-		}
-
-		@media (min-width: (850px) + 1px) {
-			display: none;
-		}
-
-		@media (min-width: (600px) + 1px) {
-			bottom: calc(45px + env(safe-area-inset-bottom));
-		}
-	}
-
-	> .tray-back {
-		z-index: 1001;
-	}
-
-	> .tray {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		padding: var(--margin);
-		box-sizing: border-box;
-		overflow: auto;
-		background: var(--bg);
-	}
-}
-</style>
-
-<style lang="scss">
-</style>
diff --git a/packages/frontend/src/ui/friendly-old-2/friendly.widgets.vue b/packages/frontend/src/ui/friendly-old-2/friendly.widgets.vue
deleted file mode 100644
index 28b14749d1..0000000000
--- a/packages/frontend/src/ui/friendly-old-2/friendly.widgets.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-<div class="efzpzdvf">
-	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-
-	<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@client/components/widgets.vue';
-import * as os from '@client/os';
-
-export default defineComponent({
-	components: {
-		XWidgets
-	},
-
-	emits: ['mounted'],
-
-	data() {
-		return {
-			editMode: false,
-		};
-	},
-
-	mounted() {
-		this.$emit('mounted', this.$el);
-	},
-
-	methods: {
-		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: null,
-			}, ...this.$store.state.widgets]);
-		},
-
-		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
-		},
-
-		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data: data
-			} : w));
-		},
-
-		updateWidgets(widgets) {
-			this.$store.set('widgets', widgets);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.efzpzdvf {
-	position: sticky;
-	height: min-content;
-	min-height: 100vh;
-	padding: var(--margin) 0;
-	box-sizing: border-box;
-
-	> * {
-		margin: var(--margin) 0;
-		width: 300px;
-
-		&:first-child {
-			margin-top: 0;
-		}
-	}
-
-	> .add {
-		margin: 0 auto;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old-2/header.vue b/packages/frontend/src/ui/friendly-old-2/header.vue
deleted file mode 100644
index c836733717..0000000000
--- a/packages/frontend/src/ui/friendly-old-2/header.vue
+++ /dev/null
@@ -1,437 +0,0 @@
-<template>
-<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
-	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
-		<div class="buttons left" v-if="canBack && !fabButton">
-			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
-		</div>
-	</transition>
-	<div class="buttons left" v-if="isMobile && !canBack">
-		<button class="_button button" v-if="!canBack || fabButton" @click="showNav">
-			<MkAvatar class="avatar" v-if="!canBack" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
-			<!-- <i class="fas fa-bars"/> -->
-			<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
-		</button>
-	</div>
-	<template v-if="info">
-		<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
-			<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-			<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
-
-			<div class="title">
-				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
-				<div v-else-if="info.title" class="title">{{ info.title }}</div>
-				<div class="subtitle" v-if="!narrow && info.subtitle">
-					{{ info.subtitle }}
-				</div>
-				<div class="subtitle activeTab" v-if="narrow && hasTabs">
-					{{ info.tabs.find(tab => tab.active)?.title }}
-					<i class="chevron fas fa-chevron-down"></i>
-				</div>
-			</div>
-		</div>
-		<div class="tabs" v-if="!narrow || hideTitle">
-			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-if="info && info.actions && !narrow">
-			<template v-for="action in info.actions">
-				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
-				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
-			</template>
-		</template>
-		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject, watch } from 'vue';
-import * as tinycolor from 'tinycolor2';
-import { popupMenu } from '@client/os';
-import { url } from '@client/config';
-import { scrollToTop } from '@client/scripts/scroll';
-import MkButton from '@client/components/ui/button.vue';
-import { i18n } from '@client/i18n';
-import { globalEvents } from '@client/events';
-import { eventBus } from "@client/friendly/eventBus";
-import {useRoute} from "vue-router";
-
-const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 600;
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	props: {
-		info: {
-			type: Object as PropType<{
-				actions?: {}[];
-				tabs?: {}[];
-			}>,
-			required: true
-		},
-		menu: {
-			required: false
-		},
-		thin: {
-			required: false,
-			default: false
-		},
-	},
-
-	setup(props) {
-		const el = ref<HTMLElement>(null);
-		const bg = ref(null);
-		const narrow = ref(false);
-		const height = ref(0);
-		const hasTabs = computed(() => {
-			return props.info.tabs && props.info.tabs.length > 0;
-		});
-		const shouldShowMenu = computed(() => {
-			if (props.info == null) return false;
-			if (props.info.actions != null && narrow.value) return true;
-			if (props.info.menu != null) return true;
-			if (props.info.share != null) return true;
-			if (props.menu != null) return true;
-			return false;
-		});
-		const canBack = ref(false);
-		const fabButton = ref(false);
-		const routeList = ref([
-			'/',
-			'/explore',
-			'/my/notifications',
-			'/my/messaging'
-		]);
-		const route = useRoute();
-
-		const share = () => {
-			navigator.share({
-				url: url + props.info.path,
-				...props.info.share,
-			});
-		};
-
-		const showMenu = (ev: MouseEvent) => {
-			let menu = props.info.menu ? props.info.menu() : [];
-			if (narrow.value && props.info.actions) {
-				menu = [...props.info.actions.map(x => ({
-					text: x.text,
-					icon: x.icon,
-					action: x.handler
-				})), menu.length > 0 ? null : undefined, ...menu];
-			}
-			if (props.info.share) {
-				if (menu.length > 0) menu.push(null);
-				menu.push({
-					text: i18n.locale.share,
-					icon: 'fas fa-share-alt',
-					action: share
-				});
-			}
-			if (props.menu) {
-				if (menu.length > 0) menu.push(null);
-				menu = menu.concat(props.menu);
-			}
-			popupMenu(menu, ev.currentTarget || ev.target);
-		};
-
-		const showTabsPopup = (ev: MouseEvent) => {
-			if (!hasTabs.value) return;
-			if (!narrow.value) return;
-			ev.preventDefault();
-			ev.stopPropagation();
-			const menu = props.info.tabs.map(tab => ({
-				text: tab.title,
-				icon: tab.icon,
-				action: tab.onClick,
-			}));
-			popupMenu(menu, ev.currentTarget || ev.target);
-		};
-
-		const preventDrag = (ev: TouchEvent) => {
-			ev.stopPropagation();
-		};
-
-		const onClick = () => {
-			scrollToTop(el.value, { behavior: 'smooth' });
-		};
-
-		const calcBg = () => {
-			const rawBg = props.info?.bg || 'var(--bg)';
-			const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-			tinyBg.setAlpha(0.85);
-			bg.value = tinyBg.toRgbString();
-		};
-
-		const showNav = () => {
-			eventBus.emit('kn-drawernav');
-		};
-
-		watch(
-			route, (to, from) => {
-				canBack.value = (window.history.length > 0 && !(routeList.value.includes(to.path)));
-				fabButton.value = routeList.value.includes(to.path);
-			}, { immediate: true }
-		)
-
-		onMounted(() => {
-			calcBg();
-			globalEvents.on('themeChanged', calcBg);
-			onUnmounted(() => {
-				globalEvents.off('themeChanged', calcBg);
-			});
-		
-			if (el.value.parentElement) {
-				narrow.value = el.value.parentElement.offsetWidth < 500;
-				const ro = new ResizeObserver((entries, observer) => {
-					if (el.value) {
-						narrow.value = el.value.parentElement.offsetWidth < 500;
-					}
-				});
-				ro.observe(el.value.parentElement);
-				onUnmounted(() => {
-					ro.disconnect();
-				});
-			}
-
-			console.log(canBack.value)
-			console.log(fabButton.value)
-			console.log(routeList.value)
-		});
-
-		return {
-			el,
-			bg,
-			narrow,
-			height,
-			hasTabs,
-			shouldShowMenu,
-			canBack,
-			fabButton,
-			routeList,
-			share,
-			showMenu,
-			showTabsPopup,
-			preventDrag,
-			onClick,
-			showNav,
-			hideTitle: inject('shouldOmitHeaderTitle', false),
-			thin_: props.thin || inject('shouldHeaderThin', false),
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	$avatar-size: 32px;
-	$avatar-margin: 10px;
-	--height: 60px;
-	display: flex;
-	position: sticky;
-	top: var(--stickyTop, 0);
-	z-index: 1000;
-	width: 100%;
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-	border-bottom: solid 0.5px var(--divider);
-
-	&.thin {
-		--height: 50px;
-
-		> .buttons {
-			> .button {
-				font-size: 0.9em;
-			}
-		}
-	}
-
-	&.slim {
-		text-align: center;
-
-		> .titleContainer {
-			flex: 1;
-			margin: 0 auto;
-			margin-left: var(--height);
-
-			> *:first-child {
-				margin-left: auto;
-			}
-
-			> *:last-child {
-				margin-right: auto;
-			}
-		}
-	}
-
-	> .buttons {
-		--margin: 8px;
-		display: flex;
-    align-items: center;
-		height: var(--height);
-		margin: 0 var(--margin);
-
-		&.left {
-			position: relative;
-			z-index: 1;
-			top: 0;
-			left: 0;
-
-			> .button {
-				> .indicator {
-					position: absolute;
-					bottom: 13px;
-					left: 43px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-			}
-
-			@media (max-width: 600px) {
-				position: absolute;
-			}
-		}
-
-		&.right {
-			margin-left: auto;
-		}
-
-		&:empty {
-			width: var(--height);
-		}
-
-		> .button {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: calc(var(--height) - (var(--margin) * 2));
-			width: calc(var(--height) - (var(--margin) * 2));
-			box-sizing: border-box;
-			position: relative;
-			border-radius: 5px;
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.05);
-			}
-
-			&.highlighted {
-				color: var(--accent);
-			}
-		}
-
-		> .fullButton {
-			& + .fullButton {
-				margin-left: 12px;
-			}
-		}
-	}
-
-	> .titleContainer {
-		display: flex;
-		align-items: center;
-		overflow: auto;
-		white-space: nowrap;
-		text-align: left;
-		font-weight: bold;
-		flex-shrink: 0;
-		margin-left: 24px;
-
-		> .avatar {
-			$size: 32px;
-			display: inline-block;
-			width: $size;
-			height: $size;
-			vertical-align: bottom;
-			margin: 0 8px;
-			pointer-events: none;
-		}
-
-		> .icon {
-			margin-right: 8px;
-		}
-
-		> .title {
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			line-height: 1.1;
-
-			> .subtitle {
-				opacity: 0.6;
-				font-size: 0.8em;
-				font-weight: normal;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-
-				&.activeTab {
-					text-align: center;
-
-					> .chevron {
-						display: inline-block;
-						margin-left: 6px;
-					}
-				}
-			}
-		}
-	}
-
-	> .tabs {
-		margin-left: 16px;
-		font-size: 0.8em;
-		overflow: auto;
-		white-space: nowrap;
-
-		> .tab {
-			display: inline-block;
-			position: relative;
-			padding: 0 10px;
-			height: 100%;
-			font-weight: normal;
-			opacity: 0.7;
-
-			&:hover {
-				opacity: 1;
-			}
-
-			&.active {
-				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
-			}
-
-			> .icon + .title {
-				margin-left: 8px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old-2/sidebar-mobile.vue b/packages/frontend/src/ui/friendly-old-2/sidebar-mobile.vue
deleted file mode 100644
index add59299e3..0000000000
--- a/packages/frontend/src/ui/friendly-old-2/sidebar-mobile.vue
+++ /dev/null
@@ -1,656 +0,0 @@
-<template>
-<div class="mvcprjjd">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = isAccountMenuMode = false"
-			@touchstart.passive="showing = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
-			<div>
-				<div class="profile">
-					<button class="item _button account" @click="openProfile">
-						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-					</button>
-					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
-						<i class="fas fa-ellipsis-v"/>
-					</button>
-					<button v-else class="_button toggler" @click="toggleMenuMode">
-						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
-						<i v-else class="fas fa-chevron-down"/>
-					</button>
-				</div>
-				<template v-if="!isAccountMenuMode">
-					<div style="margin: 15px"></div>
-					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-					</MkA>
-					<template v-for="item in menu">
-						<div v-if="item === '-'" class="divider"></div>
-						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-						</component>
-					</template>
-					<div class="divider"></div>
-					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
-						<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-					</MkA>
-					<button class="item _button" @click="more" v-click-anime>
-						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</button>
-					<MkA class="item" active-class="active" to="/settings" v-click-anime>
-						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-					</MkA>
-					<button class="item _button post" @click="post" data-cy-open-post-form>
-						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-					</button>
-				</template>
-				<template v-else>
-					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
-						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
-					</button>
-					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
-					<div class="divider"></div>
-					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
-					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
-				</template>
-			</div>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/friendly/menu-mobile';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-
-export default defineComponent({
-	props: {
-		defaultHidden: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	data() {
-		return {
-			host: host,
-			showing: false,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			hidden: this.defaultHidden,
-			isAccountMenuMode: false,
-			loadingAccounts: false,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-
-		hidden() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		}
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
-			if (!this.defaultHidden) {
-				this.hidden = (window.innerWidth <= 650);
-			}
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async fetchAccounts() {
-			this.loadingAccounts = true;
-			this.accounts = await os.getAccounts();
-			this.loadingAccounts = false;
-		},
-
-		toggleMenuMode() {
-			this.isAccountMenuMode = !this.isAccountMenuMode;
-			if (this.isAccountMenuMode) {
-				this.fetchAccounts();
-			}
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => { this.signout(); },
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => { this.signoutAll(); },
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		async openDrawerAccountMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.existingAccount,
-				action: () => { this.addAccount(); },
-			}, {
-				text: this.$ts.createAccount,
-				action: () => { this.createAccount(); },
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		async openSignoutMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.logout,
-				action: () => { this.signout(); },
-				danger: true,
-			}, {
-				text: this.$ts.logoutAll,
-				action: () => { this.signoutAll(); },
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.nav-enter-active,
-.nav-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);
-}
-.nav-enter-from,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter-from,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-
-	> .nav-back {
-		z-index: 1001;
-	}
-
-	> .nav {
-		$avatar-size: 32px;
-		$avatar-margin: 8px;
-
-		flex: 0 0 $nav-width;
-		width: $nav-width;
-		box-sizing: border-box;
-
-		&.iconOnly {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-
-			&:not(.hidden) {
-				> div {
-					width: $nav-icon-only-width;
-
-					> .divider {
-						margin: 8px auto;
-						width: calc(100% - 32px);
-					}
-
-					> .item {
-						padding-left: 0;
-						padding: 18px 0;
-						width: 100%;
-						text-align: center;
-						font-size: $ui-font-size * 1.1;
-						line-height: initial;
-
-						> i,
-						> .avatar {
-							display: block;
-							margin: 0 auto;
-						}
-
-						> i {
-							opacity: 0.7;
-						}
-
-						> .text {
-							display: none;
-						}
-
-						&:hover, &.active {
-							> i, > .text {
-								opacity: 1;
-							}
-						}
-
-						&:first-child {
-							margin-bottom: 8px;
-						}
-
-						&:last-child {
-							margin-top: 8px;
-						}
-					}
-				}
-			}
-		}
-
-		&.hidden {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		&:not(.hidden) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-			height: calc(var(--vh, 1vh) * 100);
-			box-sizing: border-box;
-			overflow: auto;
-			overflow-x: clip;
-			background: var(--navBg);
-
-			> .divider {
-				margin: 16px 16px;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> .item {
-				position: relative;
-				display: block;
-				padding-left: 24px;
-				font-size: $ui-font-size;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					position: relative;
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover, &.active {
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: var(--accentedBg);
-					}
-				}
-
-				&:first-child, &:last-child {
-					position: sticky;
-					z-index: 1;
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--X14);
-					-webkit-backdrop-filter: var(--blur, blur(8px));
-					backdrop-filter: var(--blur, blur(8px));
-				}
-
-				&:first-child {
-					top: 0;
-
-					&:hover, &.active {
-						&:before {
-							content: none;
-						}
-					}
-				}
-
-				&:last-child {
-					bottom: 0;
-					color: var(--fgOnAccent);
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 20px);
-						height: calc(100% - 20px);
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-					
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-				}
-			}
-
-			> .item-switch-acct,
-			> .item-button {
-				position: relative;
-				display: block;
-				padding: 12px 24px 0;
-				font-size: $ui-font-size;
-				line-height: 3rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&.danger {
-					color: red;
-				}
-			}
-
-			> .item-button {
-				padding: 0 24px;
-			}
-
-			> .profile {
-				position: sticky;
-				z-index: 1;
-				top: 0;
-				display: flex;
-				text-align: center;
-				justify-content: center;
-				align-items: center;
-				background: var(--X14);
-				-webkit-backdrop-filter: blur(8px);
-				backdrop-filter: blur(8px);
-
-				> .item {
-					position: relative;
-					display: block;
-					padding: 12px 24px 0;
-					font-size: $ui-font-size;
-					line-height: 3rem;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> i {
-						width: 32px;
-					}
-
-					> i,
-					> .avatar {
-						margin-right: $avatar-margin;
-					}
-
-					> .avatar {
-						width: $avatar-size;
-						height: $avatar-size;
-						vertical-align: middle;
-					}
-
-					> .name {
-						margin-left: 5px;
-						font-weight: bold;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover {
-						text-decoration: none;
-						color: var(--navHoverFg);
-					}
-				}
-
-				> .toggler {
-					//position: absolute;
-					//right: 15px;
-					width: 36px;
-					height: 36px;
-					margin: 12px 15px 0 0;
-					padding: 10px;
-					z-index: 400;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old-2/sidebar.vue b/packages/frontend/src/ui/friendly-old-2/sidebar.vue
deleted file mode 100644
index 57b493ff4b..0000000000
--- a/packages/frontend/src/ui/friendly-old-2/sidebar.vue
+++ /dev/null
@@ -1,656 +0,0 @@
-<template>
-<div class="mvcprjjd">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = isAccountMenuMode = false"
-			@touchstart.passive="showing = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
-			<div>
-				<div class="profile">
-					<button class="item _button account" @click="openProfile">
-						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-					</button>
-					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
-						<i class="fas fa-ellipsis-v"/>
-					</button>
-					<button v-else class="_button toggler" @click="toggleMenuMode">
-						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
-						<i v-else class="fas fa-chevron-down"/>
-					</button>
-				</div>
-				<template v-if="!isAccountMenuMode">
-					<div style="margin: 15px"></div>
-					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-					</MkA>
-					<template v-for="item in menu">
-						<div v-if="item === '-'" class="divider"></div>
-						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-						</component>
-					</template>
-					<div class="divider"></div>
-					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
-						<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-					</MkA>
-					<button class="item _button" @click="more" v-click-anime>
-						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</button>
-					<MkA class="item" active-class="active" to="/settings" v-click-anime>
-						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-					</MkA>
-					<button class="item _button post" @click="post" data-cy-open-post-form>
-						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-					</button>
-				</template>
-				<template v-else>
-					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
-						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
-					</button>
-					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
-					<div class="divider"></div>
-					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
-					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
-				</template>
-			</div>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-
-export default defineComponent({
-	props: {
-		defaultHidden: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	data() {
-		return {
-			host: host,
-			showing: false,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			hidden: this.defaultHidden,
-			isAccountMenuMode: false,
-			loadingAccounts: false,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-
-		hidden() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		}
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
-			if (!this.defaultHidden) {
-				this.hidden = (window.innerWidth <= 650);
-			}
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async fetchAccounts() {
-			this.loadingAccounts = true;
-			this.accounts = await os.getAccounts();
-			this.loadingAccounts = false;
-		},
-
-		toggleMenuMode() {
-			this.isAccountMenuMode = !this.isAccountMenuMode;
-			if (this.isAccountMenuMode) {
-				this.fetchAccounts();
-			}
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => { this.signout(); },
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => { this.signoutAll(); },
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		async openDrawerAccountMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.existingAccount,
-				action: () => { this.addAccount(); },
-			}, {
-				text: this.$ts.createAccount,
-				action: () => { this.createAccount(); },
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		async openSignoutMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.logout,
-				action: () => { this.signout(); },
-				danger: true,
-			}, {
-				text: this.$ts.logoutAll,
-				action: () => { this.signoutAll(); },
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.nav-enter-active,
-.nav-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);
-}
-.nav-enter-from,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter-from,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-
-	> .nav-back {
-		z-index: 1001;
-	}
-
-	> .nav {
-		$avatar-size: 32px;
-		$avatar-margin: 8px;
-
-		flex: 0 0 $nav-width;
-		width: $nav-width;
-		box-sizing: border-box;
-
-		&.iconOnly {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-
-			&:not(.hidden) {
-				> div {
-					width: $nav-icon-only-width;
-
-					> .divider {
-						margin: 8px auto;
-						width: calc(100% - 32px);
-					}
-
-					> .item {
-						padding-left: 0;
-						padding: 18px 0;
-						width: 100%;
-						text-align: center;
-						font-size: $ui-font-size * 1.1;
-						line-height: initial;
-
-						> i,
-						> .avatar {
-							display: block;
-							margin: 0 auto;
-						}
-
-						> i {
-							opacity: 0.7;
-						}
-
-						> .text {
-							display: none;
-						}
-
-						&:hover, &.active {
-							> i, > .text {
-								opacity: 1;
-							}
-						}
-
-						&:first-child {
-							margin-bottom: 8px;
-						}
-
-						&:last-child {
-							margin-top: 8px;
-						}
-					}
-				}
-			}
-		}
-
-		&.hidden {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		&:not(.hidden) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-			height: calc(var(--vh, 1vh) * 100);
-			box-sizing: border-box;
-			overflow: auto;
-			overflow-x: clip;
-			background: var(--navBg);
-
-			> .divider {
-				margin: 16px 16px;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> .item {
-				position: relative;
-				display: block;
-				padding-left: 24px;
-				font-size: $ui-font-size;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					position: relative;
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover, &.active {
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: var(--accentedBg);
-					}
-				}
-
-				&:first-child, &:last-child {
-					position: sticky;
-					z-index: 1;
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--X14);
-					-webkit-backdrop-filter: var(--blur, blur(8px));
-					backdrop-filter: var(--blur, blur(8px));
-				}
-
-				&:first-child {
-					top: 0;
-
-					&:hover, &.active {
-						&:before {
-							content: none;
-						}
-					}
-				}
-
-				&:last-child {
-					bottom: 0;
-					color: var(--fgOnAccent);
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 20px);
-						height: calc(100% - 20px);
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-					
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-				}
-			}
-
-			> .item-switch-acct,
-			> .item-button {
-				position: relative;
-				display: block;
-				padding: 12px 24px 0;
-				font-size: $ui-font-size;
-				line-height: 3rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&.danger {
-					color: red;
-				}
-			}
-
-			> .item-button {
-				padding: 0 24px;
-			}
-
-			> .profile {
-				position: sticky;
-				z-index: 1;
-				top: 0;
-				display: flex;
-				text-align: center;
-				justify-content: center;
-				align-items: center;
-				background: var(--X14);
-				-webkit-backdrop-filter: blur(8px);
-				backdrop-filter: blur(8px);
-
-				> .item {
-					position: relative;
-					display: block;
-					padding: 12px 24px 0;
-					font-size: $ui-font-size;
-					line-height: 3rem;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> i {
-						width: 32px;
-					}
-
-					> i,
-					> .avatar {
-						margin-right: $avatar-margin;
-					}
-
-					> .avatar {
-						width: $avatar-size;
-						height: $avatar-size;
-						vertical-align: middle;
-					}
-
-					> .name {
-						margin-left: 5px;
-						font-weight: bold;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover {
-						text-decoration: none;
-						color: var(--navHoverFg);
-					}
-				}
-
-				> .toggler {
-					//position: absolute;
-					//right: 15px;
-					width: 36px;
-					height: 36px;
-					margin: 12px 15px 0 0;
-					padding: 10px;
-					z-index: 400;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old/friendly.header.vue b/packages/frontend/src/ui/friendly-old/friendly.header.vue
deleted file mode 100644
index c9d171c96f..0000000000
--- a/packages/frontend/src/ui/friendly-old/friendly.header.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-<div class="azykntjl">
-	<div class="body">
-		<div class="left">
-			<MkA class="item index" active-class="active" to="/" exact v-click-anime v-tooltip="$ts.timeline">
-				<i class="fas fa-home fa-fw"></i>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime v-tooltip="$ts[menuDef[item].title]">
-					<i class="fa-fw" :class="menuDef[item].icon"></i>
-					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.instance">
-				<i class="fas fa-server fa-fw"></i>
-			</MkA>
-			<button class="item _button" @click="more" v-click-anime>
-				<i class="fas fa-ellipsis-h fa-fw"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-			</button>
-		</div>
-		<div class="right">
-			<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime v-tooltip="$ts.settings">
-				<i class="fas fa-cog fa-fw"></i>
-			</MkA>
-			<button class="item _button account" @click="openProfile" v-click-anime>
-				<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-			</button>
-			<button class="_button toggler" @click="openAccountMenu">
-				<i class="fas fa-chevron-down"/>
-			</button>
-			<div class="post" @click="post">
-				<MkButton class="button" gradate full>
-					<i class="fas fa-pencil-alt fa-fw"></i>
-				</MkButton>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-import MkButton from '@client/components/ui/button.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			settingsWindowed: false,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			await os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${this.$i.username}`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => {
-							this.addAccount();
-						},
-					}, {
-						text: this.$ts.createAccount,
-						action: () => {
-							this.createAccount();
-						},
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => {
-							this.signout();
-						},
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => {
-							this.signoutAll();
-						},
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.azykntjl {
-	$height: 60px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	position: sticky;
-	top: 0;
-	z-index: 1000;
-	width: 100%;
-	height: $height;
-	background-color: var(--bg);
-
-	> .body {
-		max-width: 1380px;
-		margin: 0 auto;
-		display: flex;
-
-		> .right,
-		> .left {
-
-			> .item {
-				position: relative;
-				font-size: 0.9em;
-				display: inline-block;
-				padding: 0 12px;
-				line-height: $height;
-
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
-
-				> i {
-					left: 10px;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
-					position: absolute;
-					bottom: 10px;
-					right: 0;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-			}
-
-			> .divider {
-				display: inline-block;
-				height: 16px;
-				margin: 0 10px;
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .post {
-				display: inline-block;
-			
-				> .button {
-					width: 40px;
-					height: 40px;
-					padding: 0;
-					min-width: 0;
-				}
-			}
-
-			> .account {
-				display: inline-flex;
-				align-items: center;
-				vertical-align: top;
-
-				> .name {
-					margin-left: 10px;
-					font-weight: bold;
-				}
-			}
-
-			> .toggler {
-				position: relative;
-				right: 5px;
-				width: 36px;
-				height: 36px;
-			}
-		}
-
-		> .right {
-			margin-left: auto;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old/friendly.side.vue b/packages/frontend/src/ui/friendly-old/friendly.side.vue
deleted file mode 100644
index 0ad6f18b0a..0000000000
--- a/packages/frontend/src/ui/friendly-old/friendly.side.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-<div class="qvzfzxam _narrow_" v-if="component">
-	<div class="container">
-		<header class="header" @contextmenu.prevent.stop="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
-			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
-			<XHeader class="title" :info="pageInfo" :with-back="false"/>
-			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
-		</header>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XHeader from './friendly/header.vue';
-import * as os from '@client/os';
-import copyToClipboard from '@client/scripts/copy-to-clipboard';
-import { resolve } from '@client/router';
-import { url } from '@client/config';
-import * as symbols from '@client/symbols';
-
-export default defineComponent({
-	components: {
-		XHeader
-	},
-
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			}
-		};
-	},
-
-	data() {
-		return {
-			path: null,
-			component: null,
-			props: {},
-			pageInfo: null,
-			history: [],
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record && this.path) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		close() {
-			this.path = null;
-			this.component = null;
-			this.props = {};
-		},
-
-		onContextmenu(e) {
-			os.contextMenu([{
-				type: 'label',
-				text: this.path,
-			}, {
-				icon: 'fas fa-expand-alt',
-				text: this.$ts.showInPage,
-				action: () => {
-					this.$router.push(this.path);
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(this.path);
-					this.close();
-				}
-			}, null, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.close();
-				}
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				}
-			}], e);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qvzfzxam {
-	$header-height: 58px; // TODO: どこかに集約したい
-
-	--root-margin: 16px;
-	--margin: var(--marginHalf);
-
-	> .container {
-		position: fixed;
-		width: 370px;
-		height: 100vh;
-		overflow: auto;
-		box-sizing: border-box;
-
-		> .header {
-			display: flex;
-			position: sticky;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			font-weight: bold;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: blur(32px);
-			backdrop-filter: blur(32px);
-			background-color: var(--header);
-
-			> ._button {
-				height: $header-height;
-				width: $header-height;
-
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			> .title {
-				flex: 1;
-				position: relative;
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/frontend/src/ui/friendly-old/friendly.sidebar.vue b/packages/frontend/src/ui/friendly-old/friendly.sidebar.vue
deleted file mode 100644
index 4e02e50665..0000000000
--- a/packages/frontend/src/ui/friendly-old/friendly.sidebar.vue
+++ /dev/null
@@ -1,631 +0,0 @@
-<template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = isAccountMenuMode = false"
-			@touchstart.passive="showing = isAccountMenuMode = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav">
-			<div class="profile">
-				<button v-if="!iconOnly" class="item _button account" @click="openProfile">
-					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-				</button>
-				<button v-if="iconOnly" class="item _button account" @click="openAccountMenu">
-					<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-				</button>
-				<button v-else class="_button toggler" @click="toggleMenuMode">
-					<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
-					<i v-else class="fas fa-chevron-down"/>
-				</button>
-			</div>
-			<template v-if="!isAccountMenuMode">
-				<div class="post" @click="post">
-					<MkButton class="button" gradate full rounded>
-						<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
-					</MkButton>
-				</div>
-				<div class="divider"></div>
-				<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-					<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-				</MkA>
-				<template v-for="item in menu">
-					<div v-if="item === '-'" class="divider"></div>
-					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-						<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</component>
-				</template>
-				<div class="divider"></div>
-				<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-					<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
-				</MkA>
-				<button class="item _button" @click="more" v-click-anime>
-					<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-					<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-				</button>
-				<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null" v-click-anime>
-					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-				</MkA>
-				<div class="divider"></div>
-				<template v-if="$i.isPatron">
-					<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
-						<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
-					</button>
-					<button v-else class="patron-button _button" @click="patron" v-click-anime>
-						<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
-					</button>
-				</template>
-				<button v-else class="patron-button _button" @click="patron" v-click-anime>
-					<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
-				</button>
-				<div class="divider"></div>
-				<div class="about">
-					<MkA class="link" to="/about" v-click-anime>
-						<template v-if="isKokonect">
-							<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-							<p v-if="iconOnly" style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><br/><span style="color: var(--pick);">NECT</span></b></p>
-							<p v-else style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
-						</template>
-						<template v-else>
-							<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-						</template>
-					</MkA>
-				</div>
-				<!--<MisskeyLogo class="misskey"/>-->
-			</template>
-			<template v-else>
-				<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
-					<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
-				</button>
-				<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
-				<div class="divider"></div>
-				<button class="item-switch-acct _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
-				<button class="item-switch-acct danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
-			</template>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-import MkButton from '@client/components/ui/button.vue';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import MisskeyLogo from '@/../assets/client/misskey.svg';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MisskeyLogo,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			settingsWindowed: false,
-			isAccountMenuMode: false,
-			loadingAccounts: false,
-			showing: false,
-			isKokonect: null
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.isAccountMenuMode = false;
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
-
-		this.init();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async fetchAccounts() {
-			this.loadingAccounts = true;
-			this.accounts = await os.getAccounts();
-			this.loadingAccounts = false;
-		},
-
-		toggleMenuMode() {
-			this.isAccountMenuMode = !this.isAccountMenuMode;
-			if (this.isAccountMenuMode) {
-				this.fetchAccounts();
-			}
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => { this.signout(); },
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => { this.signoutAll(); },
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		patron() {
-			window.open("https://www.patreon.com/noridev", "_blank");
-		},
-
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
-		},
-
-		async openDrawerAccountMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.existingAccount,
-				action: () => { this.addAccount(); },
-			}, {
-				text: this.$ts.createAccount,
-				action: () => { this.createAccount(); },
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		async openSignoutMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.logout,
-				action: () => { this.signout(); },
-				danger: true,
-			}, {
-				text: this.$ts.logoutAll,
-				action: () => { this.signoutAll(); },
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.npcljfve {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-	$avatar-size: 46px;
-	$avatar-margin: 8px;
-
-	padding: 0 16px;
-	box-sizing: border-box;
-	width: 260px;
-
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width !important;
-
-		> .nav {
-			> .divider {
-				margin: 8px auto;
-				width: calc(100% - 32px);
-			}
-
-			> .post {
-				> .button {
-					width: 46px;
-					height: 46px;
-					padding: 0;
-				}
-
-				@media (max-width: (850px)) {
-					display: none;
-				}
-			}
-
-			> .item,
-				.patron-button {
-				padding-left: 0;
-				width: 100%;
-				text-align: center;
-				font-size: $ui-font-size * 1.1;
-				line-height: 3.7rem;
-				overflow: unset;
-
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
-
-				> i {
-					left: 10px;
-				}
-
-				> .text,
-					.name,
-					.patron-text {
-					display: none;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: unset;
-					bottom: 11px;
-					left: 33px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .patron,
-				.not-patron {
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	> .nav {
-		> .divider {
-			margin: 10px 0;
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .post {
-			position: sticky;
-			top: 65px;
-			z-index: 1;
-			padding: 16px 0;
-			background: var(--bg);
-
-			> .button {
-				min-width: 0;
-			}
-		}
-
-		> .about {
-			fill: currentColor;
-			padding: 8px 0 16px 0;
-			text-align: center;
-
-			> .link {
-				display: block;
-				//width: 32px;
-				margin: 0 auto;
-
-				img {
-					display: block;
-					width: 100%;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-			}
-		}
-
-		> .item,
-			.patron-button {
-			position: relative;
-			display: block;
-			font-size: $ui-font-size;
-			line-height: 2.6rem;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-
-			> i {
-				width: 32px;
-				margin-left: 3px;
-				margin-right: $avatar-margin;
-			}
-
-			> .avatar {
-				margin-left: unset;
-				margin-right: $avatar-margin;
-				width: $avatar-size;
-				height: $avatar-size;
-				vertical-align: middle;
-			}
-
-			> .name {
-				margin-left: 10px;
-				font-weight: bold;
-			}
-
-			> .indicator {
-				position: absolute;
-				bottom: 10px;
-				left: 0;
-				color: var(--navIndicator);
-				font-size: 7px;
-				animation: blink 1s infinite;
-			}
-
-			> .patron,
-				.not-patron {
-				margin-left: 6px;
-				margin-right: 12px;
-			}
-
-			> .patron {
-				color: var(--patron);
-			}
-
-			> .patron-text {
-				font-size: 0.9em;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-
-			&.active {
-				color: var(--navActive);
-			}
-		}
-
-		> .item-switch-acct {
-			position: relative;
-			display: block;
-			font-size: $ui-font-size;
-			line-height: 3rem;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-			padding-left: 12px;
-
-			> i {
-				width: 32px;
-				margin-left: 3px;
-				margin-right: $avatar-margin;
-			}
-
-			> .avatar {
-				margin-left: unset;
-				margin-right: $avatar-margin;
-				width: $avatar-size;
-				height: $avatar-size;
-				vertical-align: middle;
-			}
-
-			> .name {
-				margin-left: 10px;
-				font-weight: bold;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-
-			&.active {
-				color: var(--navActive);
-			}
-
-			&.danger {
-				color: red;
-			}
-		}
-
-		> .patron-button {
-			background: unset;
-			border: unset;
-		}
-
-		> .profile {
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			background: var(--bg);
-			padding: 10px 0 0 0;
-
-			> .item {
-				position: relative;
-				display: block;
-				font-size: $ui-font-size;
-				line-height: 2.6rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-
-				> i {
-					width: 32px;
-					margin-left: 3px;
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					margin-left: unset;
-					margin-right: $avatar-margin;
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 10px;
-					font-weight: bold;
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-			}
-
-			> .account {
-				padding: 10px 20px 0 0;
-			}
-
-			> .toggler {
-				position: absolute;
-				right: 0;
-				top: 25px;
-				width: 36px;
-				height: 36px;
-				z-index: 400;
-			}
-		}
-
-		> .account {
-			padding: 20px 0 0;
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old/friendly.vue b/packages/frontend/src/ui/friendly-old/friendly.vue
deleted file mode 100644
index 0de1725bb0..0000000000
--- a/packages/frontend/src/ui/friendly-old/friendly.vue
+++ /dev/null
@@ -1,600 +0,0 @@
-<template>
-<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
-	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
-
-	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<template v-if="!isMobile">
-			<div class="sidebar" v-if="!showMenuOnTop">
-				<XSidebar/>
-			</div>
-			<div class="widgets left" ref="widgetsLeft" v-else>
-				<XWidgets @mounted="attachSticky('widgetsLeft')" :place="'left'"/>
-			</div>
-		</template>
-
-		<main class="main _panel" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<header class="header">
-				<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
-			</header>
-			<div class="content">
-				<router-view v-slot="{ Component }">
-					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-						<keep-alive :include="['timeline']">
-							<component :is="Component" :ref="changePage"/>
-						</keep-alive>
-					</transition>
-				</router-view>
-			</div>
-		</main>
-
-		<div v-if="isDesktop" class="widgets right" ref="widgetsRight">
-			<XWidgets @mounted="attachSticky('widgetsRight')" :place="null"/>
-		</div>
-	</div>
-
-	<button v-if="fabButton && !(isDesktop || isWideTablet)" class="fab _buttonPrimary" :class="{ navHidden }" @click="onFabClicked" v-click-anime><i :key="fabIcon" :class="fabIcon"/></button>
-
-	<div class="buttons" v-if="isMobile">
-		<!-- <button class="button nav _button" @click="showDrawerNav" ref="navButton"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> -->
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.replace('/')" :class="{ active: $route.name === 'index' }"><i class="fas fa-home"></i><span v-if="queue > 0" class="indicator-home"><i class="fas fa-circle"></i></span></button>
-		<button class="button explore _button" @click="$route.name === 'explore' ? top() : $router.replace('/explore')" :class="{ active: $route.name === 'explore' }"><i class="fas fa-hashtag"/></button>
-		<button class="button notifications _button" @click="$route.name === 'notifications' ? top() : $router.replace('/my/notifications')" :class="{ active: $route.name === 'notifications' }"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button tab _button" @click="$route.name === 'messaging' ? top() : $router.replace('/my/messaging')" :class="{ active: $route.name === 'messaging' }"><i class="fas fa-comments"></i><span v-if="$i.hasUnreadMessagingMessage" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<!-- <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> -->
-	</div>
-
-	<XDrawerSidebar ref="drawerNav" class="sidebar" v-if="isMobile"/>
-
-	<transition name="tray-back">
-		<div class="tray-back _modalBg"
-			v-if="widgetsShowing"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition name="tray">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
-
-	<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
-import { instanceName } from '@client/config';
-import { StickySidebar } from '@client/scripts/sticky-sidebar';
-import XSidebar from './friendly.sidebar.vue';
-import XDrawerSidebar from './sidebar.vue';
-import XCommon from '../_common_/common.vue';
-import XHeader from './header.vue';
-import * as os from '@client/os';
-import { menuDef } from '@client/menu';
-import * as symbols from '@client/symbols';
-import XTimeline from '@client/components/timeline.vue';
-import { eventBus } from '@client/friendly/eventBus';
-
-const DESKTOP_THRESHOLD = 1100;
-const WIDE_TABLET_THRESHOLD = 850;
-const MOBILE_THRESHOLD = 600;
-
-localStorage.setItem('ui', 'friendly');
-
-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar,
-		XDrawerSidebar,
-		XHeader,
-		XTimeline,
-		XHeaderMenu: defineAsyncComponent(() => import('./friendly.header.vue')),
-		XWidgets: defineAsyncComponent(() => import('./friendly.widgets.vue'))
-	},
-
-	provide() {
-		return {
-			shouldHeaderThin: this.showMenuOnTop,
-		};
-	},
-
-	data() {
-		return {
-			pageInfo: null,
-			menuDef: menuDef,
-			globalHeaderHeight: 0,
-			navHidden: false,
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isWideTablet: window.innerWidth >= WIDE_TABLET_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			widgetsShowing: false,
-			fullView: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-			queue: 0,
-			routeList: [
-				'index',
-				'explore',
-				'notifications',
-				'messaging',
-				'user',
-				'drive',
-				'clips',
-				'pages',
-				'ads',
-				'gallery',
-				'channels',
-				'groups',
-				'antennas'
-			],
-			fabButton: false
-		};
-	},
-
-	computed: {
-		navIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-
-		fabIcon() {
-			return this.pageInfo && this.pageInfo.action ? this.pageInfo.action.icon : 'fas fa-pencil-alt';
-		},
-
-		showMenuOnTop(): boolean {
-			return !this.isMobile && this.$store.state.menuDisplay === 'top';
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-
-		if (this.$store.state.widgets.length === 0) {
-			this.$store.set('widgets', [{
-				name: 'calendar',
-				id: 'a', place: null, data: {}
-			}, {
-				name: 'notifications',
-				id: 'b', place: null, data: {}
-			}, {
-				name: 'trends',
-				id: 'c', place: null, data: {}
-			}]);
-		}
-
-		eventBus.on('kn-drawernav', () => this.showDrawerNav());
-		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
-		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
-	},
-
-	mounted() {
-		window.addEventListener('resize', () => {
-			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
-			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
-		}, { passive: true });
-
-		this.navHidden = this.isMobile;
-
-		if (this.$store.state.aiChanMode) {
-			const iframeRect = this.$refs.live2d.getBoundingClientRect();
-			window.addEventListener('mousemove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.clientX - iframeRect.left,
-						y: ev.clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-			window.addEventListener('touchmove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.touches[0].clientX - iframeRect.left,
-						y: ev.touches[0].clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-				document.title = `${this.pageInfo.title} | ${instanceName}`;
-				this.fabButton = this.routeList.includes(this.$route.name);
-			}
-		},
-
-		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-			window.addEventListener('scroll', () => {
-				sticky.calc(window.scrollY);
-			}, { passive: true });
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		back() {
-			history.back();
-		},
-
-		showDrawerNav() {
-			this.$refs.drawerNav.show();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		onContextmenu(e) {
-			const isLink = (el: HTMLElement) => {
-				if (el.tagName === 'A') return true;
-				if (el.parentElement) {
-					return isLink(el.parentElement);
-				}
-			};
-			if (isLink(e.target)) return;
-			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
-			if (window.getSelection().toString() !== '') return;
-			const path = this.$route.path;
-			os.contextMenu([{
-				type: 'label',
-				text: path,
-			}, {
-				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
-				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
-				action: () => {
-					this.fullView = !this.fullView;
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				}
-			}], e);
-		},
-
-		queueUpdated(q) {
-			this.queue = q;
-		},
-
-		queueReset() {
-			this.queue = 0;
-		},
-
-		onFabClicked(e) {
-			if (this.pageInfo && this.pageInfo.action) {
-				this.pageInfo.action.handler(e);
-			} else {
-				os.post_form();
-			}
-		},
-
-		onAiClick(ev) {
-			//if (this.live2d) this.live2d.click(ev);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.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;
-}
-
-.mk-app {
-	$nav-hide-threshold: 600px;
-	$header-height: 60px;
-	$ui-font-size: 1em;
-	$widgets-hide-threshold: 1200px;
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
-	box-sizing: border-box;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
-	}
-
-	&.isMobile {
-		> .columns {
-			display: block;
-			margin: 0;
-
-			> .main {
-				margin: 0;
-				padding-bottom: 92px;
-				border: none;
-				width: 100%;
-				border-radius: 0;
-
-				> .header {
-					width: 100%;
-				}
-			}
-		}
-
-		> .buttons {
-			> .button {
-				&:hover {
-					background: var(--panel);
-				}
-			}
-		}
-	}
-
-	> .columns {
-		display: flex;
-		justify-content: center;
-		max-width: 100%;
-		//margin: 32px 0;
-
-		&.fullView {
-			margin: 0;
-		
-			> .sidebar {
-				display: none;
-			}
-
-			> .widgets {
-				display: none;
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-
-		> .main {
-			min-width: 0;
-			width: 750px;
-			margin: 0 16px 0 0;
-			background: var(--panel);
-			border-left: solid 1px var(--divider);
-			border-right: solid 1px var(--divider);
-			border-radius: 0;
-			overflow: clip;
-			--margin: 12px;
-
-			> .header {
-				position: sticky;
-				z-index: 1000;
-				top: var(--globalHeaderHeight, 0px);
-				height: $header-height;
-				line-height: $header-height;
-				-webkit-backdrop-filter: blur(32px);
-				backdrop-filter: blur(32px);
-				background-color: var(--header);
-			}
-		}
-
-		> .widgets {
-			//--panelShadow: none;
-			width: 300px;
-			margin-top: 16px;
-
-			@media (max-width: $widgets-hide-threshold) {
-				display: none;
-			}
-
-			&.left {
-				margin-right: 16px;
-			}
-		}
-
-		> .sidebar {
-			margin-top: 16px;
-		}
-
-		&.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: 850px) {
-			margin: 0;
-
-			> .sidebar {
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-	}
-
-	> .fab {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		right: calc(32px + var(--margin) * 2 + 300px);
-		bottom: 32px;
-		width: 55px;
-		height: 55px;
-		border-radius: 100%;
-		// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
-		background: var(--accent);
-		color: white;
-
-		@media (max-width: $widgets-hide-threshold) {
-			right: 30px;
-		}
-
-		@media (max-width: $nav-hide-threshold) {
-			bottom: calc(66px + env(safe-area-inset-bottom));
-			right: 15px;
-		}
-
-		@media (min-width: (850px) + 1px) {
-			display: none;
-		}
-
-		@media (min-width: (600px) + 1px) {
-			bottom: calc(45px + env(safe-area-inset-bottom));
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		//padding: 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		-webkit-backdrop-filter: var(--blur, blur(32px));
-		backdrop-filter: var(--blur, blur(32px));
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
-
-		> .button {
-			position: relative;
-			flex: 1;
-			//padding: 0;
-			margin: auto;
-			height: 50px;
-			//border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-			padding: 15px 0 calc(constant(safe-area-inset-bottom) + 30px); /* iOS 11.0 */
-			padding: 15px 0 calc(env(safe-area-inset-bottom) + 30px); /* iOS 11.2 */
-
-			&:not(:last-child) {
-				//margin-right: 12px;
-			}
-
-			@media (max-width: 300px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			&.active {
-					color: var(--accent);
-			}
-
-			> .indicator,
-				.indicator-home {
-				position: absolute;
-				top: 7px;
-				right: 20px;
-				color: var(--indicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
-			> .indicator-home {
-				top: 8px;
-				right: 25px;
-				font-size: 6px;
-				animation: none;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 18px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .tray-back {
-		z-index: 1001;
-	}
-
-	> .tray {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		padding: var(--margin);
-		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;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old/friendly.widgets.vue b/packages/frontend/src/ui/friendly-old/friendly.widgets.vue
deleted file mode 100644
index 873a561a0d..0000000000
--- a/packages/frontend/src/ui/friendly-old/friendly.widgets.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<div class="ddiqwdnk">
-	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-	<MkAd v-if="($i.isPatron && !$store.state.removeAds) || !$i.isPatron" class="a" :prefer="['square']"/>
-
-	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@client/components/widgets.vue';
-
-export default defineComponent({
-	components: {
-		XWidgets
-	},
-
-	props: {
-		place: {
-			type: String,
-		}
-	},
-
-	emits: ['mounted'],
-
-	data() {
-		return {
-			editMode: false,
-		};
-	},
-
-	mounted() {
-		this.$emit('mounted', this.$el);
-	},
-
-	methods: {
-		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: this.place,
-			}, ...this.$store.state.widgets]);
-		},
-
-		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
-		},
-
-		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data: data
-			} : w));
-		},
-
-		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
-			]);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ddiqwdnk {
-	position: sticky;
-	height: min-content;
-	box-sizing: border-box;
-	padding-bottom: 8px;
-
-	> .widgets,
-	> .a {
-		width: 300px;
-	}
-
-	> .edit {
-		display: block;
-		margin: 28px auto;
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old/header.vue b/packages/frontend/src/ui/friendly-old/header.vue
deleted file mode 100644
index 1f46b713e6..0000000000
--- a/packages/frontend/src/ui/friendly-old/header.vue
+++ /dev/null
@@ -1,556 +0,0 @@
-<template>
-<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="`--height:${height};`" :key="key" ref="el">
-	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
-		<div class="buttons left" v-if="backButton && canBack && !fabButton">
-			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
-		</div>
-	</transition>
-	<div class="buttons left" v-if="isMobile && !canBack">
-		<button class="_button button" v-if="!(backButton && canBack) || fabButton" @click="showDrawerNav">
-			<MkAvatar class="avatar" v-if="!canBack || menuBar" :user="$i" :disable-preview="true" :show-indicator="true" v-click-anime/>
-			<!-- <i class="fas fa-bars"/> -->
-			<div v-if="$i.hasPendingReceivedFollowRequest || $i.hasUnreadAnnouncement || $i.hasUnreadMentions || $i.hasUnreadSpecifiedNotes" class="indicator"><i class="fas fa-circle"></i></div>
-		</button>
-	</div>
-	<template v-if="info">
-		<div class="titleContainer" :class="{ center: $route.name !== 'user' }" @click="showTabsPopup" v-if="!hideTitle">
-			<template v-if="info.tabs || $route.name === 'user'">
-				<template v-if="$route.name === 'user'">
-					<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-					<div class="title_user">
-						<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
-						<div class="subtitle" v-if="!narrow && info.subtitle">
-							{{ info.subtitle }}
-						</div>
-						<div class="subtitle activeTab" v-if="narrow && hasTabs">
-							{{ info.tabs.find(tab => tab.active)?.title }}
-							<i class="chevron fas fa-chevron-down"></i>
-						</div>
-					</div>
-				</template>
-				<div class="title tabs" v-else v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
-					<i v-if="tab.icon" class="fa-fw" :class="tab.icon" :key="tab.icon"/>
-					<span v-if="tab.title" class="title">{{ tab.title }}</span>
-					<i class="fas fa-circle indicator" v-if="tab.indicate"/>
-				</div>
-			</template>
-
-			<template v-else>
-				<i v-if="info.icon" class="icon" :class="info.icon"></i>
-				<div class="title">
-					<div v-if="info.title" class="title">{{ info.title }}</div>
-				</div>
-			</template>
-		</div>
-
-		<div class="tabs" v-if="!narrow && $route.name !== 'index' || hideTitle">
-			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-		</div>
-	</template>
-
-	<div class="buttons right">
-		<button v-if="queue > 0 && $route.name === 'index' && ($store.state.newNoteNotiBehavior === 'smail' || $store.state.newNoteNotiBehavior === 'header')" :class="{ 'new _button': $store.state.newNoteNotiBehavior === 'header', 'new-hover _buttonPrimary': $store.state.newNoteNotiBehavior === 'smail' }" @click="top" v-click-anime><i class="fas fa-chevron-up"></i></button>
-		<template v-if="info && info.actions && !narrow">
-			<template v-for="action in info.actions">
-				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
-				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
-			</template>
-		</template>
-		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, watch, PropType, ref, inject } from 'vue';
-import * as tinycolor from 'tinycolor2';
-import { eventBus } from "@client/friendly/eventBus";
-import { popupMenu } from '@client/os';
-import { url } from '@client/config';
-import { scrollToTop } from '@client/scripts/scroll';
-import MkButton from '@client/components/ui/button.vue';
-import { i18n } from '@client/i18n';
-import { globalEvents } from '@client/events';
-
-const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 600;
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	props: {
-		info: {
-			type: Object as PropType<{
-				actions?: {}[];
-				tabs?: {}[];
-			}>,
-			required: true
-		},
-		menu: {
-			required: false
-		},
-		thin: {
-			required: false,
-			default: false
-		},
-		backButton: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		closeButton: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		titleOnly: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		showIndicator: {
-			required: false,
-			default: false
-		}
-	},
-
-	setup(props) {
-		const el = ref<HTMLElement>(null);
-		const bg = ref(null);
-		const narrow = ref(false);
-		const height = ref(0);
-		const hasTabs = computed(() => {
-			return props.info.tabs && props.info.tabs.length > 0;
-		});
-		const shouldShowMenu = computed(() => {
-			if (props.info == null) return false;
-			if (props.info.actions != null && narrow.value) return true;
-			if (props.info.menu != null) return true;
-			if (props.info.share != null) return true;
-			if (props.menu != null) return true;
-			return false;
-		});
-		const canBack = ref(false);
-		const key = ref(0);
-		const queue = ref(0);
-		const fabButton = ref(false);
-		const menuBar = ref(false);
-
-		const share = () => {
-			navigator.share({
-				url: url + props.info.path,
-				...props.info.share,
-			});
-		};
-
-		const showMenu = (ev: MouseEvent) => {
-			let menu = props.info.menu ? props.info.menu() : [];
-			if (narrow.value && props.info.actions) {
-				menu = [...props.info.actions.map(x => ({
-					text: x.text,
-					icon: x.icon,
-					action: x.handler
-				})), menu.length > 0 ? null : undefined, ...menu];
-			}
-			if (props.info.share) {
-				if (menu.length > 0) menu.push(null);
-				menu.push({
-					text: i18n.locale.share,
-					icon: 'fas fa-share-alt',
-					action: share
-				});
-			}
-			if (props.menu) {
-				if (menu.length > 0) menu.push(null);
-				menu = menu.concat(props.menu);
-			}
-			popupMenu(menu, ev.currentTarget || ev.target);
-		};
-
-		const showTabsPopup = (ev: MouseEvent) => {
-			if (!hasTabs.value) return;
-			if (!narrow.value) return;
-			ev.preventDefault();
-			ev.stopPropagation();
-			const menu = props.info.tabs.map(tab => ({
-				text: tab.title,
-				icon: tab.icon,
-				action: tab.onClick,
-			}));
-			popupMenu(menu, ev.currentTarget || ev.target);
-		};
-
-		const preventDrag = (ev: TouchEvent) => {
-			ev.stopPropagation();
-		};
-
-		const onClick = () => {
-			scrollToTop(el.value, { behavior: 'smooth' });
-		};
-
-		const calcBg = () => {
-			const rawBg = props.info?.bg || 'var(--bg)';
-			const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-			tinyBg.setAlpha(0.85);
-			bg.value = tinyBg.toRgbString();
-		};
-
-		const showDrawerNav = () => {
-			eventBus.emit('kn-drawernav');
-		};
-
-		const onHeaderClick = () => {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		};
-
-		const queueUpdated = (q) => {
-			this.queue = q;
-		};
-
-		const queueReset = () => {
-			this.queue = 0;
-		};
-
-		const top = () => {
-			this.onHeaderClick();
-			this.queueReset();
-			eventBus.emit('kn-header-new-queue-reset', 0);
-		};
-
-		onMounted(() => {
-			calcBg();
-			globalEvents.on('themeChanged', calcBg);
-			onUnmounted(() => {
-				globalEvents.off('themeChanged', calcBg);
-			});
-
-			if (el.value.parentElement) {
-				height.value = el.value.parentElement.offsetHeight + 'px';
-				narrow.value = el.value.parentElement.offsetWidth < 500;
-				const ro = new ResizeObserver((entries, observer) => {
-					if (el.value) {
-						height.value = el.value.parentElement.offsetHeight + 'px';
-						narrow.value = el.value.parentElement.offsetWidth < 500;
-					}
-				});
-				ro.observe(el.value.parentElement);
-				onUnmounted(() => {
-					ro.disconnect();
-				});
-				setTimeout(() => {
-					const currentStickyTop = getComputedStyle(el.value.parentElement).getPropertyValue('--stickyTop') || '0px';
-					el.value.style.setProperty('--stickyTop', currentStickyTop);
-					el.value.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${el.value.offsetHeight}px)`);
-				}, 100); // レンダリング順序の関係で親のstickyTopの設定が少し遅れることがあるため
-			}
-		});
-
-		return {
-			el,
-			bg,
-			narrow,
-			height,
-			hasTabs,
-			shouldShowMenu,
-			canBack,
-			key,
-			queue,
-			fabButton,
-			menuBar,
-			share,
-			showMenu,
-			showTabsPopup,
-			preventDrag,
-			onClick,
-			showDrawerNav,
-			onHeaderClick,
-			queueUpdated,
-			queueReset,
-			top,
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			routeList: [
-				'explore',
-				'notifications',
-				'messaging'
-			],
-			hideTitle: inject('shouldOmitHeaderTitle', false),
-			thin_: props.thin || inject('shouldHeaderThin', false),
-		};
-	},
-
-	watch: {
-		$route: {
-			handler(to, from) {
-				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
-				this.fabButton = this.routeList.includes(this.$route.name);
-				this.menuBar = this.routeList.includes(this.$route.name);
-			},
-			immediate: true
-		},
-	},
-
-	created() {
-		eventBus.on('kn-timeline-new', (q) => this.queueUpdated(q));
-		eventBus.on('kn-timeline-new-queue-reset', () => this.queueReset());
-		console.log(this.fabButton);
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	$ui-font-size: 1em;
-	$avatar-size: 32px;
-	$avatar-margin: 10px;
-	display: flex;
-
-	&.thin {
-		--height: 50px;
-
-		> .titleContainer {
-			> .buttons {
-				&.left, &.right {
-					> .button {
-						$size: 50px;
-						height: $size;
-						width: $size;
-					}
-				}
-			}
-		}
-	}
-
-	&.slim {
-		text-align: center;
-
-		> .titleContainer {
-			margin: 0 auto;
-		}
-
-		> .buttons {
-			&.right {
-				margin-left: 0;
-			}
-		}
-	}
-
-	> .buttons {
-		&:empty {
-			width: var(--height);
-		}
-
-		&.left, &.right {
-			>.button {
-				height: var(--height);
-				width: var(--height);
-			}
-		}
-
-		&.left {
-			position: relative;
-			z-index: 1;
-			top: 0;
-			left: 0;
-
-			> .button {
-				> .indicator {
-					position: absolute;
-					bottom: 13px;
-					left: 43px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-			}
-
-			@media (max-width: 600px) {
-				position: absolute;
-			}
-		}
-
-		&.right {
-			position: absolute;
-			z-index: 1;
-			top: 0;
-			right: 0;
-			margin-left: 0;
-
-			> .new {
-				width: $avatar-size;
-				height: var(--height);
-			}
-
-			> .new-hover {
-				position: absolute;
-				width: $avatar-size;
-				height: $avatar-size;
-				top: 55px;
-				right: 14px;
-				border-radius: 100%;
-				// border: 2px solid var(--patron);
-				line-height: 0;
-				background: var(--pick);
-				margin-top: 10px;
-				// box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-
-				&:hover {
-					background: var(--pickLighten);
-				}
-			}
-		}
-
-		> .fullButton {
-			& + .fullButton {
-				margin-left: 12px;
-			}
-		}
-	}
-
-	> .titleContainer {
-		display: flex;
-		align-items: center;
-		overflow: auto;
-		white-space: nowrap;
-		text-align: left;
-		font-weight: bold;
-		height: var(--height);
-		flex-shrink: 0;
-
-		> .avatar {
-			$size: 32px;
-			display: inline-block;
-			width: $size;
-			height: $size;
-			vertical-align: bottom;
-			margin: 0 8px;
-			pointer-events: none;
-		}
-
-		> .icon {
-			margin-right: 8px;
-		}
-
-		> .title,
-			.title_user {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-
-			> .indicator {
-				position: absolute;
-				top: 13px;
-				right: 7px;
-				color: var(--indicator);
-				font-size: 7px;
-				animation: blink 1s infinite;
-			}
-
-			> .patron {
-				margin-left: 0.5em;
-				color: var(--patron);
-			}
-
-			> .subtitle {
-				opacity: 0.6;
-				font-size: 0.8em;
-				font-weight: normal;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-
-				&.activeTab {
-					text-align: center;
-
-					> .chevron {
-						display: inline-block;
-						margin-left: 6px;
-					}
-				}
-			}
-
-			&._button {
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			&.selected {
-				box-shadow: 0 -2px 0 0 var(--accent) inset;
-				color: var(--fgHighlighted);
-			}
-		}
-
-		> .title {
-			display: inline-block;
-			vertical-align: bottom;
-			position: relative;
-		}
-
-		> .title_user {
-			min-width: 0;
-			line-height: 1.1;
-		}
-
-		&.center {
-			margin: 0 auto;
-		}
-
-		> .tabs {
-			padding: 0 16px;
-		}
-	}
-
-	> .tabs {
-		margin-left: 16px;
-		font-size: 0.8em;
-		overflow: auto;
-		white-space: nowrap;
-
-		> .tab {
-			display: inline-block;
-			position: relative;
-			padding: 0 10px;
-			height: 100%;
-			font-weight: normal;
-			opacity: 0.7;
-
-			&:hover {
-				opacity: 1;
-			}
-
-			&.active {
-				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
-			}
-
-			> .icon + .title {
-				margin-left: 8px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/ui/friendly-old/sidebar.vue b/packages/frontend/src/ui/friendly-old/sidebar.vue
deleted file mode 100644
index 8a4a4d2663..0000000000
--- a/packages/frontend/src/ui/friendly-old/sidebar.vue
+++ /dev/null
@@ -1,735 +0,0 @@
-<template>
-<div class="mvcprjjd">
-	<transition name="nav-back">
-		<div class="nav-back _modalBg"
-			v-if="showing"
-			@click="showing = isAccountMenuMode = false"
-			@touchstart.passive="showing = isAccountMenuMode = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
-			<div>
-				<div class="profile">
-					<button class="item _button account" @click="openProfile">
-						<MkAvatar :user="$i" class="avatar"/><MkUserName class="name" :user="$i"/>
-					</button>
-					<button v-if="iconOnly && !hidden" class="item _button" @click="openAccountMenu">
-						<i class="fas fa-ellipsis-v"/>
-					</button>
-					<button v-else class="_button toggler" @click="toggleMenuMode">
-						<i v-if="isAccountMenuMode" class="fas fa-chevron-up"/>
-						<i v-else class="fas fa-chevron-down"/>
-					</button>
-				</div>
-				<template v-if="!isAccountMenuMode">
-					<div class="divider"></div>
-					<MkA class="item index" active-class="active" to="/" exact v-click-anime>
-						<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-					</MkA>
-					<template v-for="item in menu">
-						<div v-if="item === '-'" class="divider"></div>
-						<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
-							<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-							<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
-						</component>
-					</template>
-					<div class="divider"></div>
-					<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin" v-click-anime>
-						<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
-					</MkA>
-					<button class="item _button" @click="more" v-click-anime>
-						<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-						<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
-					</button>
-					<MkA class="item" active-class="active" to="/settings" v-click-anime>
-						<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-					</MkA>
-					<!-- <button class="item _button post" @click="post">
-						<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-					</button> -->
-					<div class="divider"></div>
-					<template v-if="$i.isPatron">
-						<button v-if="$i.isVip" class="patron-button _button" @click="patron" v-click-anime>
-							<span class="patron"><i class="fas fa-gem fa-fw"></i></span><span class="patron-text">{{ $ts.youAreVip }}</span>
-						</button>
-						<button v-else class="patron-button _button" @click="patron" v-click-anime>
-							<span class="patron"><i class="fas fa-heart fa-fw" style="animation: 1s linear 0s infinite normal both running mfm-rubberBand;"></i></span><span class="patron-text">{{ $ts.youArePatron }}</span>
-						</button>
-					</template>
-					<button v-else class="patron-button _button" @click="patron" v-click-anime>
-						<span class="not-patron"><i class="fas fa-heart fa-fw"></i></span><span class="patron-text">{{ $ts.youAreNotPatron }}</span>
-					</button>
-					<div class="divider"></div>
-					<div class="about">
-						<MkA class="link" to="/about" v-click-anime>
-							<template v-if="isKokonect">
-								<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-								<p style="font-size:10px;"><b><span style="color: var(--cherry);">KOKO</span><span style="color: var(--pick);">NECT</span></b></p>
-							</template>
-							<template v-else>
-								<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-							</template>
-						</MkA>
-					</div>
-				</template>
-				<template v-else>
-					<button v-for="acct in accounts" :key="acct.id" @click="switchAccount(acct)" class="item-switch-acct _button account" v-click-anime>
-						<MkAvatar :user="acct" class="avatar"/><MkUserName class="name" :user="acct"/>
-					</button>
-					<MkEllipsis v-if="loadingAccounts" class="item-switch-acct" />
-					<div class="divider" v-if="accounts.length > 0"></div>
-					<button class="item-button _button" @click="openDrawerAccountMenu"><i class="fas fa-plus"></i>{{ $ts.addAccount }}</button>
-					<button class="item-button danger _button" @click="openSignoutMenu"><i class="fas fa-sign-out-alt"></i>{{ $ts.logout }}</button>
-				</template>
-			</div>
-		</nav>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@client/config';
-import { search } from '@client/scripts/search';
-import * as os from '@client/os';
-import { menuDef } from '@client/friendly/menu-mobile';
-import { getAccounts, addAccount, login, signout, signoutAll } from '@client/account';
-
-export default defineComponent({
-	props: {
-		defaultHidden: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	data() {
-		return {
-			host: host,
-			showing: false,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			hidden: this.defaultHidden,
-			isAccountMenuMode: false,
-			loadingAccounts: false,
-			isKokonect: null
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-
-		hidden() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		}
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		this.init();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
-			if (!this.defaultHidden) {
-				this.hidden = (window.innerWidth <= 650);
-			}
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post_form();
-		},
-
-		search() {
-			search();
-		},
-
-		openProfile() {
-			this.$router.push({ path: `/@${ this.$i.username }` })
-		},
-
-		async fetchAccounts() {
-			this.loadingAccounts = true;
-			this.accounts = await os.getAccounts();
-			this.loadingAccounts = false;
-		},
-
-		toggleMenuMode() {
-			this.isAccountMenuMode = !this.isAccountMenuMode;
-			if (this.isAccountMenuMode) {
-				this.fetchAccounts();
-			}
-		},
-
-		async openAccountMenu(ev) {
-			const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
-			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-				accountsPromise.then(accounts => {
-					const account = accounts.find(x => x.id === a.id);
-					if (account == null) return res(null);
-					res({
-						type: 'user',
-						user: account,
-						action: () => { this.switchAccount(account); }
-					});
-				});
-			}));
-
-			os.popupMenu([...[{
-				type: 'link',
-				text: this.$ts.profile,
-				to: `/@${ this.$i.username }`,
-				avatar: this.$i,
-			}, null, ...accountItemPromises, {
-				text: this.$ts.addAccount,
-				icon: 'fas fa-plus',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.existingAccount,
-						action: () => { this.addAccount(); },
-					}, {
-						text: this.$ts.createAccount,
-						action: () => { this.createAccount(); },
-					}], ev.currentTarget || ev.target);
-				},
-			}, {
-				text: this.$ts.logout,
-				icon: 'fas fa-sign-out-alt',
-				action: () => {
-					os.popupMenu([{
-						text: this.$ts.logout,
-						action: () => { this.signout(); },
-						danger: true,
-					}, {
-						text: this.$ts.logoutAll,
-						action: () => { this.signoutAll(); },
-						danger: true,
-					}], ev.currentTarget || ev.target);
-				},
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		more(ev) {
-			os.popup(import('@client/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		addAccount() {
-			os.popup(import('@client/components/signin-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: res => {
-					addAccount(res.id, res.i);
-					this.switchAccountWithToken(res.i);
-				},
-			}, 'closed');
-		},
-
-		async switchAccount(account: any) {
-			const storedAccounts = await getAccounts();
-			const token = storedAccounts.find(x => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			login(token);
-		},
-
-		patron() {
-			window.open("https://www.patreon.com/noridev", "_blank");
-		},
-
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.isKokonect = meta.uri == 'https://kokonect.link' || 'http://localhost:3000';
-		},
-
-		async openDrawerAccountMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.existingAccount,
-				action: () => { this.addAccount(); },
-			}, {
-				text: this.$ts.createAccount,
-				action: () => { this.createAccount(); },
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		async openSignoutMenu(ev) {
-			os.popupMenu([...[{
-				text: this.$ts.logout,
-				action: () => { this.signout(); },
-				danger: true,
-			}, {
-				text: this.$ts.logoutAll,
-				action: () => { this.signoutAll(); },
-				danger: true,
-			}]], ev.currentTarget || ev.target, {
-				align: 'left'
-			});
-		},
-
-		signout,
-		signoutAll,
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.nav-enter-active,
-.nav-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);
-}
-.nav-enter-from,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter-from,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-
-	> .nav-back {
-		z-index: 1001;
-	}
-
-	> .nav {
-		$avatar-size: 38px;
-		$avatar-margin: 8px;
-
-		flex: 0 0 $nav-width;
-		width: $nav-width;
-		box-sizing: border-box;
-
-		&.iconOnly {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-
-			&:not(.hidden) {
-				> div {
-					width: $nav-icon-only-width;
-
-					> .divider {
-						margin: 8px auto;
-						width: calc(100% - 32px);
-					}
-
-					> .item,
-						.patron-button {
-						padding: 18px 0;
-						width: 100%;
-						text-align: center;
-						font-size: $ui-font-size * 1.1;
-						line-height: initial;
-
-						> i,
-						> .avatar {
-							display: block;
-							margin: 0 auto;
-						}
-
-						> i {
-							opacity: 0.7;
-						}
-
-						> .text,
-							.patron-text {
-							display: none;
-						}
-
-						> .patron,
-							.not-patron {
-							margin: 0;
-						}
-
-						&:hover, &.active {
-							> i, > .text {
-								opacity: 1;
-							}
-						}
-
-						&:first-child {
-							margin-bottom: 8px;
-						}
-
-						&:last-child {
-							margin-top: 8px;
-						}
-					}
-				}
-			}
-		}
-
-		&.hidden {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		&:not(.hidden) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-			height: calc(var(--vh, 1vh) * 100);
-			box-sizing: border-box;
-			overflow: auto;
-			overflow-x: clip;
-			background: var(--navBg);
-
-			> .divider {
-				margin: 16px;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> .about {
-				fill: currentColor;
-				padding: 8px 0 16px 0;
-				text-align: center;
-				
-				> .link {
-					display: block;
-					//width: 32px;
-					margin: 0 auto;
-					
-					img {
-						display: block;
-						width: 100%;
-					}
-
-					&:hover {
-						text-decoration: none;
-					}
-				}
-			}
-
-			> .item,
-				.patron-button {
-				position: relative;
-				display: block;
-				padding: 0 24px;
-				font-size: $ui-font-size;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					position: relative;
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				> .indicator {
-					position: absolute;
-					bottom: 8px;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 7px;
-					animation: blink 1s infinite;
-				}
-
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
-
-				> .patron,
-					.not-patron {
-					margin-left: 6px;
-					margin-right: 12px;
-				}
-
-				> .patron {
-					color: var(--patron);
-				}
-
-				> .patron-text {
-					font-size: 0.9em;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover, &.active {
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 8px;
-						background: var(--accentedBg);
-					}
-				}
-
-				&:last-child {
-					position: sticky;
-					z-index: 1;
-					bottom: 0;
-					margin-top: 16px;
-					border-top: solid 0.5px var(--divider);
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--X14);
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
-					color: var(--fgOnAccent);
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 20px);
-						height: calc(100% - 20px);
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-				}
-			}
-
-			> .item-switch-acct,
-			> .item-button {
-				position: relative;
-				display: block;
-				padding: 12px 24px 0;
-				font-size: $ui-font-size;
-				line-height: 3rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> i {
-					width: 32px;
-				}
-
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .name {
-					margin-left: 5px;
-					font-weight: bold;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&.danger {
-					color: red;
-				}
-			}
-
-			> .item-button {
-				padding: 0 24px;
-			}
-
-			> .profile {
-				position: sticky;
-				z-index: 1;
-				top: 0;
-				display: flex;
-				text-align: center;
-				justify-content: center;
-				align-items: center;
-				background: var(--X14);
-				-webkit-backdrop-filter: blur(8px);
-				backdrop-filter: blur(8px);
-
-				> .item {
-					position: relative;
-					display: block;
-					padding: 12px 24px 0;
-					font-size: $ui-font-size;
-					line-height: 3rem;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> i {
-						width: 32px;
-					}
-
-					> i,
-					> .avatar {
-						margin-right: $avatar-margin;
-					}
-
-					> .avatar {
-						width: $avatar-size;
-						height: $avatar-size;
-						vertical-align: middle;
-					}
-
-					> .name {
-						margin-left: 5px;
-						font-weight: bold;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover {
-						text-decoration: none;
-						color: var(--navHoverFg);
-					}
-				}
-
-				> .toggler {
-					//position: absolute;
-					//right: 15px;
-					width: 36px;
-					height: 36px;
-					margin: 12px 15px 0 0;
-					padding: 10px;
-					z-index: 400;
-				}
-			}
-
-			> .patron-button {
-				background: unset;
-				border: unset;
-			}
-		}
-	}
-}
-</style>