From 070cd52c21683eed44c38525bb8cc5235a78b41d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 24 Apr 2018 21:24:06 +0900
Subject: wip

---
 src/client/app/desktop/views/components/ui.header.account.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 2d4d23933c..54da97071a 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -16,6 +16,9 @@
 				<li>
 					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
 				</li>
+				<li @click="list">
+					<p>%fa:cog%<span>%i18n:@lists%</span>%fa:angle-right%</p>
+				</li>
 			</ul>
 			<ul>
 				<li>
-- 
cgit v1.2.3-freya


From 1a13c7e0b1cbc03064cc1710cc350875a77b24e0 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 24 Apr 2018 23:34:18 +0900
Subject: wip

---
 package.json                                                  | 2 +-
 src/cafy-id.ts                                                | 2 +-
 src/client/app/desktop/views/components/ui.header.account.vue | 2 +-
 src/models/user.ts                                            | 7 ++++---
 src/server/api/endpoints/auth/accept.ts                       | 2 +-
 src/server/api/endpoints/notes/trend.ts                       | 2 +-
 src/server/api/endpoints/users/recommendation.ts              | 2 +-
 src/server/api/endpoints/users/search.ts                      | 2 +-
 8 files changed, 11 insertions(+), 10 deletions(-)

(limited to 'src/client/app')

diff --git a/package.json b/package.json
index ae90d21301..7d0adc3cb6 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"bootstrap-vue": "2.0.0-rc.6",
-		"cafy": "5.1.0",
+		"cafy": "6.0.0",
 		"chai": "4.1.2",
 		"chai-http": "4.0.0",
 		"chalk": "2.4.0",
diff --git a/src/cafy-id.ts b/src/cafy-id.ts
index 1109d42d8f..3faf5cd996 100644
--- a/src/cafy-id.ts
+++ b/src/cafy-id.ts
@@ -19,7 +19,7 @@ export default class ID extends Query<mongo.ObjectID> {
 			}
 		};
 
