Merge pull request #1550 from syuilo/user-list

User list

.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

@@ -44,9 +44,9 @@ If you want to translate Misskey, please see [Translation guide](./docs/translat
 
 :mortar_board: Notable contributors
 ----------------------------------------------------------------
-| ![syuilo][syuilo-icon] | ![Morisawa Aya][ayamorisawa-icon] | ![otofune][otofune-icon] | ![akihikodaki][akihikodaki-icon] | ![rinsuki][rinsuki-icon] |
+| ![syuilo][syuilo-icon] | ![Morisawa Aya][ayamorisawa-icon] | ![otofune][otofune-icon] | ![akihikodaki][akihikodaki-icon] | ![tamaina][tamaina-icon] | ![rinsuki][rinsuki-icon] |
-|:-:|:-:|:-:|:-:|:-:|
+|:-:|:-:|:-:|:-:|:-:|:-:|
-| [syuilo][syuilo-link]<br>Owner | [Aya Morisawa][ayamorisawa-link]<br>Collaborator | [otofune][otofune-link]<br>Collaborator | [akihikodaki][akihikodaki-link] | [rinsuki][rinsuki-link] |
+| [syuilo][syuilo-link]<br>Owner | [Aya Morisawa][ayamorisawa-link]<br>Collaborator | [otofune][otofune-link]<br>Collaborator | [akihikodaki][akihikodaki-link] | [tamaina][tamaina-link] | [rinsuki][rinsuki-link] |
 
 [List of all contributors](https://github.com/syuilo/misskey/graphs/contributors)
 
@@ -92,6 +92,8 @@ Misskey is an open-source software licensed under [GNU AGPLv3](LICENSE).
 [akihikodaki-icon]: https://avatars2.githubusercontent.com/u/17036990?s=70&v=4
 [rinsuki-link]:     https://github.com/rinsuki
 [rinsuki-icon]:     https://avatars0.githubusercontent.com/u/6533808?s=70&v=4
+[tamaina-link]:     https://github.com/tamaina
+[tamaina-icon]:     https://avatars1.githubusercontent.com/u/7973572?s=70&v=4
 
 [mirro-san-link]:   https://github.com/mirro-san
 [mirro-san-icon]:   https://avatars1.githubusercontent.com/u/17948612?s=70&v=4

cli/init.js

@@ -140,8 +140,8 @@ inquirer.prompt(form).then(as => {
 			pass: as['es_pass'] || null
 		},
 		recaptcha: {
-			siteKey: as['recaptcha_site'],
+			site_key: as['recaptcha_site'],
-			secretKey: as['recaptcha_secret']
+			secret_key: as['recaptcha_secret']
 		}
 	};
 

cli/suspend.js

@@ -0,0 +1,18 @@
+const mongo = require('mongodb');
+const User = require('../built/models/user').default;
+
+const args = process.argv.slice(2);
+
+const userId = new mongo.ObjectID(args[0]);
+
+console.log(`Suspending ${userId}...`);
+
+User.update({ _id: userId }, {
+	$set: {
+		isSuspended: true
+	}
+}).then(() => {
+	console.log(`Suspended ${userId}`);
+}, e => {
+	console.error(e);
+});

docs/manage.ja.md

@@ -0,0 +1,13 @@
+# 運営ガイド
+
+## ジョブキューの状態を調べる
+Misskeyのディレクトリで:
+``` shell
+node_modules/kue/bin/kue-dashboard -p 3050
+```
+ポート3050にアクセスするとUIが表示されます
+
+## ユーザーを凍結する
+``` shell
+node cli/suspend (ユーザーID)
+```

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

@@ -98,7 +98,9 @@ common/views/components/nav.vue:
   feedback: "Feedback"
 
 common/views/components/note-menu.vue:
+  favorite: "Favorite this note"
   pin: "Pin to profile page"
+  remote: "Show on origin"
 
 common/views/components/poll.vue:
   vote-to: "Vote for '{}'"
@@ -367,9 +369,12 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
+  favorites: "Favorites"
+  lists: "Lists"
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"
+  dark: "Fall in dark"
 
 desktop/views/components/ui.header.nav.vue:
   home: "Home"
@@ -406,6 +411,7 @@ desktop/views/pages/user/user.friends.vue:
   no-users: "No users"
 
 desktop/views/pages/user/user.header.vue:
+  is-suspended: "This account has been suspended."
   is-remote: "This user is a remote user, so the information is not accurate. "
   view-remote: "See accurate information"
 
@@ -594,6 +600,7 @@ mobile/views/pages/user.vue:
   overview: "Overview"
   timeline: "Timeline"
   media: "Media"
+  is-suspended: "This account has been suspended."
   is-remote: "This user is a remote user, so the information is not accurate. "
   view-remote: "See accurate information"
 

locales/fr.yml

@@ -98,7 +98,9 @@ common/views/components/nav.vue:
   feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
+  favorite: "Favorite this note"
   pin: "Épingler sur votre profile"
+  remote: "投稿元で見る"
 
 common/views/components/poll.vue:
   vote-to: "Voter pour '{}'"
@@ -367,9 +369,12 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
+  favorites: "Favorites"
+  lists: "リスト"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"
+  dark: "Fall in dark"
 
 desktop/views/components/ui.header.nav.vue:
   home: "Accueil"
@@ -406,6 +411,7 @@ desktop/views/pages/user/user.friends.vue:
   no-users: "Pas d'utilisateurs"
 
 desktop/views/pages/user/user.header.vue:
+  is-suspended: "This account has been suspended."
   is-remote: "Cet utilisateur n'est pas un utilisateur de Misskey. Certaines informations peuvent être erronées "
   view-remote: "Voir les informations détaillées"
 
@@ -594,6 +600,7 @@ mobile/views/pages/user.vue:
   overview: "Aperçu"
   timeline: "Fil d'actualité"
   media: "Media"
+  is-suspended: "This account has been suspended."
   is-remote: "Cet utilisateur n'est pas un utilisateur de Misskey. Certaines informations peuvent être erronées "
   view-remote: "Voir les informations détaillées"
 

locales/ja.yml

@@ -98,7 +98,9 @@ common/views/components/nav.vue:
   feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
+  favorite: "お気に入り"
   pin: "ピン留め"
+  remote: "投稿元で見る"
 
 common/views/components/poll.vue:
   vote-to: "「{}」に投票する"
@@ -367,9 +369,12 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
+  favorites: "お気に入り"
+  lists: "リスト"
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"
+  dark: "闇に飲まれる"
 
 desktop/views/components/ui.header.nav.vue:
   home: "ホーム"
@@ -406,7 +411,8 @@ desktop/views/pages/user/user.friends.vue:
   no-users: "よく話すユーザーはいません"
 
 desktop/views/pages/user/user.header.vue:
-  is-remote: "このユーザーはリモートユーザーのため情報が正確ではありません。"
+  is-suspended: "このユーザーは凍結されています。"
+  is-remote: "このユーザーはリモートユーザーです。"
   view-remote: "正確な情報を見る"
 
 desktop/views/pages/user/user.home.vue:
@@ -594,7 +600,8 @@ mobile/views/pages/user.vue:
   overview: "概要"
   timeline: "タイムライン"
   media: "メディア"
-  is-remote: "このユーザーはリモートユーザーのため情報が正確ではありません。"
+  is-suspended: "このユーザーは凍結されています。"
+  is-remote: "このユーザーはリモートユーザーです。"
   view-remote: "正確な情報を見る"
 
 mobile/views/pages/user/home.vue:

package.json

@@ -1,12 +1,9 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "0.0.5018",
+	"version": "1.0.0",
+	"clientVersion": "1.0.0",
 	"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": {
@@ -56,6 +53,7 @@
 		"@types/koa-bodyparser": "4.2.0",
 		"@types/koa-compress": "^2.0.8",
 		"@types/koa-favicon": "2.0.19",
+		"@types/koa-logger": "^3.1.0",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
 		"@types/koa-router": "7.0.27",
@@ -90,7 +88,7 @@
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"bootstrap-vue": "2.0.0-rc.6",
-		"cafy": "3.2.1",
+		"cafy": "6.0.0",
 		"chai": "4.1.2",
 		"chai-http": "4.0.0",
 		"chalk": "2.4.0",
@@ -141,10 +139,12 @@
 		"koa-compress": "3.0.0",
 		"koa-favicon": "2.0.1",
 		"koa-json-body": "^5.3.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",
@@ -206,6 +206,7 @@
 		"vue-router": "3.0.1",
 		"vue-template-compiler": "2.5.16",
 		"vuedraggable": "2.16.0",
+		"vuex": "^3.0.1",
 		"web-push": "3.3.0",
 		"webfinger.js": "2.6.6",
 		"webpack": "4.6.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

@@ -11,14 +11,12 @@
 
 'use strict';
 
-// Chromeで確認したことなのですが、constやletを用いたとしても
+(function() {
-// グローバルなスコープで定数/変数を定義するとwindowのプロパティ
+	// キャッシュ削除要求があれば従う
-// としてそれがアクセスできるようになる訳ではありませんが、普通に
+	if (localStorage.getItem('shouldFlush') == 'true') {
-// コンソールから定数/変数名を入力するとアクセスできてしまいます。
+		refresh();
-// ブロック内に入れてスコープを非グローバル化するとそれが防げます
+		return;
-// (Chrome以外のブラウザでは検証していません)
+	}
-{
-	if (localStorage.getItem('shouldFlush') == 'true') refresh();
 
 	// Get the current url information
 	const url = new URL(location.href);
@@ -62,6 +60,11 @@
 		app = isMobile ? 'mobile' : 'desktop';
 	}
 
+	// Dark/Light
+	if (localStorage.getItem('darkmode') == 'true') {
+		document.documentElement.setAttribute('data-darkmode', 'true');
+	}
+
 	// Script version
 	const ver = localStorage.getItem('v') || VERSION;
 
@@ -72,11 +75,16 @@
 	const raw = (localStorage.getItem('useRawScript') == 'true' && isDebug)
 		|| ENV != 'production';
 
+	// Get salt query
+	const salt = localStorage.getItem('salt')
+		? '?salt=' + localStorage.getItem('salt')
+		: '';
+
 	// Load an app script
 	// Note: 'async' make it possible to load the script asyncly.
 	//       'defer' make it possible to run the script when the dom loaded.
 	const script = document.createElement('script');
-	script.setAttribute('src', `/assets/${app}.${ver}.${lang}.${raw ? 'raw' : 'min'}.js`);
+	script.setAttribute('src', `/assets/${app}.${ver}.${lang}.${raw ? 'raw' : 'min'}.js${salt}`);
 	script.setAttribute('async', 'true');
 	script.setAttribute('defer', 'true');
 	head.appendChild(script);
@@ -97,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の新しいバージョンがあります。ページを再度読み込みします。' +
@@ -112,6 +120,9 @@
 	function refresh() {
 		localStorage.setItem('shouldFlush', 'false');
 
+		// Random
+		localStorage.setItem('salt', Math.random().toString());
+
 		// Clear cache (serive worker)
 		try {
 			navigator.serviceWorker.controller.postMessage('clear');
@@ -126,4 +137,4 @@
 		// Force reload
 		location.reload(true);
 	}
-}
+})();

src/client/app/common/mios.ts

@@ -21,7 +21,9 @@ const defaultSettings = {
 	showMaps: true,
 	showPostFormOnTopOfTl: false,
 	gradientWindowHeader: false,
-	showReplyTarget: true
+	showReplyTarget: true,
+	showMyRenotes: true,
+	showRenotedMyNotes: true
 };
 
 //#region api requests
@@ -86,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/google.vue

@@ -0,0 +1,67 @@
+<template>
+<div class="mk-google">
+	<input type="search" v-model="query" :placeholder="q">
+	<button @click="search">検索</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['q'],
+	data() {
+		return {
+			query: null
+		};
+	},
+	mounted() {
+		this.query = this.q;
+	},
+	methods: {
+		search() {
+			window.open(`https://www.google.com/?#q=${this.query}`, '_blank');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	display flex
+	margin 8px 0
+
+	> input
+		flex-shrink 1
+		padding 10px
+		width 100%
+		height 40px
+		font-family sans-serif
+		font-size 16px
+		color isDark ? #dee4e8 : #55595c
+		background isDark ? #191b22 : #fff
+		border solid 1px isDark ? #495156 : #dadada
+		border-radius 4px 0 0 4px
+
+		&:hover
+			border-color isDark ? #777c86 : #b0b0b0
+
+	> button
+		flex-shrink 0
+		padding 0 16px
+		border solid 1px isDark ? #495156 : #dadada
+		border-left none
+		border-radius 0 4px 4px 0
+
+		&:hover
+			background-color isDark ? #2e3440 : #eee
+
+		&:active
+			box-shadow 0 2px 4px rgba(#000, 0.15) inset
+
+.mk-google[data-darkmode]
+	root(true)
+
+.mk-google:not([data-darkmode])
+	root(false)
+
+</style>

src/client/app/common/views/components/messaging.vue

@@ -169,7 +169,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-messaging
+root(isDark)
 
 	&[data-compact]
 		font-size 0.8em
@@ -209,7 +209,7 @@ export default Vue.extend({
 
 		> .form
 			padding 8px
-			background #f7f7f7
+			background isDark ? #282c37 : #f7f7f7
 
 			> label
 				display block
@@ -241,13 +241,14 @@ export default Vue.extend({
 				line-height 38px
 				color #000
 				outline none
-				border solid 1px #eee
+				background isDark ? #191b22 : #fff
+				border solid 1px isDark ? #495156 : #eee
 				border-radius 5px
 				box-shadow none
 				transition color 0.5s ease, border 0.5s ease
 
 				&:hover
-					border solid 1px #ddd
+					border solid 1px isDark ? #b0b0b0 : #ddd
 					transition border 0.2s ease
 
 				&:focus
@@ -328,21 +329,21 @@ export default Vue.extend({
 		> a
 			display block
 			text-decoration none
-			background #fff
+			background isDark ? #282c37 : #fff
-			border-bottom solid 1px #eee
+			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			*
 				pointer-events none
 				user-select none
 
 			&:hover
-				background #fafafa
+				background isDark ? #1e2129 : #fafafa
 
 				> .avatar
 					filter saturate(200%)
 
 			&:active
-				background #eee
+				background isDark ? #14161b : #eee
 
 			&[data-is-read]
 			&[data-is-me]
@@ -382,17 +383,17 @@ export default Vue.extend({
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color rgba(0, 0, 0, 0.9)
+						color isDark ? #fff : rgba(0, 0, 0, 0.9)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
 						font-size 80%
 
 				> .avatar
@@ -412,10 +413,10 @@ export default Vue.extend({
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color rgba(0, 0, 0, 0.8)
+						color isDark ? #fff : rgba(0, 0, 0, 0.8)
 
 						.me
-							color rgba(0, 0, 0, 0.4)
+							color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
 
 					> .image
 						display block
@@ -460,4 +461,10 @@ export default Vue.extend({
 					> .avatar
 						margin 0 12px 0 0
 
+.mk-messaging[data-darkmode]
+	root(true)
+
+.mk-messaging:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/components/note-html.ts

@@ -4,6 +4,7 @@ import parse from '../../../../../text/parse';
 import getAcct from '../../../../../acct/render';
 import { url } from '../../../config';
 import MkUrl from './url.vue';
+import MkGoogle from './google.vue';
 
 const flatten = list => list.reduce(
 	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
@@ -97,7 +98,9 @@ export default Vue.component('mk-note-html', {
 					}, token.content);
 
 				case 'code':
-					return createElement('pre', [
+					return createElement('pre', {
+						class: 'code'
+					}, [
 						createElement('code', {
 							domProps: {
 								innerHTML: token.html
@@ -132,10 +135,24 @@ export default Vue.component('mk-note-html', {
 						}, text2.replace(/\n/g, ' '));
 					}
 
+				case 'title':
+					return createElement('div', {
+						attrs: {
+							class: 'title'
+						}
+					}, token.title);
+
 				case 'emoji':
 					const emoji = emojilib.lib[token.emoji];
 					return createElement('span', emoji ? emoji.char : token.content);
 
+				case 'search':
+					return createElement(MkGoogle, {
+						props: {
+							q: token.query
+						}
+					});
+
 				default:
 					console.log('unknown ast type:', token.type);
 			}
@@ -144,7 +161,7 @@ export default Vue.component('mk-note-html', {
 		const _els = [];
 		els.forEach((el, i) => {
 			if (el.tag == 'br') {
-				if (els[i - 1].tag != 'div') {
+				if (!['div', 'pre'].includes(els[i - 1].tag)) {
 					_els.push(el);
 				}
 			} else {

src/client/app/common/views/components/note-menu.vue

@@ -2,6 +2,7 @@
 <div class="mk-note-menu">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact }" ref="popover">
+		<button @click="favorite">%i18n:@favorite%</button>
 		<button v-if="note.userId == os.i.id" @click="pin">%i18n:@pin%</button>
 		<a v-if="note.uri" :href="note.uri" target="_blank">%i18n:@remote%</a>
 	</div>
@@ -58,6 +59,14 @@ export default Vue.extend({
 			});
 		},
 
+		favorite() {
+			(this as any).api('notes/favorites/create', {
+				noteId: this.note.id
+			}).then(() => {
+				this.$destroy();
+			});
+		},
+
 		close() {
 			(this.$refs.backdrop as any).style.pointerEvents = 'none';
 			anime({
@@ -142,6 +151,7 @@ $border-color = rgba(27, 31, 35, 0.15)
 		> a
 			display block
 			padding 8px 16px
+			width 100%
 
 			&:hover
 				color $theme-color-foreground

src/client/app/common/views/components/poll-editor.vue

@@ -69,7 +69,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-poll-editor
+root(isDark)
 	padding 8px
 
 	> .caution
@@ -102,6 +102,8 @@ export default Vue.extend({
 				padding 6px 8px
 				width 300px
 				font-size 14px
+				color isDark ? #fff : #000
+				background isDark ? #191b22 : #fff
 				border solid 1px rgba($theme-color, 0.1)
 				border-radius 4px
 
@@ -139,4 +141,10 @@ export default Vue.extend({
 		&:active
 			color darken($theme-color, 30%)
 
+.mk-poll-editor[data-darkmode]
+	root(true)
+
+.mk-poll-editor:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/components/poll.vue

@@ -68,7 +68,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-poll
+root(isDark)
 
 	> ul
 		display block
@@ -81,7 +81,8 @@ export default Vue.extend({
 			margin 4px 0
 			padding 4px 8px
 			width 100%
-			border solid 1px #eee
+			color isDark ? #fff : #000
+			border solid 1px isDark ? #5e636f : #eee
 			border-radius 4px
 			overflow hidden
 			cursor pointer
@@ -108,6 +109,8 @@ export default Vue.extend({
 					margin-left 4px
 
 	> p
+		color isDark ? #a3aebf : #000
+
 		a
 			color inherit
 
@@ -121,4 +124,10 @@ export default Vue.extend({
 			&:active
 				background transparent
 
+.mk-poll[data-darkmode]
+	root(true)
+
+.mk-poll:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/components/reaction-picker.vue

@@ -110,7 +110,7 @@ export default Vue.extend({
 
 $border-color = rgba(27, 31, 35, 0.15)
 
-.mk-reaction-picker
+root(isDark)
 	position initial
 
 	> .backdrop
@@ -124,9 +124,10 @@ $border-color = rgba(27, 31, 35, 0.15)
 		opacity 0
 
 	> .popover
+		$bgcolor = isDark ? #2c303c : #fff
 		position absolute
 		z-index 10001
-		background #fff
+		background $bgcolor
 		border 1px solid $border-color
 		border-radius 4px
 		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@@ -159,15 +160,15 @@ $border-color = rgba(27, 31, 35, 0.15)
 				border-top solid $balloon-size transparent
 				border-left solid $balloon-size transparent
 				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size #fff
+				border-bottom solid $balloon-size $bgcolor
 
 		> p
 			display block
 			margin 0
 			padding 8px 10px
 			font-size 14px
-			color #586069
+			color isDark ? #d6dce2 : #586069
-			border-bottom solid 1px #e1e4e8
+			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
 
 		> div
 			padding 4px
@@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
 				border-radius 2px
 
 				&:hover
-					background #eee
+					background isDark ? #252731 : #eee
 
 				&:active
 					background $theme-color
 					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
+.mk-reaction-picker[data-darkmode]
+	root(true)
+
+.mk-reaction-picker:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/components/reactions-viewer.vue

@@ -1,15 +1,15 @@
 <template>
 <div class="mk-reactions-viewer">
 	<template v-if="reactions">
-		<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
+		<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
-		<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
+		<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
-		<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
+		<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
-		<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
+		<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
-		<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
+		<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
-		<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
+		<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
-		<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
+		<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
-		<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
+		<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
-		<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
+		<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
 	</template>
 </div>
 </template>
@@ -27,9 +27,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-reactions-viewer
+root(isDark)
-	border-top dashed 1px #eee
+	$borderColor = isDark ? #5e6673 : #eee
-	border-bottom dashed 1px #eee
+	border-top dashed 1px $borderColor
+	border-bottom dashed 1px $borderColor
 	margin 4px 0
 
 	&:empty
@@ -44,6 +45,12 @@ export default Vue.extend({
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color #444
+			color isDark ? #d1d5dc : #444
+
+.mk-reactions-viewer[data-darkmode]
+	root(true)
+
+.mk-reactions-viewer:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/components/switch.vue

@@ -87,7 +87,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-switch
+root(isDark)
 	display flex
 	margin 12px 0
 	cursor pointer
@@ -121,11 +121,12 @@ export default Vue.extend({
 	&:hover
 		> .label
 			> span
-				color #2e3338
+				color isDark ? #fff : #2e3338
 
 		> .button
-			background #ced2da
+			$color = isDark ? #15181d : #ced2da
-			border-color #ced2da
+			background $color
+			border-color $color
 
 	> input
 		position absolute
@@ -147,14 +148,16 @@ export default Vue.extend({
 				border-radius 14px
 
 	> .button
+		$color = isDark ? #1c1f25 : #dcdfe6
+
 		display inline-block
 		margin 0
 		width 40px
 		min-width 40px
 		height 20px
 		min-height 20px
-		background #dcdfe6
+		background $color
-		border 1px solid #dcdfe6
+		border 1px solid $color
 		outline none
 		border-radius 10px
 		transition inherit
@@ -179,12 +182,18 @@ export default Vue.extend({
 		> span
 			display block
 			line-height 20px
-			color #4a535a
+			color isDark ? #c4ccd2 : #4a535a
 			transition inherit
 
 		> p
 			margin 0
 			//font-size 90%
-			color #9daab3
+			color isDark ? #78858e : #9daab3
+
+.mk-switch[data-darkmode]
+	root(true)
+
+.mk-switch:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/components/twitter-setting.vue

@@ -50,8 +50,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-twitter-setting
-	color #4a535a
-
 	.account
 		border solid 1px #e1e8ed
 		border-radius 4px

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>
@@ -65,78 +65,85 @@ export default Vue.extend({
 iframe
 	width 100%
 
-.mk-url-preview
+root(isDark)
-	display block
+	> a
-	font-size 16px
+		display block
-	border solid 1px #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 #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 #555
-
-		> p
-			margin 0
-			color #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 #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)
+
+.mk-url-preview:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/widgets/calendar.vue

@@ -109,10 +109,10 @@ export default define({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mkw-calendar
+root(isDark)
 	padding 16px 0
-	color #777
+	color isDark ? #c5ced6 :#777
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
@@ -171,7 +171,7 @@ export default define({
 				margin 0 0 2px 0
 				font-size 12px
 				line-height 18px
-				color #888
+				color isDark ? #7a8692 : #888
 
 				> b
 					margin-left 2px
@@ -179,7 +179,7 @@ export default define({
 			> .meter
 				width 100%
 				overflow hidden
-				background #eee
+				background isDark ? #1c1f25 : #eee
 				border-radius 8px
 
 				> .val
@@ -198,4 +198,10 @@ export default define({
 				> .meter > .val
 					background #41ddde
 
+.mkw-calendar[data-darkmode]
+	root(true)
+
+.mkw-calendar:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/donation.vue

@@ -19,9 +19,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-donation
+root(isDark)
-	background #fff
+	background isDark ? #282c37 : #fff
-	border solid 1px #ead8bb
+	border solid 1px isDark ? #c3831c : #ead8bb
 	border-radius 6px
 
 	> article
@@ -30,7 +30,7 @@ export default define({
 		> h1
 			margin 0 0 5px 0
 			font-size 1em
-			color #888
+			color isDark ? #b2bac1 : #888
 
 			> [data-fa]
 				margin-right 0.25em
@@ -40,7 +40,7 @@ export default define({
 			z-index 1
 			margin 0
 			font-size 0.8em
-			color #999
+			color isDark ? #a1a6ab : #999
 
 	&[data-mobile]
 		border none
@@ -55,4 +55,10 @@ export default define({
 			> p
 				color #777d71
 
+.mkw-donation[data-darkmode]
+	root(true)
+
+.mkw-donation:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/nav.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-nav">
 	<mk-widget-container>
-		<div :class="$style.body">
+		<div class="mkw-nav--body">
 			<mk-nav/>
 		</div>
 	</mk-widget-container>
@@ -15,17 +15,24 @@ export default define({
 });
 </script>
 
-<style lang="stylus" module>
+<style lang="stylus" scoped>
-.body
+root(isDark)
-	padding 16px
+	.mkw-nav--body
-	font-size 12px
+		padding 16px
-	color #aaa
+		font-size 12px
-	background #fff
+		color isDark ? #9aa4b3 : #aaa
+		background isDark ? #282c37 : #fff
 
-	a
+		a
-		color #999
+			color isDark ? #9aa4b3 : #999
 
-	i
+		i
-		color #ccc
+			color isDark ? #9aa4b3 : #ccc
+
+.mkw-nav[data-darkmode]
+	root(true)
+
+.mkw-nav:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/widgets/rss.vue

@@ -4,9 +4,11 @@
 		<template slot="header">%fa:rss-square%RSS</template>
 		<button slot="func" title="設定" @click="setting">%fa:cog%</button>
 
-		<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<div class="mkw-rss--body">
-		<div :class="$style.feed" v-else>
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-			<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
+			<div class="feed" v-else>
+				<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
+			</div>
 		</div>
 	</mk-widget-container>
 </div>
@@ -56,38 +58,46 @@ export default define({
 });
 </script>
 
-<style lang="stylus" module>
+<style lang="stylus" scoped>
-.feed
+root(isDark)
-	padding 12px 16px
+	.mkw-rss--body
-	font-size 0.9em
+		.feed
+			padding 12px 16px
+			font-size 0.9em
 
-	> a
+			> a
-		display block
+				display block
-		padding 4px 0
+				padding 4px 0
-		color #666
+				color isDark ? #9aa4b3 : #666
-		border-bottom dashed 1px #eee
+				border-bottom dashed 1px isDark ? #1c2023 : #eee
 
-		&:last-child
+				&:last-child
-			border-bottom none
+					border-bottom none
 
-.fetching
+		.fetching
-	margin 0
+			margin 0
-	padding 16px
+			padding 16px
-	text-align center
+			text-align center
-	color #aaa
+			color #aaa
 
-	> [data-fa]
+			> [data-fa]
-		margin-right 4px
+				margin-right 4px
 
-&[data-mobile]
+		&[data-mobile]
-	.feed
+			.feed
-		padding 0
+				padding 0
-		font-size 1em
+				font-size 1em
 
-		> a
+				> a
-			padding 8px 16px
+					padding 8px 16px
 
-			&:nth-child(even)
+					&:nth-child(even)
-				background rgba(0, 0, 0, 0.05)
+						background rgba(0, 0, 0, 0.05)
+
+.mkw-rss[data-darkmode]
+	root(true)
+
+.mkw-rss:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/widgets/server.cpu-memory.vue

@@ -100,7 +100,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.cpu-memory
+root(isDark)
 	> svg
 		display block
 		padding 10px
@@ -115,7 +115,7 @@ export default Vue.extend({
 
 		> text
 			font-size 5px
-			fill rgba(0, 0, 0, 0.55)
+			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
 
 			> tspan
 				opacity 0.5
@@ -124,4 +124,11 @@ export default Vue.extend({
 		content ""
 		display block
 		clear both
+
+.cpu-memory[data-darkmode]
+	root(true)
+
+.cpu-memory:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.cpu.vue

@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.cpu
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -65,4 +65,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.cpu[data-darkmode]
+	root(true)
+
+.cpu:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.disk.vue

@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.disk
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -73,4 +73,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.disk[data-darkmode]
+	root(true)
+
+.disk:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.memory.vue

@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.memory
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -73,4 +73,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.memory[data-darkmode]
+	root(true)
+
+.memory:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/common/views/widgets/server.pie.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-svg
+root(isDark)
 	display block
 	height 100%
 
@@ -56,6 +56,12 @@ svg
 
 	> text
 		font-size 0.15px
-		fill rgba(0, 0, 0, 0.6)
+		fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6)
+
+svg[data-darkmode]
+	root(true)
+
+svg:not([data-darkmode])
+	root(false)
 
 </style>

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

@@ -2,6 +2,7 @@
  * Desktop Client
  */
 
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 // Style
@@ -24,8 +25,10 @@ import updateBanner from './api/update-banner';
 
 import MkIndex from './views/pages/index.vue';
 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';
@@ -49,9 +52,11 @@ init(async (launch) => {
 		routes: [
 			{ path: '/', name: 'index', component: MkIndex },
 			{ path: '/i/customize-home', component: MkHomeCustomize },
+			{ path: '/i/favorites', component: MkFavorites },
 			{ 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/style.styl

@@ -44,6 +44,26 @@ html
 	height 100%
 	background #f7f7f7
 
+	&[data-darkmode]
+		background #191B22
+
+		&, *
+			&::-webkit-scrollbar-track
+				background-color #282C37
+
+			&::-webkit-scrollbar
+				width 6px
+				height 6px
+
+			&::-webkit-scrollbar-thumb
+				background-color #454954
+
+				&:hover
+					background-color #535660
+
+				&:active
+					background-color $theme-color
+
 body
 	display flex
 	flex-direction column

src/client/app/desktop/ui.styl

@@ -123,3 +123,59 @@ textarea.ui
 		font-size 90%
 		font-weight bold
 		color rgba(#373a3c, 0.9)
+
+html[data-darkmode]
+	button.ui
+	.button.ui
+		color #fff
+		background linear-gradient(to bottom, #313543 0%, #282c37 100%)
+		border-color #1c2023
+
+		&:hover
+			background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
+			border-color #151a1d
+
+		&:active
+			background #22262f
+			border-color #151a1d
+
+		&.primary
+			color $theme-color-foreground
+			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+			border solid 1px lighten($theme-color, 15%)
+
+			&:hover:not(:disabled)
+				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+				border-color $theme-color
+
+			&:active:not(:disabled)
+				background $theme-color
+				border-color $theme-color
+
+	input:not([type]).ui
+	input[type='text'].ui
+	input[type='password'].ui
+	input[type='email'].ui
+	input[type='date'].ui
+	input[type='number'].ui
+	textarea.ui
+		display block
+		padding 10px
+		width 100%
+		height 40px
+		font-family sans-serif
+		font-size 16px
+		color #dee4e8
+		background #191b22
+		border solid 1px #495156
+		border-radius 4px
+
+		&:hover
+			border-color #b0b0b0
+
+		&:focus
+			border-color $theme-color
+
+	.ui.from.group
+		> p:first-child
+			color #c0c7cc

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

@@ -1,14 +1,15 @@
 <template>
-<div class="mk-activity" :data-melt="design == 2">
+<div class="mk-activity">
-	<template v-if="design == 0">
+	<mk-widget-container :show-header="design == 0" :naked="design == 2">
-		<p class="title">%fa:chart-bar%%i18n:@title%</p>
+		<template slot="header">%fa:chart-bar%%i18n:@title%</template>
-		<button @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
+		<button slot="func" title="%i18n:@toggle%" @click="toggle">%fa:sort%</button>
-	</template>
+
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<template v-else>
+		<template v-else>
-		<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
+			<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
-		<x-chart v-show="view == 1" :data="[].concat(activity)"/>
+			<x-chart v-show="view == 1" :data="[].concat(activity)"/>
-	</template>
+		</template>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -64,53 +65,14 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus" module>
-.mk-activity
+.fetching
-	background #fff
+	margin 0
-	border solid 1px rgba(0, 0, 0, 0.075)
+	padding 16px
-	border-radius 6px
+	text-align center
+	color #aaa
 
-	&[data-melt]
+	> [data-fa]
-		background transparent !important
+		margin-right 4px
-		border none !important
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-		> [data-fa]
-			margin-right 4px
-
-	> button
-		position absolute
-		z-index 2
-		top 0
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
-
-		&:hover
-			color #aaa
-
-		&:active
-			color #999
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-fa]
-			margin-right 4px
 
 </style>

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

@@ -133,9 +133,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-calendar
+root(isDark)
-	color #777
+	color isDark ? #c5ced6 : #777
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
@@ -249,4 +249,10 @@ export default Vue.extend({
 					&:active > div
 						background darken($theme-color, 10%)
 
+.mk-calendar[data-darkmode]
+	root(true)
+
+.mk-calendar:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/context-menu.menu.vue

@@ -31,7 +31,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.menu
+root(isDark)
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -46,7 +46,7 @@ export default Vue.extend({
 		&.divider
 			margin-top $padding
 			padding-top $padding
-			border-top solid 1px #eee
+			border-top solid 1px isDark ? #1c2023 : #eee
 
 		&.nest
 			> p
@@ -75,7 +75,7 @@ export default Vue.extend({
 			margin 0
 			padding 0 32px 0 38px
 			line-height $item-height
-			color #868C8C
+			color isDark ? #c8cece : #868C8C
 			text-decoration none
 			cursor pointer
 
@@ -104,11 +104,17 @@ export default Vue.extend({
 		left $width
 		margin-top -($padding)
 		width $width
-		background #fff
+		background isDark ? #282c37 :#fff
 		border-radius 0 4px 4px 4px
 		box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
 		transition visibility 0s linear 0.2s
 
+.menu[data-darkmode]
+	root(true)
+
+.menu:not([data-darkmode])
+	root(false)
+
 </style>
 
 <style lang="stylus" module>

src/client/app/desktop/views/components/context-menu.vue

@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.context-menu
+root(isDark)
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -66,9 +66,15 @@ export default Vue.extend({
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background #fff
+	background isDark ? #282c37 : #fff
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
 	opacity 0
 
+.context-menu[data-darkmode]
+	root(true)
+
+.context-menu:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/drive.file.vue

@@ -186,7 +186,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.root.file
+root(isDark)
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px
@@ -308,10 +308,16 @@ export default Vue.extend({
 		font-size 0.8em
 		text-align center
 		word-break break-all
-		color #444
+		color isDark ? #fff : #444
 		overflow hidden
 
 		> .ext
 			opacity 0.5
 
+.root.file[data-darkmode]
+	root(true)
+
+.root.file:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -577,7 +577,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-drive
+root(isDark)
 
 	> nav
 		display block
@@ -585,9 +585,8 @@ export default Vue.extend({
 		width 100%
 		overflow auto
 		font-size 0.9em
-		color #555
+		color isDark ? #d2d9dc : #555
-		background #fff
+		background isDark ? #282c37 : #fff
-		//border-bottom 1px solid #dfdfdf
 		box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
 
 		&, *
@@ -665,6 +664,7 @@ export default Vue.extend({
 		padding 8px
 		height calc(100% - 38px)
 		overflow auto
+		background isDark ? #191b22 : #fff
 
 		&, *
 			user-select none
@@ -770,4 +770,10 @@ export default Vue.extend({
 	> input
 		display none
 
+.mk-drive[data-darkmode]
+	root(true)
+
+.mk-drive:not([data-darkmode])
+	root(false)
+
 </style>

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;
@@ -94,7 +98,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-follow-button
+root(isDark)
 	display block
 	cursor pointer
 	padding 0
@@ -121,17 +125,17 @@ export default Vue.extend({
 			border-radius 8px
 
 	&.follow
-		color #888
+		color isDark ? #fff : #888
-		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+		background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-		border solid 1px #e2e2e2
+		border solid 1px isDark ? #1c2023 : #e2e2e2
 
 		&:hover
-			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+			background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-			border-color #dcdcdc
+			border-color isDark ? #151a1d : #dcdcdc
 
 		&:active
-			background #ececec
+			background isDark ? #22262f : #ececec
-			border-color #dcdcdc
+			border-color isDark ? #151a1d : #dcdcdc
 
 	&.unfollow
 		color $theme-color-foreground
@@ -161,4 +165,10 @@ export default Vue.extend({
 		i
 			margin-right 8px
 
+.mk-follow-button[data-darkmode]
+	root(true)
+
+.mk-follow-button:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -219,7 +219,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-home
+root(isDark)
 	display block
 
 	&[data-customize]
@@ -249,7 +249,8 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 48px
-		background #f7f7f7
+		color isDark ? #fff : #000
+		background isDark ? #313543 : #f7f7f7
 		box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
 
 		> a
@@ -289,7 +290,7 @@ export default Vue.extend({
 						line-height 48px
 
 				&.trash
-					border-left solid 1px #ddd
+					border-left solid 1px isDark ? #1c2023 : #ddd
 
 					> div
 						width 100%
@@ -329,7 +330,7 @@ export default Vue.extend({
 
 			.mk-post-form
 				margin-bottom 16px
-				border solid 1px #e5e5e5
+				border solid 1px rgba(#000, 0.075)
 				border-radius 4px
 
 		> *:not(.main)
@@ -357,4 +358,10 @@ export default Vue.extend({
 				max-width 700px
 				margin 0 auto
 
+.mk-home[data-darkmode]
+	root(true)
+
+.mk-home:not([data-darkmode])
+	root(false)
+
 </style>

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/media-image.vue

@@ -31,7 +31,7 @@ export default Vue.extend({
 			const xp = mouseX / this.$el.offsetWidth * 100;
 			const yp = mouseY / this.$el.offsetHeight * 100;
 			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
-			this.$el.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
+			this.$el.style.backgroundImage = `url("${this.image.url}")`;
 		},
 
 		onMouseleave() {

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/note-preview.vue

@@ -33,19 +33,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-note-preview
+root(isDark)
 	font-size 0.9em
-	background #fff
 
 	&:after
 		content ""
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
 	> .avatar-anchor
 		display block
 		float left
@@ -70,7 +65,7 @@ export default Vue.extend({
 			> .name
 				margin 0 .5em 0 0
 				padding 0
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight bold
 				text-decoration none
@@ -81,11 +76,11 @@ export default Vue.extend({
 
 			> .username
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .time
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 
@@ -94,6 +89,12 @@ export default Vue.extend({
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
+
+.mk-note-preview[data-darkmode]
+	root(true)
+
+.mk-note-preview:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/desktop/views/components/notes.note.sub.vue

@@ -33,7 +33,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	margin 0
 	padding 16px
 	font-size 0.9em
@@ -43,10 +43,6 @@ export default Vue.extend({
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
 	> .avatar-anchor
 		display block
 		float left
@@ -75,7 +71,7 @@ export default Vue.extend({
 				margin 0 .5em 0 0
 				padding 0
 				overflow hidden
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight bold
 				text-decoration none
@@ -86,23 +82,31 @@ export default Vue.extend({
 
 			> .username
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .created-at
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
+			max-height 128px
+			overflow hidden
 
 			> .text
 				cursor default
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
 				pre
 					max-height 120px
 					font-size 80%
 
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/notes.note.vue

@@ -4,15 +4,13 @@
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<p>
+		<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
-			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
+			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+		</router-link>
-			</router-link>
+		%fa:retweet%
-			%fa:retweet%
+		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
-			<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
+		<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
-			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
+		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-			<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
@@ -36,24 +34,30 @@
 				<p class="channel" v-if="p.channel">
 					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
 				</p>
-				<div class="text">
+				<p v-if="p.cw != null" class="cw">
-					<a class="reply" v-if="p.reply">%fa:reply%</a>
+					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
+					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
-					<a class="rp" v-if="p.renote">RP:</a>
+				</p>
+				<div class="content" v-show="p.cw == null || showContent">
+					<div class="text">
+						<a class="reply" v-if="p.reply">%fa:reply%</a>
+						<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+						<a class="rp" v-if="p.renote">RP:</a>
+					</div>
+					<div class="media" v-if="p.media.length > 0">
+						<mk-media-list :media-list="p.media"/>
+					</div>
+					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+					<div class="tags" v-if="p.tags && p.tags.length > 0">
+						<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+					</div>
+					<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+					<div class="map" v-if="p.geo" ref="map"></div>
+					<div class="renote" v-if="p.renote">
+						<mk-note-preview :note="p.renote"/>
+					</div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@@ -115,6 +119,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			isDetailOpened: false,
 			connection: null,
 			connectionId: null
@@ -291,20 +296,21 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.note
+root(isDark)
 	margin 0
 	padding 0
-	background #fff
+	background isDark ? #282C37 : #fff
-	border-bottom solid 1px #eaeaea
+	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
-	&:first-child
+	&[data-round]
-		border-top-left-radius 6px
+		&:first-child
-		border-top-right-radius 6px
-
-		> .renote
 			border-top-left-radius 6px
 			border-top-right-radius 6px
 
+			> .renote
+				border-top-left-radius 6px
+				border-top-right-radius 6px
+
 	&:last-of-type
 		border-bottom none
 
@@ -323,36 +329,44 @@ export default Vue.extend({
 			border-radius 4px
 
 	> .renote
+		display flex
+		align-items baseline
+		padding 16px 32px
+		line-height 28px
 		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-		> p
+		.avatar-anchor
-			margin 0
+			display inline-block
-			padding 16px 32px
-			line-height 28px
 
-			.avatar-anchor
+			.avatar
-				display inline-block
+				vertical-align bottom
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
-				.avatar
+		[data-fa]
-					vertical-align bottom
+			margin-right 4px
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
 
-			[data-fa]
+		> span
-				margin-right 4px
+			flex-shrink 0
 
-			.name
+			&:last-of-type
-				font-weight bold
+				margin-right 8px
+
+		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
+			font-weight bold
 
 		> .mk-time
-			position absolute
+			display block
-			top 16px
+			margin-left auto
-			right 32px
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
 
 		& + article
 			padding-top 8px
@@ -374,7 +388,7 @@ export default Vue.extend({
 
 		&:hover
 			> .main > footer > button
-				color #888
+				color isDark ? #707b97 : #888
 
 		> .avatar-anchor
 			display block
@@ -407,7 +421,7 @@ export default Vue.extend({
 					margin 0 .5em 0 0
 					padding 0
 					overflow hidden
-					color #627079
+					color isDark ? #fff : #627079
 					font-size 1em
 					font-weight bold
 					text-decoration none
@@ -420,13 +434,15 @@ export default Vue.extend({
 					margin 0 .5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color #aaa
+					color isDark ? #758188 :#aaa
-					border solid 1px #ddd
+					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
 				> .username
 					margin 0 .5em 0 0
-					color #ccc
+					overflow hidden
+					text-overflow ellipsis
+					color isDark ? #606984 : #ccc
 
 				> .info
 					margin-left auto
@@ -434,7 +450,7 @@ export default Vue.extend({
 
 					> .mobile
 						margin-right 8px
-						color #ccc
+						color isDark ? #606984 : #ccc
 
 					> .app
 						margin-right 8px
@@ -443,91 +459,130 @@ export default Vue.extend({
 						border-right solid 1px #eaeaea
 
 					> .created-at
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
 
 			> .body
 
-				> .text
+				> .cw
 					cursor default
 					display block
 					margin 0
 					padding 0
 					overflow-wrap break-word
 					font-size 1.1em
-					color #717171
+					color isDark ? #fff : #717171
 
-					>>> .quote
+					> .text
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
 						margin-right 8px
-						color #717171
 
-					> .rp
+					> .toggle
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 300px
-
-					&:empty
-						display none
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
 						display inline-block
-						margin 0 8px 0 0
+						padding 4px 8px
-						padding 2px 8px 2px 16px
+						font-size 0.7em
-						font-size 90%
+						color isDark ? #393f4f : #fff
-						color #8d969e
+						background isDark ? #687390 : #b1b9c1
-						background #edf0f3
+						border-radius 2px
-						border-radius 4px
+						cursor pointer
-
+						user-select none
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
 
 						&:hover
-							text-decoration none
+							background isDark ? #707b97 : #bbc4ce
-							background #e2e7ec
 
-				.mk-url-preview
+				> .content
-					margin-top 8px
 
-				> .channel
+					> .text
-					margin 0
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
+						color isDark ? #fff : #717171
 
-				> .mk-poll
+						>>> .title
-					font-size 80%
+							display block
+							margin-bottom 4px
+							padding 4px
+							font-size 90%
+							text-align center
+							background isDark ? #2f3944 : #eef1f3
+							border-radius 4px
 
-				> .renote
+						>>> .code
-					margin 8px 0
+							margin 8px 0
 
-					> .mk-note-preview
+						>>> .quote
-						padding 16px
+							margin 8px
-						border dashed 1px #c0dac6
+							padding 6px 12px
-						border-radius 8px
+							color isDark ? #6f808e : #aaa
+							border-left solid 3px isDark ? #637182 : #eee
+
+						> .reply
+							margin-right 8px
+							color isDark ? #99abbf : #717171
+
+						> .rp
+							margin-left 4px
+							font-style oblique
+							color #a0bf46
+
+					> .location
+						margin 4px 0
+						font-size 12px
+						color #ccc
+
+					> .map
+						width 100%
+						height 300px
+
+						&:empty
+							display none
+
+					> .tags
+						margin 4px 0 0 0
+
+						> *
+							display inline-block
+							margin 0 8px 0 0
+							padding 2px 8px 2px 16px
+							font-size 90%
+							color #8d969e
+							background #edf0f3
+							border-radius 4px
+
+							&:before
+								content ""
+								display block
+								position absolute
+								top 0
+								bottom 0
+								left 4px
+								width 8px
+								height 8px
+								margin auto 0
+								background #fff
+								border-radius 100%
+
+							&:hover
+								text-decoration none
+								background #e2e7ec
+
+					.mk-url-preview
+						margin-top 8px
+
+					> .channel
+						margin 0
+
+					> .mk-poll
+						font-size 80%
+
+					> .renote
+						margin 8px 0
+
+						> .mk-note-preview
+							padding 16px
+							border dashed 1px isDark ? #4e945e : #c0dac6
+							border-radius 8px
 
 			> footer
 				> button
@@ -535,13 +590,13 @@ export default Vue.extend({
 					padding 0 8px
 					line-height 32px
 					font-size 1em
-					color #ddd
+					color isDark ? #606984 : #ddd
 					background transparent
 					border none
 					cursor pointer
 
 					&:hover
-						color #666
+						color isDark ? #9198af : #666
 
 					> .count
 						display inline
@@ -560,6 +615,12 @@ export default Vue.extend({
 		padding-top 4px
 		background rgba(0, 0, 0, 0.0125)
 
+.note[data-darkmode]
+	root(true)
+
+.note:not([data-darkmode])
+	root(false)
+
 </style>
 
 <style lang="stylus" module>

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

@@ -1,32 +1,65 @@
 <template>
 <div class="mk-notes">
-	<template v-for="(note, i) in _notes">
+	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
-		<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+
-		<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
-			<span>%fa:angle-up%{{ note._datetext }}</span>
+
-			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+	<div v-if="!fetching && requestInitPromise != null">
-		</p>
+		<p>読み込みに失敗しました。</p>
-	</template>
+		<button @click="resolveInitPromise">リトライ</button>
-	<footer>
+	</div>
-		<slot name="footer"></slot>
+
+	<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)"/>
+			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+				<span>%fa:angle-up%{{ note._datetext }}</span>
+				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</transition-group>
+
+	<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 => {
@@ -38,52 +71,202 @@ 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>
-.mk-notes
+@import '~const.styl'
 
-	> .date
+root(isDark)
-		display block
+	.transition
-		margin 0
+		.mk-notes-enter
-		line-height 32px
+		.mk-notes-leave-to
-		font-size 14px
+			opacity 0
-		text-align center
+			transform translateY(-30px)
-		color #aaa
-		background #fdfdfd
-		border-bottom solid 1px #eaeaea
 
-		span
+		> *
-			margin 0 16px
+			transition transform .3s ease, opacity .3s ease
 
-		[data-fa]
+		> .date
-			margin-right 8px
+			display block
+			margin 0
+			line-height 32px
+			font-size 14px
+			text-align center
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+
+			span
+				margin 0 16px
+
+			[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)
+
+.mk-notes:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -1,96 +1,98 @@
 <template>
 <div class="mk-notifications">
 	<div class="notifications" v-if="notifications.length != 0">
-		<template v-for="(notification, i) in _notifications">
+		<transition-group name="mk-notifications" class="transition">
-			<div class="notification" :class="notification.type" :key="notification.id">
+			<template v-for="(notification, i) in _notifications">
-				<mk-time :time="notification.createdAt"/>
+				<div class="notification" :class="notification.type" :key="notification.id">
-				<template v-if="notification.type == 'reaction'">
+					<mk-time :time="notification.createdAt"/>
-					<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
+					<template v-if="notification.type == 'reaction'">
-						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+						<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
-					</router-link>
+							<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-					<div class="text">
-						<p>
-							<mk-reaction-icon :reaction="notification.reaction"/>
-							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ 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 class="text">
-				</template>
+							<p>
-				<template v-if="notification.type == 'renote'">
+								<mk-reaction-icon :reaction="notification.reaction"/>
-					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
+								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+							</p>
-					</router-link>
+							<router-link class="note-ref" :to="notification.note | notePage">
-					<div class="text">
+								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-						<p>%fa:retweet%
+							</router-link>
-							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
+						</div>
-						</p>
+					</template>
-						<router-link class="note-ref" :to="notification.note | notePage">
+					<template v-if="notification.type == 'renote'">
-							%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
+							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 						</router-link>
-					</div>
+						<div class="text">
-				</template>
+							<p>%fa:retweet%
-				<template v-if="notification.type == 'quote'">
+								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
+							</p>
-						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+							<router-link class="note-ref" :to="notification.note | notePage">
-					</router-link>
+								%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
-					<div class="text">
+							</router-link>
-						<p>%fa:quote-left%
+						</div>
-							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
+					</template>
-						</p>
+					<template v-if="notification.type == 'quote'">
-						<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
+						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-					</div>
+							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-				</template>
-				<template v-if="notification.type == 'follow'">
-					<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
-						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-					</router-link>
-					<div class="text">
-						<p>%fa:user-plus%
-							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-						</p>
-					</div>
-				</template>
-				<template v-if="notification.type == 'reply'">
-					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-					</router-link>
-					<div class="text">
-						<p>%fa:reply%
-							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-						</p>
-						<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
-					</div>
-				</template>
-				<template v-if="notification.type == 'mention'">
-					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
-						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-					</router-link>
-					<div class="text">
-						<p>%fa:at%
-							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-						</p>
-						<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
-					</div>
-				</template>
-				<template v-if="notification.type == 'poll_vote'">
-					<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
-						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
-					</router-link>
-					<div class="text">
-						<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
-						<router-link class="note-ref" :to="notification.note | notePage">
-							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 						</router-link>
-					</div>
+						<div class="text">
-				</template>
+							<p>%fa:quote-left%
-			</div>
+								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
+							</p>
-				<span>%fa:angle-up%{{ notification._datetext }}</span>
+							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
-				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+						</div>
-			</p>
+					</template>
-		</template>
+					<template v-if="notification.type == 'follow'">
+						<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
+							<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+						</router-link>
+						<div class="text">
+							<p>%fa:user-plus%
+								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
+							</p>
+						</div>
+					</template>
+					<template v-if="notification.type == 'reply'">
+						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
+							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+						</router-link>
+						<div class="text">
+							<p>%fa:reply%
+								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
+							</p>
+							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
+						</div>
+					</template>
+					<template v-if="notification.type == 'mention'">
+						<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
+							<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+						</router-link>
+						<div class="text">
+							<p>%fa:at%
+								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
+							</p>
+							<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
+						</div>
+					</template>
+					<template v-if="notification.type == 'poll_vote'">
+						<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
+							<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+						</router-link>
+						<div class="text">
+							<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
+							<router-link class="note-ref" :to="notification.note | notePage">
+								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+							</router-link>
+						</div>
+					</template>
+				</div>
+				<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
+					<span>%fa:angle-up%{{ notification._datetext }}</span>
+					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+				</p>
+			</template>
+		</transition-group>
 	</div>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
@@ -185,98 +187,108 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notifications
+root(isDark)
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
+
 	> .notifications
-		> .notification
+		> *
-			margin 0
+			> .notification
-			padding 16px
+				margin 0
-			overflow-wrap break-word
+				padding 16px
-			font-size 0.9em
+				overflow-wrap break-word
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+				font-size 0.9em
+				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
 
-			&:last-child
+				&:last-child
-				border-bottom none
+					border-bottom none
 
-			> .mk-time
+				> .mk-time
-				display inline
+					display inline
-				position absolute
+					position absolute
-				top 16px
+					top 16px
-				right 12px
+					right 12px
-				vertical-align top
+					vertical-align top
-				color rgba(0, 0, 0, 0.6)
+					color isDark ? #606984 : rgba(0, 0, 0, 0.6)
-				font-size small
+					font-size small
 
-			&:after
+				&:after
-				content ""
+					content ""
-				display block
-				clear both
-
-			> .avatar-anchor
-				display block
-				float left
-				position -webkit-sticky
-				position sticky
-				top 16px
-
-				> img
 					display block
-					min-width 36px
+					clear both
-					min-height 36px
-					max-width 36px
-					max-height 36px
-					border-radius 6px
 
-			> .text
+				> .avatar-anchor
-				float right
+					display block
-				width calc(100% - 36px)
+					float left
-				padding-left 8px
+					position -webkit-sticky
+					position sticky
+					top 16px
 
-				p
+					> img
-					margin 0
+						display block
+						min-width 36px
+						min-height 36px
+						max-width 36px
+						max-height 36px
+						border-radius 6px
 
-					i, .mk-reaction-icon
+				> .text
-						margin-right 4px
+					float right
+					width calc(100% - 36px)
+					padding-left 8px
 
-			.note-preview
+					p
-				color rgba(0, 0, 0, 0.7)
+						margin 0
 
-			.note-ref
+						i, .mk-reaction-icon
-				color rgba(0, 0, 0, 0.7)
+							margin-right 4px
+
+				.note-preview
+					color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+
+				.note-ref
+					color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+
+					[data-fa]
+						font-size 1em
+						font-weight normal
+						font-style normal
+						display inline-block
+						margin-right 3px
+
+				&.renote, &.quote
+					.text p i
+						color #77B255
+
+				&.follow
+					.text p i
+						color #53c7ce
+
+				&.reply, &.mention
+					.text p i
+						color #555
+
+			> .date
+				display block
+				margin 0
+				line-height 32px
+				text-align center
+				font-size 0.8em
+				color isDark ? #666b79 : #aaa
+				background isDark ? #242731 : #fdfdfd
+				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+
+				span
+					margin 0 16px
 
 				[data-fa]
-					font-size 1em
+					margin-right 8px
-					font-weight normal
-					font-style normal
-					display inline-block
-					margin-right 3px
-
-			&.renote, &.quote
-				.text p i
-					color #77B255
-
-			&.follow
-				.text p i
-					color #53c7ce
-
-			&.reply, &.mention
-				.text p i
-					color #555
-
-		> .date
-			display block
-			margin 0
-			line-height 32px
-			text-align center
-			font-size 0.8em
-			color #aaa
-			background #fdfdfd
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-			span
-				margin 0 16px
-
-			[data-fa]
-				margin-right 8px
 
 	> .more
 		display block
@@ -312,4 +324,10 @@ export default Vue.extend({
 		> [data-fa]
 			margin-right 4px
 
+.mk-notifications[data-darkmode]
+	root(true)
+
+.mk-notifications:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -6,6 +6,7 @@
 	@drop.stop="onDrop"
 >
 	<div class="content">
+		<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
 		<textarea :class="{ with: (files.length != 0 || poll) }"
 			ref="text" v-model="text" :disabled="posting"
 			@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
@@ -27,6 +28,7 @@
 	<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
 	<button class="kao" title="%i18n:@insert-a-kao%" @click="kao">%fa:R smile%</button>
 	<button class="poll" title="%i18n:@create-poll%" @click="poll = true">%fa:chart-pie%</button>
+	<button class="poll" title="内容を隠す" @click="useCw = !useCw">%fa:eye-slash%</button>
 	<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
 	<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:!@text-remain%'.replace('{}', 1000 - text.length) }}</p>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
@@ -46,7 +48,9 @@ export default Vue.extend({
 	components: {
 		XDraggable
 	},
+
 	props: ['reply', 'renote'],
+
 	data() {
 		return {
 			posting: false,
@@ -54,11 +58,14 @@ export default Vue.extend({
 			files: [],
 			uploadings: [],
 			poll: false,
+			useCw: false,
+			cw: null,
 			geo: null,
 			autocomplete: null,
 			draghover: false
 		};
 	},
+
 	computed: {
 		draftId(): string {
 			return this.renote
@@ -67,6 +74,7 @@ export default Vue.extend({
 					? 'reply:' + this.reply.id
 					: 'note';
 		},
+
 		placeholder(): string {
 			return this.renote
 				? '%i18n:!@quote-placeholder%'
@@ -74,6 +82,7 @@ export default Vue.extend({
 					? '%i18n:!@reply-placeholder%'
 					: '%i18n:!@note-placeholder%';
 		},
+
 		submitText(): string {
 			return this.renote
 				? '%i18n:!@renote%'
@@ -81,21 +90,26 @@ export default Vue.extend({
 					? '%i18n:!@reply%'
 					: '%i18n:!@note%';
 		},
+
 		canPost(): boolean {
 			return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.renote);
 		}
 	},
+
 	watch: {
 		text() {
 			this.saveDraft();
 		},
+
 		poll() {
 			this.saveDraft();
 		},
+
 		files() {
 			this.saveDraft();
 		}
 	},
+
 	mounted() {
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
@@ -113,13 +127,16 @@ export default Vue.extend({
 			}
 		});
 	},
+
 	methods: {
 		focus() {
 			(this.$refs.text as any).focus();
 		},
+
 		chooseFile() {
 			(this.$refs.file as any).click();
 		},
+
 		chooseFileFromDrive() {
 			(this as any).apis.chooseDriveFile({
 				multiple: true
@@ -127,32 +144,40 @@ export default Vue.extend({
 				files.forEach(this.attachMedia);
 			});
 		},
+
 		attachMedia(driveFile) {
 			this.files.push(driveFile);
 			this.$emit('change-attached-media', this.files);
 		},
+
 		detachMedia(id) {
 			this.files = this.files.filter(x => x.id != id);
 			this.$emit('change-attached-media', this.files);
 		},
+
 		onChangeFile() {
 			Array.from((this.$refs.file as any).files).forEach(this.upload);
 		},
+
 		upload(file) {
 			(this.$refs.uploader as any).upload(file);
 		},
+
 		onChangeUploadings(uploads) {
 			this.$emit('change-uploadings', uploads);
 		},
+
 		clear() {
 			this.text = '';
 			this.files = [];
 			this.poll = false;
 			this.$emit('change-attached-media', this.files);
 		},
+
 		onKeydown(e) {
 			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
 		},
+
 		onPaste(e) {
 			Array.from(e.clipboardData.items).forEach((item: any) => {
 				if (item.kind == 'file') {
@@ -160,6 +185,7 @@ export default Vue.extend({
 				}
 			});
 		},
+
 		onDragover(e) {
 			const isFile = e.dataTransfer.items[0].kind == 'file';
 			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
@@ -169,12 +195,15 @@ export default Vue.extend({
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
 			}
 		},
+
 		onDragenter(e) {
 			this.draghover = true;
 		},
+
 		onDragleave(e) {
 			this.draghover = false;
 		},
+
 		onDrop(e): void {
 			this.draghover = false;
 
@@ -195,6 +224,7 @@ export default Vue.extend({
 			}
 			//#endregion
 		},
+
 		setGeo() {
 			if (navigator.geolocation == null) {
 				alert('お使いの端末は位置情報に対応していません');
@@ -210,10 +240,12 @@ export default Vue.extend({
 				enableHighAccuracy: true
 			});
 		},
+
 		removeGeo() {
 			this.geo = null;
 			this.$emit('geo-dettached');
 		},
+
 		post() {
 			this.posting = true;
 
@@ -223,6 +255,7 @@ export default Vue.extend({
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
+				cw: this.useCw ? this.cw || '' : undefined,
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
 					altitude: this.geo.altitude,
@@ -250,6 +283,7 @@ export default Vue.extend({
 				this.posting = false;
 			});
 		},
+
 		saveDraft() {
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
@@ -264,6 +298,7 @@ export default Vue.extend({
 
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},
+
 		deleteDraft() {
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
@@ -271,6 +306,7 @@ export default Vue.extend({
 
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},
+
 		kao() {
 			this.text += getKao();
 		}
@@ -281,10 +317,10 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-post-form
+root(isDark)
 	display block
 	padding 16px
-	background lighten($theme-color, 95%)
+	background isDark ? #282C37 : lighten($theme-color, 95%)
 
 	&:after
 		content ""
@@ -293,47 +329,54 @@ export default Vue.extend({
 
 	> .content
 
-		textarea
+		> input
+		> textarea
 			display block
-			padding 12px
-			margin 0
 			width 100%
-			max-width 100%
+			padding 12px
-			min-width 100%
-			min-height calc(16px + 12px + 12px)
 			font-size 16px
-			color #333
+			color isDark ? #fff : #333
-			background #fff
+			background isDark ? #191d23 : #fff
 			outline none
 			border solid 1px rgba($theme-color, 0.1)
 			border-radius 4px
-			transition border-color .3s ease
+			transition border-color .2s ease
 
 			&:hover
 				border-color rgba($theme-color, 0.2)
 				transition border-color .1s ease
 
-				& + *
-				& + * + *
-					border-color rgba($theme-color, 0.2)
-					transition border-color .1s ease
-
 			&:focus
-				color $theme-color
 				border-color rgba($theme-color, 0.5)
 				transition border-color 0s ease
 
-				& + *
-				& + * + *
-					border-color rgba($theme-color, 0.5)
-					transition border-color 0s ease
-
 			&:disabled
 				opacity 0.5
 
 			&::-webkit-input-placeholder
 				color rgba($theme-color, 0.3)
 
+		> input
+			margin-bottom 8px
+
+		> textarea
+			margin 0
+			max-width 100%
+			min-width 100%
+			min-height 64px
+
+			&:hover
+				& + *
+				& + * + *
+					border-color rgba($theme-color, 0.2)
+					transition border-color .1s ease
+
+			&:focus
+				& + *
+				& + * + *
+					border-color rgba($theme-color, 0.5)
+					transition border-color 0s ease
+
 			&.with
 				border-bottom solid 1px rgba($theme-color, 0.1) !important
 				border-radius 4px 4px 0 0
@@ -341,7 +384,7 @@ export default Vue.extend({
 		> .medias
 			margin 0
 			padding 0
-			background lighten($theme-color, 98%)
+			background isDark ? #181b23 : lighten($theme-color, 98%)
 			border solid 1px rgba($theme-color, 0.1)
 			border-top none
 			border-radius 0 0 4px 4px
@@ -392,7 +435,7 @@ export default Vue.extend({
 						cursor pointer
 
 		> .mk-poll-editor
-			background lighten($theme-color, 98%)
+			background isDark ? #181b23 : lighten($theme-color, 98%)
 			border solid 1px rgba($theme-color, 0.1)
 			border-top none
 			border-radius 0 0 4px 4px
@@ -496,7 +539,7 @@ export default Vue.extend({
 		width 40px
 		height 40px
 		font-size 1em
-		color rgba($theme-color, 0.5)
+		color isDark ? $theme-color : rgba($theme-color, 0.5)
 		background transparent
 		outline none
 		border solid 1px transparent
@@ -504,11 +547,11 @@ export default Vue.extend({
 
 		&:hover
 			background transparent
-			border-color rgba($theme-color, 0.3)
+			border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
 
 		&:active
 			color rgba($theme-color, 0.6)
-			background linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
+			background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
 			border-color rgba($theme-color, 0.5)
 			box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
 
@@ -533,4 +576,10 @@ export default Vue.extend({
 		border dashed 2px rgba($theme-color, 0.5)
 		pointer-events none
 
+.mk-post-form[data-darkmode]
+	root(true)
+
+.mk-post-form:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/components/renote-form.vue

@@ -4,8 +4,8 @@
 	<template v-if="!quote">
 		<footer>
 			<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
-			<button class="cancel" @click="cancel">%i18n:@cancel%</button>
+			<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
-			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
+			<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
 		</footer>
 	</template>
 	<template v-if="quote">
@@ -59,14 +59,14 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-renote-form
+root(isDark)
 
 	> .mk-note-preview
 		margin 16px 22px
 
 	> footer
 		height 72px
-		background lighten($theme-color, 95%)
+		background isDark ? #313543 : lighten($theme-color, 95%)
 
 		> .quote
 			position absolute
@@ -78,54 +78,19 @@ export default Vue.extend({
 			display block
 			position absolute
 			bottom 16px
-			cursor pointer
-			padding 0
-			margin 0
 			width 120px
 			height 40px
-			font-size 1em
-			outline none
-			border-radius 4px
 
-			&:focus
+			&.cancel
-				&:after
+				right 148px
-					content ""
-					pointer-events none
-					position absolute
-					top -5px
-					right -5px
-					bottom -5px
-					left -5px
-					border 2px solid rgba($theme-color, 0.3)
-					border-radius 8px
 
-		> .cancel
+			&.ok
-			right 148px
+				right 16px
-			color #888
-			background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-			border solid 1px #e2e2e2
 
-			&:hover
+.mk-renote-form[data-darkmode]
-				background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+	root(true)
-				border-color #dcdcdc
 
-			&:active
+.mk-renote-form:not([data-darkmode])
-				background #ececec
+	root(false)
-				border-color #dcdcdc
-
-		> .ok
-			right 16px
-			font-weight bold
-			color $theme-color-foreground
-			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-			border solid 1px lighten($theme-color, 15%)
-
-			&:hover
-				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-				border-color $theme-color
-
-			&:active
-				background $theme-color
-				border-color $theme-color
 
 </style>

src/client/app/desktop/views/components/repost-form.vue

@@ -1,131 +0,0 @@
-<template>
-<div class="mk-renote-form">
-	<mk-note-preview :note="note"/>
-	<template v-if="!quote">
-		<footer>
-			<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-renote-form.quote%</a>
-			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-renote-form.cancel%</button>
-			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!desktop.tags.mk-renote-form.reposting%' : '%i18n:!desktop.tags.mk-renote-form.renote%' }}</button>
-		</footer>
-	</template>
-	<template v-if="quote">
-		<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
-	</template>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['note'],
-	data() {
-		return {
-			wait: false,
-			quote: false
-		};
-	},
-	methods: {
-		ok() {
-			this.wait = true;
-			(this as any).api('notes/create', {
-				renoteId: this.note.id
-			}).then(data => {
-				this.$emit('posted');
-				(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.success%');
-			}).catch(err => {
-				(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.failure%');
-			}).then(() => {
-				this.wait = false;
-			});
-		},
-		cancel() {
-			this.$emit('canceled');
-		},
-		onQuote() {
-			this.quote = true;
-
-			this.$nextTick(() => {
-				(this.$refs.form as any).focus();
-			});
-		},
-		onChildFormPosted() {
-			this.$emit('posted');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-renote-form
-
-	> .mk-note-preview
-		margin 16px 22px
-
-	> footer
-		height 72px
-		background lighten($theme-color, 95%)
-
-		> .quote
-			position absolute
-			bottom 16px
-			left 28px
-			line-height 40px
-
-		button
-			display block
-			position absolute
-			bottom 16px
-			cursor pointer
-			padding 0
-			margin 0
-			width 120px
-			height 40px
-			font-size 1em
-			outline none
-			border-radius 4px
-
-			&:focus
-				&:after
-					content ""
-					pointer-events none
-					position absolute
-					top -5px
-					right -5px
-					bottom -5px
-					left -5px
-					border 2px solid rgba($theme-color, 0.3)
-					border-radius 8px
-
-		> .cancel
-			right 148px
-			color #888
-			background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-			border solid 1px #e2e2e2
-
-			&:hover
-				background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-				border-color #dcdcdc
-
-			&:active
-				background #ececec
-				border-color #dcdcdc
-
-		> .ok
-			right 16px
-			font-weight bold
-			color $theme-color-foreground
-			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-			border solid 1px lighten($theme-color, 15%)
-
-			&:hover
-				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-				border-color $theme-color
-
-			&:active
-				background $theme-color
-				border-color $theme-color
-
-</style>

src/client/app/desktop/views/components/settings.api.vue

@@ -29,8 +29,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .root.api
-	color #4a535a
-
 	code
 		display inline-block
 		padding 4px 6px

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

@@ -37,14 +37,19 @@
 		<section class="web" v-show="page == 'web'">
 			<h1>デザインと表示</h1>
 			<div class="div">
-				<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button>
+				<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
+			</div>
+			<div class="div">
+				<mk-switch v-model="darkmode" text="ダークモード"/>
+				<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
 			</div>
 			<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
 			<mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
+			<mk-switch v-model="os.i.clientSettings.showMyRenotes" @change="onChangeShowMyRenotes" text="自分の行ったRenoteをタイムラインに表示する"/>
+			<mk-switch v-model="os.i.clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes" text="Renoteされた自分の投稿をタイムラインに表示する"/>
 			<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
 				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
 			</mk-switch>
-			<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -229,6 +234,7 @@ export default Vue.extend({
 			version,
 			latestVersion: undefined,
 			checkingForUpdate: false,
+			darkmode: localStorage.getItem('darkmode') == 'true',
 			enableSounds: localStorage.getItem('enableSounds') == 'true',
 			autoPopout: localStorage.getItem('autoPopout') == 'true',
 			apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true,
@@ -252,6 +258,9 @@ export default Vue.extend({
 		apiViaStream() {
 			localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false');
 		},
+		darkmode() {
+			(this as any)._updateDarkmode_(this.darkmode);
+		},
 		enableSounds() {
 			localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
 		},
@@ -298,6 +307,12 @@ export default Vue.extend({
 				autoWatch: v
 			});
 		},
+		onChangeDark(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'dark',
+				value: v
+			});
+		},
 		onChangeShowPostFormOnTopOfTl(v) {
 			(this as any).api('i/update_client_setting', {
 				name: 'showPostFormOnTopOfTl',
@@ -310,6 +325,18 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeShowMyRenotes(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'showMyRenotes',
+				value: v
+			});
+		},
+		onChangeShowRenotedMyNotes(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'showRenotedMyNotes',
+				value: v
+			});
+		},
 		onChangeShowMaps(v) {
 			(this as any).api('i/update_client_setting', {
 				name: 'showMaps',
@@ -365,7 +392,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-settings
+root(isDark)
 	display flex
 	width 100%
 	height 100%
@@ -376,13 +403,13 @@ export default Vue.extend({
 		height 100%
 		padding 16px 0 0 0
 		overflow auto
-		border-right solid 1px #ddd
+		border-right solid 1px isDark ? #1c2023 : #ddd
 
 		> p
 			display block
 			padding 10px 16px
 			margin 0
-			color #666
+			color isDark ? #9aa2a7 : #666
 			cursor pointer
 			user-select none
 			transition margin-left 0.2s ease
@@ -391,7 +418,7 @@ export default Vue.extend({
 				margin-right 4px
 
 			&:hover
-				color #555
+				color isDark ? #fff : #555
 
 			&.active
 				margin-left 8px
@@ -405,14 +432,14 @@ export default Vue.extend({
 
 		> section
 			margin 32px
-			color #4a535a
+			color isDark ? #c4ccd2 : #4a535a
 
 			> h1
 				margin 0 0 1em 0
 				padding 0 0 8px 0
 				font-size 1em
-				color #555
+				color isDark ? #e3e7ea : #555
-				border-bottom solid 1px #eee
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			&, >>> *
 				.ui.button.block
@@ -425,13 +452,18 @@ export default Vue.extend({
 						margin 0 0 1em 0
 						padding 0 0 8px 0
 						font-size 1em
-						color #555
+						color isDark ? #e3e7ea : #555
-						border-bottom solid 1px #eee
+						border-bottom solid 1px isDark ? #1c2023 : #eee
 
 		> .web
 			> .div
-				border-bottom solid 1px #eee
+				border-bottom solid 1px isDark ? #1c2023 : #eee
-				padding 0 0 16px 0
+				margin 16px 0
-				margin 0 0 16px 0
+
+.mk-settings[data-darkmode]
+	root(true)
+
+.mk-settings:not([data-darkmode])
+	root(false)
 
 </style>

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

@@ -1,24 +1,23 @@
 <template>
-<div class="mk-home-timeline">
+<div class="mk-timeline-core">
 	<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;
 
 export default Vue.extend({
 	props: {
@@ -33,9 +32,9 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			notes: [],
 			connection: null,
 			connectionId: null,
+			unreadCount: 0,
 			date: null
 		};
 	},
@@ -59,6 +58,10 @@ export default Vue.extend({
 				: this.src == 'local'
 					? 'notes/local-timeline'
 					: 'notes/global-timeline';
+		},
+
+		canFetchMore(): boolean {
+			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
@@ -72,6 +75,9 @@ export default Vue.extend({
 			this.connection.on('unfollow', this.onChangeFollowing);
 		}
 
+		document.addEventListener('keydown', this.onKeydown);
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
+
 		this.fetch();
 	},
 
@@ -82,56 +88,62 @@ export default Vue.extend({
 			this.connection.off('unfollow', this.onChangeFollowing);
 		}
 		this.stream.dispose(this.connectionId);
+
+		document.removeEventListener('keydown', this.onKeydown);
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 
 	methods: {
-		fetch(cb?) {
+		fetch() {
 			this.fetching = true;
 
-			(this as any).api(this.endpoint, {
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				limit: 11,
+				(this as any).api(this.endpoint, {
-				untilDate: this.date ? this.date.getTime() : undefined
+					limit: fetchLimit + 1,
-			}).then(notes => {
+					untilDate: this.date ? this.date.getTime() : undefined,
-				if (notes.length == 11) {
+					includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
-					notes.pop();
+					includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
-					this.existMore = true;
+				}).then(notes => {
-				}
+					if (notes.length == fetchLimit + 1) {
-				this.notes = notes;
+						notes.pop();
-				this.fetching = false;
+						this.existMore = true;
-				this.$emit('loaded');
+					}
-				if (cb) cb();
+					res(notes);
-			});
+					this.fetching = false;
+					this.$emit('loaded');
+				}, rej);
+			}));
 		},
 
 		more() {
-			if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return;
+			if (!this.canFetchMore) return;
+
 			this.moreFetching = true;
+
 			(this as any).api(this.endpoint, {
-				limit: 11,
+				limit: fetchLimit + 1,
-				untilId: this.notes[this.notes.length - 1].id
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
-				if (notes.length == 11) {
+				if (notes.length == fetchLimit + 1) {
 					notes.pop();
 				} else {
 					this.existMore = false;
 				}
-				this.notes = this.notes.concat(notes);
+				notes.forEach(n => (this.$refs.timeline as any).append(n));
 				this.moreFetching = false;
 			});
 		},
 
 		onNote(note) {
-			// サウンドを再生する
+			if (document.hidden && note.userId !== (this as any).os.i.id) {
-			if ((this as any).os.isEnableSounds) {
+				this.unreadCount++;
-				const sound = new Audio(`${url}/assets/post.mp3`);
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
-				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
-				sound.play();
 			}
 
-			this.notes.unshift(note);
+			// Prepend a note
-
+			(this.$refs.timeline as any).prepend(note);
-			const isTop = window.scrollY > 8;
-			if (isTop) this.notes.pop();
 		},
 
 		onChangeFollowing() {
@@ -145,31 +157,51 @@ export default Vue.extend({
 		warp(date) {
 			this.date = date;
 			this.fetch();
+		},
+
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
+			}
+		},
+
+		onKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					this.focus();
+				}
+			}
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.mk-home-timeline
+@import '~const.styl'
+
+.mk-timeline-core
 	> .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" :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,42 +26,29 @@ export default Vue.extend({
 
 	data() {
 		return {
-			src: 'home'
+			src: 'home',
+			list: null
 		};
 	},
 
 	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
-		window.addEventListener('scroll', this.onScroll);
-
 		(this.$refs.tl as any).$once('loaded', () => {
 			this.$emit('loaded');
 		});
 	},
 
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onKeydown);
-		window.removeEventListener('scroll', this.onScroll);
-	},
-
 	methods: {
-		onScroll() {
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
-				const current = window.scrollY + window.innerHeight;
-				if (current > document.body.offsetHeight - 8) (this.$refs.tl as any).more();
-			}
-		},
-
-		onKeydown(e) {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					(this.$refs.tl as any).focus();
-				}
-			}
-		},
-
 		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();
+			});
 		}
 	}
 });
@@ -66,16 +57,35 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-timeline
+root(isDark)
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
 	> header
 		padding 0 8px
 		z-index 10
+		background isDark ? #313543 : #fff
+		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
@@ -83,7 +93,7 @@ export default Vue.extend({
 			font-size 12px
 			user-select none
 
-			&[data-is-active]
+			&[data-active]
 				color $theme-color
 				cursor default
 				font-weight bold
@@ -98,11 +108,17 @@ export default Vue.extend({
 					height 2px
 					background $theme-color
 
-			&:not([data-is-active])
+			&:not([data-active])
-				color #6f7477
+				color isDark ? #9aa2a7 : #6f7477
 				cursor pointer
 
 				&:hover
-					color #525a5f
+					color isDark ? #d9dcde : #525a5f
+
+.mk-timeline[data-darkmode]
+	root(true)
+
+.mk-timeline:not([data-darkmode])
+	root(false)
 
 </style>

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

@@ -8,23 +8,34 @@
 		<div class="menu" v-if="isOpen">
 			<ul>
 				<li>
-					<router-link :to="`/@${ os.i.username }`">%fa:user%%i18n:@profile%%fa:angle-right%</router-link>
+					<router-link :to="`/@${ os.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
 				</li>
 				<li @click="drive">
-					<p>%fa:cloud%%i18n:@drive%%fa:angle-right%</p>
+					<p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
+				</li>
+				<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>
-					<a href="/i/customize-home">%fa:wrench%%i18n:@customize%%fa:angle-right%</a>
+					<a href="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</a>
 				</li>
 				<li @click="settings">
-					<p>%fa:cog%%i18n:@settings%%fa:angle-right%</p>
+					<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
 				</li>
 			</ul>
 			<ul>
 				<li @click="signout">
-					<p>%fa:power-off%%i18n:@signout%%fa:angle-right%</p>
+					<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
+				</li>
+			</ul>
+			<ul>
+				<li @click="dark">
+					<p><span>%i18n:@dark%</span><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
 				</li>
 			</ul>
 		</div>
@@ -34,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';
@@ -72,12 +84,22 @@ 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);
 		},
 		signout() {
 			(this as any).os.signout();
+		},
+		dark() {
+			(this as any)._updateDarkmode_(!(this as any)._darkmode_);
 		}
 	}
 });
@@ -86,7 +108,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.account
+root(isDark)
 	> .header
 		display block
 		margin 0
@@ -101,13 +123,13 @@ export default Vue.extend({
 
 		&:hover
 		&[data-active='true']
-			color darken(#9eaba8, 20%)
+			color isDark ? #fff : darken(#9eaba8, 20%)
 
 			> .avatar
 				filter saturate(150%)
 
 		&:active
-			color darken(#9eaba8, 30%)
+			color isDark ? #fff : darken(#9eaba8, 30%)
 
 		> .username
 			display block
@@ -134,13 +156,14 @@ export default Vue.extend({
 			transition filter 100ms ease
 
 	> .menu
+		$bgcolor = isDark ? #282c37 : #fff
 		display block
 		position absolute
 		top 56px
 		right -2px
 		width 230px
 		font-size 0.8em
-		background #fff
+		background $bgcolor
 		border-radius 4px
 		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
 
@@ -165,7 +188,7 @@ export default Vue.extend({
 			right 12px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px #fff
+			border-bottom solid 14px $bgcolor
 			border-left solid 14px transparent
 
 		ul
@@ -176,7 +199,7 @@ export default Vue.extend({
 
 			& + ul
 				padding-top 10px
-				border-top solid 1px #eee
+				border-top solid 1px isDark ? #1c2023 : #eee
 
 			> li
 				display block
@@ -190,16 +213,20 @@ export default Vue.extend({
 					padding 0 28px
 					margin 0
 					line-height 40px
-					color #868C8C
+					color isDark ? #c8cece : #868C8C
 					cursor pointer
 
 					*
 						pointer-events none
 
-					> [data-fa]:first-of-type
+					> span:first-child
-						margin-right 6px
+						padding-left 22px
 
-					> [data-fa]:last-of-type
+					> [data-fa]:first-child
+						margin-right 6px
+						width 16px
+
+					> [data-fa]:last-child
 						display block
 						position absolute
 						top 0
@@ -217,9 +244,25 @@ export default Vue.extend({
 					&:active
 						background darken($theme-color, 10%)
 
+					&.signout
+						$color = #e64137
+
+						&:hover, &:active
+							background $color
+							color #fff
+
+						&:active
+							background darken($color, 10%)
+
 .zoom-in-top-enter-active,
 .zoom-in-top-leave-active {
 	transform-origin: center -16px;
 }
 
+.account[data-darkmode]
+	root(true)
+
+.account:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -99,7 +99,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.nav
+root(isDark)
 	display inline-block
 	margin 0
 	padding 0
@@ -131,7 +131,7 @@ export default Vue.extend({
 				padding 0 24px
 				font-size 13px
 				font-variant small-caps
-				color #9eaba8
+				color isDark ? #b8c5ca : #9eaba8
 				text-decoration none
 				transition none
 				cursor pointer
@@ -140,7 +140,7 @@ export default Vue.extend({
 					pointer-events none
 
 				&:hover
-					color darken(#9eaba8, 20%)
+					color isDark ? #fff : darken(#9eaba8, 20%)
 					text-decoration none
 
 				> [data-fa]:first-child
@@ -164,4 +164,10 @@ export default Vue.extend({
 				@media (max-width 700px)
 					padding 0 12px
 
+.nav[data-darkmode]
+	root(true)
+
+.nav:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -84,7 +84,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.notifications
+root(isDark)
 
 	> button
 		display block
@@ -101,10 +101,10 @@ export default Vue.extend({
 
 		&:hover
 		&[data-active='true']
-			color darken(#9eaba8, 20%)
+			color isDark ? #fff : darken(#9eaba8, 20%)
 
 		&:active
-			color darken(#9eaba8, 30%)
+			color isDark ? #fff : darken(#9eaba8, 30%)
 
 		> [data-fa].bell
 			font-size 1.2em
@@ -117,12 +117,13 @@ export default Vue.extend({
 			color $theme-color
 
 	> .pop
+		$bgcolor = isDark ? #282c37 : #fff
 		display block
 		position absolute
 		top 56px
 		right -72px
 		width 300px
-		background #fff
+		background $bgcolor
 		border-radius 4px
 		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
 
@@ -147,7 +148,7 @@ export default Vue.extend({
 			right 74px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px #fff
+			border-bottom solid 14px $bgcolor
 			border-left solid 14px transparent
 
 		> .mk-notifications
@@ -155,4 +156,10 @@ export default Vue.extend({
 			font-size 1rem
 			overflow auto
 
+.notifications[data-darkmode]
+	root(true)
+
+.notifications:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -43,6 +43,8 @@ export default Vue.extend({
 		XClock,
 	},
 	mounted() {
+		this.$store.commit('setUiHeaderHeight', 48);
+
 		if ((this as any).os.isSignedIn) {
 			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
 			const isHisasiburi = ago >= 3600;
@@ -169,10 +171,10 @@ root(isDark)
 						> .mk-ui-header-search
 							display none
 
-.header[data-is-darkmode]
+.header[data-darkmode]
 	root(true)
 
-.header
+.header:not([data-darkmode])
 	root(false)
 
 </style>

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/user-preview.vue

@@ -6,7 +6,7 @@
 			<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="title">
-			<router-link class="name" :to="u | userPage">{{ u.name }}</router-link>
+			<router-link class="name" :to="u | userPage">{{ u | userName }}</router-link>
 			<p class="username">@{{ u | acct }}</p>
 		</div>
 		<div class="description">{{ u.description }}</div>
@@ -87,12 +87,12 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-user-preview
+root(isDark)
 	position absolute
 	z-index 2048
 	margin-top -8px
 	width 250px
-	background #fff
+	background isDark ? #282c37 : #fff
 	background-clip content-box
 	border solid 1px rgba(0, 0, 0, 0.1)
 	border-radius 4px
@@ -101,7 +101,7 @@ export default Vue.extend({
 
 	> .banner
 		height 84px
-		background-color #f5f5f5
+		background-color isDark ? #1c1e26 : #f5f5f5
 		background-size cover
 		background-position center
 
@@ -117,7 +117,7 @@ export default Vue.extend({
 			width 58px
 			height 58px
 			margin 0
-			border solid 3px #fff
+			border solid 3px isDark ? #282c37 : #fff
 			border-radius 8px
 
 	> .title
@@ -129,19 +129,19 @@ export default Vue.extend({
 			margin 0
 			font-weight bold
 			line-height 16px
-			color #656565
+			color isDark ? #fff : #656565
 
 		> .username
 			display block
 			margin 0
 			line-height 16px
 			font-size 0.8em
-			color #999
+			color isDark ? #606984 : #999
 
 	> .description
 		padding 0 16px
 		font-size 0.7em
-		color #555
+		color isDark ? #9ea4ad : #555
 
 	> .status
 		padding 8px 16px
@@ -164,4 +164,10 @@ export default Vue.extend({
 		top 92px
 		right 8px
 
+.mk-user-preview[data-darkmode]
+	root(true)
+
+.mk-user-preview: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

@@ -34,8 +34,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-widget-container
+root(isDark)
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 	overflow hidden
@@ -45,6 +45,8 @@ export default Vue.extend({
 		border none !important
 
 	> header
+		background isDark ? #313543 : #fff
+
 		> .title
 			z-index 1
 			margin 0
@@ -52,11 +54,11 @@ export default Vue.extend({
 			line-height 42px
 			font-size 0.9em
 			font-weight bold
-			color #888
+			color isDark ? #e3e5e8 : #888
 			box-shadow 0 1px rgba(0, 0, 0, 0.07)
 
 			> [data-fa]
-				margin-right 4px
+				margin-right 6px
 
 			&:empty
 				display none
@@ -70,16 +72,23 @@ export default Vue.extend({
 			width 42px
 			font-size 0.9em
 			line-height 42px
-			color #ccc
+			color isDark ? #9baec8 : #ccc
 
 			&:hover
-				color #aaa
+				color isDark ? #b2c1d5 : #aaa
 
 			&:active
-				color #999
+				color isDark ? #b2c1d5 : #999
 
 		&.withGradient
 			> .title
-				background linear-gradient(to bottom, #fff, #ececec)
+				background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
 				box-shadow 0 1px rgba(#000, 0.11)
+
+.mk-widget-container[data-darkmode]
+	root(true)
+
+.mk-widget-container:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -465,7 +465,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-window
+root(isDark)
 	display block
 
 	> .bg
@@ -559,7 +559,7 @@ export default Vue.extend({
 		> .body
 			height 100%
 			overflow hidden
-			background #fff
+			background isDark ? #282C37 : #fff
 			border-radius 6px
 			box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
 
@@ -571,12 +571,12 @@ export default Vue.extend({
 				overflow hidden
 				white-space nowrap
 				cursor move
-				background #fff
+				background isDark ? #313543 : #fff
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
 				&.withGradient
-					background linear-gradient(to bottom, #fff, #ececec)
+					background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
 					box-shadow 0 1px 0 rgba(#000, 0.15)
 
 				&, *
@@ -593,7 +593,7 @@ export default Vue.extend({
 					font-size 1em
 					line-height $header-height
 					font-weight normal
-					color #666
+					color isDark ? #e3e5e8 : #666
 
 				> div:last-child
 					position absolute
@@ -608,16 +608,16 @@ export default Vue.extend({
 						padding 0
 						cursor pointer
 						font-size 1em
-						color rgba(#000, 0.4)
+						color isDark ? #9baec8 : rgba(#000, 0.4)
 						border none
 						outline none
 						background transparent
 
 						&:hover
-							color rgba(#000, 0.6)
+							color isDark ? #b2c1d5 : rgba(#000, 0.6)
 
 						&:active
-							color darken(#000, 30%)
+							color isDark ? #b2c1d5 : darken(#000, 30%)
 
 						> [data-fa]
 							padding 0
@@ -632,4 +632,10 @@ export default Vue.extend({
 		> .main > .body > .content
 			height calc(100% - 40px)
 
+.mk-window[data-darkmode]
+	root(true)
+
+.mk-window:not([data-darkmode])
+	root(false)
+
 </style>

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

@@ -0,0 +1,73 @@
+<template>
+<mk-ui>
+	<main v-if="!fetching">
+		<template v-for="favorite in favorites">
+			<mk-note-detail :note="favorite.note" :key="favorite.note.id"/>
+		</template>
+		<a v-if="existMore" @click="more">さらに読み込む</a>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			favorites: [],
+			existMore: false,
+			moreFetching: false
+		};
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('i/favorites', {
+				limit: 11
+			}).then(favorites => {
+				if (favorites.length == 11) {
+					this.existMore = true;
+					favorites.pop();
+				}
+
+				this.favorites = favorites;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		more() {
+			this.moreFetching = true;
+			(this as any).api('i/favorites', {
+				limit: 11,
+				maxId: this.favorites[this.favorites.length - 1].id
+			}).then(favorites => {
+				if (favorites.length == 11) {
+					this.existMore = true;
+					favorites.pop();
+				} else {
+					this.existMore = false;
+				}
+
+				this.favorites = this.favorites.concat(favorites);
+				this.moreFetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	margin 0 auto
+	padding 16px
+	max-width 700px
+</style>

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.header.vue

@@ -1,5 +1,6 @@
 <template>
 <div class="header" :data-is-dark-background="user.bannerUrl != null">
+	<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>
 	<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
 		<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
@@ -73,14 +74,21 @@ export default Vue.extend({
 	background #f7f7f7
 	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
 
+	> .is-suspended
 	> .is-remote
-		padding 16px
+		&.is-suspended
-		color #573c08
+			color #570808
-		background #fff0db
+			background #ffdbdb
+
+		&.is-remote
+			color #573c08
+			background #fff0db
 
 		> p
 			margin 0 auto
-			max-width 1024px
+			padding 14px 16px
+			max-width 1200px
+			font-size 14px
 
 			> a
 				font-weight bold

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/widgets/messaging.vue

@@ -1,13 +1,18 @@
 <template>
 <div class="mkw-messaging">
-	<p class="title" v-if="props.design == 0">%fa:comments%%i18n:@title%</p>
+	<mk-widget-container :show-header="props.design == 0">
-	<mk-messaging ref="index" compact @navigate="navigate"/>
+		<template slot="header">%fa:comments%%i18n:@title%</template>
+		<button slot="func" @click="add">%fa:plus%</button>
+
+		<mk-messaging ref="index" compact @navigate="navigate"/>
+	</mk-widget-container>
 </div>
 </template>
 
 <script lang="ts">
 import define from '../../../common/define-widget';
 import MkMessagingRoomWindow from '../components/messaging-room-window.vue';
+import MkMessagingWindow from '../components/messaging-window.vue';
 
 export default define({
 	name: 'messaging',
@@ -21,6 +26,9 @@ export default define({
 				user: user
 			});
 		},
+		add() {
+			(this as any).os.new(MkMessagingWindow);
+		},
 		func() {
 			if (this.props.design == 1) {
 				this.props.design = 0;
@@ -34,25 +42,7 @@ export default define({
 
 <style lang="stylus" scoped>
 .mkw-messaging
-	overflow hidden
+	.mk-messaging
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		z-index 2
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-		> [data-fa]
-			margin-right 4px
-
-	> .mk-messaging
 		max-height 250px
 		overflow auto
 

src/client/app/desktop/views/widgets/notifications.vue

@@ -1,10 +1,11 @@
 <template>
 <div class="mkw-notifications">
-	<template v-if="!props.compact">
+	<mk-widget-container :show-header="!props.compact">
-		<p class="title">%fa:R bell%%i18n:@title%</p>
+		<template slot="header">%fa:R bell%%i18n:@title%</template>
-		<button @click="settings" title="%i18n:@settings%">%fa:cog%</button>
+		<button slot="func" title="%i18n:@settings%" @click="settings">%fa:cog%</button>
-	</template>
+
-	<mk-notifications/>
+		<mk-notifications :class="$style.notifications"/>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -27,44 +28,9 @@ export default define({
 });
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus" module>
-.mkw-notifications
+.notifications
-	background #fff
+	max-height 300px
-	border solid 1px rgba(0, 0, 0, 0.075)
+	overflow auto
-	border-radius 6px
-
-	> .title
-		z-index 1
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
-		> [data-fa]
-			margin-right 4px
-
-	> button
-		position absolute
-		z-index 2
-		top 0
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
-
-		&:hover
-			color #aaa
-
-		&:active
-			color #999
-
-	> .mk-notifications
-		max-height 300px
-		overflow auto
 
 </style>

src/client/app/desktop/views/widgets/polls.vue

@@ -1,16 +1,19 @@
 <template>
 <div class="mkw-polls">
-	<template v-if="!props.compact">
+	<mk-widget-container :show-header="!props.compact">
-		<p class="title">%fa:chart-pie%%i18n:@title%</p>
+		<template slot="header">%fa:chart-pie%%i18n:@title%</template>
-		<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
-	</template>
+
-	<div class="poll" v-if="!fetching && poll != null">
+		<div class="mkw-polls--body" :data-darkmode="_darkmode_">
-		<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
+			<div class="poll" v-if="!fetching && poll != null">
-		<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
+				<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
-		<mk-poll :note="poll"/>
+				<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
-	</div>
+				<mk-poll :note="poll"/>
-	<p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p>
+			</div>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p>
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		</div>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -60,44 +63,11 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-polls
+root(isDark)
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		border-bottom solid 1px #eee
-
-		> [data-fa]
-			margin-right 4px
-
-	> button
-		position absolute
-		z-index 2
-		top 0
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
-
-		&:hover
-			color #aaa
-
-		&:active
-			color #999
-
 	> .poll
 		padding 16px
 		font-size 12px
-		color #555
+		color isDark ? #9ea4ad : #555
 
 		> p
 			margin 0 0 8px 0
@@ -120,4 +90,10 @@ export default define({
 		> [data-fa]
 			margin-right 4px
 
+.mkw-polls--body[data-darkmode]
+	root(true)
+
+.mkw-polls--body:not([data-darkmode])
+	root(false)
+
 </style>

src/client/app/desktop/views/widgets/profile.vue

@@ -42,9 +42,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-profile
+root(isDark)
 	overflow hidden
-	background #fff
+	background isDark ? #282c37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
@@ -91,7 +91,7 @@ export default define({
 
 	> .banner
 		height 100px
-		background-color #f5f5f5
+		background-color isDark ? #303e4a : #f5f5f5
 		background-size cover
 		background-position center
 		cursor pointer
@@ -104,7 +104,7 @@ export default define({
 		width 58px
 		height 58px
 		margin 0
-		border solid 3px #fff
+		border solid 3px isDark ? #282c37 : #fff
 		border-radius 8px
 		vertical-align bottom
 		cursor pointer
@@ -114,13 +114,19 @@ export default define({
 		margin 10px 0 0 84px
 		line-height 16px
 		font-weight bold
-		color #555
+		color isDark ? #fff : #555
 
 	> .username
 		display block
 		margin 4px 0 8px 84px
 		line-height 16px
 		font-size 0.9em
-		color #999
+		color isDark ? #606984 : #999
+
+.mkw-profile[data-darkmode]
+	root(true)
+
+.mkw-profile:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/desktop/views/widgets/trends.vue

@@ -1,15 +1,18 @@
 <template>
 <div class="mkw-trends">
-	<template v-if="!props.compact">
+	<mk-widget-container :show-header="!props.compact">
-		<p class="title">%fa:fire%%i18n:@title%</p>
+		<template slot="header">%fa:fire%%i18n:@title%</template>
-		<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
-	</template>
+
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<div class="mkw-trends--body">
-	<div class="note" v-else-if="note != null">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-		<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
+			<div class="note" v-else-if="note != null">
-		<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
+				<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
-	</div>
+				<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
-	<p class="empty" v-else>%i18n:@nothing%</p>
+			</div>
+			<p class="empty" v-else>%i18n:@nothing%</p>
+		</div>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -63,67 +66,41 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-trends
+root(isDark)
-	background #fff
+	.mkw-trends--body
-	border solid 1px rgba(0, 0, 0, 0.075)
+		> .note
-	border-radius 6px
+			padding 16px
+			font-size 12px
+			font-style oblique
+			color #555
 
-	> .title
+			> p
-		margin 0
+				margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		border-bottom solid 1px #eee
 
-		> [data-fa]
+			> .text,
-			margin-right 4px
+			> .author
+				> a
+					color inherit
 
-	> button
+		> .empty
-		position absolute
+			margin 0
-		z-index 2
+			padding 16px
-		top 0
+			text-align center
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
-
-		&:hover
 			color #aaa
 
-		&:active
+		> .fetching
-			color #999
-
-	> .note
-		padding 16px
-		font-size 12px
-		font-style oblique
-		color #555
-
-		> p
 			margin 0
+			padding 16px
+			text-align center
+			color #aaa
 
-		> .text,
+			> [data-fa]
-		> .author
+				margin-right 4px
-			> a
-				color inherit
 
-	> .empty
+.mkw-trends[data-darkmode]
-		margin 0
+	root(true)
-		padding 16px
-		text-align center
-		color #aaa
 
-	> .fetching
+.mkw-trends:not([data-darkmode])
-		margin 0
+	root(false)
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-fa]
-			margin-right 4px
 
 </style>

src/client/app/desktop/views/widgets/users.vue

@@ -1,23 +1,26 @@
 <template>
 <div class="mkw-users">
-	<template v-if="!props.compact">
+	<mk-widget-container :show-header="!props.compact">
-		<p class="title">%fa:users%%i18n:@title%</p>
+		<template slot="header">%fa:users%%i18n:@title%</template>
-		<button @click="refresh" title="%i18n:@refresh%">%fa:sync%</button>
+		<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
-	</template>
+
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<div class="mkw-users--body">
-	<template v-else-if="users.length != 0">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-		<div class="user" v-for="_user in users">
+			<template v-else-if="users.length != 0">
-			<router-link class="avatar-anchor" :to="_user | userPage">
+				<div class="user" v-for="_user in users">
-				<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
+					<router-link class="avatar-anchor" :to="_user | userPage">
-			</router-link>
+						<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
-			<div class="body">
+					</router-link>
-				<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
+					<div class="body">
-				<p class="username">@{{ _user | acct }}</p>
+						<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
-			</div>
+						<p class="username">@{{ _user | acct }}</p>
-			<mk-follow-button :user="_user"/>
+					</div>
+					<mk-follow-button :user="_user"/>
+				</div>
+			</template>
+			<p class="empty" v-else>%i18n:@no-one%</p>
 		</div>
-	</template>
+	</mk-widget-container>
-	<p class="empty" v-else>%i18n:@no-one%</p>
 </div>
 </template>
 
@@ -71,100 +74,74 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-users
+root(isDark)
-	background #fff
+	.mkw-users--body
-	border solid 1px rgba(0, 0, 0, 0.075)
+		> .user
-	border-radius 6px
+			padding 16px
+			border-bottom solid 1px isDark ? #1c2023 : #eee
 
-	> .title
+			&:last-child
-		margin 0
+				border-bottom none
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		border-bottom solid 1px #eee
 
-		> [data-fa]
+			&:after
-			margin-right 4px
+				content ""
+				display block
+				clear both
 
-	> button
+			> .avatar-anchor
-		position absolute
+				display block
-		z-index 2
+				float left
-		top 0
+				margin 0 12px 0 0
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
 
-		&:hover
+				> .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
+
+			> .mk-follow-button
+				position absolute
+				top 16px
+				right 16px
+
+		> .empty
+			margin 0
+			padding 16px
+			text-align center
 			color #aaa
 
-		&:active
+		> .fetching
-			color #999
+			margin 0
+			padding 16px
+			text-align center
+			color #aaa
 
-	> .user
+			> [data-fa]
-		padding 16px
+				margin-right 4px
-		border-bottom solid 1px #eee
 
-		&:last-child
+.mkw-users[data-darkmode]
-			border-bottom none
+	root(true)
 
-		&:after
+.mkw-users:not([data-darkmode])
-			content ""
+	root(false)
-			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 #555
-
-			> .username
-				display block
-				margin 0
-				font-size 15px
-				line-height 16px
-				color #ccc
-
-		> .mk-follow-button
-			position absolute
-			top 16px
-			right 16px
-
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-fa]
-			margin-right 4px
 
 </style>

src/client/app/init.css

@@ -56,6 +56,13 @@ body > noscript {
 			animation-delay: 0.32s;
 		}
 
+html[data-darkmode] #ini {
+	background: #191b22;
+}
+	html[data-darkmode] #ini > p {
+		color: #fff;
+	}
+
 @keyframes ini {
 	0%, 80%, 100% {
 		opacity: 1;

src/client/app/init.ts

@@ -3,6 +3,7 @@
  */
 
 import Vue from 'vue';
+import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import VModal from 'vue-js-modal';
 import * as TreeView from 'vue-json-tree-view';
@@ -23,6 +24,7 @@ switch (lang) {
 	default: elementLocale = ElementLocaleEn; break;
 }
 
+Vue.use(Vuex);
 Vue.use(VueRouter);
 Vue.use(VModal);
 Vue.use(TreeView);
@@ -39,6 +41,17 @@ require('./common/views/widgets');
 // Register global filters
 require('./common/views/filters');
 
+const store = new Vuex.Store({
+	state: {
+		uiHeaderHeight: 0
+	},
+	mutations: {
+		setUiHeaderHeight(state, height) {
+			state.uiHeaderHeight = height;
+		}
+	}
+});
+
 Vue.mixin({
 	destroyed(this: any) {
 		if (this.$el.parentNode) {
@@ -47,6 +60,48 @@ Vue.mixin({
 	}
 });
 
+// Dark/Light
+const bus = new Vue();
+Vue.mixin({
+	data() {
+		return {
+			_darkmode_: localStorage.getItem('darkmode') == 'true'
+		};
+	},
+	beforeCreate() {
+		// なぜか警告が出るので
+		this._darkmode_ = localStorage.getItem('darkmode') == 'true';
+	},
+	beforeDestroy() {
+		bus.$off('updated', this._onDarkmodeUpdated_);
+	},
+	mounted() {
+		this._onDarkmodeUpdated_(this._darkmode_);
+		bus.$on('updated', this._onDarkmodeUpdated_);
+	},
+	methods: {
+		_updateDarkmode_(v) {
+			localStorage.setItem('darkmode', v.toString());
+			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;
+			if (v) {
+				this.$el.setAttribute('data-darkmode', 'true');
+			} else {
+				this.$el.removeAttribute('data-darkmode');
+			}
+			this._darkmode_ = v;
+			this.$forceUpdate();
+		}
+	}
+});
+
 /**
  * APP ENTRY POINT!
  */
@@ -108,6 +163,7 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 			});
 
 			const app = new Vue({
+				store,
 				router,
 				created() {
 					this.$watch('os.i', i => {

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

@@ -93,6 +93,8 @@ export default Vue.extend({
 				color #b2b8bb
 
 		> .body
+			max-height 128px
+			overflow hidden
 
 			> .text
 				cursor default

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

@@ -4,15 +4,13 @@
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<p>
+		<router-link class="avatar-anchor" :to="note.user | userPage">
-			<router-link class="avatar-anchor" :to="note.user | userPage">
+			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
-			</router-link>
+		%fa:retweet%
-			%fa:retweet%
+		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
-			<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
+		<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-			<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
@@ -33,27 +31,33 @@
 			</header>
 			<div class="body">
 				<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
-				<div class="text">
+				<p v-if="p.cw != null" class="cw">
-					<a class="reply" v-if="p.reply">
+					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-						%fa:reply%
+					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
-					</a>
+				</p>
-					<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+				<div class="content" v-show="p.cw == null || showContent">
-					<a class="rp" v-if="p.renote != null">RP:</a>
+					<div class="text">
+						<a class="reply" v-if="p.reply">
+							%fa:reply%
+						</a>
+						<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+						<a class="rp" v-if="p.renote != null">RP:</a>
+					</div>
+					<div class="media" v-if="p.media.length > 0">
+						<mk-media-list :media-list="p.media"/>
+					</div>
+					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+					<div class="tags" v-if="p.tags && p.tags.length > 0">
+						<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+					</div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+					<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+					<div class="map" v-if="p.geo" ref="map"></div>
+					<div class="renote" v-if="p.renote">
+						<mk-note-preview :note="p.renote"/>
+					</div>
 				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
 				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@@ -94,6 +98,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			connection: null,
 			connectionId: null
 		};
@@ -231,7 +236,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.note
+root(isDark)
 	font-size 12px
 	border-bottom solid 1px #eaeaea
 
@@ -251,42 +256,47 @@ export default Vue.extend({
 		font-size 16px
 
 	> .renote
+		display flex
+		align-items baseline
+		padding 8px 16px
+		line-height 28px
 		color #9dbb00
 		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-		> p
+		@media (min-width 500px)
-			margin 0
+			padding 16px
-			padding 8px 16px
-			line-height 28px
 
-			@media (min-width 500px)
+		.avatar-anchor
-				padding 16px
+			display inline-block
 
-			.avatar-anchor
+			.avatar
-				display inline-block
+				vertical-align bottom
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
-				.avatar
+		[data-fa]
-					vertical-align bottom
+			margin-right 4px
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
 
-			[data-fa]
+		> span
-				margin-right 4px
+			flex-shrink 0
 
-			.name
+			&:last-of-type
-				font-weight bold
+				margin-right 8px
+
+		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
+			font-weight bold
 
 		> .mk-time
-			position absolute
+			display block
-			top 8px
+			margin-left auto
-			right 16px
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
-
-			@media (min-width 500px)
-				top 16px
 
 		& + article
 			padding-top 8px
@@ -368,6 +378,8 @@ export default Vue.extend({
 
 				> .username
 					margin 0 0.5em 0 0
+					overflow hidden
+					text-overflow ellipsis
 					color #ccc
 
 				> .info
@@ -383,101 +395,140 @@ export default Vue.extend({
 
 			> .body
 
-				> .text
+				> .cw
+					cursor default
 					display block
 					margin 0
 					padding 0
 					overflow-wrap break-word
 					font-size 1.1em
-					color #717171
+					color isDark ? #fff : #717171
 
-					>>> .quote
+					> .text
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
 						margin-right 8px
+
+					> .toggle
+						display inline-block
+						padding 4px 8px
+						font-size 0.7em
+						color isDark ? #393f4f : #fff
+						background isDark ? #687390 : #b1b9c1
+						border-radius 2px
+						cursor pointer
+						user-select none
+
+						&:hover
+							background isDark ? #707b97 : #bbc4ce
+
+				> .content
+
+					> .text
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
 						color #717171
 
-					> .rp
+						>>> .title
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-					[data-is-me]:after
-						content "you"
-						padding 0 4px
-						margin-left 4px
-						font-size 80%
-						color $theme-color-foreground
-						background $theme-color
-						border-radius 4px
-
-				.mk-url-preview
-					margin-top 8px
-
-				> .channel
-					margin 0
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
-						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
 							display block
-							position absolute
+							margin-bottom 4px
-							top 0
+							padding 4px
-							bottom 0
+							font-size 90%
-							left 4px
+							text-align center
-							width 8px
+							background #eef1f3
-							height 8px
+							border-radius 4px
-							margin auto 0
-							background #fff
-							border-radius 100%
 
-				> .media
+						>>> .code
-					> img
+							margin 8px 0
-						display block
-						max-width 100%
 
-				> .location
+						>>> .quote
-					margin 4px 0
+							margin 8px
-					font-size 12px
+							padding 6px 12px
-					color #ccc
+							color #aaa
+							border-left solid 3px #eee
 
-				> .map
+						> .reply
-					width 100%
+							margin-right 8px
-					height 200px
+							color #717171
 
-					&:empty
+						> .rp
-						display none
+							margin-left 4px
+							font-style oblique
+							color #a0bf46
+
+						[data-is-me]:after
+							content "you"
+							padding 0 4px
+							margin-left 4px
+							font-size 80%
+							color $theme-color-foreground
+							background $theme-color
+							border-radius 4px
+
+					.mk-url-preview
+						margin-top 8px
+
+					> .channel
+						margin 0
+
+					> .tags
+						margin 4px 0 0 0
+
+						> *
+							display inline-block
+							margin 0 8px 0 0
+							padding 2px 8px 2px 16px
+							font-size 90%
+							color #8d969e
+							background #edf0f3
+							border-radius 4px
+
+							&:before
+								content ""
+								display block
+								position absolute
+								top 0
+								bottom 0
+								left 4px
+								width 8px
+								height 8px
+								margin auto 0
+								background #fff
+								border-radius 100%
+
+					> .media
+						> img
+							display block
+							max-width 100%
+
+					> .location
+						margin 4px 0
+						font-size 12px
+						color #ccc
+
+					> .map
+						width 100%
+						height 200px
+
+						&:empty
+							display none
+
+					> .mk-poll
+						font-size 80%
+
+					> .renote
+						margin 8px 0
+
+						> .mk-note-preview
+							padding 16px
+							border dashed 1px #c0dac6
+							border-radius 8px
 
 				> .app
 					font-size 12px
 					color #ccc
 
-				> .mk-poll
-					font-size 80%
-
-				> .renote
-					margin 8px 0
-
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px #c0dac6
-						border-radius 8px
-
 			> footer
 				> button
 					margin 0
@@ -507,6 +558,12 @@ export default Vue.extend({
 						@media (max-width 350px)
 							display none
 
+.note[data-darkmode]
+	root(true)
+
+.note:not([data-darkmode])
+	root(false)
+
 </style>
 
 <style lang="stylus" module>

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

@@ -1,30 +1,64 @@
 <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>
+
-	<template v-for="(note, i) in _notes">
+	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
-		<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+
-		<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+	<div class="init" v-if="fetching">
-			<span>%fa:angle-up%{{ note._datetext }}</span>
+		%fa:spinner .pulse%%i18n:common.loading%
-			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+	</div>
-		</p>
+
-	</template>
+	<div v-if="!fetching && requestInitPromise != null">
-	<footer>
+		<p>読み込みに失敗しました。</p>
-		<slot name="tail"></slot>
+		<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)"/>
+			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+				<span>%fa:angle-up%{{ note._datetext }}</span>
+				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</transition-group>
+
+	<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 => {
@@ -36,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();
+			}
 		}
 	}
 });
@@ -52,6 +204,38 @@ export default Vue.extend({
 	border-radius 8px
 	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
 
+	.transition
+		.mk-notes-enter
+		.mk-notes-leave-to
+			opacity 0
+			transform translateY(-30px)
+
+		> *
+			transition transform .3s ease, opacity .3s ease
+
+		> .date
+			display block
+			margin 0
+			line-height 32px
+			text-align center
+			font-size 0.9em
+			color #aaa
+			background #fdfdfd
+			border-bottom solid 1px #eaeaea
+
+			span
+				margin 0 16px
+
+			[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
@@ -73,22 +257,6 @@ export default Vue.extend({
 			font-size 3em
 			color #ccc
 
-	> .date
-		display block
-		margin 0
-		line-height 32px
-		text-align center
-		font-size 0.9em
-		color #aaa
-		background #fdfdfd
-		border-bottom solid 1px #eaeaea
-
-		span
-			margin 0 16px
-
-		[data-fa]
-			margin-right 8px
-
 	> footer
 		text-align center
 		border-top solid 1px #eaeaea

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

@@ -10,6 +10,7 @@
 	</header>
 	<div class="form">
 		<mk-note-preview v-if="reply" :note="reply"/>
+		<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
 		<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:!@reply-placeholder%' : '%i18n:!@note-placeholder%'"></textarea>
 		<div class="attaches" v-show="files.length != 0">
 			<x-draggable class="files" :list="files" :options="{ animation: 150 }">
@@ -24,6 +25,7 @@
 		<button class="drive" @click="chooseFileFromDrive">%fa:cloud%</button>
 		<button class="kao" @click="kao">%fa:R smile%</button>
 		<button class="poll" @click="poll = true">%fa:chart-pie%</button>
+		<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
 		<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
 		<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
 	</div>
@@ -39,7 +41,9 @@ export default Vue.extend({
 	components: {
 		XDraggable
 	},
+
 	props: ['reply'],
+
 	data() {
 		return {
 			posting: false,
@@ -47,21 +51,27 @@ export default Vue.extend({
 			uploadings: [],
 			files: [],
 			poll: false,
-			geo: null
+			geo: null,
+			useCw: false,
+			cw: null
 		};
 	},
+
 	mounted() {
 		this.$nextTick(() => {
 			this.focus();
 		});
 	},
+
 	methods: {
 		focus() {
 			(this.$refs.text as any).focus();
 		},
+
 		chooseFile() {
 			(this.$refs.file as any).click();
 		},
+
 		chooseFileFromDrive() {
 			(this as any).apis.chooseDriveFile({
 				multiple: true
@@ -69,23 +79,29 @@ export default Vue.extend({
 				files.forEach(this.attachMedia);
 			});
 		},
+
 		attachMedia(driveFile) {
 			this.files.push(driveFile);
 			this.$emit('change-attached-media', this.files);
 		},
+
 		detachMedia(file) {
 			this.files = this.files.filter(x => x.id != file.id);
 			this.$emit('change-attached-media', this.files);
 		},
+
 		onChangeFile() {
 			Array.from((this.$refs.file as any).files).forEach(this.upload);
 		},
+
 		upload(file) {
 			(this.$refs.uploader as any).upload(file);
 		},
+
 		onChangeUploadings(uploads) {
 			this.$emit('change-uploadings', uploads);
 		},
+
 		setGeo() {
 			if (navigator.geolocation == null) {
 				alert('お使いの端末は位置情報に対応していません');
@@ -100,15 +116,18 @@ export default Vue.extend({
 				enableHighAccuracy: true
 			});
 		},
+
 		removeGeo() {
 			this.geo = null;
 		},
+
 		clear() {
 			this.text = '';
 			this.files = [];
 			this.poll = false;
 			this.$emit('change-attached-media');
 		},
+
 		post() {
 			this.posting = true;
 			const viaMobile = (this as any).os.i.clientSettings.disableViaMobile !== true;
@@ -117,6 +136,7 @@ export default Vue.extend({
 				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
+				cw: this.useCw ? this.cw || '' : undefined,
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
 					altitude: this.geo.altitude,
@@ -133,10 +153,12 @@ export default Vue.extend({
 				this.posting = false;
 			});
 		},
+
 		cancel() {
 			this.$emit('cancel');
 			this.$destroy();
 		},
+
 		kao() {
 			this.text += getKao();
 		}
@@ -236,14 +258,12 @@ export default Vue.extend({
 		> .file
 			display none
 
+		> input
 		> textarea
 			display block
 			padding 12px
 			margin 0
 			width 100%
-			max-width 100%
-			min-width 100%
-			min-height 80px
 			font-size 16px
 			color #333
 			border none
@@ -253,6 +273,11 @@ export default Vue.extend({
 			&:disabled
 				opacity 0.5
 
+		> textarea
+			max-width 100%
+			min-width 100%
+			min-height 80px
+
 		> .upload
 		> .drive
 		> .kao

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

@@ -1,113 +0,0 @@
-<template>
-<div class="mk-timeline">
-	<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="!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>
-
-<script lang="ts">
-import Vue from 'vue';
-
-const limit = 10;
-
-export default Vue.extend({
-	props: {
-		date: {
-			type: Date,
-			required: false,
-			default: null
-		}
-	},
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			notes: [],
-			existMore: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-	computed: {
-		alone(): boolean {
-			return (this as any).os.i.followingCount == 0;
-		}
-	},
-	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
-
-		this.connection.on('note', this.onNote);
-		this.connection.on('follow', this.onChangeFollowing);
-		this.connection.on('unfollow', this.onChangeFollowing);
-
-this.fetch();
-	},
-	beforeDestroy() {
-		this.connection.off('note', this.onNote);
-		this.connection.off('follow', this.onChangeFollowing);
-		this.connection.off('unfollow', this.onChangeFollowing);
-		(this as any).os.stream.dispose(this.connectionId);
-	},
-	methods: {
-		fetch(cb?) {
-			this.fetching = true;
-			(this as any).api('notes/timeline', {
-				limit: limit + 1,
-				untilDate: this.date ? (this.date as any).getTime() : undefined
-			}).then(notes => {
-				if (notes.length == limit + 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: limit + 1,
-				untilId: this.notes[this.notes.length - 1].id
-			}).then(notes => {
-				if (notes.length == limit + 1) {
-					notes.pop();
-					this.existMore = true;
-				} else {
-					this.existMore = false;
-				}
-				this.notes = this.notes.concat(notes);
-				this.moreFetching = false;
-			});
-		},
-		onNote(note) {
-			this.notes.unshift(note);
-
-			const isTop = window.scrollY > 8;
-			if (isTop) this.notes.pop();
-		},
-		onChangeFollowing() {
-			this.fetch();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-friends-maker
-	margin-bottom 8px
-</style>

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

@@ -32,6 +32,8 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
+		this.$store.commit('setUiHeaderHeight', 48);
+
 		if ((this as any).os.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
@@ -150,6 +152,9 @@ export default Vue.extend({
 	width 100%
 	box-shadow 0 1px 0 rgba(#000, 0.075)
 
+	&, *
+		user-select none
+
 	> .main
 		color rgba(#fff, 0.9)
 

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,49 +12,53 @@
 <script lang="ts">
 import Vue from 'vue';
 
-const limit = 10;
+const fetchLimit = 10;
 
 export default Vue.extend({
 	props: ['user', 'withMedia'],
 	data() {
 		return {
 			fetching: true,
-			notes: [],
 			existMore: false,
 			moreFetching: false
 		};
 	},
 	mounted() {
-		(this as any).api('users/notes', {
+		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;
 			});
 		}

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,196 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:home%ダッシュボード</span>
+	<template slot="func">
+		<button @click="customizing = !customizing">%fa:cog%</button>
+	</template>
+	<main>
+		<template v-if="customizing">
+			<header>
+				<select v-model="widgetAdderSelected">
+					<option value="profile">プロフィール</option>
+					<option value="calendar">カレンダー</option>
+					<option value="activity">アクティビティ</option>
+					<option value="rss">RSSリーダー</option>
+					<option value="photo-stream">フォトストリーム</option>
+					<option value="slideshow">スライドショー</option>
+					<option value="version">バージョン</option>
+					<option value="access-log">アクセスログ</option>
+					<option value="server">サーバー情報</option>
+					<option value="donation">寄付のお願い</option>
+					<option value="nav">ナビゲーション</option>
+					<option value="tips">ヒント</option>
+				</select>
+				<button @click="addWidget">追加</button>
+				<p><a @click="hint">カスタマイズのヒント</a></p>
+			</header>
+			<x-draggable
+				:list="widgets"
+				:options="{ handle: '.handle', animation: 150 }"
+				@sort="onWidgetSort"
+			>
+				<div v-for="widget in widgets" class="customize-container" :key="widget.id">
+					<header>
+						<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+					</header>
+					<div @click="widgetFunc(widget.id)">
+						<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
+					</div>
+				</div>
+			</x-draggable>
+		</template>
+		<template v-else>
+			<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
+		</template>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	components: {
+		XDraggable
+	},
+	data() {
+		return {
+			showNav: false,
+			widgets: [],
+			customizing: false,
+			widgetAdderSelected: null
+		};
+	},
+	created() {
+		if ((this as any).os.i.clientSettings.mobileHome == null) {
+			Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
+				name: 'calendar',
+				id: 'a', data: {}
+			}, {
+				name: 'activity',
+				id: 'b', data: {}
+			}, {
+				name: 'rss',
+				id: 'c', data: {}
+			}, {
+				name: 'photo-stream',
+				id: 'd', data: {}
+			}, {
+				name: 'donation',
+				id: 'e', data: {}
+			}, {
+				name: 'nav',
+				id: 'f', data: {}
+			}, {
+				name: 'version',
+				id: 'g', data: {}
+			}]);
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+			this.saveHome();
+		} else {
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+		}
+
+		this.$watch('os.i.clientSettings', i => {
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+		}, {
+			deep: true
+		});
+	},
+
+	mounted() {
+		document.title = 'Misskey';
+		document.documentElement.style.background = '#313a42';
+	},
+
+	methods: {
+		onHomeUpdated(data) {
+			if (data.home) {
+				(this as any).os.i.clientSettings.mobileHome = data.home;
+				this.widgets = data.home;
+			} else {
+				const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
+				if (w != null) {
+					w.data = data.data;
+					this.$refs[w.id][0].preventSave = true;
+					this.$refs[w.id][0].props = w.data;
+					this.widgets = (this as any).os.i.clientSettings.mobileHome;
+				}
+			}
+		},
+		hint() {
+			alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
+		},
+		widgetFunc(id) {
+			const w = this.$refs[id][0];
+			if (w.func) w.func();
+		},
+		onWidgetSort() {
+			this.saveHome();
+		},
+		addWidget() {
+			const widget = {
+				name: this.widgetAdderSelected,
+				id: uuid(),
+				data: {}
+			};
+
+			this.widgets.unshift(widget);
+			this.saveHome();
+		},
+		removeWidget(widget) {
+			this.widgets = this.widgets.filter(w => w.id != widget.id);
+			this.saveHome();
+		},
+		saveHome() {
+			(this as any).os.i.clientSettings.mobileHome = this.widgets;
+			(this as any).api('i/update_mobile_home', {
+				home: this.widgets
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	margin 0 auto
+	max-width 500px
+
+	@media (min-width 500px)
+		padding 8px
+
+	> header
+		padding 8px
+		background #fff
+
+	.widget
+		margin 8px
+
+	.customize-container
+		margin 8px
+		background #fff
+
+		> header
+			line-height 32px
+			background #eee
+
+			> .handle
+				padding 0 8px
+
+			> .remove
+				position absolute
+				top 0
+				right 0
+				padding 0 8px
+				line-height 32px
+
+		> div
+			padding 8px
+
+			> *
+				pointer-events none
+
+</style>

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" :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,53 @@
 
 <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 +99,75 @@ 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 600px
+		margin 0 auto
+		padding 8px
+
+		@media (min-width 500px)
+			padding 16px
 
 </style>