Improve user lists index (#4605)

* wip

* Revert "wip"

This reverts commit 6212831ce3bdae5ce17f8ace9945710ba7696185.

* improve list index

* Update user-lists.vue

locales/ja-JP.yml

@@ -748,6 +748,10 @@ common/views/components/user-list-editor.vue:
   delete-are-you-sure: "リスト「$1」を削除しますか？"
   deleted: "削除しました"
 
+common/views/components/user-lists.vue:
+  create-list: "リストを作成"
+  list-name: "リスト名"
+
 common/views/widgets/broadcast.vue:
   fetching: "確認中"
   no-broadcasts: "お知らせはありません"
@@ -1154,8 +1158,6 @@ desktop/views/components/received-follow-requests-window.vue:
 
 desktop/views/components/user-lists-window.vue:
   title: "リスト"
-  create-list: "リストを作成"
-  list-name: "リスト名"
 
 desktop/views/components/user-preview.vue:
   notes: "投稿"
@@ -1689,7 +1691,6 @@ mobile/views/pages/drive.vue:
 
 mobile/views/pages/user-lists.vue:
   title: "リスト"
-  enter-list-name: "リスト名を入力してください"
 
 mobile/views/pages/signup.vue:
   lets-start: "📦 始めましょう"

src/client/app/common/views/components/user-lists.vue

@@ -0,0 +1,95 @@
+<template>
+<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
+	<button class="ui" @click="add">{{ $t('create-list') }}</button>
+	<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.name }}</a>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/user-lists.vue'),
+	data() {
+		return {
+			fetching: true,
+			lists: []
+		};
+	},
+	mounted() {
+		this.$root.api('users/lists/list').then(lists => {
+			this.fetching = false;
+			this.lists = lists;
+		});
+	},
+	methods: {
+		add() {
+			this.$root.dialog({
+				title: this.$t('list-name'),
+				input: true
+			}).then(async ({ canceled, result: title }) => {
+				if (canceled) return;
+				const list = await this.$root.api('users/lists/create', {
+					title
+				});
+
+				this.lists.push(list)
+				this.$emit('choosen', list);
+			});
+		},
+		choice(list) {
+			this.$emit('choosen', list);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.xkxvokkjlptzyewouewmceqcxhpgzprp
+	padding 16px
+	background: var(--bg)
+
+	> button
+		display block
+		margin-bottom 16px
+		color var(--primaryForeground)
+		background var(--primary)
+		width 100%
+		border-radius 38px
+		user-select none
+		cursor pointer
+		padding 0 16px
+		min-width 100px
+		line-height 38px
+		font-size 14px
+		font-weight 700
+
+		&:hover
+			background var(--primaryLighten10)
+
+		&:active
+			background var(--primaryDarken10)
+
+	a
+		display block
+		margin 8px 0
+		padding 8px
+		color var(--text)
+		background var(--face)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
+		border-radius 6px
+		cursor pointer
+		line-height 32px
+
+		*
+			pointer-events none
+			user-select none
+
+		&:hover
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
+
+		&:active
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
+
+</style>

src/client/app/desktop/views/components/ui.header.account.vue

@@ -90,9 +90,8 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import MkUserListsWindow from './user-lists-window.vue';
-import MkUserListWindow from './user-list-window.vue';
 import MkFollowRequestsWindow from './received-follow-requests-window.vue';
-import MkSettingsWindow from './settings-window.vue';
+// import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
 import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
@@ -143,12 +142,7 @@ export default Vue.extend({
 		},
 		list() {
 			this.close();
-			const w = this.$root.new(MkUserListsWindow);
+			this.$root.new(MkUserListsWindow);
-			w.$once('choosen', list => {
-				this.$root.new(MkUserListWindow, {
-					list
-				});
-			});
 		},
 		followRequests() {
 			this.close();

src/client/app/desktop/views/components/ui.sidebar.vue

@@ -148,10 +148,7 @@ export default Vue.extend({
 		},
 
 		list() {
-			const w = this.$root.new(MkUserListsWindow);
+			this.$root.new(MkUserListsWindow);
-			w.$once('choosen', list => {
-				this.$router.push(`i/lists/${ list.id }`);
-			});
 		},
 
 		followRequests() {

src/client/app/desktop/views/components/user-lists-window.vue

@@ -1,85 +1,36 @@
 <template>
 <mk-window ref="window" width="450px" height="500px" @closed="destroyDom">
 	<template #header><fa icon="list"/> {{ $t('title') }}</template>
-
+	<x-lists :class="$style.content" @choosen="choosen"/>
-	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
-		<button class="ui" @click="add">{{ $t('create-list') }}</button>
-		<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.name }}</a>
-	</div>
 </mk-window>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
+import MkUserListWindow from './user-list-window.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/user-lists-window.vue'),
-	data() {
+	components: {
-		return {
+		XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default)
-			fetching: true,
-			lists: []
-		};
-	},
-	mounted() {
-		this.$root.api('users/lists/list').then(lists => {
-			this.fetching = false;
-			this.lists = lists;
-		});
 	},
 	methods: {
-		add() {
-			this.$root.dialog({
-				title: this.$t('list-name'),
-				input: true
-			}).then(async ({ canceled, result: title }) => {
-				if (canceled) return;
-				const list = await this.$root.api('users/lists/create', {
-					title
-				});
-
-				this.$emit('choosen', list);
-			});
-		},
-		choice(list) {
-			this.$emit('choosen', list);
-		},
 		close() {
 			(this as any).$refs.window.close();
+		},
+		choosen(list) {
+			this.$root.new(MkUserListWindow, {
+				list
+			});
 		}
 	}
 });
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus" module>
-.xkxvokkjlptzyewouewmceqcxhpgzprp
+.content
-	padding 16px
+	height 100%
-
+	overflow auto
-	> button
-		display block
-		margin-bottom 16px
-		color var(--primaryForeground)
-		background var(--primary)
-		width 100%
-		border-radius 38px
-		user-select none
-		cursor pointer
-		padding 0 16px
-		min-width 100px
-		line-height 38px
-		font-size 14px
-		font-weight 700
-
-		&:hover
-			background var(--primaryLighten10)
-
-		&:active
-			background var(--primaryDarken10)
-
-	> a
-		display block
-		padding 16px
-		border solid 1px var(--faceDivider)
-		border-radius 4px
 
 </style>

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>
+	<x-lists ref="lists" @choosen="choosen"/>
-		<ul>
-			<li v-for="list in lists" :key="list.id"><router-link :to="`/i/lists/${list.id}`">{{ list.name }}</router-link></li>
-		</ul>
-	</main>
 </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() {
+		choosen(list) {
-			this.$root.dialog({
+			if (!list) return;
-				title: this.$t('enter-list-name'),
+			this.$router.push(`/i/lists/${list.id}`);
-				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}`);
-			});
 		}
 	}
 });