refactoring

Resolve #7779

packages/client/src/pages/my-lists/index.vue

@@ -0,0 +1,88 @@
+<template>
+<div class="qkcjvfiv">
+	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
+
+	<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
+		<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+			<div class="name">{{ list.name }}</div>
+			<MkAvatars :user-ids="list.userIds"/>
+		</MkA>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkAvatars from '@/components/avatars.vue';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkButton,
+		MkAvatars,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageLists,
+				icon: 'fas fa-list-ul',
+				bg: 'var(--bg)',
+				action: {
+					icon: 'fas fa-plus',
+					handler: this.create
+				},
+			},
+			pagination: {
+				endpoint: 'users/lists/list',
+				limit: 10,
+			},
+		};
+	},
+
+	methods: {
+		async create() {
+			const { canceled, result: name } = await os.dialog({
+				title: this.$ts.enterListName,
+				input: true
+			});
+			if (canceled) return;
+			await os.api('users/lists/create', { name: name });
+			this.$refs.list.reload();
+			os.success();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qkcjvfiv {
+	padding: 16px;
+
+	> .add {
+		margin: 0 auto var(--margin) auto;
+	}
+
+	> .lists {
+		> .list {
+			display: block;
+			padding: 16px;
+			border: solid 1px var(--divider);
+			border-radius: 6px;
+
+			&:hover {
+				border: solid 1px var(--accent);
+				text-decoration: none;
+			}
+
+			> .name {
+				margin-bottom: 4px;
+			}
+		}
+	}
+}
+</style>