Improve user lists index (#4605)

* wip

* Revert "wip"

This reverts commit 6212831ce3.

* improve list index

* Update user-lists.vue

src/client/app/mobile/views/pages/user-lists.vue

@@ -1,20 +1,15 @@
 <template>
 <mk-ui>
 	<template #header><fa icon="list"/>{{ $t('title') }}</template>
-	<template #func><button @click="fn"><fa icon="plus"/></button></template>
+	<template #func><button @click="$refs.lists.add()"><fa icon="plus"/></button></template>
 
-	<main>
-		<ul>
-			<li v-for="list in lists" :key="list.id"><router-link :to="`/i/lists/${list.id}`">{{ list.name }}</router-link></li>
-		</ul>
-	</main>
+	<x-lists ref="lists" @choosen="choosen"/>
 </mk-ui>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user-lists.vue'),
@@ -24,31 +19,16 @@ export default Vue.extend({
 			lists: []
 		};
 	},
+	components: {
+		XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default)
+	},
 	mounted() {
 		document.title = this.$t('title');
-
-		Progress.start();
-
-		this.$root.api('users/lists/list').then(lists => {
-			this.fetching = false;
-			this.lists = lists;
-
-			Progress.done();
-		});
 	},
 	methods: {
-		fn() {
-			this.$root.dialog({
-				title: this.$t('enter-list-name'),
-				input: true
-			}).then(async ({ canceled, result: title }) => {
-				if (canceled) return;
-				const list = await this.$root.api('users/lists/create', {
-					title
-				});
-
-				this.$router.push(`/i/lists/${list.id}`);
-			});
+		choosen(list) {
+			if (!list) return;
+			this.$router.push(`/i/lists/${list.id}`);
 		}
 	}
 });