From 10928182034f1db668de422cda6461bd31aaaa73 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Wed, 22 May 2019 05:06:52 +0900
Subject: Add group update / transfer API

---
 .../app/common/views/pages/user-group-editor.vue   | 81 ++++++++++++++++++++--
 src/client/app/init.ts                             |  2 +
 src/client/themes/dark.json5                       |  3 +
 src/client/themes/light.json5                      |  3 +
 4 files changed, 83 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/user-group-editor.vue b/src/client/app/common/views/pages/user-group-editor.vue
index ef79689ae8..a32148cd7f 100644
--- a/src/client/app/common/views/pages/user-group-editor.vue
+++ b/src/client/app/common/views/pages/user-group-editor.vue
@@ -7,6 +7,7 @@
 			<ui-margin>
 				<ui-button @click="rename"><fa :icon="faICursor"/> {{ $t('rename') }}</ui-button>
 				<ui-button @click="del"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
+				<ui-button @click="transfer"><fa :icon="faCrown"/> {{ $t('transfer') }}</ui-button>
 			</ui-margin>
 		</section>
 	</ui-container>
@@ -28,9 +29,10 @@
 					<div>
 						<header>
 							<b><mk-user-name :user="user"/></b>
+							<span class="is-owner" v-if="group.owner === user.id">owner</span>
 							<span class="username">@{{ user | acct }}</span>
 						</header>
-						<div>
+						<div v-if="group.owner !== user.id">
 							<a @click="remove(user)">{{ $t('remove-user') }}</a>
 						</div>
 					</div>