-		this.pushFirstTimeValidator(v => {
+		this.pushValidator(v => {
 			if (!mongo.ObjectID.prototype.isPrototypeOf(v) && isNotAnId(v)) {
 				return new Error('must-be-an-id');
 			}
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 54da97071a..61197d4017 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -17,7 +17,7 @@
 					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
 				</li>
 				<li @click="list">
-					<p>%fa:cog%<span>%i18n:@lists%</span>%fa:angle-right%</p>
+					<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
 				</li>
 			</ul>
 			<ul>
diff --git a/src/models/user.ts b/src/models/user.ts
index 82110a5475..0621b6e736 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -1,5 +1,6 @@
 import * as mongo from 'mongodb';
 import deepcopy = require('deepcopy');
+import sequential = require('promise-sequential');
 import rap from '@prezzemolo/rap';
 import db from '../db/mongodb';
 import Note, { pack as packNote, deleteNote } from './note';
@@ -167,9 +168,9 @@ export async function deleteUser(user: string | mongo.ObjectID | IUser) {
 	).map(x => deleteAccessToken(x)));
 
 	// このユーザーのNoteをすべて削除
-	await Promise.all((
-		await Note.find({ userId: u._id })
-	).map(x => deleteNote(x)));
+	//await sequential((
+	//	await Note.find({ userId: u._id })
+	//).map(x => () => deleteNote(x)));
 
 	// このユーザーのNoteReactionをすべて削除
 	await Promise.all((
diff --git a/src/server/api/endpoints/auth/accept.ts b/src/server/api/endpoints/auth/accept.ts
index e0073b31e6..b6297d663d 100644
--- a/src/server/api/endpoints/auth/accept.ts
+++ b/src/server/api/endpoints/auth/accept.ts
@@ -3,7 +3,7 @@
  */
 import rndstr from 'rndstr';
 const crypto = require('crypto');
-import $ from 'cafy'; import ID from '../../../../cafy-id';
+import $ from 'cafy';
 import App from '../../../../models/app';
 import AuthSess from '../../../../models/auth-session';
 import AccessToken from '../../../../models/access-token';
diff --git a/src/server/api/endpoints/notes/trend.ts b/src/server/api/endpoints/notes/trend.ts
index 6c220fc922..48ecd5b843 100644
--- a/src/server/api/endpoints/notes/trend.ts
+++ b/src/server/api/endpoints/notes/trend.ts
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 const ms = require('ms');
-import $ from 'cafy'; import ID from '../../../../cafy-id';
+import $ from 'cafy';
 import Note, { pack } from '../../../../models/note';
 
 /**
diff --git a/src/server/api/endpoints/users/recommendation.ts b/src/server/api/endpoints/users/recommendation.ts
index 1e8ef83432..f72bb04bf1 100644
--- a/src/server/api/endpoints/users/recommendation.ts
+++ b/src/server/api/endpoints/users/recommendation.ts
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 const ms = require('ms');
-import $ from 'cafy'; import ID from '../../../../cafy-id';
+import $ from 'cafy';
 import User, { pack } from '../../../../models/user';
 import { getFriendIds } from '../../common/get-friends';
 import Mute from '../../../../models/mute';
diff --git a/src/server/api/endpoints/users/search.ts b/src/server/api/endpoints/users/search.ts
index faf9b901d1..da30f47c2a 100644
--- a/src/server/api/endpoints/users/search.ts
+++ b/src/server/api/endpoints/users/search.ts
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 import * as mongo from 'mongodb';
-import $ from 'cafy'; import ID from '../../../../cafy-id';
+import $ from 'cafy';
 import User, { pack } from '../../../../models/user';
 import config from '../../../../config';
 const escapeRegexp = require('escape-regexp');
-- 
cgit v1.2.3-freya


From 1ba5dfd79c66edd871f922d21861557e6152cc6c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 06:34:50 +0900
Subject: wip

---
 .../app/desktop/views/components/lists-window.vue  | 37 +++++++++++++++++
 src/server/api/endpoints/users/list/create.ts      | 25 -----------
 src/server/api/endpoints/users/list/push.ts        | 48 ----------------------
 src/server/api/endpoints/users/lists/create.ts     | 25 +++++++++++
 src/server/api/endpoints/users/lists/list.ts       | 13 ++++++
 src/server/api/endpoints/users/lists/push.ts       | 48 ++++++++++++++++++++++
 6 files changed, 123 insertions(+), 73 deletions(-)
 create mode 100644 src/client/app/desktop/views/components/lists-window.vue
 delete mode 100644 src/server/api/endpoints/users/list/create.ts
 delete mode 100644 src/server/api/endpoints/users/list/push.ts
 create mode 100644 src/server/api/endpoints/users/lists/create.ts
 create mode 100644 src/server/api/endpoints/users/lists/list.ts
 create mode 100644 src/server/api/endpoints/users/lists/push.ts

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/lists-window.vue b/src/client/app/desktop/views/components/lists-window.vue
new file mode 100644
index 0000000000..7d6a5def2c
--- /dev/null
+++ b/src/client/app/desktop/views/components/lists-window.vue
@@ -0,0 +1,37 @@
+<template>
+<mk-window ref="window" is-modal width="500px" height="550px" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:list% リスト</span>
+
+	<button class="ui">リストを作成</button>
+	<a v-for="list in lists" :key="list.id">
+
+	</a>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			lists: []
+		};
+	},
+	mounted() {
+		(this as any).api('users/lists/list').then(lists => {
+			this.fetching = false;
+			this.lists = lists;
+		});
+	},
+	methods: {
+		close() {
+			(this as any).$refs.window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
diff --git a/src/server/api/endpoints/users/list/create.ts b/src/server/api/endpoints/users/list/create.ts
deleted file mode 100644
index 6ae510f52b..0000000000
--- a/src/server/api/endpoints/users/list/create.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import UserList, { pack } from '../../../../../models/user-list';
-
-/**
- * Create a user list
- */
-module.exports = async (params, user) => new Promise(async (res, rej) => {
-	// Get 'title' parameter
-	const [title, titleErr] = $(params.title).string().range(1, 100).$;
-	if (titleErr) return rej('invalid title param');
-
-	// insert
-	const userList = await UserList.insert({
-		createdAt: new Date(),
-		userId: user._id,
-		title: title,
-		userIds: []
-	});
-
-	// Response
-	res(await pack(userList));
-});
diff --git a/src/server/api/endpoints/users/list/push.ts b/src/server/api/endpoints/users/list/push.ts
deleted file mode 100644
index f21234775d..0000000000
--- a/src/server/api/endpoints/users/list/push.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import $ from 'cafy'; import ID from '../../../../../cafy-id';
-import UserList from '../../../../../models/user-list';
-import User from '../../../../../models/user';
-
-/**
- * Add a user to a user list
- */
-module.exports = async (params, me) => new Promise(async (res, rej) => {
-	// Get 'listId' parameter
-	const [listId, listIdErr] = $(params.listId).type(ID).$;
-	if (listIdErr) return rej('invalid listId param');
-
-	// Fetch the list
-	const userList = await UserList.findOne({
-		_id: listId,
-		userId: me._id,
-	});
-
-	if (userList == null) {
-		return rej('list not found');
-	}
-
-	// Get 'userId' parameter
-	const [userId, userIdErr] = $(params.userId).type(ID).$;
-	if (userIdErr) return rej('invalid userId param');
-
-	// Fetch the user
-	const user = await User.findOne({
-		_id: userId
-	});
-
-	if (user == null) {
-		return rej('user not found');
-	}
-
-	if (userList.userIds.map(id => id.toHexString()).includes(user._id.toHexString())) {
-		return rej('the user already added');
-	}
-
-	// Push the user
-	await UserList.update({ _id: userList._id }, {
-		$push: {
-			userIds: user._id
-		}
-	});
-
-	res();
-});
diff --git a/src/server/api/endpoints/users/lists/create.ts b/src/server/api/endpoints/users/lists/create.ts
new file mode 100644
index 0000000000..6ae510f52b
--- /dev/null
+++ b/src/server/api/endpoints/users/lists/create.ts
@@ -0,0 +1,25 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import UserList, { pack } from '../../../../../models/user-list';
+
+/**
+ * Create a user list
+ */
+module.exports = async (params, user) => new Promise(async (res, rej) => {
+	// Get 'title' parameter
+	const [title, titleErr] = $(params.title).string().range(1, 100).$;
+	if (titleErr) return rej('invalid title param');
+
+	// insert
+	const userList = await UserList.insert({
+		createdAt: new Date(),
+		userId: user._id,
+		title: title,
+		userIds: []
+	});
+
+	// Response
+	res(await pack(userList));
+});
diff --git a/src/server/api/endpoints/users/lists/list.ts b/src/server/api/endpoints/users/lists/list.ts
new file mode 100644
index 0000000000..d19339a1f5
--- /dev/null
+++ b/src/server/api/endpoints/users/lists/list.ts
@@ -0,0 +1,13 @@
+import UserList, { pack } from '../../../../../models/user-list';
+
+/**
+ * Add a user to a user list
+ */
+module.exports = async (params, me) => new Promise(async (res, rej) => {
+	// Fetch lists
+	const userLists = await UserList.find({
+		userId: me._id,
+	});
+
+	res(await Promise.all(userLists.map(x => pack(x))));
+});
diff --git a/src/server/api/endpoints/users/lists/push.ts b/src/server/api/endpoints/users/lists/push.ts
new file mode 100644
index 0000000000..f21234775d
--- /dev/null
+++ b/src/server/api/endpoints/users/lists/push.ts
@@ -0,0 +1,48 @@
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
+import UserList from '../../../../../models/user-list';
+import User from '../../../../../models/user';
+
+/**
+ * Add a user to a user list
+ */
+module.exports = async (params, me) => new Promise(async (res, rej) => {
+	// Get 'listId' parameter
+	const [listId, listIdErr] = $(params.listId).type(ID).$;
+	if (listIdErr) return rej('invalid listId param');
+
+	// Fetch the list
+	const userList = await UserList.findOne({
+		_id: listId,
+		userId: me._id,
+	});
+
+	if (userList == null) {
+		return rej('list not found');
+	}
+
+	// Get 'userId' parameter
+	const [userId, userIdErr] = $(params.userId).type(ID).$;
+	if (userIdErr) return rej('invalid userId param');
+
+	// Fetch the user
+	const user = await User.findOne({
+		_id: userId
+	});
+
+	if (user == null) {
+		return rej('user not found');
+	}
+
+	if (userList.userIds.map(id => id.toHexString()).includes(user._id.toHexString())) {
+		return rej('the user already added');
+	}
+
+	// Push the user
+	await UserList.update({ _id: userList._id }, {
+		$push: {
+			userIds: user._id
+		}
+	});
+
+	res();
+});
-- 
cgit v1.2.3-freya


From c7f80182c251237d34fa17d67baf055ae3632b04 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 12:36:54 +0900
Subject: wip

---
 .eslintrc                                          |  1 +
 .../app/desktop/views/components/list-timeline.vue | 75 ++++++++++++++++++
 .../app/desktop/views/components/lists-window.vue  | 17 ++++-
 src/client/app/desktop/views/components/notes.vue  | 88 ++++++++++++++++++++--
 .../app/desktop/views/components/timeline.core.vue | 70 ++++-------------
 .../desktop/views/components/ui.header.account.vue |  5 ++
 src/client/app/desktop/views/pages/list.vue        | 72 ++++++++++++++++++
 7 files changed, 264 insertions(+), 64 deletions(-)
 create mode 100644 src/client/app/desktop/views/components/list-timeline.vue
 create mode 100644 src/client/app/desktop/views/pages/list.vue

(limited to 'src/client/app')

diff --git a/.eslintrc b/.eslintrc
index 7a74d6ef9b..0943cb4b64 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -14,6 +14,7 @@
 		"vue/no-unused-vars": false,
 		"vue/attributes-order": false,
 		"vue/require-prop-types": false,
+		"vue/require-default-prop": false,
 		"no-console": 0,
 		"no-unused-vars": 0,
 		"no-empty": 0
diff --git a/src/client/app/desktop/views/components/list-timeline.vue b/src/client/app/desktop/views/components/list-timeline.vue
new file mode 100644
index 0000000000..61300f6f8f
--- /dev/null
+++ b/src/client/app/desktop/views/components/list-timeline.vue
@@ -0,0 +1,75 @@
+<template>
+	<mk-notes ref="timeline" :more="more"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	props: ['list'],
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	mounted() {
+		this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
+		this.connection.on('note', this.onNote);
+		this.connection.on('userAdded', this.onUserAdded);
+		this.connection.on('userRemoved', this.onUserRemoved);
+
+		this.fetch();
+	},
+	beforeDestroy() {
+		this.connection.off('note', this.onNote);
+		this.connection.off('userAdded', this.onUserAdded);
+		this.connection.off('userRemoved', this.onUserRemoved);
+		this.connection.close();
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this as any).api('notes/list-timeline', {
+				limit: fetchLimit + 1,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+					this.existMore = true;
+				}
+				(this.$refs.timeline as any).init(notes);
+				this.fetching = false;
+				this.$emit('loaded');
+			});
+		},
+		more() {
+			this.moreFetching = true;
+
+			(this as any).api('notes/list-timeline', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/lists-window.vue b/src/client/app/desktop/views/components/lists-window.vue
index 7d6a5def2c..7097e5ed4b 100644
--- a/src/client/app/desktop/views/components/lists-window.vue
+++ b/src/client/app/desktop/views/components/lists-window.vue
@@ -2,10 +2,8 @@
 <mk-window ref="window" is-modal width="500px" height="550px" @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:list% リスト</span>
 
-	<button class="ui">リストを作成</button>
-	<a v-for="list in lists" :key="list.id">
-
-	</a>
+	<button class="ui" @click="add">リストを作成</button>
+	<router-link v-for="list in lists" :key="list.id" :to="`/i/lists/${list.id}`">{{ list.title }}</router-link>
 </mk-window>
 </template>
 
@@ -25,6 +23,17 @@ export default Vue.extend({
 		});
 	},
 	methods: {
+		add() {
+			(this as any).apis.input({
+				title: 'リスト名',
+			}).then(async title => {
+				const list = await (this as any).api('users/lists/create', {
+					title
+				});
+
+				this.$router.push(`i/lists/${ list.id }`);
+			});
+		},
 		close() {
 			(this as any).$refs.window.close();
 		}
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 1a33a4240b..2822cb8c0f 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -9,8 +9,11 @@
 			</p>
 		</template>
 	</transition-group>
-	<footer>
-		<slot name="footer"></slot>
+	<footer v-if="loadMore">
+		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">%i18n:@load-more%</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</button>
 	</footer>
 </div>
 </template>
@@ -19,16 +22,29 @@
 import Vue from 'vue';
 import XNote from './notes.note.vue';
 
+const displayLimit = 30;
+
 export default Vue.extend({
 	components: {
 		XNote
 	},
+
 	props: {
-		notes: {
-			type: Array,
-			default: () => []
+		more: {
+			type: Function,
+			required: false
 		}
 	},
+
+	data() {
+		return {
+			notes: [],
+			queue: [],
+			fetching: false,
+			moreFetching: false
+		};
+	},
+
 	computed: {
 		_notes(): any[] {
 			return (this.notes as any).map(note => {
@@ -40,12 +56,74 @@ export default Vue.extend({
 			});
 		}
 	},
+
+	mounted() {
+		window.addEventListener('scroll', this.onScroll);
+	},
+
+	beforeDestroy() {
+		window.removeEventListener('scroll', this.onScroll);
+	},
+
 	methods: {
+		isScrollTop() {
+			return window.scrollY <= 8;
+		},
+
 		focus() {
 			(this.$el as any).children[0].focus();
 		},
+
 		onNoteUpdated(i, note) {
 			Vue.set((this as any).notes, i, note);
+		},
+
+		init(notes) {
+			this.queue = [];
+			this.notes = notes;
+		},
+
+		prepend(note) {
+			if (this.isScrollTop()) {
+				this.notes.unshift(note);
+
+				// オーバーフローしたら古い投稿は捨てる
+				if (this.notes.length >= displayLimit) {
+					this.notes = this.notes.slice(0, displayLimit);
+				}
+			} else {
+				this.queue.unshift(note);
+			}
+		},
+
+		append(note) {
+			this.notes.push(note);
+		},
+
+		tail() {
+			return this.notes[this.notes.length - 1];
+		},
+
+		releaseQueue() {
+			this.queue.forEach(n => this.prepend(n));
+			this.queue = [];
+		},
+
+		async loadMore() {
+			this.moreFetching = true;
+			await this.more();
+			this.moreFetching = false;
+		},
+
+		onScroll() {
+			if (this.isScrollTop()) {
+				this.releaseQueue();
+			}
+
+			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.loadMore();
+			}
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index 719425c3c7..11c7adf158 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-home-timeline">
+<div class="mk-timeline-core">
 	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
 	<mk-friends-maker v-if="src == 'home' && alone"/>
 	<div class="fetching" v-if="fetching">
@@ -8,12 +8,7 @@
 	<p class="empty" v-if="notes.length == 0 && !fetching">
 		%fa:R comments%%i18n:@empty%
 	</p>
-	<mk-notes :notes="notes" ref="timeline">
-		<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">%i18n:@load-more%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
-		</button>
-	</mk-notes>
+	<mk-notes :notes="notes" ref="timeline" :more="canFetchMore ? more : null"/>
 </div>
 </template>
 
@@ -22,7 +17,6 @@ import Vue from 'vue';
 import { url } from '../../../config';
 
 const fetchLimit = 10;
-const displayLimit = 30;
 
 export default Vue.extend({
 	props: {
@@ -37,8 +31,6 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			notes: [],
-			queue: [],
 			connection: null,
 			connectionId: null,
 			date: null
@@ -67,7 +59,7 @@ export default Vue.extend({
 		},
 
 		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
+			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
@@ -82,7 +74,6 @@ export default Vue.extend({
 		}
 
 		document.addEventListener('keydown', this.onKeydown);
-		window.addEventListener('scroll', this.onScroll);
 
 		this.fetch();
 	},
@@ -96,7 +87,6 @@ export default Vue.extend({
 		this.stream.dispose(this.connectionId);
 
 		document.removeEventListener('keydown', this.onKeydown);
-		window.removeEventListener('scroll', this.onScroll);
 	},
 
 	methods: {
@@ -105,7 +95,6 @@ export default Vue.extend({
 		},
 
 		fetch(cb?) {
-			this.queue = [];
 			this.fetching = true;
 
 			(this as any).api(this.endpoint, {
@@ -118,7 +107,7 @@ export default Vue.extend({
 					notes.pop();
 					this.existMore = true;
 				}
-				this.notes = notes;
+				(this.$refs.timeline as any).init(notes);
 				this.fetching = false;
 				this.$emit('loaded');
 				if (cb) cb();
@@ -132,7 +121,7 @@ export default Vue.extend({
 
 			(this as any).api(this.endpoint, {
 				limit: fetchLimit + 1,
-				untilId: this.notes[this.notes.length - 1].id,
+				untilId: (this.$refs.timeline as any).tail().id,
 				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
 				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
@@ -141,33 +130,11 @@ export default Vue.extend({
 				} else {
 					this.existMore = false;
 				}
-				this.notes = this.notes.concat(notes);
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
 				this.moreFetching = false;
 			});
 		},
 
-		prependNote(note, silent = false) {
-			// サウンドを再生する
-			if ((this as any).os.isEnableSounds && !silent) {
-				const sound = new Audio(`${url}/assets/post.mp3`);
-				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
-				sound.play();
-			}
-
-			// Prepent a note
-			this.notes.unshift(note);
-
-			// オーバーフローしたら古い投稿は捨てる
-			if (this.notes.length >= displayLimit) {
-				this.notes = this.notes.slice(0, displayLimit);
-			}
-		},
-
-		releaseQueue() {
-			this.queue.forEach(n => this.prependNote(n, true));
-			this.queue = [];
-		},
-
 		onNote(note) {
 			//#region 弾く
 			const isMyNote = note.userId == (this as any).os.i.id;
@@ -186,11 +153,15 @@ export default Vue.extend({
 			}
 			//#endregion
 
-			if (this.isScrollTop()) {
-				this.prependNote(note);
-			} else {
-				this.queue.unshift(note);
+			// サウンドを再生する
+			if ((this as any).os.isEnableSounds) {
+				const sound = new Audio(`${url}/assets/post.mp3`);
+				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
+				sound.play();
 			}
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
 		},
 
 		onChangeFollowing() {
@@ -206,17 +177,6 @@ export default Vue.extend({
 			this.fetch();
 		},
 
-		onScroll() {
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
-				const current = window.scrollY + window.innerHeight;
-				if (current > document.body.offsetHeight - 8) this.more();
-			}
-
-			if (this.isScrollTop()) {
-				this.releaseQueue();
-			}
-		},
-
 		onKeydown(e) {
 			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
 				if (e.which == 84) { // t
@@ -231,7 +191,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-home-timeline
+.mk-timeline-core
 	> .newer-indicator
 		position -webkit-sticky
 		position sticky
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 61197d4017..93ee5aa195 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -45,6 +45,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import MkListsWindow from './lists-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
@@ -83,6 +84,10 @@ export default Vue.extend({
 			this.close();
 			(this as any).os.new(MkDriveWindow);
 		},
+		list() {
+			this.close();
+			(this as any).os.new(MkListsWindow);
+		},
 		settings() {
 			this.close();
 			(this as any).os.new(MkSettingsWindow);
diff --git a/src/client/app/desktop/views/pages/list.vue b/src/client/app/desktop/views/pages/list.vue
new file mode 100644
index 0000000000..70130eae68
--- /dev/null
+++ b/src/client/app/desktop/views/pages/list.vue
@@ -0,0 +1,72 @@
+<template>
+<mk-ui>
+	<header :class="$style.header">
+		<h1>{{ list.title }}</h1>
+	</header>
+	<mk-list-timeline :list="list"/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			list: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	mounted() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this as any).api('users/lists/show', {
+				id: this.$route.params.list
+			}).then(list => {
+				this.list = list;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	width 100%
+	max-width 600px
+	margin 0 auto
+	color #555
+
+.notes
+	max-width 600px
+	margin 0 auto
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+	overflow hidden
+
+.loading
+	padding 64px 0
+
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-fa]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
+
+</style>
-- 
cgit v1.2.3-freya


From 4c9b4cb80d221bf2316cf0c7133813c30ffb377b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 13:48:02 +0900
Subject: wip

---
 .../app/common/scripts/streaming/user-list.ts      | 17 ++++++++++++
 .../app/desktop/views/components/list-timeline.vue | 15 +++++------
 src/client/app/desktop/views/components/notes.vue  | 31 ++++++++++++++++++++--
 .../app/desktop/views/components/timeline.core.vue | 25 -----------------
 4 files changed, 53 insertions(+), 35 deletions(-)
 create mode 100644 src/client/app/common/scripts/streaming/user-list.ts

(limited to 'src/client/app')

diff --git a/src/client/app/common/scripts/streaming/user-list.ts b/src/client/app/common/scripts/streaming/user-list.ts
new file mode 100644
index 0000000000..30a52b98dd
--- /dev/null
+++ b/src/client/app/common/scripts/streaming/user-list.ts
@@ -0,0 +1,17 @@
+import Stream from './stream';
+import MiOS from '../../mios';
+
+export class UserListStream extends Stream {
+	constructor(os: MiOS, me, listId) {
+		super(os, 'user-list', {
+			i: me.token,
+			listId
+		});
+
+		(this as any).on('_connected_', () => {
+			this.send({
+				i: me.token
+			});
+		});
+	}
+}
diff --git a/src/client/app/desktop/views/components/list-timeline.vue b/src/client/app/desktop/views/components/list-timeline.vue
index 61300f6f8f..e946453f40 100644
--- a/src/client/app/desktop/views/components/list-timeline.vue
+++ b/src/client/app/desktop/views/components/list-timeline.vue
@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { UserListStream } from '../../../common/scripts/streaming/user-list';
 
 const fetchLimit = 10;
 
@@ -21,21 +22,19 @@ export default Vue.extend({
 		$route: 'fetch'
 	},
 	mounted() {
-		this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
-		this.connection.on('note', this.onNote);
-		this.connection.on('userAdded', this.onUserAdded);
-		this.connection.on('userRemoved', this.onUserRemoved);
-
 		this.fetch();
 	},
 	beforeDestroy() {
-		this.connection.off('note', this.onNote);
-		this.connection.off('userAdded', this.onUserAdded);
-		this.connection.off('userRemoved', this.onUserRemoved);
 		this.connection.close();
 	},
 	methods: {
 		fetch() {
+			if (this.connection) this.connection.close();
+			this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
+			this.connection.on('note', this.onNote);
+			this.connection.on('userAdded', this.onUserAdded);
+			this.connection.on('userRemoved', this.onUserRemoved);
+
 			this.fetching = true;
 
 			(this as any).api('notes/list-timeline', {
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 2822cb8c0f..6965a18eda 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -20,6 +20,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { url } from '../../../config';
+
 import XNote from './notes.note.vue';
 
 const displayLimit = 30;
@@ -83,10 +85,35 @@ export default Vue.extend({
 			this.notes = notes;
 		},
 
-		prepend(note) {
+		prepend(note, silent = false) {
+			//#region 弾く
+			const isMyNote = note.userId == (this as any).os.i.id;
+			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+
+			if ((this as any).os.i.clientSettings.showMyRenotes === false) {
+				if (isMyNote && isPureRenote) {
+					return;
+				}
+			}
+
+			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
+				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
+					return;
+				}
+			}
+			//#endregion
+
 			if (this.isScrollTop()) {
+				// Prepend the note
 				this.notes.unshift(note);
 
+				// サウンドを再生する
+				if ((this as any).os.isEnableSounds && !silent) {
+					const sound = new Audio(`${url}/assets/post.mp3`);
+					sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
+					sound.play();
+				}
+
 				// オーバーフローしたら古い投稿は捨てる
 				if (this.notes.length >= displayLimit) {
 					this.notes = this.notes.slice(0, displayLimit);
@@ -105,7 +132,7 @@ export default Vue.extend({
 		},
 
 		releaseQueue() {
-			this.queue.forEach(n => this.prepend(n));
+			this.queue.forEach(n => this.prepend(n, true));
 			this.queue = [];
 		},
 
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index 11c7adf158..93cc59b556 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { url } from '../../../config';
 
 const fetchLimit = 10;
 
@@ -136,30 +135,6 @@ export default Vue.extend({
 		},
 
 		onNote(note) {
-			//#region 弾く
-			const isMyNote = note.userId == (this as any).os.i.id;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
-
-			if ((this as any).os.i.clientSettings.showMyRenotes === false) {
-				if (isMyNote && isPureRenote) {
-					return;
-				}
-			}
-
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
-				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
-					return;
-				}
-			}
-			//#endregion
-
-			// サウンドを再生する
-			if ((this as any).os.isEnableSounds) {
-				const sound = new Audio(`${url}/assets/post.mp3`);
-				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
-				sound.play();
-			}
-
 			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
-- 
cgit v1.2.3-freya


From c2e053a208609d59188dce9e328c1ab9706aa35c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 19:53:16 +0900
Subject: wip

---
 src/client/app/desktop/script.ts                   |   2 +
 src/client/app/desktop/views/components/index.ts   |   2 +
 .../app/desktop/views/components/list-timeline.vue |  74 ---------
 .../app/desktop/views/components/lists-window.vue  |   2 +-
 src/client/app/desktop/views/components/notes.vue  |  53 +++++-
 .../app/desktop/views/components/timeline.core.vue |  81 +++++-----
 .../views/components/user-list-timeline.vue        |  91 +++++++++++
 src/client/app/desktop/views/pages/list.vue        |  72 ---------
 src/client/app/desktop/views/pages/user-list.vue   |  74 +++++++++
 src/server/api/endpoints.ts                        |  29 ++++
 .../api/endpoints/notes/user-list-timeline.ts      | 179 +++++++++++++++++++++
 src/server/api/endpoints/users/lists/show.ts       |  23 +++
 .../api/endpoints/users/search_by_username.ts      |   6 +-
 13 files changed, 486 insertions(+), 202 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/list-timeline.vue
 create mode 100644 src/client/app/desktop/views/components/user-list-timeline.vue
 delete mode 100644 src/client/app/desktop/views/pages/list.vue
 create mode 100644 src/client/app/desktop/views/pages/user-list.vue
 create mode 100644 src/server/api/endpoints/notes/user-list-timeline.ts
 create mode 100644 src/server/api/endpoints/users/lists/show.ts

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 3b0ed48cd0..2658a86b95 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -28,6 +28,7 @@ import MkUser from './views/pages/user/user.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
+import MkUserList from './views/pages/user-list.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -55,6 +56,7 @@ init(async (launch) => {
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
+			{ path: '/i/lists/:list', component: MkUserList },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/othello', component: MkOthello },
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 4f61f43692..f58d0706df 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -28,6 +28,7 @@ import friendsMaker from './friends-maker.vue';
 import followers from './followers.vue';
 import following from './following.vue';
 import usersList from './users-list.vue';
+import userListTimeline from './user-list-timeline.vue';
 import widgetContainer from './widget-container.vue';
 
 Vue.component('mk-ui', ui);
@@ -58,4 +59,5 @@ Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-followers', followers);
 Vue.component('mk-following', following);
 Vue.component('mk-users-list', usersList);
+Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('mk-widget-container', widgetContainer);
diff --git a/src/client/app/desktop/views/components/list-timeline.vue b/src/client/app/desktop/views/components/list-timeline.vue
deleted file mode 100644
index e946453f40..0000000000
--- a/src/client/app/desktop/views/components/list-timeline.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-	<mk-notes ref="timeline" :more="more"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { UserListStream } from '../../../common/scripts/streaming/user-list';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	props: ['list'],
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	mounted() {
-		this.fetch();
-	},
-	beforeDestroy() {
-		this.connection.close();
-	},
-	methods: {
-		fetch() {
-			if (this.connection) this.connection.close();
-			this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
-			this.connection.on('note', this.onNote);
-			this.connection.on('userAdded', this.onUserAdded);
-			this.connection.on('userRemoved', this.onUserRemoved);
-
-			this.fetching = true;
-
-			(this as any).api('notes/list-timeline', {
-				limit: fetchLimit + 1,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-			}).then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-					this.existMore = true;
-				}
-				(this.$refs.timeline as any).init(notes);
-				this.fetching = false;
-				this.$emit('loaded');
-			});
-		},
-		more() {
-			this.moreFetching = true;
-
-			(this as any).api('notes/list-timeline', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-			}).then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				notes.forEach(n => (this.$refs.timeline as any).append(n));
-				this.moreFetching = false;
-			});
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/lists-window.vue b/src/client/app/desktop/views/components/lists-window.vue
index 7097e5ed4b..30b1794a29 100644
--- a/src/client/app/desktop/views/components/lists-window.vue
+++ b/src/client/app/desktop/views/components/lists-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="500px" height="550px" @closed="$destroy">
-	<span slot="header" :class="$style.header">%fa:list% リスト</span>
+	<span slot="header">%fa:list% リスト</span>
 
 	<button class="ui" @click="add">リストを作成</button>
 	<router-link v-for="list in lists" :key="list.id" :to="`/i/lists/${list.id}`">{{ list.title }}</router-link>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 6965a18eda..ae36c899d5 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -1,5 +1,14 @@
 <template>
 <div class="mk-notes">
+	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
+
+	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+
+	<div v-if="!fetching && requestInitPromise != null">
+		<p>読み込みに失敗しました。</p>
+		<button @click="resolveInitPromise">リトライ</button>
+	</div>
+
 	<transition-group name="mk-notes" class="transition">
 		<template v-for="(note, i) in _notes">
 			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
@@ -9,7 +18,8 @@
 			</p>
 		</template>
 	</transition-group>
-	<footer v-if="loadMore">
+
+	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">%i18n:@load-more%</template>
 			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
@@ -40,9 +50,10 @@ export default Vue.extend({
 
 	data() {
 		return {
+			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
-			fetching: false,
+			fetching: true,
 			moreFetching: false
 		};
 	},
@@ -80,9 +91,25 @@ export default Vue.extend({
 			Vue.set((this as any).notes, i, note);
 		},
 
-		init(notes) {
+		init(promiseGenerator: () => Promise<any[]>) {
+			this.requestInitPromise = promiseGenerator;
+			this.resolveInitPromise();
+		},
+
+		resolveInitPromise() {
 			this.queue = [];
-			this.notes = notes;
+			this.notes = [];
+			this.fetching = true;
+
+			const promise = this.requestInitPromise();
+
+			promise.then(notes => {
+				this.notes = notes;
+				this.requestInitPromise = null;
+				this.fetching = false;
+			}, e => {
+				this.fetching = false;
+			});
 		},
 
 		prepend(note, silent = false) {
@@ -137,6 +164,9 @@ export default Vue.extend({
 		},
 
 		async loadMore() {
+			if (this.more == null) return;
+			if (this.moreFetching) return;
+
 			this.moreFetching = true;
 			await this.more();
 			this.moreFetching = false;
@@ -157,6 +187,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 root(isDark)
 	.transition
 		.mk-notes-enter
@@ -183,6 +215,13 @@ root(isDark)
 			[data-fa]
 				margin-right 8px
 
+	> .newer-indicator
+		position -webkit-sticky
+		position sticky
+		z-index 100
+		height 3px
+		background $theme-color
+
 	> footer
 		> *
 			display block
@@ -191,16 +230,16 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			border-top solid 1px #eaeaea
+			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 4px
 			border-bottom-right-radius 4px
 
 		> button
 			&:hover
-				background #f5f5f5
+				background isDark ? #2e3440 : #f5f5f5
 
 			&:active
-				background #eee
+				background isDark ? #21242b : #eee
 
 .mk-notes[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index 93cc59b556..f5e0ee118e 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -1,14 +1,15 @@
 <template>
 <div class="mk-timeline-core">
-	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
 	<mk-friends-maker v-if="src == 'home' && alone"/>
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="notes.length == 0 && !fetching">
-		%fa:R comments%%i18n:@empty%
-	</p>
-	<mk-notes :notes="notes" ref="timeline" :more="canFetchMore ? more : null"/>
+
+	<mk-notes ref="timeline" :more="canFetchMore ? more : null">
+		<p :class="$style.empty" slot="empty">
+			%fa:R comments%%i18n:@empty%
+		</p>
+	</mk-notes>
 </div>
 </template>
 
@@ -89,28 +90,26 @@ export default Vue.extend({
 	},
 
 	methods: {
-		isScrollTop() {
-			return window.scrollY <= 8;
-		},
-
 		fetch(cb?) {
 			this.fetching = true;
 
-			(this as any).api(this.endpoint, {
-				limit: fetchLimit + 1,
-				untilDate: this.date ? this.date.getTime() : undefined,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-			}).then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-					this.existMore = true;
-				}
-				(this.$refs.timeline as any).init(notes);
-				this.fetching = false;
-				this.$emit('loaded');
-				if (cb) cb();
-			});
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api(this.endpoint, {
+					limit: fetchLimit + 1,
+					untilDate: this.date ? this.date.getTime() : undefined,
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+					if (cb) cb();
+				}, rej);
+			}));
 		},
 
 		more() {
@@ -167,31 +166,27 @@ export default Vue.extend({
 @import '~const.styl'
 
 .mk-timeline-core
-	> .newer-indicator
-		position -webkit-sticky
-		position sticky
-		z-index 100
-		height 3px
-		background $theme-color
-
 	> .mk-friends-maker
 		border-bottom solid 1px #eee
 
 	> .fetching
 		padding 64px 0
 
-	> .empty
+</style>
+
+<style lang="stylus" module>
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-fa]
 		display block
-		margin 0 auto
-		padding 32px
-		max-width 400px
-		text-align center
-		color #999
-
-		> [data-fa]
-			display block
-			margin-bottom 16px
-			font-size 3em
-			color #ccc
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
 
 </style>
diff --git a/src/client/app/desktop/views/components/user-list-timeline.vue b/src/client/app/desktop/views/components/user-list-timeline.vue
new file mode 100644
index 0000000000..f71972ab78
--- /dev/null
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -0,0 +1,91 @@
+<template>
+	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { UserListStream } from '../../../common/scripts/streaming/user-list';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	props: ['list'],
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+	watch: {
+		$route: 'init'
+	},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		this.connection.close();
+	},
+	methods: {
+		init() {
+			if (this.connection) this.connection.close();
+			this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
+			this.connection.on('note', this.onNote);
+			this.connection.on('userAdded', this.onUserAdded);
+			this.connection.on('userRemoved', this.onUserRemoved);
+
+			this.fetch();
+		},
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/user-list-timeline', {
+					listId: this.list.id,
+					limit: fetchLimit + 1,
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+		more() {
+			this.moreFetching = true;
+
+			(this as any).api('notes/list-timeline', {
+				listId: this.list.id,
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+		},
+		onNote(note) {
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+		onUserAdded() {
+			this.fetch();
+		},
+		onUserRemoved() {
+			this.fetch();
+		},
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/list.vue b/src/client/app/desktop/views/pages/list.vue
deleted file mode 100644
index 70130eae68..0000000000
--- a/src/client/app/desktop/views/pages/list.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<mk-ui>
-	<header :class="$style.header">
-		<h1>{{ list.title }}</h1>
-	</header>
-	<mk-list-timeline :list="list"/>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			list: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	mounted() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this as any).api('users/lists/show', {
-				id: this.$route.params.list
-			}).then(list => {
-				this.list = list;
-				this.fetching = false;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.header
-	width 100%
-	max-width 600px
-	margin 0 auto
-	color #555
-
-.notes
-	max-width 600px
-	margin 0 auto
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-	overflow hidden
-
-.loading
-	padding 64px 0
-
-.empty
-	display block
-	margin 0 auto
-	padding 32px
-	max-width 400px
-	text-align center
-	color #999
-
-	> [data-fa]
-		display block
-		margin-bottom 16px
-		font-size 3em
-		color #ccc
-
-</style>
diff --git a/src/client/app/desktop/views/pages/user-list.vue b/src/client/app/desktop/views/pages/user-list.vue
new file mode 100644
index 0000000000..1889f7dbe4
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user-list.vue
@@ -0,0 +1,74 @@
+<template>
+<mk-ui>
+	<template v-if="!fetching">
+		<header :class="$style.header">
+			<h1>{{ list.title }}</h1>
+		</header>
+		<mk-user-list-timeline :list="list"/>
+	</template>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			list: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	mounted() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this as any).api('users/lists/show', {
+				listId: this.$route.params.list
+			}).then(list => {
+				this.list = list;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	width 100%
+	max-width 600px
+	margin 0 auto
+	color #555
+
+.notes
+	max-width 600px
+	margin 0 auto
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+	overflow hidden
+
+.loading
+	padding 64px 0
+
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-fa]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
+
+</style>
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index 3686918147..734b8273f1 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -414,6 +414,27 @@ const endpoints: Endpoint[] = [
 		name: 'users/get_frequently_replied_users'
 	},
 
+	{
+		name: 'users/lists/show',
+		withCredential: true,
+		kind: 'account-read'
+	},
+	{
+		name: 'users/lists/create',
+		withCredential: true,
+		kind: 'account-write'
+	},
+	{
+		name: 'users/lists/push',
+		withCredential: true,
+		kind: 'account-write'
+	},
+	{
+		name: 'users/lists/list',
+		withCredential: true,
+		kind: 'account-read'
+	},
+
 	{
 		name: 'following/create',
 		withCredential: true,
@@ -503,6 +524,14 @@ const endpoints: Endpoint[] = [
 			max: 100
 		}
 	},
+	{
+		name: 'notes/user-list-timeline',
+		withCredential: true,
+		limit: {
+			duration: ms('10minutes'),
+			max: 100
+		}
+	},
 	{
 		name: 'notes/mentions',
 		withCredential: true,
diff --git a/src/server/api/endpoints/notes/user-list-timeline.ts b/src/server/api/endpoints/notes/user-list-timeline.ts
new file mode 100644
index 0000000000..bb94fa0ab9
--- /dev/null
+++ b/src/server/api/endpoints/notes/user-list-timeline.ts
@@ -0,0 +1,179 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy'; import ID from '../../../../cafy-id';
+import Note from '../../../../models/note';
+import Mute from '../../../../models/mute';
+import { pack } from '../../../../models/note';
+import UserList from '../../../../models/user-list';
+
+/**
+ * Get timeline of a user list
+ */
+module.exports = async (params, user, app) => {
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) throw 'invalid limit param';
+
+	// Get 'sinceId' parameter
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).$;
+	if (sinceIdErr) throw 'invalid sinceId param';
+
+	// Get 'untilId' parameter
+	const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).$;
+	if (untilIdErr) throw 'invalid untilId param';
+
+	// Get 'sinceDate' parameter
+	const [sinceDate, sinceDateErr] = $(params.sinceDate).optional.number().$;
+	if (sinceDateErr) throw 'invalid sinceDate param';
+
+	// Get 'untilDate' parameter
+	const [untilDate, untilDateErr] = $(params.untilDate).optional.number().$;
+	if (untilDateErr) throw 'invalid untilDate param';
+
+	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
+	if ([sinceId, untilId, sinceDate, untilDate].filter(x => x != null).length > 1) {
+		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
+	}
+
+	// Get 'includeMyRenotes' parameter
+	const [includeMyRenotes = true, includeMyRenotesErr] = $(params.includeMyRenotes).optional.boolean().$;
+	if (includeMyRenotesErr) throw 'invalid includeMyRenotes param';
+
+	// Get 'includeRenotedMyNotes' parameter
+	const [includeRenotedMyNotes = true, includeRenotedMyNotesErr] = $(params.includeRenotedMyNotes).optional.boolean().$;
+	if (includeRenotedMyNotesErr) throw 'invalid includeRenotedMyNotes param';
+
+	// Get 'listId' parameter
+	const [listId, listIdErr] = $(params.listId).type(ID).$;
+	if (listIdErr) throw 'invalid listId param';
+
+	const [list, mutedUserIds] = await Promise.all([
+		// リストを取得
+		// Fetch the list
+		UserList.findOne({
+			_id: listId,
+			userId: user._id
+		}),
+
+		// ミュートしているユーザーを取得
+		Mute.find({
+			muterId: user._id
+		}).then(ms => ms.map(m => m.muteeId))
+	]);
+
+	if (list.userIds.length == 0) {
+		return [];
+	}
+
+	//#region Construct query
+	const sort = {
+		_id: -1
+	};
+
+	const listQuery = list.userIds.map(u => ({
+		userId: u,
+
+		// リプライは含めない(ただし投稿者自身の投稿へのリプライ、自分の投稿へのリプライ、自分のリプライは含める)
+		$or: [{
+			// リプライでない
+			replyId: null
+		}, { // または
+			// リプライだが返信先が投稿者自身の投稿
+			$expr: {
+				$eq: ['$_reply.userId', '$userId']
+			}
+		}, { // または
+			// リプライだが返信先が自分(フォロワー)の投稿
+			'_reply.userId': user._id
+		}, { // または
+			// 自分(フォロワー)が送信したリプライ
+			userId: user._id
+		}]
+	}));
+
+	const query = {
+		$and: [{
+			// リストに入っている人のタイムラインへの投稿
+			$or: listQuery,
+
+			// mute
+			userId: {
+				$nin: mutedUserIds
+			},
+			'_reply.userId': {
+				$nin: mutedUserIds
+			},
+			'_renote.userId': {
+				$nin: mutedUserIds
+			},
+		}]
+	} as any;
+
+	// MongoDBではトップレベルで否定ができないため、De Morganの法則を利用してクエリします。
+	// つまり、「『自分の投稿かつRenote』ではない」を「『自分の投稿ではない』または『Renoteではない』」と表現します。
+	// for details: https://en.wikipedia.org/wiki/De_Morgan%27s_laws
+
+	if (includeMyRenotes === false) {
+		query.$and.push({
+			$or: [{
+				userId: { $ne: user._id }
+			}, {
+				renoteId: null
+			}, {
+				text: { $ne: null }
+			}, {
+				mediaIds: { $ne: [] }
+			}, {
+				poll: { $ne: null }
+			}]
+		});
+	}
+
+	if (includeRenotedMyNotes === false) {
+		query.$and.push({
+			$or: [{
+				'_renote.userId': { $ne: user._id }
+			}, {
+				renoteId: null
+			}, {
+				text: { $ne: null }
+			}, {
+				mediaIds: { $ne: [] }
+			}, {
+				poll: { $ne: null }
+			}]
+		});
+	}
+
+	if (sinceId) {
+		sort._id = 1;
+		query._id = {
+			$gt: sinceId
+		};
+	} else if (untilId) {
+		query._id = {
+			$lt: untilId
+		};
+	} else if (sinceDate) {
+		sort._id = 1;
+		query.createdAt = {
+			$gt: new Date(sinceDate)
+		};
+	} else if (untilDate) {
+		query.createdAt = {
+			$lt: new Date(untilDate)
+		};
+	}
+	//#endregion
+
+	// Issue query
+	const timeline = await Note
+		.find(query, {
+			limit: limit,
+			sort: sort
+		});
+
+	// Serialize
+	return await Promise.all(timeline.map(note => pack(note, user)));
+};
diff --git a/src/server/api/endpoints/users/lists/show.ts b/src/server/api/endpoints/users/lists/show.ts
new file mode 100644
index 0000000000..61e0f0463f
--- /dev/null
+++ b/src/server/api/endpoints/users/lists/show.ts
@@ -0,0 +1,23 @@
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
+import UserList, { pack } from '../../../../../models/user-list';
+
+/**
+ * Show a user list
+ */
+module.exports = async (params, me) => new Promise(async (res, rej) => {
+	// Get 'listId' parameter
+	const [listId, listIdErr] = $(params.listId).type(ID).$;
+	if (listIdErr) return rej('invalid listId param');
+
+	// Fetch the list
+	const userList = await UserList.findOne({
+		_id: listId,
+		userId: me._id,
+	});
+
+	if (userList == null) {
+		return rej('list not found');
+	}
+
+	res(await pack(userList));
+});
diff --git a/src/server/api/endpoints/users/search_by_username.ts b/src/server/api/endpoints/users/search_by_username.ts
index 41a12d5332..91d9ad1f3a 100644
--- a/src/server/api/endpoints/users/search_by_username.ts
+++ b/src/server/api/endpoints/users/search_by_username.ts
@@ -1,15 +1,11 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy'; import ID from '../../../../cafy-id';
+import $ from 'cafy';
 import User, { pack } from '../../../../models/user';
 
 /**
  * Search a user by username
- *
- * @param {any} params
- * @param {any} me
- * @return {Promise<any>}
  */
 module.exports = (params, me) => new Promise(async (res, rej) => {
 	// Get 'query' parameter
-- 
cgit v1.2.3-freya


From 76c8e05e3a7390a4525b2b5edd9fd68ffdcd7e63 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 20:20:02 +0900
Subject: wip

---
 src/client/app/desktop/views/pages/user-list.vue | 56 ++++++++++--------------
 1 file changed, 24 insertions(+), 32 deletions(-)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/pages/user-list.vue b/src/client/app/desktop/views/pages/user-list.vue
index 1889f7dbe4..a01da97f6e 100644
--- a/src/client/app/desktop/views/pages/user-list.vue
+++ b/src/client/app/desktop/views/pages/user-list.vue
@@ -1,11 +1,13 @@
 <template>
 <mk-ui>
-	<template v-if="!fetching">
-		<header :class="$style.header">
-			<h1>{{ list.title }}</h1>
-		</header>
-		<mk-user-list-timeline :list="list"/>
-	</template>
+	<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
+		<div>
+			<div><h1>{{ list.title }}</h1></div>
+		</div>
+		<main>
+			<mk-user-list-timeline :list="list"/>
+		</main>
+	</div>
 </mk-ui>
 </template>
 
@@ -40,35 +42,25 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" module>
-.header
-	width 100%
-	max-width 600px
+<style lang="stylus" scoped>
+[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
+	display flex
+	justify-content center
 	margin 0 auto
-	color #555
+	max-width 1200px
 
-.notes
-	max-width 600px
-	margin 0 auto
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-	overflow hidden
-
-.loading
-	padding 64px 0
+	> main
+	> div > div
+		> *:not(:last-child)
+			margin-bottom 16px
 
-.empty
-	display block
-	margin 0 auto
-	padding 32px
-	max-width 400px
-	text-align center
-	color #999
+	> main
+		padding 16px
+		width calc(100% - 275px * 2)
 
-	> [data-fa]
-		display block
-		margin-bottom 16px
-		font-size 3em
-		color #ccc
+	> div
+		width 275px
+		margin 0
+		padding 16px 0 16px 16px
 
 </style>
-- 
cgit v1.2.3-freya


From 7ea42af0ba9f3678985270f382279560609623be Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 22:37:08 +0900
Subject: wip

---
 .../app/desktop/views/components/lists-window.vue  |  46 --------
 src/client/app/desktop/views/components/notes.vue  |   8 +-
 .../desktop/views/components/ui.header.account.vue |   4 +-
 .../views/components/user-list-timeline.vue        |   2 +
 .../desktop/views/components/user-lists-window.vue |  46 ++++++++
 .../app/desktop/views/pages/user-list.users.vue    | 131 +++++++++++++++++++++
 src/client/app/desktop/views/pages/user-list.vue   |   5 +
 src/server/api/endpoints/users/show.ts             |  58 +++++----
 8 files changed, 225 insertions(+), 75 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/lists-window.vue
 create mode 100644 src/client/app/desktop/views/components/user-lists-window.vue
 create mode 100644 src/client/app/desktop/views/pages/user-list.users.vue

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/lists-window.vue b/src/client/app/desktop/views/components/lists-window.vue
deleted file mode 100644
index 30b1794a29..0000000000
--- a/src/client/app/desktop/views/components/lists-window.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<mk-window ref="window" is-modal width="500px" height="550px" @closed="$destroy">
-	<span slot="header">%fa:list% リスト</span>
-
-	<button class="ui" @click="add">リストを作成</button>
-	<router-link v-for="list in lists" :key="list.id" :to="`/i/lists/${list.id}`">{{ list.title }}</router-link>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			lists: []
-		};
-	},
-	mounted() {
-		(this as any).api('users/lists/list').then(lists => {
-			this.fetching = false;
-			this.lists = lists;
-		});
-	},
-	methods: {
-		add() {
-			(this as any).apis.input({
-				title: 'リスト名',
-			}).then(async title => {
-				const list = await (this as any).api('users/lists/create', {
-					title
-				});
-
-				this.$router.push(`i/lists/${ list.id }`);
-			});
-		},
-		close() {
-			(this as any).$refs.window.close();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-
-</style>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index ae36c899d5..01e1f5c2f0 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -223,18 +223,18 @@ root(isDark)
 		background $theme-color
 
 	> footer
-		> *
+		> button
 			display block
 			margin 0
 			padding 16px
 			width 100%
 			text-align center
 			color #ccc
+			background isDark ? #282C37 : #fff
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
-			border-bottom-left-radius 4px
-			border-bottom-right-radius 4px
+			border-bottom-left-radius 6px
+			border-bottom-right-radius 6px
 
-		> button
 			&:hover
 				background isDark ? #2e3440 : #f5f5f5
 
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 93ee5aa195..b91448af49 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -45,7 +45,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import MkListsWindow from './lists-window.vue';
+import MkUserListsWindow from './user-lists-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
@@ -86,7 +86,7 @@ export default Vue.extend({
 		},
 		list() {
 			this.close();
-			(this as any).os.new(MkListsWindow);
+			(this as any).os.new(MkUserListsWindow);
 		},
 		settings() {
 			this.close();
diff --git a/src/client/app/desktop/views/components/user-list-timeline.vue b/src/client/app/desktop/views/components/user-list-timeline.vue
index f71972ab78..8a1814f99c 100644
--- a/src/client/app/desktop/views/components/user-list-timeline.vue
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -1,5 +1,7 @@
 <template>
+<div>
 	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+</div>
 </template>
 
 <script lang="ts">
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
new file mode 100644
index 0000000000..30b1794a29
--- /dev/null
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -0,0 +1,46 @@
+<template>
+<mk-window ref="window" is-modal width="500px" height="550px" @closed="$destroy">
+	<span slot="header">%fa:list% リスト</span>
+
+	<button class="ui" @click="add">リストを作成</button>
+	<router-link v-for="list in lists" :key="list.id" :to="`/i/lists/${list.id}`">{{ list.title }}</router-link>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			lists: []
+		};
+	},
+	mounted() {
+		(this as any).api('users/lists/list').then(lists => {
+			this.fetching = false;
+			this.lists = lists;
+		});
+	},
+	methods: {
+		add() {
+			(this as any).apis.input({
+				title: 'リスト名',
+			}).then(async title => {
+				const list = await (this as any).api('users/lists/create', {
+					title
+				});
+
+				this.$router.push(`i/lists/${ list.id }`);
+			});
+		},
+		close() {
+			(this as any).$refs.window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user-list.users.vue b/src/client/app/desktop/views/pages/user-list.users.vue
new file mode 100644
index 0000000000..63070ed609
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user-list.users.vue
@@ -0,0 +1,131 @@
+<template>
+<div>
+	<mk-widget-container>
+		<template slot="header">%fa:users% ユーザー</template>
+		<button slot="func" title="ユーザーを追加" @click="add">%fa:plus%</button>
+
+		<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
+			<template v-else-if="users.length != 0">
+				<div class="user" v-for="_user in users">
+					<router-link class="avatar-anchor" :to="_user | userPage">
+						<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
+					</router-link>
+					<div class="body">
+						<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
+						<p class="username">@{{ _user | acct }}</p>
+					</div>
+				</div>
+			</template>
+			<p class="empty" v-else>%i18n:@no-one%</p>
+		</div>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		list: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			fetching: true,
+			users: []
+		};
+	},
+	mounted() {
+		(this as any).api('users/show', {
+			userIds: this.list.userIds
+		}).then(users => {
+			this.users = users;
+			this.fetching = false;
+		});
+	},
+	methods: {
+		add() {
+			(this as any).apis.input({
+				title: 'ユーザー名',
+			}).then(async username => {
+				const user = await (this as any).api('users/show', {
+					username
+				});
+
+				(this as any).api('users/lists/push', {
+					listId: this.list.id,
+					userId: user.id
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	> .user
+		padding 16px
+		border-bottom solid 1px isDark ? #1c2023 : #eee
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 12px 0 0
+
+			> .avatar
+				display block
+				width 42px
+				height 42px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color isDark ? #fff : #555
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color isDark ? #606984 : #ccc
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
+	root(true)
+
+[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user-list.vue b/src/client/app/desktop/views/pages/user-list.vue
index a01da97f6e..2241b84e5e 100644
--- a/src/client/app/desktop/views/pages/user-list.vue
+++ b/src/client/app/desktop/views/pages/user-list.vue
@@ -3,6 +3,7 @@
 	<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
 		<div>
 			<div><h1>{{ list.title }}</h1></div>
+			<x-users :list="list"/>
 		</div>
 		<main>
 			<mk-user-list-timeline :list="list"/>
@@ -13,8 +14,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import XUsers from './user-list.users.vue';
 
 export default Vue.extend({
+	components: {
+		XUsers
+	},
 	data() {
 		return {
 			fetching: true,
diff --git a/src/server/api/endpoints/users/show.ts b/src/server/api/endpoints/users/show.ts
index 64adb5963b..141565ece6 100644
--- a/src/server/api/endpoints/users/show.ts
+++ b/src/server/api/endpoints/users/show.ts
@@ -8,7 +8,7 @@ import resolveRemoteUser from '../../../../remote/resolve-user';
 const cursorOption = { fields: { data: false } };
 
 /**
- * Show a user
+ * Show user(s)
  */
 module.exports = (params, me) => new Promise(async (res, rej) => {
 	let user;
@@ -17,6 +17,10 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [userId, userIdErr] = $(params.userId).optional.type(ID).$;
 	if (userIdErr) return rej('invalid userId param');
 
+	// Get 'userIds' parameter
+	const [userIds, userIdsErr] = $(params.userIds).optional.array($().type(ID)).$;
+	if (userIdsErr) return rej('invalid userIds param');
+
 	// Get 'username' parameter
 	const [username, usernameErr] = $(params.username).optional.string().$;
 	if (usernameErr) return rej('invalid username param');
@@ -25,32 +29,40 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [host, hostErr] = $(params.host).nullable.optional.string().$;
 	if (hostErr) return rej('invalid host param');
 
-	if (userId === undefined && typeof username !== 'string') {
-		return rej('userId or pair of username and host is required');
-	}
+	if (userIds) {
+		const users = await User.find({
+			_id: {
+				$in: userIds
+			}
+		});
 
-	// Lookup user
-	if (typeof host === 'string') {
-		try {
-			user = await resolveRemoteUser(username, host, cursorOption);
-		} catch (e) {
-			console.warn(`failed to resolve remote user: ${e}`);
-			return rej('failed to resolve remote user');
-		}
+		res(await Promise.all(users.map(u => pack(u, me, {
+			detail: true
+		}))));
 	} else {
-		const q = userId !== undefined
-			? { _id: userId }
-			: { usernameLower: username.toLowerCase(), host: null };
+		// Lookup user
+		if (typeof host === 'string') {
+			try {
+				user = await resolveRemoteUser(username, host, cursorOption);
+			} catch (e) {
+				console.warn(`failed to resolve remote user: ${e}`);
+				return rej('failed to resolve remote user');
+			}
+		} else {
+			const q = userId !== undefined
+				? { _id: userId }
+				: { usernameLower: username.toLowerCase(), host: null };
 
-		user = await User.findOne(q, cursorOption);
+			user = await User.findOne(q, cursorOption);
 
-		if (user === null) {
-			return rej('user not found');
+			if (user === null) {
+				return rej('user not found');
+			}
 		}
-	}
 
-	// Send response
-	res(await pack(user, me, {
-		detail: true
-	}));
+		// Send response
+		res(await pack(user, me, {
+			detail: true
+		}));
+	}
 });
-- 
cgit v1.2.3-freya


From f801b050575f3f55082e7b3993ba9441d4d1219f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 22:50:05 +0900
Subject: wip

---
 .../app/desktop/views/components/timeline.vue      | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 8035510a14..a798e5d7b4 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -4,6 +4,8 @@
 		<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
 		<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
 		<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+
+		<button @click="list" title="リスト">%fa:list%</button>
 	</header>
 	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
 	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
@@ -35,6 +37,10 @@ export default Vue.extend({
 	methods: {
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
+		},
+
+		list() {
+
 		}
 	}
 });
@@ -55,6 +61,23 @@ root(isDark)
 		border-radius 6px 6px 0 0
 		box-shadow 0 1px rgba(0, 0, 0, 0.08)
 
+		> button
+			position absolute
+			z-index 2
+			top 0
+			right 0
+			padding 0
+			width 42px
+			font-size 0.9em
+			line-height 42px
+			color isDark ? #9baec8 : #ccc
+
+			&:hover
+				color isDark ? #b2c1d5 : #aaa
+
+			&:active
+				color isDark ? #b2c1d5 : #999
+
 		> span
 			display inline-block
 			padding 0 10px
-- 
cgit v1.2.3-freya


From 80cfa0f95d7b1e49fd4380e0d662ff892789925f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 22:50:59 +0900
Subject: wip

---
 src/client/app/desktop/views/components/widget-container.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index c3fac1399d..926d7702b9 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -58,7 +58,7 @@ root(isDark)
 			box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
 			> [data-fa]
-				margin-right 4px
+				margin-right 6px
 
 			&:empty
 				display none
-- 
cgit v1.2.3-freya


From 0616d29fd5db7238278cf5118e7fd1bd1c402ea4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 25 Apr 2018 23:08:40 +0900
Subject: wip

---
 src/client/app/common/mios.ts                            |  1 +
 src/client/app/desktop/views/components/timeline.vue     | 16 +++++++++++-----
 .../app/desktop/views/components/ui.header.account.vue   |  5 ++++-
 .../app/desktop/views/components/user-lists-window.vue   |  7 +++++--
 4 files changed, 21 insertions(+), 8 deletions(-)

(limited to 'src/client/app')

diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index 463f763888..4e471cf96f 100644
--- a/src/client/app/common/mios.ts
+++ b/src/client/app/common/mios.ts
@@ -88,6 +88,7 @@ export default class MiOS extends EventEmitter {
 			propsData: props
 		}).$mount();
 		document.body.appendChild(w.$el);
+		return w;
 	}
 
 	/**
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index a798e5d7b4..be714d7bf9 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -4,18 +4,20 @@
 		<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
 		<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
 		<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
-
-		<button @click="list" title="リスト">%fa:list%</button>
+		<span :data-is-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
+		<button @click="chooseList" title="リスト">%fa:list%</button>
 	</header>
 	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
 	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
 	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
+	<mk-user-list-timeline v-if="src == 'list'" ref="tl" key="list" :list="list"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import XCore from './timeline.core.vue';
+import MkUserListsWindow from './user-lists-window.vue';
 
 export default Vue.extend({
 	components: {
@@ -24,7 +26,8 @@ export default Vue.extend({
 
 	data() {
 		return {
-			src: 'home'
+			src: 'home',
+			list: null
 		};
 	},
 
@@ -39,8 +42,11 @@ export default Vue.extend({
 			(this.$refs.tl as any).warp(date);
 		},
 
-		list() {
-
+		chooseList() {
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', list => {
+				this.list = list;
+			});
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index b91448af49..5148c5b967 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -86,7 +86,10 @@ export default Vue.extend({
 		},
 		list() {
 			this.close();
-			(this as any).os.new(MkUserListsWindow);
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', list => {
+				this.$router.push(`i/lists/${ list.id }`);
+			});
 		},
 		settings() {
 			this.close();
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
index 30b1794a29..3342b60bf7 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -3,7 +3,7 @@
 	<span slot="header">%fa:list% リスト</span>
 
 	<button class="ui" @click="add">リストを作成</button>
-	<router-link v-for="list in lists" :key="list.id" :to="`/i/lists/${list.id}`">{{ list.title }}</router-link>
+	<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
 </mk-window>
 </template>
 
@@ -31,9 +31,12 @@ export default Vue.extend({
 					title
 				});
 
-				this.$router.push(`i/lists/${ list.id }`);
+				this.$emit('choosen', list);
 			});
 		},
+		choice(list) {
+			this.$emit('choosen', list);
+		},
 		close() {
 			(this as any).$refs.window.close();
 		}
-- 
cgit v1.2.3-freya


From a2a3dd55adade8c54f3d562bf30b4af1ce15ce45 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 11:19:57 +0900
Subject: wip

---
 .../app/desktop/views/components/timeline.vue      |  2 +
 .../desktop/views/components/user-lists-window.vue | 26 ++++++++-
 .../app/desktop/views/pages/user/user.timeline.vue | 65 +++++++++++-----------
 3 files changed, 57 insertions(+), 36 deletions(-)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index be714d7bf9..d50b41b846 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -46,6 +46,8 @@ export default Vue.extend({
 			const w = (this as any).os.new(MkUserListsWindow);
 			w.$once('choosen', list => {
 				this.list = list;
+				this.src = 'list';
+				w.close();
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
index 3342b60bf7..d082610132 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -1,9 +1,11 @@
 <template>
-<mk-window ref="window" is-modal width="500px" height="550px" @closed="$destroy">
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
 	<span slot="header">%fa:list% リスト</span>
 
-	<button class="ui" @click="add">リストを作成</button>
-	<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
+	<div data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82" :data-darkmode="_darkmode_">
+		<button class="ui" @click="add">リストを作成</button>
+		<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
+	</div>
 </mk-window>
 </template>
 
@@ -46,4 +48,22 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 
+root(isDark)
+	padding 16px
+
+	> button
+		margin-bottom 16px
+
+	> a
+		display block
+		padding 16px
+		border solid 1px isDark ? #1c2023 : #eee
+		border-radius 4px
+
+[data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82"][data-darkmode]
+	root(true)
+
+[data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82"]:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 55d6072a9d..754be8c04f 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -8,35 +8,29 @@
 	<div class="loading" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
-	<mk-notes ref="timeline" :notes="notes">
-		<div slot="footer">
-			<template v-if="!moreFetching">%fa:moon%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
-		</div>
+	<mk-notes ref="timeline" :more="existMore ? more : null">
+		<p class="empty" slot="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
 	</mk-notes>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+
+const fetchLimit = 10;
+
 export default Vue.extend({
 	props: ['user'],
 	data() {
 		return {
 			fetching: true,
 			moreFetching: false,
+			existMore: false,
 			mode: 'default',
 			unreadCount: 0,
-			notes: [],
 			date: null
 		};
 	},
-	computed: {
-		empty(): boolean {
-			return this.notes.length == 0;
-		}
-	},
 	watch: {
 		mode() {
 			this.fetch();
@@ -44,13 +38,11 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.addEventListener('keydown', this.onDocumentKeydown);
-		window.addEventListener('scroll', this.onScroll);
 
 		this.fetch(() => this.$emit('loaded'));
 	},
 	beforeDestroy() {
 		document.removeEventListener('keydown', this.onDocumentKeydown);
-		window.removeEventListener('scroll', this.onScroll);
 	},
 	methods: {
 		onDocumentKeydown(e) {
@@ -61,36 +53,43 @@ export default Vue.extend({
 			}
 		},
 		fetch(cb?) {
-			(this as any).api('users/notes', {
-				userId: this.user.id,
-				untilDate: this.date ? this.date.getTime() : undefined,
-				includeReplies: this.mode == 'with-replies',
-				withMedia: this.mode == 'with-media'
-			}).then(notes => {
-				this.notes = notes;
-				this.fetching = false;
-				if (cb) cb();
-			});
+			this.fetching = true;
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('users/notes', {
+					userId: this.user.id,
+					limit: fetchLimit + 1,
+					untilDate: this.date ? this.date.getTime() : undefined,
+					includeReplies: this.mode == 'with-replies',
+					withMedia: this.mode == 'with-media'
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					if (cb) cb();
+				}, rej);
+			}));
 		},
 		more() {
-			if (this.moreFetching || this.fetching || this.notes.length == 0) return;
 			this.moreFetching = true;
 			(this as any).api('users/notes', {
 				userId: this.user.id,
+				limit: fetchLimit + 1,
 				includeReplies: this.mode == 'with-replies',
 				withMedia: this.mode == 'with-media',
-				untilId: this.notes[this.notes.length - 1].id
+				untilId: (this.$refs.timeline as any).tail().id
 			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
 				this.moreFetching = false;
-				this.notes = this.notes.concat(notes);
 			});
 		},
-		onScroll() {
-			const current = window.scrollY + window.innerHeight;
-			if (current > document.body.offsetHeight - 16/*遊び*/) {
-				this.more();
-			}
-		},
 		warp(date) {
 			this.date = date;
 			this.fetch();
-- 
cgit v1.2.3-freya


From bc8a0083e262c724ef4d803a4f2a9f076377341c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 11:46:42 +0900
Subject: wip

---
 package.json                                       |   1 +
 src/client/app/mobile/views/components/notes.vue   | 147 ++++++++++++++++++++-
 .../app/mobile/views/components/timeline.vue       | 117 ++++------------
 .../app/mobile/views/components/user-timeline.vue  |  55 ++++----
 src/server/index.ts                                |   6 +
 5 files changed, 197 insertions(+), 129 deletions(-)

(limited to 'src/client/app')

diff --git a/package.json b/package.json
index 7d0adc3cb6..d37bbc040d 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
 		"koa-multer": "1.0.2",
 		"koa-router": "7.4.0",
 		"koa-send": "4.1.3",
+		"koa-slow": "^2.1.0",
 		"kue": "0.11.6",
 		"license-checker": "18.0.0",
 		"loader-utils": "1.1.0",
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 999ab566ac..137e15c6de 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -1,7 +1,20 @@
 <template>
 <div class="mk-notes">
+	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
+
 	<slot name="head"></slot>
-	<slot></slot>
+
+	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
+
+	<div class="init" v-if="fetching">
+		%fa:spinner .pulse%%i18n:common.loading%
+	</div>
+
+	<div v-if="!fetching && requestInitPromise != null">
+		<p>読み込みに失敗しました。</p>
+		<button @click="resolveInitPromise">リトライ</button>
+	</div>
+
 	<transition-group name="mk-notes" class="transition">
 		<template v-for="(note, i) in _notes">
 			<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
@@ -11,8 +24,12 @@
 			</p>
 		</template>
 	</transition-group>
-	<footer>
-		<slot name="tail"></slot>
+
+	<footer v-if="more">
+		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">%i18n:@load-more%</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</button>
 	</footer>
 </div>
 </template>
@@ -20,13 +37,26 @@
 <script lang="ts">
 import Vue from 'vue';
 
+const displayLimit = 30;
+
 export default Vue.extend({
 	props: {
-		notes: {
-			type: Array,
-			default: () => []
+		more: {
+			type: Function,
+			required: false
 		}
 	},
+
+	data() {
+		return {
+			requestInitPromise: null as () => Promise<any[]>,
+			notes: [],
+			queue: [],
+			fetching: true,
+			moreFetching: false
+		};
+	},
+
 	computed: {
 		_notes(): any[] {
 			return (this.notes as any).map(note => {
@@ -38,9 +68,107 @@ export default Vue.extend({
 			});
 		}
 	},
+
+	mounted() {
+		window.addEventListener('scroll', this.onScroll);
+	},
+
+	beforeDestroy() {
+		window.removeEventListener('scroll', this.onScroll);
+	},
+
 	methods: {
+		isScrollTop() {
+			return window.scrollY <= 8;
+		},
+
 		onNoteUpdated(i, note) {
 			Vue.set((this as any).notes, i, note);
+		},
+
+		init(promiseGenerator: () => Promise<any[]>) {
+			this.requestInitPromise = promiseGenerator;
+			this.resolveInitPromise();
+		},
+
+		resolveInitPromise() {
+			this.queue = [];
+			this.notes = [];
+			this.fetching = true;
+
+			const promise = this.requestInitPromise();
+
+			promise.then(notes => {
+				this.notes = notes;
+				this.requestInitPromise = null;
+				this.fetching = false;
+			}, e => {
+				this.fetching = false;
+			});
+		},
+
+		prepend(note, silent = false) {
+			//#region 弾く
+			const isMyNote = note.userId == (this as any).os.i.id;
+			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+
+			if ((this as any).os.i.clientSettings.showMyRenotes === false) {
+				if (isMyNote && isPureRenote) {
+					return;
+				}
+			}
+
+			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
+				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
+					return;
+				}
+			}
+			//#endregion
+
+			if (this.isScrollTop()) {
+				// Prepend the note
+				this.notes.unshift(note);
+
+				// オーバーフローしたら古い投稿は捨てる
+				if (this.notes.length >= displayLimit) {
+					this.notes = this.notes.slice(0, displayLimit);
+				}
+			} else {
+				this.queue.unshift(note);
+			}
+		},
+
+		append(note) {
+			this.notes.push(note);
+		},
+
+		tail() {
+			return this.notes[this.notes.length - 1];
+		},
+
+		releaseQueue() {
+			this.queue.forEach(n => this.prepend(n, true));
+			this.queue = [];
+		},
+
+		async loadMore() {
+			if (this.more == null) return;
+			if (this.moreFetching) return;
+
+			this.moreFetching = true;
+			await this.more();
+			this.moreFetching = false;
+		},
+
+		onScroll() {
+			if (this.isScrollTop()) {
+				this.releaseQueue();
+			}
+
+			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.loadMore();
+			}
 		}
 	}
 });
@@ -79,6 +207,13 @@ export default Vue.extend({
 			[data-fa]
 				margin-right 8px
 
+	> .newer-indicator
+		position -webkit-sticky
+		position sticky
+		z-index 100
+		height 3px
+		background $theme-color
+
 	> .init
 		padding 64px 0
 		text-align center
diff --git a/src/client/app/mobile/views/components/timeline.vue b/src/client/app/mobile/views/components/timeline.vue
index f56667bed5..561034917e 100644
--- a/src/client/app/mobile/views/components/timeline.vue
+++ b/src/client/app/mobile/views/components/timeline.vue
@@ -1,19 +1,12 @@
 <template>
 <div class="mk-timeline">
-	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
 	<mk-friends-maker v-if="alone"/>
-	<mk-notes :notes="notes">
-		<div class="init" v-if="fetching">
-			%fa:spinner .pulse%%i18n:common.loading%
-		</div>
-		<div class="empty" v-if="!fetching && notes.length == 0">
+
+	<mk-notes ref="timeline" :more="existMore ? more : null">
+		<div slot="empty">
 			%fa:R comments%
 			%i18n:@empty%
 		</div>
-		<button v-if="canFetchMore" @click="more" :disabled="moreFetching" slot="tail">
-			<span v-if="!moreFetching">%i18n:@load-more%</span>
-			<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
-		</button>
 	</mk-notes>
 </div>
 </template>
@@ -22,7 +15,6 @@
 import Vue from 'vue';
 
 const fetchLimit = 10;
-const displayLimit = 30;
 
 export default Vue.extend({
 	props: {
@@ -37,8 +29,6 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			moreFetching: false,
-			notes: [],
-			queue: [],
 			existMore: false,
 			connection: null,
 			connectionId: null
@@ -48,10 +38,6 @@ export default Vue.extend({
 	computed: {
 		alone(): boolean {
 			return (this as any).os.i.followingCount == 0;
-		},
-
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
 		}
 	},
 
@@ -63,8 +49,6 @@ export default Vue.extend({
 		this.connection.on('follow', this.onChangeFollowing);
 		this.connection.on('unfollow', this.onChangeFollowing);
 
-		window.addEventListener('scroll', this.onScroll);
-
 		this.fetch();
 	},
 
@@ -73,102 +57,54 @@ export default Vue.extend({
 		this.connection.off('follow', this.onChangeFollowing);
 		this.connection.off('unfollow', this.onChangeFollowing);
 		(this as any).os.stream.dispose(this.connectionId);
-
-		window.removeEventListener('scroll', this.onScroll);
 	},
 
 	methods: {
-		isScrollTop() {
-			return window.scrollY <= 8;
-		},
-
 		fetch(cb?) {
-			this.queue = [];
 			this.fetching = true;
-			(this as any).api('notes/timeline', {
-				limit: fetchLimit + 1,
-				untilDate: this.date ? (this.date as any).getTime() : undefined,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-			}).then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-					this.existMore = true;
-				}
-				this.notes = notes;
-				this.fetching = false;
-				this.$emit('loaded');
-				if (cb) cb();
-			});
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/timeline', {
+					limit: fetchLimit + 1,
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+					if (cb) cb();
+				}, rej);
+			}));
 		},
 
 		more() {
 			this.moreFetching = true;
 			(this as any).api('notes/timeline', {
 				limit: fetchLimit + 1,
-				untilId: this.notes[this.notes.length - 1].id,
+				untilId: (this.$refs.timeline as any).tail().id,
 				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
 				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
-					this.existMore = true;
 				} else {
 					this.existMore = false;
 				}
-				this.notes = this.notes.concat(notes);
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
 				this.moreFetching = false;
 			});
 		},
 
-		prependNote(note) {
-			// Prepent a note
-			this.notes.unshift(note);
-
-			// オーバーフローしたら古い投稿は捨てる
-			if (this.notes.length >= displayLimit) {
-				this.notes = this.notes.slice(0, displayLimit);
-			}
-		},
-
-		releaseQueue() {
-			this.queue.forEach(n => this.prependNote(n));
-			this.queue = [];
-		},
-
 		onNote(note) {
-			//#region 弾く
-			const isMyNote = note.userId == (this as any).os.i.id;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
-
-			if ((this as any).os.i.clientSettings.showMyRenotes === false) {
-				if (isMyNote && isPureRenote) {
-					return;
-				}
-			}
-
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
-				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
-					return;
-				}
-			}
-			//#endregion
-
-			if (this.isScrollTop()) {
-				this.prependNote(note);
-			} else {
-				this.queue.unshift(note);
-			}
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
 		},
 
 		onChangeFollowing() {
 			this.fetch();
-		},
-
-		onScroll() {
-			if (this.isScrollTop()) {
-				this.releaseQueue();
-			}
 		}
 	}
 });
@@ -178,13 +114,6 @@ export default Vue.extend({
 @import '~const.styl'
 
 .mk-timeline
-	> .newer-indicator
-		position -webkit-sticky
-		position sticky
-		z-index 100
-		height 3px
-		background $theme-color
-
 	> .mk-friends-maker
 		margin-bottom 8px
 </style>
diff --git a/src/client/app/mobile/views/components/user-timeline.vue b/src/client/app/mobile/views/components/user-timeline.vue
index 40b3be035e..89ac4d2c66 100644
--- a/src/client/app/mobile/views/components/user-timeline.vue
+++ b/src/client/app/mobile/views/components/user-timeline.vue
@@ -1,17 +1,10 @@
 <template>
 <div class="mk-user-timeline">
-	<mk-notes :notes="notes">
-		<div class="init" v-if="fetching">
-			%fa:spinner .pulse%%i18n:common.loading%
-		</div>
-		<div class="empty" v-if="!fetching && notes.length == 0">
+	<mk-notes ref="timeline" :more="existMore ? more : null">
+		<div slot="empty">
 			%fa:R comments%
 			{{ withMedia ? '%i18n:!@no-notes-with-media%' : '%i18n:!@no-notes%' }}
 		</div>
-		<button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
-			<span v-if="!moreFetching">%i18n:@load-more%</span>
-			<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
-		</button>
 	</mk-notes>
 </div>
 </template>
@@ -19,49 +12,53 @@
 <script lang="ts">
 import Vue from 'vue';
 
-const limit = 10;
+const fetchLimit = 10;
 
 export default Vue.extend({
 	props: ['user', 'withMedia'],
 	data() {
 		return {
 			fetching: true,
-			notes: [],
 			existMore: false,
 			moreFetching: false
 		};
 	},
 	mounted() {
-		(this as any).api('users/notes', {
-			userId: this.user.id,
-			withMedia: this.withMedia,
-			limit: limit + 1
-		}).then(notes => {
-			if (notes.length == limit + 1) {
-				notes.pop();
-				this.existMore = true;
-			}
-			this.notes = notes;
-			this.fetching = false;
-			this.$emit('loaded');
-		});
+		this.fetch();
 	},
 	methods: {
+		fetch() {
+			this.fetching = true;
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('users/notes', {
+					userId: this.user.id,
+					withMedia: this.withMedia,
+					limit: fetchLimit + 1
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
 		more() {
 			this.moreFetching = true;
 			(this as any).api('users/notes', {
 				userId: this.user.id,
 				withMedia: this.withMedia,
-				limit: limit + 1,
-				untilId: this.notes[this.notes.length - 1].id
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id
 			}).then(notes => {
-				if (notes.length == limit + 1) {
+				if (notes.length == fetchLimit + 1) {
 					notes.pop();
-					this.existMore = true;
 				} else {
 					this.existMore = false;
 				}
-				this.notes = this.notes.concat(notes);
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
 				this.moreFetching = false;
 			});
 		}
diff --git a/src/server/index.ts b/src/server/index.ts
index 2b5a910507..594f40c22f 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -11,6 +11,7 @@ import * as Router from 'koa-router';
 import * as mount from 'koa-mount';
 import * as compress from 'koa-compress';
 import * as logger from 'koa-logger';
+const slow = require('koa-slow');
 
 import activityPub from './activitypub';
 import webFinger from './webfinger';
@@ -23,6 +24,11 @@ app.proxy = true;
 if (process.env.NODE_ENV != 'production') {
 	// Logger
 	app.use(logger());
+
+	// Delay
+	app.use(slow({
+		delay: 1000
+	}));
 }
 
 // Compress response
-- 
cgit v1.2.3-freya


From 6ab0c386cb5eca185d5ed2558ef54ee0225153b9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 14:01:41 +0900
Subject: wip

---
 .../app/desktop/views/components/timeline.core.vue |  21 +-
 src/client/app/mobile/views/components/index.ts    |   2 -
 .../app/mobile/views/components/timeline.vue       | 119 ----------
 src/client/app/mobile/views/pages/dashboard.vue    | 196 ++++++++++++++++
 .../app/mobile/views/pages/home.timeline.vue       | 166 ++++++++++++++
 src/client/app/mobile/views/pages/home.vue         | 254 +++++----------------
 6 files changed, 432 insertions(+), 326 deletions(-)
 delete mode 100644 src/client/app/mobile/views/components/timeline.vue
 create mode 100644 src/client/app/mobile/views/pages/dashboard.vue
 create mode 100644 src/client/app/mobile/views/pages/home.timeline.vue

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index f5e0ee118e..a137a57070 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 const fetchLimit = 10;
 
@@ -33,6 +34,7 @@ export default Vue.extend({
 			existMore: false,
 			connection: null,
 			connectionId: null,
+			unreadCount: 0,
 			date: null
 		};
 	},
@@ -74,6 +76,7 @@ export default Vue.extend({
 		}
 
 		document.addEventListener('keydown', this.onKeydown);
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 
 		this.fetch();
 	},
@@ -87,10 +90,11 @@ export default Vue.extend({
 		this.stream.dispose(this.connectionId);
 
 		document.removeEventListener('keydown', this.onKeydown);
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 
 	methods: {
-		fetch(cb?) {
+		fetch() {
 			this.fetching = true;
 
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
@@ -107,7 +111,6 @@ export default Vue.extend({
 					res(notes);
 					this.fetching = false;
 					this.$emit('loaded');
-					if (cb) cb();
 				}, rej);
 			}));
 		},
@@ -134,6 +137,11 @@ export default Vue.extend({
 		},
 
 		onNote(note) {
+			if (document.hidden && note.userId !== (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
+			}
+
 			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
@@ -151,13 +159,20 @@ export default Vue.extend({
 			this.fetch();
 		},
 
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
+			}
+		},
+
 		onKeydown(e) {
 			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
 				if (e.which == 84) { // t
 					this.focus();
 				}
 			}
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index 9346700304..9a0a52d106 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/src/client/app/mobile/views/components/index.ts
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 
 import ui from './ui.vue';
-import timeline from './timeline.vue';
 import note from './note.vue';
 import notes from './notes.vue';
 import mediaImage from './media-image.vue';
@@ -24,7 +23,6 @@ import activity from './activity.vue';
 import widgetContainer from './widget-container.vue';
 
 Vue.component('mk-ui', ui);
-Vue.component('mk-timeline', timeline);
 Vue.component('mk-note', note);
 Vue.component('mk-notes', notes);
 Vue.component('mk-media-image', mediaImage);
diff --git a/src/client/app/mobile/views/components/timeline.vue b/src/client/app/mobile/views/components/timeline.vue
deleted file mode 100644
index 561034917e..0000000000
--- a/src/client/app/mobile/views/components/timeline.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-<div class="mk-timeline">
-	<mk-friends-maker v-if="alone"/>
-
-	<mk-notes ref="timeline" :more="existMore ? more : null">
-		<div slot="empty">
-			%fa:R comments%
-			%i18n:@empty%
-		</div>
-	</mk-notes>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-const fetchLimit = 10;
-
-export default Vue.extend({
-	props: {
-		date: {
-			type: Date,
-			required: false,
-			default: null
-		}
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			existMore: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-
-	computed: {
-		alone(): boolean {
-			return (this as any).os.i.followingCount == 0;
-		}
-	},
-
-	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
-
-		this.connection.on('note', this.onNote);
-		this.connection.on('follow', this.onChangeFollowing);
-		this.connection.on('unfollow', this.onChangeFollowing);
-
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.off('note', this.onNote);
-		this.connection.off('follow', this.onChangeFollowing);
-		this.connection.off('unfollow', this.onChangeFollowing);
-		(this as any).os.stream.dispose(this.connectionId);
-	},
-
-	methods: {
-		fetch(cb?) {
-			this.fetching = true;
-			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				(this as any).api('notes/timeline', {
-					limit: fetchLimit + 1,
-					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-				}).then(notes => {
-					if (notes.length == fetchLimit + 1) {
-						notes.pop();
-						this.existMore = true;
-					}
-					res(notes);
-					this.fetching = false;
-					this.$emit('loaded');
-					if (cb) cb();
-				}, rej);
-			}));
-		},
-
-		more() {
-			this.moreFetching = true;
-			(this as any).api('notes/timeline', {
-				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-			}).then(notes => {
-				if (notes.length == fetchLimit + 1) {
-					notes.pop();
-				} else {
-					this.existMore = false;
-				}
-				notes.forEach(n => (this.$refs.timeline as any).append(n));
-				this.moreFetching = false;
-			});
-		},
-
-		onNote(note) {
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-timeline
-	> .mk-friends-maker
-		margin-bottom 8px
-</style>
diff --git a/src/client/app/mobile/views/pages/dashboard.vue b/src/client/app/mobile/views/pages/dashboard.vue
new file mode 100644
index 0000000000..14779da650
--- /dev/null
+++ b/src/client/app/mobile/views/pages/dashboard.vue
@@ -0,0 +1,196 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:home%ダッシュボード</span>
+	<template slot="func">
+		<button @click="customizing = !customizing">%fa:cog%</button>
+	</template>
+	<main>
+		<template v-if="customizing">
+			<header>
+				<select v-model="widgetAdderSelected">
+					<option value="profile">プロフィール</option>
+					<option value="calendar">カレンダー</option>
+					<option value="activity">アクティビティ</option>
+					<option value="rss">RSSリーダー</option>
+					<option value="photo-stream">フォトストリーム</option>
+					<option value="slideshow">スライドショー</option>
+					<option value="version">バージョン</option>
+					<option value="access-log">アクセスログ</option>
+					<option value="server">サーバー情報</option>
+					<option value="donation">寄付のお願い</option>
+					<option value="nav">ナビゲーション</option>
+					<option value="tips">ヒント</option>
+				</select>
+				<button @click="addWidget">追加</button>
+				<p><a @click="hint">カスタマイズのヒント</a></p>
+			</header>
+			<x-draggable
+				:list="widgets"
+				:options="{ handle: '.handle', animation: 150 }"
+				@sort="onWidgetSort"
+			>
+				<div v-for="widget in widgets" class="customize-container" :key="widget.id">
+					<header>
+						<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+					</header>
+					<div @click="widgetFunc(widget.id)">
+						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
+					</div>
+				</div>
+			</x-draggable>
+		</template>
+		<template v-else>
+			<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
+		</template>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	components: {
+		XDraggable
+	},
+	data() {
+		return {
+			showNav: false,
+			widgets: [],
+			customizing: false,
+			widgetAdderSelected: null
+		};
+	},
+	created() {
+		if ((this as any).os.i.clientSettings.mobileHome == null) {
+			Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
+				name: 'calendar',
+				id: 'a', data: {}
+			}, {
+				name: 'activity',
+				id: 'b', data: {}
+			}, {
+				name: 'rss',
+				id: 'c', data: {}
+			}, {
+				name: 'photo-stream',
+				id: 'd', data: {}
+			}, {
+				name: 'donation',
+				id: 'e', data: {}
+			}, {
+				name: 'nav',
+				id: 'f', data: {}
+			}, {
+				name: 'version',
+				id: 'g', data: {}
+			}]);
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+			this.saveHome();
+		} else {
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+		}
+
+		this.$watch('os.i.clientSettings', i => {
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+		}, {
+			deep: true
+		});
+	},
+
+	mounted() {
+		document.title = 'Misskey';
+		document.documentElement.style.background = '#313a42';
+	},
+
+	methods: {
+		onHomeUpdated(data) {
+			if (data.home) {
+				(this as any).os.i.clientSettings.mobileHome = data.home;
+				this.widgets = data.home;
+			} else {
+				const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
+				if (w != null) {
+					w.data = data.data;
+					this.$refs[w.id][0].preventSave = true;
+					this.$refs[w.id][0].props = w.data;
+					this.widgets = (this as any).os.i.clientSettings.mobileHome;
+				}
+			}
+		},
+		hint() {
+			alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
+		},
+		widgetFunc(id) {
+			const w = this.$refs[id][0];
+			if (w.func) w.func();
+		},
+		onWidgetSort() {
+			this.saveHome();
+		},
+		addWidget() {
+			const widget = {
+				name: this.widgetAdderSelected,
+				id: uuid(),
+				data: {}
+			};
+
+			this.widgets.unshift(widget);
+			this.saveHome();
+		},
+		removeWidget(widget) {
+			this.widgets = this.widgets.filter(w => w.id != widget.id);
+			this.saveHome();
+		},
+		saveHome() {
+			(this as any).os.i.clientSettings.mobileHome = this.widgets;
+			(this as any).api('i/update_mobile_home', {
+				home: this.widgets
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	margin 0 auto
+	max-width 500px
+
+	@media (min-width 500px)
+		padding 8px
+
+	> header
+		padding 8px
+		background #fff
+
+	.widget
+		margin 8px
+
+	.customize-container
+		margin 8px
+		background #fff
+
+		> header
+			line-height 32px
+			background #eee
+
+			> .handle
+				padding 0 8px
+
+			> .remove
+				position absolute
+				top 0
+				right 0
+				padding 0 8px
+				line-height 32px
+
+		> div
+			padding 8px
+
+			> *
+				pointer-events none
+
+</style>
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
new file mode 100644
index 0000000000..42ed454d22
--- /dev/null
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -0,0 +1,166 @@
+<template>
+<div>
+	<mk-friends-maker v-if="src == 'home' && alone" style="margin-bottom:8px"/>
+
+	<mk-notes ref="timeline" :more="existMore ? more : null">
+		<div slot="empty">
+			%fa:R comments%
+			%i18n:@empty%
+		</div>
+	</mk-notes>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	props: {
+		src: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null,
+			connectionId: null,
+			unreadCount: 0,
+			date: null
+		};
+	},
+
+	computed: {
+		alone(): boolean {
+			return (this as any).os.i.followingCount == 0;
+		},
+
+		stream(): any {
+			return this.src == 'home'
+				? (this as any).os.stream
+				: this.src == 'local'
+					? (this as any).os.streams.localTimelineStream
+					: (this as any).os.streams.globalTimelineStream;
+		},
+
+		endpoint(): string {
+			return this.src == 'home'
+				? 'notes/timeline'
+				: this.src == 'local'
+					? 'notes/local-timeline'
+					: 'notes/global-timeline';
+		},
+
+		canFetchMore(): boolean {
+			return !this.moreFetching && !this.fetching && this.existMore;
+		}
+	},
+
+	mounted() {
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.connection.on('note', this.onNote);
+		if (this.src == 'home') {
+			this.connection.on('follow', this.onChangeFollowing);
+			this.connection.on('unfollow', this.onChangeFollowing);
+		}
+
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.off('note', this.onNote);
+		if (this.src == 'home') {
+			this.connection.off('follow', this.onChangeFollowing);
+			this.connection.off('unfollow', this.onChangeFollowing);
+		}
+		this.stream.dispose(this.connectionId);
+
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api(this.endpoint, {
+					limit: fetchLimit + 1,
+					untilDate: this.date ? this.date.getTime() : undefined,
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+
+		more() {
+			if (!this.canFetchMore) return;
+
+			this.moreFetching = true;
+
+			(this as any).api(this.endpoint, {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+		},
+
+		onNote(note) {
+			if (document.hidden && note.userId !== (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
+			}
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+
+		onChangeFollowing() {
+			this.fetch();
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		},
+
+		warp(date) {
+			this.date = date;
+			this.fetch();
+		},
+
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
+			}
+		}
+	}
+});
+</script>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 3d94dd7ce6..3b152b3952 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -1,59 +1,37 @@
 <template>
 <mk-ui>
-	<span slot="header" @click="showTl = !showTl">
-		<template v-if="showTl">%fa:home%%i18n:@timeline%</template>
-		<template v-else>%fa:home%ウィジェット</template>
+	<span slot="header" @click="showNav = true">
+		<span>
+			<span v-if="src == 'home'">%fa:home%ホーム</span>
+			<span v-if="src == 'local'">%fa:R comments%ローカル</span>
+			<span v-if="src == 'global'">%fa:globe%グローバル</span>
+			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
+		</span>
 		<span style="margin-left:8px">
-			<template v-if="showTl">%fa:angle-down%</template>
+			<template v-if="!showNav">%fa:angle-down%</template>
 			<template v-else>%fa:angle-up%</template>
 		</span>
 	</span>
+
 	<template slot="func">
-		<button @click="fn" v-if="showTl">%fa:pencil-alt%</button>
-		<button @click="customizing = !customizing" v-else>%fa:cog%</button>
+		<button @click="fn">%fa:pencil-alt%</button>
 	</template>
+
 	<main>
-		<div class="tl">
-			<mk-timeline @loaded="onLoaded" v-show="showTl"/>
+		<div class="nav" v-if="showNav">
+			<div class="bg" @click="showNav = false"></div>
+			<div class="body">
+				<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
+				<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
+				<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+			</div>
 		</div>
-		<div class="widgets" v-show="!showTl">
-			<template v-if="customizing">
-				<header>
-					<select v-model="widgetAdderSelected">
-						<option value="profile">プロフィール</option>
-						<option value="calendar">カレンダー</option>
-						<option value="activity">アクティビティ</option>
-						<option value="rss">RSSリーダー</option>
-						<option value="photo-stream">フォトストリーム</option>
-						<option value="slideshow">スライドショー</option>
-						<option value="version">バージョン</option>
-						<option value="access-log">アクセスログ</option>
-						<option value="server">サーバー情報</option>
-						<option value="donation">寄付のお願い</option>
-						<option value="nav">ナビゲーション</option>
-						<option value="tips">ヒント</option>
-					</select>
-					<button @click="addWidget">追加</button>
-					<p><a @click="hint">カスタマイズのヒント</a></p>
-				</header>
-				<x-draggable
-					:list="widgets"
-					:options="{ handle: '.handle', animation: 150 }"
-					@sort="onWidgetSort"
-				>
-					<div v-for="widget in widgets" class="customize-container" :key="widget.id">
-						<header>
-							<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
-						</header>
-						<div @click="widgetFunc(widget.id)">
-							<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
-						</div>
-					</div>
-				</x-draggable>
-			</template>
-			<template v-else>
-				<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
-			</template>
+
+		<div class="tl">
+			<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
+			<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
+			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
+			<mk-user-list-timeline v-if="src == 'list'" ref="tl" key="list" :list="list"/>
 		</div>
 	</main>
 </mk-ui>
@@ -61,144 +39,38 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
-import * as uuid from 'uuid';
 import Progress from '../../../common/scripts/loading';
-import getNoteSummary from '../../../../../renderers/get-note-summary';
+import XTl from './home.timeline.vue';
 
 export default Vue.extend({
 	components: {
-		XDraggable
+		XTl
 	},
+
 	data() {
 		return {
-			connection: null,
-			connectionId: null,
-			unreadCount: 0,
-			showTl: true,
-			widgets: [],
-			customizing: false,
-			widgetAdderSelected: null
+			src: 'home',
+			list: null,
+			showNav: false
 		};
 	},
-	created() {
-		if ((this as any).os.i.clientSettings.mobileHome == null) {
-			Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
-				name: 'calendar',
-				id: 'a', data: {}
-			}, {
-				name: 'activity',
-				id: 'b', data: {}
-			}, {
-				name: 'rss',
-				id: 'c', data: {}
-			}, {
-				name: 'photo-stream',
-				id: 'd', data: {}
-			}, {
-				name: 'donation',
-				id: 'e', data: {}
-			}, {
-				name: 'nav',
-				id: 'f', data: {}
-			}, {
-				name: 'version',
-				id: 'g', data: {}
-			}]);
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
-			this.saveHome();
-		} else {
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
-		}
 
-		this.$watch('os.i.clientSettings', i => {
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
-		}, {
-			deep: true
-		});
-	},
 	mounted() {
 		document.title = 'Misskey';
 		document.documentElement.style.background = '#313a42';
 
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
-
-		this.connection.on('note', this.onStreamNote);
-		this.connection.on('mobile_home_updated', this.onHomeUpdated);
-		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
-
 		Progress.start();
 	},
-	beforeDestroy() {
-		this.connection.off('note', this.onStreamNote);
-		this.connection.off('mobile_home_updated', this.onHomeUpdated);
-		(this as any).os.stream.dispose(this.connectionId);
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
-	},
+
 	methods: {
 		fn() {
 			(this as any).apis.post();
 		},
+
 		onLoaded() {
 			Progress.done();
 		},
-		onStreamNote(note) {
-			if (document.hidden && note.userId !== (this as any).os.i.id) {
-				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
-			}
-		},
-		onVisibilitychange() {
-			if (!document.hidden) {
-				this.unreadCount = 0;
-				document.title = 'Misskey';
-			}
-		},
-		onHomeUpdated(data) {
-			if (data.home) {
-				(this as any).os.i.clientSettings.mobileHome = data.home;
-				this.widgets = data.home;
-			} else {
-				const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
-				if (w != null) {
-					w.data = data.data;
-					this.$refs[w.id][0].preventSave = true;
-					this.$refs[w.id][0].props = w.data;
-					this.widgets = (this as any).os.i.clientSettings.mobileHome;
-				}
-			}
-		},
-		hint() {
-			alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
-		},
-		widgetFunc(id) {
-			const w = this.$refs[id][0];
-			if (w.func) w.func();
-		},
-		onWidgetSort() {
-			this.saveHome();
-		},
-		addWidget() {
-			const widget = {
-				name: this.widgetAdderSelected,
-				id: uuid(),
-				data: {}
-			};
 
-			this.widgets.unshift(widget);
-			this.saveHome();
-		},
-		removeWidget(widget) {
-			this.widgets = this.widgets.filter(w => w.id != widget.id);
-			this.saveHome();
-		},
-		saveHome() {
-			(this as any).os.i.clientSettings.mobileHome = this.widgets;
-			(this as any).api('i/update_mobile_home', {
-				home: this.widgets
-			});
-		},
 		warp() {
 
 		}
@@ -208,52 +80,30 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 main
+	> .nav
+		> .bg
+			position fixed
+			z-index 10000
+			top 0
+			left 0
+			width 100%
+			height 100%
+			background rgba(#000, 0.5)
+
+		> .body
+			position fixed
+			z-index 10001
+			top 48px
+			left 0
+			background #fff
+			border-radius 8px
 
 	> .tl
-		> .mk-timeline
-			max-width 600px
-			margin 0 auto
-			padding 8px
-
-			@media (min-width 500px)
-				padding 16px
-
-	> .widgets
+		max-width 600px
 		margin 0 auto
-		max-width 500px
+		padding 8px
 
 		@media (min-width 500px)
-			padding 8px
-
-		> header
-			padding 8px
-			background #fff
-
-		.widget
-			margin 8px
-
-		.customize-container
-			margin 8px
-			background #fff
-
-			> header
-				line-height 32px
-				background #eee
-
-				> .handle
-					padding 0 8px
-
-				> .remove
-					position absolute
-					top 0
-					right 0
-					padding 0 8px
-					line-height 32px
-
-			> div
-				padding 8px
-
-				> *
-					pointer-events none
+			padding 16px
 
 </style>
-- 
cgit v1.2.3-freya


From 03d09e9d240712a54453de063741cfbe7612709c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 14:38:37 +0900
Subject: wip

---
 .../app/desktop/views/components/mentions.vue      |  6 +-
 src/client/app/desktop/views/components/notes.vue  | 22 +++++
 .../app/desktop/views/components/timeline.vue      | 12 +--
 .../views/components/user-list-timeline.vue        |  2 +-
 .../app/desktop/views/components/users-list.vue    |  6 +-
 .../app/desktop/views/pages/user/user.timeline.vue |  8 +-
 src/client/app/mobile/views/components/index.ts    |  2 +
 src/client/app/mobile/views/components/notes.vue   | 22 +++++
 .../mobile/views/components/user-list-timeline.vue | 93 ++++++++++++++++++++++
 .../app/mobile/views/components/users-list.vue     |  6 +-
 .../app/mobile/views/pages/home.timeline.vue       | 17 ----
 src/client/app/mobile/views/pages/home.vue         | 76 ++++++++++++++++--
 src/client/app/mobile/views/pages/user.vue         |  8 +-
 13 files changed, 233 insertions(+), 47 deletions(-)
 create mode 100644 src/client/app/mobile/views/components/user-list-timeline.vue

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/mentions.vue b/src/client/app/desktop/views/components/mentions.vue
index fc3a7af75d..53d08a0eca 100644
--- a/src/client/app/desktop/views/components/mentions.vue
+++ b/src/client/app/desktop/views/components/mentions.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mk-mentions">
 	<header>
-		<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
-		<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
+		<span :data-active="mode == 'all'" @click="mode = 'all'">すべて</span>
+		<span :data-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
 	</header>
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
@@ -98,7 +98,7 @@ export default Vue.extend({
 			font-size 18px
 			color #555
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color $theme-color
 				cursor pointer
 
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 01e1f5c2f0..fa7a782b7b 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -31,6 +31,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url } from '../../../config';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 import XNote from './notes.note.vue';
 
@@ -53,6 +54,7 @@ export default Vue.extend({
 			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
+			unreadCount: 0,
 			fetching: true,
 			moreFetching: false
 		};
@@ -71,10 +73,12 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 		window.addEventListener('scroll', this.onScroll);
 	},
 
 	beforeDestroy() {
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 		window.removeEventListener('scroll', this.onScroll);
 	},
 
@@ -130,6 +134,12 @@ export default Vue.extend({
 			}
 			//#endregion
 
+			// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
+			if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
+			}
+
 			if (this.isScrollTop()) {
 				// Prepend the note
 				this.notes.unshift(note);
@@ -172,9 +182,21 @@ export default Vue.extend({
 			this.moreFetching = false;
 		},
 
+		clearNotification() {
+			this.unreadCount = 0;
+			document.title = 'Misskey';
+		},
+
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.clearNotification();
+			}
+		},
+
 		onScroll() {
 			if (this.isScrollTop()) {
 				this.releaseQueue();
+				this.clearNotification();
 			}
 
 			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index d50b41b846..f5f13cbd56 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-timeline">
 	<header>
-		<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
-		<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
-		<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
-		<span :data-is-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
+		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
+		<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
+		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
 		<button @click="chooseList" title="リスト">%fa:list%</button>
 	</header>
 	<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
@@ -93,7 +93,7 @@ root(isDark)
 			font-size 12px
 			user-select none
 
-			&[data-is-active]
+			&[data-active]
 				color $theme-color
 				cursor default
 				font-weight bold
@@ -108,7 +108,7 @@ root(isDark)
 					height 2px
 					background $theme-color
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
 				cursor pointer
 
diff --git a/src/client/app/desktop/views/components/user-list-timeline.vue b/src/client/app/desktop/views/components/user-list-timeline.vue
index 8a1814f99c..ee983a969c 100644
--- a/src/client/app/desktop/views/components/user-list-timeline.vue
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -87,7 +87,7 @@ export default Vue.extend({
 		},
 		onUserRemoved() {
 			this.fetch();
-		},
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index a08e76f573..e8f4c94d42 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -2,8 +2,8 @@
 <div class="mk-users-list">
 	<nav>
 		<div>
-			<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
-			<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
+			<span :data-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
+			<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
 		</div>
 	</nav>
 	<div class="users" v-if="!fetching && users.length != 0">
@@ -98,7 +98,7 @@ export default Vue.extend({
 				*
 					pointer-events none
 
-				&[data-is-active]
+				&[data-active]
 					font-weight bold
 					color $theme-color
 					border-color $theme-color
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 754be8c04f..9c9840c190 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="timeline">
 	<header>
-		<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
-		<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
-		<span :data-is-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
+		<span :data-active="mode == 'default'" @click="mode = 'default'">投稿</span>
+		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
+		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
 	</header>
 	<div class="loading" v-if="fetching">
 		<mk-ellipsis-icon/>
@@ -114,7 +114,7 @@ export default Vue.extend({
 			font-size 18px
 			color #555
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color $theme-color
 				cursor pointer
 
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index 9a0a52d106..5ed8427b05 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/src/client/app/mobile/views/components/index.ts
@@ -19,6 +19,7 @@ import notificationPreview from './notification-preview.vue';
 import usersList from './users-list.vue';
 import userPreview from './user-preview.vue';
 import userTimeline from './user-timeline.vue';
+import userListTimeline from './user-list-timeline.vue';
 import activity from './activity.vue';
 import widgetContainer from './widget-container.vue';
 
@@ -41,5 +42,6 @@ Vue.component('mk-notification-preview', notificationPreview);
 Vue.component('mk-users-list', usersList);
 Vue.component('mk-user-preview', userPreview);
 Vue.component('mk-user-timeline', userTimeline);
+Vue.component('mk-user-list-timeline', userListTimeline);
 Vue.component('mk-activity', activity);
 Vue.component('mk-widget-container', widgetContainer);
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 137e15c6de..703b51d678 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -36,6 +36,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 const displayLimit = 30;
 
@@ -52,6 +53,7 @@ export default Vue.extend({
 			requestInitPromise: null as () => Promise<any[]>,
 			notes: [],
 			queue: [],
+			unreadCount: 0,
 			fetching: true,
 			moreFetching: false
 		};
@@ -70,10 +72,12 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 		window.addEventListener('scroll', this.onScroll);
 	},
 
 	beforeDestroy() {
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 		window.removeEventListener('scroll', this.onScroll);
 	},
 
@@ -125,6 +129,12 @@ export default Vue.extend({
 			}
 			//#endregion
 
+			// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
+			if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
+			}
+
 			if (this.isScrollTop()) {
 				// Prepend the note
 				this.notes.unshift(note);
@@ -160,9 +170,21 @@ export default Vue.extend({
 			this.moreFetching = false;
 		},
 
+		clearNotification() {
+			this.unreadCount = 0;
+			document.title = 'Misskey';
+		},
+
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.clearNotification();
+			}
+		},
+
 		onScroll() {
 			if (this.isScrollTop()) {
 				this.releaseQueue();
+				this.clearNotification();
 			}
 
 			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
diff --git a/src/client/app/mobile/views/components/user-list-timeline.vue b/src/client/app/mobile/views/components/user-list-timeline.vue
new file mode 100644
index 0000000000..ee983a969c
--- /dev/null
+++ b/src/client/app/mobile/views/components/user-list-timeline.vue
@@ -0,0 +1,93 @@
+<template>
+<div>
+	<mk-notes ref="timeline" :more="existMore ? more : null"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { UserListStream } from '../../../common/scripts/streaming/user-list';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	props: ['list'],
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+	watch: {
+		$route: 'init'
+	},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		this.connection.close();
+	},
+	methods: {
+		init() {
+			if (this.connection) this.connection.close();
+			this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
+			this.connection.on('note', this.onNote);
+			this.connection.on('userAdded', this.onUserAdded);
+			this.connection.on('userRemoved', this.onUserRemoved);
+
+			this.fetch();
+		},
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/user-list-timeline', {
+					listId: this.list.id,
+					limit: fetchLimit + 1,
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+				}).then(notes => {
+					if (notes.length == fetchLimit + 1) {
+						notes.pop();
+						this.existMore = true;
+					}
+					res(notes);
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
+		},
+		more() {
+			this.moreFetching = true;
+
+			(this as any).api('notes/list-timeline', {
+				listId: this.list.id,
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+			}).then(notes => {
+				if (notes.length == fetchLimit + 1) {
+					notes.pop();
+				} else {
+					this.existMore = false;
+				}
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
+				this.moreFetching = false;
+			});
+		},
+		onNote(note) {
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		},
+		onUserAdded() {
+			this.fetch();
+		},
+		onUserRemoved() {
+			this.fetch();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index 8fa7a9cbe6..67a38a8955 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mk-users-list">
 	<nav>
-		<span :data-is-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
-		<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@known%<span>{{ youKnowCount }}</span></span>
+		<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
+		<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@known%<span>{{ youKnowCount }}</span></span>
 	</nav>
 	<div class="users" v-if="!fetching && users.length != 0">
 		<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>
@@ -85,7 +85,7 @@ export default Vue.extend({
 			color #657786
 			border-bottom solid 2px transparent
 
-			&[data-is-active]
+			&[data-active]
 				font-weight bold
 				color $theme-color
 				border-color $theme-color
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index 42ed454d22..5f4bd6dcd8 100644
--- a/src/client/app/mobile/views/pages/home.timeline.vue
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 const fetchLimit = 10;
 
@@ -73,8 +72,6 @@ export default Vue.extend({
 			this.connection.on('unfollow', this.onChangeFollowing);
 		}
 
-		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
-
 		this.fetch();
 	},
 
@@ -85,8 +82,6 @@ export default Vue.extend({
 			this.connection.off('unfollow', this.onChangeFollowing);
 		}
 		this.stream.dispose(this.connectionId);
-
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 
 	methods: {
@@ -133,11 +128,6 @@ export default Vue.extend({
 		},
 
 		onNote(note) {
-			if (document.hidden && note.userId !== (this as any).os.i.id) {
-				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
-			}
-
 			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
 		},
@@ -153,13 +143,6 @@ export default Vue.extend({
 		warp(date) {
 			this.date = date;
 			this.fetch();
-		},
-
-		onVisibilitychange() {
-			if (!document.hidden) {
-				this.unreadCount = 0;
-				document.title = 'Misskey';
-			}
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 3b152b3952..92d34fa83b 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -5,7 +5,7 @@
 			<span v-if="src == 'home'">%fa:home%ホーム</span>
 			<span v-if="src == 'local'">%fa:R comments%ローカル</span>
 			<span v-if="src == 'global'">%fa:globe%グローバル</span>
-			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
+			<span v-if="src.startsWith('list')">%fa:list%{{ list.title }}</span>
 		</span>
 		<span style="margin-left:8px">
 			<template v-if="!showNav">%fa:angle-down%</template>
@@ -21,9 +21,14 @@
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
 			<div class="body">
-				<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
-				<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
-				<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+				<div>
+					<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
+					<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
+					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+					<template v-if="lists">
+						<span v-for="l in lists" :data-active="src == 'list:' + l.id" @click="src = 'list:' + l.id; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
+					</template>
+				</div>
 			</div>
 		</div>
 
@@ -31,7 +36,7 @@
 			<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
 			<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
-			<mk-user-list-timeline v-if="src == 'list'" ref="tl" key="list" :list="list"/>
+			<mk-user-list-timeline v-if="src.startsWith('list:')" ref="tl" key="list" :list="list"/>
 		</div>
 	</main>
 </mk-ui>
@@ -51,10 +56,25 @@ export default Vue.extend({
 		return {
 			src: 'home',
 			list: null,
+			lists: null,
 			showNav: false
 		};
 	},
 
+	watch: {
+		src() {
+			this.showNav = false;
+		},
+
+		showNav(v) {
+			if (v && this.lists === null) {
+				(this as any).api('users/lists/list').then(lists => {
+					this.lists = lists;
+				});
+			}
+		}
+	},
+
 	mounted() {
 		document.title = 'Misskey';
 		document.documentElement.style.background = '#313a42';
@@ -79,6 +99,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 main
 	> .nav
 		> .bg
@@ -93,10 +115,52 @@ main
 		> .body
 			position fixed
 			z-index 10001
-			top 48px
+			top 56px
 			left 0
+			right 0
+			width 300px
+			margin 0 auto
 			background #fff
 			border-radius 8px
+			box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
+
+			$balloon-size = 16px
+
+			&:before
+				content ""
+				display block
+				position absolute
+				top -($balloon-size * 2)
+				left s('calc(50% - %s)', $balloon-size)
+				border-top solid $balloon-size transparent
+				border-left solid $balloon-size transparent
+				border-right solid $balloon-size transparent
+				border-bottom solid $balloon-size $border-color
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top -($balloon-size * 2) + 1.5px
+				left s('calc(50% - %s)', $balloon-size)
+				border-top solid $balloon-size transparent
+				border-left solid $balloon-size transparent
+				border-right solid $balloon-size transparent
+				border-bottom solid $balloon-size #fff
+
+			> div
+				padding 8px 0
+
+				> *
+					display block
+					padding 8px 16px
+
+					&[data-active]
+						color $theme-color-foreground
+						background $theme-color
+
+					&:not([data-active]):hover
+						background #eee
 
 	> .tl
 		max-width 600px
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 3ff9057f73..73b8e24315 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -45,9 +45,9 @@
 		</header>
 		<nav>
 			<div class="nav-container">
-				<a :data-is-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
-				<a :data-is-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
-				<a :data-is-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
+				<a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
+				<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
+				<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
 			</div>
 		</nav>
 		<div class="body">
@@ -256,7 +256,7 @@ main
 				color #657786
 				border-bottom solid 2px transparent
 
-				&[data-is-active]
+				&[data-active]
 					font-weight bold
 					color $theme-color
 					border-color $theme-color
-- 
cgit v1.2.3-freya


From f7c02819be17f0963a250e4dc5359242edafe558 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 14:44:23 +0900
Subject: Fix lint

---
 src/client/app/desktop/api/update-banner.ts | 2 +-
 src/models/sw-subscription.ts               | 1 -
 test/api.ts                                 | 1 -
 tslint.json                                 | 1 +
 4 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
index bc3f783e35..feb1c33103 100644
--- a/src/client/app/desktop/api/update-banner.ts
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -95,7 +95,7 @@ export default (os: OS) => {
 				multiple: false,
 				title: '%fa:image%バナーにする画像を選択'
 			});
-		
+
 		return selectedFile
 			.then(cropImage)
 			.then(setBanner)
diff --git a/src/models/sw-subscription.ts b/src/models/sw-subscription.ts
index 621ac8a9b6..a38edd3a50 100644
--- a/src/models/sw-subscription.ts
+++ b/src/models/sw-subscription.ts
@@ -38,4 +38,3 @@ export async function deleteSwSubscription(swSubscription: string | mongo.Object
 		_id: s._id
 	});
 }
-
diff --git a/test/api.ts b/test/api.ts
index 87bbb8ee16..b85511d802 100644
--- a/test/api.ts
+++ b/test/api.ts
@@ -15,7 +15,6 @@ process.on('unhandledRejection', console.dir);
 const fs = require('fs');
 const _chai = require('chai');
 const chaiHttp = require('chai-http');
-const should = _chai.should();
 
 _chai.use(chaiHttp);
 
diff --git a/tslint.json b/tslint.json
index d3f96000b9..ae0df46b96 100644
--- a/tslint.json
+++ b/tslint.json
@@ -5,6 +5,7 @@
 	],
 	"jsRules": {},
 	"rules": {
+		"align": false,
 		"indent": ["tab"],
 		"quotemark": ["single"],
 		"no-var-requires": false,
-- 
cgit v1.2.3-freya


From bb204b2ef70a3035fb3449869e90d1d53ac50c60 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 16:10:01 +0900
Subject: wip

---
 .../app/desktop/views/components/follow-button.vue |  6 ++-
 .../app/desktop/views/pages/user/user.profile.vue  | 51 +++++++++++++++++-----
 2 files changed, 46 insertions(+), 11 deletions(-)

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 30e8cab76f..60c6129f61 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: {
 		user: {
@@ -30,6 +31,7 @@ export default Vue.extend({
 			default: 'compact'
 		}
 	},
+
 	data() {
 		return {
 			wait: false,
@@ -37,6 +39,7 @@ export default Vue.extend({
 			connectionId: null
 		};
 	},
+
 	mounted() {
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
@@ -44,13 +47,14 @@ export default Vue.extend({
 		this.connection.on('follow', this.onFollow);
 		this.connection.on('unfollow', this.onUnfollow);
 	},
+
 	beforeDestroy() {
 		this.connection.off('follow', this.onFollow);
 		this.connection.off('unfollow', this.onUnfollow);
 		(this as any).os.stream.dispose(this.connectionId);
 	},
-	methods: {
 
+	methods: {
 		onFollow(user) {
 			if (user.id == this.user.id) {
 				this.user.isFollowing = user.isFollowing;
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 774f300a38..64acbd86b3 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -3,15 +3,18 @@
 	<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
 		<mk-follow-button :user="user" size="big"/>
 		<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
-		<p class="stalk">
-			<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%i18n:@unstalk%</a></span>
-			<span v-if="!user.isStalking"><a @click="stalk">%i18n:@stalk%</a></span>
-		</p>
-		<p class="mute">
-			<span v-if="user.isMuted">%i18n:@muted% <a @click="unmute">%i18n:@unmute%</a></span>
-			<span v-if="!user.isMuted"><a @click="mute">%i18n:@mute%</a></span>
+		<p class="stalk" v-if="user.isFollowing">
+			<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
+			<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %i18n:@stalk%</a></span>
 		</p>
 	</div>
+	<div class="action-form">
+		<button class="mute ui" @click="user.isMuted ? unmute() : mute()">
+			<span v-if="user.isMuted">%fa:eye% %i18n:@unmute%</span>
+			<span v-if="!user.isMuted">%fa:eye-slash% %i18n:@mute%</span>
+		</button>
+		<button class="mute ui" @click="list">%fa:list% リストに追加</button>
+	</div>
 	<div class="description" v-if="user.description">{{ user.description }}</div>
 	<div class="birthday" v-if="user.host === null && user.profile.birthday">
 		<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
@@ -32,6 +35,7 @@ import Vue from 'vue';
 import * as age from 's-age';
 import MkFollowingWindow from '../../components/following-window.vue';
 import MkFollowersWindow from '../../components/followers-window.vue';
+import MkUserListsWindow from '../../components/user-lists-window.vue';
 
 export default Vue.extend({
 	props: ['user'],
@@ -91,6 +95,21 @@ export default Vue.extend({
 			}, () => {
 				alert('error');
 			});
+		},
+
+		list() {
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', async list => {
+				w.close();
+				await (this as any).api('users/lists/push', {
+					listId: list.id,
+					userId: this.user.id
+				});
+				(this as any).apis.dialog({
+					title: 'Done!',
+					text: `${this.user.name}を${list.title}に追加しました。`
+				});
+			});
 		}
 	}
 });
@@ -107,11 +126,9 @@ export default Vue.extend({
 
 	> .friend-form
 		padding 16px
+		text-align center
 		border-top solid 1px #eee
 
-		> .mk-big-follow-button
-			width 100%
-
 		> .followed
 			margin 12px 0 0 0
 			padding 0
@@ -122,6 +139,20 @@ export default Vue.extend({
 			background #eefaff
 			border-radius 4px
 
+		> .stalk
+			margin 12px 0 0 0
+
+	> .action-form
+		padding 16px
+		text-align center
+		border-top solid 1px #eee
+
+		> *
+			width 100%
+
+			&:not(:last-child)
+				margin-bottom 12px
+
 	> .description
 		padding 16px
 		color #555
-- 
cgit v1.2.3-freya