Merge branch 'develop'

20 files changed, 108 insertions, 217 deletions

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();
 			});
 		},