Merge branch 'develop'

53 files changed, 473 insertions, 626 deletions

diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index ff450246f9..a8eed1ca21 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -77,7 +77,7 @@
 import { defineComponent, markRaw } from 'vue';
 import { emojilist } from '@/scripts/emojilist';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Particle from '@/components/particle.vue';
+import Ripple from '@/components/ripple.vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { isMobile } from '@/scripts/is-mobile';
@@ -296,9 +296,9 @@ export default defineComponent({
 			if (ev) {
 				const el = ev.currentTarget || ev.target;
 				const rect = el.getBoundingClientRect();
-				const x = rect.left + (el.clientWidth / 2);
-				const y = rect.top + (el.clientHeight / 2);
-				os.popup(Particle, { x, y }, {}, 'end');
+				const x = rect.left + (el.offsetWidth / 2);
+				const y = rect.top + (el.offsetHeight / 2);
+				os.popup(Ripple, { x, y }, {}, 'end');
 			}
 
 			const key = this.getKey(emoji);
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index c990b693f1..3533f4f27b 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -5,7 +5,7 @@
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
 		<input ref="inputEl"
 			v-model="v"
-			v-panel
+			v-adaptive-border
 			:type="type"
 			:disabled="disabled"
 			:required="required"
@@ -243,7 +243,8 @@ export default defineComponent({
 			font-weight: normal;
 			font-size: 1em;
 			color: var(--fg);
-			border: solid 0.5px var(--panel);
+			background: var(--panel);
+			border: solid 1px var(--panel);
 			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
@@ -251,7 +252,7 @@ export default defineComponent({
 			transition: border-color 0.1s ease-out;
 
 			&:hover {
-				border-color: var(--inputBorderHover);
+				border-color: var(--inputBorderHover) !important;
 			}
 		}
 
@@ -298,7 +299,7 @@ export default defineComponent({
 
 		&.focused {
 			> input {
-				border-color: var(--accent);
+				border-color: var(--accent) !important;
 				//box-shadow: 0 0 0 4px var(--focus);
 			}
 		}
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 9ecff1aa6f..afc53ca9c8 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -3,7 +3,9 @@
 	<div class="label" @click="focus"><slot name="label"></slot></div>
 	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<select ref="inputEl" v-model="v" v-panel
+		<select ref="inputEl"
+			v-model="v"
+			v-adaptive-border
 			class="select"
 			:disabled="disabled"
 			:required="required"
@@ -226,7 +228,7 @@ export default defineComponent({
 
 		&:hover {
 			> .select {
-				border-color: var(--inputBorderHover);
+				border-color: var(--inputBorderHover) !important;
 			}
 		}
 
@@ -242,6 +244,7 @@ export default defineComponent({
 			font-weight: normal;
 			font-size: 1em;
 			color: var(--fg);
+			background: var(--panel);
 			border: solid 1px var(--panel);
 			border-radius: 6px;
 			outline: none;
@@ -295,7 +298,7 @@ export default defineComponent({
 
 		&.focused {
 			> select {
-				border-color: var(--accent);
+				border-color: var(--accent) !important;
 			}
 		}
 
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 239303a55a..aa9b09215e 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -2,10 +2,6 @@
 <div
 	class="ziffeoms"
 	:class="{ disabled, checked }"
-	role="switch"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click.prevent="toggle"
 >
 	<input
 		ref="input"
@@ -13,18 +9,20 @@
 		:disabled="disabled"
 		@keydown.enter="toggle"
 	>
-	<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
-		<span class="handle"></span>
+	<span ref="button" v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
+		<i class="check fas fa-check"></i>
 	</span>
 	<span class="label">
-		<span><slot></slot></span>
+		<span @click="toggle"><slot></slot></span>
 		<p class="caption"><slot name="caption"></slot></p>
 	</span>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref, toRefs } from 'vue';
+import * as os from '@/os';
+import Ripple from '@/components/ripple.vue';
 
 export default defineComponent({
 	props: {
@@ -37,17 +35,28 @@ export default defineComponent({
 			default: false
 		}
 	},
-	computed: {
-		checked(): boolean {
-			return this.modelValue;
-		}
+
+	setup(props, context) {
+		const button = ref<HTMLElement>();
+		const checked = toRefs(props).modelValue;
+		const toggle = () => {
+			if (props.disabled) return;
+			context.emit('update:modelValue', !checked.value);
+
+			if (!checked.value) {
+				const rect = button.value.getBoundingClientRect();
+				const x = rect.left + (button.value.offsetWidth / 2);
+				const y = rect.top + (button.value.offsetHeight / 2);
+				os.popup(Ripple, { x, y, particle: false }, {}, 'end');
+			}
+		};
+
+		return {
+			button,
+			checked,
+			toggle,
+		};
 	},
-	methods: {
-		toggle() {
-			if (this.disabled) return;
-			this.$emit('update:modelValue', !this.checked);
-		}
-	}
 });
 </script>
 
@@ -55,16 +64,7 @@ export default defineComponent({
 .ziffeoms {
 	position: relative;
 	display: flex;
-	cursor: pointer;
-	transition: all 0.3s;
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
+	transition: all 0.2s ease;
 
 	> * {
 		user-select: none;
@@ -80,27 +80,32 @@ export default defineComponent({
 
 	> .button {
 		position: relative;
-		display: inline-block;
+		display: inline-flex;
 		flex-shrink: 0;
 		margin: 0;
-		width: 36px;
-		height: 26px;
-		background: var(--switchBg);
+		box-sizing: border-box;
+		width: 23px;
+		height: 23px;
 		outline: none;
-		border-radius: 999px;
+		background: var(--panel);
+		border: solid 1px var(--panel);
+		border-radius: 4px;
+		cursor: pointer;
 		transition: inherit;
 
-		> .handle {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 5px;
-			margin: auto 0;
-			border-radius: 100%;
-			transition: background-color 0.3s, transform 0.3s;
-			width: 16px;
-			height: 16px;
-			background-color: #fff;
+		> .check {
+			margin: auto;
+			opacity: 0;
+			color: var(--fgOnAccent);
+			font-size: 13px;
+			transform: scale(0.5);
+			transition: all 0.2s ease;
+		}
+	}
+
+	&:hover {
+		> .button {
+			border-color: var(--inputBorderHover) !important;
 		}
 	}
 
@@ -108,13 +113,13 @@ export default defineComponent({
 		margin-left: 16px;
 		margin-top: 2px;
 		display: block;
-		cursor: pointer;
 		transition: inherit;
 		color: var(--fg);
 
 		> span {
 			display: block;
 			line-height: 20px;
+			cursor: pointer;
 			transition: inherit;
 		}
 
@@ -129,12 +134,6 @@ export default defineComponent({
 		}
 	}
 
-	&:hover {
-		> .button {
-			background-color: var(--accentedBg);
-		}
-	}
-
 	&.disabled {
 		opacity: 0.6;
 		cursor: not-allowed;
@@ -142,11 +141,12 @@ export default defineComponent({
 
 	&.checked {
 		> .button {
-			background-color: var(--accent);
-			border-color: var(--accent);
+			background-color: var(--accent) !important;
+			border-color: var(--accent) !important;
 
-			> .handle {
-				transform: translateX(10px);
+			> .check {
+				opacity: 1;
+				transform: scale(1);
 			}
 		}
 	}
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 98fd0da94b..c9ba9b97a2 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -4,7 +4,7 @@
 	<div class="input" :class="{ disabled, focused, tall, pre }">
 		<textarea ref="inputEl"
 			v-model="v"
-			v-panel
+			v-adaptive-border
 			:class="{ code, _monospace: code }"
 			:disabled="disabled"
 			:required="required"
@@ -210,7 +210,8 @@ export default defineComponent({
 			font-weight: normal;
 			font-size: 1em;
 			color: var(--fg);
-			border: solid 0.5px var(--panel);
+			background: var(--panel);
+			border: solid 1px var(--panel);
 			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
@@ -218,13 +219,13 @@ export default defineComponent({
 			transition: border-color 0.1s ease-out;
 
 			&:hover {
-				border-color: var(--inputBorderHover);
+				border-color: var(--inputBorderHover) !important;
 			}
 		}
 
 		&.focused {
 			> textarea {
-				border-color: var(--accent);
+				border-color: var(--accent) !important;
 			}
 		}
 
diff --git a/packages/client/src/components/global/a.vue b/packages/client/src/components/global/a.vue
index 5db61203c6..77ee7525a4 100644
--- a/packages/client/src/components/global/a.vue
+++ b/packages/client/src/components/global/a.vue
@@ -106,11 +106,6 @@ export default defineComponent({
 				return;
 			}
 
-			if (this.to.startsWith('/my/messaging')) {
-				if (ColdDeviceStorage.get('chatOpenBehavior') === 'window') return this.window();
-				if (ColdDeviceStorage.get('chatOpenBehavior') === 'popout') return this.popout();
-			}
-
 			if (this.behavior) {
 				if (this.behavior === 'window') {
 					return this.window();
diff --git a/packages/client/src/components/global/header.vue b/packages/client/src/components/global/header.vue
index 2e03d783af..a241ece407 100644
--- a/packages/client/src/components/global/header.vue
+++ b/packages/client/src/components/global/header.vue
@@ -6,7 +6,7 @@
 			<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
 
 			<div class="title">
-				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
+				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="true" class="title"/>
 				<div v-else-if="info.title" class="title">{{ info.title }}</div>
 				<div v-if="!narrow && info.subtitle" class="subtitle">
 					{{ info.subtitle }}
@@ -268,6 +268,7 @@ export default defineComponent({
 	> .titleContainer {
 		display: flex;
 		align-items: center;
+		max-width: 400px;
 		overflow: auto;
 		white-space: nowrap;
 		text-align: left;
diff --git a/packages/client/src/components/global/url.vue b/packages/client/src/components/global/url.vue
index 097fcddef6..56a8c3453a 100644
--- a/packages/client/src/components/global/url.vue
+++ b/packages/client/src/components/global/url.vue
@@ -1,7 +1,5 @@
 <template>
-<component :is="self ? 'MkA' : 'a'" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	@mouseover="onMouseover"
-	@mouseleave="onMouseleave"
+<component :is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
 	@contextmenu.stop="() => {}"
 >
 	<template v-if="!self">
@@ -20,11 +18,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
-import { isTouchUsing } from '@/scripts/touch';
 import * as os from '@/os';
+import { useTooltip } from '@/scripts/use-tooltip';
 
 export default defineComponent({
 	props: {
@@ -35,74 +33,36 @@ export default defineComponent({
 		rel: {
 			type: String,
 			required: false,
+			default: null,
 		}
 	},
-	data() {
-		const self = this.url.startsWith(local);
+	setup(props) {
+		const self = props.url.startsWith(local);
+		const url = new URL(props.url);
+		const el = ref();
+		
+		useTooltip(el, (showing) => {
+			os.popup(import('@/components/url-preview-popup.vue'), {
+				showing,
+				url: props.url,
+				source: el.value,
+			}, {}, 'closed');
+		});
+
 		return {
 			local,
-			schema: null as string | null,
-			hostname: null as string | null,
-			port: null as string | null,
-			pathname: null as string | null,
-			query: null as string | null,
-			hash: null as string | null,
+			schema: url.protocol,
+			hostname: decodePunycode(url.hostname),
+			port: url.port,
+			pathname: decodeURIComponent(url.pathname),
+			query: decodeURIComponent(url.search),
+			hash: decodeURIComponent(url.hash),
 			self: self,
 			attr: self ? 'to' : 'href',
 			target: self ? null : '_blank',
-			showTimer: null,
-			hideTimer: null,
-			checkTimer: null,
-			close: null,
+			el,
 		};
 	},
-	created() {
-		const url = new URL(this.url);
-		this.schema = url.protocol;
-		this.hostname = decodePunycode(url.hostname);
-		this.port = url.port;
-		this.pathname = decodeURIComponent(url.pathname);
-		this.query = decodeURIComponent(url.search);
-		this.hash = decodeURIComponent(url.hash);
-	},
-	methods: {
-		async showPreview() {
-			if (!document.body.contains(this.$el)) return;
-			if (this.close) return;
-
-			const { dispose } = await os.popup(import('@/components/url-preview-popup.vue'), {
-				url: this.url,
-				source: this.$el
-			});
-
-			this.close = () => {
-				dispose();
-			};
-
-			this.checkTimer = setInterval(() => {
-				if (!document.body.contains(this.$el)) this.closePreview();
-			}, 1000);
-		},
-		closePreview() {
-			if (this.close) {
-				clearInterval(this.checkTimer);
-				this.close();
-				this.close = null;
-			}
-		},
-		onMouseover() {
-			if (isTouchUsing) return;
-			clearTimeout(this.showTimer);
-			clearTimeout(this.hideTimer);
-			this.showTimer = setTimeout(this.showPreview, 500);
-		},
-		onMouseleave() {
-			if (isTouchUsing) return;
-			clearTimeout(this.showTimer);
-			clearTimeout(this.hideTimer);
-			this.hideTimer = setTimeout(this.closePreview, 500);
-		}
-	}
 });
 </script>
 
diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/media-list.vue
index c987ff5ff1..2970d06c97 100644
--- a/packages/client/src/components/media-list.vue
+++ b/packages/client/src/components/media-list.vue
@@ -105,6 +105,7 @@ export default defineComponent({
 		return {
 			previewable,
 			gallery,
+			pswpZIndex: os.claimZIndex('middle'),
 		};
 	},
 });
@@ -188,3 +189,11 @@ export default defineComponent({
 	}
 }
 </style>
+
+<style lang="scss">
+.pswp {
+	// なぜか機能しない
+  //z-index: v-bind(pswpZIndex);
+	z-index: 2000000;
+}
+</style>
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index d1da365d9a..2e6d26476a 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -175,14 +175,7 @@ export default defineComponent({
 							if (!this.$store.state.animatedMfm) {
 								return genEl(token.children);
 							}
-							let count = token.props.args.count ? parseInt(token.props.args.count) : 10;
-							if (count > 100) {
-								count = 100;
-							}
-							const speed = token.props.args.speed ? parseFloat(token.props.args.speed) : 1;
-							return h(MkSparkle, {
-								count, speed,
-							}, genEl(token.children));
+							return h(MkSparkle, {}, genEl(token.children));
 						}
 						case 'rotate': {
 							const degrees = parseInt(token.props.args.deg) || '90';
diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/note-preview.vue
index 6e3eba9306..bdcb8d5eed 100644
--- a/packages/client/src/components/note-preview.vue
+++ b/packages/client/src/components/note-preview.vue
@@ -7,7 +7,7 @@
 		</div>
 		<div class="body">
 			<div class="content">
-				<Mfm :text="text" :author="$i" :i="$i"/>
+				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
 			</div>
 		</div>
 	</div>
@@ -61,6 +61,7 @@ export default defineComponent({
 		width: 40px;
 		height: 40px;
 		border-radius: 8px;
+		pointer-events: none;
 	}
 
 	> .main {
@@ -69,6 +70,7 @@ export default defineComponent({
 
 		> .header {
 			margin-bottom: 2px;
+			font-weight: bold;
 		}
 
 		> .body {
diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/page-window.vue
index 39c185b3e0..ec7451d5aa 100644
--- a/packages/client/src/components/page-window.vue
+++ b/packages/client/src/components/page-window.vue
@@ -16,7 +16,13 @@
 	<template #headerLeft>
 		<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 	</template>
-	<div class="yrolvcoq">
+	<template #headerRight>
+		<button v-tooltip="$ts.showInPage" class="_button" @click="expand()"><i class="fas fa-expand-alt"></i></button>
+		<button v-tooltip="$ts.popout" class="_button" @click="popout()"><i class="fas fa-external-link-alt"></i></button>
+		<button class="_button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
+	</template>
+
+	<div class="yrolvcoq" :style="{ background: pageInfo?.bg }">
 		<MkStickyContainer>
 			<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
 			<component :is="component" v-bind="props" :ref="changePage"/>
@@ -33,6 +39,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { resolve } from '@/router';
 import { url } from '@/config';
 import * as symbols from '@/symbols';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -139,6 +146,23 @@ export default defineComponent({
 			this.props = props;
 		},
 
+		menu(ev) {
+			os.popupMenu([{
+				icon: 'fas fa-external-link-alt',
+				text: this.$ts.openInNewTab,
+				action: () => {
+					window.open(this.url, '_blank');
+					this.$refs.window.close();
+				}
+			}, {
+				icon: 'fas fa-link',
+				text: this.$ts.copyLink,
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}], ev.currentTarget || ev.target);
+		},
+
 		back() {
 			this.navigate(this.history.pop(), false);
 		},
diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue
index a1de99f018..bbf518549c 100644
--- a/packages/client/src/components/reactions-viewer.reaction.vue
+++ b/packages/client/src/components/reactions-viewer.reaction.vue
@@ -2,7 +2,7 @@
 <button
 	v-if="count > 0"
 	ref="buttonRef"
-	v-particle="canToggle"
+	v-ripple="canToggle"
 	class="hkzvhatu _button"
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction()"
diff --git a/packages/client/src/components/particle.vue b/packages/client/src/components/ripple.vue
index d82705c1e8..272eacbc6e 100644
--- a/packages/client/src/components/particle.vue
+++ b/packages/client/src/components/ripple.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="vswabwbm" :style="{ top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
 			<animate attributeName="r"
@@ -52,7 +52,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -63,37 +64,46 @@ export default defineComponent({
 		y: {
 			type: Number,
 			required: true
+		},
+		particle: {
+			type: Boolean,
+			required: false,
+			default: true,
 		}
 	},
 	emits: ['end'],
-	data() {
+	setup(props, context) {
 		const particles = [];
 		const origin = 64;
 		const colors = ['#FF1493', '#00FFFF', '#FFE202'];
 
-		for (let i = 0; i < 12; i++) {
-			const angle = Math.random() * (Math.PI * 2);
-			const pos = Math.random() * 16;
-			const velocity = 16 + (Math.random() * 48);
-			particles.push({
-				size: 4 + (Math.random() * 8),
-				xA: origin + (Math.sin(angle) * pos),
-				yA: origin + (Math.cos(angle) * pos),
-				xB: origin + (Math.sin(angle) * (pos + velocity)),
-				yB: origin + (Math.cos(angle) * (pos + velocity)),
-				color: colors[Math.floor(Math.random() * colors.length)]
-			});
+		if (props.particle) {
+			for (let i = 0; i < 12; i++) {
+				const angle = Math.random() * (Math.PI * 2);
+				const pos = Math.random() * 16;
+				const velocity = 16 + (Math.random() * 48);
+				particles.push({
+					size: 4 + (Math.random() * 8),
+					xA: origin + (Math.sin(angle) * pos),
+					yA: origin + (Math.cos(angle) * pos),
+					xB: origin + (Math.sin(angle) * (pos + velocity)),
+					yB: origin + (Math.cos(angle) * (pos + velocity)),
+					color: colors[Math.floor(Math.random() * colors.length)]
+				});
+			}
 		}
 
+		onMounted(() => {
+			setTimeout(() => {
+				context.emit('end');
+			}, 1100);
+		});
+
 		return {
-			particles
+			particles,
+			zIndex: os.claimZIndex('high'),
 		};
 	},
-	mounted() {
-		setTimeout(() => {
-			this.$emit('end');
-		}, 1100);
-	}
 });
 </script>
 
@@ -101,7 +111,6 @@ export default defineComponent({
 .vswabwbm {
 	pointer-events: none;
 	position: fixed;
-	z-index: 1000000;
 	width: 128px;
 	height: 128px;
 
diff --git a/packages/client/src/components/signup.vue b/packages/client/src/components/signup.vue
index 8668d1d076..38a9fd55f1 100644
--- a/packages/client/src/components/signup.vue
+++ b/packages/client/src/components/signup.vue
@@ -51,14 +51,13 @@
 				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
 			</template>
 		</MkInput>
-		<label v-if="meta.tosUrl" class="_formBlock tou">
-			<input v-model="ToSAgreement" type="checkbox">
+		<MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
 			<I18n :src="$ts.agreeTo">
 				<template #0>
 					<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
 				</template>
 			</I18n>
-		</label>
+		</MkSwitch>
 		<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
 		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
@@ -258,11 +257,5 @@ export default defineComponent({
 	.captcha {
 		margin: 16px 0;
 	}
-
-	> .tou {
-		display: block;
-		margin: 16px 0;
-		cursor: pointer;
-	}
 }
 </style>
diff --git a/packages/client/src/components/sparkle.vue b/packages/client/src/components/sparkle.vue
index 21b57f1580..f52e5a3f9b 100644
--- a/packages/client/src/components/sparkle.vue
+++ b/packages/client/src/components/sparkle.vue
@@ -1,161 +1,121 @@
 <template>
 <span class="mk-sparkle">
-	<span ref="content">
+	<span ref="el">
 		<slot></slot>
 	</span>
-	<canvas ref="canvas"></canvas>
+	<!-- なぜか path に対する key が機能しないため
+	<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
+		<path v-for="particle in particles" :key="particle.id" style="transform-origin: center; transform-box: fill-box;"
+			:transform="`translate(${particle.x} ${particle.y})`"
+			:fill="particle.color"
+			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+		>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="rotate"
+				from="0 0 0"
+				to="360 0 0"
+				:dur="`${particle.dur}ms`"
+				repeatCount="indefinite"
+				additive="sum"
+			/>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="scale"
+				:values="`0; ${particle.size}; 0`"
+				:dur="`${particle.dur}ms`"
+				repeatCount="indefinite"
+				additive="sum"
+			/>
+		</path>
+	</svg>
+	-->
+	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
+		<path style="transform-origin: center; transform-box: fill-box;"
+			:transform="`translate(${particle.x} ${particle.y})`"
+			:fill="particle.color"
+			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+		>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="rotate"
+				from="0 0 0"
+				to="360 0 0"
+				:dur="`${particle.dur}ms`"
+				repeatCount="1"
+				additive="sum"
+			/>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="scale"
+				:values="`0; ${particle.size}; 0`"
+				:dur="`${particle.dur}ms`"
+				repeatCount="1"
+				additive="sum"
+			/>
+		</path>
+	</svg>
 </span>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import * as os from '@/os';
 
-const sprite = new Image();
-sprite.src = '/client-assets/sparkle-spritesheet.png';
-
 export default defineComponent({
-	props: {
-		count: {
-			type: Number,
-			required: true,
-		},
-		speed: {
-			type: Number,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			sprites: [0,6,13,20],
-			particles: [],
-			anim: null,
-			ctx: null,
-		};
-	},
-	unmounted() {
-		window.cancelAnimationFrame(this.anim);
-	},
-	mounted() {
-		this.ctx = this.$refs.canvas.getContext('2d');
-
-		new ResizeObserver(this.resize).observe(this.$refs.content);
-
-		this.resize();
-		this.tick();
-	},
-	updated() {
-		this.resize();
-	},
-	methods: {
-		createSparkles(w, h, count) {
-			const holder = [];
-
-			for (let i = 0; i < count; i++) {
-
-				const color = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
-
-				holder[i] = {
-					position: {
-						x: Math.floor(Math.random() * w),
-						y: Math.floor(Math.random() * h)
-					},
-					style: this.sprites[ Math.floor(Math.random() * 4) ],
-					delta: {
-						x: Math.floor(Math.random() * 1000) - 500,
-						y: Math.floor(Math.random() * 1000) - 500
-					},
-					color: color,
-					opacity: Math.random(),
-				};
-
-			}
-
-			return holder;
-		},
-		draw(time) {
-			this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
-			this.ctx.beginPath();
+	setup() {
+		const particles = ref([]);
+		const el = ref<HTMLElement>();
+		const width = ref(0);
+		const height = ref(0);
+		const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
 
-			const particleSize = Math.floor(this.fontSize / 2);
-			this.particles.forEach((particle) => {
-				var modulus = Math.floor(Math.random()*7);
-
-				if (Math.floor(time) % modulus === 0) {
-					particle.style = this.sprites[ Math.floor(Math.random()*4) ];
-				}
-
-				this.ctx.save();
-				this.ctx.globalAlpha = particle.opacity;
-				this.ctx.drawImage(sprite, particle.style, 0, 7, 7, particle.position.x, particle.position.y, particleSize, particleSize);
-
-				this.ctx.globalCompositeOperation = "source-atop";
-				this.ctx.globalAlpha = 0.5;
-				this.ctx.fillStyle = particle.color;
-				this.ctx.fillRect(particle.position.x, particle.position.y, particleSize, particleSize);
-
-				this.ctx.restore();
+		onMounted(() => {
+			const ro = new ResizeObserver((entries, observer) => {
+				width.value = el.value?.offsetWidth + 64;
+				height.value = el.value?.offsetHeight + 64;
 			});
-			this.ctx.stroke();
-		},
-		tick() {
-			this.anim = window.requestAnimationFrame((time) => {
-				if (!this.$refs.canvas) {
-					return;
-				}
-				this.particles.forEach((particle) => {
-					if (!particle) {
-						return;
-					}
-					var randX = Math.random() > Math.random() * 2;
-					var randY = Math.random() > Math.random() * 3;
-
-					if (randX) {
-						particle.position.x += (particle.delta.x * this.speed) / 1500;
-					}
-
-					if (!randY) {
-						particle.position.y -= (particle.delta.y * this.speed) / 800;
-					}
-
-					if( particle.position.x > this.$refs.canvas.width ) {
-						particle.position.x = -7;
-					} else if (particle.position.x < -7) {
-						particle.position.x = this.$refs.canvas.width;
-					}
-
-					if (particle.position.y > this.$refs.canvas.height) {
-						particle.position.y = -7;
-						particle.position.x = Math.floor(Math.random() * this.$refs.canvas.width);
-					} else if (particle.position.y < -7) {
-						particle.position.y = this.$refs.canvas.height;
-						particle.position.x = Math.floor(Math.random() * this.$refs.canvas.width);
-					}
-
-					particle.opacity -= 0.005;
-
-					if (particle.opacity <= 0) {
-						particle.opacity = 1;
-					}
-				});
-
-				this.draw(time);
+			ro.observe(el.value);
+			let stop = false;
+			const add = () => {
+				if (stop) return;
+				const x = (Math.random() * (width.value - 64));
+				const y = (Math.random() * (height.value - 64));
+				const sizeFactor = Math.random();
+				const particle = {
+					id: Math.random().toString(),
+					x,
+					y,
+					size: 0.2 + ((sizeFactor / 10) * 3),
+					dur: 1000 + (sizeFactor * 1000),
+					color: colors[Math.floor(Math.random() * colors.length)],
+				};
+				particles.value.push(particle);
+				window.setTimeout(() => {
+					particles.value = particles.value.filter(x => x.id !== particle.id);
+				}, particle.dur - 100);
 
-				this.tick();
+				window.setTimeout(() => {
+					add();
+				}, 500 + (Math.random() * 500));
+			};
+			add();
+			onUnmounted(() => {
+				ro.disconnect();
+				stop = true;
 			});
-		},
-		resize() {
-			if (this.$refs.content) {
-				const contentRect = this.$refs.content.getBoundingClientRect();
-				this.fontSize = parseFloat(getComputedStyle(this.$refs.content).fontSize);
-				const padding = this.fontSize * 0.2;
+		});
 
-				this.$refs.canvas.width = parseInt(contentRect.width + padding);
-				this.$refs.canvas.height = parseInt(contentRect.height + padding);
-
-				this.particles = this.createSparkles(this.$refs.canvas.width, this.$refs.canvas.height, this.count);
-			}
-		},
+		return {
+			el,
+			width,
+			height,
+			particles,
+		};
 	},
 });
 </script>
@@ -169,10 +129,10 @@ export default defineComponent({
 		display: inline-block;
 	}
 
-	> canvas {
+	> svg {
 		position: absolute;
-		top: -0.1em;
-		left: -0.1em;
+		top: -32px;
+		left: -32px;
 		pointer-events: none;
 	}
 }
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 869709cf21..6f3f277b11 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -284,7 +284,7 @@ export default defineComponent({
 	}
 
 	&.asDrawer {
-		padding: 12px 0;
+		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
 		width: 100%;
 
 		> .item {
diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue
index b09d04c450..3e2e59b27c 100644
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -13,6 +13,7 @@
 import { defineComponent, nextTick, onMounted, computed, PropType, ref, watch } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
+import { defaultStore } from '@/store';
 
 function getFixedContainer(el: Element | null): Element | null {
 	if (el == null || el.tagName === 'BODY') return null;
@@ -77,7 +78,7 @@ export default defineComponent({
 		const zIndex = os.claimZIndex(props.zPriority);
 		const type = computed(() => {
 			if (props.preferType === 'auto') {
-				if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {
+				if (!defaultStore.state.disableDrawer && isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {
 					return 'drawer';
 				} else {
 					return props.src != null ? 'popup' : 'dialog';
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 00200efd3c..64af4a54f7 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -5,7 +5,12 @@
 	<MkError v-else-if="error" @retry="init()"/>
 
 	<div v-else-if="empty" key="_empty_" class="empty">
-		<slot name="empty"></slot>
+		<slot name="empty">
+			<div class="_fullinfo">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ $ts.nothing }}</div>
+			</div>
+		</slot>
 	</div>
 
 	<div v-else class="cxiknjgy">
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index d01498d8df..bd33289ccc 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -414,6 +414,10 @@ export default defineComponent({
 				}
 			}
 
+			> .left {
+				min-width: 16px;
+			}
+
 			> .title {
 				flex: 1;
 				position: relative;
@@ -421,7 +425,6 @@ export default defineComponent({
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
-				text-align: center;
 				cursor: move;
 			}
 		}
diff --git a/packages/client/src/components/updated.vue b/packages/client/src/components/updated.vue
index 74f54524be..375ac0dbbb 100644
--- a/packages/client/src/components/updated.vue
+++ b/packages/client/src/components/updated.vue
@@ -1,7 +1,7 @@
 <template>
 <MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="ewlycnyt">
-		<div class="title">{{ $ts.misskeyUpdated }}</div>
+		<div class="title"><MkSparkle>{{ $ts.misskeyUpdated }}</MkSparkle></div>
 		<div class="version">✨{{ version }}🚀</div>
 		<MkButton full @click="whatIsNew">{{ $ts.whatIsNew }}</MkButton>
 		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ $ts.gotIt }}</MkButton>
@@ -9,31 +9,19 @@
 </MkModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
 import MkButton from '@/components/ui/button.vue';
+import MkSparkle from '@/components/sparkle.vue';
 import { version } from '@/config';
 
-export default defineComponent({
-	components: {
-		MkModal,
-		MkButton,
-	},
+const modal = ref();
 
-	data() {
-		return {
-			version: version,
-		};
-	},
-
-	methods: {
-		whatIsNew() {
-			this.$refs.modal.close();
-			window.open(`https://misskey-hub.net/docs/releases.html#_${version.replace(/\./g, '-')}`, '_blank');
-		}
-	}
-});
+const whatIsNew = () => {
+	modal.value.close();
+	window.open(`https://misskey-hub.net/docs/releases.html#_${version.replace(/\./g, '-')}`, '_blank');
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/directives/adaptive-border.ts b/packages/client/src/directives/adaptive-border.ts
new file mode 100644
index 0000000000..fc426ca2cc
--- /dev/null
+++ b/packages/client/src/directives/adaptive-border.ts
@@ -0,0 +1,24 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const getBgColor = (el: HTMLElement) => {
+			const style = window.getComputedStyle(el);
+			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
+				return style.backgroundColor;
+			} else {
+				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+			}
+		}
+	
+		const parentBg = getBgColor(src.parentElement);
+
+		const myBg = window.getComputedStyle(src).backgroundColor;
+
+		if (parentBg === myBg) {
+			src.style.borderColor = 'var(--divider)';
+		} else {
+			src.style.borderColor = myBg;
+		}
+	},
+} as Directive;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index 4b11bb6213..fc9b6f86da 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -3,7 +3,7 @@ import { App } from 'vue';
 import userPreview from './user-preview';
 import size from './size';
 import getSize from './get-size';
-import particle from './particle';
+import ripple from './ripple';
 import tooltip from './tooltip';
 import hotkey from './hotkey';
 import appear from './appear';
@@ -11,13 +11,14 @@ import anim from './anim';
 import stickyContainer from './sticky-container';
 import clickAnime from './click-anime';
 import panel from './panel';
+import adaptiveBorder from './adaptive-border';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
 	app.directive('user-preview', userPreview);
 	app.directive('size', size);
 	app.directive('get-size', getSize);
-	app.directive('particle', particle);
+	app.directive('ripple', ripple);
 	app.directive('tooltip', tooltip);
 	app.directive('hotkey', hotkey);
 	app.directive('appear', appear);
@@ -25,4 +26,5 @@ export default function(app: App) {
 	app.directive('click-anime', clickAnime);
 	app.directive('sticky-container', stickyContainer);
 	app.directive('panel', panel);
+	app.directive('adaptive-border', adaptiveBorder);
 }
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
index 86ec2a9116..5f9158db2e 100644
--- a/packages/client/src/directives/panel.ts
+++ b/packages/client/src/directives/panel.ts
@@ -7,7 +7,7 @@ export default {
 			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
 				return style.backgroundColor;
 			} else {
-				return getBgColor(el.parentElement);
+				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
 			}
 		}
 	
diff --git a/packages/client/src/directives/particle.ts b/packages/client/src/directives/ripple.ts
index c90df89a5e..f1d41ddb0e 100644
--- a/packages/client/src/directives/particle.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -1,4 +1,4 @@
-import Particle from '@/components/particle.vue';
+import Ripple from '@/components/ripple.vue';
 import { popup } from '@/os';
 
 export default {
@@ -9,10 +9,10 @@ export default {
 		el.addEventListener('click', () => {
 			const rect = el.getBoundingClientRect();
 
-			const x = rect.left + (el.clientWidth / 2);
-			const y = rect.top + (el.clientHeight / 2);
+			const x = rect.left + (el.offsetWidth / 2);
+			const y = rect.top + (el.offsetHeight / 2);
 
-			popup(Particle, { x, y }, {}, 'end');
+			popup(Ripple, { x, y }, {}, 'end');
 		});
 	}
 };
diff --git a/packages/client/src/pages/admin/file-dialog.vue b/packages/client/src/pages/admin/file-dialog.vue
index f0774b2946..4c33f62399 100644
--- a/packages/client/src/pages/admin/file-dialog.vue
+++ b/packages/client/src/pages/admin/file-dialog.vue
@@ -40,7 +40,6 @@ import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
-import Progress from '@/scripts/loading';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 
@@ -74,11 +73,9 @@ export default defineComponent({
 
 	methods: {
 		async fetch() {
-			Progress.start();
 			this.file = await os.api('drive/files/show', { fileId: this.fileId });
 			this.info = await os.api('admin/drive/show-file', { fileId: this.fileId });
 			this.isSensitive = this.file.isSensitive;
-			Progress.done();
 		},
 
 		showUser() {
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 2738208c9d..c38f285725 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -7,8 +7,6 @@
 			src="antenna"
 			:antenna="antennaId"
 			:sound="true"
-			@before="before()"
-			@after="after()"
 			@queue="queueUpdated"
 		/>
 	</div>
@@ -17,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -76,14 +73,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 67b839bc3d..58c644be62 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -1,28 +1,26 @@
 <template>
-<div>
-	<div class="_section">
-		<div class="_content">
-			<MkInput v-model="name">
-				<template #label>{{ $ts.name }}</template>
-			</MkInput>
+<MkSpacer :content-max="700">
+	<div class="_formRoot">
+		<MkInput v-model="name" class="_formBlock">
+			<template #label>{{ $ts.name }}</template>
+		</MkInput>
 
-			<MkTextarea v-model="description">
-				<template #label>{{ $ts.description }}</template>
-			</MkTextarea>
+		<MkTextarea v-model="description" class="_formBlock">
+			<template #label>{{ $ts.description }}</template>
+		</MkTextarea>
 
-			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
-				<div v-else-if="bannerUrl">
-					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
-				</div>
+		<div class="banner">
+			<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
+			<div v-else-if="bannerUrl">
+				<img :src="bannerUrl" style="width: 100%;"/>
+				<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
 			</div>
 		</div>
-		<div class="_footer">
+		<div class="_formBlock">
 			<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
 		</div>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -51,9 +49,11 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: computed(() => this.channelId ? {
 				title: this.$ts._channel.edit,
 				icon: 'fas fa-satellite-dish',
+				bg: 'var(--bg)',
 			} : {
 				title: this.$ts._channel.create,
 				icon: 'fas fa-satellite-dish',
+				bg: 'var(--bg)',
 			}),
 			channel: null,
 			name: null,
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index a328eacb07..67ab2d8981 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -1,29 +1,31 @@
 <template>
-<div v-if="channel" class="_section">
-	<div class="wpgynlbz _content _panel _gap" :class="{ hide: !showBanner }">
-		<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
-		<button class="_button toggle" @click="() => showBanner = !showBanner">
-			<template v-if="showBanner"><i class="fas fa-angle-up"></i></template>
-			<template v-else><i class="fas fa-angle-down"></i></template>
-		</button>
-		<div v-if="!showBanner" class="hideOverlay">
-		</div>
-		<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
-			<div class="status">
-				<div><i class="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-				<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+<MkSpacer :content-max="700">
+	<div v-if="channel">
+		<div class="wpgynlbz _panel _gap" :class="{ hide: !showBanner }">
+			<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
+			<button class="_button toggle" @click="() => showBanner = !showBanner">
+				<template v-if="showBanner"><i class="fas fa-angle-up"></i></template>
+				<template v-else><i class="fas fa-angle-down"></i></template>
+			</button>
+			<div v-if="!showBanner" class="hideOverlay">
+			</div>
+			<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
+				<div class="status">
+					<div><i class="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+					<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+				</div>
+				<div class="fade"></div>
+			</div>
+			<div v-if="channel.description" class="description">
+				<Mfm :text="channel.description" :is-note="false" :i="$i"/>
 			</div>
-			<div class="fade"></div>
-		</div>
-		<div v-if="channel.description" class="description">
-			<Mfm :text="channel.description" :is-note="false" :i="$i"/>
 		</div>
-	</div>
 
-	<XPostForm v-if="$i" :channel="channel" class="post-form _content _panel _gap" fixed/>
+		<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
 
-	<XTimeline :key="channelId" class="_content _gap" src="channel" :channel="channelId" @before="before" @after="after"/>
-</div>
+		<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -55,6 +57,12 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: computed(() => this.channel ? {
 				title: this.channel.name,
 				icon: 'fas fa-satellite-dish',
+				bg: 'var(--bg)',
+				actions: [...(this.$i && this.$i.id === this.channel.userId ? [{
+					icon: 'fas fa-cog',
+					text: this.$ts.edit,
+					handler: this.edit,
+				}] : [])],
 			} : null),
 			channel: null,
 			showBanner: true,
@@ -79,8 +87,10 @@ export default defineComponent({
 		}
 	},
 
-	created() {
-
+	methods: {
+		edit() {
+			this.$router.push(`/channels/${this.channel.id}/edit`);
+		}
 	},
 });
 </script>
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index a08c273279..48877ab3ec 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,58 +1,63 @@
 <template>
-<div>
-	<div v-if="$i" class="_section" style="padding: 0;">
-		<MkTab v-model="tab" class="_content">
-			<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._channel.featured }}</option>
-			<option value="following"><i class="fas fa-heart"></i> {{ $ts._channel.following }}</option>
-			<option value="owned"><i class="fas fa-edit"></i> {{ $ts._channel.owned }}</option>
-		</MkTab>
+<MkSpacer :content-max="700">
+	<div v-if="tab === 'featured'" class="_content grwlizim featured">
+		<MkPagination v-slot="{items}" :pagination="featuredPagination">
+			<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+		</MkPagination>
 	</div>
-
-	<div class="_section">
-		<div v-if="tab === 'featured'" class="_content grwlizim featured">
-			<MkPagination v-slot="{items}" :pagination="featuredPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-			</MkPagination>
-		</div>
-
-		<div v-if="tab === 'following'" class="_content grwlizim following">
-			<MkPagination v-slot="{items}" :pagination="followingPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-			</MkPagination>
-		</div>
-
-		<div v-if="tab === 'owned'" class="_content grwlizim owned">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-			<MkPagination v-slot="{items}" :pagination="ownedPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-			</MkPagination>
-		</div>
+	<div v-else-if="tab === 'following'" class="_content grwlizim following">
+		<MkPagination v-slot="{items}" :pagination="followingPagination">
+			<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+		</MkPagination>
 	</div>
-</div>
+	<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
+		<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+		<MkPagination v-slot="{items}" :pagination="ownedPagination">
+			<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+		</MkPagination>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import MkChannelPreview from '@/components/channel-preview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkTab from '@/components/tab.vue';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		MkChannelPreview, MkPagination, MkButton, MkTab
+		MkChannelPreview, MkPagination, MkButton,
 	},
 	data() {
 		return {
-			[symbols.PAGE_INFO]: {
+			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.channel,
 				icon: 'fas fa-satellite-dish',
-				action: {
+				bg: 'var(--bg)',
+				actions: [{
 					icon: 'fas fa-plus',
-					handler: this.create
-				}
-			},
+					text: this.$ts.create,
+					handler: this.create,
+				}],
+				tabs: [{
+					active: this.tab === 'featured',
+					title: this.$ts._channel.featured,
+					icon: 'fas fa-fire-alt',
+					onClick: () => { this.tab = 'featured'; },
+				}, {
+					active: this.tab === 'following',
+					title: this.$ts._channel.following,
+					icon: 'fas fa-heart',
+					onClick: () => { this.tab = 'following'; },
+				}, {
+					active: this.tab === 'owned',
+					title: this.$ts._channel.owned,
+					icon: 'fas fa-edit',
+					onClick: () => { this.tab = 'owned'; },
+				},]
+			})),
 			tab: 'featured',
 			featuredPagination: {
 				endpoint: 'channels/featured',
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 980d59835f..faab864744 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="jmelgwjh">
 	<div class="body">
-		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -33,16 +32,6 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
 
diff --git a/packages/client/src/pages/featured.vue b/packages/client/src/pages/featured.vue
index f5edf25594..0844c0952f 100644
--- a/packages/client/src/pages/featured.vue
+++ b/packages/client/src/pages/featured.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -29,15 +28,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
index cd9c6a8fdf..691d3bd9aa 100644
--- a/packages/client/src/pages/mentions.vue
+++ b/packages/client/src/pages/mentions.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -28,15 +27,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
index 9fde0bc7d5..9085af9489 100644
--- a/packages/client/src/pages/messages.vue
+++ b/packages/client/src/pages/messages.vue
@@ -1,12 +1,11 @@
 <template>
 <MkSpacer :content-max="800">
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<XNotes :pagination="pagination"/>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -31,15 +30,5 @@ export default defineComponent({
 			},
 		};
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 89c8659b4f..c307f037a6 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -73,7 +72,6 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('users/groups/show', {
 				groupId: this.groupId
 			}).then(group => {
@@ -82,7 +80,6 @@ export default defineComponent({
 					userIds: this.group.userIds
 				}).then(users => {
 					this.users = users;
-					Progress.done();
 				});
 			});
 		},
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index 0bfa20514b..a25522f933 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -36,7 +36,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -68,7 +67,6 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('users/lists/show', {
 				listId: this.$route.params.list
 			}).then(list => {
@@ -77,7 +75,6 @@ export default defineComponent({
 					userIds: this.list.userIds
 				}).then(users => {
 					this.users = users;
-					Progress.done();
 				});
 			});
 		},
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index cf8e934b59..695c54a535 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,14 +1,13 @@
 <template>
 <MkSpacer :content-max="800">
 	<div class="clupoqwt">
-		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'" @before="before" @after="after"/>
+		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
 	</div>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -53,14 +52,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		setFilter(ev) {
 			const typeItems = notificationTypes.map(t => ({
 				text: this.$t(`_notification._types.${t}`),
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index c7da3fe1c1..85d19bb255 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,14 +1,13 @@
 <template>
 <div class="_section">
 	<div class="_content">
-		<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+		<XNotes ref="notes" :pagination="pagination"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -39,15 +38,5 @@ export default defineComponent({
 			(this.$refs.notes as any).reload();
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 57a4b25574..734bc78442 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -43,6 +43,7 @@
 		<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">{{ $ts.useOsNativeEmojis }}
 			<div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
 		</FormSwitch>
+		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ $ts.disableDrawer }}</FormSwitch>
 
 		<FormRadios v-model="fontSize" class="_formBlock">
 			<template #label>{{ $ts.fontSize }}</template>
@@ -76,13 +77,6 @@
 		<FormSwitch v-model="defaultSideView">{{ $ts.openInSideView }}</FormSwitch>
 	</FormGroup>
 
-	<FormSelect v-model="chatOpenBehavior" class="_formBlock">
-		<template #label>{{ $ts.chatOpenBehavior }}</template>
-		<option value="page">{{ $ts.showInPage }}</option>
-		<option value="window">{{ $ts.openInWindow }}</option>
-		<option value="popout">{{ $ts.popout }}</option>
-	</FormSelect>
-
 	<FormLink to="/settings/deck" class="_formBlock">{{ $ts.deck }}</FormLink>
 
 	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="fas fa-code"></i></template>{{ $ts.customCss }}</FormLink>
@@ -140,6 +134,7 @@ export default defineComponent({
 		showGapBetweenNotesInTimeline: defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'),
 		disableAnimatedMfm: defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v),
 		useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),
+		disableDrawer: defaultStore.makeGetterSetter('disableDrawer'),
 		disableShowingAnimatedImages: defaultStore.makeGetterSetter('disableShowingAnimatedImages'),
 		loadRawImages: defaultStore.makeGetterSetter('loadRawImages'),
 		imageNewTab: defaultStore.makeGetterSetter('imageNewTab'),
@@ -147,7 +142,6 @@ export default defineComponent({
 		disablePagesScript: defaultStore.makeGetterSetter('disablePagesScript'),
 		showFixedPostForm: defaultStore.makeGetterSetter('showFixedPostForm'),
 		defaultSideView: defaultStore.makeGetterSetter('defaultSideView'),
-		chatOpenBehavior: ColdDeviceStorage.makeGetterSetter('chatOpenBehavior'),
 		instanceTicker: defaultStore.makeGetterSetter('instanceTicker'),
 		enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
 		useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 357b2ab830..6c88b65699 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<div v-panel class="rfqxtzch _formBlock">
+	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
 		<div class="toggle">
 			<div class="toggleWrapper">
 				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index 3bbc9938dd..89375e05d2 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -31,12 +31,15 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		os.apiWithDialog('signup-pending', {
+	async mounted() {
+		await os.alert({
+			type: 'info',
+			text: this.$t('clickToFinishEmailVerification', { ok: this.$ts.gotIt }),
+		});
+		const res = await os.apiWithDialog('signup-pending', {
 			code: this.code,
-		}).then(res => {
-			login(res.i, '/');
 		});
+		login(res.i, '/');
 	},
 
 	methods: {
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index f4709659e3..a0c8367849 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,12 +1,11 @@
 <template>
 <div class="_section">
-	<XNotes ref="notes" class="_content" :pagination="pagination" @before="before" @after="after"/>
+	<XNotes ref="notes" class="_content" :pagination="pagination"/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XNotes from '@/components/notes.vue';
 import * as symbols from '@/symbols';
 
@@ -43,15 +42,5 @@ export default defineComponent({
 			(this.$refs.notes as any).reload();
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 494932c602..216b3c34ea 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -10,8 +10,6 @@
 				class="tl"
 				:src="src"
 				:sound="true"
-				@before="before()"
-				@after="after()"
 				@queue="queueUpdated"
 			/>
 		</div>
@@ -21,7 +19,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
 import { scroll } from '@/scripts/scroll';
@@ -118,14 +115,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index c2970c8d06..4476567cfb 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -7,8 +7,6 @@
 			src="list"
 			:list="listId"
 			:sound="true"
-			@before="before()"
-			@after="after()"
 			@queue="queueUpdated"
 		/>
 	</div>
@@ -17,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
@@ -76,14 +73,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		},
-
 		queueUpdated(q) {
 			this.queue = q;
 		},
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 5a529ba8cf..0b96368587 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -205,7 +205,6 @@ import MkFolder from '@/components/ui/folder.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkTab from '@/components/tab.vue';
 import MkInfo from '@/components/ui/info.vue';
-import Progress from '@/scripts/loading';
 import * as Acct from 'misskey-js/built/acct';
 import { getScrollPosition } from '@/scripts/scroll';
 import { getUserMenu } from '@/scripts/get-user-menu';
@@ -328,13 +327,10 @@ export default defineComponent({
 		fetch() {
 			if (this.acct == null) return;
 			this.user = null;
-			Progress.start();
 			os.api('users/show', Acct.parse(this.acct)).then(user => {
 				this.user = user;
 			}).catch(e => {
 				this.error = e;
-			}).finally(() => {
-				Progress.done();
 			});
 		},
 
diff --git a/packages/client/src/scripts/loading.ts b/packages/client/src/scripts/loading.ts
deleted file mode 100644
index 4b0a560e34..0000000000
--- a/packages/client/src/scripts/loading.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-	start: () => {
-		// TODO
-	},
-	done: () => {
-		// TODO
-	},
-	set: val => {
-		// TODO
-	}
-};
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index 0df4baca7b..bc8f27a038 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -1,4 +1,4 @@
-import { Ref, ref, watch } from 'vue';
+import { Ref, ref, watch, onUnmounted } from 'vue';
 
 export function useTooltip(
 	elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
@@ -18,6 +18,9 @@ export function useTooltip(
 	const open = () => {
 		close();
 		if (!isHovering) return;
+		if (elRef.value == null) return;
+		const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
+		if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
 
 		const showing = ref(true);
 		onShow(showing);
@@ -69,9 +72,14 @@ export function useTooltip(
 			el.addEventListener('mouseleave', onMouseleave, { passive: true });
 			el.addEventListener('touchstart', onTouchstart, { passive: true });
 			el.addEventListener('touchend', onTouchend, { passive: true });
+			el.addEventListener('click', close, { passive: true });
 		}
 	}, {
 		immediate: true,
 		flush: 'post',
 	});
+
+	onUnmounted(() => {
+		close();
+	});
 }
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 2290a21778..dc9c3b7b9e 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -138,6 +138,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false
 	},
+	disableDrawer: {
+		where: 'device',
+		default: false
+	},
 	useBlurEffectForModal: {
 		where: 'device',
 		default: true
@@ -241,7 +245,6 @@ export class ColdDeviceStorage {
 		lightTheme: require('@/themes/l-light.json5') as Theme,
 		darkTheme: require('@/themes/d-dark.json5') as Theme,
 		syncDeviceDarkMode: true,
-		chatOpenBehavior: 'page' as 'page' | 'window' | 'popout',
 		plugins: [] as Plugin[],
 		mediaVolume: 0.5,
 		sound_masterVolume: 0.3,
diff --git a/packages/client/src/sw/compose-notification.ts b/packages/client/src/sw/compose-notification.ts
index 0aed9610ea..10bd27c9ec 100644
--- a/packages/client/src/sw/compose-notification.ts
+++ b/packages/client/src/sw/compose-notification.ts
@@ -3,7 +3,6 @@
  */
 declare var self: ServiceWorkerGlobalScope;
 
-import { getNoteSummary } from '@/scripts/get-note-summary';
 import * as misskey from 'misskey-js';
 
 function getUserName(user: misskey.entities.User): string {
@@ -26,37 +25,37 @@ export default async function(type, data, i18n): Promise<[string, NotificationOp
 			switch (data.type) {
 				case 'mention':
 					return [i18n.t('_notification.youGotMention', { name: getUserName(data.user) }), {
-						body: getNoteSummary(data.note, i18n.locale),
+						body: data.note.text,
 						icon: data.user.avatarUrl
 					}];
 
 				case 'reply':
 					return [i18n.t('_notification.youGotReply', { name: getUserName(data.user) }), {
-						body: getNoteSummary(data.note, i18n.locale),
+						body: data.note.text,
 						icon: data.user.avatarUrl
 					}];
 
 				case 'renote':
 					return [i18n.t('_notification.youRenoted', { name: getUserName(data.user) }), {
-						body: getNoteSummary(data.note, i18n.locale),
+						body: data.note.text,
 						icon: data.user.avatarUrl
 					}];
 
 				case 'quote':
 					return [i18n.t('_notification.youGotQuote', { name: getUserName(data.user) }), {
-						body: getNoteSummary(data.note, i18n.locale),
+						body: data.note.text,
 						icon: data.user.avatarUrl
 					}];
 
 				case 'reaction':
 					return [`${data.reaction} ${getUserName(data.user)}`, {
-						body: getNoteSummary(data.note, i18n.locale),
+						body: data.note.text,
 						icon: data.user.avatarUrl
 					}];
 
 				case 'pollVote':
 					return [i18n.t('_notification.youGotPoll', { name: getUserName(data.user) }), {
-						body: getNoteSummary(data.note, i18n.locale),
+						body: data.note.text,
 						icon: data.user.avatarUrl
 					}];
 
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index e363c3abd9..fa712ba45d 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -170,6 +170,8 @@ export default defineComponent({
 			}
 
 			&:hover, &.active {
+				color: var(--accent);
+
 				&:before {
 					content: "";
 					display: block;
@@ -283,8 +285,10 @@ export default defineComponent({
 				}
 
 				&:before {
-					width: 100%;
-					border-radius: 0;
+					width: min-content;
+					height: 100%;
+					aspect-ratio: 1/1;
+					border-radius: 8px;
 				}
 
 				&.post {
@@ -296,8 +300,9 @@ export default defineComponent({
 				}
 
 				&.post:before {
-					width: calc(100% - 32px);
-					height: calc(100% - 32px);
+					width: calc(100% - 28px);
+					height: min-content;
+					aspect-ratio: 1/1;
 					border-radius: 100%;
 				}
 			}
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index a11b2e82ed..6ef733dfd0 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
@@ -41,15 +40,5 @@ export default defineComponent({
 			},
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 7dd06989cb..4b8dc0c4ee 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -8,7 +8,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
@@ -38,15 +37,5 @@ export default defineComponent({
 			},
 		}
 	},
-
-	methods: {
-		before() {
-			Progress.start();
-		},
-
-		after() {
-			Progress.done();
-		}
-	}
 });
 </script>
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index 545072e87b..c8b52d7afc 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -5,7 +5,8 @@
 			<span class="year">{{ $t('yearX', { year }) }}</span>
 			<span class="month">{{ $t('monthX', { month }) }}</span>
 		</p>
-		<p class="day">{{ $t('dayX', { day }) }}</p>
+		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
+		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
 		<p class="week-day">{{ weekDay }}</p>
 	</div>
 	<div class="info">
@@ -34,7 +35,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import define from './define';
-import * as os from '@/os';
 
 const widget = define({
 	name: 'calendar',
@@ -127,12 +127,12 @@ export default defineComponent({
 			}
 		}
 
-		> p {
+		> .month-and-year, > .week-day {
 			margin: 0;
 			line-height: 18px;
 			font-size: 0.9em;
 
-			> span {
+			> .year, > .month {
 				margin: 0 4px;
 			}
 		}