@@ -44,7 +46,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { faICursor, faUsers, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCrown, faICursor, faUsers, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
@@ -60,7 +62,7 @@ export default Vue.extend({
 		return {
 			group: null,
 			users: [],
-			faICursor, faTrashAlt, faUsers, faPlus
+			faCrown, faICursor, faTrashAlt, faUsers, faPlus
 		};
 	},
 
@@ -78,6 +80,14 @@ export default Vue.extend({
 	},
 
 	methods: {
+		fetchGroup() {
+			this.$root.api('users/groups/show', {
+				groupId: this.group.id
+			}).then(group => {
+				this.group = group;
+			})
+		},
+
 		fetchUsers() {
 			this.$root.api('users/show', {
 				userIds: this.group.userIds
@@ -97,8 +107,15 @@ export default Vue.extend({
 				this.$root.api('users/groups/update', {
 					groupId: this.group.id,
 					name: name
+				}).then(() => {
+					this.fetchGroup();
+				}).catch(e => {
+					this.$root.dialog({
+						type: 'error',
+						text: e
+					});
 				});
-			});
+			})
 		},
 
 		del() {
@@ -130,12 +147,17 @@ export default Vue.extend({
 				groupId: this.group.id,
 				userId: user.id
 			}).then(() => {
+				this.fetchGroup();
 				this.fetchUsers();
+			}).catch(e => {
+				this.$root.dialog({
+					type: 'error',
+					text: e
+				});
 			});
 		},
 
 		async invite() {
-			const t = this.$t('invited');
 			const { result: user } = await this.$root.dialog({
 				user: {
 					local: true
@@ -148,7 +170,44 @@ export default Vue.extend({
 			}).then(() => {
 				this.$root.dialog({
 					type: 'success',
-					text: t
+					text: this.$t('invited')
+				});
+			}).catch(e => {
+				this.$root.dialog({
+					type: 'error',
+					text: e
+				});
+			});
+		},
+
+		async transfer() {
+			const { result: user } = await this.$root.dialog({
+				user: {
+					local: true
+				}
+			});
+			if (user == null) return;
+
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('transfer-are-you-sure').replace('$1', this.group.name).replace('$2', user.username),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (canceled) return;
+
+				this.$root.api('users/groups/transfer', {
+					groupId: this.group.id,
+					userId: user.id
+				}).then(() => {
+					this.$root.dialog({
+						type: 'success',
+						text: this.$t('transferred')
+					});
+				}).catch(e => {
+					this.$root.dialog({
+						type: 'error',
+						text: e
+					});
 				});
 			});
 		}
@@ -179,6 +238,16 @@ export default Vue.extend({
 			> header
 				color var(--text)
 
+				> .is-owner
+					flex-shrink 0
+					align-self center
+					margin-left 8px
+					padding 1px 6px
+					font-size 80%
+					background var(--groupUserListOwnerBg)
+					color var(--groupUserListOwnerFg)
+					border-radius 3px
+
 				> .username
 					margin-left 8px
 					opacity 0.7
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index da7baff4fe..52da380e84 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -78,6 +78,7 @@ import {
 	faKey,
 	faBan,
 	faCogs,
+	faCrown,
 	faUnlockAlt,
 	faPuzzlePiece,
 	faMobileAlt,
@@ -210,6 +211,7 @@ library.add(
 	faKey,
 	faBan,
 	faCogs,
+	faCrown,
 	faUnlockAlt,
 	faPuzzlePiece,
 	faMobileAlt,
diff --git a/src/client/themes/dark.json5 b/src/client/themes/dark.json5
index 8e0c726b4c..0665d59901 100644
--- a/src/client/themes/dark.json5
+++ b/src/client/themes/dark.json5
@@ -235,5 +235,8 @@
 
 		pageBlockBorder: 'rgba(255, 255, 255, 0.1)',
 		pageBlockBorderHover: 'rgba(255, 255, 255, 0.15)',
+
+		groupUserListOwnerFg: '#f15f71',
+		groupUserListOwnerBg: '#5d282e'
 	},
 }
diff --git a/src/client/themes/light.json5 b/src/client/themes/light.json5
index 1fff18176a..cbe456ca5d 100644
--- a/src/client/themes/light.json5
+++ b/src/client/themes/light.json5
@@ -235,5 +235,8 @@
 
 		pageBlockBorder: 'rgba(0, 0, 0, 0.1)',
 		pageBlockBorderHover: 'rgba(0, 0, 0, 0.15)',
+
+		groupUserListOwnerFg: '#f15f71',
+		groupUserListOwnerBg: '#ffdfdf'
 	},
 }
-- 
cgit v1.2.3-freya


From aa1d2545b3894dc6e2f9e1fb73e13645c28df399 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Wed, 22 May 2019 12:25:14 +0900
Subject: Fetch joined groups on accept group invites (#4956)

---
 src/client/app/common/views/pages/user-groups.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/user-groups.vue b/src/client/app/common/views/pages/user-groups.vue
index f5609d690d..a51a5f723f 100644
--- a/src/client/app/common/views/pages/user-groups.vue
+++ b/src/client/app/common/views/pages/user-groups.vue
@@ -103,6 +103,10 @@ export default Vue.extend({
 				});
 				this.$root.api('i/user-group-invites').then(invites => {
 					this.invites = invites;
+				}).then(() => {
+					this.$root.api('users/groups/joined').then(groups => {
+						this.joinedGroups = groups;
+					});
 				});
 			});
 		},
-- 
cgit v1.2.3-freya


From c1524d9beffe3daaa64c515a6a63ced5e34a3e9e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 22 May 2019 12:54:28 +0900
Subject: デッキでフォロー申請を見れるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/pages/follow-requests.vue | 7 +++++++
 src/client/app/desktop/script.ts                      | 1 +
 src/client/app/mobile/script.ts                       | 1 +
 3 files changed, 9 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/follow-requests.vue b/src/client/app/common/views/pages/follow-requests.vue
index 146d4b0c94..e5b6e2902d 100644
--- a/src/client/app/common/views/pages/follow-requests.vue
+++ b/src/client/app/common/views/pages/follow-requests.vue
@@ -22,6 +22,7 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import Progress from '../../scripts/loading';
+import { faUserClock } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('common/views/pages/follow-requests.vue'),
@@ -31,6 +32,12 @@ export default Vue.extend({
 			requests: []
 		};
 	},
+	created() {
+		this.$emit('init', {
+			title: this.$t('received-follow-requests'),
+			icon: faUserClock
+		});
+	},
 	mounted() {
 		Progress.start();
 		this.$root.api('following/requests/list').then(requests => {
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 845f8ee5c0..b283ab2075 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -146,6 +146,7 @@ init(async (launch, os) => {
 					{ path: '/i/lists/:listId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.listId }) },
 					{ path: '/i/groups', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) },
 					{ path: '/i/groups/:groupId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.groupId }) },
+					{ path: '/i/follow-requests', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) },
 				]}
 				: { path: '/', component: MkHome, children: [
 					{ path: '', name: 'index', component: MkHomeTimeline },
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 7a80f21759..106e843ca8 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -128,6 +128,7 @@ init((launch, os) => {
 					{ path: '/i/lists/:listId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.listId }) },
 					{ path: '/i/groups', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) },
 					{ path: '/i/groups/:groupId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.groupId }) },
+					{ path: '/i/follow-requests', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }) },
 				]}]
 			: [
 				{ path: '/', name: 'index', component: MkIndex },
-- 
cgit v1.2.3-freya


From c7456224af3fbe39b3207f936781ac9b09a37a5f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 22 May 2019 12:55:53 +0900
Subject: Fix bug

---
 src/client/app/common/views/pages/user-group-editor.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/user-group-editor.vue b/src/client/app/common/views/pages/user-group-editor.vue
index a32148cd7f..3cfecd837f 100644
--- a/src/client/app/common/views/pages/user-group-editor.vue
+++ b/src/client/app/common/views/pages/user-group-editor.vue
@@ -158,6 +158,7 @@ export default Vue.extend({
 		},
 
 		async invite() {
+			const t = this.$t('invited');
 			const { result: user } = await this.$root.dialog({
 				user: {
 					local: true
@@ -170,7 +171,7 @@ export default Vue.extend({
 			}).then(() => {
 				this.$root.dialog({
 					type: 'success',
-					text: this.$t('invited')
+					text: t
 				});
 			}).catch(e => {
 				this.$root.dialog({
-- 
cgit v1.2.3-freya


From 50d4de19f0d93c78f70f7821bd9798317bd6b8d6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 22 May 2019 12:56:42 +0900
Subject: Clean up

---
 src/client/app/init.ts | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 52da380e84..da7baff4fe 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -78,7 +78,6 @@ import {
 	faKey,
 	faBan,
 	faCogs,
-	faCrown,
 	faUnlockAlt,
 	faPuzzlePiece,
 	faMobileAlt,
@@ -211,7 +210,6 @@ library.add(
 	faKey,
 	faBan,
 	faCogs,
-	faCrown,
 	faUnlockAlt,
 	faPuzzlePiece,
 	faMobileAlt,
-- 
cgit v1.2.3-freya


From 14a774c7236378ca79b05909a3cc6d7497de4a5f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 22 May 2019 13:07:58 +0900
Subject: Fix bug

---
 src/client/app/common/views/deck/deck.user-column.home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

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 ad05d6548b..c30cb397e4 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
@@ -30,7 +30,7 @@
 	<ui-container>
 		<template #header><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</template>
 		<div>
-			<x-notes ref="timeline" :pagination="pagination" @inited="() => $emit('loaded')"/>
+			<x-notes ref="timeline" :pagination="pagination" @inited="() => $emit('loaded')" :key="user.id"/>
 		</div>
 	</ui-container>
 </div>
-- 
cgit v1.2.3-freya


From 9cfb72810c0919e4aa739ebe4110f0ffa7ff4ed0 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Wed, 22 May 2019 14:27:10 +0900
Subject: Fix bug (#4958)

4a88cb59
---
 src/client/app/common/views/pages/user-group-editor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/user-group-editor.vue b/src/client/app/common/views/pages/user-group-editor.vue
index 3cfecd837f..9cc012af7a 100644
--- a/src/client/app/common/views/pages/user-group-editor.vue
+++ b/src/client/app/common/views/pages/user-group-editor.vue
@@ -29,10 +29,10 @@
 					<div>
 						<header>
 							<b><mk-user-name :user="user"/></b>
-							<span class="is-owner" v-if="group.owner === user.id">owner</span>
+							<span class="is-owner" v-if="group.ownerId === user.id">owner</span>
 							<span class="username">@{{ user | acct }}</span>
 						</header>
-						<div v-if="group.owner !== user.id">
+						<div v-if="group.ownerId !== user.id">
 							<a @click="remove(user)">{{ $t('remove-user') }}</a>
 						</div>
 					</div>
-- 
cgit v1.2.3-freya


From 1e1a7ee85888a74e9b7a58f833ed7da0a9ed1122 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 23 May 2019 13:38:07 +0900
Subject: Add info

---
 locales/ja-JP.yml                       | 1 +
 src/client/app/admin/views/instance.vue | 1 +
 2 files changed, 2 insertions(+)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c3eb0bb523..48c4c36828 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1281,6 +1281,7 @@ admin/views/instance.vue:
   mb: "メガバイト単位"
   recaptcha-config: "reCAPTCHAの設定"
   recaptcha-info: "reCAPTCHAを有効にする場合、reCAPTCHAトークンを取得する必要があります。https://www.google.com/recaptcha/intro/ にアクセスしてトークンを取得してください。"
+  recaptcha-info2: "v3は非対応です。v2を使用してください。"
   enable-recaptcha: "reCAPTCHAを有効にする"
   recaptcha-site-key: "サイトキー"
   recaptcha-secret-key: "シークレットキー"
diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue
index 72ae3384b5..c4d445fbb8 100644
--- a/src/client/app/admin/views/instance.vue
+++ b/src/client/app/admin/views/instance.vue
@@ -159,6 +159,7 @@
 			<ui-switch v-model="enableRecaptcha">{{ $t('enable-recaptcha') }}</ui-switch>
 			<template v-if="enableRecaptcha">
 				<ui-info>{{ $t('recaptcha-info') }}</ui-info>
+				<ui-info warn>{{ $t('recaptcha-info2') }}</ui-info>
 				<ui-horizon-group inputs>
 					<ui-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa icon="key"/></template>{{ $t('recaptcha-site-key') }}</ui-input>
 					<ui-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa icon="key"/></template>{{ $t('recaptcha-secret-key') }}</ui-input>
-- 
cgit v1.2.3-freya


From 9c8d26affad32fadba91ca733fdcce8578e93db6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 23 May 2019 14:11:42 +0900
Subject: Resolve #4967

---
 src/client/app/admin/views/logs.vue           | 11 +++++++++++
 src/server/api/endpoints/admin/delete-logs.ts | 13 +++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/server/api/endpoints/admin/delete-logs.ts

(limited to 'src/client')

diff --git a/src/client/app/admin/views/logs.vue b/src/client/app/admin/views/logs.vue
index 5c2cfdb396..cb54318187 100644
--- a/src/client/app/admin/views/logs.vue
+++ b/src/client/app/admin/views/logs.vue
@@ -26,6 +26,8 @@
 					</details>
 				</code>
 			</div>
+
+			<ui-button @click="deleteAll()">{{ $t('delete-all') }}</ui-button>
 		</section>
 	</ui-card>
 </div>
@@ -78,6 +80,15 @@ export default Vue.extend({
 			}).then(logs => {
 				this.logs = logs.reverse();
 			});
+		},
+
+		deleteAll() {
+			this.$root.api('admin/delete-logs').then(() => {
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			});
 		}
 	}
 });
diff --git a/src/server/api/endpoints/admin/delete-logs.ts b/src/server/api/endpoints/admin/delete-logs.ts
new file mode 100644
index 0000000000..26cf13c1f6
--- /dev/null
+++ b/src/server/api/endpoints/admin/delete-logs.ts
@@ -0,0 +1,13 @@
+import define from '../../define';
+import { Logs } from '../../../../models';
+
+export const meta = {
+	tags: ['admin'],
+
+	requireCredential: true,
+	requireModerator: true,
+};
+
+export default define(meta, async (ps) => {
+	await Logs.delete({});
+});
-- 
cgit v1.2.3-freya


From 2270fbf3ee53dcc909f9b87f7d88348c08afdfc2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 03:46:20 +0900
Subject: :art:

---
 src/client/app/common/views/pages/page/page.text.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/page/page.text.vue b/src/client/app/common/views/pages/page/page.text.vue
index eadc6f0aed..ca2565c8d4 100644
--- a/src/client/app/common/views/pages/page/page.text.vue
+++ b/src/client/app/common/views/pages/page/page.text.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="">
+<div class="mrdgzndn">
 	<mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
 </div>
 </template>
@@ -32,4 +32,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+.mrdgzndn
+	&:not(:first-child)
+		margin-top 0.5em
+
+	&:not(:last-child)
+		margin-bottom 0.5em
 </style>
-- 
cgit v1.2.3-freya


From 50251955cdeb5fbb8ff279bbcbea68d2bf606c7f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 03:57:03 +0900
Subject: Improve usability

---
 src/client/app/common/views/components/dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/dialog.vue b/src/client/app/common/views/components/dialog.vue
index 9f38031d62..a577da5a21 100644
--- a/src/client/app/common/views/components/dialog.vue
+++ b/src/client/app/common/views/components/dialog.vue
@@ -98,7 +98,7 @@ export default Vue.extend({
 		return {
 			inputValue: this.input && this.input.default ? this.input.default : null,
 			userInputValue: null,
-			selectedValue: null,
+			selectedValue: this.select ? this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
 			faTimesCircle, faQuestionCircle
 		};
 	},
-- 
cgit v1.2.3-freya


From bcdab799d0dc4d9b0ad7ae8e2fb438fe84ae180c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 04:17:14 +0900
Subject: :art:

---
 src/client/app/mobile/views/components/notification.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 62df76cba5..9dae95c9b1 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -5,7 +5,7 @@
 		<div>
 			<header>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
+				<router-link class="name" :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
@@ -21,7 +21,7 @@
 		<div>
 			<header>
 				<fa icon="retweet"/>
-				<router-link :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
+				<router-link class="name" :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
@@ -37,7 +37,7 @@
 		<div>
 			<header>
 				<fa icon="user-plus"/>
-				<router-link :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
+				<router-link class="name" :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 		</div>
@@ -48,7 +48,7 @@
 		<div>
 			<header>
 				<fa icon="user-clock"/>
-				<router-link :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
+				<router-link class="name" :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 		</div>
@@ -59,7 +59,7 @@
 		<div>
 			<header>
 				<fa icon="chart-pie"/>
-				<router-link :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
+				<router-link class="name" :to="notification.user | userPage"><mk-user-name :user="notification.user"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
@@ -130,6 +130,12 @@ export default Vue.extend({
 				[data-icon], .mk-reaction-icon
 					margin-right 4px
 
+				> .name
+					text-overflow ellipsis
+					white-space nowrap
+					min-width 0
+					overflow hidden
+
 				> .mk-time
 					margin-left auto
 					color var(--noteHeaderInfo)
-- 
cgit v1.2.3-freya


From e6f78a73ababd98642c12887881db61c714b4171 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Fri, 24 May 2019 04:25:57 +0900
Subject: i18n: reaction-picker.vue (#4971)

---
 locales/ja-JP.yml                                          | 1 +
 src/client/app/common/views/components/reaction-picker.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 48c4c36828..9153655f31 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -591,6 +591,7 @@ common/views/components/poll-editor.vue:
 
 common/views/components/reaction-picker.vue:
   choose-reaction: "リアクションを選択"
+  input-reaction-placeholder: "または絵文字を入力"
 
 common/views/components/emoji-picker.vue:
   custom-emoji: "カスタム絵文字"
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 461e7c9090..970d430069 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -16,7 +16,7 @@
 			<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" :title="$t('@.reactions.pudding')" v-particle><mk-reaction-icon reaction="pudding"/></button>
 		</div>
 		<div v-if="enableEmojiReaction" class="text">
-			<input v-model="text" placeholder="または絵文字を入力" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
+			<input v-model="text" :placeholder="$t('input-reaction-placeholder')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
 		</div>
 	</div>
 </div>
-- 
cgit v1.2.3-freya


From 03136caac4b4f93e60d00c9e16ecbf13e405c367 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 04:57:04 +0900
Subject: Update instance.vue

---
 src/client/app/admin/views/instance.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue
index c4d445fbb8..588b24f6b5 100644
--- a/src/client/app/admin/views/instance.vue
+++ b/src/client/app/admin/views/instance.vue
@@ -9,11 +9,11 @@
 			<ui-input v-model="iconUrl"><template #icon><fa icon="link"/></template>{{ $t('icon-url') }}</ui-input>
 			<ui-input v-model="mascotImageUrl"><template #icon><fa icon="link"/></template>{{ $t('logo-url') }}</ui-input>
 			<ui-input v-model="bannerUrl"><template #icon><fa icon="link"/></template>{{ $t('banner-url') }}</ui-input>
-			<ui-input v-model="errorImageUrl"><template #icon><fa icon="link"/></template>{{ $t('error-image-url') }}</ui-input>
 			<ui-input v-model="ToSUrl"><template #icon><fa icon="link"/></template>{{ $t('tos-url') }}</ui-input>
-			<ui-input v-model="languages"><template #icon><fa icon="language"/></template>{{ $t('languages') }}<template #desc>{{ $t('languages-desc') }}</template></ui-input>
 			<details>
 				<summary>{{ $t('advanced-config') }}</summary>
+				<ui-input v-model="errorImageUrl"><template #icon><fa icon="link"/></template>{{ $t('error-image-url') }}</ui-input>
+				<ui-input v-model="languages"><template #icon><fa icon="language"/></template>{{ $t('languages') }}<template #desc>{{ $t('languages-desc') }}</template></ui-input>
 				<ui-input v-model="repositoryUrl"><template #icon><fa icon="link"/></template>{{ $t('repository-url') }}</ui-input>
 				<ui-input v-model="feedbackUrl"><template #icon><fa icon="link"/></template>{{ $t('feedback-url') }}</ui-input>
 			</details>
-- 
cgit v1.2.3-freya


From 5a4f6b4ada3df031b1b17d7c2aaf146b515f5695 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 18:11:12 +0900
Subject: Update page-editor.vue

---
 src/client/app/common/views/components/page-editor/page-editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/page-editor/page-editor.vue b/src/client/app/common/views/components/page-editor/page-editor.vue
index a3f69ea5c3..6f4cf9b6b5 100644
--- a/src/client/app/common/views/components/page-editor/page-editor.vue
+++ b/src/client/app/common/views/components/page-editor/page-editor.vue
@@ -11,7 +11,7 @@
 		</header>
 
 		<section>
-			<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
+			<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
 
 			<ui-input v-model="title">
 				<span>{{ $t('title') }}</span>
-- 
cgit v1.2.3-freya


From 358bb0fc0641e43d3a7452614f5ef43c19c4d2e6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 18:11:33 +0900
Subject: Misskey Pages でURLプレビューを表示するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/common/views/pages/page/page.text.vue       | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/page/page.text.vue b/src/client/app/common/views/pages/page/page.text.vue
index ca2565c8d4..326fd39050 100644
--- a/src/client/app/common/views/pages/page/page.text.vue
+++ b/src/client/app/common/views/pages/page/page.text.vue
@@ -1,11 +1,15 @@
 <template>
 <div class="mrdgzndn">
 	<mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
+
+	<mk-url-preview v-for="url in urls" :url="url" :key="url" class="url"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { parse } from '../../../../../../mfm/parse';
+import { unique } from '../../../../../../prelude/array';
 
 export default Vue.extend({
 	props: {
@@ -23,6 +27,20 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		urls(): string[] {
+			if (this.text) {
+				const ast = parse(this.text);
+				// TODO: 再帰的にURL要素がないか調べる
+				return unique(ast
+					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.map(t => t.node.props.url));
+			} else {
+				return [];
+			}
+		}
+	},
+
 	created() {
 		this.$watch('script.vars', () => {
 			this.text = this.script.interpolate(this.value.text);
@@ -38,4 +56,7 @@ export default Vue.extend({
 
 	&:not(:last-child)
 		margin-bottom 0.5em
+
+	> .url
+		margin 0.5em 0
 </style>
-- 
cgit v1.2.3-freya


From 36c2d0082f7c54d9fb99069aa60b8a8d67630ad3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 19:19:43 +0900
Subject: MisskeyPagesをホームUIに統合
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/components/mfm.ts      |   6 +-
 .../page-editor/els/page-editor.el.button.vue      |  54 ---
 .../page-editor/els/page-editor.el.counter.vue     |  42 --
 .../page-editor/els/page-editor.el.if.vue          |  90 ----
 .../page-editor/els/page-editor.el.image.vue       |  78 ----
 .../els/page-editor.el.number-input.vue            |  42 --
 .../page-editor/els/page-editor.el.post.vue        |  40 --
 .../page-editor/els/page-editor.el.section.vue     | 103 -----
 .../page-editor/els/page-editor.el.switch.vue      |  48 --
 .../page-editor/els/page-editor.el.text-input.vue  |  42 --
 .../page-editor/els/page-editor.el.text.vue        |  58 ---
 .../els/page-editor.el.textarea-input.vue          |  42 --
 .../page-editor/els/page-editor.el.textarea.vue    |  58 ---
 .../components/page-editor/page-editor.blocks.vue  |  65 ---
 .../page-editor/page-editor.container.vue          | 146 ------
 .../page-editor/page-editor.script-block.vue       | 271 ------------
 .../views/components/page-editor/page-editor.vue   | 473 --------------------
 .../app/common/views/components/url-preview.vue    |  11 +-
 src/client/app/common/views/components/url.vue     |  12 +-
 .../page-editor/els/page-editor.el.button.vue      |  54 +++
 .../page-editor/els/page-editor.el.counter.vue     |  42 ++
 .../pages/page-editor/els/page-editor.el.if.vue    |  90 ++++
 .../pages/page-editor/els/page-editor.el.image.vue |  78 ++++
 .../els/page-editor.el.number-input.vue            |  42 ++
 .../pages/page-editor/els/page-editor.el.post.vue  |  40 ++
 .../page-editor/els/page-editor.el.section.vue     | 103 +++++
 .../page-editor/els/page-editor.el.switch.vue      |  48 ++
 .../page-editor/els/page-editor.el.text-input.vue  |  42 ++
 .../pages/page-editor/els/page-editor.el.text.vue  |  58 +++
 .../els/page-editor.el.textarea-input.vue          |  42 ++
 .../page-editor/els/page-editor.el.textarea.vue    |  58 +++
 .../views/pages/page-editor/page-editor.blocks.vue |  65 +++
 .../pages/page-editor/page-editor.container.vue    | 146 ++++++
 .../pages/page-editor/page-editor.script-block.vue | 271 ++++++++++++
 .../common/views/pages/page-editor/page-editor.vue | 490 +++++++++++++++++++++
 src/client/app/common/views/pages/page/page.vue    |  10 +-
 src/client/app/desktop/script.ts                   |   8 +-
 src/client/app/desktop/views/pages/page-editor.vue |  67 ---
 src/client/app/desktop/views/pages/page.vue        |  36 --
 src/client/app/mobile/script.ts                    |   8 +-
 src/client/app/mobile/views/pages/page-editor.vue  |  67 ---
 src/client/app/mobile/views/pages/page.vue         |  39 --
 42 files changed, 1701 insertions(+), 1884 deletions(-)
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.counter.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.number-input.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.post.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.text-input.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.textarea-input.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/els/page-editor.el.textarea.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.blocks.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.container.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.script-block.vue
 delete mode 100644 src/client/app/common/views/components/page-editor/page-editor.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.counter.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.if.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.image.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.number-input.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.post.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.section.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.switch.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.text-input.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.text.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea-input.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/page-editor.blocks.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/page-editor.container.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/page-editor.script-block.vue
 create mode 100644 src/client/app/common/views/pages/page-editor/page-editor.vue
 delete mode 100644 src/client/app/desktop/views/pages/page-editor.vue
 delete mode 100644 src/client/app/desktop/views/pages/page.vue
 delete mode 100644 src/client/app/mobile/views/pages/page-editor.vue
 delete mode 100644 src/client/app/mobile/views/pages/page.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index 9459172881..7de29b2aad 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -8,7 +8,7 @@ import { concat, sum } from '../../../../../prelude/array';
 import MkFormula from './formula.vue';
 import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import { host } from '../../../config';
+import { host, url } from '../../../config';
 import { preorderF, countNodesF } from '../../../../../prelude/tree';
 
 function sumTextsLength(ts: MfmForest): number {
@@ -175,7 +175,9 @@ export default Vue.component('misskey-flavored-markdown', {
 						props: {
 							url: token.node.props.url,
 							rel: 'nofollow noopener',
-							target: '_blank'
+							...(token.node.props.url.startsWith(url) ? {} : {
+								target: '_blank'
+							})
 						},
 						attrs: {
 							style: 'color:var(--mfmUrl);'
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
deleted file mode 100644
index f89279f05a..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.button') }}</template>
-
-	<section class="xfhsjczc">
-		<ui-input v-model="value.text"><span>{{ $t('blocks._button.text') }}</span></ui-input>
-		<ui-select v-model="value.action">
-			<template #label>{{ $t('blocks._button.action') }}</template>
-			<option value="dialog">{{ $t('blocks._button._action.dialog') }}</option>
-			<option value="resetRandom">{{ $t('blocks._button._action.resetRandom') }}</option>
-		</ui-select>
-		<ui-input v-if="value.action === 'dialog'" v-model="value.content"><span>{{ $t('blocks._button._action._dialog.content') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt
-		};
-	},
-
-	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-		if (this.value.action == null) Vue.set(this.value, 'action', 'dialog');
-		if (this.value.content == null) Vue.set(this.value, 'content', null);
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.xfhsjczc
-	padding 0 16px 0 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.counter.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.counter.vue
deleted file mode 100644
index 95c15b01b2..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.counter.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.counter') }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._counter.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._counter.text') }}</span></ui-input>
-		<ui-input v-model="value.inc" type="number"><span>{{ $t('blocks._counter.increment') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faMagic
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-	},
-});
-</script>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
deleted file mode 100644
index c83cd421ae..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faQuestion"/> {{ $t('blocks.if') }}</template>
-	<template #func>
-		<button @click="add()">
-			<fa :icon="faPlus"/>
-		</button>
-	</template>
-
-	<section class="romcojzs">
-		<ui-select v-model="value.var">
-			<template #label>{{ $t('blocks._if.variable') }}</template>
-			<option v-for="v in aiScript.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$t('script.pageVariables')">
-				<option v-for="v in aiScript.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="$t('script.enviromentVariables')">
-				<option v-for="v in aiScript.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-		</ui-select>
-
-		<x-blocks class="children" v-model="value.children" :ai-script="aiScript"/>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as uuid from 'uuid';
-import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	inject: ['getPageBlockList'],
-
-	props: {
-		value: {
-			required: true
-		},
-		aiScript: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			faPlus, faQuestion
-		};
-	},
-
-	beforeCreate() {
-		this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
-	},
-
-	created() {
-		if (this.value.children == null) Vue.set(this.value, 'children', []);
-		if (this.value.var === undefined) Vue.set(this.value, 'var', null);
-	},
-
-	methods: {
-		async add() {
-			const { canceled, result: type } = await this.$root.dialog({
-				type: null,
-				title: this.$t('choose-block'),
-				select: {
-					groupedItems: this.getPageBlockList()
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			const id = uuid.v4();
-			this.value.children.push({ id, type });
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.romcojzs
-	padding 0 16px 16px 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
deleted file mode 100644
index 98ec39a512..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faImage"/> {{ $t('blocks.image') }}</template>
-	<template #func>
-		<button @click="choose()">
-			<fa :icon="faFolderOpen"/>
-		</button>
-	</template>
-
-	<section class="oyyftmcf">
-		<x-file-thumbnail class="preview" v-if="file" :file="file" :detail="true" fit="contain" @click="choose()"/>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-import XFileThumbnail from '../../drive-file-thumbnail.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer, XFileThumbnail
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			file: null,
-			faPencilAlt, faImage, faFolderOpen
-		};
-	},
-
-	created() {
-		if (this.value.fileId === undefined) Vue.set(this.value, 'fileId', null);
-	},
-
-	mounted() {
-		if (this.value.fileId == null) {
-			this.choose();
-		} else {
-			this.$root.api('drive/files/show', {
-				fileId: this.value.fileId
-			}).then(file => {
-				this.file = file;
-			});
-		}
-	},
-
-	methods: {
-		async choose() {
-			this.$chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.file = file;
-				this.value.fileId = file.id;
-			});
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.oyyftmcf
-	> .preview
-		height 150px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.number-input.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.number-input.vue
deleted file mode 100644
index 30c3938111..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.number-input.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.numberInput') }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._numberInput.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._numberInput.text') }}</span></ui-input>
-		<ui-input v-model="value.default" type="number"><span>{{ $t('blocks._numberInput.default') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faMagic
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-	},
-});
-</script>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.post.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.post.vue
deleted file mode 100644
index fc2f5f9032..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.post.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faPaperPlane"/> {{ $t('blocks.post') }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<ui-textarea v-model="value.text">{{ $t('blocks._post.text') }}</ui-textarea>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faPaperPlane
-		};
-	},
-
-	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-	},
-});
-</script>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
deleted file mode 100644
index c20f824e23..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
-	<template #func>
-		<button @click="rename()">
-			<fa :icon="faPencilAlt"/>
-		</button>
-		<button @click="add()">
-			<fa :icon="faPlus"/>
-		</button>
-	</template>
-
-	<section class="ilrvjyvi">
-		<x-blocks class="children" v-model="value.children" :ai-script="aiScript"/>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as uuid from 'uuid';
-import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	inject: ['getPageBlockList'],
-
-	props: {
-		value: {
-			required: true
-		},
-		aiScript: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			faStickyNote, faPlus, faPencilAlt
-		};
-	},
-
-	beforeCreate() {
-		this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
-	},
-
-	created() {
-		if (this.value.title == null) Vue.set(this.value, 'title', null);
-		if (this.value.children == null) Vue.set(this.value, 'children', []);
-	},
-
-	mounted() {
-		if (this.value.title == null) {
-			this.rename();
-		}
-	},
-
-	methods: {
-		async rename() {
-			const { canceled, result: title } = await this.$root.dialog({
-				title: 'Enter title',
-				input: {
-					type: 'text',
-					default: this.value.title
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.value.title = title;
-		},
-
-		async add() {
-			const { canceled, result: type } = await this.$root.dialog({
-				type: null,
-				title: this.$t('choose-block'),
-				select: {
-					groupedItems: this.getPageBlockList()
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			const id = uuid.v4();
-			this.value.children.push({ id, type });
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.ilrvjyvi
-	> .children
-		padding 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
deleted file mode 100644
index 174a344640..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.switch') }}</template>
-
-	<section class="kjuadyyj">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._switch.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._switch.text') }}</span></ui-input>
-		<ui-switch v-model="value.default"><span>{{ $t('blocks._switch.default') }}</span></ui-switch>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faMagic
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.kjuadyyj
-	padding 0 16px 16px 16px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.text-input.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.text-input.vue
deleted file mode 100644
index 50f95fd205..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.text-input.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.textInput') }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._textInput.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._textInput.text') }}</span></ui-input>
-		<ui-input v-model="value.default" type="text"><span>{{ $t('blocks._textInput.default') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faMagic
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-	},
-});
-</script>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
deleted file mode 100644
index c09f9cc1cf..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.text') }}</template>
-
-	<section class="ihymsbbe">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faAlignLeft,
-		};
-	},
-
-	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.ihymsbbe
-	> textarea
-		display block
-		-webkit-appearance none
-		-moz-appearance none
-		appearance none
-		width 100%
-		min-width 100%
-		min-height 150px
-		border none
-		box-shadow none
-		padding 16px
-		background transparent
-		color var(--text)
-		font-size 14px
-</style>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.textarea-input.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.textarea-input.vue
deleted file mode 100644
index da3eead080..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.textarea-input.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.textareaInput') }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._textareaInput.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._textareaInput.text') }}</span></ui-input>
-		<ui-textarea v-model="value.default"><span>{{ $t('blocks._textareaInput.default') }}</span></ui-textarea>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faMagic
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-	},
-});
-</script>
diff --git a/src/client/app/common/views/components/page-editor/els/page-editor.el.textarea.vue b/src/client/app/common/views/components/page-editor/els/page-editor.el.textarea.vue
deleted file mode 100644
index a0cc1966e8..0000000000
--- a/src/client/app/common/views/components/page-editor/els/page-editor.el.textarea.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')" :draggable="true">
-	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.textarea') }}</template>
-
-	<section class="ihymsbbe">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faAlignLeft,
-		};
-	},
-
-	created() {
-		if (this.value.text == null) Vue.set(this.value, 'text', '');
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.ihymsbbe
-	> textarea
-		display block
-		-webkit-appearance none
-		-moz-appearance none
-		appearance none
-		width 100%
-		min-width 100%
-		min-height 150px
-		border none
-		box-shadow none
-		padding 16px
-		background transparent
-		color var(--text)
-		font-size 14px
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.blocks.vue b/src/client/app/common/views/components/page-editor/page-editor.blocks.vue
deleted file mode 100644
index c5f3419e7b..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.blocks.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @input="updateItem" @remove="() => removeItem(block)" :key="block.id" :ai-script="aiScript"/>
-</x-draggable>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
-import XSection from './els/page-editor.el.section.vue';
-import XText from './els/page-editor.el.text.vue';
-import XTextarea from './els/page-editor.el.textarea.vue';
-import XImage from './els/page-editor.el.image.vue';
-import XButton from './els/page-editor.el.button.vue';
-import XTextInput from './els/page-editor.el.text-input.vue';
-import XTextareaInput from './els/page-editor.el.textarea-input.vue';
-import XNumberInput from './els/page-editor.el.number-input.vue';
-import XSwitch from './els/page-editor.el.switch.vue';
-import XIf from './els/page-editor.el.if.vue';
-import XPost from './els/page-editor.el.post.vue';
-import XCounter from './els/page-editor.el.counter.vue';
-
-export default Vue.extend({
-	components: {
-		XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter
-	},
-
-	props: {
-		value: {
-			type: Array,
-			required: true
-		},
-		aiScript: {
-			required: true,
-		},
-	},
-
-	computed: {
-		blocks() {
-			return this.value;
-		}
-	},
-
-	methods: {
-		updateItem(v) {
-			const i = this.blocks.findIndex(x => x.id === v.id);
-			const newValue = [
-				...this.blocks.slice(0, i),
-				v,
-				...this.blocks.slice(i + 1)
-			];
-			this.$emit('input', newValue);
-		},
-
-		removeItem(el) {
-			const i = this.blocks.findIndex(x => x.id === el.id);
-			const newValue = [
-				...this.blocks.slice(0, i),
-				...this.blocks.slice(i + 1)
-			];
-			this.$emit('input', newValue);
-		},
-	}
-});
-</script>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.container.vue b/src/client/app/common/views/components/page-editor/page-editor.container.vue
deleted file mode 100644
index a3a501afb4..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.container.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
-	<header>
-		<div class="title"><slot name="header"></slot></div>
-		<div class="buttons">
-			<slot name="func"></slot>
-			<button v-if="removable" @click="remove()">
-				<fa :icon="faTrashAlt"/>
-			</button>
-			<button v-if="draggable" class="drag-handle">
-				<fa :icon="faBars"/>
-			</button>
-			<button @click="toggleContent(!showBody)">
-				<template v-if="showBody"><fa icon="angle-up"/></template>
-				<template v-else><fa icon="angle-down"/></template>
-			</button>
-		</div>
-	</header>
-	<p v-show="showBody" class="error" v-if="error != null">{{ $t('script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
-	<p v-show="showBody" class="warn" v-if="warn != null">{{ $t('script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
-	<div v-show="showBody">
-		<slot></slot>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import i18n from '../../../../i18n';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	props: {
-		expanded: {
-			type: Boolean,
-			default: true
-		},
-		removable: {
-			type: Boolean,
-			default: true
-		},
-		draggable: {
-			type: Boolean,
-			default: false
-		},
-		error: {
-			required: false,
-			default: null
-		},
-		warn: {
-			required: false,
-			default: null
-		}
-	},
-	data() {
-		return {
-			showBody: this.expanded,
-			faTrashAlt, faBars
-		};
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			this.showBody = show;
-			this.$emit('toggle', show);
-		},
-		remove() {
-			this.$emit('remove');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.cpjygsrt
-	overflow hidden
-	background var(--face)
-	border solid 2px var(--pageBlockBorder)
-	border-radius 6px
-
-	&:hover
-		border solid 2px var(--pageBlockBorderHover)
-
-	&.warn
-		border solid 2px #dec44c
-
-	&.error
-		border solid 2px #f00
-
-	& + .cpjygsrt
-		margin-top 16px
-
-	> header
-		> .title
-			z-index 1
-			margin 0
-			padding 0 16px
-			line-height 42px
-			font-size 0.9em
-			font-weight bold
-			color var(--faceHeaderText)
-			box-shadow 0 1px rgba(#000, 0.07)
-
-			> [data-icon]
-				margin-right 6px
-
-			&:empty
-				display none
-
-		> .buttons
-			position absolute
-			z-index 2
-			top 0
-			right 0
-
-			> button
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color var(--faceTextButton)
-
-				&:hover
-					color var(--faceTextButtonHover)
-
-				&:active
-					color var(--faceTextButtonActive)
-
-			.drag-handle
-				cursor move
-
-	> .warn
-		color #b19e49
-		margin 0
-		padding 16px 16px 0 16px
-		font-size 14px
-
-	> .error
-		color #f00
-		margin 0
-		padding 16px 16px 0 16px
-		font-size 14px
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.script-block.vue b/src/client/app/common/views/components/page-editor/page-editor.script-block.vue
deleted file mode 100644
index faecaf61fa..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.script-block.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<template>
-<x-container :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
-	<template #header><fa v-if="icon" :icon="icon"/> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
-	<template #func>
-		<button @click="changeType()">
-			<fa :icon="faPencilAlt"/>
-		</button>
-	</template>
-
-	<section v-if="value.type === null" class="pbglfege" @click="changeType()">
-		{{ $t('script.emptySlot') }}
-	</section>
-	<section v-else-if="value.type === 'text'" class="tbwccoaw">
-		<input v-model="value.value"/>
-	</section>
-	<section v-else-if="value.type === 'multiLineText'" class="tbwccoaw">
-		<textarea v-model="value.value"></textarea>
-	</section>
-	<section v-else-if="value.type === 'textList'" class="tbwccoaw">
-		<textarea v-model="value.value" :placeholder="$t('script.blocks._textList.info')"></textarea>
-	</section>
-	<section v-else-if="value.type === 'number'" class="tbwccoaw">
-		<input v-model="value.value" type="number"/>
-	</section>
-	<section v-else-if="value.type === 'ref'" class="hpdwcrvs">
-		<select v-model="value.value">
-			<option v-for="v in aiScript.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$t('script.argVariables')">
-				<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
-			</optgroup>
-			<optgroup :label="$t('script.pageVariables')">
-				<option v-for="v in aiScript.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="$t('script.enviromentVariables')">
-				<option v-for="v in aiScript.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-		</select>
-	</section>
-	<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
-		<ui-textarea v-model="slots">
-			<span>{{ $t('script.blocks._fn.slots') }}</span>
-			<template #desc>{{ $t('script.blocks._fn.slots-info') }}</template>
-		</ui-textarea>
-		<x-v v-if="value.value.expression" v-model="value.value.expression" :title="$t(`script.blocks._fn.arg1`)" :get-expected-type="() => null" :ai-script="aiScript" :fn-slots="value.value.slots" :name="name"/>
-	</section>
-	<section v-else-if="value.type.startsWith('fn:')" class="" style="padding:16px;">
-		<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="aiScript.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :ai-script="aiScript" :name="name" :key="i"/>
-	</section>
-	<section v-else class="" style="padding:16px;">
-		<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="$t(`script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :ai-script="aiScript" :name="name" :fn-slots="fnSlots" :key="i"/>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../../i18n';
-import XContainer from './page-editor.container.vue';
-import { faPencilAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
-import { isLiteralBlock, funcDefs, blockDefs } from '../../../../../../misc/aiscript/index';
-import * as uuid from 'uuid';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	inject: ['getScriptBlockList'],
-
-	props: {
-		getExpectedType: {
-			required: false,
-			default: null
-		},
-		value: {
-			required: true
-		},
-		title: {
-			required: false
-		},
-		removable: {
-			required: false,
-			default: false
-		},
-		aiScript: {
-			required: true,
-		},
-		name: {
-			required: true,
-		},
-		fnSlots: {
-			required: false,
-		},
-		draggable: {
-			required: false,
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			error: null,
-			warn: null,
-			slots: '',
-			faPencilAlt
-		};
-	},
-
-	computed: {
-		icon(): any {
-			if (this.value.type === null) return null;
-			if (this.value.type.startsWith('fn:')) return faPlug;
-			return blockDefs.find(x => x.type === this.value.type).icon;
-		},
-		typeText(): any {
-			if (this.value.type === null) return null;
-			if (this.value.type.startsWith('fn:')) return this.value.type.split(':')[1];
-			return this.$t(`script.blocks.${this.value.type}`);
-		},
-	},
-
-	watch: {
-		slots() {
-			this.value.value.slots = this.slots.split('\n').map(x => ({
-				name: x,
-				type: null
-			}));
-		}
-	},
-
-	beforeCreate() {
-		this.$options.components.XV = require('./page-editor.script-block.vue').default;
-	},
-
-	created() {
-		if (this.value.value == null) Vue.set(this.value, 'value', null);
-
-		if (this.value.value && this.value.value.slots) this.slots = this.value.value.slots.map(x => x.name).join('\n');
-
-		this.$watch('value.type', (t) => {
-			this.warn = null;
-
-			if (this.value.type === 'fn') {
-				const id = uuid.v4();
-				this.value.value = {};
-				Vue.set(this.value.value, 'slots', []);
-				Vue.set(this.value.value, 'expression', { id, type: null });
-				return;
-			}
-
-			if (this.value.type && this.value.type.startsWith('fn:')) {
-				const fnName = this.value.type.split(':')[1];
-				const fn = this.aiScript.getVarByName(fnName);
-
-				const empties = [];
-				for (let i = 0; i < fn.value.slots.length; i++) {
-					const id = uuid.v4();
-					empties.push({ id, type: null });
-				}
-				Vue.set(this.value, 'args', empties);
-				return;
-			}
-
-			if (isLiteralBlock(this.value)) return;
-
-			const empties = [];
-			for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
-				const id = uuid.v4();
-				empties.push({ id, type: null });
-			}
-			Vue.set(this.value, 'args', empties);
-
-			for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
-				const inType = funcDefs[this.value.type].in[i];
-				if (typeof inType !== 'number') {
-					if (inType === 'number') this.value.args[i].type = 'number';
-					if (inType === 'string') this.value.args[i].type = 'text';
-				}
-			}
-		});
-
-		this.$watch('value.args', (args) => {
-			if (args == null) {
-				this.warn = null;
-				return;
-			}
-			const emptySlotIndex = args.findIndex(x => x.type === null);
-			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
-				this.warn = {
-					slot: emptySlotIndex
-				};
-			} else {
-				this.warn = null;
-			}
-		}, {
-			deep: true
-		});
-
-		this.$watch('aiScript.variables', () => {
-			if (this.type != null && this.value) {
-				this.error = this.aiScript.typeCheck(this.value);
-			}
-		}, {
-			deep: true
-		});
-	},
-
-	methods: {
-		async changeType() {
-			const { canceled, result: type } = await this.$root.dialog({
-				type: null,
-				title: this.$t('select-type'),
-				select: {
-					groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.value.type = type;
-		},
-
-		_getExpectedType(slot: number) {
-			return this.aiScript.getExpectedType(this.value, slot);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.turmquns
-	opacity 0.7
-
-.pbglfege
-	opacity 0.5
-	padding 16px
-	text-align center
-	cursor pointer
-	color var(--text)
-
-.tbwccoaw
-	> input
-	> textarea
-		display block
-		-webkit-appearance none
-		-moz-appearance none
-		appearance none
-		width 100%
-		max-width 100%
-		min-width 100%
-		border none
-		box-shadow none
-		padding 16px
-		font-size 16px
-		background transparent
-		color var(--text)
-
-	> textarea
-		min-height 100px
-
-.hpdwcrvs
-	padding 16px
-
-	> select
-		display block
-		padding 4px
-		font-size 16px
-		width 100%
-
-</style>
diff --git a/src/client/app/common/views/components/page-editor/page-editor.vue b/src/client/app/common/views/components/page-editor/page-editor.vue
deleted file mode 100644
index 6f4cf9b6b5..0000000000
--- a/src/client/app/common/views/components/page-editor/page-editor.vue
+++ /dev/null
@@ -1,473 +0,0 @@
-<template>
-<div>
-	<div class="gwbmwxkm" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
-		<header>
-			<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('read-page') : pageId ? $t('edit-page') : $t('new-page') }}</div>
-			<div class="buttons">
-				<button @click="del()" v-if="!readonly"><fa :icon="faTrashAlt"/></button>
-				<button @click="() => showOptions = !showOptions"><fa :icon="faCog"/></button>
-				<button @click="save()" v-if="!readonly"><fa :icon="faSave"/></button>
-			</div>
-		</header>
-
-		<section>
-			<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
-
-			<ui-input v-model="title">
-				<span>{{ $t('title') }}</span>
-			</ui-input>
-
-			<template v-if="showOptions">
-				<ui-input v-model="summary">
-					<span>{{ $t('summary') }}</span>
-				</ui-input>
-
-				<ui-input v-model="name">
-					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<span>{{ $t('url') }}</span>
-				</ui-input>
-
-				<ui-switch v-model="alignCenter">{{ $t('align-center') }}</ui-switch>
-
-				<ui-select v-model="font">
-					<template #label>{{ $t('font') }}</template>
-					<option value="serif">{{ $t('fontSerif') }}</option>
-					<option value="sans-serif">{{ $t('fontSansSerif') }}</option>
-				</ui-select>
-
-				<div class="eyeCatch">
-					<ui-button v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><fa :icon="faPlus"/> {{ $t('set-eye-catching-image') }}</ui-button>
-					<div v-else-if="eyeCatchingImage">
-						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name"/>
-						<ui-button @click="removeEyeCatchingImage()" v-if="!readonly"><fa :icon="faTrashAlt"/> {{ $t('remove-eye-catching-image') }}</ui-button>
-					</div>
-				</div>
-			</template>
-
-			<x-blocks class="content" v-model="content" :ai-script="aiScript"/>
-
-			<ui-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
-		</section>
-	</div>
-
-	<ui-container :body-togglable="true">
-		<template #header><fa :icon="faMagic"/> {{ $t('variables') }}</template>
-		<div class="qmuvgica">
-			<x-draggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-				<x-variable v-for="variable in variables"
-					:value="variable"
-					:removable="true"
-					@input="v => updateVariable(v)"
-					@remove="() => removeVariable(variable)"
-					:key="variable.name"
-					:ai-script="aiScript"
-					:name="variable.name"
-					:title="variable.name"
-					:draggable="true"
-				/>
-			</x-draggable>
-
-			<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
-
-			<ui-info><span v-html="$t('variables-info')"></span><a @click="() => moreDetails = true" style="display:block;">{{ $t('more-details') }}</a></ui-info>
-
-			<template v-if="moreDetails">
-				<ui-info><span v-html="$t('variables-info2')"></span></ui-info>
-				<ui-info><span v-html="$t('variables-info3')"></span></ui-info>
-				<ui-info><span v-html="$t('variables-info4')"></span></ui-info>
-			</template>
-		</div>
-	</ui-container>
-
-	<ui-container :body-togglable="true" :expanded="false">
-		<template #header><fa :icon="faCode"/> {{ $t('inspector') }}</template>
-		<div style="padding:0 32px 32px 32px;">
-			<ui-textarea :value="JSON.stringify(content, null, 2)" readonly tall>{{ $t('content') }}</ui-textarea>
-			<ui-textarea :value="JSON.stringify(variables, null, 2)" readonly tall>{{ $t('variables') }}</ui-textarea>
-		</div>
-	</ui-container>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
-import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import i18n from '../../../../i18n';
-import XVariable from './page-editor.script-block.vue';
-import XBlocks from './page-editor.blocks.vue';
-import * as uuid from 'uuid';
-import { blockDefs } from '../../../../../../misc/aiscript/index';
-import { ASTypeChecker } from '../../../../../../misc/aiscript/type-checker';
-import { url } from '../../../../config';
-import { collectPageVars } from '../../../scripts/collect-page-vars';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XDraggable, XVariable, XBlocks
-	},
-
-	props: {
-		page: {
-			type: Object,
-			required: false
-		},
-		readonly: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-	},
-
-	data() {
-		return {
-			author: this.$store.state.i,
-			pageId: null,
-			currentName: null,
-			title: '',
-			summary: null,
-			name: Date.now().toString(),
-			eyeCatchingImage: null,
-			eyeCatchingImageId: null,
-			font: 'sans-serif',
-			content: [],
-			alignCenter: false,
-			variables: [],
-			aiScript: null,
-			showOptions: false,
-			moreDetails: false,
-			url,
-			faPlus, faICursor, faSave, faStickyNote, faMagic, faCog, faTrashAlt, faExternalLinkSquareAlt, faCode
-		};
-	},
-
-	watch: {
-		async eyeCatchingImageId() {
-			if (this.eyeCatchingImageId == null) {
-				this.eyeCatchingImage = null;
-			} else {
-				this.eyeCatchingImage = await this.$root.api('drive/files/show', {
-					fileId: this.eyeCatchingImageId,
-				});
-			}
-		},
-	},
-
-	created() {
-		this.aiScript = new ASTypeChecker();
-
-		this.$watch('variables', () => {
-			this.aiScript.variables = this.variables;
-		}, { deep: true });
-
-		this.$watch('content', () => {
-			this.aiScript.pageVars = collectPageVars(this.content);
-		}, { deep: true });
-
-		if (this.page) {
-			this.author = this.page.user;
-			this.pageId = this.page.id;
-			this.title = this.page.title;
-			this.name = this.page.name;
-			this.currentName = this.page.name;
-			this.summary = this.page.summary;
-			this.font = this.page.font;
-			this.alignCenter = this.page.alignCenter;
-			this.content = this.page.content;
-			this.variables = this.page.variables;
-			this.eyeCatchingImageId = this.page.eyeCatchingImageId;
-		} else {
-			const id = uuid.v4();
-			this.content = [{
-				id,
-				type: 'text',
-				text: 'Hello World!'
-			}];
-		}
-	},
-
-	provide() {
-		return {
-			readonly: this.readonly,
-			getScriptBlockList: this.getScriptBlockList,
-			getPageBlockList: this.getPageBlockList
-		}
-	},
-
-	methods: {
-		save() {
-			if (this.pageId) {
-				this.$root.api('pages/update', {
-					pageId: this.pageId,
-					title: this.title.trim(),
-					name: this.name.trim(),
-					summary: this.summary,
-					font: this.font,
-					alignCenter: this.alignCenter,
-					content: this.content,
-					variables: this.variables,
-					eyeCatchingImageId: this.eyeCatchingImageId,
-				}).then(page => {
-					this.currentName = this.name.trim();
-					this.$root.dialog({
-						type: 'success',
-						text: this.$t('page-updated')
-					});
-				});
-			} else {
-				this.$root.api('pages/create', {
-					title: this.title.trim(),
-					name: this.name.trim(),
-					summary: this.summary,
-					font: this.font,
-					alignCenter: this.alignCenter,
-					content: this.content,
-					variables: this.variables,
-					eyeCatchingImageId: this.eyeCatchingImageId,
-				}).then(page => {
-					this.pageId = page.id;
-					this.currentName = this.name.trim();
-					this.$root.dialog({
-						type: 'success',
-						text: this.$t('page-created')
-					});
-					this.$router.push(`/i/pages/edit/${this.pageId}`);
-				});
-			}
-		},
-
-		del() {
-			this.$root.dialog({
-				type: 'warning',
-				text: this.$t('are-you-sure-delete'),
-				showCancelButton: true
-			}).then(({ canceled }) => {
-				if (canceled) return;
-				this.$root.api('pages/delete', {
-					pageId: this.pageId,
-				}).then(() => {
-					this.$root.dialog({
-						type: 'success',
-						text: this.$t('page-deleted')
-					});
-					this.$router.push(`/i/pages`);
-				});
-			});
-		},
-
-		async add() {
-			const { canceled, result: type } = await this.$root.dialog({
-				type: null,
-				title: this.$t('choose-block'),
-				select: {
-					groupedItems: this.getPageBlockList()
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			const id = uuid.v4();
-			this.content.push({ id, type });
-		},
-
-		async addVariable() {
-			let { canceled, result: name } = await this.$root.dialog({
-				title: this.$t('enter-variable-name'),
-				input: {
-					type: 'text',
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			name = name.trim();
-
-			if (this.aiScript.isUsedName(name)) {
-				this.$root.dialog({
-					type: 'error',
-					text: this.$t('the-variable-name-is-already-used')
-				});
-				return;
-			}
-
-			const id = uuid.v4();
-			this.variables.push({ id, name, type: null });
-		},
-
-		removeVariable(v) {
-			const i = this.variables.findIndex(x => x.name === v.name);
-			const newValue = [
-				...this.variables.slice(0, i),
-				...this.variables.slice(i + 1)
-			];
-			this.variables = newValue;
-		},
-
-		getPageBlockList() {
-			return [{
-				label: this.$t('content-blocks'),
-				items: [
-					{ value: 'section', text: this.$t('blocks.section') },
-					{ value: 'text', text: this.$t('blocks.text') },
-					{ value: 'image', text: this.$t('blocks.image') },
-					{ value: 'textarea', text: this.$t('blocks.textarea') },
-				]
-			}, {
-				label: this.$t('input-blocks'),
-				items: [
-					{ value: 'button', text: this.$t('blocks.button') },
-					{ value: 'textInput', text: this.$t('blocks.textInput') },
-					{ value: 'textareaInput', text: this.$t('blocks.textareaInput') },
-					{ value: 'numberInput', text: this.$t('blocks.numberInput') },
-					{ value: 'switch', text: this.$t('blocks.switch') },
-					{ value: 'counter', text: this.$t('blocks.counter') }
-				]
-			}, {
-				label: this.$t('special-blocks'),
-				items: [
-					{ value: 'if', text: this.$t('blocks.if') },
-					{ value: 'post', text: this.$t('blocks.post') }
-				]
-			}];
-		},
-
-		getScriptBlockList(type: string = null) {
-			const list = [];
-
-			const blocks = blockDefs.filter(block => type === null || block.out === null || block.out === type || typeof block.out === 'number');
-
-			for (const block of blocks) {
-				const category = list.find(x => x.category === block.category);
-				if (category) {
-					category.items.push({
-						value: block.type,
-						text: this.$t(`script.blocks.${block.type}`)
-					});
-				} else {
-					list.push({
-						category: block.category,
-						label: this.$t(`script.categories.${block.category}`),
-						items: [{
-							value: block.type,
-							text: this.$t(`script.blocks.${block.type}`)
-						}]
-					});
-				}
-			}
-
-			const userFns = this.variables.filter(x => x.type === 'fn');
-			if (userFns.length > 0) {
-				list.unshift({
-					label: this.$t(`script.categories.fn`),
-					items: userFns.map(v => ({
-						value: 'fn:' + v.name,
-						text: v.name
-					}))
-				});
-			}
-
-			return list;
-		},
-
-		setEyeCatchingImage() {
-			this.$chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.eyeCatchingImageId = file.id;
-			});
-		},
-
-		removeEyeCatchingImage() {
-			this.eyeCatchingImageId = null;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.gwbmwxkm
-	overflow hidden
-	background var(--face)
-	margin-bottom 16px
-
-	&.round
-		border-radius 6px
-
-	&.shadow
-		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
-
-	> header
-		background var(--faceHeader)
-
-		> .title
-			z-index 1
-			margin 0
-			padding 0 16px
-			line-height 42px
-			font-size 0.9em
-			font-weight bold
-			color var(--faceHeaderText)
-			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
-
-			> [data-icon]
-				margin-right 6px
-
-			&:empty
-				display none
-
-		> .buttons
-			position absolute
-			z-index 2
-			top 0
-			right 0
-
-			> button
-				padding 0
-				width 42px
-				font-size 0.9em
-				line-height 42px
-				color var(--faceTextButton)
-
-				&:hover
-					color var(--faceTextButtonHover)
-
-				&:active
-					color var(--faceTextButtonActive)
-
-	> section
-		padding 0 32px 32px 32px
-
-		@media (max-width 500px)
-			padding 0 16px 16px 16px
-
-		> .view
-			display inline-block
-			margin 16px 0 0 0
-			font-size 14px
-
-		> .content
-			margin-bottom 16px
-
-		> .eyeCatch
-			margin-bottom 16px
-
-			> div
-				> img
-					max-width 100%
-
-.qmuvgica
-	padding 32px
-
-	@media (max-width 500px)
-		padding 16px
-
-	> .variables
-		margin-bottom 16px
-
-	> .add
-		margin-bottom 16px
-
-</style>
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index 9ca4497ad8..6e0d73eef5 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -9,7 +9,7 @@
 	</blockquote>
 </div>
 <div v-else class="mk-url-preview">
-	<a :class="{ mini: narrow, compact }" :href="url" rel="nofollow noopener" target="_blank" :title="url" v-if="!fetching">
+	<component :is="self ? 'router-link' : 'a'" :class="{ mini: narrow, compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="self ? null : '_blank'" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
 			<button v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enable-player')"><fa :icon="['far', 'play-circle']"/></button>
 		</div>
@@ -23,17 +23,18 @@
 				<p :title="sitename">{{ sitename }}</p>
 			</footer>
 		</article>
-	</a>
+	</component>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { url as misskeyUrl } from '../../../config';
+import { url as local } from '../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/url-preview.vue'),
+
 	props: {
 		url: {
 			type: String,
@@ -74,7 +75,9 @@ export default Vue.extend({
 			},
 			tweetUrl: null,
 			playerEnabled: false,
-			misskeyUrl,
+			local,
+			self: this.url.startsWith(local),
+			attr: this.url.startsWith(local) ? 'to' : 'href'
 		};
 	},
 
diff --git a/src/client/app/common/views/components/url.vue b/src/client/app/common/views/components/url.vue
index faf439814d..840535514d 100644
--- a/src/client/app/common/views/components/url.vue
+++ b/src/client/app/common/views/components/url.vue
@@ -1,29 +1,33 @@
 <template>
-<a class="mk-url" :href="url" :rel="rel" :target="target">
+<component :is="self ? 'router-link' : 'a'" class="mk-url" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target">
 	<span class="schema">{{ schema }}//</span>
 	<span class="hostname">{{ hostname }}</span>
 	<span class="port" v-if="port != ''">:{{ port }}</span>
 	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<fa icon="external-link-square-alt"/>
-</a>
+	<fa icon="external-link-square-alt" v-if="!self"/>
+</component>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { toUnicode as decodePunycode } from 'punycode';
+import { url as local } from '../../../config';
 
 export default Vue.extend({
 	props: ['url', 'rel', 'target'],
 	data() {
 		return {
+			local,
 			schema: null,
 			hostname: null,
 			port: null,
 			pathname: null,
 			query: null,
-			hash: null
+			hash: null,
+			self: this.url.startsWith(local),
+			attr: this.url.startsWith(local) ? 'to' : 'href'
 		};
 	},
 	created() {
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue
new file mode 100644
index 0000000000..f89279f05a
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.button.vue
@@ -0,0 +1,54 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.button') }}</template>
+
+	<section class="xfhsjczc">
+		<ui-input v-model="value.text"><span>{{ $t('blocks._button.text') }}</span></ui-input>
+		<ui-select v-model="value.action">
+			<template #label>{{ $t('blocks._button.action') }}</template>
+			<option value="dialog">{{ $t('blocks._button._action.dialog') }}</option>
+			<option value="resetRandom">{{ $t('blocks._button._action.resetRandom') }}</option>
+		</ui-select>
+		<ui-input v-if="value.action === 'dialog'" v-model="value.content"><span>{{ $t('blocks._button._action._dialog.content') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+		if (this.value.action == null) Vue.set(this.value, 'action', 'dialog');
+		if (this.value.content == null) Vue.set(this.value, 'content', null);
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.xfhsjczc
+	padding 0 16px 0 16px
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.counter.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.counter.vue
new file mode 100644
index 0000000000..95c15b01b2
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.counter.vue
@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.counter') }}</template>
+
+	<section style="padding: 0 16px 0 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._counter.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._counter.text') }}</span></ui-input>
+		<ui-input v-model="value.inc" type="number"><span>{{ $t('blocks._counter.increment') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faMagic
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.if.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.if.vue
new file mode 100644
index 0000000000..c83cd421ae
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.if.vue
@@ -0,0 +1,90 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faQuestion"/> {{ $t('blocks.if') }}</template>
+	<template #func>
+		<button @click="add()">
+			<fa :icon="faPlus"/>
+		</button>
+	</template>
+
+	<section class="romcojzs">
+		<ui-select v-model="value.var">
+			<template #label>{{ $t('blocks._if.variable') }}</template>
+			<option v-for="v in aiScript.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
+			<optgroup :label="$t('script.pageVariables')">
+				<option v-for="v in aiScript.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
+			</optgroup>
+			<optgroup :label="$t('script.enviromentVariables')">
+				<option v-for="v in aiScript.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
+			</optgroup>
+		</ui-select>
+
+		<x-blocks class="children" v-model="value.children" :ai-script="aiScript"/>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	inject: ['getPageBlockList'],
+
+	props: {
+		value: {
+			required: true
+		},
+		aiScript: {
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			faPlus, faQuestion
+		};
+	},
+
+	beforeCreate() {
+		this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
+	},
+
+	created() {
+		if (this.value.children == null) Vue.set(this.value, 'children', []);
+		if (this.value.var === undefined) Vue.set(this.value, 'var', null);
+	},
+
+	methods: {
+		async add() {
+			const { canceled, result: type } = await this.$root.dialog({
+				type: null,
+				title: this.$t('choose-block'),
+				select: {
+					groupedItems: this.getPageBlockList()
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			const id = uuid.v4();
+			this.value.children.push({ id, type });
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.romcojzs
+	padding 0 16px 16px 16px
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.image.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.image.vue
new file mode 100644
index 0000000000..e2e72b04c2
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.image.vue
@@ -0,0 +1,78 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faImage"/> {{ $t('blocks.image') }}</template>
+	<template #func>
+		<button @click="choose()">
+			<fa :icon="faFolderOpen"/>
+		</button>
+	</template>
+
+	<section class="oyyftmcf">
+		<x-file-thumbnail class="preview" v-if="file" :file="file" :detail="true" fit="contain" @click="choose()"/>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+import XFileThumbnail from '../../../components/drive-file-thumbnail.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer, XFileThumbnail
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			file: null,
+			faPencilAlt, faImage, faFolderOpen
+		};
+	},
+
+	created() {
+		if (this.value.fileId === undefined) Vue.set(this.value, 'fileId', null);
+	},
+
+	mounted() {
+		if (this.value.fileId == null) {
+			this.choose();
+		} else {
+			this.$root.api('drive/files/show', {
+				fileId: this.value.fileId
+			}).then(file => {
+				this.file = file;
+			});
+		}
+	},
+
+	methods: {
+		async choose() {
+			this.$chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.file = file;
+				this.value.fileId = file.id;
+			});
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.oyyftmcf
+	> .preview
+		height 150px
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.number-input.vue
new file mode 100644
index 0000000000..30c3938111
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.number-input.vue
@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.numberInput') }}</template>
+
+	<section style="padding: 0 16px 0 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._numberInput.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._numberInput.text') }}</span></ui-input>
+		<ui-input v-model="value.default" type="number"><span>{{ $t('blocks._numberInput.default') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faMagic
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.post.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.post.vue
new file mode 100644
index 0000000000..fc2f5f9032
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.post.vue
@@ -0,0 +1,40 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faPaperPlane"/> {{ $t('blocks.post') }}</template>
+
+	<section style="padding: 0 16px 16px 16px;">
+		<ui-textarea v-model="value.text">{{ $t('blocks._post.text') }}</ui-textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faPaperPlane
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.section.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.section.vue
new file mode 100644
index 0000000000..c20f824e23
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.section.vue
@@ -0,0 +1,103 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
+	<template #func>
+		<button @click="rename()">
+			<fa :icon="faPencilAlt"/>
+		</button>
+		<button @click="add()">
+			<fa :icon="faPlus"/>
+		</button>
+	</template>
+
+	<section class="ilrvjyvi">
+		<x-blocks class="children" v-model="value.children" :ai-script="aiScript"/>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	inject: ['getPageBlockList'],
+
+	props: {
+		value: {
+			required: true
+		},
+		aiScript: {
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			faStickyNote, faPlus, faPencilAlt
+		};
+	},
+
+	beforeCreate() {
+		this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
+	},
+
+	created() {
+		if (this.value.title == null) Vue.set(this.value, 'title', null);
+		if (this.value.children == null) Vue.set(this.value, 'children', []);
+	},
+
+	mounted() {
+		if (this.value.title == null) {
+			this.rename();
+		}
+	},
+
+	methods: {
+		async rename() {
+			const { canceled, result: title } = await this.$root.dialog({
+				title: 'Enter title',
+				input: {
+					type: 'text',
+					default: this.value.title
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			this.value.title = title;
+		},
+
+		async add() {
+			const { canceled, result: type } = await this.$root.dialog({
+				type: null,
+				title: this.$t('choose-block'),
+				select: {
+					groupedItems: this.getPageBlockList()
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			const id = uuid.v4();
+			this.value.children.push({ id, type });
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ilrvjyvi
+	> .children
+		padding 16px
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.switch.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.switch.vue
new file mode 100644
index 0000000000..174a344640
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.switch.vue
@@ -0,0 +1,48 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.switch') }}</template>
+
+	<section class="kjuadyyj">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._switch.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._switch.text') }}</span></ui-input>
+		<ui-switch v-model="value.default"><span>{{ $t('blocks._switch.default') }}</span></ui-switch>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faMagic
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.kjuadyyj
+	padding 0 16px 16px 16px
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.text-input.vue
new file mode 100644
index 0000000000..50f95fd205
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.text-input.vue
@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.textInput') }}</template>
+
+	<section style="padding: 0 16px 0 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._textInput.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._textInput.text') }}</span></ui-input>
+		<ui-input v-model="value.default" type="text"><span>{{ $t('blocks._textInput.default') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faMagic
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.text.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.text.vue
new file mode 100644
index 0000000000..c09f9cc1cf
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.text.vue
@@ -0,0 +1,58 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.text') }}</template>
+
+	<section class="ihymsbbe">
+		<textarea v-model="value.text"></textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faAlignLeft,
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.ihymsbbe
+	> textarea
+		display block
+		-webkit-appearance none
+		-moz-appearance none
+		appearance none
+		width 100%
+		min-width 100%
+		min-height 150px
+		border none
+		box-shadow none
+		padding 16px
+		background transparent
+		color var(--text)
+		font-size 14px
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea-input.vue
new file mode 100644
index 0000000000..da3eead080
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.textareaInput') }}</template>
+
+	<section style="padding: 0 16px 16px 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._textareaInput.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._textareaInput.text') }}</span></ui-input>
+		<ui-textarea v-model="value.default"><span>{{ $t('blocks._textareaInput.default') }}</span></ui-textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faMagic
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea.vue b/src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea.vue
new file mode 100644
index 0000000000..a0cc1966e8
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/els/page-editor.el.textarea.vue
@@ -0,0 +1,58 @@
+<template>
+<x-container @remove="() => $emit('remove')" :draggable="true">
+	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.textarea') }}</template>
+
+	<section class="ihymsbbe">
+		<textarea v-model="value.text"></textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faAlignLeft,
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.ihymsbbe
+	> textarea
+		display block
+		-webkit-appearance none
+		-moz-appearance none
+		appearance none
+		width 100%
+		min-width 100%
+		min-height 150px
+		border none
+		box-shadow none
+		padding 16px
+		background transparent
+		color var(--text)
+		font-size 14px
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue b/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue
new file mode 100644
index 0000000000..c5f3419e7b
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/page-editor.blocks.vue
@@ -0,0 +1,65 @@
+<template>
+<x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @input="updateItem" @remove="() => removeItem(block)" :key="block.id" :ai-script="aiScript"/>
+</x-draggable>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import XSection from './els/page-editor.el.section.vue';
+import XText from './els/page-editor.el.text.vue';
+import XTextarea from './els/page-editor.el.textarea.vue';
+import XImage from './els/page-editor.el.image.vue';
+import XButton from './els/page-editor.el.button.vue';
+import XTextInput from './els/page-editor.el.text-input.vue';
+import XTextareaInput from './els/page-editor.el.textarea-input.vue';
+import XNumberInput from './els/page-editor.el.number-input.vue';
+import XSwitch from './els/page-editor.el.switch.vue';
+import XIf from './els/page-editor.el.if.vue';
+import XPost from './els/page-editor.el.post.vue';
+import XCounter from './els/page-editor.el.counter.vue';
+
+export default Vue.extend({
+	components: {
+		XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter
+	},
+
+	props: {
+		value: {
+			type: Array,
+			required: true
+		},
+		aiScript: {
+			required: true,
+		},
+	},
+
+	computed: {
+		blocks() {
+			return this.value;
+		}
+	},
+
+	methods: {
+		updateItem(v) {
+			const i = this.blocks.findIndex(x => x.id === v.id);
+			const newValue = [
+				...this.blocks.slice(0, i),
+				v,
+				...this.blocks.slice(i + 1)
+			];
+			this.$emit('input', newValue);
+		},
+
+		removeItem(el) {
+			const i = this.blocks.findIndex(x => x.id === el.id);
+			const newValue = [
+				...this.blocks.slice(0, i),
+				...this.blocks.slice(i + 1)
+			];
+			this.$emit('input', newValue);
+		},
+	}
+});
+</script>
diff --git a/src/client/app/common/views/pages/page-editor/page-editor.container.vue b/src/client/app/common/views/pages/page-editor/page-editor.container.vue
new file mode 100644
index 0000000000..a3a501afb4
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/page-editor.container.vue
@@ -0,0 +1,146 @@
+<template>
+<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
+	<header>
+		<div class="title"><slot name="header"></slot></div>
+		<div class="buttons">
+			<slot name="func"></slot>
+			<button v-if="removable" @click="remove()">
+				<fa :icon="faTrashAlt"/>
+			</button>
+			<button v-if="draggable" class="drag-handle">
+				<fa :icon="faBars"/>
+			</button>
+			<button @click="toggleContent(!showBody)">
+				<template v-if="showBody"><fa icon="angle-up"/></template>
+				<template v-else><fa icon="angle-down"/></template>
+			</button>
+		</div>
+	</header>
+	<p v-show="showBody" class="error" v-if="error != null">{{ $t('script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
+	<p v-show="showBody" class="warn" v-if="warn != null">{{ $t('script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
+	<div v-show="showBody">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	props: {
+		expanded: {
+			type: Boolean,
+			default: true
+		},
+		removable: {
+			type: Boolean,
+			default: true
+		},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			required: false,
+			default: null
+		},
+		warn: {
+			required: false,
+			default: null
+		}
+	},
+	data() {
+		return {
+			showBody: this.expanded,
+			faTrashAlt, faBars
+		};
+	},
+	methods: {
+		toggleContent(show: boolean) {
+			this.showBody = show;
+			this.$emit('toggle', show);
+		},
+		remove() {
+			this.$emit('remove');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.cpjygsrt
+	overflow hidden
+	background var(--face)
+	border solid 2px var(--pageBlockBorder)
+	border-radius 6px
+
+	&:hover
+		border solid 2px var(--pageBlockBorderHover)
+
+	&.warn
+		border solid 2px #dec44c
+
+	&.error
+		border solid 2px #f00
+
+	& + .cpjygsrt
+		margin-top 16px
+
+	> header
+		> .title
+			z-index 1
+			margin 0
+			padding 0 16px
+			line-height 42px
+			font-size 0.9em
+			font-weight bold
+			color var(--faceHeaderText)
+			box-shadow 0 1px rgba(#000, 0.07)
+
+			> [data-icon]
+				margin-right 6px
+
+			&:empty
+				display none
+
+		> .buttons
+			position absolute
+			z-index 2
+			top 0
+			right 0
+
+			> button
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color var(--faceTextButton)
+
+				&:hover
+					color var(--faceTextButtonHover)
+
+				&:active
+					color var(--faceTextButtonActive)
+
+			.drag-handle
+				cursor move
+
+	> .warn
+		color #b19e49
+		margin 0
+		padding 16px 16px 0 16px
+		font-size 14px
+
+	> .error
+		color #f00
+		margin 0
+		padding 16px 16px 0 16px
+		font-size 14px
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/page-editor.script-block.vue b/src/client/app/common/views/pages/page-editor/page-editor.script-block.vue
new file mode 100644
index 0000000000..faecaf61fa
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/page-editor.script-block.vue
@@ -0,0 +1,271 @@
+<template>
+<x-container :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
+	<template #header><fa v-if="icon" :icon="icon"/> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
+	<template #func>
+		<button @click="changeType()">
+			<fa :icon="faPencilAlt"/>
+		</button>
+	</template>
+
+	<section v-if="value.type === null" class="pbglfege" @click="changeType()">
+		{{ $t('script.emptySlot') }}
+	</section>
+	<section v-else-if="value.type === 'text'" class="tbwccoaw">
+		<input v-model="value.value"/>
+	</section>
+	<section v-else-if="value.type === 'multiLineText'" class="tbwccoaw">
+		<textarea v-model="value.value"></textarea>
+	</section>
+	<section v-else-if="value.type === 'textList'" class="tbwccoaw">
+		<textarea v-model="value.value" :placeholder="$t('script.blocks._textList.info')"></textarea>
+	</section>
+	<section v-else-if="value.type === 'number'" class="tbwccoaw">
+		<input v-model="value.value" type="number"/>
+	</section>
+	<section v-else-if="value.type === 'ref'" class="hpdwcrvs">
+		<select v-model="value.value">
+			<option v-for="v in aiScript.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
+			<optgroup :label="$t('script.argVariables')">
+				<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
+			</optgroup>
+			<optgroup :label="$t('script.pageVariables')">
+				<option v-for="v in aiScript.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
+			</optgroup>
+			<optgroup :label="$t('script.enviromentVariables')">
+				<option v-for="v in aiScript.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
+			</optgroup>
+		</select>
+	</section>
+	<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
+		<ui-textarea v-model="slots">
+			<span>{{ $t('script.blocks._fn.slots') }}</span>
+			<template #desc>{{ $t('script.blocks._fn.slots-info') }}</template>
+		</ui-textarea>
+		<x-v v-if="value.value.expression" v-model="value.value.expression" :title="$t(`script.blocks._fn.arg1`)" :get-expected-type="() => null" :ai-script="aiScript" :fn-slots="value.value.slots" :name="name"/>
+	</section>
+	<section v-else-if="value.type.startsWith('fn:')" class="" style="padding:16px;">
+		<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="aiScript.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :ai-script="aiScript" :name="name" :key="i"/>
+	</section>
+	<section v-else class="" style="padding:16px;">
+		<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="$t(`script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :ai-script="aiScript" :name="name" :fn-slots="fnSlots" :key="i"/>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import XContainer from './page-editor.container.vue';
+import { faPencilAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
+import { isLiteralBlock, funcDefs, blockDefs } from '../../../../../../misc/aiscript/index';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	inject: ['getScriptBlockList'],
+
+	props: {
+		getExpectedType: {
+			required: false,
+			default: null
+		},
+		value: {
+			required: true
+		},
+		title: {
+			required: false
+		},
+		removable: {
+			required: false,
+			default: false
+		},
+		aiScript: {
+			required: true,
+		},
+		name: {
+			required: true,
+		},
+		fnSlots: {
+			required: false,
+		},
+		draggable: {
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			error: null,
+			warn: null,
+			slots: '',
+			faPencilAlt
+		};
+	},
+
+	computed: {
+		icon(): any {
+			if (this.value.type === null) return null;
+			if (this.value.type.startsWith('fn:')) return faPlug;
+			return blockDefs.find(x => x.type === this.value.type).icon;
+		},
+		typeText(): any {
+			if (this.value.type === null) return null;
+			if (this.value.type.startsWith('fn:')) return this.value.type.split(':')[1];
+			return this.$t(`script.blocks.${this.value.type}`);
+		},
+	},
+
+	watch: {
+		slots() {
+			this.value.value.slots = this.slots.split('\n').map(x => ({
+				name: x,
+				type: null
+			}));
+		}
+	},
+
+	beforeCreate() {
+		this.$options.components.XV = require('./page-editor.script-block.vue').default;
+	},
+
+	created() {
+		if (this.value.value == null) Vue.set(this.value, 'value', null);
+
+		if (this.value.value && this.value.value.slots) this.slots = this.value.value.slots.map(x => x.name).join('\n');
+
+		this.$watch('value.type', (t) => {
+			this.warn = null;
+
+			if (this.value.type === 'fn') {
+				const id = uuid.v4();
+				this.value.value = {};
+				Vue.set(this.value.value, 'slots', []);
+				Vue.set(this.value.value, 'expression', { id, type: null });
+				return;
+			}
+
+			if (this.value.type && this.value.type.startsWith('fn:')) {
+				const fnName = this.value.type.split(':')[1];
+				const fn = this.aiScript.getVarByName(fnName);
+
+				const empties = [];
+				for (let i = 0; i < fn.value.slots.length; i++) {
+					const id = uuid.v4();
+					empties.push({ id, type: null });
+				}
+				Vue.set(this.value, 'args', empties);
+				return;
+			}
+
+			if (isLiteralBlock(this.value)) return;
+
+			const empties = [];
+			for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
+				const id = uuid.v4();
+				empties.push({ id, type: null });
+			}
+			Vue.set(this.value, 'args', empties);
+
+			for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
+				const inType = funcDefs[this.value.type].in[i];
+				if (typeof inType !== 'number') {
+					if (inType === 'number') this.value.args[i].type = 'number';
+					if (inType === 'string') this.value.args[i].type = 'text';
+				}
+			}
+		});
+
+		this.$watch('value.args', (args) => {
+			if (args == null) {
+				this.warn = null;
+				return;
+			}
+			const emptySlotIndex = args.findIndex(x => x.type === null);
+			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
+				this.warn = {
+					slot: emptySlotIndex
+				};
+			} else {
+				this.warn = null;
+			}
+		}, {
+			deep: true
+		});
+
+		this.$watch('aiScript.variables', () => {
+			if (this.type != null && this.value) {
+				this.error = this.aiScript.typeCheck(this.value);
+			}
+		}, {
+			deep: true
+		});
+	},
+
+	methods: {
+		async changeType() {
+			const { canceled, result: type } = await this.$root.dialog({
+				type: null,
+				title: this.$t('select-type'),
+				select: {
+					groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			this.value.type = type;
+		},
+
+		_getExpectedType(slot: number) {
+			return this.aiScript.getExpectedType(this.value, slot);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.turmquns
+	opacity 0.7
+
+.pbglfege
+	opacity 0.5
+	padding 16px
+	text-align center
+	cursor pointer
+	color var(--text)
+
+.tbwccoaw
+	> input
+	> textarea
+		display block
+		-webkit-appearance none
+		-moz-appearance none
+		appearance none
+		width 100%
+		max-width 100%
+		min-width 100%
+		border none
+		box-shadow none
+		padding 16px
+		font-size 16px
+		background transparent
+		color var(--text)
+
+	> textarea
+		min-height 100px
+
+.hpdwcrvs
+	padding 16px
+
+	> select
+		display block
+		padding 4px
+		font-size 16px
+		width 100%
+
+</style>
diff --git a/src/client/app/common/views/pages/page-editor/page-editor.vue b/src/client/app/common/views/pages/page-editor/page-editor.vue
new file mode 100644
index 0000000000..ebe0f4688d
--- /dev/null
+++ b/src/client/app/common/views/pages/page-editor/page-editor.vue
@@ -0,0 +1,490 @@
+<template>
+<div>
+	<div class="gwbmwxkm" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
+		<header>
+			<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('read-page') : pageId ? $t('edit-page') : $t('new-page') }}</div>
+			<div class="buttons">
+				<button @click="del()" v-if="!readonly"><fa :icon="faTrashAlt"/></button>
+				<button @click="() => showOptions = !showOptions"><fa :icon="faCog"/></button>
+				<button @click="save()" v-if="!readonly"><fa :icon="faSave"/></button>
+			</div>
+		</header>
+
+		<section>
+			<router-link class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</router-link>
+
+			<ui-input v-model="title">
+				<span>{{ $t('title') }}</span>
+			</ui-input>
+
+			<template v-if="showOptions">
+				<ui-input v-model="summary">
+					<span>{{ $t('summary') }}</span>
+				</ui-input>
+
+				<ui-input v-model="name">
+					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+					<span>{{ $t('url') }}</span>
+				</ui-input>
+
+				<ui-switch v-model="alignCenter">{{ $t('align-center') }}</ui-switch>
+
+				<ui-select v-model="font">
+					<template #label>{{ $t('font') }}</template>
+					<option value="serif">{{ $t('fontSerif') }}</option>
+					<option value="sans-serif">{{ $t('fontSansSerif') }}</option>
+				</ui-select>
+
+				<div class="eyeCatch">
+					<ui-button v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><fa :icon="faPlus"/> {{ $t('set-eye-catching-image') }}</ui-button>
+					<div v-else-if="eyeCatchingImage">
+						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name"/>
+						<ui-button @click="removeEyeCatchingImage()" v-if="!readonly"><fa :icon="faTrashAlt"/> {{ $t('remove-eye-catching-image') }}</ui-button>
+					</div>
+				</div>
+			</template>
+
+			<x-blocks class="content" v-model="content" :ai-script="aiScript"/>
+
+			<ui-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
+		</section>
+	</div>
+
+	<ui-container :body-togglable="true">
+		<template #header><fa :icon="faMagic"/> {{ $t('variables') }}</template>
+		<div class="qmuvgica">
+			<x-draggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+				<x-variable v-for="variable in variables"
+					:value="variable"
+					:removable="true"
+					@input="v => updateVariable(v)"
+					@remove="() => removeVariable(variable)"
+					:key="variable.name"
+					:ai-script="aiScript"
+					:name="variable.name"
+					:title="variable.name"
+					:draggable="true"
+				/>
+			</x-draggable>
+
+			<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
+
+			<ui-info><span v-html="$t('variables-info')"></span><a @click="() => moreDetails = true" style="display:block;">{{ $t('more-details') }}</a></ui-info>
+
+			<template v-if="moreDetails">
+				<ui-info><span v-html="$t('variables-info2')"></span></ui-info>
+				<ui-info><span v-html="$t('variables-info3')"></span></ui-info>
+				<ui-info><span v-html="$t('variables-info4')"></span></ui-info>
+			</template>
+		</div>
+	</ui-container>
+
+	<ui-container :body-togglable="true" :expanded="false">
+		<template #header><fa :icon="faCode"/> {{ $t('inspector') }}</template>
+		<div style="padding:0 32px 32px 32px;">
+			<ui-textarea :value="JSON.stringify(content, null, 2)" readonly tall>{{ $t('content') }}</ui-textarea>
+			<ui-textarea :value="JSON.stringify(variables, null, 2)" readonly tall>{{ $t('variables') }}</ui-textarea>
+		</div>
+	</ui-container>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
+import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../i18n';
+import XVariable from './page-editor.script-block.vue';
+import XBlocks from './page-editor.blocks.vue';
+import * as uuid from 'uuid';
+import { blockDefs } from '../../../../../../misc/aiscript/index';
+import { ASTypeChecker } from '../../../../../../misc/aiscript/type-checker';
+import { url } from '../../../../config';
+import { collectPageVars } from '../../../scripts/collect-page-vars';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XDraggable, XVariable, XBlocks
+	},
+
+	props: {
+		initPageId: {
+			type: String,
+			required: false
+		},
+		initPageName: {
+			type: String,
+			required: false
+		},
+		initUser: {
+			type: String,
+			required: false
+		},
+	},
+
+	data() {
+		return {
+			author: this.$store.state.i,
+			readonly: false,
+			page: null,
+			pageId: null,
+			currentName: null,
+			title: '',
+			summary: null,
+			name: Date.now().toString(),
+			eyeCatchingImage: null,
+			eyeCatchingImageId: null,
+			font: 'sans-serif',
+			content: [],
+			alignCenter: false,
+			variables: [],
+			aiScript: null,
+			showOptions: false,
+			moreDetails: false,
+			url,
+			faPlus, faICursor, faSave, faStickyNote, faMagic, faCog, faTrashAlt, faExternalLinkSquareAlt, faCode
+		};
+	},
+
+	watch: {
+		async eyeCatchingImageId() {
+			if (this.eyeCatchingImageId == null) {
+				this.eyeCatchingImage = null;
+			} else {
+				this.eyeCatchingImage = await this.$root.api('drive/files/show', {
+					fileId: this.eyeCatchingImageId,
+				});
+			}
+		},
+	},
+
+	async created() {
+		this.aiScript = new ASTypeChecker();
+
+		this.$watch('variables', () => {
+			this.aiScript.variables = this.variables;
+		}, { deep: true });
+
+		this.$watch('content', () => {
+			this.aiScript.pageVars = collectPageVars(this.content);
+		}, { deep: true });
+
+		if (this.initPageId) {
+			this.page = await this.$root.api('pages/show', {
+				pageId: this.initPageId,
+			});
+		} else if (this.initPageName && this.initUser) {
+			this.page = await this.$root.api('pages/show', {
+				name: this.initPageName,
+				username: this.initUser,
+			});
+			this.readonly = true;
+		}
+
+		if (this.page) {
+			this.author = this.page.user;
+			this.pageId = this.page.id;
+			this.title = this.page.title;
+			this.name = this.page.name;
+			this.currentName = this.page.name;
+			this.summary = this.page.summary;
+			this.font = this.page.font;
+			this.alignCenter = this.page.alignCenter;
+			this.content = this.page.content;
+			this.variables = this.page.variables;
+			this.eyeCatchingImageId = this.page.eyeCatchingImageId;
+		} else {
+			const id = uuid.v4();
+			this.content = [{
+				id,
+				type: 'text',
+				text: 'Hello World!'
+			}];
+		}
+	},
+
+	provide() {
+		return {
+			readonly: this.readonly,
+			getScriptBlockList: this.getScriptBlockList,
+			getPageBlockList: this.getPageBlockList
+		}
+	},
+
+	methods: {
+		save() {
+			if (this.pageId) {
+				this.$root.api('pages/update', {
+					pageId: this.pageId,
+					title: this.title.trim(),
+					name: this.name.trim(),
+					summary: this.summary,
+					font: this.font,
+					alignCenter: this.alignCenter,
+					content: this.content,
+					variables: this.variables,
+					eyeCatchingImageId: this.eyeCatchingImageId,
+				}).then(page => {
+					this.currentName = this.name.trim();
+					this.$root.dialog({
+						type: 'success',
+						text: this.$t('page-updated')
+					});
+				});
+			} else {
+				this.$root.api('pages/create', {
+					title: this.title.trim(),
+					name: this.name.trim(),
+					summary: this.summary,
+					font: this.font,
+					alignCenter: this.alignCenter,
+					content: this.content,
+					variables: this.variables,
+					eyeCatchingImageId: this.eyeCatchingImageId,
+				}).then(page => {
+					this.pageId = page.id;
+					this.currentName = this.name.trim();
+					this.$root.dialog({
+						type: 'success',
+						text: this.$t('page-created')
+					});
+					this.$router.push(`/i/pages/edit/${this.pageId}`);
+				});
+			}
+		},
+
+		del() {
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('are-you-sure-delete'),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (canceled) return;
+				this.$root.api('pages/delete', {
+					pageId: this.pageId,
+				}).then(() => {
+					this.$root.dialog({
+						type: 'success',
+						text: this.$t('page-deleted')
+					});
+					this.$router.push(`/i/pages`);
+				});
+			});
+		},
+
+		async add() {
+			const { canceled, result: type } = await this.$root.dialog({
+				type: null,
+				title: this.$t('choose-block'),
+				select: {
+					groupedItems: this.getPageBlockList()
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			const id = uuid.v4();
+			this.content.push({ id, type });
+		},
+
+		async addVariable() {
+			let { canceled, result: name } = await this.$root.dialog({
+				title: this.$t('enter-variable-name'),
+				input: {
+					type: 'text',
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			name = name.trim();
+
+			if (this.aiScript.isUsedName(name)) {
+				this.$root.dialog({
+					type: 'error',
+					text: this.$t('the-variable-name-is-already-used')
+				});
+				return;
+			}
+
+			const id = uuid.v4();
+			this.variables.push({ id, name, type: null });
+		},
+
+		removeVariable(v) {
+			const i = this.variables.findIndex(x => x.name === v.name);
+			const newValue = [
+				...this.variables.slice(0, i),
+				...this.variables.slice(i + 1)
+			];
+			this.variables = newValue;
+		},
+
+		getPageBlockList() {
+			return [{
+				label: this.$t('content-blocks'),
+				items: [
+					{ value: 'section', text: this.$t('blocks.section') },
+					{ value: 'text', text: this.$t('blocks.text') },
+					{ value: 'image', text: this.$t('blocks.image') },
+					{ value: 'textarea', text: this.$t('blocks.textarea') },
+				]
+			}, {
+				label: this.$t('input-blocks'),
+				items: [
+					{ value: 'button', text: this.$t('blocks.button') },
+					{ value: 'textInput', text: this.$t('blocks.textInput') },
+					{ value: 'textareaInput', text: this.$t('blocks.textareaInput') },
+					{ value: 'numberInput', text: this.$t('blocks.numberInput') },
+					{ value: 'switch', text: this.$t('blocks.switch') },
+					{ value: 'counter', text: this.$t('blocks.counter') }
+				]
+			}, {
+				label: this.$t('special-blocks'),
+				items: [
+					{ value: 'if', text: this.$t('blocks.if') },
+					{ value: 'post', text: this.$t('blocks.post') }
+				]
+			}];
+		},
+
+		getScriptBlockList(type: string = null) {
+			const list = [];
+
+			const blocks = blockDefs.filter(block => type === null || block.out === null || block.out === type || typeof block.out === 'number');
+
+			for (const block of blocks) {
+				const category = list.find(x => x.category === block.category);
+				if (category) {
+					category.items.push({
+						value: block.type,
+						text: this.$t(`script.blocks.${block.type}`)
+					});
+				} else {
+					list.push({
+						category: block.category,
+						label: this.$t(`script.categories.${block.category}`),
+						items: [{
+							value: block.type,
+							text: this.$t(`script.blocks.${block.type}`)
+						}]
+					});
+				}
+			}
+
+			const userFns = this.variables.filter(x => x.type === 'fn');
+			if (userFns.length > 0) {
+				list.unshift({
+					label: this.$t(`script.categories.fn`),
+					items: userFns.map(v => ({
+						value: 'fn:' + v.name,
+						text: v.name
+					}))
+				});
+			}
+
+			return list;
+		},
+
+		setEyeCatchingImage() {
+			this.$chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.eyeCatchingImageId = file.id;
+			});
+		},
+
+		removeEyeCatchingImage() {
+			this.eyeCatchingImageId = null;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.gwbmwxkm
+	overflow hidden
+	background var(--face)
+	margin-bottom 16px
+
+	&.round
+		border-radius 6px
+
+	&.shadow
+		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+
+	> header
+		background var(--faceHeader)
+
+		> .title
+			z-index 1
+			margin 0
+			padding 0 16px
+			line-height 42px
+			font-size 0.9em
+			font-weight bold
+			color var(--faceHeaderText)
+			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
+
+			> [data-icon]
+				margin-right 6px
+
+			&:empty
+				display none
+
+		> .buttons
+			position absolute
+			z-index 2
+			top 0
+			right 0
+
+			> button
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color var(--faceTextButton)
+
+				&:hover
+					color var(--faceTextButtonHover)
+
+				&:active
+					color var(--faceTextButtonActive)
+
+	> section
+		padding 0 32px 32px 32px
+
+		@media (max-width 500px)
+			padding 0 16px 16px 16px
+
+		> .view
+			display inline-block
+			margin 16px 0 0 0
+			font-size 14px
+
+		> .content
+			margin-bottom 16px
+
+		> .eyeCatch
+			margin-bottom 16px
+
+			> div
+				> img
+					max-width 100%
+
+.qmuvgica
+	padding 32px
+
+	@media (max-width 500px)
+		padding 16px
+
+	> .variables
+		margin-bottom 16px
+
+	> .add
+		margin-bottom 16px
+
+</style>
diff --git a/src/client/app/common/views/pages/page/page.vue b/src/client/app/common/views/pages/page/page.vue
index d3fb948c85..649bc1e17d 100644
--- a/src/client/app/common/views/pages/page/page.vue
+++ b/src/client/app/common/views/pages/page/page.vue
@@ -148,8 +148,8 @@ export default Vue.extend({
 		> .title
 			z-index 1
 			margin 0
-			padding 32px 64px
-			font-size 24px
+			padding 16px 32px
+			font-size 20px
 			font-weight bold
 			color var(--text)
 			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
@@ -160,8 +160,8 @@ export default Vue.extend({
 
 	> div
 		color var(--text)
-		padding 48px 64px
-		font-size 18px
+		padding 24px 32px
+		font-size 16px
 
 		@media (max-width 600px)
 			padding 24px 32px
@@ -169,7 +169,7 @@ export default Vue.extend({
 
 	> footer
 		color var(--text)
-		padding 0 64px 38px 64px
+		padding 0 32px 28px 32px
 
 		@media (max-width 600px)
 			padding 0 32px 28px 32px
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index b283ab2075..1ec7f1cfbf 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -168,11 +168,11 @@ init(async (launch, os) => {
 					{ path: '/i/groups', component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) },
 					{ path: '/i/groups/:groupId', props: true, component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default) },
 					{ path: '/i/follow-requests', component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) },
+					{ path: '/i/pages/new', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default) },
+					{ path: '/i/pages/edit/:pageId', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initPageId: route.params.pageId }) },
+					{ path: '/@:user/pages/:page', component: () => import('../common/views/pages/page/page.vue').then(m => m.default), props: route => ({ pageName: route.params.page, username: route.params.user }) },
+					{ path: '/@:user/pages/:pageName/view-source', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
 				]},
-			{ path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) },
-			{ path: '/@:user/pages/:pageName/view-source', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
-			{ path: '/i/pages/new', component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
-			{ path: '/i/pages/edit/:pageId', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
 			{ path: '/i/messaging/group/:group', component: MkMessagingRoom },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
diff --git a/src/client/app/desktop/views/pages/page-editor.vue b/src/client/app/desktop/views/pages/page-editor.vue
deleted file mode 100644
index 35b4008e4f..0000000000
--- a/src/client/app/desktop/views/pages/page-editor.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-<mk-ui>
-	<main>
-		<x-page-editor v-if="page !== undefined" :page="page" :readonly="readonly"/>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	components: {
-		XPageEditor: () => import('../../../common/views/components/page-editor/page-editor.vue').then(m => m.default)
-	},
-
-	props: {
-		pageId: {
-			type: String,
-			required: false
-		},
-		pageName: {
-			type: String,
-			required: false
-		},
-		user: {
-			type: String,
-			required: false
-		}
-	},
-
-	data() {
-		return {
-			page: undefined,
-			readonly: false
-		};
-	},
-
-	created() {
-		if (this.pageId) {
-			this.$root.api('pages/show', {
-				pageId: this.pageId,
-			}).then(page => {
-				this.page = page;
-			});
-		} else if (this.pageName && this.user) {
-			this.$root.api('pages/show', {
-				name: this.pageName,
-				username: this.user,
-			}).then(page => {
-				this.readonly = true;
-				this.page = page;
-			});
-		} else {
-			this.page = null;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	margin 0 auto
-	padding 16px
-	max-width 900px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/page.vue b/src/client/app/desktop/views/pages/page.vue
deleted file mode 100644
index 1ddff08c76..0000000000
--- a/src/client/app/desktop/views/pages/page.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<mk-ui>
-	<main>
-		<x-page :page-name="page" :username="user"/>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	components: {
-		XPage: () => import('../../../common/views/pages/page/page.vue').then(m => m.default)
-	},
-
-	props: {
-		page: {
-			type: String,
-			required: true
-		},
-		user: {
-			type: String,
-			required: true
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	margin 0 auto
-	padding 16px
-	max-width 950px
-
-</style>
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 106e843ca8..d04662cc1f 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -149,8 +149,8 @@ init((launch, os) => {
 			{ path: '/i/drive', name: 'drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/drive/file/:file', component: MkDrive },
-			{ path: '/i/pages/new', component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
-			{ path: '/i/pages/edit/:pageId', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
+			{ path: '/i/pages/new', component: UI, props: route => ({ component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default) }) },
+			{ path: '/i/pages/edit/:pageId', component: UI, props: route => ({ component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), initPageId: route.params.pageId }) },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
@@ -163,8 +163,8 @@ init((launch, os) => {
 				{ path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) },
 				{ path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) },
 			]},
-			{ path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) },
-			{ path: '/@:user/pages/:pageName/view-source', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
+			{ path: '/@:user/pages/:page', component: UI, props: route => ({ component: () => import('../common/views/pages/page/page.vue').then(m => m.default), pageName: route.params.page, username: route.params.user }) },
+			{ path: '/@:user/pages/:pageName/view-source', component: UI, props: route => ({ component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), initUser: route.params.user, initPageName: route.params.pageName }) },
 			{ path: '/notes/:note', component: MkNote },
 			{ path: '/authorize-follow', component: MkFollow },
 			{ path: '*', component: MkNotFound }
diff --git a/src/client/app/mobile/views/pages/page-editor.vue b/src/client/app/mobile/views/pages/page-editor.vue
deleted file mode 100644
index 0b04f25802..0000000000
--- a/src/client/app/mobile/views/pages/page-editor.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-<mk-ui>
-	<main>
-		<x-page-editor v-if="page !== undefined" :page="page" :readonly="readonly"/>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	components: {
-		XPageEditor: () => import('../../../common/views/components/page-editor/page-editor.vue').then(m => m.default)
-	},
-
-	props: {
-		pageId: {
-			type: String,
-			required: false
-		},
-		pageName: {
-			type: String,
-			required: false
-		},
-		user: {
-			type: String,
-			required: false
-		}
-	},
-
-	data() {
-		return {
-			page: undefined,
-			readonly: false
-		};
-	},
-
-	created() {
-		if (this.pageId) {
-			this.$root.api('pages/show', {
-				pageId: this.pageId,
-			}).then(page => {
-				this.page = page;
-			});
-		} else if (this.pageName && this.user) {
-			this.$root.api('pages/show', {
-				name: this.pageName,
-				username: this.user,
-			}).then(page => {
-				this.readonly = true;
-				this.page = page;
-			});
-		} else {
-			this.page = null;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	margin 0 auto
-	padding 16px
-	max-width 1000px
-
-</style>
diff --git a/src/client/app/mobile/views/pages/page.vue b/src/client/app/mobile/views/pages/page.vue
deleted file mode 100644
index f494abffd7..0000000000
--- a/src/client/app/mobile/views/pages/page.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<mk-ui>
-	<main>
-		<x-page :page-name="page" :username="user"/>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	components: {
-		XPage: () => import('../../../common/views/pages/page/page.vue').then(m => m.default)
-	},
-
-	props: {
-		page: {
-			type: String,
-			required: true
-		},
-		user: {
-			type: String,
-			required: true
-		},
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	margin 0 auto
-	padding 16px
-	max-width 1000px
-
-	@media (min-width 600px)
-		padding 32px
-
-</style>
-- 
cgit v1.2.3-freya


From 312ba501a324f97211b3c273979ae11ebc03c3f7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 19:33:58 +0900
Subject: Add deck fallback

---
 src/client/app/desktop/script.ts | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 1ec7f1cfbf..ce0b96e0ac 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -173,6 +173,10 @@ init(async (launch, os) => {
 					{ path: '/@:user/pages/:page', component: () => import('../common/views/pages/page/page.vue').then(m => m.default), props: route => ({ pageName: route.params.page, username: route.params.user }) },
 					{ path: '/@:user/pages/:pageName/view-source', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
 				]},
+			{ path: '/i/pages/new', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default) },
+			{ path: '/i/pages/edit/:pageId', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initPageId: route.params.pageId }) },
+			{ path: '/@:user/pages/:page', component: () => import('../common/views/pages/page/page.vue').then(m => m.default), props: route => ({ pageName: route.params.page, username: route.params.user }) },
+			{ path: '/@:user/pages/:pageName/view-source', component: () => import('../common/views/pages/page-editor/page-editor.vue').then(m => m.default), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
 			{ path: '/i/messaging/group/:group', component: MkMessagingRoom },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
-- 
cgit v1.2.3-freya


From 3ea7a49c1c832bba12ba0591e0cc6cffbd2fc4db Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 May 2019 19:36:35 +0900
Subject: Show page title

---
 src/client/app/common/views/pages/page/page.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/page/page.vue b/src/client/app/common/views/pages/page/page.vue
index 649bc1e17d..329046302b 100644
--- a/src/client/app/common/views/pages/page/page.vue
+++ b/src/client/app/common/views/pages/page/page.vue
@@ -25,7 +25,7 @@
 import Vue from 'vue';
 import i18n from '../../../../i18n';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
-import { faHeart } from '@fortawesome/free-regular-svg-icons';
+import { faHeart, faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
 import { ASEvaluator } from '../../../../../../misc/aiscript/evaluator';
 import { collectPageVars } from '../../../scripts/collect-page-vars';
@@ -91,6 +91,10 @@ export default Vue.extend({
 			username: this.username,
 		}).then(page => {
 			this.page = page;
+			this.$emit('init', {
+				title: this.page.title,
+				icon: faStickyNote
+			});
 			const pageVars = this.getPageVars();
 			this.script = new Script(new ASEvaluator(this.page.variables, pageVars, {
 				randomSeed: Math.random(),
-- 
cgit v1.2.3-freya


From fc7268fd129b41a86d39f08c1552578d3ee2a6dc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 25 May 2019 08:49:58 +0900
Subject: :art:

---
 src/client/app/common/views/pages/page/page.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/page/page.vue b/src/client/app/common/views/pages/page/page.vue
index 329046302b..7938d706b9 100644
--- a/src/client/app/common/views/pages/page/page.vue
+++ b/src/client/app/common/views/pages/page/page.vue
@@ -162,6 +162,10 @@ export default Vue.extend({
 				padding 16px 32px
 				font-size 20px
 
+			@media (max-width 400px)
+				padding 10px 20px
+				font-size 16px
+
 	> div
 		color var(--text)
 		padding 24px 32px
@@ -171,6 +175,10 @@ export default Vue.extend({
 			padding 24px 32px
 			font-size 16px
 
+		@media (max-width 400px)
+			padding 20px 20px
+			font-size 15px
+
 	> footer
 		color var(--text)
 		padding 0 32px 28px 32px
@@ -178,12 +186,16 @@ export default Vue.extend({
 		@media (max-width 600px)
 			padding 0 32px 28px 32px
 
+		@media (max-width 400px)
+			padding 0 20px 20px 20px
+			font-size 14px
+
 		> small
 			display block
 			opacity 0.5
 
 		> a
-			font-size 14px
+			font-size 90%
 
 		> a + a
 			margin-left 8px
-- 
cgit v1.2.3-freya


From 0af3e15e8268b6a5a368aeaff31a442d1c34e3e1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 25 May 2019 09:04:16 +0900
Subject: :art:

---
 src/client/app/common/views/components/url.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/url.vue b/src/client/app/common/views/components/url.vue
index 840535514d..1c437d92b4 100644
--- a/src/client/app/common/views/components/url.vue
+++ b/src/client/app/common/views/components/url.vue
@@ -1,8 +1,10 @@
 <template>
 <component :is="self ? 'router-link' : 'a'" class="mk-url" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target">
-	<span class="schema">{{ schema }}//</span>
-	<span class="hostname">{{ hostname }}</span>
-	<span class="port" v-if="port != ''">:{{ port }}</span>
+	<template v-if="!self">
+		<span class="schema">{{ schema }}//</span>
+		<span class="hostname">{{ hostname }}</span>
+		<span class="port" v-if="port != ''">:{{ port }}</span>
+	</template>
 	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-- 
cgit v1.2.3-freya


From 7f54c8fa2a7265dc6c5790daf96e9056604a4c5c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 25 May 2019 09:05:14 +0900
Subject: :art:

---
 src/client/app/common/views/components/url.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/url.vue b/src/client/app/common/views/components/url.vue
index 1c437d92b4..2829812f99 100644
--- a/src/client/app/common/views/components/url.vue
+++ b/src/client/app/common/views/components/url.vue
@@ -5,7 +5,7 @@
 		<span class="hostname">{{ hostname }}</span>
 		<span class="port" v-if="port != ''">:{{ port }}</span>
 	</template>
-	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
+	<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
 	<fa icon="external-link-square-alt" v-if="!self"/>
-- 
cgit v1.2.3-freya


From 114803a86a862504fbe0d48f08724db05165c174 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 25 May 2019 09:07:50 +0900
Subject: Fix #4972

---
 src/client/app/common/views/components/messaging.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index cdd35ee8ab..b21104bf9a 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -46,7 +46,7 @@
 			</div>
 		</a>
 	</div>
-	<p class="no-history" v-if="!fetching && (messages.length == 0 && groupMessages.length == 0)">{{ $t('no-history') }}</p>
+	<p class="no-history" v-if="!fetching && messages.length == 0">{{ $t('no-history') }}</p>
 	<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 	<ui-margin>
 		<ui-button @click="startUser()"><fa :icon="faUser"/> {{ $t('start-with-user') }}</ui-button>
-- 
cgit v1.2.3-freya


From 69a916d5069204ebb6e479a099744ce49aed10a2 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 25 May 2019 09:10:51 +0900
Subject: Fix: Firefoxでトークの下が隠れてしまう (#4974)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/components/messaging-room.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 658dc93f64..d5fa4143a0 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -300,17 +300,13 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-messaging-room
-	display flex
-	flex 1
-	flex-direction column
-	height 100%
 	background var(--messagingRoomBg)
 
 	> .body
 		width 100%
 		max-width 600px
 		margin 0 auto
-		flex 1
+		min-height calc(100% - 103px)
 
 		> .init,
 		> .empty
-- 
cgit v1.2.3-freya