1.1.0

Better mobile design

.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

.gitignore

@@ -10,4 +10,3 @@ npm-debug.log
 run.bat
 api-docs.json
 package-lock.json
-version.json

README.md

@@ -18,10 +18,11 @@ ultimately sophisticated new type of mini-blog based SNS.
 
 :sparkles: Features
 ----------------------------------------------------------------
-* Automatically updated timeline
 * Reactions
+* User lists
 * Private messages
-* ServiceWorker support
+* Mute
+* Real time contents
 * ActivityPub compatible
 
 and more! You can touch with your own eyes at https://misskey.xyz/.

gulpfile.ts

@@ -21,7 +21,7 @@ import * as htmlmin from 'gulp-htmlmin';
 const uglifyes = require('uglify-es');
 
 import { fa } from './src/build/fa';
-import version from './src/version';
+const client = require('./built/client/meta.json');
 import config from './src/config';
 
 const uglify = uglifyComposer(uglifyes, console);
@@ -113,7 +113,7 @@ gulp.task('build:client', [
 
 gulp.task('build:client:script', () =>
 	gulp.src(['./src/client/app/boot.js', './src/client/app/safe.js'])
-		.pipe(replace('VERSION', JSON.stringify(version)))
+		.pipe(replace('VERSION', JSON.stringify(client.version)))
 		.pipe(replace('API', JSON.stringify(config.api_url)))
 		.pipe(replace('ENV', JSON.stringify(env)))
 		.pipe(isProduction ? uglify({

locales/en.yml

@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
   favorites: "Favorites"
+  lists: "Lists"
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"

locales/fr.yml

@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
   favorites: "Favorites"
+  lists: "リスト"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"

locales/ja.yml

@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
   favorites: "お気に入り"
+  lists: "リスト"
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"

package.json

@@ -1,12 +1,9 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "0.0.5089",
+	"version": "1.1.0",
+	"clientVersion": "1.0.5130",
 	"codename": "nighthike",
-	"license": "MIT",
-	"description": "A miniblog-based SNS",
-	"bugs": "https://github.com/syuilo/misskey/issues",
-	"repository": "https://github.com/syuilo/misskey.git",
 	"main": "./built/index.js",
 	"private": true,
 	"scripts": {
@@ -34,7 +31,7 @@
 		"@prezzemolo/rap": "0.1.2",
 		"@prezzemolo/zip": "0.0.3",
 		"@types/bcryptjs": "2.4.1",
-		"@types/chai": "4.1.2",
+		"@types/chai": "4.1.3",
 		"@types/chai-http": "3.0.4",
 		"@types/debug": "0.0.30",
 		"@types/deep-equal": "1.0.1",
@@ -54,22 +51,22 @@
 		"@types/js-yaml": "3.11.1",
 		"@types/koa": "2.0.45",
 		"@types/koa-bodyparser": "4.2.0",
-		"@types/koa-compress": "^2.0.8",
+		"@types/koa-compress": "2.0.8",
 		"@types/koa-favicon": "2.0.19",
-		"@types/koa-logger": "^3.1.0",
+		"@types/koa-logger": "3.1.0",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
-		"@types/koa-router": "7.0.27",
+		"@types/koa-router": "7.0.28",
 		"@types/koa-send": "4.1.1",
 		"@types/koa__cors": "2.2.2",
 		"@types/kue": "0.11.8",
 		"@types/license-checker": "15.0.0",
 		"@types/mkdirp": "0.5.2",
-		"@types/mocha": "5.0.0",
+		"@types/mocha": "5.2.0",
 		"@types/mongodb": "3.0.15",
 		"@types/monk": "6.0.0",
 		"@types/ms": "0.7.30",
-		"@types/node": "9.6.5",
+		"@types/node": "9.6.6",
 		"@types/nopt": "3.0.29",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "0.8.1",
@@ -82,7 +79,7 @@
 		"@types/speakeasy": "2.0.2",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.3",
-		"@types/webpack": "4.1.3",
+		"@types/webpack": "4.1.4",
 		"@types/webpack-stream": "3.2.10",
 		"@types/websocket": "0.0.38",
 		"@types/ws": "4.0.2",
@@ -91,10 +88,10 @@
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"bootstrap-vue": "2.0.0-rc.6",
-		"cafy": "3.2.1",
+		"cafy": "7.0.1",
 		"chai": "4.1.2",
 		"chai-http": "4.0.0",
-		"chalk": "2.4.0",
+		"chalk": "2.4.1",
 		"crc-32": "1.2.0",
 		"css-loader": "0.28.11",
 		"debug": "3.1.0",
@@ -103,12 +100,12 @@
 		"diskusage": "0.2.4",
 		"dompurify": "1.0.3",
 		"elasticsearch": "14.2.2",
-		"element-ui": "2.3.4",
+		"element-ui": "2.3.6",
 		"emojilib": "2.2.12",
 		"escape-regexp": "0.0.1",
 		"eslint": "4.19.1",
-		"eslint-plugin-vue": "4.4.0",
+		"eslint-plugin-vue": "4.5.0",
-		"eventemitter3": "3.0.1",
+		"eventemitter3": "3.1.0",
 		"exif-js": "2.3.0",
 		"file-loader": "1.1.11",
 		"file-type": "7.6.0",
@@ -136,29 +133,30 @@
 		"is-root": "2.0.0",
 		"is-url": "1.2.4",
 		"js-yaml": "3.11.0",
-		"jsdom": "11.8.0",
+		"jsdom": "11.9.0",
-		"koa": "2.5.0",
+		"koa": "2.5.1",
 		"koa-bodyparser": "4.2.0",
 		"koa-compress": "3.0.0",
 		"koa-favicon": "2.0.1",
-		"koa-json-body": "^5.3.0",
+		"koa-json-body": "5.3.0",
-		"koa-logger": "^3.2.0",
+		"koa-logger": "3.2.0",
 		"koa-mount": "3.0.0",
 		"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",
 		"mecab-async": "0.1.2",
 		"mkdirp": "0.5.1",
-		"mocha": "5.1.0",
+		"mocha": "5.1.1",
 		"moji": "0.5.1",
 		"mongodb": "3.0.7",
 		"monk": "6.0.5",
 		"ms": "2.1.1",
 		"nan": "2.10.0",
-		"node-sass": "4.8.3",
+		"node-sass": "4.9.0",
 		"node-sass-json-importer": "3.2.0",
 		"nopt": "4.0.1",
 		"nprogress": "0.2.0",
@@ -192,9 +190,9 @@
 		"textarea-caret": "3.1.0",
 		"tmp": "0.0.33",
 		"ts-loader": "4.2.0",
-		"ts-node": "6.0.0",
+		"ts-node": "6.0.1",
 		"tslint": "5.9.1",
-		"typescript": "2.8.1",
+		"typescript": "2.8.3",
 		"typescript-eslint-parser": "15.0.0",
 		"uglify-es": "3.3.9",
 		"url-loader": "1.0.1",
@@ -203,18 +201,18 @@
 		"vue": "2.5.16",
 		"vue-cropperjs": "2.2.0",
 		"vue-js-modal": "1.3.13",
-		"vue-json-tree-view": "2.1.3",
+		"vue-json-tree-view": "2.1.4",
-		"vue-loader": "14.2.2",
+		"vue-loader": "15.0.3",
 		"vue-router": "3.0.1",
 		"vue-template-compiler": "2.5.16",
 		"vuedraggable": "2.16.0",
-		"vuex": "^3.0.1",
+		"vuex": "3.0.1",
 		"web-push": "3.3.0",
 		"webfinger.js": "2.6.6",
 		"webpack": "4.6.0",
-		"webpack-cli": "2.0.14",
+		"webpack-cli": "2.0.15",
 		"webpack-replace-loader": "1.3.0",
-		"websocket": "1.0.25",
+		"websocket": "1.0.26",
 		"ws": "5.1.1",
 		"xev": "2.0.0"
 	}

src/cafy-id.ts

@@ -0,0 +1,29 @@
+import * as mongo from 'mongodb';
+import { Query } from 'cafy';
+
+export const isAnId = x => mongo.ObjectID.isValid(x);
+export const isNotAnId = x => !isAnId(x);
+
+/**
+ * ID
+ */
+export default class ID extends Query<mongo.ObjectID> {
+	constructor(...args) {
+		super(...args);
+
+		this.transform = v => {
+			if (isAnId(v) && !mongo.ObjectID.prototype.isPrototypeOf(v)) {
+				return new mongo.ObjectID(v);
+			} else {
+				return v;
+			}
+		};
+
+		this.pushValidator(v => {
+			if (!mongo.ObjectID.prototype.isPrototypeOf(v) && isNotAnId(v)) {
+				return new Error('must-be-an-id');
+			}
+			return true;
+		});
+	}
+}

src/client/app/boot.js

@@ -105,8 +105,8 @@
 		const meta = await res.json();
 
 		// Compare versions
-		if (meta.version != ver) {
+		if (meta.clientVersion != ver) {
-			localStorage.setItem('v', meta.version);
+			localStorage.setItem('v', meta.clientVersion);
 
 			alert(
 				'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' +

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;
 	}
 
 	/**

src/client/app/common/scripts/check-for-update.ts

@@ -3,7 +3,7 @@ import { version as current } from '../../config';
 
 export default async function(mios: MiOS, force = false, silent = false) {
 	const meta = await mios.getMeta(force);
-	const newer = meta.version;
+	const newer = meta.clientVersion;
 
 	if (newer != current) {
 		localStorage.setItem('should-refresh', 'true');

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
+			});
+		});
+	}
+}

src/client/app/common/views/components/url-preview.vue

@@ -2,8 +2,8 @@
 <iframe v-if="youtubeId" type="text/html" height="250"
 	:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
 	frameborder="0"/>
-<div v-else>
+<div v-else class="mk-url-preview">
-	<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
+	<a :href="url" target="_blank" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
 		<article>
 			<header>
@@ -66,78 +66,79 @@ iframe
 	width 100%
 
 root(isDark)
-	display block
+	> a
-	font-size 16px
+		display block
-	border solid 1px isDark ? #191b1f : #eee
+		font-size 16px
-	border-radius 4px
+		border solid 1px isDark ? #191b1f : #eee
-	overflow hidden
+		border-radius 4px
+		overflow hidden
 
-	&:hover
+		&:hover
-		text-decoration none
+			text-decoration none
-		border-color isDark ? #4f5561 : #ddd
+			border-color isDark ? #4f5561 : #ddd
 
-		> article > header > h1
+			> article > header > h1
-			text-decoration underline
+				text-decoration underline
-
-	> .thumbnail
-		position absolute
-		width 100px
-		height 100%
-		background-position center
-		background-size cover
-
-		& + article
-			left 100px
-			width calc(100% - 100px)
-
-	> article
-		padding 16px
-
-		> header
-			margin-bottom 8px
-
-			> h1
-				margin 0
-				font-size 1em
-				color isDark ? #d6dae0 : #555
-
-		> p
-			margin 0
-			color isDark ? #a4aab3 : #777
-			font-size 0.8em
-
-		> footer
-			margin-top 8px
-			height 16px
-
-			> img
-				display inline-block
-				width 16px
-				height 16px
-				margin-right 4px
-				vertical-align top
-
-			> p
-				display inline-block
-				margin 0
-				color isDark ? #b0b4bf : #666
-				font-size 0.8em
-				line-height 16px
-				vertical-align top
-
-	@media (max-width 500px)
-		font-size 8px
-		border none
 
 		> .thumbnail
-			width 70px
+			position absolute
+			width 100px
+			height 100%
+			background-position center
+			background-size cover
 
 			& + article
-				left 70px
+				left 100px
-				width calc(100% - 70px)
+				width calc(100% - 100px)
 
 		> article
-			padding 8px
+			padding 16px
+
+			> header
+				margin-bottom 8px
+
+				> h1
+					margin 0
+					font-size 1em
+					color isDark ? #d6dae0 : #555
+
+			> p
+				margin 0
+				color isDark ? #a4aab3 : #777
+				font-size 0.8em
+
+			> footer
+				margin-top 8px
+				height 16px
+
+				> img
+					display inline-block
+					width 16px
+					height 16px
+					margin-right 4px
+					vertical-align top
+
+				> p
+					display inline-block
+					margin 0
+					color isDark ? #b0b4bf : #666
+					font-size 0.8em
+					line-height 16px
+					vertical-align top
+
+		@media (max-width 500px)
+			font-size 8px
+			border none
+
+			> .thumbnail
+				width 70px
+
+				& + article
+					left 70px
+					width calc(100% - 70px)
+
+			> article
+				padding 8px
 
 .mk-url-preview[data-darkmode]
 	root(true)

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)

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 },

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;

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);

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-active="mode == 'all'" @click="mode = 'all'">すべて</span>
-		<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</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
 

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,26 +18,48 @@
 			</p>
 		</template>
 	</transition-group>
-	<footer>
+
-		<slot name="footer"></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>
 
 <script lang="ts">
 import Vue from 'vue';
+import { url } from '../../../config';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
+
 import XNote from './notes.note.vue';
 
+const displayLimit = 30;
+
 export default Vue.extend({
 	components: {
 		XNote
 	},
+
 	props: {
-		notes: {
+		more: {
-			type: Array,
+			type: Function,
-			default: () => []
+			required: false
 		}
 	},
+
+	data() {
+		return {
+			requestInitPromise: null as () => Promise<any[]>,
+			notes: [],
+			queue: [],
+			unreadCount: 0,
+			fetching: true,
+			moreFetching: false
+		};
+	},
+
 	computed: {
 		_notes(): any[] {
 			return (this.notes as any).map(note => {
@@ -40,18 +71,146 @@ 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);
+	},
+
 	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(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 ((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);
+
+				// サウンドを再生する
+				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);
+				}
+			} 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;
+		},
+
+		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) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.loadMore();
+			}
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 root(isDark)
 	.transition
 		.mk-notes-enter
@@ -78,24 +237,31 @@ root(isDark)
 			[data-fa]
 				margin-right 8px
 
+	> .newer-indicator
+		position -webkit-sticky
+		position sticky
+		z-index 100
+		height 3px
+		background $theme-color
+
 	> footer
-		> *
+		> button
 			display block
 			margin 0
 			padding 16px
 			width 100%
 			text-align center
 			color #ccc
-			border-top solid 1px #eaeaea
+			background isDark ? #282C37 : #fff
-			border-bottom-left-radius 4px
+			border-top solid 1px isDark ? #1c2023 : #eaeaea
-			border-bottom-right-radius 4px
+			border-bottom-left-radius 6px
+			border-bottom-right-radius 6px
 
-		> button
 			&:hover
-				background #f5f5f5
+				background isDark ? #2e3440 : #f5f5f5
 
 			&:active
-				background #eee
+				background isDark ? #21242b : #eee
 
 .mk-notes[data-darkmode]
 	root(true)

src/client/app/desktop/views/components/timeline.core.vue

@@ -1,28 +1,23 @@
 <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">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="notes.length == 0 && !fetching">
+
-		%fa:R comments%%i18n:@empty%
+	<mk-notes ref="timeline" :more="canFetchMore ? more : null">
-	</p>
+		<p :class="$style.empty" slot="empty">
-	<mk-notes :notes="notes" ref="timeline">
+			%fa:R comments%%i18n:@empty%
-		<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		</p>
-			<template v-if="!moreFetching">%i18n:@load-more%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
-		</button>
 	</mk-notes>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { url } from '../../../config';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 const fetchLimit = 10;
-const displayLimit = 30;
 
 export default Vue.extend({
 	props: {
@@ -37,10 +32,9 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			notes: [],
-			queue: [],
 			connection: null,
 			connectionId: null,
+			unreadCount: 0,
 			date: null
 		};
 	},
@@ -67,7 +61,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 +76,7 @@ export default Vue.extend({
 		}
 
 		document.addEventListener('keydown', this.onKeydown);
-		window.addEventListener('scroll', this.onScroll);
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 
 		this.fetch();
 	},
@@ -96,33 +90,29 @@ export default Vue.extend({
 		this.stream.dispose(this.connectionId);
 
 		document.removeEventListener('keydown', this.onKeydown);
-		window.removeEventListener('scroll', this.onScroll);
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 
 	methods: {
-		isScrollTop() {
+		fetch() {
-			return window.scrollY <= 8;
-		},
-
-		fetch(cb?) {
-			this.queue = [];
 			this.fetching = true;
 
-			(this as any).api(this.endpoint, {
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				limit: fetchLimit + 1,
+				(this as any).api(this.endpoint, {
-				untilDate: this.date ? this.date.getTime() : undefined,
+					limit: fetchLimit + 1,
-				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+					untilDate: this.date ? this.date.getTime() : undefined,
-				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-			}).then(notes => {
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-				if (notes.length == fetchLimit + 1) {
+				}).then(notes => {
-					notes.pop();
+					if (notes.length == fetchLimit + 1) {
-					this.existMore = true;
+						notes.pop();
-				}
+						this.existMore = true;
-				this.notes = notes;
+					}
-				this.fetching = false;
+					res(notes);
-				this.$emit('loaded');
+					this.fetching = false;
-				if (cb) cb();
+					this.$emit('loaded');
-			});
+				}, rej);
+			}));
 		},
 
 		more() {
@@ -132,7 +122,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,56 +131,19 @@ 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 弾く
+			if (document.hidden && note.userId !== (this as any).os.i.id) {
-			const isMyNote = note.userId == (this as any).os.i.id;
+				this.unreadCount++;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
-
-			if ((this as any).os.i.clientSettings.showMyRenotes === false) {
-				if (isMyNote && isPureRenote) {
-					return;
-				}
 			}
 
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
+			// Prepend a note
-				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
+			(this.$refs.timeline as any).prepend(note);
-					return;
-				}
-			}
-			//#endregion
-
-			if (this.isScrollTop()) {
-				this.prependNote(note);
-			} else {
-				this.queue.unshift(note);
-			}
 		},
 
 		onChangeFollowing() {
@@ -206,14 +159,10 @@ export default Vue.extend({
 			this.fetch();
 		},
 
-		onScroll() {
+		onVisibilitychange() {
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+			if (!document.hidden) {
-				const current = window.scrollY + window.innerHeight;
+				this.unreadCount = 0;
-				if (current > document.body.offsetHeight - 8) this.more();
+				document.title = 'Misskey';
-			}
-
-			if (this.isScrollTop()) {
-				this.releaseQueue();
 			}
 		},
 
@@ -223,7 +172,7 @@ export default Vue.extend({
 					this.focus();
 				}
 			}
-		},
+		}
 	}
 });
 </script>
@@ -231,32 +180,28 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-home-timeline
+.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>
-		display block
-		margin 0 auto
-		padding 32px
-		max-width 400px
-		text-align center
-		color #999
 
-		> [data-fa]
+<style lang="stylus" module>
-			display block
+.empty
-			margin-bottom 16px
+	display block
-			font-size 3em
+	margin 0 auto
-			color #ccc
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-fa]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
 
 </style>

src/client/app/desktop/views/components/timeline.vue

@@ -1,19 +1,23 @@
 <template>
 <div class="mk-timeline">
 	<header>
-		<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
+		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
-		<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
+		<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
-		<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</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"/>
 	<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.id" :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: {
@@ -22,7 +26,8 @@ export default Vue.extend({
 
 	data() {
 		return {
-			src: 'home'
+			src: 'home',
+			list: null
 		};
 	},
 
@@ -35,6 +40,15 @@ export default Vue.extend({
 	methods: {
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
+		},
+
+		chooseList() {
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', list => {
+				this.list = list;
+				this.src = 'list';
+				w.close();
+			});
 		}
 	}
 });
@@ -55,6 +69,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
@@ -62,7 +93,7 @@ root(isDark)
 			font-size 12px
 			user-select none
 
-			&[data-is-active]
+			&[data-active]
 				color $theme-color
 				cursor default
 				font-weight bold
@@ -77,7 +108,7 @@ root(isDark)
 					height 2px
 					background $theme-color
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
 				cursor pointer
 

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:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
+				</li>
 			</ul>
 			<ul>
 				<li>
@@ -42,6 +45,7 @@
 
 <script lang="ts">
 import Vue from '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';
@@ -80,6 +84,13 @@ export default Vue.extend({
 			this.close();
 			(this as any).os.new(MkDriveWindow);
 		},
+		list() {
+			this.close();
+			const w = (this as any).os.new(MkUserListsWindow);
+			w.$once('choosen', list => {
+				this.$router.push(`i/lists/${ list.id }`);
+			});
+		},
 		settings() {
 			this.close();
 			(this as any).os.new(MkSettingsWindow);

src/client/app/desktop/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>

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

@@ -0,0 +1,69 @@
+<template>
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+	<span slot="header">%fa:list% リスト</span>
+
+	<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>
+
+<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.$emit('choosen', list);
+			});
+		},
+		choice(list) {
+			this.$emit('choosen', list);
+		},
+		close() {
+			(this as any).$refs.window.close();
+		}
+	}
+});
+</script>
+
+<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>

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 :data-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 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

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

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>

src/client/app/desktop/views/pages/user-list.vue

@@ -0,0 +1,71 @@
+<template>
+<mk-ui>
+	<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"/>
+		</main>
+	</div>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XUsers from './user-list.users.vue';
+
+export default Vue.extend({
+	components: {
+		XUsers
+	},
+	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" scoped>
+[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
+	display flex
+	justify-content center
+	margin 0 auto
+	max-width 1200px
+
+	> main
+	> div > div
+		> *:not(:last-child)
+			margin-bottom 16px
+
+	> main
+		padding 16px
+		width calc(100% - 275px * 2)
+
+	> div
+		width 275px
+		margin 0
+		padding 16px 0 16px 16px
+
+</style>

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">
+		<p class="stalk" v-if="user.isFollowing">
-			<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%i18n:@unstalk%</a></span>
+			<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
-			<span v-if="!user.isStalking"><a @click="stalk">%i18n:@stalk%</a></span>
+			<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %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>
 	</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

src/client/app/desktop/views/pages/user/user.timeline.vue

@@ -1,42 +1,36 @@
 <template>
 <div class="timeline">
 	<header>
-		<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
+		<span :data-active="mode == 'default'" @click="mode = 'default'">投稿</span>
-		<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
+		<span :data-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 == 'with-media'" @click="mode = 'with-media'">メディア</span>
 	</header>
 	<div class="loading" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
+	<mk-notes ref="timeline" :more="existMore ? more : null">
-	<mk-notes ref="timeline" :notes="notes">
+		<p class="empty" slot="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
-		<div slot="footer">
-			<template v-if="!moreFetching">%fa:moon%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
-		</div>
 	</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', {
+			this.fetching = true;
-				userId: this.user.id,
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				untilDate: this.date ? this.date.getTime() : undefined,
+				(this as any).api('users/notes', {
-				includeReplies: this.mode == 'with-replies',
+					userId: this.user.id,
-				withMedia: this.mode == 'with-media'
+					limit: fetchLimit + 1,
-			}).then(notes => {
+					untilDate: this.date ? this.date.getTime() : undefined,
-				this.notes = notes;
+					includeReplies: this.mode == 'with-replies',
-				this.fetching = false;
+					withMedia: this.mode == 'with-media'
-				if (cb) cb();
+				}).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();
@@ -115,7 +114,7 @@ export default Vue.extend({
 			font-size 18px
 			color #555
 
-			&:not([data-is-active])
+			&:not([data-active])
 				color $theme-color
 				cursor pointer
 

src/client/app/desktop/views/pages/welcome.vue

@@ -125,7 +125,8 @@ export default Vue.extend({
 	flex 1
 	$width = 1000px
 
-	background-image url('/assets/welcome-bg.svg')
+	background linear-gradient(to bottom, #1e1d65, #bd6659)
+	//background-image url('/assets/welcome-bg.svg')
 	background-size cover
 	background-position top center
 
@@ -309,9 +310,3 @@ export default Vue.extend({
 	a
 		color #666
 </style>
-
-<style lang="stylus">
-html
-body
-	background linear-gradient(to bottom, #1e1d65, #bd6659)
-</style>

src/client/app/init.ts

@@ -82,12 +82,12 @@ Vue.mixin({
 	methods: {
 		_updateDarkmode_(v) {
 			localStorage.setItem('darkmode', v.toString());
-			bus.$emit('updated', v);
 			if (v) {
 				document.documentElement.setAttribute('data-darkmode', 'true');
 			} else {
 				document.documentElement.removeAttribute('data-darkmode');
 			}
+			bus.$emit('updated', v);
 		},
 		_onDarkmodeUpdated_(v) {
 			if (!this.$el || !this.$el.setAttribute) return;

src/client/app/mobile/style.styl

@@ -8,6 +8,10 @@
 
 html
 	height 100%
+	background #ececed
+
+	&[data-darkmode]
+		background #191B22
 
 body
 	display flex

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';
@@ -20,11 +19,11 @@ 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';
 
 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);
@@ -43,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);

src/client/app/mobile/views/components/note.sub.vue

@@ -31,6 +31,9 @@ export default Vue.extend({
 	font-size 0.9em
 	padding 16px
 
+	@media (min-width 600px)
+		padding 24px 32px
+
 	&:after
 		content ""
 		display block

src/client/app/mobile/views/components/note.vue

@@ -238,7 +238,7 @@ export default Vue.extend({
 
 root(isDark)
 	font-size 12px
-	border-bottom solid 1px #eaeaea
+	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 	&:first-child
 		border-radius 8px 8px 0 0
@@ -266,6 +266,9 @@ root(isDark)
 		@media (min-width 500px)
 			padding 16px
 
+		@media (min-width 600px)
+			padding 16px 32px
+
 		.avatar-anchor
 			display inline-block
 
@@ -308,7 +311,10 @@ root(isDark)
 			background transparent
 
 	> article
-		padding 14px 16px 9px 16px
+		padding 16px 16px 9px
+
+		@media (min-width 600px)
+			padding 32px 32px 22px
 
 		&:after
 			content ""

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,22 +24,41 @@
 			</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>
 
 <script lang="ts">
 import Vue from 'vue';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
+
+const displayLimit = 30;
 
 export default Vue.extend({
 	props: {
-		notes: {
+		more: {
-			type: Array,
+			type: Function,
-			default: () => []
+			required: false
 		}
 	},
+
+	data() {
+		return {
+			requestInitPromise: null as () => Promise<any[]>,
+			notes: [],
+			queue: [],
+			unreadCount: 0,
+			fetching: true,
+			moreFetching: false
+		};
+	},
+
 	computed: {
 		_notes(): any[] {
 			return (this.notes as any).map(note => {
@@ -38,9 +70,127 @@ 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);
+	},
+
 	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 ((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);
+
+				// オーバーフローしたら古い投稿は捨てる
+				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;
+		},
+
+		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) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.loadMore();
+			}
 		}
 	}
 });
@@ -49,10 +199,13 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-notes
+root(isDark)
-	background #fff
+	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
+
+	@media (min-width 500px)
+		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
 
 	.transition
 		.mk-notes-enter
@@ -79,6 +232,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
@@ -103,8 +263,8 @@ export default Vue.extend({
 	> footer
 		text-align center
 		border-top solid 1px #eaeaea
-		border-bottom-left-radius 4px
+		border-bottom-left-radius 8px
-		border-bottom-right-radius 4px
+		border-bottom-right-radius 8px
 
 		&:empty
 			display none
@@ -113,10 +273,18 @@ export default Vue.extend({
 			margin 0
 			padding 16px
 			width 100%
-			color $theme-color
 			border-radius 0 0 8px 8px
 
+			@media (min-width 500px)
+				padding 20px
+
 			&:disabled
 				opacity 0.7
 
+.mk-notes[data-darkmode]
+	root(true)
+
+.mk-notes:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/components/notification.vue

@@ -1,15 +1,15 @@
 <template>
 <div class="mk-notification">
 	<div class="notification reaction" v-if="notification.type == 'reaction'">
-		<mk-time :time="notification.createdAt"/>
 		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
-		<div class="text">
+		<div>
-			<p>
+			<header>
 				<mk-reaction-icon :reaction="notification.reaction"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
+				<mk-time :time="notification.createdAt"/>
+			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note) }}
 				%fa:quote-right%
@@ -18,38 +18,54 @@
 	</div>
 
 	<div class="notification renote" v-if="notification.type == 'renote'">
-		<mk-time :time="notification.createdAt"/>
 		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
-		<div class="text">
+		<div>
-			<p>
+			<header>
 				%fa:retweet%
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
+				<mk-time :time="notification.createdAt"/>
+			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
 			</router-link>
 		</div>
 	</div>
 
+	<div class="notification follow" v-if="notification.type == 'follow'">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
+			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
+		<div>
+			<header>
+				%fa:user-plus%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
+	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
+			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
+		<div>
+			<header>
+				%fa:chart-pie%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage">
+				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+			</router-link>
+		</div>
+	</div>
+
 	<template v-if="notification.type == 'quote'">
 		<mk-note :note="notification.note"/>
 	</template>
 
-	<div class="notification follow" v-if="notification.type == 'follow'">
-		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:user-plus%
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
-		</div>
-	</div>
-
 	<template v-if="notification.type == 'reply'">
 		<mk-note :note="notification.note"/>
 	</template>
@@ -57,22 +73,6 @@
 	<template v-if="notification.type == 'mention'">
 		<mk-note :note="notification.note"/>
 	</template>
-
-	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
-		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-		<div class="text">
-			<p>
-				%fa:chart-pie%
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
-			</p>
-			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-			</router-link>
-		</div>
-	</div>
 </div>
 </template>
 
@@ -95,44 +95,57 @@ export default Vue.extend({
 
 	> .notification
 		padding 16px
+		font-size 12px
 		overflow-wrap break-word
 
+		@media (min-width 350px)
+			font-size 14px
+
+		@media (min-width 500px)
+			font-size 16px
+
+		@media (min-width 600px)
+			padding 32px
+
 		&:after
 			content ""
 			display block
 			clear both
 
-		> .mk-time
-			display inline
-			position absolute
-			top 16px
-			right 12px
-			vertical-align top
-			color rgba(0, 0, 0, 0.6)
-			font-size 0.9em
-
 		> .avatar-anchor
 			display block
 			float left
 
 			img
-				min-width 36px
+				width 36px
-				min-height 36px
+				height 36px
-				max-width 36px
-				max-height 36px
 				border-radius 6px
 
-		> .text
+				@media (min-width 500px)
+					width 42px
+					height 42px
+
+		> div
 			float right
 			width calc(100% - 36px)
 			padding-left 8px
 
-			p
+			@media (min-width 500px)
-				margin 0
+				width calc(100% - 42px)
+
+			> header
+				display flex
+				align-items center
+				white-space nowrap
 
 				i, .mk-reaction-icon
 					margin-right 4px
 
+				> .mk-time
+					margin-left auto
+					color rgba(0, 0, 0, 0.3)
+					font-size 0.9em
+
 			> .note-preview
 				color rgba(0, 0, 0, 0.7)
 
@@ -147,11 +160,11 @@ export default Vue.extend({
 					margin-right 3px
 
 		&.renote
-			.text p i
+			> div > header i
 				color #77B255
 
 		&.follow
-			.text p i
+			> div > header i
 				color #53c7ce
 
 </style>

src/client/app/mobile/views/components/notifications.vue

@@ -1,18 +1,20 @@
 <template>
 <div class="mk-notifications">
-	<div class="notifications" v-if="notifications.length != 0">
+	<transition-group name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
 			<mk-notification :notification="notification" :key="notification.id"/>
-			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
+			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
 				<span>%fa:angle-up%{{ notification._datetext }}</span>
 				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
+	</transition-group>
+
 	<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
 		{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
 	</button>
+
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 </div>
@@ -102,23 +104,26 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-notifications
-	margin 8px auto
+	margin 0 auto
-	padding 0
-	max-width 500px
-	width calc(100% - 16px)
 	background #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
 
 	@media (min-width 500px)
-		margin 16px auto
+		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
-		width calc(100% - 32px)
+
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
 
 	> .notifications
 
 		> .mk-notification
-			margin 0 auto
-			max-width 500px
 			border-bottom solid 1px rgba(0, 0, 0, 0.05)
 
 			&:last-child

src/client/app/mobile/views/components/post-form.vue

@@ -175,11 +175,15 @@ export default Vue.extend({
 	margin 8px auto
 	background #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
 
 	@media (min-width 500px)
 		margin 16px auto
 		width calc(100% - 32px)
+		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
+
+	@media (min-width 600px)
+		margin 32px auto
 
 	> header
 		z-index 1

src/client/app/mobile/views/components/timeline.vue

@@ -1,190 +0,0 @@
-<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">
-			%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>
-
-<script lang="ts">
-import Vue from 'vue';
-
-const fetchLimit = 10;
-const displayLimit = 30;
-
-export default Vue.extend({
-	props: {
-		date: {
-			type: Date,
-			required: false,
-			default: null
-		}
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			notes: [],
-			queue: [],
-			existMore: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-
-	computed: {
-		alone(): boolean {
-			return (this as any).os.i.followingCount == 0;
-		},
-
-		canFetchMore(): boolean {
-			return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
-		}
-	},
-
-	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);
-
-		window.addEventListener('scroll', this.onScroll);
-
-		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);
-
-		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();
-			});
-		},
-
-		more() {
-			this.moreFetching = true;
-			(this as any).api('notes/timeline', {
-				limit: fetchLimit + 1,
-				untilId: this.notes[this.notes.length - 1].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);
-				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);
-			}
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		},
-
-		onScroll() {
-			if (this.isScrollTop()) {
-				this.releaseQueue();
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@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>

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

@@ -143,14 +143,14 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.header
+root(isDark)
 	$height = 48px
 
 	position fixed
 	top 0
 	z-index 1024
 	width 100%
-	box-shadow 0 1px 0 rgba(#000, 0.075)
+	//box-shadow 0 1px 0 rgba(#000, 0.075)
 
 	&, *
 		user-select none
@@ -167,7 +167,7 @@ export default Vue.extend({
 			-webkit-backdrop-filter blur(12px)
 			backdrop-filter blur(12px)
 			//background-color rgba(#1b2023, 0.75)
-			background-color #1b2023
+			background-color isDark ? #313543 : #595f6f
 
 		> p
 			display none
@@ -244,4 +244,10 @@ export default Vue.extend({
 				line-height $height
 				border-left solid 1px rgba(#000, 0.1)
 
+.header[data-darkmode]
+	root(true)
+
+.header:not([data-darkmode])
+	root(false)
+
 </style>

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>

src/client/app/mobile/views/components/user-timeline.vue

@@ -1,17 +1,10 @@
 <template>
 <div class="mk-user-timeline">
-	<mk-notes :notes="notes">
+	<mk-notes ref="timeline" :more="existMore ? more : null">
-		<div class="init" v-if="fetching">
+		<div slot="empty">
-			%fa:spinner .pulse%%i18n:common.loading%
-		</div>
-		<div class="empty" v-if="!fetching && notes.length == 0">
 			%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,58 +12,56 @@
 <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', {
+		this.fetch();
-			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');
-		});
 	},
 	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,
+				limit: fetchLimit + 1,
-				untilId: this.notes[this.notes.length - 1].id
+				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;
 			});
 		}
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-.mk-user-timeline
-	max-width 600px
-	margin 0 auto
-</style>

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 :data-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 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

src/client/app/mobile/views/pages/dashboard.vue

@@ -0,0 +1,195 @@
+<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';
+	},
+
+	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>

src/client/app/mobile/views/pages/followers.vue

@@ -40,9 +40,6 @@ export default Vue.extend({
 	created() {
 		this.fetch();
 	},
-	mounted() {
-		document.documentElement.style.background = '#313a42';
-	},
 	methods: {
 		fetch() {
 			Progress.start();

src/client/app/mobile/views/pages/following.vue

@@ -39,9 +39,6 @@ export default Vue.extend({
 	created() {
 		this.fetch();
 	},
-	mounted() {
-		document.documentElement.style.background = '#313a42';
-	},
 	methods: {
 		fetch() {
 			Progress.start();

src/client/app/mobile/views/pages/home.timeline.vue

@@ -0,0 +1,149 @@
+<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';
+
+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);
+		}
+
+		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);
+	},
+
+	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) {
+			// 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();
+		}
+	}
+});
+</script>

src/client/app/mobile/views/pages/home.vue

@@ -1,59 +1,42 @@
 <template>
 <mk-ui>
-	<span slot="header" @click="showTl = !showTl">
+	<span slot="header" @click="showNav = true">
-		<template v-if="showTl">%fa:home%%i18n:@timeline%</template>
+		<span>
-		<template v-else>%fa:home%ウィジェット</template>
+			<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.startsWith('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="fn">%fa:pencil-alt%</button>
-		<button @click="customizing = !customizing" v-else>%fa:cog%</button>
 	</template>
+
 	<main>
-		<div class="tl">
+		<div class="nav" v-if="showNav">
-			<mk-timeline @loaded="onLoaded" v-show="showTl"/>
+			<div class="bg" @click="showNav = false"></div>
+			<div class="body">
+				<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>
-		<div class="widgets" v-show="!showTl">
+
-			<template v-if="customizing">
+		<div class="tl">
-				<header>
+			<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
-					<select v-model="widgetAdderSelected">
+			<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
-						<option value="profile">プロフィール</option>
+			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
-						<option value="calendar">カレンダー</option>
+			<mk-user-list-timeline v-if="src.startsWith('list:')" ref="tl" :key="list.id" :list="list"/>
-						<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>
 	</main>
 </mk-ui>
@@ -61,144 +44,52 @@
 
 <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,
+			src: 'home',
-			connectionId: null,
+			list: null,
-			unreadCount: 0,
+			lists: null,
-			showTl: true,
+			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 => {
+	watch: {
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+		src() {
-		}, {
+			this.showNav = false;
-			deep: true
+		},
-		});
+
+		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';
-
-		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() {
 
 		}
@@ -207,53 +98,78 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 main
+	> .nav
+		> .bg
+			position fixed
+			z-index 10000
+			top 0
+			left 0
+			width 100%
+			height 100%
+			background rgba(#000, 0.5)
 
-	> .tl
+		> .body
-		> .mk-timeline
+			position fixed
-			max-width 600px
+			z-index 10001
+			top 56px
+			left 0
+			right 0
+			width 300px
 			margin 0 auto
-			padding 8px
-
-			@media (min-width 500px)
-				padding 16px
-
-	> .widgets
-		margin 0 auto
-		max-width 500px
-
-		@media (min-width 500px)
-			padding 8px
-
-		> header
-			padding 8px
 			background #fff
+			border-radius 8px
+			box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
 
-		.widget
+			$balloon-size = 16px
-			margin 8px
 
-		.customize-container
+			&:before
-			margin 8px
+				content ""
-			background #fff
+				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
 
-			> header
+			&:after
-				line-height 32px
+				content ""
-				background #eee
+				display block
-
+				position absolute
-				> .handle
+				top -($balloon-size * 2) + 1.5px
-					padding 0 8px
+				left s('calc(50% - %s)', $balloon-size)
-
+				border-top solid $balloon-size transparent
-				> .remove
+				border-left solid $balloon-size transparent
-					position absolute
+				border-right solid $balloon-size transparent
-					top 0
+				border-bottom solid $balloon-size #fff
-					right 0
-					padding 0 8px
-					line-height 32px
 
 			> div
-				padding 8px
+				padding 8px 0
 
 				> *
-					pointer-events none
+					display block
+					padding 8px 16px
+
+					&[data-active]
+						color $theme-color-foreground
+						background $theme-color
+
+					&:not([data-active]):hover
+						background #eee
+
+	> .tl
+		max-width 680px
+		margin 0 auto
+		padding 8px
+
+		@media (min-width 500px)
+			padding 16px
+
+		@media (min-width 600px)
+			padding 32px
 
 </style>

src/client/app/mobile/views/pages/note.vue

@@ -30,7 +30,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = 'Misskey';
-		document.documentElement.style.background = '#313a42';
 	},
 	methods: {
 		fetch() {

src/client/app/mobile/views/pages/notifications.vue

@@ -2,7 +2,10 @@
 <mk-ui>
 	<span slot="header">%fa:R bell%%i18n:@notifications%</span>
 	<template slot="func"><button @click="fn">%fa:check%</button></template>
-	<mk-notifications @fetched="onFetched"/>
+
+	<main>
+		<mk-notifications @fetched="onFetched"/>
+	</main>
 </mk-ui>
 </template>
 
@@ -13,7 +16,6 @@ import Progress from '../../../common/scripts/loading';
 export default Vue.extend({
 	mounted() {
 		document.title = 'Misskey | %i18n:@notifications%';
-		document.documentElement.style.background = '#313a42';
 
 		Progress.start();
 	},
@@ -30,3 +32,20 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
+
+</style>

src/client/app/mobile/views/pages/profile-setting.vue

@@ -59,7 +59,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = 'Misskey | %i18n:@title%';
-		document.documentElement.style.background = '#313a42';
 	},
 	methods: {
 		setAvatar() {

src/client/app/mobile/views/pages/search.vue

@@ -39,7 +39,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = `%i18n:@search%: ${this.q} | Misskey`;
-		document.documentElement.style.background = '#313a42';
 
 		this.fetch();
 	},

src/client/app/mobile/views/pages/settings.vue

@@ -34,7 +34,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = 'Misskey | %i18n:@settings%';
-		document.documentElement.style.background = '#313a42';
 	},
 	methods: {
 		signout() {

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

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template>
-	<main v-if="!fetching">
+	<main v-if="!fetching" :data-darkmode="_darkmode_">
 		<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
 		<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 		<header>
@@ -45,9 +45,9 @@
 		</header>
 		<nav>
 			<div class="nav-container">
-				<a :data-is-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
+				<a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
-				<a :data-is-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
+				<a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
-				<a :data-is-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
+				<a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
 			</div>
 		</nav>
 		<div class="body">
@@ -88,9 +88,6 @@ export default Vue.extend({
 	created() {
 		this.fetch();
 	},
-	mounted() {
-		document.documentElement.style.background = '#313a42';
-	},
 	methods: {
 		fetch() {
 			Progress.start();
@@ -110,7 +107,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-main
+root(isDark)
 	> .is-suspended
 	> .is-remote
 		&.is-suspended
@@ -138,7 +135,7 @@ main
 
 		> .banner
 			padding-bottom 33.3%
-			background-color #1b1b1b
+			background-color isDark ? #0e0e0e : #cacaca
 			background-size cover
 			background-position center
 
@@ -165,13 +162,13 @@ main
 						left -2px
 						bottom -2px
 						width 100%
-						border 3px solid #313a42
+						border 3px solid isDark ? #191b22 : #ececed
 						border-radius 6px
 
 						@media (min-width 500px)
 							left -4px
 							bottom -4px
-							border 4px solid #313a42
+							border 4px solid isDark ? #191b22 : #ececed
 							border-radius 12px
 
 				> .mk-follow-button
@@ -185,14 +182,14 @@ main
 					margin 0
 					line-height 22px
 					font-size 20px
-					color #fff
+					color isDark ? #fff : #757c82
 
 				> .username
 					display inline-block
 					line-height 20px
 					font-size 16px
 					font-weight bold
-					color #657786
+					color isDark ? #657786 : #969ea5
 
 				> .followed
 					margin-left 8px
@@ -204,7 +201,7 @@ main
 
 			> .description
 				margin 8px 0
-				color #fff
+				color isDark ? #fff : #757c82
 
 			> .info
 				margin 8px 0
@@ -212,14 +209,14 @@ main
 				> p
 					display inline
 					margin 0 16px 0 0
-					color #a9b9c1
+					color isDark ? #a9b9c1 : #90989c
 
 					> i
 						margin-right 4px
 
 			> .status
 				> a
-					color #657786
+					color isDark ? #657786 : #818a92
 
 					&:not(:last-child)
 						margin-right 16px
@@ -227,7 +224,7 @@ main
 					> b
 						margin-right 4px
 						font-size 16px
-						color #fff
+						color isDark ? #fff : #787e86
 
 					> i
 						font-size 14px
@@ -235,9 +232,9 @@ main
 	> nav
 		position -webkit-sticky
 		position sticky
-		top 48px
+		top 47px
-		box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
+		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
-		background-color #313a42
+		background-color isDark ? #191b22 : #ececed
 		z-index 1
 
 		> .nav-container
@@ -253,18 +250,29 @@ main
 				line-height 52px
 				font-size 14px
 				text-decoration none
-				color #657786
+				color isDark ? #657786 : #9ca1a5
 				border-bottom solid 2px transparent
 
-				&[data-is-active]
+				&[data-active]
 					font-weight bold
 					color $theme-color
 					border-color $theme-color
 
 	> .body
+		max-width 680px
+		margin 0 auto
 		padding 8px
 
 		@media (min-width 500px)
 			padding 16px
 
+		@media (min-width 600px)
+			padding 32px
+
+main[data-darkmode]
+	root(true)
+
+main:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/mobile/views/pages/user/home.vue

@@ -64,11 +64,14 @@ export default Vue.extend({
 	> section
 		background #eee
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 4px 16px rgba(#000, 0.1)
 
 		&:not(:last-child)
 			margin-bottom 8px
 
+			@media (min-width 500px)
+				margin-bottom 16px
+
 		> h2
 			margin 0
 			padding 8px 10px

src/client/app/mobile/views/pages/welcome.vue

@@ -1,33 +1,35 @@
 <template>
 <div class="welcome">
-	<h1><b>Misskey</b>へようこそ</h1>
+	<div>
-	<p>Twitter風ミニブログSNS、Misskeyへようこそ。共有したいことを投稿したり、タイムラインでみんなの投稿を読むこともできます。<br><a href="/signup">アカウントを作成する</a></p>
+		<h1><b>Misskey</b>へようこそ</h1>
-	<div class="form">
+		<p>Twitter風ミニブログSNS、Misskeyへようこそ。共有したいことを投稿したり、タイムラインでみんなの投稿を読むこともできます。<br><a href="/signup">アカウントを作成する</a></p>
-		<p>%fa:lock% ログイン</p>
+		<div class="form">
-		<div>
+			<p>%fa:lock% ログイン</p>
-			<form @submit.prevent="onSubmit">
-				<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
-				<input v-model="password" type="password" placeholder="パスワード" required/>
-				<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
-				<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
-			</form>
 			<div>
-				<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
+				<form @submit.prevent="onSubmit">
+					<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
+					<input v-model="password" type="password" placeholder="パスワード" required/>
+					<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
+					<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
+				</form>
+				<div>
+					<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
+				</div>
 			</div>
 		</div>
+		<div class="tl">
+			<p>%fa:comments R% タイムラインを見てみる</p>
+			<mk-welcome-timeline/>
+		</div>
+		<div class="users">
+			<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${user.username}`">
+				<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+			</router-link>
+		</div>
+		<footer>
+			<small>{{ copyright }}</small>
+		</footer>
 	</div>
-	<div class="tl">
-		<p>%fa:comments R% タイムラインを見てみる</p>
-		<mk-welcome-timeline/>
-	</div>
-	<div class="users">
-		<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${user.username}`">
-			<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
-	</div>
-	<footer>
-		<small>{{ copyright }}</small>
-	</footer>
 </div>
 </template>
 
@@ -84,123 +86,120 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .welcome
-	padding 16px
+	background linear-gradient(to bottom, #1e1d65, #bd6659)
-	margin 0 auto
-	max-width 500px
 
-	h1
+	> div
-		margin 0
+		padding 16px
-		padding 8px
+		margin 0 auto
-		font-size 1.5em
+		max-width 500px
-		font-weight normal
-		color #cacac3
 
-		& + p
+		h1
-			margin 0 0 16px 0
-			padding 0 8px 0 8px
-			color #949fa9
-
-	.form
-		margin-bottom 16px
-		background #fff
-		border solid 1px rgba(0, 0, 0, 0.2)
-		border-radius 8px
-		overflow hidden
-
-		> p
 			margin 0
-			padding 12px 20px
+			padding 8px
-			color #555
+			font-size 1.5em
-			background #f5f5f5
+			font-weight normal
-			border-bottom solid 1px #ddd
+			color #cacac3
 
-		> div
+			& + p
+				margin 0 0 16px 0
+				padding 0 8px 0 8px
+				color #949fa9
 
-			> form
+		.form
-				padding 16px
+			margin-bottom 16px
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.2)
+			border-radius 8px
+			overflow hidden
+
+			> p
+				margin 0
+				padding 12px 20px
+				color #555
+				background #f5f5f5
 				border-bottom solid 1px #ddd
 
-				input
-					display block
-					padding 12px
-					margin 0 0 16px 0
-					width 100%
-					font-size 1em
-					color rgba(0, 0, 0, 0.7)
-					background #fff
-					outline none
-					border solid 1px #ddd
-					border-radius 4px
-
-				button
-					display block
-					width 100%
-					padding 10px
-					margin 0
-					color #333
-					font-size 1em
-					text-align center
-					text-decoration none
-					text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
-					background-image linear-gradient(#fafafa, #eaeaea)
-					border 1px solid #ddd
-					border-bottom-color #cecece
-					border-radius 4px
-
-					&:active
-						background-color #767676
-						background-image none
-						border-color #444
-						box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
-
 			> div
-				padding 16px
-				text-align center
 
-	> .tl
+				> form
-		background #fff
+					padding 16px
-		border solid 1px rgba(0, 0, 0, 0.2)
+					border-bottom solid 1px #ddd
-		border-radius 8px
-		overflow hidden
 
-		> p
+					input
-			margin 0
+						display block
-			padding 12px 20px
+						padding 12px
-			color #555
+						margin 0 0 16px 0
-			background #f5f5f5
+						width 100%
-			border-bottom solid 1px #ddd
+						font-size 1em
+						color rgba(0, 0, 0, 0.7)
+						background #fff
+						outline none
+						border solid 1px #ddd
+						border-radius 4px
 
-		> .mk-welcome-timeline
+					button
-			max-height 300px
+						display block
-			overflow auto
+						width 100%
+						padding 10px
+						margin 0
+						color #333
+						font-size 1em
+						text-align center
+						text-decoration none
+						text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
+						background-image linear-gradient(#fafafa, #eaeaea)
+						border 1px solid #ddd
+						border-bottom-color #cecece
+						border-radius 4px
 
-	> .users
+						&:active
-		margin 12px 0 0 0
+							background-color #767676
+							background-image none
+							border-color #444
+							box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
 
-		> *
+				> div
-			display inline-block
+					padding 16px
-			margin 4px
+					text-align center
+
+		> .tl
+			background #fff
+			border solid 1px rgba(0, 0, 0, 0.2)
+			border-radius 8px
+			overflow hidden
+
+			> p
+				margin 0
+				padding 12px 20px
+				color #555
+				background #f5f5f5
+				border-bottom solid 1px #ddd
+
+			> .mk-welcome-timeline
+				max-height 300px
+				overflow auto
+
+		> .users
+			margin 12px 0 0 0
 
 			> *
 				display inline-block
-				width 38px
+				margin 4px
-				height 38px
-				vertical-align top
-				border-radius 6px
 
-	> footer
+				> *
-		text-align center
+					display inline-block
-		color #fff
+					width 38px
+					height 38px
+					vertical-align top
+					border-radius 6px
 
-		> small
+		> footer
-			display block
+			text-align center
-			margin 16px 0 0 0
+			color #fff
-			opacity 0.7
+
+			> small
+				display block
+				margin 16px 0 0 0
+				opacity 0.7
 
 </style>
-
-<style lang="stylus">
-html
-body
-	background linear-gradient(to bottom, #1e1d65, #bd6659)
-</style>

src/config/types.ts

@@ -40,6 +40,12 @@ export type Source = {
 		site_key: string;
 		secret_key: string;
 	};
+
+	/**
+	 * ゴーストアカウントのID
+	 */
+	ghost?: string;
+
 	accesslog?: string;
 	twitter?: {
 		consumer_key: string;

src/models/note-reaction.ts

@@ -1,4 +1,5 @@
 import * as mongo from 'mongodb';
+import $ from 'cafy';
 import deepcopy = require('deepcopy');
 import db from '../db/mongodb';
 import Reaction from './note-reaction';
@@ -16,6 +17,18 @@ export interface INoteReaction {
 	reaction: string;
 }
 
+export const validateReaction = $().string().or([
+	'like',
+	'love',
+	'laugh',
+	'hmm',
+	'surprise',
+	'congrats',
+	'angry',
+	'confused',
+	'pudding'
+]);
+
 /**
  * NoteReactionを物理削除します
  */

src/models/sw-subscription.ts

@@ -38,4 +38,3 @@ export async function deleteSwSubscription(swSubscription: string | mongo.Object
 		_id: s._id
 	});
 }
-

src/models/user-list.ts

@@ -0,0 +1,67 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import db from '../db/mongodb';
+
+const UserList = db.get<IUserList>('userList');
+export default UserList;
+
+export interface IUserList {
+	_id: mongo.ObjectID;
+	createdAt: Date;
+	title: string;
+	userId: mongo.ObjectID;
+	userIds: mongo.ObjectID[];
+}
+
+/**
+ * UserListを物理削除します
+ */
+export async function deleteUserList(userList: string | mongo.ObjectID | IUserList) {
+	let u: IUserList;
+
+	// Populate
+	if (mongo.ObjectID.prototype.isPrototypeOf(userList)) {
+		u = await UserList.findOne({
+			_id: userList
+		});
+	} else if (typeof userList === 'string') {
+		u = await UserList.findOne({
+			_id: new mongo.ObjectID(userList)
+		});
+	} else {
+		u = userList as IUserList;
+	}
+
+	if (u == null) return;
+
+	// このUserListを削除
+	await UserList.remove({
+		_id: u._id
+	});
+}
+
+export const pack = (
+	userList: string | mongo.ObjectID | IUserList
+) => new Promise<any>(async (resolve, reject) => {
+	let _userList: any;
+
+	if (mongo.ObjectID.prototype.isPrototypeOf(userList)) {
+		_userList = await UserList.findOne({
+			_id: userList
+		});
+	} else if (typeof userList === 'string') {
+		_userList = await UserList.findOne({
+			_id: new mongo.ObjectID(userList)
+		});
+	} else {
+		_userList = deepcopy(userList);
+	}
+
+	if (!_userList) throw `invalid userList arg ${userList}`;
+
+	// Rename _id to id
+	_userList.id = _userList._id;
+	delete _userList._id;
+
+	resolve(_userList);
+});

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';
@@ -20,6 +21,7 @@ import FollowingLog, { deleteFollowingLog } from './following-log';
 import FollowedLog, { deleteFollowedLog } from './followed-log';
 import SwSubscription, { deleteSwSubscription } from './sw-subscription';
 import Notification, { deleteNotification } from './notification';
+import UserList, { deleteUserList } from './user-list';
 
 const User = db.get<IUser>('users');
 
@@ -35,7 +37,7 @@ export default User;
 type IUserBase = {
 	_id: mongo.ObjectID;
 	createdAt: Date;
-	deletedAt: Date;
+	deletedAt?: Date;
 	followersCount: number;
 	followingCount: number;
 	name?: string;
@@ -49,7 +51,6 @@ type IUserBase = {
 	description: string;
 	pinnedNoteId: mongo.ObjectID;
 	isSuspended: boolean;
-	keywords: string[];
 	host: string;
 };
 
@@ -79,7 +80,7 @@ export interface ILocalUser extends IUserBase {
 	isPro: boolean;
 	twoFactorSecret: string;
 	twoFactorEnabled: boolean;
-	twoFactorTempSecret: string;
+	twoFactorTempSecret?: string;
 	clientSettings: any;
 	settings: any;
 }
@@ -166,9 +167,9 @@ export async function deleteUser(user: string | mongo.ObjectID | IUser) {
 	).map(x => deleteAccessToken(x)));
 
 	// このユーザーのNoteをすべて削除
-	await Promise.all((
+	//await sequential((
-		await Note.find({ userId: u._id })
+	//	await Note.find({ userId: u._id })
-	).map(x => deleteNote(x)));
+	//).map(x => () => deleteNote(x)));
 
 	// このユーザーのNoteReactionをすべて削除
 	await Promise.all((
@@ -260,6 +261,20 @@ export async function deleteUser(user: string | mongo.ObjectID | IUser) {
 		await Notification.find({ notifierId: u._id })
 	).map(x => deleteNotification(x)));
 
+	// このユーザーのUserListをすべて削除
+	await Promise.all((
+		await UserList.find({ userId: u._id })
+	).map(x => deleteUserList(x)));
+
+	// このユーザーが入っているすべてのUserListからこのユーザーを削除
+	await Promise.all((
+		await UserList.find({ userIds: u._id })
+	).map(x =>
+		UserList.update({ _id: x._id }, {
+			$pull: { userIds: u._id }
+		})
+	));
+
 	// このユーザーを削除
 	await User.remove({
 		_id: u._id
@@ -443,3 +458,7 @@ function img(url) {
 	};
 }
 */
+
+export function getGhost(): Promise<ILocalUser> {
+	return User.findOne({ _id: new mongo.ObjectId(config.ghost) });
+}

src/publishers/stream.ts

@@ -25,6 +25,10 @@ class MisskeyEvent {
 		this.publish(`note-stream:${noteId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
+	public publishUserListStream(listId: ID, type: string, value?: any): void {
+		this.publish(`user-list-stream:${listId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
 	public publishMessagingStream(userId: ID, otherpartyId: ID, type: string, value?: any): void {
 		this.publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
 	}
@@ -69,6 +73,7 @@ export default ev.publishUserStream.bind(ev);
 export const publishLocalTimelineStream = ev.publishLocalTimelineStream.bind(ev);
 export const publishGlobalTimelineStream = ev.publishGlobalTimelineStream.bind(ev);
 export const publishDriveStream = ev.publishDriveStream.bind(ev);
+export const publishUserListStream = ev.publishUserListStream.bind(ev);
 export const publishNoteStream = ev.publishNoteStream.bind(ev);
 export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
 export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(ev);

src/remote/activitypub/kernel/like.ts

@@ -3,6 +3,7 @@ import Note from '../../../models/note';
 import { IRemoteUser } from '../../../models/user';
 import { ILike } from '../type';
 import create from '../../../services/note/reaction/create';
+import { validateReaction } from '../../../models/note-reaction';
 
 export default async (actor: IRemoteUser, activity: ILike) => {
 	const id = typeof activity.object == 'string' ? activity.object : activity.object.id;
@@ -17,5 +18,14 @@ export default async (actor: IRemoteUser, activity: ILike) => {
 		throw new Error();
 	}
 
-	await create(actor, note, 'pudding');
+	let reaction = 'pudding';
+
+	// 他のMisskeyインスタンスからのリアクション
+	if (activity._misskey_reaction) {
+		if (validateReaction.ok(activity._misskey_reaction)) {
+			reaction = activity._misskey_reaction;
+		}
+	}
+
+	await create(actor, note, reaction);
 };

src/remote/activitypub/renderer/like.ts

@@ -1,8 +1,9 @@
 import config from '../../../config';
 import { ILocalUser } from '../../../models/user';
 
-export default (user: ILocalUser, note) => ({
+export default (user: ILocalUser, note, reaction: string) => ({
 	type: 'Like',
 	actor: `${config.url}/users/${user._id}`,
-	object: note.uri ? note.uri : `${config.url}/notes/${note._id}`
+	object: note.uri ? note.uri : `${config.url}/notes/${note._id}`,
+	_misskey_reaction: reaction
 });

src/remote/activitypub/renderer/person.ts

@@ -10,6 +10,7 @@ export default user => {
 		id,
 		inbox: `${id}/inbox`,
 		outbox: `${id}/outbox`,
+		sharedInbox: `${config.url}/inbox`,
 		url: `${config.url}/@${user.username}`,
 		preferredUsername: user.username,
 		name: user.name,

src/remote/activitypub/type.ts

@@ -82,6 +82,7 @@ export interface IAccept extends IActivity {
 
 export interface ILike extends IActivity {
 	type: 'Like';
+	_misskey_reaction: string;
 }
 
 export interface IAnnounce extends IActivity {

src/server/activitypub.ts

@@ -1,4 +1,5 @@
 import * as mongo from 'mongodb';
+import * as Koa from 'koa';
 import * as Router from 'koa-router';
 const json = require('koa-json-body');
 const httpSignature = require('http-signature');
@@ -19,8 +20,7 @@ const router = new Router();
 
 //#region Routing
 
-// inbox
+function inbox(ctx: Koa.Context) {
-router.post('/users/:user/inbox', json(), ctx => {
 	let signature;
 
 	ctx.req.headers.authorization = 'Signature ' + ctx.req.headers.signature;
@@ -39,7 +39,11 @@ router.post('/users/:user/inbox', json(), ctx => {
 	}).save();
 
 	ctx.status = 202;
-});
+}
+
+// inbox
+router.post('/inbox', json(), inbox);
+router.post('/users/:user/inbox', json(), inbox);
 
 // note
 router.get('/notes/:note', async (ctx, next) => {

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,

src/server/api/endpoints/aggregation/posts.ts

@@ -6,13 +6,10 @@ import Note from '../../../../models/note';
 
 /**
  * Aggregate notes
- *
- * @param {any} params
- * @return {Promise<any>}
  */
 module.exports = params => new Promise(async (res, rej) => {
 	// Get 'limit' parameter
-	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
+	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).get();
 	if (limitErr) return rej('invalid limit param');
 
 	const datas = await Note

src/server/api/endpoints/aggregation/users.ts

@@ -6,13 +6,10 @@ import User from '../../../../models/user';
 
 /**
  * Aggregate users
- *
- * @param {any} params
- * @return {Promise<any>}
  */
 module.exports = params => new Promise(async (res, rej) => {
 	// Get 'limit' parameter
-	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
+	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).get();
 	if (limitErr) return rej('invalid limit param');
 
 	const users = await User

src/server/api/endpoints/aggregation/users/activity.ts

@@ -1,7 +1,7 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import User from '../../../../../models/user';
 import Note from '../../../../../models/note';
 
@@ -9,17 +9,14 @@ import Note from '../../../../../models/note';
 
 /**
  * Aggregate activity of a user
- *
- * @param {any} params
- * @return {Promise<any>}
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'limit' parameter
-	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
+	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).get();
 	if (limitErr) return rej('invalid limit param');
 
 	// Get 'userId' parameter
-	const [userId, userIdErr] = $(params.userId).id().$;
+	const [userId, userIdErr] = $(params.userId).type(ID).get();
 	if (userIdErr) return rej('invalid userId param');
 
 	// Lookup user

src/server/api/endpoints/aggregation/users/followers.ts

@@ -1,19 +1,16 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import User from '../../../../../models/user';
 import FollowedLog from '../../../../../models/followed-log';
 
 /**
  * Aggregate followers of a user
- *
- * @param {any} params
- * @return {Promise<any>}
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
-	const [userId, userIdErr] = $(params.userId).id().$;
+	const [userId, userIdErr] = $(params.userId).type(ID).get();
 	if (userIdErr) return rej('invalid userId param');
 
 	// Lookup user

src/server/api/endpoints/aggregation/users/following.ts

@@ -1,19 +1,16 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import User from '../../../../../models/user';
 import FollowingLog from '../../../../../models/following-log';
 
 /**
  * Aggregate following of a user
- *
- * @param {any} params
- * @return {Promise<any>}
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
-	const [userId, userIdErr] = $(params.userId).id().$;
+	const [userId, userIdErr] = $(params.userId).type(ID).get();
 	if (userIdErr) return rej('invalid userId param');
 
 	// Lookup user

src/server/api/endpoints/aggregation/users/post.ts

@@ -1,19 +1,16 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import User from '../../../../../models/user';
 import Note from '../../../../../models/note';
 
 /**
  * Aggregate note of a user
- *
- * @param {any} params
- * @return {Promise<any>}
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
-	const [userId, userIdErr] = $(params.userId).id().$;
+	const [userId, userIdErr] = $(params.userId).type(ID).get();
 	if (userIdErr) return rej('invalid userId param');
 
 	// Lookup user

src/server/api/endpoints/aggregation/users/reaction.ts

@@ -1,7 +1,7 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import User from '../../../../../models/user';
 import Reaction from '../../../../../models/note-reaction';
 
@@ -13,7 +13,7 @@ import Reaction from '../../../../../models/note-reaction';
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
-	const [userId, userIdErr] = $(params.userId).id().$;
+	const [userId, userIdErr] = $(params.userId).type(ID).get();
 	if (userIdErr) return rej('invalid userId param');
 
 	// Lookup user

src/server/api/endpoints/app/create.ts

@@ -67,24 +67,24 @@ import App, { isValidNameId, pack } from '../../../../models/app';
  */
 module.exports = async (params, user) => new Promise(async (res, rej) => {
 	// Get 'nameId' parameter
-	const [nameId, nameIdErr] = $(params.nameId).string().pipe(isValidNameId).$;
+	const [nameId, nameIdErr] = $(params.nameId).string().pipe(isValidNameId).get();
 	if (nameIdErr) return rej('invalid nameId param');
 
 	// Get 'name' parameter
-	const [name, nameErr] = $(params.name).string().$;
+	const [name, nameErr] = $(params.name).string().get();
 	if (nameErr) return rej('invalid name param');
 
 	// Get 'description' parameter
-	const [description, descriptionErr] = $(params.description).string().$;
+	const [description, descriptionErr] = $(params.description).string().get();
 	if (descriptionErr) return rej('invalid description param');
 
 	// Get 'permission' parameter
-	const [permission, permissionErr] = $(params.permission).array('string').unique().$;
+	const [permission, permissionErr] = $(params.permission).array($().string()).unique().get();
 	if (permissionErr) return rej('invalid permission param');
 
 	// Get 'callbackUrl' parameter
 	// TODO: Check it is valid url
-	const [callbackUrl = null, callbackUrlErr] = $(params.callbackUrl).optional.nullable.string().$;
+	const [callbackUrl = null, callbackUrlErr] = $(params.callbackUrl).optional.nullable.string().get();
 	if (callbackUrlErr) return rej('invalid callbackUrl param');
 
 	// Generate secret

src/server/api/endpoints/app/name_id/available.ts

@@ -42,7 +42,7 @@ import { isValidNameId } from '../../../../../models/app';
  */
 module.exports = async (params) => new Promise(async (res, rej) => {
 	// Get 'nameId' parameter
-	const [nameId, nameIdErr] = $(params.nameId).string().pipe(isValidNameId).$;
+	const [nameId, nameIdErr] = $(params.nameId).string().pipe(isValidNameId).get();
 	if (nameIdErr) return rej('invalid nameId param');
 
 	// Get exist

src/server/api/endpoints/app/show.ts

@@ -1,7 +1,7 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import App, { pack } from '../../../../models/app';
 
 /**
@@ -41,11 +41,11 @@ module.exports = (params, user, app) => new Promise(async (res, rej) => {
 	const isSecure = user != null && app == null;
 
 	// Get 'appId' parameter
-	const [appId, appIdErr] = $(params.appId).optional.id().$;
+	const [appId, appIdErr] = $(params.appId).optional.type(ID).get();
 	if (appIdErr) return rej('invalid appId param');
 
 	// Get 'nameId' parameter
-	const [nameId, nameIdErr] = $(params.nameId).optional.string().$;
+	const [nameId, nameIdErr] = $(params.nameId).optional.string().get();
 	if (nameIdErr) return rej('invalid nameId param');
 
 	if (appId === undefined && nameId === undefined) {

src/server/api/endpoints/auth/accept.ts

@@ -40,7 +40,7 @@ import AccessToken from '../../../../models/access-token';
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'token' parameter
-	const [token, tokenErr] = $(params.token).string().$;
+	const [token, tokenErr] = $(params.token).string().get();
 	if (tokenErr) return rej('invalid token param');
 
 	// Fetch token

src/server/api/endpoints/auth/session/generate.ts

@@ -46,7 +46,7 @@ import config from '../../../../../config';
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'appSecret' parameter
-	const [appSecret, appSecretErr] = $(params.appSecret).string().$;
+	const [appSecret, appSecretErr] = $(params.appSecret).string().get();
 	if (appSecretErr) return rej('invalid appSecret param');
 
 	// Lookup app

src/server/api/endpoints/auth/session/show.ts

@@ -53,7 +53,7 @@ import AuthSess, { pack } from '../../../../../models/auth-session';
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'token' parameter
-	const [token, tokenErr] = $(params.token).string().$;
+	const [token, tokenErr] = $(params.token).string().get();
 	if (tokenErr) return rej('invalid token param');
 
 	// Lookup session

src/server/api/endpoints/auth/session/userkey.ts

@@ -51,7 +51,7 @@ import { pack } from '../../../../../models/user';
  */
 module.exports = (params) => new Promise(async (res, rej) => {
 	// Get 'appSecret' parameter
-	const [appSecret, appSecretErr] = $(params.appSecret).string().$;
+	const [appSecret, appSecretErr] = $(params.appSecret).string().get();
 	if (appSecretErr) return rej('invalid appSecret param');
 
 	// Lookup app
@@ -64,7 +64,7 @@ module.exports = (params) => new Promise(async (res, rej) => {
 	}
 
 	// Get 'token' parameter
-	const [token, tokenErr] = $(params.token).string().$;
+	const [token, tokenErr] = $(params.token).string().get();
 	if (tokenErr) return rej('invalid token param');
 
 	// Fetch token

src/server/api/endpoints/channels.ts

@@ -1,7 +1,7 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../cafy-id';
 import Channel, { pack } from '../../../models/channel';
 
 /**
@@ -13,15 +13,15 @@ import Channel, { pack } from '../../../models/channel';
  */
 module.exports = (params, me) => new Promise(async (res, rej) => {
 	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).get();
 	if (limitErr) return rej('invalid limit param');
 
 	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).get();
 	if (sinceIdErr) return rej('invalid sinceId param');
 
 	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).get();
 	if (untilIdErr) return rej('invalid untilId param');
 
 	// Check if both of sinceId and untilId is specified

src/server/api/endpoints/channels/create.ts

@@ -8,14 +8,10 @@ import { pack } from '../../../../models/channel';
 
 /**
  * Create a channel
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = async (params, user) => new Promise(async (res, rej) => {
 	// Get 'title' parameter
-	const [title, titleErr] = $(params.title).string().range(1, 100).$;
+	const [title, titleErr] = $(params.title).string().range(1, 100).get();
 	if (titleErr) return rej('invalid title param');
 
 	// Create a channel

src/server/api/endpoints/channels/notes.ts

@@ -1,28 +1,24 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import { default as Channel, IChannel } from '../../../../models/channel';
 import Note, { pack } from '../../../../models/note';
 
 /**
  * Show a notes of a channel
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'limit' parameter
-	const [limit = 1000, limitErr] = $(params.limit).optional.number().range(1, 1000).$;
+	const [limit = 1000, limitErr] = $(params.limit).optional.number().range(1, 1000).get();
 	if (limitErr) return rej('invalid limit param');
 
 	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).get();
 	if (sinceIdErr) return rej('invalid sinceId param');
 
 	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).get();
 	if (untilIdErr) return rej('invalid untilId param');
 
 	// Check if both of sinceId and untilId is specified
@@ -31,7 +27,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}
 
 	// Get 'channelId' parameter
-	const [channelId, channelIdErr] = $(params.channelId).id().$;
+	const [channelId, channelIdErr] = $(params.channelId).type(ID).get();
 	if (channelIdErr) return rej('invalid channelId param');
 
 	// Fetch channel

src/server/api/endpoints/channels/show.ts

@@ -1,19 +1,15 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import Channel, { IChannel, pack } from '../../../../models/channel';
 
 /**
  * Show a channel
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'channelId' parameter
-	const [channelId, channelIdErr] = $(params.channelId).id().$;
+	const [channelId, channelIdErr] = $(params.channelId).type(ID).get();
 	if (channelIdErr) return rej('invalid channelId param');
 
 	// Fetch channel

src/server/api/endpoints/channels/unwatch.ts

@@ -1,20 +1,16 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import Channel from '../../../../models/channel';
 import Watching from '../../../../models/channel-watching';
 
 /**
  * Unwatch a channel
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'channelId' parameter
-	const [channelId, channelIdErr] = $(params.channelId).id().$;
+	const [channelId, channelIdErr] = $(params.channelId).type(ID).get();
 	if (channelIdErr) return rej('invalid channelId param');
 
 	//#region Fetch channel

src/server/api/endpoints/channels/watch.ts

@@ -1,20 +1,16 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import Channel from '../../../../models/channel';
 import Watching from '../../../../models/channel-watching';
 
 /**
  * Watch a channel
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'channelId' parameter
-	const [channelId, channelIdErr] = $(params.channelId).id().$;
+	const [channelId, channelIdErr] = $(params.channelId).type(ID).get();
 	if (channelIdErr) return rej('invalid channelId param');
 
 	//#region Fetch channel

src/server/api/endpoints/drive/files.ts

@@ -1,28 +1,23 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import DriveFile, { pack } from '../../../../models/drive-file';
 
 /**
  * Get drive files
- *
- * @param {any} params
- * @param {any} user
- * @param {any} app
- * @return {Promise<any>}
  */
 module.exports = async (params, user, app) => {
 	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).get();
 	if (limitErr) throw 'invalid limit param';
 
 	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).get();
 	if (sinceIdErr) throw 'invalid sinceId param';
 
 	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).get();
 	if (untilIdErr) throw 'invalid untilId param';
 
 	// Check if both of sinceId and untilId is specified
@@ -31,11 +26,11 @@ module.exports = async (params, user, app) => {
 	}
 
 	// Get 'folderId' parameter
-	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.id().$;
+	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.type(ID).get();
 	if (folderIdErr) throw 'invalid folderId param';
 
 	// Get 'type' parameter
-	const [type, typeErr] = $(params.type).optional.string().match(/^[a-zA-Z\/\-\*]+$/).$;
+	const [type, typeErr] = $(params.type).optional.string().match(/^[a-zA-Z\/\-\*]+$/).get();
 	if (typeErr) throw 'invalid type param';
 
 	// Construct query

src/server/api/endpoints/drive/files/create.ts

@@ -1,17 +1,12 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import { validateFileName, pack } from '../../../../../models/drive-file';
 import create from '../../../../../services/drive/add-file';
 
 /**
  * Create a file
- *
- * @param {any} file
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = async (file, params, user): Promise<any> => {
 	if (file == null) {
@@ -34,7 +29,7 @@ module.exports = async (file, params, user): Promise<any> => {
 	}
 
 	// Get 'folderId' parameter
-	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.id().$;
+	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.type(ID).get();
 	if (folderIdErr) throw 'invalid folderId param';
 
 	try {

src/server/api/endpoints/drive/files/find.ts

@@ -1,23 +1,19 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import DriveFile, { pack } from '../../../../../models/drive-file';
 
 /**
  * Find a file(s)
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'name' parameter
-	const [name, nameErr] = $(params.name).string().$;
+	const [name, nameErr] = $(params.name).string().get();
 	if (nameErr) return rej('invalid name param');
 
 	// Get 'folderId' parameter
-	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.id().$;
+	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.type(ID).get();
 	if (folderIdErr) return rej('invalid folderId param');
 
 	// Issue query

src/server/api/endpoints/drive/files/show.ts

@@ -1,19 +1,15 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import DriveFile, { pack } from '../../../../../models/drive-file';
 
 /**
  * Show a file
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = async (params, user) => {
 	// Get 'fileId' parameter
-	const [fileId, fileIdErr] = $(params.fileId).id().$;
+	const [fileId, fileIdErr] = $(params.fileId).type(ID).get();
 	if (fileIdErr) throw 'invalid fileId param';
 
 	// Fetch file

src/server/api/endpoints/drive/files/update.ts

@@ -1,21 +1,17 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import DriveFolder from '../../../../../models/drive-folder';
 import DriveFile, { validateFileName, pack } from '../../../../../models/drive-file';
 import { publishDriveStream } from '../../../../../publishers/stream';
 
 /**
  * Update a file
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'fileId' parameter
-	const [fileId, fileIdErr] = $(params.fileId).id().$;
+	const [fileId, fileIdErr] = $(params.fileId).type(ID).get();
 	if (fileIdErr) return rej('invalid fileId param');
 
 	// Fetch file
@@ -30,12 +26,12 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}
 
 	// Get 'name' parameter
-	const [name, nameErr] = $(params.name).optional.string().pipe(validateFileName).$;
+	const [name, nameErr] = $(params.name).optional.string().pipe(validateFileName).get();
 	if (nameErr) return rej('invalid name param');
 	if (name) file.filename = name;
 
 	// Get 'folderId' parameter
-	const [folderId, folderIdErr] = $(params.folderId).optional.nullable.id().$;
+	const [folderId, folderIdErr] = $(params.folderId).optional.nullable.type(ID).get();
 	if (folderIdErr) return rej('invalid folderId param');
 
 	if (folderId !== undefined) {

src/server/api/endpoints/drive/files/upload_from_url.ts

@@ -1,7 +1,7 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import { pack } from '../../../../../models/drive-file';
 import uploadFromUrl from '../../../../../services/drive/upload-from-url';
 
@@ -11,11 +11,11 @@ import uploadFromUrl from '../../../../../services/drive/upload-from-url';
 module.exports = async (params, user): Promise<any> => {
 	// Get 'url' parameter
 	// TODO: Validate this url
-	const [url, urlErr] = $(params.url).string().$;
+	const [url, urlErr] = $(params.url).string().get();
 	if (urlErr) throw 'invalid url param';
 
 	// Get 'folderId' parameter
-	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.id().$;
+	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.type(ID).get();
 	if (folderIdErr) throw 'invalid folderId param';
 
 	return pack(await uploadFromUrl(url, user, folderId));

src/server/api/endpoints/drive/folders.ts

@@ -1,28 +1,23 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../cafy-id';
 import DriveFolder, { pack } from '../../../../models/drive-folder';
 
 /**
  * Get drive folders
- *
- * @param {any} params
- * @param {any} user
- * @param {any} app
- * @return {Promise<any>}
  */
 module.exports = (params, user, app) => new Promise(async (res, rej) => {
 	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).get();
 	if (limitErr) return rej('invalid limit param');
 
 	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).get();
 	if (sinceIdErr) return rej('invalid sinceId param');
 
 	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).get();
 	if (untilIdErr) return rej('invalid untilId param');
 
 	// Check if both of sinceId and untilId is specified
@@ -31,7 +26,7 @@ module.exports = (params, user, app) => new Promise(async (res, rej) => {
 	}
 
 	// Get 'folderId' parameter
-	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.id().$;
+	const [folderId = null, folderIdErr] = $(params.folderId).optional.nullable.type(ID).get();
 	if (folderIdErr) return rej('invalid folderId param');
 
 	// Construct query

src/server/api/endpoints/drive/folders/create.ts

@@ -1,24 +1,20 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import DriveFolder, { isValidFolderName, pack } from '../../../../../models/drive-folder';
 import { publishDriveStream } from '../../../../../publishers/stream';
 
 /**
  * Create drive folder
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'name' parameter
-	const [name = '無題のフォルダー', nameErr] = $(params.name).optional.string().pipe(isValidFolderName).$;
+	const [name = '無題のフォルダー', nameErr] = $(params.name).optional.string().pipe(isValidFolderName).get();
 	if (nameErr) return rej('invalid name param');
 
 	// Get 'parentId' parameter
-	const [parentId = null, parentIdErr] = $(params.parentId).optional.nullable.id().$;
+	const [parentId = null, parentIdErr] = $(params.parentId).optional.nullable.type(ID).get();
 	if (parentIdErr) return rej('invalid parentId param');
 
 	// If the parent folder is specified

src/server/api/endpoints/drive/folders/find.ts

@@ -1,23 +1,19 @@
 /**
  * Module dependencies
  */
-import $ from 'cafy';
+import $ from 'cafy'; import ID from '../../../../../cafy-id';
 import DriveFolder, { pack } from '../../../../../models/drive-folder';
 
 /**
  * Find a folder(s)
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
  */
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'name' parameter
-	const [name, nameErr] = $(params.name).string().$;
+	const [name, nameErr] = $(params.name).string().get();
 	if (nameErr) return rej('invalid name param');
 
 	// Get 'parentId' parameter
-	const [parentId = null, parentIdErr] = $(params.parentId).optional.nullable.id().$;
+	const [parentId = null, parentIdErr] = $(params.parentId).optional.nullable.type(ID).get();
 	if (parentIdErr) return rej('invalid parentId param');
 
 	// Issue query