Merge branch 'develop' into swn

2021-10-14 01:15:58 +09:00 · 2021-10-14 01:15:58 +09:00 · 6f358718bb
commit 6f358718bb
parent 33676eba51 91c9a6390c
38 changed files with 836 additions and 697 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -18,6 +18,7 @@
 - クライアント: MFM関数構文のサジェストを実装
 - クライアント: 未読の通知のみ表示する機能
 - クライアント: 通知ページで通知の種類によるフィルタ
+- クライアント: ピン留めユーザーの設定項目がない問題を修正
 - ActivityPub: HTML -> MFMの変換を強化
 - API: i/notifications に unreadOnly オプションを追加
 - API: ap系のエンドポイントをログイン必須化+レートリミット追加
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -794,6 +794,8 @@ itsOff: "オフになっています"
 emailRequiredForSignup: "アカウント登録にメールアドレスを必須にする"
 unread: "未読"
 filter: "フィルタ"
+controllPanel: "コントロールパネル"
+manageAccounts: "アカウントを管理"

 _signup:
  almostThere: "ほとんど完了です"
--- a/src/client/account.ts
+++ b/src/client/account.ts
@ -1,9 +1,10 @@
 import { del, get, set } from '@client/scripts/idb-proxy';
 import { reactive } from 'vue';
 import { apiUrl } from '@client/config';
-import { waiting } from '@client/os';
+import { waiting, api, popup, popupMenu, success } from '@client/os';
 import { unisonReload, reloadChannel } from '@client/scripts/unison-reload';
 import { showSuspendedDialog } from './scripts/show-suspended-dialog';
+import { i18n } from './i18n';

 // TODO: 他のタブと永続化されたstateを同期

@ -129,6 +130,77 @@ export async function login(token: Account['token'], redirect?: string) {
 	unisonReload();
 }

