wip

locales/ja.yml

@@ -838,12 +838,13 @@ mobile/views/components/timeline.vue:
   load-more: "もっと"
 
 mobile/views/components/ui.nav.vue:
-  home: "ホーム"
+  timeline: "タイムライン"
   notifications: "通知"
   messaging: "メッセージ"
   search: "検索"
   drive: "ドライブ"
   favorites: "お気に入り"
+  user-lists: "リスト"
   widgets: "ウィジェット"
   game: "ゲーム"
   darkmode: "ダークモード"
@@ -863,6 +864,10 @@ mobile/views/components/users-list.vue:
 mobile/views/pages/favorites.vue:
   title: "お気に入り"
 
+mobile/views/pages/user-lists.vue:
+  title: "リスト"
+  enter-list-name: "リスト名を入力してください"
+
 mobile/views/pages/drive.vue:
   drive: "ドライブ"
   more: "もっと見る"

src/client/app/mobile/script.ts

@@ -37,6 +37,8 @@ import MkSearch from './views/pages/search.vue';
 import MkFollowers from './views/pages/followers.vue';
 import MkFollowing from './views/pages/following.vue';
 import MkFavorites from './views/pages/favorites.vue';
+import MkUserLists from './views/pages/user-lists.vue';
+import MkUserList from './views/pages/user-list.vue';
 import MkSettings from './views/pages/settings.vue';
 import MkOthello from './views/pages/othello.vue';
 
@@ -74,6 +76,8 @@ init((launch) => {
 			{ path: '/i/settings', name: 'settings', component: MkSettings },
 			{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
 			{ path: '/i/favorites', name: 'favorites', component: MkFavorites },
+			{ path: '/i/lists', name: 'user-lists', component: MkUserLists },
+			{ path: '/i/lists/:list', name: 'user-list', component: MkUserList },
 			{ path: '/i/widgets', name: 'widgets', component: MkWidgets },
 			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },

src/client/app/mobile/views/components/ui.nav.vue

@@ -15,14 +15,15 @@
 			</router-link>
 			<div class="links">
 				<ul>
-					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
+					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@timeline%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
-					<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:quidditch%%i18n:@widgets%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:R calendar-alt%%i18n:@widgets%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'">%fa:star%%i18n:@favorites%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'">%fa:list%%i18n:@user-lists%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
@@ -157,7 +158,10 @@ root(isDark)
 		&:first-child
 			margin-top 0
 
-		li
+		&:last-child
+			margin-bottom 0
+
+		> li
 			display block
 			font-size 1em
 			line-height 1em
@@ -199,7 +203,7 @@ root(isDark)
 					opacity 0.5
 
 	.about
-		margin 0
+		margin 0 0 8px 0
 		padding 1em 0
 		text-align center
 		font-size 0.8em

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>

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>