Merge branch 'develop' into pizzax-indexeddb

2022-03-27 22:42:05 +09:00
parent a4de5aa94b 515ab0105a
commit 7314643b8d
484 changed files with 5750 additions and 4207 deletions
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -10,8 +10,8 @@
 		"lodash": "^4.17.21"
 	},
 	"dependencies": {
-		"@discordapp/twemoji": "13.1.0",
-		"@fortawesome/fontawesome-free": "6.0.0",
+		"@discordapp/twemoji": "13.1.1",
+		"@fortawesome/fontawesome-free": "6.1.1",
 		"@syuilo/aiscript": "0.11.1",
 		"@types/escape-regexp": "0.0.1",
 		"@types/glob": "7.2.0",
@@ -26,15 +26,15 @@
 		"@types/punycode": "2.1.0",
 		"@types/qrcode": "1.4.2",
 		"@types/random-seed": "0.3.3",
-		"@types/seedrandom": "2.4.28",
+		"@types/seedrandom": "3.0.2",
 		"@types/throttle-debounce": "2.1.0",
 		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "8.3.4",
 		"@types/webpack": "5.28.0",
 		"@types/webpack-stream": "3.2.12",
 		"@types/websocket": "1.0.5",
-		"@types/ws": "8.2.3",
-		"@typescript-eslint/parser": "5.12.1",
+		"@types/ws": "8.5.3",
+		"@typescript-eslint/parser": "5.16.0",
 		"@vue/compiler-sfc": "3.2.31",
 		"abort-controller": "3.0.0",
 		"autobind-decorator": "2.4.0",
@@ -44,16 +44,16 @@
 		"broadcast-channel": "4.10.0",
 		"chart.js": "3.7.1",
 		"chartjs-adapter-date-fns": "2.0.0",
-		"chartjs-plugin-gradient": "0.2.1",
-		"chartjs-plugin-zoom": "1.2.0",
+		"chartjs-plugin-gradient": "0.2.2",
+		"chartjs-plugin-zoom": "1.2.1",
 		"compare-versions": "4.1.3",
 		"content-disposition": "0.5.4",
-		"css-loader": "6.6.0",
-		"cssnano": "5.0.17",
+		"css-loader": "6.7.1",
+		"cssnano": "5.1.5",
 		"date-fns": "2.28.0",
 		"deepcopy": "2.1.0",
 		"escape-regexp": "0.0.1",
-		"eslint": "8.9.0",
+		"eslint": "8.11.0",
 		"eslint-plugin-vue": "8.5.0",
 		"eventemitter3": "4.0.7",
 		"feed": "4.2.2",
@@ -61,19 +61,19 @@
 		"idb-keyval": "6.1.0",
 		"insert-text-at-cursor": "0.3.0",
 		"ip-cidr": "3.0.4",
-		"json5": "2.2.0",
+		"json5": "2.2.1",
 		"json5-loader": "4.0.1",
-		"katex": "0.15.2",
+		"katex": "0.15.3",
 		"matter-js": "0.18.0",
 		"mfm-js": "0.21.0",
 		"misskey-js": "0.0.14",
-		"mocha": "9.2.1",
+		"mocha": "9.2.2",
 		"ms": "2.1.3",
 		"nested-property": "4.0.0",
 		"parse5": "6.0.1",
 		"photoswipe": "git+https://github.com/dimsemenov/photoswipe#v5-beta",
 		"portscanner": "2.2.0",
-		"postcss": "8.4.6",
+		"postcss": "8.4.12",
 		"postcss-loader": "6.2.1",
 		"prismjs": "1.27.0",
 		"private-ip": "2.3.3",
@@ -86,7 +86,7 @@
 		"reflect-metadata": "0.1.13",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
-		"sass": "1.49.8",
+		"sass": "1.49.9",
 		"sass-loader": "12.6.0",
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
@@ -94,33 +94,33 @@
 		"style-loader": "3.3.1",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
-		"three": "0.136.0",
+		"three": "0.139.0",
 		"throttle-debounce": "3.0.1",
 		"tinycolor2": "1.4.2",
-		"ts-loader": "9.2.6",
+		"ts-loader": "9.2.8",
 		"tsc-alias": "1.5.0",
-		"tsconfig-paths": "3.12.0",
-		"twemoji-parser": "13.1.0",
-		"typescript": "4.5.5",
+		"tsconfig-paths": "3.14.1",
+		"twemoji-parser": "14.0.0",
+		"typescript": "4.6.3",
 		"uuid": "8.3.2",
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.2",
 		"vue": "3.2.31",
 		"vue-loader": "17.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
-		"vue-router": "4.0.12",
+		"vue-router": "4.0.14",
 		"vue-style-loader": "4.1.3",
 		"vue-svg-loader": "0.17.0-beta.2",
 		"vuedraggable": "4.0.1",
-		"webpack": "5.69.1",
+		"webpack": "5.70.0",
 		"webpack-cli": "4.9.2",
 		"websocket": "1.0.34",
 		"ws": "8.5.0"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "5.12.1",
+		"@typescript-eslint/eslint-plugin": "5.16.0",
 		"cross-env": "7.0.3",
-		"cypress": "9.5.0",
+		"cypress": "9.5.2",
 		"eslint-plugin-import": "2.25.4",
 		"start-server-and-test": "1.14.0"
 	}
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -2,7 +2,7 @@ import { del, get, set } from '@/scripts/idb-proxy';
 import { reactive } from 'vue';
 import * as misskey from 'misskey-js';
 import { apiUrl } from '@/config';
-import { waiting, api, popup, popupMenu, success } from '@/os';
+import { waiting, api, popup, popupMenu, success, alert } from '@/os';
 import { unisonReload, reloadChannel } from '@/scripts/unison-reload';
 import { showSuspendedDialog } from './scripts/show-suspended-dialog';
 import { i18n } from './i18n';
