wip

2 files changed, 131 insertions, 0 deletions

diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
new file mode 100644
index 0000000000..7440dbcb64
--- /dev/null
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -0,0 +1,63 @@
+<template>
+<mk-ui>
+	<span slot="header" v-if="!fetching">%fa:list%{{ list.title }}</span>
+
+	<main v-if="!fetching">
+		<ul>
+			<li v-for="user in list.users" :key="user.id"><router-link :to="user | userPage">{{ user | userName }}</router-link></li>
+		</ul>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			list: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('users/lists/show', {
+				listId: this.$route.params.list
+			}).then(list => {
+				this.list = list;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
+
+</style>
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
new file mode 100644
index 0000000000..288295677e
--- /dev/null
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -0,0 +1,68 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:list%%i18n:@title%</span>
+	<template slot="func"><button @click="fn">%fa:plus%</button></template>
+
+	<main>
+		<ul>
+			<li v-for="list in lists" :key="list.id"><router-link :to="`/i/lists/${list.id}`">{{ list.title }}</router-link></li>
+		</ul>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			lists: []
+		};
+	},
+	mounted() {
+		document.title = 'Misskey | %i18n:@title%';
+
+		Progress.start();
+
+		(this as any).api('users/lists/list').then(lists => {
+			this.fetching = false;
+			this.lists = lists;
+
+			Progress.done();
+		});
+	},
+	methods: {
+		fn() {
+			(this as any).apis.input({
+				title: '%i18n:@enter-list-name%',
+			}).then(async title => {
+				const list = await (this as any).api('users/lists/create', {
+					title
+				});
+
+				this.$router.push('/i/lists/' + list.id);
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
+
+</style>