Merge branch 'develop'

29 files changed, 374 insertions, 147 deletions

diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 7a4cc5ef98..fa0b6d669c 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -93,13 +93,13 @@ export default defineComponent({
 		});
 
 		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
-			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
+			class: 'sqadhkmv' + (this.noGap ? ' noGap' : ''),
 			name: 'list',
 			tag: 'div',
 			'data-direction': this.direction,
 			'data-reversed': this.reversed ? 'true' : 'false',
 		} : {
-			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
+			class: 'sqadhkmv' + (this.noGap ? ' noGap' : ''),
 		}, {
 			default: renderChildren
 		});
diff --git a/src/client/components/global/loading.vue b/src/client/components/global/loading.vue
index 9b810f0a16..7bde53c12e 100644
--- a/src/client/components/global/loading.vue
+++ b/src/client/components/global/loading.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="yxspomdl" :class="{ inline, colored }">
+<div class="yxspomdl" :class="{ inline, colored, mini }">
 	<div class="ring"></div>
 </div>
 </template>
@@ -18,7 +18,12 @@ export default defineComponent({
 			type: Boolean,
 			required: false,
 			default: true
-		}
+		},
+		mini: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	}
 });
 </script>
@@ -38,6 +43,8 @@ export default defineComponent({
 	text-align: center;
 	cursor: wait;
 
+	--size: 48px;
+
 	&.colored {
 		color: var(--accent);
 	}
@@ -45,19 +52,12 @@ export default defineComponent({
 	&.inline {
 		display: inline;
 		padding: 0;
+		--size: 32px;
+	}
 
-		> .ring:after {
-			width: 32px;
-			height: 32px;
-		}
-
-		> .ring {
-			&:before,
-			&:after {
-				width: 32px;
-				height: 32px;
-			}
-		}
+	&.mini {
+		padding: 16px;
+		--size: 32px;
 	}
 
 	> .ring {
@@ -70,8 +70,8 @@ export default defineComponent({
 			content: " ";
 			display: block;
 			box-sizing: border-box;
-			width: 48px;
-			height: 48px;
+			width: var(--size);
+			height: var(--size);
 			border-radius: 50%;
 			border: solid 4px;
 		}
diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index d601052927..e7f116d1fd 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	class="note _block"
+	class="lxwezrsl _block"
 	v-if="!muted"
 	v-show="!isDeleted"
 	:tabindex="!isDeleted ? '-1' : null"
@@ -67,6 +67,13 @@
 						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
+						<div class="translation" v-if="translating || translation">
+							<MkLoading v-if="translating" mini/>
+							<div class="translated" v-else>
+								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}:</b>
+								{{ translation.text }}
+							</div>
+						</div>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">
 						<XMediaList :media-list="appearNote.files"/>
@@ -79,8 +86,8 @@
 			</div>
 			<footer class="footer">
 				<div class="info">
-					<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
-					<MkTime class="created-at" :time="note.createdAt" mode="detail"/>
+					<span class="mobile" v-if="appearNote.viaMobile"><i class="fas fa-mobile-alt"></i></span>
+					<MkTime class="created-at" :time="appearNote.createdAt" mode="detail"/>
 				</div>
 				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
@@ -178,6 +185,8 @@ export default defineComponent({
 			showContent: false,
 			isDeleted: false,
 			muted: false,
+			translation: null,
+			translating: false,
 		};
 	},
 
@@ -619,6 +628,11 @@ export default defineComponent({
 					text: this.$ts.share,
 					action: this.share
 				},
+				this.$instance.translatorAvailable ? {
+					icon: 'fas fa-language',
+					text: this.$ts.translate,
+					action: this.translate
+				} : undefined,
 				null,
 				statePromise.then(state => state.isFavorited ? {
 					icon: 'fas fa-star',
@@ -852,6 +866,17 @@ export default defineComponent({
 			});
 		},
 
+		async translate() {
+			if (this.translation != null) return;
+			this.translating = true;
+			const res = await os.api('notes/translate', {
+				noteId: this.appearNote.id,
+				targetLang: localStorage.getItem('lang') || navigator.language,
+			});
+			this.translating = false;
+			this.translation = res;
+		},
+
 		focus() {
 			this.$el.focus();
 		},
@@ -874,7 +899,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.note {
+.lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;
@@ -1050,6 +1075,13 @@ export default defineComponent({
 							font-style: oblique;
 							color: var(--renote);
 						}
+
+						> .translation {
+							border: solid 0.5px var(--divider);
+							border-radius: var(--radius);
+							padding: 12px;
+							margin-top: 8px;
+						}
 					}
 
 					> .url-preview {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 873b96030a..38b529dd91 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -51,6 +51,13 @@
 						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
+						<div class="translation" v-if="translating || translation">
+							<MkLoading v-if="translating" mini/>
+							<div class="translated" v-else>
+								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}:</b>
+								{{ translation.text }}
+							</div>
+						</div>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">
 						<XMediaList :media-list="appearNote.files"/>
@@ -164,6 +171,8 @@ export default defineComponent({
 			collapsed: false,
 			isDeleted: false,
 			muted: false,
+			translation: null,
+			translating: false,
 		};
 	},
 
@@ -594,6 +603,11 @@ export default defineComponent({
 					text: this.$ts.share,
 					action: this.share
 				},
+				this.$instance.translatorAvailable ? {
+					icon: 'fas fa-language',
+					text: this.$ts.translate,
+					action: this.translate
+				} : undefined,
 				null,
 				statePromise.then(state => state.isFavorited ? {
 					icon: 'fas fa-star',
@@ -827,6 +841,17 @@ export default defineComponent({
 			});
 		},
 
+		async translate() {
+			if (this.translation != null) return;
+			this.translating = true;
+			const res = await os.api('notes/translate', {
+				noteId: this.appearNote.id,
+				targetLang: localStorage.getItem('lang') || navigator.language,
+			});
+			this.translating = false;
+			this.translation = res;
+		},
+
 		focus() {
 			this.$el.focus();
 		},
@@ -1053,6 +1078,13 @@ export default defineComponent({
 							font-style: oblique;
 							color: var(--renote);
 						}
+
+						> .translation {
+							border: solid 0.5px var(--divider);
+							border-radius: var(--radius);
+							padding: 12px;
+							margin-top: 8px;
+						}
 					}
 
 					> .url-preview {
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index e90102921a..ba3b7d2b39 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -9,7 +9,7 @@
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
-	<div v-else>
+	<div v-else class="giivymft" :class="{ noGap }">
 		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
 			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
@@ -17,8 +17,8 @@
 			</MkButton>
 		</div>
 
-		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true">
-			<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
+			<XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 		</XList>
 
 		<div v-show="more && !reversed" style="margin-top: var(--margin);">
@@ -108,4 +108,21 @@ export default defineComponent({
 .fade-leave-to {
 	opacity: 0;
 }
+
+.giivymft {
+	&.noGap {
+		> .notes {
+			background: var(--panel);
+		}
+	}
+
+	&:not(.noGap) {
+		> .notes {
+			.qtqtichx {
+				background: var(--panel);
+				border-radius: var(--radius);
+			}
+		}
+	}
+}
 </style>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index f2c625a556..221dc74313 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -17,7 +17,7 @@
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
@@ -36,7 +36,7 @@
 		</div>
 		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
-		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
+		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" data-cy-post-form-text/>
 		<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index f1e5d6afe5..0094038fb6 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -3,11 +3,11 @@
 	<div class="auth _section">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
-			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
+			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
+			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
 				<template #prefix><i class="fas fa-lock"></i></template>
 				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 0cdeb633d8..b0b0c2ad4d 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -5,7 +5,7 @@
 			<template #label>{{ $ts.invitationCode }}</template>
 			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
-		<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername">
+		<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
 			<template #label>{{ $ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
@@ -19,7 +19,7 @@
 				<span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword">
+		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
 			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -28,7 +28,7 @@
 				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype">
+		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
 			<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -46,7 +46,7 @@
 		</label>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
-		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary>{{ $ts.start }}</MkButton>
+		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton>
 	</template>
 </form>
 </template>
diff --git a/src/client/components/ui/popup.vue b/src/client/components/ui/popup.vue
index 9e360411c0..8497eedecb 100644
--- a/src/client/components/ui/popup.vue
+++ b/src/client/components/ui/popup.vue
@@ -1,5 +1,5 @@
 <template>
-<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
+<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
 	<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<slot :point="point"></slot>
 	</div>
diff --git a/src/client/components/updated.vue b/src/client/components/updated.vue
new file mode 100644
index 0000000000..5033d866fb
--- /dev/null
+++ b/src/client/components/updated.vue
@@ -0,0 +1,58 @@
+<template>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="ewlycnyt">
+		<div class="title">{{ $ts.misskeyUpdated }}</div>
+		<div class="version">✨{{ version }}🚀</div>
+		<MkButton full @click="whatIsNew">{{ $ts.whatIsNew }}</MkButton>
+		<MkButton primary full @click="$refs.modal.close()">{{ $ts.gotIt }}</MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkModal from '@client/components/ui/modal.vue';
+import MkButton from '@client/components/ui/button.vue';
+import { version } from '@client/config';
+
+export default defineComponent({
+	components: {
+		MkModal,
+		MkButton,
+	},
+
+	data() {
+		return {
+			version: version,
+		};
+	},
+
+	methods: {
+		whatIsNew() {
+			this.$refs.modal.close();
+			this.$router.push('/docs/general/changelog');
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ewlycnyt {
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> .title {
+		font-weight: bold;
+	}
+
+	> .version {
+		margin: 1em 0;
+	}
+}
+</style>
diff --git a/src/client/init.ts b/src/client/init.ts
index 95aa18862c..1580ef3e08 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -7,6 +7,7 @@ import '@client/style.scss';
 import * as Sentry from '@sentry/browser';
 import { Integrations } from '@sentry/tracing';
 import { computed, createApp, watch, markRaw } from 'vue';
+import compareVersions from 'compare-versions';
 
 import widgets from '@client/widgets';
 import directives from '@client/directives';
@@ -206,8 +207,12 @@ if (lastVersion !== version) {
 	// テーマリビルドするため
 	localStorage.removeItem('theme');
 
-	// TODO: バージョンが新しくなった時だけダイアログ出す
-	//popup();
+	try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
+		if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
+			popup(import('@client/components/updated.vue'), {}, {}, 'closed');
+		}
+	} catch (e) {
+	}
 }
 
 // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
diff --git a/src/client/instance.ts b/src/client/instance.ts
index 04d3353208..6e912aa2e5 100644
--- a/src/client/instance.ts
+++ b/src/client/instance.ts
@@ -25,6 +25,7 @@ export async function fetchInstance() {
 }
 
 export const emojiCategories = computed(() => {
+	if (instance.emojis == null) return [];
 	const categories = new Set();
 	for (const emoji of instance.emojis) {
 		categories.add(emoji.category);
@@ -33,6 +34,7 @@ export const emojiCategories = computed(() => {
 });
 
 export const emojiTags = computed(() => {
+	if (instance.emojis == null) return [];
 	const tags = new Set();
 	for (const emoji of instance.emojis) {
 		for (const tag of emoji.aliases) {
diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue
index adae17658c..c6d459fd6d 100644
--- a/src/client/pages/api-console.vue
+++ b/src/client/pages/api-console.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_root">
 	<div class="_block" style="padding: 24px;">
-		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
+		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class="_inputNoTopMargin">
 			<template #label>Endpoint</template>
 		</MkInput>
 		<MkTextarea v-model="body" code>
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 6dc5eb1ae8..be4d4255db 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -1,50 +1,54 @@
 <template>
 <div class="vtaihdtm">
-	<div class="search">
-		<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
-			<template #prefix><i class="fas fa-search"></i></template>
-		</MkInput>
-	</div>
-	<MkFolder>
-		<template #header>{{ $ts._docs.generalTopics }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.features }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
+	<div class="body">
+		<div class="search">
+			<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+				<template #prefix><i class="fas fa-search"></i></template>
+			</MkInput>
 		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.advancedTopics }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
+		<div class="list">
+			<MkFolder>
+				<template #header>{{ $ts._docs.generalTopics }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.features }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.advancedTopics }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
+			<MkFolder>
+				<template #header>{{ $ts._docs.admin }}</template>
+				<div class="docs">
+					<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+						<div class="title">{{ doc.title }}</div>
+						<div class="summary">{{ doc.summary }}</div>
+						<div class="read">{{ $ts._docs.continueReading }}</div>
+					</MkA>
+				</div>
+			</MkFolder>
 		</div>
-	</MkFolder>
-	<MkFolder>
-		<template #header>{{ $ts._docs.admin }}</template>
-		<div class="docs">
-			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
-				<div class="title">{{ doc.title }}</div>
-				<div class="summary">{{ doc.summary }}</div>
-				<div class="read">{{ $ts._docs.continueReading }}</div>
-			</MkA>
-		</div>
-	</MkFolder>
+	</div>
 </div>
 </template>
 
@@ -97,41 +101,50 @@ export default defineComponent({
 .vtaihdtm {
 	background: var(--panel);
 
-	> .search {
-		padding: 16px;
-	}
-
-	.docs {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-		grid-gap: 12px;
-		margin: 0 16px 16px 16px;
+	> .body {
+		max-width: 900px;
+		margin: 0 auto;
 
-		> .doc {
-			display: inline-block;
+		> .search {
 			padding: 16px;
-			border: solid 1px var(--divider);
-			border-radius: 6px;
+		}
 
-			&:hover {
-				border: solid 1px var(--accent);
-				text-decoration: none;
-			}
+		> .list {
+			padding: 0 16px;
 
-			> .title {
-				font-weight: bold;
-			}
+			.docs {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+				grid-gap: 12px;
+				margin: 0 0 16px 0;
 
-			> .summary {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				font-size: 0.9em;
-			}
+				> .doc {
+					display: inline-block;
+					padding: 16px;
+					border: solid 1px var(--divider);
+					border-radius: 6px;
+
+					&:hover {
+						border: solid 1px var(--accent);
+						text-decoration: none;
+					}
+
+					> .title {
+						font-weight: bold;
+					}
+
+					> .summary {
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 0.9em;
+					}
 
-			> .read {
-				color: var(--link);
-				font-size: 0.9em;
+					> .read {
+						color: var(--link);
+						font-size: 0.9em;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 408ab222b5..a2d61b98d9 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -1,6 +1,8 @@
 <template>
-<div class="_section">
-	<XNotes class="_content" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+<div class="jmelgwjh">
+	<div class="body">
+		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+	</div>
 </div>
 </template>
 
@@ -42,3 +44,16 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.jmelgwjh {
+	background: var(--bg);
+
+	> .body {
+		box-sizing: border-box;
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 16px;
+	}
+}
+</style>
diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue
index be6bf6cbf2..8a03a11de7 100644
--- a/src/client/pages/instance/file-dialog.vue
+++ b/src/client/pages/instance/file-dialog.vue
@@ -93,10 +93,8 @@ export default defineComponent({
 			});
 			if (canceled) return;
 
-			os.api('drive/files/delete', {
+			os.apiWithDialog('drive/files/delete', {
 				fileId: this.file.id
-			}).then(() => {
-				this.$refs.files.removeItem(x => x.id === this.file.id);
 			});
 		},
 
diff --git a/src/client/pages/instance/other-settings.vue b/src/client/pages/instance/other-settings.vue
index b3954149a8..8002528931 100644
--- a/src/client/pages/instance/other-settings.vue
+++ b/src/client/pages/instance/other-settings.vue
@@ -7,7 +7,12 @@
 				Summaly Proxy URL
 			</FormInput>
 		</FormGroup>
-
+		<FormGroup>
+			<FormInput v-model:value="deeplAuthKey">
+				<template #prefix><i class="fas fa-key"></i></template>
+				DeepL Auth Key
+			</FormInput>
+		</FormGroup>
 		<FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	</FormSuspense>
 </FormBase>
@@ -44,6 +49,7 @@ export default defineComponent({
 				icon: 'fas fa-cogs'
 			},
 			summalyProxy: '',
+			deeplAuthKey: '',
 		}
 	},
 
@@ -55,10 +61,12 @@ export default defineComponent({
 		async init() {
 			const meta = await os.api('meta', { detail: true });
 			this.summalyProxy = meta.summalyProxy;
+			this.deeplAuthKey = meta.deeplAuthKey;
 		},
 		save() {
 			os.apiWithDialog('admin/update-meta', {
 				summalyProxy: this.summalyProxy,
+				deeplAuthKey: this.deeplAuthKey,
 			}).then(() => {
 				fetchInstance();
 			});
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index ce4af4eb4e..7725ca14b4 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -8,9 +8,9 @@
 
 			<div class="main _gap">
 				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
-				<div class="_content _gap">
-					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
-					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+				<div class="note _gap">
+					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
+					<XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
 				</div>
 				<div class="_content clips _gap" v-if="clips && clips.length > 0">
 					<div class="title">{{ $ts.clip }}</div>
@@ -108,6 +108,7 @@ export default defineComponent({
 			os.api('notes/show', {
 				noteId: this.noteId
 			}).then(note => {
+				this.note = note;
 				Promise.all([
 					os.api('notes/clips', {
 						noteId: note.id,
@@ -126,7 +127,6 @@ export default defineComponent({
 					this.clips = clips;
 					this.hasPrev = prev.length !== 0;
 					this.hasNext = next.length !== 0;
-					this.note = note;
 				});
 			}).catch(e => {
 				this.error = e;
@@ -147,6 +147,8 @@ export default defineComponent({
 }
 
 .fcuexfpr {
+	background: var(--bg);
+
 	> .note {
 		> .main {
 			> .load {
@@ -163,6 +165,13 @@ export default defineComponent({
 				}
 			}
 
+			> .note {
+				> .note {
+					border-radius: var(--radius);
+					background: var(--panel);
+				}
+			}
+
 			> .clips {
 				> .title {
 					font-weight: bold;
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 38797d746e..6b16b85b78 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="_root">
+<div class="">
 	<XNotifications class="_content" @before="before" @after="after" page/>
 </div>
 </template>
diff --git a/src/client/pages/settings/sounds.vue b/src/client/pages/settings/sounds.vue
index f56ec4cd89..1c51685ce8 100644
--- a/src/client/pages/settings/sounds.vue
+++ b/src/client/pages/settings/sounds.vue
@@ -48,6 +48,7 @@ const soundsTypes = [
 	'syuilo/ryukyu',
 	'syuilo/kick',
 	'syuilo/snare',
+	'syuilo/queue-jammed',
 	'aisha/1',
 	'aisha/2',
 	'aisha/3',
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index a6a0e6987f..119815e2ae 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="cmuxhskf _root" v-hotkey.global="keymap">
+<div class="cmuxhskf" v-hotkey.global="keymap">
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
 	<div class="tabs">
@@ -19,7 +19,7 @@
 		</div>
 	</div>
 	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-	<XTimeline ref="tl"
+	<XTimeline ref="tl" class="tl"
 		:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
 		:src="src"
 		:list="list ? list.id : null"
@@ -211,8 +211,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .cmuxhskf {
-	background: var(--bg);
-
 	> .new {
 		position: sticky;
 		top: calc(var(--stickyTop, 0px) + 16px);
@@ -262,10 +260,9 @@ export default defineComponent({
 						left: 0;
 						right: 0;
 						margin: 0 auto;
-						width: calc(100% - 16px);
-						height: 4px;
+						width: 100%;
+						height: 2px;
 						background: var(--accent);
-						border-radius: 8px 8px 0 0;
 					}
 				}
 
@@ -289,5 +286,9 @@ export default defineComponent({
 			}
 		}
 	}
+
+	> .tl {
+		border-top: solid 0.5px var(--divider);
+	}
 }
 </style>
diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue
index 7d49ddd7d7..82b439ddd3 100644
--- a/src/client/pages/welcome.entrance.a.vue
+++ b/src/client/pages/welcome.entrance.a.vue
@@ -27,8 +27,8 @@
 					<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
 				</div>
 				<div class="action">
-					<MkButton @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
-					<MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
+					<MkButton @click="signup()" inline primary data-cy-signup>{{ $ts.signup }}</MkButton>
+					<MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
 				</div>
 				<div class="status" v-if="onlineUsersCount && stats">
 					<div>
diff --git a/src/client/pages/welcome.setup.vue b/src/client/pages/welcome.setup.vue
index 5ed1ae49c4..de844ece1c 100644
--- a/src/client/pages/welcome.setup.vue
+++ b/src/client/pages/welcome.setup.vue
@@ -3,17 +3,19 @@
 	<h1>Welcome to Misskey!</h1>
 	<div>
 		<p>{{ $ts.intro }}</p>
-		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
+		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required data-cy-admin-username>
 			<template #label>{{ $ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</MkInput>
-		<MkInput v-model="password" type="password">
+		<MkInput v-model="password" type="password" data-cy-admin-password>
 			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 		</MkInput>
 		<footer>
-			<MkButton primary type="submit" :disabled="submitting">{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/></MkButton>
+			<MkButton primary type="submit" :disabled="submitting" data-cy-admin-ok>
+				{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/>
+			</MkButton>
 		</footer>
 	</div>
 </form>
diff --git a/src/client/scripts/sound.ts b/src/client/scripts/sound.ts
index d3422bfff2..c51fa8f215 100644
--- a/src/client/scripts/sound.ts
+++ b/src/client/scripts/sound.ts
@@ -2,6 +2,23 @@ import { ColdDeviceStorage } from '@client/store';
 
 const cache = new Map<string, HTMLAudioElement>();
 
+export function getAudio(file: string, useCache = true): HTMLAudioElement {
+	let audio: HTMLAudioElement;
+	if (useCache && cache.has(file)) {
+		audio = cache.get(file);
+	} else {
+		audio = new Audio(`/static-assets/client/sounds/${file}.mp3`);
+		if (useCache) cache.set(file, audio);
+	}
+	return audio;
+}
+
+export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement {
+	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
+	audio.volume = masterVolume - ((1 - volume) * masterVolume);
+	return audio;
+}
+
 export function play(type: string) {
 	const sound = ColdDeviceStorage.get('sound_' + type as any);
 	if (sound.type == null) return;
@@ -12,13 +29,6 @@ export function playFile(file: string, volume: number) {
 	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
 	if (masterVolume === 0) return;
 
-	let audio: HTMLAudioElement;
-	if (cache.has(file)) {
-		audio = cache.get(file);
-	} else {
-		audio = new Audio(`/static-assets/client/sounds/${file}.mp3`);
-		cache.set(file, audio);
-	}
-	audio.volume = masterVolume - ((1 - volume) * masterVolume);
+	const audio = setVolume(getAudio(file), volume);
 	audio.play();
 }
diff --git a/src/client/style.scss b/src/client/style.scss
index a3e3b6a6a1..a6c027745a 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -330,6 +330,7 @@ hr {
 	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
+// TODO: 廃止
 ._root {
 	box-sizing: border-box;
 	margin: var(--root-margin, 32px) auto;
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index 67bb3abb93..115f70a540 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -2,7 +2,7 @@
 <div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
 	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
 		<div class="buttons left" v-if="backButton">
-			<button class="_button button back" @click.stop="$emit('back')" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
+			<button class="_button button back" @click.stop="$emit('back')" @touchstart="preventDrag" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
 		</div>
 	</transition>
 	<template v-if="info">
@@ -20,10 +20,10 @@
 		</div>
 		<div class="buttons right">
 			<template v-if="info.actions && showActions">
-				<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button>
+				<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
 			</template>
-			<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
-			<button v-if="closeButton" class="_button button" @click.stop="$emit('close')" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
+			<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+			<button v-if="closeButton" class="_button button" @click.stop="$emit('close')" @touchstart="preventDrag" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
 		</div>
 	</template>
 </div>
@@ -122,6 +122,10 @@ export default defineComponent({
 				menu = menu.concat(this.menu);
 			}
 			popupMenu(menu, ev.currentTarget || ev.target);
+		},
+
+		preventDrag(ev) {
+			ev.stopPropagation();
 		}
 	}
 });
diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue
index dd6d4d1516..b500ab582c 100644
--- a/src/client/ui/default.sidebar.vue
+++ b/src/client/ui/default.sidebar.vue
@@ -3,7 +3,7 @@
 	<button class="item _button account" @click="openAccountMenu" v-click-anime>
 		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 	</button>
-	<div class="post" @click="post">
+	<div class="post" @click="post" data-cy-open-post-form>
 		<MkButton class="button" primary full>
 			<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
 		</MkButton>
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index c49ad730f4..d6cace0f41 100644
--- a/src/client/ui/universal.vue
+++ b/src/client/ui/universal.vue
@@ -4,7 +4,7 @@
 
 	<div class="contents" ref="contents" @contextmenu.stop="onContextmenu">
 		<header class="header" ref="header" @click="onHeaderClick">
-			<XHeader :info="pageInfo"/>
+			<XHeader :info="pageInfo" :back-button="true" @back="back()"/>
 		</header>
 		<main ref="main">
 			<div class="content">
@@ -175,6 +175,10 @@ export default defineComponent({
 			window.scroll({ top: 0, behavior: 'smooth' });
 		},
 
+		back() {
+			history.back();
+		},
+
 		onTransition() {
 			if (window._scroll) window._scroll();
 		},
@@ -253,11 +257,16 @@ export default defineComponent({
 		//backdrop-filter: var(--blur, blur(4px));
 	}
 
+	> .sidebar {
+		border-right: solid 0.5px var(--divider);
+	}
+
 	> .contents {
 		width: 100%;
 		min-width: 0;
 		--stickyTop: #{$header-height};
 		padding-top: $header-height;
+		background: var(--panel);
 
 		> .header {
 			position: fixed;
@@ -272,7 +281,7 @@ export default defineComponent({
 			-webkit-backdrop-filter: var(--blur, blur(32px));
 			backdrop-filter: var(--blur, blur(32px));
 			background-color: var(--header);
-			//border-bottom: solid 0.5px var(--divider);
+			border-bottom: solid 0.5px var(--divider);
 			user-select: none;
 		}
 
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index beb80f7faf..327d8ede6d 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -50,6 +50,7 @@ import { defineComponent, markRaw } from 'vue';
 import define from './define';
 import * as os from '@client/os';
 import number from '@client/filters/number';
+import * as sound from '@client/scripts/sound';
 
 const widget = define({
 	name: 'jobQueue',
@@ -58,6 +59,10 @@ const widget = define({
 			type: 'boolean',
 			default: false,
 		},
+		sound: {
+			type: 'boolean',
+			default: false,
+		},
 	})
 });
 
@@ -79,6 +84,7 @@ export default defineComponent({
 				delayed: 0,
 			},
 			prev: {},
+			sound: sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1)
 		};
 	},
 	created() {
@@ -107,6 +113,10 @@ export default defineComponent({
 				this[domain].active = stats[domain].active;
 				this[domain].waiting = stats[domain].waiting;
 				this[domain].delayed = stats[domain].delayed;
+
+				if (this[domain].waiting > 0 && this.props.sound && this.sound.paused) {
+					this.sound.play();
+				}
 			}
 		},