+export async function openAccountMenu(ev: MouseEvent) {
+	function showSigninDialog() {
+		popup(import('@client/components/signin-dialog.vue'), {}, {
+			done: res => {
+				addAccount(res.id, res.i);
+				success();
+			},
+		}, 'closed');
+	}
+
+	function createAccount() {
+		popup(import('@client/components/signup-dialog.vue'), {}, {
+			done: res => {
+				addAccount(res.id, res.i);
+				switchAccountWithToken(res.i);
+			},
+		}, 'closed');
+	}
+
+	async function switchAccount(account: any) {
+		const storedAccounts = await getAccounts();
+		const token = storedAccounts.find(x => x.id === account.id).token;
+		switchAccountWithToken(token);
+	}
+
+	function switchAccountWithToken(token: string) {
+		login(token);
+	}
+
+	const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
+	const accountsPromise = 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: () => { switchAccount(account); }
+			});
+		});
+	}));
+
+	popupMenu([...[{
+		type: 'link',
+		text: i18n.locale.profile,
+		to: `/@${ $i.username }`,
+		avatar: $i,
+	}, null, ...accountItemPromises, {
+		icon: 'fas fa-plus',
+		text: i18n.locale.addAccount,
+		action: () => {
+			popupMenu([{
+				text: i18n.locale.existingAccount,
+				action: () => { showSigninDialog(); },
+			}, {
+				text: i18n.locale.createAccount,
+				action: () => { createAccount(); },
+			}], ev.currentTarget || ev.target);
+		},
+	}, {
+		type: 'link',
+		icon: 'fas fa-users',
+		text: i18n.locale.manageAccounts,
+		to: `/settings/accounts`,
+	}]], ev.currentTarget || ev.target, {
+		align: 'left'
+	});
+}
+
 // このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
 declare module '@vue/runtime-core' {
 	interface ComponentCustomProperties {
--- a/src/client/components/global/header.vue
+++ b/src/client/components/global/header.vue
@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick">
+<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick" ref="el">
 	<template v-if="info">
 		<div class="titleContainer" @click="showTabsPopup">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
@ -37,12 +37,14 @@
 </template>

 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } 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';

 export default defineComponent({
 	components: {
@ -51,6 +53,10 @@ export default defineComponent({

 	props: {
 		info: {
+			type: Object as PropType<{
+				actions?: {}[];
+				tabs?: {}[];
+			}>,
 			required: true
 		},
 		menu: {
@ -62,99 +68,122 @@ export default defineComponent({
 		},
 	},

-	data() {
-		return {
-			bg: null,
-			narrow: false,
-			height: 0,
-		};
-	},
-
-	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;
+	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;
-		}
-	},
+		});

-	mounted() {
-		const rawBg = this.info?.bg || 'var(--bg)';
-		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-		bg.setAlpha(0.85);
-		this.bg = bg.toRgbString();
-	
-		if (this.$el.parentElement) {
-			this.narrow = this.$el.parentElement.offsetWidth < 500;
-			new ResizeObserver((entries, observer) => {
-				this.narrow = this.$el.parentElement.offsetWidth < 500;
-			}).observe(this.$el.parentElement);
-			const currentStickyTop = getComputedStyle(this.$el).getPropertyValue('--stickyTop') || '0px';
-			this.$el.style.setProperty('--stickyTop', currentStickyTop);
-			this.$el.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${this.$el.offsetHeight}px)`);
-		}
-	},
-
-	methods: {
-		share() {
+		const share = () => {
 			navigator.share({
-				url: url + this.info.path,
-				...this.info.share,
+				url: url + props.info.path,
+				...props.info.share,
 			});
-		},
+		};

-		showMenu(ev) {
-			let menu = this.info.menu ? this.info.menu() : [];
-			if (this.narrow && this.info.actions) {
-				menu = [...this.info.actions.map(x => ({
+		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 (this.info.share) {
+			if (props.info.share) {
 				if (menu.length > 0) menu.push(null);
 				menu.push({
-					text: this.$ts.share,
+					text: i18n.locale.share,
 					icon: 'fas fa-share-alt',
-					action: this.share
+					action: share
 				});
 			}
-			if (this.menu) {
+			if (props.menu) {
 				if (menu.length > 0) menu.push(null);
-				menu = menu.concat(this.menu);
+				menu = menu.concat(props.menu);
 			}
 			popupMenu(menu, ev.currentTarget || ev.target);
-		},
+		};

-		showTabsPopup(ev) {
-			if (!this.hasTabs) return;
-			if (!this.narrow) return;
+		const showTabsPopup = (ev: MouseEvent) => {
+			if (!hasTabs.value) return;
+			if (!narrow.value) return;
 			ev.preventDefault();
 			ev.stopPropagation();
-			const menu = this.info.tabs.map(tab => ({
+			const menu = props.info.tabs.map(tab => ({
 				text: tab.title,
 				icon: tab.icon,
 				action: tab.onClick,
 			}));
 			popupMenu(menu, ev.currentTarget || ev.target);
-		},
+		};

-		preventDrag(ev) {
+		const preventDrag = (ev: TouchEvent) => {
 			ev.stopPropagation();
-		},
+		};

-		onClick(ev) {
-			scrollToTop(this.$el, { behavior: 'smooth' });
-		}
-	}
+		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();
+		};
+
+		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();
+				});
+				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,
+			share,
+			showMenu,
+			showTabsPopup,
+			preventDrag,
+			onClick,
+		};
+	},
 });
 </script>

@ -168,6 +197,7 @@ export default defineComponent({
 	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;
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@ -1,6 +1,5 @@
 <template>
-<component class="bghgjjyj _button"
-	:is="link ? 'MkA' : 'button'"
+<button v-if="!link" class="bghgjjyj _button"
 	:class="{ inline, primary, danger, rounded, full }"
 	:type="type"
 	@click="$emit('click', $event)"
@ -10,7 +9,17 @@
 	<div class="content">
 		<slot></slot>
 	</div>
-</component>
+</button>
+<MkA v-else class="bghgjjyj _button"
+	:class="{ inline, primary, danger, rounded, full }"
+	:to="to"
+	@mousedown="onMousedown"
+>
+	<div ref="ripples" class="ripples"></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+</MkA>
 </template>

 <script lang="ts">
@ -42,6 +51,10 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		to: {
+			type: String,
+			required: false
+		},
 		autofocus: {
 			type: Boolean,
 			required: false,
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@ -1,6 +1,6 @@
 <template>
 <div class="ssazuxis" v-size="{ max: [500] }">
-	<header @click="showBody = !showBody" class="_button">
+	<header @click="showBody = !showBody" class="_button" :style="{ background: bg }">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
 		<button class="_button">
@ -23,6 +23,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as tinycolor from 'tinycolor2';

 const localStoragePrefix = 'ui:folder:';

@ -41,6 +42,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			bg: null,
 			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
 		};
 	},
@ -51,6 +53,21 @@ export default defineComponent({
 			}
 		}
 	},
+	mounted() {
+		function getParentBg(el: Element | null): string {
+			if (el == null || el.tagName === 'BODY') return 'var(--bg)';
+			const bg = el.style.background || el.style.backgroundColor;
+			if (bg) {
+				return bg;
+			} else {
+				return getParentBg(el.parentElement);
+			}
+		}
+		const rawBg = getParentBg(this.$el);
+		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		bg.setAlpha(0.85);
+		this.bg = bg.toRgbString();
+	},
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
@ -100,12 +117,8 @@ export default defineComponent({
 		position: sticky;
 		top: var(--stickyTop, 0px);
 		padding: var(--x-padding);
-		background: var(--x-header, var(--panel));
-		/* TODO panelの半透明バージョンをプログラマティックに作りたい
-		background: var(--X17);
 		-webkit-backdrop-filter: var(--blur, blur(8px));
 		backdrop-filter: var(--blur, blur(20px));
-		*/

 		> .title {
 			margin: 0;
--- a/src/client/components/ui/super-menu.vue
+++ b/src/client/components/ui/super-menu.vue
@ -0,0 +1,151 @@
+<template>
+<div class="rrevdjwu" :class="{ grid }">
+	<div class="group" v-for="group in def">
+		<div class="title" v-if="group.title">{{ group.title }}</div>
+
+		<div class="items">
+			<template v-for="(item, i) in group.items">
+				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
+					<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
+					<span class="text">{{ item.text }}</span>
+				</a>
+				<button v-else-if="item.type === 'button'" @click="ev => item.action(ev)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
+					<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
+					<span class="text">{{ item.text }}</span>
+				</button>
+				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
+					<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
+					<span class="text">{{ item.text }}</span>
+				</MkA>
+			</template>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, unref } from 'vue';
+
+export default defineComponent({
+	props: {
+		def: {
+			type: Array,
+			required: true
+		},
+		grid: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.rrevdjwu {
+	> .group {
+		& + .group {
+			margin-top: 16px;
+			padding-top: 16px;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		margin-left: 16px;
+		margin-right: 16px;
+
+		> .title {
+			font-size: 0.9em;
+			opacity: 0.7;
+			margin: 0 0 8px 12px;
+		}
+	
+		> .items {
+			> .item {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				box-sizing: border-box;
+				padding: 10px 16px 10px 14px;
+				border-radius: 999px;
+				font-size: 0.9em;
+
+				&:hover {
+					text-decoration: none;
+					background: var(--panelHighlight);
+				}
+
+				&.active {
+					color: var(--accent);
+					background: var(--accentedBg);
+				}
+
+				&.danger {
+					color: var(--error);
+				}
+
+				> .icon {
+					width: 32px;
+					margin-right: 2px;
+					flex-shrink: 0;
+					text-align: center;
+					opacity: 0.8;
+				}
+
+				> .text {
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					padding-right: 12px;
+				}
+
+			}
+		}
+	}
+
+	&.grid {
+		> .group {
+			& + .group {
+				padding-top: 0;
+				border-top: none;
+			}
+
+			margin-left: 0;
+			margin-right: 0;
+
+			> .title {
+				font-size: 1em;
+				opacity: 0.7;
+				margin: 0 0 8px 16px;
+			}
+
+			> .items {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+				grid-gap: 8px;
+				padding: 0 16px;
+
+				> .item {
+					flex-direction: column;
+					padding: 18px 16px 16px 16px;
+					background: var(--panel);
+					border-radius: 8px;
+					text-align: center;
+
+					> .icon {
+						display: block;
+						margin-right: 0;
+						margin-bottom: 12px;
+						font-size: 1.5em;
+					}
+
+					> .text {
+						padding-right: 0;
+						width: 100%;
+						font-size: 0.8em;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/client/events.ts
+++ b/src/client/events.ts
@ -0,0 +1,4 @@
+import { EventEmitter } from 'eventemitter3';
+
+// TODO: 型付け
+export const globalEvents = new EventEmitter();
--- a/src/client/pages/emojis.category.vue
+++ b/src/client/pages/emojis.category.vue
@ -122,7 +122,6 @@ export default defineComponent({
 	}

 	> .emojis {
-		--x-header: var(--bg);
 		--x-padding: 0 16px;

 		.zuvgdzyt {
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@ -3,16 +3,7 @@
 	<MkHeader :info="header"/>

 	<div class="lznhrdub _root">
-		<div>
-			<div class="_isolated">
-				<MkInput v-model="query" :debounce="true" type="search">
-					<template #prefix><i class="fas fa-search"></i></template>
-					<template #label>{{ $ts.searchUser }}</template>
-				</MkInput>
-			</div>
-
-			<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
-
+		<div v-if="tab === 'local'">
 			<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 				<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
 				<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
@ -37,7 +28,7 @@
 				</MkFolder>
 			</template>
 		</div>
-		<div>
+		<div v-else-if="tab === 'remote'">
 			<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
 				<header><span>{{ $ts.exploreFediverse }}</span></header>
 			</div>
@ -71,6 +62,16 @@
 				</MkFolder>
 			</template>
 		</div>
+		<div v-else-if="tab === 'search'">
+			<div class="_isolated">
+				<MkInput v-model="query" :debounce="true" type="search">
+					<template #prefix><i class="fas fa-search"></i></template>
+					<template #label>{{ $ts.searchUser }}</template>
+				</MkInput>
+			</div>
+
+			<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
+		</div>
 	</div>
 </div>
 </template>
@ -102,12 +103,28 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.explore,
-				icon: 'fas fa-hashtag'
+				icon: 'fas fa-hashtag',
+				bg: 'var(--bg)',
 			},
-			header: {
+			tab: 'local',
+			header: computed(() => ({
 				title: this.$ts.explore,
-				icon: 'fas fa-hashtag'
-			},
+				icon: 'fas fa-hashtag',
+				bg: 'var(--bg)',
+				tabs: [{
+					active: this.tab === 'local',
+					title: this.$ts.local,
+					onClick: () => { this.tab = 'local'; },
+				}, {
+					active: this.tab === 'remote',
+					title: this.$ts.remote,
+					onClick: () => { this.tab = 'remote'; },
+				}, {
+					active: this.tab === 'search',
+					title: this.$ts.search,
+					onClick: () => { this.tab = 'search'; },
+				},]
+			})),
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
 				state: 'alive',
@ -200,6 +217,7 @@ export default defineComponent({
 .lznhrdub {
 	max-width: 1400px;
 	margin: 0 auto;
+	padding: 16px;
 }

 .localfedi7 {
--- a/src/client/pages/instance/database.vue
+++ b/src/client/pages/instance/database.vue
@ -43,7 +43,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.database,
-				icon: 'fas fa-database'
+				icon: 'fas fa-database',
+				bg: 'var(--bg)',
 			},
 			databasePromiseFactory: () => os.api('admin/get-table-stats', {}).then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size)),
 		}
--- a/src/client/pages/instance/email-settings.vue
+++ b/src/client/pages/instance/email-settings.vue
@ -66,7 +66,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailServer,
-				icon: 'fas fa-envelope'
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
 			},
 			enableEmail: false,
 			email: null,
--- a/src/client/pages/instance/files-settings.vue
+++ b/src/client/pages/instance/files-settings.vue
@ -56,7 +56,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.files,
-				icon: 'fas fa-cloud'
+				icon: 'fas fa-cloud',
+				bg: 'var(--bg)',
 			},
 			cacheRemoteFiles: false,
 			proxyRemoteFiles: false,
--- a/src/client/pages/instance/index.link.vue
+++ b/src/client/pages/instance/index.link.vue
@ -1,97 +0,0 @@
-<template>
-<div class="qmfkfnzh">
-	<a class="main _button" :href="to" target="_blank" v-if="external">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</a>
-	<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else>
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</MkA>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		to: {
-			type: String,
-			required: true
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
-		external: {
-			type: Boolean,
-			required: false
-		},
-		behavior: {
-			type: String,
-			required: false,
-		},
-	},
-	data() {
-		return {
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qmfkfnzh {
-	> .main {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 16px 10px 14px;
-		border-radius: 999px;
-		font-size: 0.9em;
-
-		&:hover {
-			text-decoration: none;
-			background: var(--panelHighlight);
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--accentedBg);
-		}
-
-		> .icon {
-			width: 32px;
-			margin-right: 2px;
-			flex-shrink: 0;
-			text-align: center;
-			opacity: 0.8;
-
-			&:empty {
-				display: none;
-
-				& + .text {
-					padding-left: 4px;
-				}
-			}
-		}
-
-		> .text {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			padding-right: 12px;
-		}
-
-		> .right {
-			margin-left: auto;
-			opacity: 0.7;
-
-			> .text:not(:empty) {
-				margin-right: 0.75em;
-			}
-		}
-	}
-}
-</style>
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@ -1,47 +1,16 @@
 <template>
 <div class="hiyeyicy" :class="{ wide: !narrow }" ref="el">
 	<div class="nav" v-if="!narrow || page == null">
-		<div class="group">
-			<div class="lxpfedzu">
-				<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</div>
-			<XLink :active="page === 'overview'" replace to="/instance/overview"><template #icon><i class="fas fa-tachometer-alt"></i></template>{{ $ts.overview }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.quickAction }}</div>
-			<FormButton @click="lookup"><i class="fas fa-search"></i> {{ $ts.lookup }}</FormButton>
-			<FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.administration }}</div>
-			<XLink :active="page === 'users'" replace to="/instance/users"><template #icon><i class="fas fa-users"></i></template>{{ $ts.users }}</XLink>
-			<XLink :active="page === 'emojis'" replace to="/instance/emojis"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.customEmojis }}</XLink>
-			<XLink :active="page === 'federation'" replace to="/instance/federation"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.federation }}</XLink>
-			<XLink :active="page === 'queue'" replace to="/instance/queue"><template #icon><i class="fas fa-clipboard-list"></i></template>{{ $ts.jobQueue }}</XLink>
-			<XLink :active="page === 'files'" replace to="/instance/files"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
-			<XLink :active="page === 'announcements'" replace to="/instance/announcements"><template #icon><i class="fas fa-broadcast-tower"></i></template>{{ $ts.announcements }}</XLink>
-			<XLink :active="page === 'ads'" replace to="/instance/ads"><template #icon><i class="fas fa-audio-description"></i></template>{{ $ts.ads }}</XLink>
-			<XLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.settings }}</div>
-			<XLink :active="page === 'settings'" replace to="/instance/settings"><template #icon><i class="fas fa-cog"></i></template>{{ $ts.general }}</XLink>
-			<XLink :active="page === 'files-settings'" replace to="/instance/files-settings"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
-			<XLink :active="page === 'email-settings'" replace to="/instance/email-settings"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.emailServer }}</XLink>
-			<XLink :active="page === 'object-storage'" replace to="/instance/object-storage"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.objectStorage }}</XLink>
-			<XLink :active="page === 'security'" replace to="/instance/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
-			<XLink :active="page === 'service-worker'" replace to="/instance/service-worker"><template #icon><i class="fas fa-bolt"></i></template>ServiceWorker</XLink>
-			<XLink :active="page === 'relays'" replace to="/instance/relays"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.relays }}</XLink>
-			<XLink :active="page === 'integrations'" replace to="/instance/integrations"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
-			<XLink :active="page === 'instance-block'" replace to="/instance/instance-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.instanceBlocking }}</XLink>
-			<XLink :active="page === 'proxy-account'" replace to="/instance/proxy-account"><template #icon><i class="fas fa-ghost"></i></template>{{ $ts.proxyAccount }}</XLink>
-			<XLink :active="page === 'other-settings'" replace to="/instance/other-settings"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.other }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.info }}</div>
-			<XLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</XLink>
-			<XLink :active="page === 'logs'" replace to="/instance/logs"><template #icon><i class="fas fa-stream"></i></template>{{ $ts.logs }}</XLink>
+		<MkHeader :info="header"></MkHeader>
+	
+		<div class="lxpfedzu">
+			<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 		</div>
+
+		<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+		<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+
+		<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
 	</div>
 	<div class="main">
 		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@ -52,11 +21,13 @@
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@client/i18n';
-import XLink from './index.link.vue';
+import MkSuperMenu from '@client/components/ui/super-menu.vue';
 import FormGroup from '@client/components/debobigego/group.vue';
 import FormBase from '@client/components/debobigego/base.vue';
 import FormButton from '@client/components/debobigego/button.vue';
+import MkInfo from '@client/components/ui/info.vue';
 import { scroll } from '@client/scripts/scroll';
+import { instance } from '@client/instance';
 import * as symbols from '@client/symbols';
 import * as os from '@client/os';
 import { lookupUser } from '@client/scripts/lookup-user';
@ -64,9 +35,10 @@ import { lookupUser } from '@client/scripts/lookup-user';
 export default defineComponent({
 	components: {
 		FormBase,
-		XLink,
+		MkSuperMenu,
 		FormGroup,
 		FormButton,
+		MkInfo,
 	},

 	props: {
@ -91,6 +63,151 @@ export default defineComponent({
 			INFO.value = viewInfo;
 		};
 		const pageProps = ref({});
+
+		const isEmpty = (x: any) => x == null || x == '';
+
+		const noMaintainerInformation = ref(false);
+		const noBotProtection = ref(false);
+
+		os.api('meta', { detail: true }).then(meta => {
+			// TODO: 設定が完了しても残ったままになるので、ストリーミングでmeta更新イベントを受け取ってよしなに更新する
+			noMaintainerInformation.value = isEmpty(meta.maintainerName) || isEmpty(meta.maintainerEmail);
+			noBotProtection.value = !meta.enableHcaptcha && !meta.enableRecaptcha;
+		});
+
+		const menuDef = computed(() => [{
+			title: i18n.locale.quickAction,
+			items: [{
+				type: 'button',
+				icon: 'fas fa-search',
+				text: i18n.locale.lookup,
+				action: lookup,
+			}, ...(instance.disableRegistration ? [{
+				type: 'button',
+				icon: 'fas fa-user',
+				text: i18n.locale.invite,
+				action: invite,
+			}] : [])],
+		}, {
+			title: i18n.locale.administration,
+			items: [{
+				icon: 'fas fa-tachometer-alt',
+				text: i18n.locale.dashboard,
+				to: '/instance/overview',
+				active: page.value === 'overview',
+			}, {
+				icon: 'fas fa-users',
+				text: i18n.locale.users,
+				to: '/instance/users',
+				active: page.value === 'users',
+			}, {
+				icon: 'fas fa-laugh',
+				text: i18n.locale.customEmojis,
+				to: '/instance/emojis',
+				active: page.value === 'emojis',
+			}, {
+				icon: 'fas fa-globe',
+				text: i18n.locale.federation,
+				to: '/instance/federation',
+				active: page.value === 'federation',
+			}, {
+				icon: 'fas fa-clipboard-list',
+				text: i18n.locale.jobQueue,
+				to: '/instance/queue',
+				active: page.value === 'queue',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.files,
+				to: '/instance/files',
+				active: page.value === 'files',
+			}, {
+				icon: 'fas fa-broadcast-tower',
+				text: i18n.locale.announcements,
+				to: '/instance/announcements',
+				active: page.value === 'announcements',
+			}, {
+				icon: 'fas fa-audio-description',
+				text: i18n.locale.ads,
+				to: '/instance/ads',
+				active: page.value === 'ads',
+			}, {
+				icon: 'fas fa-exclamation-circle',
+				text: i18n.locale.abuseReports,
+				to: '/instance/abuses',
+				active: page.value === 'abuses',
+			}],
+		}, {
+			title: i18n.locale.settings,
+			items: [{
+				icon: 'fas fa-cog',
+				text: i18n.locale.general,
+				to: '/instance/settings',
+				active: page.value === 'settings',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.files,
+				to: '/instance/files-settings',
+				active: page.value === 'files-settings',
+			}, {
+				icon: 'fas fa-envelope',
+				text: i18n.locale.emailServer,
+				to: '/instance/email-settings',
+				active: page.value === 'email-settings',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.objectStorage,
+				to: '/instance/object-storage',
+				active: page.value === 'object-storage',
+			}, {
+				icon: 'fas fa-lock',
+				text: i18n.locale.security,
+				to: '/instance/security',
+				active: page.value === 'security',
+			}, {
+				icon: 'fas fa-bolt',
+				text: 'ServiceWorker',
+				to: '/instance/service-worker',
+				active: page.value === 'service-worker',
+			}, {
+				icon: 'fas fa-globe',
+				text: i18n.locale.relays,
+				to: '/instance/relays',
+				active: page.value === 'relays',
+			}, {
+				icon: 'fas fa-share-alt',
+				text: i18n.locale.integration,
+				to: '/instance/integrations',
+				active: page.value === 'integrations',
+			}, {
+				icon: 'fas fa-ban',
+				text: i18n.locale.instanceBlocking,
+				to: '/instance/instance-block',
+				active: page.value === 'instance-block',
+			}, {
+				icon: 'fas fa-ghost',
+				text: i18n.locale.proxyAccount,
+				to: '/instance/proxy-account',
+				active: page.value === 'proxy-account',
+			}, {
+				icon: 'fas fa-cogs',
+				text: i18n.locale.other,
+				to: '/instance/other-settings',
+				active: page.value === 'other-settings',
+			}],
+		}, {
+			title: i18n.locale.info,
+			items: [{
+				icon: 'fas fa-database',
+				text: i18n.locale.database,
+				to: '/instance/database',
+				active: page.value === 'database',
+			}, {
+				icon: 'fas fa-stream',
+				text: i18n.locale.logs,
+				to: '/instance/logs',
+				active: page.value === 'logs',
+			}],
+		}]);
 		const component = computed(() => {
 			if (page.value == null) return null;
 			switch (page.value) {
@ -193,6 +310,12 @@ export default defineComponent({

 		return {
 			[symbols.PAGE_INFO]: INFO,
+			menuDef,
+			header: {
+				title: i18n.locale.controllPanel,
+			},
+			noMaintainerInformation,
+			noBotProtection,
 			page,
 			narrow,
 			view,
@ -216,20 +339,11 @@ export default defineComponent({

 		> .nav {
 			width: 32%;
-			max-width: 320px;
+			max-width: 280px;
 			box-sizing: border-box;
 			border-right: solid 0.5px var(--divider);
 			overflow: auto;
-
-			> .group {
-				padding: 16px;
-
-				> .label {
-					font-size: 0.9em;
-					opacity: 0.7;
-					margin: 0 0 8px 12px;
-				}
-			}
+			height: 100%;
 		}

 		> .main {
@ -238,10 +352,16 @@ export default defineComponent({
 			--baseContentWidth: 100%;
 		}
 	}
+
+	> .nav {
+		> .info {
+			margin: 16px;
+		}
+	}
 }

 .lxpfedzu {
-	padding: 16px;
+	margin: 16px;

 	> .icon {
 		display: block;
--- a/src/client/pages/instance/instance-block.vue
+++ b/src/client/pages/instance/instance-block.vue
@ -43,7 +43,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.instanceBlocking,
-				icon: 'fas fa-ban'
+				icon: 'fas fa-ban',
+				bg: 'var(--bg)',
 			},
 			blockedHosts: '',
 		}
--- a/src/client/pages/instance/integrations.vue
+++ b/src/client/pages/instance/integrations.vue
@ -49,7 +49,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.integration,
-				icon: 'fas fa-share-alt'
+				icon: 'fas fa-share-alt',
+				bg: 'var(--bg)',
 			},
 			enableTwitterIntegration: false,
 			enableGithubIntegration: false,
--- a/src/client/pages/instance/object-storage.vue
+++ b/src/client/pages/instance/object-storage.vue
@ -91,7 +91,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.objectStorage,
-				icon: 'fas fa-cloud'
+				icon: 'fas fa-cloud',
+				bg: 'var(--bg)',
 			},
 			useObjectStorage: false,
 			objectStorageBaseUrl: null,
--- a/src/client/pages/instance/other-settings.vue
+++ b/src/client/pages/instance/other-settings.vue
@ -49,7 +49,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.other,
-				icon: 'fas fa-cogs'
+				icon: 'fas fa-cogs',
+				bg: 'var(--bg)',
 			},
 			summalyProxy: '',
 			deeplAuthKey: '',
--- a/src/client/pages/instance/overview.vue
+++ b/src/client/pages/instance/overview.vue
@ -1,9 +1,6 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormInfo v-if="noMaintainerInformation" warn>{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></FormInfo>
-		<FormInfo v-if="noBotProtection" warn>{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></FormInfo>
-
 		<FormSuspense :p="fetchStats" v-slot="{ result: stats }">
 			<FormGroup>
 				<FormKeyValueView>
@ -98,8 +95,6 @@ export default defineComponent({
 			fetchServerInfo: () => os.api('admin/server-info', {}),
 			fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
 			fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
-			noMaintainerInformation: false,
-			noBotProtection: false,
 		}
 	},

@ -110,11 +105,6 @@ export default defineComponent({
 	methods: {
 		async init() {
 			this.meta = await os.api('meta', { detail: true });
-
-			const isEmpty = (x: any) => x == null || x == '';
-
-			this.noMaintainerInformation = isEmpty(this.meta.maintainerName) || isEmpty(this.meta.maintainerEmail);
-			this.noBotProtection = !this.meta.enableHcaptcha && !this.meta.enableRecaptcha;
 		},
 	
 		async showInstanceInfo(q) {
--- a/src/client/pages/instance/proxy-account.vue
+++ b/src/client/pages/instance/proxy-account.vue
@ -46,7 +46,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.proxyAccount,
-				icon: 'fas fa-ghost'
+				icon: 'fas fa-ghost',
+				bg: 'var(--bg)',
 			},
 			proxyAccount: null,
 			proxyAccountId: null,
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@ -34,6 +34,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.jobQueue,
 				icon: 'fas fa-clipboard-list',
+				bg: 'var(--bg)',
 			},
 			connection: markRaw(os.stream.useChannel('queueStats')),
 		}
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@ -36,6 +36,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.relays,
 				icon: 'fas fa-globe',
+				bg: 'var(--bg)',
 			},
 			relays: [],
 			inbox: '',
--- a/src/client/pages/instance/security.vue
+++ b/src/client/pages/instance/security.vue
@ -47,7 +47,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.security,
-				icon: 'fas fa-lock'
+				icon: 'fas fa-lock',
+				bg: 'var(--bg)',
 			},
 			enableHcaptcha: false,
 			enableRecaptcha: false,
--- a/src/client/pages/instance/service-worker.vue
+++ b/src/client/pages/instance/service-worker.vue
@ -51,7 +51,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'ServiceWorker',
-				icon: 'fas fa-bolt'
+				icon: 'fas fa-bolt',
+				bg: 'var(--bg)',
 			},
 			enableServiceWorker: false,
 			swPublicKey: null,
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@ -38,6 +38,11 @@
 			<span>{{ $ts.maintainerEmail }}</span>
 		</FormInput>

+		<FormTextarea v-model="pinnedUsers">
+			<span>{{ $ts.pinnedUsers }}</span>
+			<template #desc>{{ $ts.pinnedUsersDescription }}</template>
+		</FormTextarea>
+
 		<FormInput v-model="maxNoteTextLength" type="number">
 			<template #prefix><i class="fas fa-pencil-alt"></i></template>
 			<span>{{ $ts.maxNoteTextLength }}</span>
@ -84,7 +89,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.general,
-				icon: 'fas fa-cog'
+				icon: 'fas fa-cog',
+				bg: 'var(--bg)',
 			},
 			name: null,
 			description: null,
@ -97,6 +103,7 @@ export default defineComponent({
 			maxNoteTextLength: 0,
 			enableLocalTimeline: false,
 			enableGlobalTimeline: false,
+			pinnedUsers: '',
 		}
 	},

@ -118,6 +125,7 @@ export default defineComponent({
 			this.maxNoteTextLength = meta.maxNoteTextLength;
 			this.enableLocalTimeline = !meta.disableLocalTimeline;
 			this.enableGlobalTimeline = !meta.disableGlobalTimeline;
+			this.pinnedUsers = meta.pinnedUsers.join('\n');
 		},

 		save() {
@ -133,6 +141,7 @@ export default defineComponent({
 				maxNoteTextLength: this.maxNoteTextLength,
 				disableLocalTimeline: !this.enableLocalTimeline,
 				disableGlobalTimeline: !this.enableGlobalTimeline,
+				pinnedUsers: this.pinnedUsers.split('\n'),
 			}).then(() => {
 				fetchInstance();
 			});
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@ -29,9 +29,11 @@
 		</div>
 		<div class="inputs">
 			<MkInput v-model="searchUsername" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
+				<template #prefix>@</template>
 				<template #label>{{ $ts.username }}</template>
 			</MkInput>
 			<MkInput v-model="searchHost" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+				<template #prefix>@</template>
 				<template #label>{{ $ts.host }}</template>
 			</MkInput>
 		</div>
--- a/src/client/pages/my-antennas/editor.vue
+++ b/src/client/pages/my-antennas/editor.vue
@ -1,10 +1,10 @@
 <template>
 <div class="shaynizk">
 	<div class="form">
-		<MkInput v-model="name" class="">
+		<MkInput v-model="name" class="_formBlock">
 			<template #label>{{ $ts.name }}</template>
 		</MkInput>
-		<MkSelect v-model="src">
+		<MkSelect v-model="src" class="_formBlock">
 			<template #label>{{ $ts.antennaSource }}</template>
 			<option value="all">{{ $ts._antennaSources.all }}</option>
 			<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
@ -12,30 +12,30 @@
 			<option value="list">{{ $ts._antennaSources.userList }}</option>
 			<option value="group">{{ $ts._antennaSources.userGroup }}</option>
 		</MkSelect>
-		<MkSelect v-model="userListId" v-if="src === 'list'">
+		<MkSelect v-model="userListId" v-if="src === 'list'" class="_formBlock">
 			<template #label>{{ $ts.userList }}</template>
 			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
 		</MkSelect>
-		<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
+		<MkSelect v-model="userGroupId" v-else-if="src === 'group'" class="_formBlock">
 			<template #label>{{ $ts.userGroup }}</template>
 			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
 		</MkSelect>
-		<MkTextarea v-model="users" v-else-if="src === 'users'">
+		<MkTextarea v-model="users" v-else-if="src === 'users'" class="_formBlock">
 			<template #label>{{ $ts.users }}</template>
 			<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
 		</MkTextarea>
-		<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
-		<MkTextarea v-model="keywords">
+		<MkSwitch v-model="withReplies" class="_formBlock">{{ $ts.withReplies }}</MkSwitch>
+		<MkTextarea v-model="keywords" class="_formBlock">
 			<template #label>{{ $ts.antennaKeywords }}</template>
 			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
 		</MkTextarea>
-		<MkTextarea v-model="excludeKeywords">
+		<MkTextarea v-model="excludeKeywords" class="_formBlock">
 			<template #label>{{ $ts.antennaExcludeKeywords }}</template>
 			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
 		</MkTextarea>
-		<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
+		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ $ts.caseSensitive }}</MkSwitch>
+		<MkSwitch v-model="withFile" class="_formBlock">{{ $ts.withFileAntenna }}</MkSwitch>
+		<MkSwitch v-model="notify" class="_formBlock">{{ $ts.notifyAntenna }}</MkSwitch>
 	</div>
 	<div class="actions">
 		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@ -1,79 +1,82 @@
 <template>
-<div class="_root">
-	<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkA>
+<div>
+	<MkHeader :info="header"/>

-	<div class="buttons" style="margin: 16px;">
-		<MkButton inline @click="save" primary class="save" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-		<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
-		<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
-	</div>
+	<div class="_root">
+		<div class="jqqmcavi" style="margin: 16px;">
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
+			<MkButton inline @click="save" primary class="button" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+			<MkButton inline @click="duplicate" class="button" v-if="pageId"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
+			<MkButton inline @click="del" class="button" v-if="pageId && !readonly" danger><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+		</div>

-	<div v-if="tab === 'settings'">
-		<div style="padding: 16px;" class="_formRoot">
-			<MkInput v-model="title" class="_formBlock">
-				<template #label>{{ $ts._pages.title }}</template>
-			</MkInput>
+		<div v-if="tab === 'settings'">
+			<div style="padding: 16px;" class="_formRoot">
+				<MkInput v-model="title" class="_formBlock">
+					<template #label>{{ $ts._pages.title }}</template>
+				</MkInput>

-			<MkInput v-model="summary" class="_formBlock">
-				<template #label>{{ $ts._pages.summary }}</template>
-			</MkInput>
+				<MkInput v-model="summary" class="_formBlock">
+					<template #label>{{ $ts._pages.summary }}</template>
+				</MkInput>

-			<MkInput v-model="name" class="_formBlock">
-				<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-				<template #label>{{ $ts._pages.url }}</template>
-			</MkInput>
+				<MkInput v-model="name" class="_formBlock">
+					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+					<template #label>{{ $ts._pages.url }}</template>
+				</MkInput>

-			<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
+				<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>

-			<MkSelect v-model="font" class="_formBlock">
-				<template #label>{{ $ts._pages.font }}</template>
-				<option value="serif">{{ $ts._pages.fontSerif }}</option>
-				<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
-			</MkSelect>
+				<MkSelect v-model="font" class="_formBlock">
+					<template #label>{{ $ts._pages.font }}</template>
+					<option value="serif">{{ $ts._pages.fontSerif }}</option>
+					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+				</MkSelect>

-			<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>

-			<div class="eyeCatch">
-				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
-				<div v-else-if="eyeCatchingImage">
-					<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-					<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+				<div class="eyeCatch">
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+					<div v-else-if="eyeCatchingImage">
+						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
+						<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>

-	<div v-else-if="tab === 'contents'">
-		<div style="padding: 16px;">
-			<XBlocks class="content" v-model="content" :hpml="hpml"/>
+		<div v-else-if="tab === 'contents'">
+			<div style="padding: 16px;">
+				<XBlocks class="content" v-model="content" :hpml="hpml"/>

-			<MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
+				<MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
+			</div>
 		</div>
-	</div>

-	<div v-else-if="tab === 'variables'">
-		<div class="qmuvgica">
-			<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-				<template #item="{element}">
-					<XVariable
-						:value="element"
-						:removable="true"
-						@remove="() => removeVariable(element)"
-						:hpml="hpml"
-						:name="element.name"
-						:title="element.name"
-						:draggable="true"
-					/>
-				</template>
-			</XDraggable>
+		<div v-else-if="tab === 'variables'">
+			<div class="qmuvgica">
+				<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+					<template #item="{element}">
+						<XVariable
+							:modelValue="element"
+							:removable="true"
+							@remove="() => removeVariable(element)"
+							:hpml="hpml"
+							:name="element.name"
+							:title="element.name"
+							:draggable="true"
+						/>
+					</template>
+				</XDraggable>

-			<MkButton @click="addVariable()" class="add" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
+				<MkButton @click="addVariable()" class="add" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
+			</div>
 		</div>
-	</div>

-	<div v-else-if="tab === 'script'">
-		<div>
-			<MkTextarea class="_code" v-model="script"/>
+		<div v-else-if="tab === 'script'">
+			<div>
+				<MkTextarea class="_code" v-model="script"/>
+			</div>
 		</div>
 	</div>
 </div>
@ -128,6 +131,21 @@ export default defineComponent({
 	data() {
 		return {
 			[symbols.PAGE_INFO]: computed(() => {
+				let title = this.$ts._pages.newPage;
+				if (this.initPageId) {
+					title = this.$ts._pages.editPage;
+				}
+				else if (this.initPageName && this.initUser) {
+					title = this.$ts._pages.readPage;
+				}
+				return {
+					title: title,
+					icon: 'fas fa-pencil-alt',
+					bg: 'var(--bg)',
+				};
+			}),
+			tab: 'settings',
+			header: computed(() => {
 				let title = this.$ts._pages.newPage;
 				if (this.initPageId) {
 					title = this.$ts._pages.editPage;
@ -162,7 +180,6 @@ export default defineComponent({
 					}]
 				};
 			}),
-			tab: 'settings',
 			author: this.$i,
 			readonly: false,
 			page: null,
@ -474,6 +491,14 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+.jqqmcavi {
+	> .button {
+		& + .button {
+			margin-left: 8px;
+		}
+	}
+}
+
 .gwbmwxkm {
 	position: relative;

@ -541,11 +566,7 @@ export default defineComponent({
 }

 .qmuvgica {
-	padding: 32px;
-
-	@media (max-width: 500px) {
-		padding: 16px;
-	}
+	padding: 16px;

 	> .variables {
 		margin-bottom: 16px;
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@ -1,5 +1,5 @@
 <template>
-<div>
+<div style="margin: 16px;">
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
 		<MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
--- a/src/client/pages/settings/index.link.vue
+++ b/src/client/pages/settings/index.link.vue
@ -1,105 +0,0 @@
-<template>
-<div class="qmfkfnzj">
-	<a v-if="external" class="main _button" :href="to" target="_blank">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</a>
-	<MkA v-else-if="to" class="main _button" :class="{ active }" :to="to" :behavior="behavior">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</MkA>
-	<button v-else class="main _button button" :class="{ danger }">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</button>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		to: {
-			type: String,
-			required: false
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
-		danger: {
-			type: Boolean,
-			required: false
-		},
-		external: {
-			type: Boolean,
-			required: false
-		},
-		behavior: {
-			type: String,
-			required: false,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.qmfkfnzj {
-	> .main {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 16px 10px 14px;
-		border-radius: 999px;
-		font-size: 0.9em;
-
-		&:hover {
-			text-decoration: none;
-			background: var(--panelHighlight);
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--accentedBg);
-		}
-
-		&.danger {
-			color: var(--error);
-		}
-
-		> .icon {
-			width: 32px;
-			margin-right: 2px;
-			flex-shrink: 0;
-			text-align: center;
-			opacity: 0.8;
-
-			&:empty {
-				display: none;
-
-				& + .text {
-					padding-left: 4px;
-				}
-			}
-		}
-
-		> .text {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			padding-right: 12px;
-		}
-
-		> .right {
-			margin-left: auto;
-			opacity: 0.7;
-
-			> .text:not(:empty) {
-				margin-right: 0.75em;
-			}
-		}
-	}
-}
-</style>
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@ -1,42 +1,9 @@
 <template>
 <div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
 	<div class="nav" v-if="!narrow || page == null">
-		<div class="group accounts">
-			<MkAvatar :user="$i" class="avatar"/>
-			<XLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</XLink>
-		</div>
+		<div class="title">{{ $ts.settings }}</div>
 		<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
-		<div class="group">
-			<div class="label">{{ $ts.basicSettings }}</div>
-			<XLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</XLink>
-			<XLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</XLink>
-			<XLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</XLink>
-			<XLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</XLink>
-			<XLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</XLink>
-			<XLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</XLink>
-			<XLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
-			<XLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.clientSettings }}</div>
-			<XLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</XLink>
-			<XLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</XLink>
-			<XLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</XLink>
-			<XLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</XLink>
-			<XLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.otherSettings }}</div>
-			<XLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</XLink>
-			<XLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</XLink>
-			<XLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</XLink>
-			<XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink>
-			<XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink>
-		</div>
-		<div class="group">
-			<XLink @click="clear"><template #icon><i class="fas fa-trash"></i></template>{{ $ts.clearCache }}</XLink>
-			<XLink @click="logout" danger><template #icon><i class="fas fa-sign-in-alt fa-flip-horizontal"></i></template>{{ $ts.logout }}</XLink>
-		</div>
+		<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
 	</div>
 	<div class="main">
 		<component :is="component" :key="page" v-bind="pageProps"/>
@ -47,8 +14,8 @@
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@client/i18n';
-import XLink from './index.link.vue';
 import MkInfo from '@client/components/ui/info.vue';
+import MkSuperMenu from '@client/components/ui/super-menu.vue';
 import { scroll } from '@client/scripts/scroll';
 import { signout } from '@client/account';
 import { unisonReload } from '@client/scripts/unison-reload';
@ -58,8 +25,8 @@ import { $i } from '@client/account';

 export default defineComponent({
 	components: {
-		XLink,
 		MkInfo,
+		MkSuperMenu,
 	},

 	props: {
@ -80,6 +47,125 @@ export default defineComponent({
 		const narrow = ref(false);
 		const view = ref(null);
 		const el = ref(null);
+		const menuDef = computed(() => [{
+			title: i18n.locale.basicSettings,
+			items: [{
+				icon: 'fas fa-user',
+				text: i18n.locale.profile,
+				to: '/settings/profile',
+				active: page.value === 'profile',
+			}, {
+				icon: 'fas fa-lock-open',
+				text: i18n.locale.privacy,
+				to: '/settings/privacy',
+				active: page.value === 'privacy',
+			}, {
+				icon: 'fas fa-laugh',
+				text: i18n.locale.reaction,
+				to: '/settings/reaction',
+				active: page.value === 'reaction',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.drive,
+				to: '/settings/drive',
+				active: page.value === 'drive',
+			}, {
+				icon: 'fas fa-bell',
+				text: i18n.locale.notifications,
+				to: '/settings/notifications',
+				active: page.value === 'notifications',
+			}, {
+				icon: 'fas fa-envelope',
+				text: i18n.locale.email,
+				to: '/settings/email',
+				active: page.value === 'email',
+			}, {
+				icon: 'fas fa-share-alt',
+				text: i18n.locale.integration,
+				to: '/settings/integration',
+				active: page.value === 'integration',
+			}, {
+				icon: 'fas fa-lock',
+				text: i18n.locale.security,
+				to: '/settings/security',
+				active: page.value === 'security',
+			}],
+		}, {
+			title: i18n.locale.clientSettings,
+			items: [{
+				icon: 'fas fa-cogs',
+				text: i18n.locale.general,
+				to: '/settings/general',
+				active: page.value === 'general',
+			}, {
+				icon: 'fas fa-palette',
+				text: i18n.locale.theme,
+				to: '/settings/theme',
+				active: page.value === 'theme',
+			}, {
+				icon: 'fas fa-list-ul',
+				text: i18n.locale.menu,
+				to: '/settings/menu',
+				active: page.value === 'menu',
+			}, {
+				icon: 'fas fa-music',
+				text: i18n.locale.sounds,
+				to: '/settings/sounds',
+				active: page.value === 'sounds',
+			}, {
+				icon: 'fas fa-plug',
+				text: i18n.locale.plugins,
+				to: '/settings/plugin',
+				active: page.value === 'plugin',
+			}],
+		}, {
+			title: i18n.locale.otherSettings,
+			items: [{
+				icon: 'fas fa-boxes',
+				text: i18n.locale.importAndExport,
+				to: '/settings/import-export',
+				active: page.value === 'import-export',
+			}, {
+				icon: 'fas fa-ban',
+				text: i18n.locale.muteAndBlock,
+				to: '/settings/mute-block',
+				active: page.value === 'mute-block',
+			}, {
+				icon: 'fas fa-comment-slash',
+				text: i18n.locale.wordMute,
+				to: '/settings/word-mute',
+				active: page.value === 'word-mute',
+			}, {
+				icon: 'fas fa-key',
+				text: 'API',
+				to: '/settings/api',
+				active: page.value === 'api',
+			}, {
+				icon: 'fas fa-ellipsis-h',
+				text: i18n.locale.other,
+				to: '/settings/other',
+				active: page.value === 'other',
+			}],
+		}, {
+			items: [{
+				type: 'button',
+				icon: 'fas fa-trash',
+				text: i18n.locale.clearCache,
+				action: () => {
+					localStorage.removeItem('locale');
+					localStorage.removeItem('theme');
+					unisonReload();
+				},
+			}, {
+				type: 'button',
+				icon: 'fas fa-sign-in-alt fa-flip-horizontal',
+				text: i18n.locale.logout,
+				action: () => {
+					signout();
+				},
+				danger: true,
+			},],
+		}]);

 		const pageProps = ref({});
 		const component = computed(() => {
@ -170,20 +256,13 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: INFO,
 			page,
+			menuDef,
 			narrow,
 			view,
 			el,
 			pageProps,
 			component,
 			emailNotConfigured,
-			logout: () => {
-				signout();
-			},
-			clear: () => {
-				localStorage.removeItem('locale');
-				localStorage.removeItem('theme');
-				unisonReload();
-			},
 		};
 	},
 });
@ -192,16 +271,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vvcocwet {
 	> .nav {
-		> .group {
-			padding: 16px;
-
-			> .label {
-				font-size: 0.9em;
-				opacity: 0.7;
-				margin: 0 0 8px 12px;
-			}
-		}
-
 		> .info {
 			margin: 0 16px;
 		}
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@ -27,7 +27,7 @@
 					<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
 				</div>
 				<div class="action">
-					<MkButton @click="signup()" inline primary data-cy-signup>{{ $ts.signup }}</MkButton>
+					<MkButton @click="signup()" inline primary data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
 					<MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
 				</div>
 				<div class="status" v-if="onlineUsersCount && stats">
--- a/src/client/scripts/theme.ts
+++ b/src/client/scripts/theme.ts
@ -1,3 +1,4 @@
+import { globalEvents } from '@client/events';
 import * as tinycolor from 'tinycolor2';

 export type Theme = {
@ -62,6 +63,9 @@ export function applyTheme(theme: Theme, persist = true) {
 	if (persist) {
 		localStorage.setItem('theme', JSON.stringify(props));
 	}
+
+	// 色計算など再度行えるようにクライアント全体に通知
+	globalEvents.emit('themeChanged');
 }

 function compile(theme: Theme): Record<string, string> {
--- a/src/client/ui/_common_/sidebar.vue
+++ b/src/client/ui/_common_/sidebar.vue
@ -50,7 +50,7 @@ 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 { openAccountMenu } from '@client/account';

 export default defineComponent({
 	props: {
@ -134,76 +134,12 @@ export default defineComponent({
 			search();
 		},

-		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, {
-				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: async res => {
-					await addAccount(res.id, res.i);
-					os.success();
-				},
-			}, 'closed');
-		},
-
-		createAccount() {
-			os.popup(import('@client/components/signup-dialog.vue'), {}, {
-				done: async res => {
-					await 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);
-		},
+		openAccountMenu,
 	}
 });
 </script>
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@ -109,6 +109,7 @@ import { search } from '@client/scripts/search';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { store } from './store';
 import * as symbols from '@client/symbols';
+import { openAccountMenu } from '@client/account';

 export default defineComponent({
 	components: {
@ -253,6 +254,8 @@ export default defineComponent({
 				}
 			}], e);
 		},
+
+		openAccountMenu,
 	}
 });
 </script>
--- a/src/client/ui/default.header.vue
+++ b/src/client/ui/default.header.vue
@ -44,7 +44,7 @@ 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 { openAccountMenu } from '@client/account';
 import MkButton from '@client/components/ui/button.vue';

 export default defineComponent({
@ -100,76 +100,12 @@ export default defineComponent({
 			search();
 		},

-		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, {
-				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');
-		},
-
-		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);
-		},
+		openAccountMenu,
 	}
 });
 </script>
--- a/src/client/ui/default.sidebar.vue
+++ b/src/client/ui/default.sidebar.vue
@ -46,7 +46,7 @@ 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 { openAccountMenu } 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';
@ -120,76 +120,12 @@ export default defineComponent({
 			search();
 		},

-		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, {
-				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');
-		},
-
-		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);
-		},
+		openAccountMenu,
 	}
 });
 </script>