Merge branch 'develop'

42 files changed, 302 insertions, 246 deletions

diff --git a/src/client/app/common/define-widget.ts b/src/client/app/common/define-widget.ts
index 1efdbb1880..632ddf2ed6 100644
--- a/src/client/app/common/define-widget.ts
+++ b/src/client/app/common/define-widget.ts
@@ -45,15 +45,9 @@ export default function <T extends object>(data: {
 			this.$watch('props', () => {
 				this.mergeProps();
 			});
-
-			this.bakeProps();
 		},
 
 		methods: {
-			bakeProps() {
-				this.bakedOldProps = JSON.stringify(this.props);
-			},
-
 			mergeProps() {
 				if (data.props) {
 					const defaultProps = data.props();
@@ -65,17 +59,10 @@ export default function <T extends object>(data: {
 			},
 
 			save() {
-				if (this.bakedOldProps == JSON.stringify(this.props)) return;
-
-				this.bakeProps();
-
 				if (this.platform == 'deck') {
 					this.$store.commit('device/updateDeckColumn', this.column);
 				} else {
-					this.$root.api('i/update_widget', {
-						id: this.id,
-						data: this.props
-					});
+					this.$store.commit('device/updateWidget', this.widget);
 				}
 			}
 		}
diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 5707d1bb41..67bbe8c0ae 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -70,8 +70,8 @@ export default (opts: Opts = {}) => ({
 		},
 
 		reactionsCount(): number {
-			return this.appearNote.reactionCounts
-				? sum(Object.values(this.appearNote.reactionCounts))
+			return this.appearNote.reactions
+				? sum(Object.values(this.appearNote.reactions))
 				: 0;
 		},
 
diff --git a/src/client/app/common/scripts/note-subscriber.ts b/src/client/app/common/scripts/note-subscriber.ts
index c2b4dd6df9..02d810ded9 100644
--- a/src/client/app/common/scripts/note-subscriber.ts
+++ b/src/client/app/common/scripts/note-subscriber.ts
@@ -87,16 +87,16 @@ export default prop => ({
 				case 'reacted': {
 					const reaction = body.reaction;
 
-					if (this.$_ns_target.reactionCounts == null) {
-						Vue.set(this.$_ns_target, 'reactionCounts', {});
+					if (this.$_ns_target.reactions == null) {
+						Vue.set(this.$_ns_target, 'reactions', {});
 					}
 
-					if (this.$_ns_target.reactionCounts[reaction] == null) {
-						Vue.set(this.$_ns_target.reactionCounts, reaction, 0);
+					if (this.$_ns_target.reactions[reaction] == null) {
+						Vue.set(this.$_ns_target.reactions, reaction, 0);
 					}
 
 					// Increment the count
-					this.$_ns_target.reactionCounts[reaction]++;
+					this.$_ns_target.reactions[reaction]++;
 
 					if (body.userId == this.$store.state.i.id) {
 						Vue.set(this.$_ns_target, 'myReaction', reaction);
@@ -107,16 +107,16 @@ export default prop => ({
 				case 'unreacted': {
 					const reaction = body.reaction;
 
-					if (this.$_ns_target.reactionCounts == null) {
+					if (this.$_ns_target.reactions == null) {
 						return;
 					}
 
-					if (this.$_ns_target.reactionCounts[reaction] == null) {
+					if (this.$_ns_target.reactions[reaction] == null) {
 						return;
 					}
 
 					// Decrement the count
-					if (this.$_ns_target.reactionCounts[reaction] > 0) this.$_ns_target.reactionCounts[reaction]--;
+					if (this.$_ns_target.reactions[reaction] > 0) this.$_ns_target.reactions[reaction]--;
 
 					if (body.userId == this.$store.state.i.id) {
 						Vue.set(this.$_ns_target, 'myReaction', null);
@@ -125,9 +125,11 @@ export default prop => ({
 				}
 
 				case 'pollVoted': {
-					if (body.userId == this.$store.state.i.id) return;
 					const choice = body.choice;
-					this.$_ns_target.poll.choices.find(c => c.id === choice).votes++;
+					this.$_ns_target.poll.choices[choice].votes++;
+					if (body.userId == this.$store.state.i.id) {
+						Vue.set(this.$_ns_target.poll.choices[choice], 'isVoted', true);
+					}
 					break;
 				}
 
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index dce594e702..04f3ed9f78 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -55,11 +55,7 @@ export default Vue.extend({
 		},
 		icon(): any {
 			return {
-				backgroundColor: this.lightmode
-					? `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`
-					: this.user.avatarColor && this.user.avatarColor.length == 3
-						? `rgb(${this.user.avatarColor.join(',')})`
-						: null,
+				backgroundColor: this.user.avatarColor,
 				backgroundImage: this.lightmode ? null : `url(${this.url})`,
 				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
 			};
@@ -67,7 +63,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		if (this.user.avatarColor) {
-			this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+			this.$el.style.color = this.user.avatarColor;
 		}
 	},
 	methods: {
diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue
index faa727f3b6..1a3ef37193 100644
--- a/src/client/app/common/views/components/drive-file-thumbnail.vue
+++ b/src/client/app/common/views/components/drive-file-thumbnail.vue
@@ -105,15 +105,11 @@ export default Vue.extend({
 		},
 		isThumbnailAvailable(): boolean {
 			return this.file.thumbnailUrl
-				? this.file.thumbnailUrl.endsWith('?thumbnail')
-					? (this.is === 'image' || this.is === 'video')
-					: true
+				? (this.is === 'image' || this.is === 'video')
 				: false;
 		},
 		background(): string {
-			return this.file.properties.avgColor && this.file.properties.avgColor.length == 3
-				? `rgb(${this.file.properties.avgColor.join(',')})`
-				: 'transparent';
+			return this.file.properties.avgColor || 'transparent';
 		}
 	},
 	mounted() {
@@ -122,10 +118,10 @@ export default Vue.extend({
 	},
 	methods: {
 		onThumbnailLoaded() {
-			if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
+			if (this.file.properties.avgColor) {
 				anime({
 					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
+					backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
 					duration: 100,
 					easing: 'linear'
 				});
diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index c6fc36db33..bd0401f785 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -24,11 +24,11 @@
 
 	<div class="board">
 		<div class="labels-x" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
-			<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
+			<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
 		</div>
 		<div class="flex">
 			<div class="labels-y" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
-				<div v-for="i in game.settings.map.length">{{ i }}</div>
+				<div v-for="i in game.map.length">{{ i }}</div>
 			</div>
 			<div class="cells" :style="cellsStyle">
 				<div v-for="(stone, i) in o.board"
@@ -46,11 +46,11 @@
 				</div>
 			</div>
 			<div class="labels-y" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
-				<div v-for="i in game.settings.map.length">{{ i }}</div>
+				<div v-for="i in game.map.length">{{ i }}</div>
 			</div>
 		</div>
 		<div class="labels-x" v-if="this.$store.state.settings.games.reversi.showBoardLabels">
-			<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
+			<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
 		</div>
 	</div>
 
@@ -71,9 +71,9 @@
 	</div>
 
 	<div class="info">
-		<p v-if="game.settings.isLlotheo">{{ $t('is-llotheo') }}</p>
-		<p v-if="game.settings.loopedBoard">{{ $t('looped-map') }}</p>
-		<p v-if="game.settings.canPutEverywhere">{{ $t('can-put-everywhere') }}</p>
+		<p v-if="game.isLlotheo">{{ $t('is-llotheo') }}</p>
+		<p v-if="game.loopedBoard">{{ $t('looped-map') }}</p>
+		<p v-if="game.canPutEverywhere">{{ $t('can-put-everywhere') }}</p>
 	</div>
 </div>
 </template>
@@ -160,8 +160,8 @@ export default Vue.extend({
 
 		cellsStyle(): any {
 			return {
-				'grid-template-rows': `repeat(${this.game.settings.map.length}, 1fr)`,
-				'grid-template-columns': `repeat(${this.game.settings.map[0].length}, 1fr)`
+				'grid-template-rows': `repeat(${this.game.map.length}, 1fr)`,
+				'grid-template-columns': `repeat(${this.game.map[0].length}, 1fr)`
 			};
 		}
 	},
@@ -169,10 +169,10 @@ export default Vue.extend({
 	watch: {
 		logPos(v) {
 			if (!this.game.isEnded) return;
-			this.o = new Reversi(this.game.settings.map, {
-				isLlotheo: this.game.settings.isLlotheo,
-				canPutEverywhere: this.game.settings.canPutEverywhere,
-				loopedBoard: this.game.settings.loopedBoard
+			this.o = new Reversi(this.game.map, {
+				isLlotheo: this.game.isLlotheo,
+				canPutEverywhere: this.game.canPutEverywhere,
+				loopedBoard: this.game.loopedBoard
 			});
 			for (const log of this.logs.slice(0, v)) {
 				this.o.put(log.color, log.pos);
@@ -184,10 +184,10 @@ export default Vue.extend({
 	created() {
 		this.game = this.initGame;
 
-		this.o = new Reversi(this.game.settings.map, {
-			isLlotheo: this.game.settings.isLlotheo,
-			canPutEverywhere: this.game.settings.canPutEverywhere,
-			loopedBoard: this.game.settings.loopedBoard
+		this.o = new Reversi(this.game.map, {
+			isLlotheo: this.game.isLlotheo,
+			canPutEverywhere: this.game.canPutEverywhere,
+			loopedBoard: this.game.loopedBoard
 		});
 
 		for (const log of this.game.logs) {
@@ -286,10 +286,10 @@ export default Vue.extend({
 		onRescue(game) {
 			this.game = game;
 
-			this.o = new Reversi(this.game.settings.map, {
-				isLlotheo: this.game.settings.isLlotheo,
-				canPutEverywhere: this.game.settings.canPutEverywhere,
-				loopedBoard: this.game.settings.loopedBoard
+			this.o = new Reversi(this.game.map, {
+				isLlotheo: this.game.isLlotheo,
+				canPutEverywhere: this.game.canPutEverywhere,
+				loopedBoard: this.game.loopedBoard
 			});
 
 			for (const log of this.game.logs) {
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index d5d148790c..9ee1a78b86 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -17,9 +17,9 @@
 			</header>
 
 			<div>
-				<div class="random" v-if="game.settings.map == null"><fa icon="dice"/></div>
-				<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
-					<div v-for="(x, i) in game.settings.map.join('')"
+				<div class="random" v-if="game.map == null"><fa icon="dice"/></div>
+				<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
+					<div v-for="(x, i) in game.map.join('')"
 							:data-none="x == ' '"
 							@click="onPixelClick(i, x)">
 						<fa v-if="x == 'b'" :icon="fasCircle"/>
@@ -35,9 +35,9 @@
 			</header>
 
 			<div>
-				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">{{ $t('random') }}</form-radio>
-				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b><mk-user-name :user="game.user1"/></b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
-				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b><mk-user-name :user="game.user2"/></b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.bw" value="random" @change="updateSettings('bw')">{{ $t('random') }}</form-radio>
+				<form-radio v-model="game.bw" :value="1" @change="updateSettings('bw')">{{ this.$t('black-is').split('{}')[0] }}<b><mk-user-name :user="game.user1"/></b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.bw" :value="2" @change="updateSettings('bw')">{{ this.$t('black-is').split('{}')[0] }}<b><mk-user-name :user="game.user2"/></b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
 			</div>
 		</div>
 
@@ -47,9 +47,9 @@
 			</header>
 
 			<div>
-				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">{{ $t('is-llotheo') }}</ui-switch>
-				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">{{ $t('looped-map') }}</ui-switch>
-				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">{{ $t('can-put-everywhere') }}</ui-switch>
+				<ui-switch v-model="game.isLlotheo" @change="updateSettings('isLlotheo')">{{ $t('is-llotheo') }}</ui-switch>
+				<ui-switch v-model="game.loopedBoard" @change="updateSettings('loopedBoard')">{{ $t('looped-map') }}</ui-switch>
+				<ui-switch v-model="game.canPutEverywhere" @change="updateSettings('canPutEverywhere')">{{ $t('can-put-everywhere') }}</ui-switch>
 			</div>
 		</div>
 
@@ -159,8 +159,8 @@ export default Vue.extend({
 		this.connection.on('initForm', this.onInitForm);
 		this.connection.on('message', this.onMessage);
 
-		if (this.game.user1Id != this.$store.state.i.id && this.game.settings.form1) this.form = this.game.settings.form1;
-		if (this.game.user2Id != this.$store.state.i.id && this.game.settings.form2) this.form = this.game.settings.form2;
+		if (this.game.user1Id != this.$store.state.i.id && this.game.form1) this.form = this.game.form1;
+		if (this.game.user2Id != this.$store.state.i.id && this.game.form2) this.form = this.game.form2;
 	},
 
 	beforeDestroy() {
@@ -189,18 +189,19 @@ export default Vue.extend({
 			this.$forceUpdate();
 		},
 
-		updateSettings() {
+		updateSettings(key: string) {
 			this.connection.send('updateSettings', {
-				settings: this.game.settings
+				key: key,
+				value: this.game[key]
 			});
 		},
 
-		onUpdateSettings(settings) {
-			this.game.settings = settings;
-			if (this.game.settings.map == null) {
+		onUpdateSettings({ key, value }) {
+			this.game[key] = value;
+			if (this.game.map == null) {
 				this.mapName = null;
 			} else {
-				const found = Object.values(maps).find(x => x.data.join('') == this.game.settings.map.join(''));
+				const found = Object.values(maps).find(x => x.data.join('') == this.game.map.join(''));
 				this.mapName = found ? found.name : '-Custom-';
 			}
 		},
@@ -224,27 +225,27 @@ export default Vue.extend({
 
 		onMapChange() {
 			if (this.mapName == null) {
-				this.game.settings.map = null;
+				this.game.map = null;
 			} else {
-				this.game.settings.map = Object.values(maps).find(x => x.name == this.mapName).data;
+				this.game.map = Object.values(maps).find(x => x.name == this.mapName).data;
 			}
 			this.$forceUpdate();
 			this.updateSettings();
 		},
 
 		onPixelClick(pos, pixel) {
-			const x = pos % this.game.settings.map[0].length;
-			const y = Math.floor(pos / this.game.settings.map[0].length);
+			const x = pos % this.game.map[0].length;
+			const y = Math.floor(pos / this.game.map[0].length);
 			const newPixel =
 				pixel == ' ' ? '-' :
 				pixel == '-' ? 'b' :
 				pixel == 'b' ? 'w' :
 				' ';
-			const line = this.game.settings.map[y].split('');
+			const line = this.game.map[y].split('');
 			line[x] = newPixel;
-			this.$set(this.game.settings.map, y, line.join(''));
+			this.$set(this.game.map, y, line.join(''));
 			this.$forceUpdate();
-			this.updateSettings();
+			this.updateSettings('map');
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index b6803cd7f7..d33471a049 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -106,7 +106,7 @@ export default Vue.extend({
 		async nav(game, actualNav = true) {
 			if (this.selfNav) {
 				// 受け取ったゲーム情報が省略されたものなら完全な情報を取得する
-				if (game != null && (game.settings == null || game.settings.map == null)) {
+				if (game != null && game.map == null) {
 					game = await this.$root.api('games/reversi/games/show', {
 						gameId: game.id
 					});
diff --git a/src/client/app/common/views/components/instance.vue b/src/client/app/common/views/components/instance.vue
index 7b8d4f8e0b..497e4976f5 100644
--- a/src/client/app/common/views/components/instance.vue
+++ b/src/client/app/common/views/components/instance.vue
@@ -2,7 +2,7 @@
 <div class="nhasjydimbopojusarffqjyktglcuxjy" v-if="meta">
 	<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
 
-	<h1>{{ meta.name }}</h1>
+	<h1>{{ meta.name || 'Misskey' }}</h1>
 	<p v-html="meta.description || this.$t('@.about')"></p>
 	<router-link to="/">{{ $t('start') }}</router-link>
 </div>
diff --git a/src/client/app/common/views/components/media-image.vue b/src/client/app/common/views/components/media-image.vue
index 3947ef5527..2559907512 100644
--- a/src/client/app/common/views/components/media-image.vue
+++ b/src/client/app/common/views/components/media-image.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 			}
 
 			return {
-				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
+				'background-color': this.image.properties.avgColor || 'transparent',
 				'background-image': url
 			};
 		}
diff --git a/src/client/app/common/views/components/mention.vue b/src/client/app/common/views/components/mention.vue
index 11dddbd52a..e1f67282b6 100644
--- a/src/client/app/common/views/components/mention.vue
+++ b/src/client/app/common/views/components/mention.vue
@@ -33,7 +33,7 @@ export default Vue.extend({
 	},
 	computed: {
 		canonical(): string {
-			return `@${this.username}@${toUnicode(this.host)}`;
+			return this.host === localHost ? `@${this.username}` : `@${this.username}@${toUnicode(this.host)}`;
 		},
 		isMe(): boolean {
 			return this.$store.getters.isSignedIn && this.canonical.toLowerCase() === `@${this.$store.state.i.username}@${toUnicode(localHost)}`.toLowerCase();
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index ce76c402f3..256ea760b3 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -11,7 +11,7 @@
 				<div class="file" v-if="message.file">
 					<a :href="message.file.url" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
-							:style="{ backgroundColor: message.file.properties.avgColor && message.file.properties.avgColor.length == 3 ? `rgb(${message.file.properties.avgColor.join(',')})` : 'transparent' }"/>
+							:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
 						<p v-else>{{ message.file.name }}</p>
 					</a>
 				</div>
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index ba14ba3a44..dc3aaa34f3 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-poll" :data-done="closed || isVoted">
 	<ul>
-		<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!closed && !isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
+		<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }" :title="!closed && !isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
 				<template v-if="choice.isVoted"><fa icon="check"/></template>
@@ -82,12 +82,6 @@ export default Vue.extend({
 				noteId: this.note.id,
 				choice: id
 			}).then(() => {
-				for (const c of this.poll.choices) {
-					if (c.id == id) {
-						c.votes++;
-						Vue.set(c, 'isVoted', true);
-					}
-				}
 				if (!this.showResult) this.showResult = !this.poll.multiple;
 			});
 		}
diff --git a/src/client/app/common/views/components/post-form-attaches.vue b/src/client/app/common/views/components/post-form-attaches.vue
new file mode 100644
index 0000000000..467e430ccf
--- /dev/null
+++ b/src/client/app/common/views/components/post-form-attaches.vue
@@ -0,0 +1,139 @@
+<template>
+<div class="skeikyzd" v-show="files.length != 0">
+	<x-draggable class="files" :list="files" :options="{ animation: 150 }">
+		<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
+			<x-file-thumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
+			<img class="remove" @click.stop="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
+			<div class="sensitive" v-if="file.isSensitive">
+				<fa class="icon" :icon="faExclamationTriangle"/>
+			</div>
+		</div>
+	</x-draggable>
+	<p class="remain">{{ 4 - files.length }}/4</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import * as XDraggable from 'vuedraggable';
+import XMenu from '../../../common/views/components/menu.vue';
+import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import XFileThumbnail from './drive-file-thumbnail.vue'
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/post-form-attaches.vue'),
+
+	components: {
+		XDraggable,
+		XFileThumbnail
+	},
+
+	props: {
+		files: {
+			type: Object,
+			required: true
+		},
+		detachMediaFn: {
+			type: Object,
+			required: false
+		}
+	},
+
+	data() {
+		return {
+			faExclamationTriangle
+		};
+	},
+
+	methods: {
+		detachMedia(id) {
+			if (this.detachMediaFn) this.detachMediaFn(id)
+			else if (this.$parent.detachMedia) this.$parent.detachMedia(id)
+		},
+		toggleSensitive(file) {
+			this.$root.api('drive/files/update', {
+				fileId: file.id,
+				isSensitive: !file.isSensitive
+			}).then(() => {
+				file.isSensitive = !file.isSensitive;
+			});
+		},
+		showFileMenu(file, ev: MouseEvent) {
+			this.$root.new(XMenu, {
+				items: [{
+					type: 'item',
+					text: file.isSensitive ? this.$t('unmark-as-sensitive') : this.$t('mark-as-sensitive'),
+					icon: file.isSensitive ? faEyeSlash : faEye,
+					action: () => { this.toggleSensitive(file) }
+				}, {
+					type: 'item',
+					text: this.$t('attach-cancel'),
+					icon: faTimesCircle,
+					action: () => { this.detachMedia(file.id) }
+				}],
+				source: ev.currentTarget || ev.target
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.skeikyzd
+	padding 4px
+
+	> .files
+		display flex
+		flex-wrap wrap
+
+		> div
+			width 64px
+			height 64px
+			margin 4px
+			cursor move
+
+			&:hover > .remove
+				display block
+
+			> .thumbnail
+				width 100%
+				height 100%
+				z-index 1
+				color var(--text)
+
+			> .remove
+				display none
+				position absolute
+				top -6px
+				right -6px
+				width 16px
+				height 16px
+				cursor pointer
+				z-index 1000
+
+			> .sensitive
+				display flex
+				position absolute
+				width 64px
+				height 64px
+				top 0
+				left 0
+				z-index 2
+				background rgba(17, 17, 17, .7)
+				color #fff
+
+				> .icon
+					margin auto
+
+	> .remain
+		display block
+		position absolute
+		top 8px
+		right 8px
+		margin 0
+		padding 0
+		color var(--primaryAlpha04)
+
+</style>
diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index cf7f88b2f5..46668054b8 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -20,7 +20,7 @@ export default Vue.extend({
 	},
 	computed: {
 		reactions(): any {
-			return this.note.reactionCounts;
+			return this.note.reactions;
 		},
 		isMe(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.id === this.note.userId;
diff --git a/src/client/app/common/views/components/settings/notification.vue b/src/client/app/common/views/components/settings/notification.vue
index b689544d69..2554fe6331 100644
--- a/src/client/app/common/views/components/settings/notification.vue
+++ b/src/client/app/common/views/components/settings/notification.vue
@@ -2,7 +2,7 @@
 <ui-card>
 	<template #title><fa :icon="['far', 'bell']"/> {{ $t('title') }}</template>
 	<section>
-		<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
+		<ui-switch v-model="$store.state.i.autoWatch" @change="onChangeAutoWatch">
 			{{ $t('auto-watch') }}<template #desc>{{ $t('auto-watch-desc') }}</template>
 		</ui-switch>
 		<section>
diff --git a/src/client/app/common/views/components/settings/profile.vue b/src/client/app/common/views/components/settings/profile.vue
index b9837a6966..fd08f85816 100644
--- a/src/client/app/common/views/components/settings/profile.vue
+++ b/src/client/app/common/views/components/settings/profile.vue
@@ -158,14 +158,14 @@ export default Vue.extend({
 
 	computed: {
 		alwaysMarkNsfw: {
-			get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
+			get() { return this.$store.state.i.alwaysMarkNsfw; },
 			set(value) { this.$root.api('i/update', { alwaysMarkNsfw: value }); }
 		},
 
 		bannerStyle(): any {
 			if (this.$store.state.i.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.$store.state.i.bannerColor && this.$store.state.i.bannerColor.length == 3 ? `rgb(${ this.$store.state.i.bannerColor.join(',') })` : null,
+				backgroundColor: this.$store.state.i.bannerColor,
 				backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
 			};
 		},
@@ -178,10 +178,10 @@ export default Vue.extend({
 		this.email = this.$store.state.i.email;
 		this.name = this.$store.state.i.name;
 		this.username = this.$store.state.i.username;
-		this.location = this.$store.state.i.profile.location;
+		this.location = this.$store.state.i.location;
 		this.description = this.$store.state.i.description;
 		this.lang = this.$store.state.i.lang;
-		this.birthday = this.$store.state.i.profile.birthday;
+		this.birthday = this.$store.state.i.birthday;
 		this.avatarId = this.$store.state.i.avatarId;
 		this.bannerId = this.$store.state.i.bannerId;
 		this.isCat = this.$store.state.i.isCat;
diff --git a/src/client/app/common/views/components/settings/theme.vue b/src/client/app/common/views/components/settings/theme.vue
index 1dff61e459..3440aacb28 100644
--- a/src/client/app/common/views/components/settings/theme.vue
+++ b/src/client/app/common/views/components/settings/theme.vue
@@ -130,20 +130,6 @@ import * as tinycolor from 'tinycolor2';
 import * as JSON5 from 'json5';
 import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons';
 
-// 後方互換性のため
-function convertOldThemedefinition(t) {
-	const t2 = {
-		id: t.meta.id,
-		name: t.meta.name,
-		author: t.meta.author,
-		base: t.meta.base,
-		vars: t.meta.vars,
-		props: t
-	};
-	delete t2.props.meta;
-	return t2;
-}
-
 export default Vue.extend({
 	i18n: i18n('common/views/components/theme.vue'),
 	components: {
@@ -231,20 +217,6 @@ export default Vue.extend({
 		}
 	},
 
-	beforeCreate() {
-		// migrate old theme definitions
-		// 後方互換性のため
-		this.$store.commit('device/set', {
-			key: 'themes', value: this.$store.state.device.themes.map(t => {
-				if (t.id == null) {
-					return convertOldThemedefinition(t);
-				} else {
-					return t;
-				}
-			})
-		});
-	},
-
 	methods: {
 		install(code) {
 			let theme;
@@ -259,11 +231,6 @@ export default Vue.extend({
 				return;
 			}
 
-			// 後方互換性のため
-			if (theme.id == null && theme.meta != null) {
-				theme = convertOldThemedefinition(theme);
-			}
-
 			if (theme.id == null) {
 				this.$root.dialog({
 					type: 'error',
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index 16e1afaa94..45c2eabd45 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -4,7 +4,7 @@
 		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
 			<span>{{ $t('invitation-code') }}</span>
 			<template #prefix><fa icon="id-card-alt"/></template>
-			<template #desc v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainer.email)"></template>
+			<template #desc v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainerEmail)"></template>
 		</ui-input>
 		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
 			<span>{{ $t('username') }}</span>
diff --git a/src/client/app/common/views/components/user-list-editor.vue b/src/client/app/common/views/components/user-list-editor.vue
index 53c945ca0a..8d2e04d045 100644
--- a/src/client/app/common/views/components/user-list-editor.vue
+++ b/src/client/app/common/views/components/user-list-editor.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="cudqjmnl">
 	<ui-card>
-		<template #title><fa :icon="faList"/> {{ list.title }}</template>
+		<template #title><fa :icon="faList"/> {{ list.name }}</template>
 
 		<section>
 			<ui-button @click="rename"><fa :icon="faICursor"/> {{ $t('rename') }}</ui-button>
@@ -75,7 +75,7 @@ export default Vue.extend({
 			this.$root.dialog({
 				title: this.$t('rename'),
 				input: {
-					default: this.list.title
+					default: this.list.name
 				}
 			}).then(({ canceled, result: title }) => {
 				if (canceled) return;
@@ -89,7 +89,7 @@ export default Vue.extend({
 		del() {
 			this.$root.dialog({
 				type: 'warning',
-				text: this.$t('delete-are-you-sure').replace('$1', this.list.title),
+				text: this.$t('delete-are-you-sure').replace('$1', this.list.name),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue
index b56cb13c3e..b8bcc35d82 100644
--- a/src/client/app/common/views/components/user-list.vue
+++ b/src/client/app/common/views/components/user-list.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 			fetchingMoreUsers: false,
 			us: [],
 			inited: false,
-			cursor: null
+			more: false
 		};
 	},
 
diff --git a/src/client/app/common/views/components/user-menu.vue b/src/client/app/common/views/components/user-menu.vue
index 93fd759fd9..a95f7a9225 100644
--- a/src/client/app/common/views/components/user-menu.vue
+++ b/src/client/app/common/views/components/user-menu.vue
@@ -73,7 +73,7 @@ export default Vue.extend({
 				title: t,
 				select: {
 					items: lists.map(list => ({
-						value: list.id, text: list.title
+						value: list.id, text: list.name
 					}))
 				},
 				showCancelButton: true
diff --git a/src/client/app/common/views/deck/deck.direct.vue b/src/client/app/common/views/deck/deck.direct.vue
index 2618363b14..29db5cb7f3 100644
--- a/src/client/app/common/views/deck/deck.direct.vue
+++ b/src/client/app/common/views/deck/deck.direct.vue
@@ -28,12 +28,12 @@ export default Vue.extend({
 					notes.pop();
 					return {
 						notes: notes,
-						cursor: notes[notes.length - 1].id
+						more: true
 					};
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			})
diff --git a/src/client/app/common/views/deck/deck.favorites-column.vue b/src/client/app/common/views/deck/deck.favorites-column.vue
index 238938594f..526b998f87 100644
--- a/src/client/app/common/views/deck/deck.favorites-column.vue
+++ b/src/client/app/common/views/deck/deck.favorites-column.vue
@@ -37,12 +37,12 @@ export default Vue.extend({
 					notes.pop();
 					return {
 						notes: notes,
-						cursor: notes[notes.length - 1].id
+						more: true
 					};
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			})
diff --git a/src/client/app/common/views/deck/deck.hashtag-tl.vue b/src/client/app/common/views/deck/deck.hashtag-tl.vue
index 07d96f82c4..6f89f6a23d 100644
--- a/src/client/app/common/views/deck/deck.hashtag-tl.vue
+++ b/src/client/app/common/views/deck/deck.hashtag-tl.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 	data() {
 		return {
 			connection: null,
-			makePromise: cursor => this.$root.api('notes/search_by_tag', {
+			makePromise: cursor => this.$root.api('notes/search-by-tag', {
 				limit: fetchLimit + 1,
 				untilId: cursor ? cursor : undefined,
 				withFiles: this.mediaOnly,
@@ -41,12 +41,12 @@ export default Vue.extend({
 					notes.pop();
 					return {
 						notes: notes,
-						cursor: notes[notes.length - 1].id
+						more: true
 					};
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			})
diff --git a/src/client/app/common/views/deck/deck.list-tl.vue b/src/client/app/common/views/deck/deck.list-tl.vue
index d1887990f2..24080ad4ea 100644
--- a/src/client/app/common/views/deck/deck.list-tl.vue
+++ b/src/client/app/common/views/deck/deck.list-tl.vue
@@ -41,12 +41,12 @@ export default Vue.extend({
 					notes.pop();
 					return {
 						notes: notes,
-						cursor: notes[notes.length - 1].id
+						more: true
 					};
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			})
diff --git a/src/client/app/common/views/deck/deck.mentions.vue b/src/client/app/common/views/deck/deck.mentions.vue
index 1efd778226..153b4cd052 100644
--- a/src/client/app/common/views/deck/deck.mentions.vue
+++ b/src/client/app/common/views/deck/deck.mentions.vue
@@ -27,12 +27,12 @@ export default Vue.extend({
 					notes.pop();
 					return {
 						notes: notes,
-						cursor: notes[notes.length - 1].id
+						more: true
 					};
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			})
diff --git a/src/client/app/common/views/deck/deck.notes.vue b/src/client/app/common/views/deck/deck.notes.vue
index 8787a82a1c..15a78bef26 100644
--- a/src/client/app/common/views/deck/deck.notes.vue
+++ b/src/client/app/common/views/deck/deck.notes.vue
@@ -26,8 +26,8 @@
 		</template>
 	</component>
 
-	<footer v-if="cursor != null">
-		<button @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+	<footer v-if="more">
+		<button @click="fetchMore()" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('@.load-more') }}</template>
 			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>
 		</button>
@@ -61,7 +61,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			inited: false,
-			cursor: null
+			more: false
 		};
 	},
 
@@ -119,7 +119,7 @@ export default Vue.extend({
 					this.notes = x;
 				} else {
 					this.notes = x.notes;
-					this.cursor = x.cursor;
+					this.more = x.more;
 				}
 				this.inited = true;
 				this.fetching = false;
@@ -129,12 +129,12 @@ export default Vue.extend({
 			});
 		},
 
-		more() {
-			if (this.cursor == null || this.moreFetching) return;
+		fetchMore() {
+			if (!this.more || this.moreFetching) return;
 			this.moreFetching = true;
-			this.makePromise(this.cursor).then(x => {
+			this.makePromise(this.notes[this.notes.length - 1].id).then(x => {
 				this.notes = this.notes.concat(x.notes);
-				this.cursor = x.cursor;
+				this.more = x.more;
 				this.moreFetching = false;
 			}, e => {
 				this.moreFetching = false;
@@ -157,7 +157,7 @@ export default Vue.extend({
 				// オーバーフローしたら古い投稿は捨てる
 				if (this.notes.length >= displayLimit) {
 					this.notes = this.notes.slice(0, displayLimit);
-					this.cursor = this.notes[this.notes.length - 1].id
+					this.more = true;
 				}
 			} else {
 				this.queue.push(note);
@@ -181,7 +181,7 @@ export default Vue.extend({
 		},
 
 		onBottom() {
-			this.more();
+			this.fetchMore();
 		}
 	}
 });
diff --git a/src/client/app/common/views/deck/deck.notification.vue b/src/client/app/common/views/deck/deck.notification.vue
index 6a116260e5..3ced7b7e23 100644
--- a/src/client/app/common/views/deck/deck.notification.vue
+++ b/src/client/app/common/views/deck/deck.notification.vue
@@ -62,7 +62,7 @@
 		</div>
 	</div>
 
-	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
+	<div class="notification pollVote" v-if="notification.type == 'pollVote'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
diff --git a/src/client/app/common/views/deck/deck.search-column.vue b/src/client/app/common/views/deck/deck.search-column.vue
index fb0ba5f6e4..ab19bdaab6 100644
--- a/src/client/app/common/views/deck/deck.search-column.vue
+++ b/src/client/app/common/views/deck/deck.search-column.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			})
diff --git a/src/client/app/common/views/deck/deck.tl-column.vue b/src/client/app/common/views/deck/deck.tl-column.vue
index d53aabaea5..5ab8ccb12f 100644
--- a/src/client/app/common/views/deck/deck.tl-column.vue
+++ b/src/client/app/common/views/deck/deck.tl-column.vue
@@ -82,7 +82,7 @@ export default Vue.extend({
 				case 'local': return this.$t('@deck.local');
 				case 'hybrid': return this.$t('@deck.hybrid');
 				case 'global': return this.$t('@deck.global');
-				case 'list': return this.column.list.title;
+				case 'list': return this.column.list.name;
 				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
 			}
 		}
diff --git a/src/client/app/common/views/deck/deck.tl.vue b/src/client/app/common/views/deck/deck.tl.vue
index 35cdfa704f..9284f06ee1 100644
--- a/src/client/app/common/views/deck/deck.tl.vue
+++ b/src/client/app/common/views/deck/deck.tl.vue
@@ -85,12 +85,12 @@ export default Vue.extend({
 				notes.pop();
 				return {
 					notes: notes,
-					cursor: notes[notes.length - 1].id
+					more: true
 				};
 			} else {
 				return {
 					notes: notes,
-					cursor: null
+					more: false
 				};
 			}
 		});
diff --git a/src/client/app/common/views/deck/deck.user-column.home.vue b/src/client/app/common/views/deck/deck.user-column.home.vue
index ee24cad1c5..cf592d031f 100644
--- a/src/client/app/common/views/deck/deck.user-column.home.vue
+++ b/src/client/app/common/views/deck/deck.user-column.home.vue
@@ -95,12 +95,12 @@ export default Vue.extend({
 					notes.pop();
 					return {
 						notes: notes,
-						cursor: new Date(notes[notes.length - 1].createdAt).getTime()
+						more: true
 					};
 				} else {
 					return {
 						notes: notes,
-						cursor: null
+						more: false
 					};
 				}
 			});
diff --git a/src/client/app/common/views/deck/deck.user-column.vue b/src/client/app/common/views/deck/deck.user-column.vue
index 9e9f494b13..fb50d880eb 100644
--- a/src/client/app/common/views/deck/deck.user-column.vue
+++ b/src/client/app/common/views/deck/deck.user-column.vue
@@ -8,7 +8,7 @@
 		<div class="is-remote" v-if="user.host != null">
 			<details>
 				<summary><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}</summary>
-				<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
+				<a :href="user.url" target="_blank">{{ $t('@.view-on-remote') }}</a>
 			</details>
 		</div>
 		<header :style="bannerStyle">
@@ -88,7 +88,7 @@ export default Vue.extend({
 			if (this.user == null) return {};
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		},
diff --git a/src/client/app/common/views/deck/deck.vue b/src/client/app/common/views/deck/deck.vue
index 8ffb3223f9..b46f2167ad 100644
--- a/src/client/app/common/views/deck/deck.vue
+++ b/src/client/app/common/views/deck/deck.vue
@@ -106,16 +106,6 @@ export default Vue.extend({
 				value: deck
 			});
 		}
-
-		// 互換性のため
-		if (this.$store.state.device.deck != null && this.$store.state.device.deck.layout == null) {
-			this.$store.commit('device/set', {
-				key: 'deck',
-				value: Object.assign({}, this.$store.state.device.deck, {
-					layout: this.$store.state.device.deck.columns.map(c => [c.id])
-				})
-			});
-		}
 	},
 
 	mounted() {
@@ -199,7 +189,7 @@ export default Vue.extend({
 							title: this.$t('@deck.select-list'),
 							select: {
 								items: lists.map(list => ({
-									value: list.id, text: list.title
+									value: list.id, text: list.name
 								}))
 							},
 							showCancelButton: true
diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue
index 098bf1f4c4..67e92af445 100644
--- a/src/client/app/common/views/pages/explore.vue
+++ b/src/client/app/common/views/pages/explore.vue
@@ -3,7 +3,7 @@
 	<ui-container :show-header="false" v-if="meta && stats">
 		<div class="kpdsmpnk" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 			<div>
-				<router-link to="/explore" class="title">{{ $t('explore', { host: meta.name }) }}</router-link>
+				<router-link to="/explore" class="title">{{ $t('explore', { host: meta.name || 'Misskey' }) }}</router-link>
 				<span>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</span>
 			</div>
 		</div>
@@ -13,8 +13,8 @@
 		<template #header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
 
 		<div class="vxjfqztj">
-			<router-link v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</router-link>
-			<router-link v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</router-link>
+			<router-link v-for="tag in tagsLocal" :to="`/explore/tags/${tag.name}`" :key="'local:' + tag.name" class="local">{{ tag.name }}</router-link>
+			<router-link v-for="tag in tagsRemote" :to="`/explore/tags/${tag.name}`" :key="'remote:' + tag.name">{{ tag.name }}</router-link>
 		</div>
 	</ui-container>
 
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index f8d12a2dca..f6a11a7b4f 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 		bannerStyle(): any {
 			if (this.user.bannerUrl == null) return {};
 			return {
-				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundColor: this.user.bannerColor,
 				backgroundImage: `url(${ this.user.bannerUrl })`
 			};
 		}
diff --git a/src/client/app/common/views/pages/followers.vue b/src/client/app/common/views/pages/followers.vue
index 94d9c9b13c..1d68d71e80 100644
--- a/src/client/app/common/views/pages/followers.vue
+++ b/src/client/app/common/views/pages/followers.vue
@@ -9,20 +9,30 @@ import Vue from 'vue';
 import parseAcct from '../../../../../misc/acct/parse';
 import i18n from '../../../i18n';
 
+const fetchLimit = 30;
+
 export default Vue.extend({
-	i18n: i18n(''),
+	i18n: i18n(),
 
 	data() {
 		return {
 			makePromise: cursor => this.$root.api('users/followers', {
 				...parseAcct(this.$route.params.user),
-				limit: 30,
-				cursor: cursor ? cursor : undefined
-			}).then(x => {
-				return {
-					users: x.users,
-					cursor: x.next
-				};
+				limit: fetchLimit + 1,
+				untilId: cursor ? cursor : undefined,
+			}).then(followings => {
+				if (followings.length == fetchLimit + 1) {
+					followings.pop();
+					return {
+						users: followings.map(following => following.follower),
+						cursor: followings[followings.length - 1].id
+					};
+				} else {
+					return {
+						users: followings.map(following => following.follower),
+						more: false
+					};
+				}
 			}),
 		};
 	},
diff --git a/src/client/app/common/views/pages/following.vue b/src/client/app/common/views/pages/following.vue
index 39739fa3da..b65d335314 100644
--- a/src/client/app/common/views/pages/following.vue
+++ b/src/client/app/common/views/pages/following.vue
@@ -7,19 +7,32 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../misc/acct/parse';
+import i18n from '../../../i18n';
+
+const fetchLimit = 30;
 
 export default Vue.extend({
+	i18n: i18n(),
+
 	data() {
 		return {
 			makePromise: cursor => this.$root.api('users/following', {
 				...parseAcct(this.$route.params.user),
-				limit: 30,
-				cursor: cursor ? cursor : undefined
-			}).then(x => {
-				return {
-					users: x.users,
-					cursor: x.next
-				};
+				limit: fetchLimit + 1,
+				untilId: cursor ? cursor : undefined,
+			}).then(followings => {
+				if (followings.length == fetchLimit + 1) {
+					followings.pop();
+					return {
+						users: followings.map(following => following.followee),
+						cursor: followings[followings.length - 1].id
+					};
+				} else {
+					return {
+						users: followings.map(following => following.followee),
+						more: false
+					};
+				}
 			}),
 		};
 	},
diff --git a/src/client/app/common/views/pages/share.vue b/src/client/app/common/views/pages/share.vue
index 760350b921..0452b25dfc 100644
--- a/src/client/app/common/views/pages/share.vue
+++ b/src/client/app/common/views/pages/share.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		this.$root.getMeta().then(meta => {
-			this.name = meta.name;
+			this.name = meta.name || 'Misskey';
 		});
 	}
 });
diff --git a/src/client/app/common/views/widgets/post-form.vue b/src/client/app/common/views/widgets/post-form.vue
index f1826cc59f..b30168b879 100644
--- a/src/client/app/common/views/widgets/post-form.vue
+++ b/src/client/app/common/views/widgets/post-form.vue
@@ -21,14 +21,7 @@
 					<fa :icon="['far', 'laugh']"/>
 				</button>
 			</div>
-			<div class="files" v-show="files.length != 0">
-				<x-draggable :list="files" :options="{ animation: 150 }">
-					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
-						<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
-					</div>
-				</x-draggable>
-			</div>
+			<x-post-form-attaches class="files" :files="files" :detachMediaFn="detachMedia"/>
 			<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
 			<mk-uploader ref="uploader" @uploaded="attachMedia"/>
 			<footer>
@@ -45,7 +38,7 @@
 import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import * as XDraggable from 'vuedraggable';
+import XPostFormAttaches from '../components/post-form-attaches.vue';
 
 export default define({
 	name: 'post-form',
@@ -56,7 +49,7 @@ export default define({
 	i18n: i18n('desktop/views/widgets/post-form.vue'),
 
 	components: {
-		XDraggable
+		XPostFormAttaches
 	},
 
 	data() {
@@ -249,38 +242,6 @@ export default define({
 				& + .emoji
 					opacity 0.7
 
-	> .files
-		> div
-			padding 4px
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> div
-				float left
-				border solid 4px transparent
-				cursor move
-
-				&:hover > .remove
-					display block
-
-				> .img
-					width 64px
-					height 64px
-					background-size cover
-					background-position center center
-
-				> .remove
-					display none
-					position absolute
-					top -6px
-					right -6px
-					width 16px
-					height 16px
-					cursor pointer
-
 	> input[type=file]
 		display none
 
diff --git a/src/client/app/common/views/widgets/server.info.vue b/src/client/app/common/views/widgets/server.info.vue
index f7efb6fa2a..a97b4ec496 100644
--- a/src/client/app/common/views/widgets/server.info.vue
+++ b/src/client/app/common/views/widgets/server.info.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="info">
-	<p>Maintainer: <b><a :href="'mailto:' + meta.maintainer.email" target="_blank">{{ meta.maintainer.name }}</a></b></p>
+	<p>Maintainer: <b><a :href="'mailto:' + meta.maintainerEmail" target="_blank">{{ meta.maintainerName }}</a></b></p>
 	<p>Machine: {{ meta.machine }}</p>
 	<p>Node: {{ meta.node }}</p>
 	<p>Version: {{ meta.version }} </p>