Pages (#4811)

* wip

* wip

* wip

* Update page-editor.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update page-editor.variable.core.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update aiscript.ts

* wip

* Update package.json

* wip

* wip

* wip

* wip

* wip

* Update page.vue

* wip

* wip

* wip

* wip

* more info

* wip fn

* wip

* wip

* wip

5 files changed, 181 insertions, 10 deletions

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 8d292ce324..00ba5db23a 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -156,7 +156,11 @@ init(async (launch, os) => {
 					{ path: '/explore', name: 'explore', component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
 					{ path: '/explore/tags/:tag', name: 'explore-tag', props: true, component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) },
+					{ path: '/i/pages', component: () => import('./views/home/pages.vue').then(m => m.default) },
 				]},
+			{ path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) },
+			{ path: '/i/pages/new', component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
+			{ path: '/i/pages/edit/:page', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 7f9decfdcd..05692667b7 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -9,35 +9,42 @@
 			<ul>
 				<li>
 					<router-link :to="`/@${ $store.state.i.username }`">
-						<i><fa icon="user"/></i>
+						<i><fa icon="user" fixed-width/></i>
 						<span>{{ $t('profile') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
 				<li @click="drive">
 					<p>
-						<i><fa icon="cloud"/></i>
+						<i><fa icon="cloud" fixed-width/></i>
 						<span>{{ $t('@.drive') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</p>
 				</li>
 				<li>
 					<router-link to="/i/favorites">
-						<i><fa icon="star"/></i>
+						<i><fa icon="star" fixed-width/></i>
 						<span>{{ $t('@.favorites') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
 				<li @click="list">
 					<p>
-						<i><fa icon="list"/></i>
+						<i><fa icon="list" fixed-width/></i>
 						<span>{{ $t('lists') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</p>
 				</li>
+				<li @click="page">
+					<router-link to="/i/pages">
+						<i><fa :icon="faStickyNote" fixed-width/></i>
+						<span>{{ $t('@.pages') }}</span>
+						<i><fa icon="angle-right"/></i>
+					</router-link>
+				</li>
 				<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
 					<p>
-						<i><fa :icon="['far', 'envelope']"/></i>
+						<i><fa :icon="['far', 'envelope']" fixed-width/></i>
 						<span>{{ $t('follow-requests') }}<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>
 						<i><fa icon="angle-right"/></i>
 					</p>
@@ -46,14 +53,14 @@
 			<ul>
 				<li>
 					<router-link to="/i/settings">
-						<i><fa icon="cog"/></i>
+						<i><fa icon="cog" fixed-width/></i>
 						<span>{{ $t('@.settings') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
 				<li v-if="$store.state.i.isAdmin || $store.state.i.isModerator">
 					<a href="/admin">
-						<i><fa icon="terminal"/></i>
+						<i><fa icon="terminal" fixed-width/></i>
 						<span>{{ $t('admin') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</a>
@@ -76,7 +83,7 @@
 			<ul>
 				<li @click="signout">
 					<p class="signout">
-						<i><fa icon="power-off"/></i>
+						<i><fa icon="power-off" fixed-width/></i>
 						<span>{{ $t('@.signout') }}</span>
 					</p>
 				</li>
@@ -95,14 +102,14 @@ import MkFollowRequestsWindow from './received-follow-requests-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
 import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
-import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons';
+import { faMoon, faSun, faStickyNote } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/ui.header.account.vue'),
 	data() {
 		return {
 			isOpen: false,
-			faHome, faColumns, faMoon, faSun
+			faHome, faColumns, faMoon, faSun, faStickyNote
 		};
 	},
 	computed: {
diff --git a/src/client/app/desktop/views/home/pages.vue b/src/client/app/desktop/views/home/pages.vue
new file mode 100644
index 0000000000..9f7fb65159
--- /dev/null
+++ b/src/client/app/desktop/views/home/pages.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="rknalgpo" v-if="!fetching">
+	<ui-button @click="create()"><fa :icon="faPlus"/></ui-button>
+	<sequential-entrance animation="entranceFromTop" delay="25">
+		<template v-for="page in pages">
+			<x-page-preview class="page" :page="page" :key="page.id"/>
+		</template>
+	</sequential-entrance>
+	<ui-button v-if="existMore" @click="fetchMore()">{{ $t('@.load-more') }}</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import Progress from '../../../common/scripts/loading';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
+import XPagePreview from '../../../common/views/components/page-preview.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		XPagePreview
+	},
+	data() {
+		return {
+			fetching: true,
+			pages: [],
+			existMore: false,
+			moreFetching: false,
+			faStickyNote, faPlus
+		};
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			this.$root.api('i/pages', {
+				limit: 11
+			}).then(pages => {
+				if (pages.length == 11) {
+					this.existMore = true;
+					pages.pop();
+				}
+
+				this.pages = pages;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		fetchMore() {
+			this.moreFetching = true;
+			this.$root.api('i/pages', {
+				limit: 11,
+				untilId: this.pages[this.pages.length - 1].id
+			}).then(pages => {
+				if (pages.length == 11) {
+					this.existMore = true;
+					pages.pop();
+				} else {
+					this.existMore = false;
+				}
+
+				this.pages = this.pages.concat(pages);
+				this.moreFetching = false;
+			});
+		},
+		create() {
+			this.$router.push(`/i/pages/new`);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.rknalgpo
+	margin 0 auto
+
+	> * > .page
+		margin-bottom 8px
+
+	@media (min-width 500px)
+		> * > .page
+			margin-bottom 16px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/page-editor.vue b/src/client/app/desktop/views/pages/page-editor.vue
new file mode 100644
index 0000000000..50d1e7db61
--- /dev/null
+++ b/src/client/app/desktop/views/pages/page-editor.vue
@@ -0,0 +1,32 @@
+<template>
+<mk-ui>
+	<main>
+		<x-page-editor :page="page"/>
+	</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: {
+		page: {
+			type: String,
+			required: false
+		}
+	}
+});
+</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
new file mode 100644
index 0000000000..1ddff08c76
--- /dev/null
+++ b/src/client/app/desktop/views/pages/page.vue
@@ -0,0 +1,36 @@
+<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>