@@ -89,7 +89,11 @@ function fetchAccount(token): Promise<Account> {
 						signout();
 					});
 				} else {
-					signout();
+					alert({
+						type: 'error',
+						title: i18n.ts.failedToFetchAccountInformation,
+						text: JSON.stringify(res.error),
+					});
 				}
 			} else {
 				res.token = token;
@@ -116,6 +120,7 @@ export async function login(token: Account['token'], redirect?: string) {
 	if (_DEV_) console.log('logging as token ', token);
 	const me = await fetchAccount(token);
 	localStorage.setItem('account', JSON.stringify(me));
+	document.cookie = `token=${token}; path=/; max-age=31536000`; // bull dashboardの認証とかで使う
 	await addAccount(me.id, token);

 	if (redirect) {
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -70,7 +70,8 @@ const colors = {
 	red: '#FF4560',
 	purple: '#e300db',
 	orange: '#fe6919',
-	lime: '#c7f400',
+	lime: '#bde800',
+	cyan: '#00e0e0',
 };
 const colorSets = [colors.blue, colors.green, colors.yellow, colors.red, colors.purple];
 const getColor = (i) => {
@@ -126,7 +127,7 @@ export default defineComponent({
 				name: string;
 				type: 'line' | 'area';
 				color?: string;
-				borderDash?: number[];
+				dashed?: boolean;
 				hidden?: boolean;
 				data: {
 					x: number;
@@ -216,7 +217,7 @@ export default defineComponent({
 						pointRadius: 0,
 						borderWidth: props.bar ? 0 : 2,
 						borderColor: x.color ? x.color : getColor(i),
-						borderDash: x.borderDash || [],
+						borderDash: x.dashed ? [5, 5] : [],
 						borderJoinStyle: 'round',
 						borderRadius: props.bar ? 3 : undefined,
 						backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
@@ -225,7 +226,7 @@ export default defineComponent({
 								axis: 'y',
 								colors: {
 									0: alpha(x.color ? x.color : getColor(i), 0),
-									[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.175),
+									[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
 								},
 							},
 						},
@@ -274,7 +275,7 @@ export default defineComponent({
 						y: {
 							position: 'left',
 							stacked: props.stacked,
-							suggestedMax: 100,
+							suggestedMax: 50,
 							grid: {
 								color: gridColor,
 								borderColor: 'rgb(0, 0, 0, 0)',
@@ -388,20 +389,33 @@ export default defineComponent({
 					type: 'area',
 					data: format(raw.stalled),
 					color: colors.red,
+				}, {
+					name: 'Pub Active',
+					type: 'line',
+					data: format(raw.pubActive),
+					color: colors.purple,
+				}, {
+					name: 'Sub Active',
+					type: 'line',
+					data: format(raw.subActive),
+					color: colors.orange,
 				}, {
 					name: 'Pub & Sub',
-					type: 'area',
+					type: 'line',
 					data: format(raw.pubsub),
-					color: colors.lime,
+					dashed: true,
+					color: colors.cyan,
 				}, {
 					name: 'Pub',
-					type: 'area',
+					type: 'line',
 					data: format(raw.pub),
+					dashed: true,
 					color: colors.purple,
 				}, {
 					name: 'Sub',
-					type: 'area',
+					type: 'line',
 					data: format(raw.sub),
+					dashed: true,
 					color: colors.orange,
 				}],
 			};
@@ -582,7 +596,7 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					borderDash: [5, 5],
+					dashed: true,
 					data: format(
 						sum(
 							raw.local.incSize,
@@ -617,7 +631,7 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					borderDash: [5, 5],
+					dashed: true,
 					data: format(
 						sum(
 							raw.local.incCount,
@@ -784,6 +798,36 @@ export default defineComponent({
 			};
 		};

+		const fetchPerUserFollowingChart = async (): Promise<typeof data> => {
+			const raw = await os.api('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+			return {
+				series: [{
+					name: 'Local',
+					type: 'area',
+					data: format(raw.local.followings.total),
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: format(raw.remote.followings.total),
+				}],
+			};
+		};
+
+		const fetchPerUserFollowersChart = async (): Promise<typeof data> => {
+			const raw = await os.api('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+			return {
+				series: [{
+					name: 'Local',
+					type: 'area',
+					data: format(raw.local.followers.total),
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: format(raw.remote.followers.total),
+				}],
+			};
+		};
+
 		const fetchPerUserDriveChart = async (): Promise<typeof data> => {
 			const raw = await os.api('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
 			return {
@@ -827,6 +871,8 @@ export default defineComponent({
 					case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);

 					case 'per-user-notes': return fetchPerUserNotesChart();
+					case 'per-user-following': return fetchPerUserFollowingChart();
+					case 'per-user-followers': return fetchPerUserFollowersChart();
 					case 'per-user-drive': return fetchPerUserDriveChart();
 				}
 			};
--- a/packages/client/src/components/global/url.vue
+++ b/packages/client/src/components/global/url.vue
@@ -24,6 +24,14 @@ import { url as local } from '@/config';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';

+function safeURIDecode(str: string) {
+	try {
+		return decodeURIComponent(str);
+	} catch {
+		return str;
+	}
+}
+
 export default defineComponent({
 	props: {
 		url: {
@@ -54,9 +62,9 @@ export default defineComponent({
 			schema: url.protocol,
 			hostname: decodePunycode(url.hostname),
 			port: url.port,
-			pathname: decodeURIComponent(url.pathname),
-			query: decodeURIComponent(url.search),
-			hash: decodeURIComponent(url.hash),
+			pathname: safeURIDecode(url.pathname),
+			query: safeURIDecode(url.search),
+			hash: safeURIDecode(url.hash),
 			self: self,
 			attr: self ? 'to' : 'href',
 			target: self ? null : '_blank',
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">
@@ -44,7 +44,9 @@ import { deviceKind } from '@/scripts/device-kind';

 const props = withDefaults(defineProps<{
 	src?: HTMLElement;
+	anchor?: { x: string; y: string; };
 }>(), {
+	anchor: () => ({ x: 'right', y: 'center' }),
 });

 const emit = defineEmits<{
--- a/packages/client/src/components/media-caption.vue
+++ b/packages/client/src/components/media-caption.vue
@@ -141,6 +141,10 @@ export default defineComponent({
 	width: 100%;
 	height: 100%;
 	flex-direction: row;
+	overflow: scroll;
+	position: fixed;
+	left: 0;
+	top: 0;
 }
@media (max-width: 850px) {
 	.container {
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/note-detailed.vue
@@ -154,7 +154,18 @@ const props = defineProps<{

 const inChannel = inject('inChannel', null);

-const note = $ref(JSON.parse(JSON.stringify(props.note)));
+let note = $ref(JSON.parse(JSON.stringify(props.note)));
+
+// plugin
+if (noteViewInterruptors.length > 0) {
+	onMounted(async () => {
+		let result = JSON.parse(JSON.stringify(note));
+		for (const interruptor of noteViewInterruptors) {
+			result = await interruptor.handler(result);
+		}
+		note = result;
+	});
+}

 const isRenote = (
 	note.renote != null &&
@@ -168,7 +179,7 @@ const menuButton = ref<HTMLElement>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $ref(isRenote ? note.renote as misskey.entities.Note : note);
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
 const isDeleted = ref(false);
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -138,7 +138,18 @@ const props = defineProps<{

 const inChannel = inject('inChannel', null);

-const note = $ref(JSON.parse(JSON.stringify(props.note)));
+let note = $ref(JSON.parse(JSON.stringify(props.note)));
+
+// plugin
+if (noteViewInterruptors.length > 0) {
+	onMounted(async () => {
+		let result = JSON.parse(JSON.stringify(note));
+		for (const interruptor of noteViewInterruptors) {
+			result = await interruptor.handler(result);
+		}
+		note = result;
+	});
+}

 const isRenote = (
 	note.renote != null &&
@@ -152,7 +163,7 @@ const menuButton = ref<HTMLElement>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $ref(isRenote ? note.renote as misskey.entities.Note : note);
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
 const collapsed = ref(appearNote.cw == null && appearNote.text != null && (
--- a/packages/client/src/components/notification-toast.vue
+++ b/packages/client/src/components/notification-toast.vue
@@ -53,7 +53,7 @@ onMounted(() => {
 	}

 	@media (max-width: 500px) {
-		bottom: 92px;
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
 		padding: 0 8px;
 	}

--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/notification.vue
@@ -1,7 +1,8 @@
 <template>
 <div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
 	<div class="head">
-		<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
+		<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
+		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
 			<i v-if="notification.type === 'follow'" class="fas fa-plus"></i>
@@ -13,6 +14,7 @@
 			<i v-else-if="notification.type === 'mention'" class="fas fa-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="fas fa-quote-left"></i>
 			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
+			<i v-else-if="notification.type === 'pollEnded'" class="fas fa-poll-h"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<XReactionIcon v-else-if="notification.type === 'reaction'"
 				ref="reactionRef"
@@ -24,7 +26,8 @@
 	</div>
 	<div class="tail">
 		<header>
-			<MkA v-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
+			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
+			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
 		</header>
@@ -52,6 +55,11 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 			<i class="fas fa-quote-right"></i>
 		</MkA>
+		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<i class="fas fa-quote-left"></i>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<i class="fas fa-quote-right"></i>
+		</MkA>
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $ts.followRequestAccepted }}</span>
 		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $ts.reject }}</button></div></span>
@@ -169,6 +177,7 @@ export default defineComponent({
 			rejectGroupInvitation,
 			elRef,
 			reactionRef,
+			i18n,
 		};
 	},
 });
@@ -274,6 +283,12 @@ export default defineComponent({
 				background: #88a6b7;
 				pointer-events: none;
 			}
+
+			&.pollEnded {
+				padding: 3px;
+				background: #88a6b7;
+				pointer-events: none;
+			}
 		}
 	}

--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -17,7 +17,7 @@
 </template>

 <script lang="ts" setup>
-import { defineComponent, PropType, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
+import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import MkPagination from '@/components/ui/pagination.vue';
 import { Paging } from '@/components/ui/pagination.vue';
@@ -29,25 +29,24 @@ import { stream } from '@/stream';
 import { $i } from '@/account';

 const props = defineProps<{
-	includeTypes?: PropType<typeof notificationTypes[number][]>;
+	includeTypes?: typeof notificationTypes[number][];
 	unreadOnly?: boolean;
 }>();

 const pagingComponent = ref<InstanceType<typeof MkPagination>>();

-const allIncludeTypes = computed(() => props.includeTypes ?? notificationTypes.filter(x => !$i.mutingNotificationTypes.includes(x)));
-
 const pagination: Paging = {
 	endpoint: 'i/notifications' as const,
 	limit: 10,
 	params: computed(() => ({
-		includeTypes: allIncludeTypes.value || undefined,
+		includeTypes: props.includeTypes ?? undefined,
+		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
 		unreadOnly: props.unreadOnly,
 	})),
 };

 const onNotification = (notification) => {
-	const isMuted = !allIncludeTypes.value.includes(notification.type);
+	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
 	if (isMuted || document.visibilityState === 'visible') {
 		stream.send('readNotification', {
 			id: notification.id
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -30,7 +30,7 @@ type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';

 const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
-	srcCenter?: boolean;
+	anchor?: { x: string; y: string; };
 	src?: HTMLElement;
 	preferType?: ModalTypes | 'auto';
 	zPriority?: 'low' | 'middle' | 'high';
@@ -39,6 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 	manualShowing: null,
 	src: null,
+	anchor: () => ({ x: 'center', y: 'bottom' }),
 	preferType: 'auto',
 	zPriority: 'low',
 	noOverlap: true,
@@ -105,7 +106,7 @@ const align = () => {
 	const popover = content.value!;
 	if (popover == null) return;

-	const rect = props.src.getBoundingClientRect();
+	const srcRect = props.src.getBoundingClientRect();
 	
 	const width = popover.offsetWidth;
 	const height = popover.offsetHeight;
@@ -113,16 +114,23 @@ const align = () => {
 	let left;
 	let top;

-	if (props.srcCenter) {
-		const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
-		const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2);
-		left = (x - (width / 2));
+	const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
+	const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
+
+	if (props.anchor.x === 'center') {
+		left = x + (props.src.offsetWidth / 2) - (width / 2);
+	} else if (props.anchor.x === 'left') {
+		// TODO
+	} else if (props.anchor.x === 'right') {
+		left = x + props.src.offsetWidth;
+	}
+
+	if (props.anchor.y === 'center') {
 		top = (y - (height / 2));
-	} else {
-		const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
-		const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight;
-		left = (x - (width / 2));
-		top = y;
+	} else if (props.anchor.y === 'top') {
+		// TODO
+	} else if (props.anchor.y === 'bottom') {
+		top = y + props.src.offsetHeight;
 	}

 	if (fixed.value) {
@@ -132,11 +140,11 @@ const align = () => {
 		}

 		const underSpace = (window.innerHeight - MARGIN) - top;
-		const upperSpace = (rect.top - MARGIN);
+		const upperSpace = (srcRect.top - MARGIN);

 		// 画面から縦にはみ出る場合
 		if (top + height > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap) {
+			if (props.noOverlap && props.anchor.x === 'center') {
 				if (underSpace >= (upperSpace / 3)) {
 					maxHeight.value = underSpace;
 				} else {
@@ -156,11 +164,11 @@ const align = () => {
 		}

 		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
-		const upperSpace = (rect.top - MARGIN);
+		const upperSpace = (srcRect.top - MARGIN);

 		// 画面から縦にはみ出る場合
 		if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap) {
+			if (props.noOverlap && props.anchor.x === 'center') {
 				if (underSpace >= (upperSpace / 3)) {
 					maxHeight.value = underSpace;
 				} else {
@@ -183,14 +191,23 @@ const align = () => {
 		left = 0;
 	}

-	if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
-		transformOrigin.value = 'center top';
-	} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
-		transformOrigin.value = 'center bottom';
-	} else {
-		transformOrigin.value = 'center';
+	let transformOriginX = 'center';
+	let transformOriginY = 'center';
+
+	if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) {
+		transformOriginY = 'top';
+	} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) {
+		transformOriginY = 'bottom';
 	}

+	if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) {
+		transformOriginX = 'left';
+	} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) {
+		transformOriginX = 'right';
+	}
+
+	transformOrigin.value = `${transformOriginX} ${transformOriginY}`;
+
 	popover.style.left = left + 'px';
 	popover.style.top = top + 'px';
 };
--- a/packages/client/src/directives/click-anime.ts
+++ b/packages/client/src/directives/click-anime.ts
@@ -3,6 +3,7 @@ import { defaultStore } from '@/store';

 export default {
 	mounted(el, binding, vn) {
+		/*
 		if (!defaultStore.state.animation) return;

 		el.classList.add('_anime_bounce_standBy');
@@ -25,5 +26,6 @@ export default {
 			el.classList.remove('_anime_bounce');
 			el.classList.add('_anime_bounce_standBy');
 		});
+		*/
 	}
 } as Directive;
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -293,23 +293,25 @@ export function inputDate(props: {
 	});
 }

-export function select(props: {
+export function select<C extends any = any>(props: {
 	title?: string | null;
 	text?: string | null;
 	default?: string | null;
-	items?: {
-		value: string;
+} & ({
+	items: {
+		value: C;
 		text: string;
 	}[];
-	groupedItems?: {
+} | {
+	groupedItems: {
 		label: string;
 		items: {
-			value: string;
+			value: C;
 			text: string;
 		}[];
 	}[];
-}): Promise<{ canceled: true; result: undefined; } | {
-	canceled: false; result: string;
+})): Promise<{ canceled: true; result: undefined; } | {
+	canceled: false; result: C;
 }> {
 	return new Promise((resolve, reject) => {
 		popup(import('@/components/dialog.vue'), {
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -84,7 +84,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.enableHcaptcha = meta.enableHcaptcha;
 			this.hcaptchaSiteKey = meta.hcaptchaSiteKey;
 			this.hcaptchaSecretKey = meta.hcaptchaSecretKey;
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -95,7 +95,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.enableEmail = meta.enableEmail;
 			this.email = meta.email;
 			this.smtpSecure = meta.smtpSecure;
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -42,7 +42,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.blockedHosts = meta.blockedHosts.join('\n');
 		},

--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -60,7 +60,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.uri = meta.uri;
 			this.enableDiscordIntegration = meta.enableDiscordIntegration;
 			this.discordClientId = meta.discordClientId;
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -60,7 +60,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.uri = meta.uri;
 			this.enableGithubIntegration = meta.enableGithubIntegration;
 			this.githubClientId = meta.githubClientId;
--- a/packages/client/src/pages/admin/integrations.twitter.vue
+++ b/packages/client/src/pages/admin/integrations.twitter.vue
@@ -60,7 +60,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.uri = meta.uri;
 			this.enableTwitterIntegration = meta.enableTwitterIntegration;
 			this.twitterConsumerKey = meta.twitterConsumerKey;
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -62,7 +62,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.enableTwitterIntegration = meta.enableTwitterIntegration;
 			this.enableGithubIntegration = meta.enableGithubIntegration;
 			this.enableDiscordIntegration = meta.enableDiscordIntegration;
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -120,7 +120,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.useObjectStorage = meta.useObjectStorage;
 			this.objectStorageBaseUrl = meta.objectStorageBaseUrl;
 			this.objectStorageBucket = meta.objectStorageBucket;
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -44,7 +44,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 		},
 		save() {
 			os.apiWithDialog('admin/update-meta', {
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -46,7 +46,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.proxyAccountId = meta.proxyAccountId;
 			if (this.proxyAccountId) {
 				this.proxyAccount = await os.api('users/show', { userId: this.proxyAccountId });
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -17,6 +17,7 @@ import XQueue from './queue.chart.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as symbols from '@/symbols';
+import * as config from '@/config';

 export default defineComponent({
 	components: {
@@ -32,6 +33,14 @@ export default defineComponent({
 				title: this.$ts.jobQueue,
 				icon: 'fas fa-clipboard-list',
 				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-up-right-from-square',
+					text: this.$ts.dashboard,
+					handler: () => {
+						window.open(config.url + '/queue', '_blank');
+					},
+				}],
 			},
 			connection: markRaw(stream.useChannel('queueStats')),
 		}
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -72,7 +72,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.summalyProxy = meta.summalyProxy;
 			this.enableHcaptcha = meta.enableHcaptcha;
 			this.enableRecaptcha = meta.enableRecaptcha;
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -10,37 +10,6 @@
 				<template #label>{{ $ts.instanceDescription }}</template>
 			</FormTextarea>

-			<FormInput v-model="iconUrl" class="_formBlock">
-				<template #prefix><i class="fas fa-link"></i></template>
-				<template #label>{{ $ts.iconUrl }}</template>
-			</FormInput>
-
-			<FormInput v-model="bannerUrl" class="_formBlock">
-				<template #prefix><i class="fas fa-link"></i></template>
-				<template #label>{{ $ts.bannerUrl }}</template>
-			</FormInput>
-
-			<FormInput v-model="backgroundImageUrl" class="_formBlock">
-				<template #prefix><i class="fas fa-link"></i></template>
-				<template #label>{{ $ts.backgroundImageUrl }}</template>
-			</FormInput>
-
-			<FormInput v-model="themeColor" class="_formBlock">
-				<template #prefix><i class="fas fa-palette"></i></template>
-				<template #label>{{ $ts.themeColor }}</template>
-				<template #caption>#RRGGBB</template>
-			</FormInput>
-
-			<FormTextarea v-model="defaultLightTheme" class="_formBlock">
-				<template #label>{{ $ts.instanceDefaultLightTheme }}</template>
-				<template #caption>{{ $ts.instanceDefaultThemeDescription }}</template>
-			</FormTextarea>
-
-			<FormTextarea v-model="defaultDarkTheme" class="_formBlock">
-				<template #label>{{ $ts.instanceDefaultDarkTheme }}</template>
-				<template #caption>{{ $ts.instanceDefaultThemeDescription }}</template>
-			</FormTextarea>
-
 			<FormInput v-model="tosUrl" class="_formBlock">
 				<template #prefix><i class="fas fa-link"></i></template>
 				<template #label>{{ $ts.tosUrl }}</template>
@@ -78,6 +47,41 @@
 				<FormInfo class="_formBlock">{{ $ts.disablingTimelinesInfo }}</FormInfo>
 			</FormSection>

+			<FormSection>
+				<template #label>{{ $ts.theme }}</template>
+
+				<FormInput v-model="iconUrl" class="_formBlock">
+					<template #prefix><i class="fas fa-link"></i></template>
+					<template #label>{{ $ts.iconUrl }}</template>
+				</FormInput>
+
+				<FormInput v-model="bannerUrl" class="_formBlock">
+					<template #prefix><i class="fas fa-link"></i></template>
+					<template #label>{{ $ts.bannerUrl }}</template>
+				</FormInput>
+
+				<FormInput v-model="backgroundImageUrl" class="_formBlock">
+					<template #prefix><i class="fas fa-link"></i></template>
+					<template #label>{{ $ts.backgroundImageUrl }}</template>
+				</FormInput>
+
+				<FormInput v-model="themeColor" class="_formBlock">
+					<template #prefix><i class="fas fa-palette"></i></template>
+					<template #label>{{ $ts.themeColor }}</template>
+					<template #caption>#RRGGBB</template>
+				</FormInput>
+
+				<FormTextarea v-model="defaultLightTheme" class="_formBlock">
+					<template #label>{{ $ts.instanceDefaultLightTheme }}</template>
+					<template #caption>{{ $ts.instanceDefaultThemeDescription }}</template>
+				</FormTextarea>
+
+				<FormTextarea v-model="defaultDarkTheme" class="_formBlock">
+					<template #label>{{ $ts.instanceDefaultDarkTheme }}</template>
+					<template #caption>{{ $ts.instanceDefaultThemeDescription }}</template>
+				</FormTextarea>
+			</FormSection>
+
 			<FormSection>
 				<template #label>{{ $ts.files }}</template>

@@ -206,7 +210,7 @@ export default defineComponent({

 	methods: {
 		async init() {
-			const meta = await os.api('meta', { detail: true });
+			const meta = await os.api('admin/meta');
 			this.name = meta.name;
 			this.description = meta.description;
 			this.tosUrl = meta.tosUrl;
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -33,10 +33,6 @@
 					<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
 					<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
 					<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
-					<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
-					<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
 				</MkSelect>
 			</FormSplit>
 		</div>
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -7,10 +7,10 @@
 		<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>
+			<!--<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>-->
 			<option value="users">{{ $ts._antennaSources.users }}</option>
-			<option value="list">{{ $ts._antennaSources.userList }}</option>
-			<option value="group">{{ $ts._antennaSources.userGroup }}</option>
+			<!--<option value="list">{{ $ts._antennaSources.userList }}</option>-->
+			<!--<option value="group">{{ $ts._antennaSources.userGroup }}</option>-->
 		</MkSelect>
 		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
 			<template #label>{{ $ts.userList }}</template>
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -22,8 +22,8 @@
 </MkSpacer>
 </template>

-<script lang="ts">
-import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
+<script setup lang="ts">
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkInfo from '@/components/ui/info.vue';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
@@ -34,241 +34,219 @@ import * as symbols from '@/symbols';
 import { instance } from '@/instance';
 import { $i } from '@/account';

-export default defineComponent({
-	components: {
-		MkInfo,
-		MkSuperMenu,
-	},
+const props = defineProps<{
+  initialPage?: string
+}>();

-	props: {
-		initialPage: {
-			type: String,
-			required: false
+const indexInfo = {
+	title: i18n.ts.settings,
+	icon: 'fas fa-cog',
+	bg: 'var(--bg)',
+	hideHeader: true,
+};
+const INFO = ref(indexInfo);
+const page = ref(props.initialPage);
+const narrow = ref(false);
+const view = ref(null);
+const el = ref<HTMLElement | null>(null);
+const childInfo = ref(null);
+const menuDef = computed(() => [{
+	title: i18n.ts.basicSettings,
+	items: [{
+		icon: 'fas fa-user',
+		text: i18n.ts.profile,
+		to: '/settings/profile',
+		active: page.value === 'profile',
+	}, {
+		icon: 'fas fa-lock-open',
+		text: i18n.ts.privacy,
+		to: '/settings/privacy',
+		active: page.value === 'privacy',
+	}, {
+		icon: 'fas fa-laugh',
+		text: i18n.ts.reaction,
+		to: '/settings/reaction',
+		active: page.value === 'reaction',
+	}, {
+		icon: 'fas fa-cloud',
+		text: i18n.ts.drive,
+		to: '/settings/drive',
+		active: page.value === 'drive',
+	}, {
+		icon: 'fas fa-bell',
+		text: i18n.ts.notifications,
+		to: '/settings/notifications',
+		active: page.value === 'notifications',
+	}, {
+		icon: 'fas fa-envelope',
+		text: i18n.ts.email,
+		to: '/settings/email',
+		active: page.value === 'email',
+	}, {
+		icon: 'fas fa-share-alt',
+		text: i18n.ts.integration,
+		to: '/settings/integration',
+		active: page.value === 'integration',
+	}, {
+		icon: 'fas fa-lock',
+		text: i18n.ts.security,
+		to: '/settings/security',
+		active: page.value === 'security',
+	}],
+}, {
+	title: i18n.ts.clientSettings,
+	items: [{
+		icon: 'fas fa-cogs',
+		text: i18n.ts.general,
+		to: '/settings/general',
+		active: page.value === 'general',
+	}, {
+		icon: 'fas fa-palette',
+		text: i18n.ts.theme,
+		to: '/settings/theme',
+		active: page.value === 'theme',
+	}, {
+		icon: 'fas fa-list-ul',
+		text: i18n.ts.menu,
+		to: '/settings/menu',
+		active: page.value === 'menu',
+	}, {
+		icon: 'fas fa-music',
+		text: i18n.ts.sounds,
+		to: '/settings/sounds',
+		active: page.value === 'sounds',
+	}, {
+		icon: 'fas fa-plug',
+		text: i18n.ts.plugins,
+		to: '/settings/plugin',
+		active: page.value === 'plugin',
+	}],
+}, {
+	title: i18n.ts.otherSettings,
+	items: [{
+		icon: 'fas fa-boxes',
+		text: i18n.ts.importAndExport,
+		to: '/settings/import-export',
+		active: page.value === 'import-export',
+	}, {
+		icon: 'fas fa-volume-mute',
+		text: i18n.ts.instanceMute,
+		to: '/settings/instance-mute',
+		active: page.value === 'instance-mute',
+	}, {
+		icon: 'fas fa-ban',
+		text: i18n.ts.muteAndBlock,
+		to: '/settings/mute-block',
+		active: page.value === 'mute-block',
+	}, {
+		icon: 'fas fa-comment-slash',
+		text: i18n.ts.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.ts.other,
+		to: '/settings/other',
+		active: page.value === 'other',
+	}],
+}, {
+	items: [{
+		type: 'button',
+		icon: 'fas fa-trash',
+		text: i18n.ts.clearCache,
+		action: () => {
+			localStorage.removeItem('locale');
+			localStorage.removeItem('theme');
+			unisonReload();
+		},
+	}, {
+		type: 'button',
+		icon: 'fas fa-sign-in-alt fa-flip-horizontal',
+		text: i18n.ts.logout,
+		action: () => {
+			signout();
+		},
+		danger: true,
+	},],
+}]);
+
+const pageProps = ref({});
+const component = computed(() => {
+	if (page.value == null) return null;
+	switch (page.value) {
+		case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
+		case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
+		case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
+		case 'reaction': return defineAsyncComponent(() => import('./reaction.vue'));
+		case 'drive': return defineAsyncComponent(() => import('./drive.vue'));
+		case 'notifications': return defineAsyncComponent(() => import('./notifications.vue'));
+		case 'mute-block': return defineAsyncComponent(() => import('./mute-block.vue'));
+		case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue'));
+		case 'instance-mute': return defineAsyncComponent(() => import('./instance-mute.vue'));
+		case 'integration': return defineAsyncComponent(() => import('./integration.vue'));
+		case 'security': return defineAsyncComponent(() => import('./security.vue'));
+		case '2fa': return defineAsyncComponent(() => import('./2fa.vue'));
+		case 'api': return defineAsyncComponent(() => import('./api.vue'));
+		case 'apps': return defineAsyncComponent(() => import('./apps.vue'));
+		case 'other': return defineAsyncComponent(() => import('./other.vue'));
+		case 'general': return defineAsyncComponent(() => import('./general.vue'));
+		case 'email': return defineAsyncComponent(() => import('./email.vue'));
+		case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
+		case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
+		case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
+		case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
+		case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
+		case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
+		case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
+		case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
+		case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.vue'));
+		case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
+		case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
+		case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
+	}
+	return null;
+});
+
+watch(component, () => {
+	pageProps.value = {};
+
+	nextTick(() => {
+		scroll(el.value, { top: 0 });
+	});
+}, { immediate: true });
+
+watch(() => props.initialPage, () => {
+	if (props.initialPage == null && !narrow.value) {
+		page.value = 'profile';
+	} else {
+		page.value = props.initialPage;
+		if (props.initialPage == null) {
+			INFO.value = indexInfo;
 		}
-	},
+	}
+});

-	setup(props, context) {
-		const indexInfo = {
-			title: i18n.ts.settings,
-			icon: 'fas fa-cog',
-			bg: 'var(--bg)',
-			hideHeader: true,
-		};
-		const INFO = ref(indexInfo);
-		const page = ref(props.initialPage);
-		const narrow = ref(false);
-		const view = ref(null);
-		const el = ref(null);
-		const childInfo = ref(null);
-		const menuDef = computed(() => [{
-			title: i18n.ts.basicSettings,
-			items: [{
-				icon: 'fas fa-user',
-				text: i18n.ts.profile,
-				to: '/settings/profile',
-				active: page.value === 'profile',
-			}, {
-				icon: 'fas fa-lock-open',
-				text: i18n.ts.privacy,
-				to: '/settings/privacy',
-				active: page.value === 'privacy',
-			}, {
-				icon: 'fas fa-laugh',
-				text: i18n.ts.reaction,
-				to: '/settings/reaction',
-				active: page.value === 'reaction',
-			}, {
-				icon: 'fas fa-cloud',
-				text: i18n.ts.drive,
-				to: '/settings/drive',
-				active: page.value === 'drive',
-			}, {
-				icon: 'fas fa-bell',
-				text: i18n.ts.notifications,
-				to: '/settings/notifications',
-				active: page.value === 'notifications',
-			}, {
-				icon: 'fas fa-envelope',
-				text: i18n.ts.email,
-				to: '/settings/email',
-				active: page.value === 'email',
-			}, {
-				icon: 'fas fa-share-alt',
-				text: i18n.ts.integration,
-				to: '/settings/integration',
-				active: page.value === 'integration',
-			}, {
-				icon: 'fas fa-lock',
-				text: i18n.ts.security,
-				to: '/settings/security',
-				active: page.value === 'security',
-			}],
-		}, {
-			title: i18n.ts.clientSettings,
-			items: [{
-				icon: 'fas fa-cogs',
-				text: i18n.ts.general,
-				to: '/settings/general',
-				active: page.value === 'general',
-			}, {
-				icon: 'fas fa-palette',
-				text: i18n.ts.theme,
-				to: '/settings/theme',
-				active: page.value === 'theme',
-			}, {
-				icon: 'fas fa-list-ul',
-				text: i18n.ts.menu,
-				to: '/settings/menu',
-				active: page.value === 'menu',
-			}, {
-				icon: 'fas fa-music',
-				text: i18n.ts.sounds,
-				to: '/settings/sounds',
-				active: page.value === 'sounds',
-			}, {
-				icon: 'fas fa-plug',
-				text: i18n.ts.plugins,
-				to: '/settings/plugin',
-				active: page.value === 'plugin',
-			}],
-		}, {
-			title: i18n.ts.otherSettings,
-			items: [{
-				icon: 'fas fa-boxes',
-				text: i18n.ts.importAndExport,
-				to: '/settings/import-export',
-				active: page.value === 'import-export',
-			}, {
-				icon: 'fas fa-volume-mute',
-				text: i18n.ts.instanceMute,
-				to: '/settings/instance-mute',
-				active: page.value === 'instance-mute',
-			}, {
-				icon: 'fas fa-ban',
-				text: i18n.ts.muteAndBlock,
-				to: '/settings/mute-block',
-				active: page.value === 'mute-block',
-			}, {
-				icon: 'fas fa-comment-slash',
-				text: i18n.ts.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.ts.other,
-				to: '/settings/other',
-				active: page.value === 'other',
-			}],
-		}, {
-			items: [{
-				type: 'button',
-				icon: 'fas fa-trash',
-				text: i18n.ts.clearCache,
-				action: () => {
-					localStorage.removeItem('locale');
-					localStorage.removeItem('theme');
-					unisonReload();
-				},
-			}, {
-				type: 'button',
-				icon: 'fas fa-sign-in-alt fa-flip-horizontal',
-				text: i18n.ts.logout,
-				action: () => {
-					signout();
-				},
-				danger: true,
-			},],
-		}]);
+onMounted(() => {
+	narrow.value = el.value.offsetWidth < 800;
+	if (!narrow.value) {
+		page.value = 'profile';
+	}
+});

-		const pageProps = ref({});
-		const component = computed(() => {
-			if (page.value == null) return null;
-			switch (page.value) {
-				case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
-				case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
-				case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
-				case 'reaction': return defineAsyncComponent(() => import('./reaction.vue'));
-				case 'drive': return defineAsyncComponent(() => import('./drive.vue'));
-				case 'notifications': return defineAsyncComponent(() => import('./notifications.vue'));
-				case 'mute-block': return defineAsyncComponent(() => import('./mute-block.vue'));
-				case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue'));
-				case 'instance-mute': return defineAsyncComponent(() => import('./instance-mute.vue'));
-				case 'integration': return defineAsyncComponent(() => import('./integration.vue'));
-				case 'security': return defineAsyncComponent(() => import('./security.vue'));
-				case '2fa': return defineAsyncComponent(() => import('./2fa.vue'));
-				case 'api': return defineAsyncComponent(() => import('./api.vue'));
-				case 'apps': return defineAsyncComponent(() => import('./apps.vue'));
-				case 'other': return defineAsyncComponent(() => import('./other.vue'));
-				case 'general': return defineAsyncComponent(() => import('./general.vue'));
-				case 'email': return defineAsyncComponent(() => import('./email.vue'));
-				case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
-				case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
-				case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
-				case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
-				case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
-				case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
-				case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
-				case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
-				case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.vue'));
-				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
-				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
-				case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
-			}
-			return null;
-		});
+const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));

-		watch(component, () => {
-			pageProps.value = {};
+const pageChanged = (page) => {
+	if (page == null) return;
+	childInfo.value = page[symbols.PAGE_INFO];
+};

-			nextTick(() => {
-				scroll(el.value, { top: 0 });
-			});
-		}, { immediate: true });
-
-		watch(() => props.initialPage, () => {
-			if (props.initialPage == null && !narrow.value) {
-				page.value = 'profile';
-			} else {
-				page.value = props.initialPage;
-				if (props.initialPage == null) {
-					INFO.value = indexInfo;
-				}
-			}
-		});
-
-		onMounted(() => {
-			narrow.value = el.value.offsetWidth < 800;
-			if (!narrow.value) {
-				page.value = 'profile';
-			}
-		});
-
-		const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
-
-		const pageChanged = (page) => {
-			if (page == null) return;
-			childInfo.value = page[symbols.PAGE_INFO];
-		};
-
-		return {
-			[symbols.PAGE_INFO]: INFO,
-			page,
-			menuDef,
-			narrow,
-			view,
-			el,
-			pageProps,
-			component,
-			emailNotConfigured,
-			pageChanged,
-			childInfo,
-		};
-	},
+defineExpose({
+	[symbols.PAGE_INFO]: INFO,
 });
 </script>

--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -4,7 +4,9 @@
 		{{ $ts.showFeaturedNotesInTimeline }}
 	</FormSwitch>

+	<!--
 	<FormSwitch v-model="reportError" class="_formBlock">{{ $ts.sendErrorReports }}<template #caption>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch>
+	-->

 	<FormLink to="/settings/account-info" class="_formBlock">{{ $ts.accountInfo }}</FormLink>

--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -54,7 +54,7 @@
 	</FormSlot>

 	<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
-	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }}</template></FormSwitch>
+	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
 	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>

 	<FormSwitch v-model="profile.alwaysMarkNsfw" class="_formBlock">{{ i18n.ts.alwaysMarkSensitive }}</FormSwitch>
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -101,7 +101,7 @@ import { ColdDeviceStorage } from '@/store';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
-import { concat } from '@/scripts/array';
+import { concat, uniqueBy } from '@/scripts/array';
 import { fetchThemes, getThemes } from '@/theme-store';
 import * as symbols from '@/symbols';

@@ -128,7 +128,7 @@ export default defineComponent({
 		const instanceThemes = [];
 		if (instance.defaultLightTheme != null) instanceThemes.push(JSON5.parse(instance.defaultLightTheme));
 		if (instance.defaultDarkTheme != null) instanceThemes.push(JSON5.parse(instance.defaultDarkTheme));
-		const themes = computed(() => instanceThemes.concat(builtinThemes.concat(installedThemes.value)));
+		const themes = computed(() => uniqueBy(instanceThemes.concat(builtinThemes.concat(installedThemes.value)), theme => theme.id));
 		const darkThemes = computed(() => themes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
 		const lightThemes = computed(() => themes.value.filter(t => t.base === 'light' || t.kind === 'light'));
 		const darkTheme = ColdDeviceStorage.ref('darkTheme');
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -13,7 +13,7 @@
 			</FormTextarea>
 		</div>
 		<div v-show="tab === 'hard'">
-			<MkInfo class="_formBlock">{{ $ts._wordMute.hardDescription }}</MkInfo>
+			<MkInfo class="_formBlock">{{ $ts._wordMute.hardDescription }} {{ $ts.reflectMayTakeTime }}</MkInfo>
 			<FormTextarea v-model="hardMutedWords" class="_formBlock">
 				<span>{{ $ts._wordMute.muteWords }}</span>
 				<template #caption>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -25,6 +25,7 @@
 				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ $ts.moderator }}</FormSwitch>
 				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ $ts.silence }}</FormSwitch>
 				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.suspend }}</FormSwitch>
+				{{ $ts.reflectMayTakeTime }}
 				<FormButton v-if="user.host == null && iAmModerator" class="_formBlock" @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</FormButton>
 			</FormSection>

--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,9 +1,14 @@
 <template>
 <MkContainer>
 	<template #header><i class="fas fa-chart-bar" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
+	<template #func>
+		<button class="_button" @click="showMenu">
+			<i class="fas fa-ellipsis-h"></i>
+		</button>
+	</template>

 	<div style="padding: 8px;">
-		<MkChart src="per-user-notes" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
+		<MkChart :src="chartSrc" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
 	</div>
 </MkContainer>
 </template>
@@ -13,6 +18,8 @@ import { } from 'vue';
 import * as misskey from 'misskey-js';
 import MkContainer from '@/components/ui/container.vue';
 import MkChart from '@/components/chart.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';

 const props = withDefaults(defineProps<{
 	user: misskey.entities.User;
@@ -20,4 +27,26 @@ const props = withDefaults(defineProps<{
 }>(), {
 	limit: 50,
 });
+
+let chartSrc = $ref('per-user-notes');
+
+function showMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.notes,
+		active: true,
+		action: () => {
+			chartSrc = 'per-user-notes';
+		}
+	}/*, {
+		text: i18n.ts.following,
+		action: () => {
+			chartSrc = 'per-user-following';
+		}
+	}, {
+		text: i18n.ts.followers,
+		action: () => {
+			chartSrc = 'per-user-followers';
+		}
+	}*/], ev.currentTarget ?? ev.target);
+}
 </script>
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
 import MkTimeline from '@/pages/timeline.vue';
-import { $i } from './account';
+import { $i, iAmModerator } from './account';
 import { ui } from '@/config';

 const page = (path: string, ui?: string) => defineAsyncComponent({
@@ -67,8 +67,8 @@ const defaultRoutes = [
 	{ path: '/my/antennas/:antennaId', component: page('my-antennas/edit'), props: true },
 	{ path: '/my/clips', component: page('my-clips/index') },
 	{ path: '/scratchpad', component: page('scratchpad') },
-	{ path: '/admin/:page(.*)?', component: page('admin/index'), props: route => ({ initialPage: route.params.page || null }) },
-	{ path: '/admin', component: page('admin/index') },
+	{ path: '/admin/:page(.*)?', component: iAmModerator ? page('admin/index') : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
+	{ path: '/admin', component: iAmModerator ? page('admin/index') : page('not-found') },
 	{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
 	{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
 	{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
--- a/packages/client/src/scripts/array.ts
+++ b/packages/client/src/scripts/array.ts
@@ -52,6 +52,17 @@ export function unique<T>(xs: T[]): T[] {
 	return [...new Set(xs)];
 }

+export function uniqueBy<TValue, TKey>(values: TValue[], keySelector: (value: TValue) => TKey): TValue[] {
+	const map = new Map<TKey, TValue>();
+
+	for (const value of values) {
+		const key = keySelector(value);
+		if (!map.has(key)) map.set(key, value);
+	}
+
+	return [...map.values()];
+}
+
 export function sum(xs: number[]): number {
 	return xs.reduce((a, b) => a + b, 0);
 }
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -56,11 +56,44 @@ export function getUserMenu(user) {
 	}

 	async function toggleMute() {
-		os.apiWithDialog(user.isMuted ? 'mute/delete' : 'mute/create', {
-			userId: user.id
-		}).then(() => {
-			user.isMuted = !user.isMuted;
-		});
+		if (user.isMuted) {
+			os.apiWithDialog('mute/delete', {
+				userId: user.id,
+			}).then(() => {
+				user.isMuted = false;
+			});
+		} else {
+			const { canceled, result: period } = await os.select({
+				title: i18n.ts.mutePeriod,
+				items: [{
+					value: 'indefinitely', text: i18n.ts.indefinitely,
+				}, {
+					value: 'tenMinutes', text: i18n.ts.tenMinutes,
+				}, {
+					value: 'oneHour', text: i18n.ts.oneHour,
+				}, {
+					value: 'oneDay', text: i18n.ts.oneDay,
+				}, {
+					value: 'oneWeek', text: i18n.ts.oneWeek,
+				}],
+				default: 'indefinitely',
+			});
+			if (canceled) return;
+
+			const expiresAt = period === 'indefinitely' ? null
+				: period === 'tenMinutes' ? Date.now() + (1000 * 60 * 10)
+				: period === 'oneHour' ? Date.now() + (1000 * 60 * 60)
+				: period === 'oneDay' ? Date.now() + (1000 * 60 * 60 * 24)
+				: period === 'oneWeek' ? Date.now() + (1000 * 60 * 60 * 24 * 7)
+				: null;
+
+			os.apiWithDialog('mute/create', {
+				userId: user.id,
+				expiresAt,
+			}).then(() => {
+				user.isMuted = true;
+			});
+		}
 	}

 	async function toggleBlock() {
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -68,11 +68,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'deviceAccount',
 		default: [
 			'notifications',
-			'messaging',
+			'favorites',
 			'drive',
 			'followRequests',
 			'-',
-			'gallery',
 			'featured',
 			'explore',
 			'announcements',
@@ -192,7 +191,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	reactionPickerHeight: {
 		where: 'device',
-		default: 1
+		default: 2
 	},
 	reactionPickerUseDrawerForMobile: {
 		where: 'device',
--- a/packages/client/src/sw/compose-notification.ts
+++ b/packages/client/src/sw/compose-notification.ts
@@ -59,6 +59,11 @@ export default async function(type, data, i18n): Promise<[string, NotificationOp
 						icon: data.user.avatarUrl
 					}];

+				case 'pollEnded':
+					return [i18n.t('_notification.pollEnded'), {
+						body: data.note.text,
+					}];
+
 				case 'follow':
 					return [i18n.t('_notification.youWereFollowed'), {
 						body: getUserName(data.user),
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -107,6 +107,7 @@ export default defineComponent({
 	padding: 4px 5px;
 	font-size: 14px;
 	pointer-events: none;
+	user-select: none;

 	> span {
 		animation: dev-ticker-blink 2s infinite;
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -103,6 +103,7 @@ export default defineComponent({
 		more(ev) {
 			os.popup(import('@/components/launch-pad.vue'), {
 				src: ev.currentTarget ?? ev.target,
+				anchor: { x: 'center', y: 'bottom' },
 			}, {
 			}, 'closed');
 		},
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -121,9 +121,9 @@ export default defineComponent({
 		},

 		more(ev) {
-			os.popup(import('@/components/launch-pad.vue'), {}, {
+			os.popup(import('@/components/launch-pad.vue'), {
 				src: ev.currentTarget ?? ev.target,
-			}, 'closed');
+			}, {}, 'closed');
 		},

 		openAccountMenu:(ev) => {
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -17,7 +17,8 @@
 			:key="ids[0]"
 			class="column"
 			:column="columns.find(c => c.id === ids[0])"
-			:style="columns.find(c => c.id === ids[0]).flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0]).width + 'px' }"
+			 :is-stacked="false"
+			:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
 			@parent-focus="moveFocus(ids[0], $event)"
 		/>
 	</template>
@@ -25,8 +26,8 @@
 	<div v-if="isMobile" class="buttons">
 		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
 		<button class="button home _button" @click="$router.push('/')"><i class="fas fa-home"></i></button>
-		<button class="button notifications _button" @click="$router.push('/my/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 post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button>
+		<button class="button notifications _button" @click="$router.push('/my/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 post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
 	</div>

 	<transition :name="$store.state.animation ? 'menu-back' : ''">
@@ -45,8 +46,8 @@
 </div>
 </template>

-<script lang="ts">
-import { computed, defineComponent, provide, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, provide, ref, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
 import DeckColumnCore from '@/ui/deck/column-core.vue';
 import XSidebar from '@/ui/_common_/sidebar.vue';
@@ -60,102 +61,82 @@ import { useRoute } from 'vue-router';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';

-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar,
-		XDrawerMenu,
-		DeckColumnCore,
-	},
-
-	setup() {
-		const isMobile = ref(window.innerWidth <= 500);
-		window.addEventListener('resize', () => {
-			isMobile.value = window.innerWidth <= 500;
-		});
-
-		const drawerMenuShowing = ref(false);
-
-		const route = useRoute();
-		watch(route, () => {
-			drawerMenuShowing.value = false;
-		});
-
-		const columns = deckStore.reactiveState.columns;
-		const layout = deckStore.reactiveState.layout;
-		const menuIndicated = computed(() => {
-			if ($i == null) return false;
-			for (const def in menuDef) {
-				if (menuDef[def].indicated) return true;
-			}
-			return false;
-		});
-
-		const addColumn = async (ev) => {
-			const columns = [
-				'main',
-				'widgets',
-				'notifications',
-				'tl',
-				'antenna',
-				'list',
-				'mentions',
-				'direct',
-			];
-
-			const { canceled, result: column } = await os.select({
-				title: i18n.ts._deck.addColumn,
-				items: columns.map(column => ({
-					value: column, text: i18n.t('_deck._columns.' + column)
-				}))
-			});
-			if (canceled) return;
-
-			addColumnToStore({
-				type: column,
-				id: uuid(),
-				name: i18n.t('_deck._columns.' + column),
-				width: 330,
-			});
-		};
-
-		const onContextmenu = (ev) => {
-			os.contextMenu([{
-				text: i18n.ts._deck.addColumn,
-				icon: null,
-				action: addColumn
-			}], ev);
-		};
-
-		provide('shouldSpacerMin', true);
-		if (deckStore.state.navWindow) {
-			provide('navHook', (url) => {
-				os.pageWindow(url);
-			});
-		}
-
-		document.documentElement.style.overflowY = 'hidden';
-		document.documentElement.style.scrollBehavior = 'auto';
-		window.addEventListener('wheel', (ev) => {
-			if (getScrollContainer(ev.target) == null) {
-				document.documentElement.scrollLeft += ev.deltaY > 0 ? 96 : -96;
-			}
-		});
-		loadDeck();
-
-		return {
-			isMobile,
-			deckStore,
-			drawerMenuShowing,
-			columns,
-			layout,
-			menuIndicated,
-			onContextmenu,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-			post: os.post,
-		};
-	},
+const isMobile = ref(window.innerWidth <= 500);
+window.addEventListener('resize', () => {
+	isMobile.value = window.innerWidth <= 500;
 });
+
+const drawerMenuShowing = ref(false);
+
+const route = useRoute();
+watch(route, () => {
+	drawerMenuShowing.value = false;
+});
+
+const columns = deckStore.reactiveState.columns;
+const layout = deckStore.reactiveState.layout;
+const menuIndicated = computed(() => {
+	if ($i == null) return false;
+	for (const def in menuDef) {
+		if (menuDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const addColumn = async (ev) => {
+	const columns = [
+		'main',
+		'widgets',
+		'notifications',
+		'tl',
+		'antenna',
+		'list',
+		'mentions',
+		'direct',
+	];
+
+	const { canceled, result: column } = await os.select({
+		title: i18n.ts._deck.addColumn,
+		items: columns.map(column => ({
+			value: column, text: i18n.t('_deck._columns.' + column)
+		}))
+	});
+	if (canceled) return;
+
+	addColumnToStore({
+		type: column,
+		id: uuid(),
+		name: i18n.t('_deck._columns.' + column),
+		width: 330,
+	});
+};
+
+const onContextmenu = (ev) => {
+	os.contextMenu([{
+		text: i18n.ts._deck.addColumn,
+		action: addColumn,
+	}], ev);
+};
+
+provide('shouldSpacerMin', true);
+if (deckStore.state.navWindow) {
+	provide('navHook', (url) => {
+		os.pageWindow(url);
+	});
+}
+
+document.documentElement.style.overflowY = 'hidden';
+document.documentElement.style.scrollBehavior = 'auto';
+window.addEventListener('wheel', (ev) => {
+	if (getScrollContainer(ev.target as HTMLElement) == null) {
+		document.documentElement.scrollLeft += ev.deltaY > 0 ? 96 : -96;
+	}
+});
+loadDeck();
+
+function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
+	// TODO??
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -1,75 +1,62 @@
 <template>
-<XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked">
+<XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
 		<i class="fas fa-satellite"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>

-	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
 </XColumn>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import XTimeline from '@/components/timeline.vue';
 import * as os from '@/os';
-import { updateColumn } from './deck-store';
+import { updateColumn, Column } from './deck-store';
+import { i18n } from '@/i18n';

-export default defineComponent({
-	components: {
-		XColumn,
-		XTimeline,
-	},
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();

-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
+const emit = defineEmits<{
+	(e: 'loaded'): void;
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();

-	data() {
-		return {
-		};
-	},
+let timeline = $ref<InstanceType<typeof XTimeline>>();

-	watch: {
-		mediaOnly() {
-			(this.$refs.timeline as any).reload();
-		}
-	},
-
-	mounted() {
-		if (this.column.antennaId == null) {
-			this.setAntenna();
-		}
-	},
-
-	methods: {
-		async setAntenna() {
-			const antennas = await os.api('antennas/list');
-			const { canceled, result: antenna } = await os.select({
-				title: this.$ts.selectAntenna,
-				items: antennas.map(x => ({
-					value: x, text: x.name
-				})),
-				default: this.column.antennaId
-			});
-			if (canceled) return;
-			updateColumn(this.column.id, {
-				antennaId: antenna.id
-			});
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
+onMounted(() => {
+	if (props.column.antennaId == null) {
+		setAntenna();
 	}
 });
+
+async function setAntenna() {
+	const antennas = await os.api('antennas/list');
+	const { canceled, result: antenna } = await os.select({
+		title: i18n.ts.selectAntenna,
+		items: antennas.map(x => ({
+			value: x, text: x.name
+		})),
+		default: props.column.antennaId
+	});
+	if (canceled) return;
+	updateColumn(props.column.id, {
+		antennaId: antenna.id
+	});
+}
+/*
+function focus() {
+	timeline.focus();
+}
+
+defineExpose({
+	focus,
+});
+*/
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/ui/deck/column-core.vue
+++ b/packages/client/src/ui/deck/column-core.vue
@@ -1,17 +1,18 @@
 <template>
 <!-- TODO: リファクタの余地がありそう -->
-<XMainColumn v-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
-<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
+<div v-if="!column">たぶん見えちゃいけないやつ</div>
+<XMainColumn v-else-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import XMainColumn from './main-column.vue';
 import XTlColumn from './tl-column.vue';
 import XAntennaColumn from './antenna-column.vue';
@@ -20,33 +21,24 @@ import XNotificationsColumn from './notifications-column.vue';
 import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
+import { Column } from './deck-store';

+defineProps<{
+	column?: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+/*
 export default defineComponent({
-	components: {
-		XMainColumn,
-		XTlColumn,
-		XAntennaColumn,
-		XListColumn,
-		XNotificationsColumn,
-		XWidgetsColumn,
-		XMentionsColumn,
-		XDirectColumn
-	},
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
 	methods: {
 		focus() {
 			this.$children[0].focus();
 		}
 	}
 });
+*/
 </script>
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -31,238 +31,211 @@
 </template>

 <script lang="ts">
-import { defineComponent } from 'vue';
+export type DeckFunc = {
+	title: string;
+	handler: (payload: MouseEvent) => void;
+	icon?: string;
+};
+</script>
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, provide, watch } from 'vue';
 import * as os from '@/os';
-import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
+import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column } from './deck-store';
 import { deckStore } from './deck-store';
+import { i18n } from '@/i18n';

-export default defineComponent({
-	provide: {
-		shouldHeaderThin: true,
-		shouldOmitHeaderTitle: true,
-	},
+provide('shouldHeaderThin', true);
+provide('shouldOmitHeaderTitle', true);

-	props: {
-		column: {
-			type: Object,
-			required: false,
-			default: null
-		},
-		isStacked: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		func: {
-			type: Object,
-			required: false,
-			default: null
-		},
-		naked: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		indicated: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-	},
-
-	data() {
-		return {
-			deckStore,
-			dragging: false,
-			draghover: false,
-			dropready: false,
-		};
-	},
-
-	computed: {
-		isMainColumn(): boolean {
-			return this.column.type === 'main';
-		},
-
-		active(): boolean {
-			return this.column.active !== false;
-		},
-
-		keymap(): any {
-			return {
-				'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
-				'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
-				'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
-				'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
-			};
-		}
-	},
-
-	watch: {
-		active(v) {
-			this.$emit('change-active-state', v);
-		},
-
-		dragging(v) {
-			os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
-		}
-	},
-
-	mounted() {
-		os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
-		os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
-	},
-
-	beforeUnmount() {
-		os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
-		os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
-	},
-
-	methods: {
-		onOtherDragStart() {
-			this.dropready = true;
-		},
-
-		onOtherDragEnd() {
-			this.dropready = false;
-		},
-
-		toggleActive() {
-			if (!this.isStacked) return;
-			updateColumn(this.column.id, {
-				active: !this.column.active
-			});
-		},
-
-		getMenu() {
-			const items = [{
-				icon: 'fas fa-pencil-alt',
-				text: this.$ts.edit,
-				action: async () => {
-					const { canceled, result } = await os.form(this.column.name, {
-						name: {
-							type: 'string',
-							label: this.$ts.name,
-							default: this.column.name
-						},
-						width: {
-							type: 'number',
-							label: this.$ts.width,
-							default: this.column.width
-						},
-						flexible: {
-							type: 'boolean',
-							label: this.$ts.flexible,
-							default: this.column.flexible
-						}
-					});
-					if (canceled) return;
-					updateColumn(this.column.id, result);
-				}
-			}, null, {
-				icon: 'fas fa-arrow-left',
-				text: this.$ts._deck.swapLeft,
-				action: () => {
-					swapLeftColumn(this.column.id);
-				}
-			}, {
-				icon: 'fas fa-arrow-right',
-				text: this.$ts._deck.swapRight,
-				action: () => {
-					swapRightColumn(this.column.id);
-				}
-			}, this.isStacked ? {
-				icon: 'fas fa-arrow-up',
-				text: this.$ts._deck.swapUp,
-				action: () => {
-					swapUpColumn(this.column.id);
-				}
-			} : undefined, this.isStacked ? {
-				icon: 'fas fa-arrow-down',
-				text: this.$ts._deck.swapDown,
-				action: () => {
-					swapDownColumn(this.column.id);
-				}
-			} : undefined, null, {
-				icon: 'fas fa-window-restore',
-				text: this.$ts._deck.stackLeft,
-				action: () => {
-					stackLeftColumn(this.column.id);
-				}
-			}, this.isStacked ? {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts._deck.popRight,
-				action: () => {
-					popRightColumn(this.column.id);
-				}
-			} : undefined, null, {
-				icon: 'fas fa-trash-alt',
-				text: this.$ts.remove,
-				danger: true,
-				action: () => {
-					removeColumn(this.column.id);
-				}
-			}];
-
-			return items;
-		},
-
-		onContextmenu(ev: MouseEvent) {
-			os.contextMenu(this.getMenu(), ev);
-		},
-
-		goTop() {
-			this.$refs.body.scrollTo({
-				top: 0,
-				behavior: 'smooth'
-			});
-		},
-
-		onDragstart(e) {
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
-
-			// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
-			// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
-			window.setTimeout(() => {
-				this.dragging = true;
-			}, 10);
-		},
-
-		onDragend(e) {
-			this.dragging = false;
-		},
-
-		onDragover(e) {
-			// 自分自身がドラッグされている場合
-			if (this.dragging) {
-				// 自分自身にはドロップさせない
-				e.dataTransfer.dropEffect = 'none';
-				return;
-			}
-
-			const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
-
-			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
-
-			if (!this.dragging && isDeckColumn) this.draghover = true;
-		},
-
-		onDragleave() {
-			this.draghover = false;
-		},
-
-		onDrop(e) {
-			this.draghover = false;
-			os.deckGlobalEvents.emit('column.dragEnd');
-
-			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
-			if (id != null && id != '') {
-				swapColumn(this.column.id, id);
-			}
-		}
-	}
+const props = withDefaults(defineProps<{
+	column: Column;
+	isStacked?: boolean;
+	func?: DeckFunc | null;
+	naked?: boolean;
+	indicated?: boolean;
+}>(), {
+	isStacked: false,
+	func: null,
+	naked: false,
+	indicated: false,
 });
+
+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(e: 'change-active-state', v: boolean): void;
+}>();
+
+let body = $ref<HTMLDivElement>();
+
+let dragging = $ref(false);
+watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
+
+let draghover = $ref(false);
+let dropready = $ref(false);
+
+const isMainColumn = $computed(() => props.column.type === 'main');
+const active = $computed(() => props.column.active !== false);
+watch($$(active), v => emit('change-active-state', v));
+
+const keymap = $computed(() => ({
+	'shift+up': () => emit('parent-focus', 'up'),
+	'shift+down': () => emit('parent-focus', 'down'),
+	'shift+left': () => emit('parent-focus', 'left'),
+	'shift+right': () => emit('parent-focus', 'right'),
+}));
+
+onMounted(() => {
+	os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
+	os.deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
+});
+
+onBeforeUnmount(() => {
+	os.deckGlobalEvents.off('column.dragStart', onOtherDragStart);
+	os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
+});
+
+
+function onOtherDragStart() {
+	dropready = true;
+}
+
+function onOtherDragEnd() {
+	dropready = false;
+}
+
+function toggleActive() {
+	if (!props.isStacked) return;
+	updateColumn(props.column.id, {
+		active: !props.column.active
+	});
+}
+
+function getMenu() {
+	const items = [{
+		icon: 'fas fa-pencil-alt',
+		text: i18n.ts.edit,
+		action: async () => {
+			const { canceled, result } = await os.form(props.column.name, {
+				name: {
+					type: 'string',
+					label: i18n.ts.name,
+					default: props.column.name
+				},
+				width: {
+					type: 'number',
+					label: i18n.ts.width,
+					default: props.column.width
+				},
+				flexible: {
+					type: 'boolean',
+					label: i18n.ts.flexible,
+					default: props.column.flexible
+				}
+			});
+			if (canceled) return;
+			updateColumn(props.column.id, result);
+		}
+	}, null, {
+		icon: 'fas fa-arrow-left',
+		text: i18n.ts._deck.swapLeft,
+		action: () => {
+			swapLeftColumn(props.column.id);
+		}
+	}, {
+		icon: 'fas fa-arrow-right',
+		text: i18n.ts._deck.swapRight,
+		action: () => {
+			swapRightColumn(props.column.id);
+		}
+	}, props.isStacked ? {
+		icon: 'fas fa-arrow-up',
+		text: i18n.ts._deck.swapUp,
+		action: () => {
+			swapUpColumn(props.column.id);
+		}
+	} : undefined, props.isStacked ? {
+		icon: 'fas fa-arrow-down',
+		text: i18n.ts._deck.swapDown,
+		action: () => {
+			swapDownColumn(props.column.id);
+		}
+	} : undefined, null, {
+		icon: 'fas fa-window-restore',
+		text: i18n.ts._deck.stackLeft,
+		action: () => {
+			stackLeftColumn(props.column.id);
+		}
+	}, props.isStacked ? {
+		icon: 'fas fa-window-maximize',
+		text: i18n.ts._deck.popRight,
+		action: () => {
+			popRightColumn(props.column.id);
+		}
+	} : undefined, null, {
+		icon: 'fas fa-trash-alt',
+		text: i18n.ts.remove,
+		danger: true,
+		action: () => {
+			removeColumn(props.column.id);
+		}
+	}];
+	return items;
+}
+
+function onContextmenu(ev: MouseEvent) {
+	os.contextMenu(getMenu(), ev);
+}
+
+function goTop() {
+	body.scrollTo({
+		top: 0,
+		behavior: 'smooth'
+	});
+}
+
+function onDragstart(e) {
+	e.dataTransfer.effectAllowed = 'move';
+	e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
+
+	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
+	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
+	window.setTimeout(() => {
+		dragging = true;
+	}, 10);
+}
+
+function onDragend(e) {
+	dragging = false;
+}
+
+function onDragover(e) {
+	// 自分自身がドラッグされている場合
+	if (dragging) {
+		// 自分自身にはドロップさせない
+		e.dataTransfer.dropEffect = 'none';
+		return;
+	}
+
+	const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
+
+	e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+
+	if (!dragging && isDeckColumn) draghover = true;
+}
+
+function onDragleave() {
+	draghover = false;
+}
+
+function onDrop(e) {
+	draghover = false;
+	os.deckGlobalEvents.emit('column.dragEnd');
+
+	const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
+	if (id != null && id != '') {
+		swapColumn(props.column.id, id);
+	}
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/ui/deck/deck-store.ts
+++ b/packages/client/src/ui/deck/deck-store.ts
@@ -1,8 +1,9 @@
 import { throttle } from 'throttle-debounce';
 import { i18n } from '@/i18n';
 import { api } from '@/os';
-import { markRaw, watch } from 'vue';
+import { markRaw } from 'vue';
 import { Storage } from '../../pizzax';
+import { notificationTypes } from 'misskey-js';

 type ColumnWidget = {
 	name: string;
@@ -10,13 +11,18 @@ type ColumnWidget = {
 	data: Record<string, any>;
 };

-type Column = {
+export type Column = {
 	id: string;
 	type: string;
 	name: string | null;
 	width: number;
 	widgets?: ColumnWidget[];
 	active?: boolean;
+	flexible?: boolean;
+	antennaId?: string;
+	listId?: string;
+	includingTypes?: typeof notificationTypes[number][];
+	tl?: 'home' | 'local' | 'social' | 'global';
 };

 function copy<T>(x: T): T {
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked">
+<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="fas fa-envelope" style="margin-right: 8px;"></i>{{ column.name }}</template>

 	<XNotes :pagination="pagination"/>
@@ -7,21 +7,25 @@
 </template>

 <script lang="ts" setup>
-import { computed } from 'vue';
+import { } from 'vue';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
-import * as os from '@/os';
+import { Column } from './deck-store';

-const props = defineProps<{
-	column: Record<string, unknown>; // TODO
+defineProps<{
+	column: Column;
 	isStacked: boolean;
 }>();

+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
 const pagination = {
-	point: 'notes/mentions' as const,
+	endpoint: 'notes/mentions' as const,
 	limit: 10,
-	params: computed(() => ({
-		visibility: 'specified' as const,
-	})),
+	params: {
+		visibility: 'specified'
+	},
 };
 </script>
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -1,75 +1,65 @@
 <template>
-<XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked">
+<XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
 		<i class="fas fa-list-ul"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>

-	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
+	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
 </XColumn>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import {  } from 'vue';
 import XColumn from './column.vue';
 import XTimeline from '@/components/timeline.vue';
 import * as os from '@/os';
-import { updateColumn } from './deck-store';
+import { updateColumn, Column } from './deck-store';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'loaded'): void;
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let timeline = $ref<InstanceType<typeof XTimeline>>();
+
+if (props.column.listId == null) {
+	setList();
+}
+
+async function setList() {
+	const lists = await os.api('users/lists/list');
+	const { canceled, result: list } = await os.select({
+		title: i18n.ts.selectList,
+		items: lists.map(x => ({
+			value: x, text: x.name
+		})),
+		default: props.column.listId
+	});
+	if (canceled) return;
+	updateColumn(props.column.id, {
+		listId: list.id
+	});
+}
+
+/*
+function focus() {
+	timeline.focus();
+}

 export default defineComponent({
-	components: {
-		XColumn,
-		XTimeline,
-	},
-
-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-		};
-	},
-
 	watch: {
 		mediaOnly() {
 			(this.$refs.timeline as any).reload();
 		}
-	},
-
-	mounted() {
-		if (this.column.listId == null) {
-			this.setList();
-		}
-	},
-
-	methods: {
-		async setList() {
-			const lists = await os.api('users/lists/list');
-			const { canceled, result: list } = await os.select({
-				title: this.$ts.selectList,
-				items: lists.map(x => ({
-					value: x, text: x.name
-				})),
-				default: this.column.listId
-			});
-			if (canceled) return;
-			updateColumn(this.column.id, {
-				listId: list.id
-			});
-		},
-
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
 	}
 });
+*/
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'" :column="column" :is-stacked="isStacked">
+<XColumn v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
 		<template v-if="pageInfo">
 			<i :class="pageInfo.icon"></i>
@@ -20,72 +20,59 @@
 </XColumn>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import XColumn from './column.vue';
-import XNotes from '@/components/notes.vue';
-import { deckStore } from '@/ui/deck/deck-store';
+import { deckStore, Column } from '@/ui/deck/deck-store';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { router } from '@/router';

-export default defineComponent({
-	components: {
-		XColumn,
-		XNotes
-	},
+defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();

-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();

-	data() {
-		return {
-			deckStore,
-			pageInfo: null,
-		}
-	},
+let pageInfo = $ref<Record<string, any> | null>(null);

-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		back() {
-			history.back();
-		},
-
-		onContextmenu(ev: MouseEvent) {
-			const isLink = (el: HTMLElement) => {
-				if (el.tagName === 'A') return true;
-				if (el.parentElement) {
-					return isLink(el.parentElement);
-				}
-			};
-			if (isLink(ev.target)) return;
-			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-			if (window.getSelection().toString() !== '') return;
-			const path = this.$route.path;
-			os.contextMenu([{
-				type: 'label',
-				text: path,
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				}
-			}], ev);
-		},
+function changePage(page) {
+	if (page == null) return;
+	if (page[symbols.PAGE_INFO]) {
+		pageInfo = page[symbols.PAGE_INFO];
 	}
-});
+}
+/*
+function back() {
+	history.back();
+}
+*/
+function onContextmenu(ev: MouseEvent) {
+	if (!ev.target) return;
+
+	const isLink = (el: HTMLElement) => {
+		if (el.tagName === 'A') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+	};
+	if (isLink(ev.target as HTMLElement)) return;
+	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes((ev.target as HTMLElement).tagName) || (ev.target as HTMLElement).attributes['contenteditable']) return;
+	if (window.getSelection()?.toString() !== '') return;
+	const path = router.currentRoute.value.path;
+	os.contextMenu([{
+		type: 'label',
+		text: path,
+	}, {
+		icon: 'fas fa-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		}
+	}], ev);
+}
 </script>
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked">
+<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="fas fa-at" style="margin-right: 8px;"></i>{{ column.name }}</template>

 	<XNotes :pagination="pagination"/>
@@ -10,13 +10,17 @@
 import { } from 'vue';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
-import * as os from '@/os';
+import { Column } from './deck-store';

-const props = defineProps<{
-	column: Record<string, unknown>; // TODO
+defineProps<{
+	column: Column;
 	isStacked: boolean;
 }>();

+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
 const pagination = {
 	endpoint: 'notes/mentions' as const,
 	limit: 10,
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -1,53 +1,38 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }">
+<XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>

 	<XNotifications :include-types="column.includingTypes"/>
 </XColumn>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import XColumn from './column.vue';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
 import { updateColumn } from './deck-store';
+import { Column } from './deck-store';

-export default defineComponent({
-	components: {
-		XColumn,
-		XNotifications
-	},
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();

-	props: {
-		column: {
-			type: Object,
-			required: true
+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+function func() {
+	os.popup(import('@/components/notification-setting-window.vue'), {
+		includingTypes: props.column.includingTypes,
+	}, {
+		done: async (res) => {
+			const { includingTypes } = res;
+			updateColumn(props.column.id, {
+				includingTypes: includingTypes
+			});
 		},
-		isStacked: {
-			type: Boolean,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-		}
-	},
-
-	methods: {
-		func() {
-			os.popup(import('@/components/notification-setting-window.vue'), {
-				includingTypes: this.column.includingTypes,
-			}, {
-				done: async (res) => {
-					const { includingTypes } = res;
-					updateColumn(this.column.id, {
-						includingTypes: includingTypes
-					});
-				},
-			}, 'closed');
-		}
-	}
-});
+	}, 'closed');
+}
 </script>
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+<XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
 		<i v-if="column.tl === 'home'" class="fas fa-home"></i>
 		<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
@@ -15,108 +15,103 @@
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
 	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote"/>
+	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
 </XColumn>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import XColumn from './column.vue';
 import XTimeline from '@/components/timeline.vue';
 import * as os from '@/os';
-import { removeColumn, updateColumn } from './deck-store';
+import { removeColumn, updateColumn, Column } from './deck-store';
+import { $i } from '@/account';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';

-export default defineComponent({
-	components: {
-		XColumn,
-		XTimeline,
-	},
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();

-	props: {
-		column: {
-			type: Object,
-			required: true
-		},
-		isStacked: {
-			type: Boolean,
-			required: true
+const emit = defineEmits<{
+	(e: 'loaded'): void;
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let disabled = $ref(false);
+let indicated = $ref(false);
+let columnActive = $ref(true);
+
+onMounted(() => {
+	if (props.column.tl == null) {
+		setType();
+	} else if ($i) {
+		disabled = !$i.isModerator && !$i.isAdmin && (
+			instance.disableLocalTimeline && ['local', 'social'].includes(props.column.tl) ||
+			instance.disableGlobalTimeline && ['global'].includes(props.column.tl));
+	}
+});
+
+async function setType() {
+	const { canceled, result: src } = await os.select({
+		title: i18n.ts.timeline,
+		items: [{
+			value: 'home' as const, text: i18n.ts._timelines.home
+		}, {
+			value: 'local' as const, text: i18n.ts._timelines.local
+		}, {
+			value: 'social' as const, text: i18n.ts._timelines.social
+		}, {
+			value: 'global' as const, text: i18n.ts._timelines.global
+		}],
+	});
+	if (canceled) {
+		if (props.column.tl == null) {
+			removeColumn(props.column.id);
 		}
-	},
+		return;
+	}
+	updateColumn(props.column.id, {
+		tl: src
+	});
+}

-	data() {
-		return {
-			disabled: false,
-			indicated: false,
-			columnActive: true,
-		};
-	},
+function queueUpdated(q) {
+	if (columnActive) {
+		indicated = q !== 0;
+	}
+}

+function onNote() {
+	if (!columnActive) {
+		indicated = true;
+	}
+}
+
+function onChangeActiveState(state) {
+	columnActive = state;
+
+	if (columnActive) {
+		indicated = false;
+	}
+}
+
+/*
+export default defineComponent({
 	watch: {
 		mediaOnly() {
 			(this.$refs.timeline as any).reload();
 		}
 	},

-	mounted() {
-		if (this.column.tl == null) {
-			this.setType();
-		} else {
-			this.disabled = !this.$i.isModerator && !this.$i.isAdmin && (
-				this.$instance.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
-				this.$instance.disableGlobalTimeline && ['global'].includes(this.column.tl));
-		}
-	},
-
 	methods: {
-		async setType() {
-			const { canceled, result: src } = await os.select({
-				title: this.$ts.timeline,
-				items: [{
-					value: 'home', text: this.$ts._timelines.home
-				}, {
-					value: 'local', text: this.$ts._timelines.local
-				}, {
-					value: 'social', text: this.$ts._timelines.social
-				}, {
-					value: 'global', text: this.$ts._timelines.global
-				}]
-			});
-			if (canceled) {
-				if (this.column.tl == null) {
-					removeColumn(this.column.id);
-				}
-				return;
-			}
-			updateColumn(this.column.id, {
-				tl: src
-			});
-		},
-
-		queueUpdated(q) {
-			if (this.columnActive) {
-				this.indicated = q !== 0;
-			}
-		},
-
-		onNote() {
-			if (!this.columnActive) {
-				this.indicated = true;
-			}
-		},
-
-		onChangeActiveState(state) {
-			this.columnActive = state;
-
-			if (this.columnActive) {
-				this.indicated = false;
-			}
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
 		}
 	}
 });
+*/
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -1,64 +1,49 @@
 <template>
-<XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked">
+<XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>

 	<div class="wtdtxvec">
-		<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
+		<XWidgets v-if="column.widgets" :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
 	</div>
 </XColumn>
 </template>

-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import XWidgets from '@/components/widgets.vue';
 import XColumn from './column.vue';
-import { addColumnWidget, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
+import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';

-export default defineComponent({
-	components: {
-		XColumn,
-		XWidgets,
-	},
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();

-	props: {
-		column: {
-			type: Object,
-			required: true,
-		},
-		isStacked: {
-			type: Boolean,
-			required: true,
-		},
-	},
+const emit = defineEmits<{
+	(e: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();

-	data() {
-		return {
-			edit: false,
-		};
-	},
+let edit = $ref(false);

-	methods: {
-		addWidget(widget) {
-			addColumnWidget(this.column.id, widget);
-		},
+function addWidget(widget) {
+	addColumnWidget(props.column.id, widget);
+}

-		removeWidget(widget) {
-			removeColumnWidget(this.column.id, widget);
-		},
+function removeWidget(widget) {
+	removeColumnWidget(props.column.id, widget);
+}

-		updateWidget({ id, data }) {
-			updateColumnWidget(this.column.id, id, data);
-		},
+function updateWidget({ id, data }) {
+	updateColumnWidget(props.column.id, id, data);
+}

-		updateWidgets(widgets) {
-			setColumnWidgets(this.column.id, widgets);
-		},
+function updateWidgets(widgets) {
+	setColumnWidgets(props.column.id, widgets);
+}

-		func() {
-			this.edit = !this.edit;
-		}
-	}
-});
+function func() {
+	edit = !edit;
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -265,7 +265,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 			min-width: 0;

 			> .spacer {
-				height: 82px;
+				height: calc(env(safe-area-inset-bottom, 0px) + 96px);

 				@media (min-width: ($widgets-hide-threshold + 1px)) {
 					display: none;
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -1,58 +1,50 @@
 <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"/>
+	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>

-	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>

-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import XWidgets from '@/components/widgets.vue';
-import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';

-export default defineComponent({
-	components: {
-		XWidgets
-	},
+const emit = defineEmits<{
+	(e: 'mounted', el: Element): void;
+}>();

-	emits: ['mounted'],
+let editMode = $ref(false);
+let rootEl = $ref<HTMLDivElement>();

-	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);
-		}
-	}
+onMounted(() => {
+	emit('mounted', rootEl);
 });
+
+function addWidget(widget) {
+	defaultStore.set('widgets', [{
+		...widget,
+		place: null,
+	}, ...defaultStore.state.widgets]);
+}
+
+function removeWidget(widget) {
+	defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id != widget.id));
+}
+
+function updateWidget({ id, data }) {
+	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
+		...w,
+		data: data
+	} : w));
+}
+
+function updateWidgets(widgets) {
+	defaultStore.set('widgets', widgets);
+}
 </script>

 <style lang="scss" scoped>
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock