From cc7e374f692ba77c76d01b5eaac377795ea105bc Mon Sep 17 00:00:00 2001
From: rinsuki <428rinsuki+git@gmail.com>
Date: Tue, 17 Apr 2018 17:14:25 +0900
Subject: add feedback link

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 558aaa6dc8..28e13f1485 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -24,6 +24,9 @@
 				<li @click="settings">
 					<p>%fa:cog%%i18n:@settings%%fa:angle-right%</p>
 				</li>
+				<li>
+					<a href="https://github.com/syuilo/misskey/issues/new" target="_blank">%fa:comment%%i18n:@feedback%%fa:external-link-alt%</a>
+				</li>
 			</ul>
 			<ul>
 				<li @click="signout">
-- 
cgit v1.2.3-freya


From d9fe884e871be0168b66eb98b25c77315d3f5c58 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 17 Apr 2018 19:32:18 +0900
Subject: :art:

---
 .../app/desktop/views/components/timeline.vue      | 32 ++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index e0215ad1a2..c1afbb6bee 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -74,20 +74,36 @@ export default Vue.extend({
 	border-radius 6px
 
 	> header
-		padding 8px 16px
-		border-bottom solid 1px #eee
+		padding 0 8px
+		z-index 1
+		box-shadow 0 1px rgba(0, 0, 0, 0.08)
 
 		> span
-			margin-right 16px
-			line-height 27px
-			font-size 14px
-			color #555
+			display inline-block
+			padding 0 10px
+			line-height 42px
+			font-size 12px
+			user-select none
 
-			&:not([data-is-active])
+			&[data-is-active]
 				color $theme-color
+				cursor default
+
+				&:before
+					content ""
+					display block
+					position absolute
+					bottom 0
+					left -8px
+					width calc(100% + 16px)
+					height 2px
+					background $theme-color
+
+			&:not([data-is-active])
+				color #6f7477
 				cursor pointer
 
 				&:hover
-					text-decoration underline
+					color #525a5f
 
 </style>
-- 
cgit v1.2.3-freya


From 2c769c16432e22ed7804744e1da25305657e534e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 17 Apr 2018 19:33:43 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/timeline.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index c1afbb6bee..f64b7eba97 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -88,6 +88,7 @@ export default Vue.extend({
 			&[data-is-active]
 				color $theme-color
 				cursor default
+				font-weight bold
 
 				&:before
 					content ""
-- 
cgit v1.2.3-freya


From 0a1455ac9f4b2af082b9f089501929b8dfeb9358 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 17 Apr 2018 19:40:02 +0900
Subject: メニュー整理
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yml                                                |  3 +--
 locales/fr.yml                                                |  2 +-
 locales/ja.yml                                                |  3 +--
 src/client/app/common/views/components/nav.vue                | 10 ++--------
 src/client/app/desktop/views/components/ui.header.account.vue |  6 ------
 5 files changed, 5 insertions(+), 19 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/locales/en.yml b/locales/en.yml
index cfd075f7d8..b0f77838a4 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -95,6 +95,7 @@ common/views/components/nav.vue:
   donors: "Donators"
   repository: "Repository"
   develop: "Developers"
+  feedback: "Feedback"
 
 common/views/components/note-menu.vue:
   pin: "Pin to profile page"
@@ -366,10 +367,8 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
-  mentions: "Mentions"
   customize: "Customize"
   settings: "Settings"
-  feedback: "Feedback"
   signout: "Sign out"
 
 desktop/views/components/ui.header.nav.vue:
diff --git a/locales/fr.yml b/locales/fr.yml
index 583104b4f0..681bb6ba18 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -95,6 +95,7 @@ common/views/components/nav.vue:
   donors: "Donateurs"
   repository: "Repo"
   develop: "Développeurs"
+  feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
   pin: "Épingler sur votre profile"
@@ -366,7 +367,6 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
-  mentions: "Mentions"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"
diff --git a/locales/ja.yml b/locales/ja.yml
index 470a393b89..c8e02f7455 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -95,6 +95,7 @@ common/views/components/nav.vue:
   donors: "ドナー"
   repository: "リポジトリ"
   develop: "開発者"
+  feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
   pin: "ピン留め"
@@ -366,10 +367,8 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
-  mentions: "あなた宛て"
   customize: "カスタマイズ"
   settings: "設定"
-  feedback: "フィードバック"
   signout: "サインアウト"
 
 desktop/views/components/ui.header.nav.vue:
diff --git a/src/client/app/common/views/components/nav.vue b/src/client/app/common/views/components/nav.vue
index 2295957928..cd1f99288a 100644
--- a/src/client/app/common/views/components/nav.vue
+++ b/src/client/app/common/views/components/nav.vue
@@ -2,16 +2,10 @@
 <span class="mk-nav">
 	<a :href="aboutUrl">%i18n:@about%</a>
 	<i>・</i>
-	<a :href="statsUrl">%i18n:@stats%</a>
-	<i>・</i>
-	<a :href="statusUrl">%i18n:@status%</a>
-	<i>・</i>
-	<a href="http://zawazawa.jp/misskey/">%i18n:@wiki%</a>
-	<i>・</i>
-	<a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:@donors%</a>
-	<i>・</i>
 	<a href="https://github.com/syuilo/misskey">%i18n:@repository%</a>
 	<i>・</i>
+	<a href="https://github.com/syuilo/misskey/issues/new" target="_blank">%i18n:@feedback%</a>
+	<i>・</i>
 	<a :href="devUrl">%i18n:@develop%</a>
 	<i>・</i>
 	<a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 28e13f1485..2bf8678b8d 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -13,9 +13,6 @@
 				<li @click="drive">
 					<p>%fa:cloud%%i18n:@drive%%fa:angle-right%</p>
 				</li>
-				<li>
-					<a href="/i/mentions">%fa:at%%i18n:@mentions%%fa:angle-right%</a>
-				</li>
 			</ul>
 			<ul>
 				<li>
@@ -24,9 +21,6 @@
 				<li @click="settings">
 					<p>%fa:cog%%i18n:@settings%%fa:angle-right%</p>
 				</li>
-				<li>
-					<a href="https://github.com/syuilo/misskey/issues/new" target="_blank">%fa:comment%%i18n:@feedback%%fa:external-link-alt%</a>
-				</li>
 			</ul>
 			<ul>
 				<li @click="signout">
-- 
cgit v1.2.3-freya


From ac0146f9494e00a70ccc7324f0854bb499f29106 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 17 Apr 2018 20:17:00 +0900
Subject: :art:

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index f64b7eba97..cadff8071c 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -75,7 +75,7 @@ export default Vue.extend({
 
 	> header
 		padding 0 8px
-		z-index 1
+		z-index 10
 		box-shadow 0 1px rgba(0, 0, 0, 0.08)
 
 		> span
-- 
cgit v1.2.3-freya


From 957cddf4dbe050b1c8a7aae46c00c16e8771710e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 18 Apr 2018 07:23:27 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/note-detail.vue | 4 +++-
 src/client/app/desktop/views/components/notes.note.vue  | 4 +++-
 src/client/app/mobile/views/components/note-detail.vue  | 4 +++-
 src/client/app/mobile/views/components/note.vue         | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index b62a7cfd61..f5153bad63 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -56,7 +56,9 @@
 		<footer>
 			<mk-reactions-viewer :note="p"/>
 			<button @click="reply" title="返信">
-				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				<template v-if="p.reply">%fa:reply-all%</template>
+				<template v-else>%fa:reply%</template>
+				<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 			</button>
 			<button @click="renote" title="Renote">
 				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 326ec4dc89..070c42352e 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -58,7 +58,9 @@
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
 				<button @click="reply" title="%i18n:@reply%">
-					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+					<template v-if="p.reply">%fa:reply-all%</template>
+					<template v-else>%fa:reply%</template>
+					<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
 				<button @click="renote" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 7d2747751e..62dd9184cd 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -55,7 +55,9 @@
 		<footer>
 			<mk-reactions-viewer :note="p"/>
 			<button @click="reply" title="%i18n:@reply%">
-				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				<template v-if="p.reply">%fa:reply-all%</template>
+				<template v-else>%fa:reply%</template>
+				<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 			</button>
 			<button @click="renote" title="Renote">
 				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index cccb8875b4..088275311b 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -58,7 +58,9 @@
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
 				<button @click="reply">
-					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+					<template v-if="p.reply">%fa:reply-all%</template>
+					<template v-else>%fa:reply%</template>
+					<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
 				<button @click="renote" title="Renote">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-- 
cgit v1.2.3-freya


From fa8a08f016bd72895dc15602ee021b20054d5c57 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 18 Apr 2018 07:35:56 +0900
Subject: タイムラインでリプライ先の投稿を表示するか否か設定できるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/mios.ts                          | 15 +++++++++------
 src/client/app/desktop/views/components/notes.note.vue |  2 +-
 src/client/app/desktop/views/components/settings.vue   |  7 +++++++
 src/client/app/mobile/views/components/note.vue        |  2 +-
 4 files changed, 18 insertions(+), 8 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index 6d6d6b3e68..6fed267d6e 100644
--- a/src/client/app/common/mios.ts
+++ b/src/client/app/common/mios.ts
@@ -16,6 +16,14 @@ import Err from '../common/views/components/connect-failed.vue';
 import { LocalTimelineStreamManager } from './scripts/streaming/local-timeline';
 import { GlobalTimelineStreamManager } from './scripts/streaming/global-timeline';
 
+const defaultSettings = {
+	fetchOnScroll: true,
+	showMaps: true,
+	showPostFormOnTopOfTl: false,
+	gradientWindowHeader: false,
+	showReplyTarget: true
+};
+
 //#region api requests
 let spinner = null;
 let pending = 0;
@@ -298,12 +306,7 @@ export default class MiOS extends EventEmitter {
 		const fetched = me => {
 			if (me) {
 				// デフォルトの設定をマージ
-				me.clientSettings = Object.assign({
-					fetchOnScroll: true,
-					showMaps: true,
-					showPostFormOnTopOfTl: false,
-					gradientWindowHeader: false
-				}, me.clientSettings);
+				me.clientSettings = Object.assign(defaultSettings, me.clientSettings);
 
 				// ローカルストレージにキャッシュ
 				localStorage.setItem('me', JSON.stringify(me));
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 070c42352e..752242d7d0 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
-	<div class="reply-to" v-if="p.reply">
+	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || os.i.clientSettings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 3d88ccb6c2..f9d9bab187 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -40,6 +40,7 @@
 				<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button>
 			</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.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
 				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
 			</mk-switch>
@@ -303,6 +304,12 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeShowReplyTarget(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'showReplyTarget',
+				value: v
+			});
+		},
 		onChangeShowMaps(v) {
 			(this as any).api('i/update_client_setting', {
 				name: 'showMaps',
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 088275311b..5d3a6c7362 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="note" :class="{ renote: isRenote }">
-	<div class="reply-to" v-if="p.reply">
+	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || os.i.clientSettings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-- 
cgit v1.2.3-freya


From 3519cb208ef7cc373b43f6d6adbfd095dd0ae1bc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 18 Apr 2018 07:36:04 +0900
Subject: Clean up

---
 src/client/app/desktop/views/components/timeline.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index cadff8071c..c99fabcc60 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -30,8 +30,6 @@ export default Vue.extend({
 		document.addEventListener('keydown', this.onKeydown);
 		window.addEventListener('scroll', this.onScroll);
 
-		console.log(this.$refs.tl);
-
 		(this.$refs.tl as any).$once('loaded', () => {
 			this.$emit('loaded');
 		});
-- 
cgit v1.2.3-freya


From 21f77e484fc2cf23cc8b7e11c2a694c9a9951f84 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 18 Apr 2018 14:14:30 +0900
Subject: Fix bug

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index 16bc2a1d98..cbea77ae74 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -17,7 +17,7 @@
 		</header>
 		<div class="body">
 			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
-			<div class="media" v-if="note.media > 0">
+			<div class="media" v-if="note.mediaIds.length > 0">
 				<mk-media-list :media-list="note.media"/>
 			</div>
 		</div>
-- 
cgit v1.2.3-freya


From 7a270275efcb49c182db5db73ce10c65ba6ad3ff Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 19 Apr 2018 15:05:39 +0900
Subject: Add new text syntax

And some fixes
---
 src/client/app/common/views/components/note-html.ts    | 13 +++++++++++--
 src/client/app/desktop/views/components/notes.note.vue | 12 ++++++++++++
 src/client/app/mobile/views/components/note.vue        | 12 ++++++++++++
 src/text/html.ts                                       |  6 ++++++
 src/text/parse/elements/title.ts                       | 14 ++++++++++++++
 src/text/parse/index.ts                                |  1 +
 6 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/text/parse/elements/title.ts

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/views/components/note-html.ts b/src/client/app/common/views/components/note-html.ts
index 24e750a671..38f6251cf7 100644
--- a/src/client/app/common/views/components/note-html.ts
+++ b/src/client/app/common/views/components/note-html.ts
@@ -97,7 +97,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,6 +134,13 @@ 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);
@@ -144,7 +153,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 {
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 752242d7d0..873d724b25 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -456,6 +456,18 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
+					>>> .title
+						display block
+						margin-bottom 4px
+						padding 4px
+						font-size 90%
+						text-align center
+						background #eef1f3
+						border-radius 4px
+
+					>>> .code
+						margin 8px 0
+
 					>>> .quote
 						margin 8px
 						padding 6px 12px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 5d3a6c7362..71fa43aea2 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -391,6 +391,18 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
+					>>> .title
+						display block
+						margin-bottom 4px
+						padding 4px
+						font-size 90%
+						text-align center
+						background #eef1f3
+						border-radius 4px
+
+					>>> .code
+						margin 8px 0
+
 					>>> .quote
 						margin 8px
 						padding 6px 12px
diff --git a/src/text/html.ts b/src/text/html.ts
index 797f3b3f33..e2db2457c1 100644
--- a/src/text/html.ts
+++ b/src/text/html.ts
@@ -54,6 +54,12 @@ const handlers = {
 		document.body.appendChild(blockquote);
 	},
 
+	title({ document }, { title }) {
+		const h1 = document.createElement('h1');
+		h1.textContent = title;
+		document.body.appendChild(h1);
+	},
+
 	text({ document }, { content }) {
 		for (const text of content.split('\n')) {
 			const node = document.createTextNode(text);
diff --git a/src/text/parse/elements/title.ts b/src/text/parse/elements/title.ts
new file mode 100644
index 0000000000..9f4708f5d6
--- /dev/null
+++ b/src/text/parse/elements/title.ts
@@ -0,0 +1,14 @@
+/**
+ * Title
+ */
+
+module.exports = text => {
+	const match = text.match(/^【(.+?)】\n/);
+	if (!match) return null;
+	const title = match[0];
+	return {
+		type: 'title',
+		content: title,
+		title: title.substr(1, title.length - 3)
+	};
+};
diff --git a/src/text/parse/index.ts b/src/text/parse/index.ts
index b958da81b0..4bcedd22ac 100644
--- a/src/text/parse/index.ts
+++ b/src/text/parse/index.ts
@@ -4,6 +4,7 @@
 
 const elements = [
 	require('./elements/bold'),
+	require('./elements/title'),
 	require('./elements/url'),
 	require('./elements/link'),
 	require('./elements/mention'),
-- 
cgit v1.2.3-freya


From e2202b084b41698e4b15463c9d1a96304c2c615f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 19 Apr 2018 18:10:36 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/notes.note.sub.vue | 2 ++
 src/client/app/mobile/views/components/note.sub.vue        | 2 ++
 2 files changed, 4 insertions(+)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index e854785783..aeeb186981 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -93,6 +93,8 @@ export default Vue.extend({
 				color #b2b8bb
 
 		> .body
+			max-height 128px
+			overflow hidden
 
 			> .text
 				cursor default
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index d489f3a053..58e561c2c4 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/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
-- 
cgit v1.2.3-freya


From f2fea7f3cd5a131f994ad9bc1d2b4833865dd165 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 03:41:24 +0900
Subject: [wip] darkmode

---
 src/client/app/boot.js                             |  8 +++++
 src/client/app/desktop/script.ts                   | 25 ++++++++++++++++
 src/client/app/desktop/style.styl                  |  3 ++
 .../app/desktop/views/components/notes.note.vue    | 34 +++++++++++++---------
 src/client/app/desktop/views/components/notes.vue  | 16 ++++++----
 .../app/desktop/views/components/settings.vue      | 16 +++++++---
 .../app/desktop/views/components/timeline.vue      | 16 +++++++---
 .../app/desktop/views/components/ui.header.vue     |  4 +--
 .../desktop/views/components/widget-container.vue  | 23 ++++++++++-----
 src/client/app/desktop/views/components/window.vue | 22 +++++++++-----
 src/client/app/init.css                            |  7 +++++
 11 files changed, 130 insertions(+), 44 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index a0709842b9..ac90fda05f 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -62,6 +62,14 @@
 		app = isMobile ? 'mobile' : 'desktop';
 	}
 
+	// Dark/Light
+	const me = JSON.parse(localStorage.getItem('me') || null);
+	if (me && me.clientSettings) {
+		if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
+			document.documentElement.setAttribute('data-darkmode', 'true');
+		}
+	}
+
 	// Script version
 	const ver = localStorage.getItem('v') || VERSION;
 
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index b3152e708b..ba7a64ff22 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -2,6 +2,7 @@
  * Desktop Client
  */
 
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 // Style
@@ -43,6 +44,30 @@ init(async (launch) => {
 	require('./views/components');
 	require('./views/widgets');
 
+	// Dark/Light
+	Vue.mixin({
+		mounted() {
+			const set = () => {
+				if (!this.$el || !this.os || !this.os.i) return;
+				if (this.os.i.clientSettings.dark) {
+					document.documentElement.setAttribute('data-darkmode', 'true');
+					this.$el.setAttribute('data-darkmode', 'true');
+				} else {
+					document.documentElement.removeAttribute('data-darkmode');
+					this.$el.removeAttribute('data-darkmode');
+				}
+			};
+
+			set();
+
+			this.$watch('os.i.clientSettings', i => {
+				set();
+			}, {
+				deep: true
+			});
+		}
+	});
+
 	// Init router
 	const router = new VueRouter({
 		mode: 'history',
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index 49f71fbde7..6c83cad2b1 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -44,6 +44,9 @@ html
 	height 100%
 	background #f7f7f7
 
+	&[data-darkmode]
+		background #191B22
+
 body
 	display flex
 	flex-direction column
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 873d724b25..6a12071537 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -291,11 +291,11 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.note
+root(isDark)
 	margin 0
 	padding 0
-	background #fff
-	border-bottom solid 1px #eaeaea
+	background isDark ? #282C37 : #fff
+	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 	&:first-child
 		border-top-left-radius 6px
@@ -374,7 +374,7 @@ export default Vue.extend({
 
 		&:hover
 			> .main > footer > button
-				color #888
+				color isDark ? #707b97 : #888
 
 		> .avatar-anchor
 			display block
@@ -407,7 +407,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
@@ -426,7 +426,7 @@ export default Vue.extend({
 
 				> .username
 					margin 0 .5em 0 0
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 				> .info
 					margin-left auto
@@ -443,7 +443,7 @@ export default Vue.extend({
 						border-right solid 1px #eaeaea
 
 					> .created-at
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
 
 			> .body
 
@@ -454,7 +454,7 @@ export default Vue.extend({
 					padding 0
 					overflow-wrap break-word
 					font-size 1.1em
-					color #717171
+					color isDark ? #fff : #717171
 
 					>>> .title
 						display block
@@ -462,7 +462,7 @@ export default Vue.extend({
 						padding 4px
 						font-size 90%
 						text-align center
-						background #eef1f3
+						background isDark ? #2f3944 : #eef1f3
 						border-radius 4px
 
 					>>> .code
@@ -471,12 +471,12 @@ export default Vue.extend({
 					>>> .quote
 						margin 8px
 						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
+						color isDark ? #6f808e : #aaa
+						border-left solid 3px isDark ? #637182 : #eee
 
 					> .reply
 						margin-right 8px
-						color #717171
+						color isDark ? #99abbf : #717171
 
 					> .rp
 						margin-left 4px
@@ -547,13 +547,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
@@ -572,6 +572,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>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index b5f6957a16..14834f0962 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -50,17 +50,16 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notes
-
+root(isDark)
 	> .date
 		display block
 		margin 0
 		line-height 32px
 		font-size 14px
 		text-align center
-		color #aaa
-		background #fdfdfd
-		border-bottom solid 1px #eaeaea
+		color isDark ? #666b79 : #aaa
+		background isDark ? #242731 : #fdfdfd
+		border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 		span
 			margin 0 16px
@@ -86,4 +85,11 @@ export default Vue.extend({
 
 			&:active
 				background #eee
+
+.mk-notes[data-darkmode]
+	root(true)
+
+.mk-notes:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index f9d9bab187..ffa82b9e02 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -37,14 +37,17 @@
 		<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="os.i.clientSettings.dark" @change="onChangeDark" 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.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'">
@@ -298,6 +301,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',
@@ -431,7 +440,6 @@ export default Vue.extend({
 		> .web
 			> .div
 				border-bottom solid 1px #eee
-				padding 0 0 16px 0
-				margin 0 0 16px 0
+				margin 16px 0
 
 </style>
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index c99fabcc60..12f928d15d 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -66,14 +66,16 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-timeline
-	background #fff
+root(isDark)
+	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)
 
 		> span
@@ -99,10 +101,16 @@ export default Vue.extend({
 					background $theme-color
 
 			&:not([data-is-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>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 2b63030cd2..96c26367f5 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -169,10 +169,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>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 188a67313e..c3fac1399d 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/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
-	background #fff
+root(isDark)
+	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,7 +54,7 @@ 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]
@@ -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>
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index e2cab21799..3de1413ac4 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/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>
diff --git a/src/client/app/init.css b/src/client/app/init.css
index 2587f63943..fa59195f71 100644
--- a/src/client/app/init.css
+++ b/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;
-- 
cgit v1.2.3-freya


From cba07d08d033e26051d37f73f3b0e9da636899ab Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 03:56:58 +0900
Subject: [wip] darkmode

---
 .../app/desktop/views/components/activity.vue      | 76 ++++++----------------
 .../app/desktop/views/widgets/notifications.vue    | 54 +++------------
 2 files changed, 29 insertions(+), 101 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/activity.vue b/src/client/app/desktop/views/components/activity.vue
index ea33bf9ff6..bd952c39d2 100644
--- a/src/client/app/desktop/views/components/activity.vue
+++ b/src/client/app/desktop/views/components/activity.vue
@@ -1,14 +1,15 @@
 <template>
-<div class="mk-activity" :data-melt="design == 2">
-	<template v-if="design == 0">
-		<p class="title">%fa:chart-bar%%i18n:@title%</p>
-		<button @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
-	</template>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<template v-else>
-		<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
-		<x-chart v-show="view == 1" :data="[].concat(activity)"/>
-	</template>
+<div class="mk-activity">
+	<mk-widget-container :show-header="design == 0" :naked="design == 2">
+		<template slot="header">%fa:chart-bar%%i18n:@title%</template>
+		<button slot="func" title="%i18n:@toggle%" @click="toggle">%fa:sort%</button>
+
+		<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+		<template v-else>
+			<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
+			<x-chart v-show="view == 1" :data="[].concat(activity)"/>
+		</template>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -64,53 +65,14 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" scoped>
-.mk-activity
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	&[data-melt]
-		background transparent !important
-		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
+<style lang="stylus" module>
+.fetching
+	margin 0
+	padding 16px
+	text-align center
+	color #aaa
 
-		> [data-fa]
-			margin-right 4px
+	> [data-fa]
+		margin-right 4px
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/notifications.vue b/src/client/app/desktop/views/widgets/notifications.vue
index 0c2fa0434d..091b0d8b98 100644
--- a/src/client/app/desktop/views/widgets/notifications.vue
+++ b/src/client/app/desktop/views/widgets/notifications.vue
@@ -1,10 +1,11 @@
 <template>
 <div class="mkw-notifications">
-	<template v-if="!props.compact">
-		<p class="title">%fa:R bell%%i18n:@title%</p>
-		<button @click="settings" title="%i18n:@settings%">%fa:cog%</button>
-	</template>
-	<mk-notifications/>
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:R bell%%i18n:@title%</template>
+		<button slot="func" title="%i18n:@settings%" @click="settings">%fa:cog%</button>
+
+		<mk-notifications :class="$style.notifications"/>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -27,44 +28,9 @@ export default define({
 });
 </script>
 
-<style lang="stylus" scoped>
-.mkw-notifications
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	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 lang="stylus" module>
+.notifications
+	max-height 300px
+	overflow auto
 
 </style>
-- 
cgit v1.2.3-freya


From 5ace37e3dbb4c22585c28dc6eba230092ad9033b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 04:51:04 +0900
Subject: [wip] darkmode

---
 src/client/app/common/views/components/switch.vue  | 25 +++++---
 src/client/app/common/views/widgets/calendar.vue   | 16 ++++--
 src/client/app/desktop/ui.styl                     | 14 +++++
 .../app/desktop/views/components/calendar.vue      | 12 +++-
 .../app/desktop/views/components/settings.vue      | 22 +++++---
 .../app/desktop/views/components/ui.header.nav.vue | 12 +++-
 src/client/app/desktop/views/widgets/polls.vue     | 66 +++++++---------------
 src/client/app/desktop/views/widgets/profile.vue   | 16 ++++--
 8 files changed, 106 insertions(+), 77 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue
index 19a4adc3de..32caab638a 100644
--- a/src/client/app/common/views/components/switch.vue
+++ b/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
-			border-color #ced2da
+			$color = isDark ? #15181d : #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
-		border 1px solid #dcdfe6
+		background $color
+		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>
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index 03f69a7597..b3b5b3583a 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/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
-	background #fff
+	color isDark ? #c5ced6 :#777
+	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>
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
index 5a8d1718e2..a54cafda68 100644
--- a/src/client/app/desktop/ui.styl
+++ b/src/client/app/desktop/ui.styl
@@ -65,6 +65,20 @@ button.ui
 			background $theme-color
 			border-color $theme-color
 
+html[data-darkmode] button.ui
+html[data-darkmode] .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
+
 input:not([type]).ui
 input[type='text'].ui
 input[type='password'].ui
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index a99b48d195..483a4c718b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/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
-	color #777
-	background #fff
+root(isDark)
+	color isDark ? #c5ced6 : #777
+	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>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index ffa82b9e02..b2dc8a526f 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -374,7 +374,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-settings
+root(isDark)
 	display flex
 	width 100%
 	height 100%
@@ -385,13 +385,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
@@ -400,7 +400,7 @@ export default Vue.extend({
 				margin-right 4px
 
 			&:hover
-				color #555
+				color isDark ? #fff : #555
 
 			&.active
 				margin-left 8px
@@ -414,14 +414,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
-				border-bottom solid 1px #eee
+				color isDark ? #e3e7ea : #555
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			&, >>> *
 				.ui.button.block
@@ -439,7 +439,13 @@ export default Vue.extend({
 
 		> .web
 			> .div
-				border-bottom solid 1px #eee
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 				margin 16px 0
 
+.mk-settings[data-darkmode]
+	root(true)
+
+.mk-settings:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 19f72a86d7..0800d96eb6 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index 6cb1192c24..42b9c5f25f 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -1,16 +1,19 @@
 <template>
 <div class="mkw-polls">
-	<template v-if="!props.compact">
-		<p class="title">%fa:chart-pie%%i18n:@title%</p>
-		<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
-	</template>
-	<div class="poll" v-if="!fetching && poll != null">
-		<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
-		<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
-		<mk-poll :note="poll"/>
-	</div>
-	<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>
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:chart-pie%%i18n:@title%</template>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
+
+		<div class="mkw-polls--body" :data-darkmode="_darkmode_">
+			<div class="poll" v-if="!fetching && poll != null">
+				<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
+				<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
+				<mk-poll :note="poll"/>
+			</div>
+			<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,40 +63,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-polls
-	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
-
+root(isDark)
 	> .poll
 		padding 16px
 		font-size 12px
@@ -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>
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 1b4b11de3c..0046658b8e 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/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
 
@@ -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>
-- 
cgit v1.2.3-freya


From 9b3ee877a6a76984b7606e7d50b4b68630fc0d7b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 05:06:32 +0900
Subject: [wip] darkmode

---
 src/client/app/desktop/views/components/post-form.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index ebb0193088..db3dd480bb 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -281,10 +281,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 ""
@@ -303,7 +303,7 @@ export default Vue.extend({
 			min-height calc(16px + 12px + 12px)
 			font-size 16px
 			color #333
-			background #fff
+			background isDark ? #191d23 : #fff
 			outline none
 			border solid 1px rgba($theme-color, 0.1)
 			border-radius 4px
@@ -496,7 +496,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 +504,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 +533,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>
-- 
cgit v1.2.3-freya


From 8daa9c806289a4c763a339538ccddb4aaf497029 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 07:45:37 +0900
Subject: [wip] darkmode

---
 locales/en.yml                                     |   1 +
 locales/fr.yml                                     |   1 +
 locales/ja.yml                                     |   1 +
 .../app/common/views/components/messaging.vue      |  33 ++++--
 .../common/views/components/reaction-picker.vue    |  19 ++-
 .../common/views/components/reactions-viewer.vue   |  33 ++++--
 .../common/views/components/twitter-setting.vue    |   2 -
 src/client/app/common/views/widgets/donation.vue   |  16 ++-
 src/client/app/common/views/widgets/nav.vue        |  29 +++--
 src/client/app/common/views/widgets/rss.vue        |  68 ++++++-----
 .../app/common/views/widgets/server.cpu-memory.vue |  11 +-
 src/client/app/desktop/ui.styl                     |  70 ++++++++---
 .../desktop/views/components/context-menu.menu.vue |  14 ++-
 .../app/desktop/views/components/context-menu.vue  |  10 +-
 .../app/desktop/views/components/drive.file.vue    |  10 +-
 src/client/app/desktop/views/components/drive.vue  |  14 ++-
 .../app/desktop/views/components/follow-button.vue |  22 ++--
 .../app/desktop/views/components/note-preview.vue  |  21 ++--
 .../desktop/views/components/notes.note.sub.vue    |  20 ++--
 .../app/desktop/views/components/notes.note.vue    |  15 +--
 .../app/desktop/views/components/notifications.vue |  22 ++--
 .../app/desktop/views/components/post-form.vue     |   2 +-
 .../app/desktop/views/components/renote-form.vue   |  59 ++--------
 .../app/desktop/views/components/repost-form.vue   | 131 ---------------------
 .../app/desktop/views/components/settings.api.vue  |   2 -
 .../app/desktop/views/components/settings.vue      |   4 +-
 .../desktop/views/components/ui.header.account.vue |  50 +++++---
 .../views/components/ui.header.notifications.vue   |  17 ++-
 src/client/app/desktop/views/widgets/messaging.vue |  25 +---
 src/client/app/desktop/views/widgets/trends.vue    | 109 +++++++----------
 src/client/app/desktop/views/widgets/users.vue     | 123 +++++++++----------
 31 files changed, 456 insertions(+), 498 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/repost-form.vue

(limited to 'src/client/app/desktop/views/components')

diff --git a/locales/en.yml b/locales/en.yml
index 81357c075c..33b46e1b9f 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"
+  dark: "Fall in dark"
 
 desktop/views/components/ui.header.nav.vue:
   home: "Home"
diff --git a/locales/fr.yml b/locales/fr.yml
index 8fb7543446..a475b65d41 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"
+  dark: "Fall in dark"
 
 desktop/views/components/ui.header.nav.vue:
   home: "Accueil"
diff --git a/locales/ja.yml b/locales/ja.yml
index 2f69a6f3d3..9cbdb79937 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"
+  dark: "闇に飲まれる"
 
 desktop/views/components/ui.header.nav.vue:
   home: "ホーム"
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index f74d9643eb..6f799b34b6 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/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
-			border-bottom solid 1px #eee
+			background isDark ? #282c37 : #fff
+			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>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 267eeb3a14..ba87ae3497 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/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
-			border-bottom solid 1px #e1e4e8
+			color isDark ? #d6dce2 : #586069
+			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>
diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index 1afcf525d2..97cb6be17c 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/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.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.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.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.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.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.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.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.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.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
-	border-top dashed 1px #eee
-	border-bottom dashed 1px #eee
+root(isDark)
+	$borderColor = isDark ? #5e6673 : #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>
diff --git a/src/client/app/common/views/components/twitter-setting.vue b/src/client/app/common/views/components/twitter-setting.vue
index 6ca1037aba..ab07e6d09a 100644
--- a/src/client/app/common/views/components/twitter-setting.vue
+++ b/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
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index 6b5a6697ed..1063c2c279 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -19,9 +19,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-donation
-	background #fff
-	border solid 1px #ead8bb
+root(isDark)
+	background isDark ? #282c37 : #fff
+	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>
diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 7bd5a7832f..0cbf7c158e 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/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>
-.body
-	padding 16px
-	font-size 12px
-	color #aaa
-	background #fff
+<style lang="stylus" scoped>
+root(isDark)
+	.mkw-nav--body
+		padding 16px
+		font-size 12px
+		color isDark ? #9aa4b3 : #aaa
+		background isDark ? #282c37 : #fff
 
-	a
-		color #999
+		a
+			color isDark ? #9aa4b3 : #999
 
-	i
-		color #ccc
+		i
+			color isDark ? #9aa4b3 : #ccc
+
+.mkw-nav[data-darkmode]
+	root(true)
+
+.mkw-nav:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index 4d74b2f7a4..1a63362521 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/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="$style.feed" v-else>
-			<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
+		<div class="mkw-rss--body">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<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>
-.feed
-	padding 12px 16px
-	font-size 0.9em
+<style lang="stylus" scoped>
+root(isDark)
+	.mkw-rss--body
+		.feed
+			padding 12px 16px
+			font-size 0.9em
 
-	> a
-		display block
-		padding 4px 0
-		color #666
-		border-bottom dashed 1px #eee
+			> a
+				display block
+				padding 4px 0
+				color isDark ? #9aa4b3 : #666
+				border-bottom dashed 1px isDark ? #1c2023 : #eee
 
-		&:last-child
-			border-bottom none
+				&:last-child
+					border-bottom none
 
-.fetching
-	margin 0
-	padding 16px
-	text-align center
-	color #aaa
+		.fetching
+			margin 0
+			padding 16px
+			text-align center
+			color #aaa
 
-	> [data-fa]
-		margin-right 4px
+			> [data-fa]
+				margin-right 4px
 
-&[data-mobile]
-	.feed
-		padding 0
-		font-size 1em
+		&[data-mobile]
+			.feed
+				padding 0
+				font-size 1em
 
-		> a
-			padding 8px 16px
+				> a
+					padding 8px 16px
 
-			&:nth-child(even)
-				background rgba(0, 0, 0, 0.05)
+					&:nth-child(even)
+						background rgba(0, 0, 0, 0.05)
+
+.mkw-rss[data-darkmode]
+	root(true)
+
+.mkw-rss:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/common/views/widgets/server.cpu-memory.vue b/src/client/app/common/views/widgets/server.cpu-memory.vue
index d75a142568..fbd36b255a 100644
--- a/src/client/app/common/views/widgets/server.cpu-memory.vue
+++ b/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>
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
index a54cafda68..b66c8f4025 100644
--- a/src/client/app/desktop/ui.styl
+++ b/src/client/app/desktop/ui.styl
@@ -65,20 +65,6 @@ button.ui
 			background $theme-color
 			border-color $theme-color
 
-html[data-darkmode] button.ui
-html[data-darkmode] .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
-
 input:not([type]).ui
 input[type='text'].ui
 input[type='password'].ui
@@ -137,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
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index 6359dbf1b4..3d884e0b8a 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index 8bd9945840..d7548c4415 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index d79cb6c09c..a683af68a7 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index 5e91048d19..aebface112 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/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
-		background #fff
-		//border-bottom 1px solid #dfdfdf
+		color isDark ? #d2d9dc : #555
+		background isDark ? #282c37 : #fff
 		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>
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 9eb22b0fb8..30e8cab76f 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -94,7 +94,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 +121,17 @@ export default Vue.extend({
 			border-radius 8px
 
 	&.follow
-		color #888
-		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-		border solid 1px #e2e2e2
+		color isDark ? #fff : #888
+		background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+		border solid 1px isDark ? #1c2023 : #e2e2e2
 
 		&:hover
-			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-			border-color #dcdcdc
+			background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+			border-color isDark ? #151a1d : #dcdcdc
 
 		&:active
-			background #ececec
-			border-color #dcdcdc
+			background isDark ? #22262f : #ececec
+			border-color isDark ? #151a1d : #dcdcdc
 
 	&.unfollow
 		color $theme-color-foreground
@@ -161,4 +161,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>
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index ff3ecadc20..b45814e512 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index aeeb186981..c3136b64f5 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/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,11 +82,11 @@ 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
@@ -101,10 +97,16 @@ export default Vue.extend({
 				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>
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 6a12071537..e96f4ee3a3 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -297,14 +297,15 @@ root(isDark)
 	background isDark ? #282C37 : #fff
 	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
-	&:first-child
-		border-top-left-radius 6px
-		border-top-right-radius 6px
-
-		> .renote
+	&[data-round]
+		&:first-child
 			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
 
@@ -324,7 +325,7 @@ root(isDark)
 
 	> .renote
 		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
 			margin 0
@@ -434,7 +435,7 @@ root(isDark)
 
 					> .mobile
 						margin-right 8px
-						color #ccc
+						color isDark ? #606984 : #ccc
 
 					> .app
 						margin-right 8px
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 413a87755a..f665f3d76c 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -185,14 +185,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notifications
+root(isDark)
 	> .notifications
 		> .notification
 			margin 0
 			padding 16px
 			overflow-wrap break-word
 			font-size 0.9em
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
 
 			&:last-child
 				border-bottom none
@@ -203,7 +203,7 @@ export default Vue.extend({
 				top 16px
 				right 12px
 				vertical-align top
-				color rgba(0, 0, 0, 0.6)
+				color isDark ? #606984 : rgba(0, 0, 0, 0.6)
 				font-size small
 
 			&:after
@@ -238,10 +238,10 @@ export default Vue.extend({
 						margin-right 4px
 
 			.note-preview
-				color rgba(0, 0, 0, 0.7)
+				color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
 
 			.note-ref
-				color rgba(0, 0, 0, 0.7)
+				color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
 
 				[data-fa]
 					font-size 1em
@@ -268,9 +268,9 @@ export default Vue.extend({
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color #aaa
-			background #fdfdfd
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
 
 			span
 				margin 0 16px
@@ -312,4 +312,10 @@ export default Vue.extend({
 		> [data-fa]
 			margin-right 4px
 
+.mk-notifications[data-darkmode]
+	root(true)
+
+.mk-notifications:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index db3dd480bb..eb6a40fe46 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -341,7 +341,7 @@ root(isDark)
 		> .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
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index daae5df5e9..9c0154211b 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/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="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
+			<button class="ui cancel" @click="cancel">%i18n:@cancel%</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
-				&: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
 
-		> .cancel
-			right 148px
-			color #888
-			background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-			border solid 1px #e2e2e2
+			&.ok
+				right 16px
 
-			&:hover
-				background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-				border-color #dcdcdc
+.mk-renote-form[data-darkmode]
+	root(true)
 
-			&: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
+.mk-renote-form:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/desktop/views/components/repost-form.vue b/src/client/app/desktop/views/components/repost-form.vue
deleted file mode 100644
index d5b1696757..0000000000
--- a/src/client/app/desktop/views/components/repost-form.vue
+++ /dev/null
@@ -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>
diff --git a/src/client/app/desktop/views/components/settings.api.vue b/src/client/app/desktop/views/components/settings.api.vue
index a43c6e8ea6..377f2e689b 100644
--- a/src/client/app/desktop/views/components/settings.api.vue
+++ b/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
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index b2dc8a526f..adfe43bb64 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -434,8 +434,8 @@ root(isDark)
 						margin 0 0 1em 0
 						padding 0 0 8px 0
 						font-size 1em
-						color #555
-						border-bottom solid 1px #eee
+						color isDark ? #e3e7ea : #555
+						border-bottom solid 1px isDark ? #1c2023 : #eee
 
 		> .web
 			> .div
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 2bf8678b8d..01cca472db 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -8,23 +8,28 @@
 		<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>
 			</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>%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>
@@ -78,6 +83,12 @@ export default Vue.extend({
 		},
 		signout() {
 			(this as any).os.signout();
+		},
+		dark() {
+			(this as any).api('i/update_client_setting', {
+				name: 'dark',
+				value: !(this as any)._darkmode_
+			});
 		}
 	}
 });
@@ -86,7 +97,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.account
+root(isDark)
 	> .header
 		display block
 		margin 0
@@ -101,13 +112,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 +145,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 +177,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 +188,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 +202,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
+						padding-left 16px
+
+					> [data-fa]:first-child
 						margin-right 6px
+						width 16px
 
-					> [data-fa]:last-of-type
+					> [data-fa]:last-child
 						display block
 						position absolute
 						top 0
@@ -222,4 +238,10 @@ export default Vue.extend({
 	transform-origin: center -16px;
 }
 
+.account[data-darkmode]
+	root(true)
+
+.account:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index e9a6b9b04f..5326f92836 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue
index 0f197fb2d7..cc8c50fc3c 100644
--- a/src/client/app/desktop/views/widgets/messaging.vue
+++ b/src/client/app/desktop/views/widgets/messaging.vue
@@ -1,7 +1,10 @@
 <template>
 <div class="mkw-messaging">
-	<p class="title" v-if="props.design == 0">%fa:comments%%i18n:@title%</p>
-	<mk-messaging ref="index" compact @navigate="navigate"/>
+	<mk-widget-container :show-header="props.design == 0">
+		<template slot="header">%fa:comments%%i18n:@title%</template>
+
+		<mk-messaging ref="index" compact @navigate="navigate"/>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -34,24 +37,6 @@ export default define({
 
 <style lang="stylus" scoped>
 .mkw-messaging
-	overflow hidden
-	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
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index fccda3f9d0..08fa7f8027 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -1,15 +1,18 @@
 <template>
 <div class="mkw-trends">
-	<template v-if="!props.compact">
-		<p class="title">%fa:fire%%i18n:@title%</p>
-		<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
-	</template>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<div class="note" v-else-if="note != null">
-		<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
-		<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
-	</div>
-	<p class="empty" v-else>%i18n:@nothing%</p>
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:fire%%i18n:@title%</template>
+		<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
+
+		<div class="mkw-trends--body">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<div class="note" v-else-if="note != null">
+				<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
+				<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></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
-	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
+root(isDark)
+	.mkw-trends--body
+		> .note
+			padding 16px
+			font-size 12px
+			font-style oblique
+			color #555
+
+			> p
+				margin 0
+
+			> .text,
+			> .author
+				> a
+					color inherit
+
+		> .empty
+			margin 0
+			padding 16px
+			text-align center
 			color #aaa
 
-		&:active
-			color #999
-
-	> .note
-		padding 16px
-		font-size 12px
-		font-style oblique
-		color #555
-
-		> p
+		> .fetching
 			margin 0
+			padding 16px
+			text-align center
+			color #aaa
 
-		> .text,
-		> .author
-			> a
-				color inherit
-
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
+			> [data-fa]
+				margin-right 4px
 
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
+.mkw-trends[data-darkmode]
+	root(true)
 
-		> [data-fa]
-			margin-right 4px
+.mkw-trends:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 3967ffaf6d..6e326115b0 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -4,7 +4,7 @@
 		<template slot="header">%fa:users%%i18n:@title%</template>
 		<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
 
-		<div class="mkw-users--body" :data-darkmode="_darkmode_">
+		<div class="mkw-users--body">
 			<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">
@@ -75,72 +75,73 @@ export default define({
 
 <style lang="stylus" scoped>
 root(isDark)
-	> .user
-		padding 16px
-		border-bottom solid 1px isDark ? #1c2023 : #eee
+	.mkw-users--body
+		> .user
+			padding 16px
+			border-bottom solid 1px isDark ? #1c2023 : #eee
 
-		&:last-child
-			border-bottom none
+			&:last-child
+				border-bottom none
 
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar-anchor
-			display block
-			float left
-			margin 0 12px 0 0
-
-			> .avatar
+			&:after
+				content ""
 				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
+				clear both
+
+			> .avatar-anchor
 				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
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-fa]
-			margin-right 4px
-
-.mkw-users--body[data-darkmode]
+				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
+
+			> .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
+
+.mkw-users[data-darkmode]
 	root(true)
 
-.mkw-users--body:not([data-darkmode])
+.mkw-users:not([data-darkmode])
 	root(false)
 
 </style>
-- 
cgit v1.2.3-freya


From 63fdd0aec412dcb26350221b66ffbc99edcddcd3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 07:55:46 +0900
Subject: [wip] darkmode

---
 .../app/desktop/views/components/user-preview.vue    | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index bcd79dc2af..b34e81ed46 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/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,14 +129,14 @@ 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
@@ -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>
-- 
cgit v1.2.3-freya


From 2105e4964b16d365a8b20bfeaca60468364b9267 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 12:38:31 +0900
Subject: :v:

---
 locales/en.yml                                          |  1 +
 locales/fr.yml                                          |  1 +
 locales/ja.yml                                          |  1 +
 .../app/desktop/views/components/ui.header.account.vue  | 17 +++++++++++++++--
 src/models/favorite.ts                                  |  1 +
 5 files changed, 19 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/locales/en.yml b/locales/en.yml
index 33b46e1b9f..db7ad786b9 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -367,6 +367,7 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
+  favorites: "Favorites"
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"
diff --git a/locales/fr.yml b/locales/fr.yml
index a475b65d41..09e5b3878c 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -367,6 +367,7 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
+  favorites: "Favorites"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"
diff --git a/locales/ja.yml b/locales/ja.yml
index 9cbdb79937..2401bf1fc1 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -367,6 +367,7 @@ desktop/views/components/settings.profile.vue:
 desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
+  favorites: "お気に入り"
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 01cca472db..ce7fab22cf 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -13,6 +13,9 @@
 				<li @click="drive">
 					<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>
 			</ul>
 			<ul>
 				<li>
@@ -24,7 +27,7 @@
 			</ul>
 			<ul>
 				<li @click="signout">
-					<p>%fa:power-off%<span>%i18n:@signout%</span></p>
+					<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
 				</li>
 			</ul>
 			<ul>
@@ -209,7 +212,7 @@ root(isDark)
 						pointer-events none
 
 					> span:first-child
-						padding-left 16px
+						padding-left 22px
 
 					> [data-fa]:first-child
 						margin-right 6px
@@ -233,6 +236,16 @@ root(isDark)
 					&: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;
diff --git a/src/models/favorite.ts b/src/models/favorite.ts
index b2c5828088..5387b29457 100644
--- a/src/models/favorite.ts
+++ b/src/models/favorite.ts
@@ -2,6 +2,7 @@ import * as mongo from 'mongodb';
 import db from '../db/mongodb';
 
 const Favorite = db.get<IFavorite>('favorites');
+Favorite.createIndex(['userId', 'noteId'], { unique: true });
 export default Favorite;
 
 export type IFavorite = {
-- 
cgit v1.2.3-freya


From 8ccfbbf24c32cfc05bed669e3f97061e79c42fd0 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 13:38:28 +0900
Subject: Darken

---
 src/client/app/common/views/components/poll.vue          | 13 +++++++++++--
 src/client/app/desktop/views/components/user-preview.vue |  2 +-
 src/client/app/desktop/views/widgets/polls.vue           |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 1834d4ddc2..de4373f561 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index b34e81ed46..2e1870800f 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -141,7 +141,7 @@ root(isDark)
 	> .description
 		padding 0 16px
 		font-size 0.7em
-		color #555
+		color isDark ? #9ea4ad : #555
 
 	> .status
 		padding 8px 16px
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index 42b9c5f25f..852bf2e3a1 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -67,7 +67,7 @@ root(isDark)
 	> .poll
 		padding 16px
 		font-size 12px
-		color #555
+		color isDark ? #9ea4ad : #555
 
 		> p
 			margin 0 0 8px 0
-- 
cgit v1.2.3-freya


From 4bf85a0e6b1260c1fffa89f734bd59ec995a0ac4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 10:10:04 +0900
Subject: Darken

---
 src/client/app/common/views/components/poll-editor.vue | 10 +++++++++-
 src/client/app/desktop/views/components/home.vue       | 15 +++++++++++----
 src/client/app/desktop/views/components/post-form.vue  |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 189172679b..95bcba996e 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 90e9d1b785..5c5b462176 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/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>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index eb6a40fe46..fee63916a5 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -392,7 +392,7 @@ root(isDark)
 						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
-- 
cgit v1.2.3-freya


From a9a7a89b8b286f2cd00c00311c5b7b2ea49cafe6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 11:42:38 +0900
Subject: #1506

---
 src/client/app/common/mios.ts                      |   4 +-
 .../app/desktop/views/components/settings.vue      |  14 +++
 .../app/desktop/views/components/timeline.core.vue |  23 ++++-
 .../app/mobile/views/components/timeline.vue       |  33 ++++++-
 src/server/api/endpoints/notes/timeline.ts         | 102 +++++++++++++++------
 5 files changed, 142 insertions(+), 34 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index 6fed267d6e..463f763888 100644
--- a/src/client/app/common/mios.ts
+++ b/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
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index adfe43bb64..b5111dabc9 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -45,6 +45,8 @@
 			</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>
@@ -319,6 +321,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',
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index 1e98f087e1..f66ae57885 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -90,7 +90,9 @@ export default Vue.extend({
 
 			(this as any).api(this.endpoint, {
 				limit: 11,
-				untilDate: this.date ? this.date.getTime() : undefined
+				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 == 11) {
 					notes.pop();
@@ -108,7 +110,9 @@ export default Vue.extend({
 			this.moreFetching = true;
 			(this as any).api(this.endpoint, {
 				limit: 11,
-				untilId: this.notes[this.notes.length - 1].id
+				untilId: this.notes[this.notes.length - 1].id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == 11) {
 					notes.pop();
@@ -121,6 +125,21 @@ export default Vue.extend({
 		},
 
 		onNote(note) {
+			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;
+				}
+			}
+
 			// サウンドを再生する
 			if ((this as any).os.isEnableSounds) {
 				const sound = new Audio(`${url}/assets/post.mp3`);
diff --git a/src/client/app/mobile/views/components/timeline.vue b/src/client/app/mobile/views/components/timeline.vue
index 11b82aa456..a6227996b8 100644
--- a/src/client/app/mobile/views/components/timeline.vue
+++ b/src/client/app/mobile/views/components/timeline.vue
@@ -30,6 +30,7 @@ export default Vue.extend({
 			default: null
 		}
 	},
+
 	data() {
 		return {
 			fetching: true,
@@ -40,11 +41,13 @@ export default Vue.extend({
 			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();
@@ -53,20 +56,24 @@ export default Vue.extend({
 		this.connection.on('follow', this.onChangeFollowing);
 		this.connection.on('unfollow', this.onChangeFollowing);
 
-this.fetch();
+		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
+				untilDate: this.date ? (this.date as any).getTime() : undefined,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == limit + 1) {
 					notes.pop();
@@ -78,11 +85,14 @@ this.fetch();
 				if (cb) cb();
 			});
 		},
+
 		more() {
 			this.moreFetching = true;
 			(this as any).api('notes/timeline', {
 				limit: limit + 1,
-				untilId: this.notes[this.notes.length - 1].id
+				untilId: this.notes[this.notes.length - 1].id,
+				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == limit + 1) {
 					notes.pop();
@@ -94,12 +104,29 @@ this.fetch();
 				this.moreFetching = false;
 			});
 		},
+
 		onNote(note) {
+			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;
+				}
+			}
+
 			this.notes.unshift(note);
 
 			const isTop = window.scrollY > 8;
 			if (isTop) this.notes.pop();
 		},
+
 		onChangeFollowing() {
 			this.fetch();
 		}
diff --git a/src/server/api/endpoints/notes/timeline.ts b/src/server/api/endpoints/notes/timeline.ts
index cb14fa6eb0..de30afea57 100644
--- a/src/server/api/endpoints/notes/timeline.ts
+++ b/src/server/api/endpoints/notes/timeline.ts
@@ -37,6 +37,14 @@ module.exports = async (params, user, app) => {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
+	// Get 'includeMyRenotes' parameter
+	const [includeMyRenotes = true, includeMyRenotesErr] = $(params.includeMyRenotes).optional.boolean().$;
+	if (includeMyRenotesErr) throw 'invalid includeMyRenotes param';
+
+	// Get 'includeRenotedMyNotes' parameter
+	const [includeRenotedMyNotes = true, includeRenotedMyNotesErr] = $(params.includeRenotedMyNotes).optional.boolean().$;
+	if (includeRenotedMyNotesErr) throw 'invalid includeRenotedMyNotes param';
+
 	const [followings, watchingChannelIds, mutedUserIds] = await Promise.all([
 		// フォローを取得
 		// Fetch following
@@ -84,38 +92,76 @@ module.exports = async (params, user, app) => {
 	});
 
 	const query = {
-		$or: [{
-			$and: [{
-				// フォローしている人のタイムラインへの投稿
-				$or: followQuery
-			}, {
-				// 「タイムラインへの」投稿に限定するためにチャンネルが指定されていないもののみに限る
-				$or: [{
-					channelId: {
-						$exists: false
-					}
+		$and: [{
+			$or: [{
+				$and: [{
+					// フォローしている人のタイムラインへの投稿
+					$or: followQuery
 				}, {
-					channelId: null
+					// 「タイムラインへの」投稿に限定するためにチャンネルが指定されていないもののみに限る
+					$or: [{
+						channelId: {
+							$exists: false
+						}
+					}, {
+						channelId: null
+					}]
 				}]
-			}]
-		}, {
-			// Watchしているチャンネルへの投稿
-			channelId: {
-				$in: watchingChannelIds
-			}
-		}],
-		// mute
-		userId: {
-			$nin: mutedUserIds
-		},
-		'_reply.userId': {
-			$nin: mutedUserIds
-		},
-		'_renote.userId': {
-			$nin: mutedUserIds
-		},
+			}, {
+				// Watchしているチャンネルへの投稿
+				channelId: {
+					$in: watchingChannelIds
+				}
+			}],
+			// mute
+			userId: {
+				$nin: mutedUserIds
+			},
+			'_reply.userId': {
+				$nin: mutedUserIds
+			},
+			'_renote.userId': {
+				$nin: mutedUserIds
+			},
+		}]
 	} as any;
 
+	// MongoDBではトップレベルで否定ができないため、De Morganの法則を利用してクエリします。
+	// つまり、「『自分の投稿かつRenote』ではない」を「『自分の投稿ではない』または『Renoteではない』」と表現します。
+	// for details: https://en.wikipedia.org/wiki/De_Morgan%27s_laws
+
+	if (includeMyRenotes === false) {
+		query.$and.push({
+			$or: [{
+				userId: { $ne: user._id }
+			}, {
+				renoteId: null
+			}, {
+				text: { $ne: null }
+			}, {
+				mediaIds: { $ne: [] }
+			}, {
+				poll: { $ne: null }
+			}]
+		});
+	}
+
+	if (includeRenotedMyNotes === false) {
+		query.$and.push({
+			$or: [{
+				'_renote.userId': { $ne: user._id }
+			}, {
+				renoteId: null
+			}, {
+				text: { $ne: null }
+			}, {
+				mediaIds: { $ne: [] }
+			}, {
+				poll: { $ne: null }
+			}]
+		});
+	}
+
 	if (sinceId) {
 		sort._id = 1;
 		query._id = {
-- 
cgit v1.2.3-freya


From 716b41107b8787eecebfe819537c4ef552c2f576 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 11:44:55 +0900
Subject: Darken

---
 src/client/app/desktop/views/components/notes.note.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index e96f4ee3a3..d430eefb7e 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -421,8 +421,8 @@ root(isDark)
 					margin 0 .5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color #aaa
-					border solid 1px #ddd
+					color isDark ? #758188 :#aaa
+					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
 				> .username
-- 
cgit v1.2.3-freya


From c80b288db30cc15aff78314373f7fd97494d86bf Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 13:48:56 +0900
Subject: Better renote annotation rendering

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
---
 .../app/desktop/views/components/notes.note.vue    | 64 ++++++++++---------
 src/client/app/mobile/views/components/note.vue    | 71 +++++++++++-----------
 2 files changed, 72 insertions(+), 63 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index d430eefb7e..59cdc7a209 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/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">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<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>
-			<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
+		<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"/>
+		</router-link>
+		%fa:retweet%
+		<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>
+		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
@@ -324,36 +322,44 @@ root(isDark)
 			border-radius 4px
 
 	> .renote
+		display flex
+		align-items baseline
+		padding 16px 32px
+		line-height 28px
 		color #9dbb00
 		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-		> p
-			margin 0
-			padding 16px 32px
-			line-height 28px
+		.avatar-anchor
+			display inline-block
+
+			.avatar
+				vertical-align bottom
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
-			.avatar-anchor
-				display inline-block
+		[data-fa]
+			margin-right 4px
 
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
+		> span
+			flex-shrink 0
 
-			[data-fa]
-				margin-right 4px
+			&:last-of-type
+				margin-right 8px
 
-			.name
-				font-weight bold
+		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
+			font-weight bold
 
 		> .mk-time
-			position absolute
-			top 16px
-			right 32px
+			display block
+			margin-left auto
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
 
 		& + article
 			padding-top 8px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 71fa43aea2..6b7c64f047 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/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">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
+		<router-link class="avatar-anchor" :to="note.user | userPage">
+			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
+		%fa:retweet%
+		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
+		<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+		<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
@@ -251,42 +249,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
-			margin 0
-			padding 8px 16px
-			line-height 28px
+		@media (min-width 500px)
+			padding 16px
 
-			@media (min-width 500px)
-				padding 16px
+		.avatar-anchor
+			display inline-block
+
+			.avatar
+				vertical-align bottom
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
-			.avatar-anchor
-				display inline-block
+		[data-fa]
+			margin-right 4px
 
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
+		> span
+			flex-shrink 0
 
-			[data-fa]
-				margin-right 4px
+			&:last-of-type
+				margin-right 8px
 
-			.name
-				font-weight bold
+		.name
+			overflow hidden
+			flex-shrink 1
+			text-overflow ellipsis
+			white-space nowrap
+			font-weight bold
 
 		> .mk-time
-			position absolute
-			top 8px
-			right 16px
+			display block
+			margin-left auto
+			flex-shrink 0
 			font-size 0.9em
-			line-height 28px
-
-			@media (min-width 500px)
-				top 16px
 
 		& + article
 			padding-top 8px
-- 
cgit v1.2.3-freya


From fde9c783aede3bda23b97b3a12cd6209570779c3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 13:54:51 +0900
Subject: Fix username rendering

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
---
 src/client/app/desktop/views/components/notes.note.vue | 2 ++
 src/client/app/mobile/views/components/note.vue        | 2 ++
 2 files changed, 4 insertions(+)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 59cdc7a209..0fb5d87156 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -433,6 +433,8 @@ root(isDark)
 
 				> .username
 					margin 0 .5em 0 0
+					overflow hidden
+					text-overflow ellipsis
 					color isDark ? #606984 : #ccc
 
 				> .info
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 6b7c64f047..0967edeec0 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -371,6 +371,8 @@ export default Vue.extend({
 
 				> .username
 					margin 0 0.5em 0 0
+					overflow hidden
+					text-overflow ellipsis
 					color #ccc
 
 				> .info
-- 
cgit v1.2.3-freya


From d721a143a8aae1cbb7d41096f0f6cffa76d157d9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 14:19:21 +0900
Subject: Darken

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 0fb5d87156..1352fc4ee7 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -547,7 +547,7 @@ root(isDark)
 
 					> .mk-note-preview
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px isDark ? #4e945e : #c0dac6
 						border-radius 8px
 
 			> footer
-- 
cgit v1.2.3-freya


From b14d7b45ae59f284f7bd9f77666795d237ad585e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 15:37:02 +0900
Subject: Better timeline rendering

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
---
 package.json                                       |   1 +
 .../app/desktop/views/components/timeline.core.vue | 100 +++++++++++++++++----
 .../app/desktop/views/components/timeline.vue      |  23 -----
 .../app/desktop/views/components/ui.header.vue     |   2 +
 src/client/app/init.ts                             |  14 +++
 .../app/mobile/views/components/timeline.vue       |  74 ++++++++++++---
 .../app/mobile/views/components/ui.header.vue      |   2 +
 7 files changed, 165 insertions(+), 51 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/package.json b/package.json
index 9c2f78d216..c5962a3dba 100644
--- a/package.json
+++ b/package.json
@@ -208,6 +208,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",
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index f66ae57885..719425c3c7 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="mk-home-timeline">
+	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
 	<mk-friends-maker v-if="src == 'home' && alone"/>
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
@@ -20,6 +21,9 @@
 import Vue from 'vue';
 import { url } from '../../../config';
 
+const fetchLimit = 10;
+const displayLimit = 30;
+
 export default Vue.extend({
 	props: {
 		src: {
@@ -34,6 +38,7 @@ export default Vue.extend({
 			moreFetching: false,
 			existMore: false,
 			notes: [],
+			queue: [],
 			connection: null,
 			connectionId: null,
 			date: null
@@ -59,6 +64,10 @@ export default Vue.extend({
 				: this.src == 'local'
 					? 'notes/local-timeline'
 					: 'notes/global-timeline';
+		},
+
+		canFetchMore(): boolean {
+			return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
 		}
 	},
 
@@ -72,6 +81,9 @@ export default Vue.extend({
 			this.connection.on('unfollow', this.onChangeFollowing);
 		}
 
+		document.addEventListener('keydown', this.onKeydown);
+		window.addEventListener('scroll', this.onScroll);
+
 		this.fetch();
 	},
 
@@ -82,19 +94,27 @@ export default Vue.extend({
 			this.connection.off('unfollow', this.onChangeFollowing);
 		}
 		this.stream.dispose(this.connectionId);
+
+		document.removeEventListener('keydown', this.onKeydown);
+		window.removeEventListener('scroll', this.onScroll);
 	},
 
 	methods: {
+		isScrollTop() {
+			return window.scrollY <= 8;
+		},
+
 		fetch(cb?) {
+			this.queue = [];
 			this.fetching = true;
 
 			(this as any).api(this.endpoint, {
-				limit: 11,
+				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 == 11) {
+				if (notes.length == fetchLimit + 1) {
 					notes.pop();
 					this.existMore = true;
 				}
@@ -106,15 +126,17 @@ export default Vue.extend({
 		},
 
 		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,
 				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;
@@ -124,7 +146,30 @@ export default Vue.extend({
 			});
 		},
 
+		prependNote(note, silent = false) {
+			// サウンドを再生する
+			if ((this as any).os.isEnableSounds && !silent) {
+				const sound = new Audio(`${url}/assets/post.mp3`);
+				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
+				sound.play();
+			}
+
+			// Prepent a note
+			this.notes.unshift(note);
+
+			// オーバーフローしたら古い投稿は捨てる
+			if (this.notes.length >= displayLimit) {
+				this.notes = this.notes.slice(0, displayLimit);
+			}
+		},
+
+		releaseQueue() {
+			this.queue.forEach(n => this.prependNote(n, true));
+			this.queue = [];
+		},
+
 		onNote(note) {
+			//#region 弾く
 			const isMyNote = note.userId == (this as any).os.i.id;
 			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
 
@@ -139,18 +184,13 @@ export default Vue.extend({
 					return;
 				}
 			}
+			//#endregion
 
-			// サウンドを再生する
-			if ((this as any).os.isEnableSounds) {
-				const sound = new Audio(`${url}/assets/post.mp3`);
-				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
-				sound.play();
+			if (this.isScrollTop()) {
+				this.prependNote(note);
+			} else {
+				this.queue.unshift(note);
 			}
-
-			this.notes.unshift(note);
-
-			const isTop = window.scrollY > 8;
-			if (isTop) this.notes.pop();
 		},
 
 		onChangeFollowing() {
@@ -164,13 +204,41 @@ export default Vue.extend({
 		warp(date) {
 			this.date = date;
 			this.fetch();
-		}
+		},
+
+		onScroll() {
+			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.more();
+			}
+
+			if (this.isScrollTop()) {
+				this.releaseQueue();
+			}
+		},
+
+		onKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					this.focus();
+				}
+			}
+		},
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-home-timeline
+	> .newer-indicator
+		position -webkit-sticky
+		position sticky
+		z-index 100
+		height 3px
+		background $theme-color
+
 	> .mk-friends-maker
 		border-bottom solid 1px #eee
 
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 12f928d15d..8035510a14 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -27,35 +27,12 @@ export default Vue.extend({
 	},
 
 	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);
 		}
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 96c26367f5..7ce85d4c3d 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/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;
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index a3ab2e8e31..461093488d 100644
--- a/src/client/app/init.ts
+++ b/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) {
@@ -145,6 +158,7 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 			});
 
 			const app = new Vue({
+				store,
 				router,
 				created() {
 					this.$watch('os.i', i => {
diff --git a/src/client/app/mobile/views/components/timeline.vue b/src/client/app/mobile/views/components/timeline.vue
index a6227996b8..f56667bed5 100644
--- a/src/client/app/mobile/views/components/timeline.vue
+++ b/src/client/app/mobile/views/components/timeline.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="mk-timeline">
+	<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
 	<mk-friends-maker v-if="alone"/>
 	<mk-notes :notes="notes">
 		<div class="init" v-if="fetching">
@@ -9,7 +10,7 @@
 			%fa:R comments%
 			%i18n:@empty%
 		</div>
-		<button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
+		<button v-if="canFetchMore" @click="more" :disabled="moreFetching" slot="tail">
 			<span v-if="!moreFetching">%i18n:@load-more%</span>
 			<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
 		</button>
@@ -20,7 +21,8 @@
 <script lang="ts">
 import Vue from 'vue';
 
-const limit = 10;
+const fetchLimit = 10;
+const displayLimit = 30;
 
 export default Vue.extend({
 	props: {
@@ -36,6 +38,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			notes: [],
+			queue: [],
 			existMore: false,
 			connection: null,
 			connectionId: null
@@ -45,6 +48,10 @@ export default Vue.extend({
 	computed: {
 		alone(): boolean {
 			return (this as any).os.i.followingCount == 0;
+		},
+
+		canFetchMore(): boolean {
+			return !this.moreFetching && !this.fetching && this.notes.length > 0 && this.existMore;
 		}
 	},
 
@@ -56,6 +63,8 @@ export default Vue.extend({
 		this.connection.on('follow', this.onChangeFollowing);
 		this.connection.on('unfollow', this.onChangeFollowing);
 
+		window.addEventListener('scroll', this.onScroll);
+
 		this.fetch();
 	},
 
@@ -64,18 +73,25 @@ export default Vue.extend({
 		this.connection.off('follow', this.onChangeFollowing);
 		this.connection.off('unfollow', this.onChangeFollowing);
 		(this as any).os.stream.dispose(this.connectionId);
+
+		window.removeEventListener('scroll', this.onScroll);
 	},
 
 	methods: {
+		isScrollTop() {
+			return window.scrollY <= 8;
+		},
+
 		fetch(cb?) {
+			this.queue = [];
 			this.fetching = true;
 			(this as any).api('notes/timeline', {
-				limit: limit + 1,
+				limit: fetchLimit + 1,
 				untilDate: this.date ? (this.date as any).getTime() : undefined,
 				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
 				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
-				if (notes.length == limit + 1) {
+				if (notes.length == fetchLimit + 1) {
 					notes.pop();
 					this.existMore = true;
 				}
@@ -89,12 +105,12 @@ export default Vue.extend({
 		more() {
 			this.moreFetching = true;
 			(this as any).api('notes/timeline', {
-				limit: limit + 1,
+				limit: fetchLimit + 1,
 				untilId: this.notes[this.notes.length - 1].id,
 				includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
 				includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
 			}).then(notes => {
-				if (notes.length == limit + 1) {
+				if (notes.length == fetchLimit + 1) {
 					notes.pop();
 					this.existMore = true;
 				} else {
@@ -105,7 +121,23 @@ export default Vue.extend({
 			});
 		},
 
+		prependNote(note) {
+			// Prepent a note
+			this.notes.unshift(note);
+
+			// オーバーフローしたら古い投稿は捨てる
+			if (this.notes.length >= displayLimit) {
+				this.notes = this.notes.slice(0, displayLimit);
+			}
+		},
+
+		releaseQueue() {
+			this.queue.forEach(n => this.prependNote(n));
+			this.queue = [];
+		},
+
 		onNote(note) {
+			//#region 弾く
 			const isMyNote = note.userId == (this as any).os.i.id;
 			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
 
@@ -120,21 +152,39 @@ export default Vue.extend({
 					return;
 				}
 			}
+			//#endregion
 
-			this.notes.unshift(note);
-
-			const isTop = window.scrollY > 8;
-			if (isTop) this.notes.pop();
+			if (this.isScrollTop()) {
+				this.prependNote(note);
+			} else {
+				this.queue.unshift(note);
+			}
 		},
 
 		onChangeFollowing() {
 			this.fetch();
+		},
+
+		onScroll() {
+			if (this.isScrollTop()) {
+				this.releaseQueue();
+			}
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.mk-friends-maker
-	margin-bottom 8px
+@import '~const.styl'
+
+.mk-timeline
+	> .newer-indicator
+		position -webkit-sticky
+		position sticky
+		z-index 100
+		height 3px
+		background $theme-color
+
+	> .mk-friends-maker
+		margin-bottom 8px
 </style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 0ee67a15b0..adb2535aad 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/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();
-- 
cgit v1.2.3-freya


From 797b5d2311bf0c2350f6f49fea2efe882d86d963 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 15:46:46 +0900
Subject: Darken

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index fee63916a5..919f97f44d 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -302,7 +302,7 @@ root(isDark)
 			min-width 100%
 			min-height calc(16px + 12px + 12px)
 			font-size 16px
-			color #333
+			color isDark ? #fff : #333
 			background isDark ? #191d23 : #fff
 			outline none
 			border solid 1px rgba($theme-color, 0.1)
-- 
cgit v1.2.3-freya


From 4a0f9d82805fabfde6a3d350c37a5c49695b041d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 21 Apr 2018 16:01:12 +0900
Subject: Add timeline animation

Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
---
 src/client/app/desktop/views/components/notes.vue | 51 ++++++++++++--------
 src/client/app/mobile/views/components/notes.vue  | 57 ++++++++++++++---------
 2 files changed, 65 insertions(+), 43 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 14834f0962..1a33a4240b 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -1,12 +1,14 @@
 <template>
 <div class="mk-notes">
-	<template v-for="(note, i) in _notes">
-		<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">
-			<span>%fa:angle-up%{{ note._datetext }}</span>
-			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
-		</p>
-	</template>
+	<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>
 		<slot name="footer"></slot>
 	</footer>
@@ -51,21 +53,30 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	> .date
-		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
+	.transition
+		.mk-notes-enter
+		.mk-notes-leave-to
+			opacity 0
+			transform translateY(-30px)
 
-		span
-			margin 0 16px
+		> *
+			transition transform .3s ease, opacity .3s ease
+
+		> .date
+			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
+			[data-fa]
+				margin-right 8px
 
 	> footer
 		> *
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 573026d53e..999ab566ac 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -2,13 +2,15 @@
 <div class="mk-notes">
 	<slot name="head"></slot>
 	<slot></slot>
-	<template v-for="(note, i) in _notes">
-		<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">
-			<span>%fa:angle-up%{{ note._datetext }}</span>
-			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
-		</p>
-	</template>
+	<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>
 		<slot name="tail"></slot>
 	</footer>
@@ -52,6 +54,31 @@ 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
+
 	> .init
 		padding 64px 0
 		text-align center
@@ -73,22 +100,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
-- 
cgit v1.2.3-freya


From 20e77196f28178c869402985761bd4c2fa74bf0a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Apr 2018 10:44:17 +0900
Subject: AP: 投票をレンダリング
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/desktop/views/components/notes.note.vue |  2 +-
 src/client/docs/api/entities/note.yaml                 |  6 ------
 src/client/docs/api/entities/post.yaml                 |  6 ------
 src/models/messaging-message.ts                        |  1 -
 src/models/note.ts                                     |  1 -
 src/remote/activitypub/kernel/delete/note.ts           |  1 -
 src/remote/activitypub/misc/get-note-html.ts           | 18 ++++++++++++++++++
 src/remote/activitypub/renderer/note.ts                |  3 ++-
 src/server/api/endpoints/messaging/messages/create.ts  |  3 ---
 src/services/note/create.ts                            |  2 --
 10 files changed, 21 insertions(+), 22 deletions(-)
 create mode 100644 src/remote/activitypub/misc/get-note-html.ts

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 1352fc4ee7..ae2793db92 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -36,7 +36,7 @@
 				</p>
 				<div class="text">
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
+					<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">
diff --git a/src/client/docs/api/entities/note.yaml b/src/client/docs/api/entities/note.yaml
index 718d331d13..6fd26543bb 100644
--- a/src/client/docs/api/entities/note.yaml
+++ b/src/client/docs/api/entities/note.yaml
@@ -29,12 +29,6 @@ props:
     desc:
       ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
       en: "The text of this note (in Markdown like format if local)"
-  - name: "textHtml"
-    type: "string"
-    optional: true
-    desc:
-      ja: "投稿の本文 (HTML) (投稿時は無視)"
-      en: "The text of this note (in HTML. Ignored when posting.)"
   - name: "mediaIds"
     type: "id(DriveFile)[]"
     optional: true
diff --git a/src/client/docs/api/entities/post.yaml b/src/client/docs/api/entities/post.yaml
index 718d331d13..6fd26543bb 100644
--- a/src/client/docs/api/entities/post.yaml
+++ b/src/client/docs/api/entities/post.yaml
@@ -29,12 +29,6 @@ props:
     desc:
       ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
       en: "The text of this note (in Markdown like format if local)"
-  - name: "textHtml"
-    type: "string"
-    optional: true
-    desc:
-      ja: "投稿の本文 (HTML) (投稿時は無視)"
-      en: "The text of this note (in HTML. Ignored when posting.)"
   - name: "mediaIds"
     type: "id(DriveFile)[]"
     optional: true
diff --git a/src/models/messaging-message.ts b/src/models/messaging-message.ts
index 9d62fab4fa..a6a50fc8cf 100644
--- a/src/models/messaging-message.ts
+++ b/src/models/messaging-message.ts
@@ -12,7 +12,6 @@ export interface IMessagingMessage {
 	_id: mongo.ObjectID;
 	createdAt: Date;
 	text: string;
-	textHtml: string;
 	userId: mongo.ObjectID;
 	recipientId: mongo.ObjectID;
 	isRead: boolean;
diff --git a/src/models/note.ts b/src/models/note.ts
index d4b16afa4c..02801b62de 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -38,7 +38,6 @@ export type INote = {
 	poll: any; // todo
 	text: string;
 	tags: string[];
-	textHtml: string;
 	cw: string;
 	userId: mongo.ObjectID;
 	appId: mongo.ObjectID;
diff --git a/src/remote/activitypub/kernel/delete/note.ts b/src/remote/activitypub/kernel/delete/note.ts
index 64c342d39b..b2868f69a3 100644
--- a/src/remote/activitypub/kernel/delete/note.ts
+++ b/src/remote/activitypub/kernel/delete/note.ts
@@ -22,7 +22,6 @@ export default async function(actor: IRemoteUser, uri: string): Promise<void> {
 		$set: {
 			deletedAt: new Date(),
 			text: null,
-			textHtml: null,
 			mediaIds: [],
 			poll: null
 		}
diff --git a/src/remote/activitypub/misc/get-note-html.ts b/src/remote/activitypub/misc/get-note-html.ts
new file mode 100644
index 0000000000..a63059a38d
--- /dev/null
+++ b/src/remote/activitypub/misc/get-note-html.ts
@@ -0,0 +1,18 @@
+import { INote } from "../../../models/note";
+import toHtml from '../../../text/html';
+import parse from '../../../text/parse';
+import config from '../../../config';
+
+export default function(note: INote) {
+	if (note.text == null) return null;
+
+	let html = toHtml(parse(note.text));
+
+	if (note.poll != null) {
+		const url = `${config.url}/notes/${note._id}`;
+		// TODO: i18n
+		html += `<p>【投票】<br />${url}</p>`;
+	}
+
+	return html;
+}
diff --git a/src/remote/activitypub/renderer/note.ts b/src/remote/activitypub/renderer/note.ts
index c364b13249..a05c12b388 100644
--- a/src/remote/activitypub/renderer/note.ts
+++ b/src/remote/activitypub/renderer/note.ts
@@ -4,6 +4,7 @@ import config from '../../../config';
 import DriveFile from '../../../models/drive-file';
 import Note, { INote } from '../../../models/note';
 import User from '../../../models/user';
+import toHtml from '../misc/get-note-html';
 
 export default async function renderNote(note: INote, dive = true) {
 	const promisedFiles = note.mediaIds
@@ -48,7 +49,7 @@ export default async function renderNote(note: INote, dive = true) {
 		id: `${config.url}/notes/${note._id}`,
 		type: 'Note',
 		attributedTo,
-		content: note.textHtml,
+		content: toHtml(note),
 		published: note.createdAt.toISOString(),
 		to: 'https://www.w3.org/ns/activitystreams#Public',
 		cc: `${attributedTo}/followers`,
diff --git a/src/server/api/endpoints/messaging/messages/create.ts b/src/server/api/endpoints/messaging/messages/create.ts
index 085e75e6cf..0483b602b2 100644
--- a/src/server/api/endpoints/messaging/messages/create.ts
+++ b/src/server/api/endpoints/messaging/messages/create.ts
@@ -12,8 +12,6 @@ import { pack } from '../../../../../models/messaging-message';
 import publishUserStream from '../../../../../publishers/stream';
 import { publishMessagingStream, publishMessagingIndexStream } from '../../../../../publishers/stream';
 import pushSw from '../../../../../publishers/push-sw';
-import html from '../../../../../text/html';
-import parse from '../../../../../text/parse';
 import config from '../../../../../config';
 
 /**
@@ -77,7 +75,6 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		fileId: file ? file._id : undefined,
 		recipientId: recipient._id,
 		text: text ? text : undefined,
-		textHtml: text ? html(parse(text)) : undefined,
 		userId: user._id,
 		isRead: false
 	});
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index ca01b557d6..2380e64ce3 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -15,7 +15,6 @@ import Mute from '../../models/mute';
 import pushSw from '../../publishers/push-sw';
 import event from '../../publishers/stream';
 import parse from '../../text/parse';
-import html from '../../text/html';
 import { IApp } from '../../models/app';
 
 export default async (user: IUser, data: {
@@ -63,7 +62,6 @@ export default async (user: IUser, data: {
 		replyId: data.reply ? data.reply._id : null,
 		renoteId: data.renote ? data.renote._id : null,
 		text: data.text,
-		textHtml: tokens === null ? null : html(tokens),
 		poll: data.poll,
 		cw: data.cw,
 		tags,
-- 
cgit v1.2.3-freya


From d2d3a7d52b78b7d7d1da4380b062ac2279948cae Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Apr 2018 17:04:52 +0900
Subject: CW

---
 .../app/desktop/views/components/notes.note.vue    | 216 ++++++++++--------
 .../app/desktop/views/components/post-form.vue     |  77 +++++--
 src/client/app/mobile/views/components/note.vue    | 250 ++++++++++++---------
 .../app/mobile/views/components/post-form.vue      |  33 ++-
 src/models/note.ts                                 |   2 +-
 src/server/api/endpoints/notes/create.ts           |  16 +-
 src/services/note/create.ts                        |   2 +-
 7 files changed, 369 insertions(+), 227 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index ae2793db92..6d0e0c8f5c 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -34,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">
-					<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"/>
+				<p v-if="p.cw != null" class="cw">
+					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
+					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
+				</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>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@@ -113,6 +119,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			isDetailOpened: false,
 			connection: null,
 			connectionId: null
@@ -456,7 +463,7 @@ root(isDark)
 
 			> .body
 
-				> .text
+				> .cw
 					cursor default
 					display block
 					margin 0
@@ -465,90 +472,117 @@ root(isDark)
 					font-size 1.1em
 					color isDark ? #fff : #717171
 
-					>>> .title
-						display block
-						margin-bottom 4px
-						padding 4px
-						font-size 90%
-						text-align center
-						background isDark ? #2f3944 : #eef1f3
-						border-radius 4px
-
-					>>> .code
-						margin 8px 0
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color isDark ? #6f808e : #aaa
-						border-left solid 3px isDark ? #637182 : #eee
-
-					> .reply
+					> .text
 						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
+					> .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
 
-				> .map
-					width 100%
-					height 300px
+						&:hover
+							background isDark ? #707b97 : #bbc4ce
 
-					&:empty
-						display none
+				> .content
 
-				> .tags
-					margin 4px 0 0 0
+					> .text
+						cursor default
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
+						color isDark ? #fff : #717171
 
-					> *
-						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 ""
+						>>> .title
 							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
+							margin-bottom 4px
+							padding 4px
+							font-size 90%
+							text-align center
+							background isDark ? #2f3944 : #eef1f3
+							border-radius 4px
+
+						>>> .code
+							margin 8px 0
+
+						>>> .quote
+							margin 8px
+							padding 6px 12px
+							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
 
-				> .channel
-					margin 0
+					> .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%
+					> .mk-poll
+						font-size 80%
 
-				> .renote
-					margin 8px 0
+					> .renote
+						margin 8px 0
 
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px isDark ? #4e945e : #c0dac6
-						border-radius 8px
+						> .mk-note-preview
+							padding 16px
+							border dashed 1px isDark ? #4e945e : #c0dac6
+							border-radius 8px
 
 			> footer
 				> button
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 919f97f44d..80d9d66753 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/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();
 		}
@@ -293,47 +329,54 @@ root(isDark)
 
 	> .content
 
-		textarea
+		> input
+		> textarea
 			display block
-			padding 12px
-			margin 0
 			width 100%
-			max-width 100%
-			min-width 100%
-			min-height calc(16px + 12px + 12px)
+			padding 12px
 			font-size 16px
 			color isDark ? #fff : #333
 			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
 
+			&:focus
+				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
-				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)
-
 			&.with
 				border-bottom solid 1px rgba($theme-color, 0.1) !important
 				border-radius 4px 4px 0 0
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 0967edeec0..ea4f9cb648 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -31,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">
-					<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>
+				<p v-if="p.cw != null" class="cw">
+					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
+					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
+				</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 != 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"/>
@@ -92,6 +98,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			connection: null,
 			connectionId: null
 		};
@@ -229,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
 
@@ -388,113 +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
 
-					>>> .title
-						display block
-						margin-bottom 4px
-						padding 4px
-						font-size 90%
-						text-align center
-						background #eef1f3
-						border-radius 4px
-
-					>>> .code
-						margin 8px 0
+					> .text
+						margin-right 8px
 
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
+					> .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
 
-					> .reply
-						margin-right 8px
-						color #717171
+						&:hover
+							background isDark ? #707b97 : #bbc4ce
 
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
+				> .content
 
-					[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
+					> .text
+						display block
+						margin 0
+						padding 0
+						overflow-wrap break-word
+						font-size 1.1em
+						color #717171
 
-				.mk-url-preview
-					margin-top 8px
+						>>> .title
+							display block
+							margin-bottom 4px
+							padding 4px
+							font-size 90%
+							text-align center
+							background #eef1f3
+							border-radius 4px
+
+						>>> .code
+							margin 8px 0
+
+						>>> .quote
+							margin 8px
+							padding 6px 12px
+							color #aaa
+							border-left solid 3px #eee
+
+						> .reply
+							margin-right 8px
+							color #717171
+
+						> .rp
+							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%
 
-				> .channel
-					margin 0
+					> .location
+						margin 4px 0
+						font-size 12px
+						color #ccc
 
-				> .tags
-					margin 4px 0 0 0
+					> .map
+						width 100%
+						height 200px
 
-					> *
-						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%
+						&:empty
+							display none
 
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
+					> .mk-poll
+						font-size 80%
 
-				> .map
-					width 100%
-					height 200px
+					> .renote
+						margin 8px 0
 
-					&:empty
-						display none
+						> .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
@@ -524,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>
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 861e8653ba..957af3487b 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/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
diff --git a/src/models/note.ts b/src/models/note.ts
index 02801b62de..3c835ed190 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -24,7 +24,7 @@ export function isValidText(text: string): boolean {
 }
 
 export function isValidCw(text: string): boolean {
-	return text.length <= 100 && text.trim() != '';
+	return text.length <= 100;
 }
 
 export type INote = {
diff --git a/src/server/api/endpoints/notes/create.ts b/src/server/api/endpoints/notes/create.ts
index 14e906eb9d..ea1f41aae2 100644
--- a/src/server/api/endpoints/notes/create.ts
+++ b/src/server/api/endpoints/notes/create.ts
@@ -23,11 +23,11 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 	if (visibilityErr) return rej('invalid visibility');
 
 	// Get 'text' parameter
-	const [text, textErr] = $(params.text).optional.string().pipe(isValidText).$;
+	const [text = null, textErr] = $(params.text).optional.nullable.string().pipe(isValidText).$;
 	if (textErr) return rej('invalid text');
 
 	// Get 'cw' parameter
-	const [cw, cwErr] = $(params.cw).optional.string().pipe(isValidCw).$;
+	const [cw, cwErr] = $(params.cw).optional.nullable.string().pipe(isValidCw).$;
 	if (cwErr) return rej('invalid cw');
 
 	// Get 'viaMobile' parameter
@@ -187,14 +187,14 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 	const note = await create(user, {
 		createdAt: new Date(),
 		media: files,
-		poll: poll,
-		text: text,
+		poll,
+		text,
 		reply,
 		renote,
-		cw: cw,
-		tags: tags,
-		app: app,
-		viaMobile: viaMobile,
+		cw,
+		tags,
+		app,
+		viaMobile,
 		visibility,
 		geo
 	});
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 2380e64ce3..e5ad96898f 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -63,7 +63,7 @@ export default async (user: IUser, data: {
 		renoteId: data.renote ? data.renote._id : null,
 		text: data.text,
 		poll: data.poll,
-		cw: data.cw,
+		cw: data.cw == null ? null : data.cw,
 		tags,
 		userId: user._id,
 		viaMobile: data.viaMobile,
-- 
cgit v1.2.3-freya


From 08b8d829f9514fc2cb7a7e5da88831e2a9e376f4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Apr 2018 17:28:21 +0900
Subject: ダークモード情報をアカウントではなくブラウザに保存するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/boot.js                             |  7 +---
 .../app/desktop/views/components/settings.vue      |  6 ++-
 .../desktop/views/components/ui.header.account.vue |  5 +--
 src/client/app/init.ts                             | 45 ++++++++++++----------
 4 files changed, 33 insertions(+), 30 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 8a79880fb4..f5a1afec63 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -61,11 +61,8 @@
 	}
 
 	// Dark/Light
-	const me = JSON.parse(localStorage.getItem('me') || null);
-	if (me && me.clientSettings) {
-		if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
-			document.documentElement.setAttribute('data-darkmode', 'true');
-		}
+	if (localStorage.getItem('darkmode') == 'true') {
+		document.documentElement.setAttribute('data-darkmode', 'true');
 	}
 
 	// Script version
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index b5111dabc9..9d56042ea7 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -40,7 +40,7 @@
 				<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
 			</div>
 			<div class="div">
-				<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/>
+				<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="タイムライン上部に投稿フォームを表示する"/>
@@ -234,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,
@@ -257,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');
 		},
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index ce7fab22cf..2d4d23933c 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -88,10 +88,7 @@ export default Vue.extend({
 			(this as any).os.signout();
 		},
 		dark() {
-			(this as any).api('i/update_client_setting', {
-				name: 'dark',
-				value: !(this as any)._darkmode_
-			});
+			(this as any)._updateDarkmode_(!(this as any)._darkmode_);
 		}
 	}
 });
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 461093488d..2f79e6cab1 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -61,39 +61,44 @@ Vue.mixin({
 });
 
 // Dark/Light
+const bus = new Vue();
 Vue.mixin({
 	data() {
 		return {
-			_darkmode_: false
+			_darkmode_: localStorage.getItem('darkmode') == 'true'
 		};
 	},
 	beforeCreate() {
-		// なぜか警告が出るため
-		this._darkmode_ = false;
+		// なぜか警告が出るので
+		this._darkmode_ = localStorage.getItem('darkmode') == 'true';
+	},
+	beforeDestroy() {
+		bus.$off('updated', this._onDarkmodeUpdated_);
 	},
 	mounted() {
-		const set = () => {
-			if (!this.$el || !this.$el.setAttribute || !this.os || !this.os.i) return;
-			if (this.os.i.clientSettings.dark) {
+		this._onDarkmodeUpdated_(this._darkmode_);
+		bus.$on('updated', this._onDarkmodeUpdated_);
+	},
+	methods: {
+		_updateDarkmode_(v) {
+			localStorage.setItem('darkmode', v.toString());
+			bus.$emit('updated', v);
+			if (v) {
 				document.documentElement.setAttribute('data-darkmode', 'true');
-				this.$el.setAttribute('data-darkmode', 'true');
-				this._darkmode_ = true;
-				this.$forceUpdate();
 			} else {
 				document.documentElement.removeAttribute('data-darkmode');
+			}
+		},
+		_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_ = false;
-				this.$forceUpdate();
 			}
-		};
-
-		set();
-
-		this.$watch('os.i.clientSettings', i => {
-			set();
-		}, {
-			deep: true
-		});
+			this._darkmode_ = v;
+			this.$forceUpdate();
+		}
 	}
 });
 
-- 
cgit v1.2.3-freya


From ed0885ce5c592a2cb3755d7a43faa95845f06576 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Apr 2018 17:32:56 +0900
Subject: #1533

---
 .../app/desktop/views/components/notifications.vue | 354 +++++++++++----------
 1 file changed, 183 insertions(+), 171 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index f665f3d76c..47463b8b5b 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/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">
-			<div class="notification" :class="notification.type" :key="notification.id">
-				<mk-time :time="notification.createdAt"/>
-				<template v-if="notification.type == 'reaction'">
-					<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>
-							<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%
+		<transition-group name="mk-notifications" class="transition">
+			<template v-for="(notification, i) in _notifications">
+				<div class="notification" :class="notification.type" :key="notification.id">
+					<mk-time :time="notification.createdAt"/>
+					<template v-if="notification.type == 'reaction'">
+						<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>
-				</template>
-				<template v-if="notification.type == 'renote'">
-					<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:retweet%
-							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-						</p>
-						<router-link class="note-ref" :to="notification.note | notePage">
-							%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+						<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>
+					</template>
+					<template v-if="notification.type == 'renote'">
+						<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>
-				</template>
-				<template v-if="notification.type == 'quote'">
-					<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:quote-left%
-							<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 == '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%
+						<div class="text">
+							<p>%fa:retweet%
+								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
+							</p>
+							<router-link class="note-ref" :to="notification.note | notePage">
+								%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+							</router-link>
+						</div>
+					</template>
+					<template v-if="notification.type == 'quote'">
+						<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>
-				</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>
+						<div class="text">
+							<p>%fa:quote-left%
+								<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 == '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%' }}
@@ -186,97 +188,107 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	> .notifications
-		> .notification
-			margin 0
-			padding 16px
-			overflow-wrap break-word
-			font-size 0.9em
-			border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
-
-			&:last-child
-				border-bottom none
-
-			> .mk-time
-				display inline
-				position absolute
-				top 16px
-				right 12px
-				vertical-align top
-				color isDark ? #606984 : rgba(0, 0, 0, 0.6)
-				font-size small
-
-			&:after
-				content ""
-				display block
-				clear both
+	.transition
+		.mk-notifications-enter
+		.mk-notifications-leave-to
+			opacity 0
+			transform translateY(-30px)
 
-			> .avatar-anchor
-				display block
-				float left
-				position -webkit-sticky
-				position sticky
-				top 16px
+		> *
+			transition transform .3s ease, opacity .3s ease
 
-				> img
+	> .notifications
+		> *
+			> .notification
+				margin 0
+				padding 16px
+				overflow-wrap break-word
+				font-size 0.9em
+				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+
+				&:last-child
+					border-bottom none
+
+				> .mk-time
+					display inline
+					position absolute
+					top 16px
+					right 12px
+					vertical-align top
+					color isDark ? #606984 : rgba(0, 0, 0, 0.6)
+					font-size small
+
+				&:after
+					content ""
 					display block
-					min-width 36px
-					min-height 36px
-					max-width 36px
-					max-height 36px
-					border-radius 6px
-
-			> .text
-				float right
-				width calc(100% - 36px)
-				padding-left 8px
-
-				p
-					margin 0
+					clear both
 
-					i, .mk-reaction-icon
-						margin-right 4px
-
-			.note-preview
-				color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+				> .avatar-anchor
+					display block
+					float left
+					position -webkit-sticky
+					position sticky
+					top 16px
+
+					> img
+						display block
+						min-width 36px
+						min-height 36px
+						max-width 36px
+						max-height 36px
+						border-radius 6px
+
+				> .text
+					float right
+					width calc(100% - 36px)
+					padding-left 8px
+
+					p
+						margin 0
+
+						i, .mk-reaction-icon
+							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)
 
-			.note-ref
-				color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+				span
+					margin 0 16px
 
 				[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]
-				margin-right 8px
+					margin-right 8px
 
 	> .more
 		display block
-- 
cgit v1.2.3-freya


From 3a767f29bec4da6e22608191a189f01d3ccb2d5b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Apr 2018 17:34:25 +0900
Subject: Fix #1532

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 51309a0578..3d28d5149d 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/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() {
-- 
cgit v1.2.3-freya


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

---
 locales/en.yml                                                | 1 +
 locales/fr.yml                                                | 1 +
 locales/ja.yml                                                | 1 +
 src/client/app/desktop/views/components/ui.header.account.vue | 3 +++
 4 files changed, 6 insertions(+)

(limited to 'src/client/app/desktop/views/components')

diff --git a/locales/en.yml b/locales/en.yml
index 0a05393227..4ef12432be 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
   favorites: "Favorites"
+  lists: "Lists"
   customize: "Customize"
   settings: "Settings"
   signout: "Sign out"
diff --git a/locales/fr.yml b/locales/fr.yml
index e640c4883c..80b1ed13da 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "Votre profil"
   drive: "Drive"
   favorites: "Favorites"
+  lists: "リスト"
   customize: "Modifications"
   settings: "Réglages"
   signout: "Déconnexion"
diff --git a/locales/ja.yml b/locales/ja.yml
index 3d023281cd..e13348c407 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
   favorites: "お気に入り"
+  lists: "リスト"
   customize: "カスタマイズ"
   settings: "設定"
   signout: "サインアウト"
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 2d4d23933c..54da97071a 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -16,6 +16,9 @@
 				<li>
 					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
 				</li>
+				<li @click="list">
+					<p>%fa:cog%<span>%i18n:@lists%</span>%fa:angle-right%</p>
+				</li>
 			</ul>
 			<ul>
 				<li>
-- 
cgit v1.2.3-freya


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


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

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

(limited to 'src/client/app/desktop/views/components')

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


From a0795b1afe28ebea456159049cfd1e7d8123f5e8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 26 Apr 2018 18:24:14 +0900
Subject: Fix #1552

---
 src/client/app/desktop/views/components/timeline.vue | 2 +-
 src/client/app/mobile/views/pages/home.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index f5f13cbd56..31271c7c19 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -10,7 +10,7 @@
 	<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"/>
+	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 </div>
 </template>
 
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 92d34fa83b..72b30d5440 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -36,7 +36,7 @@
 			<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
 			<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
-			<mk-user-list-timeline v-if="src.startsWith('list:')" ref="tl" key="list" :list="list"/>
+			<mk-user-list-timeline v-if="src.startsWith('list:')" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
 </mk-ui>
-- 
cgit v1.2.3-freya


From 93fa28991e8e0abe01948a7703af102ce2a1e465 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 00:47:52 +0900
Subject: :art:

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

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 31271c7c19..2047b5dced 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -67,7 +67,7 @@ root(isDark)
 		z-index 10
 		background isDark ? #313543 : #fff
 		border-radius 6px 6px 0 0
-		box-shadow 0 1px rgba(0, 0, 0, 0.08)
+		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> button
 			position absolute
-- 
cgit v1.2.3-freya


From 8984e3131df7e7511b7977e3008ea307ee5944c7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 02:29:17 +0900
Subject: モバイル版のダークモード
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

など
---
 .../common/views/components/reaction-picker.vue    |  2 +-
 .../desktop/views/components/note-detail.sub.vue   | 39 +++++++-----
 .../app/desktop/views/components/note-detail.vue   | 48 ++++++++-------
 .../app/desktop/views/components/notes.note.vue    |  2 +-
 src/client/app/mobile/script.ts                    |  8 +--
 .../mobile/views/components/note-detail.sub.vue    | 26 ++++----
 .../app/mobile/views/components/note-detail.vue    | 69 +++++++++++-----------
 .../app/mobile/views/components/note.sub.vue       | 17 ++++--
 src/client/app/mobile/views/components/note.vue    | 36 +++++------
 src/client/app/mobile/views/components/notes.vue   | 10 ++--
 .../app/mobile/views/components/notification.vue   | 18 +++---
 .../app/mobile/views/components/notifications.vue  | 23 ++++----
 .../app/mobile/views/components/ui.header.vue      |  2 +-
 src/client/app/mobile/views/components/ui.nav.vue  | 49 ++++++++++-----
 src/client/app/mobile/views/pages/note.vue         | 43 ++++++--------
 src/client/app/mobile/views/pages/user.vue         |  7 ++-
 src/client/app/mobile/views/pages/user/home.vue    |  3 +
 17 files changed, 223 insertions(+), 179 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index ba87ae3497..e2c8a6ed3f 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -120,7 +120,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.1)
+		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
 		opacity 0
 
 	> .popover
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index cbea77ae74..fb33421309 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -16,7 +16,9 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
+			<div class="text">
+				<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
+			</div>
 			<div class="media" v-if="note.mediaIds.length > 0">
 				<mk-media-list :media-list="note.media"/>
 			</div>
@@ -40,10 +42,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	margin 0
 	padding 20px 32px
-	background #fdfdfd
+	background isDark ? #21242d : #fdfdfd
 
 	&:after
 		content ""
@@ -87,7 +89,7 @@ export default Vue.extend({
 					display inline
 					margin 0
 					padding 0
-					color #777
+					color isDark ? #fff : #777
 					font-size 1em
 					font-weight 700
 					text-align left
@@ -99,24 +101,29 @@ export default Vue.extend({
 				> .username
 					text-align left
 					margin 0 0 0 8px
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 			> .right
 				float right
 
 				> .time
 					font-size 0.9em
-					color #c0c0c0
+					color isDark ? #606984 : #c0c0c0
 
-</style>
+		> .body
+			> .text
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1em
+				color isDark ? #959ba7 : #717171
+
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
 
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1em
-	color #717171
 </style>
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index f5153bad63..266644cf85 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -38,7 +38,9 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
+			<div class="text">
+				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
+			</div>
 			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
@@ -214,12 +216,12 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-note-detail
+root(isDark)
 	margin 0
 	padding 0
 	overflow hidden
 	text-align left
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(0, 0, 0, 0.1)
 	border-radius 8px
 
@@ -232,10 +234,10 @@ export default Vue.extend({
 		text-align center
 		color #999
 		cursor pointer
-		background #fafafa
+		background isDark ? #21242d : #fafafa
 		outline none
 		border none
-		border-bottom solid 1px #eef0f2
+		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
 		border-radius 6px 6px 0 0
 
 		&:hover
@@ -249,11 +251,11 @@ export default Vue.extend({
 
 	> .context
 		> *
-			border-bottom 1px solid #eef0f2
+			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
 		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
 			margin 0
@@ -281,7 +283,7 @@ export default Vue.extend({
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid #eef0f2
+		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> article
 		padding 28px 32px 18px 32px
@@ -318,7 +320,7 @@ export default Vue.extend({
 				display inline-block
 				margin 0
 				line-height 24px
-				color #777
+				color isDark ? #fff : #627079
 				font-size 18px
 				font-weight 700
 				text-align left
@@ -331,7 +333,7 @@ export default Vue.extend({
 				display block
 				text-align left
 				margin 0
-				color #ccc
+				color isDark ? #606984 : #ccc
 
 			> .time
 				position absolute
@@ -343,6 +345,15 @@ export default Vue.extend({
 		> .body
 			padding 8px 0
 
+			> .text
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1.5em
+				color isDark ? #fff : #717171
+
 			> .renote
 				margin 8px 0
 
@@ -420,17 +431,12 @@ export default Vue.extend({
 
 	> .replies
 		> *
-			border-top 1px solid #eef0f2
+			border-top 1px solid isDark ? #1c2023 : #eef0f2
 
-</style>
+.mk-note-detail[data-darkmode]
+	root(true)
+
+.mk-note-detail:not([data-darkmode])
+	root(false)
 
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1.5em
-	color #717171
 </style>
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 6d0e0c8f5c..9e7a7a6d29 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -434,7 +434,7 @@ root(isDark)
 					margin 0 .5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color isDark ? #758188 :#aaa
+					color isDark ? #758188 : #aaa
 					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 1de4891973..2e9805e0d0 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -55,15 +55,15 @@ init((launch) => {
 			{ path: '/signup', name: 'signup', component: MkSignup },
 			{ path: '/i/settings', component: MkSettings },
 			{ path: '/i/settings/profile', component: MkProfileSetting },
-			{ path: '/i/notifications', component: MkNotifications },
-			{ path: '/i/messaging', component: MkMessaging },
+			{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
+			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
-			{ path: '/i/drive', component: MkDrive },
+			{ path: '/i/drive', name: 'drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/drive/file/:file', component: MkDrive },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
-			{ path: '/othello', component: MkOthello },
+			{ path: '/othello', name: 'othello', component: MkOthello },
 			{ path: '/othello/:game', component: MkOthello },
 			{ path: '/@:user', component: MkUser },
 			{ path: '/@:user/followers', component: MkFollowers },
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
index 06f442d308..683b5ffd1b 100644
--- a/src/client/app/mobile/views/components/note-detail.sub.vue
+++ b/src/client/app/mobile/views/components/note-detail.sub.vue
@@ -27,23 +27,22 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.root.sub
+root(isDark)
 	padding 8px
 	font-size 0.9em
-	background #fdfdfd
+	background isDark ? #21242d : #fdfdfd
 
 	@media (min-width 500px)
 		padding 12px
 
+	@media (min-width 600px)
+		padding 24px 32px
+
 	&:after
 		content ""
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
 	> .avatar-anchor
 		display block
 		float left
@@ -71,7 +70,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 700
 				text-align left
@@ -84,11 +83,11 @@ export default Vue.extend({
 			> .username
 				text-align left
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .time
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 
@@ -97,7 +96,12 @@ export default Vue.extend({
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
-</style>
+.root.sub[data-darkmode]
+	root(true)
 
+.root.sub:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 62dd9184cd..5d593c02d3 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -34,7 +34,9 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+			<div class="text">
+				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
+			</div>
 			<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>
@@ -209,15 +211,18 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-note-detail
+root(isDark)
 	overflow hidden
 	margin 0 auto
 	padding 0
 	width 100%
 	text-align left
-	background #fff
+	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 2px rgba(#000, 0.1)
+
+	@media (min-width 500px)
+		box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	> .fetching
 		padding 64px 0
@@ -231,29 +236,26 @@ export default Vue.extend({
 		text-align center
 		color #999
 		cursor pointer
-		background #fafafa
+		background isDark ? #21242d : #fafafa
 		outline none
 		border none
-		border-bottom solid 1px #eef0f2
+		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
 		border-radius 6px 6px 0 0
 		box-shadow none
 
 		&:hover
-			background #f6f6f6
-
-		&:active
-			background #f0f0f0
+			background isDark ? #16181d : #f6f6f6
 
 		&:disabled
 			color #ccc
 
 	> .context
 		> *
-			border-bottom 1px solid #eef0f2
+			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
 		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
 			margin 0
@@ -281,7 +283,7 @@ export default Vue.extend({
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid #eef0f2
+		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> article
 		padding 14px 16px 9px 16px
@@ -294,17 +296,13 @@ export default Vue.extend({
 			display block
 			clear both
 
-		&:hover
-			> .main > footer > button
-				color #888
-
 		> header
 			display flex
-			line-height 1.1
+			line-height 1.1em
 
 			> .avatar-anchor
 				display block
-				padding 0 .5em 0 0
+				padding 0 12px 0 0
 
 				> .avatar
 					display block
@@ -323,7 +321,7 @@ export default Vue.extend({
 				> .name
 					display inline-block
 					margin .4em 0
-					color #777
+					color isDark ? #fff : #627079
 					font-size 16px
 					font-weight bold
 					text-align left
@@ -336,11 +334,22 @@ export default Vue.extend({
 					display block
 					text-align left
 					margin 0
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 		> .body
 			padding 8px 0
 
+			> .text
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 16px
+				color isDark ? #fff : #717171
+
+				@media (min-width 500px)
+					font-size 24px
+
 			> .renote
 				margin 8px 0
 
@@ -427,20 +436,12 @@ export default Vue.extend({
 
 	> .replies
 		> *
-			border-top 1px solid #eef0f2
+			border-top 1px solid isDark ? #1c2023 : #eef0f2
 
-</style>
+.mk-note-detail[data-darkmode]
+	root(true)
 
-<style lang="stylus" module>
-.text
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 16px
-	color #717171
-
-	@media (min-width 500px)
-		font-size 24px
+.mk-note-detail:not([data-darkmode])
+	root(false)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 759de4746b..38659143ac 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -27,7 +27,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.sub
+root(isDark)
 	font-size 0.9em
 	padding 16px
 
@@ -76,7 +76,7 @@ export default Vue.extend({
 				margin 0 0.5em 0 0
 				padding 0
 				overflow hidden
-				color #607073
+				color isDark ? #fff : #607073
 				font-size 1em
 				font-weight 700
 				text-align left
@@ -89,11 +89,11 @@ export default Vue.extend({
 			> .username
 				text-align left
 				margin 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .created-at
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 			max-height 128px
@@ -104,11 +104,16 @@ export default Vue.extend({
 				margin 0
 				padding 0
 				font-size 1.1em
-				color #717171
+				color isDark ? #959ba7 : #717171
 
 				pre
 					max-height 120px
 					font-size 80%
 
-</style>
+.sub[data-darkmode]
+	root(true)
+
+.sub:not([data-darkmode])
+	root(false)
 
+</style>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 5772fb2b7e..e7a43f7985 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -261,7 +261,7 @@ root(isDark)
 		padding 8px 16px
 		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%)
 
 		@media (min-width 500px)
 			padding 16px
@@ -325,9 +325,9 @@ root(isDark)
 			display block
 			float left
 			margin 0 10px 8px 0
-			position -webkit-sticky
-			position sticky
-			top 62px
+			//position -webkit-sticky
+			//position sticky
+			//top 62px
 
 			@media (min-width 500px)
 				margin-right 16px
@@ -365,7 +365,7 @@ root(isDark)
 					margin 0 0.5em 0 0
 					padding 0
 					overflow hidden
-					color #627079
+					color isDark ? #fff : #627079
 					font-size 1em
 					font-weight bold
 					text-decoration none
@@ -378,15 +378,15 @@ root(isDark)
 					margin 0 0.5em 0 0
 					padding 1px 6px
 					font-size 12px
-					color #aaa
-					border solid 1px #ddd
+					color isDark ? #758188 : #aaa
+					border solid 1px isDark ? #57616f : #ddd
 					border-radius 3px
 
 				> .username
 					margin 0 0.5em 0 0
 					overflow hidden
 					text-overflow ellipsis
-					color #ccc
+					color isDark ? #606984 : #ccc
 
 				> .info
 					margin-left auto
@@ -394,10 +394,10 @@ root(isDark)
 
 					> .mobile
 						margin-right 6px
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
 
 					> .created-at
-						color #c0c0c0
+						color isDark ? #606984 : #c0c0c0
 
 			> .body
 
@@ -434,7 +434,7 @@ root(isDark)
 						padding 0
 						overflow-wrap break-word
 						font-size 1.1em
-						color #717171
+						color isDark ? #fff : #717171
 
 						>>> .title
 							display block
@@ -442,7 +442,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background #eef1f3
+							background isDark ? #2f3944 : #eef1f3
 							border-radius 4px
 
 						>>> .code
@@ -451,12 +451,12 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color #aaa
-							border-left solid 3px #eee
+							color isDark ? #6f808e : #aaa
+							border-left solid 3px isDark ? #637182 : #eee
 
 						> .reply
 							margin-right 8px
-							color #717171
+							color isDark ? #99abbf : #717171
 
 						> .rp
 							margin-left 4px
@@ -528,7 +528,7 @@ root(isDark)
 
 						> .mk-note-preview
 							padding 16px
-							border dashed 1px #c0dac6
+							border dashed 1px isDark ? #4e945e : #c0dac6
 							border-radius 8px
 
 				> .app
@@ -543,14 +543,14 @@ root(isDark)
 					border none
 					box-shadow none
 					font-size 1em
-					color #ddd
+					color isDark ? #606984 : #ddd
 					cursor pointer
 
 					&:not(:last-child)
 						margin-right 28px
 
 					&:hover
-						color #666
+						color isDark ? #9198af : #666
 
 					> .count
 						display inline
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index ecd9c8cf2b..58069b06ee 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -202,10 +202,10 @@ export default Vue.extend({
 root(isDark)
 	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
+	box-shadow 0 0 2px rgba(#000, 0.1)
 
 	@media (min-width 500px)
-		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
+		box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	.transition
 		.mk-notes-enter
@@ -222,9 +222,9 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.9em
-			color #aaa
-			background #fdfdfd
-			border-bottom solid 1px #eaeaea
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 			span
 				margin 0 16px
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 793f34fe85..a4e6b027ed 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -91,8 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notification
-
+root(isDark)
 	> .notification
 		padding 16px
 		font-size 12px
@@ -105,7 +104,7 @@ export default Vue.extend({
 			font-size 16px
 
 		@media (min-width 600px)
-			padding 32px
+			padding 24px 32px
 
 		&:after
 			content ""
@@ -143,14 +142,14 @@ export default Vue.extend({
 
 				> .mk-time
 					margin-left auto
-					color rgba(0, 0, 0, 0.3)
+					color isDark ? #606984 : #c0c0c0
 					font-size 0.9em
 
 			> .note-preview
-				color rgba(0, 0, 0, 0.7)
+				color isDark ? #fff : #717171
 
 			> .note-ref
-				color rgba(0, 0, 0, 0.7)
+				color isDark ? #fff : #717171
 
 				[data-fa]
 					font-size 1em
@@ -167,5 +166,10 @@ export default Vue.extend({
 			> div > header i
 				color #53c7ce
 
-</style>
+.mk-notification[data-darkmode]
+	root(true)
 
+.mk-notification:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 7a878740cc..a0d8938646 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -103,9 +103,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-notifications
+root(isDark)
 	margin 0 auto
-	background #fff
+	background isDark ? #282C37 :#fff
 	border-radius 8px
 	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
 
@@ -123,11 +123,8 @@ export default Vue.extend({
 
 	> .notifications
 
-		> .mk-notification
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
-
-			&:last-child
-				border-bottom none
+		> .mk-notification:not(:last-child)
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 		> .date
 			display block
@@ -135,9 +132,9 @@ export default Vue.extend({
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color #aaa
-			background #fdfdfd
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 			span
 				margin 0 16px
@@ -170,4 +167,10 @@ export default Vue.extend({
 		> [data-fa]
 			margin-right 4px
 
+.mk-notifications[data-darkmode]
+	root(true)
+
+.mk-notifications:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 89edcf5a9e..1e6c7b0856 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -150,7 +150,7 @@ root(isDark)
 	top 0
 	z-index 1024
 	width 100%
-	//box-shadow 0 1px 0 rgba(#000, 0.075)
+	box-shadow 0 1px 0 rgba(#000, 0.075)
 
 	&, *
 		user-select none
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 68cdacb3b5..2ea4364fb1 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -15,19 +15,20 @@
 			</router-link>
 			<div class="links">
 				<ul>
-					<li><router-link to="/">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
-					<li><router-link to="/i/notifications">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/i/messaging">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
-					<li><router-link to="/othello">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@home%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
-					<li><router-link to="/i/drive">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li>
 				</ul>
 				<ul>
 					<li><router-link to="/i/settings">%fa:cog%%i18n:@settings%%fa:angle-right%</router-link></li>
+					<li @click="dark"><p><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template><span>ダークモード</span></p></li>
 				</ul>
 			</div>
 			<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
@@ -113,6 +114,9 @@ export default Vue.extend({
 		},
 		onOthelloNoInvites() {
 			this.hasGameInvitations = false;
+		},
+		dark() {
+			(this as any)._updateDarkmode_(!(this as any)._darkmode_);
 		}
 	}
 });
@@ -121,7 +125,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.nav
+root(isDark)
+	$color = isDark ? #c9d2e0 : #777
+
 	.backdrop
 		position fixed
 		top 0
@@ -129,7 +135,7 @@ export default Vue.extend({
 		z-index 1025
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.2)
+		background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
 
 	.body
 		position fixed
@@ -140,8 +146,7 @@ export default Vue.extend({
 		height 100%
 		overflow auto
 		-webkit-overflow-scrolling touch
-		color #777
-		background #fff
+		background isDark ? #16191f : #fff
 
 	.me
 		display block
@@ -162,7 +167,7 @@ export default Vue.extend({
 			left 80px
 			padding 0
 			width calc(100% - 112px)
-			color #777
+			color $color
 			line-height 96px
 			overflow hidden
 			text-overflow ellipsis
@@ -182,14 +187,22 @@ export default Vue.extend({
 			font-size 1em
 			line-height 1em
 
-			a
+			a, p
 				display block
+				margin 0
 				padding 0 20px
 				line-height 3rem
 				line-height calc(1rem + 30px)
-				color #777
+				color $color
 				text-decoration none
 
+				&[data-active]
+					color $theme-color-foreground
+					background $theme-color
+
+					> [data-fa]:last-child
+						color $theme-color-foreground
+
 				> [data-fa]:first-child
 					margin-right 0.5em
 
@@ -205,18 +218,16 @@ export default Vue.extend({
 					padding 0 20px
 					font-size 1.2em
 					line-height calc(1rem + 30px)
-					color #ccc
+					color $color
 
 	.about
 		margin 0
 		padding 1em 0
 		text-align center
 		font-size 0.8em
+		color $color
 		opacity 0.5
 
-		a
-			color #777
-
 .nav-enter-active,
 .nav-leave-active {
 	opacity: 1;
@@ -239,4 +250,10 @@ export default Vue.extend({
 	opacity: 0;
 }
 
+.nav[data-darkmode]
+	root(true)
+
+.nav:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue
index 7bcc5e71f5..aff0d5aa52 100644
--- a/src/client/app/mobile/views/pages/note.vue
+++ b/src/client/app/mobile/views/pages/note.vue
@@ -2,11 +2,13 @@
 <mk-ui>
 	<span slot="header">%fa:R sticky-note%%i18n:@title%</span>
 	<main v-if="!fetching">
-		<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:@next%</a>
 		<div>
 			<mk-note-detail :note="note"/>
 		</div>
-		<a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:@prev%</a>
+		<footer>
+			<a v-if="note.prev" :href="note.prev">%fa:angle-left% %i18n:@prev%</a>
+			<a v-if="note.next" :href="note.next">%i18n:@next% %fa:angle-right%</a>
+		</footer>
 	</main>
 </mk-ui>
 </template>
@@ -52,33 +54,24 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 main
 	text-align center
+	padding 8px
 
-	> div
-		margin 8px auto
-		padding 0
-		max-width 500px
-		width calc(100% - 16px)
-
-		@media (min-width 500px)
-			margin 16px auto
-			width calc(100% - 32px)
-
-	> a
-		display inline-block
+	@media (min-width 500px)
+		padding 16px
 
-		&:first-child
-			margin-top 8px
+	@media (min-width 600px)
+		padding 32px
 
-			@media (min-width 500px)
-				margin-top 16px
-
-		&:last-child
-			margin-bottom 8px
+	> div
+		margin 0 auto
+		padding 0
+		max-width 600px
 
-			@media (min-width 500px)
-				margin-bottom 16px
+	> footer
+		margin-top 16px
 
-		> [data-fa]
-			margin-right 4px
+		> a
+			display inline-block
+			margin 0 16px
 
 </style>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index abd4b5bd85..d2688a0f3d 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -135,7 +135,7 @@ root(isDark)
 
 		> .banner
 			padding-bottom 33.3%
-			background-color isDark ? #0e0e0e : #cacaca
+			background-color isDark ? #5f7273 : #cacaca
 			background-size cover
 			background-position center
 
@@ -162,6 +162,7 @@ root(isDark)
 						left -2px
 						bottom -2px
 						width 100%
+						background isDark ? #191b22 : #ececed
 						border 3px solid isDark ? #191b22 : #ececed
 						border-radius 6px
 
@@ -195,8 +196,8 @@ root(isDark)
 					margin-left 8px
 					padding 2px 4px
 					font-size 12px
-					color #657786
-					background #f8f8f8
+					color isDark ? #657786 : #fff
+					background isDark ? #f8f8f8 : #a7bec7
 					border-radius 4px
 
 			> .description
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index f4191edbbf..d9bb8041e4 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -61,6 +61,9 @@ export default Vue.extend({
 	> .mk-note-detail
 		margin 0 0 8px 0
 
+		@media (min-width 500px)
+			margin 0 0 16px 0
+
 	> section
 		background #eee
 		border-radius 8px
-- 
cgit v1.2.3-freya


From c85c825bad2f9e2f9cec290718beaac3b1c926dd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 10:27:43 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/notes.note.sub.vue |  3 ++-
 src/client/app/desktop/views/components/notes.note.vue     |  7 -------
 src/client/app/mobile/views/components/note-preview.vue    |  1 -
 src/client/app/mobile/views/components/note.sub.vue        |  3 ++-
 src/client/app/mobile/views/components/note.vue            | 12 ------------
 src/client/app/mobile/views/components/notes.vue           |  1 +
 6 files changed, 5 insertions(+), 22 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index c3136b64f5..3e1b75c29f 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -35,8 +35,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	margin 0
-	padding 16px
+	padding 16px 32px
 	font-size 0.9em
+	background isDark ? #21242d : #fcfcfc
 
 	&:after
 		content ""
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 9e7a7a6d29..217587ec6d 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -371,13 +371,6 @@ root(isDark)
 		& + article
 			padding-top 8px
 
-	> .reply-to
-		padding 0 16px
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
 	> article
 		padding 28px 32px 18px 32px
 
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index b9a6db315d..1de739d5d2 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -31,7 +31,6 @@ export default Vue.extend({
 	margin 0
 	padding 0
 	font-size 0.9em
-	background #fff
 
 	&:after
 		content ""
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 38659143ac..8e3835ac23 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -28,8 +28,9 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	font-size 0.9em
 	padding 16px
+	font-size 0.9em
+	background isDark ? #21242d : #fcfcfc
 
 	@media (min-width 600px)
 		padding 24px 32px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index e7a43f7985..3eca49a43f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -240,12 +240,6 @@ root(isDark)
 	font-size 12px
 	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
-	&:first-child
-		border-radius 8px 8px 0 0
-
-		> .renote
-			border-radius 8px 8px 0 0
-
 	&:last-of-type
 		border-bottom none
 
@@ -304,12 +298,6 @@ root(isDark)
 		& + article
 			padding-top 8px
 
-	> .reply-to
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
 	> article
 		padding 16px 16px 9px
 
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 58069b06ee..d2b530e2e2 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -200,6 +200,7 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
+	overflow hidden
 	background isDark ? #282C37 : #fff
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
-- 
cgit v1.2.3-freya


From a5b994259efa97adcf5cd5c13a3935ca06eaf880 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 10:27:53 +0900
Subject: Fix bug

---
 src/client/app/desktop/views/components/notes.vue | 2 +-
 src/client/app/mobile/views/components/notes.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index fa7a782b7b..c4824feeac 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -156,7 +156,7 @@ export default Vue.extend({
 					this.notes = this.notes.slice(0, displayLimit);
 				}
 			} else {
-				this.queue.unshift(note);
+				this.queue.push(note);
 			}
 		},
 
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index d2b530e2e2..a086af418e 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -144,7 +144,7 @@ export default Vue.extend({
 					this.notes = this.notes.slice(0, displayLimit);
 				}
 			} else {
-				this.queue.unshift(note);
+				this.queue.push(note);
 			}
 		},
 
-- 
cgit v1.2.3-freya


From 51876bac62db94a4e207a707a508a83b437612d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 10:59:37 +0900
Subject: :art:

---
 .../app/desktop/views/components/note-detail.vue   | 18 +++++++-------
 .../app/mobile/views/components/note-card.vue      | 14 +++++++----
 .../app/mobile/views/components/note-detail.vue    |  6 ++---
 src/client/app/mobile/views/pages/home.vue         | 28 ++++++++++------------
 src/client/app/mobile/views/pages/user.vue         | 19 ++++++++++-----
 src/client/app/mobile/views/pages/user/home.vue    | 19 +++++++++++----
 6 files changed, 61 insertions(+), 43 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 266644cf85..eb12ea109c 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -217,7 +217,7 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
-	margin 0
+	margin 0 auto
 	padding 0
 	overflow hidden
 	text-align left
@@ -241,13 +241,13 @@ root(isDark)
 		border-radius 6px 6px 0 0
 
 		&:hover
-			background #f6f6f6
+			background isDark ? #2e3440 : #f6f6f6
 
 		&:active
-			background #f0f0f0
+			background isDark ? #21242b : #f0f0f0
 
 		&:disabled
-			color #ccc
+			color isDark ? #21242b : #ccc
 
 	> .context
 		> *
@@ -294,8 +294,8 @@ root(isDark)
 			clear both
 
 		&:hover
-			> .main > footer > button
-				color #888
+			> footer > button
+				color isDark ? #707b97 : #888
 
 		> .avatar-anchor
 			display block
@@ -340,7 +340,7 @@ root(isDark)
 				top 0
 				right 32px
 				font-size 1em
-				color #c0c0c0
+				color isDark ? #606984 : #c0c0c0
 
 		> .body
 			padding 8px 0
@@ -415,11 +415,11 @@ root(isDark)
 				background transparent
 				border none
 				font-size 1em
-				color #ddd
+				color isDark ? #606984 : #ccc
 				cursor pointer
 
 				&:hover
-					color #666
+					color isDark ? #9198af : #666
 
 				> .count
 					display inline
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index 393fa9b831..89700b5e82 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -27,17 +27,17 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-note-card
+root(isDark)
 	display inline-block
 	width 150px
 	//height 120px
 	font-size 12px
-	background #fff
+	background isDark ? #282c37 : #fff
 	border-radius 4px
 
 	> a
 		display block
-		color #2c3940
+		color isDark ? #fff : #2c3940
 
 		&:hover
 			text-decoration none
@@ -75,11 +75,17 @@ export default Vue.extend({
 				left 0
 				width 100%
 				height 20px
-				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
+				background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
 
 		> .mk-time
 			display inline-block
 			padding 8px
 			color #aaa
 
+.mk-note-card[data-darkmode]
+	root(true)
+
+.mk-note-card:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 5d593c02d3..3c7d225ca7 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -405,7 +405,7 @@ root(isDark)
 
 		> .time
 			font-size 16px
-			color #c0c0c0
+			color isDark ? #606984 : #c0c0c0
 
 		> footer
 			font-size 1.2em
@@ -417,14 +417,14 @@ root(isDark)
 				border none
 				box-shadow none
 				font-size 1em
-				color #ddd
+				color isDark ? #606984 : #ddd
 				cursor pointer
 
 				&:not(:last-child)
 					margin-right 28px
 
 				&:hover
-					color #666
+					color isDark ? #9198af : #666
 
 				> .count
 					display inline
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 6999108b97..e43c5876e6 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -17,7 +17,7 @@
 		<button @click="fn">%fa:pencil-alt%</button>
 	</template>
 
-	<main>
+	<main :data-darkmode="_darkmode_">
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
 			<div class="body">
@@ -100,7 +100,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-main
+root(isDark)
 	> .nav
 		> .bg
 			position fixed
@@ -119,23 +119,12 @@ main
 			right 0
 			width 300px
 			margin 0 auto
-			background #fff
+			background isDark ? #272f3a : #fff
 			border-radius 8px
 			box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
 
 			$balloon-size = 16px
 
-			&:before
-				content ""
-				display block
-				position absolute
-				top -($balloon-size * 2)
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size $border-color
-
 			&:after
 				content ""
 				display block
@@ -145,7 +134,7 @@ main
 				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 isDark ? #272f3a : #fff
 
 			> div
 				padding 8px 0
@@ -153,13 +142,14 @@ main
 				> *
 					display block
 					padding 8px 16px
+					color isDark ? #cdd0d8 : #666
 
 					&[data-active]
 						color $theme-color-foreground
 						background $theme-color
 
 					&:not([data-active]):hover
-						background #eee
+						background isDark ? #353e4a : #eee
 
 	> .tl
 		max-width 680px
@@ -172,4 +162,10 @@ main
 		@media (min-width 600px)
 			padding 32px
 
+main[data-darkmode]
+	root(true)
+
+main:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index d2688a0f3d..e50086b5fd 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -108,6 +108,8 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
+	$bg = isDark ? #22252f : #f7f7f7
+
 	> .is-suspended
 	> .is-remote
 		&.is-suspended
@@ -132,6 +134,7 @@ root(isDark)
 				font-size 12px
 
 	> header
+		background $bg
 
 		> .banner
 			padding-bottom 33.3%
@@ -162,14 +165,14 @@ root(isDark)
 						left -2px
 						bottom -2px
 						width 100%
-						background isDark ? #191b22 : #ececed
-						border 3px solid isDark ? #191b22 : #ececed
+						background $bg
+						border 3px solid $bg
 						border-radius 6px
 
 						@media (min-width 500px)
 							left -4px
 							bottom -4px
-							border 4px solid isDark ? #191b22 : #ececed
+							border 4px solid $bg
 							border-radius 12px
 
 				> .mk-follow-button
@@ -235,7 +238,7 @@ root(isDark)
 		position sticky
 		top 47px
 		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
-		background-color isDark ? #191b22 : #ececed
+		background-color $bg
 		z-index 1
 
 		> .nav-container
@@ -248,12 +251,16 @@ root(isDark)
 				display block
 				flex 1 1
 				text-align center
-				line-height 52px
-				font-size 14px
+				line-height 48px
+				font-size 12px
 				text-decoration none
 				color isDark ? #657786 : #9ca1a5
 				border-bottom solid 2px transparent
 
+				@media (min-width 400px)
+					line-height 52px
+					font-size 14px
+
 				&[data-active]
 					font-weight bold
 					color $theme-color
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index d9bb8041e4..d02daf5027 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.root.home
+root(isDark)
 	max-width 600px
 	margin 0 auto
 
@@ -65,7 +65,7 @@ export default Vue.extend({
 			margin 0 0 16px 0
 
 	> section
-		background #eee
+		background isDark ? #21242f : #eee
 		border-radius 8px
 		box-shadow 0 4px 16px rgba(#000, 0.1)
 
@@ -80,10 +80,13 @@ export default Vue.extend({
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color #465258
-			background #fff
+			color isDark ? #b8c5cc : #465258
+			background isDark ? #282c37 : #fff
 			border-radius 8px 8px 0 0
 
+			@media (min-width 500px)
+				padding 10px 16px
+
 			> i
 				margin-right 6px
 
@@ -95,6 +98,12 @@ export default Vue.extend({
 		display block
 		margin 16px
 		text-align center
-		color #cad2da
+		color isDark ? #cad2da : #929aa0
+
+.root.home[data-darkmode]
+	root(true)
+
+.root.home:not([data-darkmode])
+	root(false)
 
 </style>
-- 
cgit v1.2.3-freya


From 47ce59d555eab91b0642b4e4b62c8ecc4ff2288a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Apr 2018 17:25:56 +0900
Subject: wip

---
 .../common/views/components/visibility-chooser.vue | 213 +++++++++++++++++++++
 .../app/desktop/views/components/post-form.vue     |  32 ++--
 src/models/note.ts                                 |  11 +-
 src/remote/activitypub/kernel/announce/note.ts     |   4 +-
 src/remote/activitypub/models/note.ts              |   4 +-
 5 files changed, 244 insertions(+), 20 deletions(-)
 create mode 100644 src/client/app/common/views/components/visibility-chooser.vue

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
new file mode 100644
index 0000000000..71e92a85f2
--- /dev/null
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -0,0 +1,213 @@
+<template>
+<div class="mk-visibility-chooser">
+	<div class="backdrop" ref="backdrop" @click="close"></div>
+	<div class="popover" :class="{ compact }" ref="popover">
+		<div @click="choose('public')" :class="{ active: v == 'public' }">
+			<div>%fa:globe%</div>
+			<div>
+				<span>公開</span>
+			</div>
+		</div>
+		<div @click="choose('home')" :class="{ active: v == 'home' }">
+			<div>%fa:home%</div>
+			<div>
+				<span>ホーム</span>
+				<span>ホームタイムラインにのみ公開</span>
+			</div>
+		</div>
+		<div @click="choose('followers')" :class="{ active: v == 'followers' }">
+			<div>%fa:unlock%</div>
+			<div>
+				<span>フォロワー</span>
+				<span>自分のフォロワーのみに公開</span>
+			</div>
+		</div>
+		<div @click="choose('mentioned')" :class="{ active: v == 'mentioned' }">
+			<div>%fa:envelope%</div>
+			<div>
+				<span>メンション</span>
+				<span>言及したユーザーのみに公開</span>
+			</div>
+		</div>
+		<div @click="choose('private')" :class="{ active: v == 'private' }">
+			<div>%fa:lock%</div>
+			<div>
+				<span>非公開</span>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['source', 'compact', 'v'],
+	mounted() {
+		this.$nextTick(() => {
+			const popover = this.$refs.popover as any;
+
+			const rect = this.source.getBoundingClientRect();
+			const width = popover.offsetWidth;
+			const height = popover.offsetHeight;
+
+			if (this.compact) {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+				popover.style.left = (x - (width / 2)) + 'px';
+				popover.style.top = (y - (height / 2)) + 'px';
+			} else {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
+				popover.style.left = (x - (width / 2)) + 'px';
+				popover.style.top = y + 'px';
+			}
+
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.popover,
+				opacity: 1,
+				scale: [0.5, 1],
+				duration: 500
+			});
+		});
+	},
+	methods: {
+		choose(visibility) {
+			this.$emit('chosen', visibility);
+			this.$destroy();
+		},
+		close() {
+			(this.$refs.backdrop as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			(this.$refs.popover as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+$border-color = rgba(27, 31, 35, 0.15)
+
+root(isDark)
+	position initial
+
+	> .backdrop
+		position fixed
+		top 0
+		left 0
+		z-index 10000
+		width 100%
+		height 100%
+		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		opacity 0
+
+	> .popover
+		$bgcolor = isDark ? #2c303c : #fff
+		position absolute
+		z-index 10001
+		width 240px
+		padding 8px 0
+		background $bgcolor
+		border 1px solid $border-color
+		border-radius 4px
+		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
+		transform scale(0.5)
+		opacity 0
+
+		$balloon-size = 10px
+
+		&:not(.compact)
+			margin-top $balloon-size
+			transform-origin center -($balloon-size)
+
+			&:before
+				content ""
+				display block
+				position absolute
+				top -($balloon-size * 2)
+				left s('calc(50% - %s)', $balloon-size)
+				border-top solid $balloon-size transparent
+				border-left solid $balloon-size transparent
+				border-right solid $balloon-size transparent
+				border-bottom solid $balloon-size $border-color
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top -($balloon-size * 2) + 1.5px
+				left s('calc(50% - %s)', $balloon-size)
+				border-top solid $balloon-size transparent
+				border-left solid $balloon-size transparent
+				border-right solid $balloon-size transparent
+				border-bottom solid $balloon-size $bgcolor
+
+		> div
+			display flex
+			padding 8px 14px
+			font-size 12px
+			color isDark ? #fff : #666
+			cursor pointer
+
+			&:hover
+				background isDark ? #252731 : #eee
+
+			&:active
+				background isDark ? #21242b : #ddd
+
+			&.active
+				cursor $theme-color-foreground
+				background $theme-color
+
+			> *
+				user-select none
+				pointer-events none
+
+			> *:first-child
+				display flex
+				justify-content center
+				align-items center
+				margin-right 10px
+
+			> *:last-child
+				flex 1 1 auto
+
+				> span:first-child
+					display block
+					font-weight bold
+
+				> span:last-child:not(:first-child)
+					opacity 0.6
+
+.mk-visibility-chooser[data-darkmode]
+	root(true)
+
+.mk-visibility-chooser:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 80d9d66753..d1d7076a30 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -30,7 +30,7 @@
 	<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="visibility" title="公開範囲" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? '%i18n:!@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 	</button>
@@ -43,10 +43,12 @@
 import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import getKao from '../../../common/scripts/get-kao';
+import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 
 export default Vue.extend({
 	components: {
-		XDraggable
+		XDraggable,
+		MkVisibilityChooser
 	},
 
 	props: ['reply', 'renote'],
@@ -61,6 +63,7 @@ export default Vue.extend({
 			useCw: false,
 			cw: null,
 			geo: null,
+			visibility: 'public',
 			autocomplete: null,
 			draghover: false
 		};
@@ -246,6 +249,16 @@ export default Vue.extend({
 			this.$emit('geo-dettached');
 		},
 
+		setVisibility() {
+			const w = (this as any).os.new(MkVisibilityChooser, {
+				source: this.$refs.visibilityButton,
+				v: this.visibility
+			});
+			w.$once('chosen', v => {
+				this.visibility = v;
+			});
+		},
+
 		post() {
 			this.posting = true;
 
@@ -256,6 +269,7 @@ export default Vue.extend({
 				renoteId: this.renote ? this.renote.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				cw: this.useCw ? this.cw || '' : undefined,
+				visibility: this.visibility,
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
 					altitude: this.geo.altitude,
@@ -450,19 +464,6 @@ root(isDark)
 	input[type='file']
 		display none
 
-	.text-count
-		pointer-events none
-		display block
-		position absolute
-		bottom 16px
-		right 138px
-		margin 0
-		line-height 40px
-		color rgba($theme-color, 0.5)
-
-		&.over
-			color #ec3828
-
 	.submit
 		display block
 		position absolute
@@ -532,6 +533,7 @@ root(isDark)
 	> .kao
 	> .poll
 	> .geo
+	> .visibility
 		display inline-block
 		cursor pointer
 		padding 0
diff --git a/src/models/note.ts b/src/models/note.ts
index 3c835ed190..2f95cbfd65 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -46,7 +46,16 @@ export type INote = {
 	repliesCount: number;
 	reactionCounts: any;
 	mentions: mongo.ObjectID[];
-	visibility: 'public' | 'unlisted' | 'private' | 'direct';
+
+	/**
+	 * public ... 公開
+	 * home ... ホームタイムライン(ユーザーページのタイムライン含む)のみに流す
+	 * followers ... フォロワーのみ
+	 * mentioned ... 言及したユーザーのみ
+	 * private ... 自分のみ
+	 */
+	visibility: 'public' | 'home' | 'followers' | 'mentioned' | 'private';
+
 	geo: {
 		coordinates: number[];
 		altitude: number;
diff --git a/src/remote/activitypub/kernel/announce/note.ts b/src/remote/activitypub/kernel/announce/note.ts
index a288dd499a..e2f3806d75 100644
--- a/src/remote/activitypub/kernel/announce/note.ts
+++ b/src/remote/activitypub/kernel/announce/note.ts
@@ -30,8 +30,8 @@ export default async function(resolver: Resolver, actor: IRemoteUser, activity:
 
 	//#region Visibility
 	let visibility = 'public';
-	if (!activity.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'unlisted';
-	if (activity.cc.length == 0) visibility = 'private';
+	if (!activity.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'home';
+	if (activity.cc.length == 0) visibility = 'followers';
 	// TODO
 	if (visibility != 'public') throw new Error('unspported visibility');
 	//#endergion
diff --git a/src/remote/activitypub/models/note.ts b/src/remote/activitypub/models/note.ts
index f830370a23..c0f67cb2f9 100644
--- a/src/remote/activitypub/models/note.ts
+++ b/src/remote/activitypub/models/note.ts
@@ -65,8 +65,8 @@ export async function createNote(value: any, resolver?: Resolver, silent = false
 
 	//#region Visibility
 	let visibility = 'public';
-	if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'unlisted';
-	if (note.cc.length == 0) visibility = 'private';
+	if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'home';
+	if (note.cc.length == 0) visibility = 'followers';
 	// TODO
 	if (visibility != 'public') return null;
 	//#endergion
-- 
cgit v1.2.3-freya


From 7797a0746a665673db60fae7ed82329153d21262 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 05:28:34 +0900
Subject: wip

---
 .../app/desktop/views/components/post-form.vue     | 30 ++++++++++++++++++++++
 src/services/note/create.ts                        |  6 ++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index d1d7076a30..a9ce1354da 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -6,6 +6,10 @@
 	@drop.stop="onDrop"
 >
 	<div class="content">
+		<div v-if="visibility == 'specified'" class="visibleUsers">
+			<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
+			<a @click="addVisibleUser">+ユーザーを追加</a>
+		</div>
 		<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
 		<textarea :class="{ with: (files.length != 0 || poll) }"
 			ref="text" v-model="text" :disabled="posting"
@@ -64,6 +68,7 @@ export default Vue.extend({
 			cw: null,
 			geo: null,
 			visibility: 'public',
+			visibleUsers: [],
 			autocomplete: null,
 			draghover: false
 		};
@@ -259,6 +264,22 @@ export default Vue.extend({
 			});
 		},
 
+		addVisibleUser() {
+			(this as any).apis.input({
+				title: 'ユーザー名を入力してください'
+			}).then(username => {
+				(this as any).api('users/show', {
+					username
+				}).then(user => {
+					this.visibleUsers.push(user);
+				});
+			});
+		},
+
+		removeVisibleUser(user) {
+			this.visibleUsers = this.visibleUsers.filter(u => u != user);
+		},
+
 		post() {
 			this.posting = true;
 
@@ -270,6 +291,7 @@ export default Vue.extend({
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				cw: this.useCw ? this.cw || '' : undefined,
 				visibility: this.visibility,
+				visibleUserIds: this.visibleUsers.map(u => u.id),
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
 					altitude: this.geo.altitude,
@@ -395,6 +417,14 @@ root(isDark)
 				border-bottom solid 1px rgba($theme-color, 0.1) !important
 				border-radius 4px 4px 0 0
 
+		> .visibleUsers
+			margin-bottom 8px
+			font-size 14px
+
+			> span
+				margin-right 16px
+				color isDark ? #fff : #666
+
 		> .medias
 			margin 0
 			padding 0
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index e8070595cd..2b9fb0b1d8 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -76,7 +76,11 @@ export default async (user: IUser, data: {
 		geo: data.geo || null,
 		appId: data.app ? data.app._id : null,
 		visibility: data.visibility,
-		visibleUserIds: data.visibleUsers ? data.visibleUsers.map(u => u._id) : [],
+		visibleUserIds: data.visibility == 'specified'
+			? data.visibleUsers
+				? data.visibleUsers.map(u => u._id)
+				: []
+			: [],
 
 		// 以下非正規化データ
 		_reply: data.reply ? { userId: data.reply.userId } : null,
-- 
cgit v1.2.3-freya


From e9940c92214f4b70b6f8dfdf1f4dd7ce1814e67d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 07:01:47 +0900
Subject: wip

---
 .../app/desktop/views/components/notes.note.vue    |  1 +
 .../app/desktop/views/components/post-form.vue     |  2 +-
 .../desktop/views/components/sub-note-content.vue  |  1 +
 src/client/app/mobile/views/components/note.vue    |  5 +-
 .../mobile/views/components/sub-note-content.vue   |  1 +
 src/models/note.ts                                 | 19 +++---
 src/services/note/create.ts                        | 75 +++++++++++++---------
 7 files changed, 62 insertions(+), 42 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 217587ec6d..e8fabe3c63 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -40,6 +40,7 @@
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
+						<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 						<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>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index a9ce1354da..d704cdc3ca 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -291,7 +291,7 @@ export default Vue.extend({
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				cw: this.useCw ? this.cw || '' : undefined,
 				visibility: this.visibility,
-				visibleUserIds: this.visibleUsers.map(u => u.id),
+				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
 					altitude: this.geo.altitude,
diff --git a/src/client/app/desktop/views/components/sub-note-content.vue b/src/client/app/desktop/views/components/sub-note-content.vue
index 51ee93cba6..dd4012039b 100644
--- a/src/client/app/desktop/views/components/sub-note-content.vue
+++ b/src/client/app/desktop/views/components/sub-note-content.vue
@@ -1,6 +1,7 @@
 <template>
 <div class="mk-sub-note-content">
 	<div class="body">
+		<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 		<a class="reply" v-if="note.replyId">%fa:reply%</a>
 		<mk-note-html :text="note.text" :i="os.i"/>
 		<a class="rp" v-if="note.renoteId" :href="`/note:${note.renoteId}`">RP: ...</a>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 3eca49a43f..5202e0eb54 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -37,9 +37,8 @@
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
-						<a class="reply" v-if="p.reply">
-							%fa:reply%
-						</a>
+						<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
+						<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>
diff --git a/src/client/app/mobile/views/components/sub-note-content.vue b/src/client/app/mobile/views/components/sub-note-content.vue
index 54cc74f7f5..cc50977a58 100644
--- a/src/client/app/mobile/views/components/sub-note-content.vue
+++ b/src/client/app/mobile/views/components/sub-note-content.vue
@@ -1,6 +1,7 @@
 <template>
 <div class="mk-sub-note-content">
 	<div class="body">
+		<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 		<a class="reply" v-if="note.replyId">%fa:reply%</a>
 		<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
 		<a class="rp" v-if="note.renoteId">RP: ...</a>
diff --git a/src/models/note.ts b/src/models/note.ts
index 918ef6d69e..3256a8c153 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -163,9 +163,9 @@ export const pack = async (
 		detail: boolean
 	}
 ) => {
-	const opts = options || {
-		detail: true,
-	};
+	const opts = Object.assign({
+		detail: true
+	}, options);
 
 	// Me
 	const meId: mongo.ObjectID = me
@@ -208,7 +208,7 @@ export const pack = async (
 			hide = false;
 		} else {
 			// 指定されているかどうか
-			const specified = _note.visibleUserIds.test(id => id.equals(meId));
+			const specified = _note.visibleUserIds.some(id => id.equals(meId));
 
 			if (specified) {
 				hide = false;
@@ -245,6 +245,9 @@ export const pack = async (
 	_note.id = _note._id;
 	delete _note._id;
 
+	delete _note._user;
+	delete _note._reply;
+	delete _note.repost;
 	delete _note.mentions;
 	if (_note.geo) delete _note.geo.type;
 
@@ -262,11 +265,9 @@ export const pack = async (
 	}
 
 	// Populate media
-	if (_note.mediaIds && !hide) {
-		_note.media = Promise.all(_note.mediaIds.map(fileId =>
-			packFile(fileId)
-		));
-	}
+	_note.media = hide ? [] : Promise.all(_note.mediaIds.map(fileId =>
+		packFile(fileId)
+	));
 
 	// When requested a detailed note data
 	if (opts.detail) {
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 2b9fb0b1d8..8d66267132 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -123,42 +123,59 @@ export default async (user: IUser, data: {
 	if (note.channelId == null) {
 		if (!silent) {
 			if (isLocalUser(user)) {
-				// Publish event to myself's stream
-				stream(note.userId, 'note', noteObj);
-
-				// Publish note to local timeline stream
-				publishLocalTimelineStream(noteObj);
+				if (note.visibility == 'private') {
+					// Publish event to myself's stream
+					stream(note.userId, 'note', await pack(note, user, {
+						detail: true
+					}));
+				} else {
+					// Publish event to myself's stream
+					stream(note.userId, 'note', noteObj);
+
+					// Publish note to local timeline stream
+					publishLocalTimelineStream(noteObj);
+				}
 			}
 
 			// Publish note to global timeline stream
 			publishGlobalTimelineStream(noteObj);
 
-			// フォロワーに配信
-			Following.find({
-				followeeId: note.userId
-			}).then(followers => {
-				followers.map(async following => {
-					const follower = following._follower;
-
-					if (isLocalUser(follower)) {
-						// ストーキングしていない場合
-						if (!following.stalk) {
-							// この投稿が返信ならスキップ
-							if (note.replyId && !note._reply.userId.equals(following.followerId) && !note._reply.userId.equals(note.userId)) return;
-						}
+			if (note.visibility == 'specified') {
+				data.visibleUsers.forEach(async u => {
+					stream(u._id, 'note', await pack(note, u, {
+						detail: true
+					}));
+				});
+			}
 
-						// Publish event to followers stream
-						stream(following.followerId, 'note', noteObj);
-					} else {
-						//#region AP配送
-						// フォロワーがリモートユーザーかつ投稿者がローカルユーザーなら投稿を配信
-						if (isLocalUser(user)) {
-							deliver(user, await render(), follower.inbox);
+			if (note.visibility == 'public' || note.visibility == 'home' || note.visibility == 'followers') {
+				// フォロワーに配信
+				Following.find({
+					followeeId: note.userId
+				}).then(followers => {
+					followers.map(async following => {
+						const follower = following._follower;
+
+						if (isLocalUser(follower)) {
+							// ストーキングしていない場合
+							if (!following.stalk) {
+								// この投稿が返信ならスキップ
+								if (note.replyId && !note._reply.userId.equals(following.followerId) && !note._reply.userId.equals(note.userId)) return;
+							}
+
+							// Publish event to followers stream
+							stream(following.followerId, 'note', noteObj);
+						} else {
+							//#region AP配送
+							// フォロワーがリモートユーザーかつ投稿者がローカルユーザーなら投稿を配信
+							if (isLocalUser(user)) {
+								deliver(user, await render(), follower.inbox);
+							}
+							//#endergion
 						}
-						//#endergion
-					}
+					});
 				});
-			});
+			}
 
 			// リストに配信
 			UserList.find({
@@ -170,7 +187,7 @@ export default async (user: IUser, data: {
 			});
 		}
 
-		//#region AP配送
+		//#region リプライとAnnounceのAP配送
 		const render = async () => {
 			const content = data.renote && data.text == null
 				? renderAnnounce(data.renote.uri ? data.renote.uri : await renderNote(data.renote))
-- 
cgit v1.2.3-freya


From f2874d778a089c9825360857a4f2363f4aff2e45 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 08:51:17 +0900
Subject: wip

---
 src/client/app/auth/views/form.vue                 |   4 +-
 src/client/app/auth/views/index.vue                |   2 +-
 .../app/common/views/components/autocomplete.vue   |  12 +--
 .../views/components/messaging-room.message.vue    |   8 +-
 .../app/common/views/components/messaging-room.vue |  16 +--
 .../app/common/views/components/messaging.vue      |  18 ++--
 .../app/common/views/components/note-menu.vue      |   2 +-
 src/client/app/common/views/components/poll.vue    |   4 +-
 src/client/app/common/views/components/signin.vue  |   4 +-
 src/client/app/common/views/components/signup.vue  |   4 +-
 .../common/views/components/stream-indicator.vue   |   2 +-
 .../common/views/components/visibility-chooser.vue |  18 +++-
 .../common/views/components/welcome-timeline.vue   |   2 +-
 src/client/app/common/views/widgets/access-log.vue |   2 +-
 src/client/app/common/views/widgets/calendar.vue   |   4 +-
 src/client/app/common/views/widgets/donation.vue   |   2 +-
 src/client/app/common/views/widgets/rss.vue        |   2 +-
 src/client/app/common/views/widgets/server.pie.vue |   4 +-
 src/client/app/common/views/widgets/slideshow.vue  |   4 +-
 .../desktop/views/components/activity.calendar.vue |   2 +-
 .../app/desktop/views/components/calendar.vue      |  12 +--
 .../desktop/views/components/context-menu.menu.vue |   2 +-
 .../app/desktop/views/components/context-menu.vue  |   2 +-
 src/client/app/desktop/views/components/dialog.vue |   2 +-
 .../app/desktop/views/components/drive.file.vue    |   4 +-
 src/client/app/desktop/views/components/drive.vue  |   4 +-
 .../app/desktop/views/components/ellipsis-icon.vue |   2 +-
 src/client/app/desktop/views/components/home.vue   |   2 +-
 .../views/components/media-image-dialog.vue        |   2 +-
 .../views/components/media-video-dialog.vue        |   2 +-
 .../app/desktop/views/components/mentions.vue      |   2 +-
 .../desktop/views/components/note-detail.sub.vue   |   1 +
 .../app/desktop/views/components/note-detail.vue   |   3 +-
 .../app/desktop/views/components/notes.note.vue    |   2 +-
 .../app/desktop/views/components/notifications.vue |  16 +--
 .../app/desktop/views/components/post-form.vue     |   3 +-
 .../app/desktop/views/components/timeline.vue      |   2 +-
 .../desktop/views/components/ui.header.account.vue |   4 +-
 .../views/components/ui.header.notifications.vue   |   4 +-
 .../desktop/views/components/ui.header.search.vue  |   4 +-
 .../app/desktop/views/components/ui.header.vue     |   2 +-
 .../app/desktop/views/components/user-preview.vue  |   2 +-
 .../app/desktop/views/components/users-list.vue    |   2 +-
 .../desktop/views/components/widget-container.vue  |   4 +-
 src/client/app/desktop/views/components/window.vue |  26 ++---
 src/client/app/desktop/views/pages/search.vue      |   2 +-
 .../views/pages/user/user.followers-you-know.vue   |   4 +-
 .../app/desktop/views/pages/user/user.friends.vue  |   4 +-
 .../app/desktop/views/pages/user/user.header.vue   |   6 +-
 .../app/desktop/views/pages/user/user.home.vue     |   4 +-
 .../app/desktop/views/pages/user/user.photos.vue   |   4 +-
 .../app/desktop/views/pages/user/user.profile.vue  |   2 +-
 src/client/app/desktop/views/pages/welcome.vue     |   4 +-
 src/client/app/desktop/views/widgets/channel.vue   |   4 +-
 src/client/app/desktop/views/widgets/post-form.vue |   4 +-
 src/client/app/desktop/views/widgets/profile.vue   |   8 +-
 .../mobile/views/components/drive-file-chooser.vue |   2 +-
 .../views/components/drive-folder-chooser.vue      |   2 +-
 .../mobile/views/components/drive.file-detail.vue  |   4 +-
 src/client/app/mobile/views/components/drive.vue   |   6 +-
 .../app/mobile/views/components/friends-maker.vue  |   2 +-
 .../app/mobile/views/components/note-detail.vue    |   1 +
 .../app/mobile/views/components/notifications.vue  |   7 +-
 .../app/mobile/views/components/post-form.vue      | 114 +++++++++++++++------
 .../app/mobile/views/components/users-list.vue     |   8 +-
 .../mobile/views/components/widget-container.vue   |   2 +-
 src/client/app/mobile/views/pages/home.vue         |   2 +-
 .../app/mobile/views/pages/profile-setting.vue     |   4 +-
 src/client/app/mobile/views/pages/search.vue       |   2 +-
 src/client/app/mobile/views/pages/selectdrive.vue  |   2 +-
 src/client/app/mobile/views/pages/settings.vue     |   4 +-
 src/client/app/mobile/views/pages/signup.vue       |   2 +-
 src/client/app/mobile/views/pages/welcome.vue      |   8 +-
 src/client/app/mobile/views/widgets/profile.vue    |   6 +-
 src/renderers/get-note-summary.ts                  |   4 +
 75 files changed, 265 insertions(+), 190 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/auth/views/form.vue b/src/client/app/auth/views/form.vue
index b323907eb0..152b900429 100644
--- a/src/client/app/auth/views/form.vue
+++ b/src/client/app/auth/views/form.vue
@@ -94,13 +94,13 @@ export default Vue.extend({
 			margin 0 auto -38px auto
 			border solid 5px #fff
 			border-radius 100%
-			box-shadow 0 2px 2px rgba(0, 0, 0, 0.1)
+			box-shadow 0 2px 2px rgba(#000, 0.1)
 
 	> .app
 		padding 44px 16px 0 16px
 		color #555
 		background #eee
-		box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) inset
+		box-shadow 0 2px 2px rgba(#000, 0.1) inset
 
 		&:after
 			content ''
diff --git a/src/client/app/auth/views/index.vue b/src/client/app/auth/views/index.vue
index e1e1b265e1..0fcd9bfe53 100644
--- a/src/client/app/auth/views/index.vue
+++ b/src/client/app/auth/views/index.vue
@@ -94,7 +94,7 @@ export default Vue.extend({
 		margin 0 auto
 		text-align center
 		background #fff
-		box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2)
+		box-shadow 0px 4px 16px rgba(#000, 0.2)
 
 		> .fetching
 			margin 0
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 5c8f61a2a2..84173d20b5 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -234,7 +234,7 @@ export default Vue.extend({
 	margin-top calc(1em + 8px)
 	overflow hidden
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.1)
+	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
 
@@ -253,7 +253,7 @@ export default Vue.extend({
 			white-space nowrap
 			overflow hidden
 			font-size 0.9em
-			color rgba(0, 0, 0, 0.8)
+			color rgba(#000, 0.8)
 			cursor default
 
 			&, *
@@ -285,10 +285,10 @@ export default Vue.extend({
 
 		.name
 			margin 0 8px 0 0
-			color rgba(0, 0, 0, 0.8)
+			color rgba(#000, 0.8)
 
 		.username
-			color rgba(0, 0, 0, 0.3)
+			color rgba(#000, 0.3)
 
 	> .emojis > li
 
@@ -298,10 +298,10 @@ export default Vue.extend({
 			width 24px
 
 		.name
-			color rgba(0, 0, 0, 0.8)
+			color rgba(#000, 0.8)
 
 		.alias
 			margin 0 0 0 8px
-			color rgba(0, 0, 0, 0.3)
+			color rgba(#000, 0.3)
 
 </style>
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index afd700e777..70df899f5a 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -134,7 +134,7 @@ export default Vue.extend({
 				bottom -4px
 				left -12px
 				margin 0
-				color rgba(0, 0, 0, 0.5)
+				color rgba(#000, 0.5)
 				font-size 11px
 
 			> .content
@@ -146,7 +146,7 @@ export default Vue.extend({
 					overflow hidden
 					overflow-wrap break-word
 					font-size 1em
-					color rgba(0, 0, 0, 0.5)
+					color rgba(#000, 0.5)
 
 				> .text
 					display block
@@ -155,7 +155,7 @@ export default Vue.extend({
 					overflow hidden
 					overflow-wrap break-word
 					font-size 1em
-					color rgba(0, 0, 0, 0.8)
+					color rgba(#000, 0.8)
 
 					& + .file
 						> a
@@ -195,7 +195,7 @@ export default Vue.extend({
 			display block
 			margin 2px 0 0 0
 			font-size 10px
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			> [data-fa]
 				margin-left 4px
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 38202d7581..a45114e6bb 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -256,7 +256,7 @@ export default Vue.extend({
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			[data-fa]
 				margin-right 4px
@@ -267,7 +267,7 @@ export default Vue.extend({
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			[data-fa]
 				margin-right 4px
@@ -278,7 +278,7 @@ export default Vue.extend({
 			padding 16px
 			text-align center
 			font-size 0.8em
-			color rgba(0, 0, 0, 0.4)
+			color rgba(#000, 0.4)
 
 			[data-fa]
 				margin-right 4px
@@ -289,14 +289,14 @@ export default Vue.extend({
 			padding 0 12px
 			line-height 24px
 			color #fff
-			background rgba(0, 0, 0, 0.3)
+			background rgba(#000, 0.3)
 			border-radius 12px
 
 			&:hover
-				background rgba(0, 0, 0, 0.4)
+				background rgba(#000, 0.4)
 
 			&:active
-				background rgba(0, 0, 0, 0.5)
+				background rgba(#000, 0.5)
 
 			&.fetching
 				cursor wait
@@ -322,7 +322,7 @@ export default Vue.extend({
 				left 0
 				right 0
 				margin 0 auto
-				background rgba(0, 0, 0, 0.1)
+				background rgba(#000, 0.1)
 
 			> span
 				display inline-block
@@ -330,7 +330,7 @@ export default Vue.extend({
 				padding 0 16px
 				//font-weight bold
 				line-height 32px
-				color rgba(0, 0, 0, 0.3)
+				color rgba(#000, 0.3)
 				background #fff
 
 	> footer
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 6f799b34b6..6f8fcb3a70 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -205,7 +205,7 @@ root(isDark)
 		z-index 1
 		width 100%
 		background #fff
-		box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0px 2px rgba(#000, 0.2)
 
 		> .form
 			padding 8px
@@ -279,7 +279,7 @@ root(isDark)
 					vertical-align top
 					white-space nowrap
 					overflow hidden
-					color rgba(0, 0, 0, 0.8)
+					color rgba(#000, 0.8)
 					text-decoration none
 					transition none
 					cursor pointer
@@ -318,11 +318,11 @@ root(isDark)
 						margin 0 8px 0 0
 						/*font-weight bold*/
 						font-weight normal
-						color rgba(0, 0, 0, 0.8)
+						color rgba(#000, 0.8)
 
 					.username
 						font-weight normal
-						color rgba(0, 0, 0, 0.3)
+						color rgba(#000, 0.3)
 
 	> .history
 
@@ -383,17 +383,17 @@ root(isDark)
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color isDark ? #fff : rgba(0, 0, 0, 0.9)
+						color isDark ? #fff : rgba(#000, 0.9)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(#000, 0.5)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color isDark ? #606984 : rgba(0, 0, 0, 0.5)
+						color isDark ? #606984 : rgba(#000, 0.5)
 						font-size 80%
 
 				> .avatar
@@ -413,10 +413,10 @@ root(isDark)
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color isDark ? #fff : rgba(0, 0, 0, 0.8)
+						color isDark ? #fff : rgba(#000, 0.8)
 
 						.me
-							color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
+							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
 
 					> .image
 						display block
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index 3e4be425d9..88dc22aaf4 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -105,7 +105,7 @@ $border-color = rgba(27, 31, 35, 0.15)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.1)
+		background rgba(#000, 0.1)
 		opacity 0
 
 	> .popover
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index de4373f561..46e41cbcdb 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -88,10 +88,10 @@ root(isDark)
 			cursor pointer
 
 			&:hover
-				background rgba(0, 0, 0, 0.05)
+				background rgba(#000, 0.05)
 
 			&:active
-				background rgba(0, 0, 0, 0.1)
+				background rgba(#000, 0.1)
 
 			> .backdrop
 				position absolute
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 25f90a2f13..7fb9fc3fd4 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 			width 100%
 			line-height 44px
 			font-size 1em
-			color rgba(0, 0, 0, 0.7)
+			color rgba(#000, 0.7)
 			background #fff
 			outline none
 			border solid 1px #eee
@@ -117,7 +117,7 @@ export default Vue.extend({
 		margin -6px 0 0 0
 		width 100%
 		font-size 1.2em
-		color rgba(0, 0, 0, 0.5)
+		color rgba(#000, 0.5)
 		outline none
 		border none
 		border-radius 0
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index 33a559ff8f..516979acd0 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -234,13 +234,13 @@ export default Vue.extend({
 		color #333 !important
 		background #fff !important
 		outline none
-		border solid 1px rgba(0, 0, 0, 0.1)
+		border solid 1px rgba(#000, 0.1)
 		border-radius 4px
 		box-shadow 0 0 0 114514px #fff inset
 		transition all .3s ease
 
 		&:hover
-			border-color rgba(0, 0, 0, 0.2)
+			border-color rgba(#000, 0.2)
 			transition all .1s ease
 
 		&:focus
diff --git a/src/client/app/common/views/components/stream-indicator.vue b/src/client/app/common/views/components/stream-indicator.vue
index 93758102de..d573db32e6 100644
--- a/src/client/app/common/views/components/stream-indicator.vue
+++ b/src/client/app/common/views/components/stream-indicator.vue
@@ -73,7 +73,7 @@ export default Vue.extend({
 	padding 6px 12px
 	font-size 0.9em
 	color #fff
-	background rgba(0, 0, 0, 0.8)
+	background rgba(#000, 0.8)
 	border-radius 4px
 
 	> p
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index dd36d32e74..50f0877ae9 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -53,18 +53,28 @@ export default Vue.extend({
 			const width = popover.offsetWidth;
 			const height = popover.offsetHeight;
 
+			let left;
+			let top;
+
 			if (this.compact) {
 				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
 				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
-				popover.style.left = (x - (width / 2)) + 'px';
-				popover.style.top = (y - (height / 2)) + 'px';
+				left = (x - (width / 2));
+				top = (y - (height / 2));
 			} else {
 				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
 				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
-				popover.style.left = (x - (width / 2)) + 'px';
-				popover.style.top = y + 'px';
+				left = (x - (width / 2));
+				top = y;
+			}
+
+			if (left + width > window.innerWidth) {
+				left = window.innerWidth - width;
 			}
 
+			popover.style.left = left + 'px';
+			popover.style.top = top + 'px';
+
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 1,
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index a80bc04f7f..3497976901 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
 		overflow-wrap break-word
 		font-size .9em
 		color #4C4C4C
-		border-bottom 1px solid rgba(0, 0, 0, 0.05)
+		border-bottom 1px solid rgba(#000, 0.05)
 
 		&:after
 			content ""
diff --git a/src/client/app/common/views/widgets/access-log.vue b/src/client/app/common/views/widgets/access-log.vue
index 637ba328c6..0b1c7fe2dd 100644
--- a/src/client/app/common/views/widgets/access-log.vue
+++ b/src/client/app/common/views/widgets/access-log.vue
@@ -78,7 +78,7 @@ export default define({
 		color #555
 
 		&:nth-child(odd)
-			background rgba(0, 0, 0, 0.025)
+			background rgba(#000, 0.025)
 
 		> b
 			margin-right 4px
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index b3b5b3583a..0bb503759c 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -113,7 +113,7 @@ root(isDark)
 	padding 16px 0
 	color isDark ? #c5ced6 :#777
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-special='on-new-years-day']
@@ -126,7 +126,7 @@ root(isDark)
 	&[data-mobile]
 		border none
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 	&:after
 		content ""
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index 1063c2c279..e35462611d 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -46,7 +46,7 @@ root(isDark)
 		border none
 		background #ead8bb
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 		> article
 			> h1
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index 1a63362521..f0ba11678e 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -92,7 +92,7 @@ root(isDark)
 					padding 8px 16px
 
 					&:nth-child(even)
-						background rgba(0, 0, 0, 0.05)
+						background rgba(#000, 0.05)
 
 .mkw-rss[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue
index 16859fe07f..532041ae74 100644
--- a/src/client/app/common/views/widgets/server.pie.vue
+++ b/src/client/app/common/views/widgets/server.pie.vue
@@ -5,7 +5,7 @@
 		cx="50%" cy="50%"
 		fill="none"
 		stroke-width="0.1"
-		stroke="rgba(0, 0, 0, 0.05)"/>
+		stroke="rgba(#000, 0.05)"/>
 	<circle
 		:r="r"
 		cx="50%" cy="50%"
@@ -56,7 +56,7 @@ root(isDark)
 
 	> text
 		font-size 0.15px
-		fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6)
+		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
 
 svg[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/widgets/slideshow.vue b/src/client/app/common/views/widgets/slideshow.vue
index ad32299f37..95be4b94fd 100644
--- a/src/client/app/common/views/widgets/slideshow.vue
+++ b/src/client/app/common/views/widgets/slideshow.vue
@@ -122,13 +122,13 @@ export default define({
 .mkw-slideshow
 	overflow hidden
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-mobile]
 		border none
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 	> div
 		width 100%
diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue
index 8b43536c2b..e488571070 100644
--- a/src/client/app/desktop/views/components/activity.calendar.vue
+++ b/src/client/app/desktop/views/components/activity.calendar.vue
@@ -61,6 +61,6 @@ svg
 
 		&.day
 			&:hover
-				fill rgba(0, 0, 0, 0.05)
+				fill rgba(#000, 0.05)
 
 </style>
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 483a4c718b..1d8cc4f3a9 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -136,7 +136,7 @@ export default Vue.extend({
 root(isDark)
 	color isDark ? #c5ced6 : #777
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-melt]
@@ -152,7 +152,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> [data-fa]
 			margin-right 4px
@@ -214,10 +214,10 @@ root(isDark)
 					border-radius 6px
 
 				&:hover > div
-					background rgba(0, 0, 0, 0.025)
+					background rgba(#000, 0.025)
 
 				&:active > div
-					background rgba(0, 0, 0, 0.05)
+					background rgba(#000, 0.05)
 
 				&[data-is-donichi]
 					color #ef95a0
@@ -233,10 +233,10 @@ root(isDark)
 					font-weight bold
 
 					> div
-						background rgba(0, 0, 0, 0.025)
+						background rgba(#000, 0.025)
 
 					&:active > div
-						background rgba(0, 0, 0, 0.05)
+						background rgba(#000, 0.05)
 
 				&[data-today]
 					> div
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
index 3d884e0b8a..843604a059 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -106,7 +106,7 @@ root(isDark)
 		width $width
 		background isDark ? #282c37 :#fff
 		border-radius 0 4px 4px 4px
-		box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+		box-shadow 2px 2px 8px rgba(#000, 0.2)
 		transition visibility 0s linear 0.2s
 
 .menu[data-darkmode]
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index d7548c4415..60a33f9c93 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -68,7 +68,7 @@ root(isDark)
 	font-size 0.8em
 	background isDark ? #282c37 : #fff
 	border-radius 0 4px 4px 4px
-	box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
 
 .context-menu[data-darkmode]
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
index fa17e4a9d2..aff21c1754 100644
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -102,7 +102,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 		opacity 0
 		pointer-events none
 
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index a683af68a7..39881711fa 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -195,7 +195,7 @@ root(isDark)
 		cursor pointer
 
 	&:hover
-		background rgba(0, 0, 0, 0.05)
+		background rgba(#000, 0.05)
 
 		> .label
 			&:before
@@ -203,7 +203,7 @@ root(isDark)
 				background #0b65a5
 
 	&:active
-		background rgba(0, 0, 0, 0.1)
+		background rgba(#000, 0.1)
 
 		> .label
 			&:before
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index aebface112..973df1014d 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -587,7 +587,7 @@ root(isDark)
 		font-size 0.9em
 		color isDark ? #d2d9dc : #555
 		background isDark ? #282c37 : #fff
-		box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
+		box-shadow 0 1px 0 rgba(#000, 0.05)
 
 		&, *
 			user-select none
@@ -733,7 +733,7 @@ root(isDark)
 				display inline-block
 				position absolute
 				top 0
-				background-color rgba(0, 0, 0, 0.3)
+				background-color rgba(#000, 0.3)
 				border-radius 100%
 
 				animation sk-bounce 2.0s infinite ease-in-out
diff --git a/src/client/app/desktop/views/components/ellipsis-icon.vue b/src/client/app/desktop/views/components/ellipsis-icon.vue
index c54a7db29d..4a5a0f23dc 100644
--- a/src/client/app/desktop/views/components/ellipsis-icon.vue
+++ b/src/client/app/desktop/views/components/ellipsis-icon.vue
@@ -14,7 +14,7 @@
 		display inline-block
 		width 18px
 		height 18px
-		background-color rgba(0, 0, 0, 0.3)
+		background-color rgba(#000, 0.3)
 		border-radius 100%
 		animation bounce 1.4s infinite ease-in-out both
 
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 5c5b462176..4343a7fb78 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -251,7 +251,7 @@ root(isDark)
 		height 48px
 		color isDark ? #fff : #000
 		background isDark ? #313543 : #f7f7f7
-		box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+		box-shadow 0 1px 1px rgba(#000, 0.075)
 
 		> a
 			display block
diff --git a/src/client/app/desktop/views/components/media-image-dialog.vue b/src/client/app/desktop/views/components/media-image-dialog.vue
index dec140d1c9..026522d907 100644
--- a/src/client/app/desktop/views/components/media-image-dialog.vue
+++ b/src/client/app/desktop/views/components/media-image-dialog.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 
 	> img
 		position fixed
diff --git a/src/client/app/desktop/views/components/media-video-dialog.vue b/src/client/app/desktop/views/components/media-video-dialog.vue
index cbf862cd1c..959cefa42c 100644
--- a/src/client/app/desktop/views/components/media-video-dialog.vue
+++ b/src/client/app/desktop/views/components/media-video-dialog.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 
 	> video
 		position fixed
diff --git a/src/client/app/desktop/views/components/mentions.vue b/src/client/app/desktop/views/components/mentions.vue
index 53d08a0eca..66bdab5c08 100644
--- a/src/client/app/desktop/views/components/mentions.vue
+++ b/src/client/app/desktop/views/components/mentions.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
 
 .mk-mentions
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> header
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index fb33421309..5175c8bd45 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -17,6 +17,7 @@
 		</header>
 		<div class="body">
 			<div class="text">
+				<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 				<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
 			</div>
 			<div class="media" v-if="note.mediaIds.length > 0">
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index eb12ea109c..525023349e 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -39,6 +39,7 @@
 		</header>
 		<div class="body">
 			<div class="text">
+				<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
 			</div>
 			<div class="media" v-if="p.media.length > 0">
@@ -222,7 +223,7 @@ root(isDark)
 	overflow hidden
 	text-align left
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.1)
+	border solid 1px rgba(#000, 0.1)
 	border-radius 8px
 
 	> .read-more
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index e8fabe3c63..4d7e6ee8b8 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -607,7 +607,7 @@ root(isDark)
 
 	> .detail
 		padding-top 4px
-		background rgba(0, 0, 0, 0.0125)
+		background rgba(#000, 0.0125)
 
 .note[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 47463b8b5b..36e9dce6af 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -204,7 +204,7 @@ root(isDark)
 				padding 16px
 				overflow-wrap break-word
 				font-size 0.9em
-				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
 
 				&:last-child
 					border-bottom none
@@ -215,7 +215,7 @@ root(isDark)
 					top 16px
 					right 12px
 					vertical-align top
-					color isDark ? #606984 : rgba(0, 0, 0, 0.6)
+					color isDark ? #606984 : rgba(#000, 0.6)
 					font-size small
 
 				&:after
@@ -250,10 +250,10 @@ root(isDark)
 							margin-right 4px
 
 				.note-preview
-					color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+					color isDark ? #c2cad4 : rgba(#000, 0.7)
 
 				.note-ref
-					color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
+					color isDark ? #c2cad4 : rgba(#000, 0.7)
 
 					[data-fa]
 						font-size 1em
@@ -282,7 +282,7 @@ root(isDark)
 				font-size 0.8em
 				color isDark ? #666b79 : #aaa
 				background isDark ? #242731 : #fdfdfd
-				border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
+				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
 
 				span
 					margin 0 16px
@@ -295,13 +295,13 @@ root(isDark)
 		width 100%
 		padding 16px
 		color #555
-		border-top solid 1px rgba(0, 0, 0, 0.05)
+		border-top solid 1px rgba(#000, 0.05)
 
 		&:hover
-			background rgba(0, 0, 0, 0.025)
+			background rgba(#000, 0.025)
 
 		&:active
-			background rgba(0, 0, 0, 0.05)
+			background rgba(#000, 0.05)
 
 		&.fetching
 			cursor wait
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index d704cdc3ca..92a7f9ada7 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -364,7 +364,6 @@ root(isDark)
 		clear both
 
 	> .content
-
 		> input
 		> textarea
 			display block
@@ -585,7 +584,7 @@ root(isDark)
 			color rgba($theme-color, 0.6)
 			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
+			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
 		&:focus
 			&:after
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 2047b5dced..bcfce299f4 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> header
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 5148c5b967..145666b4bc 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -165,7 +165,7 @@ root(isDark)
 		font-size 0.8em
 		background $bgcolor
 		border-radius 4px
-		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+		box-shadow 0 1px 4px rgba(#000, 0.25)
 
 		&:before
 			content ""
@@ -176,7 +176,7 @@ root(isDark)
 			right 12px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-bottom solid 14px rgba(#000, 0.1)
 			border-left solid 14px transparent
 
 		&:after
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index 5326f92836..ea814dd7a3 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -125,7 +125,7 @@ root(isDark)
 		width 300px
 		background $bgcolor
 		border-radius 4px
-		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+		box-shadow 0 1px 4px rgba(#000, 0.25)
 
 		&:before
 			content ""
@@ -136,7 +136,7 @@ root(isDark)
 			right 74px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-bottom solid 14px rgba(#000, 0.1)
 			border-left solid 14px transparent
 
 		&:after
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index 3167aab8ab..1ed28ba3a8 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -50,7 +50,7 @@ export default Vue.extend({
 		width 14em
 		height 32px
 		font-size 1em
-		background rgba(0, 0, 0, 0.05)
+		background rgba(#000, 0.05)
 		outline none
 		//border solid 1px #ddd
 		border none
@@ -62,7 +62,7 @@ export default Vue.extend({
 			color #9eaba8
 
 		&:hover
-			background rgba(0, 0, 0, 0.08)
+			background rgba(#000, 0.08)
 
 		&:focus
 			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 7ce85d4c3d..353fd58561 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -103,7 +103,7 @@ root(isDark)
 	top 0
 	z-index 1000
 	width 100%
-	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+	box-shadow 0 1px 1px rgba(#000, 0.075)
 
 	> .main
 		height 48px
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 2e1870800f..d0111d7dc5 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -94,7 +94,7 @@ root(isDark)
 	width 250px
 	background isDark ? #282c37 : #fff
 	background-clip content-box
-	border solid 1px rgba(0, 0, 0, 0.1)
+	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	overflow hidden
 	opacity 0
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index e8f4c94d42..13d0d07bbc 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -119,7 +119,7 @@ export default Vue.extend({
 		overflow auto
 
 		> *
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			border-bottom solid 1px rgba(#000, 0.05)
 
 			> *
 				max-width 600px
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 926d7702b9..2edba5a230 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 	overflow hidden
 
@@ -55,7 +55,7 @@ root(isDark)
 			font-size 0.9em
 			font-weight bold
 			color isDark ? #e3e5e8 : #888
-			box-shadow 0 1px rgba(0, 0, 0, 0.07)
+			box-shadow 0 1px rgba(#000, 0.07)
 
 			> [data-fa]
 				margin-right 6px
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 3de1413ac4..c9820f8697 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -17,14 +17,16 @@
 				<slot></slot>
 			</div>
 		</div>
-		<div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div>
-		<div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div>
-		<div class="handle bottom" v-if="canResize" @mousedown.prevent="onBottomHandleMousedown"></div>
-		<div class="handle left" v-if="canResize" @mousedown.prevent="onLeftHandleMousedown"></div>
-		<div class="handle top-left" v-if="canResize" @mousedown.prevent="onTopLeftHandleMousedown"></div>
-		<div class="handle top-right" v-if="canResize" @mousedown.prevent="onTopRightHandleMousedown"></div>
-		<div class="handle bottom-right" v-if="canResize" @mousedown.prevent="onBottomRightHandleMousedown"></div>
-		<div class="handle bottom-left" v-if="canResize" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		<template v-if="canResize">
+			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
+			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
+			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
+			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
+			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
+			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
+			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
+			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		</template>
 	</div>
 </div>
 </template>
@@ -85,7 +87,7 @@ export default Vue.extend({
 
 	computed: {
 		isFlexible(): boolean {
-			return this.height == null;
+			return this.height == 'auto';
 		},
 		canResize(): boolean {
 			return !this.isFlexible;
@@ -476,7 +478,7 @@ root(isDark)
 		left 0
 		width 100%
 		height 100%
-		background rgba(0, 0, 0, 0.7)
+		background rgba(#000, 0.7)
 		opacity 0
 		pointer-events none
 
@@ -493,7 +495,7 @@ root(isDark)
 		&:focus
 			&:not([data-is-modal])
 				> .body
-					box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+					box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
 
 		> .handle
 			$size = 8px
@@ -561,7 +563,7 @@ root(isDark)
 			overflow hidden
 			background isDark ? #282C37 : #fff
 			border-radius 6px
-			box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+			box-shadow 0 2px 6px 0 rgba(#000, 0.2)
 
 			> header
 				$header-height = 40px
diff --git a/src/client/app/desktop/views/pages/search.vue b/src/client/app/desktop/views/pages/search.vue
index 698154e667..67e1e3bfe0 100644
--- a/src/client/app/desktop/views/pages/search.vue
+++ b/src/client/app/desktop/views/pages/search.vue
@@ -114,7 +114,7 @@ export default Vue.extend({
 .notes
 	max-width 600px
 	margin 0 auto
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 	overflow hidden
 
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 9ccbc7a310..4c1b91e7a6 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .followers-you-know
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -49,7 +49,7 @@ export default Vue.extend({
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
 			margin-right 4px
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 203f936478..161b08d1de 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -44,7 +44,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .friends
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -55,7 +55,7 @@ export default Vue.extend({
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
 			margin-right 4px
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 8f72fd7165..99fe0b18d0 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -72,7 +72,7 @@ export default Vue.extend({
 
 	overflow hidden
 	background #f7f7f7
-	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+	box-shadow 0 1px 1px rgba(#000, 0.075)
 
 	> .is-suspended
 	> .is-remote
@@ -99,7 +99,7 @@ export default Vue.extend({
 				background-color #383838
 
 			> .fade
-				background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
+				background linear-gradient(transparent, rgba(#000, 0.7))
 
 		> .container
 			> .title
@@ -142,7 +142,7 @@ export default Vue.extend({
 			margin 0
 			border solid 3px #fff
 			border-radius 8px
-			box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
+			box-shadow 1px 1px 3px rgba(#000, 0.2)
 
 		> .title
 			position absolute
diff --git a/src/client/app/desktop/views/pages/user/user.home.vue b/src/client/app/desktop/views/pages/user/user.home.vue
index 7ca520ea7f..6b242a6129 100644
--- a/src/client/app/desktop/views/pages/user/user.home.vue
+++ b/src/client/app/desktop/views/pages/user/user.home.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 		width calc(100% - 275px * 2)
 
 		> .timeline
-			border solid 1px rgba(0, 0, 0, 0.075)
+			border solid 1px rgba(#000, 0.075)
 			border-radius 6px
 
 	> div
@@ -91,7 +91,7 @@ export default Vue.extend({
 				font-size 12px
 				color #aaa
 				background #fff
-				border solid 1px rgba(0, 0, 0, 0.075)
+				border solid 1px rgba(#000, 0.075)
 				border-radius 6px
 
 				a
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 9f749d5cc9..01c4c7b31e 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .photos
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -52,7 +52,7 @@ export default Vue.extend({
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
 			margin-right 4px
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 64acbd86b3..29e49f36a6 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -118,7 +118,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .profile
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> *:first-child
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 6bda29326f..223be8301b 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -231,14 +231,14 @@ export default Vue.extend({
 						width 410px
 						background #fff
 						border-radius 8px
-						box-shadow 0 0 0 12px rgba(0, 0, 0, 0.1)
+						box-shadow 0 0 0 12px rgba(#000, 0.1)
 						overflow hidden
 
 						> header
 							z-index 1
 							padding 12px 16px
 							color #888d94
-							box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
+							box-shadow 0 1px 0px rgba(#000, 0.1)
 
 							> div
 								position absolute
diff --git a/src/client/app/desktop/views/widgets/channel.vue b/src/client/app/desktop/views/widgets/channel.vue
index 7e96f8ee3d..600cdd5318 100644
--- a/src/client/app/desktop/views/widgets/channel.vue
+++ b/src/client/app/desktop/views/widgets/channel.vue
@@ -61,7 +61,7 @@ export default define({
 <style lang="stylus" scoped>
 .mkw-channel
 	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 	overflow hidden
 
@@ -73,7 +73,7 @@ export default define({
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> [data-fa]
 			margin-right 4px
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index 627943588f..9c2d60f9b9 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -59,7 +59,7 @@ export default define({
 .mkw-post-form
 	background #fff
 	overflow hidden
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	> .title
@@ -70,7 +70,7 @@ export default define({
 		font-size 0.9em
 		font-weight bold
 		color #888
-		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+		box-shadow 0 1px rgba(#000, 0.07)
 
 		> [data-fa]
 			margin-right 4px
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index ba66b703b8..7958b4829a 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -45,7 +45,7 @@ export default define({
 root(isDark)
 	overflow hidden
 	background isDark ? #282c37 : #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
+	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
 	&[data-compact]
@@ -54,14 +54,14 @@ root(isDark)
 			display block
 			width 100%
 			height 100%
-			background rgba(0, 0, 0, 0.5)
+			background rgba(#000, 0.5)
 
 		> .avatar
 			top ((100px - 58px) / 2)
 			left ((100px - 58px) / 2)
 			border none
 			border-radius 100%
-			box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+			box-shadow 0 0 16px rgba(#000, 0.5)
 
 		> .name
 			position absolute
@@ -70,7 +70,7 @@ root(isDark)
 			margin 0
 			line-height 100px
 			color #fff
-			text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
+			text-shadow 0 0 8px rgba(#000, 0.5)
 
 		> .username
 			display none
diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue
index 41536afbd4..d95d5fa223 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 	width 100%
 	height 100%
 	padding 8px
-	background rgba(0, 0, 0, 0.2)
+	background rgba(#000, 0.2)
 
 	> .body
 		width 100%
diff --git a/src/client/app/mobile/views/components/drive-folder-chooser.vue b/src/client/app/mobile/views/components/drive-folder-chooser.vue
index bfd8fbda6f..7934fb7816 100644
--- a/src/client/app/mobile/views/components/drive-folder-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-folder-chooser.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 	width 100%
 	height 100%
 	padding 8px
-	background rgba(0, 0, 0, 0.2)
+	background rgba(#000, 0.2)
 
 	> .body
 		width 100%
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index c7be7d1879..764822e98c 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -139,7 +139,7 @@ export default Vue.extend({
 			max-width 100%
 			max-height 300px
 			margin 0 auto
-			box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
+			box-shadow 1px 1px 4px rgba(#000, 0.2)
 
 		> footer
 			padding 8px 8px 0 8px
@@ -226,7 +226,7 @@ export default Vue.extend({
 					background-color #767676
 					background-image none
 					border-color #444
-					box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
+					box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
 
 				> [data-fa]
 					margin-right 4px
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 7aa666e1bb..ef3432a3ec 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -474,11 +474,11 @@ export default Vue.extend({
 		overflow auto
 		white-space nowrap
 		font-size 0.9em
-		color rgba(0, 0, 0, 0.67)
+		color rgba(#000, 0.67)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
 		background-color rgba(#fff, 0.75)
-		border-bottom solid 1px rgba(0, 0, 0, 0.13)
+		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
 		> a
@@ -555,7 +555,7 @@ export default Vue.extend({
 			display inline-block
 			position absolute
 			top 0
-			background rgba(0, 0, 0, 0.2)
+			background rgba(#000, 0.2)
 			border-radius 100%
 
 			animation sk-bounce 2.0s infinite ease-in-out
diff --git a/src/client/app/mobile/views/components/friends-maker.vue b/src/client/app/mobile/views/components/friends-maker.vue
index 961a5f568a..ba4abe341f 100644
--- a/src/client/app/mobile/views/components/friends-maker.vue
+++ b/src/client/app/mobile/views/components/friends-maker.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 .mk-friends-maker
 	background #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 	> .title
 		margin 0
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 3c7d225ca7..36c3f30c62 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -35,6 +35,7 @@
 		</header>
 		<div class="body">
 			<div class="text">
+				<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
 			</div>
 			<div class="tags" v-if="p.tags && p.tags.length > 0">
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index a0d8938646..8ab66940c4 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -107,10 +107,11 @@ root(isDark)
 	margin 0 auto
 	background isDark ? #282C37 :#fff
 	border-radius 8px
-	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
+	box-shadow 0 0 2px rgba(#000, 0.1)
+	overflow hidden
 
 	@media (min-width 500px)
-		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
+		box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	.transition
 		.mk-notifications-enter
@@ -147,7 +148,7 @@ root(isDark)
 		width 100%
 		padding 16px
 		color #555
-		border-top solid 1px rgba(0, 0, 0, 0.05)
+		border-top solid 1px rgba(#000, 0.05)
 
 		> [data-fa]
 			margin-right 4px
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 7b8a52f06e..ec16119797 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -10,6 +10,10 @@
 	</header>
 	<div class="form">
 		<mk-note-preview v-if="reply" :note="reply"/>
+		<div v-if="visibility == 'specified'" class="visibleUsers">
+			<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
+			<a @click="addVisibleUser">+ユーザーを追加</a>
+		</div>
 		<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">
@@ -27,6 +31,7 @@
 		<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>
+		<button class="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
 		<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
 	</div>
 </div>
@@ -35,11 +40,13 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
+import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import getKao from '../../../common/scripts/get-kao';
 
 export default Vue.extend({
 	components: {
-		XDraggable
+		XDraggable,
+		MkVisibilityChooser
 	},
 
 	props: ['reply'],
@@ -52,6 +59,8 @@ export default Vue.extend({
 			files: [],
 			poll: false,
 			geo: null,
+			visibility: 'public',
+			visibleUsers: [],
 			useCw: false,
 			cw: null
 		};
@@ -121,6 +130,33 @@ export default Vue.extend({
 			this.geo = null;
 		},
 
+		setVisibility() {
+			const w = (this as any).os.new(MkVisibilityChooser, {
+				source: this.$refs.visibilityButton,
+				compact: true,
+				v: this.visibility
+			});
+			w.$once('chosen', v => {
+				this.visibility = v;
+			});
+		},
+
+		addVisibleUser() {
+			(this as any).apis.input({
+				title: 'ユーザー名を入力してください'
+			}).then(username => {
+				(this as any).api('users/show', {
+					username
+				}).then(user => {
+					this.visibleUsers.push(user);
+				});
+			});
+		},
+
+		removeVisibleUser(user) {
+			this.visibleUsers = this.visibleUsers.filter(u => u != user);
+		},
+
 		clear() {
 			this.text = '';
 			this.files = [];
@@ -145,6 +181,8 @@ export default Vue.extend({
 					heading: isNaN(this.geo.heading) ? null : this.geo.heading,
 					speed: this.geo.speed,
 				} : null,
+				visibility: this.visibility,
+				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
 				viaMobile: viaMobile
 			}).then(data => {
 				this.$emit('note');
@@ -169,33 +207,33 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-post-form
+root(isDark)
 	max-width 500px
 	width calc(100% - 16px)
 	margin 8px auto
-	background #fff
+	background isDark ? #282C37 : #fff
 	border-radius 8px
-	box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
+	box-shadow 0 0 2px rgba(#000, 0.1)
 
 	@media (min-width 500px)
 		margin 16px auto
 		width calc(100% - 32px)
-		box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
+		box-shadow 0 8px 32px rgba(#000, 0.1)
 
 	@media (min-width 600px)
 		margin 32px auto
 
 	> header
-		z-index 1
+		z-index 1000
 		height 50px
-		box-shadow 0 1px 0 0 rgba(0, 0, 0, 0.1)
+		box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
 
 		> .cancel
 			padding 0
 			width 50px
 			line-height 50px
 			font-size 24px
-			color #555
+			color isDark ? #9baec8 : #555
 
 		> div
 			position absolute
@@ -229,6 +267,38 @@ export default Vue.extend({
 		> .mk-note-preview
 			padding 16px
 
+		> .visibleUsers
+			margin-bottom 8px
+			font-size 14px
+
+			> span
+				margin-right 16px
+				color isDark ? #fff : #666
+
+		> input
+			z-index 1
+
+		> input
+		> textarea
+			display block
+			padding 12px
+			margin 0
+			width 100%
+			font-size 16px
+			color isDark ? #fff : #333
+			background isDark ? #191d23 : #fff
+			border none
+			border-radius 0
+			box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+
+			&:disabled
+				opacity 0.5
+
+		> textarea
+			max-width 100%
+			min-width 100%
+			min-height 80px
+
 		> .attaches
 
 			> .files
@@ -262,31 +332,12 @@ export default Vue.extend({
 		> .file
 			display none
 
-		> input
-		> textarea
-			display block
-			padding 12px
-			margin 0
-			width 100%
-			font-size 16px
-			color #333
-			border none
-			border-bottom solid 1px #ddd
-			border-radius 0
-
-			&:disabled
-				opacity 0.5
-
-		> textarea
-			max-width 100%
-			min-width 100%
-			min-height 80px
-
 		> .upload
 		> .drive
 		> .kao
 		> .poll
 		> .geo
+		> .visibility
 			display inline-block
 			padding 0
 			margin 0
@@ -300,5 +351,10 @@ export default Vue.extend({
 			border-radius 0
 			box-shadow none
 
-</style>
+.mk-post-form[data-darkmode]
+	root(true)
+
+.mk-post-form:not([data-darkmode])
+	root(false)
 
+</style>
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index 67a38a8955..6175067459 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -74,7 +74,7 @@ export default Vue.extend({
 		justify-content center
 		margin 0 auto
 		max-width 600px
-		border-bottom solid 1px rgba(0, 0, 0, 0.2)
+		border-bottom solid 1px rgba(#000, 0.2)
 
 		> span
 			display block
@@ -97,7 +97,7 @@ export default Vue.extend({
 				font-size 12px
 				line-height 1
 				color #fff
-				background rgba(0, 0, 0, 0.3)
+				background rgba(#000, 0.3)
 				border-radius 20px
 
 	> .users
@@ -106,14 +106,14 @@ export default Vue.extend({
 		width calc(100% - 16px)
 		background #fff
 		border-radius 8px
-		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+		box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 		@media (min-width 500px)
 			margin 16px auto
 			width calc(100% - 32px)
 
 		> *
-			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+			border-bottom solid 1px rgba(#000, 0.05)
 
 	> .no
 		margin 0
diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index 7319c90849..1bdc875763 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 .mk-widget-container
 	background #eee
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 0 1px rgba(#000, 0.2)
 	overflow hidden
 
 	&.hideHeader
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index e43c5876e6..f69c4d9c68 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -121,7 +121,7 @@ root(isDark)
 			margin 0 auto
 			background isDark ? #272f3a : #fff
 			border-radius 8px
-			box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
+			box-shadow 0 0 16px rgba(#000, 0.1)
 
 			$balloon-size = 16px
 
diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue
index d0b9095cef..7048cdef31 100644
--- a/src/client/app/mobile/views/pages/profile-setting.vue
+++ b/src/client/app/mobile/views/pages/profile-setting.vue
@@ -136,7 +136,7 @@ export default Vue.extend({
 .form
 	position relative
 	background #fff
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 0 1px rgba(#000, 0.2)
 	border-radius 8px
 
 	&:before
@@ -145,7 +145,7 @@ export default Vue.extend({
 		position absolute
 		bottom -20px
 		left calc(50% - 10px)
-		border-top solid 10px rgba(0, 0, 0, 0.2)
+		border-top solid 10px rgba(#000, 0.2)
 		border-right solid 10px transparent
 		border-bottom solid 10px transparent
 		border-left solid 10px transparent
diff --git a/src/client/app/mobile/views/pages/search.vue b/src/client/app/mobile/views/pages/search.vue
index 6c80de3aa0..f038a6f81f 100644
--- a/src/client/app/mobile/views/pages/search.vue
+++ b/src/client/app/mobile/views/pages/search.vue
@@ -84,7 +84,7 @@ export default Vue.extend({
 	width calc(100% - 16px)
 	background #fff
 	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+	box-shadow 0 0 0 1px rgba(#000, 0.2)
 
 	@media (min-width 500px)
 		margin 16px auto
diff --git a/src/client/app/mobile/views/pages/selectdrive.vue b/src/client/app/mobile/views/pages/selectdrive.vue
index 741559ed0b..d730e4fcff 100644
--- a/src/client/app/mobile/views/pages/selectdrive.vue
+++ b/src/client/app/mobile/views/pages/selectdrive.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
 		width 100%
 		z-index 1000
 		background #fff
-		box-shadow 0 1px rgba(0, 0, 0, 0.1)
+		box-shadow 0 1px rgba(#000, 0.1)
 
 		> h1
 			margin 0
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index ebf14f68f5..0e9c5ea962 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
 		width calc(100% - 32px)
 		list-style none
 		background #fff
-		border solid 1px rgba(0, 0, 0, 0.2)
+		border solid 1px rgba(#000, 0.2)
 		border-radius $radius
 
 		> li
@@ -70,7 +70,7 @@ export default Vue.extend({
 			border-bottom solid 1px #ddd
 
 			&:hover
-				background rgba(0, 0, 0, 0.1)
+				background rgba(#000, 0.1)
 
 			&:first-child
 				border-top-left-radius $radius
diff --git a/src/client/app/mobile/views/pages/signup.vue b/src/client/app/mobile/views/pages/signup.vue
index 9dc07a4b86..b8245beb00 100644
--- a/src/client/app/mobile/views/pages/signup.vue
+++ b/src/client/app/mobile/views/pages/signup.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 
 	.form
 		background #fff
-		border solid 1px rgba(0, 0, 0, 0.2)
+		border solid 1px rgba(#000, 0.2)
 		border-radius 8px
 		overflow hidden
 
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 1bc7ffd862..485996870e 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -108,7 +108,7 @@ export default Vue.extend({
 		.form
 			margin-bottom 16px
 			background #fff
-			border solid 1px rgba(0, 0, 0, 0.2)
+			border solid 1px rgba(#000, 0.2)
 			border-radius 8px
 			overflow hidden
 
@@ -131,7 +131,7 @@ export default Vue.extend({
 						margin 0 0 16px 0
 						width 100%
 						font-size 1em
-						color rgba(0, 0, 0, 0.7)
+						color rgba(#000, 0.7)
 						background #fff
 						outline none
 						border solid 1px #ddd
@@ -156,7 +156,7 @@ export default Vue.extend({
 							background-color #767676
 							background-image none
 							border-color #444
-							box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
+							box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
 
 				> div
 					padding 16px
@@ -164,7 +164,7 @@ export default Vue.extend({
 
 		> .tl
 			background #fff
-			border solid 1px rgba(0, 0, 0, 0.2)
+			border solid 1px rgba(#000, 0.2)
 			border-radius 8px
 			overflow hidden
 
diff --git a/src/client/app/mobile/views/widgets/profile.vue b/src/client/app/mobile/views/widgets/profile.vue
index 502f886ceb..59c1ec7c0e 100644
--- a/src/client/app/mobile/views/widgets/profile.vue
+++ b/src/client/app/mobile/views/widgets/profile.vue
@@ -34,7 +34,7 @@ export default define({
 	display block
 	width 100%
 	height 100%
-	background rgba(0, 0, 0, 0.5)
+	background rgba(#000, 0.5)
 
 .avatar
 	display block
@@ -47,7 +47,7 @@ export default define({
 	left ((100px - 58px) / 2)
 	border none
 	border-radius 100%
-	box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+	box-shadow 0 0 16px rgba(#000, 0.5)
 
 .name
 	display block
@@ -58,6 +58,6 @@ export default define({
 	line-height 100px
 	color #fff
 	font-weight bold
-	text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
+	text-shadow 0 0 8px rgba(#000, 0.5)
 
 </style>
diff --git a/src/renderers/get-note-summary.ts b/src/renderers/get-note-summary.ts
index fc7482ca16..dfc05ebfd6 100644
--- a/src/renderers/get-note-summary.ts
+++ b/src/renderers/get-note-summary.ts
@@ -3,6 +3,10 @@
  * @param {*} note 投稿
  */
 const summarize = (note: any): string => {
+	if (note.isHidden) {
+		return '(非公開の投稿)';
+	}
+
 	let summary = '';
 
 	// チャンネル
-- 
cgit v1.2.3-freya


From 9870e73069e06370a4cc20b65bd1230c1415b67a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 09:00:41 +0900
Subject: wip

---
 .../app/desktop/views/components/post-form.vue       | 14 ++++++++++++++
 .../app/mobile/views/components/note-preview.vue     | 20 +++++++++++---------
 2 files changed, 25 insertions(+), 9 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 92a7f9ada7..ec220cc585 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -35,6 +35,7 @@
 	<button class="poll" title="内容を隠す" @click="useCw = !useCw">%fa:eye-slash%</button>
 	<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
 	<button class="visibility" title="公開範囲" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
+	<p class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</p>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? '%i18n:!@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 	</button>
@@ -557,6 +558,19 @@ root(isDark)
 				from {background-position: 0 0;}
 				to   {background-position: -64px 32px;}
 
+	> .text-count
+		pointer-events none
+		display block
+		position absolute
+		bottom 16px
+		right 138px
+		margin 0
+		line-height 40px
+		color rgba($theme-color, 0.5)
+
+		&.over
+			color #ec3828
+
 	> .upload
 	> .drive
 	> .kao
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 1de739d5d2..41244cc759 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -27,7 +27,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-note-preview
+root(isDark)
 	margin 0
 	padding 0
 	font-size 0.9em
@@ -37,10 +37,6 @@ export default Vue.extend({
 		display block
 		clear both
 
-	&:hover
-		> .main > footer > button
-			color #888
-
 	> .avatar-anchor
 		display block
 		float left
@@ -68,7 +64,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 700
 				text-align left
@@ -81,11 +77,11 @@ export default Vue.extend({
 			> .username
 				text-align left
 				margin 0 .5em 0 0
-				color #d1d8da
+				color isDark ? #606984 : #d1d8da
 
 			> .time
 				margin-left auto
-				color #b2b8bb
+				color isDark ? #606984 : #b2b8bb
 
 		> .body
 
@@ -94,6 +90,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>
-- 
cgit v1.2.3-freya


From 2f2a94590599185c09ddbfa71efd99213e7eaa91 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 09:19:05 +0900
Subject: wip

---
 .../desktop/views/components/notes.note.sub.vue    | 28 ++++++++++++++++++----
 .../app/desktop/views/components/notes.note.vue    | 15 ++++++++----
 .../app/mobile/views/components/note.sub.vue       | 28 ++++++++++++++++++----
 src/client/app/mobile/views/components/note.vue    | 14 ++++++++---
 4 files changed, 68 insertions(+), 17 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 3e1b75c29f..4472ddefb8 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -7,9 +7,18 @@
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
 			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="created-at" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
+			<div class="info">
+				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
+				<router-link class="created-at" :to="note | notePage">
+					<mk-time :time="note.createdAt"/>
+				</router-link>
+				<span class="visibility" v-if="note.visibility != 'public'">
+					<template v-if="note.visibility == 'home'">%fa:home%</template>
+					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
+					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
+					<template v-if="note.visibility == 'private'">%fa:lock%</template>
+				</span>
+			</div>
 		</header>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
@@ -85,9 +94,18 @@ root(isDark)
 				margin 0 .5em 0 0
 				color isDark ? #606984 : #d1d8da
 
-			> .created-at
+			> .info
 				margin-left auto
-				color isDark ? #606984 : #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
 			max-height 128px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 4d7e6ee8b8..ee24543ebf 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -28,6 +28,12 @@
 					<router-link class="created-at" :to="p | notePage">
 						<mk-time :time="p.createdAt"/>
 					</router-link>
+					<span class="visibility" v-if="p.visibility != 'public'">
+						<template v-if="p.visibility == 'home'">%fa:home%</template>
+						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
+						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
+						<template v-if="p.visibility == 'private'">%fa:lock%</template>
+					</span>
 				</div>
 			</header>
 			<div class="body">
@@ -442,18 +448,19 @@ root(isDark)
 					margin-left auto
 					font-size 0.9em
 
+					> *
+						color isDark ? #606984 : #c0c0c0
+
 					> .mobile
 						margin-right 8px
-						color isDark ? #606984 : #ccc
 
 					> .app
 						margin-right 8px
 						padding-right 8px
-						color #ccc
 						border-right solid 1px #eaeaea
 
-					> .created-at
-						color isDark ? #606984 : #c0c0c0
+					> .visibility
+						margin-left 8px
 
 			> .body
 
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 8e3835ac23..01f02bdb56 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -7,9 +7,18 @@
 		<header>
 			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
 			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="created-at" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
+			<div class="info">
+				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
+				<router-link class="created-at" :to="note | notePage">
+					<mk-time :time="note.createdAt"/>
+				</router-link>
+				<span class="visibility" v-if="note.visibility != 'public'">
+					<template v-if="note.visibility == 'home'">%fa:home%</template>
+					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
+					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
+					<template v-if="note.visibility == 'private'">%fa:lock%</template>
+				</span>
+			</div>
 		</header>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
@@ -92,9 +101,18 @@ root(isDark)
 				margin 0
 				color isDark ? #606984 : #d1d8da
 
-			> .created-at
+			> .info
 				margin-left auto
-				color isDark ? #606984 : #b2b8bb
+				font-size 0.9em
+
+				> *
+					color isDark ? #606984 : #b2b8bb
+
+				> .mobile
+					margin-right 6px
+
+				> .visibility
+					margin-left 6px
 
 		> .body
 			max-height 128px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 5202e0eb54..07e18544dd 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -27,6 +27,12 @@
 					<router-link class="created-at" :to="p | notePage">
 						<mk-time :time="p.createdAt"/>
 					</router-link>
+					<span class="visibility" v-if="p.visibility != 'public'">
+						<template v-if="p.visibility == 'home'">%fa:home%</template>
+						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
+						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
+						<template v-if="p.visibility == 'private'">%fa:lock%</template>
+					</span>
 				</div>
 			</header>
 			<div class="body">
@@ -379,12 +385,14 @@ root(isDark)
 					margin-left auto
 					font-size 0.9em
 
+					> *
+						color isDark ? #606984 : #c0c0c0
+
 					> .mobile
 						margin-right 6px
-						color isDark ? #606984 : #c0c0c0
 
-					> .created-at
-						color isDark ? #606984 : #c0c0c0
+					> .visibility
+						margin-left 6px
 
 			> .body
 
-- 
cgit v1.2.3-freya


From 372bfaceda5bf694bf33986b5a64a56e5787104c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 17:17:15 +0900
Subject: リファクタリングなど
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/define-widget.ts             | 62 ++++++++-------
 src/client/app/common/mios.ts                      | 56 +++++++++-----
 src/client/app/common/scripts/streaming/home.ts    | 23 +++++-
 src/client/app/common/views/components/avatar.vue  | 38 +++++++++
 src/client/app/common/views/components/index.ts    |  2 +
 .../views/components/messaging-room.message.vue    | 24 ++----
 .../app/common/views/components/messaging.vue      |  4 +-
 .../common/views/components/welcome-timeline.vue   | 15 ++--
 src/client/app/common/views/widgets/access-log.vue |  1 +
 src/client/app/common/views/widgets/broadcast.vue  |  1 +
 src/client/app/common/views/widgets/calendar.vue   |  1 +
 .../app/common/views/widgets/photo-stream.vue      |  2 +
 src/client/app/common/views/widgets/rss.vue        |  1 +
 src/client/app/common/views/widgets/server.vue     |  2 +
 src/client/app/common/views/widgets/slideshow.vue  |  2 +
 .../app/desktop/views/components/friends-maker.vue | 17 ++--
 src/client/app/desktop/views/components/home.vue   | 83 +++++++-------------
 .../desktop/views/components/note-detail.sub.vue   | 17 ++--
 .../app/desktop/views/components/note-detail.vue   | 37 +++------
 .../app/desktop/views/components/note-preview.vue  | 17 ++--
 .../desktop/views/components/notes.note.sub.vue    | 17 ++--
 .../app/desktop/views/components/notes.note.vue    | 38 ++++-----
 src/client/app/desktop/views/components/notes.vue  |  6 +-
 .../app/desktop/views/components/notifications.vue | 41 +++-------
 .../app/desktop/views/components/settings.vue      | 59 +++++++-------
 .../app/desktop/views/components/timeline.core.vue |  8 +-
 .../desktop/views/components/ui.header.account.vue |  2 +-
 .../views/components/user-list-timeline.vue        |  8 +-
 .../app/desktop/views/components/user-preview.vue  | 16 ++--
 .../desktop/views/components/users-list.item.vue   | 17 ++--
 .../desktop/views/components/widget-container.vue  |  4 +-
 src/client/app/desktop/views/components/window.vue |  4 +-
 .../app/desktop/views/pages/user-list.users.vue    | 17 ++--
 .../app/desktop/views/pages/user/user.friends.vue  | 17 ++--
 .../app/desktop/views/pages/user/user.header.vue   |  3 +-
 src/client/app/desktop/views/pages/welcome.vue     |  4 +-
 src/client/app/desktop/views/widgets/activity.vue  |  2 +
 src/client/app/desktop/views/widgets/channel.vue   |  1 +
 src/client/app/desktop/views/widgets/messaging.vue |  1 +
 .../app/desktop/views/widgets/notifications.vue    |  1 +
 src/client/app/desktop/views/widgets/polls.vue     |  1 +
 src/client/app/desktop/views/widgets/post-form.vue |  1 +
 src/client/app/desktop/views/widgets/profile.vue   |  1 +
 .../app/desktop/views/widgets/timemachine.vue      |  1 +
 src/client/app/desktop/views/widgets/trends.vue    |  1 +
 src/client/app/desktop/views/widgets/users.vue     | 18 ++---
 src/client/app/init.ts                             | 28 ++-----
 .../mobile/views/components/note-detail.sub.vue    | 17 ++--
 .../app/mobile/views/components/note-detail.vue    | 47 ++++-------
 .../app/mobile/views/components/note-preview.vue   | 17 ++--
 .../app/mobile/views/components/note.sub.vue       | 23 ++----
 src/client/app/mobile/views/components/note.vue    | 46 ++++-------
 src/client/app/mobile/views/components/notes.vue   |  6 +-
 .../app/mobile/views/components/notification.vue   | 32 +++-----
 .../app/mobile/views/components/post-form.vue      |  2 +-
 .../mobile/views/components/user-list-timeline.vue |  8 +-
 .../app/mobile/views/components/user-preview.vue   | 25 ++----
 src/client/app/mobile/views/pages/dashboard.vue    | 20 ++---
 .../app/mobile/views/pages/home.timeline.vue       |  8 +-
 src/client/app/mobile/views/pages/welcome.vue      |  4 +-
 src/client/app/mobile/views/widgets/activity.vue   |  1 +
 src/client/app/store.ts                            | 90 ++++++++++++++++++++++
 .../api/endpoints/i/update_client_setting.ts       | 17 ++--
 src/server/index.ts                                |  6 +-
 64 files changed, 521 insertions(+), 570 deletions(-)
 create mode 100644 src/client/app/common/views/components/avatar.vue
 create mode 100644 src/client/app/store.ts

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/define-widget.ts b/src/client/app/common/define-widget.ts
index 7b98c0903f..0b2bc36566 100644
--- a/src/client/app/common/define-widget.ts
+++ b/src/client/app/common/define-widget.ts
@@ -18,61 +18,65 @@ export default function<T extends object>(data: {
 				default: false
 			}
 		},
+
 		computed: {
 			id(): string {
 				return this.widget.id;
+			},
+
+			props(): T {
+				return this.widget.data;
 			}
 		},
+
 		data() {
 			return {
-				props: data.props ? data.props() : {} as T,
-				bakedOldProps: null,
-				preventSave: false
+				bakedOldProps: null
 			};
 		},
+
 		created() {
-			if (this.props) {
-				Object.keys(this.props).forEach(prop => {
-					if (this.widget.data.hasOwnProperty(prop)) {
-						this.props[prop] = this.widget.data[prop];
-					}
-				});
-			}
+			this.mergeProps();
+
+			this.$watch('props', () => {
+				this.mergeProps();
+			});
 
 			this.bakeProps();
+		},
+
+		methods: {
+			bakeProps() {
+				this.bakedOldProps = JSON.stringify(this.props);
+			},
 
-			this.$watch('props', newProps => {
-				if (this.preventSave) {
-					this.preventSave = false;
-					this.bakeProps();
-					return;
+			mergeProps() {
+				if (data.props) {
+					const defaultProps = data.props();
+					Object.keys(defaultProps).forEach(prop => {
+						if (!this.props.hasOwnProperty(prop)) {
+							Vue.set(this.props, prop, defaultProps[prop]);
+						}
+					});
 				}
-				if (this.bakedOldProps == JSON.stringify(newProps)) return;
+			},
+
+			save() {
+				if (this.bakedOldProps == JSON.stringify(this.props)) return;
 
 				this.bakeProps();
 
 				if (this.isMobile) {
 					(this as any).api('i/update_mobile_home', {
 						id: this.id,
-						data: newProps
-					}).then(() => {
-						(this as any).os.i.clientSettings.mobileHome.find(w => w.id == this.id).data = newProps;
+						data: this.props
 					});
 				} else {
 					(this as any).api('i/update_home', {
 						id: this.id,
-						data: newProps
-					}).then(() => {
-						(this as any).os.i.clientSettings.home.find(w => w.id == this.id).data = newProps;
+						data: this.props
 					});
 				}
-			}, {
-				deep: true
-			});
-		},
-		methods: {
-			bakeProps() {
-				this.bakedOldProps = JSON.stringify(this.props);
 			}
 		}
 	});
diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index 4e471cf96f..7dcae47946 100644
--- a/src/client/app/common/mios.ts
+++ b/src/client/app/common/mios.ts
@@ -3,6 +3,7 @@ import { EventEmitter } from 'eventemitter3';
 import * as merge from 'object-assign-deep';
 import * as uuid from 'uuid';
 
+import initStore from '../store';
 import { hostname, apiUrl, swPublickey, version, lang, googleMapsApiKey } from '../config';
 import Progress from './scripts/loading';
 import Connection from './scripts/streaming/stream';
@@ -16,16 +17,6 @@ import Err from '../common/views/components/connect-failed.vue';
 import { LocalTimelineStreamManager } from './scripts/streaming/local-timeline';
 import { GlobalTimelineStreamManager } from './scripts/streaming/global-timeline';
 
-const defaultSettings = {
-	fetchOnScroll: true,
-	showMaps: true,
-	showPostFormOnTopOfTl: false,
-	gradientWindowHeader: false,
-	showReplyTarget: true,
-	showMyRenotes: true,
-	showRenotedMyNotes: true
-};
-
 //#region api requests
 let spinner = null;
 let pending = 0;
@@ -117,6 +108,8 @@ export default class MiOS extends EventEmitter {
 		return localStorage.getItem('enableSounds') == 'true';
 	}
 
+	public store: ReturnType<typeof initStore>;
+
 	public apis: API;
 
 	/**
@@ -232,6 +225,11 @@ export default class MiOS extends EventEmitter {
 		console.error.apply(null, args);
 	}
 
+	public bakeMe() {
+		// ローカルストレージにキャッシュ
+		localStorage.setItem('me', JSON.stringify(this.i));
+	}
+
 	public signout() {
 		localStorage.removeItem('me');
 		document.cookie = `i=; domain=${hostname}; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
@@ -243,6 +241,8 @@ export default class MiOS extends EventEmitter {
 	 * @param callback A function that call when initialized
 	 */
 	public async init(callback) {
+		this.store = initStore(this);
+
 		//#region Init stream managers
 		this.streams.serverStream = new ServerStreamManager(this);
 
@@ -307,16 +307,11 @@ export default class MiOS extends EventEmitter {
 
 		// フェッチが完了したとき
 		const fetched = me => {
-			if (me) {
-				// デフォルトの設定をマージ
-				me.clientSettings = Object.assign(defaultSettings, me.clientSettings);
-
-				// ローカルストレージにキャッシュ
-				localStorage.setItem('me', JSON.stringify(me));
-			}
-
 			this.i = me;
 
+			// ローカルストレージにキャッシュ
+			this.bakeMe();
+
 			this.emit('signedin');
 
 			// Finish init
@@ -333,6 +328,14 @@ export default class MiOS extends EventEmitter {
 		// Get cached account data
 		const cachedMe = JSON.parse(localStorage.getItem('me'));
 
+		//#region キャッシュされた設定を復元
+		const cachedSettings = JSON.parse(localStorage.getItem('settings'));
+
+		if (cachedSettings) {
+			this.store.commit('settings/init', cachedSettings);
+		}
+		//#endregion
+
 		// キャッシュがあったとき
 		if (cachedMe) {
 			if (cachedMe.token == null) {
@@ -346,12 +349,25 @@ export default class MiOS extends EventEmitter {
 			// 後から新鮮なデータをフェッチ
 			fetchme(cachedMe.token, freshData => {
 				merge(cachedMe, freshData);
+
+				this.store.commit('settings/init', freshData.clientSettings);
 			});
 		} else {
 			// Get token from cookie
 			const i = (document.cookie.match(/i=(!\w+)/) || [null, null])[1];
 
-			fetchme(i, fetched);
+			fetchme(i, me => {
+				if (me) {
+					Object.entries(me.clientSettings).forEach(([key, value]) => {
+						this.store.commit('settings/set', { key, value });
+					});
+
+					fetched(me);
+				} else {
+					// Finish init
+					callback();
+				}
+			});
 		}
 	}
 
@@ -456,7 +472,7 @@ export default class MiOS extends EventEmitter {
 		};
 
 		const promise = new Promise((resolve, reject) => {
-			const viaStream = this.stream.hasConnection &&
+			const viaStream = this.stream && this.stream.hasConnection &&
 				(localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true);
 
 			if (viaStream) {
diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index 73f2c5302c..ddb0d4820e 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -25,10 +25,31 @@ export class HomeStream extends Stream {
 				console.log('I updated:', i);
 			}
 			merge(me, i);
+
+			// キャッシュ更新
+			os.bakeMe();
+		});
+
+		this.on('clientSettingUpdated', x => {
+			os.store.commit('settings/set', {
+				key: x.key,
+				value: x.value
+			});
+		});
+
+		this.on('home_updated', x => {
+			if (x.home) {
+				os.store.commit('settings/setHome', x.home);
+			} else {
+				os.store.commit('settings/setHomeWidget', {
+					id: x.id,
+					data: x.data
+				});
+			}
 		});
 
 		// トークンが再生成されたとき
-		// このままではAPIが利用できないので強制的にサインアウトさせる
+		// このままではMisskeyが利用できないので強制的にサインアウトさせる
 		this.on('my_token_regenerated', () => {
 			alert('%i18n:!common.my-token-regenerated%');
 			os.signout();
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
new file mode 100644
index 0000000000..5aac9c8ba1
--- /dev/null
+++ b/src/client/app/common/views/components/avatar.vue
@@ -0,0 +1,38 @@
+<template>
+	<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="{ borderRadius: clientSettings.circleIcons ? '100%' : null }">
+		<img v-if="disablePreview" :src="`${user.avatarUrl}?thumbnail&size=128`" alt=""/>
+		<img v-else :src="`${user.avatarUrl}?thumbnail&size=128`" alt="" v-user-preview="user.id"/>
+	</router-link>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		user: {
+			required: true
+		},
+		target: {
+			required: false,
+			default: null
+		},
+		disablePreview: {
+			required: false,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-avatar
+	display block
+
+	> img
+		display inline-block
+		width 100%
+		height 100%
+		margin 0
+		border-radius inherit
+		vertical-align bottom
+</style>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 6bfe43a800..69fed00c74 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
+import avatar from './avatar.vue';
 import nav from './nav.vue';
 import noteHtml from './note-html';
 import poll from './poll.vue';
@@ -28,6 +29,7 @@ import welcomeTimeline from './welcome-timeline.vue';
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
 Vue.component('mk-forkit', forkit);
+Vue.component('mk-avatar', avatar);
 Vue.component('mk-nav', nav);
 Vue.component('mk-note-html', noteHtml);
 Vue.component('mk-poll', poll);
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 70df899f5a..ba0ab3209f 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="message" :data-is-me="isMe">
-	<router-link class="avatar-anchor" :to="message.user | userPage" :title="message.user | acct" target="_blank">
-		<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
-	</router-link>
+	<mk-avatar class="avatar" :user="message.user" target="_blank"/>
 	<div class="content">
 		<div class="balloon" :data-no-text="message.text == null">
 			<p class="read" v-if="isMe && message.isRead">%i18n:@is-read%</p>
@@ -67,20 +65,14 @@ export default Vue.extend({
 	padding 10px 12px 10px 12px
 	background-color transparent
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		position absolute
 		top 10px
-
-		> .avatar
-			display block
-			min-width 54px
-			min-height 54px
-			max-width 54px
-			max-height 54px
-			margin 0
-			border-radius 8px
-			transition all 0.1s ease
+		width 54px
+		height 54px
+		border-radius 8px
+		transition all 0.1s ease
 
 	> .content
 
@@ -201,7 +193,7 @@ export default Vue.extend({
 				margin-left 4px
 
 	&:not([data-is-me])
-		> .avatar-anchor
+		> .avatar
 			left 12px
 
 		> .content
@@ -225,7 +217,7 @@ export default Vue.extend({
 				text-align left
 
 	&[data-is-me]
-		> .avatar-anchor
+		> .avatar
 			right 12px
 
 		> .content
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 6f8fcb3a70..11f9c366d4 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -13,7 +13,7 @@
 					@click="navigate(user)"
 					tabindex="-1"
 				>
-					<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
+					<mk-avatar class="avatar" :user="user"/>
 					<span class="name">{{ user | userName }}</span>
 					<span class="username">@{{ user | acct }}</span>
 				</li>
@@ -31,7 +31,7 @@
 				:key="message.id"
 			>
 				<div>
-					<img class="avatar" :src="`${isMe(message) ? message.recipient.avatarUrl : message.user.avatarUrl}?thumbnail&size=64`" alt=""/>
+					<mk-avatar class="avatar" :user="isMe(message) ? message.recipient : message.user"/>
 					<header>
 						<span class="name">{{ isMe(message) ? message.recipient : message.user | userName }}</span>
 						<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 3497976901..6fadb030c3 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -1,9 +1,7 @@
 <template>
 <div class="mk-welcome-timeline">
 	<div v-for="note in notes">
-		<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.user.id">
-			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="note.user" target="_blank"/>
 		<div class="body">
 			<header>
 				<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
@@ -69,18 +67,15 @@ export default Vue.extend({
 			display block
 			clear both
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			position -webkit-sticky
 			position sticky
 			top 16px
-
-			> img
-				display block
-				width 42px
-				height 42px
-				border-radius 6px
+			width 42px
+			height 42px
+			border-radius 6px
 
 		> .body
 			float right
diff --git a/src/client/app/common/views/widgets/access-log.vue b/src/client/app/common/views/widgets/access-log.vue
index 0b1c7fe2dd..8652e35645 100644
--- a/src/client/app/common/views/widgets/access-log.vue
+++ b/src/client/app/common/views/widgets/access-log.vue
@@ -61,6 +61,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index 96d1d0ef3a..75b1d60524 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -68,6 +68,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index 0bb503759c..41e9253784 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -73,6 +73,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		},
 		tick() {
 			const now = new Date();
diff --git a/src/client/app/common/views/widgets/photo-stream.vue b/src/client/app/common/views/widgets/photo-stream.vue
index c51d932bd1..ae5924bb10 100644
--- a/src/client/app/common/views/widgets/photo-stream.vue
+++ b/src/client/app/common/views/widgets/photo-stream.vue
@@ -59,6 +59,8 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index f0ba11678e..b5339add0b 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -40,6 +40,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		},
 		fetch() {
 			fetch(`https://api.rss2json.com/v1/api.json?rss_url=${this.url}`, {
diff --git a/src/client/app/common/views/widgets/server.vue b/src/client/app/common/views/widgets/server.vue
index 2fbc07adf0..2fdd60499b 100644
--- a/src/client/app/common/views/widgets/server.vue
+++ b/src/client/app/common/views/widgets/server.vue
@@ -68,6 +68,7 @@ export default define({
 			} else {
 				this.props.view++;
 			}
+			this.save();
 		},
 		func() {
 			if (this.props.design == 2) {
@@ -75,6 +76,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/common/views/widgets/slideshow.vue b/src/client/app/common/views/widgets/slideshow.vue
index 95be4b94fd..459b24a32f 100644
--- a/src/client/app/common/views/widgets/slideshow.vue
+++ b/src/client/app/common/views/widgets/slideshow.vue
@@ -64,6 +64,7 @@ export default define({
 			} else {
 				this.props.size++;
 			}
+			this.save();
 
 			this.applySize();
 		},
@@ -111,6 +112,7 @@ export default define({
 		choose() {
 			(this as any).apis.chooseDriveFolder().then(folder => {
 				this.props.folder = folder ? folder.id : null;
+				this.save();
 				this.fetch();
 			});
 		}
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index af5bde3ad5..3c1f8b8257 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -3,9 +3,7 @@
 	<p class="title">気になるユーザーをフォロー:</p>
 	<div class="users" v-if="!fetching && users.length > 0">
 		<div class="user" v-for="user in users" :key="user.id">
-			<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>
+			<mk-avatar class="avatar" :user="user" target="_blank"/>
 			<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>
@@ -86,18 +84,13 @@ export default Vue.extend({
 				display block
 				clear both
 
-			> .avatar-anchor
+			> .avatar
 				display block
 				float left
 				margin 0 12px 0 0
-
-				> .avatar
-					display block
-					width 42px
-					height 42px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
+				width 42px
+				height 42px
+				border-radius 8px
 
 			> .body
 				float left
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 4343a7fb78..5337be61fd 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -53,7 +53,7 @@
 			<div class="main">
 				<a @click="hint">カスタマイズのヒント</a>
 				<div>
-					<mk-post-form v-if="os.i.clientSettings.showPostFormOnTopOfTl"/>
+					<mk-post-form v-if="clientSettings.showPostFormOnTopOfTl"/>
 					<mk-timeline ref="tl" @loaded="onTlLoaded"/>
 				</div>
 			</div>
@@ -63,7 +63,7 @@
 				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp"/>
 			</div>
 			<div class="main">
-				<mk-post-form v-if="os.i.clientSettings.showPostFormOnTopOfTl"/>
+				<mk-post-form v-if="clientSettings.showPostFormOnTopOfTl"/>
 				<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
 				<mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
 			</div>
@@ -81,6 +81,7 @@ export default Vue.extend({
 	components: {
 		XDraggable
 	},
+
 	props: {
 		customize: {
 			type: Boolean,
@@ -91,61 +92,43 @@ export default Vue.extend({
 			default: 'timeline'
 		}
 	},
+
 	data() {
 		return {
 			connection: null,
 			connectionId: null,
 			widgetAdderSelected: null,
-			trash: [],
-			widgets: {
-				left: [],
-				right: []
-			}
+			trash: []
 		};
 	},
+
 	computed: {
-		home: {
-			get(): any[] {
-				//#region 互換性のため
-				(this as any).os.i.clientSettings.home.forEach(w => {
-					if (w.name == 'rss-reader') w.name = 'rss';
-					if (w.name == 'user-recommendation') w.name = 'users';
-					if (w.name == 'recommended-polls') w.name = 'polls';
-				});
-				//#endregion
-				return (this as any).os.i.clientSettings.home;
-			},
-			set(value) {
-				(this as any).os.i.clientSettings.home = value;
-			}
+		home(): any[] {
+			return this.$store.state.settings.data.home;
 		},
 		left(): any[] {
 			return this.home.filter(w => w.place == 'left');
 		},
 		right(): any[] {
 			return this.home.filter(w => w.place == 'right');
+		},
+		widgets(): any {
+			return {
+				left: this.left,
+				right: this.right
+			};
 		}
 	},
-	created() {
-		this.widgets.left = this.left;
-		this.widgets.right = this.right;
-		this.$watch('os.i.clientSettings', i => {
-			this.widgets.left = this.left;
-			this.widgets.right = this.right;
-		}, {
-			deep: true
-		});
-	},
+
 	mounted() {
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
-
-		this.connection.on('home_updated', this.onHomeUpdated);
 	},
+
 	beforeDestroy() {
-		this.connection.off('home_updated', this.onHomeUpdated);
 		(this as any).os.stream.dispose(this.connectionId);
 	},
+
 	methods: {
 		hint() {
 			(this as any).apis.dialog({
@@ -159,56 +142,44 @@ export default Vue.extend({
 				}]
 			});
 		},
+
 		onTlLoaded() {
 			this.$emit('loaded');
 		},
-		onHomeUpdated(data) {
-			if (data.home) {
-				(this as any).os.i.clientSettings.home = data.home;
-				this.widgets.left = data.home.filter(w => w.place == 'left');
-				this.widgets.right = data.home.filter(w => w.place == 'right');
-			} else {
-				const w = (this as any).os.i.clientSettings.home.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.left = (this as any).os.i.clientSettings.home.filter(w => w.place == 'left');
-					this.widgets.right = (this as any).os.i.clientSettings.home.filter(w => w.place == 'right');
-				}
-			}
-		},
+
 		onWidgetContextmenu(widgetId) {
 			const w = (this.$refs[widgetId] as any)[0];
 			if (w.func) w.func();
 		},
+
 		onWidgetSort() {
 			this.saveHome();
 		},
+
 		onTrash(evt) {
 			this.saveHome();
 		},
+
 		addWidget() {
-			const widget = {
+			this.$store.dispatch('settings/addHomeWidget', {
 				name: this.widgetAdderSelected,
 				id: uuid(),
 				place: 'left',
 				data: {}
-			};
-
-			this.widgets.left.unshift(widget);
-			this.saveHome();
+			});
 		},
+
 		saveHome() {
 			const left = this.widgets.left;
 			const right = this.widgets.right;
-			this.home = left.concat(right);
+			this.$store.commit('settings/setHome', left.concat(right));
 			left.forEach(w => w.place = 'left');
 			right.forEach(w => w.place = 'right');
 			(this as any).api('i/update_home', {
 				home: this.home
 			});
 		},
+
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
 		}
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index 5175c8bd45..24550c4e94 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<div class="left">
@@ -57,18 +55,13 @@ root(isDark)
 		> .main > footer > button
 			color #888
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 4px
-			vertical-align bottom
+		width 44px
+		height 44px
+		border-radius 4px
 
 	> .main
 		float left
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 525023349e..5d07dc90d4 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -18,18 +18,14 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<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"/>
-			</router-link>
+			<mk-avatar class="avatar" :user="note.user"/>
 			%fa:retweet%
 			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
 			がRenote
 		</p>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="p.user"/>
 		<header>
 			<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
 			<span class="username">@{{ p.user | acct }}</span>
@@ -159,7 +155,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
@@ -262,17 +258,12 @@ root(isDark)
 			margin 0
 			padding 16px 32px
 
-			.avatar-anchor
+			.avatar
 				display inline-block
-
-				.avatar
-					vertical-align bottom
-					min-width 28px
-					min-height 28px
-					max-width 28px
-					max-height 28px
-					margin 0 8px 0 0
-					border-radius 6px
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
 			[data-fa]
 				margin-right 4px
@@ -298,18 +289,10 @@ root(isDark)
 			> footer > button
 				color isDark ? #707b97 : #888
 
-		> .avatar-anchor
-			display block
+		> .avatar
 			width 60px
 			height 60px
-
-			> .avatar
-				display block
-				width 60px
-				height 60px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
+			border-radius 8px
 
 		> header
 			position absolute
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index b45814e512..43eb159885 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="mk-note-preview" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
@@ -41,18 +39,13 @@ root(isDark)
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 52px
+		height 52px
+		border-radius 8px
 
 	> .main
 		float left
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 4472ddefb8..238fb03691 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
@@ -53,18 +51,13 @@ root(isDark)
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 14px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 52px
+		height 52px
+		border-radius 8px
 
 	> .main
 		float left
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index ee24543ebf..b512f78eca 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -1,12 +1,10 @@
 <template>
 <div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
-	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || os.i.clientSettings.showReplyTarget)">
+	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || clientSettings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<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"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="note.user"/>
 		%fa:retweet%
 		<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>
@@ -14,9 +12,7 @@
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="p.user"/>
 		<div class="main">
 			<header>
 				<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
@@ -182,7 +178,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
@@ -343,15 +339,12 @@ root(isDark)
 		color #9dbb00
 		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
-		.avatar-anchor
+		.avatar
 			display inline-block
-
-			.avatar
-				vertical-align bottom
-				width 28px
-				height 28px
-				margin 0 8px 0 0
-				border-radius 6px
+			width 28px
+			height 28px
+			margin 0 8px 0 0
+			border-radius 6px
 
 		[data-fa]
 			margin-right 4px
@@ -390,22 +383,17 @@ root(isDark)
 			> .main > footer > button
 				color isDark ? #707b97 : #888
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			margin 0 16px 10px 0
+			width 58px
+			height 58px
+			border-radius 8px
 			//position -webkit-sticky
 			//position sticky
 			//top 74px
 
-			> .avatar
-				display block
-				width 58px
-				height 58px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
-
 		> .main
 			float left
 			width calc(100% - 74px)
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index c4824feeac..7e80e6f74a 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -121,13 +121,13 @@ export default Vue.extend({
 			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 ((this as any).clientSettings.showMyRenotes === false) {
 				if (isMyNote && isPureRenote) {
 					return;
 				}
 			}
 
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
+			if ((this as any).clientSettings.showRenotedMyNotes === false) {
 				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
 					return;
 				}
@@ -199,7 +199,7 @@ export default Vue.extend({
 				this.clearNotification();
 			}
 
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+			if ((this as any).clientSettings.fetchOnScroll !== false) {
 				const current = window.scrollY + window.innerHeight;
 				if (current > document.body.offsetHeight - 8) this.loadMore();
 			}
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 36e9dce6af..7923d1a62d 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -6,9 +6,7 @@
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
 					<template v-if="notification.type == 'reaction'">
-						<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>
+						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>
 								<mk-reaction-icon :reaction="notification.reaction"/>
@@ -20,9 +18,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'renote'">
-						<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>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
 							<p>%fa:retweet%
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
@@ -33,9 +29,7 @@
 						</div>
 					</template>
 					<template v-if="notification.type == 'quote'">
-						<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>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
 							<p>%fa:quote-left%
 								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
@@ -44,9 +38,7 @@
 						</div>
 					</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>
+						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>%fa:user-plus%
 								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
@@ -54,9 +46,7 @@
 						</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>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<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>
@@ -65,9 +55,7 @@
 						</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>
+						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<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>
@@ -76,9 +64,7 @@
 						</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>
+						<mk-avatar class="avatar" :user="notification.user"/>
 						<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">
@@ -223,20 +209,15 @@ root(isDark)
 					display block
 					clear both
 
-				> .avatar-anchor
+				> .avatar
 					display block
 					float left
 					position -webkit-sticky
 					position sticky
 					top 16px
-
-					> img
-						display block
-						min-width 36px
-						min-height 36px
-						max-width 36px
-						max-height 36px
-						border-radius 6px
+					width 36px
+					height 36px
+					border-radius 6px
 
 				> .text
 					float right
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 9d56042ea7..af6ab12669 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -20,7 +20,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>動作</h1>
-			<mk-switch v-model="os.i.clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
+			<mk-switch v-model="clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
 				<span>ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。</span>
 			</mk-switch>
 			<mk-switch v-model="autoPopout" text="ウィンドウの自動ポップアウト">
@@ -41,13 +41,14 @@
 			</div>
 			<div class="div">
 				<mk-switch v-model="darkmode" text="ダークモード"/>
-				<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
+				<mk-switch v-model="clientSettings.circleIcons" @change="onChangeCircleIcons" text="丸いアイコンを使用"/>
+				<mk-switch v-model="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="マップの自動展開">
+			<mk-switch v-model="clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
+			<mk-switch v-model="clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
+			<mk-switch v-model="clientSettings.showMyRenotes" @change="onChangeShowMyRenotes" text="自分の行ったRenoteをタイムラインに表示する"/>
+			<mk-switch v-model="clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes" text="Renoteされた自分の投稿をタイムラインに表示する"/>
+			<mk-switch v-model="clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
 				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
 			</mk-switch>
 		</section>
@@ -69,7 +70,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>モバイル</h1>
-			<mk-switch v-model="os.i.clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
+			<mk-switch v-model="clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -297,8 +298,8 @@ export default Vue.extend({
 			this.$emit('done');
 		},
 		onChangeFetchOnScroll(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'fetchOnScroll',
+			this.$store.dispatch('settings/set', {
+				key: 'fetchOnScroll',
 				value: v
 			});
 		},
@@ -308,50 +309,56 @@ export default Vue.extend({
 			});
 		},
 		onChangeDark(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'dark',
+			this.$store.dispatch('settings/set', {
+				key: 'dark',
 				value: v
 			});
 		},
 		onChangeShowPostFormOnTopOfTl(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showPostFormOnTopOfTl',
+			this.$store.dispatch('settings/set', {
+				key: 'showPostFormOnTopOfTl',
 				value: v
 			});
 		},
 		onChangeShowReplyTarget(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showReplyTarget',
+			this.$store.dispatch('settings/set', {
+				key: 'showReplyTarget',
 				value: v
 			});
 		},
 		onChangeShowMyRenotes(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showMyRenotes',
+			this.$store.dispatch('settings/set', {
+				key: 'showMyRenotes',
 				value: v
 			});
 		},
 		onChangeShowRenotedMyNotes(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showRenotedMyNotes',
+			this.$store.dispatch('settings/set', {
+				key: 'showRenotedMyNotes',
 				value: v
 			});
 		},
 		onChangeShowMaps(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'showMaps',
+			this.$store.dispatch('settings/set', {
+				key: 'showMaps',
+				value: v
+			});
+		},
+		onChangeCircleIcons(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'circleIcons',
 				value: v
 			});
 		},
 		onChangeGradientWindowHeader(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'gradientWindowHeader',
+			this.$store.dispatch('settings/set', {
+				key: 'gradientWindowHeader',
 				value: v
 			});
 		},
 		onChangeDisableViaMobile(v) {
-			(this as any).api('i/update_client_setting', {
-				name: 'disableViaMobile',
+			this.$store.dispatch('settings/set', {
+				key: 'disableViaMobile',
 				value: v
 			});
 		},
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index a137a57070..254a5b9d63 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -101,8 +101,8 @@ export default Vue.extend({
 				(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
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -123,8 +123,8 @@ export default Vue.extend({
 			(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
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 145666b4bc..897d3de816 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -2,7 +2,7 @@
 <div class="account">
 	<button class="header" :data-active="isOpen" @click="toggle">
 		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
-		<img class="avatar" :src="`${ os.i.avatarUrl }?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="os.i"/>
 	</button>
 	<transition name="zoom-in-top">
 		<div class="menu" v-if="isOpen">
diff --git a/src/client/app/desktop/views/components/user-list-timeline.vue b/src/client/app/desktop/views/components/user-list-timeline.vue
index ee983a969c..ccdf8f64d2 100644
--- a/src/client/app/desktop/views/components/user-list-timeline.vue
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -46,8 +46,8 @@ export default Vue.extend({
 				(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
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -66,8 +66,8 @@ export default Vue.extend({
 				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
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index d0111d7dc5..cc5e021390 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -2,9 +2,7 @@
 <div class="mk-user-preview">
 	<template v-if="u != null">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl}?thumbnail&size=512)` : ''"></div>
-		<router-link class="avatar" :to="u | userPage">
-			<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">
 			<router-link class="name" :to="u | userPage">{{ u | userName }}</router-link>
 			<p class="username">@{{ u | acct }}</p>
@@ -111,14 +109,10 @@ root(isDark)
 		top 62px
 		left 13px
 		z-index 2
-
-		> img
-			display block
-			width 58px
-			height 58px
-			margin 0
-			border solid 3px isDark ? #282c37 : #fff
-			border-radius 8px
+		width 58px
+		height 58px
+		border solid 3px isDark ? #282c37 : #fff
+		border-radius 8px
 
 	> .title
 		display block
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
index 005c9cd6d3..dbad295178 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="root item">
-	<router-link class="avatar-anchor" :to="user | userPage" v-user-preview="user.id">
-		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
@@ -35,18 +33,13 @@ export default Vue.extend({
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 58px
-			height 58px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 58px
+		height 58px
+		border-radius 8px
 
 	> .main
 		float left
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 2edba5a230..ab8327d39e 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -24,8 +24,8 @@ export default Vue.extend({
 	computed: {
 		withGradient(): boolean {
 			return (this as any).os.isSignedIn
-				? (this as any).os.i.clientSettings.gradientWindowHeader != null
-					? (this as any).os.i.clientSettings.gradientWindowHeader
+				? (this as any).clientSettings.gradientWindowHeader != null
+					? (this as any).clientSettings.gradientWindowHeader
 					: false
 				: false;
 		}
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index c9820f8697..91d1a9c2bf 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -94,8 +94,8 @@ export default Vue.extend({
 		},
 		withGradient(): boolean {
 			return (this as any).os.isSignedIn
-				? (this as any).os.i.clientSettings.gradientWindowHeader != null
-					? (this as any).os.i.clientSettings.gradientWindowHeader
+				? (this as any).clientSettings.gradientWindowHeader != null
+					? (this as any).clientSettings.gradientWindowHeader
 					: false
 				: false;
 		}
diff --git a/src/client/app/desktop/views/pages/user-list.users.vue b/src/client/app/desktop/views/pages/user-list.users.vue
index 63070ed609..4236cdbb14 100644
--- a/src/client/app/desktop/views/pages/user-list.users.vue
+++ b/src/client/app/desktop/views/pages/user-list.users.vue
@@ -8,9 +8,7 @@
 			<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>
+					<mk-avatar class="avatar" :user="_user"/>
 					<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>
@@ -80,18 +78,13 @@ root(isDark)
 			display block
 			clear both
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			margin 0 12px 0 0
-
-			> .avatar
-				display block
-				width 42px
-				height 42px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
+			width 42px
+			height 42px
+			border-radius 8px
 
 		> .body
 			float left
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 161b08d1de..4af0f0bca6 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -4,9 +4,7 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
 	<template v-if="!fetching && users.length != 0">
 		<div class="user" v-for="friend in users">
-			<router-link class="avatar-anchor" :to="friend | userPage">
-				<img class="avatar" :src="`${friend.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
-			</router-link>
+			<mk-avatar class="avatar" :user="friend"/>
 			<div class="body">
 				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id">{{ friend.name }}</router-link>
 				<p class="username">@{{ friend | acct }}</p>
@@ -82,18 +80,13 @@ export default Vue.extend({
 			display block
 			clear both
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			margin 0 12px 0 0
-
-			> .avatar
-				display block
-				width 42px
-				height 42px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
+			width 42px
+			height 42px
+			border-radius 8px
 
 		> .body
 			float left
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 99fe0b18d0..629f6d87cf 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -7,7 +7,7 @@
 		<div class="fade"></div>
 	</div>
 	<div class="container">
-		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 		<div class="title">
 			<p class="name">{{ user | userName }}</p>
 			<p class="username">@{{ user | acct }}</p>
@@ -139,7 +139,6 @@ export default Vue.extend({
 			z-index 2
 			width 160px
 			height 160px
-			margin 0
 			border solid 3px #fff
 			border-radius 8px
 			box-shadow 1px 1px 3px rgba(#000, 0.2)
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 223be8301b..3d6765c97e 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -8,9 +8,7 @@
 					<p>ようこそ！ <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
 					<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
 					<div class="users">
-						<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="user | userPage" v-user-preview="user.id">
-							<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-						</router-link>
+						<mk-avatar class="avatar" :key="user.id" :user="user"/>
 					</div>
 				</div>
 				<div>
diff --git a/src/client/app/desktop/views/widgets/activity.vue b/src/client/app/desktop/views/widgets/activity.vue
index 0bdf4622af..1be87f590c 100644
--- a/src/client/app/desktop/views/widgets/activity.vue
+++ b/src/client/app/desktop/views/widgets/activity.vue
@@ -22,9 +22,11 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		},
 		viewChanged(view) {
 			this.props.view = view;
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/widgets/channel.vue b/src/client/app/desktop/views/widgets/channel.vue
index 600cdd5318..d21aed40fd 100644
--- a/src/client/app/desktop/views/widgets/channel.vue
+++ b/src/client/app/desktop/views/widgets/channel.vue
@@ -37,6 +37,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		},
 		settings() {
 			const id = window.prompt('チャンネルID');
diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue
index b71db3e087..791d2ff1bb 100644
--- a/src/client/app/desktop/views/widgets/messaging.vue
+++ b/src/client/app/desktop/views/widgets/messaging.vue
@@ -35,6 +35,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/widgets/notifications.vue b/src/client/app/desktop/views/widgets/notifications.vue
index 091b0d8b98..f75a091480 100644
--- a/src/client/app/desktop/views/widgets/notifications.vue
+++ b/src/client/app/desktop/views/widgets/notifications.vue
@@ -23,6 +23,7 @@ export default define({
 		},
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index 852bf2e3a1..36fcc20636 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -39,6 +39,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		},
 		fetch() {
 			this.fetching = true;
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index 9c2d60f9b9..69b21ad37a 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -29,6 +29,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		},
 		onKeydown(e) {
 			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 7958b4829a..48e7747b40 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -36,6 +36,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/widgets/timemachine.vue b/src/client/app/desktop/views/widgets/timemachine.vue
index 6db3b14c62..22a4120403 100644
--- a/src/client/app/desktop/views/widgets/timemachine.vue
+++ b/src/client/app/desktop/views/widgets/timemachine.vue
@@ -22,6 +22,7 @@ export default define({
 			} else {
 				this.props.design++;
 			}
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index 08fa7f8027..c33bf2f2f2 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -38,6 +38,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		},
 		fetch() {
 			this.fetching = true;
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 6e326115b0..328fa56697 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -8,9 +8,7 @@
 			<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>
+					<mk-avatar class="avatar" :user="_user"/>
 					<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>
@@ -48,6 +46,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		},
 		fetch() {
 			this.fetching = true;
@@ -88,18 +87,13 @@ root(isDark)
 				display block
 				clear both
 
-			> .avatar-anchor
+			> .avatar
 				display block
 				float left
 				margin 0 12px 0 0
-
-				> .avatar
-					display block
-					width 42px
-					height 42px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
+				width 42px
+				height 42px
+				border-radius 8px
 
 			> .body
 				float left
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 26f5328d7d..6f7ce02607 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -3,7 +3,7 @@
  */
 
 import Vue from 'vue';
-import Vuex from 'vuex';
+import Vuex, { mapState } from 'vuex';
 import VueRouter from 'vue-router';
 import VModal from 'vue-js-modal';
 import * as TreeView from 'vue-json-tree-view';
@@ -41,17 +41,6 @@ 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) {
@@ -159,20 +148,15 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 						api: os.api,
 						apis: os.apis
 					};
-				}
+				},
+				computed: mapState({
+					clientSettings: state => state.settings.data
+				})
 			});
 
 			const app = new Vue({
-				store,
+				store: os.store,
 				router,
-				created() {
-					this.$watch('os.i', i => {
-						// キャッシュ更新
-						localStorage.setItem('me', JSON.stringify(i));
-					}, {
-						deep: true
-					});
-				},
 				render: createEl => createEl(App)
 			});
 
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
index 683b5ffd1b..34ff06db30 100644
--- a/src/client/app/mobile/views/components/note-detail.sub.vue
+++ b/src/client/app/mobile/views/components/note-detail.sub.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="root sub">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
@@ -43,18 +41,13 @@ root(isDark)
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 12px 0 0
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 48px
+		height 48px
+		border-radius 8px
 
 	> .main
 		float left
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 36c3f30c62..b9bd9fe495 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -17,17 +17,12 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>がRenote
+			<mk-avatar class="avatar" :user="note.user"/>%fa:retweet%<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>がRenote
 		</p>
 	</div>
 	<article>
 		<header>
-			<router-link class="avatar-anchor" :to="p.user | userPage">
-				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
+			<mk-avatar class="avatar" :user="p.user"/>
 			<div>
 				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
 				<span class="username">@{{ p.user | acct }}</span>
@@ -152,7 +147,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
@@ -262,17 +257,12 @@ root(isDark)
 			margin 0
 			padding 16px 32px
 
-			.avatar-anchor
+			.avatar
 				display inline-block
-
-				.avatar
-					vertical-align bottom
-					min-width 28px
-					min-height 28px
-					max-width 28px
-					max-height 28px
-					margin 0 8px 0 0
-					border-radius 6px
+				width 28px
+				height 28px
+				margin 0 8px 0 0
+				border-radius 6px
 
 			[data-fa]
 				margin-right 4px
@@ -301,21 +291,16 @@ root(isDark)
 			display flex
 			line-height 1.1em
 
-			> .avatar-anchor
+			> .avatar
 				display block
-				padding 0 12px 0 0
+				margin 0 12px 0 0
+				width 54px
+				height 54px
+				border-radius 8px
 
-				> .avatar
-					display block
-					width 54px
-					height 54px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
-
-					@media (min-width 500px)
-						width 60px
-						height 60px
+				@media (min-width 500px)
+					width 60px
+					height 60px
 
 			> div
 
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 41244cc759..e9fe9b1bdd 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="mk-note-preview">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
@@ -37,18 +35,13 @@ root(isDark)
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 12px 0 0
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
+		width 48px
+		height 48px
+		border-radius 8px
 
 	> .main
 		float left
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 01f02bdb56..251b377fb2 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="sub">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
@@ -49,25 +47,18 @@ root(isDark)
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 10px 0 0
+		width 44px
+		height 44px
+		border-radius 8px
 
 		@media (min-width 500px)
 			margin-right 16px
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-			@media (min-width 500px)
-				width 52px
-				height 52px
+			width 52px
+			height 52px
 
 	> .main
 		float left
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 07e18544dd..f3aab49bb0 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -1,12 +1,10 @@
 <template>
 <div class="note" :class="{ renote: isRenote }">
-	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || os.i.clientSettings.showReplyTarget)">
+	<div class="reply-to" v-if="p.reply && (!os.isSignedIn || clientSettings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
-		<router-link class="avatar-anchor" :to="note.user | userPage">
-			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="note.user"/>
 		%fa:retweet%
 		<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
 		<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
@@ -14,9 +12,7 @@
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="p.user"/>
 		<div class="main">
 			<header>
 				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
@@ -154,7 +150,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
@@ -268,15 +264,12 @@ root(isDark)
 		@media (min-width 600px)
 			padding 16px 32px
 
-		.avatar-anchor
+		.avatar
 			display inline-block
-
-			.avatar
-				vertical-align bottom
-				width 28px
-				height 28px
-				margin 0 8px 0 0
-				border-radius 6px
+			width 28px
+			height 28px
+			margin 0 8px 0 0
+			border-radius 6px
 
 		[data-fa]
 			margin-right 4px
@@ -314,29 +307,22 @@ root(isDark)
 			display block
 			clear both
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
 			margin 0 10px 8px 0
+			width 48px
+			height 48px
+			border-radius 6px
 			//position -webkit-sticky
 			//position sticky
 			//top 62px
 
 			@media (min-width 500px)
 				margin-right 16px
-
-			> .avatar
-				display block
-				width 48px
-				height 48px
-				margin 0
-				border-radius 6px
-				vertical-align bottom
-
-				@media (min-width 500px)
-					width 58px
-					height 58px
-					border-radius 8px
+				width 58px
+				height 58px
+				border-radius 8px
 
 		> .main
 			float left
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index e12dc1d040..9461fe6fe9 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -116,13 +116,13 @@ export default Vue.extend({
 			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 ((this as any).clientSettings.showMyRenotes === false) {
 				if (isMyNote && isPureRenote) {
 					return;
 				}
 			}
 
-			if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
+			if ((this as any).clientSettings.showRenotedMyNotes === false) {
 				if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
 					return;
 				}
@@ -187,7 +187,7 @@ export default Vue.extend({
 				this.clearNotification();
 			}
 
-			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
+			if ((this as any).clientSettings.fetchOnScroll !== false) {
 				const current = window.scrollY + window.innerHeight;
 				if (current > document.body.offsetHeight - 8) this.loadMore();
 			}
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index a4e6b027ed..13ca95075c 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -1,9 +1,7 @@
 <template>
 <div class="mk-notification">
 	<div class="notification reaction" v-if="notification.type == 'reaction'">
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
 				<mk-reaction-icon :reaction="notification.reaction"/>
@@ -18,9 +16,7 @@
 	</div>
 
 	<div class="notification renote" v-if="notification.type == 'renote'">
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
 				%fa:retweet%
@@ -34,9 +30,7 @@
 	</div>
 
 	<div class="notification follow" v-if="notification.type == 'follow'">
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
 				%fa:user-plus%
@@ -47,9 +41,7 @@
 	</div>
 
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
-		<router-link class="avatar-anchor" :to="notification.user | userPage">
-			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-		</router-link>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
 				%fa:chart-pie%
@@ -111,18 +103,16 @@ root(isDark)
 			display block
 			clear both
 
-		> .avatar-anchor
+		> .avatar
 			display block
 			float left
+			width 36px
+			height 36px
+			border-radius 6px
 
-			img
-				width 36px
-				height 36px
-				border-radius 6px
-
-				@media (min-width 500px)
-					width 42px
-					height 42px
+			@media (min-width 500px)
+				width 42px
+				height 42px
 
 		> div
 			float right
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index ec16119797..3f890223a3 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -166,7 +166,7 @@ export default Vue.extend({
 
 		post() {
 			this.posting = true;
-			const viaMobile = (this as any).os.i.clientSettings.disableViaMobile !== true;
+			const viaMobile = (this as any).clientSettings.disableViaMobile !== true;
 			(this as any).api('notes/create', {
 				text: this.text == '' ? undefined : this.text,
 				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
diff --git a/src/client/app/mobile/views/components/user-list-timeline.vue b/src/client/app/mobile/views/components/user-list-timeline.vue
index ee983a969c..ccdf8f64d2 100644
--- a/src/client/app/mobile/views/components/user-list-timeline.vue
+++ b/src/client/app/mobile/views/components/user-list-timeline.vue
@@ -46,8 +46,8 @@ export default Vue.extend({
 				(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
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -66,8 +66,8 @@ export default Vue.extend({
 				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
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
index 23a83b5e3a..d258360911 100644
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ b/src/client/app/mobile/views/components/user-preview.vue
@@ -1,8 +1,6 @@
 <template>
 <div class="mk-user-preview">
-	<router-link class="avatar-anchor" :to="user | userPage">
-		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
+	<mk-avatar class="avatar" :user="user"/>
 	<div class="main">
 		<header>
 			<router-link class="name" :to="user | userPage">{{ user | userName }}</router-link>
@@ -40,26 +38,19 @@ export default Vue.extend({
 		display block
 		clear both
 
-	> .avatar-anchor
+	> .avatar
 		display block
 		float left
 		margin 0 10px 0 0
+		width 48px
+		height 48px
+		border-radius 6px
 
 		@media (min-width 500px)
 			margin-right 16px
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 6px
-			vertical-align bottom
-
-			@media (min-width 500px)
-				width 58px
-				height 58px
-				border-radius 8px
+			width 58px
+			height 58px
+			border-radius 8px
 
 	> .main
 		float left
diff --git a/src/client/app/mobile/views/pages/dashboard.vue b/src/client/app/mobile/views/pages/dashboard.vue
index 53fe33ee8f..a5ca6cb4a2 100644
--- a/src/client/app/mobile/views/pages/dashboard.vue
+++ b/src/client/app/mobile/views/pages/dashboard.vue
@@ -64,8 +64,8 @@ export default Vue.extend({
 		};
 	},
 	created() {
-		if ((this as any).os.i.clientSettings.mobileHome == null) {
-			Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
+		if ((this as any).clientSettings.mobileHome == null) {
+			Vue.set((this as any).clientSettings, 'mobileHome', [{
 				name: 'calendar',
 				id: 'a', data: {}
 			}, {
@@ -87,14 +87,14 @@ export default Vue.extend({
 				name: 'version',
 				id: 'g', data: {}
 			}]);
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+			this.widgets = (this as any).clientSettings.mobileHome;
 			this.saveHome();
 		} else {
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+			this.widgets = (this as any).clientSettings.mobileHome;
 		}
 
-		this.$watch('os.i.clientSettings', i => {
-			this.widgets = (this as any).os.i.clientSettings.mobileHome;
+		this.$watch('clientSettings', i => {
+			this.widgets = (this as any).clientSettings.mobileHome;
 		}, {
 			deep: true
 		});
@@ -107,15 +107,15 @@ export default Vue.extend({
 	methods: {
 		onHomeUpdated(data) {
 			if (data.home) {
-				(this as any).os.i.clientSettings.mobileHome = data.home;
+				(this as any).clientSettings.mobileHome = data.home;
 				this.widgets = data.home;
 			} else {
-				const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
+				const w = (this as any).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;
+					this.widgets = (this as any).clientSettings.mobileHome;
 				}
 			}
 		},
@@ -144,7 +144,7 @@ export default Vue.extend({
 			this.saveHome();
 		},
 		saveHome() {
-			(this as any).os.i.clientSettings.mobileHome = this.widgets;
+			(this as any).clientSettings.mobileHome = this.widgets;
 			(this as any).api('i/update_mobile_home', {
 				home: this.widgets
 			});
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index 5f4bd6dcd8..4c1c344db1 100644
--- a/src/client/app/mobile/views/pages/home.timeline.vue
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -92,8 +92,8 @@ export default Vue.extend({
 				(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
+					includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+					includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -114,8 +114,8 @@ export default Vue.extend({
 			(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
+				includeMyRenotes: (this as any).clientSettings.showMyRenotes,
+				includeRenotedMyNotes: (this as any).clientSettings.showRenotedMyNotes
 			}).then(notes => {
 				if (notes.length == fetchLimit + 1) {
 					notes.pop();
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 485996870e..4d236d7aa5 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -22,9 +22,7 @@
 			<mk-welcome-timeline/>
 		</div>
 		<div class="users">
-			<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${user.username}`">
-				<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
+			<mk-avatar class="avatar" :key="user.id" :user="user"/>
 		</div>
 		<footer>
 			<small>{{ copyright }}</small>
diff --git a/src/client/app/mobile/views/widgets/activity.vue b/src/client/app/mobile/views/widgets/activity.vue
index 48dcafb3ed..7763be41f5 100644
--- a/src/client/app/mobile/views/widgets/activity.vue
+++ b/src/client/app/mobile/views/widgets/activity.vue
@@ -21,6 +21,7 @@ export default define({
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
+			this.save();
 		}
 	}
 });
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
new file mode 100644
index 0000000000..706fd65558
--- /dev/null
+++ b/src/client/app/store.ts
@@ -0,0 +1,90 @@
+import Vuex from 'vuex';
+import MiOS from './common/mios';
+
+const defaultSettings = {
+	home: [],
+	fetchOnScroll: true,
+	showMaps: true,
+	showPostFormOnTopOfTl: false,
+	circleIcons: true,
+	gradientWindowHeader: false,
+	showReplyTarget: true,
+	showMyRenotes: true,
+	showRenotedMyNotes: true
+};
+
+export default (os: MiOS) => new Vuex.Store({
+	plugins: [store => {
+		store.subscribe((mutation, state) => {
+			if (mutation.type.startsWith('settings/')) {
+				localStorage.setItem('settings', JSON.stringify(state.settings.data));
+			}
+		});
+	}],
+
+	state: {
+		uiHeaderHeight: 0
+	},
+
+	mutations: {
+		setUiHeaderHeight(state, height) {
+			state.uiHeaderHeight = height;
+		}
+	},
+
+	modules: {
+		settings: {
+			namespaced: true,
+
+			state: {
+				data: defaultSettings
+			},
+
+			mutations: {
+				init(state, settings) {
+					state.data = settings;
+				},
+
+				set(state, x: { key: string; value: any }) {
+					state.data[x.key] = x.value;
+				},
+
+				setHome(state, data) {
+					state.data.home = data;
+				},
+
+				setHomeWidget(state, x) {
+					const w = state.data.home.find(w => w.id == x.id);
+					if (w) {
+						w.data = x.data;
+					}
+				},
+
+				addHomeWidget(state, widget) {
+					state.data.home.unshift(widget);
+				}
+			},
+
+			actions: {
+				set(ctx, x) {
+					ctx.commit('set', x);
+
+					if (os.isSignedIn) {
+						os.api('i/update_client_setting', {
+							name: x.key,
+							value: x.value
+						});
+					}
+				},
+
+				addHomeWidget(ctx, widget) {
+					ctx.commit('addHomeWidget', widget);
+
+					os.api('i/update_home', {
+						home: ctx.state.data.home
+					});
+				}
+			}
+		}
+	}
+});
diff --git a/src/server/api/endpoints/i/update_client_setting.ts b/src/server/api/endpoints/i/update_client_setting.ts
index 2edc2104d2..278eb1cbeb 100644
--- a/src/server/api/endpoints/i/update_client_setting.ts
+++ b/src/server/api/endpoints/i/update_client_setting.ts
@@ -24,16 +24,11 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 		$set: x
 	});
 
-	// Serialize
-	user.clientSettings[name] = value;
-	const iObj = await pack(user, user, {
-		detail: true,
-		includeSecrets: true
-	});
-
-	// Send response
-	res(iObj);
+	res();
 
-	// Publish i updated event
-	event(user._id, 'i_updated', iObj);
+	// Publish event
+	event(user._id, 'clientSettingUpdated', {
+		key: name,
+		value
+	});
 });
diff --git a/src/server/index.ts b/src/server/index.ts
index 594f40c22f..4c5aab9a22 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -26,9 +26,9 @@ if (process.env.NODE_ENV != 'production') {
 	app.use(logger());
 
 	// Delay
-	app.use(slow({
-		delay: 1000
-	}));
+	//app.use(slow({
+	//	delay: 1000
+	//}));
 }
 
 // Compress response
-- 
cgit v1.2.3-freya


From 665afccb450dff067180b3336fe8f10eeaf9e2f8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 17:22:45 +0900
Subject: :v:

---
 src/client/app/desktop/views/components/ui.header.account.vue | 2 +-
 src/client/app/desktop/views/widgets/profile.vue              | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 897d3de816..fd15ea6006 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -22,7 +22,7 @@
 			</ul>
 			<ul>
 				<li>
-					<a href="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</a>
+					<router-link to="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</router-link>
 				</li>
 				<li @click="settings">
 					<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 48e7747b40..3b01ed034d 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -8,12 +8,9 @@
 		title="クリックでバナー編集"
 		@click="os.apis.updateBanner"
 	></div>
-	<img class="avatar"
-		:src="`${os.i.avatarUrl}?thumbnail&size=96`"
+	<mk-avatar class="avatar" :user="os.i"
 		@click="os.apis.updateAvatar"
-		alt="avatar"
 		title="クリックでアバター編集"
-		v-user-preview="os.i.id"
 	/>
 	<router-link class="name" :to="os.i | userPage">{{ os.i | userName }}</router-link>
 	<p class="username">@{{ os.i | acct }}</p>
@@ -104,10 +101,8 @@ root(isDark)
 		left 16px
 		width 58px
 		height 58px
-		margin 0
 		border solid 3px isDark ? #282c37 : #fff
 		border-radius 8px
-		vertical-align bottom
 		cursor pointer
 
 	> .name
-- 
cgit v1.2.3-freya


From a8083eb52bc268829caa2d5453dec5d9a3c5185f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 17:54:50 +0900
Subject: バグ修正など
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/mios.ts                        |  8 +++-----
 src/client/app/desktop/views/components/settings.vue |  2 +-
 src/client/app/desktop/views/pages/welcome.vue       | 12 ++++--------
 src/client/app/mobile/views/pages/welcome.vue        | 12 ++++--------
 src/client/app/store.ts                              | 10 ++++++----
 src/server/api/stream/home.ts                        |  5 +++--
 6 files changed, 21 insertions(+), 28 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index 7dcae47946..3973e4ae8c 100644
--- a/src/client/app/common/mios.ts
+++ b/src/client/app/common/mios.ts
@@ -332,7 +332,7 @@ export default class MiOS extends EventEmitter {
 		const cachedSettings = JSON.parse(localStorage.getItem('settings'));
 
 		if (cachedSettings) {
-			this.store.commit('settings/init', cachedSettings);
+			this.store.dispatch('settings/merge', cachedSettings);
 		}
 		//#endregion
 
@@ -350,7 +350,7 @@ export default class MiOS extends EventEmitter {
 			fetchme(cachedMe.token, freshData => {
 				merge(cachedMe, freshData);
 
-				this.store.commit('settings/init', freshData.clientSettings);
+				this.store.dispatch('settings/merge', freshData.clientSettings);
 			});
 		} else {
 			// Get token from cookie
@@ -358,9 +358,7 @@ export default class MiOS extends EventEmitter {
 
 			fetchme(i, me => {
 				if (me) {
-					Object.entries(me.clientSettings).forEach(([key, value]) => {
-						this.store.commit('settings/set', { key, value });
-					});
+					this.store.dispatch('settings/merge', me.clientSettings);
 
 					fetched(me);
 				} else {
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index af6ab12669..77606d4254 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -41,7 +41,7 @@
 			</div>
 			<div class="div">
 				<mk-switch v-model="darkmode" text="ダークモード"/>
-				<mk-switch v-model="clientSettings.circleIcons" @change="onChangeCircleIcons" text="丸いアイコンを使用"/>
+				<mk-switch v-model="clientSettings.circleIcons" @change="onChangeCircleIcons" text="円形のアイコンを使用"/>
 				<mk-switch v-model="clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
 			</div>
 			<mk-switch v-model="clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 3d6765c97e..898b6b2179 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -8,7 +8,7 @@
 					<p>ようこそ！ <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
 					<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
 					<div class="users">
-						<mk-avatar class="avatar" :key="user.id" :user="user"/>
+						<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
 					</div>
 				</div>
 				<div>
@@ -215,13 +215,9 @@ export default Vue.extend({
 						> *
 							display inline-block
 							margin 4px
-
-							> *
-								display inline-block
-								width 38px
-								height 38px
-								vertical-align top
-								border-radius 6px
+							width 38px
+							height 38px
+							border-radius 6px
 
 				> div:last-child
 
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 4d236d7aa5..64cfa5a46c 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -22,7 +22,7 @@
 			<mk-welcome-timeline/>
 		</div>
 		<div class="users">
-			<mk-avatar class="avatar" :key="user.id" :user="user"/>
+			<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
 		</div>
 		<footer>
 			<small>{{ copyright }}</small>
@@ -183,13 +183,9 @@ export default Vue.extend({
 			> *
 				display inline-block
 				margin 4px
-
-				> *
-					display inline-block
-					width 38px
-					height 38px
-					vertical-align top
-					border-radius 6px
+				width 38px
+				height 38px
+				border-radius 6px
 
 		> footer
 			text-align center
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 706fd65558..a2ae1632df 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -41,10 +41,6 @@ export default (os: MiOS) => new Vuex.Store({
 			},
 
 			mutations: {
-				init(state, settings) {
-					state.data = settings;
-				},
-
 				set(state, x: { key: string; value: any }) {
 					state.data[x.key] = x.value;
 				},
@@ -66,6 +62,12 @@ export default (os: MiOS) => new Vuex.Store({
 			},
 
 			actions: {
+				merge(ctx, settings) {
+					Object.entries(settings).forEach(([key, value]) => {
+						ctx.commit('set', { key, value });
+					});
+				},
+
 				set(ctx, x) {
 					ctx.commit('set', x);
 
diff --git a/src/server/api/stream/home.ts b/src/server/api/stream/home.ts
index f629278848..54fde2d776 100644
--- a/src/server/api/stream/home.ts
+++ b/src/server/api/stream/home.ts
@@ -70,12 +70,13 @@ export default async function(
 		}
 	});
 
-	connection.on('message', data => {
+	connection.on('message', async data => {
 		const msg = JSON.parse(data.utf8Data);
 
 		switch (msg.type) {
 			case 'api':
-				call(msg.endpoint, user, app, msg.data).then(res => {
+				// 新鮮なデータを利用するためにユーザーをフェッチ
+				call(msg.endpoint, await User.findOne({ _id: user._id }), app, msg.data).then(res => {
 					connection.send(JSON.stringify({
 						type: `api-res:${msg.id}`,
 						body: { res }
-- 
cgit v1.2.3-freya


From ed130ca82cd66c974f8a561ca3a873bfc4451829 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 18:16:02 +0900
Subject: Fix bug

---
 src/client/app/desktop/views/components/window.vue |  9 +--------
 src/client/app/init.ts                             | 10 ++++------
 2 files changed, 5 insertions(+), 14 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 91d1a9c2bf..2e7eb557b4 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -4,7 +4,7 @@
 	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
 		<div class="body">
 			<header ref="header"
-				:class="{ withGradient }"
+				:class="{ withGradient: clientSettings.gradientWindowHeader }"
 				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
 			>
 				<h1><slot name="header"></slot></h1>
@@ -91,13 +91,6 @@ export default Vue.extend({
 		},
 		canResize(): boolean {
 			return !this.isFlexible;
-		},
-		withGradient(): boolean {
-			return (this as any).os.isSignedIn
-				? (this as any).clientSettings.gradientWindowHeader != null
-					? (this as any).clientSettings.gradientWindowHeader
-					: false
-				: false;
 		}
 	},
 
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 6f7ce02607..d53e685982 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -3,7 +3,7 @@
  */
 
 import Vue from 'vue';
-import Vuex, { mapState } from 'vuex';
+import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import VModal from 'vue-js-modal';
 import * as TreeView from 'vue-json-tree-view';
@@ -146,12 +146,10 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 					return {
 						os,
 						api: os.api,
-						apis: os.apis
+						apis: os.apis,
+						clientSettings: os.store.state.settings.data
 					};
-				},
-				computed: mapState({
-					clientSettings: state => state.settings.data
-				})
+				}
 			});
 
 			const app = new Vue({
-- 
cgit v1.2.3-freya


From ea9265b30b563e19fdee8bdfd13b870c3bf077d2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Apr 2018 21:28:45 +0900
Subject: Fix bug

---
 src/client/app/desktop/views/components/ui.header.vue | 5 +++--
 src/client/app/mobile/views/components/ui.header.vue  | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 353fd58561..7729575b56 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -46,9 +46,10 @@ export default Vue.extend({
 		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 ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000;
 			const isHisasiburi = ago >= 3600;
 			(this as any).os.i.lastUsedAt = new Date();
+			(this as any).os.bakeMe();
 			if (isHisasiburi) {
 				(this.$refs.welcomeback as any).style.display = 'block';
 				(this.$refs.main as any).style.overflow = 'hidden';
@@ -132,7 +133,7 @@ root(isDark)
 				line-height 48px
 				margin 0
 				text-align center
-				color #888
+				color isDark ? #fff : #888
 				opacity 0
 
 			> .container
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 1e6c7b0856..509463333d 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -59,9 +59,10 @@ export default Vue.extend({
 				}
 			});
 
-			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
+			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000;
 			const isHisasiburi = ago >= 3600;
 			(this as any).os.i.lastUsedAt = new Date();
+			(this as any).os.bakeMe();
 			if (isHisasiburi) {
 				(this.$refs.welcomeback as any).style.display = 'block';
 				(this.$refs.main as any).style.overflow = 'hidden';
-- 
cgit v1.2.3-freya


From 0bc7d28f589d0fe871109cc980253743c3f8ee81 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 30 Apr 2018 11:59:58 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/home.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 5337be61fd..cae6233cd8 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -250,7 +250,7 @@ root(isDark)
 		> div
 			display flex
 			margin 0 auto
-			max-width 1200px - 32px
+			max-width 1220px - 32px
 
 			> div
 				width 50%
@@ -281,7 +281,7 @@ root(isDark)
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1200px
+		max-width 1220px
 
 		> *
 			.customize-container
-- 
cgit v1.2.3-freya


From 8d53f8639e3df1ee2354f068b80b8f3b36965084 Mon Sep 17 00:00:00 2001
From: Marcin Mikołajczak <me@m4sk.in>
Date: Fri, 4 May 2018 00:28:07 +0200
Subject: i18n: Add Polish translation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Marcin Mikołajczak <me@m4sk.in>
---
 locales/index.ts                                   |   3 +-
 locales/pl.yml                                     | 628 +++++++++++++++++++++
 .../app/desktop/views/components/settings.vue      |   1 +
 3 files changed, 631 insertions(+), 1 deletion(-)
 create mode 100644 locales/pl.yml

(limited to 'src/client/app/desktop/views/components')

diff --git a/locales/index.ts b/locales/index.ts
index 6e76f39179..926844766d 100644
--- a/locales/index.ts
+++ b/locales/index.ts
@@ -13,7 +13,8 @@ const native = loadLang('ja');
 const langs = {
 	'en': loadLang('en'),
 	'fr': loadLang('fr'),
-	'ja': native
+	'ja': native,
+ 'pl': loadLang('pl')
 };
 
 Object.entries(langs).map(([, locale]) => {
diff --git a/locales/pl.yml b/locales/pl.yml
new file mode 100644
index 0000000000..237ed4f4ed
--- /dev/null
+++ b/locales/pl.yml
@@ -0,0 +1,628 @@
+common:
+  misskey: "Dziel się zawartością z innymi korzystając z Misskey."
+
+  time:
+    unknown: "nieznany"
+    future: "w przyszłości"
+    just_now: "teraz"
+    seconds_ago: "{} sek. temu"
+    minutes_ago: "{} min. temu"
+    hours_ago: "{} godz. temu"
+    days_ago: "{} dni temu"
+    weeks_ago: "{} tyg. temu"
+    months_ago: "{} mies. temu"
+    years_ago: "{} lat temu"
+
+  weekday-short:
+    sunday: "N"
+    monday: "Pn"
+    tuesday: "W"
+    wednesday: "Ś"
+    thursday: "C"
+    friday: "P"
+    satruday: "S"
+
+  reactions:
+    like: "Lubię"
+    love: "Kocham"
+    laugh: "Śmieszne"
+    hmm: "Hmm…?"
+    surprise: "Wow"
+    congrats: "Gratuluję!"
+    angry: "Wściekły"
+    confused: "Zmieszany"
+    pudding: "Pudding"
+
+  delete: "Usuń"
+  loading: "Ładowanie"
+  ok: "OK"
+  update-available: "Nowa wersja Misskey jest dostępna ({newer}, obecna to {current}). Odśwież stronę, aby zastosować aktualizację."
+  my-token-regenerated: "Twój token został wygenerowany. Zostaniesz wylogowany."
+
+common/views/components/connect-failed.vue:
+  title: "Nie udało się połączyć z serwerem"
+  description: "Wystąpił problem z Twoim połączeniem z Internetem, lub z serwerem. {Spróbuj ponownie} wkrótce."
+  thanks: "Dziękujemy za korzystanie z Misskey."
+  troubleshoot: "Rozwiązywanie problemów"
+
+common/views/components/connect-failed.troubleshooter.vue:
+  title: "Rozwiązywanie problemów"
+  network: "Połączenie z siecią"
+  checking-network: "Sprawdzanie połączenia sieciowego"
+  internet: "Połączenie z Internetem"
+  checking-internet: "Sprawdzanie połączenia z Internetem"
+  server: "Połączenie z serwerem"
+  checking-server: "Sprawdzanie połączenia z serwerem"
+  finding: "Wyszukiwanie problemu"
+  no-network: "Brak połączenia z siecią"
+  no-network-desc: "Upewnij się, że jesteś połączony z siecią."
+  no-internet: "Brak połączenia z Internetem"
+  no-internet-desc: "Upewnij się, że jesteś połączony z Internetem."
+  no-server: "Nie udało się połączyć z serwerem"
+  no-server-desc: "Połączenie sieciowe działa, ale nie udało się połączyć z serwerem Misskey. Możliwe że serwer nie działa lub trwają prace konserwacyjne, spróbuj ponownie później."
+  success: "Pomyślnie połączono z serwerem Misskey"
+  success-desc: "Wygląda na to, że udało się połączyć. Odśwież stronę."
+  flush: "Wyczyść pamięć podręczną"
+  set-version: "Określ wersję"
+
+common/views/components/messaging.vue:
+  search-user: "Znajdź użytkownika"
+  you: "Ty"
+  no-history: "Brak historii"
+
+common/views/components/messaging-room.vue:
+  empty: "Brak konwersacji"
+  more: "Więcej"
+  no-history: "Brak dalszej historii"
+  resize-form: "Przeciągnij aby zmienić rozmiar"
+  new-message: "Nowa wiadomość"
+
+common/views/components/messaging-room.form.vue:
+  input-message-here: "Wprowadź wiadomość tutaj"
+  send: "Wyślij"
+  attach-from-local: "Załącz pliki z komputera"
+  attach-from-drive: "Załącz pliki z dysku"
+
+common/views/components/messaging-room.message.vue:
+  is-read: "Przeczytano"
+  deleted: "Wiadomość została usunięta"
+
+common/views/components/nav.vue:
+  about: "O stronie"
+  stats: "Statystyki"
+  status: "Stan"
+  wiki: "Wiki"
+  donors: "Sponsorzy"
+  repository: "Repozytorium"
+  develop: "Autorzy"
+  feedback: "Opinie"
+
+common/views/components/note-menu.vue:
+  favorite: "Dodaj do ulubionych"
+  pin: "Przypnij do profilu"
+
+common/views/components/poll.vue:
+  vote-to: "Zagłosuj na '{}'"
+  vote-count: "{} głosów"
+  total-users: "{} głosujących"
+  vote: "Zagłosuj"
+  show-result: "Pokaż wyniki"
+  voted: "Zagłosowano"
+
+common/views/components/poll-editor.vue:
+  no-only-one-choice: "Musisz wprowadzić dwie lub więcej opcji."
+  choice-n: "Opcja {}"
+  remove: "Usuń tą opcję"
+  add: "+ Dodaj opcję"
+  destroy: "Usuń ankietę"
+
+common/views/components/reaction-picker.vue:
+  choose-reaction: "Wybierz reakcję"
+
+common/views/components/signin.vue:
+  username: "Nazwa użytkownika"
+  password: "Hasło"
+  token: "Token"
+  signing-in: "Logowanie…"
+  signin: "Zaloguj"
+
+common/views/components/signup.vue:
+  username: "Nazwa użytkownika"
+  checking: "Sprawdzanie…"
+  available: "Dostępna"
+  unavailable: "Niedostępna"
+  error: "Błąd sieci"
+  invalid-format: "Może zawierać litery, cyfry i myślniki."
+  too-short: "Wprowadź przynajmniej jeden znak"
+  too-long: "Nazwa nie może zawierać więcej niż 20 znaków"
+  password: "Hasło"
+  password-placeholder: "Zalecamy korzystanie z hasła zawierającego przynajmniej 8 znaków."
+  weak-password: "Słabe"
+  normal-password: "Średnie"
+  strong-password: "Silne"
+  retype: "Powtórz hasło"
+  retype-placeholder: "Potwierdź hasło"
+  password-matched: "OK"
+  password-not-matched: "Hasła nie zgadzają się"
+  recaptcha: "Weryfikacja"
+  create: "Utwórz konto"
+  some-error: "Nie udało się utworzyć konta. Spróbuj ponownie."
+
+common/views/components/special-message.vue:
+  new-year: "Szczęśliwego nowego roku!"
+  christmas: "Wesołych świąt!"
+
+common/views/components/stream-indicator.vue:
+  connecting: "Łączenie"
+  reconnecting: "Ponowne łączenie"
+  connected: "Połączono"
+
+common/views/components/twitter-setting.vue:
+  description: "Jeżeli połączysz konto Twittera z kontem Misskey, informacje z Twittera będą widoczne na Twoim profilu i będziesz mógł logować się z użyciem Twittera."
+  connected-to: "Jesteś połączony z tym kontem Twittera"
+  detail: "Szczegóły…"
+  reconnect: "Połącz ponownie"
+  connect: "Połącz z kontem Twittera"
+  disconnect: "Rozłącz"
+
+common/views/components/uploader.vue:
+  waiting: "Oczekiwanie"
+
+common/views/widgets/broadcast.vue:
+  no-broadcasts: "Brak transmisji"
+  have-a-nice-day: "Miłego dnia!"
+  next: "Dalej"
+
+common/views/widgets/donation.vue:
+  title: "Dotacje"
+  text: "Aby utrzymywać Misskey, płacimy za domenę, serwery i nie tylko… Nie zarabiamy na tym, więc byłoby nam miło, gdybyśmy uzyskali od Ciebie dotację. Jeżeli jesteś zainteresowany, skontaktuj się z {}. Dziękujemy za wsparcie!"
+
+common/views/widgets/photo-stream.vue:
+  no-photos: "Brak zdjęć"
+
+common/views/widgets/server.vue:
+  title: "Informacje o serwerze"
+  toggle: "Przełącz widok"
+
+desktop/views/components/activity.vue:
+  title: "Aktywność"
+  toggle: "Przełącz widok"
+
+desktop/views/components/calendar.vue:
+  title: "{1} / {2}"
+  prev: "Poprzedni miesiąc"
+  next: "Następny miesiąc"
+  go: "Naciśnij, aby przejść"
+
+desktop/views/components/drive-window.vue:
+  used: "wykorzystane"
+  drive: "Dysk"
+
+desktop/views/components/drive.file.vue:
+  avatar: "Awatar"
+  banner: "Baner"
+  contextmenu:
+    rename: "Zmień nazwę"
+    copy-url: "Skopiuj adres"
+    download: "Pobierz"
+    else-files: "Inne"
+    set-as-avatar: "Ustaw jako awatar"
+    set-as-banner: "Ustaw jako baner"
+    open-in-app: "Otwórz w aplikacji"
+    add-app: "Dodaj aplikację"
+    rename-file: "Zmień nazwę pliku"
+    input-new-file-name: "Wprowadź nową nazwę"
+    copied: "Skopiowano"
+    copied-url-to-clipboard: "Skopiowano adres do schowka"
+
+desktop/views/components/drive.folder.vue:
+  unable-to-process: "Nie udało się ukończyć działania."
+  circular-reference-detected: "Docelowy katalog znajduje się w katalogu, który chcesz przenieść."
+  unhandled-error: "Nieznany błąd"
+  contextmenu:
+    move-to-this-folder: "Przenieś do tego katalogu"
+    show-in-new-window: "Otwórz w nowym oknie"
+    rename: "Zmień nazwę"
+    rename-folder: "Zmień nazwę katalogu"
+    input-new-folder-name: "Wprowadź nową nazwę"
+
+desktop/views/components/drive.nav-folder.vue:
+  drive: "Dysk"
+
+desktop/views/components/drive.vue:
+  search: "Szukaj"
+  load-more: "Załaduj więcej"
+  empty-drive: "Twój dysk jest posty"
+  empty-drive-description: "Możesz wysłać plik klikając prawym przyciskiem myszy i wybierając \"Wyślij plik\" lub przeciągnąć plik i upuścić w tym oknie."
+  empty-folder: "Ten katalog jest posty"
+  unable-to-process: "Nie udało się dokończyć działania."
+  circular-reference-detected: "Ten katalog znajduje się w katalogu, który chcesz przenieść."
+  unhandled-error: "Nieznany błąd"
+  url-upload: "Wyślij z adresu"
+  url-of-file: "Adres URL pliku, który chcesz wysłać"
+  may-take-time: "Może trochę potrwać, zanim wysyłanie zostanie ukończone."
+  create-folder: "Utwórz katalog"
+  folder-name: "Nazwa katalogu"
+  contextmenu:
+    create-folder: "Utwórz katalog"
+    upload: "Wyślij plik"
+    url-upload: "Wyślij z adresu URL"
+
+desktop/views/components/messaging-window.vue:
+  title: "Wiadomości"
+
+desktop/views/components/notes.note.vue:
+  reposted-by: "Udostępniono przez {}"
+  reply: "Odpowiedz"
+  add-reaction: "Dodaj reakcję"
+  detail: "Pokaż szczegóły"
+
+desktop/views/components/notifications.vue:
+  more: "Więcej"
+  empty: "Brak powiadomień"
+
+desktop/views/components/post-form.vue:
+  note-placeholder: "Co się dzieje?"
+  reply-placeholder: "Odpowiedz na ten wpis…"
+  quote-placeholder: "Zacytuj ten wpis…"
+  note: "Wyślij"
+  reply: "Odpowiedz"
+  posted: "Posted!"
+  replied: "Odpowiedziano!"
+  reposted: "Udostępniono!"
+  note-failed: "Nie udało się wysłać"
+  reply-failed: "Nie udało się odpowiedzieć"
+  posting: "Wysyłanie"
+  attach-media-from-local: "Załącz zawartość multimedialną z komputera"
+  attach-media-from-drive: "Załącz zawartość multimedialną z dysku"
+  attach-cancel: "Usuń załącznik"
+  insert-a-kao: "v(‘ω’)v"
+  create-poll: "Utwórz ankietę"
+  text-remain: "pozostałe znaki: {}"
+
+desktop/views/components/post-form-window.vue:
+  note: "Nowy wpis"
+  reply: "Odpowiedz"
+  attaches: "{} załączników multimedialnych"
+  uploading-media: "Wysyłanie {} treści multimedialnych"
+
+desktop/views/components/renote-form.vue:
+  quote: "Cytuj…"
+  cancel: "Anuluj"
+  reposting: "Udostępnianie…"
+  success: "Udostępniono!"
+
+desktop/views/components/settings.vue:
+  profile: "Profil"
+  notification: "Powiadomienie"
+  apps: "Aplikacje"
+  mute: "Wycisz"
+  drive: "Dysk"
+  security: "Bezpieczeństwo"
+  password: "Hasło"
+  2fa: "Uwierzytelnianie dwuetapowe"
+  other: "Inne"
+  license: "Licencja"
+
+desktop/views/components/settings.2fa.vue:
+  intro: "Jeżeli skonfigurujesz uwierzytelnianie dwuetapowe, aby zablokować się będziesz potrzebować (oprócz hasła) kodu ze skonfigurowanego urządzenia (np. smartfonu), co zwiększy bezpieczeństwo."
+  detail: "Zobacz szczegóły…"
+  url: "https://www.google.com/landing/2step/"
+  caution: "Jeżeli stracisz dostęp do urządzenia, nie będziesz mógł logować się do Misskey!"
+  register: "Zarejestruj urządzenie"
+  already-registered: "Urządzenie jest już zarejestrowane"
+  unregister: "Wyłącz"
+  unregistered: "Wyłączono uwierzytelnianie dwuetapowe."
+  enter-password: "Wprowadź hasło"
+  authenticator: "Na początek musisz zainstalować Google Authenticator na swoim urządzeniu:"
+  howtoinstall: "Jak zainstalować"
+  scan: "Później, zeskanuje ten kod QR:"
+  done: "Wprowadź token wyświetlony na Twoim urządzeniu:"
+  submit: "Wyślij"
+  success: "Pomyślnie ukończono konfigurację!"
+  failed: "Nie udało się skonfigurować uwierzytelniania dwuetapowego, upewnij się że wprowadziłeś prawidłowy token."
+  info: "Od teraz, wprowadzaj token wyświetlany na urządzeniu przy każdym logowaniu do Misskey."
+
+desktop/views/components/settings.api.vue:
+  caution: "Nie pokazuj tego tokenu osobom trzecim (nie wprowadzaj go nigdzie indziej), aby konto nie trafiło w niepowołane ręce."
+  regeneration-of-token: "W przypadku wycieku tokenu, możesz wygenerować nowy."
+  regenerate-token: "Wygeneruj nowy token"
+  enter-password: "Wprowadź hasło"
+
+desktop/views/components/settings.app.vue:
+  no-apps: "Brak zautoryzowanych aplikacji"
+
+desktop/views/components/settings.mute.vue:
+  no-users: "Brak wyciszonych użytkowników"
+
+desktop/views/components/settings.password.vue:
+  reset: "Zmień hasło"
+  enter-current-password: "Wprowadź obecne hasło"
+  enter-new-password: "Wprowadź nowe hasło"
+  enter-new-password-again: "Wprowadź ponownie nowe hasło"
+  not-match: "Nowe hasła nie pasują do siebie"
+  changed: "Pomyślnie zmieniono hasło"
+
+desktop/views/components/settings.profile.vue:
+  avatar: "Awatar"
+  choice-avatar: "Wybierz obraz"
+  name: "Nazwa"
+  location: "Lokalizacja"
+  description: "Opis"
+  birthday: "Data urodzenia"
+  save: "Aktualizuj profil"
+
+desktop/views/components/ui.header.account.vue:
+  profile: "Twój profil"
+  drive: "Dysk"
+  favorites: "Ulubione"
+  lists: "Listy"
+  customize: "Dostosuj"
+  settings: "Ustawienia"
+  signout: "Wyloguj się"
+  dark: "Sprowadź ciemność"
+
+desktop/views/components/ui.header.nav.vue:
+  home: "Strona główna"
+  messaging: "Wiadomości"
+  game: "Gra"
+
+desktop/views/components/ui.header.notifications.vue:
+  title: "Powiadomienia"
+
+desktop/views/components/ui.header.post.vue:
+  post: "Utwórz nowy wpis"
+
+desktop/views/components/ui.header.search.vue:
+  placeholder: "Szukaj"
+
+desktop/views/pages/note.vue:
+  prev: "Poprzedni wpis"
+  next: "Następny wpis"
+
+desktop/views/pages/selectdrive.vue:
+  title: "Wybierz plik(i)"
+  ok: "OK"
+  cancel: "Anuluj"
+  upload: "Wyślij pliki z Twojego komputera"
+
+desktop/views/pages/user/user.followers-you-know.vue:
+  title: "Śledzący których znasz"
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+desktop/views/pages/user/user.friends.vue:
+  title: "Najczęściej odpisujący"
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+desktop/views/pages/user/user.header.vue:
+  is-suspended: "To konto zostało zawieszone."
+  is-remote: "To jest użytkownik zdalnej instancji, informacje mogą nie być w pełni dokładne."
+  view-remote: "Wyświetl dokładne informacje"
+
+desktop/views/pages/user/user.home.vue:
+  last-used-at: "Ostatnio aktywny: "
+
+desktop/views/pages/user/user.photos.vue:
+  title: "Zdjęcia"
+  loading: "Ładowanie"
+  no-photos: "Brak zdjęć"
+
+desktop/views/pages/user/user.profile.vue:
+  follows-you: "Śledzi Cię"
+  stalk: "Stalkuj"
+  stalking: "Stalkujesz"
+  unstalk: "Przestań stalkować"
+  mute: "Wycisz"
+  muted: "Wyciszyłeś"
+  unmute: "Cofnij wyciszenie"
+
+desktop/views/widgets/notifications.vue:
+  title: "Powiadomienia"
+  settings: "Ustawienia"
+
+desktop/views/widgets/polls.vue:
+  title: "Ankiety"
+  refresh: "Pokaż inne"
+  nothing: "Pusto"
+
+desktop/views/widgets/post-form.vue:
+  title: "Wpis"
+  note: "Wpis"
+  placeholder: "Co się dzieje?"
+
+desktop/views/widgets/trends.vue:
+  title: "Na czasie"
+  refresh: "Pokaż inne"
+  nothing: "Pusto"
+
+desktop/views/widgets/users.vue:
+  title: "Polecani użytkownicy"
+  refresh: "Pokaż innych"
+  no-one: "Pusto"
+
+desktop/views/widgets/channel.vue:
+  title: "Kanał"
+  settings: "Ustawienia widżetu"
+
+mobile/views/components/drive.vue:
+  drive: "Dysk"
+  used: "użyto"
+  folder-count: "Katalog(i)"
+  count-separator: ", "
+  file-count: "Plik(i)"
+  load-more: "Załaduj więcej"
+  nothing-in-drive: "Pusto"
+  folder-is-empty: "Ten katalog jest pusty"
+
+mobile/views/components/drive-file-chooser.vue:
+  select-file: "Wybierz plik"
+
+mobile/views/components/drive-folder-chooser.vue:
+  select-folder: "Wybierz katalog"
+
+mobile/views/components/drive.file-detail.vue:
+  download: "Pobierz"
+  rename: "Zmień nazwę"
+  move: "Przenieś"
+  hash: "Hash (md5)"
+  exif: "EXIF"
+
+mobile/views/components/follow-button.vue:
+  follow: "Śledź"
+  unfollow: "Przestań śledzić"
+
+mobile/views/components/note-detail.vue:
+  reply: "Odpowiedz"
+  reaction: "Reakcja"
+
+mobile/views/components/notifications.vue:
+  more: "Więcej"
+  empty: "Brak powiadomień"
+
+mobile/views/components/post-form.vue:
+  submit: "Wyślij"
+  reply-placeholder: "Odpowiedź na ten wpis…"
+  note-placeholder: "Co się dzieje?"
+
+mobile/views/components/sub-note-content.vue:
+  media-count: "{} zawartości multimedialnej"
+  poll: "Ankieta"
+
+mobile/views/components/timeline.vue:
+  empty: "Brak wpisów"
+  load-more: "Więcej"
+
+mobile/views/components/ui.nav.vue:
+  home: "Strona główna"
+  notifications: "Powiadomienia"
+  messaging: "Wiadomości"
+  drive: "Dysk"
+  settings: "Ustawienia"
+  about: "O Misskey"
+  search: "Szukaj"
+
+mobile/views/components/user-timeline.vue:
+  no-notes: "Wygląda na to, że ten użytkownik nie opublikował jeszcze niczego"
+  no-notes-with-media: "Brak wpisów z zawartością multimedialną"
+  load-more: "Więcej"
+
+mobile/views/components/users-list.vue:
+  all: "Wszyscy
+  known: "Znasz"
+  load-more: "Więcej"
+
+mobile/views/pages/drive.vue:
+  drive: "Dysk"
+
+mobile/views/pages/followers.vue:
+  followers-of: "Śledzący {}"
+
+mobile/views/pages/following.vue:
+  following-of: "Śledzeni przez {}"
+
+mobile/views/pages/home.vue:
+  timeline: "Oś czasu"
+
+mobile/views/pages/messaging.vue:
+  messaging: "Wiadomości"
+
+mobile/views/pages/messaging-room.vue:
+  messaging: "Wiadomości"
+
+mobile/views/pages/note.vue:
+  title: "Wyślij"
+  prev: "Poprzedni wpis"
+  next: "Następny wpis"
+
+mobile/views/pages/notifications.vue:
+  notifications: "Powiadomienia"
+  read-all: "Czy na pewno chcesz oznaczyć wszystkie powiadomienia jako przeczytane?"
+
+mobile/views/pages/profile-setting.vue:
+  title: "Ustawienia profilu"
+  will-be-published: "Te ustawienia profilu zostaną zaktualizowane."
+  name: "Nazwa"
+  location: "Lokalizacja"
+  description: "Opis"
+  birthday: "Data urodzenia"
+  avatar: "Awatar"
+  banner: "Baner"
+  avatar-saved: "Pomyślnie zaktualizowano awatar"
+  banner-saved: "Pomyślnie zaktualizowano baner"
+  set-avatar: "Wybierz awatar"
+  set-banner: "Wybierz baner"
+  save: "Zapisz"
+  saved: "Pomyślnie zaktualizowano profil"
+
+mobile/views/pages/search.vue:
+  search: "Szukaj"
+  empty: "Nie znaleziono wpisów zawierających '{}'"
+
+mobile/views/pages/selectdrive.vue:
+  select-file: "Wybierz plik"
+
+mobile/views/pages/settings.vue:
+  signed-in-as: "Zalogowany jako {}"
+  profile: "Profil"
+  twitter-integration: "Integracja z Twitterem"
+  signin-history: "Historia logowań"
+  settings: "Ustawienia"
+  signout: "Wyloguj"
+
+mobile/views/pages/user.vue:
+  follows-you: "Śledzi Cię"
+  following: "Śledzeni"
+  followers: "Śledzący"
+  notes: "Wpisy"
+  overview: "Przegląd"
+  timeline: "Oś czasu"
+  media: "Zawartość multimedialna"
+  is-suspended: "To konto zostało zablokowane"
+  is-remote: "To jest użytkownik zdalnej instancji, informacje mogą nie być w pełni dokładne."
+  view-remote: "Wyświetl dokładne informacje"
+
+mobile/views/pages/user/home.vue:
+  recent-notes: "Ostatnie wpisy"
+  images: "Zdjęcia"
+  activity: "Aktywność"
+  keywords: "Słowa kluczowe"
+  domains: "Domeny"
+  frequently-replied-users: "Często aktywni użytkownicy"
+  followers-you-know: "Śledzący których znasz"
+  last-used-at: "Ostatnio aktywny:"
+
+mobile/views/pages/user/home.followers-you-know.vue:
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+mobile/views/pages/user/home.friends.vue:
+  loading: "Ładowanie"
+  no-users: "Brak użytkowników"
+
+mobile/views/pages/user/home.notes.vue:
+  loading: "Ładowanie"
+  no-notes: "Brak wpisów"
+
+mobile/views/pages/user/home.photos.vue:
+  loading: "Ładowanie"
+  no-photos: "Brak zdjęć"
+
+docs:
+  edit-this-page-on-github: "Znalazłeś błąd lub chcesz pomóc w tworzeniu dokumentacji?"
+  edit-this-page-on-github-link: "Edytuj stronę na GitHubie!"
+
+  api:
+    entities:
+      properties: "Właściwości"
+    endpoints:
+      params: "Parametry"
+      res: "Odpowiedź"
+    props:
+      name: "Nazwa"
+      type: "Rodzaj"
+      optional: "Nieobowiązkowy"
+      description: "Opis"
+      yes: "Tak"
+      no: "Nie"
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 77606d4254..9439ded2fc 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -83,6 +83,7 @@
 					<el-option label="ja-JP" value="ja"/>
 					<el-option label="en-US" value="en"/>
 					<el-option label="fr" value="fr"/>
+					<el-option label="pl" value="pl"/>
 				</el-option-group>
 			</el-select>
 			<div class="none ui info">
-- 
cgit v1.2.3-freya


From b5acf15877908a4b0e60324c1371aad623b5529d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 4 May 2018 16:27:03 +0900
Subject: 2.0.0

---
 migration/2.0.0.js                                 | 57 ++++++++++++++++++++++
 migration/2018-04-19.js                            | 49 -------------------
 package.json                                       |  4 +-
 .../app/common/views/components/media-list.vue     | 17 +++++--
 src/client/app/common/views/components/othello.vue | 16 +++---
 .../app/desktop/views/components/media-image.vue   | 12 ++++-
 .../app/desktop/views/components/media-video.vue   |  1 +
 .../app/desktop/views/components/note-detail.vue   |  2 +-
 .../app/desktop/views/components/note-preview.vue  |  1 +
 .../desktop/views/components/notes.note.sub.vue    |  1 +
 .../app/desktop/views/components/notes.note.vue    |  2 +-
 .../app/mobile/views/components/media-image.vue    | 12 ++++-
 .../mobile/views/components/note-detail.sub.vue    |  1 +
 .../app/mobile/views/components/note-detail.vue    |  2 +-
 .../app/mobile/views/components/note-preview.vue   |  1 +
 .../app/mobile/views/components/note.sub.vue       |  1 +
 src/client/app/mobile/views/components/note.vue    |  2 +-
 .../app/mobile/views/components/notification.vue   |  2 +-
 18 files changed, 109 insertions(+), 74 deletions(-)
 create mode 100644 migration/2.0.0.js
 delete mode 100644 migration/2018-04-19.js

(limited to 'src/client/app/desktop/views/components')

diff --git a/migration/2.0.0.js b/migration/2.0.0.js
new file mode 100644
index 0000000000..eb8f5730c7
--- /dev/null
+++ b/migration/2.0.0.js
@@ -0,0 +1,57 @@
+// for Node.js interpret
+
+const chalk = require('chalk');
+const sequential = require('promise-sequential');
+
+const { default: User } = require('../built/models/user');
+const { default: DriveFile } = require('../built/models/drive-file');
+
+async function main() {
+	const promiseGens = [];
+
+	const count = await DriveFile.count({});
+
+	let prev;
+
+	for (let i = 0; i < count; i++) {
+		promiseGens.push(() => {
+			const promise = new Promise(async (res, rej) => {
+				const file = await DriveFile.findOne(prev ? {
+					_id: { $gt: prev._id }
+				} : {}, {
+					sort: {
+						_id: 1
+					}
+				});
+
+				prev = file;
+
+				const user = await User.findOne({ _id: file.metadata.userId });
+
+				DriveFile.update({
+					_id: file._id
+				}, {
+					$set: {
+						'metadata._user': {
+							host: user.host
+						}
+					}
+				}).then(() => {
+					res([i, file]);
+				}).catch(rej);
+			});
+
+			promise.then(([i, file]) => {
+				console.log(chalk`{gray ${i}} {green done: {bold ${file._id}} ${file.filename}}`);
+			});
+
+			return promise;
+		});
+	}
+
+	return await sequential(promiseGens);
+}
+
+main().then(() => {
+	console.log('ALL DONE');
+}).catch(console.error);
diff --git a/migration/2018-04-19.js b/migration/2018-04-19.js
deleted file mode 100644
index b0df22c009..0000000000
--- a/migration/2018-04-19.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// for Node.js interpret
-
-const { default: User } = require('../built/models/user');
-const { default: Following } = require('../built/models/following');
-const { default: zip } = require('@prezzemolo/zip')
-
-const migrate = async (following) => {
-	const follower = await User.findOne({ _id: following.followerId });
-	const followee = await User.findOne({ _id: following.followeeId });
-	const result = await Following.update(following._id, {
-		$set: {
-			stalk: true,
-			_follower: {
-				host: follower.host,
-				inbox: follower.host != null ? follower.inbox : undefined
-			},
-			_followee: {
-				host: followee.host,
-				inbox: followee.host != null ? followee.inbox : undefined
-			}
-		}
-	});
-	return result.ok === 1;
-}
-
-async function main() {
-	const count = await Following.count({});
-
-	const dop = Number.parseInt(process.argv[2]) || 5
-	const idop = ((count - (count % dop)) / dop) + 1
-
-	return zip(
-		1,
-		async (time) => {
-			console.log(`${time} / ${idop}`)
-			const doc = await Following.find({}, {
-				limit: dop, skip: time * dop
-			})
-			return Promise.all(doc.map(migrate))
-		},
-		idop
-	).then(a => {
-		const rv = []
-		a.forEach(e => rv.push(...e))
-		return rv
-	})
-}
-
-main().then(console.dir).catch(console.error)
diff --git a/package.json b/package.json
index 1d6cf4b9e8..c29b9d5d8d 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "1.7.0",
-	"clientVersion": "1.0.5175",
+	"version": "2.0.0",
+	"clientVersion": "1.0.5184",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index 64172ad0b4..ff9d5e1022 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -2,7 +2,7 @@
 <div class="mk-media-list" :data-count="mediaList.length">
 	<template v-for="media in mediaList">
 		<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
-		<mk-media-image :image="media" :key="media.id" v-else />
+		<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
 	</template>
 </div>
 </template>
@@ -11,7 +11,14 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['mediaList'],
+	props: {
+		mediaList: {
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	}
 });
 </script>
 
@@ -23,7 +30,7 @@ export default Vue.extend({
 
 	@media (max-width 500px)
 		height 192px
-	
+
 	&[data-count="1"]
 		grid-template-rows 1fr
 	&[data-count="2"]
@@ -40,7 +47,7 @@ export default Vue.extend({
 	&[data-count="4"]
 		grid-template-columns 1fr 1fr
 		grid-template-rows 1fr 1fr
-	
+
 	:nth-child(1)
 		grid-column 1 / 2
 		grid-row 1 / 2
@@ -53,5 +60,5 @@ export default Vue.extend({
 	:nth-child(4)
 		grid-column 2 / 3
 		grid-row 2 / 3
-		
+
 </style>
diff --git a/src/client/app/common/views/components/othello.vue b/src/client/app/common/views/components/othello.vue
index 8f7d9dfd6a..fafa047255 100644
--- a/src/client/app/common/views/components/othello.vue
+++ b/src/client/app/common/views/components/othello.vue
@@ -31,7 +31,7 @@
 		<section v-if="invitations.length > 0">
 			<h2>対局の招待があります！:</h2>
 			<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
-				<img :src="`${i.parent.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="i.parent"/>
 				<span class="name"><b>{{ i.parent.name }}</b></span>
 				<span class="username">@{{ i.parent.username }}</span>
 				<mk-time :time="i.createdAt"/>
@@ -40,8 +40,8 @@
 		<section v-if="myGames.length > 0">
 			<h2>自分の対局</h2>
 			<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<img :src="`${g.user1.avatarUrl}?thumbnail&size=32`" alt="">
-				<img :src="`${g.user2.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="g.user1.avatarUrl"/>
+				<mk-avatar class="avatar" :user="g.user2.avatarUrl"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -49,8 +49,8 @@
 		<section v-if="games.length > 0">
 			<h2>みんなの対局</h2>
 			<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`">
-				<img :src="`${g.user1.avatarUrl}?thumbnail&size=32`" alt="">
-				<img :src="`${g.user2.avatarUrl}?thumbnail&size=32`" alt="">
+				<mk-avatar class="avatar" :user="g.user1.avatarUrl"/>
+				<mk-avatar class="avatar" :user="g.user2.avatarUrl"/>
 				<span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
 				<span class="state">{{ g.isEnded ? '終了' : '進行中' }}</span>
 			</a>
@@ -271,8 +271,7 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
 			border-radius 100%
 
 		> span
@@ -301,8 +300,7 @@ export default Vue.extend({
 		&:active
 			background #eee
 
-		> img
-			vertical-align bottom
+		> .avatar
 			border-radius 100%
 
 		> span
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 3d28d5149d..e5803cc36e 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -14,12 +14,20 @@ import Vue from 'vue';
 import MkMediaImageDialog from './media-image-dialog.vue';
 
 export default Vue.extend({
-	props: ['image'],
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	},
 	computed: {
 		style(): any {
 			return {
 				'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': `url(${this.image.url}?thumbnail&size=512)`
+				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
 			};
 		}
 	},
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 4fd955a821..3635941e64 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -52,6 +52,7 @@ export default Vue.extend({
 	width 100%
 	height 100%
 	border-radius 4px
+
 .mk-media-video-thumbnail
 	display flex
 	justify-content center
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 5d07dc90d4..a0e3915149 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -39,7 +39,7 @@
 				<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
 			</div>
 			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
+				<mk-media-list :media-list="p.media" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index 43eb159885..d04abfc5a7 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -53,6 +53,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			white-space nowrap
 
 			> .name
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 238fb03691..575d605203 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -65,6 +65,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 2px
 			white-space nowrap
 			line-height 21px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index b512f78eca..9adbfc0172 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -400,7 +400,7 @@ root(isDark)
 
 			> header
 				display flex
-				align-items center
+				align-items baseline
 				margin-bottom 4px
 				white-space nowrap
 
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index cfc2134988..92d1cdc6f5 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -6,12 +6,20 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['image'],
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	},
 	computed: {
 		style(): any {
 			return {
 				'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': `url(${this.image.url}?thumbnail&size=512)`
+				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
 			};
 		}
 	}
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
index 34ff06db30..e515fda8a6 100644
--- a/src/client/app/mobile/views/components/note-detail.sub.vue
+++ b/src/client/app/mobile/views/components/note-detail.sub.vue
@@ -55,6 +55,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 4px
 			white-space nowrap
 
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index b9bd9fe495..5a7226faac 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -37,7 +37,7 @@
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
 			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
+				<mk-media-list :media-list="p.media" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index e9fe9b1bdd..ec11f23315 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -49,6 +49,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 4px
 			white-space nowrap
 
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 251b377fb2..82025291da 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -69,6 +69,7 @@ root(isDark)
 
 		> header
 			display flex
+			align-items baseline
 			margin-bottom 2px
 			white-space nowrap
 
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index f3aab49bb0..401ffa278c 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -333,7 +333,7 @@ root(isDark)
 
 			> header
 				display flex
-				align-items center
+				align-items baseline
 				white-space nowrap
 
 				@media (min-width 500px)
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 13ca95075c..c1b37563ce 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -124,7 +124,7 @@ root(isDark)
 
 			> header
 				display flex
-				align-items center
+				align-items baseline
 				white-space nowrap
 
 				i, .mk-reaction-icon
-- 
cgit v1.2.3-freya


From c6492d3d587d8db5eb11fdb695d17d08f902bf36 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 6 May 2018 14:35:28 +0900
Subject: 誰もフォローしていないときはローカルタイムラインを表示するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/desktop/views/components/timeline.vue | 6 ++++++
 src/client/app/mobile/views/pages/home.vue           | 6 ++++++
 2 files changed, 12 insertions(+)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index bcfce299f4..855d032586 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -31,6 +31,12 @@ export default Vue.extend({
 		};
 	},
 
+	created() {
+		if ((this as any).os.i.followingCount == 0) {
+			this.src = 'local';
+		}
+	},
+
 	mounted() {
 		(this.$refs.tl as any).$once('loaded', () => {
 			this.$emit('loaded');
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index f69c4d9c68..ad6d5ed408 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -75,6 +75,12 @@ export default Vue.extend({
 		}
 	},
 
+	created() {
+		if ((this as any).os.i.followingCount == 0) {
+			this.src = 'local';
+		}
+	},
+
 	mounted() {
 		document.title = 'Misskey';
 
-- 
cgit v1.2.3-freya


From 1a6fd7d72eae326004bc5ddfad6c788b3f21ed1b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 6 May 2018 21:13:21 +0900
Subject: Fix ui glitch

---
 src/client/app/desktop/views/components/notes.note.vue | 2 +-
 src/client/app/mobile/views/components/note.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 9adbfc0172..057c3c0956 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -333,7 +333,7 @@ root(isDark)
 
 	> .renote
 		display flex
-		align-items baseline
+		align-items center
 		padding 16px 32px
 		line-height 28px
 		color #9dbb00
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 401ffa278c..d66f5a1016 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -252,7 +252,7 @@ root(isDark)
 
 	> .renote
 		display flex
-		align-items baseline
+		align-items center
 		padding 8px 16px
 		line-height 28px
 		color #9dbb00
-- 
cgit v1.2.3-freya


From de6cbf8a22edf64bf39806b04a0222da841b8375 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 7 May 2018 16:25:06 +0900
Subject: リモートアカウントの投稿に対しての返信にはメンションを付けるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/desktop/views/components/post-form.vue     | 24 ++++++++++------------
 .../app/mobile/views/components/post-form.vue      |  4 ++++
 2 files changed, 15 insertions(+), 13 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index ec220cc585..984fc9866c 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -105,21 +105,11 @@ export default Vue.extend({
 		}
 	},
 
-	watch: {
-		text() {
-			this.saveDraft();
-		},
-
-		poll() {
-			this.saveDraft();
-		},
-
-		files() {
-			this.saveDraft();
+	mounted() {
+		if (this.reply && this.reply.user.host != null) {
+			this.text = `@${this.reply.user.username}@${this.reply.user.host} `;
 		}
-	},
 
-	mounted() {
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
@@ -134,10 +124,18 @@ export default Vue.extend({
 				}
 				this.$emit('change-attached-media', this.files);
 			}
+
+			this.$nextTick(() => this.watch());
 		});
 	},
 
 	methods: {
+		watch() {
+			this.$watch('text', () => this.saveDraft());
+			this.$watch('poll', () => this.saveDraft());
+			this.$watch('files', () => this.saveDraft());
+		},
+
 		focus() {
 			(this.$refs.text as any).focus();
 		},
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 3f890223a3..e5281fcbc4 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -67,6 +67,10 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		if (this.reply && this.reply.user.host != null) {
+			this.text = `@${this.reply.user.username}@${this.reply.user.host} `;
+		}
+
 		this.$nextTick(() => {
 			this.focus();
 		});
-- 
cgit v1.2.3-freya


From 107d9fd2c800217b6945396e22d5154dd0085b4f Mon Sep 17 00:00:00 2001
From: mei23 <m@m544.net>
Date: Wed, 9 May 2018 04:56:07 +0900
Subject: Fix list load-more is not working

---
 src/client/app/desktop/views/components/user-list-timeline.vue | 2 +-
 src/client/app/mobile/views/components/user-list-timeline.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/src/client/app/desktop/views/components/user-list-timeline.vue b/src/client/app/desktop/views/components/user-list-timeline.vue
index ccdf8f64d2..59d6abbbc1 100644
--- a/src/client/app/desktop/views/components/user-list-timeline.vue
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
 		more() {
 			this.moreFetching = true;
 
-			(this as any).api('notes/list-timeline', {
+			(this as any).api('notes/user-list-timeline', {
 				listId: this.list.id,
 				limit: fetchLimit + 1,
 				untilId: (this.$refs.timeline as any).tail().id,
diff --git a/src/client/app/mobile/views/components/user-list-timeline.vue b/src/client/app/mobile/views/components/user-list-timeline.vue
index ccdf8f64d2..59d6abbbc1 100644
--- a/src/client/app/mobile/views/components/user-list-timeline.vue
+++ b/src/client/app/mobile/views/components/user-list-timeline.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
 		more() {
 			this.moreFetching = true;
 
-			(this as any).api('notes/list-timeline', {
+			(this as any).api('notes/user-list-timeline', {
 				listId: this.list.id,
 				limit: fetchLimit + 1,
 				untilId: (this.$refs.timeline as any).tail().id,
-- 
cgit v1.2.3-freya


From e127341228ebc8817f5a7a3458bc600c64224811 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 16 May 2018 08:22:07 +0900
Subject: i18n

---
 locales/en.yml                                       | 5 +++++
 locales/ja.yml                                       | 6 ++++++
 src/client/app/desktop/views/components/timeline.vue | 8 ++++----
 3 files changed, 15 insertions(+), 4 deletions(-)

(limited to 'src/client/app/desktop/views/components')

diff --git a/locales/en.yml b/locales/en.yml
index b664b2a9a9..9ffd232cb6 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -320,6 +320,11 @@ desktop/views/components/settings.profile.vue:
   description: "Description"
   birthday: "Birthday"
   save: "Update profile"
+desktop/views/components/timeline.vue:
+  home: "Home"
+  local: "Local"
+  global: "Global"
+  list: "List"
 desktop/views/components/ui.header.account.vue:
   profile: "Your profile"
   drive: "Drive"
diff --git a/locales/ja.yml b/locales/ja.yml
index e13348c407..85826110f0 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -366,6 +366,12 @@ desktop/views/components/settings.profile.vue:
   birthday: "誕生日"
   save: "保存"
 
+desktop/views/components/timeline.vue:
+  home: "ホーム"
+  local: "ローカル"
+  global: "グローバル"
+  list: "リスト"
+
 desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
   drive: "ドライブ"
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 855d032586..a776e40a24 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mk-timeline">
 	<header>
-		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
-		<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
-		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
+		<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
+		<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% %i18n:@local%</span>
+		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
-		<button @click="chooseList" title="リスト">%fa:list%</button>
+		<button @click="chooseList" title="%i18n:@list%">%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"/>
-- 
cgit v1.2.3-freya